/* Custom Font Faces */
@font-face {
  font-family: 'bahnschrift';
  src: local('bahnschrift'),
       url('/fonts/bahnschrift.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'inter';
  src: local('inter'),
       url('/fonts/inter.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'gotham';
  src: local('gotham'),
       url('/src/fonts/gotham-medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* CSS Custom Properties for use with arbitrary values */
:root {
    --brand-orange-900: #F04D17;
    --brand-orange-800: #F36F21;
    --brand-orange-750: #F58320;
    --brand-orange-700: #FFA109;
    --brand-orange-600: #FFAF02;
    --brand-orange-500: #FEC42B;
    --brand-orange-200: #FFC005;
    --brand-orange-150: #FEC42B;
    --brand-orange-100: #FBB636;
    --brand-blue-800: #231F20;
    --brand-gray-800: #58595B;
    --text-gray-600: #595A5C;
    --text-gray-800: #595A5C;
  }

/* Font assignments */
h1, h2, h3, h4, h5, h6 {
  font-family: 'bahnschrift', serif !important;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: 'inter', sans-serif !important;
}

p, span, div, button, li, td, th, label, input, textarea, select, .text-body {
  font-family: 'inter', sans-serif !important;
}

a {
  font-family: 'gotham', sans-serif !important;
}

/* Hero Section Mobile Optimizations */
.herosection {
  height: 50vh;
  height: 50dvh;
}

@media (min-width: 481px) {
  .herosection {
    height: 60vh;
    height: 60dvh;
  }
}

@media (min-width: 769px) {
  .herosection {
    height: 70vh;
    height: 70dvh;
  }
}

@media (min-width: 1024px) {
  .herosection {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
  }
}

@media (max-width: 320px) {
  .herosection {
    height: 40vh !important;
    height: 40dvh !important;
    padding-top: 50px !important;
  }
}

/* Active Indicator Styling */
.active-indicator {
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.active-indicator[style*="opacity: 1"] {
  opacity: 1 !important;
}

/* Custom Responsive Utilities */
@media (min-width: 321px) and (max-width: 480px) {
  .section-1-container,
  .section-2-container,
  .section-3-container,
  .section-bird-container {
    width: 95% !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .section-1-container,
  .section-2-container,
  .section-3-container,
  .section-bird-container {
    width: 90% !important;
  }
}

@media (min-width: 769px) and (max-width: 1240px) {
  .section-1-container,
  .section-2-container,
  .section-bird-container {
    width: 63% !important;
  }
}

@media (min-width: 769px) and (max-width: 1240px) {
  .section-3-container {
    width: 65% !important;
  }
}

@media (min-width: 1241px) and (max-width: 1440px) {
  .section-1-container,
  .section-2-container,
  .section-3-container,
  .section-bird-container {
    width: 60% !important;
  }
}

@media (min-width: 1441px) {
  .section-1-container,
  .section-2-container,
  .section-3-container,
  .section-bird-container {
    width: 60% !important;
  }
}

/* Core Section - Mobile Optimizations */
@media (max-width: 768px) {
  .section-2-container {
    padding: 2rem 1rem !important;
  }
  
  .section-2-container > div:first-child {
    width: 100% !important;
  }
  
  .section-2-container > div:last-child {
    width: 100% !important;
    margin-top: 1rem !important;
  }
}

/* Core Section - Fix for 1024px breakpoint */
@media (min-width: 1024px) and (max-width: 1280px) {
  
  /* .section-2-container > div:last-child {
    width: 60% !important;
  }
  
  .section-2-container > div:last-child img {
    width: 90% !important;
    max-height: 80% !important;
  } */
}

/* Core Section - Remove bottom spacing from pencil image */
.section-2-container > div:last-child {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.section-2-container > div:last-child img {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Behind Section - Mobile Optimizations */
@media (max-width: 768px) {
  .section-team {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .section-team > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .section-team h1 {
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  .section-team .grid {
    gap: 1rem !important;
  }
  
  .section-team .grid > div {
    min-width: 60px !important;
    min-height: 60px !important;
  }
}