/*==========================================
            MELASMA HERO
==========================================*/

.sb-showcase{

    padding:140px 5% 50px;

    background:
    radial-gradient(circle at top right,#fff0f8 0%,transparent 35%),
    radial-gradient(circle at bottom left,#fdf6ff 0%,transparent 30%),
    var(--clr-white);

}

.sb-shell{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:.90fr 1fr;

    gap:45px;

    align-items:center;

}


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

.sb-copy{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


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

.sb-pill{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 18px;

    border-radius:999px;

    background:var(--background-sb);

    border:1px solid var(--color-primary-hover);

    color:var(--clr-primary);

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

    font-size:.88rem;

    font-weight:500;

    margin-bottom:26px;

}


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

.sb-title{

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

    font-size:70px;

    font-weight:200;

    line-height:1.1;

    color:var(--clr-heading);

    margin-bottom:22px;

}

.sb-title span{

    color:var(--clr-primary);

}


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

.sb-lead{

    max-width:700px;

    font-size:1.3rem;

    line-height:1.8;

    color:var(--clr-heading);

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

}

.sb-body{

    max-width:700px;

    font-size:1.1rem;

    line-height:2;

    color:var(--clr-text);

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

}


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

.sb-actions{

    display:flex;

    gap:18px;

    margin:42px 0;

}

.sb-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    background:var(--clr-primary);

    color:var(--clr-white);

    text-decoration:none;

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

    transition:.35s;

}

.sb-btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(229,170,218,.28);

}

.sb-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    background:var(--clr-white);

    border:1px solid rgba(223,200,223,.6);

    color:var(--clr-heading);

    text-decoration:none;

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

    transition:.35s;

}

.sb-btn-secondary:hover{

    transform:translateY(-4px);

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

}


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

.sb-canvas{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    position:relative;

}

.sb-artwork{

    width:100%;

    max-width:500px;

    transform:translateY(-30px);

}


/*==========================================
            RESPONSIVE
==========================================*/

@media(max-width:1024px){

.sb-shell{

    grid-template-columns:1fr;

    text-align:center;

}

.sb-copy{

    align-items:center;

}

.sb-actions{

    justify-content:center;

}

.sb-canvas{

    margin-top:50px;

}

}

@media(max-width:768px){

.sb-showcase{

    width:100%;

    padding:70px 7%;

}

.sb-title{

    font-size:2.8rem;

}

.sb-lead{

    font-size:1.1rem;

}

.sb-actions{

    flex-direction:column;

    width:100%;

}

.sb-btn-primary,

.sb-btn-secondary{

    width:100%;

}

.sb-canvas{

    width:80%;

    margin:auto;

}

}

/*==========================================
            WHAT IS MELASMA?
==========================================*/

.mel-intro{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fff8fc 100%
    );

}

.meli-wrap{

    max-width:1300px;

    margin:auto;

}


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

.meli-head{

    text-align:center;

    margin-bottom:70px;

}

.meli-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.meli-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.meli-sub{

    max-width:760px;

    margin:auto;

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

    color:var(--clr-text);

    line-height:1.9;

    
    font-size: 1.03rem;

}


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

.meli-layout{

    display:grid;

    grid-template-columns:1fr 430px;

    gap:60px;

    align-items:center;

}


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

.meli-text-card{

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:28px;

    padding:34px;

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

}

.meli-small{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:.85rem;

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

    color:var(--clr-primary);

    margin-bottom:14px;

}

.meli-text-card h3{

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

    font-size:2rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

    line-height:1.3;

}

.meli-text-card p{

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

    color:var(--clr-text);

    line-height:1.9;

    margin-bottom:18px;

  font-size:1.04rem

}

.meli-text-card p:last-child{

    margin-bottom:0;

}


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

.meli-features{

    display:grid;

    gap:18px;

    margin-top:28px;

}

.meli-feature{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 22px;

    background:#fff7fb;

    border:1px solid #f4dbe8;

    border-radius:18px;

    transition:.35s;

}

.meli-feature:hover{

    transform:translateX(8px);

    border-color:#efc5db;

}

.meli-feature i{

    width:48px;

    height:48px;

    border-radius:14px;

    background:#fff1f8;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--clr-primary);

    font-size:1.2rem;

    flex-shrink:0;

}

.meli-feature span{

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

    color:var(--clr-text);

    line-height:1.7;

}


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

.meli-image{

    position:relative;

    text-align:center;

}

.meli-image img{

    width:100%;

    max-width:360px;

    transition:.35s;

}

.meli-image img:hover{

    transform:translateY(-8px);

}


/*==========================================
        FLOATING INFO CARD
==========================================*/

.meli-highlight{

    position:absolute;

    bottom:50px;

    right:0;

    width:300px;

    display:flex;

    gap:16px;

    padding:22px;

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:22px;

    box-shadow:0 18px 45px rgba(236,180,215,.18);

}

.meli-highlight i{

    font-size:1.4rem;

    color:var(--clr-primary);

    margin-top:4px;

    flex-shrink:0;

}

.meli-highlight h4{

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

    font-size:1.25rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:10px;

}

.meli-highlight p{

    margin:0;

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

    color:var(--clr-text);

    line-height:1.8;

   
  font-size:1.04rem
}


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

@media(max-width:1024px){

.meli-layout{

    grid-template-columns:1fr;

    gap:50px;

}

.meli-image{

    order:-1;

}

.meli-highlight{

    position:static;

    width:100%;

    margin-top:25px;

}

}


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

@media(max-width:768px){

.mel-intro{

    padding:70px 6%;

}

.meli-title{

    font-size:2.1rem;

}

.meli-sub{

    font-size:1rem;

}

.meli-text-card{

    padding:26px;

}

.meli-text-card h3{

    font-size:1.55rem;

}

.meli-feature{

    padding:16px;

}

.meli-feature i{

    width:42px;

    height:42px;

    font-size:1rem;

}

.meli-highlight{

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:20px;

}

}

/*==========================================
        HOW DOES MELASMA DEVELOP?
==========================================*/

.mel-process{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #fff8fc 0%,
        #ffffff 100%
    );

}

.melp-wrap{

    max-width:1500px;

    margin:auto;

}


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

.melp-head{

    text-align:center;

    margin-bottom:70px;

}

.melp-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.melp-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.melp-sub{

    max-width:760px;

    margin:auto;

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

    color:var(--clr-text);

    line-height:1.9;

    
    font-size: 1.03rem;

}


/*==========================================
            ROADMAP
==========================================*/

.melp-road{

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    gap:18px;

    overflow-x:auto;

    overflow-y: visible;

    padding-bottom:25px 20px 20px;

    scroll-behavior: smooth;

}

.melp-road::-webkit-scrollbar{

    height:8px;

}

.melp-road::-webkit-scrollbar-thumb{

    background:#efc5db;

    border-radius:999px;

}


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

.melp-step{

    min-width:255px;

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:28px;

    overflow:hidden;

    position:relative;

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

    transition:.35s;

}

.melp-step:hover{

    transform:translateY(-8px);

    border-color:#efc5db;

    box-shadow:0 24px 55px rgba(236,180,215,.18);

}


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

.melp-number{

    position:absolute;

    top:-18px;

    right:22px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #ffd7ea,
        #efb8d5
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

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

    font-size:1.1rem;

    box-shadow:0 10px 25px rgba(236,180,215,.25);

}


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

.melp-image{

    background:#fff7fb;

    padding:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-bottom:1px solid #f3dce8;

}

.melp-image img{

    width:150px;

    transition:.35s;

}

.melp-step:hover .melp-image img{

    transform:scale(1.05);

}


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

.melp-content{

    padding:30px 24px 24px;

}

.melp-content h3{

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

    font-size:1.35rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:14px;

    line-height:1.4;

}

.melp-content p{

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

    color:var(--clr-text);

   
  font-size:1.04rem;
    line-height:1.8;

}


/*==========================================
            CONNECTOR
==========================================*/

.melp-line{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:55px;

    height:340px;

}

.melp-line i{

    font-size:1.7rem;

    color:#e5a7c8;

}


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

@media(max-width:1024px){

.melp-road{

    justify-content:flex-start;

}

}


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

@media(max-width:768px){

.mel-process{

    padding:70px 6%;

}

.melp-title{

    font-size:2.1rem;

}

.melp-sub{

    font-size:1rem;

}

.melp-step{

    min-width:240px;

}

.melp-image img{

    width:120px;

}

.melp-content{

    padding:28px 20px 20px;

}

.melp-content h3{

    font-size:1.2rem;

}

.melp-content p{

    font-size:.94rem;

}

.melp-line{

    min-width:45px;

    height:300px;

}

.melp-line i{

    font-size:1.3rem;

}

}

/*==========================================
            TYPES OF MELASMA
==========================================*/

.mel-types{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fff8fc 100%
    );

}

.melt-wrap{

    max-width:1300px;

    margin:auto;

}


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

.melt-head{

    text-align:center;

    margin-bottom:70px;

}

.melt-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.melt-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.melt-sub{

    max-width:760px;

    margin:auto;

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

    color:var(--clr-text);

    
    font-size: 1.03rem;

    line-height:1.9;

}


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

.melt-grid{

    display:grid;

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

    gap:32px;

}


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

.melt-card{

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:32px;

    overflow:hidden;

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

    transition:.35s;

}

.melt-card:hover{

    transform:translateY(-8px);

    border-color:#efc5db;

    box-shadow:0 24px 55px rgba(236,180,215,.18);

}


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

.melt-image{

    padding:28px;

    background:#fff7fb;

    border-bottom:1px solid #f3dce8;

    display:flex;

    justify-content:center;

    align-items:center;

}

.melt-image img{

    width:180px;

    max-width:100%;

    transition:.35s;

}

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

    transform:scale(1.05);

}


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

.melt-body{

    padding:30px;

}

.melt-badge{

    display:inline-block;

    padding:7px 16px;

    border-radius:999px;

    background:#fff3fa;

    color:var(--clr-primary);

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

    font-size:.82rem;

    font-weight:600;

    margin-bottom:18px;

}

.melt-body h3{

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

    font-size:1.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:16px;

}

.melt-body p{

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

    color:var(--clr-text);

    line-height:1.85;

    margin-bottom:24px;

}

.melt-body strong{

    color:var(--clr-heading);

}


/*==========================================
            INFO
==========================================*/

.melt-info{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.melt-info div{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:15px 18px;

    background:#fff9fc;

    border:1px solid #f4dbe8;

    border-radius:18px;

    transition:.3s;

}

.melt-info div:hover{

    border-color:#efc5db;

    transform:translateX(5px);

}

.melt-info i{

    color:var(--clr-primary);

    font-size:1.1rem;

    margin-top:3px;

    flex-shrink:0;

}

.melt-info span{

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

    color:var(--clr-text);

    line-height:1.7;

   
  font-size:1.04rem
}


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

@media(max-width:1100px){

.melt-grid{

    grid-template-columns:1fr;

    max-width:700px;

    margin:auto;

}

}


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

@media(max-width:768px){

.mel-types{

    padding:70px 6%;

}

.melt-title{

    font-size:2.1rem;

}

.melt-sub{

    font-size:1rem;

}

.melt-image{

    padding:22px;

}

.melt-image img{

    width:140px;

}

.melt-body{

    padding:24px;

}

.melt-body h3{

    font-size:1.4rem;

}

.melt-body p{

   
  font-size:1.04rem
}

.melt-info div{

    padding:14px;

}

.melt-info span{

    font-size:.92rem;

}

}

/*==========================================
        SIGNS & APPEARANCE
==========================================*/

.mel-signs{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fff8fc 100%
    );

}

.mels-wrap{

    max-width:1300px;

    margin:auto;

}


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

.mels-head{

    text-align:center;

    margin-bottom:70px;

}

.mels-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.mels-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.mels-sub{

    max-width:760px;

    margin:auto;

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

    color:var(--clr-text);

    
    font-size: 1.03rem;

    line-height:1.9;

}


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

.mels-layout{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:55px;

    align-items:center;

}


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

.mels-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.mels-image img{

    width:100%;

    max-width:330px;

    transition:.35s;

}

.mels-image img:hover{

    transform:translateY(-8px);

}


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

.mels-grid{

    display:grid;

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

    gap:22px;

}


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

.mels-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:24px;

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:24px;

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

    transition:.35s;

}

.mels-card:hover{

    transform:translateY(-6px);

    border-color:#efc5db;

    box-shadow:0 22px 50px rgba(236,180,215,.18);

}


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

.mels-icon{

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:18px;

    background:#fff3fa;

    display:flex;

    justify-content:center;

    align-items:center;

}

.mels-icon i{

    font-size:1.35rem;

    color:var(--clr-primary);

}


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

.mels-card h3{

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

    font-size:1.3rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:10px;

    line-height:1.4;

}

.mels-card p{

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

    color:var(--clr-text);

   
  font-size:1.04rem;
    line-height:1.8;

}


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

@media(max-width:1024px){

.mels-layout{

    grid-template-columns:1fr;

    gap:45px;

}

.mels-image{

    order:-1;

}

.mels-image img{

    max-width:280px;

}

}


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

@media(max-width:768px){

.mel-signs{

    padding:70px 6%;

}

.mels-title{

    font-size:2.1rem;

}

.mels-sub{

    font-size:1rem;

}

.mels-grid{

    grid-template-columns:1fr;

}

.mels-card{

    padding:20px;

}

.mels-icon{

    width:52px;

    height:52px;

}

.mels-icon i{

    font-size:1.2rem;

}

.mels-card h3{

    font-size:1.15rem;

}

.mels-card p{

    font-size:.94rem;

}

}

/*==========================================
        WHAT CAUSES MELASMA?
==========================================*/

.mel-causes{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #fff8fc 0%,
        #ffffff 100%
    );

}

.melc-wrap{

    max-width:1300px;

    margin:auto;

}


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

.melc-head{

    text-align:center;

    margin-bottom:70px;

}

.melc-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.melc-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.melc-sub{

    max-width:760px;

    margin:auto;

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

    color:var(--clr-text);

    line-height:1.9;

    
    font-size: 1.03rem;

}


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

.melc-grid{

    display:grid;

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

    gap:30px;

}


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

.melc-card{

    position:relative;

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:30px;

    overflow:hidden;

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

    transition:.35s;

}

.melc-card:hover{

    transform:translateY(-8px);

    border-color:#efc5db;

    box-shadow:0 24px 55px rgba(236,180,215,.18);

}


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

.melc-number{

    position:absolute;

    top:18px;

    right:18px;

    width:44px;

    height:44px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #ffd9eb,
        #efb8d5
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

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

    font-size:1rem;

    box-shadow:0 10px 25px rgba(236,180,215,.25);

}


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

.melc-image{

    padding:28px;

    background:#fff7fb;

    display:flex;

    justify-content:center;

    align-items:center;

    border-bottom:1px solid #f3dce8;

}

.melc-image img{

    width:150px;

    max-width:100%;

    transition:.35s;

}

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

    transform:scale(1.06);

}


.melc-image1{

    padding:28px;

    background:#fff7fb;

    display:flex;

    justify-content:center;

    align-items:center;

    border-bottom:1px solid #f3dce8;

}

.melc-image1 img{

    width:250px;

    max-width:100%;

    transition:.35s;

}

.melc-card:hover .melc-image1 img{

    transform:scale(1.06);

}


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

.melc-content{

    padding:28px;

}

.melc-content h3{

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

    font-size:1.45rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:14px;

    line-height:1.4;

}

.melc-content p{

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

    color:var(--clr-text);

   
  font-size:1.04rem;
    line-height:1.85;

}


/*==========================================
        LAST CARD CENTER
==========================================*/

.melc-card:last-child{

    grid-column:2;

}


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

@media(max-width:1024px){

.melc-grid{

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

}

.melc-card:last-child{

    grid-column:auto;

}

}


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

@media(max-width:768px){

.mel-causes{

    padding:70px 6%;

}

.melc-title{

    font-size:2.1rem;

}

.melc-sub{

    font-size:1rem;

}

.melc-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.melc-card:last-child{

    grid-column:auto;

}

.melc-image{

    padding:22px;

}

.melc-image img{

    width:120px;

}

.melc-content{

    padding:24px;

}

.melc-content h3{

    font-size:1.25rem;

}

.melc-content p{

   
  font-size:1.04rem
}

.melc-number{

    width:38px;

    height:38px;

    font-size:.9rem;

    top:14px;

    right:14px;

}

}

/*==========================================
        COMMON AREAS
==========================================*/

.mel-areas{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fff8fc 100%
    );

}

.mela-wrap{

    max-width:1300px;

    margin:auto;

}


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

.mela-head{

    text-align:center;

    margin-bottom:70px;

}

.mela-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.mela-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.mela-sub{

    max-width:760px;

    margin:auto;

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

    color:var(--clr-text);

    
    font-size: 1.03rem;

    line-height:1.9;

}


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

.mela-layout{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:60px;

    align-items:center;

}


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

.mela-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.mela-image img{

    width:100%;

    max-width:330px;

    transition:.35s;

}

.mela-image img:hover{

    transform:translateY(-8px);

}


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

.mela-content{

    display:flex;

    flex-direction:column;

    gap:24px;

}


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

.mela-box{

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:28px;

    padding:28px;

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

    transition:.35s;

}

.mela-box:hover{

    transform:translateY(-6px);

    border-color:#efc5db;

    box-shadow:0 22px 50px rgba(236,180,215,.18);

}


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

.mela-box-head{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:20px;

}

.mela-box-head i{

    width:55px;

    height:55px;

    border-radius:18px;

    background:#fff3fa;

    color:var(--clr-primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.3rem;

    flex-shrink:0;

}

.mela-box-head h3{

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

    font-size:1.5rem;

    font-weight:500;

    color:var(--clr-heading);

}


/*==========================================
            TAGS
==========================================*/

.mela-tags{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.mela-tags span{

    padding:12px 20px;

    border-radius:999px;

    background:#fff8fc;

    border:1px solid #f4dbe8;

    color:var(--clr-text);

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

   
  font-size:1.04rem;
    transition:.3s;

}

.mela-tags span:hover{

    background:#fff0f8;

    border-color:#efc5db;

    color:var(--clr-heading);

}


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

.mela-note{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:26px;

    background:#fff7fb;

    border:1px solid #f4dbe8;

    border-radius:26px;

}

.mela-note i{

    width:60px;

    height:60px;

    border-radius:18px;

    background:#fff1f8;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--clr-primary);

    font-size:1.4rem;

    flex-shrink:0;

}

.mela-note h4{

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

    font-size:1.35rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:10px;

}

.mela-note p{

    margin:0;

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

    color:var(--clr-text);

    line-height:1.8;

}


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

@media(max-width:1024px){

.mela-layout{

    grid-template-columns:1fr;

    gap:45px;

}

.mela-image{

    order:-1;

}

.mela-image img{

    max-width:280px;

}

}


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

@media(max-width:768px){

.mel-areas{

    padding:70px 6%;

}

.mela-title{

    font-size:2.1rem;

}

.mela-sub{

    font-size:1rem;

}

.mela-box{

    padding:22px;

}

.mela-box-head{

    flex-direction:column;

    text-align:center;

    gap:12px;

}

.mela-box-head i{

    width:52px;

    height:52px;

    font-size:1.2rem;

}

.mela-box-head h3{

    font-size:1.3rem;

}

.mela-tags{

    justify-content:center;

}

.mela-tags span{

    padding:10px 16px;

    font-size:.9rem;

}

.mela-note{

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:22px;

}

.mela-note i{

    width:54px;

    height:54px;

    font-size:1.25rem;

}

.mela-note h4{

    font-size:1.2rem;

}

.mela-note p{

   
  font-size:1.04rem
}

}

/*==========================================
        MELASMA VS PIH
==========================================*/

.mel-compare{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #fff8fc 0%,
        #ffffff 100%
    );

}

.melcmp-wrap{

    max-width:1300px;

    margin:auto;

}


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

.melcmp-head{

    text-align:center;

    margin-bottom:70px;

}

.melcmp-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.melcmp-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.melcmp-sub{

    max-width:760px;

    margin:auto;

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

    color:var(--clr-text);

    
    font-size: 1.03rem;

    line-height:1.9;

}


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

.melcmp-table{

    overflow:hidden;

    border:1px solid rgba(236,220,230,.8);

    border-radius:28px;

    background:#ffffff;

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

}


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

.melcmp-header{

    display:grid;

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

    background:#fff7fb;

    border-bottom:1px solid #f4dbe8;

}

.melcmp-col{

    padding:28px 20px;

    text-align:center;

}

.melcmp-col i{

    font-size:1.6rem;

    color:var(--clr-primary);

    margin-bottom:12px;

}

.melcmp-col h3{

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

    font-size:1.5rem;

    font-weight:500;

    color:var(--clr-heading);

}


/*==========================================
            ROWS
==========================================*/

.melcmp-row{

    display:grid;

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

    border-bottom:1px solid #f4dbe8;

}

.melcmp-row:last-child{

    border-bottom:none;

}

.melcmp-row>div{

    padding:24px;

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

    color:var(--clr-text);

    line-height:1.8;

}

.melcmp-row>div:not(:last-child){

    border-right:1px solid #f4dbe8;

}

.melcmp-label{

    background:#fffafb;

    font-weight:600;

    color:var(--clr-heading);

}


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

.melcmp-note{

    margin-top:40px;

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:28px;

    background:#fff7fb;

    border:1px solid #f4dbe8;

    border-radius:26px;

}

.melcmp-icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    border-radius:18px;

    background:#fff1f8;

    display:flex;

    justify-content:center;

    align-items:center;

}

.melcmp-icon i{

    color:var(--clr-primary);

    font-size:1.4rem;

}

.melcmp-note h3{

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

    font-size:1.35rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:10px;

}

.melcmp-note p{

    margin:0;

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

    color:var(--clr-text);

    line-height:1.8;

}

.melcmp-note strong{

    color:var(--clr-heading);

}


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

@media(max-width:992px){

.melcmp-header,

.melcmp-row{

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

}

.melcmp-row>div,

.melcmp-col{

    padding:18px;

}

}


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

@media(max-width:768px){

.mel-compare{

    padding:70px 6%;

}

.melcmp-title{

    font-size:2.1rem;

}

.melcmp-sub{

    font-size:1rem;

}

.melcmp-table{

    overflow-x:auto;

}

.melcmp-header,

.melcmp-row{

    min-width:720px;

}

.melcmp-note{

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:22px;

}

.melcmp-icon{

    width:54px;

    height:54px;

}

.melcmp-icon i{

    font-size:1.25rem;

}

.melcmp-note h3{

    font-size:1.2rem;

}

.melcmp-note p{

   
  font-size:1.04rem
}

}

/*==========================================
        CAN MELASMA COME BACK?
==========================================*/

.mel-return{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #fff8fc 0%,
        #ffffff 100%
    );

}

.melr-wrap{

    max-width:1400px;

    margin:auto;

}


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

.melr-head{

    text-align:center;

    margin-bottom:70px;

}

.melr-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.melr-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.melr-sub{

    max-width:760px;

    margin:auto;

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

    color:var(--clr-text);

    line-height:1.9;

    
    font-size: 1.03rem;

}


/*==========================================
            RETURN CYCLE
==========================================*/

.melr-cycle{

    display:flex;

    justify-content:flex-start;

    align-items:flex-start;

    gap:20px;

    overflow-x:auto;

    overflow-y: visible;

    padding-bottom:25px 20px 20px;

    scroll-behavior: smooth;

}

.melr-cycle::-webkit-scrollbar{

    height:8px;

}

.melr-cycle::-webkit-scrollbar-thumb{

    background:#efc5db;

    border-radius:999px;

}


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

.melr-step{

    min-width:250px;

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:28px;

    padding:28px 24px;

    text-align:center;

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

    transition:.35s;

}

.melr-step:hover{

    transform:translateY(-8px);

    border-color:#efc5db;

    box-shadow:0 22px 55px rgba(236,180,215,.18);

}


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

.melr-icon{

    width:76px;

    height:76px;

    margin:0 auto 22px;

    border-radius:22px;

    background:#fff3fa;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.melr-step:hover .melr-icon{

    transform:rotate(-8deg) scale(1.06);

}

.melr-icon i{

    color:var(--clr-primary);

    font-size:1.8rem;

}


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

.melr-step h3{

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

    font-size:1.4rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:14px;

    line-height:1.4;

}

.melr-step p{

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

    color:var(--clr-text);

   
  font-size:1.04rem;
    line-height:1.8;

}


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

.melr-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:60px;

    height:260px;

}

.melr-arrow i{

    font-size:1.8rem;

    color:#e6a9c9;

}


/*==========================================
        BOTTOM SECTION
==========================================*/

.melr-bottom{

    margin-top:50px;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:30px;

}


/*==========================================
            TAGS
==========================================*/

.melr-left{

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:28px;

    padding:30px;

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

}

.melr-left h3{

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

    font-size:1.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:24px;

}

.melr-tags{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.melr-tags span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

    background:#fff8fc;

    border:1px solid #f4dbe8;

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

    color:var(--clr-text);

    transition:.3s;

}

.melr-tags span:hover{

    background:#fff2f9;

    border-color:#efc5db;

}

.melr-tags i{

    color:var(--clr-primary);

}


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

.melr-note{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:28px;

    background:#fff7fb;

    border:1px solid #f4dbe8;

    border-radius:28px;

}

.melr-note i{

    width:60px;

    height:60px;

    flex-shrink:0;

    border-radius:18px;

    background:#fff1f8;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--clr-primary);

    font-size:1.4rem;

}

.melr-note h4{

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

    font-size:1.35rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:10px;

}

.melr-note p{

    margin:0;

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

    color:var(--clr-text);

    line-height:1.85;

}


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

@media(max-width:1024px){

.melr-bottom{

    grid-template-columns:1fr;

}

.melr-cycle{

    justify-content:flex-start;

}

}


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

@media(max-width:768px){

.mel-return{

    padding:70px 6%;

}

.melr-title{

    font-size:2.1rem;

}

.melr-sub{

    font-size:1rem;

}

.melr-step{

    min-width:230px;

    padding:24px 20px;

}

.melr-icon{

    width:62px;

    height:62px;

}

.melr-icon i{

    font-size:1.5rem;

}

.melr-step h3{

    font-size:1.2rem;

}

.melr-step p{

    font-size:.94rem;

}

.melr-arrow{

    min-width:45px;

    height:230px;

}

.melr-arrow i{

    font-size:1.4rem;

}

.melr-left{

    padding:24px;

}

.melr-left h3{

    font-size:1.4rem;

}

.melr-tags{

    justify-content:center;

}

.melr-tags span{

    font-size:.9rem;

    padding:10px 16px;

}

.melr-note{

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:22px;

}

.melr-note i{

    width:54px;

    height:54px;

    font-size:1.25rem;

}

.melr-note h4{

    font-size:1.2rem;

}

.melr-note p{

   
  font-size:1.04rem
}

}

/*==========================================
        INGREDIENTS THAT HELP
==========================================*/

.mel-ingredients{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fff8fc 100%
    );

}

.melii-wrap{

    max-width:1300px;

    margin:auto;

}


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

.melii-head{

    text-align:center;

    margin-bottom:70px;

}

.melii-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.melii-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.melii-sub{

    max-width:760px;

    margin:auto;

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

    color:var(--clr-text);

    
    font-size: 1.03rem;

    line-height:1.9;

}


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

.melii-grid{

    display:grid;

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

    gap:28px;

}


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

.melii-card{

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:30px;

    padding:30px 24px;

    text-align:center;

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

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.melii-card:hover{

    transform:translateY(-8px);

    border-color:#efc5db;

    box-shadow:0 24px 55px rgba(236,180,215,.18);

}

.melii-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #ffd9eb,
        #efb8d5,
        #ffd9eb
    );

}


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

.melii-card img{

    width:105px;

    height:105px;

    object-fit:contain;

    margin-bottom:22px;

    transition:.35s;

}

.melii-card:hover img{

    transform:scale(1.08);

}


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

.melii-card h3{

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

    font-size:1.35rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:14px;

    line-height:1.4;

}

.melii-card p{

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

    color:var(--clr-text);

   
  font-size:1.04rem;
    line-height:1.8;

}


/*==========================================
        FEATURED SUNSCREEN CARD
==========================================*/

.melii-featured{

    background:linear-gradient(
        180deg,
        #fffafc 0%,
        #fff2f8 100%
    );

    border:2px solid #efc5db;

    position:relative;

}

.melii-featured::after{

    content:"Most Important";

    position:absolute;

    top:18px;

    right:-42px;

    transform:rotate(45deg);

    background:var(--clr-primary);

    color:#ffffff;

    padding:7px 48px;

    font-size:.72rem;

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

    letter-spacing:.04em;

    font-weight:600;

}

.melii-featured img{

    width:115px;

}

.melii-featured h3{

    color:var(--clr-primary);

}


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

@media(max-width:1100px){

.melii-grid{

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

}

.melii-featured::after{

    right:-46px;

}

}


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

@media(max-width:768px){

.mel-ingredients{

    padding:70px 6%;

}

.melii-title{

    font-size:2.1rem;

}

.melii-sub{

    font-size:1rem;

}

.melii-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.melii-card{

    padding:26px 22px;

}

.melii-card img{

    width:90px;

    height:90px;

}

.melii-featured img{

    width:100px;

}

.melii-card h3{

    font-size:1.2rem;

}

.melii-card p{

   
  font-size:1.04rem
}

.melii-featured::after{

    font-size:.65rem;

    padding:6px 42px;

    right:-44px;

}

}

/*==========================================
        PREVENTION TIPS
==========================================*/

.mel-prevention{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fff8fc 100%
    );

}

.melp-wrap{

    max-width:1300px;

    margin:auto;

}


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

.melp-head{

    text-align:center;

    margin-bottom:70px;

}

.melp-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.melp-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.melp-sub{

    max-width:760px;

    
    font-size: 1.03rem;

    margin:auto;

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

    color:var(--clr-text);

    line-height:1.9;

}


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

.melp-layout{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:55px;

    align-items:center;

}


/*==========================================
            CHECKLIST
==========================================*/

.melp-checklist{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.melp-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px 24px;

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:22px;

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

    transition:.35s;

}

.melp-item:hover{

    transform:translateX(8px);

    border-color:#efc5db;

    box-shadow:0 20px 45px rgba(236,180,215,.18);

}

.melp-item i{

    width:50px;

    height:50px;

    flex-shrink:0;

    border-radius:16px;

    background:#fff3fa;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--clr-primary);

    font-size:1.25rem;

}

.melp-item span{

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

    color:var(--clr-text);

    line-height:1.8;

    font-size:1rem;

}


/*==========================================
            ILLUSTRATION
==========================================*/

.melp-illustration{

    position:relative;

    text-align:center;

}

.melp-illustration img{

    width:100%;

    max-width:340px;

    transition:.35s;

}

.melp-illustration img:hover{

    transform:translateY(-8px);

}


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

.melp-tip{

    margin-top:28px;

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:24px;

    background:#fff7fb;

    border:1px solid #f4dbe8;

    border-radius:24px;

    text-align:left;

}

.melp-tip i{

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:18px;

    background:#fff1f8;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--clr-primary);

    font-size:1.35rem;

}

.melp-tip h3{

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

    font-size:1.35rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:10px;

}

.melp-tip p{

    margin:0;

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

    color:var(--clr-text);

    line-height:1.8;

}


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

@media(max-width:1024px){

.melp-layout{

    grid-template-columns:1fr;

    gap:45px;

}

.melp-illustration{

    order:-1;

}

.melp-illustration img{

    max-width:280px;

}

}


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

@media(max-width:768px){

.mel-prevention{

    padding:70px 6%;

}

.melp-title{

    font-size:2.1rem;

}

.melp-sub{

    font-size:1rem;

}

.melp-item{

    padding:18px;

    gap:14px;

}

.melp-item i{

    width:44px;

    height:44px;

    font-size:1.1rem;

}

.melp-item span{

   
  font-size:1.04rem
}

.melp-tip{

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:22px;

}

.melp-tip i{

    width:52px;

    height:52px;

    font-size:1.2rem;

}

.melp-tip h3{

    font-size:1.2rem;

}

.melp-tip p{

   
  font-size:1.04rem
}

}
/*==========================================
        MYTHS VS FACTS
==========================================*/

.mel-myths{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #fff8fc 0%,
        #ffffff 100%
    );

}

.melmy-wrap{

    max-width:1300px;

    margin:auto;

}


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

.melmy-head{

    text-align:center;

    margin-bottom:70px;

}

.melmy-pill{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#fff4fa;

    border:1px solid #f5d8e8;

    color:var(--clr-primary);

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

    font-size:.9rem;

    margin-bottom:18px;

}

.melmy-title{

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

    font-size:2.7rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:18px;

}

.melmy-sub{

    max-width:760px;

    margin:auto;

    
    font-size: 1.03rem;

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

    color:var(--clr-text);

    line-height:1.9;

}


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

.melmy-grid{

    display:grid;

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

    gap:28px;

}


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

.melmy-card{

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:28px;

    overflow:hidden;

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

    transition:.35s;

}

.melmy-card:hover{

    transform:translateY(-8px);

    border-color:#efc5db;

    box-shadow:0 24px 55px rgba(236,180,215,.18);

}


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

.melmy-wide{

    grid-column:1 / -1;

}


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

.melmy-myth{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:24px;

    background:linear-gradient(
        135deg,
        #fff5f9,
        #ffeef6
    );

    border-bottom:1px solid #f4dbe8;

}

.melmy-myth i{

    color:#df4b74;

    font-size:1.45rem;

    margin-top:4px;

    flex-shrink:0;

}

.melmy-myth h3{

    margin:0;

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

    font-size:1.4rem;

    font-weight:500;

    color:var(--clr-heading);

    line-height:1.5;

}


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

.melmy-fact{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:24px;

}

.melmy-fact i{

    color:#4caf72;

    font-size:1.45rem;

    margin-top:4px;

    flex-shrink:0;

}

.melmy-fact p{

    margin:0;

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

    color:var(--clr-text);

    font-size:.96rem;

    line-height:1.85;

}


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

@media(max-width:1024px){

.melmy-grid{

    grid-template-columns:1fr;

}

.melmy-wide{

    grid-column:auto;

}

}


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

@media(max-width:768px){

.mel-myths{

    padding:70px 6%;

}

.melmy-title{

    font-size:2.1rem;

}

.melmy-sub{

    font-size:1rem;

}

.melmy-myth,

.melmy-fact{

    padding:20px;

}

.melmy-myth h3{

    font-size:1.2rem;

}

.melmy-fact p{

   
  font-size:1.04rem
}

.melmy-myth i,

.melmy-fact i{

    font-size:1.2rem;

}

}

/*==========================================
            MIMII TIP
==========================================*/

.mel-mimii{

    padding:90px 6%;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fff8fc 100%
    );

}

.melmt-wrap{

    max-width:1300px;

    margin:auto;

}


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

.melmt-card{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:50px;

    align-items:center;

    background:#ffffff;

    border:1px solid rgba(236,220,230,.8);

    border-radius:36px;

    padding:45px;

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

}


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

.melmt-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.melmt-image img{

    width:100%;

    max-width:620px;

    transition:.35s;

}

.melmt-image img:hover{

    transform:translateY(-8px);

}


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

.melmt-pill{

        display: inline-block;
    margin-bottom: 18px;
    color: rgb(207, 103, 157);
    font-family: var(--ff-heading);
    font-size: 1.5rem;
    font-weight: 500

}

.melmt-content h2{

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

    font-size:2.3rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:22px;

    line-height:1.3;

}

.melmt-content p{

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

    color:var(--clr-text);

    line-height:1.9;

    margin-bottom:18px;

}

.melmt-content strong{

    color: var(--color-primary-hover);


}

.mk-note-signature{

        font-family: var(--ff-paragraph);
    font-size: 0.95rem;
    font-weight: 600;
    color: rgb(191, 114, 150);
}
/*==========================================
            QUOTE CARD
==========================================*/

.melmt-quote{

    margin-top:30px;

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:24px;

    background:#fff7fb;

    border:1px solid #f4dbe8;

    border-radius:24px;

}

.melmt-icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    border-radius:18px;

    background:#fff1f8;

    display:flex;

    justify-content:center;

    align-items:center;

}

.melmt-icon i{

    color:var(--clr-primary);

    font-size:1.5rem;

}

.melmt-quote h3{

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

    font-size:1.35rem;

    font-weight:500;

    color:var(--clr-heading);

    margin-bottom:10px;

}

.melmt-quote p{

    margin:0;

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

    color:var(--clr-text);

    line-height:1.85;

}


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

@media(max-width:1024px){

.melmt-card{

    grid-template-columns:1fr;

    text-align:center;

}

.melmt-image{

    order:-1;

}

.melmt-image img{

    max-width:260px;

}

.melmt-quote{

    text-align:left;

}

}


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

@media(max-width:768px){

.mel-mimii{

    padding:70px 6%;

}

.melmt-card{

    padding:30px 24px;

    gap:35px;

}

.melmt-content h2{

    font-size:1.9rem;

}

.melmt-content p{

    font-size:.96rem;

}

.melmt-image img{

    max-width:220px;

}

.melmt-quote{

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:20px;

}

.melmt-icon{

    width:54px;

    height:54px;

}

.melmt-icon i{

    font-size:1.3rem;

}

.melmt-quote h3{

    font-size:1.2rem;

}

.melmt-quote p{

   
  font-size:1.04rem
}

}