/* Buffer Loader Styles */
#buffer-loader {
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#buffer-loader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.loader-logo {
  animation: logoPulse 2s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.loader-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00C4B4, #008000);
  animation: dotBounce 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

.dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes dotBounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Custom styles for Vextro Industries */
body {
  font-family: 'Roboto', Arial, sans-serif;
}

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

.nav-link {
  @apply text-[#008000] font-montserrat px-3 py-2 rounded hover:bg-[#00C4B4] hover:text-white transition-all duration-300;
}

.nav-link-animated {
  @apply relative text-[#008000] font-montserrat font-semibold text-lg px-3 py-2 rounded transition-all duration-300;
}
.nav-link-animated::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00C4B4 0%, #008000 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.nav-link-animated:hover,
.nav-link-animated:focus {
  @apply text-[#00C4B4] scale-105;
}
.nav-link-animated:hover::after,
.nav-link-animated:focus::after {
  transform: scaleX(1);
}

.animate-fade-in {
  animation: fadeIn 1s ease-in;
}

.animate-slide-in {
  animation: slideIn 1s ease-in;
}

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

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

.nav-link-pill {
  @apply relative font-montserrat font-bold uppercase tracking-wide text-base px-5 py-2 rounded-full transition-all duration-300 text-[#008000] bg-transparent;
  letter-spacing: 0.05em;
  box-shadow: none;
}
.nav-link-pill:hover, .nav-link-pill:focus {
  @apply bg-gradient-to-r from-[#00C4B4] to-[#008000] text-white shadow-lg scale-105;
  box-shadow: 0 4px 16px 0 rgba(0,196,180,0.10);
}

.nav-link-glass {
  @apply relative font-montserrat font-bold uppercase tracking-wide text-base px-5 py-2 rounded-full transition-all duration-300 text-[#008000] bg-white/40 backdrop-blur-md shadow-sm;
  letter-spacing: 0.05em;
  box-shadow: none;
  overflow: hidden;
}
.nav-link-glass::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%) scaleX(0);
  width: 70%;
  height: 3px;
  background: linear-gradient(90deg, #00C4B4 0%, #008000 100%);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(.4,2,.6,1), opacity 0.3s;
  opacity: 0.7;
}
.nav-link-glass:hover, .nav-link-glass:focus {
  @apply text-transparent bg-white/60 shadow-lg scale-105;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(90deg, #00C4B4 0%, #008000 100%);
  filter: drop-shadow(0 2px 8px #00c4b455);
}
.nav-link-glass:hover::after, .nav-link-glass:focus::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.nav-link-animated2 {
  @apply relative font-montserrat font-bold uppercase tracking-wide text-base px-5 py-2 rounded-full transition-all duration-300 text-[#008000] bg-transparent flex items-center gap-2;
  overflow: hidden;
}
.nav-link-text {
  @apply transition-transform duration-300;
}
.nav-link-icon {
  @apply inline-block opacity-0 -translate-x-2 text-[#00C4B4] text-lg transition-all duration-300;
}
.nav-link-animated2:hover .nav-link-text,
.nav-link-animated2:focus .nav-link-text {
  @apply text-[#00C4B4] -translate-y-1;
}
.nav-link-animated2:hover .nav-link-icon,
.nav-link-animated2:focus .nav-link-icon {
  opacity: 1;
  transform: translateX(0);
}
.nav-link-animated2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #00C4B4 0%, #008000 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(.4,2,.6,1);
}
.nav-link-animated2:hover::after,
.nav-link-animated2:focus::after {
  transform: scaleX(1);
}
.nav-link-animated2:hover,
.nav-link-animated2:focus {
  @apply bg-white/60 shadow-md;
}

.nav-link-minimal {
  @apply font-montserrat font-extrabold uppercase text-black text-lg px-4 py-2 transition-colors duration-200;
  letter-spacing: 0.04em;
}
.nav-link-minimal.active,
.nav-link-minimal:focus,
.nav-link-minimal:hover {
  color: #e6a48b !important;
}

.nav-link-attractive {
  font-family: 'Poppins', 'Montserrat', Arial, sans-serif;
  @apply italic tracking-widest text-4xl px-3 py-2 transition-colors duration-200 text-[#008000] rounded relative flex items-center gap-2;
  font-weight: 900;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-shadow: 1px 2px 6px rgba(0,0,0,0.10), 0 1px 0 #fff;
}
.nav-link-attractive .nav-link-icon {
  @apply inline-block opacity-0 -translate-x-2 text-[#00C4B4] text-lg transition-all duration-300;
}
.nav-link-attractive:hover .nav-link-icon,
.nav-link-attractive:focus .nav-link-icon,
.nav-link-attractive.active .nav-link-icon {
  opacity: 1;
  transform: translateX(0);
}
.nav-link-attractive::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.2em;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00C4B4 0%, #008000 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(.4,2,.6,1);
}
.nav-link-attractive:hover::after,
.nav-link-attractive:focus::after,
.nav-link-attractive.active::after {
  transform: scaleX(1);
}
.nav-link-attractive:hover,
.nav-link-attractive:focus {
  @apply -translate-y-1;
  color: #00b86b !important;
  background: linear-gradient(90deg, #00C4B4 0%, #008000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.nav-link-attractive.active,
.nav-link-attractive:focus {
  color: #00b86b !important;
  @apply font-bold;
}

.footer-link {
  @apply relative text-[#008000] font-montserrat font-medium text-base transition-colors duration-300 hover:text-[#00C4B4] focus:text-[#00C4B4];
  padding-bottom: 2px;
}
.footer-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #00C4B4 0%, #008000 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(.4,2,.6,1);
}
.footer-link:hover::after,
.footer-link:focus::after {
  transform: scaleX(1);
}

@keyframes fadeInFooter {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeInFooter 1.2s cubic-bezier(.4,2,.6,1);
}

@keyframes footerLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-footer-left {
  animation: footerLeft 1.1s cubic-bezier(.4,2,.6,1);
}

@keyframes footerRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-footer-right {
  animation: footerRight 1.1s cubic-bezier(.4,2,.6,1);
}

@keyframes footerTop {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-footer-top {
  animation: footerTop 1.1s cubic-bezier(.4,2,.6,1);
}

@keyframes footerBottom {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-footer-bottom {
  animation: footerBottom 1.1s cubic-bezier(.4,2,.6,1);
}

.footer-link-strong {
  @apply relative font-poppins font-semibold text-base text-[#008000] transition-colors duration-300 hover:text-[#00C4B4] focus:text-[#00C4B4] tracking-wide italic;
  padding-bottom: 2px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.footer-link-strong::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #00C4B4 0%, #008000 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(.4,2,.6,1);
}
.footer-link-strong:hover::after,
.footer-link-strong:focus::after {
  transform: scaleX(1);
}
.footer-link-strong:hover,
.footer-link-strong:focus {
  @apply text-[#00C4B4] scale-105;
}

/* Add Poppins font from Google Fonts in your HTML head if not already present: */
/* <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poppins:wght@500;600&display=swap" rel="stylesheet"> */

.card-animate {
  transition: box-shadow 0.4s cubic-bezier(.4,2,.6,1), transform 0.4s cubic-bezier(.4,2,.6,1), z-index 0.4s cubic-bezier(.4,2,.6,1);
  box-shadow: 0 4px 24px 0 rgba(0,196,180,0.10), 0 1.5px 8px 0 rgba(0,128,0,0.08);
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: cardFadeIn 1s cubic-bezier(.4,2,.6,1) 0.1s forwards;
  z-index: 1;
}
.card-animate:hover, .card-animate:focus {
  box-shadow: 0 16px 48px 0 rgba(0,196,180,0.22), 0 6px 24px 0 rgba(0,128,0,0.16);
  transform: translateY(-18px) scale(1.36) rotate(-1.5deg);
  z-index: 10;
}
@keyframes cardFadeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes aboutFadeLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}
.about-fade-left {
  animation: aboutFadeLeft 1.2s cubic-bezier(.4,2,.6,1) 0.1s both;
}

@keyframes aboutFadeRight {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}
.about-fade-right {
  animation: aboutFadeRight 1.2s cubic-bezier(.4,2,.6,1) 0.1s both;
}

@keyframes aboutSlideBounceLeft {
  0% { transform: translateX(-120px) scale(0.95); }
  60% { transform: translateX(20px) scale(1.05); }
  80% { transform: translateX(-8px) scale(1.01); }
  100% { transform: translateX(0) scale(1); }
}
.about-bounce-left {
  /* animation: rubberBand 2.5s infinite; */
  transform-origin: left center;
}

@keyframes rubberBand {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(.95, 1.05, 1); }
  75% { transform: scale3d(1.05, .95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes aboutSlideBounceRight {
  0% { transform: translateX(120px) rotate(8deg) scale(0.95); }
  60% { transform: translateX(-20px) rotate(-2deg) scale(1.05); }
  80% { transform: translateX(8px) rotate(1deg) scale(1.01); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}
.about-bounce-right {
  animation: aboutSlideBounceRight 1.2s cubic-bezier(.68,-0.55,.27,1.55) 0.1s both;
}

@keyframes floatImage {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0px); }
}
.about-bounce-right img {
  animation: floatImage 3.5s ease-in-out infinite;
}

/* Floating animation for the Why Choose Us image (vertical up/down, no fade) */
.whyus-float-img {
  animation: whyusFloat 3.5s ease-in-out infinite;
}
@keyframes whyusFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

/* Fade-in for the paragraph */
.animate-fade-in {
  animation: fadeInWhyus 1.2s cubic-bezier(.4,2,.6,1);
}
@keyframes fadeInWhyus {
  from { opacity: 0; transform: translateY(40px);}
  to { opacity: 1; transform: translateY(0);}
}

/* List item entrance animation */
.whyus-list-item {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  animation: whyusListFadeIn 0.8s cubic-bezier(.4,2,.6,1) forwards;
}
.whyus-list-item:nth-child(1) { animation-delay: 0.2s; }
.whyus-list-item:nth-child(2) { animation-delay: 0.35s; }
.whyus-list-item:nth-child(3) { animation-delay: 0.5s; }
.whyus-list-item:nth-child(4) { animation-delay: 0.65s; }
.whyus-list-item:nth-child(5) { animation-delay: 0.8s; }
.whyus-list-item:nth-child(6) { animation-delay: 0.95s; }

@keyframes whyusListFadeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Continuous rotation animation for Why Choose Us image */
.whyus-rotate-img {
  animation: whyusRotate 6s linear infinite;
}
@keyframes whyusRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes heroFloatRotate {
  0% { transform: translateY(0) rotate(-2deg) scale(1); }
  25% { transform: translateY(-18px) rotate(2deg) scale(1.04); }
  50% { transform: translateY(-32px) rotate(-2deg) scale(1.08); }
  75% { transform: translateY(-18px) rotate(2deg) scale(1.04); }
  100% { transform: translateY(0) rotate(-2deg) scale(1); }
}
.animate-hero-float {
  animation: heroFloatRotate 4.5s ease-in-out infinite;
}

/* Unique style for the hero section 'View Products' button */
.hero-products-btn {
  /* Add custom styles here if needed in the future */
}

.animate-zoom-in {
  animation: zoomInHowWeWork 0.7s ease-out;
}
@keyframes zoomInHowWeWork {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hover\:animate-zoom-in:hover {
  animation: zoomInHowWeWork 0.5s cubic-bezier(.4,2,.6,1);
}

@keyframes dropdown-fade-slide {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dropdown-animate {
  animation: dropdown-fade-slide 0.3s ease-out forwards;
}