/*=========================================================
    SANVI MASALE
    HOMEPAGE - WHY CHOOSE US
=========================================================*/


:root {

    --why-primary: #C62828;
    --why-primary-dark: #A61919;
    --why-gold: #FFC107;
    --why-dark: #292321;
    --why-text: #6D6661;
    --why-light: #FFF8F3;
    --why-border: #EDE2DA;
    --why-white: #FFFFFF;

    --why-transition: all 0.35s ease;

}


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

.why-us {

    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #FFF9F5 0%,
            #FFFFFF 48%,
            #FFF6F0 100%
        );

}


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

.why-us::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    top: -220px;

    right: -180px;

    border-radius: 50%;

    background:
        rgba(198, 40, 40, 0.035);

    pointer-events: none;

}


.why-us::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    bottom: -190px;

    left: -140px;

    border-radius: 50%;

    background:
        rgba(255, 193, 7, 0.045);

    pointer-events: none;

}


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

.why-us-wrapper {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        0.90fr
        1.10fr;

    gap: 70px;

    align-items: center;

}


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

.why-us-visual {

    position: relative;

    min-height: 570px;

}


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

.why-us-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: 24px;

    background: #300A06;

    box-shadow:
        0 25px 60px
        rgba(70, 25, 10, 0.16);

}


.why-us-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.8s ease;

}


.why-us-visual:hover
.why-us-image img {

    transform:
        scale(1.05);

}


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

.why-us-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(25, 3, 2, 0.05) 20%,
            rgba(25, 3, 2, 0.25) 55%,
            rgba(25, 3, 2, 0.82) 100%
        );

}


/*=========================================================
    QUALITY BADGE
=========================================================*/

.why-us-quality-badge {

    position: absolute;

    top: 30px;

    right: -25px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 170px;

    padding: 13px 17px;

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

    border-radius: 10px;

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

    box-shadow:
        0 15px 35px
        rgba(30, 10, 5, 0.15);

    backdrop-filter:
        blur(8px);

}


.why-us-quality-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #FFF0E8;

    color:
        var(--why-primary);

    font-size: 17px;

}


.why-us-quality-badge strong {

    display: block;

    color:
        var(--why-dark);

    font-size: 12px;

    font-weight: 900;

}


.why-us-quality-badge span {

    display: block;

    margin-top: 2px;

    color:
        #8A817B;

    font-size: 9px;

}


/*=========================================================
    SPICE BADGE
=========================================================*/

.why-us-spice-badge {

    position: absolute;

    left: -25px;

    bottom: 100px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px 17px;

    border-radius: 10px;

    background:
        var(--why-primary);

    color:
        #FFFFFF;

    box-shadow:
        0 15px 35px
        rgba(100, 20, 10, 0.22);

}


.why-us-spice-badge i {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    color:
        var(--why-gold);

    font-size: 16px;

}


.why-us-spice-badge span {

    font-size: 9px;

    font-weight: 800;

    line-height: 1.5;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}


/*=========================================================
    BRAND CIRCLE
=========================================================*/

.why-us-circle {

    position: absolute;

    left: 50%;

    bottom: 25px;

    z-index: 5;

    width: 135px;

    height: 135px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border:
        4px solid
        rgba(255,255,255,0.80);

    border-radius: 50%;

    background:
        rgba(91, 13, 8, 0.78);

    color:
        #FFFFFF;

    text-align: center;

    transform:
        translateX(-50%);

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

    backdrop-filter:
        blur(5px);

}


.why-us-circle span {

    color:
        var(--why-gold);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

}


.why-us-circle strong {

    margin-top: 2px;

    font-size: 18px;

    font-weight: 900;

}


.why-us-circle small {

    margin-top: 5px;

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

    font-size: 7px;

}


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

.why-us-content {

    padding:
        10px 0;

}


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

.why-us-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 10px;

    color:
        var(--why-primary);

    font-size: 11px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 1.4px;

}


.why-us-heading h2 {

    margin: 0 0 16px;

    color:
        var(--why-dark);

    font-size:
        clamp(34px, 4vw, 48px);

    font-weight: 900;

    line-height: 1.12;

    letter-spacing: -1px;

}


.why-us-heading h2 span {

    display: block;

    color:
        var(--why-primary);

}


.why-us-heading > p {

    max-width: 650px;

    margin: 0 0 30px;

    color:
        var(--why-text);

    font-size: 13px;

    line-height: 1.85;

}


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

.why-us-features {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 13px;

}


/*=========================================================
    FEATURE
=========================================================*/

.why-feature {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    min-height: 105px;

    padding: 17px;

    border:
        1px solid
        var(--why-border);

    border-radius: 11px;

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

    transition:
        var(--why-transition);

}


.why-feature:hover {

    border-color:
        rgba(198,40,40,0.22);

    background:
        #FFFFFF;

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(70,25,10,0.08);

}


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

.why-feature-icon {

    flex-shrink: 0;

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        #FFF1EA;

    color:
        var(--why-primary);

    font-size: 16px;

    transition:
        var(--why-transition);

}


.why-feature:hover
.why-feature-icon {

    background:
        var(--why-primary);

    color:
        #FFFFFF;

    transform:
        rotate(-5deg);

}


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

.why-feature-content h3 {

    margin: 0 0 5px;

    color:
        var(--why-dark);

    font-size: 12px;

    font-weight: 900;

}


.why-feature-content p {

    margin: 0;

    color:
        #817872;

    font-size: 9px;

    line-height: 1.65;

}


/*=========================================================
    CTA
=========================================================*/

.why-us-cta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 25px;

}


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

.why-us-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 45px;

    padding:
        0 19px;

    border-radius: 7px;

    background:
        var(--why-primary);

    color:
        #FFFFFF;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    transition:
        var(--why-transition);

}


.why-us-btn:hover {

    background:
        var(--why-primary-dark);

    color:
        #FFFFFF;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 22px
        rgba(198,40,40,0.20);

}


.why-us-btn i {

    transition:
        transform 0.3s ease;

}


.why-us-btn:hover i {

    transform:
        translateX(5px);

}


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

.why-us-mini-note {

    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #7D756F;

    font-size: 9px;

    font-weight: 600;

}


.why-us-mini-note i {

    color:
        #2E7D32;

    font-size: 13px;

}


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

@media (max-width: 1199px) {

    .why-us-wrapper {

        gap: 50px;

    }


    .why-us-visual {

        min-height: 520px;

    }


    .why-us-quality-badge {

        right: -15px;

    }


    .why-us-spice-badge {

        left: -15px;

    }

}


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

@media (max-width: 991px) {

    .why-us {

        padding:
            75px 0;

    }


    .why-us-wrapper {

        grid-template-columns:
            1fr;

        gap: 55px;

    }


    .why-us-visual {

        min-height: 500px;

        max-width: 650px;

        width: 100%;

        margin:
            0 auto;

    }


    .why-us-content {

        max-width: 750px;

        margin:
            0 auto;

    }


    .why-us-heading {

        text-align: center;

    }


    .why-us-heading > p {

        margin-left: auto;

        margin-right: auto;

    }

}


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

@media (max-width: 767px) {

    .why-us {

        padding:
            60px 0;

    }


    .why-us-wrapper {

        gap: 40px;

    }


    .why-us-visual {

        min-height: 420px;

    }


    .why-us-quality-badge {

        top: 18px;

        right: -5px;

        min-width: 145px;

        padding:
            10px 12px;

    }


    .why-us-quality-icon {

        width: 34px;

        height: 34px;

        font-size: 14px;

    }


    .why-us-spice-badge {

        left: -5px;

        bottom: 75px;

        padding:
            10px 12px;

    }


    .why-us-spice-badge i {

        width: 32px;

        height: 32px;

        font-size: 13px;

    }


    .why-us-circle {

        width: 110px;

        height: 110px;

        bottom: 15px;

    }


    .why-us-circle strong {

        font-size: 15px;

    }


    .why-us-heading h2 {

        font-size: 31px;

    }


    .why-us-heading > p {

        font-size: 12px;

        line-height: 1.75;

    }


    .why-us-features {

        grid-template-columns:
            1fr;

    }


    .why-feature {

        min-height: auto;

    }


    .why-us-cta {

        flex-direction: column;

        align-items: stretch;

    }


    .why-us-btn {

        width: 100%;

    }


    .why-us-mini-note {

        justify-content: center;

        text-align: center;

    }

}


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

@media (max-width: 480px) {

    .why-us-visual {

        min-height: 360px;

    }


    .why-us-image {

        border-radius: 17px;

    }


    .why-us-quality-badge {

        transform:
            scale(0.88);

        transform-origin:
            top right;

    }


    .why-us-spice-badge {

        transform:
            scale(0.88);

        transform-origin:
            bottom left;

    }


    .why-us-circle {

        width: 90px;

        height: 90px;

    }


    .why-us-circle span {

        font-size: 9px;

    }


    .why-us-circle strong {

        font-size: 12px;

    }


    .why-us-circle small {

        font-size: 6px;

    }


    .why-us-heading h2 {

        font-size: 27px;

    }


    .why-feature {

        padding: 14px;

    }

}