/* =========================================
   HANSUJA GLOBAL VARIABLES
========================================= */

:root {

    --hansuja-green: #165d3d;
    --hansuja-dark-green: #0b3322;

    --hansuja-gold: #d9ad3b;

    --hansuja-text: #17231c;
    --hansuja-muted: #66736b;

    --white: #ffffff;

    --header-border: rgba(22, 93, 61, 0.08);

}


/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    color: var(--hansuja-text);

    background: #ffffff;
}


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

.site-header {

    position: sticky;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 9999;

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

    border-bottom: 1px solid var(--header-border);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/* Header after scroll */

.site-header.scrolled {

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

    box-shadow:
        0 8px 35px rgba(0, 0, 0, 0.07);
}


/* =========================================
   NAVBAR
========================================= */

.site-header .navbar {

    min-height: 84px;

    padding-top: 10px;

    padding-bottom: 10px;
}


/* =========================================
   CONTAINER
========================================= */

.site-header .container {

    max-width: 1320px;

}


/* =========================================
   LOGO
========================================= */

.hansuja-brand {

    display: flex;

    align-items: center;

    padding: 0;

    margin-right: 45px;
}


.hansuja-logo {

    display: block;

    width: 170px;

    height: auto;

    object-fit: contain;

    transition:
        transform 0.3s ease;
}


.hansuja-brand:hover .hansuja-logo {

    transform: scale(1.02);
}


/* =========================================
   NAVIGATION
========================================= */

.site-header .navbar-nav {

    gap: 4px;
}


.site-header .nav-link {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 44px;

    padding:
        8px 15px !important;

    color:
        var(--hansuja-text) !important;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    transition:
        color 0.25s ease;
}


/* Hover */

.site-header .nav-link:hover {

    color:
        var(--hansuja-green) !important;
}


/* =========================================
   ACTIVE / HOVER LINE
========================================= */

.site-header .nav-link::after {

    content: "";

    position: absolute;

    left: 15px;

    right: 15px;

    bottom: 1px;

    height: 2px;

    background:
        var(--hansuja-gold);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 0.3s ease;
}


.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {

    transform:
        scaleX(1);
}


/* =========================================
   DROPDOWN
========================================= */

.site-header .dropdown-menu {

    min-width: 235px;

    margin-top: 16px;

    padding: 9px;

    border: 0;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.12);
}


.site-header .dropdown-item {

    padding:
        12px 14px;

    border-radius: 9px;

    color:
        var(--hansuja-text);

    font-size: 13px;

    font-weight: 600;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}


.site-header .dropdown-item:hover {

    color:
        var(--hansuja-green);

    background:
        #eef6f0;

    padding-left: 19px;
}


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

.header-cta-wrapper {

    margin-left: 12px;
}


.header-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 44px;

    padding:
        6px 7px 6px 18px;

    border-radius: 50px;

    color: #ffffff !important;

    background:
        var(--hansuja-green);

    font-size: 13px;

    font-weight: 700;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.header-cta:hover {

    color: #ffffff !important;

    background:
        var(--hansuja-dark-green);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(22, 93, 61, 0.20);
}


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

.header-cta-icon {

    display: grid;

    place-items: center;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    color:
        var(--hansuja-green);

    background:
        var(--hansuja-gold);

    font-size: 12px;

    transition:
        transform 0.25s ease;
}


.header-cta:hover .header-cta-icon {

    transform:
        rotate(8deg);
}


/* =========================================
   MOBILE MENU BUTTON
========================================= */

.site-header .navbar-toggler {

    width: 45px;

    height: 45px;

    padding: 0;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(22, 93, 61, 0.15);

    border-radius: 12px;

    box-shadow: none !important;
}


.site-header .navbar-toggler:focus {

    box-shadow:
        0 0 0 3px
        rgba(22, 93, 61, 0.10) !important;
}


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

@media (max-width: 991.98px) {


    .site-header .navbar {

        min-height: 72px;

    }


    .hansuja-brand {

        margin-right: 0;

    }


    .hansuja-logo {

        width: 145px;

    }


    .site-header .navbar-collapse {

        margin-top: 15px;

        padding: 12px;

        background: #ffffff;

        border-radius: 18px;

        box-shadow:
            0 18px 50px
            rgba(0, 0, 0, 0.08);
    }


    .site-header .navbar-nav {

        gap: 3px;

        align-items: stretch !important;

    }


    .site-header .nav-link {

        min-height: 48px;

        padding:
            14px !important;

        border-radius: 10px;

        font-size: 15px;

    }


    .site-header .nav-link:hover {

        background:
            #f1f7f3;

    }


    .site-header .nav-link::after {

        display: none;

    }


    /* Mobile dropdown */

    .site-header .dropdown-menu {

        margin-top: 0;

        padding: 6px;

        border-radius: 12px;

        background:
            #f5f9f6;

        box-shadow: none;

    }


    .site-header .dropdown-item {

        padding:
            12px 14px;

    }


    /* CTA */

    .header-cta-wrapper {

        margin-left: 0;

        margin-top: 8px;

    }


    .header-cta {

        width: 100%;

        min-height: 50px;

    }

}


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

@media (min-width: 768px) and (max-width: 991.98px) {

    .site-header .container {

        max-width: 95%;

    }

}


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

@media (max-width: 575.98px) {


    .site-header .container {

        padding-left: 18px;

        padding-right: 18px;

    }


    .hansuja-logo {

        width: 132px;

    }


    .site-header .navbar-toggler {

        width: 42px;

        height: 42px;

    }

}
/* =========================================================
   STEP 2 — HERO SLIDER
========================================================= */

.hansuja-hero {
    position: relative;
    width: 100%;
    height: min(780px, calc(100vh - 84px));
    min-height: 650px;
    overflow: hidden;
    background: var(--hansuja-dark-green);
}


/* =========================================================
   HERO SLIDER
========================================================= */

.hansuja-hero .swiper,
.hansuja-hero .swiper-wrapper,
.hansuja-hero .swiper-slide {
    width: 100%;
    height: 100%;
}


/* =========================================================
   HERO SLIDE
========================================================= */

.hero-slide {
    position: relative;
    height: 100%;
    overflow: hidden;
}


/* =========================================================
   HERO BACKGROUND IMAGE
========================================================= */

.hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1.04);

    transition:
        transform 7s ease;
}


/* Active slide image zoom */

.swiper-slide-active .hero-image {
    transform: scale(1);
}


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

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 39, 25, 0.92) 0%,
            rgba(5, 39, 25, 0.78) 32%,
            rgba(5, 39, 25, 0.34) 62%,
            rgba(5, 39, 25, 0.08) 100%
        );
}


/* Bottom fade */

.hero-overlay::after {
    content: "";

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

    height: 180px;

    background:
        linear-gradient(
            to top,
            rgba(5, 39, 25, 0.55),
            transparent
        );
}


/* =========================================================
   HERO CONTAINER
========================================================= */

.hero-content-container {
    position: relative;

    z-index: 5;

    height: 100%;

    display: flex;

    align-items: center;
}


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

.hero-content {
    width: 100%;

    max-width: 760px;

    padding-top: 35px;

    color: #ffffff;
}


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

.hero-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: #f1c85d;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.hero-eyebrow::before {
    content: "";

    width: 38px;

    height: 2px;

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


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

.hero-title {
    max-width: 850px;

    margin: 0;

    color: #ffffff;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        clamp(3.4rem, 6.5vw, 6.8rem);

    font-weight: 800;

    line-height: 0.94;

    letter-spacing: -0.065em;
}


.hero-title span {
    color:
        #edc454;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {
    max-width: 590px;

    margin-top: 27px;
    margin-bottom: 0;

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

    font-size: 17px;

    line-height: 1.8;
}


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

.hero-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 35px;
}


.hero-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 52px;

    padding:
        8px 20px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* Primary */

.hero-btn-primary {

    background:
        var(--hansuja-gold);

    color:
        #13271c;
}


.hero-btn-primary:hover {

    background:
        #f0c95e;

    color:
        #13271c;

    transform:
        translateY(-2px);

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


/* Secondary */

.hero-btn-secondary {

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

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

    color:
        #ffffff;

    backdrop-filter:
        blur(10px);
}


.hero-btn-secondary:hover {

    background:
        #ffffff;

    color:
        var(--hansuja-green);

    transform:
        translateY(-2px);
}


/* Button icon */

.hero-btn-icon {

    display: grid;

    place-items: center;

    width: 29px;
    height: 29px;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.08);
}


/* =========================================================
   HERO META
========================================================= */

.hero-meta {

    position: absolute;

    z-index: 6;

    left: 50%;

    bottom: 35px;

    transform:
        translateX(-50%);

    width: 100%;
}


.hero-meta-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   SLIDE COUNTER
========================================================= */

.hero-counter {

    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.15em;
}


.hero-counter-current {

    color:
        #ffffff;

    font-size: 16px;
}


/* =========================================================
   SWIPER PAGINATION
========================================================= */

.hero-pagination {

    position: static !important;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    width: auto !important;
}


.hero-pagination .swiper-pagination-bullet {

    width: 7px;
    height: 7px;

    margin: 0 !important;

    opacity: 1;

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

    transition:
        width 0.3s ease,
        background 0.3s ease,
        border-radius 0.3s ease;
}


.hero-pagination
.swiper-pagination-bullet-active {

    width: 28px;

    border-radius: 10px;

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


/* =========================================================
   HERO ARROWS
========================================================= */

.hero-navigation {

    display: flex;

    gap: 8px;
}


.hero-prev,
.hero-next {

    position: static !important;

    display: grid !important;

    place-items: center;

    width: 45px !important;

    height: 45px !important;

    margin: 0 !important;

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

    border-radius: 50%;

    color:
        #ffffff !important;

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

    backdrop-filter:
        blur(10px);

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


.hero-prev:hover,
.hero-next:hover {

    background:
        var(--hansuja-gold);

    color:
        var(--hansuja-dark-green) !important;

    transform:
        translateY(-2px);
}


.hero-prev::after,
.hero-next::after {

    display: none;
}


/* =========================================================
   HERO SLIDE CONTENT ANIMATION
========================================================= */

.hero-content > * {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.swiper-slide-active
.hero-content > *:nth-child(1) {

    opacity: 1;

    transform: none;

    transition-delay: 0.15s;
}


.swiper-slide-active
.hero-content > *:nth-child(2) {

    opacity: 1;

    transform: none;

    transition-delay: 0.28s;
}


.swiper-slide-active
.hero-content > *:nth-child(3) {

    opacity: 1;

    transform: none;

    transition-delay: 0.42s;
}


.swiper-slide-active
.hero-content > *:nth-child(4) {

    opacity: 1;

    transform: none;

    transition-delay: 0.56s;
}


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

@media (max-width: 991.98px) {

    .hansuja-hero {

        height:
            700px;

        min-height:
            620px;
    }


    .hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(5, 39, 25, 0.90),
                rgba(5, 39, 25, 0.48)
            );
    }


    .hero-title {

        font-size:
            clamp(3.3rem, 8vw, 5.5rem);
    }


    .hero-description {

        font-size:
            16px;
    }

}


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

@media (max-width: 767.98px) {

    .hansuja-hero {

        height:
            680px;

        min-height:
            680px;
    }


    .hero-content-container {

        align-items:
            flex-end;

        padding-bottom:
            105px;
    }


    .hero-content {

        padding:
            0 5px;
    }


    .hero-eyebrow {

        margin-bottom:
            17px;

        font-size:
            9px;

        letter-spacing:
            0.16em;
    }


    .hero-eyebrow::before {

        width:
            26px;
    }


    .hero-title {

        font-size:
            clamp(2.9rem, 14vw, 4.2rem);

        line-height:
            0.93;
    }


    .hero-description {

        margin-top:
            20px;

        font-size:
            14px;

        line-height:
            1.7;

        max-width:
            100%;
    }


    .hero-actions {

        margin-top:
            25px;

        gap:
            9px;
    }


    .hero-btn {

        min-height:
            48px;

        padding:
            7px 16px;

        font-size:
            12px;
    }


    .hero-meta {

        bottom:
            18px;
    }


    .hero-meta-inner {

        gap:
            10px;
    }


    .hero-counter {

        display:
            none;
    }


    .hero-pagination {

        flex:
            1;
    }


    .hero-navigation {

        gap:
            5px;
    }


    .hero-prev,
    .hero-next {

        width:
            39px !important;

        height:
            39px !important;
    }


    .hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(5, 39, 25, 0.20) 0%,
                rgba(5, 39, 25, 0.42) 35%,
                rgba(5, 39, 25, 0.93) 100%
            );
    }

}


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

@media (max-width: 575.98px) {

    .hansuja-hero {

        height:
            650px;

        min-height:
            650px;
    }


    .hero-content-container {

        padding-bottom:
            95px;
    }


    .hero-title {

        font-size:
            3rem;
    }


    .hero-description {

        font-size:
            13px;
    }


    .hero-btn {

        min-height:
            45px;

        padding:
            6px 14px;
    }

}
/* =========================================================
   STEP 3 — ABOUT US
========================================================= */

.hansuja-about {

    position: relative;

    padding:
        125px 0 135px;

    overflow: hidden;

    background:
        #ffffff;
}


/* =========================================================
   ABOUT VISUAL
========================================================= */

.about-visual {

    position: relative;

    min-height:
        610px;

    padding:
        0 55px 45px 0;
}


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

.about-main-image {

    position: relative;

    width: 100%;

    height:
        555px;

    overflow: hidden;

    border-radius:
        34px;

    background:
        #e9eee9;

    box-shadow:
        0 30px 70px
        rgba(8, 47, 30, 0.13);
}


.about-main-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(6, 43, 27, 0.28)
        );

    pointer-events: none;
}


.about-main-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.about-visual:hover
.about-main-image img {

    transform:
        scale(1.035);
}


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

.about-small-image {

    position: absolute;

    right: 0;

    bottom: 0;

    width:
        230px;

    height:
        235px;

    overflow: hidden;

    border:
        10px solid #ffffff;

    border-radius:
        27px;

    background:
        #ffffff;

    box-shadow:
        0 22px 50px
        rgba(8, 47, 30, 0.17);

    z-index: 3;
}


.about-small-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


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

.about-badge {

    position: absolute;

    left: -25px;

    bottom: 80px;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 12px;

    min-width:
        205px;

    padding:
        14px 18px;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 20px 50px
        rgba(8, 47, 30, 0.14);
}


.about-badge-icon {

    display: grid;

    place-items: center;

    width:
        43px;

    height:
        43px;

    flex-shrink: 0;

    border-radius:
        13px;

    color:
        #ffffff;

    background:
        var(--hansuja-green);

    font-size:
        18px;
}


.about-badge strong {

    display: block;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;
}


.about-badge span {

    display: block;

    margin-top:
        3px;

    color:
        var(--hansuja-muted);

    font-size:
        10px;

    font-weight:
        500;
}


/* =========================================================
   DECORATIVE ELEMENT
========================================================= */

.about-decoration {

    position: absolute;

    left: -85px;

    top: -55px;

    width:
        180px;

    height:
        180px;

    border:
        1px solid
        rgba(22, 93, 61, 0.16);

    border-radius:
        50%;

    z-index: -1;
}


.about-decoration::before {

    content: "";

    position: absolute;

    inset:
        17px;

    border:
        1px solid
        rgba(217, 173, 59, 0.40);

    border-radius:
        50%;
}


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

.about-content {

    max-width:
        610px;

    padding-left:
        15px;
}


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

.section-label {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        var(--hansuja-green);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.22em;

    text-transform:
        uppercase;
}


.section-label::before {

    content: "";

    width:
        32px;

    height:
        2px;

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


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

.about-title {

    margin:
        20px 0 25px;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

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

    font-weight:
        800;

    line-height:
        0.96;

    letter-spacing:
        -0.065em;
}


.about-title span {

    display:
        block;

    color:
        var(--hansuja-green);
}


/* =========================================================
   INTRO
========================================================= */

.about-intro {

    margin:
        0;

    max-width:
        560px;

    color:
        var(--hansuja-text);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        18px;

    font-weight:
        600;

    line-height:
        1.65;
}


.about-text {

    max-width:
        560px;

    margin:
        16px 0 0;

    color:
        var(--hansuja-muted);

    font-size:
        14px;

    line-height:
        1.85;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.about-highlights {

    margin-top:
        34px;

    border-top:
        1px solid
        rgba(22, 93, 61, 0.10);
}


.about-highlight {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        17px;

    padding:
        19px 0;

    border-bottom:
        1px solid
        rgba(22, 93, 61, 0.10);
}


.highlight-icon {

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    width:
        43px;

    height:
        43px;

    border-radius:
        13px;

    color:
        var(--hansuja-green);

    background:
        #edf5ef;

    font-size:
        17px;
}


.about-highlight h4 {

    margin:
        1px 0 5px;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        14px;

    font-weight:
        800;
}


.about-highlight p {

    max-width:
        480px;

    margin:
        0;

    color:
        var(--hansuja-muted);

    font-size:
        12px;

    line-height:
        1.65;
}


/* =========================================================
   ACTION
========================================================= */

.about-action {

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    flex-wrap:
        wrap;

    margin-top:
        32px;
}


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

.about-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    min-height:
        51px;

    padding:
        7px 8px 7px 20px;

    border-radius:
        50px;

    color:
        #ffffff;

    background:
        var(--hansuja-green);

    font-size:
        12px;

    font-weight:
        700;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.about-btn:hover {

    color:
        #ffffff;

    background:
        var(--hansuja-dark-green);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(22, 93, 61, 0.20);
}


.about-btn-icon {

    display:
        grid;

    place-items:
        center;

    width:
        35px;

    height:
        35px;

    border-radius:
        50%;

    color:
        var(--hansuja-green);

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


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

.about-signature {

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        12px;

    font-weight:
        800;
}


.about-signature small {

    color:
        var(--hansuja-muted);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        500;
}


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

@media (max-width: 991.98px) {

    .hansuja-about {

        padding:
            100px 0;
    }


    .about-content {

        padding-left:
            0;

        max-width:
            100%;
    }


    .about-title {

        font-size:
            clamp(3rem, 7vw, 4.8rem);
    }


    .about-visual {

        max-width:
            700px;

        margin:
            0 auto;
    }

}


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

@media (max-width: 767.98px) {

    .hansuja-about {

        padding:
            75px 0 85px;
    }


    .about-visual {

        min-height:
            470px;

        padding:
            0 25px 35px 0;
    }


    .about-main-image {

        height:
            420px;

        border-radius:
            25px;
    }


    .about-small-image {

        width:
            150px;

        height:
            155px;

        border-width:
            7px;

        border-radius:
            20px;
    }


    .about-badge {

        left:
            8px;

        bottom:
            48px;

        min-width:
            180px;

        padding:
            11px 13px;
    }


    .about-badge-icon {

        width:
            37px;

        height:
            37px;

        font-size:
            15px;
    }


    .about-badge strong {

        font-size:
            11px;
    }


    .about-badge span {

        font-size:
            9px;
    }


    .about-decoration {

        left:
            -55px;

        top:
            -40px;

        width:
            130px;

        height:
            130px;
    }


    .about-title {

        margin-top:
            16px;

        font-size:
            clamp(2.7rem, 13vw, 4rem);
    }


    .about-intro {

        font-size:
            15px;
    }


    .about-text {

        font-size:
            13px;
    }


    .about-highlight {

        gap:
            12px;

        padding:
            16px 0;
    }


    .highlight-icon {

        width:
            39px;

        height:
            39px;

        border-radius:
            11px;

        font-size:
            15px;
    }


    .about-highlight h4 {

        font-size:
            13px;
    }


    .about-highlight p {

        font-size:
            11px;
    }


    .about-action {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;
    }

}


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

@media (max-width: 575.98px) {

    .about-main-image {

        height:
            390px;
    }


    .about-visual {

        min-height:
            440px;
    }


    .about-small-image {

        width:
            135px;

        height:
            140px;
    }


    .about-badge {

        left:
            4px;

        bottom:
            45px;
    }

}
/* =========================================================
   STEP 4 — PRODUCT SECTION
========================================================= */

.hansuja-products {

    position: relative;

    padding:
        120px 0 125px;

    overflow: hidden;

    background:
        #f5f7f3;
}


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

.products-heading-row {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom:
        55px;
}


.products-heading {

    max-width:
        720px;
}


.products-heading
.section-label {

    margin-bottom:
        18px;
}


.products-title {

    margin:
        0;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

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

    font-weight:
        800;

    line-height:
        0.96;

    letter-spacing:
        -0.065em;
}


.products-title span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.products-description {

    max-width:
        590px;

    margin:
        22px 0 0;

    color:
        var(--hansuja-muted);

    font-size:
        14px;

    line-height:
        1.8;
}


/* =========================================================
   VIEW ALL
========================================================= */

.products-view-all {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--hansuja-dark-green);

    font-size:
        12px;

    font-weight:
        800;

    white-space:
        nowrap;
}


.products-view-icon {

    display:
        grid;

    place-items:
        center;

    width:
        40px;

    height:
        40px;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        var(--hansuja-green);

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


.products-view-all:hover {

    color:
        var(--hansuja-green);
}


.products-view-all:hover
.products-view-icon {

    transform:
        translate(2px, -2px);

    background:
        var(--hansuja-dark-green);
}


/* =========================================================
   SLIDER
========================================================= */

.products-slider-wrapper {

    position:
        relative;
}


.productsSwiper {

    overflow:
        visible;
}


.productsSwiper
.swiper-slide {

    height:
        auto;
}


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

.product-card {

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        rgba(22, 93, 61, 0.09);

    border-radius:
        28px;

    background:
        #ffffff;

    box-shadow:
        0 18px 50px
        rgba(14, 54, 34, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.product-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 28px 65px
        rgba(14, 54, 34, 0.13);
}


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

.product-image-wrapper {

    position:
        relative;

    height:
        390px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            145deg,
            #f0ead5,
            #e8f0e8
        );
}


.product-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.6s ease;
}


.product-card:hover
.product-image {

    transform:
        scale(1.04);
}


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

.product-number {

    position:
        absolute;

    top:
        20px;

    left:
        20px;

    display:
        grid;

    place-items:
        center;

    width:
        43px;

    height:
        43px;

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

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        rgba(8, 48, 31, 0.72);

    backdrop-filter:
        blur(8px);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        800;
}


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

.product-image-tag {

    position:
        absolute;

    right:
        20px;

    top:
        20px;

    padding:
        9px 12px;

    border-radius:
        50px;

    color:
        #ffffff;

    background:
        rgba(8, 48, 31, 0.78);

    backdrop-filter:
        blur(8px);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


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

.product-card-content {

    padding:
        27px 27px 29px;
}


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

.product-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        13px;
}


.product-category {

    color:
        var(--hansuja-green);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.14em;
}


.product-weight {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        48px;

    padding:
        6px 10px;

    border-radius:
        50px;

    color:
        var(--hansuja-dark-green);

    background:
        #edf4ee;

    font-size:
        10px;

    font-weight:
        800;
}


/* =========================================================
   PRODUCT NAME
========================================================= */

.product-name {

    margin:
        0;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        25px;

    font-weight:
        800;

    line-height:
        1.12;

    letter-spacing:
        -0.035em;
}


/* =========================================================
   PRODUCT DESCRIPTION
========================================================= */

.product-description {

    min-height:
        65px;

    margin:
        14px 0 22px;

    color:
        var(--hansuja-muted);

    font-size:
        12px;

    line-height:
        1.7;
}


/* =========================================================
   PRODUCT LINK
========================================================= */

.product-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--hansuja-green);

    font-size:
        12px;

    font-weight:
        800;

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


.product-link:hover {

    color:
        var(--hansuja-dark-green);

    gap:
        14px;
}


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

.product-card-featured {

    border:
        2px solid
        rgba(22, 93, 61, 0.12);
}


.product-card-featured
.product-weight {

    color:
        #ffffff;

    background:
        var(--hansuja-green);
}


/* =========================================================
   CONTROLS
========================================================= */

.products-controls {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        35px;
}


/* =========================================================
   PAGINATION
========================================================= */

.products-pagination {

    position:
        static !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    width:
        auto !important;
}


.products-pagination
.swiper-pagination-bullet {

    width:
        7px;

    height:
        7px;

    margin:
        0 4px !important;

    opacity:
        1;

    background:
        rgba(22, 93, 61, 0.22);

    transition:
        width 0.3s ease,
        background 0.3s ease;
}


.products-pagination
.swiper-pagination-bullet-active {

    width:
        30px;

    border-radius:
        10px;

    background:
        var(--hansuja-green);
}


/* =========================================================
   NAVIGATION
========================================================= */

.products-navigation {

    display:
        flex;

    gap:
        9px;
}


.products-prev,
.products-next {

    display:
        grid;

    place-items:
        center;

    width:
        47px;

    height:
        47px;

    padding:
        0;

    border:
        1px solid
        rgba(22, 93, 61, 0.15);

    border-radius:
        50%;

    color:
        var(--hansuja-green);

    background:
        #ffffff;

    cursor:
        pointer;

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


.products-prev:hover,
.products-next:hover {

    color:
        #ffffff;

    background:
        var(--hansuja-green);

    transform:
        translateY(-2px);
}


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

@media (max-width: 991.98px) {

    .hansuja-products {

        padding:
            95px 0 100px;
    }


    .products-heading-row {

        align-items:
            flex-start;

        margin-bottom:
            40px;
    }


    .products-title {

        font-size:
            clamp(2.8rem, 7vw, 4.6rem);
    }


    .product-image-wrapper {

        height:
            350px;
    }

}


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

@media (max-width: 767.98px) {

    .hansuja-products {

        padding:
            75px 0 85px;
    }


    .products-heading-row {

        display:
            block;

        margin-bottom:
            32px;
    }


    .products-title {

        font-size:
            clamp(2.65rem, 12vw, 3.7rem);
    }


    .products-description {

        font-size:
            13px;

        margin-top:
            18px;
    }


    .products-heading-action {

        margin-top:
            22px;
    }


    .products-view-all {

        font-size:
            11px;
    }


    .product-image-wrapper {

        height:
            330px;
    }


    .product-card-content {

        padding:
            23px 21px 25px;
    }


    .product-name {

        font-size:
            22px;
    }


    .product-description {

        min-height:
            auto;
    }


    .products-controls {

        margin-top:
            27px;
    }


    .products-prev,
    .products-next {

        width:
            42px;

        height:
            42px;
    }

}


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

@media (max-width: 575.98px) {

    .product-image-wrapper {

        height:
            300px;
    }


    .product-number {

        width:
            38px;

        height:
            38px;

        top:
            15px;

        left:
            15px;
    }


    .product-image-tag {

        top:
            15px;

        right:
            15px;

        padding:
            8px 10px;

        font-size:
            8px;
    }

}
 /* =========================================================
   STEP 5 — WHY US
========================================================= */

.hansuja-why {

    position: relative;

    padding:
        125px 0 135px;

    overflow: hidden;

    background:
        var(--hansuja-dark-green);

    color:
        #ffffff;
}


/* =========================================================
   BACKGROUND DETAIL
========================================================= */

.hansuja-why::before {

    content: "";

    position: absolute;

    width:
        650px;

    height:
        650px;

    right:
        -250px;

    top:
        -280px;

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

    border-radius:
        50%;
}


.hansuja-why::after {

    content: "";

    position: absolute;

    width:
        450px;

    height:
        450px;

    left:
        -300px;

    bottom:
        -250px;

    border:
        1px solid
        rgba(217,173,59,0.10);

    border-radius:
        50%;
}


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

.why-content {

    position:
        relative;

    z-index:
        2;

    padding-right:
        25px;
}


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

.why-label {

    color:
        #e7c55d;
}


.why-label::before {

    background:
        #e7c55d;
}


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

.why-title {

    max-width:
        680px;

    margin:
        20px 0 24px;

    color:
        #ffffff;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

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

    font-weight:
        800;

    line-height:
        0.96;

    letter-spacing:
        -0.065em;
}


.why-title span {

    display:
        block;

    color:
        #dfbb4d;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.why-description {

    max-width:
        590px;

    margin:
        0;

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

    font-size:
        14px;

    line-height:
        1.85;
}


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

.why-features {

    display:
        grid;

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

    gap:
        1px;

    margin-top:
        40px;

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

    background:
        rgba(255,255,255,0.10);
}


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

.why-feature {

    position:
        relative;

    min-height:
        190px;

    padding:
        27px 25px 24px;

    background:
        var(--hansuja-dark-green);

    transition:
        background 0.3s ease;
}


.why-feature:hover {

    background:
        rgba(255,255,255,0.055);
}


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

.why-feature-number {

    position:
        absolute;

    top:
        18px;

    right:
        20px;

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

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.1em;
}


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

.why-feature-icon {

    display:
        grid;

    place-items:
        center;

    width:
        43px;

    height:
        43px;

    margin-bottom:
        20px;

    border-radius:
        13px;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    font-size:
        17px;
}


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

.why-feature h3 {

    margin:
        0 0 7px;

    color:
        #ffffff;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        15px;

    font-weight:
        800;

    letter-spacing:
        -0.01em;
}


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

.why-feature p {

    max-width:
        260px;

    margin:
        0;

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

    font-size:
        11px;

    line-height:
        1.7;
}


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

.why-visual {

    position:
        relative;

    min-height:
        620px;

    padding:
        0 0 50px 50px;
}


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

.why-image-main {

    position:
        relative;

    height:
        570px;

    overflow:
        hidden;

    border-radius:
        32px;

    background:
        #183e2c;

    box-shadow:
        0 30px 70px
        rgba(0,0,0,0.25);
}


.why-image-main::after {

    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,0.48)
        );
}


.why-image-main img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.8s ease;
}


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

    transform:
        scale(1.04);
}


/* =========================================================
   PROMISE PANEL
========================================================= */

.why-image-panel {

    position:
        absolute;

    left:
        0;

    bottom:
        80px;

    z-index:
        4;

    width:
        270px;

    padding:
        23px;

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

    border-radius:
        18px;

    background:
        rgba(7,40,26,0.90);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.20);
}


.why-panel-label {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--hansuja-gold);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.2em;
}


.why-image-panel strong {

    display:
        block;

    color:
        #ffffff;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1.25;
}


.why-image-panel p {

    margin:
        12px 0 0;

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

    font-size:
        10px;

    line-height:
        1.65;
}


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

.why-image-small {

    position:
        absolute;

    right:
        -10px;

    bottom:
        0;

    z-index:
        5;

    width:
        190px;

    height:
        195px;

    overflow:
        hidden;

    padding:
        7px;

    border-radius:
        22px;

    background:
        var(--hansuja-gold);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,0.25);
}


.why-image-small img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        16px;
}


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

.why-circle {

    position:
        absolute;

    top:
        -45px;

    right:
        20px;

    width:
        115px;

    height:
        115px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(217,173,59,0.50);

    border-radius:
        50%;

    z-index:
        6;
}


.why-circle::before {

    content: "";

    position:
        absolute;

    inset:
        10px;

    border:
        1px solid
        rgba(217,173,59,0.25);

    border-radius:
        50%;
}


.why-circle span {

    color:
        var(--hansuja-gold);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        25px;

    font-weight:
        800;
}


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

@media (max-width: 991.98px) {

    .hansuja-why {

        padding:
            100px 0;
    }


    .why-content {

        padding-right:
            0;
    }


    .why-title {

        font-size:
            clamp(3rem, 7vw, 4.7rem);
    }


    .why-visual {

        max-width:
            700px;

        margin:
            35px auto 0;
    }

}


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

@media (max-width: 767.98px) {

    .hansuja-why {

        padding:
            75px 0 85px;
    }


    .why-title {

        font-size:
            clamp(2.7rem, 13vw, 4rem);
    }


    .why-description {

        font-size:
            13px;
    }


    .why-features {

        grid-template-columns:
            1fr;

        margin-top:
            30px;
    }


    .why-feature {

        min-height:
            auto;

        padding:
            23px 20px;
    }


    .why-feature p {

        max-width:
            100%;
    }


    .why-visual {

        min-height:
            470px;

        padding:
            0 20px 35px 0;
    }


    .why-image-main {

        height:
            430px;

        border-radius:
            25px;
    }


    .why-image-panel {

        left:
            0;

        bottom:
            50px;

        width:
            235px;

        padding:
            18px;
    }


    .why-image-panel strong {

        font-size:
            15px;
    }


    .why-image-small {

        width:
            145px;

        height:
            150px;

        right:
            -3px;
    }


    .why-circle {

        width:
            85px;

        height:
            85px;

        top:
            -25px;

        right:
            10px;
    }


    .why-circle span {

        font-size:
            19px;
    }

}


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

@media (max-width: 575.98px) {

    .why-image-main {

        height:
            400px;
    }


    .why-image-panel {

        width:
            215px;

        bottom:
            42px;
    }


    .why-image-small {

        width:
            125px;

        height:
            130px;
    }

}
/* =========================================================
   STEP 6 — TESTIMONIALS
========================================================= */

.hansuja-testimonials {

    position: relative;

    padding:
        125px 0 130px;

    overflow: hidden;

    background:
        #ffffff;
}


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

.testimonials-heading-row {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom:
        50px;
}


.testimonials-title {

    margin:
        18px 0 0;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

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

    font-weight:
        800;

    line-height:
        0.96;

    letter-spacing:
        -0.065em;
}


.testimonials-title span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.testimonials-heading-text {

    max-width:
        390px;

    padding-bottom:
        5px;
}


.testimonials-heading-text p {

    margin:
        0;

    color:
        var(--hansuja-muted);

    font-size:
        13px;

    line-height:
        1.8;
}


/* =========================================================
   SLIDER
========================================================= */

.testimonials-slider-area {

    position:
        relative;
}


.testimonialsSwiper {

    overflow:
        visible;
}


.testimonialsSwiper
.swiper-slide {

    height:
        auto;
}


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

.testimonial-card {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        270px 1fr;

    min-height:
        335px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(22,93,61,0.09);

    border-radius:
        30px;

    background:
        #f5f7f3;

    box-shadow:
        0 18px 50px
        rgba(14,54,34,0.06);

    transition:
        box-shadow 0.35s ease,
        transform 0.35s ease;
}


.testimonial-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 25px 60px
        rgba(14,54,34,0.10);
}


/* =========================================================
   PERSON AREA
========================================================= */

.testimonial-person {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    padding:
        32px;

    background:
        var(--hansuja-dark-green);
}


.testimonial-avatar {

    width:
        105px;

    height:
        105px;

    overflow:
        hidden;

    margin-bottom:
        23px;

    border:
        5px solid
        rgba(255,255,255,0.12);

    border-radius:
        50%;

    background:
        #294c3b;
}


.testimonial-avatar img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.testimonial-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--hansuja-gold);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}


.testimonial-person h3 {

    margin:
        0;

    color:
        #ffffff;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        17px;

    font-weight:
        800;
}


.testimonial-person p {

    margin:
        5px 0 0;

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

    font-size:
        10px;
}


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

.testimonial-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        45px 50px 38px;
}


.testimonial-stars {

    display:
        flex;

    gap:
        5px;

    color:
        var(--hansuja-gold);

    font-size:
        13px;
}


.testimonial-content blockquote {

    max-width:
        720px;

    margin:
        25px 0;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        clamp(1.5rem, 2.7vw, 2.3rem);

    font-weight:
        700;

    line-height:
        1.35;

    letter-spacing:
        -0.035em;
}


.testimonial-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(22,93,61,0.10);
}


.testimonial-bottom span {

    color:
        var(--hansuja-muted);

    font-size:
        10px;

    font-weight:
        600;
}


.testimonial-bottom i {

    color:
        var(--hansuja-green);

    font-size:
        30px;

    opacity:
        0.35;
}


/* =========================================================
   CONTROLS
========================================================= */

.testimonials-controls {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        30px;
}


.testimonials-pagination {

    position:
        static !important;

    display:
        flex;

    width:
        auto !important;
}


.testimonials-pagination
.swiper-pagination-bullet {

    width:
        7px;

    height:
        7px;

    margin:
        0 4px !important;

    opacity:
        1;

    background:
        rgba(22,93,61,0.20);

    transition:
        width 0.3s ease,
        background 0.3s ease;
}


.testimonials-pagination
.swiper-pagination-bullet-active {

    width:
        30px;

    border-radius:
        10px;

    background:
        var(--hansuja-green);
}


/* =========================================================
   NAVIGATION
========================================================= */

.testimonials-navigation {

    display:
        flex;

    gap:
        8px;
}


.testimonials-prev,
.testimonials-next {

    display:
        grid;

    place-items:
        center;

    width:
        46px;

    height:
        46px;

    padding:
        0;

    border:
        1px solid
        rgba(22,93,61,0.14);

    border-radius:
        50%;

    color:
        var(--hansuja-green);

    background:
        #ffffff;

    cursor:
        pointer;

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


.testimonials-prev:hover,
.testimonials-next:hover {

    color:
        #ffffff;

    background:
        var(--hansuja-green);

    transform:
        translateY(-2px);
}


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

@media (max-width: 991.98px) {

    .hansuja-testimonials {

        padding:
            100px 0;
    }


    .testimonials-heading-row {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;
    }


    .testimonials-heading-text {

        max-width:
            600px;
    }


    .testimonial-card {

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


    .testimonial-person {

        padding:
            27px;
    }


    .testimonial-content {

        padding:
            35px;
    }

}


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

@media (max-width: 767.98px) {

    .hansuja-testimonials {

        padding:
            75px 0 85px;
    }


    .testimonials-heading-row {

        margin-bottom:
            32px;
    }


    .testimonials-title {

        font-size:
            clamp(2.7rem, 13vw, 4rem);
    }


    .testimonials-heading-text p {

        font-size:
            12px;
    }


    .testimonial-card {

        display:
            block;

        min-height:
            auto;

        border-radius:
            25px;
    }


    .testimonial-person {

        display:
            flex;

        flex-direction:
            row;

        align-items:
            center;

        gap:
            16px;

        padding:
            22px;
    }


    .testimonial-avatar {

        width:
            65px;

        height:
            65px;

        flex-shrink:
            0;

        margin:
            0;
    }


    .testimonial-label {

        margin-bottom:
            5px;
    }


    .testimonial-person h3 {

        font-size:
            14px;
    }


    .testimonial-content {

        padding:
            28px 22px 24px;
    }


    .testimonial-content blockquote {

        margin:
            20px 0;

        font-size:
            1.4rem;
    }


    .testimonial-bottom {

        padding-top:
            16px;
    }


    .testimonials-controls {

        margin-top:
            24px;
    }


    .testimonials-prev,
    .testimonials-next {

        width:
            41px;

        height:
            41px;
    }

}
/* =========================================================
   STEP 7 — BLOG
========================================================= */

.hansuja-blog {

    position:
        relative;

    padding:
        125px 0 135px;

    overflow:
        hidden;

    background:
        #f5f7f3;
}


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

.blog-heading-row {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        60px;

    margin-bottom:
        50px;
}


.blog-heading {

    max-width:
        650px;
}


.blog-title {

    margin:
        18px 0 0;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

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

    font-weight:
        800;

    line-height:
        0.96;

    letter-spacing:
        -0.065em;
}


.blog-title span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.blog-heading-right {

    max-width:
        400px;

    padding-bottom:
        3px;
}


.blog-heading-right p {

    margin:
        0 0 20px;

    color:
        var(--hansuja-muted);

    font-size:
        13px;

    line-height:
        1.8;
}


/* =========================================================
   VIEW ALL
========================================================= */

.blog-view-all {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    color:
        var(--hansuja-dark-green);

    font-size:
        11px;

    font-weight:
        800;
}


.blog-view-icon {

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        var(--hansuja-green);

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


.blog-view-all:hover {

    color:
        var(--hansuja-green);
}


.blog-view-all:hover
.blog-view-icon {

    transform:
        translate(2px, -2px);

    background:
        var(--hansuja-dark-green);
}


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

.blog-card {

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        rgba(22,93,61,0.08);

    border-radius:
        25px;

    background:
        #ffffff;

    box-shadow:
        0 15px 45px
        rgba(14,54,34,0.05);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.blog-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 25px 60px
        rgba(14,54,34,0.11);
}


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

.blog-image {

    position:
        relative;

    display:
        block;

    height:
        245px;

    overflow:
        hidden;

    background:
        #dce5dd;
}


.blog-card-featured
.blog-image {

    height:
        385px;
}


.blog-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.65s ease;
}


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

    transform:
        scale(1.055);
}


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

.blog-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.02) 40%,
            rgba(5,39,25,0.38) 100%
        );

    pointer-events:
        none;
}


/* =========================================================
   CATEGORY
========================================================= */

.blog-category {

    position:
        absolute;

    z-index:
        3;

    left:
        18px;

    top:
        18px;

    padding:
        8px 11px;

    border-radius:
        50px;

    color:
        #ffffff;

    background:
        rgba(7,42,27,0.78);

    backdrop-filter:
        blur(10px);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.14em;
}


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

.blog-image-arrow {

    position:
        absolute;

    z-index:
        3;

    right:
        18px;

    bottom:
        18px;

    display:
        grid;

    place-items:
        center;

    width:
        43px;

    height:
        43px;

    border-radius:
        50%;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    font-size:
        13px;

    transform:
        translate(5px, 5px);

    opacity:
        0;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.blog-card:hover
.blog-image-arrow {

    opacity:
        1;

    transform:
        translate(0, 0);
}


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

.blog-content {

    padding:
        25px 25px 27px;
}


.blog-card-featured
.blog-content {

    padding:
        29px 30px 31px;
}


/* =========================================================
   META
========================================================= */

.blog-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        12px;

    color:
        var(--hansuja-muted);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.blog-meta-dot {

    color:
        var(--hansuja-gold);
}


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

.blog-card-title {

    margin:
        0;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        19px;

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        -0.025em;
}


.blog-card-featured
.blog-card-title {

    max-width:
        630px;

    font-size:
        29px;

    line-height:
        1.18;
}


/* =========================================================
   EXCERPT
========================================================= */

.blog-excerpt {

    margin:
        13px 0 20px;

    color:
        var(--hansuja-muted);

    font-size:
        11px;

    line-height:
        1.7;
}


/* =========================================================
   READ MORE
========================================================= */

.blog-read-more {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--hansuja-green);

    font-size:
        10px;

    font-weight:
        800;

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


.blog-read-more:hover {

    gap:
        13px;

    color:
        var(--hansuja-dark-green);
}


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

@media (max-width: 991.98px) {

    .hansuja-blog {

        padding:
            100px 0;
    }


    .blog-heading-row {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;
    }


    .blog-heading-right {

        max-width:
            600px;
    }


    .blog-card-featured
    .blog-image {

        height:
            330px;
    }

}


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

@media (max-width: 767.98px) {

    .hansuja-blog {

        padding:
            75px 0 85px;
    }


    .blog-heading-row {

        margin-bottom:
            32px;
    }


    .blog-title {

        font-size:
            clamp(2.7rem, 13vw, 4rem);
    }


    .blog-heading-right p {

        font-size:
            12px;
    }


    .blog-card-featured
    .blog-image {

        height:
            300px;
    }


    .blog-image {

        height:
            240px;
    }


    .blog-card-featured
    .blog-card-title {

        font-size:
            24px;
    }


    .blog-content,
    .blog-card-featured
    .blog-content {

        padding:
            22px 20px 24px;
    }


    .blog-card-title {

        font-size:
            18px;
    }

}


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

@media (max-width: 575.98px) {

    .blog-card-featured
    .blog-image {

        height:
            265px;
    }


    .blog-image {

        height:
            220px;
    }


    .blog-card-featured
    .blog-card-title {

        font-size:
            22px;
    }

}
/* =========================================================
   STEP 8 — FOOTER
========================================================= */

.hansuja-footer {

    position:
        relative;

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

    background:
        #06291a;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.footer-newsletter {

    position:
        relative;

    z-index:
        3;

    margin-top:
        -1px;
}


.footer-newsletter-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        45px;

    min-height:
        220px;

    padding:
        42px 50px;

    border-radius:
        0 0 30px 30px;

    background:
        var(--hansuja-green);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.15);
}


.footer-newsletter-content {

    max-width:
        580px;
}


.footer-newsletter-label {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--hansuja-gold);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}


.footer-newsletter-content h2 {

    margin:
        0;

    color:
        #ffffff;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        clamp(2rem, 3.5vw, 3.4rem);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.055em;
}


.footer-newsletter-content p {

    max-width:
        500px;

    margin:
        13px 0 0;

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

    font-size:
        11px;

    line-height:
        1.7;
}


/* =========================================================
   NEWSLETTER FORM
========================================================= */

.footer-newsletter-form {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    width:
        450px;

    flex-shrink:
        0;
}


.newsletter-input-wrapper {

    position:
        relative;

    flex:
        1;
}


.newsletter-input-wrapper i {

    position:
        absolute;

    left:
        17px;

    top:
        50%;

    transform:
        translateY(-50%);

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

    font-size:
        14px;

    pointer-events:
        none;
}


.newsletter-input-wrapper input {

    width:
        100%;

    height:
        53px;

    padding:
        0 15px 0 45px;

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

    outline:
        none;

    border-radius:
        50px;

    color:
        #ffffff;

    background:
        rgba(0,0,0,0.12);

    font-family:
        inherit;

    font-size:
        11px;

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


.newsletter-input-wrapper input::placeholder {

    color:
        rgba(255,255,255,0.50);
}


.newsletter-input-wrapper input:focus {

    border-color:
        rgba(255,255,255,0.55);

    background:
        rgba(0,0,0,0.18);
}


.newsletter-submit {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    height:
        53px;

    padding:
        0 18px;

    flex-shrink:
        0;

    border:
        0;

    border-radius:
        50px;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;

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


.newsletter-submit:hover {

    transform:
        translateY(-2px);

    background:
        #f0cb67;
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.footer-main {

    padding:
        85px 0 30px;
}


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

.footer-logo {

    display:
        inline-block;

    margin-bottom:
        22px;
}


.footer-logo img {

    display:
        block;

    width:
        150px;

    max-height:
        65px;

    object-fit:
        contain;

    object-position:
        left center;
}


.footer-brand-text {

    max-width:
        370px;

    margin:
        0;

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

    font-size:
        16px;

    line-height:
        1.85;
}


.footer-story-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        21px;

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;
}


.footer-story-link:hover {

    color:
        var(--hansuja-gold);
}


/* =========================================================
   SOCIAL
========================================================= */

.footer-social {

    display:
        flex;

    gap:
        8px;

    margin-top:
        28px;
}


.footer-social a {

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

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

    border-radius:
        50%;

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

    font-size:
        12px;

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


.footer-social a:hover {

    color:
        var(--hansuja-dark-green);

    border-color:
        var(--hansuja-gold);

    background:
        var(--hansuja-gold);

    transform:
        translateY(-3px);
}


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

.footer-column h3 {

    margin:
        3px 0 25px;

    color:
        #ffffff;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.01em;
}


.footer-column ul {

    padding:
        0;

    margin:
        0;

    list-style:
        none;
}


.footer-column li {

    margin-bottom:
        13px;
}


.footer-column li a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

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

    font-size:
        10px;

    line-height:
        1.5;

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


.footer-column li a:hover {

    color:
        #ffffff;

    transform:
        translateX(3px);
}


.footer-column li a span {

    color:
        var(--hansuja-gold);

    font-size:
        8px;

    font-weight:
        800;
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    margin-bottom:
        19px;
}


.footer-contact-icon {

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    width:
        34px;

    height:
        34px;

    border-radius:
        10px;

    color:
        var(--hansuja-gold);

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

    font-size:
        12px;
}


.footer-contact-label {

    display:
        block;

    margin-bottom:
        4px;

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

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.footer-contact p {

    margin:
        0;

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

    font-size:
        12px;

    line-height:
        1.6;
}


.footer-contact a {

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

    font-size:
        10px;
}


.footer-contact a:hover {

    color:
        var(--hansuja-gold);
}


/* =========================================================
   DIVIDER
========================================================= */

.footer-divider {

    height:
        1px;

    margin:
        65px 0 25px;

    background:
        rgba(255,255,255,0.09);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-bottom:
        10px;
}


.footer-bottom p {

    margin:
        0;

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

    font-size:
        14px;
}


.footer-legal {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;
}


.footer-legal a {

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

    font-size:
        12px;

    transition:
        color 0.25s ease;
}


.footer-legal a:hover {

    color:
        #ffffff;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {

    display:
        grid;

    place-items:
        center;

    width:
        43px;

    height:
        43px;

    padding:
        0;

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

    border-radius:
        50%;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    cursor:
        pointer;

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


.back-to-top:hover {

    transform:
        translateY(-3px);

    background:
        #ffffff;
}


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

@media (max-width: 991.98px) {

    .footer-newsletter-box {

        padding:
            40px;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .footer-newsletter-form {

        width:
            100%;

        max-width:
            600px;
    }


    .footer-main {

        padding-top:
            70px;
    }

}


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

@media (max-width: 767.98px) {

    .footer-newsletter-box {

        padding:
            32px 24px;

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


    .footer-newsletter-content h2 {

        font-size:
            2.2rem;
    }


    .footer-newsletter-form {

        display:
            block;

        width:
            100%;
    }


    .newsletter-input-wrapper {

        width:
            100%;

        margin-bottom:
            8px;
    }


    .newsletter-submit {

        width:
            100%;
    }


    .footer-main {

        padding:
            65px 0 25px;
    }


    .footer-logo img {

        width:
            135px;
    }


    .footer-divider {

        margin-top:
            45px;
    }


    .footer-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding-right:
            55px;
    }


    .footer-legal {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            9px;
    }


    .back-to-top {

        position:
            absolute;

        right:
            0;

        top:
            0;
    }

}
/* =========================================================
   ABOUT PAGE
========================================================= */


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

.about-page-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        #f5f1df;

    padding:
        100px 0;
}


.about-hero-content {

    max-width:
        720px;

    padding-right:
        40px;
}


.about-hero-content h1 {

    margin:
        20px 0 25px;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        clamp(3.4rem, 6vw, 6.2rem);

    font-weight:
        800;

    line-height:
        .92;

    letter-spacing:
        -.07em;
}


.about-hero-content h1 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.about-hero-content > p {

    max-width:
        580px;

    margin:
        0;

    color:
        var(--hansuja-muted);

    font-size:
        14px;

    line-height:
        1.85;
}


.about-hero-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    margin-top:
        32px;
}


.hansuja-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        0 20px;

    border-radius:
        50px;

    color:
        #ffffff;

    background:
        var(--hansuja-green);

    font-size:
        11px;

    font-weight:
        800;

    transition:
        transform .25s ease,
        background .25s ease;
}


.hansuja-btn:hover {

    color:
        #ffffff;

    background:
        var(--hansuja-dark-green);

    transform:
        translateY(-2px);
}


.about-text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--hansuja-dark-green);

    font-size:
        10px;

    font-weight:
        800;
}


.about-text-link:hover {

    color:
        var(--hansuja-green);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.about-hero-visual {

    position:
        relative;

    height:
        520px;

    padding:
        0 20px;
}


.about-hero-visual img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        35px;

    box-shadow:
        0 30px 70px
        rgba(8,45,27,.20);
}


.about-hero-badge {

    position:
        absolute;

    left:
        -10px;

    bottom:
        30px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        12px 18px;

    border-radius:
        50px;

    color:
        #ffffff;

    background:
        var(--hansuja-dark-green);

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


.about-hero-badge strong {

    display:
        grid;

    place-items:
        center;

    width:
        34px;

    height:
        34px;

    border-radius:
        50%;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    font-size:
        13px;
}


.about-hero-badge span {

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


/* =========================================================
   STORY
========================================================= */

.about-story {

    padding:
        130px 0;

    background:
        #ffffff;
}


.about-story-images {

    position:
        relative;

    min-height:
        650px;

    padding:
        0 65px 60px 0;
}


.about-story-main {

    height:
        590px;

    overflow:
        hidden;

    border-radius:
        35px;
}


.about-story-main img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.about-story-small {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        245px;

    height:
        210px;

    padding:
        7px;

    border-radius:
        25px;

    background:
        var(--hansuja-gold);

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


.about-story-small img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        18px;
}


.about-story-number {

    position:
        absolute;

    left:
        -25px;

    top:
        55px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 17px;

    color:
        #ffffff;

    background:
        var(--hansuja-dark-green);

    border-radius:
        50px;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


.about-story-number span {

    color:
        var(--hansuja-gold);
}


.about-story-content {

    padding-left:
        30px;
}


.about-story-content h2 {

    margin:
        18px 0 25px;

    color:
        var(--hansuja-dark-green);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        clamp(3rem, 5vw, 5rem);

    font-weight:
        800;

    line-height:
        .95;

    letter-spacing:
        -.065em;
}


.about-story-content h2 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.about-story-content p {

    max-width:
        570px;

    color:
        var(--hansuja-muted);

    font-size:
        13px;

    line-height:
        1.85;
}


.about-story-content .about-lead {

    color:
        var(--hansuja-dark-green);

    font-size:
        17px;

    font-weight:
        600;

    line-height:
        1.6;
}


.about-story-highlight {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    margin-top:
        30px;

    padding:
        20px;

    border-left:
        3px solid
        var(--hansuja-gold);

    background:
        #f5f7f3;
}


.about-story-highlight i {

    color:
        var(--hansuja-gold);

    font-size:
        25px;
}


.about-story-highlight strong {

    max-width:
        380px;

    color:
        var(--hansuja-dark-green);

    font-size:
        13px;

    line-height:
        1.6;
}


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

.about-values {

    padding:
        115px 0;

    background:
        #f5f7f3;
}


.about-values-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        50px;
}


.about-values-heading h2 {

    margin:
        18px 0 0;

    color:
        var(--hansuja-dark-green);

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

    font-weight:
        800;

    line-height:
        .95;

    letter-spacing:
        -.06em;
}


.about-values-heading h2 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.about-values-heading > p {

    max-width:
        350px;

    margin:
        0;

    color:
        var(--hansuja-muted);

    font-size:
        12px;

    line-height:
        1.8;
}


.about-values-grid {

    border:
        1px solid
        rgba(22,93,61,.10);
}


.about-value {

    position:
        relative;

    min-height:
        270px;

    padding:
        30px;

    border-right:
        1px solid
        rgba(22,93,61,.10);

    background:
        #ffffff;

    transition:
        background .3s ease,
        transform .3s ease;
}


.about-value:hover {

    background:
        var(--hansuja-dark-green);

    transform:
        translateY(-5px);

    z-index:
        2;
}


.about-value-number {

    position:
        absolute;

    top:
        22px;

    right:
        22px;

    color:
        rgba(22,93,61,.25);

    font-size:
        9px;

    font-weight:
        800;
}


.about-value:hover
.about-value-number {

    color:
        rgba(255,255,255,.25);
}


.about-value-icon {

    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    margin-bottom:
        45px;

    border-radius:
        14px;

    color:
        var(--hansuja-dark-green);

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


.about-value h3 {

    margin:
        0 0 10px;

    color:
        var(--hansuja-dark-green);

    font-size:
        17px;

    font-weight:
        800;
}


.about-value p {

    margin:
        0;

    color:
        var(--hansuja-muted);

    font-size:
        11px;

    line-height:
        1.7;
}


.about-value:hover h3 {

    color:
        #ffffff;
}


.about-value:hover p {

    color:
        rgba(255,255,255,.60);
}


/* =========================================================
   PROCESS
========================================================= */

.about-process {

    padding:
        125px 0;

    background:
        #ffffff;
}


.about-process-heading {

    max-width:
        700px;

    margin-bottom:
        55px;
}


.about-process-heading h2 {

    margin:
        18px 0 0;

    color:
        var(--hansuja-dark-green);

    font-size:
        clamp(3rem,5vw,5rem);

    font-weight:
        800;

    line-height:
        .95;

    letter-spacing:
        -.06em;
}


.about-process-heading h2 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.about-process-line {

    display:
        grid;

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

    gap:
        20px;

    position:
        relative;
}


.about-process-line::before {

    content:
        "";

    position:
        absolute;

    left:
        12%;

    right:
        12%;

    top:
        125px;

    border-top:
        1px dashed
        rgba(22,93,61,.20);
}


.process-item {

    position:
        relative;

    z-index:
        2;
}


.process-image {

    position:
        relative;

    height:
        250px;

    overflow:
        hidden;

    margin-bottom:
        22px;

    border-radius:
        25px;

    background:
        #e8eee9;
}


.process-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .6s ease;
}


.process-item:hover
.process-image img {

    transform:
        scale(1.06);
}


.process-image span {

    position:
        absolute;

    top:
        15px;

    left:
        15px;

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    font-size:
        10px;

    font-weight:
        800;
}


.process-item h3 {

    margin:
        0 0 6px;

    color:
        var(--hansuja-dark-green);

    font-size:
        17px;

    font-weight:
        800;
}


.process-item p {

    margin:
        0;

    color:
        var(--hansuja-muted);

    font-size:
        11px;
}


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

.about-quality {

    padding:
        0;

    background:
        var(--hansuja-dark-green);
}


.about-quality-image {

    height:
        620px;

    overflow:
        hidden;
}


.about-quality-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.about-quality-content {

    padding:
        70px 8vw 70px 70px;
}


.about-quality-content .section-label {

    color:
        var(--hansuja-gold);
}


.about-quality-content h2 {

    margin:
        18px 0 25px;

    color:
        #ffffff;

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

    font-weight:
        800;

    line-height:
        .95;

    letter-spacing:
        -.06em;
}


.about-quality-content h2 span {

    display:
        block;

    color:
        var(--hansuja-gold);
}


.about-quality-content > p {

    max-width:
        540px;

    color:
        rgba(255,255,255,.62);

    font-size:
        13px;

    line-height:
        1.85;
}


.quality-points {

    display:
        grid;

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

    gap:
        12px;

    margin:
        30px 0;
}


.quality-points div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(255,255,255,.80);

    font-size:
        11px;
}


.quality-points i {

    display:
        grid;

    place-items:
        center;

    width:
        25px;

    height:
        25px;

    border-radius:
        50%;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    font-size:
        12px;
}


.hansuja-btn-light {

    color:
        var(--hansuja-dark-green);

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


.hansuja-btn-light:hover {

    color:
        var(--hansuja-dark-green);

    background:
        #ffffff;
}


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

.about-final-cta {

    padding:
        100px 0;

    background:
        #f5f7f3;
}


.about-final-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        55px 60px;

    border-radius:
        30px;

    background:
        #ffffff;

    box-shadow:
        0 20px 60px
        rgba(14,54,34,.07);
}


.about-final-box h2 {

    margin:
        15px 0 0;

    color:
        var(--hansuja-dark-green);

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

    font-weight:
        800;

    line-height:
        .95;

    letter-spacing:
        -.055em;
}


.about-final-box h2 span {

    color:
        var(--hansuja-green);
}


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

@media (max-width: 991.98px) {

    .about-hero-content {

        padding-right:
            0;

        margin-bottom:
            45px;
    }


    .about-hero-visual {

        height:
            500px;
    }


    .about-story-content {

        padding-left:
            0;
    }


    .about-values-heading {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .about-process-line {

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


    .about-process-line::before {

        display:
            none;
    }


    .about-quality-content {

        padding:
            60px 30px;
    }

}


@media (max-width: 767.98px) {

    .about-page-hero {

        padding:
            75px 0 80px;
    }


    .about-hero-content h1 {

        font-size:
            clamp(3rem,14vw,4.5rem);
    }


    .about-hero-buttons {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            18px;
    }


    .about-hero-visual {

        height:
            420px;

        padding:
            0;
    }


    .about-story {

        padding:
            80px 0;
    }


    .about-story-images {

        min-height:
            470px;

        padding:
            0 35px 40px 0;
    }


    .about-story-main {

        height:
            430px;
    }


    .about-story-small {

        width:
            165px;

        height:
            140px;
    }


    .about-story-number {

        left:
            -5px;
    }


    .about-story-content h2 {

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


    .about-values {

        padding:
            80px 0;
    }


    .about-value {

        min-height:
            220px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(22,93,61,.10);
    }


    .about-process {

        padding:
            80px 0;
    }


    .about-process-line {

        grid-template-columns:
            1fr;
    }


    .process-image {

        height:
            250px;
    }


    .about-quality-image {

        height:
            420px;
    }


    .quality-points {

        grid-template-columns:
            1fr;
    }


    .about-final-cta {

        padding:
            70px 0;
    }


    .about-final-box {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            35px 25px;
    }

}
/* =========================================================
   PRODUCTS PAGE
========================================================= */


/* =========================================================
   PRODUCTS HERO
========================================================= */

.products-page-hero {

    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background:
        #f5f1df;
}


.products-hero-grid {

    display: grid;

    grid-template-columns:
        1fr 480px;

    align-items: center;

    gap: 70px;

    min-height: 570px;
}


.products-hero-content {

    max-width:
        680px;
}


.products-hero-content h1 {

    margin:
        20px 0 25px;

    color:
        var(--hansuja-dark-green);

    font-size:
        clamp(3.5rem,6vw,6rem);

    font-weight:
        800;

    line-height:
        .91;

    letter-spacing:
        -.07em;
}


.products-hero-content h1 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.products-hero-content > p {

    max-width:
        570px;

    color:
        var(--hansuja-muted);

    font-size:
        14px;

    line-height:
        1.8;
}


.products-hero-points {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        28px;
}


.products-hero-points span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        10px 14px;

    border-radius:
        50px;

    color:
        var(--hansuja-dark-green);

    background:
        #ffffff;

    font-size:
        9px;

    font-weight:
        800;

    box-shadow:
        0 8px 25px
        rgba(20,60,40,.06);
}


.products-hero-points i {

    color:
        var(--hansuja-gold);

    font-size:
        13px;
}


/* =========================================================
   HERO PRODUCT
========================================================= */

.products-hero-image {

    position:
        relative;

    display:
        flex;

    justify-content:
        center;

    height:
        550px;
}


.products-hero-circle {

    position:
        absolute;

    width:
        510px;

    height:
        510px;

    top:
        20px;

    border-radius:
        50%;

    background:
        var(--hansuja-green);

    box-shadow:
        0 35px 80px
        rgba(7,50,28,.18);
}


.products-hero-image img {

    position:
        relative;

    z-index:
        2;

    width:
        350px;

    height:
        510px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 30px 30px
            rgba(0,0,0,.20)
        );
}


.products-hero-floating {

    position:
        absolute;

    z-index:
        4;

    right:
        5px;

    bottom:
        70px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        105px;

    height:
        105px;

    border-radius:
        50%;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

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


.products-hero-floating span {

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.products-hero-floating strong {

    margin-top:
        3px;

    font-size:
        26px;

    font-weight:
        800;
}


/* =========================================================
   FEATURED PRODUCT
========================================================= */

.featured-product {

    padding:
        130px 0;

    background:
        #ffffff;
}


.featured-product-wrapper {

    display:
        grid;

    grid-template-columns:
        52% 48%;

    align-items:
        center;

    min-height:
        650px;

    overflow:
        hidden;

    border-radius:
        35px;

    background:
        #f4f1df;
}


.featured-product-image {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        650px;

    overflow:
        hidden;

    background:
        var(--hansuja-green);
}


.featured-product-bg {

    position:
        absolute;

    width:
        550px;

    height:
        550px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.06);
}


.featured-product-image img {

    position:
        relative;

    z-index:
        2;

    width:
        380px;

    height:
        570px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 35px 30px
            rgba(0,0,0,.30)
        );
}


.featured-product-stamp {

    position:
        absolute;

    z-index:
        5;

    left:
        50px;

    bottom:
        45px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        105px;

    height:
        105px;

    border:
        2px solid
        var(--hansuja-gold);

    border-radius:
        50%;

    color:
        var(--hansuja-dark-green);

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


.featured-product-stamp span {

    font-size:
        30px;

    font-weight:
        800;
}


.featured-product-stamp small {

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


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

.featured-product-content {

    padding:
        60px 65px;
}


.product-number {

    color:
        var(--hansuja-gold);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .18em;
}


.product-category {

    margin-top:
        20px;

    color:
        var(--hansuja-green);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .16em;
}


.featured-product-content h2 {

    margin:
        15px 0 20px;

    color:
        var(--hansuja-dark-green);

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

    font-weight:
        800;

    line-height:
        .94;

    letter-spacing:
        -.06em;
}


.featured-product-content h2 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.featured-product-intro {

    max-width:
        500px;

    color:
        var(--hansuja-muted);

    font-size:
        13px;

    line-height:
        1.8;
}


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

.product-feature-list {

    display:
        grid;

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

    gap:
        12px;

    margin:
        30px 0;
}


.product-feature-list > div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        13px;

    border:
        1px solid
        rgba(22,93,61,.08);

    border-radius:
        15px;

    background:
        rgba(255,255,255,.65);
}


.product-feature-icon {

    display:
        grid;

    place-items:
        center;

    width:
        36px;

    height:
        36px;

    flex-shrink:
        0;

    border-radius:
        10px;

    color:
        var(--hansuja-dark-green);

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


.product-feature-list strong,
.product-feature-list span {

    display:
        block;
}


.product-feature-list strong {

    margin-bottom:
        3px;

    color:
        var(--hansuja-dark-green);

    font-size:
        9px;
}


.product-feature-list div > div span {

    color:
        var(--hansuja-muted);

    font-size:
        10px;
}


/* =========================================================
   COLLECTION
========================================================= */

.product-collection {

    padding:
        120px 0;

    background:
        #f5f7f3;
}


.product-collection-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        50px;
}


.product-collection-heading h2 {

    margin:
        18px 0 0;

    color:
        var(--hansuja-dark-green);

    font-size:
        clamp(3rem,5vw,5rem);

    font-weight:
        800;

    line-height:
        .94;

    letter-spacing:
        -.06em;
}


.product-collection-heading h2 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.product-collection-heading > p {

    max-width:
        380px;

    margin:
        0;

    color:
        var(--hansuja-muted);

    font-size:
        11px;

    line-height:
        1.8;
}


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

.product-page-card {

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        rgba(22,93,61,.08);

    border-radius:
        25px;

    background:
        #ffffff;

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


.product-page-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 25px 50px
        rgba(20,60,40,.10);
}


.product-page-image {

    position:
        relative;

    height:
        350px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #eeebd7;
}


.product-page-image img {

    width:
        245px;

    height:
        330px;

    object-fit:
        contain;

    transition:
        transform .5s ease;
}


.product-page-card:hover
.product-page-image img {

    transform:
        scale(1.04);
}


.product-card-tag {

    position:
        absolute;

    top:
        16px;

    left:
        16px;

    padding:
        7px 10px;

    border-radius:
        50px;

    color:
        #ffffff;

    background:
        var(--hansuja-dark-green);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.product-card-arrow {

    position:
        absolute;

    right:
        16px;

    bottom:
        16px;

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    opacity:
        0;

    transform:
        translateY(5px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.product-page-card:hover
.product-card-arrow {

    opacity:
        1;

    transform:
        translateY(0);
}


.product-page-content {

    padding:
        22px;
}


.product-page-content > span:first-child {

    color:
        var(--hansuja-green);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .13em;
}


.product-page-content h3 {

    margin:
        10px 0 7px;

    color:
        var(--hansuja-dark-green);

    font-size:
        17px;

    font-weight:
        800;

    line-height:
        1.25;
}


.product-page-content p {

    margin:
        0 0 17px;

    color:
        var(--hansuja-muted);

    font-size:
        10px;
}


.product-page-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--hansuja-dark-green);

    font-size:
        9px;

    font-weight:
        800;
}


.product-page-link:hover {

    color:
        var(--hansuja-green);
}


.product-page-link.disabled {

    color:
        #a4aca6;

    cursor:
        default;
}


/* =========================================================
   COMING SOON
========================================================= */

.coming-soon-visual {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        170px;

    height:
        230px;

    border:
        2px dashed
        rgba(22,93,61,.22);

    border-radius:
        20px;

    color:
        rgba(22,93,61,.35);
}


.coming-soon-visual i {

    margin-bottom:
        15px;

    font-size:
        42px;
}


.coming-soon-visual span {

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


/* =========================================================
   PRODUCT PROMISE
========================================================= */

.product-promise {

    padding:
        125px 0;

    background:
        #ffffff;
}


.product-promise-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    overflow:
        hidden;

    border-radius:
        35px;

    background:
        var(--hansuja-dark-green);
}


.product-promise-image {

    min-height:
        600px;
}


.product-promise-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.product-promise-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        70px;
}


.product-promise-content h2 {

    margin:
        18px 0 25px;

    color:
        #ffffff;

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

    font-weight:
        800;

    line-height:
        .95;

    letter-spacing:
        -.06em;
}


.product-promise-content h2 span {

    display:
        block;

    color:
        var(--hansuja-gold);
}


.product-promise-content > p {

    max-width:
        500px;

    color:
        rgba(255,255,255,.62);

    font-size:
        13px;

    line-height:
        1.8;
}


.promise-list {

    margin-top:
        30px;
}


.promise-list div {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}


.promise-list span {

    color:
        var(--hansuja-gold);

    font-size:
        9px;

    font-weight:
        800;
}


.promise-list strong {

    color:
        #ffffff;

    font-size:
        11px;
}


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

.products-final-cta {

    padding:
        100px 0;

    background:
        #f5f7f3;
}


.products-final-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        55px 60px;

    border-radius:
        30px;

    background:
        #ffffff;

    box-shadow:
        0 20px 60px
        rgba(14,54,34,.07);
}


.products-final-box h2 {

    margin:
        15px 0 0;

    color:
        var(--hansuja-dark-green);

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

    font-weight:
        800;

    line-height:
        .95;

    letter-spacing:
        -.06em;
}


.products-final-box h2 span {

    color:
        var(--hansuja-green);
}


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

@media (max-width: 991.98px) {

    .products-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .products-hero-image {

        height:
            500px;
    }


    .featured-product-wrapper {

        grid-template-columns:
            1fr;
    }


    .featured-product-image {

        height:
            550px;
    }


    .product-promise-grid {

        grid-template-columns:
            1fr;
    }


    .product-promise-image {

        height:
            500px;

        min-height:
            0;
    }


    .product-collection-heading {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


@media (max-width: 767.98px) {

    .products-page-hero {

        padding:
            70px 0;
    }


    .products-hero-content h1 {

        font-size:
            clamp(3rem,14vw,4.5rem);
    }


    .products-hero-image {

        height:
            450px;
    }


    .products-hero-circle {

        width:
            390px;

        height:
            390px;
    }


    .products-hero-image img {

        width:
            275px;

        height:
            410px;
    }


    .products-hero-floating {

        right:
            0;

        bottom:
            35px;

        width:
            85px;

        height:
            85px;
    }


    .products-hero-floating strong {

        font-size:
            21px;
    }


    .featured-product {

        padding:
            80px 0;
    }


    .featured-product-image {

        height:
            470px;
    }


    .featured-product-image img {

        width:
            290px;

        height:
            420px;
    }


    .featured-product-content {

        padding:
            40px 25px;
    }


    .product-feature-list {

        grid-template-columns:
            1fr;
    }


    .product-collection {

        padding:
            80px 0;
    }


    .product-page-image {

        height:
            320px;
    }


    .product-promise {

        padding:
            80px 0;
    }


    .product-promise-content {

        padding:
            45px 25px;
    }


    .products-final-cta {

        padding:
            70px 0;
    }


    .products-final-box {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            35px 25px;
    }

}
/* =========================================================
   BLOG PAGE
========================================================= */


/* =========================================================
   BLOG HERO
========================================================= */

.blog-page-hero {

    padding:
        110px 0 85px;

    background:
        #f5f1df;
}


.blog-page-hero h1 {

    margin:
        18px 0 0;

    color:
        var(--hansuja-dark-green);

    font-size:
        clamp(3.5rem,7vw,7rem);

    font-weight:
        800;

    line-height:
        .88;

    letter-spacing:
        -.075em;
}


.blog-page-hero h1 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.blog-hero-description {

    max-width:
        380px;

    margin:
        0 0 5px auto;

    color:
        var(--hansuja-muted);

    font-size:
        13px;

    line-height:
        1.8;
}


/* =========================================================
   FEATURED BLOG
========================================================= */

.featured-blog {

    padding:
        90px 0 60px;

    background:
        #f5f1df;
}


.featured-blog-card {

    display:
        grid;

    grid-template-columns:
        58% 42%;

    min-height:
        530px;

    overflow:
        hidden;

    border-radius:
        35px;

    background:
        var(--hansuja-dark-green);

    box-shadow:
        0 30px 80px
        rgba(5,48,29,.14);
}


.featured-blog-image {

    position:
        relative;

    min-height:
        530px;

    overflow:
        hidden;
}


.featured-blog-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            transparent 55%,
            rgba(5,48,29,.5)
        );
}


.featured-blog-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .7s ease;
}


.featured-blog-card:hover
.featured-blog-image img {

    transform:
        scale(1.04);
}


.featured-blog-badge {

    position:
        absolute;

    z-index:
        2;

    top:
        25px;

    left:
        25px;

    padding:
        9px 14px;

    border-radius:
        50px;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .13em;
}


.featured-blog-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        55px;
}


.blog-meta {

    display:
        flex;

    gap:
        15px;

    margin-bottom:
        18px;
}


.blog-meta span {

    color:
        var(--hansuja-gold);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .13em;
}


.blog-meta span + span {

    padding-left:
        15px;

    border-left:
        1px solid
        rgba(255,255,255,.20);
}


.featured-blog-content h2 {

    margin:
        0 0 22px;

    color:
        #ffffff;

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

    font-weight:
        800;

    line-height:
        .98;

    letter-spacing:
        -.055em;
}


.featured-blog-content p {

    max-width:
        460px;

    margin:
        0 0 30px;

    color:
        rgba(255,255,255,.60);

    font-size:
        13px;

    line-height:
        1.8;
}


.featured-blog-content .hansuja-btn {

    align-self:
        flex-start;

    color:
        var(--hansuja-dark-green);

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


.featured-blog-content .hansuja-btn:hover {

    color:
        var(--hansuja-dark-green);

    background:
        #ffffff;
}


/* =========================================================
   CATEGORIES
========================================================= */

.blog-categories {

    padding:
        25px 0 80px;

    background:
        #f5f1df;
}


.blog-category-wrapper {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.blog-filter {

    padding:
        12px 20px;

    border:
        1px solid
        rgba(22,93,61,.12);

    border-radius:
        50px;

    color:
        var(--hansuja-muted);

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        all .25s ease;
}


.blog-filter:hover {

    color:
        var(--hansuja-dark-green);

    border-color:
        var(--hansuja-green);
}


.blog-filter.active {

    color:
        #ffffff;

    border-color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-dark-green);
}


/* =========================================================
   LATEST BLOG
========================================================= */

.latest-blog {

    padding:
        120px 0;

    background:
        #ffffff;
}


.latest-blog-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        55px;
}


.latest-blog-heading h2 {

    margin:
        18px 0 0;

    color:
        var(--hansuja-dark-green);

    font-size:
        clamp(3rem,5vw,5.2rem);

    font-weight:
        800;

    line-height:
        .92;

    letter-spacing:
        -.065em;
}


.latest-blog-heading h2 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.latest-blog-heading > p {

    max-width:
        360px;

    margin:
        0;

    color:
        var(--hansuja-muted);

    font-size:
        11px;

    line-height:
        1.8;
}


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

.blog-card {

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        rgba(22,93,61,.08);

    border-radius:
        25px;

    background:
        #ffffff;

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


.blog-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 25px 55px
        rgba(10,50,30,.10);
}


.blog-card-image {

    position:
        relative;

    height:
        285px;

    overflow:
        hidden;

    background:
        #e9eee9;
}


.blog-card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .6s ease;
}


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

    transform:
        scale(1.06);
}


.blog-card-image > span {

    position:
        absolute;

    z-index:
        2;

    top:
        15px;

    left:
        15px;

    padding:
        7px 11px;

    border-radius:
        50px;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.blog-card-arrow {

    position:
        absolute;

    z-index:
        3;

    right:
        15px;

    bottom:
        15px;

    display:
        grid;

    place-items:
        center;

    width:
        43px;

    height:
        43px;

    border-radius:
        50%;

    color:
        var(--hansuja-dark-green);

    background:
        #ffffff;

    opacity:
        0;

    transform:
        translateY(7px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.blog-card:hover
.blog-card-arrow {

    opacity:
        1;

    transform:
        translateY(0);
}


.blog-card-content {

    padding:
        25px;
}


.blog-card-meta {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        13px;
}


.blog-card-meta span {

    color:
        var(--hansuja-green);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .11em;
}


.blog-card-meta span:last-child {

    color:
        #9ba49e;
}


.blog-card-content h3 {

    margin:
        0 0 12px;

    color:
        var(--hansuja-dark-green);

    font-size:
        19px;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        -.025em;
}


.blog-card-content p {

    min-height:
        57px;

    margin:
        0 0 20px;

    color:
        var(--hansuja-muted);

    font-size:
        10px;

    line-height:
        1.75;
}


.blog-read-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--hansuja-dark-green);

    font-size:
        9px;

    font-weight:
        800;
}


.blog-read-link i {

    transition:
        transform .2s ease;
}


.blog-read-link:hover {

    color:
        var(--hansuja-green);
}


.blog-read-link:hover i {

    transform:
        translateX(4px);
}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.blog-item {

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.blog-item-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   LOAD MORE
========================================================= */

.blog-load-more {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        55px;
}


.hansuja-outline-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        14px 22px;

    border:
        1px solid
        var(--hansuja-green);

    border-radius:
        50px;

    color:
        var(--hansuja-dark-green);

    background:
        transparent;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        all .25s ease;
}


.hansuja-outline-btn:hover {

    color:
        #ffffff;

    background:
        var(--hansuja-dark-green);
}


/* =========================================================
   NEWSLETTER
========================================================= */

.blog-newsletter {

    padding:
        100px 0;

    background:
        #f5f7f3;
}


.blog-newsletter-box {

    display:
        grid;

    grid-template-columns:
        80px 1fr 390px;

    align-items:
        center;

    gap:
        30px;

    padding:
        50px;

    border-radius:
        30px;

    background:
        var(--hansuja-dark-green);
}


.newsletter-icon {

    display:
        grid;

    place-items:
        center;

    width:
        65px;

    height:
        65px;

    border-radius:
        20px;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    font-size:
        25px;
}


.newsletter-content .section-label {

    color:
        var(--hansuja-gold);
}


.newsletter-content h2 {

    margin:
        12px 0 10px;

    color:
        #ffffff;

    font-size:
        clamp(2rem,3vw,3rem);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -.05em;
}


.newsletter-content h2 span {

    color:
        var(--hansuja-gold);
}


.newsletter-content p {

    margin:
        0;

    color:
        rgba(255,255,255,.55);

    font-size:
        10px;
}


.newsletter-form > div {

    display:
        flex;

    padding:
        5px;

    border-radius:
        50px;

    background:
        #ffffff;
}


.newsletter-form input {

    width:
        100%;

    min-width:
        0;

    padding:
        0 16px;

    border:
        0;

    outline:
        0;

    color:
        var(--hansuja-dark-green);

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        11px;
}


.newsletter-form button {

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    border:
        0;

    border-radius:
        50%;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    cursor:
        pointer;
}


.newsletter-form small {

    display:
        block;

    margin:
        8px 15px 0;

    color:
        var(--hansuja-gold);

    font-size:
        9px;
}


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

@media (max-width: 991.98px) {

    .featured-blog-card {

        grid-template-columns:
            1fr;
    }


    .featured-blog-image {

        min-height:
            420px;
    }


    .featured-blog-content {

        padding:
            45px;
    }


    .latest-blog-heading {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .blog-newsletter-box {

        grid-template-columns:
            70px 1fr;

    }


    .newsletter-form {

        grid-column:
            1 / -1;
    }

}


@media (max-width: 767.98px) {

    .blog-page-hero {

        padding:
            75px 0 60px;
    }


    .blog-page-hero h1 {

        font-size:
            clamp(3rem,14vw,4.5rem);
    }


    .blog-hero-description {

        margin:
            25px 0 0;
    }


    .featured-blog {

        padding:
            60px 0 25px;
    }


    .featured-blog-image {

        min-height:
            330px;
    }


    .featured-blog-content {

        padding:
            35px 25px;
    }


    .featured-blog-content h2 {

        font-size:
            2.5rem;
    }


    .blog-categories {

        padding:
            20px 0 60px;
    }


    .blog-category-wrapper {

        justify-content:
            flex-start;

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        padding-bottom:
            8px;
    }


    .blog-filter {

        white-space:
            nowrap;
    }


    .latest-blog {

        padding:
            80px 0;
    }


    .latest-blog-heading h2 {

        font-size:
            clamp(3rem,13vw,4rem);
    }


    .blog-card-image {

        height:
            260px;
    }


    .blog-newsletter {

        padding:
            70px 0;
    }


    .blog-newsletter-box {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            35px 25px;
    }


    .newsletter-form {

        width:
            100%;
    }

}
/* =========================================================
   CONTACT PAGE
========================================================= */


/* =========================================================
   CONTACT HERO
========================================================= */

.contact-page-hero {

    padding:
        90px 0;

    background:
        #f5f1df;

    overflow:
        hidden;
}


.contact-hero-grid {

    display:
        grid;

    grid-template-columns:
        1fr 500px;

    align-items:
        center;

    gap:
        80px;

    min-height:
        580px;
}


.contact-hero-content {

    max-width:
        680px;
}


.contact-hero-content h1 {

    margin:
        20px 0 25px;

    color:
        var(--hansuja-dark-green);

    font-size:
        clamp(3.5rem,6vw,6.3rem);

    font-weight:
        800;

    line-height:
        .9;

    letter-spacing:
        -.075em;
}


.contact-hero-content h1 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.contact-hero-content > p {

    max-width:
        520px;

    color:
        var(--hansuja-muted);

    font-size:
        14px;

    line-height:
        1.85;
}


.contact-hero-note {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        35px;

    padding:
        12px 17px;

    border:
        1px solid
        rgba(22,93,61,.12);

    border-radius:
        50px;

    color:
        var(--hansuja-dark-green);

    background:
        rgba(255,255,255,.65);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .13em;
}


.contact-hero-note i {

    color:
        var(--hansuja-gold);

    font-size:
        15px;
}


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

.contact-hero-image {

    position:
        relative;

    height:
        540px;
}


.contact-hero-image::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        -40px;

    width:
        460px;

    height:
        460px;

    border-radius:
        50%;

    background:
        var(--hansuja-green);
}


.contact-hero-image img {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        35px;

    box-shadow:
        0 30px 70px
        rgba(5,48,29,.18);
}


.contact-hero-card {

    position:
        absolute;

    z-index:
        4;

    left:
        -30px;

    bottom:
        25px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        20px 25px;

    border-radius:
        20px;

    color:
        #ffffff;

    background:
        var(--hansuja-dark-green);

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


.contact-hero-card span {

    color:
        var(--hansuja-gold);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .16em;
}


.contact-hero-card strong {

    font-size:
        15px;

    line-height:
        1.2;
}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-information {

    padding:
        120px 0;

    background:
        #ffffff;
}


.contact-information-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        50px;
}


.contact-information-heading h2 {

    margin:
        18px 0 0;

    color:
        var(--hansuja-dark-green);

    font-size:
        clamp(3rem,5vw,5rem);

    font-weight:
        800;

    line-height:
        .92;

    letter-spacing:
        -.065em;
}


.contact-information-heading h2 span {

    color:
        var(--hansuja-green);
}


.contact-information-heading > p {

    max-width:
        360px;

    margin:
        0;

    color:
        var(--hansuja-muted);

    font-size:
        11px;

    line-height:
        1.8;
}


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

.contact-info-card {

    height:
        100%;

    min-height:
        350px;

    padding:
        32px;

    border:
        1px solid
        rgba(22,93,61,.08);

    border-radius:
        25px;

    background:
        #ffffff;

    box-shadow:
        0 12px 40px
        rgba(10,50,30,.04);

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


.contact-info-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 25px 55px
        rgba(10,50,30,.10);
}


.contact-info-icon {

    display:
        grid;

    place-items:
        center;

    width:
        52px;

    height:
        52px;

    margin-bottom:
        35px;

    border-radius:
        15px;

    color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-gold);

    font-size:
        20px;
}


.contact-info-label {

    color:
        var(--hansuja-green);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


.contact-info-card h3 {

    margin:
        12px 0 12px;

    color:
        var(--hansuja-dark-green);

    font-size:
        21px;

    font-weight:
        800;

    line-height:
        1.2;
}


.contact-info-card p {

    color:
        var(--hansuja-muted);

    font-size:
        11px;

    line-height:
        1.75;
}


.contact-info-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        10px;

    color:
        var(--hansuja-dark-green);

    font-size:
        9px;

    font-weight:
        800;
}


.contact-info-link:hover {

    color:
        var(--hansuja-green);
}


/* DARK CARD */

.contact-info-card-dark {

    color:
        #ffffff;

    border-color:
        var(--hansuja-dark-green);

    background:
        var(--hansuja-dark-green);
}


.contact-info-card-dark h3 {

    color:
        #ffffff;
}


.contact-info-card-dark p {

    color:
        rgba(255,255,255,.58);
}


.contact-info-card-dark .contact-info-link {

    color:
        var(--hansuja-gold);
}


/* =========================================================
   ENQUIRY
========================================================= */

.contact-enquiry {

    padding:
        120px 0;

    background:
        #f5f7f3;
}


.contact-form-wrapper {

    display:
        grid;

    grid-template-columns:
        40% 60%;

    overflow:
        hidden;

    border-radius:
        35px;

    background:
        var(--hansuja-dark-green);

    box-shadow:
        0 30px 80px
        rgba(5,48,29,.12);
}


.contact-form-intro {

    padding:
        70px 50px;
}


.contact-form-intro .section-label {

    color:
        var(--hansuja-gold);
}


.contact-form-intro h2 {

    margin:
        18px 0 25px;

    color:
        #ffffff;

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

    font-weight:
        800;

    line-height:
        .94;

    letter-spacing:
        -.06em;
}


.contact-form-intro h2 span {

    display:
        block;

    color:
        var(--hansuja-gold);
}


.contact-form-intro > p {

    max-width:
        400px;

    color:
        rgba(255,255,255,.60);

    font-size:
        12px;

    line-height:
        1.8;
}


.contact-form-points {

    margin-top:
        35px;
}


.contact-form-points div {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        14px;

    color:
        rgba(255,255,255,.78);

    font-size:
        10px;
}


.contact-form-points i {

    color:
        var(--hansuja-gold);

    font-size:
        14px;
}


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

.contact-form-box {

    padding:
        55px;

    background:
        #ffffff;
}


.contact-form-box label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--hansuja-dark-green);

    font-size:
        9px;

    font-weight:
        800;
}


.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea {

    width:
        100%;

    padding:
        13px 15px;

    border:
        1px solid
        #dfe6df;

    border-radius:
        10px;

    outline:
        0;

    color:
        var(--hansuja-dark-green);

    background:
        #fafbf9;

    font-family:
        inherit;

    font-size:
        11px;

    transition:
        border .2s ease,
        box-shadow .2s ease;
}


.contact-form-box input:focus,
.contact-form-box select:focus,
.contact-form-box textarea:focus {

    border-color:
        var(--hansuja-green);

    box-shadow:
        0 0 0 3px
        rgba(35,91,56,.07);
}


.contact-form-box textarea {

    resize:
        vertical;

    min-height:
        135px;
}


.contact-checkbox {

    display:
        flex !important;

    align-items:
        flex-start;

    gap:
        9px;

    cursor:
        pointer;
}


.contact-checkbox input {

    width:
        15px !important;

    height:
        15px;

    margin-top:
        1px;

    accent-color:
        var(--hansuja-green);
}


.contact-checkbox span {

    color:
        var(--hansuja-muted);

    font-size:
        9px;

    font-weight:
        400;
}


.contact-form-message {

    display:
        none;

    margin-top:
        18px;

    padding:
        12px 15px;

    border-radius:
        10px;

    color:
        #21613d;

    background:
        #e8f5eb;

    font-size:
        10px;
}


.contact-form-message.show {

    display:
        block;
}


/* =========================================================
   MAP
========================================================= */

.contact-map-section {

    padding:
        120px 0;

    background:
        #ffffff;
}


.contact-map-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    margin-bottom:
        40px;
}


.contact-map-header h2 {

    margin:
        18px 0 0;

    color:
        var(--hansuja-dark-green);

    font-size:
        clamp(3rem,5vw,5rem);

    font-weight:
        800;

    line-height:
        .9;

    letter-spacing:
        -.065em;
}


.contact-map-header h2 span {

    color:
        var(--hansuja-green);
}


.contact-map-box {

    height:
        470px;

    overflow:
        hidden;

    border-radius:
        30px;

    border:
        8px solid
        #f5f7f3;

    box-shadow:
        0 20px 60px
        rgba(10,50,30,.08);
}


.contact-map-box iframe {

    width:
        100%;

    height:
        100%;

    border:
        0;
}


/* =========================================================
   FAQ
========================================================= */

.contact-faq {

    padding:
        120px 0;

    background:
        #f5f7f3;
}


.contact-faq h2 {

    margin:
        18px 0 20px;

    color:
        var(--hansuja-dark-green);

    font-size:
        clamp(3rem,5vw,5rem);

    font-weight:
        800;

    line-height:
        .92;

    letter-spacing:
        -.065em;
}


.contact-faq h2 span {

    display:
        block;

    color:
        var(--hansuja-green);
}


.contact-faq > .container
.row > div:first-child > p {

    max-width:
        400px;

    color:
        var(--hansuja-muted);

    font-size:
        12px;

    line-height:
        1.8;
}


.hansuja-accordion .accordion-item {

    margin-bottom:
        10px;

    border:
        0;

    border-radius:
        15px !important;

    overflow:
        hidden;

    background:
        #ffffff;
}


.hansuja-accordion .accordion-button {

    padding:
        20px;

    color:
        var(--hansuja-dark-green);

    background:
        #ffffff;

    box-shadow:
        none;

    font-size:
        12px;

    font-weight:
        800;
}


.hansuja-accordion .accordion-button:not(.collapsed) {

    color:
        var(--hansuja-green);

    background:
        #ffffff;

}


.hansuja-accordion .accordion-button::after {

    background-size:
        13px;
}


.hansuja-accordion .accordion-body {

    padding:
        0 20px 20px;

    color:
        var(--hansuja-muted);

    font-size:
        11px;

    line-height:
        1.8;
}


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

.contact-final-cta {

    padding:
        100px 0;

    background:
        #ffffff;
}


.contact-final-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        55px 60px;

    border-radius:
        30px;

    background:
        var(--hansuja-green);

    box-shadow:
        0 25px 60px
        rgba(20,70,40,.14);
}


.contact-final-box .section-label {

    color:
        var(--hansuja-gold);
}


.contact-final-box h2 {

    margin:
        15px 0 0;

    color:
        #ffffff;

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

    font-weight:
        800;

    line-height:
        .95;

    letter-spacing:
        -.06em;
}


.contact-final-box h2 span {

    color:
        var(--hansuja-gold);
}


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

@media (max-width: 991.98px) {

    .contact-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .contact-hero-image {

        height:
            500px;
    }


    .contact-information-heading {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .contact-form-wrapper {

        grid-template-columns:
            1fr;
    }


    .contact-form-intro {

        padding:
            55px;
    }


    .contact-map-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            25px;
    }

}


@media (max-width: 767.98px) {

    .contact-page-hero {

        padding:
            70px 0;
    }


    .contact-hero-content h1 {

        font-size:
            clamp(3rem,14vw,4.5rem);
    }


    .contact-hero-image {

        height:
            420px;
    }


    .contact-hero-image::before {

        width:
            350px;

        height:
            350px;
    }


    .contact-hero-card {

        left:
            10px;

        bottom:
            20px;
    }


    .contact-information {

        padding:
            80px 0;
    }


    .contact-information-heading h2 {

        font-size:
            clamp(3rem,13vw,4rem);
    }


    .contact-info-card {

        min-height:
            auto;

        padding:
            27px;
    }


    .contact-enquiry {

        padding:
            80px 0;
    }


    .contact-form-intro {

        padding:
            45px 25px;
    }


    .contact-form-box {

        padding:
            30px 22px;
    }


    .contact-map-section {

        padding:
            80px 0;
    }


    .contact-map-box {

        height:
            380px;

        border-width:
            5px;
    }


    .contact-faq {

        padding:
            80px 0;
    }


    .contact-final-cta {

        padding:
            70px 0;
    }


    .contact-final-box {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            40px 25px;
    }

}