/* HEADER NAVIGATION*/
header {
  position: fixed;
  background-color: #000;
  height: 186px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2024;
}

header nav {
  width: 100%;
  max-width: 1300px;
}

header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header nav ul li {
  display: flex;
  gap: 36px;
}

header nav ul li > a {
  width: 214px;
  height: 53px;
  border-radius: 4px;
  font-size: 30px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offset {
  height: 186px;
}

/* SECTION 1 */
#sec-1 {
  padding: 20px 0;
  height: 513px;
  background-image: url("../images/bg1.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#sec-1 div.container > p:nth-child(1) {
  font-size: 70px;
  font-weight: 900;
  width: 100%;
  max-width: 909px;
}

#sec-1 div.container > p:nth-child(2) {
  font-size: 30px;
  font-weight: 700;
}

#sec-1 div.container > p:nth-child(3) {
  font-size: 110px;
  font-weight: 900;
  opacity: 0.9;
  margin-bottom: 24px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#sec-1 div.container > a:nth-child(4) {
  width: 286px;
  height: 71px;
  padding: 8.5px 20px;
  border-radius: 4px;
  font-size: 40px;
  font-weight: 900;
}

/* SECTION 2 */
#sec-2 {
  padding: 71px 0;
}

#sec-2 div.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#sec-2 div.container > * {
  width: 400px;
  aspect-ratio: 4/3;
}

#sec-2 div.container > div:not(div:nth-last-child(1)) {
  margin-right: 20px;
}

#sec-2 div.container > * > img {
  border-radius: 8px;
}

/* SECTION 3 */
#sec-3 {
  width: 100%;
  padding: 42px 0;
  position: relative;
}

#sec-3 .container {
  position: relative;
}

#sec-3 .container-bandana {
  position: absolute;
  right: 0;
  top: 50px;
  height: 80%;
  aspect-ratio: 1.5/2.5;
  background-image: url("../images/bandana1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 10px center;
}

#sec-3 .container-phone {
  position: absolute;
  right: 0;
  top: -120px;
  width: 470px;
  aspect-ratio: 1.5/2;
  background-image: url("../images/phone1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 10px center;
}

#sec-3 div.container > p:nth-child(2) {
  font-size: 30px;
  font-weight: 700;
  width: 469px;
}

#sec-3 div.container > p:nth-child(3) {
  font-size: 90px;
  font-weight: 900;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#sec-3 div.container > p:nth-child(4) {
  font-size: 30px;
  font-weight: 700;
  width: 469px;
  margin-bottom: 50px;
}

#sec-3 div.container > a:nth-child(5) {
  width: 388px;
  height: 80px;
  font-size: 36px;
  font-weight: 800;
  padding: 8.5px 20px;
  border-radius: 4px;
}

#sec-3 div.container > h1:nth-child(6) {
  font-size: 45px;
  font-weight: 900;
  padding-bottom: 38px;
  margin-top: 50px;
}

#sec-3 div.container > div.container-testimonials > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  position: relative;
  border-radius: 30px;
}

#sec-3 div.container > div.container-testimonials > div > * {
  width: 416px;
  height: 250px;
  padding: 31px 23px;
  text-align: center;
  border-radius: 30px;
  flex-shrink: 1;
}

#sec-3 div.container > div.container-testimonials > div > * > p:nth-child(1) {
  font-size: 20px;
  font-weight: 300;
}

#sec-3 div.container > div.container-testimonials > div > * > p:nth-child(2) {
  font-size: 20px;
  font-weight: 900;
  margin-top: 24px;
}

#sec-3 div.container > div.container-swiper-pagination {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

#sec-3 div.container > div.container-swiper-pagination > div {
  margin-top: 8px;
  width: 13px;
  height: 8px;
  border-radius: 10px;
  background-color: #fff;
  transition: "width 0.5s ease, color 0.5s ease";
}

#sec-3 div.container > div.container-swiper-pagination > div.active {
  width: 50px;
  background-color: rgba(245, 237, 141, 1);
}

#sec-3 div.container > div.container-game-platform {
  padding: 30px 0;
}

#sec-3 div.container > div.container-game-platform > h1 {
  font-size: 45px;
  font-weight: 900;
  margin: 50px 0 40px 0;
  margin-bottom: 30px;
}

#sec-3
  div.container
  > div.container-game-platform
  > div.container-game-platform-list {
  position: relative;
  padding: 30px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* SECTION 4 */
#sec-4 {
  padding: 42px 0;
}

#sec-4 > div.container > div {
  height: 488px;
  background-image: url("../images/bg2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 30px;
}

#sec-4 > div.container > div > p:nth-child(1) {
  font-size: 40px;
  font-weight: 400;
}

#sec-4 > div.container > div > p:nth-child(2) {
  font-size: 70px;
  padding: 4px 0;
  font-weight: 900;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#sec-4 > div.container > div > a {
  width: 463px;
  height: 71px;
  font-size: 35px;
  font-weight: 700;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SECTION 5 */
#sec-5 {
  padding: 50px 0;
}

#sec-5 div.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#sec-5 div.container > p:nth-child(1) {
  font-size: 60px;
  font-weight: 700;
}

#sec-5 div.container > div:nth-child(2) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 700px;
  padding: 50px 0;
}

#sec-5 > div.container > div.container-op-grid {
  width: 100%;
  display: flex;
  gap: 70px;
  text-align: left;
}

#sec-5 > div.container > div.container-op-grid > div:nth-child(1) {
  max-width: 822px;
}

#sec-5
  > div.container
  > div.container-op-grid
  > div:nth-child(1)
  > p:nth-child(1) {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
}

#sec-5
  > div.container
  > div.container-op-grid
  > div:nth-child(1)
  > p:nth-child(2) {
  font-size: 25px;
  font-weight: 400;
}

#sec-5 > div.container > div.container-op-grid > div:nth-child(2) {
  flex: 1;
}

#sec-5
  > div.container
  > div.container-op-grid
  > div:nth-child(2)
  > p:nth-child(1) {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 15px;
}

#sec-5
  > div.container
  > div.container-op-grid
  > div:nth-child(2)
  > div:nth-child(2) {
  display: flex;
  gap: 8px;
}

#sec-5
  > div.container
  > div.container-op-grid
  > div:nth-child(2)
  > div:nth-child(2)
  > button {
  background-color: transparent;
  padding: 0;
  cursor: pointer;
}

#sec-5 > div.container > p:nth-child(4) {
  margin-top: 60px;
  font-size: 15px;
  font-weight: 400;
}