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

     :root {
         --bg-color: #0D1117;
         --primary-green: #00ff99;
         --dark-teal: #008080;
         --text-color: #E0E0E0;
         --text-dark: #a0a0a0;
         --nav-bg: rgba(15, 20, 28, 0.8);
         --hero-bg-start: rgba(0, 255, 153, 0.05);
         --hero-bg-end: rgba(0, 128, 128, 0.15);
         --border-color: rgba(0, 255, 153, 0.2);
         font-size: 14px;
     }

     /* Hide the Google Translate top bar */

     .goog-te-banner-frame.skiptranslate {
         display: none !important;
     }

     /* Prevent Google Translate from adding margin to the top of the page */

     html {
         margin-top: 0 !important;
     }

     /* This is the new body rule that combines the previous ones */

     body {
         top: 0 !important;
     }

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

     body {
         font-family: 'Poppins', sans-serif;
         background-color: var(--bg-color);
         color: var(--text-color);
         overflow-x: hidden;
         padding-top: 67px;
         /* Account for the height of the fixed header */
     }

     .site-header {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         z-index: 1000;
         background: var(--nav-bg);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
         border-bottom: 1px solid var(--border-color);
     }

     .navbar {
         display: flex;
         justify-content: space-between;
         align-items: center;
         max-width: 1200px;
         margin: 0 auto;
         padding: 1rem 2rem;
     }

     .logo {
         font-size: 1.3rem;
         font-weight: 700;
         color: var(--primary-green);
         text-decoration: none;
     }

     .main-nav {
         display: flex;
         align-items: center;
     }

     .nav-links {
         list-style: none;
         display: flex;
         gap: 1.5rem;
     }

     .nav-links a {
         color: var(--text-color);
         text-decoration: none;
         font-weight: 400;
         position: relative;
         padding-bottom: 0.5rem;
         transition: color 0.3s ease;
         display: flex;
         align-items: center;
         gap: 0.3rem;
     }

     .nav-links a::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         width: 0;
         height: 2px;
         background: var(--primary-green);
         transition: width 0.3s ease;
     }

     .nav-links a:hover,
     .nav-links a.active {
         color: var(--primary-green);
     }

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

     .dropdown {
         position: relative;
     }

     .dropdown>a .arrow {
         display: inline-block;
         font-size: 0.6em;
         margin-left: 0.5rem;
         transform: translateY(2px);
         transition: transform 0.3s ease;
     }

     .dropdown:hover>a .arrow {
         transform: translateY(2px) rotate(180deg);
     }

     .dropdown-menu {
         display: block;
         position: absolute;
         top: calc(100% + 10px);
         left: 50%;
         transform: translateX(-50%);
         background: var(--nav-bg);
         border: 1px solid var(--border-color);
         border-radius: 8px;
         padding: 0.5rem 0;
         list-style: none;
         min-width: 180px;
         opacity: 0;
         transform: translateX(-50%) translateY(10px);
         transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, top 0.3s ease;
         visibility: hidden;
         margin-top: 0;
     }

     .dropdown {
         /* No extra padding needed */
     }

     .dropdown:hover .dropdown-menu {
         opacity: 1;
         transform: translateY(0);
         visibility: visible;
     }

     .dropdown:hover .dropdown-menu {
         opacity: 1;
         transform: translateX(-50%) translateY(0);
         visibility: visible;
         top: 100%;
     }

     .dropdown-menu li {
         padding: 0;
     }

     .dropdown-menu a {
         white-space: nowrap;
         padding: 0.75rem 1.5rem;
         display: block;
     }

     .dropdown-menu a:hover {
         background: rgba(0, 255, 153, 0.1);
     }

     .dropdown-menu a::after {
         display: none;
     }

     .social-icons {
         display: flex;
         gap: 1rem;
         margin-left: 1.5rem;
     }

     .social-icons a {
         color: var(--primary-green);
         font-size: 1rem;
         transition: color 0.3s ease, transform 0.3s ease;
     }

     .social-icons a:hover {
         color: #fff;
         transform: translateY(-2px);
     }

     .mobile-menu-toggle {
         display: none;
         background: none;
         border: none;
         cursor: pointer;
         z-index: 1101;
         position: relative;
     }

     .hamburger {
         width: 24px;
         height: 20px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }

     .hamburger span {
         display: block;
         width: 100%;
         height: 2px;
         background: var(--text-color);
         border-radius: 2px;
         transition: all 0.3s ease-in-out;
     }

     body.mobile-menu-open .mobile-menu-toggle .hamburger span {
         background-color: var(--primary-green);
     }

     body.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(1) {
         transform: translateY(8px) rotate(45deg);
     }

     body.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(2) {
         opacity: 0;
     }

     body.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(3) {
         transform: translateY(-8px) rotate(-45deg);
     }

     /* Hero Section */

     .hero {
         position: relative;
         height: 100vh;
         height: calc(100vh - 67px);
         /* Adjust height to account for the fixed header */
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         overflow: hidden;
         background: var(--bg-color);
     }

     .hero::before {
         content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         width: 150vmax;
         height: 150vmax;
         background: conic-gradient(from 90deg at 50% 50%, transparent 0%, rgba(0, 255, 153, 0.15) 20%, transparent 40%);
         animation: rotate 25s linear infinite;
         transform-origin: center center;
         z-index: 2;
     }

     @keyframes rotate {
         from {
             transform: translate(-50%, -50%) rotate(0deg);
         }

         to {
             transform: translate(-50%, -50%) rotate(360deg);
         }
     }

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

     .slide {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         padding: 2rem;
         opacity: 0;
         transition: opacity 1s ease-in-out;
     }

     .slide-bg-img {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         z-index: 1;
         filter: brightness(0.3);
     }

     .slide-content {
         position: relative;
         z-index: 3;
     }

     .slide.active {
         opacity: 1;
     }

     .hero-title {
         font-size: 3rem;
         font-weight: 700;
         margin-bottom: 1rem;
         line-height: 1.2;
     }

     .hero-subtitle {
         font-size: 1.1rem;
         font-weight: 300;
         max-width: 600px;
         margin: 0 auto 2.5rem;
         color: var(--text-dark);
     }

     .hero-buttons {
         display: flex;
         gap: 1rem;
         justify-content: center;
         position: relative;
         z-index: 4;
     }

     .hero-button {
         padding: 0.8rem 2.2rem;
         font-size: 0.9rem;
         font-weight: 600;
         color: var(--bg-color);
         background: linear-gradient(90deg, var(--primary-green), var(--dark-teal));
         border: 2px solid transparent;
         border-radius: 50px;
         text-decoration: none;
         cursor: pointer;
         transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
     }

     .hero-button.secondary {
         background: transparent;
         border-color: var(--primary-green);
         color: var(--primary-green);
     }

     .hero-button:hover {
         transform: scale(1.05) translateY(-3px);
         box-shadow: 0 10px 20px rgba(0, 255, 153, 0.2);
         background: linear-gradient(90deg, #00ff99, #00b3b3);
     }

     .hero-button.secondary:hover {
         background: var(--primary-green);
         color: var(--bg-color);
         box-shadow: 0 10px 20px rgba(0, 255, 153, 0.2);
     }

     /* --- MOBILE MENU --- */

     #page-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.5);
         z-index: 1050;
         opacity: 0;
         visibility: hidden;
         transition: opacity 0.3s ease, visibility 0.3s ease;
     }

     #page-overlay.active {
         opacity: 1;
         visibility: visible;
     }

     #mobile-nav {
         position: fixed;
         top: 0;
         right: 0;
         width: 280px;
         height: 100%;
         background: linear-gradient(180deg, #161b22, #0d1117);
         padding: 6rem 2rem 2rem;
         transform: translateX(100%);
         transition: transform 0.3s ease-in-out;
         z-index: 1051;
         overflow-y: auto;
         display: none;
         /* Initially hidden, enabled via media query */
     }

     #mobile-nav.open {
         transform: translateX(0);
         box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
     }

     #mobile-nav .nav-links {
         display: flex;
         flex-direction: column;
         gap: 2.5rem;
         width: 100%;
     }

     #mobile-nav .nav-links a {
         width: 100%;
     }

     #mobile-nav .dropdown {
         padding-bottom: 0;
         margin-bottom: 0;
     }

     #mobile-nav .dropdown>a {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     #mobile-nav .dropdown>a .arrow {
         transition: transform 0.3s ease;
         margin-left: 0;
     }

     #mobile-nav .dropdown.open>a .arrow {
         transform: translateY(2px) rotate(180deg);
     }

     #mobile-nav .dropdown-menu {
         position: static;
         display: none;
         opacity: 1;
         transform: none;
         border: none;
         background: transparent;
         padding: 1rem 0 0 1rem;
         min-width: auto;
         visibility: visible;
     }

     #mobile-nav .dropdown.open .dropdown-menu {
         display: block;
     }

     #mobile-nav .dropdown-menu li {
         padding: 0.5rem 0;
     }

     #mobile-nav::-webkit-scrollbar {
         width: 6px;
     }

     #mobile-nav::-webkit-scrollbar-track {
         background: transparent;
     }

     #mobile-nav::-webkit-scrollbar-thumb {
         background-color: var(--border-color);
         border-radius: 6px;
     }

     #mobile-nav .social-icons {
         margin-top: 3rem;
         padding-top: 1.5rem;
         border-top: 1px solid var(--border-color);
         justify-content: center;
     }

     /* Responsive Styles */

     @media (max-width: 768px) {
         .main-nav {
             display: none;
             /* Hide desktop nav */
         }

         .mobile-menu-toggle,
         #mobile-nav {
             display: block;
             /* Show mobile toggle and enable mobile nav */
         }

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

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

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

         .hero-button {
             width: 100%;
             max-width: 320px;
         }
     }

     /* Services Section */

     #services {
         padding: 4rem 2rem;
         background: linear-gradient(160deg, #10151d 0%, #0A0D12 100%);
     }

     .services-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .service-card {
         position: relative;
         border-radius: 12px;
         overflow: hidden;
         border: 1px solid var(--border-color);
         aspect-ratio: 1 / 1;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         display: flex;
         flex-direction: column;
     }

     .service-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 15px 25px rgba(0, 255, 153, 0.1);
     }

     .card-bg-img {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.4s ease;
     }

     .service-card:hover .card-bg-img {
         transform: scale(1.1);
     }

     .card-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.1) 70%);
     }

     .card-content {
         position: relative;
         z-index: 2;
         padding: 1.5rem;
         flex-grow: 1;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
     }

     .card-title {
         font-size: 1.3rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
         color: #fff;
     }

     .card-description {
         font-size: 0.9rem;
         color: var(--text-dark);
         margin-bottom: 1rem;
         line-height: 1.5;
     }

     .card-button {
         color: var(--primary-green);
         text-decoration: none;
         font-weight: 600;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         transition: color 0.3s ease, transform 0.3s ease;
     }

     .card-button .arrow {
         transition: transform 0.3s ease;
     }

     .card-button:hover {
         color: #fff;
     }

     .card-button:hover .arrow {
         transform: translateX(5px);
     }

     .shine-effect {
         position: absolute;
         top: 0;
         left: -150%;
         width: 100%;
         height: 100%;
         background: linear-gradient(120deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 80%);
         transform: skewX(-25deg);
         transition: left 0.8s ease-in-out;
     }

     .service-card:hover .shine-effect {
         left: 150%;
     }

     @media (max-width: 992px) {
         .services-grid {
             grid-template-columns: repeat(2, 1fr);
         }
     }

     @media (max-width: 576px) {
         .services-grid {
             grid-template-columns: 1fr;
         }

         #services {
             padding: 3rem 1rem;
         }
     }

     .see-all-container {
         text-align: center;
         margin-top: 3rem;
     }

     /* Shared Section Styles */

     .section-heading-container {
         text-align: center;
         margin-bottom: 3rem;
     }

     .section-title {
         font-size: 2.2rem;
         font-weight: 700;
         margin-bottom: 1rem;
         color: var(--primary-green);
     }

     .section-subtitle {
         font-size: 1rem;
         max-width: 700px;
         margin: 0 auto;
         color: var(--text-dark);
         line-height: 1.6;
     }

     /* About Section */

     .about-section {
         padding: 4rem 2rem;
         background: linear-gradient(160deg, #0D1117 0%, #161b22 100%);
     }

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

     .features-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 2rem;
     }

     .feature-item {
         background: rgba(22, 27, 34, 0.5);
         padding: 2rem;
         border-radius: 12px;
         border: 1px solid var(--border-color);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
     }

     .feature-item:hover {
         transform: translateY(-10px);
         box-shadow: 0 15px 25px rgba(0, 255, 153, 0.1);
     }

     .feature-icon {
         font-size: 2.5rem;
         color: var(--primary-green);
         margin-bottom: 1.5rem;
     }

     .feature-title {
         font-size: 1.2rem;
         font-weight: 600;
         margin-bottom: 0.8rem;
     }

     .feature-text {
         font-size: 0.9rem;
         color: var(--text-dark);
         line-height: 1.5;
     }

     @media (max-width: 992px) {
         .features-grid {
             grid-template-columns: repeat(2, 1fr);
         }
     }

     @media (max-width: 576px) {
         .features-grid {
             grid-template-columns: 1fr;
         }

         .about-section {
             padding: 3rem 1rem;
         }

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

     /* Why Us Section */

     .why-us-section {
         padding: 6rem 2rem;
         background-color: var(--bg-color);
     }

     .why-us-container {
         max-width: 1200px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: 1fr 1fr;
         align-items: center;
         gap: 4rem;
     }

     .why-us-content .section-eyebrow {
         display: block;
         font-size: 0.9rem;
         font-weight: 600;
         color: var(--primary-green);
         margin-bottom: 1rem;
         letter-spacing: 1px;
     }

     .why-us-content .section-title {
         text-align: left;
         font-size: 2.5rem;
         margin-bottom: 1.5rem;
     }

     .why-us-content .section-subtitle {
         text-align: left;
         max-width: none;
         margin-left: 0;
         margin-bottom: 2.5rem;
     }

     .why-us-image {
         position: relative;
         border-radius: 12px;
         overflow: hidden;
         border: 1px solid var(--border-color);
     }

     .why-us-image img {
         display: block;
         width: 100%;
         height: auto;
         transition: transform 0.4s ease;
     }

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

     @media (max-width: 992px) {
         .why-us-container {
             grid-template-columns: 1fr;
             gap: 3rem;
         }

         .why-us-image {
             order: -1;
             /* Move image to the top on mobile */
         }
     }

     /* CEO Message Section */

     .ceo-message-section {
         padding: 6rem 2rem;
         background-color: var(--bg-color);
     }

     .ceo-message-layout {
         max-width: 1200px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: 1fr 2fr;
         align-items: flex-start;
         gap: 4rem;
     }

     .ceo-image-wrapper {
         position: relative;
         border-radius: 12px;
         overflow: hidden;
         border: 1px solid var(--border-color);
     }

     .ceo-image-wrapper img {
         display: block;
         width: 100%;
         height: auto;
     }

     .ceo-message-content p {
         margin-bottom: 1.5rem;
         line-height: 1.8;
         color: var(--text-dark);
         text-align: justify;
     }

     .ceo-signature {
         margin-top: 2rem;
         border-left: 3px solid var(--primary-green);
         padding-left: 1.5rem;
     }

     .ceo-signature .signature-name {
         font-weight: 700;
         color: var(--text-color);
         margin-bottom: 0.25rem;
     }

     .ceo-signature .signature-title {
         font-size: 0.9rem;
         color: var(--text-dark);
         margin-bottom: 0;
     }

     @media (max-width: 992px) {
         .ceo-message-layout {
             grid-template-columns: 1fr;
             gap: 3rem;
         }

         .ceo-image-wrapper {
             max-width: 350px;
             margin: 0 auto;
         }
     }

     /* Floating Action Button */

     .fab-container {
         position: fixed;
         bottom: 2rem;
         right: 2rem;
         z-index: 1000;
         display: flex;
         flex-direction: column-reverse;
         align-items: center;
     }

     .fab-trigger {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         background: linear-gradient(45deg, var(--primary-green), var(--dark-teal));
         border: none;
         color: var(--bg-color);
         font-size: 1.5rem;
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
         box-shadow: 0 5px 15px rgba(0, 255, 153, 0.2);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         z-index: 2;
     }

     .fab-trigger:hover {
         transform: scale(1.1);
         box-shadow: 0 8px 25px rgba(0, 255, 153, 0.3);
     }

     .fab-trigger .fas {
         transition: transform 0.3s ease-in-out;
     }

     .fab-container.active .fab-trigger .fas {
         transform: rotate(135deg);
     }

     .fab-actions {
         display: flex;
         flex-direction: column;
         gap: 1rem;
         margin-bottom: 1rem;
     }

     .fab-action-item {
         width: 48px;
         height: 48px;
         border-radius: 50%;
         background: var(--dark-teal);
         color: #fff;
         display: flex;
         justify-content: center;
         align-items: center;
         text-decoration: none;
         font-size: 1.2rem;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
         transform: scale(0);
         transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
     }

     .fab-action-item:hover {
         background: var(--primary-green);
         color: var(--bg-color);
     }

     .fab-container.active .fab-action-item {
         transform: scale(1);
     }

     .fab-container.active .fab-action-item:nth-child(1) {
         transition-delay: 0.2s;
     }

     .fab-container.active .fab-action-item:nth-child(2) {
         transition-delay: 0.1s;
     }

     .fab-container.active .fab-action-item:nth-child(3) {
         transition-delay: 0s;
     }

     /* Translate Widget */

     .translate-widget-container {
         position: fixed;
         bottom: 2.25rem;
         /* Align with FAB */
         left: 1.5rem;
         z-index: 1000;
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .translate-trigger {
         width: 56px;
         /* Smaller size */
         height: 56px;
         /* Smaller size */
         border-radius: 50%;
         background: linear-gradient(45deg, #333, #111);
         border: 1px solid var(--border-color);
         color: var(--primary-green);
         font-size: 1.4rem;
         /* Smaller icon */
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         z-index: 2;
     }

     .translate-trigger:hover {
         transform: scale(1.1);
         box-shadow: 0 8px 25px rgba(0, 255, 153, 0.2);
     }

     .language-options {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
         margin-bottom: 1rem;
         background-color: var(--nav-bg);
         padding: 0.5rem;
         border-radius: 8px;
         border: 1px solid var(--border-color);
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
         transform: scale(0.8) translateY(20px);
         opacity: 0;
         visibility: hidden;
         transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }

     .translate-widget-container.active .language-options {
         transform: scale(1) translateY(0);
         opacity: 1;
         visibility: visible;
     }

     .language-option {
         color: var(--text-dark);
         text-decoration: none;
         padding: 0.4rem 0.8rem;
         /* Tighter padding */
         border-radius: 4px;
         display: flex;
         align-items: center;
         gap: 0.75rem;
         transition: background-color 0.2s ease, color 0.2s ease;
         font-size: 0.9rem;
         /* Smaller font */
     }

     .language-option:hover {
         background-color: rgba(0, 255, 153, 0.1);
         color: #fff;
     }

     /* CTA Section */

     .cta-section {
         position: relative;
         padding: 6rem 2rem;
         text-align: center;
         background-image: url('../../img/slide6.jpeg');
         background-size: cover;
         background-position: center;
         background-attachment: fixed;
         /* for a nice parallax effect */
     }

     .cta-section::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(13, 17, 23, 0.85);
         z-index: 1;
     }

     .cta-content {
         position: relative;
         z-index: 2;
         max-width: 700px;
         margin: 0 auto;
     }

     .cta-title {
         font-size: 2.2rem;
         font-weight: 700;
         margin-bottom: 1rem;
         color: var(--primary-green);
     }

     .cta-text {
         font-size: 1rem;
         color: var(--text-dark);
         line-height: 1.6;
         margin-bottom: 2.5rem;
     }

     /* CTA Section Alt */

     .cta-section-alt {
         position: relative;
         padding: 6rem 2rem;
         text-align: center;
         background-image: url('../../img/growth.jpeg');
         background-size: cover;
         background-position: center;
         background-attachment: fixed;
     }

     .cta-section-alt::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(13, 17, 23, 0.85);
         z-index: 1;
     }

     .newsletter-form {
         display: flex;
         justify-content: center;
         gap: 1rem;
         max-width: 500px;
         margin: 0 auto;
     }

     .newsletter-form input {
         flex-grow: 1;
         padding: 0.8rem 1.5rem;
         font-size: 0.9rem;
         background-color: rgba(22, 27, 34, 0.8);
         border: 1px solid var(--border-color);
         border-radius: 50px;
         color: var(--text-color);
         transition: border-color 0.3s ease, box-shadow 0.3s ease;
     }

     .newsletter-form input::placeholder {
         color: var(--text-dark);
     }

     .newsletter-form input:focus {
         outline: none;
         border-color: var(--primary-green);
         box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
     }

     @media (max-width: 576px) {
         .newsletter-form {
             flex-direction: column;
         }
     }

     /* Pre-footer Notes */

     .pre-footer-notes {
         background-color: #0A0D12;
         padding: 2rem;
         border-top: 1px solid var(--border-color);
     }

     .pre-footer-container {
         max-width: 1200px;
         margin: 0 auto;
         display: flex;
         align-items: center;
         gap: 1.5rem;
     }

     .pre-footer-icon i {
         font-size: 1.8rem;
         color: var(--primary-green);
         opacity: 0.8;
     }

     .pre-footer-notes p {
         font-size: 0.85rem;
         color: var(--text-dark);
         line-height: 1.6;
         margin: 0;
         text-align: justify;
     }

     .pre-footer-notes p strong {
         color: var(--primary-green);
         font-weight: 600;
     }

     /* Footer Section */

     .main-footer {
         background: #0A0D12;
         padding: 5rem 2rem 0;
         border-top: 1px solid var(--border-color);
     }

     .footer-container {
         max-width: 1200px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: 3fr 3fr 2fr 2fr;
         gap: 3rem;
         padding-bottom: 4rem;
     }

     .footer-col h4 {
         font-size: 1.1rem;
         font-weight: 600;
         color: var(--primary-green);
         margin-bottom: 1.5rem;
     }

     .footer-col p,
     .footer-col li {
         color: var(--text-dark);
         line-height: 1.7;
         margin-bottom: 0.75rem;
         font-size: 0.9rem;
         text-align: justify;
     }

     .footer-col .logo {
         margin-bottom: 1rem;
         display: inline-block;
     }

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

     .footer-col a {
         color: var(--text-dark);
         text-decoration: none;
         transition: color 0.3s ease, padding-left 0.3s ease;
     }

     .footer-col a:hover {
         color: var(--primary-green);
         padding-left: 5px;
     }

     .footer-bottom {
         background-color: #0A0D12;
         border-top: 1px solid var(--border-color);
         padding: 1.5rem 0;
         font-size: 0.9rem;
         color: var(--text-dark);
     }

     .footer-bottom-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 2rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .footer-bottom-links a {
         color: var(--text-dark);
         text-decoration: none;
         margin-left: 1.5rem;
         transition: color 0.3s ease;
     }

     .footer-bottom-links a:hover {
         color: var(--primary-green);
     }

     .footer-social-icons {
         display: flex;
         gap: 1.5rem;
     }

     .footer-contact-list {
         list-style: none;
     }

     .footer-contact-list li {
         display: flex;
         align-items: flex-start;
         gap: 0.75rem;
     }

     .footer-contact-list i {
         color: var(--primary-green);
         margin-top: 5px;
     }

     @media (max-width: 992px) {
         .footer-container {
             grid-template-columns: repeat(2, 1fr);
         }

         .pre-footer-container {
             flex-direction: column;
             text-align: center;
         }
     }

     /* ==========================================================================
   FAQ Accordion Styles
   ========================================================================== */

     .faq-accordion {
         width: 100%;
         max-width: 800px;
         margin: 2rem auto 0;
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     .faq-item {
         background-color: var(--dark-blue-2, #161b22);
         /* Fallback color */
         border: 1px solid var(--border-color);
         border-radius: 8px;
         overflow: hidden;
         transition: all 0.3s ease;
     }

     .faq-item:hover {
         border-color: var(--primary-green-light, var(--primary-green));
         /* Fallback color */
     }

     .faq-question {
         width: 100%;
         padding: 1.5rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
         background-color: transparent;
         border: none;
         cursor: pointer;
         text-align: left;
         font-size: 1.1rem;
         font-weight: 600;
         color: var(--text-light, var(--text-color));
         /* Fallback color */
         transition: background-color 0.3s ease;
     }

     .faq-question:hover {
         background-color: rgba(255, 255, 255, 0.05);
     }

     .faq-question i {
         transition: transform 0.3s ease;
         color: var(--primary-green);
     }

     .faq-item.active .faq-question i {
         transform: rotate(180deg);
     }

     .faq-answer {
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.4s ease-out, padding 0.4s ease-out;
     }

     .faq-answer p {
         padding: 0 1.5rem 1.5rem;
         margin: 0;
         color: var(--text-muted, var(--text-dark));
         /* Fallback color */
         line-height: 1.6;
     }

     .faq-item.active .faq-answer {
         max-height: 300px;
         /* Adjust as needed for your content */
         transition: max-height 0.4s ease-in;
     }

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

         .footer-bottom-container {
             flex-direction: column;
             gap: 1rem;
         }
     }

     /* Timeline Section */

     .timeline-section {
         padding: 4rem 2rem;
         background-color: var(--bg-color);
     }

     .timeline-container {
         position: relative;
         max-width: 800px;
         margin: 2rem auto 0;
     }

     .timeline-container::after {
         content: '';
         position: absolute;
         width: 4px;
         background-color: var(--border-color);
         top: 0;
         bottom: 0;
         left: 50%;
         margin-left: -2px;
         border-radius: 2px;
     }

     .timeline-item {
         padding: 10px 40px;
         position: relative;
         background-color: inherit;
         width: 50%;
     }

     .timeline-item:nth-child(odd) {
         left: 0;
         padding-right: 70px;
         text-align: right;
     }

     .timeline-item:nth-child(even) {
         left: 50%;
         padding-left: 70px;
     }

     .timeline-year {
         position: absolute;
         top: 22px;
         width: 100px;
         height: 40px;
         line-height: 40px;
         text-align: center;
         background: var(--primary-green);
         color: var(--bg-color);
         font-weight: 700;
         border-radius: 20px;
         z-index: 1;
     }

     .timeline-item:nth-child(odd) .timeline-year {
         right: -50px;
     }

     .timeline-item:nth-child(even) .timeline-year {
         left: -50px;
     }

     .timeline-content {
         padding: 20px 30px;
         background: linear-gradient(160deg, #10151d 0%, #0A0D12 100%);
         border: 1px solid var(--border-color);
         position: relative;
         border-radius: 8px;
     }

     .timeline-content h3 {
         margin-bottom: 0.5rem;
         color: #fff;
     }

     .timeline-content p {
         color: var(--text-dark);
         font-size: 0.9rem;
         line-height: 1.6;
         text-align: justify;
     }

     @media (max-width: 768px) {
         .timeline-container::after {
             left: 31px;
         }

         .timeline-item {
             width: 100%;
             padding-left: 70px;
             padding-right: 25px;
         }

         .timeline-item:nth-child(odd),
         .timeline-item:nth-child(even) {
             left: 0;
             text-align: left;
             padding-left: 80px;
         }

         .timeline-item:nth-child(odd) .timeline-year,
         .timeline-item:nth-child(even) .timeline-year {
             left: -10px;
             width: 80px;
         }
     }

     /* Gallery Section */

     .gallery-section {
         padding: 4rem 2rem;
         background: linear-gradient(160deg, #0D1117 0%, #161b22 100%);
     }

     .gallery-grid {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
         gap: 1rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .gallery-item {
         position: relative;
         overflow: hidden;
         border-radius: 8px;
         aspect-ratio: 1 / 1;
         cursor: pointer;
         border: 1px solid var(--border-color);
     }

     .gallery-item img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.4s ease;
     }

     .gallery-item::before {
         content: '\f00e';
         /* Font Awesome search-plus icon */
         font-family: 'Font Awesome 6 Free';
         font-weight: 900;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%) scale(0.5);
         color: #fff;
         font-size: 2rem;
         background: rgba(0, 0, 0, 0.5);
         width: 60px;
         height: 60px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         transition: all 0.3s ease;
         z-index: 2;
     }

     .gallery-item:hover img {
         transform: scale(1.1);
     }

     .gallery-item:hover::before {
         opacity: 1;
         transform: translate(-50%, -50%) scale(1);
     }

     @media (max-width: 768px) {
         .gallery-grid {
             grid-template-columns: repeat(2, 1fr);
         }
     }

     /* Contact Page Section */

     .contact-section {
         padding: 4rem 2rem;
         background-color: var(--bg-color);
     }

     .contact-layout {
         display: grid;
         grid-template-columns: 1fr 2fr;
         gap: 3rem;
         margin-top: 4rem;
     }

     .contact-info {
         display: flex;
         flex-direction: column;
         gap: 2rem;
     }

     .contact-info-block {
         display: flex;
         gap: 1.5rem;
         align-items: flex-start;
     }

     .contact-info-block i {
         font-size: 1.5rem;
         color: var(--primary-green);
         margin-top: 5px;
         width: 25px;
         text-align: center;
     }

     .contact-info-block h3 {
         font-size: 1.2rem;
         margin-bottom: 0.5rem;
         color: #fff;
     }

     .contact-info-block p {
         color: var(--text-dark);
         line-height: 1.6;
     }

     .contact-info-block a {
         color: var(--text-dark);
         text-decoration: none;
         transition: color 0.3s ease;
     }

     .contact-info-block a:hover {
         color: var(--primary-green);
     }

     .contact-form-wrapper {
         background: linear-gradient(160deg, #10151d 0%, #0A0D12 100%);
         padding: 2.5rem;
         border: 1px solid var(--border-color);
         border-radius: 12px;
     }

     .contact-form-wrapper h3 {
         font-size: 1.8rem;
         margin-bottom: 2rem;
         color: #fff;
     }

     .form-group {
         margin-bottom: 1.5rem;
     }

     .contact-form input,
     .contact-form textarea {
         width: 100%;
         padding: 1rem;
         background-color: rgba(13, 17, 23, 0.8);
         border: 1px solid var(--border-color);
         border-radius: 8px;
         color: var(--text-color);
         font-family: 'Poppins', sans-serif;
         font-size: 0.9rem;
         transition: border-color 0.3s ease, box-shadow 0.3s ease;
     }

     .contact-form input:focus,
     .contact-form textarea:focus {
         outline: none;
         border-color: var(--primary-green);
         box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
     }

     .form-message {
         padding: 1rem;
         margin-bottom: 1.5rem;
         border-radius: 8px;
         text-align: center;
     }

     .form-message.success {
         background-color: rgba(0, 255, 153, 0.1);
         color: var(--primary-green);
         border: 1px solid var(--primary-green);
     }

     .form-message.error {
         background-color: rgba(255, 82, 82, 0.1);
         color: #ff5252;
         border: 1px solid #ff5252;
     }

     @media (max-width: 992px) {
         .contact-layout {
             grid-template-columns: 1fr;
         }
     }

     /* Page Header */

     .page-header {
         position: relative;
         padding: 6rem 2rem;
         text-align: center;
         color: #fff;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         min-height: 300px;
         overflow: hidden;
     }

     .page-header-bg {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-size: cover;
         background-position: center;
         z-index: 1;
     }

     .page-header-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(10, 13, 18, 0.7);
         z-index: 2;
     }

     .page-header-content {
         position: relative;
         z-index: 3;
     }

     .page-header h1 {
         font-size: 3rem;
         font-weight: 700;
         margin-bottom: 0.5rem;
     }

     /* Breadcrumbs */

     .breadcrumb {
         display: flex;
         list-style: none;
         padding: 0;
         margin: 0;
         background-color: transparent;
         justify-content: center;
     }

     .breadcrumb-item {
         font-size: 0.9rem;
     }

     .breadcrumb-item a {
         color: #a0aec0;
         text-decoration: none;
         transition: color 0.3s ease;
     }

     .breadcrumb-item a:hover {
         color: #fff;
     }

     .breadcrumb-item+.breadcrumb-item::before {
         content: '/';
         display: inline-block;
         padding: 0 0.5rem;
         color: #718096;
     }

     .breadcrumb-item.active {
         color: #fff;
         font-weight: 500;
     }

     /* Team Section */

     .team-section {
         padding: 4rem 2rem;
         background: linear-gradient(160deg, #10151d 0%, #0A0D12 100%);
     }

     .team-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .team-member-card {
         background: rgba(22, 27, 34, 0.5);
         border: 1px solid var(--border-color);
         border-radius: 12px;
         text-align: center;
         overflow: hidden;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
     }

     .team-member-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 15px 25px rgba(0, 255, 153, 0.1);
     }

     .team-member-image {
         position: relative;
         overflow: hidden;
         aspect-ratio: 1 / 1;
     }

     .team-member-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.4s ease;
     }

     .team-member-card:hover .team-member-image img {
         transform: scale(1.1);
     }

     .team-member-info {
         padding: 1.5rem;
     }

     .team-member-name {
         font-size: 1.2rem;
         font-weight: 600;
         margin-bottom: 0.25rem;
         color: #fff;
     }

     .team-member-title {
         font-size: 0.9rem;
         color: var(--primary-green);
         margin-bottom: 1rem;
     }

     .team-member-social {
         justify-content: center;
         margin-left: 0;
     }

     .team-member-social a {
         font-size: 1rem;
     }

     /* Testimonials Section */

     .testimonials-section {
         padding: 4rem 2rem;
         background-color: var(--bg-color);
     }

     .testimonials-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .testimonial-card {
         background: rgba(22, 27, 34, 0.5);
         padding: 2.5rem;
         border-radius: 12px;
         border: 1px solid var(--border-color);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }

     .testimonial-text {
         font-style: italic;
         color: var(--text-dark);
         line-height: 1.7;
         margin-bottom: 2rem;
         position: relative;
         padding-left: 2rem;
     }

     .testimonial-text::before {
         content: '“';
         font-family: Georgia, serif;
         font-size: 4rem;
         color: var(--primary-green);
         position: absolute;
         left: -1rem;
         top: -1.5rem;
         opacity: 0.5;
     }

     .testimonial-author {
         display: flex;
         align-items: center;
         gap: 1rem;
     }

     .testimonial-author img {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         border: 2px solid var(--primary-green);
     }

     .author-name {
         font-weight: 600;
         color: #fff;
     }

     .author-title {
         font-size: 0.9rem;
         color: var(--text-dark);
     }

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

     /* ==========================================================================
   Counter Section
   ========================================================================== */

     .counter-section {
         position: relative;
         padding: 5rem 2rem;
         /* You can change this background image to one of your own */
         background-image: url('../../img/slide1.jpeg');
         background-position: center center;
         background-size: cover;
         background-repeat: no-repeat;
         background-attachment: fixed;
         /* This creates the parallax effect */
         color: #fff;
         text-align: center;
     }

     .counter-section .counter-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(10, 13, 18, 0.8);
         /* Dark overlay */
         z-index: 1;
     }

     /* Use the existing .about-container to constrain the width */

     .counter-section .about-container {
         position: relative;
         z-index: 2;
     }

     .counter-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 2rem;
     }

     .counter-item {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
     }

     .counter-item i {
         font-size: 2.5rem;
         color: var(--primary-green);
         /* Uses the green from your design */
         margin-bottom: 1rem;
     }

     .counter-item .counter {
         font-size: 3rem;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .team-member-card {
         background: rgba(22, 27, 34, 0.5);
         border: 1px solid var(--border-color);
         border-radius: 12px;
         text-align: center;
         overflow: hidden;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
     }

     .team-member-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 15px 25px rgba(0, 255, 153, 0.1);
     }

     .team-member-image {
         position: relative;
         overflow: hidden;
         aspect-ratio: 1 / 1;
     }

     .team-member-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.4s ease;
     }

     .team-member-card:hover .team-member-image img {
         transform: scale(1.1);
     }

     .team-member-info {
         padding: 1.5rem;
     }

     .team-member-name {
         font-size: 1.2rem;
         font-weight: 600;
         margin-bottom: 0.25rem;
         color: #fff;
     }

     .team-member-title {
         font-size: 0.9rem;
         color: var(--primary-green);
         margin-bottom: 1rem;
     }

     .team-member-social {
         justify-content: center;
         margin-left: 0;
     }

     .team-member-social a {
         font-size: 1rem;
     }

     /* Testimonials Section */

     .testimonials-section {
         padding: 4rem 2rem;
         background-color: var(--bg-color);
     }

     .testimonials-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .testimonial-card {
         background: rgba(22, 27, 34, 0.5);
         padding: 2.5rem;
         border-radius: 12px;
         border: 1px solid var(--border-color);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }

     .testimonial-text {
         font-style: italic;
         color: var(--text-dark);
         line-height: 1.7;
         margin-bottom: 2rem;
         position: relative;
         padding-left: 2rem;
     }

     .testimonial-text::before {
         content: '“';
         font-family: Georgia, serif;
         font-size: 4rem;
         color: var(--primary-green);
         position: absolute;
         left: -1rem;
         top: -1.5rem;
         opacity: 0.5;
     }

     .testimonial-author {
         display: flex;
         align-items: center;
         gap: 1rem;
     }

     .testimonial-author img {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         border: 2px solid var(--primary-green);
     }

     .author-name {
         font-weight: 600;
         color: #fff;
     }

     .author-title {
         font-size: 0.9rem;
         color: var(--text-dark);
     }

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

     /* ==========================================================================
   Counter Section
   ========================================================================== */

     .counter-section {
         position: relative;
         padding: 5rem 2rem;
         /* You can change this background image to one of your own */
         background-image: url('../../img/slide1.jpeg');
         background-position: center center;
         background-size: cover;
         background-repeat: no-repeat;
         background-attachment: fixed;
         /* This creates the parallax effect */
         color: #fff;
         text-align: center;
     }

     .counter-section .counter-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(10, 13, 18, 0.8);
         /* Dark overlay */
         z-index: 1;
     }

     /* Use the existing .about-container to constrain the width */

     .counter-section .about-container {
         position: relative;
         z-index: 2;
     }

     .counter-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 2rem;
     }

     .counter-item {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
     }

     .counter-item i {
         font-size: 2.5rem;
         color: var(--primary-green);
         /* Uses the green from your design */
         margin-bottom: 1rem;
     }

     .counter-item .counter {
         font-size: 3rem;
         font-weight: 700;
         line-height: 1.1;
         margin-bottom: 0.5rem;
     }

     .counter-item p {
         font-size: 1rem;
         font-weight: 500;
         color: rgba(255, 255, 255, 0.8);
         margin: 0;
     }

/* Service Detail Section */
.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 768px) {
    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .service-detail-image {
        order: -1;
    }
}