body { font-family: 'Inter', sans-serif; }
.fade-in { opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(.4,0,.2,1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.active-link { color: #2563eb; font-weight: 700; }
.nav-bg-blur { backdrop-filter: blur(8px); background: rgba(255,255,255,0.85); }


/* Prevent horizontal scroll on all pages */
html, body {
  overflow-x: hidden;
}

.what-we-serve-card img { margin-block: auto; }
.what-we-serve-card h2  { margin-top:  auto; margin-bottom: 5px; color: #fff;}

/* Ensure all elements use border-box sizing */
*, *::before, *::after {
  box-sizing: border-box;
}


#secure-tomorrow .overflow-x-auto::-webkit-scrollbar { display: none; }
#secure-tomorrow .overflow-x-auto { -ms-overflow-style: none; scrollbar-width: none; }

/* Make images responsive by default */
/* img {
  max-width: 100%;
  height: auto;
  display: block;
} */

/* Ensure blending overlay is above cards but below nav buttons */
#products .pointer-events-none {
  z-index: 10;
}
#products #product-carousel-inner {
  z-index: 20;
  background: none;
}
@media (min-width: 1087px) {
  #products .md\\:grid-cols-2 {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }
  #products-left-anim {
    width: 33.333333% !important;
    margin-bottom: 0 !important;
    /* margin-left: 2rem !important; */
  }
  #products .relative.flex.flex-col.items-center {
    width: 77.666667% !important;
  }
}




/* Animate left/right columns to edges on lg screens */
/* @media (min-width: 1024px) {
  #products-left-anim {
    animation: fadeInLeft 0.7s both;
  }
  #products .md\:w-2\/3 {
    animation: fadeInRight 0.7s both;
  }
} */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Hide/show carousel or row based on screen size */
.about-cards-carousel { display: block; }
.about-cards-row { display: none; }
@media (min-width: 2755px) {
  .about-cards-carousel { display: none !important; }
  .about-cards-row { display: flex !important; }
}
.about-cards-row {
  gap: 0.4rem;
  width: 100%;
  align-items: stretch;
  height: 24rem;
}
.about-expertise-card {
  min-height: 24rem;
  height: 24rem;
  width: 100%;
  flex: 1 1 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1), box-shadow 0.4s;
  z-index: 1;
}
.about-expertise-card.active {
  transform: scale(1.08);
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.about-highlight-btn.active,
.about-highlight-btn:focus {
  background-color: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
}


@keyframes swim {
  0%, 100% { transform: translateY(0) rotate(-2deg);}
  50% { transform: translateY(-8px) rotate(2deg);}
}
.animate-swim {
  animation: swim 2.5s ease-in-out infinite;
}
@keyframes feed1 {
  0% { opacity: 0; transform: translateY(-10px);}
  20% { opacity: 1; transform: translateY(0);}
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(30px);}
}
.animate-feed1 {
  animation: feed1 2.2s linear infinite;
  animation-delay: 0.2s;
}
@keyframes feed2 {
  0% { opacity: 0; transform: translateY(-10px);}
  30% { opacity: 1; transform: translateY(0);}
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(30px);}
}
.animate-feed2 {
  animation: feed2 2.2s linear infinite;
  animation-delay: 0.7s;
}
@keyframes feed3 {
  0% { opacity: 0; transform: translateY(-10px);}
  40% { opacity: 1; transform: translateY(0);}
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(30px);}
}
.animate-feed3 {
  animation: feed3 2.2s linear infinite;
  animation-delay: 1.2s;
}
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px);}
  100% { opacity: 1; transform: translateY(0);}
}
.animate-fade-in-up {
  animation: fadeInUp 1.2s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* Main fish grows and shrinks in a loop */
@keyframes fish-grow-left {
  0%, 100% { transform: scale(0.7);}
  20% { transform: scale(1.1);}
  40%, 80% { transform: scale(1);}
  60% { transform: scale(1.15);}
}
.animate-fish-grow-left {
  animation: fish-grow-left 3.5s cubic-bezier(.4,2,.6,1) infinite;
}
/* Baby fish 1: appears, moves left, fades */
@keyframes baby-fish1 {
  0%, 60% { opacity: 0; transform: translateX(0);}
  65% { opacity: 1; transform: translateX(-10px);}
  80% { opacity: 1; transform: translateX(-30px);}
  100% { opacity: 0; transform: translateX(-50px);}
}
.animate-baby-fish1 {
  animation: baby-fish1 3.5s linear infinite;
  animation-delay: 0.7s;
}
/* Baby fish 2: appears, moves left, fades */
@keyframes baby-fish2 {
  0%, 70% { opacity: 0; transform: translateX(0);}
  75% { opacity: 1; transform: translateX(-10px);}
  90% { opacity: 1; transform: translateX(-25px);}
  100% { opacity: 0; transform: translateX(-40px);}
}
.animate-baby-fish2 {
  animation: baby-fish2 3.5s linear infinite;
  animation-delay: 1.2s;
}
/* Baby fish 3: appears, moves left, fades */
@keyframes baby-fish3 {
  0%, 80% { opacity: 0; transform: translateX(0);}
  85% { opacity: 1; transform: translateX(-8px);}
  95% { opacity: 1; transform: translateX(-18px);}
  100% { opacity: 0; transform: translateX(-30px);}
}
.animate-baby-fish3 {
  animation: baby-fish3 3.5s linear infinite;
  animation-delay: 1.7s;
}

/* Adjust Secure Tomorrow carousel image container for full width and responsive height */
#secure-carousel {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}


@keyframes slideInLeftBg {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.slide-in-left {
  animation: slideInLeftBg 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.slide-in-left:nth-child(1) { animation-delay: 0.05s; }
.slide-in-left:nth-child(2) { animation-delay: 0.15s; }
.slide-in-left:nth-child(3) { animation-delay: 0.25s; }
.slide-in-left:nth-child(4) { animation-delay: 0.35s; }
.slide-in-left:nth-child(5) { animation-delay: 0.45s; }
.slide-in-left:nth-child(6) { animation-delay: 0.55s; }


@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-fade-in-left {
  animation: fade-in-left 0.8s cubic-bezier(0.4,0,0.2,1) forwards;
}

.glass-blur {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
}

@keyframes arrow-move {
      0% { transform: translateX(0); opacity: 0.7; }
      50% { transform: translateX(10px); opacity: 1; }
      100% { transform: translateX(0); opacity: 0.7; }
    }
    .animate-arrow-right {
      animation: arrow-move 1s infinite;
      display: inline-block;
    }
    /* Responsive: Stack vertically on small screens */
    @media (max-width: 1024px) {
      .flex-row.items-start> {
        width: 100%;
        max-width: 180px;
        margin: 0 auto 2rem auto;
        padding-right: 0,
      }

      .flex-row.items-start> {
        width: 100%;
      }

      .flex-row.items-center.justify-between {
        flex-direction: column;
        gap: 2rem;
      }

      .arrow-horizontal {
        transform: rotate(90deg);
      }
    }

    @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(40px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .fade-in-up {
    animation: fadeInUp 1.2s ease-out 0.2s both;
  }