.header {
  width: 100%;
  min-width: 1920px;
  min-height: 3124px;
  display: flex;
  flex-direction: column;
}

.header .class {
  width: 1920px;
  height: 85px;
  display: flex;
  background-color: #0b1119;
  box-shadow: inset 0px -1px 0px #172333;
}

.header .logo {
  margin-top: 20px;
  width: 98px;
  height: 45px;
  margin-left: 240px;
  aspect-ratio: 2.18;
  object-fit: cover;
}

.header .menu {
  width: 222px;
  margin-left: 677px;
  gap: 16.3px;
  margin-top: 30px;
  display: flex;
}

.header .text-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 193px;
  height: 24px;
  font-family: "Cruyff Sans-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.header .vector {
  margin-top: 9.3px;
  width: 11.41px;
  height: 7.12px;
}

.header .div-wrapper {
  width: 75px;
  margin-left: 38px;
  margin-top: 30px;
  display: flex;
}

.header .div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 73px;
  height: 24px;
  font-family: "Cruyff Sans-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.header .menu-2 {
  width: 80px;
  margin-left: 38px;
  margin-top: 30px;
  display: flex;
}

.header .text-wrapper-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 24px;
  font-family: "Cruyff Sans-Medium", Helvetica;
  font-weight: 500;
  font-size: 20px;
  white-space: nowrap;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
}

.header .menu-3 {
  width: 98px;
  margin-left: 38px;
  margin-top: 30px;
  display: flex;
}

.header .text-wrapper-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 24px;
  font-family: "Cruyff Sans-Medium", Helvetica;
  font-weight: 500;
  font-size: 20px;
  white-space: nowrap;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
}

.header .menu-4 {
  width: 40px;
  margin-left: 38px;
  margin-top: 30px;
  display: flex;
}

.header .text-wrapper-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 24px;
  font-family: "Cruyff Sans-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.header .hero-select {
  width: 1920px;
  height: 607px;
  position: relative;
  background-color: #0b1119;
  background-image: url(./img/BG-tablet-web-1080p-1.png);
  background-size: 100% 100%;
}

.header .group {
  position: absolute;
  width: 1440px;
  height: 220px;
  top: 302px;
  left: 240px;
  display: flex;
  gap: 20.5px;
}

.header .card-platform {
  width: 272px;
  height: 220px;
  position: relative;
}

.header .rectangle {
  left: 1px;
  width: 269px;
  height: 220px;
  background: linear-gradient(
    148deg,
    rgba(49, 54, 71, 1) 0%,
    rgba(45, 45, 54, 1) 27%,
    rgba(45, 45, 54, 0.77) 53%,
    rgba(58, 70, 99, 1) 100%
  );
  position: absolute;
  top: 0;
  border-radius: 10px;
}

.header .text-wrapper-5 {
  position: absolute;
  top: calc(50.00% + 61px);
  left: 0;
  width: 270px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.header .ps-icon {
  position: absolute;
  width: 49.24%;
  top: calc(50.00% - 74px);
  left: 25.05%;
  height: 103px;
  aspect-ratio: 1.3;
}

.header .rectangle-2 {
  top: -1px;
  left: 1px;
  width: 271px;
  height: 222px;
  border: 2px solid;
  border-color: #007fff;
  position: absolute;
  border-radius: 10px;
  background: linear-gradient(
    148deg,
    rgba(49, 54, 71, 1) 0%,
    rgba(45, 45, 54, 1) 27%,
    rgba(45, 45, 54, 0.77) 53%,
    rgba(58, 70, 99, 1) 100%
  );
}

.header .text-wrapper-6 {
  position: absolute;
  top: calc(50.00% + 60px);
  left: -1px;
  width: 270px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.header .rectangle-3 {
  top: 0;
  left: 0;
  width: 270px;
  height: 220px;
  position: absolute;
  border-radius: 10px;
  background: linear-gradient(
    148deg,
    rgba(49, 54, 71, 1) 0%,
    rgba(45, 45, 54, 1) 27%,
    rgba(45, 45, 54, 0.77) 53%,
    rgba(58, 70, 99, 1) 100%
  );
}

.header .xbox-icon {
  position: absolute;
  top: calc(50.00% - 74px);
  left: calc(50.00% - 52px);
  width: 103px;
  height: 103px;
  aspect-ratio: 1;
}

.header .text-wrapper-7 {
  position: absolute;
  top: calc(50.00% + 61px);
  left: calc(50.00% - 135px);
  width: 269px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.header .pc-icon {
  position: absolute;
  height: 42.27%;
  top: 18.64%;
  left: calc(50.00% - 54px);
  width: 106px;
}

.header .buy-FC-coins-safe {
  position: absolute;
  top: 85px;
  left: calc(50.00% - 559px);
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Bold", Helvetica;
  font-weight: 700;
  color: transparent;
  font-size: 64px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.header .span {
  color: #ffffff;
}

.header .text-wrapper-8 {
  color: #62d0d4;
}

.header .group-2 {
  position: absolute;
  top: 207px;
  left: 573px;
  width: 272px;
  height: 50px;
}

.header .rectangle-4 {
  top: 0;
  left: 0;
  width: 270px;
  height: 50px;
  border: 1px solid;
  border-color: #3a4663;
  position: absolute;
  border-radius: 10px;
  background: linear-gradient(
    148deg,
    rgba(49, 54, 71, 1) 0%,
    rgba(45, 45, 54, 1) 27%,
    rgba(45, 45, 54, 0.77) 53%,
    rgba(58, 70, 99, 1) 100%
  );
}

.header .text-wrapper-9 {
  position: absolute;
  top: calc(50.00% - 25px);
  left: calc(50.00% - 94px);
  width: 219px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
}

.header .ellipse {
  position: absolute;
  top: 10px;
  left: 8px;
  width: 30px;
  height: 30px;
  background-color: #d9d9d9;
  border-radius: 15px;
}

.header .group-3 {
  position: absolute;
  top: 207px;
  left: 883px;
  width: 144px;
  height: 50px;
}

.header .rectangle-5 {
  top: 0;
  left: 0;
  width: 142px;
  height: 50px;
  border: 1px solid;
  border-color: #3a4663;
  position: absolute;
  border-radius: 10px;
  background: linear-gradient(
    148deg,
    rgba(49, 54, 71, 1) 0%,
    rgba(45, 45, 54, 1) 27%,
    rgba(45, 45, 54, 0.77) 53%,
    rgba(58, 70, 99, 1) 100%
  );
}

.header .text-wrapper-10 {
  position: absolute;
  top: calc(50.00% - 25px);
  left: calc(50.00% - 27px);
  width: 86px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
}

.header .ellipse-2 {
  position: absolute;
  top: 10px;
  left: 11px;
  width: 30px;
  height: 30px;
  background-color: #d9d9d9;
  border-radius: 15px;
}

.header .group-4 {
  position: absolute;
  top: 207px;
  left: 1065px;
  width: 283px;
  height: 50px;
}

.header .rectangle-6 {
  top: 0;
  left: 0;
  width: 281px;
  height: 50px;
  border: 1px solid;
  border-color: #3a4663;
  position: absolute;
  border-radius: 10px;
  background: linear-gradient(
    148deg,
    rgba(49, 54, 71, 1) 0%,
    rgba(45, 45, 54, 1) 27%,
    rgba(45, 45, 54, 0.77) 53%,
    rgba(58, 70, 99, 1) 100%
  );
}

.header .text-wrapper-11 {
  position: absolute;
  top: calc(50.00% - 25px);
  left: calc(50.00% - 92px);
  width: 220px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
}

.header .review {
  width: 1920px;
  height: 430px;
  position: relative;
  background-color: #16141f;
}

.header .arrow-right {
  position: absolute;
  top: 356px;
  left: 1020px;
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 10px;
  border: 1px solid;
  border-color: #3a4663;
  background: linear-gradient(
    148deg,
    rgba(49, 54, 71, 1) 0%,
    rgba(45, 45, 54, 1) 27%,
    rgba(45, 45, 54, 0.77) 53%,
    rgba(58, 70, 99, 1) 100%
  );
}

.header .arrow {
  margin-top: 17.6px;
  width: 21px;
  height: 14.73px;
  margin-left: 15px;
}

.header .arrow-left {
  position: absolute;
  top: 356px;
  left: 850px;
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 10px;
  border: 1px solid;
  border-color: #3a4663;
  background: linear-gradient(
    148deg,
    rgba(49, 54, 71, 1) 0%,
    rgba(45, 45, 54, 1) 27%,
    rgba(45, 45, 54, 0.77) 53%,
    rgba(58, 70, 99, 1) 100%
  );
}

.header .img {
  margin-top: 17.6px;
  width: 21px;
  height: 14.73px;
  margin-left: 14px;
}

.header .text-wrapper-12 {
  position: absolute;
  top: 24px;
  left: calc(50.00% - 245px);
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Bold", Helvetica;
  font-weight: 700;
  font-size: 64px;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
}

.header .block {
  position: absolute;
  top: 151px;
  left: 240px;
  width: 485px;
  height: 155px;
}

.header .rectangle-7 {
  left: 0;
  width: 464px;
  height: 155px;
  background-color: #2c2c35;
  border: 1px solid;
  border-color: #3a4663;
  position: absolute;
  top: 0;
  border-radius: 10px;
}

.header .image {
  position: absolute;
  top: -31px;
  left: -31px;
  width: 218px;
  height: 218px;
  aspect-ratio: 1;
  object-fit: cover;
}

.header .text-wrapper-13 {
  position: absolute;
  top: 28px;
  left: 139px;
  width: 136px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.header .p {
  position: absolute;
  top: 69px;
  left: 139px;
  width: 342px;
  font-family: "Cruyff Sans-Light", Helvetica;
  font-weight: 300;
  font-size: 24px;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
}

.header .img-border {
  position: absolute;
  top: 31px;
  left: 24px;
  width: 92px;
  height: 92px;
  border-radius: 46px;
  border: 5px solid;
  border-color: #ffffff;
}

.header .img-url {
  position: absolute;
  top: 40px;
  left: 33px;
  width: 74px;
  height: 74px;
  background-color: #ffffff;
  border-radius: 37px;
}

.header .block-inf {
  position: absolute;
  top: 151px;
  left: 728px;
  width: 485px;
  height: 155px;
}

.header .block-2 {
  position: absolute;
  top: 151px;
  left: 1216px;
  width: 485px;
  height: 155px;
}

.header .div-2 {
  width: 1920px;
  height: 1001px;
  position: relative;
  background-color: #16141f;
}

.header .FC-UT {
  position: absolute;
  top: 33px;
  left: calc(50.00% - 457px);
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Bold", Helvetica;
  font-weight: 700;
  color: transparent;
  font-size: 64px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.header .block-3 {
  position: absolute;
  top: 160px;
  left: 240px;
  width: 1444px;
  height: 350px;
}

.header .rectangle-8 {
  width: 1440px;
  position: absolute;
  top: 0;
  left: 0;
  height: 350px;
  background-color: #2d2c36;
  border-radius: 10px;
  border: 1px solid;
  border-color: #3a4663;
}

.header .img-news {
  position: absolute;
  top: 14px;
  left: 13px;
  width: 573px;
  height: 322px;
  object-fit: cover;
}

.header .text-wrapper-14 {
  position: absolute;
  top: 45px;
  left: 610px;
  width: 798px;
  font-family: "Cruyff Sans-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 40px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.header .the-best-EA-FC {
  position: absolute;
  top: 112px;
  left: 610px;
  width: 803px;
  font-family: "Cruyff Sans-Light", Helvetica;
  font-weight: 300;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.header .text-wrapper-15 {
  font-family: "Cruyff Sans-Light", Helvetica;
  font-weight: 300;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
}

.header .block-4 {
  position: absolute;
  top: 529px;
  left: 240px;
  width: 712px;
  height: 350px;
}

.header .rectangle-9 {
  width: 708px;
  position: absolute;
  top: 0;
  left: 0;
  height: 350px;
  background-color: #2d2c36;
  border-radius: 10px;
  border: 1px solid;
  border-color: #3a4663;
}

.header .img-news-2 {
  position: absolute;
  top: 14px;
  left: 6px;
  width: 282px;
  height: 322px;
  object-fit: cover;
}

.header .text-wrapper-16 {
  position: absolute;
  top: 30px;
  left: 300px;
  width: 392px;
  font-family: "Cruyff Sans-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 40px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.header .span-wrapper {
  position: absolute;
  top: 97px;
  left: 300px;
  width: 395px;
  font-family: "Cruyff Sans-Light", Helvetica;
  font-weight: 300;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.header .block-5 {
  position: absolute;
  top: 529px;
  left: 972px;
  width: 712px;
  height: 350px;
}

.header .arrow-right-2 {
  position: absolute;
  top: 921px;
  left: 683px;
  width: 558px;
  height: 50px;
}

.header .rectangle-10 {
  top: 0;
  left: 0;
  width: 556px;
  height: 50px;
  border: 1px solid;
  border-color: #3a4663;
  position: absolute;
  border-radius: 10px;
  background: linear-gradient(
    148deg,
    rgba(49, 54, 71, 1) 0%,
    rgba(45, 45, 54, 1) 27%,
    rgba(45, 45, 54, 0.77) 53%,
    rgba(58, 70, 99, 1) 100%
  );
}

.header .text-wrapper-17 {
  position: absolute;
  top: 0;
  left: 0;
  width: 556px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Regular", Helvetica;
  font-weight: 400;
  font-size: 24px;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
}

.header .text-wrapper-18 {
  position: absolute;
  top: 70px;
  left: calc(50.00% - 315px);
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cruyff Sans-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 64px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.header .block-6 {
  position: absolute;
  top: 207px;
  left: 240px;
  width: 712px;
  height: 350px;
}

.header .text-wrapper-19 {
  position: absolute;
  top: 45px;
  left: 44px;
  width: 663px;
  font-family: "Cruyff Sans-Medium", Helvetica;
  font-weight: 500;
  font-size: 32px;
  white-space: nowrap;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
}

.header .text-wrapper-20 {
  position: absolute;
  top: 112px;
  left: 44px;
  width: 619px;
  font-family: "Cruyff Sans-Light", Helvetica;
  font-weight: 300;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.header .block-7 {
  position: absolute;
  top: 581px;
  left: 240px;
  width: 712px;
  height: 350px;
}

.header .block-8 {
  position: absolute;
  top: 207px;
  left: 972px;
  width: 712px;
  height: 350px;
}

.header .block-9 {
  position: absolute;
  top: 581px;
  left: 972px;
  width: 712px;
  height: 350px;
}
/* Original CSS code should be injected here */

/* Enhanced styles for semantic elements and accessibility */
.header nav {
  display: flex;
  align-items: center;
}

.header nav a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header nav a:hover,
.header nav a:focus {
  opacity: 0.8;
  outline: 2px solid #007fff;
  outline-offset: 2px;
}

.header .menu button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.header .menu button:hover,
.header .menu button:focus {
  opacity: 0.8;
  outline: 2px solid #007fff;
  outline-offset: 2px;
}

.header .arrow-right:hover,
.header .arrow-right:focus,
.header .arrow-left:hover,
.header .arrow-left:focus {
  opacity: 0.8;
  outline: 2px solid #007fff;
  outline-offset: 2px;
}

.header .arrow-right,
.header .arrow-left {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.header .arrow-right-2:hover,
.header .arrow-right-2:focus {
  opacity: 0.8;
  outline: 2px solid #007fff;
  outline-offset: 2px;
}

.header details summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

.header details summary::-webkit-details-marker {
  display: none;
}

.header details summary::after {
  content: "+";
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: #ffffff;
  transition: transform 0.3s ease;
}

.header details[open] summary::after {
  content: "−";
  transform: translateY(-50%) rotate(0deg);
}

.header details summary:hover,
.header details summary:focus {
  opacity: 0.8;
  outline: 2px solid #007fff;
  outline-offset: 2px;
}

.header details .text-wrapper-20 {
  padding-top: 20px;
}

/* Screen reader only content for better accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus management for keyboard navigation */
.header *:focus {
  outline: 2px solid #007fff;
  outline-offset: 2px;
}

/* Ensure interactive elements have proper cursor */
.header button,
.header a,
.header summary {
  cursor: pointer;
}

/* Improve text contrast and readability */
.header .text-wrapper,
.header .div,
.header .text-wrapper-2,
.header .text-wrapper-3,
.header .text-wrapper-4 {
  transition: opacity 0.2s ease;
}