.elementor-366 .elementor-element.elementor-element-1d6483c:not(.elementor-motion-effects-element-type-background), .elementor-366 .elementor-element.elementor-element-1d6483c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}.elementor-366 .elementor-element.elementor-element-1d6483c{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:60px 0px 60px 0px;}.elementor-366 .elementor-element.elementor-element-1d6483c > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-366 .elementor-element.elementor-element-66c1659{text-align:center;}.elementor-366 .elementor-element.elementor-element-66c1659 .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:45px;font-weight:600;color:#FFFFFF;}.elementor-366 .elementor-element.elementor-element-c989fa7 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-366 .elementor-element.elementor-element-9188b9a:not(.elementor-motion-effects-element-type-background), .elementor-366 .elementor-element.elementor-element-9188b9a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF7F8;}.elementor-366 .elementor-element.elementor-element-9188b9a > .elementor-container{max-width:1280px;}.elementor-366 .elementor-element.elementor-element-9188b9a{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 0px 20px 0px;}.elementor-366 .elementor-element.elementor-element-9188b9a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-366 .elementor-element.elementor-element-d2c371a .elementor-button{background-color:var( --e-global-color-primary );font-family:"Helvetica", Sans-serif;font-size:20px;font-weight:500;text-transform:capitalize;text-decoration:none;border-radius:30px 30px 30px 30px;padding:15px 30px 15px 30px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-521344b */.beauty-why-exhibit {
    --beauty-rose: #b84d73;
    --beauty-plum: #48063c;
    --beauty-gold: #c3905d;
    --beauty-white: #ffffff;
    --beauty-light: #faf7f8;
    --beauty-text: #5f5260;

    width: 100%;
    padding: 100px 24px;
    background: var(--beauty-light);
    overflow: hidden;
}

.beauty-why-exhibit *,
.beauty-why-exhibit *::before,
.beauty-why-exhibit *::after {
    box-sizing: border-box;
}

.beauty-why-wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.72fr 1.55fr;
    gap: 80px;
    align-items: start;
}


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

.beauty-why-intro {
    position: sticky;
    top: 100px;
}

.beauty-why-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 6px 15px;

    background: var(--beauty-rose);
    color: var(--beauty-white);

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;

    margin-bottom: 24px;
}

.beauty-why-intro h2 {
    margin: 0;

    max-width: 480px;

    color: var(--beauty-plum);

    font-size: clamp(40px, 4vw, 66px);
    line-height: 1.03;
    letter-spacing: -2.5px;
    font-weight: 700;
}

.beauty-why-intro h2 span {
    display: block;
    color: var(--beauty-rose);
}

.beauty-why-description {
    max-width: 470px;

    margin: 28px 0 0;

    color: var(--beauty-text);

    font-size: 17px;
    line-height: 1.75;
    font-weight: 400;
}

.beauty-why-line {
    width: 72px;
    height: 3px;

    margin-top: 34px;

    background: var(--beauty-gold);
}

.beauty-why-note {
    margin: 18px 0 0;

    color: var(--beauty-plum);

    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;

    letter-spacing: 0.6px;
    text-transform: uppercase;
}


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

.beauty-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(72, 6, 60, 0.16);
    border-left: 1px solid rgba(72, 6, 60, 0.16);

    background: var(--beauty-white);
}


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

.beauty-benefit-card {
    position: relative;

    min-height: 210px;
    padding: 34px 34px 32px;

    display: flex;
    gap: 24px;
    align-items: flex-start;

    background: var(--beauty-white);

    border-right: 1px solid rgba(72, 6, 60, 0.16);
    border-bottom: 1px solid rgba(72, 6, 60, 0.16);

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.beauty-benefit-card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 4px;
    height: 0;

    background: var(--beauty-rose);

    transition: height 0.25s ease;
}

.beauty-benefit-card:hover {
    background: #fffafb;
}

.beauty-benefit-card:hover::before {
    height: 100%;
}


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

.beauty-benefit-number {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

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

    border: 1px solid var(--beauty-gold);

    color: var(--beauty-gold);

    font-size: 13px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.5px;
}


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

.beauty-benefit-content {
    min-width: 0;
}

.beauty-benefit-content h3 {
    margin: 2px 0 12px;

    color: var(--beauty-plum);

    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
}

.beauty-benefit-content p {
    margin: 0;

    color: var(--beauty-text);

    font-size: 15px;
    line-height: 1.65;
    font-weight: 400;
}


/* ========================================
   ALTERNATING DETAIL
======================================== */

.beauty-benefit-card:nth-child(3n + 2)
.beauty-benefit-number {
    border-color: var(--beauty-rose);
    color: var(--beauty-rose);
}


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

@media (max-width: 1024px) {

    .beauty-why-exhibit {
        padding: 80px 24px;
    }

    .beauty-why-wrap {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .beauty-why-intro {
        position: relative;
        top: auto;
    }

    .beauty-why-intro h2 {
        max-width: 700px;
    }

    .beauty-why-description {
        max-width: 720px;
    }

}


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

@media (max-width: 767px) {

    .beauty-why-exhibit {
        padding: 64px 18px;
    }

    .beauty-why-wrap {
        gap: 38px;
    }

    .beauty-why-label {
        margin-bottom: 18px;
    }

    .beauty-why-intro h2 {
        font-size: clamp(36px, 10vw, 48px);
        letter-spacing: -1.6px;
    }

    .beauty-why-description {
        margin-top: 20px;

        font-size: 15px;
        line-height: 1.7;
    }

    .beauty-why-line {
        margin-top: 26px;
    }

    .beauty-benefits-grid {
        grid-template-columns: 1fr;
    }

    .beauty-benefit-card {
        min-height: auto;

        padding: 28px 24px;

        gap: 18px;
    }

    .beauty-benefit-number {
        width: 44px;
        height: 44px;
    }

    .beauty-benefit-content h3 {
        font-size: 18px;
    }

    .beauty-benefit-content p {
        font-size: 14px;
        line-height: 1.6;
    }

}


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

@media (max-width: 420px) {

    .beauty-why-exhibit {
        padding-left: 14px;
        padding-right: 14px;
    }

    .beauty-benefit-card {
        padding: 24px 18px;

        flex-direction: column;
        gap: 15px;
    }

    .beauty-benefit-number {
        width: 40px;
        height: 40px;
    }

}


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

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

    .beauty-benefit-card,
    .beauty-benefit-card::before {
        transition: none;
    }

}/* End custom CSS */