#topbar {
    background-color: #568949;
    position:sticky;
    top:0;
    left:0;
    margin: 0 auto;
    padding: 0 2vw;
    height: 12vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  /* <weight>: Use a value from 100 to 900*/

.montserrat-main {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  padding:0 20%;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
.montserrat-legal {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  padding:5px;
  color: white;
}

  #topbar > * {
    margin: 0 1rem;
}

  #bmgheader {
    max-width: 100%;
    height: auto;
  }
  #socialimg {
    max-width: 100%;
    height: auto;
  }

#topbar, #bluebar {
  z-index: 10;
}
.mobile-social-links {
  display: none;
}

nav {
    position: sticky;
    top:12vh;
    right:0;
    width:100%;
    display: flex;
    justify-content:center;
    background: linear-gradient(#005884, #087399) no-repeat;
    color: #000;
    padding: 20px 0px;
  }
.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    top:12vh;
  }
.nav-links li {
    margin: 0 10px;
  }

.nav-links-social {
    list-style: none;
    display: flex; 
    margin: 0;
  }

.nav-links-social li {
    margin: 0 5px;
  }
.nav-links-social a {
    text-decoration: none;
  }

.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
  }
  
.nav-links a {
  display: inline-block;
  width: 215px;   
  height: 40px;    
  background-size: contain;
  background-repeat: no-repeat;
  text-decoration: none;
}

.nav-home {
  background-image: url("images/nav/homeb.png");
}
.nav-home:hover {
  background-image: url("images/nav/homes.png");
}

.nav-games {
  background-image: url("images/nav/gamesb.png");
}
.nav-games:hover {
  background-image: url("images/nav/gamess.png");
}

.nav-blitz {
  background-image: url("images/nav/blitzb.png");
}
.nav-blitz:hover {
  background-image: url("images/nav/blitzs.png");
}

.nav-yuzu {
  background-image: url("images/nav/yuzub.png");
}
.nav-yuzu:hover {
  background-image: url("images/nav/yuzus.png");
}

.nav-about {
  background-image: url("images/nav/aboutb.png");
}
.nav-about:hover {
  background-image: url("images/nav/abouts.png");
}

.nav-contact {
  background-image: url("images/nav/contactb.png");
}
.nav-contact:hover {
  background-image: url("images/nav/contacts.png");
}

.nav-jobs {
  background-image: url("images/nav/jobsb.png");
}
.nav-jobs:hover {
  background-image: url("images/nav/jobss.png");
}

.nav-home.active {
  background-image: url("images/nav/homes.png");
}

.nav-games.active {
  background-image: url("images/nav/gamess.png");
}

.nav-about.active {
  background-image: url("images/nav/abouts.png");
}

.nav-contact.active {
  background-image: url("images/nav/contacts.png");
}

.nav-jobs.active {
  background-image: url("images/nav/jobss.png");
}

.dropdown {
  position: relative;
}

.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  background: linear-gradient(#087399, #005884) no-repeat;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 250;
  z-index: 1000;
}

.dropdown.active .dropdown-menu {
  display: block;
}

.dropdown .arrow {
  transition: transform 0.3s ease;
  display: inline-block;
  margin-left: 5px;
  color:white;
}

.dropdown.active .arrow {
  transform: rotate(180deg);
}

.dropdown .dropdown-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

.dropdown .nav-games {
  position: relative;
  display: inline-block;
}

.dropdown .nav-games .arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
  transition: transform 0.3s ease;
}

.dropdown.active .nav-games .arrow {
  transform: translateX(-50%) rotate(180deg);
}

.nav-links-social a {
  display: inline-block;
  width: 62px;   
  height: 62px;    
  background-size: contain;
  background-repeat: no-repeat;
  text-decoration: none;
}

.soc-bsky {
  background-image: url("images/socials/bluesky.png");
}
.soc-bsky:hover {
  background-image: url("images/socials/blueskyh.png");
}

.soc-youtube {
  background-image: url("images/socials/youtube.png");
}
.soc-youtube:hover {
  background-image: url("images/socials/youtubeh.png");
}

.soc-discord {
  background-image: url("images/socials/discord.png");
}
.soc-discord:hover {
  background-image: url("images/socials/discordh.png");
}

.soc-twitch {
  background-image: url("images/socials/twitch.png");
}
.soc-twitch:hover {
  background-image: url("images/socials/twitchh.png");
}

.soc-facebook {
  background-image: url("images/socials/facebook.png");
}
.soc-facebook:hover {
  background-image: url("images/socials/facebookh.png");
}

@media (max-width: 1092px) and (min-width: 768px) {
  .nav-links a {
    width: 150px;
    height: 30px;
  }
  .nav-links-social a{
    width: 40px;
    height:40px;
  }
  #third img, #fourth img  {
    max-width: 80%;
    height: auto;
  }
  .mobile-img{
    width:80%;
    height:auto;
  }
 .montserrat-main {
    padding:0 10%;
}
}

@media (max-width: 768px) {
  #topbar .nav-links-social {
    display: none;
  }
  .mobile-img{
    width:70%;
    height:auto;
  }
  .mobile-img-big{
    width:auto;
    height:70%
  }
  .montserrat-main {

    padding:0 10%;
}

  .nav-links {
      display: none;           
      flex-direction: column;  
      width: 100%;
      height: calc(100% - 12vh);
      position:fixed;
      top:12vh;
      left:0;
      background: linear-gradient(#005884, #087399) no-repeat;
      z-index:1000;
    }
  .nav-links li {
      margin: 10px 0;
      text-align: center;
      background-size:auto;
    }
    .nav-links li.mobile-social-links {
      display: flex;
      flex-direction: row;
      justify-content: center;
      list-style: none;
      margin-top: 10px;
      padding: 0 5px;
    }
    .nav-links li.mobile-social-links a {
      margin: 0 5px;
    }

    .mobile-social-links a {
      width: 62px;
      height: 62px;
    }


  .hamburger {
      display: block;
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 24px; 
      cursor: pointer;
      z-index: 1001;
    }
    .hamburger.active {
      font-size: 36px;
    }

  nav {
    background: none;
    padding: 0;
    margin: 0;
    height: auto; 
  }
  #bmgheader {
    width:75%;
    }

  #third, #fourth {
      flex-direction: column;
    }

    #third img, #fourth img {
      max-width: 100%;
      margin-bottom: 10px;
    }
  } /*End of mobile*/

html, body {
    margin: 0;
    padding: 0;
    overflow-x: clip;
  }

#main {
    background: linear-gradient(#005d77, #007d93);
    padding:35px 0;
  }

#second {
    background: linear-gradient(#005b5d, #007d7f);
    padding:35px 0;
    display:flex;
    flex-direction: column;
  }

#third {
    background: linear-gradient(#005132, #008364);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding:35px 0;
  }

#fourth {
    background: linear-gradient(#04511d, #14723d);
    padding:35px 0;
    flex-wrap: wrap;
  }

#fifth{
  background-color: #568949;
  padding:35px 0;
  display:flex;
  flex-direction:column;
}
#main, #second, #third, #fourth, #fifth {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px 150px;
  left:0;
  width:100%
}

#main {
  flex-direction: column;
}
.third-left {
  display: flex;
  flex-direction: column;
}

/* Logos container: arrange logos side by side */
.logos {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 150px;  /* spacing between the logos */
  margin-top: 10px;  /* space between the header image and logos */
}

.fourth-bottom {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

#main img,
#second img,
#third img,
#fourth img,
#fifth img {
    max-width: 100%;
    height: auto;
    display: block;
}
.container {
    font-size: 0; 
  }