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

@font-face {
  font-family: 'Outfit';
  src: url("/fonts/Outfit-Medium.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Outfit';
  src: url("/fonts/Outfit-Bold.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Roboto';
  src: url("/fonts/Roboto-Light.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: optional;
}

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

@font-face {
  font-family: 'Roboto';
  src: url("/fonts/Roboto-Medium.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Roboto';
  src: url("/fonts/Roboto-Bold.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}



/* Website specific styles */
.website-layout {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size-adjust: 0.5;
}

.website-layout .font-display {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size-adjust: 0.5;
}

/* Add CSS containment to prevent layout shifts */
.website-layout {
  contain: layout style paint;
}

/* Ensure consistent spacing for elements that might shift */
.is-animated,
.is-animated-reverse,
.is-animated-footer {
  min-height: 1em;
  contain: layout style paint;
}

/* Website color scheme */
.bg-green-50 { background-color: #E6F3B7; }
.bg-green-100 { background-color: #B8DE31; }
.bg-pink-50 { background-color: #FADEF0; }
.bg-pink-100 { background-color: #E659B5; }
.bg-purple-50 { background-color: #FAF6FE; }
.bg-purple-100 { background-color: #E1CBFC; }
.bg-purple-200 { background-color: #9C51F4; }
.border-grey { border-color: #DEDEDE; }

/* Border opacity for navbar on large screens */
@media (min-width: 1024px) {
  .lg\:border-opacity-40 {
    border-color: rgba(222, 222, 222, 0.4);
  }
}
.text-green-100 { color: #B8DE31; }
.text-green-500 { color: #93B227; }
.text-pink-100 { color: #E659B5; }
.text-pink-500 { color: #B84791; }
.text-purple-200 { color: #9C51F4; }
.text-purple-500 { color: #7D41C3; }
.hover\:bg-pink-100:hover { background-color: #E659B5; }
.hover\:text-pink-100:hover { color: #E659B5; }
.hover\:text-green-100:hover { color: #B8DE31; }
.hover\:text-purple-500:hover { color: #7D41C3; }
.stroke-purple-500 { stroke: #7D41C3; }

/* Additional utility classes */
.max-w-8xl {
  max-width: 1315px;
}

/* List styles */
.website-layout ul {
  list-style: disc !important;
  list-style-position: inside !important;
  line-height: 2 !important;
}

/* Animation keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation classes */
.is-animated,
.is-animated-reverse {
  opacity: 0;
}

.reveal {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

.reveal-down {
  opacity: 0;
  animation: fadeDown 1s ease forwards;
}

.is-animated-footer path {
  transform: translateY(120%);
  transition: transform 1.6s cubic-bezier(.77, 0, .18, 1);
}

.reveal-footer path {
  transform: translateY(0);
}

/* Custom animation delays */
.animate-fadein-0 { animation: fadeIn 0.5s ease forwards; }
.animate-fadein-100 { animation: fadeIn 0.5s ease forwards 0.1s; opacity: 0; }
.animate-fadein-200 { animation: fadeIn 0.5s ease forwards 0.2s; opacity: 0; }
.animate-fadein-300 { animation: fadeIn 0.5s ease forwards 0.3s; opacity: 0; }
.animate-fadein-400 { animation: fadeIn 0.5s ease forwards 0.4s; opacity: 0; }
.animate-fadein-500 { animation: fadeIn 0.5s ease forwards 0.5s; opacity: 0; }
.animate-fadein-600 { animation: fadeIn 0.5s ease forwards 0.6s; opacity: 0; }
.animate-fadein-700 { animation: fadeIn 0.5s ease forwards 0.7s; opacity: 0; }
.animate-fadein-800 { animation: fadeIn 0.5s ease forwards 0.8s; opacity: 0; }
.animate-fadein-900 { animation: fadeIn 0.5s ease forwards 0.9s; opacity: 0; }
.animate-fadein-1000 { animation: fadeIn 0.5s ease forwards 1s; opacity: 0; }
.animate-fadein-1100 { animation: fadeIn 0.5s ease forwards 1.1s; opacity: 0; }
.animate-fadedown-800 { animation: fadeDown 0.5s ease forwards 0.8s; opacity: 0; }

/* Custom utility classes */
.border-12 {
  border-width: 12px;
}

.max-w-8xl {
  max-width: 1315px;
}

.max-h-128 {
  max-height: 32rem;
}