@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

html,
body {
  overflow-x: hidden;
}

.link-hover {
  @apply hover:text-[#0480b4] hover:no-underline transition-colors duration-500;
}

.link-nav {
  @apply tracking-widest text-lg flex items-center text-white font-medium uppercase relative transition-all duration-500 ease-in-out hover:text-[#0480b4];
}

.footer-link {
  @apply text-[#fff] text-[15px] font-medium transition-colors duration-500 hover:text-[#0480b4] tracking-wider;
}

.footer-icon {
  @apply rounded-full p-4 bg-[#0c0c0d] hover:bg-[#0480b4] hover:text-[#161617] transition-colors duration-300 flex items-center justify-center;
}

.footer-contact {
  @apply text-[15px] font-medium transition-colors duration-500 hover:text-[#0480b4] tracking-wider;
}

.services-modal {
  @apply block px-8 py-3  hover:bg-[#161617] hover:text-[#fff] transition-all duration-700 ease-in-out;
}

.service-why-choose-box {
  @apply bg-[#f2f2f6] h-44 w-full md:w-44 text-center shadow-lg items-center justify-evenly flex flex-col p-6 transition-all duration-700 hover:bg-[#161617] hover:text-white;
}

.service-why-choose-box-title {
  @apply text-[16px] font-medium uppercase transition-all duration-700;
}

.service-why-choose-box-icon {
  @apply text-5xl mx-auto mb-4 transition-all duration-700 transform;
}

.service-our-benefits-box {
  @apply flex items-start gap-4;
}

.service-our-benefits-icon {
  @apply text-xl text-[#0480b4] mt-1;
}

.service-our-benefits-text {
  @apply text-[16px] text-[#161617] font-medium;
}

.service-why-choose-box:hover .service-why-choose-box-icon {
  color: #0480b4;
  transform: scale(0.85);
}

.hamburger-menu-contact {
  @apply flex items-center gap-4 text-sm hover:scale-105 transition-all duration-700 hover:text-[#0480b4] cursor-pointer;
}

.hamburger-menu-icon {
  @apply text-xl hover:scale-110 transition-all duration-700 hover:text-[#0480b4] mt-5;
}

.about-agency-box {
  @apply flex items-start gap-4;
}

.about-agency-icon {
  @apply min-w-[60px] h-[60px] sm:min-w-[80px] sm:h-[80px] aspect-square bg-[#0480b4] flex items-center justify-center text-2xl sm:text-4xl text-[#171717];
}

.about-agency-textbox {
  @apply flex flex-col gap-1;
}

.about-agency-heading {
  @apply text-base sm:text-lg md:text-xl uppercase font-semibold text-[#161617] tracking-tight;
}

.about-agency-text {
  @apply text-sm text-[#717175] leading-[24px] font-medium;
}


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

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

.slide-in-left {
  animation: slideInLeft 1s ease forwards;
}

.slide-in-right {
  animation: slideInRight 1s ease forwards;
  animation-delay: 0.3s;
}

/* Custom Animations */
@layer utilities {
  .animate-bounce-slow {
    animation: bounceSlow 6s infinite ease-in-out;
  }

  @keyframes bounceSlow {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-30px);
    }
  }

  .animate-slide-in-right {
    animation: slideInRight 1s ease-out both;
  }

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