/* CSS Variables for Consistent Theming */
:root {
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
}

/* General Styles */ 
* {
  list-style: none;
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
}

html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: #081121;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  background: rgba(15, 54, 113, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
}

.header-menu {
  display: flex;
  justify-content: center;
  gap: 100px;
  list-style-type: none;
  padding: 10px 0;
  margin: 0;
}

.header-menu li a {
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  line-height: 31px;
  padding: 16px 0;
}

/* For YouTube */
.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  background: none;
}

.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: transparent;
}

.youtube-player img {
  object-fit: cover;
  display: block;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  height: auto;
  cursor: pointer;
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  transition: 0.4s all;
}

.youtube-player img:hover {
  -webkit-filter: brightness(75%);
}

.youtube-player .play {
  height: 48px;
  width: 68px;
  left: 50%;
  top: 50%;
  margin-left: -34px;
  margin-top: -24px;
  position: absolute;
  background: url("https://i.ibb.co/j3jcJKv/yt.png") no-repeat;
  cursor: pointer;
}

.logo_container {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center; /* Center items vertically */
  background-image: url(./images/Rectangle-3.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 120px 20px 20px 20px; /* Adjusted padding for fixed header */
}

.websites {
  display: flex;
  flex-direction: column; /* Keep vertical layout */
  align-items: flex-start; /* Align icons to the start */
  justify-content: flex-start;
  gap: 48px;
  position: relative;
  left: 0; /* Reset left positioning */
  /* Removed margin-left: auto; to prevent pushing too far right */
}

.websites img {
  object-fit: contain;
  /* Removed margin-left: -8%; to prevent shifting */
  max-width: 30px; /* Default size on mobile */
}

.group,
.text_image_2,
.text_image_3,
.section1_image {
  max-inline-size: 100%;
  block-size: auto;
}

p {
  color: #fff;
  font-size: 25px;
  line-height: 39px;
}

.section-text,
.section2_text,
.section3_text {
  max-width: 750px;
  width: 100%;
}

.section1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 170px;
}

.section1_content,
.section2_content,
.section3_content {
  display: flex;
  align-items: center;
  position: relative;
  margin: 38px 40px 168px 100px;
  gap: 20px; /* Uniform gap between text and image */
}

.section1_content .section-text,
.section2_content .section2_text,
.section3_content .section3_text {
  flex: 1;
}

.section1_image,
.text_image_2,
.text_image_3 {
  flex: 1;
  max-inline-size: 50%; /* Adjust as needed */
}

.section1_image,
.text_image_2,
.text_image_3 {
  object-fit: contain;
}

.section2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}

.section2_content {
  /* Inherited from general content styles */
}

.section3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 100px;
}

.section3_content {
  /* Inherited from general content styles */
}

.section4 {
  max-height: 200px;
  min-height: 100px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-image: url(./images/background_grey_transparent.webp); */ /* Removed background image */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding-top: 20px;
  margin-top: 20px;
  gap: 10px; /* Added gap */
}

.section4 img {
  margin-top: 200px;
}

.section4 p {
  text-align: center;
  margin: 61px 453px 95px 453px;
}

.section6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 149px;
  padding-top: 80px;
  margin: 0 0 40px 0;
}

.swiper {
  margin: 0 100px !important;
}

.slider_container {
  width: 100%;
}

.swiper-slide {
  padding-bottom: 100px;
}

.img_box img {
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  height: 20px;
  width: 20px;
  background: linear-gradient(91.77deg, #ffea3d 0.33%, #d10000 148.23%), #d9d9d9;
}

.section5 {
  max-height: 1101px;
  min-height: 1101px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
      180.31deg,
      rgba(8, 17, 33, 0) 40.9%,
      #081121 90.19%
    ),
    linear-gradient(270.29deg, #081121 0.27%, rgba(8, 17, 33, 0) 19.59%),
    linear-gradient(90.41deg, #081121 0.32%, rgba(8, 17, 33, 0) 24.98%),
    linear-gradient(178.71deg, #081121 1.06%, rgba(0, 0, 0, 0) 62.76%),
    url(./images/Video.webp);
  background-repeat: no-repeat;
  background-size: cover;
}

.mySwiper {
  padding-top: 98px !important;
}

.video-slide {
  background-position: center;
  background-size: cover;
  width: 100%;
  padding-bottom: 0;
  margin-bottom: 100px;
}

iframe {
  height: 100%;
  width: 100%;
}

.video-slide img {
  max-inline-size: 100%;
  object-fit: cover;
  display: block;
  height: 100%;
  width: 100%;
}

.video-slide:not(.swiper-slide-active) {
  padding: 0;
  opacity: 14%;
}

.mySwiper {
  width: 100%;
}

.mySwiper .swiper {
  width: 100%;
  height: 100%;
}

.mySwiper .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section7 {
  display: none; /* Roadmap section hidden */
}

footer {
  min-height: 170px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url(./images/Rectangle\ 14.webp);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

footer ul {
  display: none; /* Removed navigation links from footer */
}

footer hr {
  width: 100%;
  display: none; /* Removed horizontal line from footer */
}

footer .container {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 100px;
}

footer .container p {
  font-size: 17px;
  line-height: 25.5px;
}

.footer_sebsites {
  display: flex;
  align-items: center;
  gap: 27px;
}

/* Responsive Styles */

/* Adjust header menu and logo container on medium screens */
@media screen and (max-width: 1765px) {
  p {
    font-size: 20px;
    line-height: 30px;
  }
}

/* Adjust footer gap on medium screens */
@media screen and (max-width: 1676px) {
  footer .container {
    margin: 0 50px;
  }
}

/* Responsive adjustments for various sections */
@media screen and (max-width: 1520px) {
  header {
    min-height: auto;
  }

  p {
    font-size: 18px;
    line-height: 30px;
  }

  .section-text {
    margin: 0 40px;
  }

  .text2 {
    margin-top: 20px;
  }

  .greeting,
  .beware,
  .character_customization {
    max-inline-size: 60%;
    margin-top: 90px;
    margin-bottom: 20px;
  }

  .beware {
    max-inline-size: 40%;
    margin-bottom: 40px;
  }

  .section6 .gallery {
    max-inline-size: 16%;
    block-size: auto;
  }

  .section1_content,
  .section2_content,
  .section3_content {
    align-items: center;
    gap: 24px;
    margin: 0 40px;
  }

  .section1_content p,
  .section2_text,
  .section3_text {
    text-align: center;
  }

  .section1_image,
  .text_image_2,
  .text_image_3 {
    max-inline-size: 95%;
  }

  .section2_text,
  .section3_text {
    margin: 0 30px;
  }

  .charater_creation {
    margin: 100px 0;
  }

  .section3 {
    margin: 0 40px;
  }

  .section3_content .section3_text {
    max-width: 440px;
    margin-bottom: 0;
  }

  .section4 {
    max-height: none;
    min-height: 200px;
    gap: 55px;
    margin-top: 90px;
  }

  .section4 img {
    max-inline-size: 23%;
    block-size: auto;
    margin-top: 0;
  }

  .section4 p {
    margin: 0 70px;
  }

  .section5 {
    max-height: none;
    min-height: 700px;
  }

  .section5 img {
    block-size: auto;
  }

  .section6 {
    gap: 40px;
  }

  .section7 {
    gap: 30px;
    margin: 100px 0 30px 0;
  }

  .section7 .roadmap_schema {
    margin: 0;
  }

  footer {
    min-height: 100px;
    margin-top: 15px;
  }

  footer .container {
    margin-top: 15px;
  }

  footer .container p {
    font-size: 15px;
    line-height: 20px;
  }

  /* Make header menu smaller on mobile */
  .header-menu li a {
    font-size: 18px; /* Reduced font size */
    padding: 10px 0 15px 0; /* Reduced padding */
  }
}

/* Desktop Specific Adjustments */
@media screen and (min-width: 825px) {
  .logo_container .websites {
    /* Keep vertical layout */
    flex-direction: column;
    align-items: flex-end; /* Align icons to the right within their container */
    justify-content: center; /* Vertically center within grid cell */
    gap: 24px; /* Maintain or adjust gap as needed */
    margin-right: 60px; /* Increased from 40px */
  }

  .logo_container .websites a img {
    max-width: 100px; /* Increased icon size on desktop */
    height: auto;
  }
}

/* Small tablets and larger mobiles */
@media screen and (max-width: 824px) {
  header {
    /* Hide header menu on mobile */
    display: none;
  }

  /* Arrange social media icons in the logo container vertically and align to the left */
  .logo_container .websites {
    display: flex; /* Ensure flex is active */
    flex-direction: column; /* Arrange vertically */
    align-items: flex-start; /* Align to the left */
    justify-content: flex-start;
    gap: 24px; /* Adjust gap as needed */
    margin-left: 20px; /* Adjust margin for alignment */
  }

  .logo_container .websites a img {
    max-width: 30px; /* Adjust size to prevent stretching */
    height: auto;
  }

  /* Ensure footer's social media icons remain horizontal */
  /* No changes needed for footer_sebsites */

  /* Remove any vertical arrangement from footer_sebsites */
  .footer_sebsites {
    flex-direction: row; /* Ensure horizontal layout */
    align-items: center;
    gap: 27px;
    margin-left: 0; /* Reset margin */
  }

  .footer_sebsites img {
    max-inline-size: 30px; /* Adjust size */
    height: auto; /* Prevent stretching */
  }

  /* Ensure further alignment */
  footer .container .footer_sebsites {
    margin-left: 0;
    padding-left: 0;
    justify-content: flex-start;
  }
}

/* Hide header navigation on smaller screens */
@media screen and (max-width: 1200px) {
  .logo_container {
    padding-top: 0;
  }

  .section1 {
    margin-top: 30px;
  }

  footer {
    min-height: 80px;
  }

  /* Navigation links already removed from footer */
}

/* Tablet and below */
@media screen and (max-width: 1023px) {
  .video {
    max-inline-size: 18%;
  }

  .section1_content,
  .section3_content {
    flex-direction: column;
  }

  .section2_content {
    flex-direction: column-reverse;
  }

  .section3_content .section3_text {
    max-width: 830px;
  }
}

/* Small mobiles */
@media screen and (max-width: 766px) {
  .character_customization {
    max-inline-size: 85%;
  }

  .section4 img {
    max-inline-size: 40%;
  }

  .section5 .mySwiper img {
    max-inline-size: 91%;
  }

  .video {
    margin-bottom: 30px;
  }

  .youtube-player iframe {
    width: 90%;
    margin-left: 34px;
  }

  .section6 {
    margin-bottom: 0;
  }

  .gallery {
    margin-bottom: 30px;
  }

  .section7 {
    margin-top: 0;
  }

  .roadmap {
    margin-top: 30px;
  }
}

/* Extra small mobiles */
@media screen and (max-width: 560px) {
  header {
    display: none; /* Ensure header is hidden on very small screens */
  }

  p {
    font-size: 13px;
    line-height: 18px;
  }

  .websites {
    gap: 0;
  }

  .section1,
  .section2,
  .section3 {
    gap: 24px;
    margin-bottom: 40px;
  }

  .section-text,
  .section2_text,
  .section3_text {
    min-width: 290px;
    max-width: 475px;
  }

  .charater_creation {
    margin: 30px 0;
  }

  .section-text,
  .section2_text,
  .section3_text {
    margin: 0;
  }

  .section4 p {
    margin: 0 20px;
  }

  .section4 img {
    max-inline-size: 41%;
  }

  .section5 img {
    max-inline-size: 27%;
  }

  .section6 {
    margin-bottom: 0;
  }

  .section7 {
    margin-top: 40px;
  }

  .text_image_2,
  .text_image_3 {
    max-inline-size: 100%;
  }

  .text_image_2,
  .text_image_3 {
    width: 100%;
  }

  .mySwiper {
    padding-top: 40px !important;
  }

  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    margin-top: -60px;
  }

  .youtube-player iframe {
    margin-left: 27px;
  }

  .section6 {
    gap: 40px;
  }

  footer {
    min-height: 60px;
  }

  footer .container {
    margin-top: 8px;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 10px;
    margin-left: 10px;
  }

  footer .container .footer_sebsites {
    justify-content: flex-start;
    gap: 15px;
    max-inline-size: 100%;
  }

  .footer_sebsites img {
    max-inline-size: 25%;
    height: auto; /* Prevent stretching */
  }

  .greeting,
  .beware,
  .character_customization {
    margin-bottom: 5px;
    margin-top: 5px;
  }

  /* Make header menu smaller on very small screens */
  .header-menu li a {
    font-size: 14px; /* Further reduced font size */
    padding: 6px 0 18px 0; /* Further adjusted padding */
  }

  /* Adjust social media icons more to the left */
  footer .container .footer_sebsites {
    margin-left: 10px; /* Added margin to move icons left */
  }
}

/* Very small mobiles */
@media screen and (max-width: 480px) {
  header {
    display: none; /* Ensure header is hidden on very small screens */
  }

  .beware {
    margin-top: 0;
    margin-bottom: 20px;
  }

  .section1,
  .section2,
  .section3 {
    gap: 24px;
    margin-bottom: 20px;
  }

  .section2 {
    padding-top: 0;
    margin-top: 20px;
  }

  .section4 {
    min-height: 200px;
    padding-top: 0;
  }

  .section5 {
    min-height: 400px;
  }

  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    gap: 6px;
    margin-top: -70px;
    margin-bottom: 0;
  }

  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets
    .swiper-pagination-bullet {
    height: 12px;
    width: 12px;
  }

  .character_customization {
    max-inline-size: 90%;
  }

  .section5 .mySwiper img {
    max-inline-size: 83%;
  }

  .youtube-player iframe {
    width: 83%;
    margin-left: 34px;
  }

  .section6 {
    padding-top: 0px;
  }

  .section7 {
    margin-top: 40px;
  }

  footer .container p {
    font-size: 7px;
  }

  /* Further reduce header menu size */
  .header-menu li a {
    font-size: 16px; /* Further reduced font size */
    padding: 8px 0 20px 0; /* Further adjusted padding */
  }

  /* Adjust social media icons to be more to the left */
  footer .container .footer_sebsites {
    margin-left: 5px; /* Further moved icons left */
  }
}

/* Ultra small mobiles */
@media screen and (max-width: 360px) {
  .youtube-player iframe {
    width: 83%;
    margin-left: 26px;
  }

  footer .container {
    margin-right: 5px;
    margin-left: 5px;
  }

  .footer_sebsites img {
    max-inline-size: 15%;
    height: auto; /* Prevent stretching */
  }

  /* Further reduce header menu size */
  .header-menu li a {
    font-size: 12px; /* Further reduced font size */
    padding: 4px 0 16px 0; /* Further adjusted padding */
  }

  /* Adjust social media icons to be more to the left */
  footer .container .footer_sebsites {
    margin-left: 0px; /* Aligned to the very left */
  }
}

/* Optional: Hover Effects for Footer Icons */
.footer_sebsites a img:hover {
  opacity: 0.8; /* Slightly reduce opacity on hover */
  transition: opacity 0.3s ease;
}

/* Center Screenshots on Desktop */
@media screen and (min-width: 1024px) {
  .swiper-slide,
  .img_box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img,
  .img_box img {
    max-width: 80%;
    height: auto;
  }
}