:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-e5fe60e *//* =========================================
   CLOVE DRINKS HERO
   CINEMATIC KEN BURNS ANIMATION
   ========================================= */

.clove-drinks-hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    overflow: hidden;

    padding: 130px 30px 110px;

    background: #133E24;
}


/* =========================================
   ANIMATED BACKGROUND IMAGE
   ========================================= */

.clove-drinks-hero::before {
    content: "";

    position: absolute;

    inset: -6%;

    z-index: 0;

    background-image: url("https://clovespiice.com/wp-content/uploads/2026/09/Drinks-BG-Hero.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    transform: scale(1);

    animation:
        drinksHeroKenBurns
        8s
        ease-out
        infinite alternate;

    will-change: transform;
}


/* =========================================
   GREEN CINEMATIC OVERLAY
   ========================================= */

.clove-drinks-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            rgba(19, 62, 36, 0.68),
            rgba(19, 62, 36, 0.68)
        );

    pointer-events: none;
}


/* =========================================
   SLOW CINEMATIC MOVEMENT
   ========================================= */

@keyframes drinksHeroKenBurns {

    0% {
        transform:
            scale(1.04)
            translate3d(0, 0, 0);
    }

    35% {
        transform:
            scale(1.09)
            translate3d(-0.8%, -0.4%, 0);
    }

    70% {
        transform:
            scale(1.13)
            translate3d(0.7%, 0.5%, 0);
    }

    100% {
        transform:
            scale(1.08)
            translate3d(1%, -0.5%, 0);
    }

}


/* =========================================
   HERO CONTENT
   ========================================= */

.drinks-hero-content {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 850px;

    margin: 0 auto;
}


/* =========================================
   EYEBROW
   ========================================= */

.drinks-hero-tag {
    display: inline-block;

    margin-bottom: 24px;

    color: #EE771C;

    font-family: "Cormorant Garamond", serif;

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 6px;

    text-transform: uppercase;

    opacity: 0;

    animation:
        drinksHeroFadeUp
        1s
        ease-out
        0.2s
        forwards;
}


/* =========================================
   MAIN HEADING
   ========================================= */

.drinks-hero-content h1 {
    margin: 0 0 28px;

    color: #ffffff;

    font-family: "Harrington", serif;

    font-size: 86px;

    font-weight: 500;

    line-height: 1.02;

    opacity: 0;

    animation:
        drinksHeroFadeUp
        1.1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.45s
        forwards;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.drinks-hero-content p {
    max-width: 680px;

    margin: 0 auto;

    color: rgba(255,255,255,0.90);

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.85;

    opacity: 0;

    animation:
        drinksHeroFadeUp
        1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.75s
        forwards;
}


/* =========================================
   CATEGORY PILLS
   ========================================= */

.drinks-category-pills {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 42px;

    opacity: 0;

    animation:
        drinksHeroFadeUp
        1s
        cubic-bezier(0.22, 1, 0.36, 1)
        1s
        forwards;
}


.drink-pill {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 155px;

    padding: 14px 27px;

    border: 1px solid rgba(255,255,255,0.35);

    border-radius: 50px;

    background: rgba(255,255,255,0.08);

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-decoration: none !important;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


.drink-pill:link,
.drink-pill:visited,
.drink-pill:hover,
.drink-pill:active,
.drink-pill:focus {
    text-decoration: none !important;
}


.drink-pill:hover {
    background: #EE771C;

    border-color: #EE771C;

    color: #ffffff;

    transform: translateY(-3px);
}


/* =========================================
   TEXT REVEAL
   ========================================= */

@keyframes drinksHeroFadeUp {

    0% {
        opacity: 0;

        transform:
            translate3d(0, 28px, 0);
    }

    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);
    }

}


/* =========================================
   SCROLL INDICATOR
   ========================================= */

.drinks-scroll-indicator {
    position: absolute;

    left: 50%;

    bottom: 34px;

    z-index: 4;

    transform: translateX(-50%);

    animation:
        drinksScrollIndicator
        2.5s
        ease-in-out
        infinite;
}


.drinks-scroll-indicator span {
    position: relative;

    display: block;

    width: 27px;

    height: 45px;

    border: 1.5px solid rgba(255,255,255,0.55);

    border-radius: 20px;
}


.drinks-scroll-indicator span::before {
    content: "";

    position: absolute;

    top: 8px;

    left: 50%;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #EE771C;

    transform: translateX(-50%);

    animation:
        drinksScrollDown
        2s
        infinite;
}


@keyframes drinksScrollDown {

    0% {
        opacity: 1;

        top: 8px;
    }

    70% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;

        top: 27px;
    }

}


@keyframes drinksScrollIndicator {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(6px);
    }

}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .clove-drinks-hero {
        min-height: 85vh;

        padding: 120px 30px 100px;
    }

    .drinks-hero-content h1 {
        font-size: 64px;
    }

    .drinks-hero-tag {
        font-size: 21px;

        letter-spacing: 5px;
    }

    .drinks-hero-content p {
        font-size: 17px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .clove-drinks-hero {
        min-height: 88vh;

        padding: 105px 22px 90px;
    }


    .clove-drinks-hero::before {
        inset: -8%;

        animation-duration: 28s;

        background-position: center center;
    }


    .drinks-hero-tag {
        margin-bottom: 20px;

        font-size: 17px;

        letter-spacing: 4px;
    }


    .drinks-hero-content h1 {
        margin-bottom: 23px;

        font-size: 48px;

        line-height: 1.05;
    }


    .drinks-hero-content p {
        max-width: 420px;

        font-size: 15px;

        line-height: 1.75;
    }


    .drinks-category-pills {
        flex-direction: column;

        gap: 10px;

        margin-top: 32px;
    }


    .drink-pill {
        width: 230px;

        padding: 13px 20px;

        font-size: 12px;
    }


    .drinks-scroll-indicator {
        display: none;
    }

}


/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .clove-drinks-hero::before,
    .drinks-hero-tag,
    .drinks-hero-content h1,
    .drinks-hero-content p,
    .drinks-category-pills,
    .drinks-scroll-indicator,
    .drinks-scroll-indicator span::before {
        animation: none !important;
    }

    .drinks-hero-tag,
    .drinks-hero-content h1,
    .drinks-hero-content p,
    .drinks-category-pills {
        opacity: 1;
        transform: none;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fd201e1 *//* =========================================
   CLOVE DRINKS — INTRO SECTION
   ========================================= */

.clove-drinks-intro {
    position: relative;

    background: #F8F5EE;

    padding: 115px 30px 120px;

    text-align: center;

    overflow: hidden;
}


/* =========================================
   SUBTLE DECORATIVE BACKGROUND
   ========================================= */

.clove-drinks-intro::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -220px;
    top: 50%;

    transform: translateY(-50%);

    border: 1px solid rgba(19, 62, 36, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


.clove-drinks-intro::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -180px;
    top: 50%;

    transform: translateY(-50%);

    border: 1px solid rgba(238, 119, 28, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   INNER
   ========================================= */

.drinks-intro-inner {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0 auto;
}


/* =========================================
   EYEBROW
   ========================================= */

.drinks-intro-eyebrow {
    display: inline-block;

    margin-bottom: 22px;

    color: #EE771C;

    font-family: "Cormorant Garamond", serif;

    font-size: 21px;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;
}


/* =========================================
   HEADING
   ========================================= */

.drinks-intro-inner h2 {
    margin: 0;

    color: #133E24;

    font-family: "Harrington", serif;

    font-size: 64px;

    font-weight: 500;

    line-height: 1.08;
}


.drinks-intro-inner h2 span {
    color: #EE771C;
}


/* =========================================
   DIVIDER
   ========================================= */

.drinks-intro-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin: 34px auto 30px;

    max-width: 260px;
}


.drinks-intro-divider span {
    display: block;

    height: 1px;

    flex: 1;

    background: rgba(19, 62, 36, 0.25);
}


.drinks-intro-divider b {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(238, 119, 28, 0.45);

    border-radius: 50%;

    color: #EE771C;

    font-size: 13px;

    font-weight: 400;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.drinks-intro-inner p {
    max-width: 680px;

    margin: 0 auto;

    color: #555;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 1.9;

    font-weight: 400;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .clove-drinks-intro {
        padding: 95px 30px 100px;
    }

    .drinks-intro-inner h2 {
        font-size: 54px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .clove-drinks-intro {
        padding: 75px 22px 80px;
    }

    .drinks-intro-eyebrow {
        font-size: 17px;

        letter-spacing: 3px;

        margin-bottom: 18px;
    }

    .drinks-intro-inner h2 {
        font-size: 43px;

        line-height: 1.1;
    }

    .drinks-intro-divider {
        margin: 27px auto 24px;
    }

    .drinks-intro-inner p {
        font-size: 14px;

        line-height: 1.8;
    }

    .clove-drinks-intro::before {
        width: 250px;
        height: 250px;

        left: -170px;
    }

    .clove-drinks-intro::after {
        width: 220px;
        height: 220px;

        right: -150px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bf51af8 *//* =========================================
   CLOVE — SECTION 03
   MILKSHAKES
   ========================================= */

.clove-milkshakes-section {
    position: relative;

    padding: 120px 6%;

    background: #133E24;

    overflow: hidden;
}


/* -----------------------------------------
   SUBTLE DECORATIVE CIRCLE
   ----------------------------------------- */

.clove-milkshakes-section::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -260px;
    top: -180px;

    border: 1px solid rgba(255,255,255,0.07);

    border-radius: 50%;

    pointer-events: none;
}


/* -----------------------------------------
   LAYOUT
   ----------------------------------------- */

.clove-milkshakes-inner {
    position: relative;

    z-index: 2;

    max-width: 1280px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.95fr 1.05fr;

    gap: 90px;

    align-items: center;
}


/* =========================================
   CONTENT
   ========================================= */

.clove-milkshakes-content {
    max-width: 600px;
}


/* -----------------------------------------
   EYEBROW
   ----------------------------------------- */

.clove-milkshakes-eyebrow {
    display: inline-block;

    margin-bottom: 22px;

    color: #EE771C;

    font-family: "Cormorant Garamond", serif;

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* -----------------------------------------
   HEADING
   ----------------------------------------- */

.clove-milkshakes-content h2 {
    margin: 0 0 28px;

    color: #F8F5EE;

    font-family: "Harrington", serif;

    font-size: 64px;

    font-weight: 500;

    line-height: 1.06;
}


/* -----------------------------------------
   DESCRIPTION
   ----------------------------------------- */

.clove-milkshakes-description {
    max-width: 520px;

    margin: 0 0 42px;

    color: rgba(248,245,238,0.78);

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================
   MENU LIST
   ========================================= */

.clove-milkshakes-list {
    border-top: 1px solid rgba(248,245,238,0.20);
}


/* -----------------------------------------
   MENU ITEM
   ----------------------------------------- */

.clove-milkshake-item {
    display: grid;

    grid-template-columns: 45px 1fr;

    align-items: center;

    min-height: 68px;

    border-bottom: 1px solid rgba(248,245,238,0.20);

    transition:
        padding-left 0.3s ease,
        border-color 0.3s ease;
}


/* -----------------------------------------
   INDEX
   ----------------------------------------- */

.milkshake-index {
    color: #EE771C;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1px;
}


/* -----------------------------------------
   NAME
   ----------------------------------------- */

.milkshake-name {
    color: #F8F5EE;

    font-family: "Cormorant Garamond", serif;

    font-size: 25px;

    font-weight: 600;

    line-height: 1.2;

    transition: color 0.3s ease;
}


/* -----------------------------------------
   HOVER
   ----------------------------------------- */

.clove-milkshake-item:hover {
    padding-left: 10px;

    border-color: rgba(238,119,28,0.55);
}


.clove-milkshake-item:hover .milkshake-name {
    color: #EE771C;
}


/* =========================================
   VISUAL
   ========================================= */

.clove-milkshakes-visual {
    position: relative;

    width: 100%;

    min-height: 650px;
}


/* -----------------------------------------
   IMAGE
   ----------------------------------------- */

.clove-milkshakes-image {
    width: 100%;
    height: 650px;

    background-image:
        linear-gradient(
            rgba(19,62,36,0.08),
            rgba(19,62,36,0.08)
        ),
        url("https://clovespiice.com/wp-content/uploads/2026/09/Milkshake.png");

    background-size: cover;

    background-position: center;

    border-radius: 10px;
}


/* -----------------------------------------
   IMAGE LABEL
   ----------------------------------------- */

.clove-milkshakes-image-label {
    position: absolute;

    right: 25px;
    bottom: 25px;

    padding: 12px 20px;

    background: rgba(19,62,36,0.88);

    border: 1px solid rgba(255,255,255,0.18);

    border-radius: 50px;

    backdrop-filter: blur(8px);
}


.clove-milkshakes-image-label span {
    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .clove-milkshakes-section {
        padding: 95px 5%;
    }

    .clove-milkshakes-inner {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .clove-milkshakes-content {
        max-width: 760px;
    }

    .clove-milkshakes-content h2 {
        font-size: 56px;
    }

    .clove-milkshakes-visual {
        min-height: 520px;
    }

    .clove-milkshakes-image {
        height: 520px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .clove-milkshakes-section {
        padding: 75px 22px;
    }

    .clove-milkshakes-inner {
        gap: 45px;
    }

    .clove-milkshakes-eyebrow {
        font-size: 18px;

        letter-spacing: 3px;
    }

    .clove-milkshakes-content h2 {
        font-size: 43px;

        line-height: 1.08;
    }

    .clove-milkshakes-description {
        font-size: 14px;

        line-height: 1.8;

        margin-bottom: 32px;
    }

    .clove-milkshake-item {
        grid-template-columns: 34px 1fr;

        min-height: 62px;
    }

    .milkshake-name {
        font-size: 21px;
    }

    .clove-milkshakes-visual {
        min-height: 400px;
    }

    .clove-milkshakes-image {
        height: 400px;
    }

    .clove-milkshakes-image-label {
        right: 15px;
        bottom: 15px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5efb2a9 *//* =========================================
   CLOVE — SECTION 04
   SOFT DRINKS
   ========================================= */

.clove-soft-drinks-section {
    position: relative;

    padding: 120px 6%;

    background: #F8F5EE;

    overflow: hidden;
}


/* =========================================
   INNER
   ========================================= */

.clove-soft-drinks-inner {
    position: relative;

    z-index: 2;

    max-width: 1280px;

    margin: 0 auto;
}


/* =========================================
   HEADER
   ========================================= */

.clove-soft-drinks-header {
    display: grid;

    grid-template-columns: 1fr 0.65fr;

    align-items: end;

    gap: 80px;

    margin-bottom: 70px;
}


/* =========================================
   EYEBROW
   ========================================= */

.soft-drinks-eyebrow {
    display: block;

    margin-bottom: 20px;

    color: #EE771C;

    font-family: "Cormorant Garamond", serif;

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* =========================================
   HEADING
   ========================================= */

.clove-soft-drinks-header h2 {
    margin: 0;

    color: #133E24;

    font-family: "Cormorant Garamond", serif;

    font-size: 64px;

    font-weight: 500;

    line-height: 1.05;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.clove-soft-drinks-header > p {
    max-width: 430px;

    margin: 0 0 4px;

    color: #555;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================
   MENU GRID
   ========================================= */

.soft-drinks-menu {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(19,62,36,0.22);

    border-left: 1px solid rgba(19,62,36,0.22);
}


/* =========================================
   DRINK ITEM
   ========================================= */

.soft-drink-item {
    position: relative;

    min-height: 145px;

    padding: 25px 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-right: 1px solid rgba(19,62,36,0.22);

    border-bottom: 1px solid rgba(19,62,36,0.22);

    background: rgba(255,255,255,0.22);

    transition:
        background 0.35s ease,
        transform 0.35s ease;
}


/* =========================================
   NUMBER
   ========================================= */

.soft-drink-item span {
    color: #EE771C;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;
}


/* =========================================
   NAME
   ========================================= */

.soft-drink-item h3 {
    margin: 25px 0 0;

    color: #133E24;

    font-family: "Cormorant Garamond", serif;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.1;

    transition: color 0.3s ease;
}


/* =========================================
   HOVER
   ========================================= */

.soft-drink-item:hover {
    background: #133E24;

    transform: translateY(-3px);

    z-index: 2;
}


.soft-drink-item:hover h3 {
    color: #F8F5EE;
}


.soft-drink-item:hover span {
    color: #EE771C;
}


/* =========================================
   BOTTOM ACCENT
   ========================================= */

.soft-drinks-bottom {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 45px;
}


.soft-drinks-bottom span {
    width: 80px;

    height: 1px;

    background: rgba(19,62,36,0.25);
}


.soft-drinks-bottom p {
    margin: 0;

    color: #133E24;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .clove-soft-drinks-section {
        padding: 95px 5%;
    }

    .clove-soft-drinks-header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 55px;
    }

    .clove-soft-drinks-header h2 {
        font-size: 56px;
    }

    .clove-soft-drinks-header > p {
        max-width: 600px;
    }

    .soft-drinks-menu {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .clove-soft-drinks-section {
        padding: 75px 20px;
    }

    .soft-drinks-eyebrow {
        font-size: 18px;

        letter-spacing: 3px;
    }

    .clove-soft-drinks-header h2 {
        font-size: 43px;
    }

    .clove-soft-drinks-header > p {
        font-size: 14px;

        line-height: 1.8;
    }

    .soft-drinks-menu {
        grid-template-columns: 1fr;
    }

    .soft-drink-item {
        min-height: 105px;

        padding: 20px 22px;
    }

    .soft-drink-item h3 {
        margin-top: 18px;

        font-size: 25px;
    }

    .soft-drinks-bottom {
        margin-top: 35px;

        gap: 12px;
    }

    .soft-drinks-bottom span {
        width: 45px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3c4f9f3 *//* =========================================
   CLOVE — SECTION 05
   REFRESHMENTS
   ========================================= */

.clove-refreshments-section {
    position: relative;

    padding: 120px 6%;

    background: #133E24;

    overflow: hidden;
}


/* =========================================
   DECORATIVE ELEMENT
   ========================================= */

.clove-refreshments-section::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    left: -270px;
    bottom: -260px;

    border: 1px solid rgba(255,255,255,0.07);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   LAYOUT
   ========================================= */

.clove-refreshments-inner {
    position: relative;

    z-index: 2;

    max-width: 1280px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 0.9fr;

    gap: 90px;

    align-items: center;
}


/* =========================================
   CONTENT
   ========================================= */

.clove-refreshments-content {
    max-width: 620px;
}


/* =========================================
   EYEBROW
   ========================================= */

.refreshments-eyebrow {
    display: inline-block;

    margin-bottom: 22px;

    color: #EE771C;

    font-family: "Cormorant Garamond", serif;

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* =========================================
   HEADING
   ========================================= */

.clove-refreshments-content h2 {
    margin: 0 0 28px;

    color: #F8F5EE;

    font-family: "Cormorant Garamond", serif;

    font-size: 64px;

    font-weight: 500;

    line-height: 1.06;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.refreshments-description {
    max-width: 520px;

    margin: 0 0 45px;

    color: rgba(248,245,238,0.78);

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================
   REFRESHMENT LIST
   ========================================= */

.refreshments-list {
    border-top: 1px solid rgba(248,245,238,0.20);
}


/* =========================================
   ITEM
   ========================================= */

.refreshment-item {
    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 18px;

    padding: 25px 0;

    border-bottom: 1px solid rgba(248,245,238,0.20);

    transition: padding-left 0.3s ease;
}


/* =========================================
   NUMBER
   ========================================= */

.refreshment-number {
    padding-top: 5px;

    color: #EE771C;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;
}


/* =========================================
   ITEM TITLE
   ========================================= */

.refreshment-info h3 {
    margin: 0 0 7px;

    color: #F8F5EE;

    font-family: "Cormorant Garamond", serif;

    font-size: 29px;

    font-weight: 600;

    line-height: 1.15;

    transition: color 0.3s ease;
}


/* =========================================
   ITEM DESCRIPTION
   ========================================= */

.refreshment-info p {
    margin: 0;

    color: rgba(248,245,238,0.55);

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================
   HOVER
   ========================================= */

.refreshment-item:hover {
    padding-left: 10px;
}

.refreshment-item:hover .refreshment-info h3 {
    color: #EE771C;
}


/* =========================================
   VISUAL
   ========================================= */

.clove-refreshments-visual {
    position: relative;

    min-height: 620px;
}


/* =========================================
   IMAGE
   ========================================= */

.refreshments-image {
    width: 100%;
    height: 620px;

    background-image:
        linear-gradient(
            rgba(19,62,36,0.08),
            rgba(19,62,36,0.08)
        ),
        url("https://clovespiice.com/wp-content/uploads/2026/09/Refreshment.png");

    background-size: cover;

    background-position: center;

    border-radius: 10px;
}


/* =========================================
   IMAGE BADGE
   ========================================= */

.refreshments-image-badge {
    position: absolute;

    left: -25px;
    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 20px;

    background: #EE771C;

    color: #ffffff;

    border-radius: 5px;
}


.refreshments-image-badge span:last-child {
    font-family: "Poppins", sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.8px;

    line-height: 1.5;

    text-transform: uppercase;
}


.badge-symbol {
    font-size: 18px;

    line-height: 1;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .clove-refreshments-section {
        padding: 95px 5%;
    }

    .clove-refreshments-inner {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .clove-refreshments-content {
        max-width: 760px;
    }

    .clove-refreshments-content h2 {
        font-size: 56px;
    }

    .clove-refreshments-visual {
        min-height: 520px;
    }

    .refreshments-image {
        height: 520px;
    }

    .refreshments-image-badge {
        left: 20px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .clove-refreshments-section {
        padding: 75px 22px;
    }

    .clove-refreshments-inner {
        gap: 45px;
    }

    .refreshments-eyebrow {
        font-size: 18px;

        letter-spacing: 3px;
    }

    .clove-refreshments-content h2 {
        font-size: 43px;

        line-height: 1.08;
    }

    .refreshments-description {
        font-size: 14px;

        line-height: 1.8;

        margin-bottom: 32px;
    }

    .refreshment-item {
        grid-template-columns: 34px 1fr;

        gap: 10px;

        padding: 21px 0;
    }

    .refreshment-info h3 {
        font-size: 24px;
    }

    .refreshment-info p {
        font-size: 11px;
    }

    .clove-refreshments-visual {
        min-height: 400px;
    }

    .refreshments-image {
        height: 400px;
    }

    .refreshments-image-badge {
        left: 15px;
        bottom: 15px;

        padding: 12px 15px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-427e2e4c *//* =========================================
   CLOVE — PREMIUM SECTION DIVIDER
   ========================================= */

.clove-section-divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 2px 25px;
  background: #F8F5EE;
  box-sizing: border-box;
}

/* Lines */

.clove-divider-line {
  display: block;
  width: min(180px, 22vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(238,119,28,0.65)
  );
}

.clove-divider-line:last-child {
  background: linear-gradient(
    90deg,
    rgba(238,119,28,0.65),
    transparent
  );
}

/* Center Ornament */

.clove-divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #EE771C;

  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* Small decorative dots */

.clove-divider-ornament span {
  display: block;
  width: 5px;
  height: 5px;
  border: 1px solid #EE771C;
  border-radius: 50%;
  background: #F8F5EE;
}


/* =========================================
   DARK SECTION VERSION
   Add class: clove-divider-dark
   ========================================= */

.clove-divider-dark {
  background: #133E24;
}

.clove-divider-dark .clove-divider-line {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(248,245,238,0.45)
  );
}

.clove-divider-dark .clove-divider-line:last-child {
  background: linear-gradient(
    90deg,
    rgba(248,245,238,0.45),
    transparent
  );
}

.clove-divider-dark .clove-divider-ornament {
  color: #EE771C;
}

.clove-divider-dark .clove-divider-ornament span {
  border-color: #EE771C;
  background: #133E24;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

  .clove-section-divider {
    gap: 12px;
    padding: 22px 18px;
  }

  .clove-divider-line {
    width: 70px;
  }

  .clove-divider-ornament {
    gap: 8px;
    font-size: 20px;
  }

  .clove-divider-ornament span {
    width: 4px;
    height: 4px;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6dd5c84 *//* =========================================
   CLOVE DRINKS — FINAL CTA
   ========================================= */

.clove-drinks-cta {
    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 110px 30px;

    text-align: center;

    overflow: hidden;

    background-image:
        url("https://clovespiice.com/wp-content/uploads/2026/08/WhatsApp-Image-2026-08-17-at-2.40.52-AM-2.jpeg");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;
}


/* =========================================
   OVERLAY
   ========================================= */

.clove-drinks-cta-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(19, 62, 36, 0.82);

    pointer-events: none;
}


/* =========================================
   CONTENT
   ========================================= */

.clove-drinks-cta-content {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0 auto;
}


/* =========================================
   EYEBROW
   ========================================= */

.drinks-cta-eyebrow {
    display: inline-block;

    margin-bottom: 25px;

    color: #EE771C;

    font-family: "Cormorant Garamond", serif;

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;
}


/* =========================================
   HEADING
   ========================================= */

.clove-drinks-cta-content h2 {
    margin: 0 0 28px;

    color: #ffffff;

    font-family: "Cormorant Garamond", serif;

    font-size: 70px;

    font-weight: 500;

    line-height: 1.06;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.clove-drinks-cta-content p {
    max-width: 560px;

    margin: 0 auto;

    color: rgba(255,255,255,0.86);

    font-family: "Poppins", sans-serif;

    font-size: 17px;

    line-height: 1.8;
}


/* =========================================
   BUTTONS
   ========================================= */

.drinks-cta-buttons {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 42px;
}


/* =========================================
   PRIMARY
   ========================================= */

.drinks-cta-primary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 190px;

    padding: 16px 32px;

    border-radius: 50px;

    background: #EE771C;

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 0.5px;

    text-decoration: none !important;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.drinks-cta-primary:link,
.drinks-cta-primary:visited,
.drinks-cta-primary:hover,
.drinks-cta-primary:active,
.drinks-cta-primary:focus {
    text-decoration: none !important;
}


.drinks-cta-primary:hover {
    background: #d86412;

    color: #ffffff;

    transform: translateY(-3px);
}


/* =========================================
   SECONDARY
   ========================================= */

.drinks-cta-secondary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 190px;

    padding: 15px 32px;

    border: 1px solid rgba(255,255,255,0.45);

    border-radius: 50px;

    background: rgba(255,255,255,0.06);

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 0.5px;

    text-decoration: none !important;

    backdrop-filter: blur(8px);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.drinks-cta-secondary:link,
.drinks-cta-secondary:visited,
.drinks-cta-secondary:hover,
.drinks-cta-secondary:active,
.drinks-cta-secondary:focus {
    text-decoration: none !important;
}


.drinks-cta-secondary:hover {
    background: #ffffff;

    color: #133E24;

    transform: translateY(-3px);
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .clove-drinks-cta {
        min-height: 560px;

        padding: 100px 30px;

        background-attachment: scroll;
    }

    .clove-drinks-cta-content h2 {
        font-size: 58px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .clove-drinks-cta {
        min-height: 520px;

        padding: 80px 22px;
    }

    .drinks-cta-eyebrow {
        font-size: 17px;

        letter-spacing: 3px;

        margin-bottom: 20px;
    }

    .clove-drinks-cta-content h2 {
        font-size: 43px;

        line-height: 1.08;

        margin-bottom: 22px;
    }

    .clove-drinks-cta-content p {
        font-size: 14px;

        line-height: 1.8;
    }

    .drinks-cta-buttons {
        flex-direction: column;

        margin-top: 32px;
    }

    .drinks-cta-primary,
    .drinks-cta-secondary {
        width: 240px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5b6649b6 *//* =========================================
   CLOVE — PREMIUM SECTION DIVIDER
   ========================================= */

.clove-section-divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 2px 25px;
  background: #F8F5EE;
  box-sizing: border-box;
}

/* Lines */

.clove-divider-line {
  display: block;
  width: min(180px, 22vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(238,119,28,0.65)
  );
}

.clove-divider-line:last-child {
  background: linear-gradient(
    90deg,
    rgba(238,119,28,0.65),
    transparent
  );
}

/* Center Ornament */

.clove-divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #EE771C;

  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* Small decorative dots */

.clove-divider-ornament span {
  display: block;
  width: 5px;
  height: 5px;
  border: 1px solid #EE771C;
  border-radius: 50%;
  background: #F8F5EE;
}


/* =========================================
   DARK SECTION VERSION
   Add class: clove-divider-dark
   ========================================= */

.clove-divider-dark {
  background: #133E24;
}

.clove-divider-dark .clove-divider-line {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(248,245,238,0.45)
  );
}

.clove-divider-dark .clove-divider-line:last-child {
  background: linear-gradient(
    90deg,
    rgba(248,245,238,0.45),
    transparent
  );
}

.clove-divider-dark .clove-divider-ornament {
  color: #EE771C;
}

.clove-divider-dark .clove-divider-ornament span {
  border-color: #EE771C;
  background: #133E24;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

  .clove-section-divider {
    gap: 12px;
    padding: 22px 18px;
  }

  .clove-divider-line {
    width: 70px;
  }

  .clove-divider-ornament {
    gap: 8px;
    font-size: 20px;
  }

  .clove-divider-ornament span {
    width: 4px;
    height: 4px;
  }

}/* End custom CSS */