/*=========================================================
    BEAUTY PAGE
=========================================================*/

.beauty-page{
    width:100%;
    overflow:hidden;
    background:#f5eee2;
}

/*=========================================================
    BEAUTY HERO
=========================================================*/
/*
.beauty-hero{
    width:100%;
    background:#f5eee2;
    overflow:hidden;
}*/

.beauty-hero-image{
    width:100%;
    line-height:0;
}

.beauty-hero-image img{
    width:100%;
    height:auto;
    display:block;
}
/*=========================================================
    BEAUTY HERO
=========================================================*/

.beauty-hero{
    position:relative;
    width:100%;
    min-height:650px;
    background:#f5eee2;
    /*background:#ead4af;*/
    overflow:hidden;
}

.beauty-hero-inner{
    position:relative;
    width:100%;
    min-height:650px;
    display:flex;
}


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

.beauty-hero-content{
    position:relative;
    z-index:5;
    width:48%;
    padding:95px 30px 50px 7%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}


/*=========================================================
    HAND WRITTEN TEXT

    IMPORTANT:
    LEFT 50% AS REQUESTED
=========================================================*/

.beauty-hand-text{
    position:absolute;
    top:38px;
    left:60%;
    font-family:cursive;
    font-size:25px;
    line-height:1.05;
    font-weight:700;
    font-style:italic;
    transform:rotate(-7deg);
    color:#111;
    white-space:nowrap;
}

.beauty-hand-text span{
    font-size:28px;
}

.beauty-hand-arrow{
    margin-left:65px;
    margin-top:3px;
    font-size:34px;
    line-height:.8;
}


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

.beauty-hero-eyebrow{
    display:block;
    margin-bottom:8px;
    font-size:15px;
    line-height:1;
    font-weight:600;
    color:#111;
    letter-spacing:.3px;
}


/*=========================================================
    HERO TITLE
=========================================================*/

.beauty-hero-title{
    margin:0;
    color:#080808;
    font-size:clamp(58px,6.2vw,96px);
    line-height:.83;
    font-weight:950;
    letter-spacing:-4px;
    text-transform:uppercase;
}


/*=========================================================
    IN ACTION TEXT
=========================================================*/

.beauty-action-highlight{
    position:relative;
    display:inline-block;
    width:max-content;

    margin-top:-4px;
    padding:5px 17px 7px;

    color:#111;
    font-family:cursive;
    font-size:clamp(29px,3vw,45px);
    line-height:1;
    font-weight:700;
    font-style:italic;

    /* TEXT KO CLEARLY TIRCHA KAREGA */
    transform:rotate(-14deg) !important;
    transform-origin:center center;

    z-index:1;
}


/*=========================================================
    NEON HIGHLIGHT OVAL
=========================================================*/

.beauty-action-highlight:before{
    content:"";

    position:absolute;
    z-index:-1;

    left:-14px;
    right:-15px;
    top:-7px;
    bottom:-5px;

    border:4px solid #dfff00;
    border-radius:50%;

    transform:rotate(-3deg);
}


/*=========================================================
    NEON UNDERLINE
=========================================================*/

.beauty-action-highlight:after{
    content:"";
    position:absolute;
    z-index:-1;
    left:-5px;
    right:-10px;
    bottom:0;
    height:5px;
    background:#dfff00;
    transform:rotate(-3deg);
}

/*======================================*/
.beauty-polaroid-image iframe{
    width:100%;
    height:100%;
    display:block;
    border:0;
}

/*=========================================================
    HERO SUBTITLE
=========================================================*/

.beauty-hero-subtitle{
    margin:25px 0 4px;
    color:#111;
    font-size:20px;
    line-height:1.3;
    font-weight:600;
}

.beauty-hero-subtitle strong{
    position:relative;
    z-index:1;
    font-weight:800;
}

.beauty-hero-subtitle strong:after{
    content:"";
    position:absolute;
    z-index:-1;
    left:-4px;
    right:-5px;
    bottom:1px;
    height:11px;
    background:#dfff00;
    transform:rotate(-1deg);
}


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

.beauty-hero-description{
    margin:0;
    color:#222;
    font-size:15px;
    line-height:1.55;
}


/*=========================================================
    SHOP FRECKLE PEN BUTTON
=========================================================*/

.beauty-hero-button{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    width:190px;
    height:52px;
    margin-top:25px;
    padding:0 18px;
    background:#050505;
    color:#fff;
    text-decoration:none;
    border-radius:7px 14px 8px 13px;
    transform:rotate(-1deg);
    transition:all .3s ease;
    overflow:visible;
}


/*=========================================================
    BRUSH / ROUGH EDGES
=========================================================*/

.beauty-hero-button:before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-4px -7px -4px -7px;
    background:#050505;
    clip-path:polygon(
        2% 17%,
        8% 8%,
        18% 12%,
        29% 5%,
        40% 10%,
        53% 4%,
        65% 9%,
        78% 5%,
        91% 12%,
        98% 8%,
        96% 27%,
        100% 42%,
        96% 56%,
        99% 72%,
        92% 88%,
        79% 84%,
        66% 94%,
        52% 88%,
        39% 96%,
        27% 90%,
        15% 96%,
        5% 88%,
        8% 73%,
        1% 59%,
        5% 44%,
        1% 30%
    );
}


/*=========================================================
    BUTTON TEXT
=========================================================*/

.beauty-button-text{
    position:relative;
    z-index:2;
    color:#fff;
    font-family:Arial,sans-serif;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.2px;
    white-space:nowrap;
}


/*=========================================================
    BUTTON ARROW
=========================================================*/

.beauty-button-arrow{
    position:relative;
    z-index:2;
    color:#dfff00;
    font-family:Arial,sans-serif;
    font-size:25px;
    line-height:1;
    font-weight:400;
    transition:.3s ease;
}


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

.beauty-hero-button:hover{
    color:#fff;
    transform:rotate(-1deg) translateY(-3px);
}

.beauty-hero-button:hover .beauty-button-arrow{
    transform:translateX(5px);
}


/*=========================================================
    HERO FEATURES
=========================================================*/

.beauty-hero-features{
    display:flex;
    align-items:flex-start;
    gap:45px;
    margin-top:36px;
}

.beauty-hero-feature{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:75px;
    text-align:center;
}

.beauty-feature-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
    color:#111;
    font-size:28px;
}

.beauty-hero-feature span{
    color:#111;
    font-size:15px;
    line-height:1.35;
}


/*=========================================================
    HERO MODEL
=========================================================*/

.beauty-hero-model{
    position:relative;
    width:55%;
    min-height:650px;
    overflow:hidden;
}

.beauty-hero-model img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
}


/*=========================================================
    MODEL LEFT BLEND
=========================================================*/

.beauty-hero-model:after{
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    top:0;
    width:18%;
    height:100%;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        #f5eee2 0%,
        rgba(245,238,226,0) 100%
    );
}


/*=========================================================
    DOT / FLICK / OWN IT
=========================================================*/

.beauty-dot-text{
    position:absolute;
    z-index:10;
    left:8%;
    bottom:65px;
    width:145px;
    height:145px;
    border:2px solid #111;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#111;
    font-family:cursive;
    font-size:24px;
    line-height:.95;
    font-weight:700;
    transform:rotate(-8deg);
    background:rgba(245,238,226,.04);
}

.beauty-dot-text b{
    position:absolute;
    top:13px;
    right:17px;
    color:#111;
    font-size:26px;
    font-weight:400;
}


/*=========================================================
    VERTICAL AYURVEDIC BADGE
=========================================================*/

.beauty-vertical-badge{
    position:absolute;
    z-index:20;
    top:28%;
    right:0;
    width:55px;
    height:175px;
    display:flex;
    align-items:center;
    justify-content:center;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    background:#dfff00;
    color:#111;
    border-radius:15px 0 0 15px;
    font-size:9px;
    font-weight:900;
    letter-spacing:.7px;
}

.beauty-vertical-badge span{
    margin-bottom:8px;
    font-size:18px;
}


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

@media(max-width:991px){

    .beauty-hero,
    .beauty-hero-inner{
        min-height:570px;
    }

    .beauty-hero-content{
        width:52%;
        padding-left:5%;
        padding-top:75px;
    }

    .beauty-hero-model{
        width:48%;
        min-height:570px;
    }

    .beauty-hero-title{
        font-size:clamp(48px,7vw,72px);
    }

    .beauty-action-highlight{
        margin-left:70px;
        font-size:32px;
    }

    .beauty-hand-text{
        left:50%;
        font-size:20px;
    }

    .beauty-hero-features{
        gap:22px;
    }

}


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

@media(max-width:767px){

    .beauty-hero,
    .beauty-hero-inner{
        min-height:auto;
    }

    .beauty-hero-inner{
        display:block;
    }

    .beauty-hero-content{
        width:100%;
        min-height:500px;
        padding:80px 25px 35px;
    }

    .beauty-hand-text{
        top:25px;
        left:50%;
        font-size:19px;
    }

    .beauty-hand-arrow{
        margin-left:50px;
        font-size:27px;
    }

    .beauty-hero-title{
        font-size:58px;
        letter-spacing:-3px;
    }

    .beauty-action-highlight{
        margin-left:65px;
        font-size:30px;
    }

    .beauty-hero-subtitle{
        font-size:18px;
        margin-top:22px;
    }

    .beauty-hero-description{
        font-size:14px;
    }

    .beauty-hero-features{
        gap:12px;
        justify-content:space-between;
        margin-top:30px;
    }

    .beauty-hero-feature{
        flex:1;
    }

    .beauty-hero-model{
        width:100%;
        height:480px;
        min-height:480px;
    }

    .beauty-hero-model:after{
        width:100%;
        height:18%;
        background:linear-gradient(
            180deg,
            #f5eee2 0%,
            rgba(245,238,226,0) 100%
        );
    }

    .beauty-dot-text{
        left:8%;
        bottom:40px;
        width:115px;
        height:115px;
        font-size:19px;
    }

    .beauty-vertical-badge{
        width:45px;
        height:145px;
        top:35%;
        font-size:8px;
    }

    .beauty-hero-button{
        width:185px;
        height:50px;
    }

}


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

@media(max-width:480px){

    .beauty-hero-content{
        padding-left:18px;
        padding-right:18px;
    }

    .beauty-hero-title{
        font-size:49px;
    }

    .beauty-action-highlight{
        margin-left:50px;
        font-size:26px;
    }

    .beauty-hero-features{
        gap:8px;
    }

    .beauty-hero-feature span{
        font-size:8px;
    }

    .beauty-feature-icon{
        font-size:24px;
    }

}

/*========================================================*/
/*=========================================================
    ACTION SECTION
=========================================================*/

.beauty-action-section{
    /*clip-path: polygon(0% 2%, 4% 0%, 8% 2%, 12% 0%, 16% 2%, 20% 0%, 24% 2%, 28% 0%, 32% 2%, 36% 0%, 40% 2%, 44% 0%, 48% 2%, 52% 0%, 56% 2%, 60% 0%, 64% 2%, 68% 0%, 72% 2%, 76% 0%, 80% 2%, 84% 0%, 88% 2%, 92% 0%, 96% 2%, 100% 0%, 100% 98%, 96% 100%, 92% 98%, 88% 100%, 84% 98%, 80% 100%, 76% 98%, 72% 100%, 68% 98%, 64% 100%, 60% 98%, 56% 100%, 52% 98%, 48% 100%, 44% 98%, 40% 100%, 36% 98%, 32% 100%, 28% 98%, 24% 100%, 20% 98%, 16% 100%, 12% 98%, 8% 100%, 4% 98%, 0% 100%);*/
    position:relative;
    background:#800080;
    color:#fff;
    padding:42px 35px 48px;
    overflow:hidden;
}

.beauty-action-section:before{
    content:"";
    position:absolute;
    top:-12px;
    left:0;
    width:100%;
    height:22px;
    background:#800080;
    border-radius:50% 50% 0 0;
}

.beauty-action-heading{
    max-width:1400px;
    margin:0 auto 25px;
}

.beauty-action-heading h2{
    margin:0;
    font-size:30px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.5px;
    text-transform:uppercase;
}

.beauty-action-heading h2 span{
    color:#dfff00;
    font-style:italic;
    font-weight:500;
}

.beauty-action-heading h2 b{
    color:#dfff00;
    font-size:34px;
    font-weight:400;
}


/*=========================================================
    ACTION SLIDER / CARD WRAPPER
=========================================================*/

.beauty-action-wrapper{
    max-width:1450px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:18px;
}
/*=========================================================
    DESKTOP - STATIC FOUR CARD LAYOUT
=========================================================*/

.beauty-action-track{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    gap:0;
    transition:none;
    overflow:visible;
}


/*=========================================================
    ACTION CARD
=========================================================*/
.beauty-action-card{
    position:relative;

    flex:0 0 calc(25% - 8px);

    min-width:0;

    margin-left:5px;

    transition:
        transform .35s ease,
        z-index .35s ease;
}

.beauty-action-card:first-child{
    margin-left:0;
}


/*=========================================================
    POLAROID DEPTH ORDER
=========================================================*/

.beauty-action-card:nth-child(1){
    z-index:1;
}

.beauty-action-card:nth-child(2){
    z-index:2;
}

.beauty-action-card:nth-child(3){
    z-index:3;
}

.beauty-action-card:nth-child(4){
    z-index:4;
}


/*=========================================================
    POLAROID FRAME
=========================================================*/

.beauty-polaroid{
    position:relative;

    width:100%;

    background:#f8f3e9;

    padding:11px 11px 0;

    box-shadow:
        0 8px 18px rgba(0,0,0,.25),
        0 2px 5px rgba(0,0,0,.10);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

    overflow:hidden;
}


/*=========================================================
    CARD 1 - LEFT TILT
=========================================================*/

.beauty-action-card:nth-child(1) .beauty-polaroid{
    transform:
        translateY(7px)
        rotate(-7deg);
}


/*=========================================================
    CARD 2 - LIGHT RIGHT TILT
=========================================================*/

.beauty-action-card:nth-child(2) .beauty-polaroid{
    transform:
        translateY(-5px)
        rotate(2deg);
}


/*=========================================================
    CARD 3 - LEFT TILT
=========================================================*/

.beauty-action-card:nth-child(3) .beauty-polaroid{
    transform:
        translateY(5px)
        rotate(-5deg);
}


/*=========================================================
    CARD 4 - RIGHT TILT
=========================================================*/

.beauty-action-card:nth-child(4) .beauty-polaroid{
    transform:
        translateY(-7px)
        rotate(7deg);
}


/*=========================================================
    REMOVE TOP POLAROID TITLE
=========================================================*/

.beauty-polaroid-title{
    display:none;
}


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

.beauty-polaroid-image{
    position:relative;

    width:100%;

    aspect-ratio:1.16 / 1;

    overflow:hidden;

    background:#ddd;
}


.beauty-polaroid-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .5s ease;
}


/*=========================================================
    LARGE BOTTOM POLAROID SPACE
=========================================================*/

.beauty-polaroid-bottom{
    width:100%;

    height:100px;

    background:#f8f3e9;
}


/*=========================================================
    POLAROID PAPER DETAIL
=========================================================*/

.beauty-polaroid:after{
    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(0,0,0,.04);

    pointer-events:none;
}


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

.beauty-action-card:hover{
    z-index:20;
}

.beauty-action-card:hover .beauty-polaroid{
    transform:
        translateY(-15px)
        rotate(0deg);

    box-shadow:
        0 20px 35px rgba(0,0,0,.32),
        0 5px 10px rgba(0,0,0,.12);
}

.beauty-action-card:hover .beauty-polaroid-image img{
    transform:scale(1.03);
}
/*=========================================================
    RANDOM POLAROID BOUNCE
=========================================================*/

.beauty-action-card.beauty-card-bounce{
    animation:beautyPolaroidBounce 1.1s ease-in-out;
}


/*=========================================================
    POLAROID BOUNCE ANIMATION
=========================================================*/

@keyframes beautyPolaroidBounce{

    0%{
        filter:blur(0);
    }

    18%{
        transform:translateY(-8px);
        filter:blur(.4px);
    }

    38%{
        transform:translateY(-24px);
        filter:blur(1.2px);
    }

    55%{
        transform:translateY(-28px);
        filter:blur(1.4px);
    }

    70%{
        transform:translateY(-12px);
        filter:blur(.7px);
    }

    84%{
        transform:translateY(3px);
        filter:blur(.2px);
    }

    100%{
        transform:translateY(0);
        filter:blur(0);
    }

}
/*=========================================================
    ACTION SLIDER
=========================================================*/

.beauty-action-slider{
    width:100%;
    overflow:visible;
}

/*=========================================================
    SLIDER BUTTONS
    DESKTOP PAR HIDE
=========================================================*/

.beauty-slider-btn{
    display:none;
}


/*=========================================================
    ACTION BOTTOM
=========================================================*/

.beauty-action-bottom{
    max-width:1450px;
    margin:25px auto 0;
}

.beauty-action-content{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:40px;
    margin-top:8px;
}

.beauty-freedom-text h3{
    font-family: cursive;
    margin:0 0 7px;
    color:#dfff00;
    font-size:20px;
    /*font-weight:800;*/
    font-style:italic;
}

.beauty-freedom-text p{
    margin:0;

    font-size:16px;

    line-height:1.6;

    color:#fff;
}

.beauty-freedom-text p span{
    color:#dfff00;

    font-weight:700;
}


/*=========================================================
    SHOP NOW BUTTON
=========================================================*/

.beauty-shop-button{
    clip-path:polygon(
        2% 17%,
        8% 8%,
        18% 12%,
        29% 5%,
        40% 10%,
        53% 4%,
        65% 9%,
        78% 5%,
        91% 12%,
        98% 8%,
        96% 27%,
        100% 42%,
        96% 56%,
        99% 72%,
        92% 88%,
        79% 84%,
        66% 94%,
        52% 88%,
        39% 96%,
        27% 90%,
        15% 96%,
        5% 88%,
        8% 73%,
        1% 59%,
        5% 44%,
        1% 30%
    );
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    min-width:155px;
    padding:15px 23px;
    border-radius:30px;
    background:#dfff00;
    color:#000;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    transition:.3s ease;
}

.beauty-shop-button:hover{
    background:#fff;

    color:#000;

    transform:translateY(-3px);
}


/*=========================================================
    ACTION DOTS
=========================================================*/

.beauty-slider-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    margin-top:20px;
}

.beauty-slider-dots button{
    width:10px;
    height:10px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#777;
}

.beauty-slider-dots button.active{
    background:#dfff00;
    transform:scale(1.15);
}


/*=========================================================
    MOBILE - TWO CARD SLIDER
=========================================================*/

@media(max-width:767px){

    .beauty-action-wrapper{
        display:block;
        width:100%;
        overflow:hidden;
    }


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

    .beauty-action-slider{
        width:100%;
        overflow:hidden;
        touch-action:pan-y;
    }


    .beauty-action-track{
        display:flex;
        justify-content:flex-start;
        align-items:center;
        width:100%;
        gap:0;
        transition:transform .45s ease;
        will-change:transform;
    }


    /*=====================================================
        TWO CARDS VISIBLE
    =====================================================*/

    .beauty-action-card{
        flex:0 0 calc(50% + 5px);
        min-width:calc(50% + 5px);
        margin-left:-10px;
    }

    .beauty-action-card:first-child{
        margin-left:0;
    }


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

    .beauty-action-card:nth-child(1){
        z-index:1;
    }

    .beauty-action-card:nth-child(2){
        z-index:2;
    }

    .beauty-action-card:nth-child(3){
        z-index:3;
    }

    .beauty-action-card:nth-child(4){
        z-index:4;
    }


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

    .beauty-polaroid{
        padding:8px 8px 0;

        box-shadow:
            0 6px 14px rgba(0,0,0,.23);
    }


    /*=====================================================
        MOBILE CARD ANGLES
    =====================================================*/

    .beauty-action-card:nth-child(1) .beauty-polaroid{
        transform:
            translateY(4px)
            rotate(-5deg);
    }

    .beauty-action-card:nth-child(2) .beauty-polaroid{
        transform:
            translateY(-3px)
            rotate(2deg);
    }

    .beauty-action-card:nth-child(3) .beauty-polaroid{
        transform:
            translateY(3px)
            rotate(-4deg);
    }

    .beauty-action-card:nth-child(4) .beauty-polaroid{
        transform:
            translateY(-5px)
            rotate(5deg);
    }


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

    .beauty-polaroid-image{
        aspect-ratio:1.05 / 1;
    }


    /*=====================================================
        MOBILE BOTTOM FRAME
    =====================================================*/

    .beauty-polaroid-bottom{
        height:55px;
    }


    /*=====================================================
        ACTION BOTTOM
    =====================================================*/

    .beauty-action-bottom{
        margin-top:22px;
    }


    .beauty-action-content{
        gap:20px;
    }

}


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

@media(max-width:480px){

    .beauty-action-card{
        flex:0 0 calc(50% + 3px);

        min-width:calc(50% + 3px);

        margin-left:-8px;
    }

    .beauty-polaroid{
        padding:7px 7px 0;
    }

    .beauty-polaroid-bottom{
        height:50px;
    }

}


/*=========================================================
    REVIEWS SECTION
=========================================================*/

.beauty-reviews-section{
    background:#050505;
    color:#fff;
    padding:10px 35px 48px;
    border-top:1px solid rgba(255,255,255,.15);
}

.beauty-review-heading{
    padding-left:15px;
}

.beauty-review-heading h2{
    margin:0;
    font-size:34px;
    line-height:1.05;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:-1px;
}

.beauty-review-heading span{
    color:#dfff00;
    font-size:38px;
}


/*=========================================================
    REVIEW SLIDER
=========================================================*/

.beauty-review-wrapper{
    display:flex;
    align-items:center;
    gap:15px;
}

.beauty-review-slider{
    width:100%;
    overflow:hidden;
}

.beauty-review-track{
    display:flex;
    gap:18px;
    transition:transform .5s ease;
}

.beauty-review-card{
    position:relative;
    flex:0 0 calc(33.333% - 12px);
    min-height:165px;
    padding:22px 22px 30px;
    background:#f6f1e8;
    border-radius:15px;
    color:#111;
    box-shadow:0 7px 20px rgba(0,0,0,.3);
}

.beauty-review-top{
    display:flex;
    align-items:center;
    gap:13px;
}

.beauty-review-avatar{
    width:48px;
    height:48px;
    flex:0 0 48px;
    border-radius:50%;
    overflow:hidden;
}

.beauty-review-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.beauty-review-card h4{
    margin:0 0 4px;
    font-size:14px;
    font-weight:800;
}

.beauty-stars{
    color:#cce600;
    font-size:14px;
    letter-spacing:1px;
}

.beauty-review-card p{
    margin:20px 0 0;
    font-size:14px;
    line-height:1.55;
    max-width:90%;
}

.beauty-review-heart{
    position:absolute;
    right:18px;
    bottom:13px;
    font-size:28px;
    line-height:1;
}


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

.beauty-review-btn{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:18px;
    transition:.3s ease;
}

.beauty-review-btn:hover{
    color:#dfff00;
}


/*=========================================================
    REVIEW DOTS
=========================================================*/

.beauty-review-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:22px;
}

.beauty-review-dots button{
    width:10px;
    height:10px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#777;
}

.beauty-review-dots button.active{
    background:#dfff00;
}


/*=========================================================
    BENEFITS SECTION
=========================================================*/

.beauty-benefits-section{
    background:#f5eee2;
    padding:42px 25px;
}

.beauty-benefit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.beauty-benefit-icon{
    font-size:38px;
    color:#111;
    min-width:50px;
    text-align:center;
}

.beauty-benefit h3{
    margin:0 0 4px;
    font-size:16px;
    font-weight:900;
}

.beauty-benefit p{
    margin:0;
    font-size:14px;
    color:#222;
}


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

@media(max-width:991px){

    .beauty-action-section,
    .beauty-reviews-section{
        padding-left:20px;
        padding-right:20px;
    }

    .beauty-action-card{
        flex:0 0 calc(50% - 10px);
    }

    .beauty-review-heading{
        padding-left:0;
        text-align:center;
        margin-bottom:20px;
    }

    .beauty-review-card{
        flex:0 0 calc(50% - 9px);
    }

    .beauty-action-content{
        justify-content:center;
    }

}


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

@media(max-width:767px){

    .beauty-action-section{
        padding:30px 12px 38px;
    }

    .beauty-action-heading{
        margin-bottom:18px;
    }

    .beauty-action-heading h2{
        font-size:23px;
    }

    .beauty-action-heading h2 b{
        font-size:27px;
    }

    .beauty-action-wrapper{
        gap:4px;
    }

    .beauty-action-card{
        flex:0 0 82%;
    }

    .beauty-slider-btn{
        width:32px;
        height:32px;
        flex-basis:32px;
        font-size:15px;
    }

    .beauty-action-content{
        flex-direction:column;
        gap:18px;
        align-items:center;
        text-align:center;
    }

    .beauty-freedom-text h3{
        font-size:17px;
    }

    .beauty-reviews-section{
        padding:25px 12px 35px;
    }

    .beauty-review-heading h2{
        font-size:29px;
    }

    .beauty-review-wrapper{
        gap:3px;
    }

    .beauty-review-card{
        flex:0 0 88%;
        min-height:155px;
    }

    .beauty-review-btn{
        width:28px;
        flex-basis:28px;
        font-size:15px;
    }

    .beauty-benefits-section{
        padding:30px 20px;
    }

    .beauty-benefit{
        justify-content:flex-start;
    }

}


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

@media(max-width:480px){

    .beauty-polaroid{
        padding:10px 10px 15px;
    }

    .beauty-polaroid-title{
        font-size:13px;
    }

    .beauty-review-card{
        padding:18px;
    }

    .beauty-review-card p{
        font-size:13px;
    }

}
/*=========================================================
    FACE MIST HERO
=========================================================*/

.face-mist-hero{
    background:#d9c5e5;
}


/*=========================================================
    FACE MIST HAND TEXT
=========================================================*/

.face-mist-hand-text{
    color:#24142b;
}


/*=========================================================
    FACE MIST ACTION HIGHLIGHT
=========================================================*/

.face-mist-action-highlight{
    color:#24142b;
    transform:rotate(-10deg) !important;
}

.face-mist-action-highlight:before{
    border-color:#9a55c7;
}

.face-mist-action-highlight:after{
    background:#9a55c7;
}


/*=========================================================
    FACE MIST SUBTITLE
=========================================================*/

.face-mist-subtitle{
    color:#24142b;
}

.face-mist-subtitle strong:after{
    background:#b98bd2;
}


/*=========================================================
    FACE MIST BUTTON
=========================================================*/

.face-mist-button:before{
    background:#050505;
}

.face-mist-button:hover{
    background:#050505;
}

.face-mist-button .beauty-button-arrow{
    color:#c58de0;
}


/*=========================================================
    FACE MIST HERO FEATURES
=========================================================*/

.face-mist-hero .beauty-feature-icon,
.face-mist-hero .beauty-hero-feature span{
    color:#24142b;
}


/*=========================================================
    FACE MIST HERO MODEL
=========================================================*/

.face-mist-hero-model{
    background:#c9b1d8;
}


/*=========================================================
    FACE MIST MODEL BLEND
=========================================================*/

.face-mist-hero-model:after{
    background:linear-gradient(
        90deg,
        #d9c5e5 0%,
        rgba(217,197,229,0) 100%
    );
}


/*=========================================================
    FACE MIST VERTICAL BADGE
=========================================================*/

.face-mist-vertical-badge{
    background:#a755c9;
    color:#fff;
}


/*=========================================================
    FACE MIST DECORATIVE DROPS
=========================================================*/

.face-mist-drops{
    position:absolute;
    z-index:10;
    top:12%;
    left:20%;
    display:flex;
    gap:20px;
    color:rgba(255,255,255,.75);
    font-size:34px;
    transform:rotate(-15deg);
}

.face-mist-drops span:nth-child(2){
    margin-top:30px;
}

.face-mist-drops span:nth-child(3){
    margin-top:10px;
}

/*=========================================================
    FACE MIST ACTION SECTION COLOR
=========================================================*/

.face-mist-action-section{
    background:linear-gradient(
    135deg,
    #b184d0 0%,
    #7b4aa8 50%,
    #6f4394 100%
);
}

.face-mist-action-section:before{
    background:#7b4aa8;
}


/*=========================================================
    FACE MIST ACTION HEADING
=========================================================*/

.face-mist-action-section .beauty-action-heading h2 span{
    color:#e8c8ff;
}

.face-mist-action-section .beauty-action-heading h2 b{
    color:#e8c8ff;
}


/*=========================================================
    FACE MIST ACTION CONTENT
=========================================================*/

.face-mist-action-section .beauty-freedom-text h3{
    color:#e8c8ff;
}

.face-mist-action-section .beauty-freedom-text p span{
    color:#e8c8ff;
}


/*=========================================================
    FACE MIST SHOP BUTTON
=========================================================*/

.face-mist-action-section .beauty-shop-button{
    background:#e8c8ff;
    color:#24142b;
}

.face-mist-action-section .beauty-shop-button:hover{
    background:#fff;
    color:#24142b;
}


/*=========================================================
    FACE MIST MOBILE DOT
=========================================================*/

.face-mist-action-section .beauty-slider-dots button.active{
    background:#e8c8ff;
}
/*=========================================================
    FACE MIST REVIEWS
=========================================================*/

.face-mist-reviews-section{
    background:#050505;
}


/*=========================================================
    FACE MIST REVIEW HEADING
=========================================================*/

.face-mist-reviews-section .beauty-review-heading span{
    color:#c98be8;
}


/*=========================================================
    FACE MIST REVIEW STARS
=========================================================*/

.face-mist-reviews-section .beauty-stars{
    color:#c98be8;
}


/*=========================================================
    FACE MIST REVIEW HEART
=========================================================*/

.face-mist-reviews-section .beauty-review-heart{
    color:#b96ed8;
}


/*=========================================================
    FACE MIST REVIEW ARROWS
=========================================================*/

.face-mist-reviews-section .beauty-review-btn:hover{
    color:#c98be8;
}


/*=========================================================
    FACE MIST REVIEW DOTS
=========================================================*/

.face-mist-reviews-section .beauty-review-dots button.active{
    background:#c98be8;
}

/*=========================================================
    FEEL GOOD / GLOW DIFFERENT SECTION
=========================================================*/

.beauty-glow-section{
    position:relative;
    width:100%;
    background:#f4edf8;
    padding:60px 35px;
    overflow:hidden;
}


/*=========================================================
    MAIN WRAPPER
=========================================================*/

.beauty-glow-wrapper{
    width:100%;
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:.82fr 1.1fr .82fr;

    align-items:center;

    gap:24px;
}


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

.beauty-glow-image{
    position:relative;

    width:100%;
    height:350px;

    overflow:hidden;

    background:#eadff0;

    box-shadow:
        0 14px 30px rgba(58,34,70,.12);
}


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

.beauty-glow-left{
    border-radius:85px 16px 16px 16px;

    transform:rotate(-3deg);
}


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

.beauty-glow-right{
    border-radius:16px 85px 16px 16px;

    transform:rotate(3deg);
}


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

.beauty-glow-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .5s ease;
}

.beauty-glow-image:hover img{
    transform:scale(1.04);
}


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

.beauty-glow-content{
    position:relative;

    z-index:3;

    text-align:center;

    padding:20px 25px;
}


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

.beauty-glow-eyebrow{
    display:block;

    margin-bottom:17px;

    color:#8b5aa8;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;
}


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

.beauty-glow-content h2{
    margin:0;

    color:#24172b;

    font-size:clamp(38px,4vw,60px);

    line-height:.98;

    font-weight:800;

    letter-spacing:-2px;

    text-transform:uppercase;
}

.beauty-glow-content h2 span{
    color:#955db3;

    font-style:italic;

    font-family:cursive;

    font-weight:700;

    text-transform:none;
}


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

.beauty-glow-content p{
    max-width:390px;

    margin:22px auto 0;

    color:#5b4a60;

    font-size:14px;

    line-height:1.65;
}


/*=========================================================
    DECORATIVE LINE
=========================================================*/

.beauty-glow-line{
    width:55px;

    height:3px;

    margin:20px auto 15px;

    background:#9c65b8;

    border-radius:20px;
}


/*=========================================================
    SMALL TEXT
=========================================================*/

.beauty-glow-small-text{
    display:block;

    color:#8a6a94;

    font-size:9px;

    font-weight:800;

    letter-spacing:2px;
}


/*=========================================================
    BUTTON
=========================================================*/

.beauty-glow-button{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:23px;

    padding:13px 22px;

    background:#24172b;

    color:#fff;

    border-radius:40px;

    text-decoration:none;

    font-size:10px;

    font-weight:800;

    letter-spacing:.5px;

    transition:all .3s ease;
}

.beauty-glow-button span{
    color:#dfff00;

    font-size:19px;

    line-height:0;

    transition:.3s ease;
}

.beauty-glow-button:hover{
    transform:translateY(-3px);

    background:#8e58aa;

    color:#fff;
}

.beauty-glow-button:hover span{
    transform:translateX(4px);
}


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

@media(max-width:991px){

    .beauty-glow-section{
        padding:50px 20px;
    }

    .beauty-glow-wrapper{
        grid-template-columns:.85fr 1.1fr .85fr;

        gap:15px;
    }

    .beauty-glow-image{
        height:300px;
    }

    .beauty-glow-content{
        padding:10px;
    }

    .beauty-glow-content h2{
        font-size:40px;
    }

}


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

@media(max-width:767px){

    .beauty-glow-section{
        padding:42px 18px;
    }

    .beauty-glow-wrapper{
        grid-template-columns:1fr;

        gap:24px;
    }

    .beauty-glow-content{
        order:1;

        padding:8px;
    }

    .beauty-glow-left{
        order:2;
    }

    .beauty-glow-right{
        order:3;
    }

    .beauty-glow-image{
        height:280px;

        transform:none;
    }

    .beauty-glow-content h2{
        font-size:40px;

        letter-spacing:-1.5px;
    }

    .beauty-glow-content p{
        font-size:13px;

        max-width:330px;
    }

}


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

@media(max-width:480px){

    .beauty-glow-section{
        padding:32px 15px;
    }

    .beauty-glow-content h2{
        font-size:34px;
    }

    .beauty-glow-content p{
        font-size:13px;
    }

    .beauty-glow-image{
        height:245px;
    }

    .beauty-glow-left{
        border-radius:60px 12px 12px 12px;
    }

    .beauty-glow-right{
        border-radius:12px 60px 12px 12px;
    }

}

/*===============================================*/
/*=========================================================
    HEALTH PRODUCT SECTIONS
=========================================================*/

.health-product-section {

    width: 100%;
    overflow: hidden;

    border-top: 2px solid #536b45;

}


.health-product-inner {

    position: relative;

    min-height: 480px;

    display: grid;

    grid-template-columns:
        minmax(500px, 1fr)
        minmax(500px, 1fr);

    align-items: center;

    padding: 45px 7%;

}


/*=========================================================
    KARELA BACKGROUND
=========================================================*/

.health-karela-section {
background: linear-gradient(
    135deg,
    #F8F2FF 0%,
    #EDE0F8 55%,
    #DFC9F0 100%
);

color: #68477F;

}


/*=========================================================
    SEA BUCKTHORN BACKGROUND
=========================================================*/

.health-sea-section {

    background:
        linear-gradient(
            135deg,
            #fff6df 0%,
            #f7e8c5 55%,
            #f1dcae 100%
        );

    color: #23442c;

}


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

.health-product-content {

    position: relative;

    z-index: 3;

    max-width: 620px;

}


.health-eyebrow {

    display: block;

    margin-bottom: 5px;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 1px;

}


.health-product-title {

    margin: 0;

    font-size: clamp(52px, 5vw, 82px);

    line-height: .88;

    font-weight: 900;

    letter-spacing: -3px;

}


.health-product-subtitle {

    margin-top: 28px;
    margin-bottom: 7px;

    font-size: 21px;

    font-weight: 500;

}


.health-product-subtitle strong {

    font-weight: 900;

}


.health-product-description {

    margin-bottom: 25px;

    font-size: 16px;

    line-height: 1.55;

}
/*=========================================================
    HANDWRITTEN HIGHLIGHT
=========================================================*/
.health-hand-highlight {
    position: absolute;
    left: 350px;
    padding: 8px 20px;
    border: 2px solid #536b45;
    border-radius: 50%;
    transform: rotate(-8deg);
    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;
    font-size: 20px;
    line-height: 1;
}
/*=========================================================
    SHOP BUTTON
=========================================================*/

.health-shop-button {
    clip-path: polygon(2% 17%, 8% 8%, 18% 12%, 29% 5%, 40% 10%, 53% 4%, 65% 9%, 78% 5%, 91% 12%, 98% 8%, 96% 27%, 100% 42%, 96% 56%, 99% 72%, 92% 88%, 79% 84%, 66% 94%, 52% 88%, 39% 96%, 27% 90%, 15% 96%, 5% 88%, 8% 73%, 1% 59%, 5% 44%, 1% 30%);
    display: inline-flex;
    align-items: center;
    gap: 20px;
    min-width: 230px;
    padding: 20px 20px;
    background: #23442c;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    border-radius: 5px;
    transition: .3s ease;
}


.health-shop-button:hover {

    background: #172f1f;

    color: #fff;

    transform: translateY(-2px);

}


.health-shop-button i {

    margin-left: auto;

}


/*=========================================================
    FEATURES
=========================================================*/

.health-product-features {

    display: flex;

    gap: 55px;

    margin-top: 35px;

}


.health-feature {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    min-width: 105px;

}


.health-feature i {

    margin-bottom: 10px;

    font-size: 24px;

}


.health-feature span {

    font-size: 11px;

    line-height: 1.45;

    font-weight: 600;

}


/*=========================================================
    VIDEO
=========================================================*/

.health-product-media {

    position: relative;

    width: 100%;

    max-width: 620px;

    height: 370px;

    margin-left: auto;

    overflow: hidden;

    border-radius: 10px;

    box-shadow:
        0 20px 50px rgba(35, 68, 44, .18);

}


.health-product-video {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

}


.health-video-play {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 58px;
    height: 58px;

    display: flex;

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

    transform: translate(-50%, -50%);

    border: 2px solid rgba(255,255,255,.8);

    border-radius: 50%;

    color: #fff;

    background: rgba(35,68,44,.35);

    backdrop-filter: blur(5px);

}


.health-video-play i {

    margin-left: 3px;

}


/*=========================================================
    SIDE NOTE
=========================================================*/

.health-side-note {

    position: absolute;

    right: 2%;

    top: 50%;

    transform: translateY(-50%);

    width: 125px;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 18px;

    line-height: 1.2;

}


.health-side-note span {

    display: block;

    margin-top: 5px;

    font-size: 30px;

}


.health-side-note div {

    font-family: sans-serif;

    font-size: 25px;

    margin-top: 2px;

}


/*=========================================================
    IRL SECTION
=========================================================*/

.health-irl-section {

    width: 100%;

    overflow: hidden;

}


.health-karela-irl {

    background: #e6efd9;

}


.health-sea-irl {

    background: #f8e9c8;

}


.health-irl-inner {

    position: relative;

    min-height: 270px;

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 35px 7%;

}


/*=========================================================
    IRL HEADING
=========================================================*/
.health-irl-heading {
    display: none;
    align-self: flex-start;
    width: 210px;
    flex-shrink: 0;
    padding-top: 5px;
    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;
    font-size: 23px;
    font-weight: 700;
}
.health-irl-heading span {
    font-size: 25px;
}
.health-irl-heading b {
    font-size: 25px;
}
/*=========================================================
    POLAROIDS
=========================================================*/

.health-polaroid-wrapper {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    flex: 1;

}


.health-polaroid {
    width:260px;
    height: 260px;
    padding: 9px;
    padding-bottom: 40px;
    background: #faf8ef;
    box-shadow:0 12px 25px rgba(35,68,44,.20);
    transition:.35s ease;

}
.health-polaroid:hover {
    z-index: 5;
    transform:
        rotate(0deg)
        translateY(-8px)
        scale(1.03);

}
.health-polaroid-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.health-polaroid-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
/*=========================================================
    POLAROID ROTATIONS
=========================================================*/

.health-polaroid-1 {

    transform: rotate(-7deg);

}


.health-polaroid-2 {

    transform: rotate(2deg);

}


.health-polaroid-3 {

    transform: rotate(-4deg);

}


.health-polaroid-4 {

    transform: rotate(6deg);

}


/*=========================================================
    IRL RIGHT CONTENT
=========================================================*/

.health-irl-content {

    position: relative;

    width: 180px;

    flex-shrink: 0;

}


.health-irl-content h3 {

    margin-bottom: 10px;

    font-size: 18px;

    font-style: italic;

    font-weight: 800;

}


.health-irl-content p {

    margin-bottom: 15px;

    font-size: 15px;

    line-height: 1.5;

}


.health-irl-button {
    clip-path: polygon(2% 17%, 8% 8%, 18% 12%, 29% 5%, 40% 10%, 53% 4%, 65% 9%, 78% 5%, 91% 12%, 98% 8%, 96% 27%, 100% 42%, 96% 56%, 99% 72%, 92% 88%, 79% 84%, 66% 94%, 52% 88%, 39% 96%, 27% 90%, 15% 96%, 5% 88%, 8% 73%, 1% 59%, 5% 44%, 1% 30%);
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 23px;
    background: #23442c;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    border-radius: 5px;
    transition: .3s ease;
}


.health-irl-button:hover {

    color: #fff;

    transform: translateX(3px);

}


.health-irl-heart {

    position: absolute;

    right: 5px;

    bottom: -10px;

    font-size: 28px;

}


/*=========================================================
    SEA BUCKTHORN ORANGE DETAILS
=========================================================*/

.health-sea-section .health-hand-highlight,
.health-sea-irl .health-irl-heading {

    color: #b66a18;

    border-color: #c88631;

}


.health-sea-section .health-feature i {

    color: #b66a18;

}


.health-sea-section .health-side-note {

    color: #6b572e;

}


/*=========================================================
    RESPONSIVE - TABLET
=========================================================*/

@media (max-width: 1199px) {

    .health-product-inner {

        grid-template-columns: 1fr 1fr;

        padding: 40px 5%;

    }


    .health-product-title {

        font-size: 58px;

    }


    .health-hand-highlight {

        left: 270px;

    }


    .health-product-features {

        gap: 20px;

    }


    .health-polaroid {

        width: 150px;
        height: 150px;

        padding-bottom: 32px;

    }


    .health-irl-heading {

        width: 150px;

    }

}


/*=========================================================
    RESPONSIVE - MOBILE
=========================================================*/

@media (max-width: 767px) {

    .health-product-inner {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        min-height: auto;

        padding: 45px 20px 35px;

    }


    .health-product-content {

        max-width: 100%;

    }


    .health-product-title {

        font-size: 48px;

        letter-spacing: -2px;

    }


    .health-hand-highlight {

        position: static;

        display: inline-block;

        margin: 15px 0;

        font-size: 16px;

    }


    .health-product-subtitle {

        margin-top: 12px;

        font-size: 18px;

    }


    .health-product-description br {

        display: none;

    }


    .health-product-media {

        order: 2;

        width: 100%;

        height: 260px;

        margin-top: 35px;

    }


    .health-product-features {

        gap: 10px;

        justify-content: space-between;

        margin-top: 30px;

    }


    .health-feature {

        min-width: 0;

        flex: 1;

    }


    .health-feature i {

        font-size: 20px;

    }


    .health-feature span {

        font-size: 9px;

    }


    .health-side-note {

        display: none;

    }


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

    .health-irl-inner {

        min-height: auto;

        display: block;

        padding: 35px 20px 45px;

    }


    .health-irl-heading {

        width: auto;

        margin-bottom: 25px;

    }


    .health-polaroid-wrapper {

        display: grid;

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

        gap: 15px;

        padding: 10px;

    }


    .health-polaroid {

        width: 100%;

        height: auto;

        aspect-ratio: 1 / 1;

        padding: 7px;

        padding-bottom: 30px;

    }


    .health-polaroid-1,
    .health-polaroid-2,
    .health-polaroid-3,
    .health-polaroid-4 {

        transform: rotate(0deg);

    }


    .health-irl-content {

        width: 100%;

        margin-top: 25px;

    }


    .health-irl-heart {

        right: 15px;

    }

}


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

@media (max-width: 480px) {

    .health-product-title {

        font-size: 41px;

    }


    .health-shop-button {

        width: 100%;

        justify-content: center;

    }


    .health-product-features {

        gap: 5px;

    }


    .health-polaroid-wrapper {

        gap: 10px;

    }

}

/*=========================================================
    HEALTH - FINAL RESPONSIVE OVERRIDE
=========================================================*/

.health-product-section,
.health-irl-section{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.health-product-inner{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    box-sizing:border-box;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:clamp(30px, 4vw, 80px);
}


/*=========================================================
    LARGE DESKTOP
=========================================================*/

@media (min-width:1400px){

    .health-product-inner{
        padding-left:6%;
        padding-right:6%;
    }

    .health-product-content{
        max-width:650px;
    }

    .health-product-media{
        width:100%;
        max-width:650px;
        height:400px;
    }

    .health-product-title{
        font-size:clamp(65px, 5vw, 88px);
    }

}


/*=========================================================
    DESKTOP
=========================================================*/

@media (min-width:1200px) and (max-width:1399px){

    .health-product-inner{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        padding:45px 5%;
        gap:45px;
    }

    .health-product-title{
        font-size:clamp(55px, 5vw, 72px);
    }

    .health-product-media{
        height:350px;
    }

    .health-product-features{
        gap:25px;
        flex-wrap:wrap;
    }

}


/*=========================================================
    TABLET / SMALL DESKTOP
=========================================================*/

@media (min-width:992px) and (max-width:1199px){

    .health-product-inner{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        padding:40px 4%;
        gap:30px;
    }

    .health-product-title{
        font-size:clamp(48px, 5.5vw, 62px);
        letter-spacing:-2px;
    }

    .health-product-subtitle{
        margin-top:20px;
        font-size:19px;
    }

    .health-product-description{
        font-size:15px;
    }

    .health-product-media{
        width:100%;
        height:320px;
    }

    .health-product-features{
        gap:15px;
        flex-wrap:wrap;
    }

    .health-feature{
        min-width:80px;
    }

    .health-hand-highlight{
        position:static;
        display:inline-block;
        margin:12px 0 18px;
    }


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

    .health-irl-inner{
        padding:35px 4%;
        gap:18px;
    }

    .health-polaroid-wrapper{
        gap:10px;
    }

    .health-polaroid{
        width:clamp(140px, 16vw, 190px);
        height:clamp(140px, 16vw, 190px);
    }

    .health-irl-content{
        width:150px;
    }

}


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

@media (min-width:768px) and (max-width:991px){

    .health-product-inner{
        grid-template-columns:1fr 1fr;
        padding:40px 30px;
        gap:25px;
    }

    .health-product-title{
        font-size:clamp(45px, 6vw, 58px);
        letter-spacing:-2px;
    }

    .health-product-subtitle{
        margin-top:18px;
        font-size:18px;
    }

    .health-product-description{
        font-size:14px;
        line-height:1.6;
    }

    .health-hand-highlight{
        position:static;
        display:inline-block;
        margin:12px 0 18px;
        font-size:17px;
    }

    .health-shop-button{
        min-width:200px;
        padding:17px 20px;
    }

    .health-product-media{
        width:100%;
        height:300px;
    }

    .health-product-features{
        gap:10px;
        flex-wrap:wrap;
        margin-top:25px;
    }

    .health-feature{
        min-width:75px;
        flex:1 1 70px;
    }

    .health-feature i{
        font-size:21px;
    }

    .health-feature span{
        font-size:10px;
    }


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

    .health-irl-inner{
        padding:35px 25px 40px;
        gap:15px;
    }

    .health-polaroid-wrapper{
        gap:8px;
    }

    .health-polaroid{
        width:clamp(125px, 18vw, 170px);
        height:clamp(125px, 18vw, 170px);
        padding:7px;
        padding-bottom:28px;
    }

    .health-irl-content{
        width:135px;
    }

    .health-irl-content h3{
        font-size:16px;
    }

    .health-irl-content p{
        font-size:13px;
    }

    .health-irl-button{
        padding:13px 17px;
    }

}


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

@media (max-width:767px){

    .health-product-inner{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;

        min-height:auto;

        padding:
            42px
            18px
            35px;

        gap:0;
    }

    .health-product-content{
        width:100%;
        max-width:none;
    }

    .health-eyebrow{
        font-size:13px;
        margin-bottom:7px;
    }

    .health-product-title{
        width:100%;
        max-width:100%;

        font-size:clamp(40px, 11vw, 52px);
        line-height:.9;
        letter-spacing:-2px;

        overflow-wrap:break-word;
    }

    .health-product-subtitle{
        margin-top:18px;
        margin-bottom:7px;
        font-size:18px;
        line-height:1.3;
    }

    .health-product-description{
        margin-bottom:20px;
        font-size:14px;
        line-height:1.6;
    }

    .health-product-description br{
        display:none;
    }


    /*==============================
        HANDWRITTEN TEXT
    ==============================*/

    .health-hand-highlight{
        position:static;

        display:inline-block;

        max-width:100%;

        margin:
            12px
            0
            15px;

        padding:7px 15px;

        font-size:16px;

        transform:rotate(-6deg);
        box-sizing:border-box;
    }


    /*==============================
        SHOP BUTTON
    ==============================*/

    .health-shop-button{
        width:auto;
        max-width:100%;

        min-width:200px;

        padding:17px 18px;

        gap:14px;

        font-size:12px;
    }


    /*==============================
        FEATURES
    ==============================*/

    .health-product-features{
        width:100%;

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

        gap:10px;

        margin-top:28px;
    }

    .health-feature{
        width:100%;
        min-width:0;
    }

    .health-feature i{
        margin-bottom:8px;
        font-size:21px;
    }

    .health-feature span{
        font-size:9px;
        line-height:1.4;
    }


    /*==============================
        PRODUCT MEDIA
    ==============================*/

    .health-product-media{
        order:2;

        width:100%;
        max-width:none;

        height:auto;
        aspect-ratio:16 / 10;

        margin:
            32px
            0
            0;

        border-radius:10px;
    }

    .health-product-video{
        width:100%;
        height:100%;

        object-fit:cover;
    }

    .health-video-play{
        width:52px;
        height:52px;
    }

    .health-side-note{
        display:none;
    }


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

    .health-irl-inner{
        width:100%;
        min-height:auto;

        display:block;

        padding:
            30px
            14px
            40px;

        box-sizing:border-box;
    }

    .health-irl-heading{
        width:100%;
        margin-bottom:22px;

        font-size:21px;
    }

    .health-irl-heading span,
    .health-irl-heading b{
        font-size:23px;
    }


    /*==============================
        POLAROID GRID
    ==============================*/

    .health-polaroid-wrapper{
        width:100%;

        display:grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:14px;

        padding:5px;

        box-sizing:border-box;
    }

    .health-polaroid{
        width:100%;
        height:auto;

        aspect-ratio:1 / 1;

        padding:6px;
        padding-bottom:28px;

        box-sizing:border-box;
    }

    .health-polaroid-image{
        width:100%;
        height:100%;
    }

    .health-polaroid-1,
    .health-polaroid-2,
    .health-polaroid-3,
    .health-polaroid-4{
        transform:rotate(0deg);
    }

    .health-irl-content{
        width:100%;

        margin-top:24px;
    }

    .health-irl-content h3{
        font-size:17px;
    }

    .health-irl-content p{
        font-size:14px;
        line-height:1.55;
    }

    .health-irl-button{
        padding:14px 20px;
        font-size:11px;
    }

    .health-irl-heart{
        right:8px;
        bottom:-8px;
    }

}


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

@media (max-width:480px){

    .health-product-inner{
        padding:
            35px
            15px
            30px;
    }

    .health-eyebrow{
        font-size:12px;
    }

    .health-product-title{
        font-size:clamp(36px, 12vw, 45px);
        letter-spacing:-1.5px;
    }

    .health-product-subtitle{
        font-size:17px;
        margin-top:16px;
    }

    .health-product-description{
        font-size:13px;
    }

    .health-hand-highlight{
        font-size:15px;
        padding:6px 13px;
    }

    .health-shop-button{
        width:100%;
        min-width:0;

        justify-content:center;

        padding:16px 18px;
    }


    /*==============================
        FEATURES
    ==============================*/

    .health-product-features{
        gap:5px;
        margin-top:24px;
    }

    .health-feature i{
        font-size:19px;
    }

    .health-feature span{
        font-size:8px;
        line-height:1.35;
    }


    /*==============================
        MEDIA
    ==============================*/

    .health-product-media{
        aspect-ratio:4 / 3;
        margin-top:28px;
    }

    .health-video-play{
        width:48px;
        height:48px;
    }


    /*==============================
        IRL
    ==============================*/

    .health-irl-inner{
        padding:
            28px
            10px
            35px;
    }

    .health-polaroid-wrapper{
        gap:10px;
        padding:3px;
    }

    .health-polaroid{
        padding:5px;
        padding-bottom:24px;
    }

    .health-irl-content{
        margin-top:20px;
    }

    .health-irl-content h3{
        font-size:16px;
    }

    .health-irl-content p{
        font-size:13px;
    }

    .health-irl-button{
        width:100%;
        justify-content:center;
    }

}


/*=========================================================
    VERY SMALL DEVICES
=========================================================*/

@media (max-width:360px){

    .health-product-inner{
        padding-left:12px;
        padding-right:12px;
    }

    .health-product-title{
        font-size:35px;
    }

    .health-product-subtitle{
        font-size:16px;
    }

    .health-product-features{
        gap:3px;
    }

    .health-feature span{
        font-size:7.5px;
    }

    .health-irl-inner{
        padding-left:8px;
        padding-right:8px;
    }

    .health-polaroid-wrapper{
        gap:7px;
    }

}

/* ==================BANNER SECTION==================== */
.banner-section {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.banner-image {
    display: block;
    width: 100%;
    height:100%;
}