* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Cinzel', serif;
}



body, html {
  font-family: 'cinzel',serif;
  overflow-x: hidden;
  background-color: #fff;
}


/* header section starts here */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Cinzel', serif;
}

body,
html {
    overflow-x: hidden;
    background: #fff;
}

/* Header Styling */
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    position: relative;
    z-index: 100;
    width: 100%;
}

.logo img {
    max-width: 220px;
    /* increase this as needed */
    height: auto;
}


/* Navigation Menu */
nav ul {
    display: flex;
    list-style: none;
    gap: 60px;
    margin-top: 40px;
    position: relative;
}

nav ul li a {
    text-decoration: none;
    color: #1d3524;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

nav ul li a:hover {
    color: #587344;
    border-bottom: 4px solid #587344;
}

/* Dropdown Styling */
.dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 160px;
    display: none;
    flex-direction: column;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 9999;
}

.dropdown-content a {
    padding: 10px 20px;
    text-align: left;
    font-size: 0.85rem;
    color: #1d3524;
    text-decoration: none;
}

.dropdown-content a:hover {
    background-color: rgba(88, 115, 68, 0.2);
    /* Very light transparent green */
    color: #1d3524;
}


/* Show dropdown on hover (desktop) */
@media (min-width: 768px) {
    .dropdown:hover .dropdown-content {
        display: flex;
    }
}

/* Hamburger Icon */
.hamburger {
    display: none;
    font-size: 28px;
    color: #1d3524;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
}

/* Mobile Menu */
@media (max-width: 767px) {
    .hamburger {
        display: block;
    }

    nav {
        display: none;
        flex-direction: column;
        align-items: center;
        background: #fff;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        z-index: 1000;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    nav.active {
        display: flex;
    }

    nav ul {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
        width: 100%;
    }

    nav ul li {
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    .dropdown-content {
        position: static;
        display: none;
        box-shadow: none;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
    }

    .dropdown-content.show {
        display: flex;
    }

    .dropdown-content a {
        padding: 12px 20px;
        /* ✅ More padding for spacing */
        width: 100%;
        /* ✅ Ensure full width alignment */
        text-align: center;
        font-size: 0.9rem;
        color: #1d3524;
        text-decoration: none;
        background-color: transparent;
        transition: background-color 0.3s ease;
    }

    .dropdown-content a:hover {
        background-color: rgba(88, 115, 68, 0.1);
        /* subtle green */
        color: #1d3524;
    }

}

/* header section ends here */
/* ==========================================================================  
   RESPONSIVE DESIGN - ≤767px (Mobile)  
========================================================================== */
@media (max-width: 767px) {

    /* header section starts */

    /* Flex row for logo and hamburger */
    .header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px 0;
        position: relative;
    }

    .logo img {
        max-width: 140px;
        height: auto;
    }

    .hamburger {
        display: block;
        font-size: 28px;
        color: #1d3524;
        cursor: pointer;
        margin-top: 12px;
        /* Adjust as needed for vertical alignment */
    }

    nav {
        display: none;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        z-index: 999;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    nav.active {
        display: flex;
    }

    nav ul {
        flex-direction: column;
        gap: 15px;
        padding: 20px 0;
        margin: 0;
        width: 100%;
    }

    nav ul li {
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        font-size: 0.9rem;
        padding: 10px 0;
        display: block;
        width: 100%;
        color: #1d3524;
        text-decoration: none;
    }

    nav ul li a:hover {
        background-color: #f4f4f4;
        color: #587344;
        border-bottom: none;
    }

    /* Hide nav scrollbar */
    nav ul::-webkit-scrollbar {
        display: none;
    }

    /* header section ends */

}


/* Slider Wrapper */
.slider-wrapper {
  position: relative;
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}

/* Image Slider */
.hero-slider {
  width: 100%;
  height: 400px;
  overflow: hidden;
  background:none;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}


.slide.active {
  opacity: 1;
  z-index: 1;
}

/* Arrows */
.arrow {
  position: absolute;
  top: 50%; /* ✅ Vertically center */
  transform: translateY(-50%);
  width: 90px;   /* ✅ Increased size */
  height: 90px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 3;
}

.arrow img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.arrow:hover img {
  transform: scale(1.1);
}

.prev {
  left: 4px; /* ✅ Pulls it to the edge of the slider */
}

.next {
  right: 4px;
}

/* Dots */
.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 40px;
}

.dot {
  width: 12px;
  height: 12px;
  border: 2px solid #5b7f39; /* ✅ Green border */
  background-color: transparent; /* ✅ Hollow by default */
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.dot.active {
  background-color: #5b7f39; /* ✅ Solid green when active */
}


/* Social Icons */
.home-hero .social-icons {
  position: absolute; /* ⬅️ Change this from fixed */
  top: 20%;
  left: 1205px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}


.home-hero .social-icons img {
  width: 30px;
  height: 30px;
  transition: transform 0.3s;
}

.home-hero .social-icons img:hover {
  transform: scale(1.1);
}

.footer-line {
  margin-left: 155px;
  width: 80%;
  height: 2px;
  background-color: #06402B; /* Ayatti green */
  margin-top: 130px;
}

/* GREEN BAR */

.green-bar-slider-left,
.green-bar-slider-right {
  position: absolute;
  width: 130px;
  height: 400px;
  background-image: url('images/greenBar.png'); /* ✅ Replace with actual image path */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  top: 40px;
  z-index: 0; /* Stay behind the slider */
}

.green-bar-slider-left {
  left: 10px;
}

.green-bar-slider-right {
  right: 10px;
  transform: scaleX(-1); /* ✅ Flip horizontally if needed */
}



.home-hero {
 background-image: url('images/bg1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 60px 0px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  height: 980px;
  margin: 0px;
}



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


.about-section {
  max-width: 100%;
  margin:auto;
  padding: 0 20px;
}



.about-section {
  background-image: url('images/backgroundImage2.webp'); /* Replace with your actual path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100; /* ✅ Ensures it covers full viewport height */
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 100px 0;
}




/* ABOUT SECTION BACKGROUND */
.about-section {
  background-image: url('images/backgroundImage2.webp'); /* Replace with your actual path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 950px; 
  position: relative;
  z-index: 1;
  
}


/* STORY CONTAINER */
.story-container {
  background-image: url('images/theStory.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1000px;
  height: 700px;
  margin: 0 auto 80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* ✅ CHANGE from flex-end to space-between */
  padding: 60px 80px;               /* ✅ Increase padding for inner spacing */
  border-radius: 10px;
  color: #fff;
  position: relative;
}


/* TEXT BLOCK */
.story-text-block {
  max-width: 500px;
  width: 100%;
  margin-left: 590px; /* ✅ Move the text right */
  z-index: 1;
  color: #fff;
}

/* HEADING */
.story-heading {
  margin: 0 0 16px;
  line-height: 1.2;
}

.story-heading .small {
  font-size: 40px;
  font-weight: 40;
  letter-spacing: 1px;
  display: block;
  margin-bottom: -20px;
}

/* STORY HEADING STRUCTURE */
.story-heading .large {
  font-size: 82px;
  display: flex;
  align-items: center;
  gap: 0px;
  flex-wrap: nowrap;
  margin-bottom: 30px;
}

/* "STORY" TEXT */
.story-text {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 2px;
  white-space: nowrap;
  line-height: 1;
}

/* STAR LINE IMAGE */
.star-line {
  width: 750px;         /* Adjust this if needed */
  height: auto;         /* Keep it slim */
  margin-left: -40px;
  object-fit: contain;
  display: inline-block;
  transform: translateY(2px); /* Align it vertically if needed */
}




/* PARAGRAPH */
.story-text-block p {
  color: #FFFFFF;
  font: 15px "Cormorant Garamond", serif;
 margin-bottom: 3px;
}



/* year section */

.years-section {
  display: flex;
  align-items: center;
  margin-top: 80px;
  width: 100%;
  padding: 0;
  justify-content: flex-start; /* Align items to the left */
  position: relative;
}

.years-box {
  position: relative;
  background-color:#5b7f39;
  color: #fff;
  height: 120px;
  width: 850px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-top: -230px;
  margin-left: -200px; /* ⬅️ This moves the box left */
  padding-right: 60px;
  z-index: 1;
}

.years-heading {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.years-heading .big {
  font-size: 145px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 15px;
}

.years-heading .small {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 1px;
  padding-bottom: 50px; 
}

.years-text {
  flex: 1;
  max-width: 600px;
  padding-left: 40px;
  z-index: 2;
}

.years-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  margin-top: -160px;
}


.star-line-overlay {
  position: absolute;
  top: 60px; 
  left: 30%; 
  transform: translate(-50%, -50%);
  width: 555px; 
  height: auto;
  object-fit: contain;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}



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

.principles-section {
    background-image: url('images/bg1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 120px 0px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}

.title-wrapper {
    position: relative;
    display: inline-block;
}

.main-titles {
    font-size: 900px;
    font-weight: 700;
    font-family: 'Cormorant Garamond', serif;
    color: #1a2f28;
    letter-spacing: 2px;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* Force star lines into view */
.starline-left {
    position: absolute;
    left: -643px;
    top: 10px;
    width: 700px;
    height: auto;
    z-index: 0;
}

.starline-right {
    position: absolute;
    right: -660px;
    top: 3px;
    width: 700px;
    height: auto;
    z-index: 0;
}



.heading-top {
    font-size: 45px;
    font-weight: 400;
    font-family: 'Cormorant Garamond', serif;
    color: #1a2f28;
}


.principles-heading span {
    display: block;
    color: #1a2f28;
    letter-spacing: 1px;
    position: relative;
    font-size: 90px;
    margin-bottom: 50px;
}



.principles-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.principle-image-wrapper {
    position: relative;
    width: 220px;
    display: flex;
    justify-content: center;
    align-items: center;

}


.principle-img {
    width: 450px;
    height: 500px;
    position: relative;
    z-index: 2;

    border: none;
    background: transparent;
    padding: 0;
}

.principle-content {
    flex: 2;
    max-width: 600px;
}

.principle-box {
    margin-bottom: 30px;
}

.principle-box h3 {
    /* font-family: 'Playfair Display', serif; */
    font-size: 25px;
    color: #1a2f28;
    margin-bottom: 10px;
    font-weight: 1700;
}

.principle-box p {
    font-size: 18px;
    line-height: 1.8;
    color: #5b7f39;
}


@media (max-width: 768px) {


    .heading-top {
        font-size: 20px;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 500;
        color: #1a2f28;
        margin-bottom: -1px;
    }

    .main-titles {
        font-size: 50px !important;
        font-weight: 600 !important;
        letter-spacing: 1px;
        font-family: 'Cormorant Garamond', serif;
        color: #1a2f28;
        text-align: center;
        white-space: nowrap;
        top: -8px;
        padding: 0;
        margin: 0;
        line-height: 1;
        /* ⬅️ Prevent extra height */
    }


    .title-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        padding: 0 80px;
    }


    .principles-layout {
        flex-direction: column;
        align-items: center;
        gap: 60px;
        padding: 30px 20px;
        position: relative;
    }

    .principle-image-wrapper {
        position: absolute;
        width: 100px;
        height: 120px;
    }

    .principle-image-wrapper img {
        width: 200px;
        height: 300px;
        object-fit: cover;
        display: block;
    }

    .principle-content {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        position: relative;
        z-index: 2;
    }



    .starline-left {
        position: absolute;
        left: 38px;
        top: 1px;
        width: 140px;
        height: 40px;
        z-index: 0;
    }

    .starline-right {
        position: absolute;
        right: 38px;
        top: -1px;
        width: 140px;
        height: 40px;
        z-index: 0;

    }


    .mission-text-mobile {
        flex-direction: row;
        padding-left: 180px;
        padding-top: -70px;
    }

    .vision-text-mobile {
        flex-direction: row-reverse;
        padding-right: 200px;
        padding-top: 10px;
        padding-bottom: -200px;
    }

    /* Position mission image */
    .principle-image-wrapper:first-of-type {
        top: 3;
        left: 20px;
    }

    /* Position vision image */
    .principle-image-wrapper:last-of-type {
        bottom: 0;
        right: 20px;
    }

    .principle-box h3 {
        font-size: 14px;
        margin-bottom: 6px;
        color: #1a2f28;

    }

    .principle-box p {
        font-size: 13px;
        line-height: 1.6;
        color: #5b7f39;
    }
}

@media (max-width: 600px) {
    /* ...your existing mobile styles... */

    .principles-section {
        padding: 60px 16px;
        background-image: url('images/bg1.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-blend-mode: multiply;
        background-color: rgba(255, 255, 255, 0.95);
        text-align: center;
    }

    /* Header Typography */
    .heading-top {
        font-size: 20px;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 500;
        color: #1a2f28;
        margin-bottom: -1px;
    }

    .main-titles {
        font-size: 50px !important;
        font-weight: 600 !important;
        letter-spacing: 1px;
        font-family: 'Cormorant Garamond', serif;
        color: #1a2f28;
        text-align: center;
        white-space: nowrap;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        /* ⬅️ Prevent extra height */
    }


    .title-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        padding: 0 80px;
    }

    .starline-left {
        position: absolute;
        left: -70px;
        top: 6px;
        width: 140px;
        height: 40px;
        z-index: 0;
    }

    .starline-right {
        position: absolute;
        right: -70px;
        top: 6px;
        width: 140px;
        height: 40px;
        z-index: 0;

        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;


    }


    .starline-left,
    .starline-right {
        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;
    }



    /* Layout & Images */

    /* Mission image positioning */
    .principle-image-wrapper:first-of-type {
        position: absolute;
        top: 88px;
        left: -200px;
        z-index: 1;
    }

    /* Vision image positioning */
    .principle-image-wrapper:last-of-type {
        position: absolute;
        bottom: 45px;
        right: -200px;
        z-index: 1;
    }

    /* Ensure container allows overlap */
    .principles-layout {
        position: relative;
        padding-bottom: 100px;
        /* Creates room for bottom image */
    }

    .principle-img {
        width: 160px;
        height: auto;
        object-fit: contain;
    }

    .principles-layout {
        display: flex;
        flex-direction: column;
        gap: 48px;
        padding: 0;
        align-items: center;
    }

    .principle-image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .principle-img {
        width: 220px;
        height: auto;
        object-fit: contain;
    }

    /* Text Content */
    .principle-content {
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: 100%;
        text-align: left;
        padding: 0 16px;
    }

    .principle-box h3 {
        font-size: 18px;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 700;
        letter-spacing: 1px;
        color: #1a2f28;
        margin-bottom: 12px;


    }

    #vision-h3 {
        text-align: right;
    }

    #vision-p {
        text-align: right;
    }

    .principle-box p {
        font-size: 14px;
        line-height: 1.7;
        font-family: 'Open Sans', sans-serif;
        color: #5b7f39;
    }


}


@media (max-width: 480px) {
    .principles-section {
        padding: 60px 16px;
        background-image: url('images/bg1.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-blend-mode: multiply;
        background-color: rgba(255, 255, 255, 0.95);
        text-align: center;
    }

    /* Header Typography */
    .heading-top {
        font-size: 20px;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 500;
        color: #1a2f28;
        margin-bottom: -1px;
    }

    .main-titles {
        font-size: 50px !important;
        font-weight: 600 !important;
        letter-spacing: 1px;
        font-family: 'Cormorant Garamond', serif;
        color: #1a2f28;
        text-align: center;
        white-space: nowrap;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        /* ⬅️ Prevent extra height */
    }


    .title-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        padding: 0 80px;
    }

    .starline-left {
        position: absolute;
        left: -70px;
        top: 6px;
        width: 140px;
        height: 40px;
        z-index: 0;
    }


    .starline-right {
        position: absolute;
        right: -70px;
        top: 6px;
        width: 140px;
        height: 40px;
        z-index: 0;

        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;


    }


    .starline-left,
    .starline-right {
        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;
    }



    /* Layout & Images */

    /* Mission image positioning */
    .principle-image-wrapper:first-of-type {
        position: absolute;
        top: 88px;
        left: -140px;
        z-index: 1;
    }

    /* Vision image positioning */
    .principle-image-wrapper:last-of-type {
        position: absolute;
        bottom: 45px;
        right: -140px;
        z-index: 1;
    }

    /* Ensure container allows overlap */
    .principles-layout {
        position: relative;
        padding-bottom: 100px;
        /* Creates room for bottom image */
    }

    .principle-img {
        width: 160px;
        height: auto;
        object-fit: contain;
    }

    .principles-layout {
        display: flex;
        flex-direction: column;
        gap: 48px;
        padding: 0;
        align-items: center;
    }

    .principle-image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .principle-img {
        width: 220px;
        height: auto;
        object-fit: contain;
    }

    /* Text Content */
    .principle-content {
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: 100%;
        text-align: left;
        padding: 0 16px;
    }

    .principle-box h3 {
        font-size: 18px;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 700;
        letter-spacing: 1px;
        color: #1a2f28;
        margin-bottom: 12px;


    }

    #vision-h3 {
        text-align: right;
    }

    #vision-p {
        text-align: right;
    }

    .principle-box p {
        font-size: 14px;
        line-height: 1.7;
        font-family: 'Open Sans', sans-serif;
        color: #5b7f39;
    }
}

@media (max-width: 400px) {
    .principles-section {
        padding: 60px 16px;
        background-image: url('images/bg1.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-blend-mode: multiply;
        background-color: rgba(255, 255, 255, 0.95);
        text-align: center;
    }

    /* Header Typography */
    .heading-top {
        font-size: 20px;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 500;
        color: #1a2f28;
        margin-bottom: -1px;
    }

    .main-titles {
        font-size: 50px !important;
        font-weight: 600 !important;
        letter-spacing: 1px;
        font-family: 'Cormorant Garamond', serif;
        color: #1a2f28;
        text-align: center;
        white-space: nowrap;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        /* ⬅️ Prevent extra height */
    }


    .title-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        padding: 0 80px;
    }

    .starline-left {
        position: absolute;
        left: -100px;
        top: 5px;
        width: 140px;
        height: 40px;
        z-index: 0;
        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;

    }


    .starline-right {
        position: absolute;
        right: -100px;
        top: 1px;
        width: 140px;
        height: 40px;
        z-index: 0;

        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;


    }


    /* Layout & Images */

    /* Mission image positioning */
    .principle-image-wrapper:first-of-type {
        position: absolute;
        top: 88px;
        left: -140px;
        z-index: 1;
    }

    /* Vision image positioning */
    .principle-image-wrapper:last-of-type {
        position: absolute;
        bottom: 45px;
        right: -140px;
        z-index: 1;
    }

    /* Ensure container allows overlap */
    .principles-layout {
        position: relative;
        padding-bottom: 100px;
        /* Creates room for bottom image */
    }

    .principle-img {
        width: 160px;
        height: auto;
        object-fit: contain;
    }

    .principles-layout {
        display: flex;
        flex-direction: column;
        gap: 48px;
        padding: 0;
        align-items: center;
    }

    .principle-image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .principle-img {
        width: 220px;
        height: auto;
        object-fit: contain;
    }

    /* Text Content */
    .principle-content {
        display: flex;
        flex-direction: column;
        gap: 0px;
        width: 100%;
        text-align: left;
        padding: 0 16px;
    }

    .principle-box h3 {
        font-size: 18px;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 700;
        letter-spacing: 1px;
        color: #1a2f28;
        margin-bottom: 12px;


    }

    #vision-h3 {
        text-align: right;
    }

    #vision-p {
        text-align: right;
    }

    .principle-box p {
        font-size: 14px;
        line-height: 1.7;
        font-family: 'Open Sans', sans-serif;
        color: #5b7f39;
    }
}

@media (max-width: 352px) {
    .starline-left {
        position: absolute;
        left: -400px;
        top: 1px;
        width: 140px;
        height: 40px;
        z-index: 0;
        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;

    }

    .starline-right {
        position: absolute;
        right: -100px;
        top: 1px;
        width: 140px;
        height: 40px;
        z-index: 0;

        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;


    }
}

/* ==========================================================================  
   WHY SECTION
========================================================================== */
.why-section {
  background-color: #0d2d23;
  text-align: center;
  padding: 60px 20px 140px;
  font-family: 'Cinzel', serif;
  position: relative;
  overflow: hidden;
}

.why-title {
  font-size: 62px;
  color: #fff;
}

.why-subtitle {
  color: #f1efe9;
  font-weight: 500;
  font-size: 38px;
  margin-bottom: 40px;
}

.why-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.why-grid::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 140px;
  background-color: #5b7f39;
  z-index: 0;
}

.why-star {
  position: absolute;
  top: 54.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  z-index: 2;
}

.why-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 45px;
  z-index: 1;
}

.why-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.why-item.vertical {
  flex-direction: column;
  text-align: center;
}

.why-item.horizontal {
  flex-direction: row;
}

.why-item.horizontal.reverse {
  flex-direction: row-reverse;
}

.why-text {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff !important;
  margin: 0;
  max-width: 120px;
  line-height: 1.4;
}

.top {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.why-text.left {
  text-align: right;
}

.why-text.right {
  text-align: left;
}

.why-text.top,
.why-text.bottom {
  text-align: center;
}

.why-item img {
  width: 160px;
  height: auto;
}

@media (max-width: 768px) {
  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 15px;
    padding: 0 20px;
    justify-items: center;
    position: relative;
  }

  .why-grid::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 100px;
    background-color: #5b7f39;
    z-index: 0;
  }

  .why-star {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20px;
    z-index: 2;
  }

  .why-column {
    display: contents;
  }

  .why-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 10px;
    z-index: 1;
  }

  .why-item img {
    width: 100%;
    max-width: 120px;
    height: auto;
  }

  .why-text,
  .top,
  .bottom {
    font-size: 10px;
    font-weight: 600;
    color: #fff !important;
    text-align: center;
    line-height: 1.4;
    max-width: 110px;
  }

  .why-title {
    font-size: 28px;
  }

  .why-subtitle {
    font-size: 14px;
    margin-bottom: 25px;
  }
}

/* Ensures STATE-OF-THE-ART stays together */
.nowrap {
  white-space: nowrap;
}


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

.benefits-background {
  background-image: url('images/bg1.webp'); /* Replace with your actual background image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Optional: parallax effect */
}

.benefits-wrapper {
  display: flex;
  justify-content: flex-end; /* Keeps the green box aligned to the right within its wrapper */
  position: relative;
  background-image: url('images/benefits-bg.jpg'); /* This might be your overlay pattern or texture */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* === GREEN BOX === */
.benefits-section {
  background-color: rgba(91, 127, 57, 0.95);
  /* Adjusted padding to perfectly frame the content and allow images to peek */
  padding: 60px 80px 10px 290px; /* Top/Bottom, Right, Bottom, Left. Adjusted for left image */
  width: 100%;
  height: 400px; /* Keep fixed height for the green box */
  max-width: 1300px;
  display: flex;
  align-items: center; /* Vertically centers content within the green box */
  justify-content: space-between; /* Distributes space between content and where the right image would be */
  gap: 30px;
  border-radius: 0;
  position: relative; /* Crucial for positioning child absolute images */
  z-index: 1; /* Ensures the green box is above the background */
  box-sizing: border-box; /* Include padding in the element's total width and height */
}

.benefits-content {
  color: #fff;
  flex: 1; /* Allows it to grow and shrink */
  max-width: 580px; /* **Crucial adjustment for paragraph wrapping like reference** */
  text-align: left;
  z-index: 2; /* Ensures text is above background images */
}

.benefits-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  margin-bottom: 20px;
}

.benefit-top {
  font-size: 35px;
  font-weight: 400;
  font-family: 'Cormorant Garamond', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: -35px;
  margin-left: 10px;
}

.benefit-bottom {
  display: flex;
  align-items: flex-end; /* Align to the bottom of the line to match text baseline */
  gap: 8px; /* Slightly reduced gap for even tighter star alignment */
}

.benefit-main {
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 2px;
  white-space: nowrap; /* Prevents "BENEFITS" from wrapping */
  line-height: 1; /* Ensure line height doesn't add extra space below text */
}

.benefit-star {
  width: 960px; /* Keep the original width if it's an SVG that scales well */
  height: auto;
  /* Precisely align star with "BENEFITS" baseline */
  margin-bottom: -48px; /* Adjust this to push the star's line up to the text baseline */
  transform: translateX(-40px); /* Adjust to align horizontally with "BENEFITS" */
  flex-shrink: 0; /* Prevents the star from shrinking */
}

.benefits-title span {
  font-size: 48px;
  font-weight: bold;
  display: inline-block;
  margin-left: 10px;
}

.benefits-content p {
  font-size: 16px;
  line-height: 1.6;
}

/* === LEFT IMAGE === */
.benefit-image.left {
  position: absolute; /* Position relative to .benefits-section */
  left: -180px; /* **Moved further left to match reference** */
  top: 20%; /* **Reverted to 50% for vertical centering relative to green box** */
  transform: translateY(-50%); /* Keeps it vertically centered */
  height: 600px;
  width: 350px;
  object-fit: cover;
  z-index: 0; /* Place behind the green box and text content */
}

/* === RIGHT IMAGE === */
.benefit-image.right {
  position: absolute; /* Position relative to .benefits-section */
  right: 37px; /* **Moved significantly left to match reference** */
  top: 50%; /* Keep for vertical centering */
  transform: translateY(-50%); /* Keep for vertical centering */
  width: 250px;
  height: 350px;
  object-fit: cover;
  z-index: 3; /* Place behind the green box and text content */
}

/* --- Media Queries --- */

@media (max-width: 1440px) {
  .benefits-section {
    padding: 50px 30px 50px 260px; /* Adjusted padding */
  }
  .benefit-main {
    font-size: 52px;
  }
  .benefit-top {
    font-size: 30px;
    margin-bottom: 2px; /* Consistent adjustment */
  }
  .benefit-star {
    width: 990px;
    margin-top: -98px; /* Adjusted */

  }
  .benefit-image.left {
    height: 500px;
    width: 300px;
    left: -80px; /* Adjusted */
    top: -120px; /* Consistent top alignment */
    margin-top: 0px;
    transform: none;
  }
  .benefit-image.right {
    width: 220px;
    height: 330px;
    right: 40px; /* Adjusted */
  }
  .benefits-content {
      max-width: 650px; /* Adjusted */
  }
}

@media (max-width: 1300px) {
  .benefits-section {
    padding: 50px 20px 50px 320px; /* **Adjusted for text positioning at this breakpoint** */
  }
  .benefit-main {
    font-size: 50px;
  }
  .benefit-top {
    font-size: 28px;
    margin-bottom: -40px; /* Consistent adjustment */
  }
  .benefit-star {
    width: 940px;
    margin-top: 5px; /* Adjusted */

  }
  .benefit-image.left {
    height: 480px;
    width: 280px;
    left: 20px; /* **Adjusted for image position at this breakpoint** */
    top: -30%; /* Consistent top alignment */
    margin-top: 0px;
    transform: none;
  }
  .benefit-image.right {
    width: 250px;
    height: 330px;
    right: 40px; /* **Adjusted for image position at this breakpoint** */
  }
  .benefits-content {
      max-width: 620px; /* **Crucially adjusted for text wrapping at this breakpoint** */
  }
}

@media (max-width: 1200px) {
  .benefits-section {
    padding: 40px 20px 40px 320px;
  }
  .benefit-main {
    font-size: 46px;
  }
  .benefit-top {
    font-size: 26px;
    margin-bottom: -10px; /* Consistent adjustment */
  }
  .benefit-star {
    width: 980px;
    margin-top: -30px; /* Adjusted */
    transform: translateX(-25px);
  }
  .benefit-image.left {
    height: 440px;
    width: 260px;
    left: 20px; /* Adjusted */
    top: 40; /* Consistent top alignment */
    margin-top: 0px;
    transform: none;
  }
  .benefit-image.right {
    width: 210px;
    height: 350px;
    right: 40px; /* Adjusted */
  }
  .benefits-content p {
    font-size: 15px;
  }
  .benefits-content {
      max-width: 580px;
  }
}

@media (max-width: 1100px) {
  .benefits-section {
    padding: 30px 10px 30px 320px;
  }
  .benefit-main {
    font-size: 40px;
  }
  .benefit-top {
    font-size: 22px;
    margin-bottom: 0px; /* Consistent adjustment */
  }
 .benefit-star {
    width: 980px;
    margin-top: -30px; /* Adjusted */
    transform: translateX(-25px);
  }
.benefit-image.left {
    height: 440px;
    width: 260px;
    left: 20px; /* Adjusted */
    top: 40; /* Consistent top alignment */
    margin-top: 0px;
    transform: none;
  }
  .benefit-image.right {
    width: 230px;
    height: 350px;
    right: 20px; /* Adjusted */
  }
  .benefits-content p {
    font-size: 14px;
    line-height: 1.6;
  }
  .benefits-content {
      max-width: 450px;
  }
}

@media (max-width: 1004px) {
  .benefits-section {
    padding: 30px 10px 30px 900px;
  }
  .benefit-main {
    font-size: 38px;
  }
  .benefit-top {
    font-size: 20px;
    margin-bottom: -2px; /* Consistent adjustment */
  }
  .benefit-star {
    width: 500px;
    margin-top: -20px; /* Adjusted */
    transform: translateX(-15px);
  }
  .benefits-content p {
    font-size: 14px;
  }
  .benefit-image.left {
    height: 380px;
    width: 230px;
    left: -80px; /* Adjusted for smaller screen */
    top: 0; /* Consistent top alignment */
    margin-top: 0px;
    transform: none;
  }
  .benefit-image.right {
    width: 170px;
    height: 250px;
    right: 30px; /* Adjusted for smaller screen */
  }
  .benefits-content {
      max-width: 320px;
  }
}




@media (max-width: 768px) {
    .benefits-section {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        transform: translateX(80px);
        padding: 140px 20px 90px;
           padding-bottom: 1px; 
        background-color: rgba(91, 127, 57, 0.95);
        height: auto;
    }

    .benefit-image.left {
        position: relative;
        width: 100%;
        max-width: 260px;
        height: auto;
        margin: -270px auto 0 -25px;
        border-radius: 12px;
        z-index: 1;
    }

    .benefits-content {
        text-align: left;
        max-width: 85%;
        margin-left: -42px;
  
        z-index: 2;
        margin-top: 100px;
    }


    .benefits-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 6px;
        width: 100%;
        margin-left: -10px;
   
    }



    .benefit-top {
        font-size: 28px;
        margin-bottom: -8px;
        font-weight: 400;
        align-items: flex-start;
        letter-spacing: 1px;
    }

    .benefit-main {
        font-size: 32px;
        font-weight: 700;
        letter-spacing: 1.5px;
        line-height: 1;
    }

    .benefit-star {
        width: 250px;
        margin-top: -20px;
    
        margin-bottom: 0;
        transform: translateY(-8px);

        transform: translate(-20px, -4px);


    }

    .benefits-content p {
        font-size: 12.5px;
        line-height: 1.6;
        padding-top: 12px;
        padding-left: -230px;
        margin: 0;
        max-width: 320px;
    }



    .benefit-image.right {
        position: relative;
        width: 100%;
        max-width: 160px;
        height: auto;
        margin: -970px auto 0 220px;
        margin-bottom: 240px;
        margin-right: -20px;
        border-radius: 12px;
        z-index: 1;

    }

} 





@media (max-width: 480px) {
  .benefits-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transform: translateX(30px);
    padding: 100px 12px 2px;
    padding-bottom: 1px;
    background-color: rgba(91, 127, 57, 0.95);
    height: auto;
  }

  .benefit-image.left {
    max-width: 180px;
    margin: -200px auto 0 30px;
  }

  .benefit-image.right {
    max-width: 140px;
    margin: -500px auto 0 260px;
    margin-bottom: 230px;
    margin-right: -10px;
  }

  .benefits-content {
    text-align: left;
    max-width: 85%;
    margin-left: -24px;
    margin-top: 80px;
    z-index: 2;
  }

  .benefits-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 4px;
    margin-left: -25px;
    width: 100%;
  }

  .benefit-top {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.8px;
    margin-bottom: -6px;
  }

  .benefit-main {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
  }

  .benefit-star {
    width: 200px;
    margin-top: -18px;
    margin-bottom: 0;
    transform: translate(-15px, -12px);
  }

  .benefits-content p {
    font-size: 11px;
    line-height: 1.4;
    padding-top: 8px;
    margin-left: -8px;
    max-width: 240px;
    text-align: left;
  }
}



@media (max-width: 400px) {
    .benefits-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        transform: translateX(30px);
      
        padding: 100px 12px 2px;
         padding-bottom: 1px;
     
        background-color: rgba(91, 127, 57, 0.95);
        height: auto;
    }

     .benefit-image.left {
        max-width: 180px;
        margin: -200px auto 0 30px;
    }

    .benefit-image.right {
        max-width: 140px;
        margin: -500px auto 0 240px;
        margin-bottom: 230px;
        margin-right: -10px;
    } 

    .benefits-content {
        text-align: left;
        max-width: 85%;
        margin-left: -24px;
        margin-top: 80px;
        z-index: 2;
    }

    .benefits-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 4px;
        margin-left: -25px;
        width: 100%;
    }

    .benefit-top {
        font-size: 30px;
        font-weight: 400;
        letter-spacing: 0.8px;
        margin-bottom: -6px;
    }

    .benefit-main {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 1.1;
    }

    .benefit-star {
        width: 200px;
        margin-top: -18px;
        margin-bottom: 0;
        transform: translate(-15px, -12px);
    }

    .benefits-content p {
        font-size: 11px;
        line-height: 1.4;
        padding-top: 8px;
        margin-left: -8px;
        max-width: 240px;
        text-align: left;
    }
}   

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


.testimonials-section {
    background: transparent;
    padding: 100px 20px;
    /* Base padding for desktop */
    text-align: center;
    position: relative;
    /* Make this relative to position dots at the bottom if needed */
    padding-top: 40px;
    /* ⬅️ Reduced from 100px or more */

}

.testimonials-title {
    position: relative;
    font-size: 36px;
    font-family: 'Playfair Display', serif;
    color: #0d2d23;
    margin: 0 auto 60px;
    margin-bottom: 2px;
    padding-top: 40px;
    /* ⬅️ Adds vertical breathing room */
    z-index: 5;
    /* ⬆️ Ensures visibility above testimonial-box */
    text-align: center;
}


/* New container for the slider */
.testimonial-slider-container {
    position: relative;
    /* VERY IMPORTANT: This makes children with position:absolute; relative to this container */
    max-width: 600px;
    /* Desktop fixed width */
    margin: 0 auto;
    /* Center the container */
    height: 400px;
    /* Desktop fixed height */
    overflow: visible;
    /* IMPORTANT: Allow squares to poke out. Ensure no parent has hidden overflow. */
}

/* Wrapper for individual slides */
.testimonial-slides-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Individual Testimonial Slide */
.testimonial-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonial-slide.active {
    opacity: 1;
    z-index: 1;
    /* z-index for active slide */
}

/* Testimonial Box (Now inside each slide) */
.testimonial-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Align content to the top */
    width: 100%;
    background-color: #0d2d23;
    padding: 60px 40px;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    /* Important for z-index and potential child positioning */
    z-index: 3;
    /* HIGHER than decorative squares so text is visible over them */
    overflow: hidden;
    /* Keep this to clip content inside the box */
}

/* Image fully inside the box */
.testimonial-image {
    width: 140px;
    height: 140px;
    background-color: #fff;
    border: 4px solid #fff;
    overflow: hidden;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Testimonial text */
.testimonial-content {
    text-align: center;
    position: relative;
    /* To ensure text is on top of squares if z-index issues */
    z-index: 4;
    /* Even higher z-index if needed for text */
}

.testimonial-content h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #fff;
    font-weight: 600;
}

.testimonial-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #f1efe9;
    max-width: 500px;
    margin: 0 auto;
}

/* Decorative Squares */
.testimonial-square {
    width: 60px;
    height: 60px;
    background-color: #5b7f39;
    position: absolute;
    z-index: 2;
}

.decor-left {
    left: calc(50% - 300px - 30px);
    /* 50% of container - half container width - half square width */
    top: 90px;
    /* Adjusted to align with desktop image */
}

.decor-right {
    right: calc(50% - 300px - 30px);
    top: 90px;
    /* Adjusted to align with desktop image */
}



/* === MEDIA QUERIES === */

@media (max-width: 767px) {
    .testimonials-section {
        padding-top: 130px;
        padding-bottom: 220px;
    }

    .testimonials-title {
        font-size: 30px;
        margin-bottom: 40px;
        /* Sufficient space between title and container */
    }

    .testimonial-slider-container {
        max-width: 90%;
        height: auto;
    }

    .testimonial-box {
        padding: 30px 20px;
        height: auto;
    }

    .testimonial-image {
        width: 90px;
        height: 90px;
        margin-bottom: 15px;
    }

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

    .testimonial-content p {
        font-size: 13px;
        max-width: 95%;
    }

    /* DECORATIVE SQUARES FOR MOBILE (767px and below) */
    .testimonial-square {
        width: 35px;
        height: 35px;
        position: absolute;
        z-index: 2;
        /* Ensure it's behind the testimonial-box */
    }

    .decor-left {
        left: calc(50% - (90vw / 2) - 8px);
        /* Adjusted to make less of it peek out */
        top: -70px;
        /* FINE-TUNED: Aligned with the very top of the box */
    }

    .decor-right {
        right: calc(50% - (90vw / 2) - 8px);
        /* Adjusted to make less of it peek out */
        top: -70px;
        /* FINE-TUNED: Aligned with the very top of the box */
    }


}

@media (max-width: 480px) {

    .testimonials-section {
        padding-top: 120px;
        padding-bottom: 180px;
    }

    .testimonials-title {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .testimonial-slider-container {
        max-width: 95%;
    }

    .testimonial-box {
        padding: 25px 15px;
    }

    .testimonial-image {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
    }

    .testimonial-content h3 {
        font-size: 16px;
    }

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

    /* DECORATIVE SQUARES FOR X-SMALL MOBILE (480px and below) */
    .testimonial-square {
        width: 25px;
        height: 25px;
    }

    .decor-left {
        left: -12px;
        top: -80px;
    }

    .decor-right {
        right: -12px;
        top: -80px;
    }


}

/* TESTIMONIAL ENDS HERE   */


/* ==========================================================================  
   HERO SECTION RESPONSIVENESS
========================================================================== */

   @media (max-width: 1300px) {
  .slider-wrapper {
    max-width: 92%;
    margin-top: -20px; /* Optional: lift slider up slightly */
  }

  .hero-slider {
    height: 580px;
  }

  .green-bar-slider-left,
  .green-bar-slider-right {
    width: 100px;
    height: 300px;
    top: 50px;
  }

       .green-bar-slider-left {
  left: -40px; /* ✅ Anchors to the left edge */
   height: 560px;
     top: 40px; /* ⬇️ Same shift here too */
}

.green-bar-slider-right {
  right: -40px; /* ✅ Anchors to the right edge */
     height: 560px;
       top: 40px; /* ⬇️ Same shift here too */
}

 


  .prev {

  left: -40px; /* Pulls it to the edge of the slider */

}.next {

  right: -40px;

}

@media (max-width: 1300px) {
  .slider-wrapper {
    max-width: 92%;
    margin-top: -20px; /* Optional: lift slider up slightly */
  }

  .hero-slider {
    height: 580px;
  }

  .green-bar-slider-left,
  .green-bar-slider-right {
    width: 100px;
    height: 300px;
    top: 50px;
  }

     .green-bar-slider-left {
  left: -40px; /* ✅ Anchors to the left edge */
   height: 560px;
     top: 40px; /* ⬇️ Same shift here too */
}

.green-bar-slider-right {
  right: -40px; /* ✅ Anchors to the right edge */
     height: 560px;
       top: 40px; /* ⬇️ Same shift here too */
}

 


    .home-hero .social-icons {
    position: static; /* Change to static to be in normal flow */
    flex-direction: row; /* Arrange horizontally */
    justify-content: center; /* Center horizontally if parent is flex */
    align-items: center; /* Center vertically if parent is flex */
    width: 100%; /* Take full width to allow centering */
    margin-top: -20px; /* Push it down below the slider, adjust as needed */
    gap: 16px; /* Space between icons */
    /* Remove top, bottom, left, transform as they don't apply to static positioning */
    top: auto; /* Ensure no residual absolute positioning */
    bottom: auto; /* Ensure no residual absolute positioning */
    left: auto; /* Ensure no residual absolute positioning */
    transform: none; /* Ensure no residual transform */
  }


  .home-hero .social-icons img {
    width: 26px;
    height: 26px;
  }


  .footer-line {
    width: 85%;
    margin: 80px auto 0;
  }
}

  .footer-line {
    width: 85%;
    margin: 80px auto 0;
  }
}


/* 💻 Tablet and below (≤ 1024px) */
@media (max-width: 1024px) {
  .slider-wrapper {
    width: 95%;
  }

  .hero-slider {
    height: 500px; /* Increased height */
  }

  .green-bar-slider-left,
  .green-bar-slider-right {
    width: 90px; /* Shrink green bar width */
    height: 300px;
    top: 30px;
  }
      .green-bar-slider-left {
  left: -40px; /* ✅ Anchors to the left edge */
   height: 560px;
     top: 40px; /* ⬇️ Same shift here too */
}

.green-bar-slider-right {
  right: -40px; /* ✅ Anchors to the right edge */
     height: 560px;
       top: 40px; /* ⬇️ Same shift here too */
}



 .home-hero .social-icons {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    position: static;
    transform: none;
    margin-left: 00px;
  }

  .home-hero .social-icons img {
    width: 24px;
    height: 24px;
  }
  .footer-line {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}



/* 📱 Mobile View (≤ 767px) */
@media (max-width: 767px) {



  /* ==========================================================================  
                  HOME   
========================================================================== */
.slider .slide:nth-child(1) {
    background-image: url('images/HAYATTI_MOBILE-IMAGE-01 (1).webp');
  }

 .slider .slide:nth-child(2) {
    background-image: url('images/HAYATTI_MOBILE-IMAGE-02 (1).webp');
  }

.slider .slide:nth-child(3) {
    background-image: url('images/HAYATTI_MOBILE-IMAGE-03 (1).webp');
  }

 .slider .slide:nth-child(4) {
    background-image: url('images/HAYATTI_MOBILE-IMAGE-04 (1).webp');
  }

  .slider .slide:nth-child(5) {
    background-image: url('images/HAYATTI_MOBILE-IMAGE-05 (1).webp');
  }

  .slider .slide:nth-child(6) {
    background-image: url('images/HAYATTI_MOBILE-IMAGE-06 (1).webp');
  }

  .slider-wrapper {
    width: 70%;
    max-width: 100%;
    padding: 0 10px;
  }

  .hero-slider {
    height: 500px; /* Further increased for full-view effect */
    border-radius: 6px;
  }

  .slider .slide {
    background-size: cover;
    background-position: center;
  }

  .green-bar-slider-left,
  .green-bar-slider-right {
    width: 60px;
    height: 220px;
    top: 20px;
  }
    .green-bar-slider-left {
  left: -40px; /* ✅ Anchors to the left edge */
   height: 560px;
     top: 40px; /* ⬇️ Same shift here too */
}

.green-bar-slider-right {
  right: -40px; /* ✅ Anchors to the right edge */
     height: 560px;
       top: 40px; /* ⬇️ Same shift here too */
}



  .nav {
    width: 60px;
    height: 60px;
  }

    .nav {
    width: 62px;
    height: 62px;
    top: 50%;
    transform: translateY(-50%);
  }

  .arrow prev {
    left: -20px;
  }

  .arrow next {
    right: -20px;
  }


  .slider-dots {
    gap: 8px;
    margin: 20px 0 30px;
  }

  .dot {
    width: 10px;
    height: 10px;
  }

   .home-hero .social-icons {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    position: static;
    transform: none;
    margin-left: 145px;
  }

  .home-hero .social-icons img {
    width: 24px;
    height: 24px;
  }

  .home-hero .social-icons {
    top: auto;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 16px;
    position: static;
    margin-top: 20px;
  }

  .home-hero .social-icons img {
    width: 26px;
    height: 26px;
  }

  .footer-line {
    width: 85%;
    margin: 40px auto 0;
  }
 

}


/* 📲 Extra small devices (≤ 480px) */
@media (max-width: 480px) {
  .slider-wrapper {
    max-width: 88%;          /* ✅ Slightly narrower for center focus */
    margin: -30px auto 0;    /* ✅ Lift slider upward */
    padding: 0;
  }

  .hero-slider {
    height: 560px;           /* ✅ Taller, for immersive image */
    border-radius: 10px;
  }

  

  .green-bar-slider-left,
  .green-bar-slider-right {
     display: block;    
  position: absolute;
    width: 55px;         
    height: 160px;
    top: 30px;
     z-index: 1;  
    
      
  }

  .green-bar-slider-left {
  left: -40px; /* ✅ Anchors to the left edge */
   height: 560px;
     top: 60px; /* ⬇️ Same shift here too */
}

.green-bar-slider-right {
  right: -40px; /* ✅ Anchors to the right edge */
     height: 560px;
       top: 60px; /* ⬇️ Same shift here too */
}

  

  .slider-wrapper {
  overflow: visible !important; /* ✅ Allow green bars to spill outside if needed */
  position: relative;
}

  .nav {
    width: 42px;
    height: 42px;
  }

  .dot {
    width: 8px;
    height: 8px;
  }

  .slider-dots {
    margin: 20px 0 30px;
  }

.home-hero .social-icons {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    position: static;
    transform: none;
    margin-left: 2px;
  }

  .home-hero .social-icons img {
    width: 24px;
    height: 24px;
  }

  .footer-line {
    width: 85%;
    margin: 36px auto 0;
  }

}







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

@media (max-width: 768px) {
    .about-section {
        padding: 50px 0;
        height: auto; /* Allow height to adjust to content */
        background-size: auto 100%; /* Adjust background to fit height, cover width */
        background-position: top center;
    }

    /* STORY CONTAINER - mobile adjustments */
    .story-container {
        background-image: url('images/theStory.png'); /* Keep the background image */
        background-size: 90% auto; /* Make the background image fill width but maintain aspect ratio */
        background-position: top center; /* Position it at the top */
        width: 100%;
        height: 500px; /* Adjust height for mobile */
        margin: 0 auto 40px;
        flex-direction: column; /* Stack children vertically */
        justify-content: flex-start; /* Align content to the top */
        padding: 20px; /* Adjust padding */
        text-align: center; /* Center text */
    }


    /* TEXT BLOCK */
    .story-text-block {
        max-width: 90%; /* Allow wider text block for mobile */
        margin-left: 0; /* Remove left margin */
        padding: 0 15px; /* Add horizontal padding */
        text-align: center; /* Center text */
    }

    /* HEADING */
    .story-heading .small {
        font-size: 28px; /* Smaller font size for mobile */
        margin-bottom: -10px;
    }

    .story-heading .large {
        font-size: 52px; /* Smaller font size for mobile */
        flex-direction: column; /* Stack "STORY" and star line */
        align-items: center;
        gap: 0;
        margin-bottom: 20px;
    }

    /* STAR LINE IMAGE */
    .star-line {
        width: 100%; /* Make star line responsive */
        max-width: 250px; /* Limit max width */
        margin-left: 0; /* Remove left margin */
        transform: translateY(0);
    }

    /* PARAGRAPH */
    .story-text-block p {
        font-size: 14px; /* Slightly smaller font for paragraphs */
        text-align: center;
    }

    /* year section - mobile adjustments */
    .years-section {
        flex-direction: column; /* Stack content vertically */
        align-items: center;
        margin-top: 40px; /* Adjust top margin */
        padding: 0 15px; /* Add horizontal padding */
    }

    .years-box {
        width: 90%; /* Make the box fill most of the width */
        height: 100px; /* Adjust height */
        margin-top: 0; /* Remove negative margin */
        margin-left: 0; /* Remove left margin */
        padding-right: 20px; /* Adjust padding */
        justify-content: center; /* Center content */
    }

    .years-heading {
        flex-direction: row; /* Keep "15 YEARS" in a row */
        align-items: flex-end;
        gap: 5px;
    }

    .years-heading .big {
        font-size: 90px; /* Smaller font size */
        margin-bottom: 40px; /* Adjust margin */
    }

    .years-heading .small {
        font-size: 32px; /* Smaller font size */
        padding-bottom: 45px; /* Adjust padding */
    }

    .years-text {
        max-width: 90%; /* Adjust max-width */
        padding-left: 0; /* Remove left padding */
        text-align: center;
        margin-top: 20px; /* Add space between box and text */
    }

    .years-text p {
        font-size: 14px; /* Smaller font size */
        margin-top: 0; /* Remove negative margin */
    }

    .star-line-overlay {
        width: 250px; /* Adjust width for mobile */
        left: 50%; /* Center the overlay */
        top: 50%; /* Center vertically */
        transform: translate(-50%, -50%);
    }
}
/* =================== MOBILE STYLES (480px specific) - Precision Alignment for Reference Image =================== */


@media (max-width: 480px) {
    /* ABOUT SECTION BACKGROUND */
    .about-section {
        background-image: url('images/backgroundImage2.webp');
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        height: auto;
        width: 100%;
        padding: 40px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative; 
        min-height: 1100px; /* Adjust as needed to ensure enough vertical space for all content */
    }

    /* story-wrapper */
    .story-wrapper {
        width: 100%;
        height: 100%; /* Take full height of parent if possible */
        display: flex;
        justify-content: center;
        align-items: flex-start; /* Align content to the top of the wrapper */
        position: relative;
        margin: 0;
        padding: 0;
    }

    /* STORY CONTAINER (the main green card) */
    .story-container {
        background-image: url('images/theStory.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center center;

        width: 650px;  /* This is the visual 'length' when rotated 90deg. */
        height: 400px; /* This is the visual 'thickness' when rotated 90deg. */
        
        position: absolute;
        /* `top` adjusts the vertical position of the *center* of the rotated card on the page.
           Increase this to move the entire green card down, decrease to move it up.
           Based on the reference, it needs to be positioned within the page context. */
        top: 380px; /* This positions the whole green card. You may need to decrease this (e.g., 250px) to move the entire card higher on the page to match the reference images. */
        left: 50%; /* Keep centered horizontally on the page */
        
        transform: translate(-50%, -50%) rotate(90deg); /* Center and then rotate */
        transform-origin: center center; /* Ensure rotation is around its own center */

        display: flex;
        flex-direction: column;
        align-items: center; /* Center items within the rotated container */
        justify-content: flex-start;
        padding: 0;
        border-radius: 0;
        overflow: hidden; 
        z-index: 1;
    }

    .story-text-block {
        position: absolute;
       
        transform: rotate(-90deg) translateY(-50%); 
        
        
        top: 10px;  
        left: 460px; 
        width: 290px; 
        
        margin: 0;
        padding: 0;
        max-width: unset; 
        text-align: justify; 
        color: #fff;
        z-index: 10;
        height: auto; 
       
    }
    
    .story-heading {
        width: 100%; 
        text-align: center;
        padding-top: 5px;
        padding-bottom: 9px;
        margin-left: -10px;

    }

    .story-heading .small {
        font-size: 26px;
        margin-bottom: -5px; 
        margin-left: -60px;
    }

    .story-heading .large {
        font-size: 45px;
        margin-bottom: 20px;
        left: -90px;
       
    }
    
 
    .star-line {
        
        width: 740px;
        display: block;
        
        position: absolute; 
        top: 12%; 
        left: 65%;
        transform: none; 
        width: 1840px;
        height: auto;
        margin: 0; 
        z-index: 11;
    }


    .story-text-block p {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 0; /* Ensures no extra space above the paragraph */
        margin-bottom: 0;
        padding: 0 10px; /* Add horizontal padding to the paragraph itself */
        text-align: justify; /* Keep text justified */
    }

    /* year section - Positioning adjustment to clear the rotated story-container */
    .years-section {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0 20px;
        position: relative;
        /* Adjust this margin-top based on the final position of the green card.
           It creates the vertical space between the green card and the "15 YEARS" box. */
        margin-top: 600px; /* This value controls the vertical distance from the green card. You will need to fine-tune this in Dev Tools. Increase if "15 YEARS" is too high, decrease if too low. */
        z-index: 2;
    }

    .years-box {
        position: relative;
        background-color:#5b7f39;
        color: #fff;
        height: 80px;
        width: 80%;
        max-width: 320px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        margin-top: 300px; /* This positions it relative to years-section's top. Fine-tune */
        margin-left: -20px;
        padding-right: 25px;
        z-index: 1;
    }

    .years-heading {
        margin: 0;
        display: flex;
        align-items: flex-end;
        gap: 5px;
    }

    .years-heading .big {
        font-size: 80px;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 5px;
    }

    .years-heading .small {
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 1px;
        padding-bottom: 25px;
    }

    .years-text {
        flex: 1;
        max-width: 90%;
        padding-left: 0;
        padding-top: 15px;
        z-index: 2;
        margin-top: 0;
        text-align: left;
    }

    .years-text p {
        font-size: 13px;
        line-height: 1.6;
        color: #fff;
        margin-top: 0;
    }

    .star-line-overlay {
        position: absolute;
        top: 49%;
        left: -15%;
        transform: translate(-50%, -50%);
        width: 290px;
        height: auto;
        object-fit: contain;
        z-index: 0;
        opacity: 1;
        pointer-events: none;
    }
}



    @media (max-width: 400px){
       .star-line-overlay {
        position: absolute;
        top: 49%;
        left: -15%;
        transform: translate(-50%, -50%);
        width: 290px;
        height: auto;
        object-fit: contain;
        z-index: 0;
        opacity: 1;
        pointer-events: none;
    }
    }