@import "tailwindcss";


:root{
  --primary : #f4a82e;
  --primary-light: #febd44;
  --primary-lighten: #feca6a;
  --secondary: #0000CC;
  --secondary-light: #0000FF;
  --pagebg: #F3F3F3;
  --background: #D9D9D9;
  
}

@font-face {
  font-family: maricle;
  src: url(/assets/fonts/maricle.ttf);
}

@font-face {
  font-family: input;
  src: url(/assets/fonts/InputSans-Regular.ttf);
}

html {
  scroll-behavior: smooth;
}

.font-heading{
  font-family: maricle; 
}

.font-sub-heading {
  font-family: input;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #EDEDED; 
  opacity: 0.6;
  border-radius: 9999px;
  transition: all 0.3s ease;
  margin: 0 4px;
}


.swiper-pagination-bullet-active {
  background: #0000CC; 
  opacity: 1;
  transform: scale(1.2);
}

.next-slide {
  transform: scale(0.95);
  transition: all 0.3s ease;
}

#burgerBtn span {
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

#burgerBtn.open span:nth-child(1) {
  transform: rotate(45deg) translateY(11px);
}
#burgerBtn.open span:nth-child(2) {
  opacity: 0;
}
#burgerBtn.open span:nth-child(3) {
  transform: rotate(-45deg) translateY(-11px);
}