/* CSS Reset & Base Styles */
      * {
        margin: 0;
        padding: 0;
        max-width: 100vw;
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        font-size: 16px;
      }

      body {
        font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        color: #333;
        overflow-x: hidden;
      }

      /* Custom Properties */
      :root {
        --primary-color: #2c5530;
        --secondary-color: #8fbc8f;
        --accent-color: #ff6b35;
        --text-dark: #2c3e50;
        --text-light: #7f8c8d;
        --bg-light: #f8f9fa;
        --white: #ffffff;
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
        --transition: all 0.3s ease;
        --border-radius: 12px;

        /* Modern Font Families */
        --font-heading: "Playfair Display", serif;
        --font-subheading: "Montserrat", sans-serif;
        --font-body: "Inter", sans-serif;
      }

      /* Animation Keyframes */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(50px);
        }

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

      @keyframes fadeInLeft {
        from {
          opacity: 0;
          transform: translateX(-50px);
        }

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

      @keyframes fadeInRight {
        from {
          opacity: 0;
          transform: translateX(50px);
        }

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

      @keyframes slideInDown {
        from {
          opacity: 0;
          transform: translateY(-100%);
        }

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

      @keyframes pulse {

        0%,
        100% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.05);
        }
      }

      @keyframes float {

        0%,
        100% {
          transform: translateY(0px);
        }

        50% {
          transform: translateY(-20px);
        }
      }

      /* Utility Classes */
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
      }

      .section {
        padding: 100px 0;
        position: relative;
      }

      .section-title {
        font-family: var(--font-heading);
        font-size: 3.5rem;
        font-weight: 700;
        text-align: center;
        margin-bottom: 20px;
        color: var(--text-dark);
        position: relative;
        letter-spacing: -0.02em;
        line-height: 1.2;
      }

      .section-title::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(45deg,
            var(--primary-color),
            var(--secondary-color));
        border-radius: 2px;
      }

      .section-subtitle {
        font-family: var(--font-subheading);
        font-size: 1.2rem;
        font-weight: 500;
        color: var(--text-light);
        text-align: center;
        margin-bottom: 60px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        letter-spacing: 0.01em;
      }

      .btn {
        display: inline-block;
        padding: 15px 30px;
        background: linear-gradient(45deg,
            var(--primary-color),
            var(--secondary-color));
        color: var(--white);
        text-decoration: none;
        border-radius: var(--border-radius);
        font-family: var(--font-subheading);
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: 0.02em;
        transition: var(--transition);
        box-shadow: var(--shadow);
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
        transition: left 0.5s;
      }

      .btn:hover::before {
        left: 100%;
      }

      .btn:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
      }

      .btn-outline {
        background: transparent;
        color: var(--primary-color);
        border: 2px solid var(--primary-color);
      }

      .btn-outline:hover {
        background: var(--primary-color);
        color: var(--white);
      }

      /* Animation Classes */
      .animate-on-scroll {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease;
      }

      .animate-on-scroll.animated {
        opacity: 1;
        transform: translateY(0);
        max-width: 100vw;
      }

      .animate-left {
        opacity: 0;
        transform: translateX(-50px);
        transition: all 0.8s ease;
      }

      .animate-left.animated {
        opacity: 1;
        transform: translateX(0);
      }

      .animate-right {
        opacity: 0;
        transform: translateX(50px);
        transition: all 0.8s ease;
      }

      .animate-right.animated {
        opacity: 1;
        transform: translateX(0);
      }

      /* Header Styles - Updated for Transparency */
      .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: transparent;
        backdrop-filter: none;
        z-index: 1000;
        padding: 25px 0;
        max-width: 100vw;

        transition: all 0.4s ease;
      }

      .header.scrolled {
        padding: 10px 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(15px);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
      }

      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 100vw;
      }

      .logo {
        font-family: var(--font-heading);
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--white);
        text-decoration: none;
        transition: var(--transition);
        letter-spacing: -0.02em;
      }

      .logo img {
        height: 70px;
      }

      .header.scrolled .logo {
        color: var(--primary-color);
      }

      .logo:hover {
        transform: scale(1.05);
      }

      .nav-menu {
        display: flex;
        list-style: none;
        gap: 40px;
      }

      .nav-link {
        color: var(--white);
        text-decoration: none;
        font-family: var(--font-subheading);
        font-weight: 500;
        font-size: 1rem;
        letter-spacing: 0.02em;
        transition: var(--transition);
        position: relative;
      }

      .header.scrolled .nav-link {
        color: var(--text-dark);
      }

      .nav-link::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--white);
        transition: width 0.3s ease;
      }

      .header.scrolled .nav-link::after {
        background: var(--primary-color);
      }

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

      .nav-link:hover {
        color: rgba(255, 255, 255, 0.8);
      }

      .header.scrolled .nav-link:hover {
        color: var(--primary-color);
      }

      .hamburger {
        display: none;
        flex-direction: column;
        cursor: pointer;
        padding: 5px;
      }

      .hamburger span {
        width: 25px;
        height: 3px;
        background: #000;
        margin: 3px 0;
        transition: var(--transition);
      }

      /* Hamburger icon colors */
      .hamburger span {
        background: var(--white);
        transition: var(--transition);
      }

      .header.scrolled .hamburger span {
        background: var(--text-dark);
      }

      .nav-menu.active+.hamburger span {
        background: var(--text-dark);
      }

      .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(9px, 9px);
      }

      .hamburger.active span:nth-child(2) {
        opacity: 0;
      }

      .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(9px, -9px);
      }

      /* Hero Section */
      .hero {
        height: 100vh;
        background: linear-gradient(135deg,
            rgba(44, 85, 48, 0.8),
            rgba(143, 188, 143, 0.6)),
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect fill="%23f0f8f0" width="1200" height="800"/><g fill="%23c8e6c9"><path d="M0,400 Q300,200 600,400 T1200,400 V800 H0 Z"/></g><g fill="%23a5d6a7"><circle cx="200" cy="200" r="80"/><circle cx="800" cy="150" r="60"/><circle cx="1000" cy="300" r="100"/></g></svg>');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--white);
        position: relative;
        overflow: hidden;
      }

      .hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg,
            rgba(44, 85, 48, 0.6),
            rgba(143, 188, 143, 0.4));
        z-index: 1;
      }

      .hero-content {
        position: relative;
        z-index: 2;
        max-width: 800px;
        animation: fadeInUp 1s ease-out;
      }

      .hero-title {
        font-family: var(--font-subheading);
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 15px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        animation: slideInDown 1s ease-out;
        letter-spacing: 0.05em;
        line-height: 1.1;
        text-transform: uppercase;
      }

      .hero-subtitle {
        font-family: var(--font-body);
        font-size: 1.5rem;
        font-weight: 500;
        margin-bottom: 15px;
        opacity: 0.9;
        animation: fadeInUp 1s ease-out 0.3s both;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-style: italic;
      }

      .hero-description {
        font-family: var(--font-body);
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 40px;
        opacity: 0.8;
        animation: fadeInUp 1s ease-out 0.6s both;
        line-height: 1.7;
      }

      .hero-buttons {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
        animation: fadeInUp 1s ease-out 0.9s both;
      }

      .floating-elements {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .floating-element {
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        animation: float 6s ease-in-out infinite;
      }

      .floating-element:nth-child(1) {
        width: 80px;
        height: 80px;
        top: 20%;
        left: 10%;
        animation-delay: 0s;
      }

      .floating-element:nth-child(2) {
        width: 120px;
        height: 120px;
        top: 60%;
        right: 15%;
        animation-delay: 2s;
      }

      .floating-element:nth-child(3) {
        width: 60px;
        height: 60px;
        bottom: 30%;
        left: 20%;
        animation-delay: 4s;
      }

      /* About Section */
      .about {
        background: var(--bg-light);
      }

      .about-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
      }

      .about-text {
        font-family: var(--font-body);
        font-size: 1.1rem;
        line-height: 1.8;
        color: var(--text-light);
      }

      .about-text h3 {
        font-family: var(--font-heading);
        font-size: 2.5rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 20px;
        letter-spacing: -0.02em;
        line-height: 1.2;
      }

      .about-text p {
        margin-bottom: 20px;
      }

      .about-image {
        position: relative;
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: var(--transition);
      }

      .about-image:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-hover);
      }

      .about-image img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        transition: var(--transition);
      }

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

      /* Services Section */
      .services {
        background: var(--white);
      }

      .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
        margin-top: 60px;
      }

      .service-card {
        background: var(--white);
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: var(--transition);
        transition-delay: 0;
      }

      .service-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-hover);
      }

      .service-image {
        position: relative;
        /* border-radius: var(--border-radius); */
        overflow: hidden;
        /* box-shadow: var(--shadow); */
        /* transition: var(--transition); */
        height: 200px;
      }

      .service-imgae img {
        object-fit: cover;
        /* transition: var(--transition); */
      }

      .service-content {
        padding: 30px;
      }

      .service-content h3 {
        font-family: var(--font-heading);
        font-size: 1.6rem;
        font-weight: 600;
        margin-bottom: 15px;
        color: var(--text-dark);
        letter-spacing: -0.01em;
      }

      .service-content p {
        font-family: var(--font-body);
        color: var(--text-light);
        line-height: 1.6;
        margin-bottom: 20px;
      }

      /* Contact Section */
      .contact {
        background: var(--bg-light);
      }

      .contact-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        margin-top: 60px;
      }

      .contact-info h3 {
        font-family: var(--font-heading);
        font-size: 2.2rem;
        font-weight: 600;
        margin-bottom: 30px;
        color: var(--text-dark);
        letter-spacing: -0.02em;
      }

      .contact-item {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        padding: 20px;
        background: var(--white);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);
        transition: var(--transition);
        max-width: 100vw;

      }

      .contact-item:hover {
        transform: translateX(10px);
        box-shadow: var(--shadow-hover);
      }

      .contact-icon {
        width: 50px;
        height: 50px;
        background: linear-gradient(45deg,
            var(--primary-color),
            var(--secondary-color));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        margin-right: 20px;
        font-size: 1.2rem;
      }

      .contact-item * {
        max-width: 100vw;
      }

      .contact-item h4 {
        font-family: var(--font-subheading);
        font-weight: 600;
        font-size: 1.1rem;
        color: var(--text-dark);
        margin-bottom: 5px;
      }

      .contact-item p {
        font-family: var(--font-body);
        color: var(--text-light);
        line-height: 1.5;
      }

      .contact-form {
        background: var(--white);
        padding: 40px;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);
      }

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

      .form-group label {
        display: block;
        margin-bottom: 8px;
        font-family: var(--font-subheading);
        font-weight: 600;
        color: var(--text-dark);
      }

      .form-group input,
      .form-group textarea {
        width: 100%;
        padding: 15px;
        border: 2px solid #e0e0e0;
        border-radius: var(--border-radius);
        font-family: var(--font-body);
        font-size: 1rem;
        transition: var(--transition);
      }

      .form-group input:focus,
      .form-group textarea:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(44, 85, 48, 0.1);
      }

      .form-group textarea {
        resize: vertical;
        min-height: 120px;
      }

      /* Footer */
      .footer {
        background: var(--text-dark);
        color: var(--white);
        padding: 60px 0 30px;
      }

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

      .footer-section h3 {
        font-family: var(--font-heading);
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--secondary-color);
        letter-spacing: -0.01em;
      }

      .footer-section p,
      .footer-section a {
        font-family: var(--font-body);
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        line-height: 1.6;
        transition: var(--transition);
      }

      .footer-section a:hover {
        color: var(--secondary-color);
      }

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

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

      .social-links {
        display: flex;
        gap: 15px;
        margin-top: 20px;
      }

      .social-link {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        transition: var(--transition);
      }

      .social-link:hover {
        background: var(--secondary-color);
        transform: translateY(-3px);
      }

      .social-link:hover i {
        color: var(--text-dark);
      }

      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 30px;
        text-align: center;
        color: rgba(255, 255, 255, 0.6);
        font-family: var(--font-body);
      }

      /* Scroll to Top Button */
      .scroll-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: var(--primary-color);
        color: var(--white);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 1000;
        font-family: var(--font-subheading);
        font-weight: 600;
      }

      .scroll-top.visible {
        opacity: 1;
        visibility: visible;
      }

      .scroll-top:hover {
        background: var(--secondary-color);
        transform: translateY(-3px);
      }

      /* Responsive Design */
      @media (max-width: 768px) {
        .hero-title {
          font-size: 2.8rem;
          margin-bottom: 10px;
          padding: 0 15px;
        }

        .hero-subtitle {
          font-size: 1.2rem;
          margin-bottom: 15px;
          padding: 0 15px;
        }

        .hero-description {
          font-size: 1rem;
          margin-bottom: 30px;
          padding: 0 15px;
        }

        .nav-menu {
          position: fixed;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100vh;
          background: var(--white);
          flex-direction: column;
          justify-content: flex-start;
          padding-top: 80px;
          transition: var(--transition);
          z-index: 1000;
          gap: 15px;
        }

        .nav-menu.active {
          left: 0;
        }

        .nav-menu.active .nav-link {
          color: var(--text-dark);
          padding: 10px 20px;
          display: block;
        }

        .hamburger {
          display: flex;
          z-index: 1001;
        }

        .hero-title {
          font-size: 3.5rem;
        }

        .hero-subtitle {
          font-size: 1.4rem;
        }

        .hero-buttons {
          flex-direction: column;
          align-items: center;
        }

        .section-title {
          font-size: 2.5rem;
        }

        .about-content {
          grid-template-columns: 1fr;
          gap: 40px;
        }

        .contact-content {
          grid-template-columns: 1fr;
          gap: 40px;
        }

        .section {
          padding: 60px 0;
        }

        .container {
          padding: 0 15px;
        }
      }

      @media (max-width: 480px) {
        .hero-title {
          font-size: 2.2rem;
          margin-bottom: 8px;
          padding: 0 10px;
        }

        .hero-subtitle {
          font-size: 1rem;
          margin-bottom: 12px;
          padding: 0 10px;
        }

        .hero-description {
          font-size: 0.9rem;
          margin-bottom: 25px;
          padding: 0 10px;
        }

        .hero-buttons {
          gap: 15px;
        }

        .section-title {
          font-size: 2rem;
        }

        .btn {
          padding: 12px 24px;
          font-size: 0.9rem;
        }

        .contact-form {
          padding: 30px 20px;
        }
      }

      /* Custom keyframes for fade-in and fade-out */
      @keyframes fadeIn {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      }

      @keyframes fadeOut {
        from {
          opacity: 1;
        }

        to {
          opacity: 0;
        }
      }

      .animate-fade-in {
        animation: fadeIn 0.5s ease-out forwards;
      }

      .animate-fade-out {
        animation: fadeOut 0.5s ease-out forwards;
      }

      /* Confetti canvas styling */
      #confetti-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        /* Allows clicks to pass through */
        z-index: 1000;
        /* Below the modal but above other content */
      }

      /* Success Modal Container */
      #successModal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        /* hidden */
        align-items: center;
        justify-content: center;
        z-index: 9999;
        /* z-[9999] */
      }

      /* Blurred Overlay */
      #successModal .modal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(17, 24, 39, 0.75);
        /* bg-gray-900 bg-opacity-75 */
        backdrop-filter: blur(8px);
        /* backdrop-blur-sm */
      }

      /* Modal Content Box */
      #successModal .modal-content {
        position: relative;
        background-color: #ffffff;
        /* bg-white */
        padding: 2rem;
        /* p-8 */
        border-radius: 0.75rem;
        /* rounded-xl */
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        /* shadow-2xl */
        max-width: 28rem;
        /* max-w-sm (448px) */
        width: 91.666667%;
        /* w-11/12 */
        margin-left: auto;
        /* mx-auto */
        margin-right: auto;
        /* mx-auto */
        text-align: center;
        /* text-center */
        transform: scale(0.95);
        /* transform scale-95 */
        opacity: 0;
        /* opacity-0 */
        animation-delay: 0.1s;
        /* animation-delay: 0.1s; */
      }

      /* Close Button */
      #closeModalBtn {
        position: absolute;
        top: 1rem;
        /* top-4 */
        right: 1rem;
        /* right-4 */
        color: #9ca3af;
        /* text-gray-400 */
        transition: color 0.2s ease;
        /* transition duration-200 */
        border: none;
        background: none;
        cursor: pointer;
        outline: none;
        /* focus:outline-none */
        padding: 0;
      }

      #closeModalBtn:hover {
        color: #4b5563;
        /* hover:text-gray-600 */
      }

      #closeModalBtn svg {
        width: 1.5rem;
        /* w-6 */
        height: 1.5rem;
        /* h-6 */
      }

      /* Huge Tick Mark Container */
      .tick-mark-container {
        margin-bottom: 1.5rem;
        /* mb-6 */
        display: flex;
        /* flex */
        justify-content: center;
        /* justify-center */
      }

      .tick-mark-container svg {
        width: 6rem;
        /* w-24 */
        height: 6rem;
        /* h-24 */
        color: #22c55e;
        /* text-green-500 */
      }

      /* Main Success Message */
      .main-message {
        font-size: 1.875rem;
        /* text-3xl */
        font-weight: 700;
        /* font-bold */
        color: #1f2937;
        /* text-gray-800 */
        margin-bottom: 0.5rem;
        /* mb-2 */
      }

      /* Small Greyish Message */
      .sub-message {
        color: #6b7280;
        /* text-gray-500 */
        font-size: 0.875rem;
        /* text-sm */
        margin-bottom: 1.5rem;
        /* mb-6 */
      }

      /* OK Button inside modal */
      #okButton {
        padding: 0.625rem 1.25rem;
        /* px-5 py-2 */
        background-color: #16a34a;
        /* bg-green-600 */
        color: #ffffff;
        /* text-white */
        border-radius: 0.5rem;
        /* rounded-lg */
        transition: background-color 0.3s ease;
        /* hover:bg-green-700 transition duration-300 */
        border: none;
        cursor: pointer;
        outline: none;
        /* focus:outline-none */
      }

      #okButton:hover {
        background-color: #15803d;
        /* hover:bg-green-700 */
      }