@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

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

body {
    font-family: "Poppins", sans-serif;
    color: #222;
    line-height: 1.6;
    background-color: #ededed54;
}

.container {
    width: 100%;
    max-width: 1269px;
    margin: auto;
}
.container-slider {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.channel-partner {
  width: 100%;
}

.banner img {
  width: 100%;
  height: auto;
  display: block;
}
.content {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Changed from 'center' to 'flex-end' to align items to the bottom */
  flex-wrap: wrap;
  padding: 50px 10%;
  background-color: #f8f8f8;
}
/* Base left block */
.left {
  flex: 1;
  min-width: 280px;
  margin-right: 50px;
  display: flex;
  flex-direction: column;
}

/* --- Position Options --- */

/* TOP Align */
.left-top {
  justify-content: flex-start; /* content top */
  text-align: center;
}

/* ... rest of your CSS ... */

@media (max-width: 768px) {
  .left {
    margin-right: 0;
    margin-bottom: 30px; /* Add bottom margin for mobile */
    text-align: center; /* Center text on mobile */
  }

  .content {
    padding: 30px 5%; /* Adjust padding for smaller screens */
  }
}

.left h2 {
  font-size: 36px; /* Larger font size for prominence */
  line-height: 1.3;
  font-weight: 600; /* Bolder font weight */
  color: #333; /* Darker text color */
}

.right {
  flex: 1;
  min-width: 320px;
  max-width: 400px;
  background: #fff;
  padding: 30px; /* Padding inside the form container */
  border-radius: 8px; /* Slightly rounded corners for the form */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  text-align: center; /* Center content inside the form container */
}

.right h3 {
  font-size: 24px; /* Larger font for the title */
  font-weight: 700; /* Bolder font weight */
  margin-bottom: 5px;
  color: #333;
}

.right p {
  font-size: 16px; /* Slightly larger text for the tagline */
  color: #666; /* Softer text color */
  margin-bottom: 25px; /* More space below tagline */
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between form elements */
}

.register-form input {
  padding: 12px 15px; /* More padding for input fields */
  border: 1px solid #ddd;
  border-radius: 6px; /* Slightly more rounded inputs */
  font-size: 16px;
  width: 100%;
  background-color: #e0e0e0; /* Light gray background for inputs */
  color: #333;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.register-form input::placeholder {
  color: #888; /* Placeholder text color */
}
.hero-video {
    width: 100%;
    object-fit: cover;
    margin-top: -75px;
}

/* Mobile View (max-width 600px) */
@media screen and (max-width: 600px) {
    .hero-video {
        margin-top: 0px;      /* मोबाइल में ऊपर की कटिंग remove */
        height: 250px;        /* मोबाइल में decent height */
    }
}


.register-form button {
  padding: 12px 20px;
  background-color: #6a8c3d; /* Green button color as in the image */
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.register-form button:hover {
  background-color: #557231; /* Darker green on hover */
}

/* Remove or adjust banner styling if it's meant to be a full-width header
   For now, I'm commenting out the inline style to let CSS control it
   If you want the banner image, you'll need to decide its position relative to the content */

/* ======= Common Styles ======= */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown > a {
  padding: 14px 20px;
  font-size: 15px;
  letter-spacing: 0.4px;
}


/* Toggle icon (arrow) */
.toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 5px; /* Added some space */
}

.toggle-icon i {
  font-size: 0.8em;
  transition: transform 0.3s ease;
  color: white;
}

/* Dropdown menu */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 220px;   /* Increased width */
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
  z-index: 999;
  border-radius: 10px;
  padding: 12px 12px;    /* More vertical spacing */
}


.dropdown-content a {
  display: block;
  padding: 14px 20px;   /* Increased padding */
  color: #333;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: 0.3px;  /* cleaner look */
}


.dropdown-content a:hover {
  background-color: #f2f2f2;
}

/* Sub Dropdown */
.dropdown-sub {
  position: relative;
}

.dropdown-sub > a {
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* === Mega Dropdown Base === */
.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 700px;              /* same as screenshot */
  background: #fff;
  border-radius: 12px;
  padding: 30px 40px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  display: none;
  z-index: 999;
}

/* Show on hover (desktop) */
.dropdown:hover .mega-dropdown {
  display: flex;
}

/* === 2 Column Layout === */
.mega-dropdown {
  display: grid;
  grid-template-columns: 1fr 2fr;  /* left small, right big */
  gap: 40px;
}

/* === Left Column === */
.mega-left-title {
  font-size: 16px;
  font-weight: 600;
  color: #2A78FF;          /* blue like screenshot */
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* === Right Column === */
.mega-heading {
  font-size: 16px;
  font-weight: 700;
  color: #666;
  margin-bottom: 10px;
}

.mega-item {
  font-size: 15px;
  margin: 4px 0;
  color: #000;
  cursor: pointer;
}

.mega-item:hover {
  text-decoration: underline;
}


.dropdown-sub > a:hover {
  background-color: #f2f2f2;
}

.dropdown-sub .toggle-icon {
  margin-left: auto; /* Push icon to the right */
}

.dropdown-sub-content {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: #fff;
  min-width: 200px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 12px 12px;
}

.dropdown-sub-content a {
  padding: 12px 18px;
  text-align: center;
}

.dropdown-sub-content a:hover {
  background-color: #f2f2f2;
}

/* ======= Desktop (Hover) ======= */
@media (min-width: 769px) {
    
    .toggle-icon i {
  font-size: 0.8em;
  transition: transform 0.3s ease;
  color: black;
}
  .dropdown:hover .dropdown-content {
    display: block;
  }

  .dropdown:hover > .toggle-icon i {
    transform: rotate(180deg);
  }

  .dropdown-sub:hover .dropdown-sub-content {
    display: block;
  }

  .dropdown-sub:hover > .toggle-icon i {
    transform: rotate(90deg);
  }
}

/* ======= Mobile (Click-to-Open) ======= */
@media (max-width: 768px) {
  .dropdown {
    display: block;
    width: 100%;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  /* Main dropdown link and icon for mobile */
  .dropdown > a {
    width: calc(100% - 40px); /* Adjust width for icon */
    display: inline-block;
    padding: 12px 20px;
    box-sizing: border-box; /* Include padding in width calculation */
  }

  .dropdown > .toggle-icon {
    position: absolute;
    right: 10px;
    top: 12px;
  }

  .dropdown.active > .toggle-icon i {
    transform: rotate(180deg);
  }

  .dropdown-content {
    position: static;
    width: 100%;
    box-shadow: none;
    border-top: 1px solid #eee;
    display: none;
    padding: 0;
  }

  .dropdown.active .dropdown-content {
    display: block;
  }

  .dropdown-content a {
    padding: 10px 30px;
  }

  /* Sub dropdown for mobile */
  .dropdown-sub {
    position: relative;
    border-top: 1px solid #eee;
  }

  .dropdown-sub > a {
    padding: 10px 30px;
    display: flex; /* Use flex for alignment */
    justify-content: space-between; /* Space out text and icon */
    align-items: center;
    width: 100%; /* Take full width */
    box-sizing: border-box; /* Include padding in width calculation */
  }

  .dropdown-sub > .toggle-icon {
    position: static; /* Remove absolute positioning */
    margin-left: 10px; /* Add some space to the left of the icon */
    order: 2; /* Place icon after text if using flex */
  }

  .dropdown-sub.active > .toggle-icon i {
    transform: rotate(90deg);
  }

  .dropdown-sub-content {
    display: none;
    position: static;
    border-top: 1px solid #eee;
    padding: 0;
  }

  .dropdown-sub.active .dropdown-sub-content {
    display: block;
  }

  .dropdown-sub-content a {
    padding-left: 50px;
  }
}



.register-form button {
  background-color: #5cb85c;
  color: white;
  border: none;
  padding: 12px;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s;
}

.register-form button:hover {
  background-color: #4cae4c;
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
    text-align: center;
  }

  .left, .right {
    max-width: 100%;
  }
}


/* Top Bar */
.top-bar {
    background: #081b4b;
    color: #fff;
    padding: 28px 0;
    font-size: 14px;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-contact i {
    margin-right: 8px;
    rotate: 90deg;
}


/* Overall layout */
.dholera-overview {
  padding: 80px 0px;
  border-radius: 20px;
  overflow: hidden;
}

/* Container alignment */
.overview-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 50px;
}

/* Text section */
.overview-text {
  flex: 1 1 45%;
  max-width: 600px;
}

.overview-text h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #1a2b49;
  font-weight: 700;
  position: relative;
}

.overview-text h2::after {
  content: "";
  width: 60px;
  height: 4px;
  background-color: #0c1c63;
  position: absolute;
  bottom: -10px;
  left: 0;
  border-radius: 2px;
}

.overview-text p {
  color: #444;
  line-height: 1.8;
  margin-bottom: 20px;
  font-size: 1rem;
  text-align: justify;
}

.learn-more-btn {
  display: inline-block;
  padding: 10px 24px;
  background-color: #0c1c63;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.learn-more-btn:hover {
  background-color: #e25500;
  transform: translateY(-2px);
}



/* Image section */
.overview-map {
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: 0.4s ease;
}

.image-wrapper:hover {
  transform: scale(1.03);
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* Responsive layout */
@media (max-width: 992px) {
  .overview-content {
    flex-direction: column;
    text-align: center;
  }

  .overview-text h2::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .overview-text {
    max-width: 100%;
  }

  .overview-map {
    width: 100%;
  }
}


.top-bar-social a {
    color: #fff;
    margin-left: 15px;
    font-size: 16px;
    text-decoration: none;
}

.container-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.top-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.top-section h2 {
    text-align: left;
    color: #000;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.points-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.points-grid .column {
    flex: 1;
    min-width: 280px;
}

.points-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.points-grid li {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="%236cbe17"/></svg>') no-repeat left center;
    background-size: 8px 8px;
    padding-left: 20px;
    margin-bottom: 10px;
    line-height: 1.4;
    font-size: 0.95em;
}

.main-content-section {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.site-plan {
    flex: 2;
    min-width: 300px;
    text-align: center;
}

.site-plan h3 {
    color: #000;
    margin-bottom: 15px;
    font-size: 1.4em;
}

.site-plan img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.plan-visit-form {
    flex: 1;
    min-width: 280px;
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.plan-visit-form h3 {
    text-align: center;
    color: #000;
    margin-bottom: 25px;
    font-size: 1.5em;
}

.plan-visit-form form {
    display: flex;
    flex-direction: column;
}

.plan-visit-form input[type="text"],
.plan-visit-form input[type="date"],
.plan-visit-form select,
.plan-visit-form textarea {
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
    color: #333;
}

.plan-visit-form input::placeholder,
.plan-visit-form textarea::placeholder {
    color: #999;
}

.plan-visit-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23888" d="M6 9l-4-4h8z"/></svg>') no-repeat right 15px center;
    background-size: 12px;
    padding-right: 35px;
}

.plan-visit-form input[type="date"] {
    color: #999;
}

.plan-visit-form input[type="date"]:valid {
    color: #333;
}

.plan-visit-form textarea {
    min-height: 80px;
    resize: vertical;
}

.plan-visit-form button {
    background-color: #6cbe17;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
}

.plan-visit-form button:hover {
    background-color: #5aa112;
}

@media (max-width: 768px) {
    .container-wrapper {
        padding: 15px;
    }

    .top-section h2 {
        font-size: 1.6em;
        text-align: center;
    }

    .points-grid {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .points-grid .column {
        min-width: unset;
        width: 100%;
    }

    .points-grid li {
        font-size: 0.9em;
        padding-left: 18px;
    }

    .main-content-section {
        flex-direction: column;
        gap: 25px;
    }

    .site-plan,
    .plan-visit-form {
        flex: none;
        width: 100%;
        min-width: unset;
    }

    .site-plan h3,
    .plan-visit-form h3 {
        font-size: 1.3em;
    }

    .plan-visit-form {
        padding: 20px;
    }

    .plan-visit-form input,
    .plan-visit-form select,
    .plan-visit-form textarea,
    .plan-visit-form button {
        padding: 10px 12px;
        font-size: 0.95em;
    }
}

@media (max-width: 480px) {

    .container-wrapper {
        padding: 10px;
    }

    .top-section h2 {
        font-size: 1.4em;
    }

    .points-grid li {
        font-size: 0.85em;
        padding-left: 16px;
    }

    .site-plan h3,
    .plan-visit-form h3 {
        font-size: 1.2em;
    }

    .plan-visit-form input,
    .plan-visit-form select,
    .plan-visit-form textarea,
    .plan-visit-form button {
        font-size: 0.9em;
    }
}


.main-header {
    background: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / 50%);
    position: relative;
    z-index: 1000;
    border-radius: 20px;
    margin: 0 5%;
    transform: translateY(-20px);
    padding: 2px 0;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 99%;
}

.logo img {
    height: 60px;
    border-radius: 20px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 70px;
}

/* Banner Section */
.join-banner {
    background-color: #4a6400;
    /* green shade like your image */
    color: #fff;
    text-align: center;
    padding: 40px 20px;
    margin-top: 75px;
    margin-bottom: 50px;
}

.join-banner h2 {
    font-size: 45px;
    font-weight: 700;
    margin: 0 0 8px;
}

.join-banner p {
    font-size: 17px;
    font-weight: 500;
    margin: 0;
}

.join-banner a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.join-banner a:hover {
    text-decoration: underline;
}

.accordion {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.accordion-item {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-header {
    background: #f4f4f4;
    padding: 15px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header i {
    transition: 0.3s;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    background: white;
    padding: 0 15px;
}

.accordion-item.active .accordion-content {
    padding: 15px;
    max-height: 2000px; /* large so content fits */
}

.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
}


.accordion-content {
    overflow: hidden;
    padding: 0 20px;
    transition: max-height 0.3s ease;
    background: #fcfcfc;
}
.apply-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0d6efd;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: 0.3s;
}

.apply-btn:hover {
    background-color: #004fc4;
}


.accordion-content p {
    padding: 15px 0;
    color: #555;
}

.nav-links a {
    color: #222;
    text-decoration: none;
    font-weight: 500;
    padding: 5px 0;
    position: relative;
}

.nav-links a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background: #081b4b;
    left: 0;
    bottom: 0;
    transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: #081b4b;
}



/* Hero Section (Breadcrumbs) */
.hero-project {
    background-color: #657e38;
    color: #fff;
    /* padding: 20px 0; */
    margin-top: -97px;
    margin-bottom: 40px;
    padding-top: 93px;
    padding-bottom: 20px;
}

/* Dholera Smart City Overview Section */
.dholera-overview {
    padding: 20px 0 35px 0;
}

.dholera-overview h2 {
    font-size: 28px;
    font-weight: 600;
    color: #081b4b;
    margin-bottom: 30px;
    text-align: left;
}

.overview-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.overview-text {
    flex: 2;
    min-width: 300px;
    padding: 20px;
    border-radius: 20px;
    background: #F7F8FF;
}

.overview-text p {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
    text-align: justify;
}

.overview-map {
    flex: 1;
    text-align: center;
}

.overview-map img {
    width: 540px;
    height: 510px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .overview-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .overview-text {
        flex: 1 1 100%;
        min-width: unset;
    }

    .overview-text p {
        font-size: 14px;
        line-height: 1.6;
    }

    .overview-map {
        flex: 1 1 100%;
    }

    .overview-map img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 480px) {
    .overview-content {
        gap: 15px;
    }

    .overview-text p {
        font-size: 13px;
    }
}

.why-invest-section {
    padding: 20px 0;
    color: #fff;
    margin-top: 50px;
    text-align: center;
    padding-bottom: 60px;
}

.why-invest-section h2 {
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 40px;
    color: black;
}

.invest-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
}

.invest-blocks {
    flex: 2;
    max-width: 800px;
    margin: 0;
    padding: 0;
}

.invest-blocks img {
    border-radius: 10px 0 0 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invest-card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}

.invest-card:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.invest-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

.invest-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.invest-card li {
    font-size: 14px;
    margin-bottom: 5px;
    opacity: 0.9;
}

.invest-features {
    flex: 1;
    background-color: #657e38;
    border-radius: 0 10px 10px 0;
    padding: 30px;
    text-align: left;
    border-radius: 20px;
    min-width: 300px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    border: 5px solid #050A30;
}

.invest-features h3 {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 600;
}

.invest-features ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
}

.invest-features li {
    font-size: 16px;
    margin-bottom: 25px;
    position: relative;
    padding-left: 25px;
}

.invest-features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
}

.roadmap-section {
    margin-bottom: 30px;
    border: 5px solid #050a30;
    border-radius: 8px;
    padding: 20px;
    background-color: #d9e3be;
}

.roadmap-box {
    display: flex;
    flex-direction: column;
}

.event {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.event:last-child {
    margin-bottom: 0;
}

.year {
    background-color: #5cb85c;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-weight: 700;
    margin-right: 15px;
    width: 100px;
    flex-shrink: 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.year.green-bg {
    background-color: #5cb85c;
}

.year.blue-bg {
    background-color: #5bc0de;
}

.event.current .year {
    background-color: #d9534f;
    position: relative;
}

.event.current .year::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23d9534f" class="bi bi-pin-fill" viewBox="0 0 16 16"><path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .092-.008.196-.032.302-.047.197-.137.49-.287.892-.375 1.006-.889 2.059-1.398 3.123L7.76 10.38l-.75-.75L12.012 5l.764-.765c.105-.105.187-.208.236-.312.046-.098.058-.22.03-.356C13.065 3.321 12.982 3 12.83 2.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.414.236l-3 4a.5.5 0 0 0 .828.6A.5.5 0 0 0 1 8a.5.5 0 0 0 .5.5H2a.5.5 0 0 0 .5-.5V1.707L2.146.146zm4.618 10.198a.5.5 0 0 1 .707 0l4.5 4.5a.5.5 0 0 1-.707.707l-4.5-4.5a.5.5 0 0 1 0-.707z"/></svg>');
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
}

.event p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.4;
    color: #555;
    flex-grow: 1;
}

.stats-section {
    background-color: #486200;
    color: white;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.stat-card {
    text-align: center;
    flex: 1;
    min-width: 150px;
    padding: 15px;
    border-radius: 8px;
    background: #050a30;
}

.stat-card .icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: white;
}

.stat-card h3 {
    margin: 10px 0 5px;
    font-size: 1.8em;
    font-weight: 700;
    color: #f8f9fa;
}

.stat-card p {
    margin: 0;
    font-size: 0.9em;
    color: #dee2e6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding: 20px;
    }

    .title {
        font-size: 1.6em;
    }

    .roadmap-section {
        padding: 15px;
    }

    .year {
        width: 90px;
        padding: 6px 10px;
    }

    .event p {
        font-size: 0.9em;
    }

    .stats-section {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .stat-card {
        min-width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 7px;
    }

    .title {
        font-size: 1.4em;
    }

    .event {
        flex-direction: column;
        align-items: flex-start;
    }

    .year {
        margin-right: 0;
        margin-bottom: 5px;
        width: auto;
        min-width: 80px;
    }

    .event p {
        padding-left: 0;
        font-size: 0.85em;
    }
}

/* NEW SECTIONS: INVESTORS & EVENTS */
.new-section-wrapper {
    background-color: #486200;
    border-radius: 15px;
    padding: 30px;
    margin-top: 60px;
    margin-bottom: 60px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.section-heading {
    color: #d5d5d5;
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 25px;
}

.investor-marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 30px;
    background-color: white;
    border-radius: 20px;
}

.marquee-track {
    display: flex;
    gap: 60px;
    animation: scroll-left 25s linear infinite;
}

.marquee-track img {
    height: 80px;
    width: auto;
    object-fit: contain;
    filter: grayscale(20%);
    transition: transform 0.3s;
}

.marquee-track img:hover {
    transform: scale(1.1);
    filter: none;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Investor Carousel */
.investor-carousel {
    position: relative;
    width: 100%;
    padding: 20px 0;
    margin: 0 auto;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    /* Hide overflowing images */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.investor-carousel .carousel-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: calc(100% - 100px);
    /* Adjust for arrows */
    margin: 0 auto;
}

.investor-carousel .carousel-item {
    flex: 0 0 auto;
    /* Prevent items from growing/shrinking */
    width: 22%;
    /* Approx width for 4 items */
    text-align: center;
    padding: 10px;
}

.investor-carousel .carousel-item img {
    max-width: 100%;
    height: auto;
    max-height: 90px;
    /* Adjust as needed */
}

.investor-carousel .carousel-arrow {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 1.2em;
    color: #555;
    margin: 0 10px;
    flex-shrink: 0;
    z-index: 10;
}

.investor-carousel .carousel-arrow:hover {
    background-color: #e2e6ea;
}

.carousel-dots {
    text-align: center;
    margin-top: 15px;
}

.carousel-dot {
    height: 8px;
    width: 8px;
    margin: 0 4px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.carousel-dot.active {
    background-color: #5cb85c;
}

/* Events & Activities Grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    /* Responsive grid */
    gap: 15px;
    margin-top: 25px;
}

.event-item img {
    width: 100%;
    height: 200px;
    /* Fixed height for consistency */
    object-fit: fill;
    /* Cover the area, cropping if necessary */
    border-radius: 20px 20px 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    border: 5px solid #050a30;
}

.event-item img:hover {
    transform: scale(1.03);
}

/* Popup Styles */
.image-popup {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.image-popup.active {
    display: flex;
}

.image-popup .popup-img {
    max-width: 100%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    margin-top: 40px;
}

.close-popup {
    position: absolute;
    top: 30px;
    right: 40px;
    color: rgb(0, 0, 0);
    font-size: 40px;
    cursor: pointer;
    transition: 0.2s;

}

.close-popup:hover {
    color: #ff4444;
}

.download-btn {
    display: inline-block;
    background-color: #050A30;
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 20px;
    text-align: center;
    align-self: flex-start;
}

.download-btn:hover {
    background-color: #e0e0e0;
}

/* --- Responsive Styles (combined) --- */
@media (max-width: 992px) {

    /* Adjust breakpoint for invest section layout */
    .invest-content {
        flex-direction: column;
        align-items: center;
    }

    .invest-blocks,
    .invest-features {
        max-width: 100%;
    }

    .invest-blocks {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .invest-features .download-btn {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .overview-content {
        flex-direction: column;
        gap: 20px;
    }

    .dholera-overview h2 {
        text-align: center;
    }
}

.hero-project .container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hero-project h1 {
    font-size: 28px;
    font-weight: 600;
}

.hero-project p {
    font-size: 15px;
    opacity: 0.9;
}

.hero-project a {
    color: #fff;
    text-decoration: none;
}

.hero-project a:hover {
    text-decoration: underline;
}

/* Project Page Specific Styles */
.project-section {
    padding: 20px 10px 60px 10px;
}

.project-section h2 {
    font-size: 28px;
    color: #081b4b;
    margin-bottom: 40px;
}


.township-map {
    width: 100%;
    max-width: 900px;
    /* Adjust max width as needed */
    margin: 0 auto 50px auto;
    border: 1px solid #ddd;
    /* Light border around the main map */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.township-map img {
    width: 100%;
    display: block;
    height: auto;
}

.project-phases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
}

.phase-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    /* Ensure cards are same height */
}

.phase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.phase-card img {
    width: 100%;
    height: 200px;
    /* Fixed height for consistent image size */
    object-fit: contain;
    /* Contain the image within its box */
    padding: 15px;
    /* Add padding inside the card for image */
    background-color: #fcfcfc;
}

.phase-card h3 {
    font-size: 18px;
    color: #081b4b;
    margin: 15px 10px 5px 10px;
    font-weight: 600;
}

.phase-card p {
    font-size: 14px;
    color: #555;
    padding: 0 15px 15px 15px;
    flex-grow: 1;
    /* Allow paragraph to take available space */
}

.about-small-images .about-image-card {
    flex: 1;
    /* Make small images share space equally */
    height: 230px;
    /* Fixed height for small images */
    width: 300px;
}

/* Responsive adjustments for about gallery */
@media (max-width: 768px) {
    .about-gallery {
        flex-direction: column;
        /* Stack all images vertically on small screens */
        gap: 15px;
    }

    .about-small-images {
        flex-direction: column;
        /* Stack small images vertically on small screens */
    }

    .about-image-card.main-image {
        height: 250px;
        /* Adjust main image height for smaller screens */
    }

    .about-small-images .about-image-card {
        height: 120px;
        /* Adjust small image height for smaller screens */
    }
}

.team {
    padding: 60px 0;
    text-align: center;
}

.team h2 {
    font-size: 28px;
    color: #081b4b;
    margin-bottom: 40px;
}

/* Swiper Wrapper inherits spacing */
.team .swiper {
    padding-bottom: 60px;
}

/* Swiper Controls */
.swiper-button-next,
.swiper-button-prev {
    color: white;
}
.swiper-pagination-bullet-active {
    background: #657e38;
}

/* Footer */
footer {
    background: #081b4b;
    color: #fff;
    padding-top: 40px;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    padding-bottom: 30px;
}

.footer-about {
    flex: 1;
    min-width: 250px;
}

.footer-about img {
    width: 140px;
    margin-bottom: 15px;
    filter: brightness(0) invert(1);
    /* Make logo white */
}

.footer-about p {
    font-size: 15px;
    line-height: 1.8;
}

.footer-links {
    flex: 1;
    min-width: 180px;
}

.footer-links h4,
.footer-form h4 {
    margin-bottom: 20px;
    font-size: 18px;
    position: relative;
}

.footer-links h4::after,
.footer-form h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 40px;
    height: 2px;
    background: #fff;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 15px;
}

.footer-links a:hover {
    color: #a7d0ff;
    /* Lighter blue on hover */
    text-decoration: underline;
}

.footer-form {
    flex: 1;
    min-width: 250px;
}

.footer-form input,
.footer-form textarea {
    width: 100%;
    margin-bottom: 15px;
    padding: 12px;
    border-radius: 6px;
    border: none;
    outline: none;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
}

.footer-form button {
    background: #fff;
    color: #081b4b;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease;
}

.footer-form button:hover {
    background: #e0e0e0;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding: 15px;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .top-bar-content {
        flex-direction: column;
        gap: 10px;
    }

    .main-header {
        margin: 0;
        border-radius: 0;
        transform: translateY(0);
    }

    .nav-links {
        position: absolute;
        top: 90px;
        /* Adjust if top-bar height changes */
        right: 0;
        background: #081b4b;
        flex-direction: column;
        width: 100%;
        display: none;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        padding: 20px 0;
        border-radius: 0 0 10px 10px;
        gap: 20px;
    }


    .nav-links a {
        color: #fff;
        padding: 10px 20px;
        background: #081b4b;
    }

    .nav-links a::after {
        background: #fff;
    }

    .nav-links.show {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    .about-content {
        flex-direction: column;
    }

    .team-members {}

    .footer-top {
        flex-direction: column;
    }

    .footer-links h4::after,
    .footer-form h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-about img {
        margin-left: auto;
        margin-right: auto;
    }
}

.testimonials-section {
    padding: 20px 0;
    text-align: center;
    margin-bottom: 40px;
    border-radius: 20px;
    color: black;
}

.testimonials-section h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

/* Swiper Container */
.swiper {
    width: 92.4%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 50px;
}

.swiper-slide {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 350px !important;
}

.investor-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.investor-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #6c757d;
    object-fit: cover;
    margin-bottom: 10px;
}

.investor-name {
    font-weight: bold;
    font-size: 18px;
}

.testimonial-text {
    color: #000000;
    font-size: 16px;
    margin-bottom: 10px;
}

.investor-location {
    font-style: italic;
    color: #999;
    font-size: 14px;
}

/* Swiper Arrows */
.swiper-button-prev,
.swiper-button-next {
    background-color: #343a40;
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 18px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: #495057;
}

/* Pagination Dots */
.swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #fff;
}

@media (max-width: 992px) {
    .swiper-slide {
        width: 337px !important;
    }
}

@media (max-width: 768px) {
    .testimonials-section h2 {
        font-size: 26px;
    }

    .swiper-slide {
        padding: 20px;
        font-size: 15px;
    }

    .investor-img {
        width: 70px;
        height: 70px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
        /* Hide arrows on small screens (use swipe) */
    }
}

.latest-videos-section {
    background-color: #ffffff;
    /* White background */
    padding: 60px 0;
    font-family: Arial, sans-serif;
}

.latest-videos-section h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    color: #333333;
}

.video-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    background-color: #f8f9fa;
    border-radius: 20px;
    padding: 40px 60px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    border: 10px solid #050A30;
}

/* Header with Add Review button */
.testimonial-header {
    max-width: 1200px;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-review-btn {
    background: #0c1441;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
}

.add-review-btn:hover {
    background: #111a52;
}

/* Popup Background */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease-in-out;
    z-index: 99999;
}

/* Popup Box */
.popup-box {
    width: 350px;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    animation: zoomIn 0.25s ease-in-out;
    position: relative;
}

@keyframes zoomIn {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.popup-box input,
.popup-box textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.popup-box textarea {
    height: 90px;
}

/* Submit */
.submit-btn {
    width: 100%;
    background: #657e38;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.close-popup {
    position: absolute;
    right: 12px;
    top: 10px;
    cursor: pointer;
    font-size: 22px;
    color: #333;
}

#responseMsg {
    text-align: center;
    font-size: 14px;
}


.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    width: 100%;
    padding: 0 20px;
}

.video-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.video-item:hover {
    transform: translateY(-5px);
}
    .project-body {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.project-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-body .img-link {
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.project-body .img-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
}

.project-body .img-link:hover::after {
  background: rgba(0, 0, 0, 0.1); /* slight hover overlay */
}
.video-item img:first-of-type {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.youtube-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: auto;
    z-index: 5;
    pointer-events: none;
}

.slider-arrow {
    background-color: #e0e0e0;
    color: #555555;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.slider-arrow:hover {
    background-color: #d0d0d0;
    color: #333333;
}

.prev-arrow {
    left: 15px;
}

.next-arrow {
    right: 15px;
}

@media (max-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .video-item img:first-of-type {
        height: 160px;
    }
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .video-item img:first-of-type {
        height: 200px;
    }

    .video-slider-wrapper {
        padding: 30px 40px;
    }

    .slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .prev-arrow {
        left: 10px;
    }

    .next-arrow {
        right: 10px;
    }

    .youtube-play-button {
        width: 60px;
    }
}

@media (max-width: 576px) {
    .latest-videos-section h2 {
        font-size: 30px;
    }

    .video-slider-wrapper {
        padding: 20px 10px;
    }

    .prev-arrow {
        left: 5px;
    }

    .next-arrow {
        right: 5px;
    }

    .youtube-play-button {
        width: 50px;
    }
}

.roadmap-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 5px;
}

.roadmap-year-block {
    color: white;
    padding: 8px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roadmap-description-wrapper {
    padding: 8px 10px;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: white;
}

.roadmap-description {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
}

.roadmap-item-2026 .roadmap-year-block {
    background-color: #486200;
    width: 350px;
}

.roadmap-item-2025 .roadmap-year-block {
    background-color: #050a30;
    width: 323px;
}

.roadmap-item-dec2024 .roadmap-year-block {
    background-color: #486200;
    width: 297px;
}

.roadmap-item-sep2024 .roadmap-year-block {
    background-color: #050a30;
    width: 269px;
}

.roadmap-item-mar2024 .roadmap-year-block {
    background-color: #486200;
    width: 243px;
}

.roadmap-item-sep2023 .roadmap-year-block {
    background-color: #050a30;
    width: 216px;
}

.roadmap-item-jun2022 .roadmap-year-block {
    background-color: #486200;
    width: 186px;
}

.roadmap-item-unknown .roadmap-year-block {
    background-color: #050a30;
    width: 376px;
    font-size: 20px;
}

@media (max-width: 768px) {
    .roadmap-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .roadmap-year-block,
    .roadmap-description-wrapper {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
        padding: 6px 8px;
    }

    .roadmap-description {
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
        color: white;
    }

    .roadmap-item-unknown .roadmap-description,
    .roadmap-item-2026 .roadmap-description,
    .roadmap-item-2025 .roadmap-description,
    .roadmap-item-dec2024 .roadmap-description,
    .roadmap-item-sep2024 .roadmap-description,
    .roadmap-item-mar2024 .roadmap-description,
    .roadmap-item-sep2023 .roadmap-description,
    .roadmap-item-jun2022 .roadmap-description {
        color: black;
    }
}

.container-custom {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    margin: 40px auto;
    padding: 0 20px;
}

.card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Specific card layouts */
.about-card {
    grid-column: 1 / 2;
}

.details-card {
    grid-column: 2 / 3;
}

.amenities-card {
    grid-column: 1 / 2;
}

.brochure-card {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    overflow: hidden;
}

/* Details Card */
.details-card .detail-item {
    margin-bottom: 20px;
}

.details-card .detail-item:last-child {
    margin-bottom: 0;
}

.details-card .detail-label {
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
}

.details-card .detail-value {
    font-size: 16px;
    color: #333;
    font-weight: bold;
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 25px;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #333;
}

.amenity-icon {
    width: 24px;
    height: 24px;
    background-color: #e0e0e0;
    border-radius: 4px;
    flex-shrink: 0;
}

.brochure-image-container {
    position: relative;
    width: 100%;
    padding-top: 140%;
    background-color: #f0f8ff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.brochure-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-button {
    background-color: #050a30;
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: calc(100% - 60px);
    margin-bottom: 30px;
}

.download-button:hover {
    background-color: #0056b3;
}

@media (max-width: 768px) {
    .container-custom {
        grid-template-columns: 1fr;
    }

    .about-card,
    .details-card,
    .amenities-card,
    .brochure-card {
        grid-column: 1 / -1;
    }

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

    .brochure-image-container {
        padding-top: 100%;
    }
}

.projects-section {
    margin: auto;
    padding: 20px 0;
}

.project-card {
    background-color: #e6e6e6;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.project-header {
    padding: 15px 20px;
    font-weight: 700;
    font-size: 18px;
    background: transparent;
    color: #0c1c63;
}

.project-body {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 16px;
}

.project-footer {
    background-color: #486200;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 30px;
    border-top: 2px solid #2e3a02;
    border-radius: 0 0 20px 20px;
     margin-top: -3px;
}

.feature {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-right: 20px;
    margin-bottom: 8px;
}

.feature::before {
    content: "✔";
    font-weight: bold;
    margin-right: 6px;
    color: white;
    background: #050a30;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.view-btn {
    margin-left: 100px;
    margin-top: -30px;
    background-color: #0c1c63;
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

.view-btn:hover {
    background-color: #06104b;
}

.project-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: flex-end;
    z-index: 1000;
    overflow-y: auto;
}

.popup-content {
    background: #fff;
    width: 100%;
    max-width: 500px;
    border-radius: 20px 20px 0 0;
    padding: 30px;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.project-popup.show .popup-content {
    transform: translateY(0);
}

.close-popup {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: black;
}

#inquiry-form {
    display: flex;
    flex-direction: column;
}

#inquiry-form label {
    margin: 10px 0 5px;
    font-weight: 600;
}

#inquiry-form input[type="text"],
#inquiry-form input[type="tel"],
#inquiry-form input[type="email"] {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.radio-group {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.submit-btn {
    background-color: #0c1c63;
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s ease;
}

.submit-btn:hover {
    background-color: #06104b;
}

@media (max-width: 480px) {
    .popup-content {
        padding: 20px;
        border-radius: 15px 15px 0 0;
    }
}

@media (max-width: 768px) {
    .project-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .feature {
        width: 100%;
    }

    .view-btn {
        align-self: center;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .project-body {
        height: 150px;
        font-size: 14px;
    }
}

.subtitle {
    margin-top: 20px;
    margin-bottom: 20px;
}

.para-gap {
    margin-top: 20px;
    margin-bottom: 20px;
}


.testimonials-section {
    padding: 50px 0;
    background: #f9f9f9;
}

.testimonials-section h2 {
    text-align: center;
    margin-bottom: 40px;
    color: #222;
}

.testimonials-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    max-width: 1200px;
    margin: auto;
}

.testimonial-left {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
}

.testimonial-right {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.testimonial-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.testimonial-card:hover {
    transform: translateY(-5px);
}

.testimonial-card p {
    color: #555;
    font-style: italic;
}

.testimonial-card h4 {
    margin-top: 10px;
    color: #1976d2;
}


    .channel-partner {
  width: 100%;
}

.banner img {
  width: 100%;
  height: auto;
  display: block;
}

.content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 50px 10%;
}

.left {
  flex: 1;
  min-width: 280px;
  margin-bottom: 30px;
}

.left h2 {
  font-size: 32px;
  line-height: 1.5;
  font-weight: 600;
  margin-top: 120px;
}

.right {
  flex: 1;
  min-width: 320px;
  max-width: 400px;
  background: #fff;
}

.right h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
}

.right p {
  font-size: 14px;
  color: #777;
  margin-bottom: 20px;
}

.register-form {
  display: flex;
  flex-direction: column;
}

.register-form input {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
}

.register-form button {
  background-color: #5cb85c;
  color: white;
  border: none;
  padding: 12px;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s;
}

.register-form button:hover {
  background-color: #4cae4c;
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
    text-align: center;
  }

  .left, .right {
    max-width: 100%;
  }
}