* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 @font-face {
     font-family: "hanson";
     src: url("/assets/fonts/Hanson-Bold.otf");
     
 }

 header {
     height: 100px;
 }

 h1 {
     font-size: 32px !important;
 }

 h1,
 h2,
 h4 {
     font-size: 2.5rem;
     text-transform: uppercase;
     font-family: hanson;
     color: #000;
 }

 h2 {
     /* font-size: 42px !important; */
 }

 h4 {
     font-size: 20px !important;
     margin-bottom: 0px;
 }

 h6 {
     font-size: 1rem;
     text-transform: uppercase;
     font-family: poppins;
     font-weight: 400 !important;
     letter-spacing: 2px;
     color: #000;
 }

 p {
     font-family: poppins;
     font-size: 15px;
     font-weight: 500;
 }

 #menu__toggle:checked+.menu__btn1>span {
     transform: rotate(45deg);
 }

 #menu__toggle:checked+.menu__btn>span::before {
     top: 0;
     transform: rotate(0deg);
 }

 #menu__toggle:checked+.menu__btn>span::after {
     top: 0;
     transform: rotate(90deg);
 }

 #menu__toggle:checked~.menu__box {
     left: 0 !important;
 }

 .menu__btn {
     position: fixed;

     width: 26px;
     height: 26px;
     cursor: pointer;
     z-index: 1;
 }

 .menu__btn>span,
 .menu__btn>span::before,
 .menu__btn>span::after {
     display: block;
     position: absolute;
     width: 100%;
     height: 2px;
     background-color: #616161;
     transition-duration: .25s;
 }

 .menu__btn1 {
     top: 20px;
     left: 290px;
     cursor: pointer;
     font-size: 20px;
     z-index: 9999 !important;
     margin-top: 30px;
 }

 .menu__btn1>span::before {
     content: '';
     top: -8px;
 }

 .menu__btn1>span::after {
     content: '';
     top: 8px;
 }

 .menu__box {
     display: block;
     position: fixed;
     z-index: 1;
     top: 0;
     left: -100%;
     width: 330px;
     height: 100%;
     margin: 0;
     padding: 120px 0px 0px 40px;
     list-style: none;
     background-color: rgba(255, 255, 255, .9);
     box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
     transition-duration: .25s;
     backdrop-filter: blur(7px);
 }

 .menu__item {
     display: block;
     padding: 12px 24px;
     color: #000;
     font-size: 20px;
     font-weight: 600;
     text-decoration: none;
     transition-duration: .25s;
 }

 .menu__item:hover {
     background: linear-gradient(270deg, #0657FE, #7F0332);
 }

 .nav ul li {
     margin-top: 20px;
     /* border-bottom: 1px solid #707070; */
 }

 .navbar-logo {
     top: 20px;
     bottom: 0;
     left: 20px;
     margin-top: 30px;
 }

 video {
     width: 100%;
     height: auto;
 }

 .players-main {
     border-right: 2px solid #707070;
     width: 115px;
 }

 .players {
     margin-left: -13px;
 }

 .players-count {
     background: linear-gradient(180deg, #0657FE, #7F0332);
     color: #fff;
     width: 35px;
     margin-left: -13px;
     text-align: center;
     border-radius: 100%;
     font-size: 11px;
     font-family: poppins;
     font-weight: 600;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .players-meta span {
     text-transform: uppercase;
     font-size: 18px;
     font-family: poppins;
     font-weight: bold;
     color: #000;
 }

 .play-button {
     background: linear-gradient(180deg, #0657FE, #7F0332);
     border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
     margin-left: -30px;
 }

 .video {
     margin-top: -170px;
 }

 .design-studio,
 .game-studio,
 .popular-game,
 .join-team,
 .customer-brands,
 footer,
 .occupancy,
 .team,
 .customers-publishing,
 .hit-game,
 .hit-team,
 .growth-game,
 .designing,
 .development,
 .faqs,
 .single-case,
 .cases,
 .customers {
     margin-top: 100px;
 }

 .tag-image {
     top: -210px;
     right: 50px;
 }

 .game-studio h2 {
     font-size: 25px;
 }

 .game-studio-ribbon {
     margin-top: 100px;
     color: #fff;
     background: linear-gradient(100deg, #0657FE, #7F0332);
     transform: rotate(359deg);
 }

 .game-studio-ribbon span {
     margin-bottom: 0;
     text-transform: uppercase;
     font-weight: 500;
     margin: 22px;
 }

 .gallery-image {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 }

 .gallery-image img {
     height: 360px;
     width: 350px;
     transform: scale(1.0);
     transition: transform 0.4s ease;
 }

 .img-box {
     box-sizing: content-box;
     margin: 10px;
     height: 360px;
     width: 350px;
     overflow: hidden;
     display: inline-block;
     color: white;
     position: relative;
     background-color: white;
 }

 .caption {
     position: absolute;
     bottom: 5px;
     left: 20px;
     opacity: 0.0;
     transition: transform 0.3s ease, opacity 0.3s ease;
 }

 .transparent-box {
     height: 360px;
     width: 350px;
     background-color: rgba(0, 0, 0, 0);
     position: absolute;
     top: 0;
     left: 0;
     transition: background-color 0.3s ease;
 }

 .img-box:hover img {
     transform: scale(1.1);
 }

 .img-box:hover .transparent-box {
     background-color: rgba(0, 0, 0, 0.5);
 }

 .img-box:hover .caption {
     transform: translateY(-20px);
     opacity: 1.0;
 }

 .img-box:hover {
     cursor: pointer;
 }

 .caption>p:nth-child(2) {
     font-size: 0.8em;
 }

 .opacity-low {
     opacity: 0.5;
 }

 .join-team-text {
     position: absolute;
     right: 3rem;
     top: 3rem;
     width: 50%;
 }

 .join-team-text h6 {
     color: #fff !important;
 }

 .join-team-text h2 {
     font-size: 35px !important;
     color: #fff !important;
 }

 .cta-get-quote,
 .footer a {
     color: #fff;
     text-decoration: none;
     display: block;
     text-transform: uppercase;
     font-weight: 500;
     font-family: poppins;
 }

 a:hover {
     color: #fff !important;
 }

 .tag-img-2 {
     display: none;
     top: -340px;
     left: 1050px;
 }

 .c-back-img-2 {
     top: -130px;
     left: -30px;
 }

 .c-back-img {
     top: -190px;
     right: -70px;
 }

 footer {
     background: linear-gradient(100deg, #000, #7F0332, #0657FE);
 }

 .footer {
     padding: 70px 0px 70px 0px;
 }

 footer p {
     font-size: 12px;
 }

 /*ABOUT PAGE*/

 #about {
     background-image: url("../images/about-banner.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: right;
     width: 100%;
 }

 .about {
     padding: 70px 0px 70px 0px;
 }

 .about-tag {
     right: 350px;
     bottom: -50px;
 }

 .game-studio-ribbon-about {
     color: #fff;
     background: linear-gradient(100deg, #0657FE, #7F0332);
     margin-top: -10px;
 }

 .game-studio-ribbon-about span {
     margin-bottom: 0;
     text-transform: uppercase;
     font-weight: 500;
     margin: 22px;
 }

 .gamming-hands {
     transform: rotate(358deg);
 }

 .game-studio-heading {
     font-size: 35px !important;
 }

 /* GAMES PAGE */

 #games {
     background-image: url("../images/games-banner.webp");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: right;
     width: 100%;
 }

 .popular-game ul {
     justify-content: center;
     border: none;
 }

 .popular-game ul li {
     margin-right: 20px;
     color: #000;
 }

 .popular-game ul li button {
     color: #000;
     text-transform: uppercase;
     font-family: hanson11;
     font-size: 13px !important;
     color: #000;
 }

 .popular-game ul li button:hover {
     background: linear-gradient(180deg, #0657FE, #7F0332);
     border-radius: 0;
     color: #fff;
     transition: 0.5s;
 }

 .popular-game .nav-tabs .nav-item.show .nav-link,
 .nav-tabs .nav-link.active {
     border: 0;
     background: linear-gradient(180deg, #0657FE, #7F0332);
     color: #fff !important;
     border-radius: 0;
 }

 /* PUBLISHING PAGE */

 #publishing {
     background-image: url("../images/publishing-banner.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: right;
     width: 100%;
 }

 .publishing h4 {
     font-size: 14px !important;
     margin: 0;
 }

 .publishing span {
     font-size: 12px !important;
     text-transform: uppercase;
     color: #707070;
 }

 /* OTHER SERVICES PAGE */

 #other-services {
     background-image: url("../images/other-services.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: right;
     width: 100%;
 }

 /* FAQ PAGE */

 #faq {
     background-image: url("../images/faq-banner.webp");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: right;
     width: 100%;
 }

 .faqs .accordion-button:not(.collapsed) {
     color: #000;
     background-color: #fff;
 }

 .faqs .accordion-button:focus {
     border-color: #fff !important;
     box-shadow: none;
 }

 .faqs .accordion-button:not(.collapsed)::after {
     background-image: url("../images/faq-minus.svg") !important;
 }

 .faqs .accordion-button::after {
     background-image: url("../images/faq-plus.png") !important;
 }

 /* CASE STUDIES PAGE */

 #case-studies {
     background-image: url("../images/case-studie-banner.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: right;
     width: 100%;
 }

 .cases .card {
     width: 18r;
 }

 .cases .card-body {
     margin-top: -176px;
     background: rgba(255, 255, 255, .2);
     backdrop-filter: blur(7px);
 }

 .card-body h6,
 h4 {
     font-size: 12px !important;
 }
 .terms___wala ul {
    display: flex;
    list-style: none;
}

.terms___wala ul li {
    flex: 0 0 60%;
}

.terms___wala {
    margin: 10px 0 0 0;
}

.Main_cotnent_terms h2 {
    font-size: 65.856px;
    font-weight: 700;
    color: black;
    margin: 0 0 -10px 0;
    padding: 0;
    text-align: start;
}

.Main_cotnent_terms p {
    font-size: 20px;
    color: black;
    font-weight: 400;
    margin: 0 0 20px 0;
}

.Main_cotnent_terms h3 {
    font-size: 30px;
    color: black;
    margin: 30px 0 20px 0;
    font-weight: 500;
}
.Main_cotnent_terms ul {
    position: relative;
    margin: 0 0 40px 30px;
}

.Main_cotnent_terms ul li {
    color: black;
    margin: 0 0 10px 0;
    font-size: 14px;
}

.Main_cotnent_terms ul li:after {
    content: '';
    display: block;
    background: black;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: relative;
    left: -20px;
    top: -18px;
}