style.css

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700;800&display=swap");
* {
  font-family: "Work Sans";
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

nav {
  display: flex;
  align-items: center; /* Vertically center items in the nav */
  margin: 90px 200px;
  background-color: #fff; /* Optional background color for the navigation bar */
}

.gamer-title {
  text-align: center;
  font-size: 45px;
  font-weight: 700;
  display: flex; /* Add flex properties for alignment */
  align-items: center; /* Vertically center the content */
}

.g {
  color: #ff42a5;
  padding-left: 15px;
}

.contact-us {
  color: #3c354f;
  font-size: 18px;
  font-weight: 500;
  display: flex; /* Add flex properties for alignment */
  align-items: center; /* Vertically center the content */
}

button {
  font-size: 18px;
  border-radius: 8px;
  background: rgba(11, 2, 35, 0.1);
  border-style: none;
  font-weight: 500;
  padding: 10px 25px;
  display: flex; /* Add flex properties for alignment */
  align-items: center; /* Vertically center the content */
}
.about-us {
  margin-left: 800px;
}
.devlopers {
  margin-left: 10px;
  margin-right: 10px;
}
button img {
  margin-left: 10px;
}

/* main section starts form here */
.main-container-text {
  position: relative;
  width: 50%;
}
.main-container-text > img {
  height: 100%;
  width: 100%;
}
.overlay-text {
  position: absolute;
  top: 30%;
  left: 20%;
}
.main-container {
  max-width: 2000px;
  min-height: 50px;
  display: flex;
}
.main-container-img {
  width: 50%;
}
.main-container-img > img {
  width: 100%;
  height: 100%;
}
.features-text {
  padding-left: 10px;
}
.social-icons {
  display: flex;
  flex-direction: column;
  color: #534c64;

  font-size: 14px;

  font-weight: 500;
}
.fa-solid {
  margin-top: 10px;
}
.overlay-text h1 {
  color: #0b0223;
  font-size: 49px;

  font-weight: 600;

  text-transform: uppercase;
}
.overlay-text p {
  background: linear-gradient(180deg, #f948b2 0%, #8758f1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-size: 95px;

  font-weight: 800;

  text-transform: uppercase;
}
.btn {
  padding-top: 25px;
  display: flex;
  gap: 20px;
}
.pink-btn {
  color: #fff;
  border-radius: 48px;
  background: var(
    --Linear,
    linear-gradient(90deg, #ff42a5 13.13%, #ff42a5 87.94%)
  );
}
.blue-btn {
  color: white;
  border-radius: 48px;
  background: #4ec5f7;
}
/* secondry-main-container starts from here */
.secondry-main-container {
  background: linear-gradient(
    90deg,
    rgba(255, 66, 165, 0.03) 13.13%,
    rgba(255, 66, 165, 0.03) 87.94%
  );
  display: flex;

  width: 1850px;
}

.secondry-main-container > img {
  width: 45%;
}
.toys-text {
  width: 50%;
  text-align: right;
  padding-right: 40px;
  padding-top: 50px;
  padding-bottom: 90px;
}
.we-are-gamer {
  background: linear-gradient(180deg, #f948b2 0%, #8758f1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 20px;
}
.we-are-gamer-dis {
  color: #534c64;
  text-align: right;

  font-size: 18px;

  font-weight: 400;
}
.we-are-gamer-0 {
  color: #534c64;

  font-size: 24px;

  font-weight: 500;
}
.we-are-gamer-0 > p {
  color: #534c64;

  font-size: 32px;

  font-weight: 700;
}
.know-more-pink {
  border-radius: 48px;
  background: var(
    --Linear,
    linear-gradient(90deg, #ff42a5 13.13%, #ff42a5 87.94%)
  );
  color: white;
}
.that-button-alignment {
  display: flex;
  justify-content: right;
  padding: 40px 0px;
}
/*mid-section*/
.mid-mother-section {
  padding-top: 40px;
}
.funny-videos {
  color: #0b0223;

  font-size: 48px;

  font-weight: 700;
}
.funny-videos-2 {
  background: linear-gradient(180deg, #f948b2 0%, #8758f1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Work Sans;
  font-size: 48px;

  font-weight: 700;
}
.we-are-gamer-dis-0 {
  color: #534c64;
  padding-top: 17px;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}
.mid-section > h2,
p {
  text-align: center;
}
.mid-image-container {
  display: grid;
  grid-template-columns: repeat(4, 0.25fr);
  margin-left: 100px;
  padding-top: 30px;
  color: #534c64;

  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}
.mid-image > p {
  text-align: center;
}
.mid-image {
  width: 78%;
}
.mid-mother-section {
  text-align: center;
}
.mid-image {
  position: relative;
}
.watch-now-play {
  position: absolute;
  top: 40%;
  left: 35%;
}
.watch-now-play > p {
  background: var(
    --Linear,
    linear-gradient(90deg, #ff42a5 13.13%, #ff42a5 87.94%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mid-image-gradient {
  position: relative;
}
.mid-image-gradient > img {
  display: block;
}
.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 0 px solid var(--Linear, #ff42a5);

  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}
/*lower-mid-section*/
.semi-emerge {
  position: relative;
}
.second-image > img {
  width: 30%;
  position: absolute;
  top: 60%;
  left: -10%;
}
.first-image > img {
  width: 60%;
}

.lower-mid-section {
  display: flex;

  justify-content: space-evenly;
}
.lower-mid-dp > h1 {
  background: linear-gradient(180deg, #f948b2 0%, #8758f1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: right;
}
.now-downloads {
  color: #0b0223;
  font-family: Work Sans;
  font-size: 48px;
  text-align: right;
  font-weight: 700;
  line-height: 60px;
}

.lower-mid-dp > p {
  color: #534c64;
  margin-left: 37%;
  font-size: 18px;
  text-align: end;
  font-weight: 400;
}

.final-mid-section {
  display: flex;
  margin-top: 7%;
  background: linear-gradient(90deg, #ff42a5 13.13%, #ff42a5 87.94%);

  padding-left: 60px;
}
.final-mid-section-text > h1 {
  padding-top: 60px;
  padding-left: 13px;
  color: #fff;
  font-family: Work Sans;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
  padding-bottom: 20px;
}
.final-mid-section-text > p {
  color: #fff;
  font-family: Work Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 166.667% */
}
.two-multi-section {
  display: flex;
  padding-top: 40px;

  padding-bottom: 40px;
}
.multi-section-1 > p {
  text-align: left;
  color: #fff;
  font-family: Work Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px; /* 200% */
  width: 50%;
}
.multi-section-2 > p {
  color: #fff;
  text-align: right;
  font-family: Work Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px; /* 200% */
  width: 50%;
}
.all-position-buttons > button {
  border-radius: 48px;
  background: #fff;
}
.all-position-buttons-text {
  background: var(
    --Linear,
    linear-gradient(90deg, #ff42a5 13.13%, #ff42a5 87.94%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.final-mid-section-text > p {
  width: 680px;
}
.final-mid-section-img {
  width: 100%;
}
/* game-list-option */
.game-list {
  background: linear-gradient(
    90deg,
    rgba(255, 66, 165, 0.03) 13.13%,
    rgba(255, 66, 165, 0.03) 87.94%
  );
  width: 100%;
  height: auto;
}
.game-list-options {
  padding-top: 30px;
  padding-bottom: 40px;

  display: flex;
  flex-wrap: wrap;
  width: 50%;
  margin-left: 30%;
  gap: 30px;
}
.game-list-options > button {
  border-radius: 50px;
  border: 1.5px solid var(--Linear, #ff42a5);
  background: #fff;
}
.game-list-options > button > span {
  background: var(
    --Linear,
    linear-gradient(90deg, #ff42a5 13.13%, #ff42a5 87.94%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/*footer-section*/
.footer-section {
  background: #0b0223;
  text-align: center;
}
.gamer-pic-text {
  display: flex;
  margin-left: 45%;
  align-items: center;
  width: 16%;
  padding-top: 40px;
}

.top-g {
  background: linear-gradient(90deg, #ff42a5 13.13%, #ff42a5 87.94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-size: 45px;

  font-weight: 700;
}
.white-text {
  color: white;
  font-family: Work Sans;
  font-size: 45px;

  font-weight: 700;
}
.six-bullets-points {
  display: grid;
  grid-template-columns: repeat(6, 0.12fr);
  width: 50%;
  margin-left: 32%;

  padding: 10px;

  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding-top: 30px;
}
.six-image-points {
  display: flex;
  gap: 30px;
  margin-left: 42.5%;
  padding-top: 30px;
}
.outro-text {
  display: grid;
  color: rgba(255, 255, 255, 0.6);
  gap: 35px;
  text-align: center;
  font-family: Work Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-top: 30px;
}
.disclaimer {
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-family: Work Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-top: 30px;
  padding-bottom: 30px;
}