@import "tailwindcss";
@custom-variant hover (&:hover);
@custom-variant focus (&:focus);

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 1.1s ease-out forwards;
}

.animate-moveUp {
  animation: slideUp 1.1s ease-out forwards;
}


  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: #F37216;
    transition: width 0.3s ease;
  }

  .nav-link.active::after {
    width: 100%;
  }

  .banner a{
    height: 40px !important; 
  
  }

  @keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-right {
  animation: slideInRight 1s ease-out forwards;
}
.contact:hover{
  background-color: #F37216;
  border: #F37216;
  border: none;
}

.hero-height {
  height: 100vh; /* mobile */
}

/* sm ≥ 640px */
@media (min-width: 640px) {
  .hero-height {
    height: 100vh;
  }
}

/* md ≥ 768px */
@media (min-width: 768px) {
  .hero-height {
    height: 100vh;
  }
}

/* lg ≥ 1024px (DESKTOP) */
@media (min-width: 1024px) {
  .hero-height {
    height: 100vh;
  }
}


@media (min-width: 1440px) {
  .hero-height {
    height: 100vh;
 
  }
}

@media (min-width: 2560px) {
  .hero-height {
    height: 100vh;
   
    
  }
}

 /* Fade background */
  #imagePopup {
    animation: fadeIn 0.25s ease forwards;
  }

  /* Zoom image */
  .animate-image {
    animation: zoomIn 0.35s ease forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes zoomIn {
    from {
      transform: scale(0.85);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }