@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

body{
    direction: ltr;
    font-family: 'Noto Sans Display', sans-serif !important;
    font-size: 17px;
    margin: 0;
    padding: 0px;
}

.grand-bg {
    background-image: linear-gradient(270deg,#060606,#93329e,#0D7377);
    background-size: 600% 100%;
	-webkit-animation: bg-pan-left 8s infinite alternate-reverse backwards;
	        animation: bg-pan-left 8s infinite alternate-reverse backwards;
}

@-webkit-keyframes bg-pan-left {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @keyframes bg-pan-left {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .grand-bg-opas {
    background-position: center;
    background-size: cover;
    background-image: url(creativecove/back/opacity_bg-068a4a964628fb.png);
    
  }

  .head-nav-opas {
    padding-top: 18px;
    padding-bottom: 18px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    align-items: center;
  }

  .hno-logo {
    display: flex;
    gap: 6px;
    align-items: center;
    text-decoration: none;
  }

  .hno-logo img {
    width:50px;
    height: 50px;
    object-fit: contain;
  }

  .hno-logo h3 {
    margin: 0;
    color: #fff;
    font-size:  26px;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .hno-navig {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .hno-navig-link {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    margin: 0;
    display: block;
    padding: 6px;
  }

  .hno-navig-link:hover {
    border-bottom: 0.2rem solid #545454;
    padding-bottom: 0.9rem;
  }

  .hello-r-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .hello-txt-block {
    width: 50%;
    padding-top: 140px;
    padding-bottom: 140px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
  }

  .hello-txt-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing:  1px;
    line-height: 1.5;
  }

  .hello-banner-img {
    width: 50%;

  }

  .hello-banner-img img {
    width: 100%;
    height: 462px;
    object-fit: contain;
  }

  .site-body-bg {
    background: rgb(131,58,180);
    background: linear-gradient(0deg, #060606,#93329e,#0D7377 100%);
  }

  .about-gallery-section {
    padding-top:  70px;
    padding-bottom:  70px;
  }

  .about-gallery {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    border-radius:  11px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 44px;
    padding:  70px 44px;
    background-color:  #fff;
  }

  .gallery-anim {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .ga-img-wrap {
    width: 100%;
    height: 244px;
    padding: 11px;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg,#0D7377 0%, rgba(255,255,255,1) 100%);
    border-radius:  13px;
  }

  .ga-even {
    justify-content: end;
    background: linear-gradient(270deg,#0D7377 0%, rgba(255,255,255,1) 100%);
  }

  .ga-img-wrap img {
    width: 50%;
    height: 244px;
    object-fit: cover;
    border-radius:  11px;
    transition-property: all;
    transition: all 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  }

  .ga-even img  {
    transition-property: all;
    transition: all 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  }

  .about-gallery:hover  .ga-img-wrap img {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  .about-gallery:hover  .ga-even img {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  .about-whiteblock {
    width: 50%;
  }

  .ab-wb-title {
    display: block;
    font-size:  29px;
    font-weight: 700;
    margin-bottom: 44px;
    letter-spacing:  1px;
    line-height: 1.5;
    text-align: center;
  }

  .ab-wb-txt {
    font-size: 17px;
  }

  .how-play {
    padding-top: 44px;
    padding-bottom: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 44px;
  }



  .how-plaing-title h2 {
    color: #fff;
    font-size:  56px;
    font-weight: 700;
    margin-bottom: 44px;
  }

  .hp-title-imgblock {
    display: flex;
    flex-direction: column;
  }

  .hp-title-imgblock {
    margin-left: auto;
  }

  .hp-title-img {
    width: 30%;
    height: 244px;
    object-fit: contain;
  }

  .hp-title-imgblock .hp-title-img:nth-child(2) {
    margin-left: auto;
  }

  .how-play-steps {
    width: 65%;
    border-left: 4px solid;
    padding:  11px 18px ;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
  }

  .hp-step {
    padding:  30px  24px  30px 70px ;
    border-radius: 18px;
    font-size: 17px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    background-color: #f6f6f6;
  }

  .hp-step i {
    font-size: 44px;
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    left: -100px;
    transition-property: all;
    transition: all 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  }

  .hp-step:hover i {
    -webkit-transform: translateX(100px) translateY(-50%);
    transform: translateX(100px) translateY(-50%);
  }

  .lider-top {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .lider-top-title {
    color: #636262;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 44px;
    text-align: center;
  }

  .lider-top-list {
    display: flex;
    flex-direction: row;
    gap: 24px;
  }

  .lider-top-card {
    width: 19%;
    padding: 24px;
    border-radius: 11px;
    background-color: #ffffff54;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  .lider-top-card::before { 
    content: "";
    position: absolute;
    left: 0;
    top: -100px;
    width: 38px;
    height: 320px;
    background: #f6f6f6;
    transform: rotate(-55deg);
    transition: all 0.3s ease-out 0s;
    opacity: 0.55;
    z-index: -1;
  }

  .lider-top-card::after {
    content: "";
    position: absolute;
    left: auto;
    right: 0;
    top: -100px;
    width: 38px;
    height: 320px;
    background: #f6f6f6;
    transform: rotate(55deg);
    transition: all 0.3s ease-out 0s;
    opacity: 0.55;
    z-index: -1;
  }

  .lt-card-ava {
    display: flex;
    margin: auto;
    width: 150px;
    height: 244px;
    border-radius: 0%;
    overflow: hidden;
  }

  .lt-card-ava img {
    width: 100%;
    height: 100%;
    border-radius: 0%;
    object-fit: cover;
  }

  .lt-card-name img {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
  }
  
  .lt-card-name h4 {
    text-align: center;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    word-break: break-all;
  }

  .lt-card-name p {
    text-align: end;
    color: #fff;
    font-size: 17px;
    margin-bottom: 0;
  }

  .faq-form-hidden {
    padding-top: 44px;
    padding-bottom: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:70px;
  }

  .faq-hidden {
    width: 70%;

  }

  .faq-hidden-title {
    color: #fff;
    font-size:  26px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 44px;
    text-align: center;
  }

  .accordion-item {
    margin-bottom: 18px;
    border: 0;
    background-color: transparent;
    color: #fff;
  }

  .accordion-button:not(.collapsed) {
    box-shadow: none;
    background-color: #060606;
  }

  .accordion-button {
    color: #fff !important;
    font-size: 19px;
    padding: 24px 60px 24px 30px;
    background: #0D7377;
    border-radius: 10px !important;
  }

  .form-hidden {
    width: 29%;
  }

  .form-hidden-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-align: center;
  }

  .form-h-body {
    padding: 10%;
    border-radius: 18px;
    background: #f6f6f6;
    box-shadow: #0D7377 5px 4px 8px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
  }

  .input-mainelement-block,  .textarea-mainelement-block {
    height: 35px;
    padding: 1px 8px;
    border: none;
    font-size: 17px;
    letter-spacing: 3px;
    border-radius: 9px;
    background: #f3f3f3;
    box-shadow: inset -3px -3px 4px #ffffff,
                inset 3px 3px 4px rgba(0, 0, 0, 0.356);
    text-decoration: none;
    background: linear-gradient(to right,white, #80808010, white);
    background-size: 200% 200%;
    animation: input 4s infinite;
    margin-bottom: 19px;
  }
  
  .input-mainelement-block:focus-visible,  .textarea-mainelement-block:focus-visible {
    outline: none;
    background: rgb(241, 241, 241);
  }

  @keyframes input {
    0% {
      background-position: 0% 50%;
    }
  
    50% {
      background-position: 100% 50%;
    }
  
    100% {
      background-position: 0% 50%;
    }
  }

  
  .form-h-body label a {
    color: black !important;
    text-decoration: none !important;
  }
  
  .form-h-body label a:hover {
    text-decoration: underline;
  }

  .footer-dark-bg {
    background-color: #060606;

  }

  .footer-dark-nav-bg {
    background-color: #ffffff54;

  }

  .footer-dark-nav {
    flex-wrap: wrap;
    padding-top:  18px;
    padding-bottom:  18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .fotd-nav-link {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    margin: 0;
    display: block;
    padding: 11px;
  }

  .fotd-nav-link:hover {
    text-decoration: underline;
  }

  .footer-dark {
    padding-top: 44px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 44px;
  }

  .fd-logopart {
    width: 60%;
  }

  .fd-logo {
    display: flex;
    gap: 11px;
    align-items: center;
    text-decoration: none;
    flex-wrap: wrap;
  }

  .fd-logo img {
    width:50px;
    height: 50px;
    object-fit: contain;
  }

  .fd-logo h3 {
    margin: 0;
    color: #fff;
    font-size: 29px;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .footer-disclaim {
    padding: 24px;
    background-color: #006F5F;
    margin-top: 24px;
  }

  .footer-disclaim h4 {
    color: #fff;
    font-size: 29px;
    font-weight: 700;
  }

  .footer-disclaim p {
    color: #fff;
    font-size:13px;
    line-height: 1.5;
  }

  .fd-corypart {
    width: 39%;
  }

  .footer-disclaim-img img {
    display: flex;
    margin: auto;
    width: 70px;
    height: auto;
    object-fit: contain;
  }

  .fd-copy-txt {
    margin-top: 11px;
    color: #fff;
    font-size: 19px;
    text-align: center;
  }

  .fd-copy-txt a {
    color: #fff;
    text-decoration: none;
    font-size: 29px;
    font-weight: 700;
  }

  .catalog-game {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .catalog-game-title {
    margin-bottom: 30px;
    font-size: 38px;
    font-weight: 38px;
    letter-spacing: 1px;
    text-align: center;
    color: #fff;
  }

  .catalog-game-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .catalog-game-card {
    position: relative;
    z-index: 0;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.cg-cardimg {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.cg-title {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    position: absolute;
    padding: 11px;
    background: linear-gradient(0deg,  rgba(255,255,255,0.5) 0%, #0D7377 100%);
    width: 100%;
    top: 0px;
    z-index: 2;
}

.cg-content {
    font-size:13px;
    font-weight: 700;
    position: absolute;
    z-index: 10;
    transition: all 2s  cubic-bezier(0.250, 0.460, 0.450, 0.940);
    padding: 19px 29px;
    background: linear-gradient(0deg,#0D7377 0%, rgba(255,255,255,0.5) 100%);
}

.catalog-game-card:hover .cg-content {
    transform: translateY(-100%);
}

  .cg-cardimg {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .cg-cardimg img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .cg-btbs button {
    display: flex;
    margin: auto;
    padding: 13px; 
    font-size:13px; 
    font-weight: 700; 
    letter-spacing: 3px;
  }

  .cg-btbs a {
    text-decoration: none;
  }

  .cg-txt {
    margin-bottom: 18px;
  }

  .game-category-bg {
    background: url(creativecove/back/bg-all-068a4a96462887.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .game-category {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .gmcat-title {
    padding: 18px 30px;
    background-color: #fff;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    border-radius:  13px;
    box-shadow: #0D7377 0px 0px 0px 3px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  }

  .gmcat-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    gap: 30px;
  }

  .gmcat-card {
    position: relative;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background-color: #fff;
    border-radius: 18px;
    box-shadow: #0D7377 0px 0px 0px 3px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  }

  .gmcard-img {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
  }

  .gmcard-img::before  {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,rgba(36,26,66,.88),rgba(36,26,66,.88));
    opacity: 0;
    transition: .3s ease;
    z-index: 2;
}

.gmcat-card:hover .gmcard-img:before {
    opacity: 1;
}

  .gmcard-img img {
    width: 100%;
    object-fit: contain;
  }

  .gmcard-txt {
    margin-bottom: 18px;
    height: 0;
    overflow: hidden;
    transition: height 2s  ease-in-out, max-height 3s ease-in-out;
}

    .gmcat-card:hover .gmcard-txt { 
        height: 100px; 
    }

    .gasmcard-btn {
        position: absolute;
        opacity: 0;
        z-index: 3;
        transition: .3s ease;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .gmcat-card:hover .gasmcard-btn {
        opacity: 1;
    }

    .gam-about-page {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 44px;
        padding: 30px 44px;
        color: #fff;
        border-radius:  13px;
        background-color: #060606;
    }

    .gamab-block {
        width: 48%;
        
    }
    .thumb-rivac{
      padding: 113px 0px;
    }
    .gam-about-page-bg{
      padding-top: 50px; padding-bottom: 50px;
    }
    .gamab-gallery {
        display: flex;
        flex-direction: row;
        gap: 18px;
        justify-content: center;
        align-items: center;
    }

    .gamab-gallery img {
        width: 25%;
        height: 113px;
        object-fit: cover;
        border-radius:  13px;
        box-shadow: rgba(255, 255, 255, 0.4) 0px 3px 4px, rgba(254, 252, 252, 0.3) 0px 7px 13px -3px, rgba(251, 247, 247, 0.2) 0px -3px 0px inset;
    }

    .gamab-video {
        width: 48%;
        height: 100%;
        display:  flex;
        align-items: center;
        margin: 0 auto;
    }

    .gamab-video video {
        display: block;
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius:  13px;
        box-shadow: rgba(255, 255, 255, 0.4) 0px 3px 4px, rgba(254, 252, 252, 0.3) 0px 7px 13px -3px, rgba(251, 247, 247, 0.2) 0px -3px 0px inset;
    }
    
    .gamab-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 18px;
    }
    @media (max-width:767px) {
      .gamab-content {
        flex-direction: column;
      }

      .catalog-game-list, .gmcat-list{
        grid-template-columns: repeat(1, 1fr);
      }
    }
    .gamab-title {
        margin-bottom: 18px;
        text-align: center;
        font-size: 26px;
        font-weight: 700;
    }

    .gamab-txt {
        font-size: 17px;
    }

    .play-game-page-bg {
        padding-top: 70px;
        padding-bottom: 70px;
        background-color: #00000006;
    }

    .play-game-page {
        display: flex;
        flex-direction: column;
        gap: 44px;
    }

    .pg-block {
      width: 70%;
    }

    .pg-sidebar {
        width: 28%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        gap: 44px;
        position: sticky;
        top: 0;
    }

    .players-online-block, .top-game-block {
        padding: 18px;
        border: 2px solid #0D7377;
        background-color: #f4f9f9;
        border-radius: 13px;
    }

    .top-game-block {
      display: block;
    }

    .po-title, .tg-title {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 24px;
    }

    .po-list  {
      display: flex;
      flex-direction: column;
      gap: 18px;
  }
    
    .tg-list {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .po-item {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .po-item img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid  #0D7377;
        box-shadow: box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }

    .po-item p {
        margin-bottom: 0;
        font-size: 17px;
        font-weight: 700;
    }

    .tg-item {
      position: relative;
        z-index: 0;
        display: flex;
        flex-direction: row; 
        gap: 11px;
        justify-content: center;
        align-items: center;
        color: #000;
        text-decoration: none;
        padding: 11px;
        border-radius:  13px;
        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 3px 1px, rgba(0, 0, 0, 0.09) 0px 4px 3px, 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 33px 16px;
    }

    .tg-item .fire {
      position: absolute;
      top: 15px;
      left: 10px;
      opacity: 0.4;
      z-index: 1;
      width: 70px;
      height: 70px;
    }

    .tg-item-img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 13px;
    }

    .pg-title {
        font-size: 29px;
        font-weight: 700;
        padding: 11px 30px;
        border-radius: 15;
        text-align: center;
        margin-bottom: 30px        ;
        border: 2px solid #0D7377;
        background-color: #f4f9f9;
    }

    .pg-content img {
        width: 40%;
        float: left;
        margin:  30px;
        display: flex;
        object-fit: contain;
    }

    .pg-gameboard {
        margin-top:  10px;
    }

    
    .pg-gameboard iframe{
      width: 100%;
      height: 100vh;
    }

    .pg-gameboardtitle {
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        padding: 15px 30px;
        font-size: 25px;
        font-weight: 700;
        border-radius: 15;
        background-color: #f4f9f9;
        border: 2px solid #0D7377;
    }

    .pg-players {
        display: flex;
        flex-direction: row;
        gap: 18px;
        justify-content: space-around;
    }

    .pg-players p {
        font-size: 19px;
        font-weight: 700;
        color: #0D7377;
    }

    .pg-players i {
        font-size:  26px;
    }

    .game-contact-page-wrap, .gc-map {
      background-color: #060606;
    }

    .game-contact-page-wrap {
      padding-top: 44px;
      padding-bottom: 44px;

    }

    .gc-pageblock {
      display: flex;
      flex-direction: column;
      gap: 44px;
      align-items: center;
      justify-content: center;
    }

    .gc-formblock {
      width: 48%;
    }

    .gc-datablock {
      width: 48%;
    }

    .gc-input {
      position: relative;
    }
    
    .gc-input input {
      width: 100%;
      padding: 13px 0;
      font-size: 17px;
      color: #fff;
      margin-bottom:  30px;
      border: none;
      border-bottom: 2px solid #fff;
      outline: none;
      background: transparent;
    }
    
    .gc-input label {
      position: absolute;
      top: 0;
      left: 0;
      padding: 13px 0;
      font-size: 17px;
      color: #fff;
      pointer-events: none;
      transition: .4s;
    }
    
    .gc-input input:focus ~ label,
    .gc-input input:valid ~ label {
      top: -20px;
      left: 0;
      color: #bdb8b8;
      font-size: 13px;
    }

    .form-check label {
      font-size: 17px;
      color: #fff;
    }

    .form-check label a {
      font-size: 17px;
      color: #fff; 
      text-decoration: none;
    }

    .form-check label a:hover {
      text-decoration: underline;
    }

    .gc-data-txt {
      font-size: 43px;
      font-weight: 700;
      text-align: center;
      color: #fff;
      margin-bottom: 30px;
    }

    .gc-datalist {
       display: flex;
       flex-direction: column;
       justify-content: center;
       gap: 11px;
    }

    .gc-dataitem h4 {
      color: #fff;
      font-size: 17px;
      margin-bottom: 10px;
      text-align: center;
    }

    .gc-dataitem p {
      color: #fff;
      font-size: 17px;
      text-align: center;
    }

    .rotate-helloimg {
      -webkit-animation: rotate-center 14s linear infinite paused;
              animation: rotate-center 14s linear infinite paused;
    }

    @-webkit-keyframes rotate-center {
      0% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
      }
      100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
      }
    }
    @keyframes rotate-center {
      0% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
      }
      100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
      }
    }

    .gallery-hidden {
      width: 100%;
      flex-direction: row;
      gap:  30px;
      justify-content: center;
      display: flex;
    }

    .gallery-hidden img {
      width: 30%;
      height: 130px;
      object-fit: cover;
      border-radius:  13px;
    }

    .game-contact-page-bg {
      display: flex;
      flex-direction:  column;
  }

  .form-h-body .form-check label {
    font-size: 17px;
    color: #000;
}

.button-1 {
  padding: 1rem 2rem;
  font-weight: 700;
  background: rgb(255, 255, 255);
  color: blueviolet;
  border-radius: .5rem;
  border-bottom: 3px solid blueviolet;
  border-right: 3px solid blueviolet;
  border-top: 3px solid white;
  border-left: 3px solid white;
  transition-duration: 1s;
  transition-property: border-top, 
     border-left, 
     border-bottom,
     border-right,
     box-shadow;
 }
 
 .button-1:hover {
  border-top: 3px solid blueviolet;
  border-left: 3px solid blueviolet;
  border-bottom: 3px solid rgb(238, 103, 238);
  border-right: 3px solid rgb(238, 103, 238);
  box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px;
 }

 .button-2 {
  padding: 1.3em 3em;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 44px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

.button-2:hover {
  background-color: #23c483;
  box-shadow: 0px 15px 19px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

.button-2:active {
  transform: translateY(-1px);
}

.button-3 {
  display: inline-block;
  padding: 10px 19px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #ff5252;
  border: 2px solid #000;
  border-radius: 13px;
  box-shadow: 4px 4px 0px #000;
  transition: all 0.3s ease;
  cursor: pointer;
}

.button-3:hover {
  background-color: #fff;
  color: #ff5252;
  border: 2px solid #ff5252;
  box-shadow: 4px 4px 0px #ff5252;
}

.button-3:active {
  background-color: #fcf414;
  box-shadow: none;
  transform: translateY(4px);
}

.button-4 {
  --color: #00A97F;
  --color2: rgb(10, 25, 30);
  padding: 0.8em 1.75em;
  background-color: #ffffffb0;
  border-radius: 6px;
  border: 3px solid var(--color);
  transition: .4s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  font-weight: 700;
  font-size: 17px;
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  text-transform: uppercase;
  color: var(--color);
 }
 
 .button-4::after, .button-4::before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  transform: skew(90deg) translate(-50%, -50%);
  position: absolute;
  inset: 50%;
  left: 25%;
  z-index: -1;
  transition: .4s ease-out;
  background-color: var(--color);
 }
 
 .button-4::before {
  top: -50%;
  left: -25%;
  transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
 }
 
 .button-4:hover::before {
  transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
 }
 
 .button-4:hover::after {
  transform: skew(45deg) translate(-50%, -50%);
 }
 
 .button-4:hover {
  color: var(--color2);
 }
 
 .button-4:active {
  filter: brightness(.7);
  transform: scale(.98);
 }

 .button-5 {
  position: relative;
  border: 1px solid #725ac1;
  outline: none;
  background-color: transparent;
  padding: 17px 29px;
  border-radius: 29px;
  z-index: 2;
  cursor: pointer;
  color: #ffff;
  overflow: hidden;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.button-5::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-color: #725ac1;
  filter: blur(5px);
  z-index: -1;
  transition: width 0.9s ease-out, height 0.9s ease-out,
    background-color 0.3s ease-out;
  border-radius: 50%;
}

.button-5:hover::before {
  border-radius: 19px;
  width: 300px;
  height: 200px;
  background-color: #725ac1;
}

.footer-logos {
    display: flex;
    justify-content: center; 
    align-items: center;
   flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
  }
  
  .footer-logos a img {
    max-height: 50px;
    width: auto;
    display: block;
  }