* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", "SegoeUI", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}
:root {
  --padding-inline: 2.5vw 5vw 2.5vw 5vw;
  --mobile-padding-inline: 2.5vw 2.5vw 2.5vw 2.5vw;
  --padding-left_right: 5vw 5vw;
}
html {
  scroll-behavior: smooth;
}
body {
  height: 100vh;
}
.mobile_nav_container {
  display: none;
}
.nav_container {
  overflow: hidden;
  /* background-color: aqua; */
  height: 5.7vh;
  display: flex;
  justify-content: space-between;
  padding-inline: 3.8em;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
.nav_container a {
  padding: 11px 0px 11px 7px;
}
.nav_container img {
  width: 100%;
  height: 100%;
}

.left_menu_list {
  display: flex;
}
.left_menu_item {
  padding: 14px 10px 14px 10px;
  font-size: 0.815em;
  cursor: pointer;
}
.left_menu_item_text {
  display: flex;
  padding-left: 2em;
}
.left_menu_item:hover p,
.right_menu_item:hover p {
  border-bottom: 2px solid black;
}

.right_menu_list {
  display: flex;
}

.right_menu_item p {
  border-bottom: 2px solid rgb(255, 255, 255);
}

.right_menu_item {
  padding: 17px 10px 11px 10px;
  font-size: 0.815em;
  display: flex;
  align-items: end;
  justify-content: end;
  gap: 0.4em;
  cursor: pointer;
}
.right_menu_item i {
  font-size: 1.2em;
}
.right_menu_item img {
  height: 85%;
}

.avatar_div {
  display: flex;
  align-items: center;
  gap: 1em;
  padding-left: 1em;
  font-size: 0.815em;
}
.avatar {
  min-width: 45%;
  max-height: 80%;
  border-radius: 50%;
}

/* SLIDER */
#section_1 {
  min-height: calc(100vh - 62.325px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.slider {
  width: 100%;
  /* height: 63.5vh  ; */
  overflow: hidden;
}

.slides {
  display: flex;
  width: 200%; /* 2 slides → 100% * 2 */
  height: 100%;
  transition: transform 0.8s ease-in-out;
}

.slide {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.mobile_bg {
  display: none;
}

.slide_text {
  position: absolute;
  top: 32.5%;
  left: 4.2%;
}
.slide_text h3 {
  font-size: 1.82em;
  font-weight: 500;
}
.slide_text p {
  max-width: 21.5em;
  line-height: 1.5em;
  padding-top: 1em;
  padding-bottom: 1.5em;
}
.slide_text h3 {
  font-size: 1.82em;
  font-weight: 500;
}
.slide_text button {
  background-color: #0067b8;
  color: white;
  padding: 10px 12px;
  border: none;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
}
.slide img {
  width: 50%;
  height: 100%;
  object-fit: cover;
}

#slide_text_2 {
  top: 18.6%;
  left: 4.5%;
}
/* RADIO BUTTON */
.navigation {
  display: flex;
  gap: 2em;
  overflow: visible;
  display: flex;
  align-items: center;
}
.navigation i {
  font-size: 1.2em;
}

#pause_icon,
#pause_icon_fill {
  font-size: 1.5em;
}
#pause_icon_fill {
  display: none;
}

.bar {
  width: 10px;
  height: 10px;
  border: 2px solid rgb(0, 0, 0);
  border-radius: 50%;
  background: transparent;
  transition: 0.3s;
}

.bar.active {
  background: rgb(10, 10, 10);
}

#left_arrow,
#right_arrow {
  cursor: pointer;
}

#left_arrow:hover {
  transform: translateX(-5px);
  transition: 0.25s ease-in-out;
}
#right_arrow:hover {
  transform: translateX(5px);
  transition: 0.25s ease-in-out;
}

.icon_layer {
  display: flex;
  gap: 2em;
  padding-bottom: 2em;
  flex-wrap: wrap;
}
.icon_box {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
}
.icon_box img {
  width: 2.5em;
  height: 2.5em;
}

.icon_box a {
  color: rgb(0, 103, 184);
  font-weight: 500;
}

/* SECTION 2 */
#section_2 {
  min-height: 70vh;
}

.section_2_container {
  display: flex;
  padding: 2.5vw 5vw 4vw 5vw;
  gap: 1.5em;
  flex-wrap: wrap;
  justify-content: space-between;
}
.product_boxes {
  box-shadow: -2px 4px 4px rgb(220, 220, 220), 2px 0 4px rgb(220, 220, 220);
  max-width: 20.182em;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  /* max-height: 28.182em; */
  /* height: 28em; */
}

.product_boxes img {
  width: 100%;
  object-fit: contain;
}
.product_info {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1.2em;
  padding: 1.5em;
  flex: 1;
}
.product_boxes h3 {
  font-size: 1.813em;
  font-weight: 500;
}
.product_info button {
  font-size: 1em;
  padding: 0.625em 0.75em;
  margin-top: auto;
  color: white;
  border: 1.6px solid;
  font-weight: 500;
  background-color: rgb(0, 103, 184);
  margin-top: auto;
  cursor: pointer;
}

/* SECTION 3 XBOX GAME PASS */

#xbox_game_pass {
  min-height: 40vh;
}
.xbox_container {
  padding: var(--padding-inline);
  position: relative;
  display: flex;
  align-items: center;
}

.xbox_container img {
  width: 100%;
  object-fit: contain;
}

.img_text {
  position: absolute;
  color: white;
  display: flex;
  flex-direction: column;
  max-width: 35%;
  padding: 5.333vw;
  gap: 1.5em;
}

.img_text h3 {
  font-size: 2.569vw;
  font-weight: 500;
}
.img_text p {
  line-height: 1.5em;
}
.img_text button {
  font-size: 1em;
  padding: 0.625em 0.75em;
  background-color: rgb(0, 103, 184);
  color: white;
  border-color: rgba(0, 0, 0, 0);
  max-width: fit-content;
  cursor: pointer;
}

/* SECTION 4 business */
#business {
  min-height: 90vh;
}
.business_contianer {
  padding: var(--padding-inline);

  display: flex;
  flex-direction: column;
}

.business_box_container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5em;
}
.business_contianer h2 {
  font-size: 2.35vw;
  font-weight: 600;
  padding-bottom: 0.5em;
}
.business_boxes_card {
  box-shadow: -2px 4px 4px rgb(220, 220, 220), 2px 0 4px rgb(220, 220, 220);
  max-width: 20.182em;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  flex-wrap: wrap;
}

.business_boxes_card img {
  width: 100%;
  object-fit: contain;
}
.business_info {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1.2em;
  padding: 1.5em;
  flex: 1;
}
.business_boxes_card h3 {
  font-size: 1.813em;
  font-weight: 500;
}
.business_info button {
  font-size: 1em;
  padding: 0.625em 0.75em;
  text-align: start;
  margin-top: auto;
  color: white;
  border: 1.6px solid;
  font-weight: 500;
  background-color: rgb(0, 103, 184);
  margin-top: auto;
  cursor: pointer;
}
.new_label {
  height: 2vw;
  margin-bottom: -1.25em;
  margin-top: -0.5em;
}
.new_label h4 {
  padding: 0.18vw 0.833vw;
  background-color: rgb(255, 185, 0);
  font-weight: 600;
}

/* Social Follow */
.social_follow {
  min-height: 32vh;
  background-color: rosybrown;
}
.social_follow_container {
  display: flex;
  align-items: center;
  padding-inline: 5vw;
  /* margin-block: 5vw; */
  padding-top: 2em;
  padding-bottom: 4em;
  gap: 2em;
  flex-wrap: wrap;
}
.social_follow_container h2 {
  font-size: 1em;
  font-weight: 400;
  /* background-color: rosybrown; */
}

.social_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
}
.social_icon i {
  font-size: 1.7em;
  cursor: pointer;
}
#youtube {
  font-size: 1.9em;
}

/* BACK TO UP */
.back_to_top {
  background-color: rgb(210, 210, 210);
  text-decoration: none;
  color: black;
  font-weight: 600;
  font-size: 1.2em;
  padding: 8px 12px;
  display: flex;
  gap: 0.7em;
  position: fixed;
  bottom: 1.5%;
  right: 1%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.back_to_top:hover {
  background-color: white;
  box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.15);
}
.back_to_top.show {
  opacity: 1;
  pointer-events: auto;
}

/* Footer */

footer {
  min-height: 40vh;
  background-color: rgb(243, 243, 243);
  display: flex;
}
.footer_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 2.5vw 5vw 2.5vw 5vw;
  gap: 2em;
}
.footer_item {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.footer_item_container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer_item ul li {
  border-bottom: 1px solid rgb(243, 243, 243);
  line-height: 2em;
}
.footer_item h3 {
  font-size: 15px;
  font-weight: 600;
  color: rgb(97, 97, 97);
}
.footer_list {
  list-style: none;
}
.footer_list li a,
.left_footer,
.right_footer {
  text-decoration: none;
  font-size: 11px;
  color: rgb(97, 97, 97);
}

.footer_item ul li:hover {
  border-bottom: 1px solid black;
}

.row_footer,
.left_footer,
.right_footer {
  display: flex;
  gap: 2em;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.language_icon i {
  font-size: 2.2em;
}
.language_icon,
.privacy {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* RESPONSIVE 425PX */

@media (max-width: 426px) {
  .nav_container {
    display: none;
  }
  .nav_container {
    background-color: violet;
  }
  .mobile_nav_container {
    /* background-color: aqua; */
    height: 5.7vh;
    display: flex;
    justify-content: space-between;
    padding-inline: 0.5em;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
  }
  .mobile_nav_container a {
    padding: 11px 0px 11px 7px;
  }
  .mobile_nav_container img {
    width: 100%;
    height: 100%;
  }
  .mobile_left_menu_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
  }
  .mobile_left_menu_list i {
    font-size: 1.5em;
  }
  .mobile_left_menu_list img {
    width: 45%;
    height: 45%;
  }
  .mobile_middle_logo a {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mobile_middle_logo img {
    width: 50%;
    height: 50%;
  }
  .mobile_right_menu_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
  }
  .mobile_right_menu_list i {
    font-size: 1.2em;
  }
  .slider {
    box-shadow: -2px 2px 4px rgb(220, 220, 220);
  }

  .desktop_bg {
    display: none;
  }
  .mobile_bg {
    display: block;
  }
  #section_1 {
    gap: 2em;
  }
  .slide_text {
    position: static;
    padding: 7vw 5vw 11vw 5vw;
  }

  .slide_text h3 {
    font-size: 1.82em;
    font-weight: 500;
  }
  .slide_text p {
    max-width: 21.5em;
    line-height: 1.5em;
    padding-top: 1em;
    padding-bottom: 1.5em;
  }
  .slide_text h3 {
    font-size: 1.82em;
    font-weight: 500;
  }
  .slide_text button {
    background-color: #0067b8;
    color: white;
    padding: 10px 12px;
    border: none;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
  }
  .slide {
    border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* sharp bottom line */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* blurred bottom line */
  }
  .slide img {
    width: 50%;
    height: 100%;
    object-fit: contain;
  }

  .icon_layer {
    justify-content: space-around;
    padding-inline: 2.5vw;
    gap: 0em;
  }
  .section_2_container {
    padding: var(--mobile-padding-inline);
    gap: 2.5em;
  }
  .product_boxes {
    max-width: 100%;
  }

  /* SECTION 3 XBOX GAME */

  .xbox_container {
    padding: var(--mobile-padding-inline);
    display: flex;
    flex-direction: column;
    margin-top: 2em;
  }

  .img_text {
    position: static;
    color: rgb(0, 0, 0);
    max-width: 100%;
    padding: 5.333vw;
    margin-block: 1em;
  }

  .img_text h3 {
    font-size: 5.647vw;
  }
  .img_text p {
    margin-top: -0.5em;
  }

  /* SECTION 4 BUSINESS */
  .business_contianer h2 {
    font-size: 5.647vw;
  }
  .business_contianer {
    padding: var(--mobile-padding-inline);
  }
  .business_boxes_card {
    max-width: 100%;
  }
  .business_box_container {
    gap: 2.5em;
  }

  .new_label {
    height: 8.784vw;
  }
  .new_label h4 {
    padding: 1.412vw 2.824vw;
  }
  .business_info h3 {
    font-size: 4.941vw;
  }
  .business_info p {
    margin-top: -0.5em;
  }

  .footer_item {
    padding-top: 2.2em;
  }

  .left_footer,
  .right_footer {
    gap: 1em;
    justify-content: start;
  }

  /* BACK TO UP */
  .back_to_top {
    position: static;
  }
}