@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz@12..96&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Tamil:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shanti&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import "tailwindcss";

@font-face {
  font-family: "Doppio One";
  src: url('../fonts/DoppioOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@theme {
  --font-sans: "Inter", "system-ui", "sans-serif";
  --font-open: "Open Sans", sans-serif;
  --font-reddit: "Reddit Sans", sans-serif;
  --font-inter: "Inter", "system-ui", "sans-serif";

  --font-poetsen: "Poetsen One", sans-serif;
  --font-bricolage: "Bricolage Grotesque", sans-serif;
  --font-noto-tamil: "Noto Sans Tamil", sans-serif;
  --font-dopio: "Doppio One", sans-serif;
  --font-shanti: "Shanti", sans-serif;


  /* Defining the Brand Color Scale */
  --color-brand: #FFD800;
  --color-brand-50: #fffbeb;
  --color-brand-100: #fef3c7;
  --color-brand-200: #fde68a;
  --color-brand-300: #fcd34d;
  --color-brand-400: #fbbf24;
  --color-brand-500: #f59e0b;
  --color-brand-600: #d97706;
  --color-brand-700: #b45309;
  --color-brand-800: #92400e;
  --color-brand-900: #78350f;
  --color-brand-950: #451a03;
}

/* Custom utility for the hide-scrollbar look in your screenshot */
@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

html,
body {
  scroll-behavior: smooth;
}

.nav-item.active {
  color: #FFD800;
  border-bottom: 2px solid #FFD800;
  padding-bottom: 0.25rem;
}

.nav-dropdown-item.active>div,
.nav-dropdown-item.active>span {
  color: #FFD800 !important;
}

[data-section] {
  scroll-margin-top: 5rem;
  /* offset for sticky header */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* Custom Arrow Styles */
.custom-arrows-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.custom-arrow {
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  background: white;
  color: black;
}
.custom-arrow:hover {
  cursor: pointer;
}

.custom-arrow:active {
  transform: scale(0.90);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}



/* Default slides */
.swiper-slide.centered {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
  transform: scale(0.80);
  z-index: 1;
}

/* Active (center) */
.swiper-slide.centered.swiper-slide-active {
  transform: scale(1.15);
  z-index: 10;
}

/* Neighbors */
.swiper-slide.centered.swiper-slide-prev,
.swiper-slide.centered.swiper-slide-next {
  transform: scale(0.95);
  z-index: 5;
}

.swiper-slide.centered:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
  transform: scale(0.85);
  z-index: 1;
}