body{
    font-family: "Figtree", sans-serif;
}
.nav-ul li{
    position: relative;
}
.nav-ul li::after{
    content: '';
    position: absolute;
    height:1px;
    left:0;
    bottom:0;
    width: 0%;
    background: black;
    transition: width .2s;
}
.nav-ul li:hover::after{
    width:100%;
}
.big-nav{
    display: flex;
}
.small-nav{
    display: hidden;
}
.yearss{
  display: flex;
}
@media(max-width:768px){
    .small-nav{
        display: contents;
    }
    .big-nav{
        display: hidden;
    }
    .yearss{
      display:none;
    }
    
}
@media( min-width:375px){
    .yearss{
      display:none;
    }
}
.swiper{
  padding: 0%;
  margin: 0%;
}


@keyframes rotate-back-and-forth {
  
  0%, 100% {
    transform: rotate(-45deg); 
  }
  50% {
    transform: rotate(45deg);  
  }
}
.image-flip-90 {
  
  animation: 
    rotate-back-and-forth 
    5s                     
    ease-in-out            
    infinite;              
  transform: rotate(-45deg); 

}
.dropdown{
  position: fixed;
  /* Make sure it's always on top of everything else */
  z-index: 1000;
  /* Initially position it completely off-screen (above the viewport) */
  top: -100vh; /* 'vh' is viewport height - moves it up by its own height */
  left: 0;
  width: 100%;
}




.custom-prev,
.custom-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 22px;
  height: 22px;
  background: rgb(211, 203, 203);
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  border-radius: 50%;
}

.custom-prev {
  left: 0px;
  
}

.custom-next {
  right: 0px;
}


:root {
  --speed: 20s;
  --gap: 3rem;
}

.marquee-viewport {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  position: relative;

  /* This creates the "fade/blur" at the edges */
  mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

.marquee-track {
  display: flex; 
  /* border-bottom:1px solid grey; */
  /* border-top:1px solid grey; */

  width: max-content; /* Vital: allows track to be as wide as content */
  animation: scroll var(--speed) linear infinite;
}

.marquee-items {
  display: flex;
  gap: var(--gap);
  padding-right: var(--gap); /* Keeps spacing consistent between clones */
}
.marquee-items img{
  width: 25%;
  height: 80%;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* We move it by exactly half (one full set of items) */
    transform: translateX(-50%);
  }
}

/* Optional: Slow down on hover so people can read */
.marquee-viewport:hover .marquee-track {
  animation-play-state: running;
}

    /* Mobile dropdown base (hidden) */
#dropdown-menu.dropdown {
  position: absolute;
  top: calc(100% + 6px); /* just under the navbar */
  left: 0;
  right: 0;
  width: 100%;
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: max-height 0.32s ease, opacity 0.28s ease, transform 0.28s ease;
  z-index: 999;
}

/* Visible state (toggle adds .show) */
#dropdown-menu.dropdown.show {
  max-height: 520px; /* large enough for your items */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* optional small touch: smooth item hover inside dropdown */
#dropdown-menu ul li { cursor: pointer; }
#dropdown-menu ul li:hover { color: #84cc16; } /* lime-300 */