html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'LOUD AND CLEAR PERSONAL USE';
    src: url('fonts/LOUD-AND-CLEAR-PERSONAL-USE.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Bold';
    src: url('fonts/Helvetica-Bold.ttf') format('truetype');
    font-display: swap;
}
  
@font-face {
    font-family: 'HelveticaNeueLT';
    src: url('fonts/HelveticaNeueLT.otf') format('truetype');
    font-display: swap;
}
  
@font-face {
    font-family: 'HelveticaNeueLT-B';
    src: url('fonts/HelveticaNeueLT-B.otf') format('truetype');
    font-display: swap;
}
  
body { 
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #E8C442; 
}

.sectionTabs {
    display: flex;
    justify-content: center;
    background-color: #E8C442;
    z-index: 999;
    font-size: 1.8rem;
    width: 100%;
}

#mainNav1 {
    position: sticky;
    top: 0;
    border-bottom: 5px solid #000; /* Border between navigation bars */
}

#mainNav2 {
    position: sticky;
    top: 2.8rem; /* Adjust this value based on the exact height of your tabs */
}

#mainNav1 .tab {
    width: 50%;
}

#mainNav2 .tab {
    width: 33.33%;
}

.tab {
    display: flex;
    justify-content: center;
    padding: 9px 0px;
    text-transform: uppercase;
    text-decoration: none;
    color: #000000;
    border-right: 5px solid #000000;
    font-family: 'LOUD AND CLEAR PERSONAL USE', Arial, sans-serif;
    letter-spacing: 2px;
}

#mainNav1 .tab:last-child,
#mainNav2 .tab:last-child {
    border-right: none;
}

.tab:hover {
    background-color: white;
}

.tab.active {
    background-color: white;
    text-decoration: none;
    color: #000000;
}

.container {
    box-sizing: border-box;
}

.container .menuSection {
    width: 100%;
    background: #fff;
    display: block;
}

.container .menuSection img {
    width: 100%;
    display: block;
}

@media (max-width: 768px) {
    .tab {
      font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .tab {
      font-size: 1.4rem;
    }
}