/* =========================================================
   ABOUT PAGE — FINAL RESPONSIVE OVERFLOW FIX
   Add this at the VERY END of about.css
   ========================================================= */

/* ---------- GLOBAL SAFETY ---------- */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video {
    max-width: 100%;
}


/* =========================================================
   ANUBHUTI — OUR STORY
   FULLY RESPONSIVE
   Desktop | Laptop | 1024 | Tablet | Mobile | 320px
========================================================= */

.anubhuti-about-simple {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: clamp(60px, 8vw, 120px) 0;
    background: #fffaf3;
    overflow: hidden;
    box-sizing: border-box;
}

.anubhuti-about-container {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;
    margin: 0 auto;
    box-sizing: border-box;
}


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

.anubhuti-about-heading {
    width: 100%;
    margin-bottom: clamp(35px, 5vw, 60px);
    text-align: center;
    box-sizing: border-box;
}

.anubhuti-about-heading span {
    position: relative;
    display: inline-flex;
    align-items: center;

    color: #7a1f2b;

    font-family: "Poppins", sans-serif;
    font-size: clamp(0.68rem, 1vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
}

.anubhuti-about-heading span::before,
.anubhuti-about-heading span::after {
    content: "";
    width: clamp(25px, 4vw, 55px);
    height: 1px;
    flex: 0 0 auto;
    background: #dca04a;
}

.anubhuti-about-heading span::before {
    margin-right: clamp(10px, 1.5vw, 18px);
}

.anubhuti-about-heading span::after {
    margin-left: clamp(10px, 1.5vw, 18px);
}


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

.anubhuti-about-row {
    width: 100%;
    max-width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;
    gap: clamp(35px, 6vw, 80px);

    box-sizing: border-box;
}


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

.anubhuti-about-photo {
    position: relative;
    width: 100%;
    min-width: 0;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 0 90px 0 90px;

    background: #ead9c2;

    box-shadow:
        18px 18px 0 rgba(122, 31, 43, 0.08);

    box-sizing: border-box;
}

.anubhuti-about-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}

.anubhuti-about-photo:hover img {
    transform: scale(1.05);
}


/* Image inner border */

.anubhuti-about-photo::before {
    content: "";

    position: absolute;
    inset: clamp(10px, 1.5vw, 18px);

    border: 1px solid rgba(242, 181, 88, 0.7);

    border-radius: 0 70px 0 70px;

    z-index: 2;

    pointer-events: none;
}


/* Image label */

.anubhuti-about-photo::after {
    content: "ANUBHUTI";

    position: absolute;
    left: clamp(18px, 2vw, 28px);
    bottom: clamp(18px, 2vw, 24px);

    padding: 8px 13px;

    background: rgba(255, 250, 243, 0.94);

    color: #7a1f2b;

    font-family: "Poppins", sans-serif;
    font-size: clamp(0.58rem, 0.8vw, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.15em;

    z-index: 3;

    box-sizing: border-box;
}


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

.anubhuti-about-text {
    position: relative;
    width: 100%;
    min-width: 0;

    padding: clamp(0px, 1vw, 15px) 0;

    box-sizing: border-box;
}

.anubhuti-about-text::before {
   

    position: absolute;
    top: -25px;
    right: 0;

    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;

    line-height: 1;

    color: rgba(122, 31, 43, 0.05);

    pointer-events: none;
}


/* Heading */

.anubhuti-about-text h3 {
    position: relative;

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

    margin: 0 0 clamp(18px, 2vw, 28px);

    color: #241611;

    font-family: "Poppins", sans-serif;
    font-size: 42px;
    font-weight: 700;

    line-height: 1.17;
    letter-spacing: -0.035em;

    overflow-wrap: break-word;
}


/* First part visual emphasis */

.anubhuti-about-text h3::first-line {
    color: #7a1f2b;
}


/* Paragraphs */

.anubhuti-about-text p {
    width: 100%;
    max-width: 620px;

    margin: 0 0 16px;

    color: #654f46;

    font-family: "Poppins", sans-serif;
    font-size: clamp(0.88rem, 1.1vw, 1rem);

    line-height: 1.85;

    overflow-wrap: break-word;
}


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

.anubhuti-about-text a {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 11px;

    max-width: 100%;

    margin-top: 10px;
    padding: 5px 0 8px;

    color: #7a1f2b;

    font-family: "Poppins", sans-serif;
    font-size: clamp(0.78rem, 1vw, 0.9rem);
    font-weight: 700;

    line-height: 1.4;
    letter-spacing: 0.04em;
    text-decoration: none;

    box-sizing: border-box;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}

.anubhuti-about-text a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: #e0932c;

    transform: scaleX(0.35);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.anubhuti-about-text a i {
    color: #e0932c;
    flex: 0 0 auto;

    transition: transform 0.3s ease;
}

.anubhuti-about-text a:hover {
    gap: 16px;
}

.anubhuti-about-text a:hover::after {
    transform: scaleX(1);
}

.anubhuti-about-text a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   LARGE DESKTOP
   1440px+
========================================================= */

@media (min-width: 1440px) {

    .anubhuti-about-container {
        width: min(1180px, calc(100% - 80px));
    }

    .anubhuti-about-row {
        gap: 85px;
    }

    .anubhuti-about-photo {
        border-radius: 0 100px 0 100px;
    }

    .anubhuti-about-photo::before {
        border-radius: 0 78px 0 78px;
    }
}


/* =========================================================
   DESKTOP / LAPTOP
   1200px - 1439px
========================================================= */

@media (max-width: 1200px) {

    .anubhuti-about-container {
        width: min(1100px, calc(100% - 50px));
    }

    .anubhuti-about-row {
        gap: 55px;
    }

    .anubhuti-about-photo {
        border-radius: 0 75px 0 75px;
    }

    .anubhuti-about-photo::before {
        border-radius: 0 58px 0 58px;
    }

    .anubhuti-about-text h3 {
        font-size: clamp(2rem, 3.6vw, 3rem);
    }
}


/* =========================================================
   1024px
========================================================= */

@media (max-width: 1100px) {

    .anubhuti-about-container {
        width: calc(100% - 48px);
    }

    .anubhuti-about-row {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        gap: 42px;
    }

    .anubhuti-about-photo {
        border-radius: 0 65px 0 65px;
    }

    .anubhuti-about-photo::before {
        border-radius: 0 50px 0 50px;
    }

    .anubhuti-about-text h3 {
        font-size: clamp(1.9rem, 3.5vw, 2.7rem);
    }

    .anubhuti-about-text p {
        line-height: 1.75;
    }
}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (max-width: 991px) {

    .anubhuti-about-simple {
        padding: 85px 0;
    }

    .anubhuti-about-container {
        width: calc(100% - 44px);
    }

    .anubhuti-about-heading {
        margin-bottom: 45px;
    }

    .anubhuti-about-row {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .anubhuti-about-photo {
        width: min(100%, 520px);
        margin: 0 auto;

        aspect-ratio: 16 / 11;

        border-radius: 0 70px 0 70px;
    }

    .anubhuti-about-photo::before {
        border-radius: 0 55px 0 55px;
    }

    .anubhuti-about-text {
        width: min(100%, 700px);
        margin: 0 auto;
    }

    .anubhuti-about-text h3 {
        max-width: 530px;
         margin: 0 auto;
        font-size: clamp(2rem, 5vw, 2.8rem);
    }

    .anubhuti-about-text p {
        max-width: 530px;
        margin: 0 auto; 
        margin-top: 10px;
    }
    .anubhuti-about-text a {
        margin-top: 18px;
        margin-left: 85px;
    }
   
    
}


/* =========================================================
   LARGE MOBILE
   576px - 767px
========================================================= */

@media (max-width: 767px) {

    .anubhuti-about-simple {
        padding: 70px 0;
    }

    .anubhuti-about-container {
        width: calc(100% - 36px);
    }

    .anubhuti-about-heading {
        margin-bottom: 35px;
    }

    .anubhuti-about-heading span {
        font-size: 0.68rem;
        letter-spacing: 0.18em;
    }

    .anubhuti-about-heading span::before,
    .anubhuti-about-heading span::after {
        width: 28px;
    }

    .anubhuti-about-row {
        gap: 38px;
    }

    .anubhuti-about-photo {
        aspect-ratio: 16 / 11;

        border-radius: 0 50px 0 50px;

        box-shadow:
            12px 12px 0 rgba(122, 31, 43, 0.07);
    }

    .anubhuti-about-photo::before {
        inset: 11px;
        border-radius: 0 38px 0 38px;
    }

    .anubhuti-about-photo::after {
        left: 18px;
        bottom: 18px;
    }

    .anubhuti-about-text {
        width: min(80%, 500px);
        margin: 0 auto;
    }

    .anubhuti-about-text::before {
        top: -15px;
        font-size: 3.5rem;
    }

    .anubhuti-about-text h3 {
        margin-bottom: 20px;
        font-size: clamp(1.8rem, 7vw, 2.5rem);
        line-height: 1.2;
        
    }

    .anubhuti-about-text p {
        font-size: 0.92rem;
        line-height: 1.75;
    }

    .anubhuti-about-text a {
        margin-top: 8px;
    }
}


/* =========================================================
   MOBILE
   481px - 575px
========================================================= */

@media (max-width: 575px) {

    .anubhuti-about-simple {
        padding: 60px 0;
    }

    .anubhuti-about-container {
        width: calc(100% - 30px);
    }

    .anubhuti-about-heading {
        margin-bottom: 30px;
    }

    .anubhuti-about-heading span::before,
    .anubhuti-about-heading span::after {
        width: 22px;
    }

    .anubhuti-about-heading span::before {
        margin-right: 8px;
    }

    .anubhuti-about-heading span::after {
        margin-left: 8px;
    }

    .anubhuti-about-row {
        gap: 32px;
    }

    .anubhuti-about-photo {
        aspect-ratio: 4 / 3;
        border-radius: 0 42px 0 42px;

        box-shadow:
            10px 10px 0 rgba(122, 31, 43, 0.07);
    }

    .anubhuti-about-photo::before {
        inset: 9px;
        border-radius: 0 32px 0 32px;
    }

    .anubhuti-about-photo::after {
        left: 15px;
        bottom: 15px;
        padding: 7px 10px;
    }

    .anubhuti-about-text::before {
        font-size: 3rem;
    }

    .anubhuti-about-text h3 {
        font-size: clamp(1.7rem, 8vw, 2.25rem);
    }

    .anubhuti-about-text p {
        font-size: 0.88rem;
        line-height: 1.72;
    }
}


/* =========================================================
   SMALL MOBILE
   320px - 480px
========================================================= */

@media (max-width: 480px) {

    .anubhuti-about-simple {
        padding: 52px 0;
    }

    .anubhuti-about-container {
        width: calc(100% - 24px);
    }

    .anubhuti-about-row {
        gap: 28px;
    }

    .anubhuti-about-photo {
        aspect-ratio: 1 / 0.85;
        border-radius: 0 34px 0 34px;
    }

    .anubhuti-about-photo::before {
        inset: 8px;
        border-radius: 0 26px 0 26px;
    }

    .anubhuti-about-photo::after {
        font-size: 0.55rem;
        letter-spacing: 0.12em;
    }

    .anubhuti-about-text h3 {
        font-size: 1.8rem;
        line-height: 1.2;
        letter-spacing: -0.025em;
    }

    .anubhuti-about-text p {
        font-size: 0.86rem;
    }

       .anubhuti-about-text a {
        margin-top: 18px;
        margin-left: 0px;
    }
}


/* =========================================================
   EXTRA SMALL
   320px AND BELOW
========================================================= */

@media (max-width: 340px) {

    .anubhuti-about-simple {
        padding: 45px 0;
    }

    .anubhuti-about-container {
        width: calc(100% - 20px);
    }

    .anubhuti-about-heading {
        margin-bottom: 25px;
    }

    .anubhuti-about-heading span {
        font-size: 0.6rem;
        letter-spacing: 0.14em;
    }

    .anubhuti-about-heading span::before,
    .anubhuti-about-heading span::after {
        width: 16px;
    }

    .anubhuti-about-row {
        gap: 24px;
    }

    .anubhuti-about-photo {
        aspect-ratio: 1 / 0.82;
        border-radius: 0 28px 0 28px;
    }

    .anubhuti-about-photo::before {
        inset: 7px;
        border-radius: 0 21px 0 21px;
    }

    .anubhuti-about-photo::after {
        left: 12px;
        bottom: 12px;
        padding: 6px 8px;
    }

    .anubhuti-about-text::before {
        font-size: 2.5rem;
    }

    .anubhuti-about-text h3 {
        font-size: 1.55rem;
    }

    .anubhuti-about-text p {
        font-size: 0.82rem;
        line-height: 1.65;
    }

    .anubhuti-about-text a {
        font-size: 0.72rem;
    }
}










/* ========================================OUR PURPOSE + OUR PHILOSOPHY ========================================================= */

.two-col {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;

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

    position: relative;
    box-sizing: border-box;
}

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

.section-pad.bg-sand {
    width: 100%;
    padding: clamp(65px, 8vw, 115px) 0;

    background: #f4e7d6;

    overflow: hidden;
    box-sizing: border-box;
}


/* =========================================================
   COLUMNS
========================================================= */

.two-col > div {
    position: relative;

    width: 100%;
    min-width: 0;

    padding: clamp(10px, 2.5vw, 35px)
             clamp(30px, 5vw, 75px);

    box-sizing: border-box;
}

.two-col > div:first-child {
    padding-left: 0;
}

.two-col > div:last-child {
    padding-right: 0;
}


/* Vertical divider */

.two-col > div:first-child::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 1px;
    height: 100%;

    background: rgba(122, 31, 43, 0.16);
}


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

.two-col .eyebrow {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin-bottom: 18px;

    color: #7a1f2b;

    font-family: "Poppins", sans-serif;
    font-size: clamp(0.65rem, 0.9vw, 0.78rem);
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    line-height: 1;
}

.two-col .eyebrow::before {
    content: "";

    width: 26px;
    height: 1px;

    margin-right: 10px;

    background: #e0932c;
}


/* =========================================================
   HEADINGS
========================================================= */

.two-col h2 {
    width: 100%;
    max-width: 500px;

    margin: 0 0 22px;

    color: #241611;

    font-family: "Poppins", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.9rem);
    font-weight: 600;

    line-height: 1.18;
    letter-spacing: -0.03em;

    overflow-wrap: break-word;
}

.two-col > div:last-child h2 {
    color: #7a1f2b;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.two-col p {
    width: 100%;
    max-width: 545px;

    margin: 0;

    color: #624e45;

    font-family: "Poppins", sans-serif;
    font-size: clamp(0.88rem, 1vw, 0.98rem);

    line-height: 1.9;

    overflow-wrap: break-word;
}


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

.two-col > div::before {
    position: absolute;

    top: -5px;
    right: 15px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;

    line-height: 1;

    pointer-events: none;

    transition: transform 0.35s ease;
}

.two-col > div:first-child::before {
    content: "01";
    color: rgba(122, 31, 43, 0.05);
}

.two-col > div:last-child::before {
    content: "02";
    color: rgba(224, 147, 44, 0.07);
}

.two-col > div:hover::before {
    transform: translateY(-5px);
}


/* =========================================================
   DESKTOP
   1201px+
========================================================= */

@media (min-width: 1201px) {

    .two-col {
        column-gap: 0;
    }

    .two-col > div {
        min-height: 290px;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}


/* =========================================================
   LAPTOP
   992px - 1200px
========================================================= */

@media (max-width: 1200px) {

    .section-pad.bg-sand {
        padding: 85px 0;
    }

    .two-col {
        width: calc(100% - 50px);
    }

    .two-col > div {
        padding-left: 35px;
        padding-right: 35px;
    }

    .two-col > div:first-child {
        padding-left: 0;
    }

    .two-col > div:last-child {
        padding-right: 0;
    }

    .two-col h2 {
        font-size: clamp(1.8rem, 3vw, 2.5rem);
    }
}


/* =========================================================
   1024px
========================================================= */

@media (max-width: 1100px) {

    .two-col {
        width: calc(100% - 44px);
    }

    .two-col > div {
        padding-left: 28px;
        padding-right: 28px;
    }

    .two-col > div:first-child {
        padding-left: 0;
    }

    .two-col > div:last-child {
        padding-right: 0;
    }

    .two-col h2 {
        font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    }

    .two-col p {
        line-height: 1.8;
    }
}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (max-width: 991px) {

    .section-pad.bg-sand {
        padding: 75px 0;
    }

    .two-col {
        grid-template-columns: 1fr;
        width: calc(100% - 44px);
        gap: 0;
    }

    .two-col > div {
        padding: 35px 0;
    }

    .two-col > div:first-child {
        padding-top: 0;
        padding-left: 0;
    }

    .two-col > div:last-child {
        padding-right: 0;
        padding-bottom: 0;
    }

    /* Change vertical divider into horizontal divider */
    .two-col > div:first-child::after {
        top: auto;
        bottom: 0;
        left: 0;
        right: auto;

        width: 100%;
        height: 1px;
    }

    .two-col h2 {
        max-width: 700px;
        font-size: clamp(1.9rem, 5vw, 2.7rem);
    }

    .two-col p {
        max-width: 750px;
    }

    .two-col > div::before {
        right: 0;
        top: 15px;
    }
}


/* =========================================================
   LARGE MOBILE
   576px - 767px
========================================================= */

@media (max-width: 767px) {

    .section-pad.bg-sand {
        padding: 65px 0;
    }

    .two-col {
        width: calc(100% - 36px);
    }

    .two-col > div {
        padding: 30px 0;
    }

    .two-col > div:first-child {
        padding-top: 0;
    }

    .two-col > div:last-child {
        padding-bottom: 0;
    }

    .two-col .eyebrow {
        margin-bottom: 15px;
        font-size: 0.68rem;
    }

    .two-col .eyebrow::before {
        width: 20px;
        margin-right: 8px;
    }

    .two-col h2 {
        max-width: 600px;
        margin-bottom: 18px;

        font-size: clamp(1.75rem, 7vw, 2.4rem);
        line-height: 1.2;
    }

    .two-col p {
        font-size: 0.9rem;
        line-height: 1.75;
    }

    .two-col > div::before {
        font-size: 3.2rem;
        top: 20px;
    }
}


/* =========================================================
   MOBILE
   481px - 575px
========================================================= */

@media (max-width: 575px) {

    .section-pad.bg-sand {
        padding: 55px 0;
    }

    .two-col {
        width: calc(100% - 30px);
    }

    .two-col > div {
        padding: 27px 0;
    }

    .two-col .eyebrow {
        font-size: 0.64rem;
        letter-spacing: 0.15em;
    }

    .two-col h2 {
        font-size: clamp(1.6rem, 8vw, 2.15rem);
    }

    .two-col p {
        font-size: 0.86rem;
        line-height: 1.72;
    }

    .two-col > div::before {
        font-size: 2.8rem;
        top: 17px;
    }
}


/* =========================================================
   SMALL MOBILE
   320px - 480px
========================================================= */

@media (max-width: 480px) {

    .section-pad.bg-sand {
        padding: 48px 0;
    }

    .two-col {
        width: calc(100% - 24px);
    }

    .two-col > div {
        padding: 24px 0;
    }

    .two-col > div:first-child::after {
        width: 100%;
    }

    .two-col .eyebrow {
        margin-bottom: 13px;
        font-size: 0.59rem;
    }

    .two-col .eyebrow::before {
        width: 17px;
        margin-right: 7px;
    }

    .two-col h2 {
        margin-bottom: 15px;

        font-size: 1.7rem;
        line-height: 1.2;
        letter-spacing: -0.025em;
    }

    .two-col p {
        font-size: 0.82rem;
        line-height: 1.68;
    }

    .two-col > div::before {
        font-size: 2.4rem;
        top: 15px;
    }
}


/* =========================================================
   EXTRA SMALL
   320px AND BELOW
========================================================= */

@media (max-width: 340px) {

    .section-pad.bg-sand {
        padding: 42px 0;
    }

    .two-col {
        width: calc(100% - 20px);
    }

    .two-col > div {
        padding: 21px 0;
    }

    .two-col .eyebrow {
        font-size: 0.55rem;
        letter-spacing: 0.13em;
    }

    .two-col h2 {
        font-size: 1.5rem;
    }

    .two-col p {
        font-size: 0.78rem;
        line-height: 1.62;
    }

    .two-col > div::before {
        font-size: 2.1rem;
    }
}






/* =========================================   MISSION & VISION ========================================= */

/* =========================================
   MISSION & VISION SECTION
========================================= */

.anb-mission-vision {
    position: relative;
    padding: 90px 20px;
    background: rgb(251, 243, 230);
    overflow: hidden;
}

.anb-mission-vision * {
    box-sizing: border-box;
}


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

.anb-mv-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.anb-mv-heading > span {
    display: inline-block;
    margin-bottom: 12px;

    color: rgb(139, 94, 52);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.anb-mv-heading h2 {
    margin: 0;

    color: rgb(36, 22, 17);

    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
}

.anb-mv-heading h2 em {
    color: rgb(102, 22, 26);
    font-style: normal;
}

.anb-mv-heading p {
    margin: 18px auto 0;

    color: grey;

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


/* =========================================
   CARDS
========================================= */

.anb-mv-cards {
    width: min(1000px, 100%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}


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

.anb-mv-card {
    position: relative;

    min-height: 380px;

    padding: 55px 62px;

    overflow: hidden;

   
    border-radius: 28px 28px 28px 28px;

    background: #ffffff;

    box-shadow: 0 15px 40px rgb(119, 70, 20);

    cursor: pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.anb-mv-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px rgba(20, 50, 90, .13);
}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

/* .anb-mv-decoration {
    position: absolute;

    width: 130px;
    height: 130px;

    top: -65px;
    right: 40px;

    border-radius: 50%;

    background: #eaf4ff;

    transition: transform .4s ease;
}

.anb-mv-decoration--green {
    background: #e9f8f3;
}

.anb-mv-card:hover .anb-mv-decoration {
    transform: scale(1.15);
} */


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

.anb-mv-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

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

    margin-bottom: 25px;

    border-radius: 16px;

    background: rgb(251, 243, 231);
    color: rgb(122, 31, 43);

    font-size: 42px;

    transition: .35s ease;
}

.anb-mv-icon--blue {
   color: rgb(122, 31, 43);
   background: rgb(251, 243, 231);
}

.anb-mv-card:hover .anb-mv-icon {
    transform: rotate(-6deg) scale(1.08);
}


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

.anb-mv-card h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: black;

    font-size: 42px;
    font-weight: 800;
}


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

.anb-mv-small {
    position: relative;
    z-index: 2;

    margin: 18px 0 0;

    color: grey;

    font-size: 16px;
}


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

.anb-mv-button {
    position: absolute;

    left: 62px;
    bottom: 35px;

    z-index: 5;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 0;

    border: 0;
    outline: none;

    background: transparent;

   color: rgb(122, 31, 43);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;
}

.anb-mv-button i {
    animation: anbHandMove 1.5s ease-in-out infinite;
}

@keyframes anbHandMove {

    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }

}


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

.anb-mv-overlay {
    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 50px 62px;

    background: #ffffff;

    opacity: 0;
    visibility: hidden;

    transform: translateY(30px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease;
}


/* IMPORTANT:
   This class is added by JS
*/

.anb-mv-card.is-open .anb-mv-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================
   OVERLAY LABEL
========================================= */

.anb-mv-overlay-label {
    display: block;

    margin-bottom: 10px;

    color: rgb(91, 46, 13);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.anb-mv-overlay h4 {
    margin: 0 0 20px;

    color: rgb(122, 31, 43);

    font-family: 'Poppins', sans-serif;

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

.anb-mv-overlay p {
    margin: 0 0 13px;

    color: #0a0a0a;

    font-size: 14px;
    line-height: 1.75;
}


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

.anb-mv-close {
    position: absolute;

    top: 22px;
    right: 25px;

    width: 38px;
    height: 38px;

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

    border: 0;
    border-radius: 50%;

    background: rgb(251, 236, 215);

    color: black;

    font-size: 15px;

    cursor: pointer;

    transition: .3s ease;
}

.anb-mv-close:hover {
    background: rgb(224, 147, 44);
    color: #fff;

    transform: rotate(90deg);
}


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

@media (max-width: 850px) {

    .anb-mission-vision {
        padding: 75px 20px;
    }

    .anb-mv-cards {
        gap: 20px;
    }

    .anb-mv-card {
        padding: 45px 35px;
    }

    .anb-mv-button {
        left: 35px;
    }

    .anb-mv-overlay {
        padding: 40px 35px;
    }

}


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

@media (max-width: 650px) {

    .anb-mission-vision {
        padding: 65px 16px;
    }

    .anb-mv-heading {
        margin-bottom: 40px;
    }

    .anb-mv-heading h2 {
        font-size: 37px;
    }

    .anb-mv-heading p {
        font-size: 14px;
    }

    .anb-mv-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .anb-mv-card {
        min-height: 350px;
        padding: 38px 28px;
    }

    .anb-mv-card h3 {
        font-size: 36px;
    }

    .anb-mv-button {
        left: 28px;
        bottom: 28px;
    }

    .anb-mv-overlay {
        padding: 40px 28px;
    }

    .anb-mv-overlay h4 {
        font-size: 24px;
    }

    .anb-mv-overlay p {
        font-size: 13px;
    }

}


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

@media (max-width: 380px) {

    .anb-mv-heading h2 {
        font-size: 32px;
    }

    .anb-mv-card {
        min-height: 330px;
    }

    .anb-mv-card h3 {
        font-size: 32px;
    }

}












/* =========================================================  CORE VALUES========================================================= */

.values-section {
    position: relative;
    padding: 110px 0;
    background: #f3e5cf;
    overflow: hidden;
}

.values-section .container {
    width: min(1150px, 90%);
    margin: auto;
}


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

.values-heading {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 60px;
}

.values-eyebrow {
    display: inline-block;
    margin-bottom: 14px;

    color: #a35b28;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.values-heading h2 {
    margin: 0;

    color: #52191d;

    font-size: clamp(40px, 5vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.values-heading h2 em {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: #a35b28;
}

.values-heading p {
    margin: 17px auto 0;

    color: #756354;
    font-size: 14px;
    line-height: 1.7;
}


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

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


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

.value-card {
    position: relative;

    min-height: 360px;
    padding: 30px;

    display: flex;
    flex-direction: column;

    border-radius: 24px;

    background: #fffaf3;

    border: 1px solid rgba(82, 25, 29, .08);

    box-shadow:
        0 10px 30px rgba(82, 25, 29, .06);

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .4s ease;
}


/* Soft decorative glow */

.value-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    bottom: -90px;

    border-radius: 50%;

    background: rgba(163, 91, 40, .08);

    transition: transform .6s ease;
}

.value-card:hover::after {
    transform: scale(1.5);
}


/* Hover */

.value-card:hover {
    transform: translateY(-10px);

    border-color: rgba(163, 91, 40, .2);

    box-shadow:
        0 22px 45px rgba(82, 25, 29, .12);
}


/* =========================================================
   TOP
========================================================= */

.value-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


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

.value-icon {
    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background: #52191d;

    color: #f4d49d;

    font-size: 22px;

    box-shadow:
        0 10px 22px rgba(82, 25, 29, .18);

    transition:
        transform .45s ease,
        border-radius .45s ease;
}

.value-card:hover .value-icon {
    transform: rotate(-5deg) scale(1.08);

    border-radius: 50%;
}


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

.value-arrow {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(82, 25, 29, .14);

    border-radius: 50%;

    color: #52191d;

    font-size: 12px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}

.value-card:hover .value-arrow {
    background: #52191d;
    color: #f4d49d;

    transform: translate(3px, -3px);
}


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

.value-card-content {
    position: relative;
    z-index: 2;

    margin-top: auto;
}

.value-label {
    display: block;

    margin-bottom: 8px;

    color: #a35b28;

    font-size: 9px;
    font-weight: 700;

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

.value-card-content h3 {
    margin: 0 0 12px;

    color: #52191d;

    font-size: 30px;
    font-weight: 600;
}

.value-card-content p {
    max-width: 300px;

    margin: 0;

    color: #756354;

    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   BOTTOM LINE
========================================================= */

.value-card-line {
    position: relative;
    z-index: 2;

    width: 42px;
    height: 2px;

    margin-top: 25px;

    background: #a35b28;

    transition: width .45s ease;
}

.value-card:hover .value-card-line {
    width: 80px;
}


/* =========================================================
   REVEAL
========================================================= */

.value-card {
    opacity: 0;
    transform: translateY(25px);

    animation: valueReveal .7s ease forwards;
}

.value-card:nth-child(1) {
    animation-delay: .1s;
}

.value-card:nth-child(2) {
    animation-delay: .2s;
}

.value-card:nth-child(3) {
    animation-delay: .3s;
}

@keyframes valueReveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 900px) {

    .values-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: auto;
    }

    .value-card {
        min-height: 320px;
    }
}


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

@media (max-width: 600px) {

    .values-section {
        padding: 75px 0;
    }

    .values-section .container {
        width: 92%;
    }

    .values-heading {
        margin-bottom: 40px;
    }

    .values-heading h2 {
        font-size: 38px;
    }

    .value-card {
        min-height: 320px;
        padding: 26px;
        border-radius: 20px;
    }

    .value-icon {
        width: 60px;
        height: 60px;
    }

    .value-card-content h3 {
        font-size: 27px;
    }
}





























/* =========================================   PREMIUM PROCESS SECTION========================================= */

.process-section {
    position: relative;
    padding: 120px 20px;
    background: #fbf3e7;
    overflow: hidden;
}

/* Decorative background */
.process-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(122, 31, 43, 0.08);
    border-radius: 50%;
    top: -190px;
    right: -120px;
}

.process-section::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(224, 147, 44, 0.12);
    border-radius: 50%;
    bottom: -150px;
    left: -100px;
}

.process-container {
    position: relative;
    max-width: 1200px;
    margin: auto;
    z-index: 2;
}


/*   HEADING */

.process-heading {
    max-width: 700px;
    margin: 0 auto 80px;
    text-align: center;
}

.process-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #e0932c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.process-eyebrow::before,
.process-eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: #e0932c;
}

.process-heading h2 {
    margin: 0;
    color: #4e1219;
    font-size: 42px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -2px;
}

.process-heading h2 span {
    display: block;
    color: #e0932c;
    font-style: italic;
}

.process-heading p {
    max-width: 570px;
    margin: 25px auto 0;
    color: #6d5a50;
    font-size: 16px;
    line-height: 1.8;
}


/*    TIMELINE */

.process-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

/* Connecting line */
.process-timeline::before {
    content: "";
    position: absolute;
    top: 43px;
    left: 10%;
    width: 80%;
    height: 1px;
    background: #d9c5ad;
    z-index: 0;
}


/*    PROCESS ITEM */

.process-item {
    position: relative;
    text-align: center;
    padding: 0 25px;
    z-index: 1;
}

.process-circle {
    width: 86px;
    height: 86px;
    margin: 0 auto 32px;

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

    border-radius: 50%;
    background: #fbf3e7;
    border: 1px solid #d8b98c;

    position: relative;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}

/* Inner ring */
.process-circle::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px dashed #e0932c;
    border-radius: 50%;
    transition: transform 0.5s ease;
}

.process-circle span {
    position: relative;
    z-index: 2;

    color: #7a1f2b;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

.process-item:hover .process-circle {
    transform: translateY(-8px);
    background: #7a1f2b;
    border-color: #7a1f2b;
}

.process-item:hover .process-circle::before {
    transform: rotate(180deg);
}

.process-item:hover .process-circle span {
    color: #fff;
}


/*    CONTENT */

.process-content {
    max-width: 220px;
    margin: auto;
}

.process-label {
    display: block;
    margin-bottom: 10px;

    color: #e0932c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.process-content h3 {
    margin: 0 0 12px;

    color: #241611;
    font-size: 23px;
    font-weight: 700;
}

.process-content p {
    margin: 0;

    color: #6d5a50;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   BOTTOM STATEMENT
========================================= */

.process-bottom {
    margin-top: 75px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.process-bottom span {
    width: 70px;
    height: 1px;
    background: #d8b98c;
}

.process-bottom p {
    margin: 0;

    color: #7a1f2b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


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

@media (max-width: 900px) {

    .process-section {
        padding: 90px 20px;
    }

    .process-heading {
        margin-bottom: 60px;
    }

    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 60px;
    }

    .process-timeline::before {
        display: none;
    }

}


@media (max-width: 600px) {

    .process-section {
        padding: 75px 18px;
    }

    .process-heading {
        margin-bottom: 50px;
    }

    .process-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .process-heading h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .process-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .process-timeline {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .process-item {
        display: grid;
        grid-template-columns: 75px 1fr;
        align-items: center;
        gap: 22px;

        text-align: left;
        padding: 0;
    }

    .process-circle {
        width: 75px;
        height: 75px;
        margin: 0;
    }

    .process-circle span {
        font-size: 16px;
    }

    .process-content {
        max-width: none;
        margin: 0;
    }

    .process-content h3 {
        font-size: 21px;
    }

    .process-content p {
        font-size: 13px;
        line-height: 1.7;
    }

    .process-label {
        font-size: 9px;
        margin-bottom: 6px;
    }

    .process-bottom {
        margin-top: 55px;
        gap: 12px;
    }

    .process-bottom span {
        width: 35px;
    }

    .process-bottom p {
        font-size: 9px;
        letter-spacing: 1px;
        text-align: center;
    }
}


@media (max-width: 380px) {

    .process-heading h2 {
        font-size: 34px;
    }

    .process-item {
        grid-template-columns: 65px 1fr;
        gap: 16px;
    }

    .process-circle {
        width: 65px;
        height: 65px;
    }

    .process-content h3 {
        font-size: 19px;
    }

    .process-content p {
        font-size: 12px;
    }
}