/* ============================================
   BID Partners - Custom Animations & Enhancements
   ============================================ */

/* --- Language switcher --- */
.lang-switcher {
  display: flex;
  align-items: center;
  margin-left: 15px;
  gap: 4px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.lang-switcher a {
  color: var(--dark-turquoise);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
  opacity: 0.5;
  display: inline-block;
  line-height: 1;
}

.lang-switcher a:hover {
  opacity: 0.8;
}

.lang-switcher a.active-lang {
  opacity: 1;
  background-color: var(--blue-dark);
  color: var(--white);
}

.lang-switcher .lang-divider {
  color: var(--dark-turquoise);
  opacity: 0.3;
  font-weight: 400;
  user-select: none;
}

@media screen and (max-width: 991px) {
  .lang-switcher {
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    justify-content: center;
  }

  .lang-switcher a {
    color: var(--white);
  }

  .lang-switcher a.active-lang {
    background-color: var(--dodger-blue);
    color: var(--white);
  }

  .lang-switcher .lang-divider {
    color: var(--white);
  }
}

/* --- Smooth scrolling --- */
html {
  scroll-behavior: smooth;
}

/* --- Navbar glassmorphism on scroll --- */
.navbarmenu {
  transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
  z-index: 1000;
}

.navbarmenu.scrolled {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  border-bottom-color: transparent;
}

/* --- Nav link hover effects --- */
.nav-link, .nav-link-2, .nav-link-3 {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after, .nav-link-2::after, .nav-link-3::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--blue-dark);
  transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover::after, .nav-link-2:hover::after, .nav-link-3:hover::after {
  width: 70%;
  left: 15%;
}

.nav-link.register::after {
  display: none;
}

.nav-link.register {
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.nav-link.register:hover {
  background-color: var(--dodger-blue);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(56, 152, 236, 0.4);
}

/* --- Scroll-triggered animations --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.animate-delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.animate-delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.animate-delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.animate-delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.animate-delay-5 { transition-delay: 0.5s; }

.animate-fade-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-fade-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-fade-left.animate-visible,
.animate-fade-right.animate-visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-scale-in.animate-visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Hero section enhancements --- */
.hero-section {
  overflow: hidden;
  position: relative;
}

.heading-hero {
  opacity: 1 !important;
  animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.company-name-hero {
  opacity: 1 !important;
  animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.hero-paragraph {
  opacity: 1 !important;
  animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

.hero-text-wrapper .learn-more-btn {
  opacity: 1 !important;
  animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.hero-image {
  opacity: 1 !important;
  animation: floatIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* Floating animation for hero truck */
.hero-picture {
  animation: gentleFloat 6s ease-in-out infinite;
}

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

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateX(60px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

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

/* --- Gradient text for hero "transform" --- */
.text-span-7 {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--dodger-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Button enhancements --- */
.learn-more-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.learn-more-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

.learn-more-btn:hover::before {
  left: 100%;
}

.learn-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 73, 127, 0.3);
}

.learn-more-btn:active {
  transform: translateY(0);
}

.start-now-btn {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.start-now-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(56, 152, 236, 0.35);
}

/* --- Services cards (about page) --- */
.services-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
}

.services-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-dark), var(--dodger-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(16, 73, 127, 0.15);
}

.services-card:hover::after {
  transform: scaleX(1);
}

/* --- About grid images --- */
.image-3, .image-4 {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-3:hover, .image-4:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* --- CTA section enhancements --- */
.services-section.cc-cta {
  background: linear-gradient(135deg, #10497f 0%, #0d3a66 50%, #10497f 100%);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
  position: relative;
  overflow: hidden;
}

.services-section.cc-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(56, 152, 236, 0.1) 0%, transparent 50%);
  animation: rotateBg 20s linear infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes rotateBg {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Contact form enhancements --- */
.contact-form-wrap {
  transition: box-shadow 0.4s ease;
}

.contact-form-wrap:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.text-field {
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.text-field:focus {
  border-color: var(--blue-dark) !important;
  box-shadow: 0 0 0 3px rgba(16, 73, 127, 0.1);
}

.contact-submit-btn {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.contact-submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

.contact-submit-btn:hover::before {
  left: 100%;
}

.contact-submit-btn:hover {
  background-color: var(--dodger-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 73, 127, 0.35);
}

/* --- Footer enhancements --- */
.footer {
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-dark), transparent);
}

.social-media-wrapper a {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-media-wrapper a:hover {
  transform: translateY(-3px);
  opacity: 0.8;
}

.logo-footer {
  transition: transform 0.3s ease;
}

.logo-footer:hover {
  transform: scale(1.1);
}

/* --- 404 page enhancement --- */
._404-wrap {
  background: linear-gradient(135deg, #1a1b1f 0%, #10497f 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

._404-wrap::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 70% 30%, rgba(56, 152, 236, 0.15) 0%, transparent 50%);
}

.heading-jumbo {
  animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

._404-wrap .paragraph-bigger {
  animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

._404-wrap .learn-more-btn {
  animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

/* --- Motto section divider --- */
.divider {
  background: linear-gradient(90deg, transparent, var(--blue-dark), transparent);
  height: 2px;
  opacity: 0.3;
}

/* --- Rich page backgrounds --- */

/* Grid pattern overlay (logistics route grid) */
.body {
  position: relative;
}

.body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(16, 73, 127, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 73, 127, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: -2;
}

.body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 85% 10%, rgba(16, 73, 127, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(56, 152, 236, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(16, 73, 127, 0.02) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* About page background */
.body.about-body::before {
  background-image:
    linear-gradient(rgba(16, 73, 127, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 73, 127, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Contact page background */
.body-2::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(16, 73, 127, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 73, 127, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: -2;
}

.body-2::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 90% 20%, rgba(56, 152, 236, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 5% 80%, rgba(16, 73, 127, 0.05) 0%, transparent 40%);
  pointer-events: none;
  z-index: -1;
}

/* Decorative route dots on hero section */
.hero-section::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 5%;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, rgba(16, 73, 127, 0.12) 2px, transparent 2px);
  background-size: 20px 20px;
  opacity: 0.6;
  z-index: -1;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: 10%;
  right: 3%;
  width: 150px;
  height: 150px;
  background-image: radial-gradient(circle, rgba(56, 152, 236, 0.1) 2px, transparent 2px);
  background-size: 24px 24px;
  opacity: 0.5;
  z-index: -1;
}

/* Decorative line accents for sections */
.services-section.cc-store-home-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 73, 127, 0.15), transparent);
}

.services-section.cc-store-home-wrap {
  position: relative;
}

/* About grid decorative elements */
.about-grid {
  position: relative;
}

.home-content-wrap {
  position: relative;
}

.home-content-wrap::before {
  content: '';
  position: absolute;
  top: -40px;
  right: 5%;
  width: 120px;
  height: 120px;
  border: 2px solid rgba(16, 73, 127, 0.06);
  border-radius: 50%;
  z-index: -1;
}

.home-content-wrap::after {
  content: '';
  position: absolute;
  bottom: 10%;
  left: 3%;
  width: 80px;
  height: 80px;
  border: 2px solid rgba(56, 152, 236, 0.06);
  border-radius: 50%;
  z-index: -1;
}

/* Services section decorative elements */
.our-services-grid {
  position: relative;
}

.section-heading-wrap {
  position: relative;
}

.section-heading-wrap::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-image: radial-gradient(circle, rgba(16, 73, 127, 0.08) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.5;
  z-index: -1;
}

/* CTA section - logistics route line decoration */
.services-section.cc-cta::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 40px;
  width: 100px;
  height: 100px;
  border: 2px dashed rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  z-index: 0;
}

/* Footer subtle pattern */
.footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(16, 73, 127, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 73, 127, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.footer > * {
  position: relative;
  z-index: 1;
}

/* Contact form decorative background */
.contact-form-grid {
  position: relative;
}

.services-section.contact-section {
  position: relative;
}

.services-section.contact-section::before {
  content: '';
  position: absolute;
  top: 15%;
  right: 8%;
  width: 180px;
  height: 180px;
  background-image: radial-gradient(circle, rgba(16, 73, 127, 0.07) 2px, transparent 2px);
  background-size: 22px 22px;
  opacity: 0.4;
  z-index: -1;
}

.services-section.contact-section::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 5%;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(16, 73, 127, 0.06);
  border-radius: 50%;
  z-index: -1;
}

/* --- Section heading about page --- */
.heading-about {
  position: relative;
  display: inline-block;
}

.heading-about::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-dark), var(--dodger-blue));
  border-radius: 2px;
}

/* --- Staggered card animations --- */
.services-card:nth-child(1) { transition-delay: 0.05s; }
.services-card:nth-child(2) { transition-delay: 0.1s; }
.services-card:nth-child(3) { transition-delay: 0.15s; }
.services-card:nth-child(4) { transition-delay: 0.2s; }
.services-card:nth-child(5) { transition-delay: 0.25s; }
.services-card:nth-child(6) { transition-delay: 0.3s; }

/* --- Smooth image reveal --- */
.image-3, .image-4 {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Fix inline opacity:0 overrides for Webflow elements --- */
.heading-text-about,
.section-heading,
.paragraph-light.who-we-are,
.paragraph-light.what-we-do,
.who-we-are-text .learn-more-btn,
.what-we-do-text .learn-more-btn {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Responsive adjustments --- */
@media screen and (max-width: 991px) {
  .nav-link::after, .nav-link-2::after, .nav-link-3::after {
    display: none;
  }

  .hero-picture {
    animation: none;
  }
}

@media screen and (max-width: 767px) {
  .animate-on-scroll {
    transform: translateY(25px);
  }

  .animate-fade-left,
  .animate-fade-right {
    transform: translateY(25px);
  }
}