:root {
    --main-font: 'Montserrat', sans-serif;
}

p,a{
  font-family: var(--main-font)
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  min-font-size:12pt;
}

a{
  text-decoration:none;
  color:black;
}

p{
  font-size:1.9vh;
  font-size: clamp(1rem, 1.2vw, 2rem);
}

h1{
  font-family: var(--main-font)
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-size:6vh;
}

.p-50{
  padding-top: 50px;
}

.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: bottom;
}

.belt-container {
    overflow: hidden;
    width: 100%;
    background: #fff;
}

.belt-wrapper {
    display: flex;
    width: max-content;
    will-change: transform;
}

.belt-group {
    display: flex;
    gap: 20px;
}

.img-belt {
    height: 84vh;
}

header{
  top: 0px;
  position: fixed;
  overflow:hidden;
  z-index:1;
  background-color: white;
}

#content{
  margin-top:150px;
  overflow:hidden;
}

.menu-links{
  display: flex;
  right:11px;
  position: absolute;
  top:-85px;
}

li{
  list-style: none;
  padding-left:20px;
}

.active{
  font-weight: 800 !important;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: #333;
    transition: 0.3s;
}

.transition-overlay {
  width: 100%;
  background-color: #2d2d2d;
  overflow: hidden;
}

.transition-overlay img{
  height: 80vh;
}
.transition-overlay .icon-style, span{
  font-size:2vh;
}

@media (max-width: 768px) {

    .img-belt{
      height:78vh;
      width:100vw;
      object-fit:cover;
    }

    #content{
      margin-top:150px !important;
    }

    .show{
      display:block !important;
    }

    .hide{
      display:none !important;
    }

    .hamburger {
      display: flex;
      margin: 0 auto;
      position: absolute;
      top: 10px;
      right: 10px;
    }

    .logo img{
      width: 90px;
    }

    .menu-links{
      position: relative;
      flex-direction: column;
      width: 100%;
      text-align: left;
      margin: 0 auto;
      padding: 10px;
      top: -10px;
    }

    .menu-links a, li{
      padding: 0px !important;
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0; /* Hide middle bar */
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

}