@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Roboto', sans-serif;
}

header {
   z-index: 999;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 200px;
   transition: 0.5s ease;
}
header .brand {
   color: #fff;
   font-size: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
   text-decoration: none;
}
header .navigation {
   position: relative;
}
header .navigation .navigation-items > a {
   position: relative;
   color: #fff;
   font-size: 1em;
   font-weight: 500;
   text-decoration: none;
   margin-left: 30px;
   transition: 0.3s ease;
}
header .navigation .navigation-items > a:before {
   content: '';
   position: absolute;
   background: #fff;
   width: 0;
   height: 3px;
   bottom: -2px;
   left: 0;
   transition: 0.3s ease;
}
header .navigation .navigation-items > a:hover:before {
   width: 100%;
}

section {
   padding: 100px 200px;
}
.home {
   position: relative;
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   flex-direction: column;
   background: #2696e9;
}
.home:before {
   z-index: 777;
   content: "";
   position: absolute;
   background: rgba(3, 96, 251, 0.3);
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}
.home .content {
   z-index: 888;
   color: #fff;
   width: 70%;
   margin-top: 50px;
}
.home .content > h1 {
   font-size: 4em;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 5px;
   line-height: 75px;
   margin-bottom: 40px;
}
.home .content > h1 > span {
   font-size: 1.2em;
   font-weight: 600;
}
.home .content > p {
   margin-bottom: 65px;
}
.home .content > a {
   background: #fff;
   padding: 15px 35px;
   color: #1680ac;
   font-size: 1.1em;
   font-weight: 500;
   text-decoration: none;
   border-radius: 5px;
}
.home .media-icons {
   z-index: 888;
   position: absolute;
   right: 30px;
   display: flex;
   flex-direction: column;
   transition: 0.5s ease;
}
.home .media-icons > a {
   font-size: 1.6em;
   color: #fff;
   transition: 0.3s ease;
}
.home .media-icons > a:not(:last-child) {
   margin-bottom: 20px;
}
.home .media-icons > a:hover {
   transform: scale(1.3);
}
.home video {
   z-index: 000;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.slider-navigation {
   z-index: 888;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   transform: translateY(80px);
   margin-bottom: 12px;
}

@media (max-width: 1040px) {
   header {
      padding: 12px 20px;
   }
   section {
      padding: 100px 20px;
   }
   .home .media-icons {
      right: 15px;
   }
   header .navigation {
      display: none;
   }
   header .navigation.active {
      position: fixed;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(1, 1, 1, 0.5);
   }
   header .navigation.active .navigation-items {
      background: #fff;
      width: 600px;
      max-width: 600px;
      margin: 20px;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 10px;
      box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
   }
   header .navigation .navigation-items > a {
      color: #222;
      font-size: 1.2em;
      margin: 20px;
   }
   header .navigation .navigation-items > a:before {
      background: #222;
      height: 5px;
   }
   header .menu-btn {
      background: url("../../images/menu.png")no-repeat;
      background-size: 30px;
      background-position: center;
      width: 40px;
      height: 40px;
      cursor: pointer;
      transition: 0.3s ease;
   }
   header .menu-btn.active {
      z-index: 999;
      background: url("../../images/close.png")no-repeat;
      background-size: 25px;
      background-position: center;
      transition: 0.3s ease;
   }
}