:root {

    --green: #176b3a;
    --green-dark: #0d4428;
    --green-deep: #082d1c;

    --gold: #d89b35;

    --cream: #f6f4ed;

    --paper: #ffffff;

    --ink: #17201b;

    --muted: #68736d;

    --line: #dfe6e1;

    --shadow:
        0 20px 50px rgba(9,45,28,.10);

    --radius: 20px;
}


/* RESET */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}


body.modal-open {
    overflow: hidden;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
input {
    font: inherit;
}


img {
    display: block;
    max-width: 100%;
}


.container {

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin: auto;
}



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

.announcement {

    background:
        var(--green-deep);

    color:
        #dbe9df;

    font-size:
        16px;
}


.announcement-inner {

    min-height:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;
}


.top-links {

    display:
        flex;

    gap:
        24px;
}


.top-links a:hover {
    color: white;
}



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

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

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

    backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid
        rgba(20,70,42,.08);

    transition:
        .25s;
}


.site-header.scrolled {

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.07);
}


.nav-wrap {

    height:
        82px;

    display:
        flex;

    align-items:
        center;

    gap:
        28px;
}


.brand {
    margin-right:
        auto;
}


.brand img {
    width:
        82px;
}


.main-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        24px;

    font-size:
        13px;

    font-weight:
        700;
}


.main-nav > a,
.nav-dropdown > button {

    color:
        #26322b;

    transition:
        .2s;
}


.main-nav > a:hover,
.nav-dropdown > button:hover {

    color:
        var(--green);
}



/* DROPDOWN */

.nav-dropdown {
    position:
        relative;
}


.nav-dropdown > button {

    border:
        0;

    background:
        none;

    cursor:
        pointer;

    font-weight:
        700;

    display:
        flex;

    gap:
        6px;
}


.dropdown-menu {

    position:
        absolute;

    top:
        calc(100% + 18px);

    left:
        -15px;

    background:
        white;

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

    box-shadow:
        var(--shadow);

    border-radius:
        12px;

    min-width:
        220px;

    padding:
        9px;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(7px);

    transition:
        .2s;
}


.nav-dropdown:hover
.dropdown-menu {

    opacity:
        1;

    visibility:
        visible;

    transform:
        none;
}


.dropdown-menu a {

    display:
        block;

    padding:
        10px 12px;

    border-radius:
        8px;

    font-size:
        13px;
}


.dropdown-menu a:hover {

    background:
        #f0f6f1;

    color:
        var(--green);
}



/* SEARCH */

.search-button {

    width:
        40px;

    height:
        40px;

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

    border-radius:
        50%;

    background:
        white;

    cursor:
        pointer;

    font-size:
        24px;

    color:
        var(--green);
}



/* MOBILE MENU */

.menu-toggle {

    display:
        none;

    background:
        none;

    border:
        0;

    width:
        42px;

    height:
        42px;

    cursor:
        pointer;
}


.menu-toggle span {

    display:
        block;

    width:
        24px;

    height:
        2px;

    background:
        var(--green);

    margin:
        5px auto;
}



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

.hero {
    height: min(730px, calc(100vh - 118px));
    min-height: 580px;

    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
}

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

    background-image: url("back 2.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 1;
    transition: background-image 0.6s ease-in-out;
}

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

    background: linear-gradient(
        90deg,
        rgba(4,36,21,.87),
        rgba(6,61,34,.60) 55%,
        rgba(5,43,25,.30)
    );
}

.hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        900px;
}


.eyebrow,
.section-kicker {

    display:
        inline-block;

    color:
        var(--gold);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .19em;

    margin-bottom:
        15px;
}


.hero h1 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            46px,
            6vw,
            78px
        );

    line-height:
        1.02;

    max-width:
        900px;

    margin-bottom:
        20px;
}


.hero p {

    font-size:
        clamp(
            17px,
            2vw,
            22px
        );

    max-width:
        760px;

    color:
        #e9f1eb;

    margin-bottom:
        32px;
}



/* BUTTON */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    border:
        0;

    padding:
        14px 22px;

    border-radius:
        6px;

    font-weight:
        800;

    font-size:
        13px;

    cursor:
        pointer;

    transition:
        .25s;
}


.btn-primary {

    background:
        var(--gold);

    color:
        #172018;
}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(216,155,53,.25);
}


.btn-light {

    background:
        white;

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


.btn-light:hover {

    transform:
        translateY(-3px);
}



/* =====================================
   SECTIONS
===================================== */

.section {

    padding:
        110px 0;
}



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

.intro-grid {

    display:
        grid;

    grid-template-columns:
        1.05fr .95fr;

    gap:
        90px;

    align-items:
        center;
}


.image-frame {

    position:
        relative;
}


.image-frame > img {

    width:
        100%;

    height:
        510px;

    object-fit:
        cover;

    border-radius:
        20px;
}


.image-badge {

    position:
        absolute;

    right:
        -24px;

    bottom:
        28px;

    background:
        var(--green);

    color:
        white;

    padding:
        18px 24px;

    border-radius:
        10px;

    box-shadow:
        var(--shadow);

    display:
        flex;

    flex-direction:
        column;
}


.image-badge strong {
    font-size:
        18px;
}


.image-badge span {

    font-size:
        11px;

    color:
        #dcebdd;
}


.intro-copy h2 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            38px,
            4.5vw,
            58px
        );

    line-height:
        1.08;

    margin-bottom:
        24px;
}


.intro-copy h2 em {

    font-style:
        normal;

    color:
        var(--green);
}


.intro-copy p {

    color:
        var(--muted);

    font-size:
        15px;

    margin-bottom:
        18px;
}


.intro-copy .lead {

    font-size:
        18px;

    color:
        #344139;
}


.text-link {

    display:
        inline-flex;

    gap:
        12px;

    color:
        var(--green);

    font-weight:
        800;

    font-size:
        13px;

    border-bottom:
        1px solid
        rgba(23,107,58,.35);

    padding-bottom:
        6px;

    margin-top:
        10px;
}



/* =====================================
   STATS
===================================== */

.stats {

    background:
        var(--green);

    color:
        white;
}


.stats-grid {

    display:
        grid;

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


.stats-grid > div {

    padding:
        36px 28px;

    border-right:
        1px solid
        rgba(255,255,255,.18);
}


.stats-grid strong {

    display:
        block;

    color:
        #bfe0c9;

    font-size:
        12px;

    margin-bottom:
        8px;
}


.stats-grid span {

    font-weight:
        700;

    font-size:
        14px;
}



/* =====================================
   NEWS
===================================== */

.news {

    background:
        var(--cream);
}


.section-heading {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        42px;
}


.section-heading h2 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        58px;

    line-height:
        1.08;
}


.news-grid {

    display:
        grid;

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

    gap:
        24px;
}


.news-card {

    background:
        white;

    border-radius:
        15px;

    overflow:
        hidden;

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

    transition:
        .3s;
}


.news-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow);
}


.card-image {

    height:
        235px;

    overflow:
        hidden;
}


.card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        .45s;
}


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

    transform:
        scale(1.06);
}


.card-body {

    padding:
        24px;
}


.tag {

    font-size:
        10px;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    font-weight:
        800;

    color:
        var(--gold);
}


.card-body h3 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        21px;

    line-height:
        1.3;

    margin:
        10px 0 18px;
}


.read {

    color:
        var(--green);

    font-size:
        12px;

    font-weight:
        800;
}


.featured {

    grid-column:
        span 2;
}


.featured .card-image {

    height:
        300px;
}


.featured .card-body h3 {

    font-size:
        28px;
}


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

.gallery-section {
    padding: 90px 7%;
    background: #f5f8f3;
    overflow: hidden;
}

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;
}

/* Gallery Text */

.gallery-content {
    max-width: 500px;
}

.gallery-kicker {
    display: inline-block;
    margin-bottom: 15px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #3d7a45;
}

.gallery-content h2 {
    margin: 0 0 20px;

    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.08;
    color: #173b24;
}

.gallery-content p {
    margin-bottom: 30px;

    font-size: 17px;
    line-height: 1.7;
    color: #5c665f;
}

/* Gallery Button */

.gallery-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    padding: 15px 24px;

    background: #24723a;
    color: white;

    text-decoration: none;
    font-size: 15px;
    font-weight: 700;

    border-radius: 50px;

    transition: all 0.3s ease;
}

.gallery-button span {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.gallery-button:hover {
    background: #174d28;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(23, 77, 40, 0.2);
}

.gallery-button:hover span {
    transform: translateX(5px);
}


/* ================================
   PHOTO COLLAGE
================================ */

.gallery-preview {
    position: relative;

    height: 500px;
    width: 100%;
}

.gallery-image {
    position: absolute;
    overflow: hidden;

    border-radius: 20px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);

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

.gallery-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.gallery-image:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);

    z-index: 10;
}

.gallery-image:hover img {
    transform: scale(1.08);
}


/* Individual Images */

.image-one {
    width: 55%;
    height: 290px;

    top: 0;
    left: 0;
}

.image-two {
    width: 42%;
    height: 210px;

    top: 30px;
    right: 0;
}

.image-three {
    width: 42%;
    height: 230px;

    bottom: 0;
    left: 10%;
}

.image-four {
    width: 45%;
    height: 260px;

    bottom: 10px;
    right: 0;
}


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

@media (max-width: 850px) {

    .gallery-section {
        padding: 70px 6%;
    }

    .gallery-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .gallery-content {
        max-width: 100%;
        text-align: center;
    }

    .gallery-button {
        justify-content: center;
    }

    .gallery-preview {
        height: 450px;
    }
}


@media (max-width: 550px) {

    .gallery-section {
        padding: 60px 5%;
    }

    .gallery-content h2 {
        font-size: 36px;
    }

    .gallery-content p {
        font-size: 15px;
    }

    .gallery-preview {
        height: 360px;
    }

    .image-one {
        width: 58%;
        height: 210px;
    }

    .image-two {
        width: 40%;
        height: 160px;
    }

    .image-three {
        width: 43%;
        height: 170px;
    }

    .image-four {
        width: 44%;
        height: 190px;
    }
}




/* =====================================
   RESOURCES
===================================== */
/*=====================================
    PRODUCTS SECTION
======================================*/

.resources{
    padding:80px 0;
    background:#f8faf8;
}

.resource-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:22px;
    margin-top:50px;
}

/* Card */

.resource-card{
    display:flex;
    align-items:center;
    gap:18px;

    position:relative;

    background:#fff;
    border-radius:18px;

    overflow:hidden;

    text-decoration:none;
    color:#222;

    padding:16px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.35s;
}

.resource-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,.12);
}

/* Image */

.resource-image{
    width:150px;
    min-width:150px;
    height:120px;

    overflow:hidden;

    border-radius:14px;
}

.resource-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.resource-card:hover img{
    transform:scale(1.08);
}

/* Content */

.resource-card h3{
    font-size:1.2rem;
    color:#14532d;
    margin-bottom:8px;
}

.resource-card p{
    font-size:.95rem;
    line-height:1.6;
    color:#555;
    margin-bottom:0;
}

/* Number */

.resource-number{
    position:absolute;
    top:12px;
    left:12px;

    width:32px;
    height:32px;

    background:#0f766e;
    color:#fff;

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

    border-radius:50%;

    font-size:.8rem;
    font-weight:700;
}

/* Icon */

.resource-icon{
    position:absolute;
    top:14px;
    right:18px;

    font-size:1.5rem;
}

/* Arrow */

.arrow{
    position:absolute;
    right:18px;
    bottom:18px;

    width:36px;
    height:36px;

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

    border-radius:50%;

    background:#14532d;
    color:#fff;

    font-size:18px;

    transition:.3s;
}

.resource-card:hover .arrow{
    transform:rotate(45deg);
    background:#16a34a;
}

/* Mobile */

@media(max-width:768px){

.resource-grid{
    grid-template-columns:1fr;
}

.resource-card{
    flex-direction:column;
    text-align:center;
}

.resource-image{
    width:100%;
    height:190px;
}

.resource-icon{
    right:15px;
}

.arrow{
    position:static;
    margin-top:15px;
}

}


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

.cta {

    padding:
        80px 0;

    background:
        var(--green-dark);

    color:
        white;
}


.cta-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;
}


.cta h2 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        52px;

    line-height:
        1.1;

    max-width:
        700px;
}



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

footer {

    background:
        #071c12;

    color:
        #aebdb3;
}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.2fr 1fr 1.2fr 1.2fr;

    gap:
        55px;

    padding:
        80px 0;
}


.footer-brand img {

    width:
        160px;

    background:
        white;

    padding:
        7px;

    border-radius:
        3px;

    margin-bottom:
        20px;
}


.footer-grid h3 {

    color:
        white;

    font-size:
        14px;

    margin-bottom:
        18px;
}


.footer-grid p,
.footer-grid a {

    display:
        block;

    font-size:
        12px;

    margin-bottom:
        10px;

    color:
        #aebdb3;
}


.footer-grid a:hover {

    color:
        white;
}


.socials {

    display:
        flex;

    gap:
        9px;

    margin-top:
        20px;
}


.socials a {

    width:
        34px;

    height:
        34px;

    border:
        1px solid
        #31513f;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;
}


.footer-bottom {

    border-top:
        1px solid
        #1c3828;

    padding:
        20px 0;
}


.footer-bottom .container {

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        11px;
}



/* =====================================
   SEARCH
===================================== */

.search-modal {

    position:
        fixed;

    inset:
        0;

    background:
        rgba(2,18,11,.82);

    backdrop-filter:
        blur(8px);

    z-index:
        300;

    display:
        grid;

    place-items:
        center;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .25s;

    padding:
        20px;
}


.search-modal.open {

    opacity:
        1;

    visibility:
        visible;
}


.search-panel {

    position:
        relative;

    background:
        white;

    width:
        min(720px,100%);

    padding:
        55px;

    border-radius:
        18px;
}


.search-panel h2 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        42px;

    margin-bottom:
        25px;
}


.search-panel form {

    display:
        flex;

    gap:
        10px;
}


.search-panel input {

    flex:
        1;

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

    border-radius:
        6px;

    padding:
        15px;

    outline:
        none;
}


.search-close {

    position:
        absolute;

    right:
        18px;

    top:
        15px;

    border:
        0;

    background:
        none;

    font-size:
        30px;

    cursor:
        pointer;
}

.gallery{
    position:relative;
    padding:60px 40px;
    margin:50px 0;
    border-radius:20px;
    overflow:hidden;
}

.gallery::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
               url("assets/images/loading 1.png") center center/cover no-repeat;
    z-index:0;
}

.gallery h3,
.gallery p,
.gallery-grid{
    position:relative;
    z-index:1;
}

.gallery h3,
.gallery p{
    color:#fff;
}

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

.back-top {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    width:
        44px;

    height:
        44px;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--gold);

    cursor:
        pointer;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .25s;
}


.back-top.show {

    opacity:
        1;

    visibility:
        visible;
}



/* =====================================
   ANIMATIONS
===================================== */

.reveal {

    opacity:
        0;

    transform:
        translateY(22px);

    transition:
        .7s;
}


.reveal.visible {

    opacity:
        1;

    transform:
        none;
}



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

@media(max-width:1050px) {

    .main-nav {
        gap:
            14px;
    }


    .intro-grid {
        gap:
            55px;
    }


    .resource-grid {

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

    }


    .footer-grid {

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

    }

}



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

@media(max-width:820px) {

    .top-links {
        display:
            none;
    }


    .nav-wrap {
        height:
            70px;
    }


    .brand img {
        width:
            145px;
    }


    .menu-toggle {
        display:
            block;
    }


    .main-nav {

        position:
            absolute;

        left:
            20px;

        right:
            20px;

        top:
            76px;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        background:
            white;

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

        border-radius:
            14px;

        box-shadow:
            var(--shadow);

        padding:
            10px;

    }


    .main-nav.open {
        display:
            flex;
    }


    .main-nav > a,
    .nav-dropdown > button {

        padding:
            13px 12px;

        width:
            100%;

        text-align:
            left;

    }


    .intro-grid {

        grid-template-columns:
            1fr;

    }


    .stats-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .news-grid {

        grid-template-columns:
            1fr;

    }


    .featured {

        grid-column:
            auto;

    }


    .cta-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}
.appointment-card{
    max-width:800px;
    margin:40px auto 0;
    background:#fff;
    border-radius:16px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.booking-price{
    text-align:center;
    font-size:2rem;
    color:#2e7d32;
    margin:20px 0 35px;
}

.booking-item{
    padding:20px 0;
    border-bottom:1px solid #eee;
}

.booking-item:last-child{
    border-bottom:none;
}

.booking-item h4{
    margin-bottom:10px;
    color:#222;
}

.booking-item ul{
    margin-top:15px;
    padding-left:20px;
}

.booking-item li{
    margin-bottom:10px;
}

.appointment-note{
    margin-top:30px;
    background:#f7f9f7;
    border-left:5px solid #2e7d32;
    padding:20px;
    border-radius:8px;
}

.booking-action{
    margin-top:35px;
    text-align:center;
}

.booking-action h3{
    margin-bottom:10px;
}

.booking-action p{
    margin-bottom:20px;
}

.whatsapp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 30px;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    font-size:1rem;
    transition:.3s ease;
    box-shadow:0 8px 20px rgba(37,211,102,.3);
}

.whatsapp-btn:hover{
    background:#1ebe5d;
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(37,211,102,.4);
}

.whatsapp-btn i{
    font-size:1.3rem;
}
.manure-card{
background:#fff;
padding:40px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.info-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-bottom:40px;
}

.info-box{
background:#f7f7f7;
padding:20px;
border-radius:15px;
}

.gallery{
margin:40px 0;
text-align:center;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:20px;
}

.gallery-grid img{
width:100%;
height:220px;
object-fit:cover;
border-radius:15px;
cursor:pointer;
transition:.4s;
box-shadow:0 8px 20px rgba(0,0,0,.1);
}

.gallery-grid img:hover{
transform:scale(1.05);
}

.lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
justify-content:center;
align-items:center;
z-index:9999;
cursor:pointer;
}

.lightbox img{
max-width:90%;
max-height:90%;
border-radius:10px;
}

.form-group{
margin-bottom:20px;
}

.form-group label{
display:block;
margin-bottom:8px;
font-weight:600;
}

.form-group input,
.form-group select{
width:100%;
padding:15px;
border:1px solid #ddd;
border-radius:8px;
}

.whatsapp-btn{
width:100%;
padding:18px;
background:#25D366;
color:#fff;
font-size:18px;
border:none;
border-radius:50px;
cursor:pointer;
transition:.3s;
font-weight:600;
}

.whatsapp-btn:hover{
background:#1EBE5D;
transform:translateY(-3px);
}
/* =========================================================
   INTERACTIVE CONTACT SECTION
   ========================================================= */

.contact {
    position: relative;
    padding: 100px 20px;
    background:
        linear-gradient(
            135deg,
            #f4faf6 0%,
            #ffffff 50%,
            #eef8f1 100%
        );
    overflow: hidden;
}


/* Decorative background circles */

.contact::before,
.contact::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.contact::before {
    width: 400px;
    height: 400px;
    background: rgba(31, 111, 65, 0.07);
    top: -180px;
    left: -150px;
}

.contact::after {
    width: 350px;
    height: 350px;
    background: rgba(46, 125, 50, 0.06);
    bottom: -180px;
    right: -120px;
}


/* Main container */

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


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

.contact .section-title {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px;
}

.contact .section-title > p:first-child {
    margin: 0 0 10px;
    color: #2e7d32;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}

.contact .section-title h2 {
    margin: 0;
    color: #123c24;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.1;
    font-weight: 800;
}

.contact .section-title h2 span {
    display: inline-block;
    color: #2e7d32;
    margin-left: 8px;
}

.title-line {
    width: 70px;
    height: 4px;
    background: #2e7d32;
    border-radius: 20px;
    margin: 20px auto;
}

.contact-intro {
    color: #64746a;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto;
}


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

.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 35px;
    align-items: stretch;
}


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

.contact-info {
    background: #123c24;
    color: white;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(18, 60, 36, 0.18);
    position: relative;
    overflow: hidden;
}


/* Decorative circle */

.contact-info::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    right: -100px;
    top: -100px;
}


/* Heading */

.contact-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}

.contact-icon-main {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.small-heading {
    display: block;
    color: #9bd5a4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.contact-heading h3 {
    margin: 0;
    font-size: 27px;
}


/* Description */

.contact-description {
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    margin-bottom: 28px;
}


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

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    color: white;
    text-decoration: none;
    transition: 0.3s ease;
}

.contact-item:hover {
    transform: translateX(7px);
}

.contact-item-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9e6c0;
    font-size: 17px;
    transition: 0.3s ease;
}

.contact-item:hover .contact-item-icon {
    background: #2e7d32;
    color: white;
    transform: scale(1.08);
}

.contact-item-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.contact-item-content strong {
    font-size: 14px;
}

.contact-item-content span {
    color: rgba(255,255,255,0.68);
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

.contact-arrow {
    margin-left: auto;
    opacity: 0;
    transform: translateX(-8px);
    transition: 0.3s ease;
}

.contact-item:hover .contact-arrow {
    opacity: 1;
    transform: translateX(0);
}


/* WhatsApp */

.whatsapp-icon {
    color: #6ee77d;
}


/* Facebook */

.facebook-icon {
    color: #78a9ff;
}


/* =========================================================
   LARGE WHATSAPP BUTTON
   ========================================================= */

.whatsapp-large {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #25d366;
    color: white;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.22);
}

.whatsapp-large:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3);
}

.whatsapp-large > i:first-child {
    font-size: 27px;
}

.whatsapp-large span {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.whatsapp-large strong {
    font-size: 14px;
}

.whatsapp-large small {
    opacity: 0.85;
    margin-top: 3px;
}


/* =========================================================
   FORM WRAPPER
   ========================================================= */

.contact-form-wrapper {
    background: white;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(18, 60, 36, 0.10);
    border: 1px solid #e8efe9;
}


/* Form heading */

.form-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.form-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: #e8f5eb;
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.form-header > div > span {
    color: #2e7d32;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.form-header h3 {
    margin: 5px 0 0;
    color: #163d26;
    font-size: 27px;
}


/* =========================================================
   INPUTS
   ========================================================= */

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: #284b35;
    font-size: 13px;
    font-weight: 700;
}

.input-box,
.textarea-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f7faf8;
    border: 1px solid #dfe9e1;
    border-radius: 12px;
    padding: 0 15px;
    transition: 0.3s ease;
}

.textarea-box {
    align-items: flex-start;
    padding-top: 15px;
}

.input-box i,
.textarea-box i {
    color: #6e8976;
    transition: 0.3s ease;
}

.input-box:focus-within,
.textarea-box:focus-within {
    border-color: #2e7d32;
    background: white;
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.08);
}

.input-box:focus-within i,
.textarea-box:focus-within i {
    color: #2e7d32;
}


/* Inputs */

.input-box input,
.input-box select,
.textarea-box textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #263d2d;
    font-family: inherit;
    font-size: 14px;
}

.input-box input,
.input-box select {
    height: 52px;
}

.input-box select {
    cursor: pointer;
}

.textarea-box textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.6;
}

.input-box input::placeholder,
.textarea-box textarea::placeholder {
    color: #9baaa0;
}


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

.send-button {
    width: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 25px;
    border-radius: 12px;
    background: #2e7d32;
    color: white;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    transition: 0.3s ease;
    box-shadow: 0 10px 25px rgba(46, 125, 50, 0.18);
}

.send-button:hover {
    background: #205b28;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(46, 125, 50, 0.25);
}

.send-button i {
    transition: 0.3s ease;
}

.send-button:hover i {
    transform: translateX(5px) rotate(-8deg);
}


/* Form note */

.form-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 16px 0 0;
    color: #89988e;
    font-size: 12px;
}

.form-note i {
    color: #2e7d32;
}


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

@media (max-width: 900px) {

    .contact {
        padding: 80px 20px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-info,
    .contact-form-wrapper {
        padding: 32px;
    }

}


@media (max-width: 600px) {

    .contact {
        padding: 70px 15px;
    }

    .contact .section-title {
        margin-bottom: 40px;
    }

    .contact .section-title h2 {
        font-size: 38px;
    }

    .contact .section-title h2 span {
        display: block;
        margin: 5px 0 0;
    }

    .contact-info,
    .contact-form-wrapper {
        padding: 25px 20px;
        border-radius: 18px;
    }

    .contact-heading h3,
    .form-header h3 {
        font-size: 23px;
    }

    .contact-item-content span {
        font-size: 12px;
    }

    .contact-arrow {
        display: none;
    }

    .whatsapp-large {
        padding: 14px;
    }

}


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

@media(max-width:560px) {

    .container {

        width:
            calc(100% - 28px);

    }


    .hero {

        min-height:
            620px;

    }


    .hero h1 {

        font-size:
            43px;

    }


    .section {

        padding:
            75px 0;

    }


    .resource-grid {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

    }


    .footer-bottom .container {

        flex-direction:
            column;

    }


    .section-heading {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .search-panel form {

        flex-direction:
            column;

    }

}
/* ================================
   FODDER PRODUCT SECTION
================================ */

.fodder-product {
    padding: 70px 20px;
    background: #f7f9f5;
}

.fodder-product .container {
    max-width: 1150px;
    margin: auto;
}


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

.product-card {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 45px;
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}


/* ================================
   PRODUCT IMAGES
================================ */

.product-images {
    width: 100%;
}


/* MAIN IMAGE */

.product-images > img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}


/* SMALL IMAGE GRID */

.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 15px;
}


/* THUMBNAILS */

.image-grid img {
    width: 100%;
    height: 105px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    cursor: pointer;
    transition: 0.3s ease;
    border: 2px solid transparent;
}


.image-grid img:hover {
    transform: translateY(-3px);
    border-color: #2e7d32;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}


/* ================================
   PRODUCT DETAILS
================================ */

.product-details {
    padding: 5px 5px 5px 10px;
}


.section-kicker {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #2e7d32;
    margin-bottom: 10px;
}


.product-details h2 {
    font-size: 38px;
    line-height: 1.15;
    margin: 0 0 5px;
    color: #173b22;
}


.product-details h4 {
    font-size: 18px;
    color: #777;
    margin: 0 0 18px;
    font-weight: 500;
}


.product-details > p {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
}


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

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 25px 0;
}


.feature {
    background: #f1f7f1;
    padding: 15px;
    border-radius: 10px;
    border-left: 3px solid #3c8d40;
}


.feature strong {
    display: block;
    color: #245c2c;
    font-size: 14px;
    margin-bottom: 5px;
}


.feature p {
    margin: 0;
    font-size: 14px;
    color: #555;
}


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

.product-benefits {
    list-style: none;
    padding: 0;
    margin: 25px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}


.product-benefits li {
    font-size: 14px;
    color: #3b3b3b;
}


/* ================================
   PRICE
================================ */

.price-box {
    background: #173b22;
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-top: 25px;
}


.price-box h3 {
    margin: 0 0 5px;
    font-size: 24px;
}


.price-box p {
    margin: 0;
    color: #dcebdc;
}


/* ================================
   OTHER PRODUCTS
================================ */

.other-products {
    margin-top: 25px;
}


.other-products h3 {
    color: #173b22;
    margin-bottom: 12px;
}


.other-products ul {
    padding-left: 20px;
    margin: 0;
}


.other-products li {
    margin-bottom: 8px;
    color: #555;
    line-height: 1.5;
}


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

.enquiry-card {
    max-width: 700px;
    margin: 50px auto 0;
    background: white;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}


.enquiry-card h2 {
    text-align: center;
    color: #173b22;
    margin-bottom: 25px;
}


.form-group {
    margin-bottom: 18px;
}


.form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    color: #333;
}


.form-group input,
.form-group textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #d8ded8;
    border-radius: 9px;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: 0.2s ease;
}


.form-group input:focus,
.form-group textarea:focus {
    border-color: #3c8d40;
    box-shadow: 0 0 0 3px rgba(60, 141, 64, 0.1);
}


.form-group textarea {
    resize: vertical;
}


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

.whatsapp-btn {
    width: 100%;
    border: none;
    padding: 15px 20px;
    border-radius: 10px;
    background: #25d366;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease;
}


.whatsapp-btn:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

    .product-card {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-images > img {
        height: 400px;
    }

    .product-details h2 {
        font-size: 32px;
    }

}


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

@media (max-width: 600px) {

    .fodder-product {
        padding: 40px 12px;
    }

    .product-card {
        padding: 18px;
        border-radius: 15px;
    }

    /* Main image becomes smaller on phones */

    .product-images > img {
        height: 260px;
        border-radius: 12px;
    }

    /* Thumbnail images */

    .image-grid {
        gap: 8px;
    }

    .image-grid img {
        height: 80px;
        border-radius: 8px;
    }

    .product-details {
        padding: 0;
    }

    .product-details h2 {
        font-size: 27px;
    }

    .product-details h4 {
        font-size: 16px;
    }

    .feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .feature {
        padding: 12px;
    }

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

    .price-box h3 {
        font-size: 21px;
    }

    .enquiry-card {
        padding: 22px 18px;
        margin-top: 35px;
    }

}