:root {
   --background: 0 0% 100%;
   --foreground: 215 100% 8%;
   --primary: 215 100% 15%;
   --primary-foreground: 210 40% 98%;
   --primary-glow: 215 85% 25%;
   --accent: 200 85% 45%;
   --accent-foreground: 0 0% 100%;
   --border: 215 20% 88%;
   --shadow-ocean: 0 10px 30px -10px hsl(var(--primary) / 0.3);
   --transition-ocean: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   --radius: 0.5rem;
   --gradient-wave: linear-gradient(180deg, hsl(200 100% 85%), hsl(210 100% 95%));
   --secondary: 210 45% 92%;
   --secondary-foreground: 215 100% 15%;
   --muted-foreground: 215 25% 45%;
   --border: 215 20% 88%;
   --shadow-wave: 0 5px 20px -5px hsl(var(--accent) / 0.25);
   --gradient-deep: linear-gradient(180deg, hsl(var(--primary)), hsl(215 100% 8%));
   

   /* Theme supplemental variables */
   --card: 0 0% 100%;
   --gradient-surface: linear-gradient(180deg, hsl(210 100% 98%), hsl(210 100% 95%));
 }
 *{
  box-sizing: border-box;
 }

 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
 }


 /* Custom Navbar Styles */
 /* .navbar {
   background: hsl(var(--primary)) !important;
   box-shadow: var(--shadow-ocean);
   padding: 0.75rem 0;
   transition: var(--transition-ocean);
 }

 .navbar-brand {
   color: hsl(var(--primary-foreground)) !important;
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-weight: 600;
   transition: var(--transition-ocean);
 }

 .navbar-brand:hover {
   color: hsl(var(--accent)) !important;
   transform: translateY(-1px);
 }

 .brand-logo {
   width: 45px;
   height: 45px;
   background: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   font-weight: bold;
 }

 .brand-text h1 {
   font-size: 1.375rem;
   font-weight: 700;
   margin: 0;
   line-height: 1.2;
   color: hsl(var(--primary-foreground));
 }

 .brand-text p {
   font-size: 0.75rem;
   color: hsl(var(--primary-foreground) / 0.8);
   margin: 0;
   line-height: 1.2;
 } */

 /* Navigation Links */
 .navbar-nav .nav-link {
   color: hsl(var(--primary-foreground)) !important;
   font-size: 0.9rem;
   font-weight: 500;
   padding: 0.5rem 1rem !important;
   margin: 0 0.25rem;
   border-radius: var(--radius);
   transition: var(--transition-ocean);
   position: relative;
 }

 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-link:focus {
   color: hsl(var(--accent)) !important;
   background-color: hsl(var(--primary-glow) / 0.1);
   transform: translateY(-1px);
 }

 .navbar-nav .nav-link.active {
   color: hsl(var(--accent)) !important;
   background-color: hsl(var(--primary-glow) / 0.2);
 }

 /* Custom Toggler */
 .navbar-toggler {
   border: 2px solid hsl(var(--primary-foreground) / 0.3);
   border-radius: var(--radius);
   padding: 0.375rem 0.5rem;
   transition: var(--transition-ocean);
 }

 .navbar-toggler:focus {
   box-shadow: 0 0 0 0.2rem hsl(var(--accent) / 0.25);
 }

 .navbar-toggler:hover {
   background-color: hsl(var(--primary-glow) / 0.1);
   border-color: hsl(var(--accent));
 }

 .navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
 .navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 9999 !important;
}
/* Inverted Navbar Styles */
.navbar {
  background: hsl(var(--background)) !important; /* Now WHITE background */
  color: hsl(var(--foreground)) !important;     /* Dark text */
  box-shadow: 0 2px 10px hsl(215 20% 88% / 0.3); /* Light border shadow */
  padding: 0.75rem 0;
  transition: var(--transition-ocean);
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  border-bottom: 1px solid hsl(var(--border)); /* Subtle border for separation */
}

.navbar-brand {
  color: hsl(var(--foreground)) !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-weight: 600;
  transition: var(--transition-ocean);
}

.navbar-brand:hover {
  color: hsl(var(--accent)) !important;
  transform: translateY(-1px);
}

.brand-logo {
  width: 45px;
  height: 45px;
  /* background: hsl(var(--accent));  */
  /* border-radius: 50%; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: hsl(var(--accent-foreground)); /* White text in logo */
}

.brand-text h1 {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: hsl(var(--foreground));
}

.brand-text p {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
  line-height: 1.2;
}

/* Navigation Links - Inverted */
.navbar-nav .nav-link {
  color: hsl(var(--foreground)) !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1rem !important;
  margin: 0 0.25rem;
  border-radius: var(--radius);
  transition: var(--transition-ocean);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: hsl(var(--accent)) !important;
  background-color: hsl(var(--accent) / 0.1);
  transform: translateY(-1px);
}

.navbar-nav .nav-link.active {
  color: hsl(var(--accent)) !important;
  background-color: hsl(var(--accent) / 0.15);
}

/* Custom Toggler - Inverted */
.navbar-toggler {
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.375rem 0.5rem;
  transition: var(--transition-ocean);
}

.navbar-toggler:hover {
  background-color: hsl(var(--border));
  border-color: hsl(var(--accent));
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem hsl(var(--accent) / 0.15);
}

/* Toggler Icon - Change to DARK (was white) */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2834, 34, 34, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile Menu - Inverted */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    margin-top: 1rem;
    padding: 1rem;
    box-shadow: 0 5px 15px hsl(215 20% 88% / 0.4);
  }

  .navbar-nav .nav-link {
    margin: 0.25rem 0;
    text-align: center;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border));
  }

  .navbar-nav .nav-link:hover {
    color: hsl(var(--accent)) !important;
    background-color: hsl(var(--accent) / 0.08);
    transform: none;
  }

  .brand-text h1 {
    font-size: 1.25rem;
  }

 
}

/* Extra Small Devices */
@media (max-width: 575.98px) {
  .navbar {
    padding: 0.5rem 0;
  }

  .brand-logo {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  .brand-text h1 {
    font-size: 1.1rem;
  }

  .navbar-nav .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem !important;
  }

  .hero {
    padding-top: 100px;
    padding-bottom: 20px;
  }
}
 /* Sticky navbar effect */
.navbar.sticky {
  box-shadow: 0 4px 20px hsl(215 20% 88% / 0.4);
}
 

 /* :root {
   --background: 0 0% 100%;
   --foreground: 215 100% 8%;
   --primary: 215 100% 15%;
   --primary-foreground: 210 40% 98%;
   --accent: 200 85% 45%;
   --primary-glow: 215 85% 25%;
   --border: 215 20% 88%;
   --shadow-ocean: 0 10px 30px -10px hsl(var(--primary) / 0.3);
   --transition-ocean: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 body {
   margin: 0;
   font-family: 'Segoe UI', sans-serif;
   background: hsl(var(--background));
   color: hsl(var(--foreground));
   overflow-x: hidden;
 } */

 /* Hero Section */
 .hero {
   min-height: 100vh;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }

 .hero-bg {
   position: absolute;
   inset: 0;
   background: url('https://images.unsplash.com/photo-1507241195590-013583a1f5d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
   z-index: -2;
 }

 .hero-overlay {
   position: absolute;
   inset: 0;
   background: var(--gradient-deep) !important;
   opacity: 0.50;
   z-index: -1;
 }

 /* Floating Icons */
 .floating-fish {
   position: absolute;
   top: 10rem;
   left: 2.5rem;
   animation: bounce 3s infinite;
   color: hsl(var(--accent));
   opacity: 0.3;
 }

 .floating-waves {
   position: absolute;
   bottom: 8rem;
   right: 4rem;
   animation: pulse 4s infinite;
   color: hsl(var(--accent));
   opacity: 0.2;
 }

 .floating-anchor {
   position: absolute;
   top: 45%;
   right: 25%;
   animation: bounce 3s infinite;
   animation-delay: 1s;
   color: hsl(var(--accent));
   opacity: 0.25;
 }

 @keyframes bounce {

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

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

 @keyframes pulse {

   0%,
   100% {
     opacity: 0.2;
   }

   50% {
     opacity: 0.5;
   }
 }

 /* Text & Gradient */
 .hero-title {
   font-size: 2.5rem;
   font-weight: bold;
   color: hsl(var(--primary-foreground));
   line-height: 1.2;
 }

 .hero-title span {
   background: hsl(200, 98%, 25%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   display: block;
 }

 .hero-paragraph {
   font-size: 1.25rem;
   color: hsl(var(--primary-foreground) / 0.9);
   max-width: 768px;
   margin: 0 auto 2rem;
   line-height: 1.6;
 }

 /* Buttons */
 .btn-ocean {
   background-color: hsl(var(--accent));
   color: hsl(var(--accent-foreground));
   border: none;
   padding: 0.75rem 2rem;
   font-size: 1.1rem;
   border-radius: 0.5rem;
   transition: var(--transition-ocean);
 }

 .btn-ocean:hover {
   background-color: hsl(200 90% 50%);
   transform: translateY(-2px);
   box-shadow: 0 8px 20px hsl(200 85% 45% / 0.3);
 }

 .btn-outline-custom {
   border: 2px solid hsl(var(--primary-foreground));
   color: hsl(var(--primary-foreground));
   padding: 0.75rem 2rem;
   font-size: 1.1rem;
   background: transparent;
   transition: var(--transition-ocean);
 }

 .btn-outline-custom:hover {
   background-color: hsl(var(--primary-foreground));
   color: hsl(var(--primary));
 }

 /* Stats */
 .stat {
   text-align: center;
 }

 .stat-number {
   font-size: 2.5rem;
   font-weight: bold;
   /* color: hsl(var(--accent)); */
   color: azure;
 }

 .stat-label {
   font-size: 0.875rem;
   color: hsl(var(--primary-foreground) / 0.8);
 }

 /* Wave SVG */
 .wave-svg {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 5rem;
   fill: hsl(var(--background));
   z-index: 1;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .hero-title {
     font-size: 2rem;
   }

   .hero-paragraph {
     font-size: 1.1rem;
   }

   .btn-ocean,
   .btn-outline-custom {
     padding: 0.6rem 1.5rem;
     font-size: 1rem;
   }

   .stat-number {
     font-size: 2rem;
   }
 }

 /* :root {
   --background: 0 0% 100%;
   --foreground: 215 100% 8%;
   --primary: 215 100% 15%;
   --primary-foreground: 210 40% 98%;
   --accent: 200 85% 45%;
   --muted-foreground: 215 25% 45%;
   --border: 215 20% 88%;
   --shadow-ocean: 0 10px 30px -10px hsl(var(--primary) / 0.3);
   --shadow-wave: 0 5px 20px -5px hsl(var(--accent) / 0.25);
   --transition-ocean: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
   font-family: 'Segoe UI', sans-serif;
 } */

 .section-about {
   padding: 5rem 0;
   background-color: hsl(var(--background));
 }

 .title {
   font-size: 2rem;
   font-weight: bold;
   color: hsl(var(--foreground));
 }

 .title span {
   color: hsl(var(--primary));
 }

 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }

 .highlight-card {
   border: 1px solid hsl(var(--border)) !important;
   background-color: white;
   transition: var(--transition-ocean);
   border-radius: 0.5rem;
 }

 .highlight-card:hover {
   box-shadow: var(--shadow-wave);
 }

 .icon {
   color: hsl(var(--accent));
 }



 /* Facility Image Container */
 .section-about .image-container {
   position: relative;
   border-radius: 0.5rem;
   overflow: hidden;
   box-shadow: var(--shadow-ocean);
 }

 .section-about .image-container img {
   width: 100%;
   height: 600px;
   object-fit: cover;
 }

 .section-about .image-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, hsl(var(--primary) / 0.2), transparent);
 }

 /* Floating Stats Card */
 .floating-stats {
   position: absolute;
   bottom: -24px;
   left: -24px;
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
   border-radius: 0.5rem;
   box-shadow: var(--shadow-ocean);
   z-index: 10;
   width: 140px;
   text-align: center;
 }

 .floating-stats .number {
   font-size: 1.875rem;
   font-weight: bold;
 }

 .floating-stats .label {
   font-size: 0.875rem;
   opacity: 0.9;
 }

 /* Responsive */
 @media (max-width: 992px) {
   .floating-stats {
     position: static;
     margin: 1rem auto;
     width: 50%;
     left: -10px;
   }
 }

 @media (max-width: 768px) {
   .section-about {
     padding: 3rem 0;
   }

   .title {
     font-size: 1.75rem;
   }

   .image-container img {
     height: 400px;
   }

   .highlight-card {
     display: flex;
     align-items: flex-start;
   }
 }

 /* 
 :root {
   --background: 0 0% 100%;
   --foreground: 215 100% 8%;
   --primary: 215 100% 15%;
   --primary-foreground: 210 40% 98%;
   --accent: 200 85% 45%;
   --muted-foreground: 215 25% 45%;
   --border: 215 20% 88%;
   --shadow-ocean: 0 10px 30px -10px hsl(var(--primary) / 0.3);
   --transition-ocean: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
   font-family: 'Segoe UI', sans-serif;
 } */

 .section-services {
   padding: 5rem 0;
   background-color: hsl(var(--background));
 }


 /* .section-title {
   font-size: 2rem;
   font-weight: bold;
   color: hsl(var(--foreground));
 }

 .section-title span {
   color: hsl(var(--primary));
 } */

 .section-subtitle {
   color: hsl(var(--muted-foreground));
   max-width: 768px;
   margin: 0 auto 3rem;
 }

 /* Service Card */
 .service-card {
   border: 1px solid hsl(var(--border)) !important;
   border-radius: 0.75rem;
   background: white;
   height: 100%;
   transition: var(--transition-ocean);
   box-shadow: 0 4px 12px hsl(var(--border));
 }

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

 .service-icon {
   color: hsl(var(--accent));
   transition: var(--transition-ocean);
 }

 .service-card:hover .service-icon {
   transform: scale(0.9);
 }

 .service-title {
   font-size: 1.25rem;
   font-weight: 600;
   color: hsl(var(--foreground));
   transition: var(--transition-ocean);
 }

 .service-card:hover .service-title {
   color: hsl(var(--primary));
 }

 .service-description {
   color: hsl(var(--muted-foreground));
 }

 .feature-badge {
   background-color: hsl(var(--muted-foreground) / 0.1);
   color: hsl(var(--foreground));
   border: 1px solid hsl(var(--border));
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   display: inline-block;
   margin: 0.1rem;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .section-services {
     padding: 3rem 0;
   }

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

   .service-title {
     font-size: 1.1rem;
   }
 }

 /* :root {
   --background: 0 0% 100%;
   --foreground: 215 100% 8%;
   --primary: 215 100% 15%;
   --primary-foreground: 210 40% 98%;
   --accent: 200 85% 45%;
   --accent-foreground: 0 0% 100%;
   --secondary: 210 45% 92%;
   --secondary-foreground: 215 100% 15%;
   --muted-foreground: 215 25% 45%;
   --border: 215 20% 88%;
   --shadow-ocean: 0 10px 30px -10px hsl(var(--primary) / 0.3);
   --shadow-wave: 0 5px 20px -5px hsl(var(--accent) / 0.25);
   --transition-ocean: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

   --gradient-wave: linear-gradient(180deg, hsl(200 100% 85%), hsl(210 100% 95%));
 }

 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
   font-family: 'Segoe UI', sans-serif;
 } */

 .section-products {
   padding: 5rem 0;
   /* background: var(--gradient-wave); */
 }

 /* .section-title {
   font-size: 2rem;
   font-weight: bold;
   color: hsl(var(--foreground));
 }

 .section-title span {
   color: hsl(var(--primary));
 } */

 .section-subtitle {
   color: hsl(var(--muted-foreground));
   max-width: 768px;
   margin: 0 auto 3rem;
 }

 /* Product Card */
 .product-card {
   border: 1px solid hsl(var(--border)) !important;
   border-radius: 0.75rem;
   background: white;
   transition: var(--transition-ocean);
   box-shadow: 0 4px 12px hsl(var(--border));
 }

 .product-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-ocean);
 }

 .product-title {
   font-size: 1.25rem;
   font-weight: 600;
   transition: var(--transition-ocean);
 }

 .product-card:hover .product-title {
   color: white !important;
 }

 .fish-icon {
   color: hsl(var(--accent));
 }

 .item-badge {
   background-color: hsl(var(--secondary));
   color: hsl(var(--secondary-foreground));
   border: none;
   font-size: 0.8rem;
   padding: 0.25rem 0.75rem;
   border-radius: 50px;
 }

 .presentation {
   font-size: 0.875rem;
   color: hsl(var(--muted-foreground));
 }

 .presentation strong {
   color: hsl(var(--foreground));
 }

 /* Image Container */
 .section-products .image-container {
   position: relative;
   border-radius: 0.5rem;
   overflow: hidden;
   box-shadow: var(--shadow-ocean);
 }

 .section-products .image-container img {
   width: 100%;
   height: 600px;
   object-fit: cover;
 }

 .section-products .image-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, hsl(var(--primary) / 0.3), transparent);
 }

 /* Floating HACCP Badge */
 .haccp-badge {
   position: relative;
   top: -24px;
   right: -10px;
   background-color: hsl(var(--accent));
   color: hsl(var(--accent-foreground));
   border-radius: 0.5rem;
   box-shadow: var(--shadow-wave);
   width: 140px;
   text-align: center;
 }

 .haccp-icon {
   width: 32px;
   height: 32px;
   stroke: hsl(var(--accent-foreground));
   stroke-width: 2;
   fill: none;
 }

 /* CTA Card */
 .cta-card {
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
   border-radius: 0.75rem;
   box-shadow: var(--shadow-ocean);
   max-width: 600px;
   margin: 0 auto;
 }

 .btn-wave {
   background-color: hsl(var(--accent));
   color: hsl(var(--accent-foreground));
   border: none;
   padding: 0.75rem 2rem;
   font-size: 1.1rem;
   border-radius: 0.5rem;
   transition: var(--transition-ocean);
 }

 .btn-wave:hover {
   background-color: hsl(200 90% 50%);
   transform: translateY(-2px);
   box-shadow: 0 8px 20px hsl(var(--accent) / 0.3);
 }

 /* Responsive */
 @media (max-width: 992px) {
   .haccp-badge {
     position: static;
     margin: 1rem auto;
     width: 80%;
   }

   .image-container img {
     height: 400px;
   }
 }

 @media (max-width: 768px) {
   .section-products {
     padding: 3rem 0;
   }

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

   .item-badge {
     font-size: 0.75rem;
     padding: 0.2rem 0.6rem;
   }
 }


 /* :root {
   --background: 0 0% 100%;
   --foreground: 215 100% 8%;
   --primary: 215 100% 15%;
   --primary-foreground: 210 40% 98%;
   --accent: 200 85% 45%;
   --secondary: 210 45% 92%;
   --secondary-foreground: 215 100% 15%;
   --muted-foreground: 215 25% 45%;
   --border: 215 20% 88%;
   --shadow-ocean: 0 10px 30px -10px hsl(var(--primary) / 0.3);
   --shadow-wave: 0 5px 20px -5px hsl(var(--accent) / 0.25);
   --transition-ocean: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
   font-family: 'Segoe UI', sans-serif;
 } */

 .section-categories {
   padding: 5rem 0;
   background-color: hsl(var(--background));
 }

 /* .section-title {
   font-size: 2rem;
   font-weight: bold;
   color: hsl(var(--foreground));
 }

 .section-title span {
   color: hsl(var(--primary));
 } */

 .section-subtitle {
   color: hsl(var(--muted-foreground));
   max-width: 768px;
   margin: 0 auto 3rem;
 }

 /* Category Card */
 .category-card {
   border: 1px solid hsl(var(--border)) !important;
   border-radius: 0.75rem;
   background: white;
   transition: var(--transition-ocean);
   box-shadow: 0 4px 12px hsl(var(--border));
 }

 .category-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-ocean);
 }

 .category-title {
   font-size: 1.5rem;
   font-weight: bold;
   color: hsl(var(--foreground));
   transition: var(--transition-ocean);
 }

 .category-card:hover .category-title {
   color: hsl(var(--primary));
 }

 .icon {
   color: hsl(var(--accent));
   transition: transform 0.3s ease;
 }

 .category-card:hover .icon {
   transform: scale(1.1);
 }

 .badge-variety {
   background-color: hsl(var(--secondary));
   color: hsl(var(--secondary-foreground));
   font-size: 0.75rem;
   padding: 0.25rem 0.6rem;
   border-radius: 50px;
   border: none;
 }

 .section-label {
   font-weight: 600;
   color: hsl(var(--foreground));
 }

 .section-text {
   font-size: 0.875rem;
   color: hsl(var(--muted-foreground));
 }

 /* CTA Card */
 .cta-card {
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
   border-radius: 0.75rem;
   box-shadow: var(--shadow-ocean);
   max-width: 600px;
   margin: 0 auto;
 }
 .cta-section {
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
   border-radius: 0.75rem;
   box-shadow: var(--shadow-ocean);
   max-width: 1250px;
    margin: 0 auto; 
 }

 .btn-wave {
   background-color: hsl(var(--accent));
   color: hsl(var(--accent-foreground));
   border: none;
   padding: 0.75rem 2rem;
   font-size: 1.1rem;
   border-radius: 0.5rem;
   transition: var(--transition-ocean);
 }

 .btn-wave:hover {
   background-color: hsl(200 90% 50%);
   transform: translateY(-2px);
   box-shadow: 0 8px 20px hsl(var(--accent) / 0.3);
 }

 /* Responsive */
 @media (max-width: 768px) {
   .section-categories {
     padding: 3rem 0;
   }

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

   .category-title {
     font-size: 1.3rem;
   }

   .badge-variety {
     font-size: 0.7rem;
     padding: 0.2rem 0.5rem;
   }
 }

 /* :root {
   --background: 0 0% 100%;
   --foreground: 215 100% 8%;
   --primary: 215 100% 15%;
   --primary-foreground: 210 40% 98%;
   --accent: 200 85% 45%;
   --muted-foreground: 215 25% 45%;
   --border: 215 20% 88%;
   --shadow-ocean: 0 10px 30px -10px hsl(var(--primary) / 0.3);
   --transition-ocean: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

   --gradient-wave: linear-gradient(180deg, hsl(200 100% 85%), hsl(210 100% 95%));
 }

 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
   font-family: 'Segoe UI', sans-serif;
 } */

 .section-certifications {
   padding: 5rem 0;
   background: var(--gradient-wave);
 }

 /* .section-title {
   font-size: 2rem;
   font-weight: bold;
   color: hsl(var(--foreground));
 }

 .section-title span {
   color: hsl(var(--primary));
 } */

 .section-subtitle {
   color: hsl(var(--muted-foreground));
   max-width: 768px;
   margin: 0 auto 3rem;
 }

 /* Certification Card */
 .cert-card {
   border: 1px solid hsl(var(--border)) !important;
   border-radius: 0.75rem;
   background: white;
   text-align: center;
   transition: var(--transition-ocean);
   box-shadow: 0 4px 12px hsl(var(--border));
 }

 .cert-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-ocean);
 }

 .cert-icon {
   color: hsl(var(--accent));
   height: 48px;
 }

 .cert-title {
   font-size: 1.125rem;
   font-weight: 600;
   color: hsl(var(--foreground));
 }

 .cert-description {
   font-size: 0.875rem;
   color: hsl(var(--muted-foreground));
   margin-bottom: 1rem;
 }

 .badge-verified {
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
   font-size: 0.75rem;
   padding: 0.25rem 0.75rem;
   border-radius: 0.25rem;
 }

 /* Quality Card */
 .quality-card {
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
   border-radius: 0.75rem;
   box-shadow: var(--shadow-ocean);
 }

 .quality-title {
   font-size: 1.5rem;
   font-weight: bold;
 }

 .quality-icon {
   width: 32px;
   height: 32px;
   stroke: hsl(var(--accent));
   stroke-width: 2;
   fill: none;
 }

 .quality-text {
   color: hsl(var(--primary-foreground) / 0.9);
 }

 .quality-point {
   display: flex;
   align-items: center;
   font-size: 0.875rem;
   color: hsl(var(--primary-foreground));
 }

 .check-icon {
   width: 20px;
   height: 20px;
   stroke: hsl(var(--accent));
   stroke-width: 2;
   margin-right: 0.75rem;
 }

 .years-highlight {
   font-size: 1.875rem;
   font-weight: bold;
   color: hsl(var(--accent));
 }

 .divider {
   border-top: 1px solid hsl(var(--primary-foreground) / 0.2);
   margin-top: 2rem;
   padding-top: 1.5rem;
 }

 /* Responsive */
 @media (max-width: 992px) {
   .section-certifications {
     padding: 3rem 0;
   }

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




 .section-global {
   padding: 5rem 0;
   background-color: rgb(232, 249, 253);
 }

 /* .section-title {
   font-size: 2rem;
   font-weight: bold;
   color: hsl(var(--foreground));
 }

 .section-title span {
   color: hsl(var(--primary));
 } */

 .section-subtitle {
   color: hsl(var(--muted-foreground));
   max-width: 768px;
   margin: 0 auto 3rem;
 }

 .icon {
   color: hsl(var(--accent));
 }

 /* Region Card */
 .region-card {
   border: 1px solid hsl(var(--border)) !important;
   border-radius: 0.75rem;
   background: white;
   transition: var(--transition-ocean);
   box-shadow: 0 4px 12px hsl(var(--border));
 }

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

 .region-title {
   font-size: 1.125rem;
   font-weight: 600;
   color: hsl(var(--foreground));
 }

 .region-port {
   font-size: 0.875rem;
   color: hsl(var(--muted-foreground));
 }

 .specialty-badge {
   background-color: hsl(var(--secondary));
   color: hsl(var(--secondary-foreground));
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   border: none;
 }

 /* Image Container */
 .section-global .image-container {
   position: relative;
   border-radius: 0.5rem;
   overflow: hidden;
   box-shadow: var(--shadow-ocean);
 }

 .section-global .image-container img {
   width: 100%;
   height: 256px;
   object-fit: cover;
 }

 .section-global .image-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, hsl(var(--primary) / 0.3), transparent);
   border-radius: 0.5rem;
 }

 /* Logistics Card */
 .logistics-card {
   border: 1px solid hsl(var(--border)) !important;
   border-radius: 0.5rem;
   background: white;
 }

 .logistics-method {
   font-weight: 600;
   color: hsl(var(--foreground));
 }

 .logistics-desc {
   font-size: 0.875rem;
   color: hsl(var(--muted-foreground));
 }

 .timeline {
   font-size: 0.875rem;
   font-weight: 500;
   color: hsl(var(--accent));
 }

 /* CTA Button */
 .btn-primary-custom {
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
   border: none;
   padding: 0.75rem 1.5rem;
   font-size: 1.1rem;
   border-radius: 0.5rem;
   transition: var(--transition-ocean);
 }

 .btn-primary-custom:hover {
   background-color: hsl(215 100% 20%);
   color: aliceblue;
   transform: translateY(-2px);
   box-shadow: 0 8px 20px hsl(var(--primary) / 0.3);
 }

 .btn-secondary-custom {
   background-color: hsl(var(--accent));
   color: white;
   border: none;
   padding: 0.75rem 1.5rem;
   font-size: 1.1rem;
   border-radius: 0.5rem;
   transition: var(--transition-ocean);
 }

 .btn-secondary-custom:hover {
   background-color: hsl(var(--accent));
   color: aliceblue;
   transform: translateY(-2px);
   box-shadow: 0 8px 20px hsl(var(--primary) / 0.3);
 }

 /* Responsive */
 @media (max-width: 992px) {
   .section-global {
     padding: 3rem 0;
   }

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

   .image-container img {
     height: 200px;
   }
 }

 @media (max-width: 768px) {
   .logistics-card {
     display: flex;
     align-items: center;
   }

   .logistics-content {
     flex-grow: 1;
   }

   .timeline {
     margin-left: 1rem;
   }
 }


 /* :root {
   --background: 0 0% 100%;
   --foreground: 215 100% 8%;
   --primary: 215 100% 15%;
   --primary-foreground: 210 40% 98%;
   --accent: 200 85% 45%;
   --muted-foreground: 215 25% 45%;
   --border: 215 20% 88%;
   --shadow-ocean: 0 10px 30px -10px hsl(var(--primary) / 0.3);
   --transition-ocean: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

 }

 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
   font-family: 'Segoe UI', sans-serif;
 } */

 .section-testimonials {
   padding: 5rem 0;
   background: rgb(232, 249, 253);
 }

 /* .section-title {
   font-size: 2rem;
   font-weight: bold;
   color: hsl(var(--foreground));
 } */

 /* .section-title span {
   color: hsl(var(--primary));
 } */

 .section-subtitle {
   color: hsl(var(--muted-foreground));
   max-width: 768px;
   margin: 0 auto 3rem;
 }

 /* Testimonial Card */
 .testimonial-card {
   border: 1px solid hsl(var(--border)) !important;
   border-radius: 0.75rem;
   background: white;
   transition: var(--transition-ocean);
   box-shadow: 0 4px 12px hsl(var(--border));
   height: 100%;
 }

 .testimonial-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-ocean);
 }

 .quote-icon {
   color: hsl(var(--accent));
   width: 32px;
   height: 32px;
 }

 .star-icon {
   color: hsl(var(--accent));
   width: 16px;
   height: 16px;
   fill: hsl(var(--accent));
   stroke: hsl(var(--accent));
 }

 .testimonial-text {
   font-style: italic;
   color: hsl(var(--muted-foreground));
   line-height: 1.6;
 }

 .client-name {
   font-weight: 600;
   color: hsl(var(--foreground));
 }

 .client-company {
   font-size: 0.875rem;
   color: hsl(var(--muted-foreground));
 }

 .client-country {
   font-size: 0.875rem;
   color: hsl(var(--accent));
 }

 .product-tag {
   font-size: 0.75rem;
   color: hsl(var(--muted-foreground));
   margin-top: 0.5rem;
 }

 .product-tag strong {
   color: hsl(var(--foreground));
 }

 /* Stats Card */
 .stats-card {
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
   border-radius: 0.75rem;
   box-shadow: var(--shadow-ocean);
 }

 .stat-value {
   font-size: 2rem;
   font-weight: bold;
   color: hsl(var(--accent));
 }

 .stat-label {
   font-size: 0.875rem;
   color: hsl(var(--primary-foreground) / 0.9);
 }

 /* Responsive */
 @media (max-width: 992px) {
   .section-testimonials {
     padding: 3rem 0;
   }

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

 @media (max-width: 768px) {
   .testimonial-text {
     font-size: 0.95rem;
   }

   .stat-value {
     font-size: 1.75rem;
   }
 }





 /* Footer */
 .footer {
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
   position: relative;
   overflow: hidden;
   padding: 4rem 0;
 }

 .footer::before {
   content: '';
   position: absolute;
   inset: 0;
   background: hsl(var(--primary));
   z-index: -2;
 }

 /* Decorative SVGs */
 .footer-svg {
   position: absolute;
   opacity: 0.1;
   z-index: -1;
 }

 .fish {
   top: 2.5rem;
   left: 2.5rem;
   width: 64px;
   height: 64px;
   stroke: hsl(var(--accent));
   fill: none;
 }

 .waves {
   bottom: 5rem;
   right: 5rem;
   width: 80px;
   height: 80px;
   stroke: hsl(var(--accent));
   fill: none;
 }

 .anchor-bg {
   top: 50%;
   left: 33%;
   transform: translate(-50%, -50%);
   width: 48px;
   height: 48px;
   stroke: hsl(var(--accent));
   fill: none;
 }

 /* Logo */
 .footer-logo {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 1.5rem;
   color: hsl(var(--primary-foreground));
   text-decoration: none;
 }

 .footer-logo h2 {
   font-size: 1.25rem;
   font-weight: bold;
   margin: 0;
 }

 .footer-logo p {
   font-size: 0.875rem;
   color: hsl(var(--primary-foreground) / 0.9);
   margin: 0;
 }

 /* Text Links & Content */
 .footer-link {
   color: hsl(var(--primary-foreground) / 0.8) !important;
   font-size: 0.875rem;
   transition: var(--transition-ocean);
 }

 .footer-link:hover {
   color: hsl(var(--accent)) !important;
 }

 .footer-text {
   color: hsl(var(--primary-foreground) / 0.8);
   font-size: 0.875rem;
   line-height: 1.5;
 }

 /* Mission Card */
 .mission-card {
   background-color: hsl(var(--primary-glow));
   border: 1px solid hsl(var(--primary-glow));
   border-radius: 0.5rem;
 }

 .mission-title {
   font-weight: 600;
   color: hsl(var(--primary-foreground));
 }

 .mission-text {
   color: hsl(var(--primary-foreground) / 0.9);
   font-size: 0.875rem;
 }

 /* Contact Icons */
 .contact-icon {
   color: hsl(var(--accent));
   width: 20px;
   height: 20px;
   flex-shrink: 0;
 }

 /* Bottom Bar */
 .bottom-bar {
   border-top: 1px solid hsl(var(--primary-foreground) / 0.2);
   margin-top: 3rem;
   padding-top: 2rem;
   text-align: center;
 }

 .bottom-text {
   color: hsl(var(--primary-foreground) / 0.6);
   font-size: 0.875rem;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .bottom-bar {
     flex-direction: column;
     gap: 0.5rem;
   }

   .fish,
   .waves,
   .anchor-bg {
     opacity: 0.05;
   }
 }


 /* Translation Effects CSS */

 /* Base animation setup */
 .animate-on-scroll {
   opacity: 0;
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .animate-on-scroll.animate {
   opacity: 1;
 }

 /* Slide from left */
 .slide-left {
   transform: translateX(-100px);
 }

 .slide-left.animate {
   transform: translateX(0);
 }

 /* Slide from right */
 .slide-right {
   transform: translateX(100px);
 }

 .slide-right.animate {
   transform: translateX(0);
 }

 /* Slide from top */
 .slide-top {
   transform: translateY(-100px);
 }

 .slide-top.animate {
   transform: translateY(0);
 }

 /* Slide from bottom */
 .slide-bottom {
   transform: translateY(100px);
 }

 .slide-bottom.animate {
   transform: translateY(0);
 }

 /* Fade in */
 .fade-in {
   opacity: 0;
 }

 .fade-in.animate {
   opacity: 1;
 }

 /* Scale animation */
 .scale-in {
   transform: scale(0.8);
   opacity: 0;
 }

 .scale-in.animate {
   transform: scale(1);
   opacity: 1;
 }

 /* Stagger animation for cards */
 .stagger-item {
   opacity: 0;
   transform: translateY(50px);
   transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .stagger-item.animate {
   opacity: 1;
   transform: translateY(0);
 }

 /* Delay classes for staggered animations */
 .delay-1 {
   transition-delay: 0.1s;
 }

 .delay-2 {
   transition-delay: 0.2s;
 }

 .delay-3 {
   transition-delay: 0.3s;
 }

 .delay-4 {
   transition-delay: 0.4s;
 }

 .delay-5 {
   transition-delay: 0.5s;
 }

 .delay-6 {
   transition-delay: 0.6s;
 }

 /* Floating animations for hero elements */
 .floating-element {
   animation: float 6s ease-in-out infinite;
 }

 .floating-element:nth-child(2) {
   animation-delay: -2s;
 }

 .floating-element:nth-child(3) {
   animation-delay: -4s;
 }

 @keyframes float {

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

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

 /* Navbar animation */
 .navbar {
   transform: translateY(-100%);
   transition: transform 0.5s ease-in-out;
 }

 .navbar.show {
   transform: translateY(0);
 }

 /* Hero content animation */
 .hero-content {
   opacity: 0;
   transform: translateY(50px);
   animation: heroFadeIn 1.2s ease-out 0.5s forwards;
 }

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



 /* Card hover effects */
 .card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 /* Button animations */
 .btn {
   transition: all 0.3s ease;
   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%;
 }

 /* Image reveal animation */
 .image-reveal {
   overflow: hidden;
   position: relative;
 }

 .image-reveal::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, #007bff, #0056b3);
   transform: translateX(-100%);
   transition: transform 0.8s ease;
   z-index: 1;
 }

 .image-reveal.animate::before {
   transform: translateX(100%);
 }

 .image-reveal img {
   transition: transform 0.8s ease;
 }

 .image-reveal.animate img {
   transform: scale(1.05);
 }

 /* Text reveal animation */
 .text-reveal {
   overflow: hidden;
   position: relative;
 }

 .text-reveal span {
   display: inline-block;
   transform: translateY(100%);
   transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .text-reveal.animate span {
   transform: translateY(0);
 }

 /* Progress bar animation */
 .progress-bar {
   width: 0;
   transition: width 1.5s ease-in-out;
 }

 .progress-bar.animate {
   width: 100%;
 }

 /* Testimonial card animation */
 .testimonial-card {
   transform: rotateY(15deg) translateZ(-50px);
   opacity: 0;
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .testimonial-card.animate {
   transform: rotateY(0deg) translateZ(0px);
   opacity: 1;
 }

 /* Footer wave animation */
 .footer-wave {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100px;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z'%3E%3C/path%3E%3C/svg%3E") repeat-x;
   background-size: 1200px 120px;
   animation: wave 10s linear infinite;
 }

 @keyframes wave {
   0% {
     background-position-x: 0;
   }

   100% {
     background-position-x: 1200px;
   }
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {

   .slide-left,
   .slide-right {
     transform: translateY(50px);
   }

   .slide-left.animate,
   .slide-right.animate {
     transform: translateY(0);
   }
 }


 /* Hero Background Moving Effects */

 /* Parallax scrolling effect */
 .hero-bg {
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   will-change: transform;
 }

 .hero-bg img {
   animation: slowZoom 20s ease-in-out infinite alternate;
   transform-origin: center center;
 }

 @keyframes slowZoom {
   0% {
     transform: scale(1);
   }

   100% {
     transform: scale(1.1);
   }
 }

 /* Animated gradient overlay */
 .hero-overlay {
   /* background: linear-gradient(45deg,
       rgba(0, 123, 255, 0.3),
       rgba(0, 86, 179, 0.4),
       rgba(13, 110, 253, 0.3),
       rgba(0, 123, 255, 0.4)); */
   background-size: 400% 400%;
   animation: gradientShift 8s ease infinite;
 }

 @keyframes gradientShift {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 /* Floating particles effect */
 .hero-particles {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   pointer-events: none;
 }

 .particle {
   position: absolute;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   animation: floatUp 15s infinite linear;
 }

 .particle:nth-child(1) {
   left: 10%;
   width: 4px;
   height: 4px;
   animation-delay: 0s;
   animation-duration: 12s;
 }

 .particle:nth-child(2) {
   left: 20%;
   width: 6px;
   height: 6px;
   animation-delay: 2s;
   animation-duration: 15s;
 }

 .particle:nth-child(3) {
   left: 30%;
   width: 3px;
   height: 3px;
   animation-delay: 4s;
   animation-duration: 18s;
 }

 .particle:nth-child(4) {
   left: 40%;
   width: 5px;
   height: 5px;
   animation-delay: 6s;
   animation-duration: 14s;
 }

 .particle:nth-child(5) {
   left: 50%;
   width: 4px;
   height: 4px;
   animation-delay: 8s;
   animation-duration: 16s;
 }

 .particle:nth-child(6) {
   left: 60%;
   width: 7px;
   height: 7px;
   animation-delay: 10s;
   animation-duration: 13s;
 }

 .particle:nth-child(7) {
   left: 70%;
   width: 3px;
   height: 3px;
   animation-delay: 12s;
   animation-duration: 17s;
 }

 .particle:nth-child(8) {
   left: 80%;
   width: 5px;
   height: 5px;
   animation-delay: 14s;
   animation-duration: 19s;
 }

 .particle:nth-child(9) {
   left: 90%;
   width: 4px;
   height: 4px;
   animation-delay: 16s;
   animation-duration: 11s;
 }

 @keyframes floatUp {
   0% {
     opacity: 0;
     transform: translateY(100vh) rotate(0deg);
   }

   10% {
     opacity: 1;
   }

   90% {
     opacity: 1;
   }

   100% {
     opacity: 0;
     transform: translateY(-100px) rotate(360deg);
   }
 }

 /* Wave animation effect */
 .hero-waves {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100px;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='rgba(255,255,255,0.1)'%3E%3C/path%3E%3C/svg%3E") repeat-x;
   background-size: 1200px 120px;
   animation: waveMove 10s linear infinite;
   opacity: 0.3;
 }

 @keyframes waveMove {
   0% {
     background-position-x: 0;
   }

   100% {
     background-position-x: 1200px;
   }
 }

 /* Enhanced floating elements */
 .floating-fish {
   top: 20%;
   left: 15%;
   color: rgba(255, 255, 255, 0.6);
   animation: floatFish 8s ease-in-out infinite;
 }

 .floating-waves {
   top: 60%;
   right: 20%;
   color: rgba(255, 255, 255, 0.4);
   animation: floatWaves 10s ease-in-out infinite;
 }

 .floating-anchor {
   bottom: 30%;
   left: 10%;
   color: rgba(255, 255, 255, 0.5);
   animation: floatAnchor 12s ease-in-out infinite;
 }

 @keyframes floatFish {

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

   25% {
     transform: translateY(-20px) translateX(10px) rotate(5deg);
   }

   50% {
     transform: translateY(-10px) translateX(20px) rotate(-3deg);
   }

   75% {
     transform: translateY(-30px) translateX(5px) rotate(8deg);
   }
 }

 @keyframes floatWaves {

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

   33% {
     transform: translateY(-15px) scale(1.1);
   }

   66% {
     transform: translateY(-25px) scale(0.9);
   }
 }

 @keyframes floatAnchor {

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

   50% {
     transform: translateY(-40px) rotate(180deg);
   }
 }

 /* Ripple effect */
 .hero-ripples {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   transform: translate(-50%, -50%);
 }

 .ripple {
   position: absolute;
   border: 2px solid rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   animation: rippleEffect 4s infinite;
 }

 .ripple:nth-child(1) {
   animation-delay: 0s;
 }

 .ripple:nth-child(2) {
   animation-delay: 1s;
 }

 .ripple:nth-child(3) {
   animation-delay: 2s;
 }

 .ripple:nth-child(4) {
   animation-delay: 3s;
 }

 @keyframes rippleEffect {
   0% {
     width: 0;
     height: 0;
     opacity: 1;
   }

   100% {
     width: 300px;
     height: 300px;
     opacity: 0;
   }
 }

 /* Parallax layers */
 .parallax-layer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

 .parallax-back {
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='2' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") repeat;
   animation: parallaxBack 20s linear infinite;
 }

 .parallax-mid {
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='rgba(255,255,255,0.08)'/%3E%3C/svg%3E") repeat;
   animation: parallaxMid 15s linear infinite reverse;
 }

 @keyframes parallaxBack {
   0% {
     transform: translateX(0) translateY(0);
   }

   100% {
     transform: translateX(-100px) translateY(-100px);
   }
 }

 @keyframes parallaxMid {
   0% {
     transform: translateX(0) translateY(0);
   }

   100% {
     transform: translateX(80px) translateY(80px);
   }
 }

 /* Mouse movement parallax effect */
 .hero-content {
   transition: transform 0.1s ease-out;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
   .hero-bg img {
     animation-duration: 15s;
   }

   .floating-fish,
   .floating-waves,
   .floating-anchor {
     display: none;
   }

   .hero-particles {
     display: none;
   }
 }

 /* Additional animation classes from previous code */
 .animate-on-scroll {
   opacity: 0;
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .animate-on-scroll.animate {
   opacity: 1;
 }

 /* Slide from left */
 .slide-left {
   transform: translateX(-100px);
 }

 .slide-left.animate {
   transform: translateX(0);
 }

 /* Slide from right */
 .slide-right {
   transform: translateX(100px);
 }

 .slide-right.animate {
   transform: translateX(0);
 }

 /* Slide from top */
 .slide-top {
   transform: translateY(-100px);
 }

 .slide-top.animate {
   transform: translateY(0);
 }

 /* Slide from bottom */
 .slide-bottom {
   transform: translateY(100px);
 }

 .slide-bottom.animate {
   transform: translateY(0);
 }

 /* Fade in */
 .fade-in {
   opacity: 0;
 }

 .fade-in.animate {
   opacity: 1;
 }

 /* Scale animation */
 .scale-in {
   transform: scale(0.8);
   opacity: 0;
 }

 .scale-in.animate {
   transform: scale(1);
   opacity: 1;
 }

 /* Stagger animation for cards */
 .stagger-item {
   opacity: 0;
   transform: translateY(50px);
   transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .stagger-item.animate {
   opacity: 1;
   transform: translateY(0);
 }

 /* Delay classes for staggered animations */
 .delay-1 {
   transition-delay: 0.1s;
 }

 .delay-2 {
   transition-delay: 0.2s;
 }

 .delay-3 {
   transition-delay: 0.3s;
 }

 .delay-4 {
   transition-delay: 0.4s;
 }

 .delay-5 {
   transition-delay: 0.5s;
 }

 .delay-6 {
   transition-delay: 0.6s;
 }

 /* Floating animations for hero elements */
 .floating-element {
   animation: float 6s ease-in-out infinite;
 }

 .floating-element:nth-child(2) {
   animation-delay: -2s;
 }

 .floating-element:nth-child(3) {
   animation-delay: -4s;
 }

 @keyframes float {

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

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


 /* Hero content animation */
 .hero-content {
   opacity: 0;
   transform: translateY(50px);
   animation: heroFadeIn 1.2s ease-out 0.5s forwards;
 }

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



 /* Card hover effects */
 .card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 /* Button animations */
 .btn {
   transition: all 0.3s ease;
   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%;
 }

 /* Image reveal animation */
 .image-reveal {
   overflow: hidden;
   position: relative;
 }

 .image-reveal::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, #007bff, #0056b3);
   transform: translateX(-100%);
   transition: transform 0.8s ease;
   z-index: 1;
 }

 .image-reveal.animate::before {
   transform: translateX(100%);
 }

 .image-reveal img {
   transition: transform 0.8s ease;
 }

 .image-reveal.animate img {
   transform: scale(1.05);
 }

 /* Text reveal animation */
 .text-reveal {
   overflow: hidden;
   position: relative;
 }

 .text-reveal span {
   display: inline-block;
   transform: translateY(100%);
   transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .text-reveal.animate span {
   transform: translateY(0);
 }

 /* Progress bar animation */
 .progress-bar {
   width: 0;
   transition: width 1.5s ease-in-out;
 }

 .progress-bar.animate {
   width: 100%;
 }

 /* Testimonial card animation */
 .testimonial-card {
   transform: rotateY(15deg) translateZ(-50px);
   opacity: 0;
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .testimonial-card.animate {
   transform: rotateY(0deg) translateZ(0px);
   opacity: 1;
 }

 /* Footer wave animation */
 .footer-wave {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100px;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z'%3E%3C/path%3E%3C/svg%3E") repeat-x;
   background-size: 1200px 120px;
   animation: wave 10s linear infinite;
 }

 @keyframes wave {
   0% {
     background-position-x: 0;
   }

   100% {
     background-position-x: 1200px;
   }
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {

   .slide-left,
   .slide-right {
     transform: translateY(50px);
   }

   .slide-left.animate,
   .slide-right.animate {
     transform: translateY(0);
   }
 }
 @media (min-width: 1200px) {
.section-services *, 
.section-services ::after, 
.section-services ::before {
  box-sizing: content-box !important;
}

 

 }

  /* Animated underline for navbar links */
  .navbar-nav .nav-link::after {
    content: '';
    display: block;
    height: 2px;
    background: hsl(var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
    border-radius: 2px;
    margin-top: 2px;
  }

  .navbar-nav .nav-link:hover::after,
  .navbar-nav .nav-link.active::after {
    transform: scaleX(1);
  }

  /* Blue themed scrollbars */
  html {
    scrollbar-color: hsl(var(--accent)) hsl(var(--secondary));
    scrollbar-width: thin;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: hsl(var(--secondary));
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, hsl(200 85% 55%), hsl(215 85% 45%));
    border-radius: 8px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, hsl(200 85% 60%), hsl(215 85% 50%));
  }

  /* Product page color fixes via global overrides */
  .product-card .product-title {
    color: white !important;
  }
  .badge-outline {
    color: hsl(var(--primary-foreground)) !important;
    border-color: hsl(var(--primary-foreground)) !important;
  }