.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

.font-inter {
  font-family: 'Inter', sans-serif;
}




  /* Hide buttons at 1366px screen width */
  @media (max-width: 1366px) {
    .hide-1366 {
      display: none !important;
    }
  }
  /* Step content animation */
.step-content {
  opacity: 0.5;              /* default visible at 50% */
  transition: opacity 0.4s ease;
}

.step-content.active {
  opacity: 1;                /* active = full opacity */
}


    /* Step image animation */
    .step-image {
 transition: opacity 0.5s ease;
    position: absolute;
    }
    .step-image.inactive {
      filter: grayscale(120%);
      opacity: 100%;
      transform: scale(0.95);
    }
    .step-image.active {
      filter: grayscale(0%);
      opacity: 100;
      transform: scale(1);
      z-index: 40 !important;
    }

    /* Step border transition */
    .step-border {
      transition: border-color 0.3s ease;
    }

    /* Step title transition */
    .step-title {
      transition: color 0.3s ease;
    }


    /* scroll */
 .scroll-animate {
  will-change: transform; /* smooth minor movement */
}

/* Optional: give relative positioning for parent so absolute images inside move correctly */
.grid > div {
  position: relative;
}


/* dashed */
.stat-card {
  position: relative;
  padding: 45px 10px;
}

/* Vertical gradient dashed divider */
.stat-card::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 0;
  width: 1px;
  height: calc(100% - 10px);

  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 112, 172, 0.9) 0px,
    rgba(0, 112, 172, 0.9) 6px,
    transparent 6px,
    transparent 12px
  );

  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

/* Remove divider on last column */
@media (min-width: 768px) {
  .stat-card:last-child::after {
    display: none;
  }
}





body {
  background-color: white;
  color: #222;
  transition: all 0.3s ease-in-out;
}

body.dark-theme {
  background-color: black;
  color: #00B4CE;
}

/* Make links, menu items, and svg icons inherit color */
body.dark-theme a,
body.dark-theme li,
body.dark-theme svg path {
  color: inherit !important;
  stroke: currentColor !important;
}


/* floating icon */
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } /* move up 10px */
  }

  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
.animate-float1{
  animation:float 7s ease-in-out infinite ;
}


footer {
  border-top: 1px solid transparent; /* base border */
  border-image: linear-gradient(to right, #DADADA00, #A8A8A8, #DADADA00) 1;
}



.gradient-border {
  border: 0.5px solid transparent;
  border-image: linear-gradient(
    to right,
    #ffffff,
    #ffffff00,
    #ffffff
  ) 1;
  border-radius: 36px;
}




.float-image {
  display: block;
  margin: 0 auto;
  animation: waveRotate 4s ease-in-out infinite;
  transform-origin: center center; /* rotate around the center */
}

@keyframes waveRotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg); /* rotate left */
  }
  50% {
    transform: rotate(0deg);   /* back to center */
  }
  75% {
    transform: rotate(10deg);  /* rotate right */
  }
  100% {
    transform: rotate(0deg);   /* back to center */
  }
}



.tile-hover-animate {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-origin: center bottom; /* grow upward */
}

.tile-hover-animate:hover {
  transform: translateY(-8px) scale(1.03); /* slight lift & zoom */
  /* subtle shadow */
}
html {
  scroll-behavior: smooth;
}
/* Default sections */
section {
  scroll-margin-top: 150px;
}

/* Custom spacing per section */
#industries {
  scroll-margin-top: 50px;
}

#leading {
  scroll-margin-top: 10px;
}



#contact {
  scroll-margin-top: 50px;
}

.iti {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  .iti__flag-container {
    top: 50%;
    transform: translateY(-50%);
    left: 0.75rem; /* match Tailwind px-3 */
  }
  #phone {
    padding-left: 3rem; /* make space for flag */
  }

  #contactus {
  scroll-margin-top:200px; /* navbar height */
}