/* Reset and base styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Switzer', Arial, sans-serif;
      background-color: #ffffff;
      color: #000000;
      line-height: 1.5;
      overflow-x: hidden;
    }
    
    /* Layout components */
    .main-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      min-height: 100vh;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      /*max-width: 1656px;*/
      padding: 22px 16px 4px 16px;
      margin-right: 20px;
      margin-bottom: 4px;
    }
    
    .header-menu {
      display: flex;
      gap: 100px;
      justify-content: center;
      align-items: center;
      width: auto;
    }
    
    .hero-section {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      top:-400px;
      background-image: url('../assets/images/img_rectangle_4.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      /* min-height: 60vh; */
      position: relative;
      margin-bottom: 16px;
    }
    
    .hero-content {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      width: 100%;
      height: 100%;
      position: relative;
    }
    
    .hero-text-container {
      display: flex;
      flex-direction: column;
      gap: 44px;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      /*margin-top: 400px;*/
      padding-left: 20px;
    }
    
    .index-section {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      margin-top: 12px;
      padding: 0 16px;
    }
    
    .filter-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 6px 10px 0 46px;
    }
    
    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    
    .radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      width: 100%;
      justify-content: center;
    }
    
    .radio-item {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 8px 16px;
      cursor: pointer;
    }
    
    .radio-circle {
      width: 28px;
      height: 28px;
      border: 1px solid #000000;
      border-radius: 14px;
      position: relative;
      flex-shrink: 0;
    }
    
    .radio-circle.selected::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 28px;
      height: 28px;
      background-color: #000000;
      border-radius: 50%;
    }
    
    .gallery-section {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      width: 100%;
      padding: 24px 16px;
    }
    
    .gallery-item {
      width: 100%;
      height: auto;
      border-radius: 8px;
      overflow: hidden;
      border-right: #040404 1px;
    }
    
    .gallery-item img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }
    
    .gallery-item:hover {
        cursor: pointer;
    }

    .footer-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      margin-top: 66px;
    }
    
    .footer-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 1656px;
      padding: 0 22px;
    }
    
    .footer-bottom {
      display: flex;
      flex-direction: column;
      gap: 34px;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
    }
    
    .line-separator {
      width: 100%;
      height: 1px;
      background-color: #000000;
    }
    
    .footer-image {
      width: 82px;
      height: 34px;
      align-self: flex-end;
    }
    
    /* Typography */
    .header-text {
      font-size: 20px;
      font-family: 'HAL Timezone Unlicensed', serif;
      font-weight: 400;
      line-height: 38px;
      text-align: left;
      color: #000000;
      text-decoration: none;
    }

    .header-text:hover {
        text-decoration: underline;
    }
    
    .hero-title {
      font-size: 24px;
      font-family: 'HAL Timezone Unlicensed', serif;
      font-weight: 400;
      line-height: 37px;
      text-align: left;
      color: #040404;
      margin-left: 40px;
    }
    
    .hero-subtitle {
      font-size: 18px;
      font-family: 'Switzer', Arial, sans-serif;
      font-weight: 300;
      line-height: 37px;
      text-align: left;
      color: #040404;
    }
    
    .index-title {
      font-size: 20px;
      font-family: 'HAL Timezone Unlicensed', serif;
      font-weight: 400;
      line-height: 38px;
      text-align: left;
      color: #000000;
      align-self: flex-start;
      margin-left: 20px;
    }
    
    .filter-text {
      font-size: 16px;
      font-family: 'Switzer', Arial, sans-serif;
      font-weight: 300;
      line-height: 32px;
      text-align: left;
      color: #000000;
    }
    
    .footer-text {
      font-size: 20px;
      font-family: 'HAL Timezone Unlicensed', serif;
      font-weight: 400;
      line-height: 40px;
      text-align: left;
      color: #000000;
    }
    
    .copyright-text {
      font-size: 14px;
      font-family: 'Switzer', Arial, sans-serif;
      font-weight: 400;
      line-height: 27px;
      text-align: center;
      color: #000000;
    }
    
    /* Interactive states */
    .radio-item:hover {
      background-color: #f3f4f6;
      border-radius: 4px;
    }
    
    .gallery-item:hover {
      transform: scale(1.02);
      transition: transform 0.3s ease-in-out;
    }
    
    .header-menu a:hover {
      color: #666666;
      transition: color 0.3s ease;
    }
    
    /* Responsive media queries */
    @media (min-width: 640px) {
      .header {
        padding: 22px 32px 4px 32px;
      }
      
      .header-menu {
        gap: 200px;
      }
      
      .header-text {
        font-size: 20px;
      }
      
      .hero-text-container {
        padding-left: 32px;
        /*margin-top: 500px;*/
      }
      
      .hero-title {
        font-size: 28px;
      }
      
      .hero-subtitle {
        font-size: 20px;
      }
      
      .gallery-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 24px 32px;
      }
      
      .filter-row {
        flex-direction: row;
        flex-wrap: wrap;
      }
      
      .radio-group {
        flex-direction: row;
        justify-content: flex-start;
      }
      
      .filter-text {
        font-size: 18px;
      }
      
      .index-title {
        font-size: 24px;
        margin-left: 32px;
      }
    }
    
    @media (min-width: 768px) {
      .header-text {
        font-size: 20px;
      }
      
      .hero-title {
        font-size: 32px;
      }
      
      .hero-subtitle {
        font-size: 22px;
      }
      
      .gallery-section {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      
      .filter-container {
        flex-direction: row;
        justify-content: space-between;
      }
      
      .filter-row {
        justify-content: flex-start;
      }
      
      .filter-text {
        font-size: 20px;
      }
      
      .index-title {
        font-size: 26px;
      }
      
      .copyright-text {
        font-size: 16px;
      }
    }
    
    @media (min-width: 1024px) {
      .header {
        padding: 22px 38px 4px 38px;
      }
      
      .header-menu {
        gap: 336px;
      }
      
      .header-text {
        font-size: 20px;
      }
      
      .hero-text-container {
       /* margin-top: 600px; */
      }
      
      .hero-title {
        font-size: 40px;
      }
      
      .hero-subtitle {
        font-size: 27px;
      }
      
      .gallery-section {
        padding: 24px 44px;
      }
      
      .filter-container {
        margin: 6px 48px 0 40px;
      }
      
      .filter-text {
        font-size: 24px;
      }
      
      .index-title {
        font-size: 30px;
        margin-left: 40px;
      }
      
      .footer-text {
        font-size: 32px;
      }
      
      .copyright-text {
        font-size: 20px;
      }
    }
    
    @media (min-width: 1280px) {
      .hero-text-container {
        /* margin-top: 700px; */
      }
    }
    
    @media (min-width: 1536px) {
      .hero-text-container {
        /* margin-top: 904px; */
      }
    }
@font-face {
    font-family: HAL Timezone Unlicensed;
    src: url("font/HALTimezoneUnlicensed-Regular.otf") format("opentype");
}

@font-face {
    font-family: HAL Timezone Unlicensed;
    font-style: italic;
    src: url("font/HALTimezoneUnlicensed-Italic.otf") format("opentype");
}


@font-face {
    font-family: Switzer;
    src: url("font/Switzer-Regular.otf") format("opentype");
}

@font-face {
    font-family: Switzer;
    font-weight: 100;
    src: url("font/Switzer-Light.otf") format("opentype");
}

}