@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-brands/css/uicons-brands.css');

/* Tailwind CSS v4 Custom Color Configuration */
/* :root {
  --color-primary-50: #e9ecef;
  --color-primary-100: #dee2e6;
  --color-primary-200: #ced4da;
  --color-primary-300: #adb5bd;
  --color-primary-400: #6c757d;
  --color-primary-500: #495057;
  --color-primary-600: #343a40;
  --color-primary-700: #2B3035;
  --color-primary-800: #272C31;
  --color-primary-900: #212529;
  --color-primary: #212529;
} */

* {
    font-family: 'Inter', sans-serif;
}

.hero-bg {
    background-color: #f0f0f0;
}

.outline-text {
    -webkit-text-stroke: 1px #333;
    color: transparent;
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
}

.logo-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.swiper {
    width: 100%;
    height: auto;
    padding: 20px 0;
}

.swiper-slide {
    width: 100%;
    height: auto;
    background-position: center;
    background-size: cover;
}

.swiper-button-next,
.swiper-button-prev {
    color: #000;
}

.swiper-pagination-bullet-active {
    background: #000;
}

.product-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: none;
}

.side-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.side-menu.active {
    transform: translateX(0);
}

.menu-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* about page animation */

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .animate-marquee-new {
    display: flex;
    width: max-content;
    animation: marquee 5s linear infinite;
  }
  .marquee-wrapper {
    overflow: hidden;
    width: 100%;
  }

  .custom-btn {
    transition: 0.3s;
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
    animation: borderPulse 2000ms infinite ease-out;
  }
  
  @keyframes borderPulse {
    0%,
    45% {
      box-shadow: 0px 0px 0px 0px rgba(163, 163, 163, 0.815);
    }

  
    100% {
      box-shadow: 0px 0px 0px 15px rgba(167, 167, 167, 0);
    }
  }











  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }
  .animate-blob {
    animation: blob 7s infinite;
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
  .perspective {
    perspective: 1000px;
  }

/* Add mobile menu styles at the end of the file */
@media (max-width: 768px) {
  body {
    padding-bottom: 4rem; /* Add padding to body to account for fixed bottom menu */
  }

  .fixed.bottom-0 {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  }

  #mobileMoreMenu {
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    transition: all 0.3s ease;
  }

  /* Active state for menu items */
  .mobile-bottom-menu a.active {
    color: #0f172a;
  }

  /* Add safe area padding for iOS devices */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
      padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }
    .fixed.bottom-0 {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}