/* Common CSS Start */
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  color: #fff;
}

body {
  font-family: "Oswald";
}

a {
  text-decoration: none;
  display: inline-block;
}

ul,
ol {
  list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  line-height: 0.8;
}

.container {
  width: 1320px;
  margin: 0 auto;
}

:root {
  --gradient-sun-horizon: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
}
/* Common CSS End */

/* Header Part Start */
#headerPart {
  margin-top: 25px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.navbar {
  display: flex;
  align-items: center;
}

.logo {
  width: 15%;
}

.menu {
  width: 70%;
}

.menu ul {
  display: flex;
  column-gap: 35px;
}

.menu ul li a {
  font-size: 16px;
  font-weight: normal;
  color: #ddd;
  transition: all 1s;
}

.menu ul li a:hover {
  background: #00c6ff;
  background: var(--gradient-sun-horizon);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icons {
  width: 15%;
  display: flex;
  align-items: center;
  column-gap: 30px;
}

.signIn {
  display: flex;
  column-gap: 7px;
  align-items: baseline;
}

.signIn img {
  width: auto;
  height: auto;
}
/* Header Part End */

/* Banner Part Start */
#bannerPart {
  padding-top: 345px;
  padding-bottom: 100px;
  background: url(../images/banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.bannerContent h4 {
  font-size: 27px;
  font-weight: 400;
}

.bannerContent h1 {
  font-size: 60px;
  font-weight: 600;
  padding-top: 30px;
  padding-bottom: 140px;
  position: relative;
  transition: all 1.5s;
}

.bannerContent h1:hover {
  background: #f12711;
  background: var(--gradient-sun-horizon);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bannerContent h1::before {
  position: absolute;
  background: #fff;
  content: "";
  left: 520px;
  top: 76px;
  height: 4px;
  width: 90px;
}

.bannerContent a {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  padding: 10px 15px;
  background-color: #fff;
}

.bannerContent a i {
  color: #000;
}

.bannerIcons {
  margin-top: 307px;
  margin-bottom: 103px;
  display: flex;
  align-items: center;
  column-gap: 5px;
}

.bannerIcons i {
  font-size: 35px;
}
/* Banner Part End */

/* About Part Start */
#aboutPart {
  padding-top: 35px;
  padding-bottom: 81px;
  background: #121212;
}

.aboutFlex {
  display: flex;
}

.aboutLeft {
  width: 60%;
}

.aboutLeft h3 {
  width: 518px;
  height: 118px;
  line-height: 56px;
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 57px;
  position: relative;
}

/* .aboutLeft h3::before {
position: absolute;
background: #ff4655;
content: "";
right: 963px;
top: -931px;
width: 163px;
height: 7px;
} */
.aboutLeft h3::before {
  position: absolute;
  background: #ff4655;
  content: "";
  top: 90px;
  left: 220px;
  width: 163px;
  height: 7px;
}

.aboutLeft h3:hover::before {
  background-color: #121212;
}

.aboutLeft picture {
  position: relative;
}

.aboutLeft picture::before {
  position: absolute;
  background: #ff4655;
  content: "";
  left: -0.6px;
  bottom: 405px;
  width: 163px;
  height: 7px;
}

.aboutLeft picture::after {
  position: absolute;
  background: #ff4655;
  content: "";
  left: -87.6px;
  top: -308px;
  width: 167px;
  height: 7px;
  transform: rotate(-90deg);
}

.aboutRight {
  width: 40%;
  padding-top: 200px;
}

.aboutRight h3 {
  font-size: 27px;
  font-weight: 600;
  padding-bottom: 23px;
}

.aboutRight ul li {
  padding-bottom: 10px;
  font-size: 18px;
  font-family: "Barlow Condensed";
  font-weight: 400;
  margin-left: -11px;
}

.aboutRight ul li img {
  margin-right: 10px;
}

.aboutRight a {
  font-size: 16px;
  font-weight: 400;
  margin-top: 30px;
  padding: 20px 25px;
  background: #212121;
}

.aboutRight img {
  position: relative;
  margin-left: 12px;
  top: 1px;
  transition: transform 0.3s;
}

.aboutRight a:hover img {
  transform: translateX(13px);
  /* transform: rotate(360deg); */
}

.aboutRight p {
  font-size: 18px;
  font-family: "Oswald";
  letter-spacing: 0;
  line-height: 27px;
}

.counterUpFlex {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  column-gap: 20px;
}

.counterItem {
  width: 25%;
  padding: 25px 90px 27px 100px;
  background: #212121;
  border-radius: 0 50px 0 50px;
  text-align: center;
}

.counterItem h3 {
  font-size: 60px;
  font-weight: 600;
  line-height: 72px;
  font-family: "Barlow Condensed" !important;
}

.counterItem h4 {
  font-size: 18px;
  font-weight: 300;
  /* letter-spacing: 2%; */
  margin-top: 18px;
}

.counterItem h3 i {
  width: 12px;
  height: 12px;
  font-size: 12px;
  margin-left: 8px;
  color: #ff4655;
}
/* About Part End */

/* Games Part Start */
#gamesPart {
  padding-top: 115px;
  padding-bottom: 90px;
  background: #191919;
}

.gamesFlex {
  display: flex;
}

.gamesLeft {
  width: 50%;
}

.gamesRight {
  width: 50%;
}

.gamesRight h3 {
  width: 454px;
  height: 100px;
  margin-left: auto;
  text-align: right;
  font-size: 38px;
  font-weight: 600;
  font-family: "Barlow Condensed" !important;
  line-height: 46px;
}

.gamesRight h3::before {
	position: absolute;
	background: #ff4655;
	content: "";
	left: 1203px;
	bottom: -1538px;
	height: 3px;
	width: 105px;
}
/* Games Part End */

/* Header Part Start */
/* Header Part End */

/* Header Part Start */
/* Header Part End */

/* Header Part Start */
/* Header Part End */