@font-face {
  font-family: aorus;
  src: url("fonts/AORUS.woff2");
}

@font-face {
  font-family: aldrich;
  src: url("fonts/MCoTzAn-1s3IGyJMVacY3w.woff2");
}

@font-face {
  font-family: titillium;
  src: url("fonts/NaPDcZTIAOhVxoMyOr9n_E7ffGjEGItzYw.woff2");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
  width: 100%;
  background-color: rgb(0, 0, 0);
}

body video {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  position: fixed;
}

.loader-overlay{
  height: 100vh;
  width: 100%;
  background-color: #000000;
  position: absolute;
  z-index: 1000;
}

.loader video {
  height: 100vh;
  width: 100%;
  background-color: black;
  object-fit: cover;
  position: absolute;
  z-index: 999;
}

.loader2{
  height: 100vh;
  width: 100%;
  /* background-color: rgb(150, 87, 87); */
  position: absolute;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader2 .elements{
  height: 10vh;
  width: 20%;
  /* background-color: rgb(69, 29, 29); */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5vw;
}

.elements .elem{
  opacity: 0;
  height: 32%;
  width: 1.4vw;
  background-color: #fff;
  transform: skew(-40deg);
}

.subscribe .subscribe-face{
  position: fixed;
  height: 16vh;
  width: 7vw;
  background-color: rgba(0, 0, 0, 0.814);
  clip-path: polygon(25% 0%, 100% 0, 100% 100%, 75% 100%, 0 100%, 0 23%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  border: .5px solid #1F1F1F;
  backdrop-filter: blur(5px);
  transition: all ease 0.5s;
  right: 0;
  bottom: 15%;
  z-index: 1999;
  opacity: 0;
}

.subscribe .subscribe-face h3{
  font-family: titillium;
  color: white;
  font-size: 1.9vh;
  font-weight: 100;
  text-transform: uppercase;
  transition: all ease 0.5s;
  filter: brightness(50%);
}

.subscribe .subscribe-face img{
  transition: all ease 0.5s;
  scale: 1.3;
  filter: brightness(50%);
}
.subscribe .subscribe-face:hover img{
  filter: brightness(100%);
}
.subscribe .subscribe-face:hover h3{
  filter: brightness(100%);
}

.subscribe-body{
  height: 37vh;
  width: 30vw;
  background-color: rgba(0, 0, 0, 0.792);
  position: fixed;
  z-index: 9999;
  right: 0;
  bottom: 15%;
  clip-path: polygon(8% 0%, 100% 0, 100% 100%, 75% 100%, 0 100%, 0 15%);
  display: flex;
  align-items: center;
  backdrop-filter: blur(5px);
  transform: translateX(100%);
}

.subscribe-body h2{
  width: 70%;
  margin-left: 25%;
  font-size: 2.8vh;
  font-weight: 100;
  color: white;
  text-transform: uppercase;
  font-family: titillium;
}

.subscribe-bar{
  height: 7vh;
  width: 35%;
  background-color: #1F1F1F;
  margin-left: 25%;
  margin-top: 2vh;
  transition: all ease 0.8s;
  display: flex;
}
.subscribe-bar .left{
  width: 65%;
}
.subscribe-bar .left input{
  height: 100%;
  width: 100%;
  background-color: #1F1F1F;
  border: none;
  font-size: 2.5vh;
  color: white;
  font-family: titillium;
}

.subscribe-bar .right{
  width: 35%;
  background-color: #FF6400;
  font-family: aldrich;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3%;
  transition: all ease 0.5s;
  cursor: pointer;
}
.subscribe-bar .right:hover{
  background-color: #b7b7b7;
}

.subscribe-bar .right i{
  font-size: 4vh;
  margin-left: -6%;
}


.side-section {
  height: 4vh;
  width: 18vw;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  padding: 1vh 0;
  z-index: 999;
  text-align: center;
  position: absolute;
  top: 42%;
  left: -7vw;
  transform: translateY(-50%);
  transform: rotate(-90deg);
}

.side-section h5 {
  font-family: aldrich;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.5vw;
  font-weight: 200;
}

.side-section .underline {
  height: 0.8vh;
  width: 13vw;
  bottom: -1vh;
  left: 10%;
  position: absolute;
  background-color: #FF6400;
  transform: skew(45deg);
}

.side-section .underline::after {
  content: "";
  height: 0.6vh;
  width: 50%;
  background-color: rgb(0, 0, 0);
  position: absolute;
  bottom: 0;
  left: 0;
}
.subscribe-body>i{
  color: white;
  position: absolute;
  top: 10%;
  right: 8%;
  font-size: 5vh;
  transition: all ease .5s;
}
.subscribe-body>i:hover{
  color: #FF6400;
  transform: rotate(90deg);
}



.main {
  position: relative;
  background-color: rgba(0, 0, 0, 0.525);
}

.page1 {
  height: 150vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.425);
  display: flex;
  align-items: center;
  flex-direction: column;
}

nav {
  height: 10vh;
  width: 100%;
  /* background-color: blue; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6vh 2vw;
  position: fixed;
  z-index: 888;
}

nav .nav-left {
  display: flex;
  align-items: center;
  gap: 3vw;
}

nav .navigations ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1vw;
}


nav .navigations ul li a {
  transition: all ease-in-out .2s;
  color: white;
  text-decoration: none;
  font-family: aldrich;
  text-transform: uppercase;
}

nav .navigations ul li a:hover{
  color: #FF6400;
}

nav .nav-right {
  display: flex;
  align-items: center;
  gap: 1vw;
}

nav .nav-right a {
  text-decoration: none;
  color: white;
}
nav .nav-right a:hover{
  color: #FF6400;
}



.search-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6vh;
  width: 0%;
  z-index: 889;
  opacity: 0;
  background-color: #000000d7;
  padding: 5.7vh 2.5vw;
  position: fixed;
  top: 0;
  left: 0;
  transition: all ease-in-out 0.5s;
}

.search-option .logo img {
  margin-top: .8vh;
  margin-left: -0.5vw;
  object-fit: cover;
}

.search-option .searchbar {
  height: 6vh;
  width: 84%;
  /* background-color: antiquewhite; */
}

.searchbar form input {
  height: 6vh;
  width: 100%;
  border: 1px solid #FF6400;
  background-color: #212121;
  font-family: aldrich;
  padding-left: 1vw;
  color: white;
  padding-right: 1vw;
}

.search-option .close{
  color: white;
  transition: all ease-in-out 0.4s;
}

.search-option .close:hover {
  transform: rotate(90deg);
  color: #FF6400;
}

.page1 .center-text {
  height: 20vh;
  width: 100%;
  margin-top: 40vh;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page1 .center-text h1 {
  font-size: 14vh;
  margin-top: 3vh;
  font-family: aorus;
  text-transform: uppercase;
  font-weight: 900;
  position: relative;
  color: rgb(0, 0, 0);
}

/* page2 */
.page2 {
  min-height: 270vh;
  width: 100%;
  margin-top: -30vh;
  position: relative;
}

.page2-bg{
  height: 270vh;
  width: 100%;
  background-image: url("images/fan-bg.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}
.page2-bg-overlay{
  height: 270vh;
  width: 100%;
  position: absolute;
  background: linear-gradient(black, rgba(0, 0, 0, 0.148), rgba(0, 0, 0, 0.219), black);
}

.explore-products-section {
  height: 4vh;
  width: 22vw;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  padding: 1vh 0;
  z-index: 999;
  text-align: center;
  position: absolute;
  top: 60%;
  left: -10vw;
  transform: rotate(-90deg);
}

.explore-products-section h5 {
  font-family: aldrich;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.5vw;
  font-weight: 200;
}

.explore-products-section .underline {
  height: 0.8vh;
  width: 20vw;
  bottom: -1vh;
  right: 0;
  position: absolute;
  background-color: #FF6400;
  transform: skew(45deg);
}

.explore-products-section .underline::after {
  content: "";
  height: 0.6vh;
  width: 50%;
  background-color: rgb(0, 0, 0);
  position: absolute;
  bottom: 0;
  left: 0;
}

.page2 .center-display{
    top: 30vh;
    height: 90%;
    width: 80%;
    /* background-color: #ff66002a; */
    margin-left: 50%;
    transform: translate(-50%);
    position: relative;
    z-index: 99;
}

.page2 .header{
  position: absolute;
  text-align: center;
  /* background-color: #FF6400; */
}

.page2 .center-display .header h1{
  font-size: 5vh;
  font-family: aorus;
  text-transform: uppercase;
  color: white;
  margin-left: 50%;
  transform:translate(-50%)
}

.page2 .center-display .header p{
  font-size: 2.7vh;
  font-family: titillium;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 50%;
  transform:translate(-50%);
  text-align: center;
  margin-bottom: 15vh;
}
.page2 p::selection{
  background-color: #FF6400;
  color: #fff;
}
.page2 h1::selection{
  background-color: #FF6400;
  color: #fff;
}
.page1 h1::selection{
  background-color: #FF6400;
  color: #fff;
}
.page1 nav a::selection{
  background-color: #FF6400;
  color: #fff;
}
.page1 nav img::selection{
  background-color: #FF6400;
  color: #fff;
}
.page2 h2::selection{
  background-color: #FF6400;
  color: #fff;
}
.page2 h5::selection{
  background-color: #FF6400;
  color: #fff;
}

.page2 #products{
  position: absolute;
  top: 32vh;
  /* background-color: #FF6400; */
  padding: 5vh 5vw;
}

.page2 #products .product{
  display: flex;
  align-items: center;
  gap: 5vw;
  /* background-color: blue; */
  transition: all ease-in-out .5s;
  text-align: center;
  margin-bottom: 10vh;
}

.descr{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.page2 #products .product h2{
  font-family: aldrich;
  color: white;
}
.page2 #products .product p{
  font-family: aldrich;
  font-size: 2vh;
  font-weight: 100;
  margin-top: 2vh;
  color: rgba(255, 255, 255, 0.5);
}

.page2 #products .product img{
  transition: all ease-in-out .5s;
}
.page2 #products .product:hover img{
  animation: product-image-move ease-in-out 2.5s infinite alternate;
  scale: 1.08;
}

@keyframes product-image-move {
  0%{
    transform: translateY(0%);
  }
  50%{
    transform: translateY(3%);
  }
  100%{
    transform: translateY(-3%);
  }
}
.btn-wrapper{
  position: relative;
  height: 10vh;
  width: 20vw;
  /* background-color: rgb(215, 152, 152); */
}

.button-container{
  height: 100%;
  width: 100%;
  scale: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #fff; */
  position: absolute;
  z-index: 88;
  transition: all ease-in-out .2s;
  /* top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); */
}
.button-left{
  height: 10vh;
  width: 50%;
  /* background-color: aqua; */
  position: relative;
}
.button-left::after{
  content: "";
  height: 1.6vh;
  width: 1.6vh;
  /* background-color: red; */
  position: absolute;
  left: 0;
  bottom: 0;
  border-left: 1.6px solid #FF6400;
  border-bottom: 1.6px solid #FF6400;
}

.button-left::before{
  content: "";
  height: 1.6vh;
  width: 1.6vh;
  left: 0;
  top: 0;
  /* background-color: red; */
  position: absolute;
  border-left: 1.6px solid #FF6400;
  border-top: 1.6px solid #FF6400;
}
.button-right{
  height: 10vh;
  width: 50%;
  /* background-color: rgb(70, 130, 77); */
  position: relative;
}
.button-right::before{
  content: "";
  height: 1.6vh;
  width: 1.6vh;
  /* background-color: red; */
  position: absolute;
  right: 0;
  top: 0;
  border-right: 1.6px solid #FF6400;
  border-top: 1.6px solid #FF6400;
}
.button-right::after{
  content: "";
  height: 1.6vh;
  width: 1.6vh;
  /* background-color: red; */
  position: absolute;
  right: 0;
  bottom: 0;
  border-right: 1.6px solid #FF6400;
  border-bottom: 1.6px solid #FF6400;
}

.button{
  height: 7vh;
  width: 18vw;
  background-color: rgba(95, 158, 160, 0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.button h2{
  z-index: 99;
  color: rgb(255, 255, 255);
  text-transform: capitalize;
  font-family: aldrich;
  font-weight: 200;
  transition: all ease-in-out .3s;
}
.button h2 a{
  text-decoration: none;
  color: white;
  z-index: 100;
}

.descr:hover .button-container{
  scale: 1;
}
.descr:hover .button h2 a{
  color: #FF6400;
}
.descr:hover .button h2{
  scale: 1.2;
}

/* page3 */
.page3{
  margin-top: 0vh;
  min-height: 120vh;
  width: 100%;
  background-color: rgb(0, 0, 0);
}

.swiper {
  width: 100%;
  height: 100vh;
  /* z-index: 99; */
}

.swiper-slide {
  position: relative;
  text-align: center;
  font-size: 18px;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -5vh;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

.autoplay-progress {
  display: none;
}

.swiper-pagination-bullet {
  width: 1.5vw;
  height: 0.7vh;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  transform: skew(-50deg);
  border-radius: 0;
  background-color: #b7b7b7;
  transition: all ease-in-out 0.5s;
  position: relative;
  right: -35%;
}

.swiper-pagination-bullet-active {
  color: #fff;
  width: 9vw;
  background: #FF6400;
}

.more-button {
  height: 8vh;
  width: 13vw;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all ease-in-out 1s;
  z-index: 999;
  background-color: #ffffff00;
  backdrop-filter: blur(2px);
}

.more-button .elem {
  content: "";
  height: 26vh;
  width: 12vw;
  background-color: rgba(245, 245, 245, 0.137);
  position: absolute;
  top: -32vh;
  right: -10vw;
  z-index: 999;
  transform: rotate(-45deg);
  transition: all ease-in-out 0.7s;
}

.more-button:hover .elem {
  transform: translate(-80%, 80%) rotate(-45deg);
}

.more-button .button-inner {
  height: 6vh;
  width: 12vw;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: aldrich;
  color: white;
  z-index: 999;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.button-inner .ele {
  height: 3.5vh;
  width: 3.5vh;
  background-color: #FF6400;
  position: absolute;
  top: -2vh;
  z-index: 999;
  right: -2vh;
  transform: rotate(-45deg);
  transition: all ease-in-out 0.7s;
}

.text {
  z-index: 999;
}

.more-button:hover .ele {
  scale: 1.5;
}
.button:hover .ele {
  scale: 1.5;
}

.image1-content{
  height: 40vh;
  width: 30%;
  /* background-color: aqua; */
  position: absolute;
  left: 5%;
  bottom: 3%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  text-align: left;
}
.image1-content h1{
  font-family: aorus;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
}
.image1-content p{
  font-family: aldrich;
  color: white;
  font-weight: 500;
}
.image2-content{
  height: 40vh;
  width: 30%;
  /* background-color: aqua; */
  position: absolute;
  left: 5%;
  bottom: 30%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  text-align: left;
}
.image2-content h1{
  font-family: aorus;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
  
}
.image2-content p{
  font-family: aldrich;
  color: white;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  text-align: left;
}
.image3-content{
  height: 40vh;
  width: 30%;
  /* background-color: aqua; */
  position: absolute;
  left: 5%;
  bottom: 10%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  text-align: left;
}
.image3-content h1{
  font-family: aorus;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
}
.image3-content p{
  font-family: aldrich;
  color: white;
  font-weight: 500;
}

.image4-content{
  height: 40vh;
  width: 30%;
  /* background-color: aqua; */
  position: absolute;
  left: 5%;
  top: 15%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  text-align: left;
}
.image4-content h1{
  font-family: aorus;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
}
.image4-content p{
  font-family: aldrich;
  color: white;
  font-weight: 500;
}

.image5-content{
  height: 40vh;
  width: 30%;
  /* background-color: aqua; */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  text-align: center;
}
.image5-content h1{
  font-family: aorus;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
}
.image5-content p{
  font-family: aldrich;
  color: white;
  font-weight: 500;
}

.image6-content{
  height: 40vh;
  width: 30%;
  /* background-color: aqua; */
  position: absolute;
  left: 5%;
  bottom: 10%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  text-align: left;
}
.image6-content h1{
  font-family: aorus;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
}
.image6-content p{
  font-family: aldrich;
  color: white;
  font-weight: 500;
}

.image7-content{
  height: 40vh;
  width: 30%;
  /* background-color: aqua; */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  text-align: center;
}
.image7-content h1{
  font-family: aorus;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
}
.image7-content p{
  font-family: aldrich;
  color: white;
  font-weight: 500;
}

/* page 4 */
.page4{
  min-height: 110vh;
  width: 100%;
  background-color: #000;
  position: relative;
  margin-top: 10vh;
}


.recent-releases-section {
  height: 4vh;
  width: 18vw;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  padding: 1vh 0;
  z-index: 999;
  text-align: center;
  position: absolute;
  top: 43%;
  left: -8vw;
  transform: translateY(-50%);
  transform: rotate(-90deg);
}

.recent-releases-section h5 {
  font-family: aldrich;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.5vw;
  font-weight: 200;
}

.recent-releases-section .underline {
  height: 0.8vh;
  width: 15vw;
  bottom: -1vh;
  left: 10%;
  position: absolute;
  background-color: #FF6400;
  transform: skew(45deg);
}

.recent-releases-section .underline::after {
  content: "";
  height: 0.6vh;
  width: 50%;
  background-color: rgb(0, 0, 0);
  position: absolute;
  bottom: 0;
  left: 0;
}

.page4 .header{
  height: 22vh;
  width: 60%;
  /* background-color: aqua; */
  text-align: center;
  color: white;
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
}

.page4 .header h2{
  font-size: 5vh;
  font-family: aorus;
  height: auto;
  margin-left: 50%;
  transform: translateX(-50%);
  width: auto;
  color: white;
  /* background: linear-gradient(to right, rgb(0, 0, 0), white); */
}

.page4 .header p{
  font-family: aldrich;
  text-transform: capitalize;
  margin-top: 2vh;
  font-size: 2.7vh;
}
.page4 .header p::selection{
  color: #fff;
  background-color: #FF6400;
}
.page4 .header h2::selection{
  color: #fff;
  background-color: #FF6400;
}

.page4 .header span a{
  color: #FF6400;
  font-family: titillium;
  font-size: 2.6vh;
  text-transform: uppercase;
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 50%;
  transform : translate(-50%);
  text-decoration: none;
}
.page4 .header span i{
  font-weight: 900;
}
.page4 .header span a::selection{
  color: #FF6400;
  background-color: #000000;
}


.page4 .products-section{
  height: 80vh;
  width: 90%;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 6vh;
  /* background-color: #233F63; */
  display: flex;
  align-items: center;
  gap: 2vw;
  font-family: titillium;
}

.products-section .section{
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.tags{
  height: 3.5vh;
  width: 6vw;
  background-color: #FF6400;
  position: absolute;
  top: 0;
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
  display: flex;
  align-items: center;
  padding-left: .5vw;
  color: white;
}

.products-section .section h2{
  color: rgba(255, 255, 255, 0.36);
  font-weight: 200;
  font-size: 3vh;
  line-height: 3.8vh;
  margin: 3vh 0;
}

.products-section .section .image{
  height: 55%;
  overflow: hidden;
}

.products-section .section img{
  transition: all ease-in-out 0.4s;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
}
.products-section .section:hover img{
  filter: grayscale(0);
  scale: 1.2;
}

.moving-line{
  height: .6vh;
  width: 5vw;
  background-color: #FF6400;
  transform: translateX(-5vw);
  transition: all ease-in-out 0.5s;
  
}
.products-section .section:hover .moving-line{
  transform: translateX(0vw);
}

.more-button- {
  height: 8vh;
  width: 13vw;
  border: 1px solid white;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all ease-in-out 1s;
}
.products-section .section:hover  .more-button-{
  opacity: 1;
}

.more-button- .elem {
  content: "";
  height: 26vh;
  width: 12vw;
  background-color: rgba(245, 245, 245, 0.137);
  position: absolute;
  top: -32vh;
  right: -10vw;
  transform: rotate(-45deg);
  transition: all ease-in-out 0.7s;
}

.more-button-:hover .elem {
  transform: translate(-80%, 80%) rotate(-45deg);
}

.more-button- .button-inner {
  height: 6vh;
  width: 12vw;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: aldrich;
  color: white;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.button-inner .ele {
  height: 3.5vh;
  width: 3.5vh;
  background-color: #FF6400;
  position: absolute;
  top: -2vh;
  right: -2vh;
  transform: rotate(-45deg);
  transition: all ease-in-out 0.7s;
}

.text {
  z-index: 9;
  font-size: 3.4vh;
}

.more-button-:hover .ele {
  scale: 1.5;
}

/* page 5 */
.page5{
  min-height: 100vh;
  width: 100%;
  margin-bottom: 20vh;
  padding: 10vh 9vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  gap: 3vh;
}

.page5 .header h1{
  font-family: aorus;
  color: white;
  text-transform: uppercase;
}
.page5 .header h1::selection{
  background-color: #FF6400;
  color: white;
}

.page5 .horizontal-slots{
  height: 50vh;
  width: 100%;
  /* background-color: brown; */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 1vw;
}

.page5 .horizontal-slots .sections{
  height: 100%;
  width: 32%;
  /* background-color: burlywood; */
}
.page5 .horizontal-slots .sections img{
  height: 60%;
  width: 100%;
  object-fit: cover;
  filter: brightness(65%);
  transition: all ease 0.4s;
  cursor: pointer;
}
.page5 .horizontal-slots .sections:hover img{
  filter: brightness(90%);
  transform: translateY(-2%);

}
.page5 .horizontal-slots .sections .dets{
  font-family: aldrich;
  font-size: 3vh;
  color: white;
}
.page5 .horizontal-slots .sections .dets::selection{
  background-color: #FF6400;
  color: white;
}



/* page 6 */
.page6{
  min-height: 100vh;
  width: 100%;
  margin-top: -20vh;
  background-image: url("images/glassmorphism img.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.page6-overlay{
  height: 105vh;
  width: 100%;
  position: absolute;
  background: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.773),rgba(0, 0, 0, 0.544), rgba(0, 0, 0, 0.252), rgb(0, 0, 0));
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.page6 .glass{
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgb(0, 0, 0);
  border-radius: 30px;
  backdrop-filter: blur(5px);
}

.join-us-section {
  height: 4vh;
  width: 18vw;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  padding: 1vh 0;
  z-index: 999;
  text-align: center;
  position: absolute;
  top: 43%;
  left: -8vw;
  transform: translateY(-50%);
  transform: rotate(-90deg);
}

.join-us-section h5 {
  font-family: aldrich;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.5vw;
  font-weight: 200;
}
.join-us-section h5::selection{
  background-color: #fff;
  color: #FF6400;
}

.join-us-section .underline {
  height: 0.8vh;
  width: 15vw;
  bottom: -1vh;
  left: 10%;
  position: absolute;
  background-color: #FF6400;
  transform: skew(45deg);
}

.join-us-section .underline::after {
  content: "";
  height: 0.6vh;
  width: 50%;
  background-color: rgb(0, 0, 0);
  position: absolute;
  bottom: 0;
  left: 0;
}

.page6 .header{
  position: absolute;
  z-index: 99;
  color: white;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.page6 .header h1, p{
  font-family: aldrich;
  margin-bottom: 5vh;
  text-align: center;
}
.page6 .header h1::selection{
  background-color: white;
  color: #FF6400;
}
.page6 .header p::selection{
  background-color: white;
  color: #FF6400;
}

.buttons{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  gap: 2vw;
}

.sign-up , .login {
  height: 8vh;
  width: 13vw;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all ease-in-out 1s;
  z-index: 999;
  background-color: #00000071;
  backdrop-filter: blur(2px);
}

.sign-up .elem, .login .elem {
  content: "";
  height: 26vh;
  width: 12vw;
  background-color: rgba(245, 245, 245, 0.137);
  position: absolute;
  top: -32vh;
  right: -10vw;
  z-index: 999;
  transform: rotate(-45deg);
  transition: all ease-in-out 0.7s;
}

.sign-up:hover .elem {
  transform: translate(-80%, 80%) rotate(-45deg);
}
.login:hover .elem {
  transform: translate(-80%, 80%) rotate(-45deg);
}

.sign-up .button-inner , .login .button-inner{
  height: 6vh;
  width: 12vw;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: aldrich;
  color: white;
  z-index: 999;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.button-inner .ele {
  height: 3.5vh;
  width: 3.5vh;
  background-color: #FF6400;
  position: absolute;
  top: -2vh;
  z-index: 999;
  right: -2vh;
  transform: rotate(-45deg);
  transition: all ease-in-out 0.7s;
}

.text {
  z-index: 999;
}
.text::selection{
  background-color: white;
  color: #FF6400;
}

.login:hover .ele {
  scale: 1.5;
}
.sign-up:hover .ele {
  scale: 1.5;
}
.button:hover .ele {
  scale: 1.5;
}

/* page 7 */
.page7{
  min-height: 110vh;
  width: 100%;
  margin-top: 10vh;
}

.page7 header{
  font-size: 4vh;
  color: white;
  text-transform: uppercase;
  text-align: center;
  padding: 5vh 0;
  font-family: aldrich;
}


.page7 img{
  height: 100vh;
  width: 100%;
  object-fit: cover;
  overflow-x: hidden;
  transition: all ease-in-out .3s;
}

.page7-overlay{
  height: 100vh;
  width: 100%;
  position: absolute;
  background: linear-gradient(rgba(0, 0, 0, 0.964),rgba(0, 0, 0, 0.225), rgba(0, 0, 0, 0.181), black);
  overflow-x: hidden;
}

.page7 .figurine img{
  height: 4vh;
  width: 4vh;
  object-fit: cover;
  position: absolute;
  z-index: 99;
  left: 41%;
  top: 15%;
  cursor: pointer;
}

.page7 .headsets img{
  height: 4vh;
  width: 4vh;
  object-fit: cover;
  position: absolute;
  z-index: 99;
  left: 24%;
  top: 28%;
  cursor: pointer;
}
.page7 .mouse-pad img{
  height: 4vh;
  width: 4vh;
  object-fit: cover;
  position: absolute;
  z-index: 99;
  left: 40%;
  bottom: 32%;
  cursor: pointer;
}
.page7 .mouse img{
  height: 4vh;
  width: 4vh;
  object-fit: cover;
  position: absolute;
  z-index: 99;
  left: 35%;
  bottom: 5%;
  cursor: pointer;
}
.page7 .cap img{
  height: 4vh;
  width: 4vh;
  object-fit: cover;
  position: absolute;
  z-index: 99;
  left: 51%;
  bottom: 22%;
  cursor: pointer;
}
.page7 .tablet img{
  height: 4vh;
  width: 4vh;
  object-fit: cover;
  position: absolute;
  z-index: 99;
  left: 19%;
  bottom: 25%;
  cursor: pointer;
}
.page7 .laptop img{
  height: 4vh;
  width: 4vh;
  object-fit: cover;
  position: absolute;
  z-index: 99;
  left: 58%;
  bottom: 55%;
  cursor: pointer;
}
.page7 .merch img{
  height: 4vh;
  width: 4vh;
  object-fit: cover;
  position: absolute;
  z-index: 99;
  right: 25%;
  bottom: 30%;
  cursor: pointer;
}
.page7 .bag img{
  height: 4vh;
  width: 4vh;
  object-fit: cover;
  position: absolute;
  z-index: 99;
  right: 30%;
  top: 10%;
  cursor: pointer;
}

.page7 .bag .content, .laptop .content, .cap .content, .merch .content{
  height: 100vh;
  width: 40%;
  left: 0;
  background-color: transparent;
  position: absolute;
  transform: translateX(-100%);
  z-index: 100;
  background-image: url("images/message-left.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all ease-in-out .5s;
}
.page7 .headsets .content, .tablet .content, .mouse .content, .headsets .content, .mouse-pad .content, .figurine .content{
  height: 100vh;
  width: 40%;
  left: 60%;
  background-color: transparent;
  position: absolute;
  transform: translateX(100%);
  z-index: 100;
  background-image: url("images/message-right.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all ease-in-out .5s;
}


.page7 .page7-overlay img:hover{
  transform: rotate(90deg);
}


.page7 .bag .content .close i, .cap .content .close i, .laptop .content .close i, .merch .content .close i{
  font-size: 4.5vh;
  color: #f4f4f4bc;
  position: absolute;
  top: 13%;
  right: 8%;
  z-index: 101;
  transition: all ease-in-out .5s;
  cursor: pointer;
}
.page7 .headsets .content .close i, .tablet .content .close i, .mouse .content .close i, .headsets .content .close i, .mouse-pad .content .close i, .figurine .content .close i{
  font-size: 4.5vh;
  color: #848484bc;
  position: absolute;
  top: 13%;
  left: 8%;
  z-index: 101;
  transition: all ease-in-out .5s;
  cursor: pointer;
}

.page7 .close i:hover{
  transform: rotate(90deg);
}

.figurine .content{
  font-family: aldrich;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1vh;
}

.figurine .content h1{
  width: 50%;
  
}
.figurine .content p ul{
  width: 50%;
}

.laptop .content{
  font-family: aldrich;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1vh;
}

.laptop .content h1{
  width: 50%;
}
.laptop .content p{
  width: 50%;
}

.mouse .content{
  font-family: aldrich;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1vh;
}

.mouse .content h1{
  width: 50%;
}
.mouse .content p{
  width: 50%;
}
.mouse-pad .content{
  font-family: aldrich;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1vh;
}

.mouse-pad .content h1{
  width: 50%;
}
.mouse-pad .content p{
  width: 50%;
}
.tablet .content{
  font-family: aldrich;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1vh;
}

.tablet .content h1{
  width: 50%;
}
.tablet .content p{
  width: 50%;
}
.bag .content{
  font-family: aldrich;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1vh;
}

.bag .content h1{
  width: 50%;
}
.bag .content p{
  width: 50%;
}

.cap .content{
  font-family: aldrich;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1vh;
}

.cap .content h1{
  width: 50%;
}
.cap .content p{
  width: 50%;
}
.merch .content{
  font-family: aldrich;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1vh;
}

.merch .content h1{
  width: 50%;
}
.merch .content p{
  width: 50%;
}
.headsets .content{
  font-family: aldrich;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1vh;
}

.headsets .content h1{
  width: 50%;
}
.headsets .content p{
  width: 50%;
}

.page8{
  height: 100vh;
  width: 100%;
  background-color: rgb(0, 0, 0);
  position: relative;
}

.upper-section{
  height: 80%;
  width: 100%;
  background-color: #000000;
  position: absolute;
  top: 10vh;
  overflow: hidden;
}

.upper-section header{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -80%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.upper-section header .logo{
  z-index: 99;
}

.upper-section header video{
  position: absolute;
  top: 6vh;
  height: 22vh;
  width: 22vw;
}

header .icons{
  color: rgb(210, 210, 210);
  z-index: 199;
  font-size: 3.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8%;
  position: absolute;
  top: 22vh;
}

header .icons i{
  cursor: pointer;
  transition: all ease 0.5s;
}

.page8 .icons i:hover{
  color: #FF6400;
}

.page8 .sections{
  display: flex;
  align-items: flex-start;
  gap: 5vw;
  justify-content: center;
  margin-top: 35vh;
}

.page8 .sections .heading{
  color: white;
  font-size: 2.7vh;
  padding: 4vh 0;
  text-transform: uppercase;
  font-family: aldrich;
}

.sections h5{
  color: white;
  font-weight: 200;
  font-family: titillium;
  line-height: 4vh;
  transition: all ease 0.5s;
  cursor: pointer;
  width: max-content;
}

.sections h5:hover{
  color: #FF6400;
}

footer{
  height: 10vh;
  width: 100%;
  background-color: #1F1F1F;
  position: absolute;
  bottom: 0;
  color: rgba(255, 255, 255, 0.458);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
}

footer button{
  border-style: none;
  background-color: transparent;
  color: white;
  text-transform: capitalize;
  font-size: 2.5vh;
  font-family: aldrich;
  display: flex;
  transition: all ease 0.5s;
  align-items: center;
  font-weight: 100;
  cursor: pointer;
}
footer button:hover{
  color: rgba(0, 0, 255, 0.616);
}
footer button i{
  font-size: 3.6vh;
}

footer .left{
  font-size: 2vh;
  font-family: aldrich;
}

footer span{
  cursor: pointer;
  color: white;
  transition: all ease 0.5s;
}
footer span:hover{
  color: rgba(0, 0, 255, 0.618);
}




::-webkit-scrollbar{
  width: .5vh;
  background-color: #000000;
}

::-webkit-scrollbar-thumb{
  width: 1vh;
  background-color: #808080;
}