/*======= Google fonts =======*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@font-face {
  font-family: 'Mont';
  src: url('../fonts/Mont-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('../fonts/Mont-Book.otf') format('opentype');
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('../fonts/Mont-BookItalic.otf') format('opentype');
  font-weight: 350;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('../fonts/Mont-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('../fonts/Mont-SemiBold.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mont';
  src: url('../fonts/Mont-SemiBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


*,
*::after,
*::before {
  box-sizing: border-box;
  font-family: "Mont", "Poppins", sans-serif; 
  font-weight: 400;
}


body {
  --cl--1--: #fff;
  --cl--head--: #000000;
  --cl--2--: #14171f;
  --cl--8--: #002349;
  --cl--4--: #6b0000;
  --cl--5--: #f6f8f7;
  --cl--6--: #4cd9fe;
  --cl--7A--: #2947a9;
  --cl--7--:  #C3262E;
  --cl--3--: #083e85;
  --cl--lb--: #ff4f4f;
  --cl--db--: #001731;
  --cl--lg--: #999999;
  --cl--gl--: #8e740b;
}

/*======= Header navigation bar =======*/
header {
  z-index: 999;
  position: fixed;
  width: 100%;
}

header .nav-bar {
  position: relative;
  height: 4em;
  margin: 2em;
  background-color: transparent;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 100px;
  transition: all 0.5s ease;
}

header .scrolled {
  background-color: var(--cl--head--);
  margin: 0;
}

.nav-bar .logo img {
  margin-top: 8px;
  height: 13em;
  width: auto;
}

.navigation .nav-items a {
  color: var(--cl--1--);
  font-size: 0.95em;
  text-decoration: none;
  padding-top: 1.5em;
  padding-bottom: 1em;
  text-align: center;
  transition: background-color 0.5s;
}

.navigation .nav-items a:hover {
  background-color: var(--cl--1--);
  color: var(--cl--7--);
}

.navigation .nav-items a:active {
  background-color: #c2ab99;
}

.navigation .nav-items a {
  padding-right: 25px;
  padding-left: 25px;
  margin-left: -4px;
  font-family: "Mont", "Poppins", sans-serif; 
}

.navigation .nav-items a i {
  display: none;
}

/*======= Scroll bar =======*/
::-webkit-scrollbar {
  background: var(--cl--1--);
  width: 0px;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background: #282f4e;
  width: 100%;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background: #454f6d;
}

/*======= Scroll indicator bar =======*/
.scroll-indicator-container {
  width: 100%;
  height: 5px;
}

.scroll-indicator-bar {
  background: var(--cl--lb--);
  width: 0%;
  height: 100%;
  box-shadow: 0 3px 15px var(--cl--lb--), 0 3px 50px var(--cl--lb--);
}

.nav-close-btn,
.nav-menu-btn {
  display: none;
}

/*======= Media queries (max-width: 1100px) =======*/
@media screen and (max-width: 1100px) {
  header .nav-bar {
    padding: 0 50px;
  }

  /*======= Media queries (max-width: 850px) =======*/
  @media screen and (max-width: 920px) {
    header .nav-bar {
      padding: 0 20px;
      margin-left: 0;
      margin-right: 0;
    }

    /*======= Navigation menu =======*/
    .nav-menu-btn {
      display: block;
      color: var(--cl--1--);
      font-size: 1.5em;
      cursor: pointer;
    }

    .navigation {
      z-index: 99999;
      position: fixed;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s ease;
    }

    .navigation.active {
      visibility: visible;
      opacity: 1;
    }

    .navigation .nav-items {
      position: relative;
      background: var(--cl--1--);
      width: 400px;
      max-width: 400px;
      display: grid;
      place-content: center;
      margin: 20px;
      padding: 40px;
      border-radius: 20px;
      box-shadow: 0 5px 25px rgba(0, 0, 0, 0.8);
      transform: translateY(-200px);
      transition: 0.3s ease;
    }

    .navigation.active .nav-items {
      transform: translateY(0);
    }

    .navigation .nav-items a {
      color: #222;
      font-size: 1em;
      margin: 15px 50px;
    }

    .navigation .nav-items a i {
      display: inline-block;
      font-size: 1.2em;
      margin-right: 5px;
    }

    .nav-close-btn {
      display: block;
      color: #222;
      position: absolute;
      top: 0;
      right: 0;
      font-size: 1.3em;
      margin: 10px;
      cursor: pointer;
    }
  }

  body {
    -ms-overflow-style: none;   /* IE/old Edge */
    scrollbar-width: none;      /* Firefox */
  }
  
  body::-webkit-scrollbar {
    display: none;              /* Chrome/Safari/Edge (Chromium) */
  }
}