@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

body{
    margin: 0;
    direction: ltr;
    font-family: 'Barlow Semi Condensed', sans-serif !important;   
}

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --color-main: #2b2e4a;
  --sec-color: #4C5F7A;
}

p {
  padding: 0;
  margin: 0;
}

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

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
button {
  cursor: pointer;
}
img {
  max-width: 100%;
}

.mainfeed {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 17px;
  padding-left: 17px;
}

.gamefront-banner-wrapper, .game-footer-portal {
  position: relative;
  overflow: hidden;
}

.gamefront-banner-bg, .game-footer-portal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url(mediamansion/back/bg-all-06851861258761.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: gf-banner 9s ease-out 2s infinite alternate both;
}

.game-footer-portal-bg {
  background-image: url(mediamansion/back/bg-all-168518612587c8.jpg);
  animation: none;
}
.contact-hub-form-wrapper {
  background-image: url(mediamansion/back/bg-all-168518612587c8.jpg);
}

@keyframes gf-banner {
  0% {
            transform: scale(1) translate(0, 0);
            transform-origin: 16% 16%;
  }
  100% {
            transform: scale(1.25) translate(-20px, -15px);
            transform-origin: top left;
  }
}

.gamefront-banner-gradient {
  background: linear-gradient(0deg, #00204A 5%, rgba(255,255,255,0) 110%);
}

.game-footer-portal-gr {
  background: linear-gradient(180deg, #00204A 5%, rgba(255,255,255,0) 160%);
}

.gamefront-apex-bg {
  background-color: var(--sec-color);
  color: #fff;
}

.gamefront-apex {
  flex-wrap: wrap;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 17px;
  max-width: 1310px;
  width: 100%;
  padding: 0  10px;
  margin: 0 auto;
}

.gfb-nav {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 17px;
  padding-top: 17px;
  padding-bottom: 17px;
}

.gfb-nav-item {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  position: relative;
  z-index: 0;
}

.gfb-nav-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 6px;
  bottom: -3px;
  left: 0;
  background-color: #fff;
  transform: scaleX(0);
  transition: transform .5s cubic-bezier(.15,.74,.18,.97);
  transform-origin: left;
}

.gfb-nav-item:hover::after {
  transform: scaleX(1);
}

.gfb-logo {
  width: fit-content;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(mediamansion/back/opacity_bg-06851861258a42.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--color-main);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  padding: 19px 59px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.ghf-logo-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.ghf-logo-link img {
  max-width: 104px;
  height: 77;
  object-fit: contain;
}

.ghf-logo-link h3 {
  font-size: 25px;
  font-weight: 500;
  margin: 0;
}

.gamefront-banner {
  padding-top: 200px;
  padding-bottom: 57px;
}

.gamefront-banner h2 {
  color: #fff;
  font-size: 40px;
  line-height: 1.2;
  text-transform: capitalize;
  margin: 0;
  animation: gfb-inner 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
}

@keyframes gfb-inner {
  0% {
    transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}



.dev-showcase-list {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
}

.dev-showcase-item {
  padding: 17px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-direction: row-reverse;
}

.dev-showcase-item svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.dev-showcase-item span {
  width: calc(100% - 30px);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.dev-showcase-item:hover {
  background-color: var(--color-main);
  opacity: 0.5;
  transform: scale(1.1);
  transition: all 0.2s ease-in-out;
}

.gam-primary-body {
  background-color: #00204A;
}

.ours-approach-to-working{
  padding: 57px 0;
}

.ours-approach-to-working-title, .game-hub-title, .top-picks-title, .game-showroom-title, .game-profile-play h3, .user-evaluations-title, .contact-hub-title h2, .confidentiality-rules h1  {
  display: block;
  width: fit-content;
  margin: auto;
  margin-top: 0;
  margin-bottom: 48px;
  font-size: 30px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  position: relative;
}

.ours-approach-to-working-title::before, .game-hub-title::before, .top-picks-title::before, .game-showroom-title::before, .game-profile-play h3::before, .user-evaluations-title::before, .contact-hub-title h2::before, .confidentiality-rules h1::before {
  background-color: var(--sec-color);
  content: "";
  width: 60px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: -80px;
}

.ours-approach-to-working-title::after, .game-hub-title::after, .top-picks-title::after, .game-showroom-title::after, .game-profile-play h3::after, .user-evaluations-title::after, .contact-hub-title h2::after, .confidentiality-rules h1::after {
  background-color: var(--sec-color);
  content: "";
  width: 60px;
  height: 2px;
  position: absolute;
  top: 50%;
  right: -80px;
}

.ours-approach-to-working-wrapper {
  display: flex;
  flex-direction: row-reverse;
  gap: 17px;
  justify-content: center;
  width: 100%;
}

.ours-approach-to-working-box {
  direction: ltr;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 21px 21px;
  width: 25%;
  border-radius: 24px;
  background: rgba(0,0,0,0.5); color: #fff;
}

.ours-approach-to-working-box:hover .box-icon-pic {
  background-color: var(--sec-color);
}

.ours-approach-to-working-box-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 144px;
  width: 144px;
  background-color: var(--sec-color);
  border-radius: 50%;
  margin-bottom: 10px;
  position: relative;
  transition: all 0.2s ease-in-out;
  left: 50%;
  transform: translateX(-50%);
}

.ours-approach-to-working-box:hover .ours-approach-to-working-box-icon{
  background-color: var(--color-main);
}

.ours-approach-to-working-box-icon img{
  width:57px;
  height:57px;
  transition: all 0.2s ease-in-out;
}

.ours-approach-to-working-box:hover .ours-approach-to-working-box-icon img{
  transform: rotateY(180deg);
  transition: all 0.2s ease-in-out;
}

.box-icon-pic {
  position: absolute;
  top: 0px;
  right: -25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #00204A;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--sec-color);
  transition: all 0.2s ease-in-out 0s;
}

.box-icon-pic svg {
  width: 34px;
  height: 34px;
  fill: #fff;
}

.ours-approach-to-working-content{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}


.game-hub {
  padding-top: 57px;
  padding-bottom: 57px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.game-hub-limg {
  position: absolute;
  top: 50px;
  left: 1%;
  height: 388px;
  width: auto;
  z-index: -1;
}

.game-hub-rimg {
  position: absolute;
  bottom: 100px;
  right: -1%;
  height: 380px;
  z-index: -1;
  transform: rotate(-10deg);
}

.game-hub-limg img, .game-hub-rimg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(25px 25px 27px #ffffffa2);
}

.game-hub-card {
  position: relative;
  width: 30%;
  height: 468px;
  background: #00000002;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-hub-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(315deg, #2b2e4a, #4C5F7A);
}

.game-hub-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(315deg,#2b2e4a, #4C5F7A);
  filter: blur(30px);
}

.ghc-bg {
  position: absolute;
  inset: 6px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.ghc-images {
  height:450px;
  object-fit: cover;
  width: 100%;
  position: absolute;
  z-index: 3;
  scale: 0.85;
  transition: 0.4s;
}

.game-hub-card .ghc-images {
  scale: 0.82;
  opacity: 0.8;
}

.ghc-content {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 5%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  transform: scale(0);
  transition: 0.4s;
  padding: 7px 17px;
  width: 90%;
  margin: auto;
  background: rgba(255,255,255,0.9); color: #222;
  border-radius: 10px;
}

.game-hub-card .ghc-content {
  transform: scale(1);
  bottom: 25px;
}

.game-hub-card-wrapper {
  display: flex;
}

.ghc-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.ghc-title:hover {
  text-decoration: overline underline;
  text-decoration-color: var(--color-main);
}

.ghc-txt {
  font-size: 15px;
  line-height: 1.1;
}

.game-hub-list {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30px 30px;
}

.start-playing-guide-sect {
  padding-top: 48px;
  padding-bottom: 48px;
}

.start-playing-guide-flexbox {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.start-playing-guide {
  width: 48%;
}

.deco-vid {
  width: 48%;
  height: 638px;
  display: block;
}

.deco-vid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.start-playing-title {
  padding: 30px 48px;
  margin-bottom: 21px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 48px;
  border-radius: 4px;
  background: rgba(0,0,0,0.5); color: #fff;
}

.start-playing-title h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 500;
}

.start-playing-title img {
  max-width: 48%;
  height: 240px;
  object-fit: contain;
  display: none;
}

.start-playing-list {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.start-playing-items:nth-child(1) {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
  url(mediamansion/back/gallery-06851861258889.jpg) no-repeat center/cover;
}

.start-playing-items:nth-child(2) {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
  url(mediamansion/back/gallery-168518612588e4.jpg) no-repeat center/cover;
}

.start-playing-items:nth-child(3) {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
  url(mediamansion/back/gallery-2685186125893e.jpg) no-repeat center/cover;
}

.start-playing-items:nth-child(4) {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
  url(mediamansion/back/gallery-36851861258996.jpg) no-repeat center/cover;
}

.start-playing-items {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  transition: 400ms;
}

.start-playing-items p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

.start-playing-list .start-playing-items:hover {
  transform: scale(1.1, 1.1);
}

.start-playing-list:hover > .start-playing-items:not(:hover) {
  filter: blur(10px);
  transform: scale(0.9, 0.9);
}

.info-exchange-sect {
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,0.5); color: #fff;
  z-index: 1;
  padding: 57px 0;
}

.info-exchange-shape {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50%;
  background-color: var(--color-main);
  z-index: -2;
}

.info-exchange-shapetxt {
  position: absolute;
  right: -0px;
  top: 50%;
  transform: rotate(180deg) translateY(50%);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 59px;
  font-weight: 800;
  color: #ffffffa2;
  text-transform: uppercase;
  line-height: 1;
  z-index: -1;
}

.info-exchange {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.info-exchange-faq {
  width: 40%;
  padding: 0 17px;
}

.ief-title {
  font-size: 30px;
  font-weight: 500;
  margin: 0;
  margin-bottom: 30px;
}

.ief-list {
  display: flex;
  flex-direction: column;
  gap:  7px;
}

.ief-insights {
  position: relative;
  padding: 0 0 30px 0;
  margin: 0 0 30px 0;
  border-bottom: 2px  solid #C4C4C4;
}

.ief-insights input {
  display: none;
}

.ief-insights label {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: transparent;
  border-radius: 0;
  overflow-anchor: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
  text-align: left;
  font-weight: 500;
  padding: 0 0 3px 75px;
  font-size: 20px;
  line-height: 32px;
  position: relative;
}

.ief-insights label::before {
  content: "\002B";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-55%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px  solid #D9D9D9;
  color: #fff;
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  font-size: 30px;
  border-radius: 50%;
  font-weight: 100;
  transition: all ease 0.4s;
}

.ief-insights label:hover::before {
  background-color: var(--color-main);
}

.ief-insights input[type=checkbox]:checked + label::before,
.ief-insights input[type=radio]:checked + label::before {
  content: "\2212";
  color: #fff;
  background-color: var(--color-main);
  border-color: transparent;
}

.ief-answear {
  overflow: hidden;
  transition: max-height 0.4s; 
  max-height: 0;
  margin-top:-1px;
  font-size: 15px;
  line-height: 1.2;
}

.ief-answear p {
  padding: 3px 0 0 75px;
  margin: 0;
}

.ief-insights input:checked ~ .ief-answear {
  max-height: 100vh;
}

.info-exchange-form {
  border-radius: 4px;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,0.9); color: #222;
  padding: 41px 41px 60px 50px;
}

.ie-form-title {
  font-size: 20px;
  margin: 0 0 17px 0;
  max-width: 100%;
  text-decoration: underline;
  text-decoration-color: var(--color-main);
}

.input-input--component_input, .textarea-input--component_input {
  border-radius: 4px;
  height: 40px;
  padding: 0 30px 0 21px;
  padding-right: 41px;
  border: 2px  solid #E0E0E0;
  color: #666666;
  background-color: #fff;
  border-radius: 0;
  border: 2px  solid #D9D9D9;
  font-size: 12px;
  width: 100%;
}

.input-input--component_input:focus, .textarea-input--component_input:focus {
  outline: 0;
  box-shadow: none;
  background-color: #fff;
}

.info-exchange-form label {
  margin-bottom: 7px;
  margin-top: 5px;
  display: block;
  font-size: 15px;
}

.ie-form-chekker {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  color: inherit;
}

.ie-form-chekker label {
  margin: 0;
  font-size: 15px;
}

.ie-form-chekker input {
  width: 20px;
  height: 20px;
}

.ie-form-btn {
  display: flex;
  justify-content: center;
}

.gfp-container {
  display: flex;
  flex-direction:row-reverse;
  gap: 30px;
  align-items: center;
  padding-top: 57px;
  padding-bottom: 30px;
}

.gpf-flexcol {
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.gpf-flexcol:nth-child(1) {
  width: 30%;
}

.gpf-flexcol:nth-child(2) {
  width: 65%;
}

.gfp-discl {
  padding: 21px  29px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  background-color: var(--sec-color); 
  border-radius: 4px;
  animation: glow 3s infinite ease-in-out;
}

@keyframes glow {
  0% {
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 
                  0 0 20px rgba(255, 255, 255, 0.5),
                  0 0 30px rgba(255, 255, 255, 0.5), 
                  0 0 40px #2b2e4aa2,
                  0 0 70px #2b2e4aa2,
                  0 0 80px #2b2e4aa2,
                  0 0 100px #2b2e4aa2;
  }
  50% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 
                  0 0 30px rgba(255, 255, 255, 0.8),
                  0 0 40px rgba(255, 255, 255, 0.8), 
                  0 0 50px #2b2e4a,
                  0 0 80px #2b2e4a,
                  0 0 100px #2b2e4a,
                  0 0 120px #2b2e4a;
  }
  100% {
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 
                  0 0 20px rgba(255, 255, 255, 0.5),
                  0 0 30px rgba(255, 255, 255, 0.5), 
                  0 0 40px #2b2e4aa2,
                  0 0 70px #2b2e4aa2,
                  0 0 80px #2b2e4aa2,
                  0 0 100px #2b2e4aa2;
  }
}

.gfp-discl h4 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  margin-bottom: 17px;
  text-align: center;
  text-transform: uppercase;
}

.gpf-galllery {
  display: none;
}

.gpf-logo {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.gpf-logo img {
  width: 40px;
  height: 40px;
}

.gpf-logo h3 {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.copir-txt {
  color: #fff;
  font-size: 18px;
}

.gfp-discl-img {
  width: 104px;
  height: 104px;
}

.gfp-nav {
  margin-top: 34px;
  display: flex;
  color: #fff;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  justify-content: space-around;
  flex-wrap: wrap;
  position: relative;
}

.gfp-nav::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  background-color: #fff;
  top: 21px;
  transform: translateY(-50%);
}

.gfp-nav a {
  font-size: 15px;
  font-weight: 500;
}

.gfp-nav a:hover {
  color: var(--color-main);
}

.top-picks-about{
  animation: about-bg-ani 9s linear infinite alternate both;  
}

@keyframes about-bg-ani {
  0% {
    background: var(--color-main);
  }
  100% {
    background: #00204A;
  }
}

.top-picks-about-bgimg {
  background-image: url(mediamansion/back/opacity_bg-06851861258a42.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 57px 0;
}

.top-picks-about-wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: 48px;
  width: 100%;
}

.top-picks-about-image {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  width: 50%;
}

.top-picks-picture {
 width: 468px;
 height: 468px;
}

.top-picks-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.top-picks-picture-wrapper {
  position: relative;
  width: 100%;
}

.top-picks-picture-wrapper .top-picks-picture {
  position: absolute;
  width: 240px;
  height: 240px;
}

.top-picks-picture-wrapper .top-picks-picture:nth-child(1) {
  top: -300px;
  right: -20px;
  background: radial-gradient(circle, rgb(0, 0, 0) 45%, rgba(9,9,121,0) 70%);
}

.top-picks-picture-wrapper .top-picks-picture:nth-child(2) {
  top: -180px;
  right: 90px;
  background: radial-gradient(circle, rgb(0, 0, 0) 45%, rgba(9,9,121,0) 70%);
}

.top-picks-about-content {
  width: 48%;
}

.top-picks-text {
  font-size: 18px;
  line-height: 1.2;
  text-align: justify;
  color: #fff;
}
 
.game-showroom-bg {
  padding: 57px 0;
  background-color: #00204A;
}

.game-showroom-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 22px;
}

.game-showroom-card {
  width: 100%;
  border-radius: 4px;
  padding: 16px 32px 16px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.game-showroom-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-image: linear-gradient(to bottom, var(--color-main), var(--sec-color));
  border-radius: 8px 0 0 8px;
  transition: width 0.2s ease;
}

.game-showroom-card:hover::before {
  width: 10px;
}

.game-showroom-card:hover {
  border-left-width: 10px;
}

.game-showroom-card:hover .gshc-gradient {
  opacity: 0.04;
}

.gshc-wrapper {
  display: flex;
  flex-direction: row;
  gap: 22px;
  justify-content: center;
  align-items: center;
}

.gshc-content {
  width: 65%;
  display: flex;
  flex-direction: column;
}

.gshc-title {
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 17px;
}

.gshc-txt {
  font-size: 18px;
  color: #ffffff;
  opacity: 0.8;
  line-height:1.2;
  font-weight: 100;
  margin-bottom: 10px;
}

.gshc-title,
.gshc-txt {
  transition: transform 0.2s ease;
}

.game-showroom-card:hover .gshc-title,
.game-showroom-card:hover .gshc-txt {
  transform: translateX(20px);
}

.gshc-btn {
  display: flex;
  justify-content: center;
}

.gshc-info {
  position: absolute;
  bottom: 16px;
  left: 92px;
  display: flex;
  align-items: center;
  gap: 22px;
  opacity: 0;
  color: #5d5d5d;
  transition: left 0.2s ease, opacity 0.2s ease;
}

.gshc-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}

.gshc-info-item svg {
  width: 34px;
  height: 34px;
  fill: #5d5d5d;
}

.game-showroom-card:hover .gshc-info {
  left: 52px;
  opacity: 0.7;
}

.gshc-img {
  width: 33%;
  height: 380px;
}

.gshc-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.game-profile-bg {
  background-color: #00204A;
}

.game-profile-cont {
  padding-top: 30px;
  padding-bottom: 48px;
  display: flex;
  flex-direction: column-reverse;
}

.game-profile-info {
  padding: 48px 29px;
  border-radius: 4px;
  background: rgba(0,0,0,0.5); color: #fff;
}

.gpi-img {
  width: 50%;
  height: 388px;
  object-fit: contain;
  margin: 0 17px 17px 17px;
  float: right;
}

.gpi-subtitle {
  text-align: right;
  display: inline-block;
  width: fit-content;
  height: fit-content;
  background-color: var(--color-main);
  padding: 7px 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  margin-bottom: 30px;
  transform: skewX(-15deg);
}

.gpi-title {
  text-align: right;
  margin: 0 0 30px;
  font-size:  34px;
  font-weight: 500;
  text-transform:  uppercase;
}

.gpi-dev {
  text-align: right;
  padding: 10px;
  border-top: 2px solid #5d5d5d;
  border-bottom: 2px solid #5d5d5d;
  margin-bottom: 30px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #5d5d5d;
  font-size: 18px;
  font-weight: 500;
}

.gpi-dev svg {
  width: 22px;
  height: 22px;
}

.gpi-txt {
  font-size: 15px;
  line-height: 1.2;
}

.game-profile-play {
  padding: 48px 0;
}

.game-profile-play iframe {
  height: 468px;
}

.user-evaluations{
  padding: 30px 0 57px;
}

.user-evaluations-wrapper{
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.user-evaluations-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 48%;
}

.user-evaluations-list-image{
  width: 40%;
  height: 240px;
  overflow: hidden;
}

.user-evaluations-list-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.user-evaluations-list-content {
  width: 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.user-evaluations-raiting{
  display: flex;
  align-items: center;
  color: #fff;
  margin-bottom: 17px;
  gap: 5px;
}
.user-evaluations-raiting svg{
  width: 20px;
  height: 20px;
  fill: #fff;
  stroke: #fff;
}

.user-evaluations-text{
  font-size: 15px;
  line-height: 163.636364%;
  margin-bottom: 17px;
  color: #fff;
}

.user-evaluations-name{
  color: #fff;
  font-size: 18px;
}

.user-evaluations-quote{
  position: absolute;
  top: 170px;
  right: 30px;
}

.user-evaluations-quote svg{
  width: 40px;
  height: 40px;
  fill: #5d5d5d;
}

.contact-hub-title-bg {
  background: var(--color-main);
  padding: 29px 0;
}

.contact-hub-title h2 {
  margin: 0 auto;
}

.contact-hub-bg {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.9); color: #222;
}

.contact-hub-opimg {
  background-image: url(mediamansion/back/opacity_bg-06851861258a42.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 0;
}

.contact-hub-page {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  direction: ltr !important;
  padding-top: 48px;
  padding-bottom: 48px;
}

.contact-hub-wrapper {
  width: 38%;
}

.contact-hub-bgimg {
  overflow: hidden;
  background-image: url(bg/1_bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.contact-hub-bgoverlay  {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #180707ba;
}

.contact-hub-list {
  padding: 21px 45px 30px 45px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-hub-item {
  color: #fff;
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  align-items: center;
  border-bottom: 2px  solid #5d5d5d;
  padding: 0 0 7px;
  justify-content: space-between;
}

.contact-hub-item svg {
  width: 34px;
  height: 34px;
  fill: #fff;
}

.contact-hub-item div {
  word-break: break-all;
  width: calc(100% - 40px);
}

.contact-hub-item h4 {
  margin: 0;
  margin-bottom: 10px;
}
.contact-hub-item a {
  word-break: break-all;
}
.contact-hub-form-wrapper {
  padding: 48px 57px 80px 100px;
  width: 60%;
}

.contact-hub-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.chf-input-wrapper {
  position: relative;
}

.chf-input {
  display: block;
  width: 100%;
  padding: 10px;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  background-color: transparent;
}

.chf-input-hi {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #4C5F7A;
  transition: all 0.2s ease;
}

.chf-input:focus + .chf-input-hi {
  width: 100%;
}

.confidentiality-rules-bg {
  padding: 57px 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
  background-color: #00204A;
}

.contact-hub-bgimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}





.button-1 {
  transform-style: preserve-3d;
  padding: 10px 20px;
  background-color: #c1c1c1;
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transform: rotateX(20deg);
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
  font-weight: bolder;
}
.button-1:hover {
  color: white;
  z-index: 1s;
}

.button-1::before {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: lightcoral;
  top: 0;
  left: -40px;
  z-index: -1;
  transform: skewX(45deg);
  border-radius: 4px;
  transition: all 1s;
}

.button-1::after {
  content: "";
  position: absolute;
  width: 10%;
  filter: blur(7px);
  height: 100%;
  background-color: white;
  top: 0;
  left: -10px;
  transition: all 0.9s linear;
  transform: skewX(45deg);
}

.button-1:hover::after {
  transform: translateX(305px);
}

.button-1:hover::before {
  width: 200%;
}

.button-2 {
  min-width: 120px;
  position: relative;
  cursor: pointer;
  padding: 12px 17px;
  border: 0;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: radial-gradient(
    ellipse at bottom,
    rgba(71, 81, 92, 1) 0%,
    rgba(11, 21, 30, 1) 45%
  );

  color: rgb(255, 255, 255, 0.66);

  transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.button-2::before {
  content: "";
  width: 70%;
  height: 1px;

  position: absolute;
  bottom: 0;
  left: 15%;

  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0.2;

  transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.button-2:hover {
  color: rgb(255, 255, 255, 1);
  transform: scale(1.1) translateY(-3px);
}

.button-2:hover::before {
  opacity: 1;
}


.button-3 {
  background: #151b39;
  color: cyan;
  border: 2px solid cyan;
  padding: 10px;
  font-size: 13px;
  border-radius: 0.5em;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.button-3:hover {
  border-color: magenta;
  color: white;
  box-shadow: 0 0.6em 0.6em -0.3em magenta;
  transform: translateY(-0.3em);
}

.button-4 {
  font-size: 15px;
  padding: 10px;
  letter-spacing: 0.06em;
  position: relative;
  font-family: inherit;
  border-radius: 0.6em;
  overflow: hidden;
  transition: all 0.2s;
  line-height: 1.4em;
  border: 2px solid var(--color-main);
  color: #000;
  box-shadow:
    inset 0 0 10px rgba(243, 78, 22, 0.4),
    0 0 9px 3px rgba(243, 78, 22, 0.1);
}

.button-4:hover {
  color: #000;
  box-shadow:
    inset 0 0 10px rgba(243, 78, 22, 0.6),
    0 0 9px 3px rgba(243, 78, 22, 0.2);
}

.button-4:before {
  content: "";
  position: absolute;
  left: -4em;
  width: 4em;
  height: 100%;
  top: 0;
  transition: transform 0.4s ease-in-out;
  background: linear-gradient(
    to right,
    transparent 1%,
    rgba(243, 78, 22, 0.1) 40%,
    rgba(243, 78, 22, 0.1) 60%,
    transparent 100%
  );
}

.button-4:hover:before {
  transform: translateX(400px);
}

.button-5 {
  padding: 12px 25px;
  border: 0;
  border-radius: 100px;
  background-color: #2ba8fb;
  color: #ffffff;
  font-weight: 800;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
}

.button-5:hover {
  background-color: #6fc5ff;
  box-shadow: 0 0 20px #6fc5ff50;
  transform: scale(1.1);
}

.button-5:active {
  background-color: #3d94cf;
  transition: all 0.25s;
  -webkit-transition: all 0.25s;
  box-shadow: none;
  transform: scale(0.98);
}




@media (max-width: 1200px) {

  .container {
    max-width: 1140px;
  }

}

@media (max-width: 992px) {

  .container {
    max-width: 960px;
  }

  .gfb-nav-item {
    font-size: 13px;
    text-transform: inherit;
    font-weight: 400;
  }

  .gamefront-banner h2 {
    font-size: 24px;
  }

  .ours-approach-to-working-wrapper {
    flex-wrap: wrap;
  }

  .ours-approach-to-working-box {
    width: 48%;
  }

  .game-hub-card {
    justify-content: space-between !important;
    height: 420px !important;
  }

  .start-playing-list {
    flex-direction: column !important;
  }

  .game-hub-card {
    overflow: hidden;
  }

  .game-showroom-list {
    flex-direction: column !important;
  }
  
  .gpi-img {
    width: 100%;
    margin: 0 0 25px 0;
  }

  .user-evaluations-list {
    flex-direction: row;
  }

  .user-evaluations-quote {
    display: none;
  }

  .contact-hub-list {
    padding: 0;
  }

  .top-picks-about-wrapper {
    overflow: hidden;
  }

  .top-picks-picture {
    width: 380px;
    height: 380px;
}

.top-picks-picture-wrapper .top-picks-picture {
  position: absolute;
  width: 150px;
  height: 150px;
}

.top-picks-picture-wrapper .top-picks-picture:nth-child(1) {
  top: -265px;
  right: 0px;
}

}

@media(max-width: 767px)  {
  .chf-input {
    color: #fff;
  }
  .gpf-flexcol {
    align-items: center;
    text-align: center;
  }

  .container {
    max-width: 720px;
  }

  .gfb-logo {
    top: 55px;
    width: 100%;
  }

  .dev-showcase-list {
    flex-wrap: wrap;
  }

  .game-hub-card {
    width: 500px !important;
  }

  .start-playing-guide-flexbox {
    flex-direction: column;
  }

  .start-playing-guide, .deco-vid {
    width: 100%;
  }

  .info-exchange {
    flex-direction: column;
  }

  .info-exchange-faq, .info-exchange-form {
    width: 100%;
  }

  .ief-answear {
    background-color: #000000a2;
    color: #fff;
  }

  .ief-answear p {
    padding: 17px;
  }

  .gfp-container {
    flex-direction: column;
  }

  .gpf-flexcol {
    width: 100% !important;
  }

  .top-picks-about-wrapper {
    flex-direction: column-reverse;
  }

  .top-picks-about-content, .top-picks-about-image {
    width: 100%;
  }

  .top-picks-picture {
    width: 333px;
    height: 333px;
  }

  .top-picks-picture-wrapper .top-picks-picture:nth-child(1) {
    display: none
  }

  .top-picks-about-image {
    overflow: hidden;
  }

  .top-picks-picture-wrapper .top-picks-picture:nth-child(2) {
display: none;
  }

  .game-profile-play iframe {
    height: 400px;
  }

  .user-evaluations-wrapper {
    flex-direction: column;
  }

  .user-evaluations-list {
    width: 100%;
  }

  .contact-hub-page {
    flex-direction: column-reverse;
    gap: 25px;
  }

  .contact-hub-wrapper, .contact-hub-form-wrapper {
    width: 100%;
  }

  .contact-hub-bgimg {
    width: 100%;
  }

  .chf-chekker label {
    color: #fff;
  }

  .contact-hub-form-wrapper {
    padding: 17px;
  }
  
}

@media(max-width: 576px) {
  .gpi-img {
    height: auto;
  }

 .container {
    max-width: 540px;
}

.gamefront-apex {
  gap: 0;
}

.gfb-nav {
  gap: 5px;
}

.ours-approach-to-working-title::before, .game-hub-title::before, .top-picks-title::before, .game-showroom-title::before, .game-profile-play h3::before, .user-evaluations-title::before, .contact-hub-title h2::before, .confidentiality-rules h1::before {
  width: 0;
}

.ours-approach-to-working-title::after, .game-hub-title::after, .top-picks-title::after, .game-showroom-title::after, .game-profile-play h3::after, .user-evaluations-title::after, .contact-hub-title h2::after, .confidentiality-rules h1::after {
  width: 0;
}

.ours-approach-to-working-title, .game-hub-title, .top-picks-title, .game-showroom-title, .game-profile-play h3, .user-evaluations-title, .contact-hub-title h2, .confidentiality-rules h1 {
  font-size: 24px;
}

.ours-approach-to-working-box {
  width: 100%;
}


.deco-vid {
  height: 380px;
}

.info-exchange-shapetxt {
  font-size: 40px;
}

.info-exchange-form {
  padding: 20px
}

.ie-form-chekker label {
  font-size: 12px;
}

.gfp-nav::before {
  width: 0;
}

.gfp-nav {
  flex-direction: column;
}

.gshc-info {
  position: static;
  gap: 10px;
  flex-direction: column;
  opacity: 1;
}

.gshc-info-item svg {
  width: 20px;
  height: 20px;
}

.gshc-txt {
  font-size: 13px;
}

.gshc-content {
  gap: 5px;
  width: 100%;
}

.gshc-img {
  height: auto;
  width: 100%;
}

.gshc-wrapper {
  flex-direction: column;
}

.gpi-title {
  font-size: 20px;
}

.ghf-logo-link h3 {
  text-align: center;
}
.gamefront-apex {
  flex-direction: column;
  align-items: center;
}
.gfb-logo {
  top: 100px;
  width: 100%;
}
}

.rcp-block ul {
  margin:0 20px;
  list-style: square;
}