/* mission vision */

@media (max-width: 767px) {
  /* Ensure the hover/active box color fills fully */
  .tabs .nav-item {
    width: 25% !important;
    display: block !important; /* revert flex here */
    text-align: center;
  }

  .tabs .nav-link {
    width: 100%;
    display: inline-block !important;
    padding: 10px 0 !important;
  }

  .tabs .featured-boxes,
  .tabs .featured-box {
    display: inline-block !important;
    width: 100%;
  }

  .tabs .box-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .tabs .nav-link h4 {
    display: none !important; /* keep text hidden */
  }

  .tabs .nav-link .box-content svg {
    width: 45px !important;
    height: 45px !important;
  }
}

/* home projects hover overlay */

.overlay {
  position: relative;
  overflow: hidden;
}

.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 13, 14, 0.25); /* Light blue tint */
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.overlay:hover::before {
  opacity: 1;
}



/* Tooltip */

/* ===== Tooltip (appended to body) ===== */
.tooltip-ui {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(0,0,0);
  background: var(--primary, #007bff);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.92rem;
  white-space: nowrap;
  pointer-events: none; /* don't block mouse events */
  z-index: 999999;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  transform-origin: center bottom;
}

/* visible state */
.tooltip-ui.show {
  opacity: 1;
  transform: translate3d(0, -6px, 0); /* slight lift */
}

/* arrow */
.tooltip-ui::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-width: 7px;
  border-style: solid;
  border-color: var(--primary, #007bff) transparent transparent transparent; /* arrow pointing down */
  bottom: -14px; /* sits below the tooltip when tooltip is above the element */
  pointer-events: none;
}

/* when forced to show below the element, add 'below' class to place arrow on top */
.tooltip-ui.below {
  transform-origin: center top;
}
.tooltip-ui.below::after {
  top: -14px;
  bottom: auto;
  border-color: transparent transparent var(--primary, #007bff) transparent; /* arrow pointing up */
}

/* small responsive tweak so tooltip can wrap if viewport is small */
.tooltip-ui.wrap {
  white-space: normal;
  max-width: 280px;
  text-align: center;
  padding: 10px 12px;
}

/* nice fade for mobile touch toggles */
@media (hover: none) {
  .tooltip-ui {
    transition-duration: 120ms;
  }
}


/* Loading */


/* Tecphil Loader Overlay */
/* --- Loader Overlay --- */
#page-loader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* --- Fade-in for site --- */
.site-content {
  opacity: 0;
  transition: opacity 1.2s ease;
}

body.loaded .site-content {
  opacity: 1;
}

/* --- Bouncing Circles Animation --- */
.wrapper {
  width: 200px;
  height: 60px;
  position: relative;
}

.circle {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: var(--primary);
  left: 15%;
  transform-origin: 50%;
  animation: circle-bounce 0.6s alternate infinite ease;
}

@keyframes circle-bounce {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }
  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0%;
  }
}

.circle:nth-child(2) {
  left: 45%;
  animation-delay: 0.2s;
}

.circle:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: 0.3s;
}

.shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(19, 18, 18, 0.9);
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow-scale 0.6s alternate infinite ease;
}

@keyframes shadow-scale {
  0% {
    transform: scaleX(1.5);
  }
  40% {
    transform: scaleX(1);
    opacity: 0.7;
  }
  100% {
    transform: scaleX(0.2);
    opacity: 0.4;
  }
}

.shadow:nth-child(4) {
  left: 45%;
  animation-delay: 0.2s;
}

.shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: 0.3s;
}








/* Industries we Serve */

.featured-box:hover .icon-featured{
  background-color: var(--primary);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.featured-box .icon-featured{
  transition: all 0.3s ease;
}


/* Specialize */
/* smooth animation setup */

.custom-card-1 .animated-icon i {
  transition: all 0.3s ease;
}

/* hover effect — when the whole card is hovered */
.custom-card-1:hover .animated-icon i {    
  transform: scale(1.2) rotate(360deg);
  transition: 1s ease;
}

.custom-card-1:hover .rounded-circle {
  background-color: var(--primary) !important;
  transition: background-color 0.3s ease;
}

.custom-card-1:hover .animated-icon i.text-light {
  color: #fff; 
}