/*
:root {
  /* Find a color hex code for blue-700, e.g., from https://tailwindcss.com/docs/customizing-colors */
  --color-primary: #1D4ED8; 
  --color-primary-hover: #1E40AF; 
  
  --color-accent: #22C55E; 
  --color-accent-hover: #16A34A;
  
  
  --color-primary-glow: 29, 78, 216; 
}


html {
  scroll-behavior: smooth;
}

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


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

.text-primary-500 { color: #1E40AF; } 
.text-primary-600 { color: #1D4ED8; } 
.bg-primary-500   { background-color: #1E40AF; } 
.bg-primary-600   { background-color: #1D4ED8; } 
.bg-primary-700   { background-color: #1E40AF; } 
.from-primary-600 { --tw-gradient-from: #1D4ED8 var(--tw-gradient-from-position); }
.via-primary-500  { --tw-gradient-to: #1E40AF var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1D4ED8 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-primary-700   { --tw-gradient-to: #1E40AF var(--tw-gradient-to-position); }



.btn {
  @apply inline-block px-8 py-4 rounded-full font-bold text-lg text-white transition-all duration-300 transform;
  letter-spacing: 0.5px;
}

.btn:hover {
  @apply -translate-y-1 shadow-lg;
}

.btn-primary {
  background-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-accent {
  background-color: var(--color-accent);
}

.btn-accent:hover {
  background-color: var(--color-accent-hover);
}


.glow-btn {
  box-shadow: 0 0 0px rgba(var(--color-primary-glow), 0.5);
}

.glow-btn:hover {
  box-shadow: 0 0 20px rgba(var(--color-primary-glow), 0.7);
}


.nav-link {
  @apply relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-primary);
  transition: width 0.3s ease-in-out;
}

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


.menu-card {
  @apply bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden text-center;
}

.product-item {
  
}


#order-slip-items::-webkit-scrollbar {
  width: 6px;
}
#order-slip-items::-webkit-scrollbar-track {
  background: #f1f1f1;
}
#order-slip-items::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
#order-slip-items::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

#hero {
 
  position: relative; 
  display: flex;
  align-items: center;
  min-height: 40vh; 
  padding: 4rem 1rem; 
  
  
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%);
  
 
  overflow: hidden; 
}


#hero::before {
  content: ''; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  
  background-image: url('../images/logo-bg-pattern.svg');
  background-repeat: repeat;
  background-size: 250px; 
  
  
  opacity: 0.05; 
  
  
  mix-blend-mode: screen; 
  

  z-index: 0; 
}

.blurred-bg-image {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  
  background-image: url('../images/products-section-bg.jpg');
  background-size: cover;
  background-position: center center;

 
  filter: blur(20px) grayscale(50%); 
  
  
  transform: scale(1.1);

 
  z-index: 0;
}


.swiper-pagination-bullet {
    background-color: #93C5FD; 
}
.swiper-pagination-bullet-active {
    background-color: #1D4ED8 !important; 
}