/*==========================================
            DRY SKIN HERO
==========================================*/

.dry-landing{

    min-height:100vh;

    padding-top:120px;
    padding-inline:5%;

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

    background:linear-gradient(
        180deg,
        #fffdfc 0%,
        #fff8fb 100%
    );

}

.dry-canvas{

    width:100%;
    max-width:1400px;

    display:flex;

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

    gap:70px;

}

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

.dry-copy{

    flex:1;
    max-width:620px;

}

.dry-eyebrow{

    font-family:var(--ff-paragraph);

    font-size:.85rem;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--clr-primary);

    margin-bottom:18px;

}

.dry-headline{

    font-size:clamp(3.3rem,4.8vw,4.8rem);

    line-height:1.08;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:36px;

}

.dry-headline span{

    color:var(--clr-primary-light);

}

.dry-lead{

    max-width:560px;

    font-family:var(--ff-paragraph);

    font-size:1.08rem;

    line-height:1.9;

    color:var(--clr-text);

    margin-bottom:45px;

}

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

.dry-action-group{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

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

.dry-hero-image{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.dry-hero-image img{

    width:100%;
    max-width:520px;

    position:relative;

    z-index:2;

    object-fit:contain;

    animation:float 4s ease-in-out infinite;

}

/*==========================================
            GLOW
==========================================*/

.dry-glow{

    width:520px;
    height:520px;

    position:absolute;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(210,234,255,.55),

        rgba(255,223,238,.35),

        transparent 72%

    );

    filter:blur(35px);

    animation:pulse 6s ease-in-out infinite;

}
/*==========================================
        DRY SKIN HERO — RESPONSIVE
==========================================*/


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

@media (max-width: 1024px){

    .dry-landing{
        min-height:auto;
        padding-top:150px;
        padding-bottom:70px;
        padding-inline:4%;
    }

    .dry-canvas{
        width:100%;
        max-width:950px;

        display:flex;
        flex-direction:row;

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

        gap:35px;
    }

    .dry-copy{
        flex:1;
        max-width:480px;
    }

    .dry-eyebrow{
        font-size:.78rem;
        letter-spacing:2.4px;
        margin-bottom:15px;
    }

    .dry-headline{
        font-size:3.1rem;
        line-height:1.08;
        margin-bottom:28px;
    }

    .dry-lead{
        max-width:470px;
        font-size:1rem;
        line-height:1.8;
        margin-bottom:34px;
    }

    .dry-action-group{
        gap:14px;
    }

    .dry-hero-image{
        flex:1;
        min-width:0;

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

    .dry-hero-image img{
        width:100%;
        max-width:390px;
        height:auto;
        object-fit:contain;
    }

    .dry-glow{
        width:360px;
        height:360px;
    }

}


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

@media (max-width: 820px){

    .dry-landing{
        padding-top:100px;
        padding-bottom:65px;
        padding-inline:24px;
    }

    .dry-canvas{
        gap:28px;
    }

    .dry-copy{
        max-width:420px;
    }

    .dry-headline{
        font-size:2.7rem;
    }

    .dry-lead{
        font-size:.97rem;
        line-height:1.75;
    }

    .dry-hero-image img{
        max-width:330px;
    }

    .dry-glow{
        width:300px;
        height:300px;
    }

}


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

@media (max-width: 768px){

    .dry-landing{
        min-height:auto;

        padding-top:95px;
        padding-bottom:65px;
        padding-inline:20px;

        overflow:hidden;
    }

    .dry-canvas{
        width:100%;

        display:flex;
        flex-direction:column;

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

        gap:36px;
    }

    .dry-copy{
        width:100%;
        max-width:560px;

        text-align:center;
    }

    .dry-eyebrow{
        font-size:.72rem;
        letter-spacing:2px;
        margin-bottom:14px;
    }

    .dry-headline{
        font-size:2.6rem;
        line-height:1.08;
        margin-bottom:22px;
    }

    .dry-lead{
        width:100%;
        max-width:520px;

        margin-left:auto;
        margin-right:auto;
        margin-bottom:30px;

        font-size:.96rem;
        line-height:1.75;
    }

    .dry-action-group{
        display:flex;
        justify-content:center;
        align-items:center;

        gap:14px;
    }

    .dry-hero-image{
        width:100%;

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

    .dry-hero-image img{
        width:100%;
        max-width:320px;
        height:auto;
        object-fit:contain;
    }

    .dry-glow{
        width:290px;
        height:290px;
    }

}


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

@media (max-width: 480px){

    .dry-landing{
        padding-top:85px;
        padding-bottom:55px;
        padding-inline:18px;
    }

    .dry-canvas{
        gap:28px;
    }

    .dry-copy{
        max-width:100%;
    }

    .dry-eyebrow{
        font-size:.67rem;
        letter-spacing:1.7px;
        margin-bottom:12px;
    }

    .dry-headline{
        font-size:2.15rem;
        line-height:1.1;
        margin-bottom:18px;
    }

    .dry-lead{
        font-size:.92rem;
        line-height:1.7;
        margin-bottom:26px;
    }

    .dry-action-group{
        width:100%;
        flex-direction:column;
        gap:12px;
    }

    .dry-action-group a{
        width:100%;
        max-width:270px;
    }

    .dry-hero-image img{
        max-width:260px;
    }

    .dry-glow{
        width:235px;
        height:235px;
    }

}
/*==========================================
        SECTION 01 - WHAT IS DRY SKIN
==========================================*/

.dry-intro{

    padding:120px 3%;

    background:var(--clr-white);

}

.dry-container{

    max-width:1250px;

    margin:auto;

}


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

.dry-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.section-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

    font-family:var(--ff-paragraph);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.section-title{

    font-size:clamp(2.8rem,4vw,4rem);

    font-weight:500;

    line-height:1.15;

    color:var(--clr-heading);

    margin-bottom:22px;

}

.section-title span{

    color:var(--clr-primary-light);

}

.section-description{

    max-width:620px;

    margin:auto;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

.dry-content{

    display:grid;

    grid-template-columns:520px 1fr;

    align-items:center;

    gap:70px;

}


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

.dry-image{

    border-radius:35px;

    overflow:hidden;

    background:linear-gradient(
        145deg,
        #ffffff,
        #fff8fb
    );

    box-shadow:0 18px 45px rgba(0,0,0,.06);

}

.dry-image img{

    width:100%;

    display:block;

    transition:.4s;

}

.dry-image:hover img{

    transform:scale(1.03);

}


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

.dry-text h3{

    font-size:2rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:28px;

}

.dry-text p{

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.9;

    color:var(--clr-text);

    margin-bottom:22px;

}

.dry-text p:last-child{

    margin-bottom:0;

}


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

@media(max-width:1024px){

    .dry-content{

        grid-template-columns:1fr;

        gap:50px;

    }

    .dry-image{

        max-width:600px;

        margin:auto;

    }

    .dry-text{

        text-align:center;

    }

}


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

@media(max-width:768px){

    .dry-intro{

        padding:90px 20px;

    }

    .dry-header{

        margin-bottom:55px;

    }

    .section-title{

        font-size:2.2rem;

    }

    .dry-text h3{

        font-size:1.7rem;

    }

    .dry-text p{

        font-size:1rem;

        line-height:1.8;

    }

}


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

@media(max-width:480px){

    .section-title{

        font-size:1.9rem;

    }

}

/*==========================================
        SECTION 02 - FORMATION PROCESS
==========================================*/

.formation-process{

    padding:120px 3%;

    background:linear-gradient(
        180deg,
        #fffdfc,
        #fff8fb
    );

}

.formation-container{

    max-width:1350px;

    margin:auto;

}

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

.formation-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

/*==========================================
            TIMELINE
==========================================*/

.formation-timeline{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:18px;

    flex-wrap:wrap;

}

/*==========================================
            CARD
==========================================*/

.timeline-card{

    flex:1;

    min-width:220px;

    max-width:240px;

    background:#fff;

    border-radius:30px;

    padding:32px 24px;

    text-align:center;

    box-shadow:
        0 18px 40px rgba(0,0,0,.05);

    transition:.35s ease;

}

.timeline-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 24px 50px rgba(0,0,0,.08);

}

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

.step-number{

    width:54px;

    height:54px;

    margin:0 auto 22px;

    border-radius:50%;

    background:var(--clr-primary-light);

    color:var(--clr-white);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1rem;

    font-weight:600;

    font-family:var(--ff-paragraph);

}

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

.timeline-card img{

    width:100%;

    max-width:140px;

    display:block;

    margin:0 auto 24px;

    transition:.35s;

}

.timeline-card:hover img{

    transform:scale(1.06);

}

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

.timeline-card h3{

    font-size:1.35rem;

    color:var(--clr-heading);

    font-family: var(--ff-paragraph);

    margin-bottom:16px;

    font-weight:600;

}

.timeline-card p{

    font-family:var(--ff-paragraph);

    color:var(--clr-text);

    line-height:1.8;

    font-size:.96rem;

}

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

.timeline-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    color:var(--clr-primary-light);

    font-weight:300;

    margin-top:120px;

}

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

@media(max-width:1024px){

    .formation-timeline{

        gap:25px;

    }

    .timeline-card{

        min-width:260px;

    }

    .timeline-arrow{

        display:none;

    }

}

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

@media(max-width:768px){

    .formation-process{

        padding:90px 20px;

    }

    .formation-header{

        margin-bottom:55px;

    }

    .formation-timeline{

        flex-direction:column;

        align-items:center;

    }

    .timeline-card{

        width:100%;

        max-width:420px;

    }

}

/*==========================================
        SECTION 03 - SIGNS & APPEARANCE
==========================================*/

.dry-signs{

    padding:120px 3%;

    background:var(--clr-white);

}

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

.signs-grid{

    max-width:1300px;

    margin:0 auto;

    display:grid;

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

    gap:28px;

}

/*==========================================
            CARD
==========================================*/

.sign-card{

    background:#fff;

    border-radius:30px;

    padding:32px 26px;

    text-align:center;

    box-shadow:0 18px 40px rgba(0,0,0,.05);

    transition:.35s ease;

    cursor:pointer;

}

.sign-card:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 55px rgba(0,0,0,.08);

}

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

.sign-image{

    width:110px;
    height:110px;

    margin:0 auto 24px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        #fff8fb,
        #fff
    );

}

.sign-image img{

    width:130px;

    display:block;

    transition:.35s ease;

}

.sign-card:hover .sign-image img{

    transform:scale(1.08);

}

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

.sign-card h3{

    font-size:1.35rem;

    font-weight:600;

    color:var(--clr-heading);

    font-family: var(--ff-paragraph);

    margin-bottom:14px;

}

.sign-card p{

    font-family:var(--ff-paragraph);

    font-size:.95rem;

    line-height:1.8;

    color:var(--clr-text);

}

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

@media(max-width:1024px){

    .signs-grid{

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

        gap:24px;

    }

}

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

@media(max-width:768px){

    .dry-signs{

        padding:90px 20px;

    }

    .signs-grid{

        grid-template-columns:1fr;

    }

    .sign-card{

        max-width:420px;

        width:100%;

        margin:auto;

    }

}

/*==========================================
        SECTION 04 - WHAT CAUSES DRY SKIN
==========================================*/

.dry-causes{

    padding:120px 3%;

    background:linear-gradient(
        180deg,
        #fff8fb,
        #ffffff
    );

}

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

.causes-grid{

    max-width:1300px;

    margin:0 auto;

    display:grid;

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

    gap:30px;

}

/*==========================================
            CARD
==========================================*/

.cause-card{

    background:#fff;

    border-radius:32px;

    padding:34px 28px;

    text-align:center;

    box-shadow:0 18px 45px rgba(0,0,0,.05);

    transition:.35s ease;

    cursor:pointer;

    overflow:hidden;

    position:relative;

}

.cause-card:hover{

    transform:translateY(-10px);

    box-shadow:0 24px 60px rgba(0,0,0,.08);

}

/* Top Accent */

.cause-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #f6d7ea,
        #eddcff
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.cause-card:hover::before{

    transform:scaleX(1);

}

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

.cause-image{

    width:170px;
    height:170px;

    margin:0 auto 24px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    /* background:var(--clr-hover-soft); */

    transition:.35s;

}
.shower{

   

     /* width:170px;
    height:170px; */

    margin:27px auto 50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    /* background:var(--clr-hover-soft); */

    transition:.35s;

    



}

.shower img{

     width: 110px;

    display:block;

    transition:.35s;
}

.cause-card:hover .shower img{

     transform:scale(1.08);


}
.cause-card:hover .cause-image{

    transform:scale(1.08);

}

.cause-image img{

    width:160px;

    display:block;

    transition:.35s;

}

.cause-card:hover .cause-image img{

    transform:scale(1.08);

}

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

.cause-card h3{

    font-size:1.35rem;

    font-weight:600;

    color:var(--clr-heading);

    font-family: var(--ff-paragraph);

    margin-bottom:16px;

    transition:.3s;

}

.cause-card:hover h3{

    color:var(--clr-primary);

}

.cause-card p{

    font-family:var(--ff-paragraph);

    font-size:.96rem;

    line-height:1.8;

    color:var(--clr-text);

}

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

@media(max-width:1024px){

    .causes-grid{

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

        gap:26px;

    }

}

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

@media(max-width:768px){

    .dry-causes{

        padding:90px 20px;

    }

    .causes-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .cause-card{

        max-width:430px;

        width:100%;

        margin:auto;

    }

}

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

@media(max-width:480px){

    .cause-card{

        padding:30px 24px;

        border-radius:28px;

    }

    .cause-image{

        width:100px;
        height:100px;

    }

    .cause-image img{

        width:68px;

    }

    .cause-card h3{

        font-size:1.2rem;

    }

}

/*==========================================
        SECTION 05 - COMMON TRIGGERS
==========================================*/

.dry-triggers{

    padding:120px 3%;

    background:linear-gradient(
        180deg,
        #ffffff,
        #fff8fb
    );

}

/*==========================================
        TRIGGER WRAPPER
==========================================*/

.trigger-wrapper{

    max-width:1150px;

    margin:70px auto 0;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:22px;

}

/*==========================================
            PILL
==========================================*/

.trigger-pill{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 26px;

    background:#fff;

    border-radius:999px;

    border:1px solid #eee2eb;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

    transition:.35s ease;

    cursor:pointer;

}

.trigger-pill:hover{

    transform:translateY(-5px);

    border-color:var(--clr-primary-light);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

/*==========================================
            ICON
==========================================*/

.trigger-pill img{

    width:62px;

    height:62px;

    object-fit:contain;

    transition:.35s ease;

}

.trigger-pill:hover img{

    transform:scale(1.08);

}

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

.trigger-pill span{

    font-family:var(--ff-paragraph);

    font-size:1rem;

    font-weight:500;

    color:var(--clr-heading);

    white-space:nowrap;

    transition:.3s;

}

.trigger-pill:hover span{

    color:var(--clr-primary);

}

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

@media(max-width:1024px){

    .trigger-wrapper{

        gap:18px;

    }

}

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

@media(max-width:768px){

    .dry-triggers{

        padding:90px 20px;

    }

    .trigger-wrapper{

        gap:16px;

    }

    .trigger-pill{

        width:100%;

        justify-content:flex-start;

        padding:18px 22px;

    }

}

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

@media(max-width:480px){

    .trigger-pill{

        padding:16px 20px;

    }

    .trigger-pill img{

        width:36px;

        height:36px;

    }

    .trigger-pill span{

        font-size:.95rem;

    }

}

/*==========================================
        SECTION 06 - COMMON AREAS
==========================================*/

.dry-areas{

    padding:120px 3%;

    background:var(--clr-white);

}

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

.areas-grid{

    max-width:1250px;

    margin:70px auto 0;

    display:grid;

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

    gap:40px;

}

/*==========================================
            CARD
==========================================*/

.area-card{

    background:#fff;

    border-radius:34px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.06);

    transition:.35s ease;

}

.area-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(0,0,0,.09);

}

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

.area-image{

    height:540px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        180deg,
        #fffdfd,
        #fff6fb
    );

}

.area-image img{

    width:100%;

    max-width:820px;

    display:block;

    transition:.35s ease;

}

.area-card:hover .area-image img{

    transform:scale(1.05);

}
.area-image-body{
      height:540px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        180deg,
        #fffdfd,
        #fff6fb
    );

}

.area-image-body img{

     width:109%;

    max-width:300px;

    display:block;

    transition:.35s ease;


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

.area-content{

    padding:35px;

}

.area-content h3{

    font-size:2rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:24px;

}

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

.area-content ul{

    list-style:none;

    display:grid;

    gap:16px;

    padding:0;

}

.area-content li{

    display:flex;

    align-items:center;

    gap:14px;

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    color:var(--clr-text);

}

.area-content li::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--clr-primary-light);

    flex-shrink:0;

}

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

@media(max-width:1024px){

    .areas-grid{

        grid-template-columns:1fr;

        max-width:700px;

    }

}

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

@media(max-width:768px){

    .dry-areas{

        padding:90px 20px;

    }

    .area-image{

        height:280px;

    }

    .area-image img{

        max-width:250px;

    }

    .area-content{

        padding:28px;

    }

    .area-content h3{

        font-size:1.7rem;

    }

}

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

@media(max-width:480px){

    .area-image{

        height:220px;

    }

    .area-image img{

        max-width:200px;

    }

    .area-content h3{

        font-size:1.5rem;

    }

    .area-content li{

        font-size:1rem;

    }

}

/*==========================================
        SECTION 07 - COMPARISON
==========================================*/

.skin-comparison{

    padding:120px 3%;

    background:linear-gradient(
        180deg,
        #fff8fb,
        #ffffff
    );

}

/*==========================================
            TABLE
==========================================*/

.comparison-table{

    max-width:1200px;

    margin:70px auto 0;

    background:#fff;

    border-radius:35px;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.06);

}

/*==========================================
            ROW
==========================================*/

.comparison-row{

    display:grid;

    grid-template-columns:220px 1fr 1fr;

    align-items:center;

}

.comparison-row:not(:last-child){

    border-bottom:1px solid #f1e7ee;

}

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

.comparison-heading{

    background:linear-gradient(
        135deg,
        #fff5fa,
        #fffdfd
    );

}

.comparison-heading h3{

    font-size:1.45rem;

    font-weight:500;

    color:var(--clr-heading);

}

/*==========================================
            CELL
==========================================*/

.comparison-cell{

    padding:28px 30px;

    font-family:var(--ff-paragraph);

    color:var(--clr-text);

    line-height:1.8;

}

.ds-fact-icon{

width: 75px;
    height: 75px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--clr-hover-soft);
    border-radius: 50%;
    color: var(--clr-primary-hover-light);
}

.comparison-title{

    font-weight:600;

    color:var(--clr-primary);

    background:#fffafc;

}

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

.comparison-row:hover{

    background:#fffafc;

    transition:.3s;

}

/*==========================================
        DID YOU KNOW
==========================================*/

.did-you-know{

    max-width:1000px;

    margin:45px auto 0;

    padding:30px 35px;

    display:flex;

    align-items:center;

    gap:22px;

    background:linear-gradient(
        135deg,
        #fff3f9,
        #fffdfd
    );

    border-radius:28px;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.tip-icon{

    width:70px;

    height:70px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--clr-hover-soft);

    font-size:2rem;

}

.tip-content h3{

    font-size:1.5rem;

    color:var(--clr-heading);

    margin-bottom:10px;

    font-weight:500;

}

.tip-content p{

    font-family:var(--ff-paragraph);

    color:var(--clr-text);

    line-height:1.8;

}

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

@media(max-width:1024px){

    .comparison-row{

        grid-template-columns:180px 1fr 1fr;

    }

    .comparison-cell{

        padding:24px 20px;

    }

}

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

@media(max-width:768px){

    .skin-comparison{

        padding:90px 20px;

    }

    .comparison-table{

        overflow-x:auto;

        border-radius:24px;

    }

    .comparison-row{

        min-width:720px;

    }

    .did-you-know{

        flex-direction:column;

        text-align:center;

        padding:28px 24px;

    }

}

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

@media(max-width:480px){

    .tip-content h3{

        font-size:1.3rem;

    }

    .tip-content p{

        font-size:.95rem;

    }

}

/*==========================================
        SECTION 08 - INGREDIENTS
==========================================*/

.dry-ingredients{

    padding: 50px 3%;

    background:var(--clr-white);

}

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

.ingredients-layout{

    max-width:1300px;

    margin:70px auto 0;

    display:grid;

    grid-template-columns:320px 1fr;

    gap:50px;

    align-items:start;

}

/*==========================================
        LEFT SIDE
==========================================*/

.ingredients-list{

    display:flex;

    flex-direction:column;

    /* gap:18px; */

}

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

.ingredient-btn{

    width:100%;

    padding:18px 26px;

    border:none;

    border-radius:999px;

    background:#fff;

    border:1px solid #ebe1e8;

    cursor:pointer;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    font-weight:500;

    color:var(--clr-heading);

    transition:.35s ease;

}

.ingredient-btn:hover{

    transform:translateX(8px);

    border-color:var(--clr-primary-light);

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.ingredient-btn.active{

    background:var(--clr-primary-light);

    color:#fff;

    border-color:transparent;

}

/*==========================================
        RIGHT CARD
==========================================*/

.ingredient-display{

    background:#fff;

    border-radius:34px;

    padding:40px;

    box-shadow:0 18px 45px rgba(0,0,0,.05);

    transition:.35s ease;

}

.ingredient-display:hover{

    transform:translateY(-5px);

    box-shadow:0 24px 55px rgba(0,0,0,.08);

}

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

.ingredient-image{

    width:100%;

    height:330px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:35px;

    border-radius:28px;

    background:linear-gradient(
        145deg,
        #fff,
        #fff8fb
    );

}

.ingredient-image img{

    width:100%;

    max-width:350px;

    display:block;

    transition:.35s ease;

}

.ingredient-display:hover
.ingredient-image img{

    transform:scale(1.05);

}

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

.ingredient-content h3{

    font-size:2rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.ingredient-content p{

    font-family:var(--ff-paragraph);

    color:var(--clr-text);

    line-height:1.9;

    font-size:1.05rem;

    margin-bottom:30px;

}

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

.ingredient-benefits{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.ingredient-benefits span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 20px;

    border-radius:999px;

    background:var(--clr-hover-soft);

    color:var(--clr-primary);

    font-family:var(--ff-paragraph);

    font-size:.92rem;

    font-weight:500;

    transition:.3s ease;

}

.ingredient-benefits span:hover{

    background:var(--clr-primary-light);

    color:#fff;

}

/*==========================================
        FADE ANIMATION
==========================================*/

#ingredientImage,
#ingredientTitle,
#ingredientDescription,
#ingredientBenefits{

    transition:
        opacity .25s ease,
        transform .25s ease;

}

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

@media(max-width:1024px){

    .ingredients-layout{

        grid-template-columns:1fr;

        gap:40px;

    }

    .ingredients-list{

        display:grid;

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

        gap:16px;

    }

}

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

@media(max-width:768px){

    .dry-ingredients{

        padding:90px 20px;

    }

    .ingredients-list{

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

    }

    .ingredient-btn{

        font-size:.9rem;

        padding:16px;

    }

    .ingredient-display{

        padding:28px;

    }

    .ingredient-image{

        height:240px;

    }

    .ingredient-image img{

        max-width:200px;

    }

    .ingredient-content h3{

        font-size:1.7rem;

    }

    .ingredient-content p{

        font-size:1rem;

    }

}

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

@media(max-width:480px){

    .ingredients-list{

        grid-template-columns:1fr;

    }

    .ingredient-benefits{

        justify-content:center;

    }

    .ingredient-content{

        text-align:center;

    }

}

/*==========================================
        SECTION 09 - PREVENTION TIPS
==========================================*/

.dry-prevention{

    padding:50px 3%;

    background:linear-gradient(
        180deg,
        #ffffff,
        #fff8fb
    );

}

/*==========================================
        PREVENTION LIST
==========================================*/

.prevention-list{

    max-width:900px;

    margin:70px auto 0;

    position:relative;

}

.prevention-list::before{

    content:"";

    position:absolute;

    left:34px;

    top:0;

    width:3px;

    height:100%;

    background:linear-gradient(
        to bottom,
        #f6d7ea,
        #eddcff
    );

}

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

.prevention-item{

    display:flex;

    align-items:flex-start;

    gap:28px;

    margin-bottom:45px;

    position:relative;

}

.prevention-item:last-child{

    margin-bottom:0;

}

/*==========================================
        ICON
==========================================*/

.prevention-icon{

    width:90px;

    height:90px;

    flex-shrink:0;

    border-radius:50%;

    background:#fff;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:2;

    transition:.35s;

}

.prevention-item:hover .prevention-icon{

    transform:scale(1.08);

    background:var(--clr-hover-soft);

}

.prevention-icon img{

    width:82px;

    height:82px;

    object-fit:contain;

}

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

.prevention-content{

    flex:1;

    background:#fff;

    padding:28px 32px;

    border-radius:28px;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

    transition:.35s;

}

.prevention-item:hover .prevention-content{

    transform:translateY(-5px);

    box-shadow:0 22px 45px rgba(0,0,0,.08);

}

.prevention-content h3{

    font-size:1.45rem;

    font-family: var(--ff-paragraph);

    font-weight:600;

    color:var(--clr-heading);

    margin-bottom:14px;

}

.prevention-content p{

    font-family:var(--ff-paragraph);

    font-size:1rem;

    line-height:1.8;

    color:var(--clr-text);

}

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

@media(max-width:1024px){

    .prevention-list{

        max-width:800px;

    }

}

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

@media(max-width:768px){

    .dry-prevention{

        padding:90px 20px;

    }

    .prevention-list::before{

        left:30px;

    }

    .prevention-item{

        gap:18px;

    }

    .prevention-icon{

        width:100px;

        height:100px;

    }

    .prevention-icon img{

        width:99px;

        height:99px;

    }

    .prevention-content{

        padding:24px;

    }

    .prevention-content h3{

        font-size:1.25rem;

    }

}

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

@media(max-width:480px){

    .prevention-list::before{

        display:none;

    }

    .prevention-item{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .prevention-content{

        width:100%;

    }

}

/*==========================================
        SECTION 10 - MYTHS VS FACTS
==========================================*/

.dry-myths{

    padding:50px 3%;

    /* background:linear-gradient(
        180deg,
        #fff8fb,
        #ffffff
    ); */

}

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

.myth-grid{

    max-width:1200px;

    margin:70px auto 0;

    display:grid;

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

    gap:35px;

}

/*==========================================
            CARD
==========================================*/

.myth-card{

    /* background:#fff6fa; */

    border-radius:32px;

    padding:32px;

    position:relative;

    transition:.35s ease;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.myth-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.08);

}

/*==========================================
            MYTH LABEL
==========================================*/

.myth-label{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:#ffe4ec;

    color:#d45d7b;

    font-family:var(--ff-paragraph);

    font-size:.85rem;

    font-weight:600;

    margin-bottom:20px;

}

/*==========================================
            MYTH TEXT
==========================================*/

.myth-text{

    font-family:var(--ff-paragraph);

    font-size:1.05rem;

    line-height:1.8;

    color:var(--clr-heading);

    margin-bottom:30px;

}

/*==========================================
            FACT BOX
==========================================*/

.fact-box{

    background:#fff;

    border-radius:24px;

    padding:24px;

    box-shadow:0 12px 28px rgba(0,0,0,.05);

    border-left:5px solid #8fd19e;

}

.fact-box h4{

    font-size:1.15rem;

    font-family: var(--ff-paragraph);

    color:#4d9b63;

    margin-bottom:12px;

    font-weight:600;

}

.fact-box p{

    font-family:var(--ff-paragraph);

    color:var(--clr-text);

    line-height:1.8;

    font-size:.98rem;

}

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

@media(max-width:1024px){

    .myth-grid{

        gap:28px;

    }

}

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

@media(max-width:768px){

    .dry-myths{

        padding:90px 20px;

    }

    .myth-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .myth-card{

        padding:28px;

    }

}

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

@media(max-width:480px){

    .myth-text{

        font-size:1rem;

    }

    .fact-box{

        padding:20px;

    }

}

/*==========================================
            SECTION 11 - MIMII'S TIP
==========================================*/

.dry-tip-section{

    padding:120px 3%;

    /* background:linear-gradient(
        180deg,
        #ffffff,
        #fff8fb
    ); */

}

/*==========================================
            CARD
==========================================*/

.dry-tip-card{

    max-width:1250px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

    padding:40px 50px;

    border-radius:32px;

    overflow:hidden;
/* 
    background:linear-gradient(
        115deg,
        #fff8fc,
        #ffffff,
        #fff5fa
    ); */

    border:1px solid #f3dce7;

    box-shadow:
        0 18px 45px rgba(236,177,201,.12);

    transition:.35s ease;

}

.dry-tip-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 25px 55px rgba(236,177,201,.18);

}

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

.dry-tip-image{

    width:100%;

    max-width:380px;

    flex-shrink:0;

}

.dry-tip-image img{

    width:100%;

    display:block;

    transition:.35s;

}

.dry-tip-card:hover .dry-tip-image img{

    transform:scale(1.03);

}

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

.dry-tip-content{

    flex:1;

    max-width:650px;

}

.dry-tip-badge{

    display:inline-block;

    margin-bottom:18px;

    color:rgb(207, 103, 157);

    font-family:var(--ff-heading);

    font-size:1.5rem;

    font-weight:500;

}

.dry-tip-heading{

    font-size:35px;

    font-weight:500;

    line-height:1.2;

    color:var(--clr-heading);

    margin-bottom:22px;

}

/* .dry-tip-heading span{

    color:var(--clr-primary-light);

} */

.dry-tip-text{

    font-family:var(--ff-paragraph);

    font-size:1.02rem;

    line-height:1.9;

    color:rgb(102, 102, 102);

    margin-bottom:28px;

}
/* 
.dry-tip-text strong{

    color:var(--clr-primary);

    font-weight:600;

} */

/*==========================================
            SIGNATURE
==========================================*/

.dry-tip-signature{

    font-family:var(--ff-paragraph);

    font-size:1rem;

    font-weight:600;

    color:#bf7296;

}

/*==========================================
            DECORATION
==========================================*/

.dry-tip-decoration{

    width:100px;

    flex-shrink:0;

}

.dry-tip-decoration img{

    width:100%;

    display:block;

    opacity:.9;

}

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

@media(max-width:1024px){

    .dry-tip-card{

        flex-direction:column;

        text-align:center;

        gap:40px;

        padding:40px;

    }

    .dry-tip-content{

        max-width:100%;

    }

    .dry-tip-image{

        max-width:260px;

    }

    .dry-tip-decoration{

        display:none;

    }

}

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

@media(max-width:768px){

    .dry-tip-section{

        padding:90px 20px;

    }

    .dry-tip-card{

        padding:30px;

        border-radius:28px;

    }

    .dry-tip-heading{

        font-size:2rem;

    }

    .dry-tip-text{

        font-size:1rem;

        line-height:1.8;

    }

}

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

@media(max-width:480px){

    .dry-tip-image{

        max-width:220px;

    }

    .dry-tip-heading{

        font-size:1.7rem;

    }

    .dry-tip-badge{

        font-size:1.3rem;

    }

}