@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

body{
    direction: ltr;
    font-family: 'Exo', sans-serif !important;
    line-height: 1.4;
    margin: 0px;
    padding: 0px;  
    box-sizing: border-box;
    overflow-x: hidden;
}

:root{
  --bs-white: #fff;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-light-or: #E98074;
  --bs-yellow: #ffc107;
  --bs-gray-900: #212529;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-gray-light: #adb5bd;
  --bs-gray: #6c757d;
  --bs-viol-bl: #2A1B3D;
  --backgr-viol: rgba(68, 49, 141, 0.8);
  --bs-logo-text: #582c8f;

  --bcg-color-1: rgba(68, 49, 141, 0.8);
  --bcg-color-2: #5abc21d3;
  --bcg-color-3:  #660b5bc6;

  --text-color-1: #d63384;
  --text-color-2:  #de7504;
  --text-color-3: #04ded0;


  --text-content-1: #fd7e14;
  --text-content-2: #d63384;
  --text-content-3: #fffbf7;
}

a {
white-space: normal;
text-decoration: none;
word-break: break-all;
}
ul {
padding-left: 0;
padding-right: 0;
}
li {
margin: 0 20px;
}
.container__padd{
padding: 77px 5px;
}
.container__marg{
padding: 0;
margin: 0 auto;
}
.custom-cursor {
  width: 26px;
  height: 26px;
  border: 1px solid var(--text-color-1);
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 100;
}

.wrapper__priv {
  word-break: break-all;
}
.wrapper__top-nav {
  background-color: var(--white-color);
  padding: 10px 0;
}
.menu-head-nav{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.wrap__logo-top{
display: flex;
flex-direction: row;
align-items: center;
}
.wrap__logo-top img{
  width: 65px;
  margin: 12px;
}
.wrap__logo-top h1{
  color: var(--bs-logo-text);
  font-size: 22px;
}
.wrap__list-head {
margin: 20px 0;
}
.wrap__list-head a{
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 14px;
  color: var(--bs-gray-900);
}
.wrap__list-head a:hover{
  color: var(--bs-orange);
}
.wrap__list-head a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px; 
  width: 0;
  height: 2px; 
  background-color: var(--bs-orange);
  transition: width 0.2s ease; 
}

.wrap__list-head a:hover::after {
  width: 100%; 
}

.wrapper__header {
  position: relative;
  background-image: url('creativecove/back/bg-all-06870013b53e53.jpg'); 
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat; 
  padding: 20px;
  
}

.wrapper__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bcg-color-1);
  z-index: 0; 
}
.header__container{
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 1;
}
.header__cont{
  flex: 1;
  margin: 25px;
  text-align: center;
}
.header__cont h3{
  text-transform: uppercase;
  color: var(--bs-white);
  font-size:  30px;
  text-align: left;
}
.header__img{
  flex: 1;
  margin: 0 15px;
}
.header__img img{
  width: 100%;
  height: 412px;
  object-fit: contain;
}
.game__container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.game__card {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  max-width: 350px;
  margin: 20px 0;
  overflow: hidden;
}

.gamess__img-content {
  margin-right: 20px;
}
.game__card a{
  display: flex;
  flex-direction: row;
}
.gamess__img-content img{
width: 140px;
height: 100%;
object-fit: cover;
border: 5px solid transparent;
border-image: linear-gradient(to bottom, var(--bs-purple), var(--text-color-1));
border-image-slice: 1;
}


.game__info-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 15px;
}
.game__info-title{
  text-transform: capitalize;
  font-weight: 20px;
  font-weight: 800;
  color: var(--bs-viol-bl);
}

.game__info-text{
  font-size: 16px;
  color: var(--bs-gray-900);
  display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
}

.game__info-btn{
  text-align: left;
  margin-top: 15px;
}


.title__comment{
  text-align: left;
  text-transform: uppercase;
  color: var(--text-color-1);
}
.title__comment h2{
  font-size: 29px;
}
.wrap__comment {
  display: flex;
  flex-wrap: wrap;
  gap: 45px;
  justify-content: center;
}

.comment__item {
  position: relative;
  background: linear-gradient(to right, var(--bcg-color-1), var(--text-color-1));
  padding: 60px 20px 20px; 
  border-radius: 21px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  width: 400px; 
  text-align: center;
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.comment__avatar {
  position: absolute;
  top: -40px; 
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 5px solid var(--bs-white); 
  object-fit: cover;
}
.comment__start{
  color: var(--bs-yellow);
}
.comment__item h3 {
  font-size: 18px;
  text-transform: uppercase; 
  margin-top: 49px; 
  color: white; 
}

.comment__text {
  color: var(--text-content-1);
  font-size: 16px;
  margin-top: 15px;
}
.wrapper__table {
  position: relative;
  background-image: url('creativecove/back/bg-dark-06870013b53df7.jpg');

  background-size: cover;
  background-position: center;
  z-index: 1;
}
.wrapper__table::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 72%);
  z-index: 2;
}
.container__table{
  position: relative;
  z-index: 3;
}
.wrap__lider {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.lider__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 233px;
  height: 280px;
  border: 5px solid var(--bcg-color-1); 
  border-radius: 21px; 
  padding: 15px;
  overflow: hidden;
}
.title__table h2{
  text-align: left;
    text-transform: uppercase;
    font-size: 29px;
    color: var(--text-color-1);
}
.title__table p{
color: var(--bs-white);
font-size: 18px;
}

.winer__avatar {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px 20px 0 0; 
  filter: brightness(50%); 
  transition: filter 0.2s ease;
}
.winer__avatar:hover {
  filter: brightness(15%);
}
.lider__item p {
  position: relative;
  margin-top: 130px;
  font-size: 25px;
  color: var(--bs-white);
  z-index: 1; 

}
.lider__item p:hover{
  color: var(--text-color-1);
}
.transform-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.transform-hover:hover {
  transform: scale(1.05); 
}


.title__about{
  text-align: center;
  text-transform: uppercase;
  font-size: 29px;
  color: var(--text-color-1);
  
}
.about__text{
  flex: 1;
  padding: 20px;
}
.about__container{
  display: flex;
  align-items: center;
  flex-direction: row;
}
.about__video{
  width: 70%;
  flex: 1;
  padding: 16px;
  background-color: var(--bcg-color-1);
    border-radius: 46% 54% 63% 37% / 42% 42% 58% 58%;
}
.about__video video{
  width: 100%;
  height: auto;
  border-radius: 46% 54% 63% 37% / 42% 42% 58% 58%;
}

.wrapper__games{
  overflow: hidden;
  background-color: var(--bs-white);
}
.games__title{
  text-align: left;
  text-transform: uppercase;
    color: var(--text-color-1);
}
.games__title h2{
  font-size: 29px;
}
.wrap-games-list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.wrapper__step{
border-top: 5px dashed var(--text-color-1);
border-bottom: 5px dashed var(--text-color-1);
}

.title__step{
  text-align: left;
    text-transform: uppercase;
    color: var(--text-color-1);
}
.title__step h2{
  font-size: 29px;
}
.step__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  transition: background-color 0.2s ease; 
}

.step__wrap:hover {
  background-color: #f0f0f0; 
}

.list__step{
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}
.step__wrap{
  max-width: 300px;
}
.step__wrap-number{
  width: 21px;
    height: 21px;
    padding: 15px;
    border-radius: 50%;
    background-color: #2A1B3D;
    color: var(--text-color-1);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  margin-bottom: 10px;
}
.step__wrap-img {
  width: 100px;
  height: 100px;
  padding: 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--text-color-1);
  background-color: var(--bs-indigo);
  margin-bottom: 10px;
  display: flex;
    justify-content: center;
    align-items: center;
}

.step__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.step__text {
  text-align: center;
  font-size: 16px;
  color: var(--bs-orange);
}



.container__question {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.wrap__question{
  margin: 30px;
}

.question__list {
  display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    width: 500px;

}

.title__question{
  display: flex;
    flex-direction: column;
    align-items: left;
}
.title__question h2 {
  text-align: left;
  text-transform: uppercase;
  font-size: 29px;
  color: var(--text-color-1);
}


details{
  display: block;
  margin-bottom: .5rem;
  text-align: left;
  width: 100%;
  border: 1px solid var(--bcg-color-1);
    border-radius: 21px;
    background-color: var(--bcg-color-1);
}
summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   padding: 20px 40px 20px 30px;
   display: flex;
   font-size: 18px;
   cursor: pointer;
   text-align: left;
   color: var(--bs-light-or);
}

summary:before {  
  content: "+";
  margin-right: .3em;
  color: var(--text-color-1);
}
details[open] > summary:before {
  content: "-";
  color: var(--text-color-1);
}
summary ~ * {
   padding: 0 1em 0 1em;
   text-align: center;
    color: var(--bs-white);
}
.question__img {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 46% 54% 63% 37% / 42% 42% 58% 58%;
  background-color: rgb(255 94 247 / 35%);

}
.question__img img {
  width: auto;
  height: 412px;
  object-fit: cover;
  padding: 15px;
  display: block;
  position: relative;
  z-index: 1;
}

 
::selection {
  background-color: rgb(141, 18, 18);
}
.wrapper__form {
  position: relative;
  background-image: url('creativecove/back/bg-light-06870013b53d8d.jpg'); 
  background-size: cover;
  background-position: center;
  z-index: 1;
}


.wrapper__form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffffe6;
  z-index: 2;
}


.container__marg, .container__form {
  position: relative;
  z-index: 3;
  padding: 0 15px;
}

.container__form {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  width: 70%;
  height: auto;
  background-image: linear-gradient(to bottom, var(--text-color-1), var(--bcg-color-1));
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 0.5rem;
}

.title {
  color: var(--bs-white);
  margin: 15px;
  font-size: 30px;
  text-align: center;
}

.input-input__box-input{
  margin: 0.5rem 0;
  padding: 16px 5px;
  width: 80%;
  height: 10px;
  background-color: inherit;
  color: wheat;
  border: none;
  outline: none;
  border-bottom: 1px solid wheat;
  transition: all 500ms;
}
.textarea-input__box-input{
  margin: 0.5rem 0;
  padding: 16px 5px;
  width: 80%;
  height: 20px;
  background-color: inherit;
  color: wheat;
  border: none;
  outline: none;
  border-bottom: 1px solid wheat;
  transition: all 500ms;
}
.input-input__box-input:hover,
.textarea-input__box-input:hover {
  background-color: #424242;
  border: none;
  border-radius: 0.5rem;
}

.input {
  margin: 0.5rem 0;
  padding: 16px 5px;
  width: 80%;
  height: 10px;
  background-color: inherit;
  color: wheat;
  border: none;
  outline: none;
  border-bottom: 1px solid wheat;
  transition: all 500ms;
}
.input:hover {
  background-color: #424242;
  border: none;
  border-radius: 0.5rem;
}
.textarea {
  margin: 0.5rem 0;
  padding: 16px 5px;
  width: 80%;
  height: 20px;
  background-color: inherit;
  color: wheat;
  border: none;
  outline: none;
  border-bottom: 1px solid wheat;
  transition: all 500ms;
}
.textarea:hover {
  background-color: #424242;
  border: none;
  border-radius: 0.5rem;
}

.check__wrap{
  display: flex;
    align-items: center;
    margin: 20px 0;
}
.container__check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  margin: 0 15px;
}

.container__check {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 2.3em;
  width: 2.3em;
  background-color: #ccc;
  border-radius: 50%;
  transition: .4s;
  margin: 0 15px;
}
.chek-lbl{
  color: var(--bs-white); font-size: 14px; padding: 0 5px;
}
.check--privacy{
  color: var(--bs-white); font-size: 14px;
}
.rnd-section{
  display: flex;
  flex-direction: column-reverse;
}
.checkmark:hover {
  box-shadow: inset 17px 17px 16px #b3b3b3,
            inset -17px -17px 16px #ffffff;
}

.container__check input:checked ~ .checkmark {
  box-shadow: none;
  background-color: limegreen;
  transform: rotateX(360deg);
  margin: 0 15px;
}

.container__check input:checked ~ .checkmark:hover {
  box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container__check input:checked ~ .checkmark:after {
  display: block;
}

.container__check .checkmark:after {
  left: 0.96em;
  top: 0.7em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  box-shadow: 0.1em 0.1em 0em 0 rgba(0,0,0,0.3);
  transform: rotate(45deg);
}
.wrapper__disclaimer{
  
  background-image: linear-gradient(to bottom, var(--text-color-1), var(--bcg-color-1));
}    
.container__disclaimer{
  display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.box__disclaimer{
  background-color: var(--bs-white);
  margin: 25px 0;
  padding: 20px 15px;
  flex: 2;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.box__disclaimer p{
  margin: 0;
}
.box__disclaimer-img{
  flex: 1;
    text-align: center;
}
.box__disclaimer-img img{
  width: 40%;
}
.disclaimer__title {
  font-size: 25px; 
  color: red; 
  text-align: center;
  text-transform: uppercase;
  animation: pulse 2s infinite; 
}

@keyframes pulse {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  50% {
      transform: scale(1.1); 
      opacity: 0.7; 
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

.footer__menu-block{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

}
.footer__logo-title{
  display: flex;
    flex-direction: column;
    align-items: center;
}

.footer__logo-title h1{
  font-size: 29px;
  color: var(--bs-logo-text);
  text-align: center;
}
.footer__logo-title img{
  width: 100px;
}
.footer__list{
  display: flex;
    flex-direction: column;
    line-height: 3;
}

.footer__list a{
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 14px;
  color: var(--bs-gray-900);
}
.footer__list a:hover{
  color: var(--bs-orange);
}
.footer__list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px; 
  width: 0;
  height: 2px; 
  background-color: var(--bs-orange);
  transition: width 0.2s ease; 
}

.footer__list a:hover::after {
  width: 100%; 
}

.container__adres-map{
  display: flex;
  align-items: center;
}
.adres__contact,
.map__layout{
  flex: 1;
}
.contact__list{
  list-style: none;
}
.contact__list li{
    display: flex;
    padding: 25px;
    margin: 5px;
    background-color: var(--bs-viol-bl);
    border-radius: 21px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 20px;
    color: black;
}
.contact__list li a,
.contact__list li p {
  color: var(--bs-white);
    font-size: 20px;
    margin: 0 20px;
}
.contact__list svg {
  fill: #fff;
  width: 30px;  
  height: 30px;
  flex-shrink: 0; 
}

.wrapper__contact-page {
  position: relative;
  background-image: url('creativecove/back/bg-light-16870013b53db1.jpg'); 
  background-size: cover; 
  background-position: center; 
  z-index: 1;
}

.wrapper__contact-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.814); 
  z-index: 2; 
}
.adres__contact,
 .map__layout {
  position: relative;
  z-index: 3; 
  margin: 0 5px;
}

.iframe__game iframe{
  width: 100%;
  height: 412px;
}
.title__page-game{
  text-align: left;
  text-transform: uppercase;
  font-size: 29px;
  color: var(--text-color-1);
}
.wrap__game-img{
  text-align: center;
}
.wrap__game-img img{
width: 51%;
height: auto;
object-fit: contain;
border: 5px solid transparent;
border-image: linear-gradient(to bottom, var(--bs-purple), var(--text-color-1));
border-image-slice: 1;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.game__player-info{
  display: flex;
flex-direction: row;
align-items: center;
}
.game__player-info p{
  font-size: 25px; 
  color: var(--bs-purple);
  font-weight: 800;
  font-style: italic;
}
.game__player-info span{
  font-size: 25px;
  color: #c90064;
  margin: 0 20px;
  font-weight: 800;
}




.iframe__game{
  margin: 45px 0;
  text-align: center;
}
.iframe__game iframe{
  width: 100%;
  height: 412px;
}

.container__priv{
  padding: 18px;
}
.container__priv h2{
  text-align: left;
  text-transform: uppercase;
  font-size: 29px;
  color: var(--text-color-1);
}

.open-icon svg,
.close-icon svg{
  color: var(--bcg-color-1);
}
.open-icon svg:hover,
.close-icon svg:hover {
  color: var(--text-color-1);
}
.open-icon,
.close-icon,
.menu-mobile {
  display: none;
}
.open-icon{
  width: 15px;
}
.menu-mobile.active {
  transform: translateY(0);
}

.menu-mobile .header-menu-items {
  flex-direction: column;
}

.menu-mobile .header-menu-items li {
  margin: 5px 0;
} 



@media screen and (min-width: 480px) {
  .container__marg {
    max-width: 480px;
  }
}
@media screen and (min-width: 768px) {
  .container__marg{
    max-width: 768px;
  }
}
@media screen and (min-width: 1200px) {
  .container__marg{
    max-width: 1200px;
  }
}


@media (max-width: 1200px) {
  .menu-head-nav{
    flex-direction: column;
  }
  .logo-top{
    flex-direction: column;
  }
  .header__container{
    flex-direction: column;
  }
  .header__img {
    display: flex;
    justify-content: center;
  }
  .header__img img {
    width: 80%;
}

.about__container{
  flex-direction: column-reverse;
}
.about__video{
  width: 80%;
}
.container__question {
  flex-direction: column;
  }

  .team-list {
    flex-direction: row;
  }

  .dev-item {
    width: 45%; 
  }
}

@media (max-width: 900px){
  .container__disclaimer{
    flex-direction: column;
  }

}
@media (max-width: 768px) {
  .wrap__game-img img {
    width: 60%;
  }

  .header__cont h3{
    font-size: 21px;
  }

  .iframe__game iframe{
    width: 80%;
    text-align: center;
  }
 
  .wrap__list-head{
    display: none;
  }
 
  .footer__menu-block{
    flex-direction: column;
    align-items: center;
  }
  .footer__list{
    align-items: center;
  }
.games__title h2,
.title__step h2,
.title__comment h2,
.title__question h2,
.form-title{
font-size: 20px;
}
.title{
  font-size: 23px;
}
.container__adres-map{
flex-direction: column;
}
.iframe__game iframe{
  width: 80%;
  text-align: center;
}
.menu-mobile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bs-white);
  padding: 20px;
  box-sizing: border-box;
  transform: translateY(-100%);
  transition: transform 1s ease;
  z-index: 5;
}
.menu-head-nav{
  flex-direction: row;
  justify-content: space-between;
}
.menu-head-list{
  display: none;
}
.close-icon{
  display: flex;
  justify-content: flex-end;
}
.form{
  width: 95%;
  padding: 0 5px;
}

.open-icon {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.header-menu-mob-items{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  line-height: 2;
}
.header-menu-mob-items li{
  margin: 10px 0;
  list-style: none;
}
.header-menu-mob-items li a{
  position: relative;
  display: inline-block;
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 px;
  color: var(--bs-gray-900);
}
.header-menu-mob-items li a:hover{
  color: var(--bs-orange);
}
.header-menu-mob-items li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px; 
  width: 0;
  height: 2px; 
  background-color: var(--bs-orange);
  transition: width 0.2s ease; 
}
.header-menu-mob-items li a:hover::after {
  width: 100%; 
}
.section-map-contact{
  flex-direction: column;
}
}

@media (max-width: 576px) {
  .wrap__game-img img {
    height: auto;
    width: 100%;
  }
  .question__list{
    width: 300px;
  }
  .question__img img {
      width: 300px;
      height: auto;
    }
  .box__disclaimer p{
    font-size: 16px;
  }
  .footer__logo-title{
    flex-direction: column;
  }
  .game__card a {
    flex-direction: column;
  }
}

@media (max-width: 425px){
  .contact__list li a, .contact__list li p {

    font-size: 14px;
  }
}
@media (max-width: 375px) {

  .gamess__img-content img{
    width: 233px;
  }
  .gamess__img-content {
    display: flex;
    justify-content: center;
    margin-right: 0;
  }

}

.button-1 {
  appearance: none;
  background-color: rgb(68 49 141 / 47%);
  border: 0.125em solid #d63384;
  box-sizing: border-box;
  color: var(--bs-white);
  cursor: pointer;
  display: inline-block;
  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  min-height: 3.75em;
  min-width: 0;
  outline: none;
  padding: 18px 21px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  will-change: transform;
 }
 
 .button-1:disabled {
  pointer-events: none;
 }
 
 .button-1:hover {
  color: #fff;
  background-color: #6610f2;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
 }
 
 .button-1:active {
  box-shadow: none;
  transform: translateY(0);
 }

 .button-2 {
  width: 165px;
  height: auto;
  padding: 20px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  border-radius: 18px;
  border: none;
  position: relative;
  background: #100720;
  transition: 0.1s;
}

.button-2::after {
  content: '';
  width: 100%;
  height: 100%;
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
  filter: blur(15px);
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}

.button-2:active {
  transform: scale(0.9) rotate(3deg);
  background: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
  transition: 0.5s;
}

.button-3,
.button-3::after {
 padding: 16px 21px;
 font-size: 18px;
 background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
 border: 0;
 color: #fff;
 letter-spacing: 3px;
 line-height: 1;
 box-shadow: 6px 0px 0px #00e6f6;
 outline: transparent;
 position: relative;
}

.button-3::after {
 --slice-0: inset(50% 50% 50% 50%);
 --slice-1: inset(80% -6px 0 0);
 --slice-2: inset(50% -6px 30% 0);
 --slice-3: inset(10% -6px 85% 0);
 --slice-4: inset(40% -6px 43% 0);
 --slice-5: inset(80% -6px 5% 0);
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #ff013c 5%);
 text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
 clip-path: var(--slice-0);
}

.button-3:hover::after {
 animation: 1s glitch;
 animation-timing-function: steps(2, end);
}

@keyframes glitch {
 0% {
  clip-path: var(--slice-1);
  transform: translate(-20px, -10px);
 }

 10% {
  clip-path: var(--slice-3);
  transform: translate(10px, 10px);
 }

 20% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 10px);
 }

 30% {
  clip-path: var(--slice-3);
  transform: translate(0px, 5px);
 }

 40% {
  clip-path: var(--slice-2);
  transform: translate(-5px, 0px);
 }

 50% {
  clip-path: var(--slice-3);
  transform: translate(5px, 0px);
 }

 60% {
  clip-path: var(--slice-4);
  transform: translate(5px, 10px);
 }

 70% {
  clip-path: var(--slice-2);
  transform: translate(-10px, 10px);
 }

 80% {
  clip-path: var(--slice-5);
  transform: translate(20px, -10px);
 }

 90% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 0px);
 }

 100% {
  clip-path: var(--slice-1);
  transform: translate(0);
 }
}

.button-4 {
  --border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb);
  --border-width: 0.125em;
  --curve-size: 0.5em;
  --blur: 30px;
  --bg: #080312;
  --color: #afffff;
  color: var(--color);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-content: center;
  padding: 10px 25px;
  font-size: 14px;
  border: 0;
  text-transform: uppercase;
  box-shadow: 10px 10px 21px rgba(0, 0, 0, 0.6);
  clip-path: polygon(
    0% var(--curve-size),
    var(--curve-size) 0,
    100% 0,
    100% calc(100% - var(--curve-size)),
     calc(100% - var(--curve-size)) 100%,
    0 100%
  );
  transition: color 250ms;
}

.button-4::after,
.button-4::before {
  content: "";
  position: absolute;
  inset: 0;
}

.button-4::before {
  background: var(--border-color);
  background-size: 300% 300%;
  animation: move-bg7234 5s ease infinite;
  z-index: -2;
}

@keyframes move-bg7234 {
  0% {
    background-position: 31% 0%;
  }

  50% {
    background-position: 70% 100%;
  }

  100% {
    background-position: 31% 0%;
  }
}

.button-4::after {
  background: var(--bg);
  z-index: -1;
  clip-path: polygon(
   var(--border-width)
      calc(var(--curve-size) + var(--border-width) * 0.5),
    calc(var(--curve-size) + var(--border-width) * 0.5) var(--border-width),
   calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width))
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
      calc(100% - var(--border-width)),
     var(--border-width) calc(100% - var(--border-width))
  );
  transition: clip-path 500ms;
}

.button-4:where(:hover, :focus)::after {
  clip-path: polygon(
 calc(100% - var(--border-width))
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
    calc(100% - var(--border-width)) var(--border-width),
   calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width))
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
      calc(100% - var(--border-width)),
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
      calc(100% - var(--border-width))
  );
  transition: 200ms;
}

.button-4:where(:hover, :focus) {
  color: #fff;
}




.button-5 {
 --border-width: 4px;
 appearance: none;
 position: relative;
 padding: 16px;
 border: 0;
 background-color: #212121;
 font-family: "Roboto", Arial, "Segoe UI", sans-serif;
 font-size: 18px;
 font-weight: 400;
 color: #fff;
 z-index: 2;
}

.button-5::after {
 --m-i: linear-gradient(#000, #000);
 --m-o: content-box, padding-box;
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 padding: var(--border-width);
 background-image: conic-gradient(
		#488cfb,
		#29dbbc,
		#ddf505,
		#ff9f0e,
		#e440bb,
		#655adc,
		#488cfb
	);
 -webkit-mask-image: var(--m-i), var(--m-i);
 mask-image: var(--m-i), var(--m-i);
 -webkit-mask-origin: var(--m-o);
 mask-origin: var(--m-o);
 -webkit-mask-clip: var(--m-o);
 mask-composite: exclude;
 -webkit-mask-composite: destination-out;
 filter: hue-rotate(0);
 animation: rotate-hue linear 500ms infinite;
 animation-play-state: paused;
}

.button-5:hover::after {
 animation-play-state: running;
}

@keyframes rotate-hue {
 to {
  filter: hue-rotate(1turn);
 }
}

.button-5,
.button-5::after {
 box-sizing: border-box;
}