 :root {
     --color-primary: #444ba3;
     --color-primary-alt: #008143;
     --color-secondary: #e0e0e0;
     --color-text-light: #ffffff;
     --color-text-dark: #1a1a1a;
     --color-text-muted: #666666;
     --color-bg-light: #f8f9fa;
     --color-bg-dark: #1a1a1a;

     --font-family-heading: "Poppins", system-ui, sans-serif;
     --font-family-body: "Inter", sans-serif;

     --space-xs: 0.5rem;
     --space-sm: 1rem;
     --space-md: 2rem;
     --space-lg: 3rem;
     --space-xl: 4rem;
     --space-xxl: 6rem;

     --radius-sm: 8px;
     --radius-md: 16px;
     --radius-lg: 24px;

     --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

     --container-max-width: 1200px;
     --navbar-height: 50px;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
     overflow-x: hidden;
 }

 body {
     font-family: var(--font-family-body);
     line-height: 1.6;
     color: var(--color-text-dark);
     overflow-x: hidden;
 }

 /* Utility Classes */
 .container {
     max-width: var(--container-max-width);
     margin: 0 auto;
     padding: 0 var(--space-sm);
 }

 .fade-in {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s ease;
 }

 .fade-in.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .slide-in-left {
     opacity: 0;
     transform: translateX(-50px);
     transition: all 0.8s ease;
 }

 .slide-in-left.visible {
     opacity: 1;
     transform: translateX(0);
 }

 .slide-in-right {
     opacity: 0;
     transform: translateX(50px);
     transition: all 0.8s ease;
 }

 .slide-in-right.visible {
     opacity: 1;
     transform: translateX(0);
 }

 .scale-in {
     opacity: 0;
     transform: scale(0.8);
     transition: all 0.8s ease;
 }

 .scale-in.visible {
     opacity: 1;
     transform: scale(1);
 }

 /* Navigation */
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: var(--navbar-height);
     background: rgba(255, 255, 255, 0.6);
     backdrop-filter: blur(10px);
     z-index: 1000;
     transition: all 0.3s ease;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

 .navbar.scrolled {
     background: rgba(255, 255, 255, 0.98);
     box-shadow: var(--shadow-sm);
 }

 .nav-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 100%;
     padding: 0 var(--space-sm);
     max-width: var(--container-max-width);
     margin: 0 auto;
 }

 .logo img {
     margin-top: 10px;
     height: 50px;
     width: 100%;
 }

 .nav-links {
     display: flex;
     list-style: none;
     gap: var(--space-lg);
 }

 .nav-links a {
     text-decoration: none;
     color: var(--color-primary);
     font-weight: 500;
     transition: all 0.3s ease;
     position: relative;
 }

 .nav-links a:hover {
     color: var(--color-primary-alt);
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(135deg, var(--color-primary), var(--color-primary-alt));
     transition: width 0.3s ease;
 }

 .nav-links a:hover::after {
     width: 100%;
 }

 .nav-toggle {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 4px;
 }

 .nav-toggle span {
     width: 25px;
     height: 3px;
     background: var(--color-text-dark);
     transition: all 0.3s ease;
 }

 /* Hero Section */
 .hero {
     position: relative;
     height: 100vh;
     display: flex;
     align-items: center;
     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../assets/underwater.jpg') center/cover no-repeat;

     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>');
     opacity: 0.3;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     color: var(--color-text-light);
     text-align: center;
 }

 .hero h1 {
     font-family: var(--font-family-heading);
     font-size: clamp(2.5rem, 6vw, 4rem);
     font-weight: 800;
     margin-bottom: var(--space-sm);
     opacity: 0;
     animation: fadeInUp 1s ease forwards;
 }

 .hero-subtitle {
     font-size: clamp(1rem, 2.5vw, 1.25rem);
     font-weight: 300;
     margin-bottom: var(--space-lg);
     opacity: 0;
     animation: fadeInUp 1s ease 0.3s forwards;
 }

 .cta-button {
     display: inline-block;
     padding: var(--space-sm) var(--space-lg);
     background: rgba(255, 255, 255, 0.2);
     color: var(--color-text-light);
     text-decoration: none;
     border-radius: var(--radius-lg);
     font-weight: 600;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     transition: all 0.3s ease;
     opacity: 0;
     animation: fadeInUp 1s ease 0.6s forwards;
 }

 .cta-button:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: translateY(-2px);
 }

 /* Floating Elements */
 .floating-elements {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .floating-word {
     position: absolute;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     aspect-ratio: 1/1;
     font-size: 0.6rem;
     padding: 2px;
     font-weight: 500;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-text-light);
     animation: float 6s ease-in-out infinite;
     box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.7);
 }

 .floating-word:nth-child(1) {
     top: 20%;
     left: 10%;
     animation-delay: 0s;
 }

 .floating-word:nth-child(2) {
     top: 30%;
     right: 15%;
     animation-delay: 1s;
 }

 .floating-word:nth-child(3) {
     top: 60%;
     left: 20%;
     animation-delay: 2s;
 }

 .floating-word:nth-child(4) {
     top: 70%;
     right: 10%;
     animation-delay: 3s;
 }

 .floating-word:nth-child(5) {
     top: 40%;
     left: 70%;
     animation-delay: 4s;
 }

 /* About Section */
 .about {
     padding: var(--space-xxl) 0;
     background: var(--color-bg-light);
     position: relative;
     z-index: 2;
 }

 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-xl);
     align-items: center;
 }

 .about-content h2 {
     font-family: var(--font-family-heading);
     font-size: clamp(2rem, 4vw, 2.5rem);
     margin-bottom: var(--space-md);
     color: var(--color-primary-alt);
 }

 .about-content p {
     font-size: 1.125rem;
     color: var(--color-text-muted);
     margin-bottom: var(--space-sm);
 }

 .about-image {
     width: 100%;
     height: 330px;
     background: linear-gradient(135deg, var(--color-primary), var(--color-primary-alt));
     border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-text-light);
     font-size: 1.5rem;
     font-weight: 600;
 }

 .about-image img {
     width: 100%;
     height: 100%;
     object-fit: contain;

     border-radius: var(--radius-lg);
 }

 /* Values Section */
 .values {
     padding: var(--space-xxl) 0;
     background: white;
 }

 .section-header {
     text-align: center;
     margin-bottom: var(--space-xl);
 }

 .section-header h2 {
     font-family: var(--font-family-heading);
     font-size: clamp(2rem, 4vw, 2.5rem);
     margin-bottom: var(--space-sm);
     color: var(--color-primary-alt);
 }

 .section-header p {
     font-size: 1.125rem;
     color: var(--color-text-muted);
 }

 .values {
     position: relative;
     z-index: 2;
     background-color: #ffffff;
 }

 .values-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: var(--space-md);
 }

 .value-card {
     background: white;
     padding: var(--space-lg);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-md);
     text-align: center;
     transition: all 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .value-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
 }

 .value-icon {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--color-primary), var(--color-primary-alt));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto var(--space-sm);
     font-size: 1.5rem;
     color: var(--color-text-light);
 }

 .value-card h3 {
     font-family: var(--font-family-heading);
     font-size: 1.25rem;
     margin-bottom: var(--space-sm);
     color: var(--color-text-dark);
 }

 .value-card p {
     color: var(--color-text-muted);
 }

 /* Services Section */
 .services {
     padding: var(--space-lg) 0;
     background: var(--color-bg-light);
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: var(--space-md);
 }

 .service-card {
     background: white;
     border-radius: var(--radius-md);
     overflow: hidden;
     padding-top: 40px;
     box-shadow: var(--shadow-md);
     transition: all 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .service-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
 }

 .service-image {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--color-primary), var(--color-primary-alt));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1rem;
     /* Added margin to center and give space */
     font-size: 1.5rem;
     /* Adjusted font size */
     color: var(--color-text-light);
 }

 .service-content {
     padding: var(--space-md);
 }

 .service-content h3 {
     font-family: var(--font-family-heading);
     font-size: 1.25rem;
     margin-bottom: var(--space-sm);
     color: var(--color-text-dark);
 }

 .service-content p {
     color: var(--color-text-muted);
 }

 /* Team Section */
 .team {
     padding: var(--space-xl) 0;
     background: white;
 }

 .team-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--space-md);
 }

 .team-member {
     background: white;
     border-radius: var(--radius-md);
     padding: var(--space-md);
     text-align: center;
     box-shadow: var(--shadow-md);
     transition: all 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .team-member:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
 }

 .team-photo {
     width: 100px;
     height: 100px;
     background: linear-gradient(135deg, var(--color-primary), var(--color-primary-alt));
     border-radius: 50%;
     margin: 0 auto var(--space-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-text-light);
     font-size: 1.5rem;
     font-weight: 600;
 }

 .team-photo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
 }

 .team-member h3 {
     font-family: var(--font-family-heading);
     font-size: 1.125rem;
     margin-bottom: var(--space-xs);
     color: var(--color-text-dark);
 }

 .team-member p {
     color: var(--color-text-muted);
     font-size: 0.875rem;
 }

 /* Contact Section */
 .contact {
     padding: var(--space-xxl) 0;
     background: var(--color-bg-dark);
     color: var(--color-text-light);
 }

 .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-xl);
 }

 .contact-info h2 {
     font-family: var(--font-family-heading);
     font-size: clamp(2rem, 4vw, 2.5rem);
     margin-bottom: var(--space-md);
     color: var(--color-primary);
 }

 .contact-item {
     display: flex;
     align-items: center;
     gap: var(--space-sm);
     margin-bottom: var(--space-sm);
 }

 .contact-item i {
     width: 20px;
     color: var(--color-primary-alt);
 }

 .contact-form {
     display: grid;
     gap: var(--space-sm);
 }

 .form-group {
     display: grid;
     gap: var(--space-xs);
 }

 .form-group label {
     font-weight: 500;
 }

 .form-group input,
 .form-group textarea {
     padding: var(--space-sm);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: var(--radius-sm);
     background: rgba(255, 255, 255, 0.1);
     color: var(--color-text-light);
     font-family: inherit;
 }

 .form-group input::placeholder,
 .form-group textarea::placeholder {
     color: rgba(255, 255, 255, 0.6);
 }

 .submit-btn {
     padding: var(--space-sm) var(--space-lg);
     background: linear-gradient(135deg, var(--color-primary), var(--color-primary-alt));
     color: var(--color-text-light);
     border: none;
     border-radius: var(--radius-sm);
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }

 /* Footer */
 .footer {
     background: #000;
     color: var(--color-text-light);
     text-align: center;
     padding: var(--space-sm) 0;
 }

 /* Animations */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     .about-image {
         height: fit-content;
         width: fit-content;
     }
 }

 @media (max-width: 768px) {
     .nav-links {
         display: none;
     }

     .nav-toggle {
         display: flex;
     }

     .about-grid,
     .contact-grid {
         grid-template-columns: 1fr;
     }

     .services-grid {
         grid-template-columns: 1fr;
     }

     .floating-word {
         display: none;
     }

     .about-image {
         height: 280px;
         width: fit-content;
         margin: auto;
     }
 }

 @media (max-width: 480px) {

     .values-grid,
     .team-grid {
         grid-template-columns: 1fr;
     }

     .about-image {
         height: 200px;
     }

     .about-image img {
         object-fit: cover;
     }
 }

 .clients {
     padding: var(--space-xxl) 0;
     background: var(--color-bg-light);
     overflow: hidden;
     /* Hide overflow to prevent scrollbars */
 }

 .clients .container {
     overflow: hidden;
     padding: 0;
 }

 .client-logos-wrapper {
     position: relative;
 }

 .client-logos {
     display: flex;
     align-items: center;
     gap: var(--space-lg);
     animation: scroll-logos 30s linear infinite;
     width: max-content;
     /* Ensure the logos take up max-content width */
     transform: translateX(0);
     /* Base transform for the animation */
 }

 .client-logos img {
     width: 150px;
     height: auto;
     filter: invert(1), grayscale(100%);
     opacity: 1;
     transition: all 0.3s ease;
 }

 .client-logos-wrapper::before,
 .client-logos-wrapper::after {
     content: '';
     position: absolute;
     top: 0;
     width: 150px;
     height: 100%;
     z-index: 10;
 }

 .client-logos-wrapper::before {
     left: 0;
     background: linear-gradient(to right, var(--color-bg-light), rgba(255, 255, 255, 0));
 }

 .client-logos-wrapper::after {
     right: 0;
     background: linear-gradient(to left, var(--color-bg-light), rgba(255, 255, 255, 0));
 }

 @keyframes scroll-logos {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 .full-white {
     filter: invert(1);
 }

 #cursorFollower {
     position: fixed;
     top: 0;
     left: 0;
     width: 18px;
     /* smaller size */
     height: 18px;
     border-radius: 50%;
     background: radial-gradient(circle, #444ba3 0%, #008143 100%);
     pointer-events: none;
     transform: translate(-50%, -50%);
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 6px rgba(68, 75, 163, 0.7),
         0 0 12px rgba(0, 129, 67, 0.6),
         0 0 18px rgba(68, 75, 163, 0.4);
     animation: glowPulse 2s infinite alternate;
 }

 /* White center dot */
 #cursorFollower .dot {
     width: 5px;
     /* smaller dot */
     height: 5px;
     border-radius: 50%;
     background: #ffffff;
     box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
 }

 @keyframes glowPulse {
     from {
         box-shadow: 0 0 6px rgba(68, 75, 163, 0.7),
             0 0 12px rgba(0, 129, 67, 0.6);
         transform: translate(-50%, -50%) scale(1);
     }

     to {
         box-shadow: 0 0 12px rgba(68, 75, 163, 0.9),
             0 0 24px rgba(0, 129, 67, 0.8);
         transform: translate(-50%, -50%) scale(1.2);
     }
 }

 @media (pointer: coarse) {
     #cursorFollower {
         display: none;
     }
 }

#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px); /* center horizontally */
  max-width: 90%;      /* responsive for mobile */
  width: 300px;         /* default width */
  padding: 15px 25px;
  border-radius: 10px;
  color: #fff;
  font-family: sans-serif;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.8); /* semi-transparent default */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

#toast.success {
  background-color: rgba(75, 181, 67, 0.85); /* semi-transparent green */
}

#toast.error {
  background-color: rgba(255, 51, 51, 0.85); /* semi-transparent red */
}

/* Optional: smaller font on small screens */
@media (max-width: 480px) {
  #toast {
    font-size: 14px;
    padding: 12px 20px;
  }
}