:root {
  --primary: #fefe67;
  --secondary: #4ecdc4;
  --dark: #30341d;
  --light: #f7fff7;
}
*{
  box-sizing: border-box;
}
/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

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

.animate-delay-1 {
  animation-delay: 0.3s;
}
.animate-delay-2 {
  animation-delay: 0.6s;
}
.animate-delay-3 {
  animation-delay: 0.9s;
}

.pulse-hover:hover {
  animation: pulse 1s infinite;
}

/* Scroll animations */
.scroll-hidden {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.scroll-show {
  opacity: 1;
  transform: translateY(0);
}

/* Menu card hover effect */
.menu-card {
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.menu-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Testimonial carousel */
.testimonial {
  transition: all 0.5s ease;
}

.testimonial.active {
  opacity: 1;
  transform: scale(1);
  z-index: 10;
}

.testimonial.inactive {
  opacity: 0;
  transform: scale(0.8);
  z-index: 1;
}

/* Mobile menu */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.mobile-menu.open {
  max-height: 500px;
}

/* Sticky header */
.header {
  transition: all 0.3s ease;
}

.header.scrolled {
  background-color: rgba(41, 47, 54, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Custom button */
.btn-primary {
  background-color: var(--primary);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #ffff1f;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3);
}

/* Section padding */
section {
  padding: 5rem 0;
}

/* Hero section */
.hero {
  background: linear-gradient(rgba(0, 0, 40, 0.5), rgba(0, 0, 0, 0.805)),
    url("/images/hero.jpg") no-repeat center center/cover;
  min-height: 100vh;
}

/* About section image */
.about-img {
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease;
}

.about-img:hover {
  transform: rotate(-2deg) scale(1.02);
}

/* Contact form */
.contact-input {
  border-bottom: 2px solid #908e4a;
  transition: all 0.3s ease;
}

.contact-input:focus {
  border-bottom-color: var(--primary);
}
footer {
  /* background-image: url("images/footer.jpg"); */
  background-repeat: no-repeat;
  background-size: cover;
}
.ftr a:hover {
  transform: translateY(-5px);
  scale: 1.1;
}
/* .active{
        background-color: var(--primary);
        color: var(--dark);
        border: 2px solid var(--primary);
      } */
.actives {
  transform: scale(0.96);
  background: rgb(255, 201, 100) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
}
 .inline-flex-warp{
        background:rgba(255, 255, 255, 0.079);
        backdrop-filter: blur(40px);
        display: flex;
        flex-direction: row !important;
       
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 0 0!important;
       
        border-radius: 0px !important;
       
        
      }
      .category-btn {
      height: 100%;
            }
                  .category-btn:active,.category-btn:focus {
        outline: none !important;
      }
     
      @media screen and (max-width: 500px) {
        .menu-card {
          margin-bottom: 1.5rem;
        }
        .inline-flex-warp {
          padding:-1px !important;
           gap: 0;
            bottom: 0 !important;
            height: 6% !important;
            width: 100% !important;
            background-color: #fff;
            background: rgb(255, 201, 100) !important;
        }
        .category-btn {
          width: 100%;
          padding: 2px !important;
          margin-bottom: 5px;
          font-size: 1rem !important;
          width: max-content !important;
          text-transform:capitalize !important;
          color: rgb(53, 53, 0) !important;
          border-radius: 0px !important;
          padding: 3px  5px !important;
          border: none;
          border-left: 2px solid;
          border-bottom: 0px solid;
          border-top: 0px solid;
          
        }
        .category-btn:first-child{
           border-right: transparent !important;
          flex: 1 1 0;
          width: 100% !important;
          border-left: transparent;
        }
        .category-btn:last-child{
          border-right: transparent !important;
          flex: 1 1 0;
          width: 100% !important;
        }
           @media screen and (max-width:370px) {
          .inline-flex-warp {
           gap: 0rem;
        }
        .category-btn{
          padding: 3px 2px !important;
        }
      }
       @media screen and (max-width:350px) {
          .inline-flex-warp {
           gap: 0rem;
        }
        .category-btn{
          padding: 3px 0px !important;
        }
      }
      }