/*  Your Custom CSS Code Goes Here */

@font-face {
  font-family: 'Avenir';
  src: url('https://storage.googleapis.com/websitebuilder/assets/fonts/Avenir.ttc') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Wandery Rough';
  src: url('https://storage.googleapis.com/websitebuilder/assets/fonts/Wandery%20Rough.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Avenir', sans-serif !important;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Wandery Rough', 'Avenir', sans-serif !important;
}

.custom-scroller {
  overflow-y: auto; 
  scrollbar-width: thin; 
  scrollbar-color: #f58220ff #f3f4f6;
  padding-right: 12px;
}

.custom-scroller::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scroller::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

.custom-scroller::-webkit-scrollbar-thumb {
  background-color: #8b5cf6; 
  border-radius: 10px;
  border: 2px solid #f3f4f6;
}

.custom-scroller::-webkit-scrollbar-thumb:hover {
  background-color: #6b21a8;
}

/* Custom animation for the flag */
    @keyframes flagWave {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(-5deg); }
      50% { transform: rotate(0deg); }
      75% { transform: rotate(5deg); }
      100% { transform: rotate(0deg); }
    }
    
    .flag-animation {
      animation: flagWave 3s ease-in-out infinite;
      transform-origin: bottom center;
    }
    
    /* Bounce animation */
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    .bounce-animation {
      animation: bounce 2s ease-in-out infinite;
    }

	/* Blink animation */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.blink-animation {
  animation: blink 2s ease-in-out infinite;
}