/* @tailwind base;
@tailwind components;
@tailwind utilities; */

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Jost: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=Monoton&display=swap);
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");



* {
    ::selection {
        background-color: #17c1f3 !important;
        /* color: rgb(49, 133, 182) !important;  */
        color: white;
    }
}

.dovelopment {
    margin-top: 9rem;
    height: 60rem;
    width: 50%;
    margin-inline: 20px;
}

@media (max-width:1600px) {

   
    .dovelopment{
       
        margin-left: 4rem;
    }
}    



@media (max-width:992px) {


    .dovelopment {
        margin-top: 9rem;
        height: 60rem;
        min-width: 100vw;
        margin-inline: -6rem;
    }




}

/* Set fixed dimensions for the images */
.splide__slide img {
    width: 100%;
    /* Adjust the width as needed */
    height: 100%;
    /* Maintain aspect ratio */
    max-width: 300px;
    /* Set a maximum width if necessary */
    max-height: 550px;
    /* Set a maximum height if necessary */
    transition: transform 0.5s ease-in-outtion object-fit cover;
    padding: 10px;
}

/* Scale and make visible the middle image */
.middle-image img {
    transform: scale(1.3);
    opacity: 1;
}

/* Hide non-middle images in the current slide */
.splide__slide:not(.splide__slide--active) img:not(.middle-image img) {
    /* opacity: 0.7; */
}

#thumbs,
.casestudies-postion,
.default-btn,
.get,
.main-banner-image,
.preloader,
.section-title,
.test,
.text,
.text-centers {
    text-align: center
}

.flex {
    display: flex;
    flex-wrap: wrap
}

.flex div {
    width: 20%;
    padding: 10px
}

.box-all-game-development,
.flex div img {
    transition: .5s
}

.flex div img:hover {
    scale: 1.1
}

@-webkit-keyframes lds-spinner {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes lds-spinner {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes rotateme {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotateme {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes animationFramesOne {

    0%,
    to {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }

    20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
        transform: translate(73px, -1px) rotate(36deg)
    }

    40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
        transform: translate(141px, 72px) rotate(72deg)
    }

    60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
        transform: translate(83px, 122px) rotate(108deg)
    }

    80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
        transform: translate(-40px, 72px) rotate(144deg)
    }
}

@keyframes animationFramesOne {

    0%,
    to {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }

    20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
        transform: translate(73px, -1px) rotate(36deg)
    }

    40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
        transform: translate(141px, 72px) rotate(72deg)
    }

    60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
        transform: translate(83px, 122px) rotate(108deg)
    }

    80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
        transform: translate(-40px, 72px) rotate(144deg)
    }
}

@-webkit-keyframes moveleftbounce {

    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px)
    }
}

@keyframes moveleftbounce {

    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: translateY(20px);
        -webkit-transform: translateX(20px)
    }
}

@keyframes mymove {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes mymoves {
    0% {
        transform: rotate(360deg)
    }

    to {
        transform: rotate(0)
    }
}

@-webkit-keyframes dice {

    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
}

@keyframes dice {

    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
}

@-webkit-keyframes moveupbounces {

    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
}

@keyframes moveupbounces {

    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .3), 0 0 0 1em rgba(255, 255, 255, .3), 0 0 0 3em rgba(255, 255, 255, .3), 0 0 0 5em rgba(255, 255, 255, .3)
    }

    to {
        box-shadow: 0 0 0 1em rgba(255, 255, 255, .3), 0 0 0 3em rgba(255, 255, 255, .3), 0 0 0 5em rgba(255, 255, 255, .3), 0 0 0 8em transparent
    }
}

@-webkit-keyframes moveupbounce {

    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }
}

@keyframes moveupbounce {

    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }
}

@keyframes livecoins {
    0% {
        transform: translateY(-50px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes livecoin2 {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-50px)
    }
}

.swiper-slide-active {
    opacity: 1 !important
}

body,
p {
    font-family: var(--main-font-family)
}

.default-btn:hover,
.get:hover,
.projects-area.with-black-background .section-title h2,
.projects-item .projects-content h3 a,
.projects-item.bg-F2F1F3 .projects-content h3 a,
.projects-item.bg-F2F1F3:hover .projects-content h3 a,
.services-item .services-content h3 a,
.services-section-content h3,
.single-features-card:hover .content p,
.single-features-card:hover .hover-content p {
    color: var(--white-color)
}

/* .get{
    background-color: var(--btn_col);
} */

.devletters .letter,
.ml6 .letter,
.preloader .lds-spinner,
a,
img {
    display: inline-block
}

.about-wrap-content,
.projects-section-content .projects-bg-text,
.section-title .section-bg-text,
.services-section-content .services-bg-text {
    font-weight: 400;
    font-family: var(--monoton-font-family);
    overflow: hidden
}

.footer-contact li a,
a,
a:focus,
a:hover {
    text-decoration: none
}

button,
iframe {
    outline: 0 !important
}

#thumbs .item,
.card,
.cursor,
.get,
.height-content,
.pointer,
.projects-filter-menu li,
.rounded-border,
.top {
    cursor: pointer
}

#donomonk1,
#donomonk2,
#donomonk3 {
    background-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat
}

::-webkit-scrollbar {
    width: 12px;
    height: 10px !important
}

::-webkit-scrollbar-track {
    background-color: #d8d8d8
}

::-webkit-scrollbar-thumb {
    background-image: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%);
    height: 1em !important
}

html {
    font-size: 62.5%
}

body {
    background-position-y: 8rem !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0;
    font-size: var(--paragraph-size);
    overflow: auto !important
}

.gif-prodigy {
    position: fixed;
    right: 0;
    top: 86px;
    z-index: -999;
    height: 450px
}

.default-btn,
.get {
    z-index: 0;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

#thumbs,
.br,
.girl-2,
.projects-item .projects-image a,
.services-item .services-image a,
.test,
iframe {
    display: block
}

:root {
    --main-font-family: "Open Sans", sans-serif;
    --heading-font-family: Jost, sans-serif;
    --monoton-font-family: Monoton, cursive;
    --main-color: #38e8fe;
    --optional-color: #3e019a;
    --white-color: #fff;
    --btn_col: #16C1F3;
    --black-color: #14042c;
    --paragraph-color: #888;
    --paragraph-size: 1.5rem;
    --main-heading: 3.4rem;
    --main-heading-line-height: 1.3;
    --sub-heading: 2.2rem;
    --transition: .6s;
    --all-box: 2rem;
    --case-study-main-heading: 3.4rem;
    --btn-gradient-color: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%);
    --big-heading-main: 14rem;
    --small-heading-main: 9rem;
    --big-heading: 9rem;
    --small-heading: 5rem
}

@font-face {
    font-display: swap;
    font-family: KoHo;
    src: url(../font/costumefont.ttf)
}

.costume {
    font-family: KoHo;
    position: relative;
    top: 35px;
    left: -89px;
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px
}

.get,
p {
    font-size: var(--paragraph-size)
}

a {
    -webkit-transition: var(--transition);
    transition: var(--transition);
    color: var(--black-color)
}

.services-item:hover .services-content h3 a,
a:focus,
a:hover {
    color: var(--main-color);
}

p {
    line-height: 1.8;
    color: var(--paragraph-color);
    font-weight: 600;
    padding: 4px 0
}

.h1:last-child,
.h2:last-child,
.h3:last-child,
.h4:last-child,
.h5:last-child,
.projects-details-desc .article-projects-content .content p,
.projects-details-desc .article-projects-content .projects-list li:last-child,
.projects-details-desc .article-projects-with-info .projects-info-content .info-list li:last-child,
.projects-section-content p,
.single-features-card .content p,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
p:last-child {
    margin-bottom: 0
}

i {
    line-height: normal
}

#player-container,
#player-container2,
.d-table {
    width: 100%;
    height: 100%
}

.d-table-cell {
    vertical-align: middle
}

img {
    max-width: 100%;
    height: auto
        /* max-width: 100%;
    height: auto;
    position: relative;
    bottom: -70px; */
}

.boy {

    max-width: 100%;
    height: auto;
    position: relative;
    bottom: 4rem;
}


.boys {

    max-width: 90%;
    height: auto;
    position: relative;
    bottom: -13rem;
    right: -1.9rem;
}



/* 
.boy {

    max-width: 100%;
    height: auto;
    position: relative;
    bottom: -18rem;
}


.boys {

    max-width: 100%;
    height: auto;
    position: relative;
    bottom: -16rem;
    right: -1.6rem;
} */

@media(max-width:600px){
 
    .boys{
    bottom: -6.9rem; 
    right: -2rem;

    }
}


@media(max-width:1600px){
 
    .boys{
    bottom: -8.9rem; 
    right: -2.2rem;

    }
}


@media(max-width:800px){
 
    .boys{
    bottom: -8.9rem; 
    right: -14rem;

    }
}



.pl-50 {
    padding-left: 50px
}

.pr-50 {
    padding-right: 50px
}

.single-footer-widget.ps-5 {
    padding-left: 40%;
}

::-moz-selection {
    background: var(--btn-gradient-color);
    color: #fff
}

::selection {
    /* background: #38e8fe; */
    /* color: #fff */
}

.pt-50 {
    padding-top: 20px !important
}

.pt-100,
.ptb-100 {
    padding-top: 100px
}

.pb-50 {
    padding-bottom: 50px !important
}

.pb-100,
.ptb-100 {
    padding-bottom: 100px
}

.h1,
.h2,
.h3,
.h4,
.h5,
h1,
h2,
h3,
h4,
h5 {
    color: var(--black-color);
    font-family: var(--heading-font-family);
    font-weight: 800;
    padding-bottom: 10px 0
}

.get,
.get:hover {
    color: #fff !important
}

.get {
    padding: 10px 35px;
    font-weight: 600;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: var(--heading-font-family);
    background: 0 0 !important;
    border: 2px solid #fff !important
}

.default-btn:before,
.get::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 550px;
    height: 550px;
    margin: auto;
    background-color: #00c2ff;
    border-radius: 50%;
    z-index: -1;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) translateY(-5%) scale(.4);
    transform: translateX(-50%) translateY(-5%) scale(.4);
    -webkit-transition: -webkit-transform .9s;
    transition: transform .9s;
    transition: transform .9s, -webkit-transform .9s
}

.services-area.margin-zero {
    background-color: var(--black-color)
}

.get:hover {
    border: 2px solid #00c2ff !important
}

.default-btn:hover:before,
.get:hover:before {
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform: translateX(-40%) translateY(0) scale(1);
    transform: translateX(-40%) translateY(0) scale(1);
    -webkit-transform-origin: top center;
    transform-origin: top center;

}

.big-heading-main-404 {
    font-size: 25rem;
    font-family: var(--monoton-font-family);
    color: #846aa9;
    font-weight: 100
}

.default-btn,
.main-banner-content span,
.projects-details-desc .article-projects-with-info .projects-info-content span,
.projects-filter-menu li {
    font-weight: 600;
    font-family: var(--heading-font-family)
}

.background,
.bg p,
.p-404,
.service-home-button a:hover,
.single-features-card:hover .content h3 a {
    color: #fff
}

.small-heading-404 {
    font-size: 4rem;
    color: #fff
}

.only-404,
.p-404 {
    font-size: 2rem
}

.only-404 {
    padding: 20px 100px
}

.default-btn {
    padding: 15.8px 35px;
    color: #fff !important;
    font-size: var(--paragraph-size);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--btn-gradient-color);
    -webkit-box-shadow: none;
    box-shadow: none
}

.bg-img,
.main-banner-area {
    background-size: cover;
    overflow: hidden
}

.section-title {
    margin: 0 auto 45px;
    position: relative
}

.section-title .section-bg-text {
    color: #dddd;
    font-size: 95px;
    line-height: 1
}

.about-wrap-content span,
.projects-section-content span,
.section-title span,
.services-section-content span {
    font-size: var(--paragraph-size);
    color: var(--main-color);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 15px;
    font-family: var(--heading-font-family)
}

.section-title h2 {
    font-size: var(--main-heading);
    margin-bottom: 0;
    line-height: var(--main-heading-line-height);
    position: relative
}

.section-title h2 b,
.services-section-content h3 b {
    background: radial-gradient(circle, #a66bff, #c666ef, #dd62df, #ee61cf, #fb64bf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.section-title h2 .overlay {
    position: absolute;
    top: 0;
    background: var(--btn-gradient-color);
    width: 50%;
    height: 100%;
    z-index: 1;
    left: 25%
}

.section-title p {
    margin-top: 15px
}

.main-banner-content .banner-btn,
.section-title.section-style-two {
    margin-top: 30px
}

.preloader {
    position: fixed;
    z-index: 999999;
    background-color: var(--white-color);
    width: 100%;
    height: 100%;
    left: 0;
    right: 0
}

.preloader .lds-spinner {
    color: official;
    position: relative;
    width: 80px;
    height: 80px
}

.preloader .lds-spinner div {
    -webkit-transform-origin: 40px 40px;
    transform-origin: 40px 40px;
    -webkit-animation: 1.2s linear infinite lds-spinner;
    animation: 1.2s linear infinite lds-spinner
}

.preloader .lds-spinner div::after {
    content: " ";
    display: block;
    position: absolute;
    top: 5px;
    left: 35px;
    width: 5px;
    height: 20px;
    border-radius: 20%;
    background: var(--main-color)
}

.preloader .lds-spinner div:first-child {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

.preloader .lds-spinner div:nth-child(2) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

.preloader .lds-spinner div:nth-child(3) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s
}

.preloader .lds-spinner div:nth-child(4) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

.preloader .lds-spinner div:nth-child(5) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    -webkit-animation-delay: -.7s;
    animation-delay: -.7s
}

.preloader .lds-spinner div:nth-child(6) {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}

.preloader .lds-spinner div:nth-child(7) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-animation-delay: -.5s;
    animation-delay: -.5s
}

.preloader .lds-spinner div:nth-child(8) {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}

.preloader .lds-spinner div:nth-child(9) {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
    -webkit-animation-delay: -.3s;
    animation-delay: -.3s
}

.preloader .lds-spinner div:nth-child(10) {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-animation-delay: -.2s;
    animation-delay: -.2s
}

.preloader .lds-spinner div:nth-child(11) {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
    -webkit-animation-delay: -.1s;
    animation-delay: -.1s
}

.preloader .lds-spinner div:nth-child(12) {
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg);
    -webkit-animation-delay: 0;
    animation-delay: 0
}

.main-banner-area {
    position: relative;
    z-index: 1;
    background-image: url(../../assets/images/main-banner/banner-bg.webp) !important;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 12px !important
}

#threedart,
#twodenviroment,
.career-slides .owl-nav,
.mobile-visible,
.show {
    display: none
}

.main-banner-area .container-fluid {
    padding-left: 30px;
    padding-right: 30px
}

.main-banner-content {
    position: relative;
    z-index: 3;
    padding: 10px 10px;
}

.main-banner-content span {
    font-size: var(--paragraph-size);
    color: #fdb40d;
    display: block;
    margin-bottom: 20px
}

.main-banner-content h1,
.main-banner-content p {
    margin-bottom: 0;
    position: relative
}

.about-wrap-content h3 .overlay,
.main-banner-content h1 .overlay,
.main-banner-content p .overlay,
.projects-details-desc .article-projects-with-info .projects-info-content h3 .overlay,
.projects-section-content h3 .overlay,
.services-section-content h3 .overlay {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--btn-gradient-color);
    width: 100%;
    height: 100%;
    z-index: 1
}

.projects-item.bg-F2F1F3::before {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--btn-gradient-color)
}

.main-banner-content p {
    margin-top: 1.8rem;
    max-width: 825px;
    color: #fff;
    text-align: justify;

}

@media (max-width: 1550px) {
    .main-banner-content p {
        margin-top: 2rem;
        max-width: 525px;
        color: #fff;
        text-align: justify;
    }
}






.main-banner-area .main-banner-image {
    position: relative;
    z-index: 1;
    top: 13px;
    left: 15%
}

.banner-dot-shape-1,
.banner-dot-shape-2,
.banner-shape-1,
.banner-shape-2,
.rotation,
.toprotation,
.toprotationbig {
    position: absolute;
    z-index: -1
}

#mainbanner {
    transform: scale(0);
    transform-origin: bottom right;
    transition: 3s;
    aspect-ratio: 1.66
}

.main-banner-image.animate {
    transform: scale(1)
}

.banner-dot-shape-1,
.big-casino,
.second-square {
    -webkit-transform: translateY(-20%) translateX(-50%)
}

.banner-shape-1 {
    top: -175px;
    left: -90px;
    -webkit-animation: 3s linear infinite moveleftbounce;
    animation: 3s linear infinite moveleftbounce;
    opacity: .3
}

.banner-shape-2 {
    bottom: 200px;
    right: -50px;
    -webkit-animation: 10s linear infinite animationFramesOne;
    animation: 10s linear infinite animationFramesOne
}

.banner-dot-shape-1,
.big-casino,
.facebook-snake,
.second-square {
    -webkit-animation: 25s linear infinite animationFramesOne
}

.banner-dot-shape-1 {
    top: 20%;
    left: 50%;
    transform: translateY(-20%) translateX(-50%);
    animation: 25s linear infinite animationFramesOne;
    opacity: .2
}

.banner-dot-shape-2,
.facebook-circle {
    -webkit-animation: 10s linear infinite animationFramesOne
}

.banner-dot-shape-2 {
    top: 15%;
    left: 5%;
    -webkit-transform: translateY(-15%) translateX(-5%);
    transform: translateY(-15%) translateX(-5%);
    animation: 10s linear infinite animationFramesOne;
    opacity: .2
}

.banner-dot-shape-3,
.banner-dot-shape-5,
.banner-dot-shape-6,
.banner-dot-shape-7 {
    -webkit-animation: 20s linear infinite animationFramesOne;
    position: absolute
}

.banner-dot-shape-3,
.banner-dot-shape-4 {
    bottom: 40%;
    left: 35%;
    -webkit-transform: translateY(-10%) translateX(-35%);
    transform: translateY(-10%) translateX(-35%);
    animation: 20s linear infinite animationFramesOne;
    z-index: -1;
    opacity: .2
}

.banner-dot-shape-4 {
    position: absolute;
    bottom: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    -webkit-animation: 15s linear infinite animationFramesOne;
    animation: 15s linear infinite animationFramesOne
}

.banner-dot-shape-5,
.banner-dot-shape-6,
.banner-dot-shape-7 {
    -webkit-transform: translateY(-20%) translateX(-10%);
    z-index: -1;
    opacity: .2;
    transform: translateY(-20%) translateX(-10%);
    animation: 20s linear infinite animationFramesOne
}

.banner-dot-shape-5 {
    top: 20%;
    right: 10%
}

.banner-dot-shape-6 {
    bottom: 40%;
    left: 50%
}

.banner-dot-shape-7 {
    top: 10%;
    left: 20%
}

.banner-dot-shape-8 {
    position: absolute;
    bottom: 30%;
    left: 10%;
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%);
    -webkit-animation: 20s linear infinite animationFramesOne;
    animation: 20s linear infinite animationFramesOne;
    z-index: -1;
    opacity: .2
}

.about-area,
.service-home-game-dev-area,
.services-details-area {
    position: relative;
    overflow: hidden;
    margin-top: 0px
}

.about-wrap-content {
    position: relative;
    z-index: 1;
    padding-left: 45px
}

.projects-item,
.services-item {
    /* padding: 10px; */
    border-radius: 15px;
    width: fit-content;
}

.about-wrap-content .about-bg-text {
    font-size: 3.4rem;
    line-height: 1;
    font-family: var(--main-font-family);
    font-weight: 700;
    color: #000
}

.about-wrap-content h3 {
    font-size: var(--small-heading) !important;
    color: #16c1f3;
    text-transform: capitalize;
    margin: 2rem 0 .8rem;
    font-weight: 600
}

@media (max-width: 1400px) {
    .about-wrap-content h3 {
  
        margin: 13rem 0 .8rem;
        
    }
}





.projects-section-content h3,
.services-section-content h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    line-height: var(--main-heading-line-height);
    position: relative
}

.about-circle-shape {
    position: absolute;
    top: 50%;
    left: 5%;
    -webkit-transform: translateY(-50%) translateX(-5%);
    transform: translateY(-50%) translateX(-5%)
}

.about-circle-shape video {
    width: 120px
}

.ludo-game-iframe {
    height: 380px;
    margin-top: 20px
}

.services-area {
    overflow: hidden;
    z-index: 1;
    margin-top: 12px
}

.services-area .container-fluid {
    overflow: hidden;
    left: calc((100% - 1320px)/ 2);
    position: relative
}

.projects-area.style-two-area .container-fluid {
    overflow: hidden;
    padding: 35px 0;
    position: relative;
    background: #f9f8f8
}

.projects-section-content .service-new li {
    width: 53%;
    margin-left: auto
}

.projects-area.with-black-background .section-title p,
.services-section-content p {
    color: #cdc4d9
}

#big.owl-theme,
#casestudybanner,
#facebookbanner,
#htmlbanner,
#metaverse,
#thumbs,
#thumbs.owl-theme,
#unitybanner,
#unrealbanner,
.border-0 h1 span,
.border-right,
.common-icon-class,
.facebook-cristle,
.ludoimg,
.plus,
.poker-product,
.projects-section-content,
.projects-slides-two-client,
.projects-slides-two-left-right,
.projects-slides-two-new,
.rounded-border,
.services-area,
.services-section-content,
.slot-product,
.top,
.walkmen,
iframe {
    position: relative;



}

/* position: relative; */
/* margin: auto;
    width: 67%; */



.services-section-content .services-bg-text {
    color: #392556;
    font-size: 9.5rem;
    line-height: 1
}

.projects-section-content .projects-section-btn,
.services-section-content .services-section-btn {
    margin-top: 25px
}

.services-item,
.services-item .services-image a img,
.single-features-card .content,
.single-features-card .content p,
.single-features-card .hover-content .features-btn {
    -webkit-transition: var(--transition);
    transition: var(--transition)
}

.services-item {
    background-color: #2e2141;
    margin: 20px 0;
    position: relative
}

.services-game-development {
    background-color: #fff;
    box-shadow: 0 3px 10px #000
}

.projects-details-desc .article-projects-content .image,
.projects-item .projects-image,
.services-item .services-image {
    overflow: hidden;
    border-radius: 15px
}

#thumbs,
.beeline,
.casino-case,
.coloum2 a:first-child,
.die,
.election,
.gameportal,
.gamix,
.gunman,
.kinect-banner,
.letterstack,
.livecasino,
.main-banner-ludo img,
.milo,
.minesweeper,
.nft,
.pool,
.prodigy,
.services-item .services-image a img,
.tug,
.wheel,
.worldcasino,
.zilla {
    width: 100%
}

.services-item .services-content {
    padding: 30px 15px 20px
}

.projects-item .projects-content h3,
.services-item .services-content h3 {
    font-size: var(--sub-heading);
    font-weight: 700
}

.services-item .services-content h3 {
    margin-bottom: 15px
}

.services-item .services-content p {
    color: #cdc4d9;
    margin-bottom: 0
}

.services-item .services-content .services-btn {
    background: var(--btn-gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin-top: 20px;
    font-family: var(--heading-font-family);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    position: relative
}

.projects-item .projects-content .projects-btn::before,
.services-item .services-content .services-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    width: 20px;
    height: 3px;
    background: var(--btn-gradient-color);
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: var(--transition);
    transition: var(--transition)
}

.projects-item:hover .projects-content .projects-btn,
.services-item:hover .services-content .services-btn,
.single-features-card .hover-content .features-btn:hover {
    padding-left: 25px
}



@media (max-width: 600px) {
    .projects-item:hover .projects-content .projects-btn,
    .services-item:hover .services-content .services-btn,
    .single-features-card .hover-content .features-btn:hover {
        padding-left: 35px
    }
    
}




.projects-item:hover .projects-content .projects-btn::before,
.services-item:hover .services-content .services-btn::before,
.single-features-card .hover-content .features-btn:hover::before,
.single-features-card:hover .hover-content {
    opacity: 1;
    visibility: visible
}

.projects-details-desc .article-projects-content .image:hover img,
.projects-item:hover .projects-image a img,
.services-item:hover .services-image a img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.projects-filter-menu li,
.single-features-card .content h3 a,
.single-features-card .hover-content h3 a {
    color: var(--black-color)
}

.services-details-desc {
    max-width: 1100px;
    margin: auto
}

.projects-area {
    overflow: hidden;
    position: relative
}

.projects-area.with-black-background {
    background-color: var(--black-color);
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 15px;
    overflow: hidden;
    padding-top: 200px
}

.projects-area.with-black-background .container-fluid,
.testimonials-area .container-fluid {
    padding-left: 0;
    padding-right: 0
}

.projects-item {
    background-color: red;
    margin-bottom: 25px
}

.projects-details-desc .article-projects-content .image img,
.projects-filter-menu li,
.projects-item .projects-image a img {
    border-radius: 15px;
    -webkit-transition: var(--transition);
    transition: var(--transition)
}

.projects-image a img,
.projects-image img {
    border-radius: 1rem !important
}

.projects-item .projects-content {
    padding: 30px 20px 20px
}

.projects-item .projects-content h3 {
    margin-bottom: 18px
}

.projects-item .projects-content .projects-btn {
    background: var(--btn-gradient-color);
    font-weight: 700;
    font-family: var(--heading-font-family);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    position: relative
}

.projects-item.bg-F2F1F3 {
    background-color: #fff;
    position: relative;
    z-index: 1;
    overflow: hidden;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, .25))
}

.projects-item.bg-F2F1F3::before {
    content: "";
    width: 0;
    height: 0;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    border-radius: 50%;
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

.projects-item.bg-F2F1F3 .projects-content .projects-btn {
    background: var(--main-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.projects-item.bg-F2F1F3 .projects-content .projects-btn::before {
    background: var(--main-color);
    opacity: 0;
    visibility: hidden
}

.projects-item.bg-F2F1F3:hover::before {
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible
}

.projects-item.bg-F2F1F3:hover .projects-content .projects-btn {
    background: var(--btn-gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff
}

.projects-item.bg-F2F1F3:hover .projects-content .projects-btn::before {
    background: #fff;
    opacity: 1;
    visibility: visible
}

.projects-filter-menu {
    list-style-type: none;
    padding: 0;
    text-align: center;
    width: 100%;
    margin-bottom: 80px
}


.projects-filter-menu li {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--white-color);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .16);
    box-shadow: 0 0 6px rgba(0, 0, 0, .16);
    font-size: 1.8rem;
    margin-right: 10px
}

.projects-filter-menu li:last-child {
    margin-right: 0
}

.projects-filter-menu .list.active {
    background: #2ebbcb;
    color: var(--white-color)
}

.projects-filter-menu_new {
    list-style-type: none;
    padding-top: 19rem;
    text-align: center;
    width: 100%;
    margin-bottom: 37px;
}

.projects-filter-menu_new li {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--white-color);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .16);
    box-shadow: 0 0 6px rgba(0, 0, 0, .16);
    font-size: 1.8rem;
    margin-right: 10px
}

.projects-filter-menu_new li:last-child {
    margin-right: 0
}

.projects-filter-menu_new .list.active {
    background: #2ebbcb;
    color: var(--white-color)
}


.projects-section-content .projects-bg-text {
    color: #dddd;
    font-size: 9.5rem;
    line-height: 1
}

.projects-details-desc .article-projects-with-info .projects-info-content {
    padding-left: 20px
}

.projects-details-desc .article-projects-with-info .projects-info-content span {
    font-size: var(--paragraph-size);
    color: var(--main-color);
    display: inline-block
}

.projects-details-desc .article-projects-with-info .projects-info-content h3 {
    font-size: var(--main-heading);
    margin-bottom: 0;
    line-height: 1.4;
    position: relative
}

.projects-details-desc .article-projects-with-info .projects-info-content .info-list {
    padding: 0;
    margin-top: 25px;
    width: 80%;
    margin-bottom: 0;
    display: inline-block
}

.projects-details-desc .article-projects-with-info .projects-info-content .info-list li {
    font-family: var(--heading-font-family);
    width: 100%;
    font-size: 2rem;
    font-weight: 400;
    color: var(--paragraph-color);
    list-style-type: none;
    margin-bottom: 15px;
    display: block;
    padding: 20px 30px;
    border-radius: 50px;
    background-color: var(--white-color);
    -webkit-box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .1)
}

.projects-details-desc .article-projects-with-info .projects-info-content .info-list li span {
    color: #000;
    font-weight: 700;
    margin-bottom: 0;
    font-size: 2rem
}

.projects-details-desc .article-projects-content {
    padding-top: 35px
}

.projects-details-desc .article-projects-content .content h3 {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 18px
}

.projects-details-desc .article-projects-content .projects-list {
    padding: 0;
    margin-top: 30px;
    margin-bottom: 0
}

.projects-details-desc .article-projects-content .projects-list li {
    list-style-type: none;
    margin-bottom: 20px;
    color: var(--paragraph-color);
    position: relative;
    padding-left: 25px;
    font-weight: 500
}

.projects-details-desc .article-projects-content .projects-list li:first-child {
    padding-left: 0
}

.projects-details-desc .article-projects-content .projects-list li i {
    position: absolute;
    left: 0;
    top: 2.8px;
    font-size: 18px;
    color: #a66bff
}

.projects-details-desc .article-projects-content .projects-list li h4 {
    font-size: var(--sub-heading);
    font-weight: 800;
    margin-bottom: 0
}

.pk-content,
.projects-list {
    padding: 0
}

.single-testimonials-card p {
    font-weight: 400;
    color: var(--black-color);
    font-family: var(--heading-font-family);
    background-color: #f2f1f3;
    padding: 30px;
    border-radius: 25px 25px 25px 0;
    font-size: 1.6rem
}

.button-see a,
.services-contents p {
    font-family: var(--main-font-family)
}

.projects-details-desc .article-projects-text {
    padding-top: 35px;
    padding-right: 30px
}

.projects-details-desc .article-projects-text h3 {
    font-size: var(--sub-heading);
    font-weight: 800;
    margin-bottom: var(--sub-heading)
}

.main-heading {
    font-size: var(--main-heading);
    padding-bottom: 10px
}

.services-details-desc .article-services-content h3,
.sub-heading {
    font-size: var(--sub-heading)
}

.all-box,
.rounded-border h4 {
    font-size: var(--all-box)
}

.case-study-heading {
    font-size: var(--case-study-main-heading) !important;
    padding-bottom: 5px
}

.testimonials-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 80%;
    margin: auto
}

.single-testimonials-card {
    margin-bottom: 25px
}

.features-inner-box {
    position: relative;
    margin-top: -50px;
    z-index: 1
}

.single-features-card {
    background-color: var(--white-color);
    -webkit-box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
    padding: 25px 25px 25px 140px;
    border-radius: 15px;
    position: relative;
    z-index: 1;
    overflow: hidden
}

.single-features-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    background: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    border-radius: 50%;
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

.single-features-card .features-image {
    position: absolute;
    left: 25px;
    top: 22px;
    max-width: 90px
}

.single-features-card .content h3,
.single-features-card .hover-content h3 {
    font-size: var(--sub-heading);
    font-weight: 700;
    margin-bottom: 14px
}

.single-features-card .hover-content,
.single-features-card .hover-content .features-btn::before {
    position: absolute;
    top: 45px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: var(--transition);
    transition: var(--transition)
}

.single-features-card .hover-content .features-btn::before {
    content: "";
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    width: 20px;
    height: 3px;
    background: #fff;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 5px
}

.border-after::after,
.border-before::after {
    width: 1px;
    height: 70px;
    right: 0;
    top: 20%;
    content: "";
    display: block
}

.single-features-card .hover-content .features-btn {
    background: var(--btn-gradient-color);
    -webkit-background-clip: text;
    font-weight: 700;
    font-family: var(--heading-font-family);
    position: relative
}

.single-features-card:hover::before {
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 100%
}

.single-features-card:hover .content {
    opacity: 0;
    visibility: hidden
}

.single-features-card:hover .hover-content h3 a {
    color: #fff !important
}

.w-60 {
    width: 60%
}

.mt-100 {
    margin-top: 100px
}

.pr-5 {
    padding-right: 86px
}

.bottomtoup {
    transition: .4s ease-in-out .3s;
    position: relative
}

.bottomtoup:hover,
.rounded-border:hover img {
    transform: translateY(-10px)
}

.gray {
    filter: gray;
    -webkit-filter: grayscale(1);
    -webkit-transition: .1s ease-in-out
}

.gray:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1)
}

.bg-img {
    background-position: center;
    background-image: url(../images/bg-img.png);
    padding: 5rem 0;
    height: 83vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-repeat: no-repeat;
    margin-top: -41px;
    background-size: cover;
    /* Ensure the background image covers the entire container */
}

@media (max-width: 600px) {
    .bg-img {
        height: 46vh;
        background-size: contain;
    }
}




/* .bg-img div video {
    width: 100%;
    border: 1rem solid #fff;
    border-radius: 2.5rem
} */

.align-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.border-before::after {
    background-color: #26d1fc;
    position: absolute
}

.border-after::after {
    background-color: #fff;
    position: absolute
}

.border-right p {
    font-size: 9rem
}

.border-0 h1 span {
    right: -2%
}

.blue {
    font-size: var(--paragraph-size);
    font-weight: 600;
    margin-bottom: 15px;
    font-family: var(--heading-font-family);
    color: #26d1fc
}

.border-right h5 {
    font-size: 2.5rem
}

.footer-contact {
    list-style: none !important;
    color: #b3a8c0;
    padding: 0
}

.footer-contact li a {
    color: #cdc4d9 !important
}

.icon-font {
    font-size: 23px
}

.square {
    background-color: #2fdefd;
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-right: 20px;
    flex: 0 0 7px
}

.rounded-border {
    border-radius: 25px;
    padding: 35px 25px !important;
    height: 350px;
    font-size: var(--all-box);
    transition: .5s ease-in-out .1s;
    background-color: #f9f9f9
}

.rounded-border h4 {
    margin: 10px 0
}

.rounded-border h5 {
    font-size: 20px
}

.rounded-border p {
    color: #646464;
    font-weight: 600;
    line-height: 1.5;
    padding: 0 35px
}

.services-contents h1,
.test {
    font-weight: 700
}

.rounded-border:hover {
    box-shadow: 0 11px 20px rgb(123 149 162/15%);
    background-color: #fff;
    border: 0
}

.box-all-game-development:hover,
.height-content:hover {
    box-shadow: 0 0 23px 8px rgba(0, 0, 0, .07);
    background-color: #f5f5f5 !important
}

.rounded-border:hover h4 {
    color: #38e8fe
}

.our_work_main p,
.rounded-border:hover p {
    color: #000
}

.plus {
    left: -25px;
    bottom: 5px
}

.swiper-wrapper {
    align-items: center
}

.swiper-slide img {
    transform: scale(.9)
}

.swiper-slide {
    /* opacity: .5;
    color: #000 */
}

.mobile {
    z-index: 2
}

.walkmen {
    width: 210px;
    bottom: -10px;
    overflow: hidden
}

.top {
    margin-left: auto;
    display: block;
    top: 35px;
    z-index: 5
}

.bg {
    background: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%);
    padding: 15px 0;
    color: #fff
}

#casinobanner,
#facebookbanner,
#htmlbanner,
#livecasino,
#unitybanner,
#unrealbanner,
.gamix,
.gunman,
.ludo-product,
.poker-product,
.pool,
.slot-product {
    background-size: cover;
    background-position: center
}

#facebookbanner,
#htmlbanner,
#kinect_game,
#unitybanner,
.common-bg {
    background-color: #f6f6f6
}

.arrange-video {
    width: 100%;
    height: 458px
}

#facebookbanner,
.gamix,
.ludo-product {
    height: 700px
}

.itemBox {
    margin: 5px
}

.test {
    margin: auto;
    color: #030303;
    font-size: 1.8rem
}

.case-study-new-heading,
.main-heading-casestudy {
    font-family: var(--monoton-font-family) !important;
    font-weight: 400 !important;
    line-height: 1;
    /* color: blue; */



}


.para {
    text-align: center;
    max-width: 60vw;
    margin: auto;
}



@media(max-width:600px) {
    .para {
        text-align: center;
        max-width: 100vw;

    }

}


iframe {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    border: 0 !important;
    background-color: #fff
}

.job-box .borders {
    border: 2px solid #ebebeb !important;
    border-radius: 25px
}

.marginequal {
    margin-top: 15px;
    padding: 0 20px
}

.marginequal_new {
    margin-top: -5px;
    padding: 0 8px
}

.addcolor {
    color: #2fdefd
}

.ludo-product,
.poker-product {
    background-image: url(../images/product/Ludo/LudoBanner1.jpg);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.poker-product {
    background-image: url(../images/product/PokerGame/Pokerbanner1.jpg);
    overflow-x: hidden
}

.slot-product {
    background-image: url(../images/product/Slot-game/Slot-banner.jpg);
    width: 100%
}

.land-slot-banner {
    background-image: url(../images/product/land-slot/land-slot-game.png);
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 11px;
    padding-bottom: 75px;

}

.land-slot-banner .small-heading {
    font-size: 40px;
}

.ludo-character,
.slot-arrange {
    position: absolute;
    bottom: 0;
    left: 0
}

.pool {
    background-image: url(../images/product/8pool-game/poolbg.jpg)
}

.gunman {
    background-image: url(../images/product/Gumman/gunman-battle_bg.jpg)
}

.gamix {
    background-image: url(../images/product/Game-Portal/bg_gamix.jpg);
    padding-top: 50px
}

.beeline,
.casino-case,
.die,
.election,
.gameportal,
.kinect-banner,
.letterstack,
.livecasino,
.milo,
.minesweeper,
.nft,
.prodigy,
.tug,
.wheel,
.worldcasino,
.landslot,
.zilla {
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat
}

.ludo,
.pool-content {
    left: 6%;
    padding: 100px;
    position: relative
}

.androidhtml,
.arrange-cat,
.arrange-game,
.arrange-monkey,
.cat-character,
.circle-number,
.coins-rummy img,
.dice,
.facebook-casino,
.facebook-circle,
.facebook-cross,
.facebook-square,
.game_development_position,
.gamix-image-content,
.girl,
.ludoboard,
.mobile,
.posleft-25,
.posleft-30,
.second-layer,
.tablet,
.text,
.unreal-phone {
    position: absolute
}

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

.ludoimg {
    overflow: hidden;
    width: 1250px
}

.pooker-content {
    display: flex;
    justify-content: right;
    align-items: center;
    z-index: 9
}

.para-gamix {
    width: 490px
}

.girl {
    top: 35px;
    right: -10px;
    bottom: 0;
    z-index: 0;
    height: 100%
}

.gamix-image-content {
    top: 50px;
    left: 50%;
    transform: translate(-50%)
}

.right-align {
    text-align: right
}

#facebookbanner,
#unitybanner {
    background-image: url(../images/game-development/Facebook/facebookbanner.png);
    padding-top: 72px;
    z-index: 0
}

#unitybanner {
    height: 600px;
    background-image: url(../images/game-development/unity-game-development/unity-banner.jpg);
    margin-top: 12px
}

#mobile-game {
    background-color: #31065a;
    z-index: 0;
    margin-top: 12px
}

#console-game {
    background-color: #1d0552;
    z-index: 0;
    margin-top: 12px
}

#pc-game-development {
    background-color: #17003e;
    margin-top: 12px
}

#unrealbanner {
    background-color: #02104d;
    z-index: 0;
    margin-top: 12px
}

.box-all-game-development:hover {
    transition: 1s
}

.unreal-animations {
    max-height: 650px;
    transform: rotate(0);
    transition: 2s;
    width: 100%
}

.unreal-animations:hover {
    transform: rotate(2deg)
}

.unreal-phone {
    top: 0;
    z-index: 999;
    left: 25%;
    width: 60%;
    transform: translateX(0, 20%)
}

#casestudybanner {

    background-color: #6165d7 !important;
    background-size: cover;
    width: 100%;
    height: 400px;
    padding-top: 0;
    z-index: -555;
    overflow: hidden;
    margin-top: 12px
}

.casestudybanner_new {
    position: relative;
    /* background-image: url("../images/casestudy/banner.svg"); */
    /* background-image: url("../images/casestudy/machine.mp4"); */


    background-repeat: no-repeat;
    background-size: contain;


    width: 100%;
    height: 850px;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}





.casestudybanner_2d {
    position: relative;
    background-image: url("../images/casestudy/2d-banner.svg");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}








.game_object_banner_9 {
    position: relative;
    background-image: url("../images/casestudy/banner.jpg");


    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}


@media (max-width: 1600px) {
    .game_object_banner_9 {
        background-image: url("../images/casestudy/banner.jpg");


        background-size: contain;
        background-repeat: no-repeat;
        height: auto;
        /* background-position: center; */
        /* scale: 0.9; */



    }


}

@media (max-width: 500px) {
    .game_object_banner_9 {
        background-image: url("../images/casestudy/banner.jpg");


        background-size: cover;
        background-repeat: no-repeat;
        height: auto;



    }


}







/* https://storage.googleapis.com/gamixlabs-website/website/assets/ */
.game_object_banner_1 {
    position: relative;
    background-image: url("../images/casestudy/art_1/2D-Art.png");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}


@media (max-width: 1600px) {
    .game_object_banner_1 {
        background-image: url("../images/casestudy/art_1/2D-Art.png");


        background-size: contain;
        background-repeat: no-repeat;
        height: auto;
        /* background-position: center; */
        /* scale: 0.9; */



    }


}

@media (max-width: 500px) {
    .game_object_banner_1 {
        background-image: url("../images/casestudy/art_1/2D-Art-mobile.png");

        background-size: contain;
        background-repeat: no-repeat;
        height: auto;



    }


}



.game_object_banner_2 {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/2d-Character.png");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}



@media (max-width: 1600px) {
    .game_object_banner_2 {
        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/2d-Character.png");

        /* background-position: center; */
        /* scale: 0.9; */
        /* background-size: contain; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

        /* min-height: auto; */





    }


}

@media (max-width: 500px) {
    .game_object_banner_2 {
        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/2d-Character_mobile.png");
        /* background-position: center; */
        /* scale: 0.9; */
        /* background-size: contain; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

        /* min-height: auto; */





    }


}




.game_object_banner_3 {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/Game_Ui_UX.png");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}

@media (max-width: 1600px) {
    .game_object_banner_3 {

        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/Game_Ui_UX.png");

        /* background-position: center; */
        /* scale: 0.9; */
        /* background-size: contain; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

        /* min-height: auto; */




    }


}

@media (max-width: 500px) {
    .game_object_banner_3 {

        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/game_ui_ux_mobile.png");
        /* background-position: center; */
        /* scale: 0.9; */
        /* background-size: contain; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

        /* min-height: auto; */




    }


}









.game_object_banner_4 {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/2d-Environment.png");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}

@media (max-width: 1600px) {
    .game_object_banner_4 {

        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/2d-Environment.png");

        /* background-position: center; */
        /* scale: 0.9; */
        /* background-size: contain; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

        /* min-height: auto; */



    }


}

@media (max-width: 500px) {
    .game_object_banner_4 {

        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/2d-Environment_mobile.png");
        /* background-position: center; */
        /* scale: 0.9; */
        /* background-size: contain; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

        /* min-height: auto; */



    }


}






.game_object_banner_5 {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/Slot-Art.png");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}

@media (max-width: 1600px) {
    .game_object_banner_5 {

        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/Slot-Art.png");

        /* background-position: center; */
        /* scale: 0.9; */
        /* background-size: contain; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

        /* min-height: auto; */



    }


}


@media (max-width: 500px) {
    .game_object_banner_5 {

        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/Slot-Art-mobile.png");

        /* background-position: center; */
        /* scale: 0.9; */
        /* background-size: contain; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

        /* min-height: auto; */



    }


}





/* .video-container-1 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  .video-container-1 video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover; 
  }
   */




.game_object_banner_6 {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/2D-Animation-new.gif");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
   
    padding-top: 0;
    z-index: -555;
    
    margin-top: 0;
}

@media (max-width: 1600px) {
    .game_object_banner_6 {

        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/2D-Animation-new.gif");

        /* background-position: center; */
        /* scale: 0.9; */
        /* background-size: contain; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

        /* min-height: auto; */



    }


}


@media (max-width: 500px) {
    .game_object_banner_6 {

        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/2d-animation-mobile-new.gif");

        /* background-position: center; */
        /* scale: 0.9; */
        /* background-size: contain; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

        /* min-height: auto; */



    }


}





.game_object_banner_7 {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/Particles-and-Effects/Particles.gif");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}

@media (max-width: 1600px) {
    .game_object_banner_7 {


        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/Particles-and-Effects/Particles.gif");

        background-size: contain;
        background-repeat: no-repeat;
        height: auto;

    }


}


@media (max-width: 500px) {
    .game_object_banner_7 {
        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/Particles-and-Effects/particles-mobile.gif");

        background-size: contain;
        background-repeat: no-repeat;
        height: auto;



    }


}





.game_object_banner_8 {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/UI-and-UX-Animation/UI-Banner.gif");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}

@media (max-width: 1600px) {
    .game_object_banner_8 {

        background-size: contain;
        background-repeat: no-repeat;
        height: auto;
        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/UI-and-UX-Animation/UI-Banner.gif");



    }


}


@media (max-width: 500px) {
    .game_object_banner_8 {

        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/art_1/UI-and-UX-Animation/UI-and-UX-Animation-Banner-mobile.gif");


        /* scale: 0.9; */
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;


    }


}








.game_object_banner {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/game-object.gif");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}

/* Game Object Animation Banner */

.char_2d {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/2d_char.jpg");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}

.ui_banner {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/ui_banner.png");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}


.casestudybanner_2d {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/2d-banner.svg");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}





.char_ani_banner {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/char_ani.gif");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}

.game_ani_banner {
    position: relative;
    background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/game_ani.gif");

    background-repeat: no-repeat;
    background-size: cover;


    width: 100%;
    min-height: 70rem;
    /* Adjusted height */
    padding-top: 0;
    z-index: -555;
    /* overflow: hidden; */
    margin-top: 0;
}









@media (max-width: 1500px) {

    .casestudybanner_new {
        position: relative;
        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/banner.svg");


        background-repeat: no-repeat;
        background-size: cover;
        /* width: 600px; */
        /* min-height: 500px; */

        /* background-color: red; */
        width: 100%;
        min-height: 80rem;
        /* Adjusted height */
        padding-top: 0;
        z-index: -555;
        /* overflow: hidden; */
        margin-top: 0;
    }


    .casestudies-postion {
        text-align: center;
        padding-bottom: 0rem;
        font: 40px/60px Gabriela, Georgia, serif;
        text-align: center;

        color: black;

    }


}



@media (max-width: 1000px) {

    .casestudybanner_new {
        position: relative;
        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/banner.svg");


        background-repeat: no-repeat;
        background-size: cover;
        /* width: 600px; */
        /* min-height: 500px; */

        /* background-color: red; */
        width: 100%;
        min-height: 80rem;
        /* Adjusted height */
        padding-top: 0;
        z-index: -555;
        /* overflow: hidden; */
        margin-top: 0;
    }


    .casestudies-postion {
        text-align: center;
        padding-bottom: 0rem;
        font: 40px/60px Gabriela, Georgia, serif;
        text-align: center;

        color: black;

    }


}


@media (max-width: 800px) {

    .casestudybanner_new {
        position: relative;
        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/banner.svg");


        background-repeat: no-repeat;
        background-size: cover;
        /* width: 600px; */
        /* min-height: 500px; */

        /* background-color: red; */
        width: 100%;
        min-height: 20rem;
        /* Adjusted height */
        padding-top: 0;
        z-index: -555;
        /* overflow: hidden; */
        margin-top: 0;
    }


    .casestudies-postion {
        text-align: center;
        padding-bottom: 0rem;
        font: 40px/60px Gabriela, Georgia, serif;
        text-align: center;

        color: black;

    }


}


@media (max-width: 500px) {

    .casestudybanner_new {
        position: relative;
        background-image: url("https://storage.googleapis.com/gamixlabs-website/website/assets/images/casestudy/banner.svg");


        background-repeat: no-repeat;
        background-size: cover;
        /* width: 600px; */
        /* min-height: 500px; */

        /* background-color: red; */
        width: 100%;
        min-height: 30rem;
        padding-top: 0;
        z-index: -555;
        /* overflow: hidden; */
        margin-top: 0;
    }


    .casestudies-postion {
        text-align: center;
        padding-bottom: 0rem;
        font: 40px/60px Gabriela, Georgia, serif;
        text-align: center;

        color: black;

    }


}


#metaverse {
    background: linear-gradient(132.93deg, #2d3d9c 46.5%, #273485 53.13%);
    background-size: cover;
    background-position: center;
    padding: 60px 0;
    height: 71vh;
    z-index: 0;
    background-color: #f6f6f6;
    margin-top: -12px
}

@media (max-width: 500px) {
    #metaverse {
        max-height: auto!important;
    }
}



#metaverse .container-fluid .row .col-md-6 img {
    position: absolute;
    bottom: 24px;
    width: 45%
}

.facebook-banner-content {
    z-index: 10;
    width: 100%;
    height: 100%
}

.second-layer,
.second-layers {
    height: 80%;
    width: 100%;
    z-index: 0
}

.second-layers {
    position: absolute
}

.facebook-cristle {
    z-index: -1;
    width: 100%;
    height: 100%
}

.facebook-circle,
.facebook-square {
    animation: 15s linear infinite animationFramesOne
}

.facebook-square {
    left: 50px;
    width: 36px;
    -webkit-transform: translateY(-5%) translateX(-30%);
    transform: translateY(-5%) translateX(-30%);
    -webkit-animation: 15s linear infinite animationFramesOne
}

.facebook-circle {
    top: 400px;
    left: 200px;
    -webkit-transform: translateY(-20%) translateX(-20%);
    transform: translateY(-20%) translateX(-20%)
}

.facebook-casino {
    left: 120px;
    top: 10px;
    width: 55px;
    -webkit-transform: translateY(-20%) translateX(-80%);
    transform: translateY(-20%) translateX(-80%);
    -webkit-animation: 10s linear infinite animationFramesOne;
    animation: 10s linear infinite animationFramesOne
}

.facebook-cross {
    left: 50%;
    top: 100px;
    -webkit-transform: translateY(-5%) translateX(-50%);
    transform: translateY(-5%) translateX(-50%);
    -webkit-animation: 15s linear infinite animationFramesOne;
    animation: 15s linear infinite animationFramesOne
}

.big-casino,
.facebook-ludo,
.facebook-slot,
.facebook-snake,
.second-square {
    animation: 25s linear infinite animationFramesOne;
    position: absolute
}

.big-casino,
.second-square {
    transform: translateY(-20%) translateX(-50%)
}

.second-square {
    left: 55%
}

.facebook-snake {
    right: 40%;
    top: 450px
}

.big-casino {
    left: 59%;
    width: 110px
}

.facebook-slot {
    right: 45%;
    top: 280px;
    width: 110px;
    -webkit-transform: translateY(-20%) translateX(-50%);
    transform: translateY(-20%) translateX(-50%);
    -webkit-animation: 25s linear infinite animationFramesOne
}

.facebook-ludo {
    right: 10%;
    top: 0;
    width: 116px;
    -webkit-transform: translateY(-20%) translateX(50%);
    transform: translateY(-20%) translateX(50%);
    -webkit-animation: 10s linear infinite animationFramesOne
}

.ludo-bootom {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 90px;
    opacity: .5;
    -webkit-transform: translateY(100%) translateX(-50%);
    transform: translateY(100%) translateX(-50%);
    -webkit-animation: 2s linear infinite moveleftbounce;
    animation: 2s linear infinite moveleftbounce
}

.services-contents p {
    font-size: 1.8rem;
    font-weight: 400
}

.home-p {
    font-size: var(--paragraph-size) !important;
    color: #fff !important
}

.services-contents h4 {
    font-size: 2.8rem;
    font-weight: 700
}

#htmlbanner {
    background-image: url(../images/game-development/Html/banner.png);
    height: 640px;
    padding-top: 72px;
    z-index: -2
}

.main-heading-casestudy {
    color: #76def4 !important;
    font-size: 10rem !important
}

.slider-back-mar {
    background-color: #efefef;
    margin-top: 100px
}

#big.owl-theme {
    top: -50px;
    padding: 0 20px
}

#thumbs.owl-theme {
    top: -20px;
    padding: 0 20px
}

#thumbs {
    margin: auto;
    top: 0
}

#thumbs .item {
    height: 90px;
    width: 120px;
    line-height: 0;
    padding: 0;
    margin: auto;
    opacity: .5
}

#thumbs .current .item,
.main-portfolio div:hover .overlay-portfolio {
    opacity: 1
}

.small-heading-casestudy {
    font-size: 5rem;
    color: #fff
}


.small-heading-casestudy_new {
    font-size: 3.8rem;
    color: #fff
}

.kinect-banner {
    background-image: url(../images/casestudy/kinect-Penalty-Kick-Game/Kincet-game.png)
}

.minesweeper {
    background-image: url(../images/casestudy/Minesweeper/Minesweeper_Banner.png)
}

.election {
    background-image: url(../images/casestudy/Election_Ke_Baazigaar/Eelection_Ke_Banner.png)
}

.milo {
    background-image: url(../images/casestudy/Nestle_Milo_Game/Milo_Banner.png)
}

.nft {
    background-image: url(../images/casestudy/Dinominks/Dinomonks_Banner.png)
}

.casino-case {
    background-image: url(../images/casestudy/Casin_Royale/Casino_Royale_Banner.png)
}

.worldcasino {
    background-image: url(../images/casestudy/World_Casino/World_Casino_Banner.jpg)
}

.landslot {
    background-image: url(../images/casestudy/landslot/Landslot_banner_.png);
}

.livecasino {
    background-image: url(../images/casestudy/Live_Casino/Live_Casino_Banner.png)
}

.letterstack {
    background-image: url(../images/casestudy/letter_stack/banner.jpg)
}

.gameportal {
    background-image: url(../images/casestudy/Game-Portal/Game_Portal_Banner.png)
}

.prodigy {
    background-image: url(../images/casestudy/The_Prodigy_Rises/Prodigy_Banner.png)
}

.beeline {
    background-image: url(../images/casestudy/Beeline/Belline_Banner.jpg)
}

.tug {
    background-image: url(../images/casestudy/Conjunnect_Four_Tug_of_Walrus/Tug_Walrus_Banner.png)
}

.die {
    background-image: url(../images/casestudy/Die_De_Los_Verbos/Die_De_Los_Verbos_Banner.png)
}

.zilla {
    background-image: url(../images/casestudy/Zillaniore/Zillaniore_Game_Banner.png)
}

.wheel {
    background-image: url(../images/casestudy/Wheel_Of_Fortune/Wheel_Of_Fortune.png)
}

.casestudyvideo {
    width: 100%;
    max-height: 600px !important
}

.projects-details-area {
    padding: 1px 30px;
    background-color: #fff;
    z-index: -55;
    border-top: 10px solid #1ec8fa;
    margin-top: 12px !important
}

.case-study-new-heading {
    color: #dddd !important;
    font-size: 7rem !important;
    letter-spacing: 1rem
}

.case-study-sub-heading {
    color: #00bcd4;
    font-size: 4.5rem !important
}

.toprotation {
    top: -6%;
    left: 51%;
    width: 5%;
    animation: 10s linear 0 infinite reverse mymove
}

.toprotationbig {
    top: -10%;
    left: 43%;
    width: 8%;
    animation: 10s linear 0 infinite reverse mymoves
}

.rotation,
.rotationback {
    animation: 10s linear 0 infinite reverse mymove
}

.rotation {
    bottom: 20px;
    left: 12%;
    width: 10%
}

.rotationback,
.rotationop {
    position: absolute;
    width: 7%
}

.rotationback {
    bottom: 90px;
    left: 15%;
    z-index: -2
}

.rotationop {
    bottom: 10px;
    left: 21.5%;
    z-index: -1;
    animation: 10s linear 0 infinite reverse mymoves
}

.rotationright,
.rotationrightback {
    animation: 10s linear 0 infinite reverse mymove;
    position: absolute;
}

.rotationright {
    bottom: 50%;
    right: 12%;
    z-index: -1;
    width: 90px
}

.rotationrightback {
    bottom: 62%;
    right: 10%;
    z-index: -2;
    width: 60px
}

.rotationrightop {
    position: absolute;
    bottom: 45%;
    right: 7%;
    z-index: -1;
    animation: 10s linear 0 infinite reverse mymoves;
    width: 50px
}

#anroidbanner,
#casinobanner,
#livecasino,
.ludo_banner {
    padding-top: 60px;
    position: relative
}

#anroidbanner {
    background: #06c085;
    background: linear-gradient(105deg, #06c085 0, #37c94f 35%, #a4c639 100%);
    background-size: cover;
    background-position: center;
    height: 600px;
    z-index: -2
}

#casinobanner,
#livecasino {
    background-image: url(../images/game-development/Casino/banner.png);
    height: 600px;
    z-index: -2l;
    margin-top: 12px
}

#livecasino {
    background-image: url(../images/game-development/Livecasino/banner.jpg)
}

#livecasino img:first-child {
    position: absolute;
    bottom: -1px;
    right: 4%;
    z-index: 0;
    width: 39%
}

#livecasino img:nth-child(2) {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18%
}

#livecasino img:nth-child(3) {
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 19%;
    z-index: -5
}

#livecasino img:nth-child(4) {
    position: absolute;
    bottom: 0;
    right: 35%;
    width: 10%
}

#livecasino img:nth-child(5) {
    position: absolute;
    bottom: 0;
    left: 30%
}

#livecasino img:nth-child(6) {
    position: absolute;
    bottom: 0;
    left: 2%
}

.ludo_banner {
    background: linear-gradient(to right, #02a4d6, #00457d);
    background-size: cover;
    height: 700px
}

#kinect_game,
#portfolio_Dinomonk {
    background-size: cover;
    position: relative
}

#donomonk1,
#donomonk2,
#donomonk3,
#kinect_game,
#portfolio_Dinomonk,
.ludo_banner {
    background-position: center
}

.reddice,
.yellowdice {
    position: absolute;
    bottom: 50px;
    left: -5% !important
}

.yellowdice {
    bottom: 0;
    left: 0 !important
}

.Slot_banner,
.gamix_portal,
.gunman-sub-product,
.pooker_banner,
.pool_banner,
.teenpatti_banner {
    position: relative;
    padding-top: 60px;
    background-size: cover;
    background-position: center
}

.gunman-sub-product {
    background-image: url(../images/product/Gumman/banner_img.jpg);
    height: 700px;
    margin-top: 12px
}

.pooker_banner {
    background-image: url(../images/product/PokerGame/pooker_banner.jpg);
    height: 700px;
    margin-top: 12px
}

.teenpatti_banner {
    background-image: url(../images/game-development/teenpatti/teenpatti-banner.jpg);
    height: 600px;
    margin-top: 12px
}

.vr_banner {
    background-image: url(../images/game-development/vr-game/vrgame.jpg) !important;
    margin-top: 12px
}

.pool_banner {
    background-image: url(../images/product/8pool-game/8pool_Banner_Gamix.jpg);
    height: 700px;
    margin-top: 12px
}

.Slot_banner {
    background-image: url(../images/product/Slot-game/Slot_Banner.jpg);
    height: 646px;
    margin-top: 12px
}

.gamix_portal {
    background-image: url(../images/product/Game-Portal/Portal_bg.png);
    height: 650px;
    margin-top: 12px
}

.dice,
.ludoboard,
.over_hidden {
    overflow: hidden
}

.over_hidden_new {
    overflow: hidden;
    height: 85rem;
}


@media (max-width:600px) {
    .phone_new {
        display: none;
    }

}


@media (max-width:992px) {
    .over_hidden_new {
        overflow: hidden;
        height: 85rem;
    }

}


.ludoboard {
    right: 0;
    width: 40%
}

.dice {
    top: 190px;
    right: 12%;
    width: 15%;
    -webkit-animation: 5s linear infinite dice;
    animation: 5s linear infinite dice
}

.height {
    height: 550px
}

.box-facebook {
    height: 94px;
    background-color: #ff5e5e;
    font-size: 2.2rem;
    margin: 0;
    padding: 34px 0 0 15px;
    color: #fff
}

.unreal-box {
    height: 90px !important
}

.circle-number {
    width: 57px;
    height: 57px;
    background: #fff;
    top: -30px;
    left: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ff5e5e
}

.circle-number span {
    font-size: 28px;
    font-weight: 700
}

.anroid-height,
.col-xl-4 .col-md-12 .border,
.unity .col-xl-3 {
    min-height: 200px;
    height: 200px
}

.mobile-box,
.unity-box {
    min-height: 200px !important;
    height: 200px
}

.game-testing-box {
    min-height: 280px;
    height: auto
}

.face-secondbox {
    background-color: #7164eb
}

.face-secondbor {
    border: 1px solid #7164eb !important
}

.face-thirdbox {
    background-color: #163d6f
}

.face-fourthbox {
    background-color: #ffab5d
}

.face-thirdbor {
    border: 1px solid #163d6f !important
}

.five-fourthbor {
    border: 1px solid #a4c639 !important
}

.five-fourthbox {
    background-color: #a4c639
}

.six-fourthbor {
    border: 1px solid #d0a624 !important
}

.six-fourthbox {
    background-color: #d0a624
}

.eight-fourthbor {
    border: 1px solid #5db1ff !important
}

.eight-fourthbox {
    background-color: #5db1ff
}

.face-fivebox {
    background-color: grey;
}

.face-sevenbox {
    background-color: green;
}
.face-eightbox {
    background-color: brown;
}
.face-ninebox {
    background-color: rgb(13, 13, 56);
}



.seven-fourthbox {
    background-color: #9d388d
}

.seven-fourthbor {
    border: 1px solid #9d388d !important
}

.first-box {
    color: #ff5e5e
}

.first-2 {
    color: #7164eb
}

.first-3 {
    color: #163d6f
}

.first-4 {
    color: #ffab5d
}

.first-5 {
    color: #a4c639
}

.first-6 {
    color: #d0a624
}

.first-7 {
    color: #9d388d
}

.first-8 {
    color: #5db1ff
}

.height-content {
    min-height: 363px;
    height: auto;
    transition: .5s
}

.facebook-instant .col-xl-6 .height-content {
    min-height: 180px !important
}

#anroid-height .col-md-6 .col-md-12 .height-content {
    min-height: 150px !important
}

.html-height {
    min-height: 250px;
    height: auto
}

.face-fourthbor {
    border: 1px solid #ffab5d !important
}

.big-heading {
    font-size: var(--big-heading);
    color: #fff
}

.small-heading {
    font-size: var(--small-heading);
    color: #fff
}

.big-heading-main {
    font-size: var(--big-heading-main);
    color: #fff;
    word-wrap: normal;
}

.small-heading-main {
    font-size: var(--small-heading-main);
    color: #40c4ff;
    margin-top: 1.5rem
}

.arrange-game,
.arrange-monkey {
    -webkit-animation: 2s linear infinite moveupbounces;
    animation: 2s linear infinite moveupbounces
}

.arrange-game {
    bottom: -70px;
    left: -230px;
    z-index: -5
}

.arrange-monkey {
    width: 20%;
    top: -20px;
    z-index: 0
}

.arrange-cat {
    width: 15%;
    bottom: -3%;
    right: 0;
    transform: scaleX(-1)
}

.button-position-casestudies {
    position: relative;
    top: -80px
}

.button-position-casestudies_new {
    position: relative;
    top: -190px;
}


.card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    transition: height 2s
}

.card .card-image,
.card .card-image img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.card .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 58px;
    padding: 17px;
    background: rgba(0, 0, 0, .6);
    border-radius: 0 0 16px 16px;
    transition: height 2s;
    box-sizing: border-box;
    overflow: hidden
}

.card .card-content h4,
.casestudies-content h3 a {
    color: #fff;
    font-size: var(--sub-heading)
}

.casestudies-content h3 a {
    color: #000 !important
}

.card .card-content p {
    color: #fff;
    margin-top: 10px
}

.card:hover .card-content {
    width: 100%;
    min-height: 40%;
    left: 0;
    bottom: 0;
    height: auto;
    box-shadow: 0 3px 15px rgba(0, 0, 0, .7)
}

.game-rows {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap
}

.flex-1 {
    flex: 20%;
    max-width: 20%
}

.accordion-container .accordion-title {
    position: relative;
    margin: 10px 0 0;
    padding: .625em .625em .625em 2em;
    background-color: #f4f7fa;
    font-size: 1.8rem !important;
    font-weight: 400;
    color: #888;
    cursor: pointer;
    font-size: var(--main-font-family)
}

.accordion-container .accordion-title strong {
    font-weight: 400
}

.stand:after,
.stand:before {
    content: "";
    background: #fff
}

.accordion-content h5 {
    font-size: var(--sub-heading);
    margin-bottom: 2rem
}

.accordion-container .accordion-title::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 25px;
    width: 15px;
    height: 2px;
    transform: rotate(90deg);
    background: #888;
    transition: .3s ease-in-out
}

.accordion-container .accordion-title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 25px;
    width: 15px;
    height: 2px;
    background: #888;
    transition: .2s ease-in-out
}

.accordion-container .accordion-title.open::before {
    transform: rotate(180deg)
}

.accordion-container .accordion-title.open::after {
    opacity: 0
}

.accordion-content {
    padding: 30px
}

.accordion-container {
    max-width: 100%;
    margin: 0 auto
}

.circle-ripple {
    background-color: #fff;
    width: 100%;
    height: 380px;
    border-radius: 50%;
    animation: .7s linear infinite ripple;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px
}

.stand:after,
.stand:before,
.threed {
    display: block;
    position: absolute
}

.threed {
    left: 30px;
    transition: 5s
}

.android-icon {
    position: absolute;
    top: -7%;
    -webkit-animation: 2s linear infinite moveupbounces;
    animation: 2s linear infinite moveupbounces
}

.coinsmoves {
    -webkit-animation: 3s linear infinite moveupbounce;
    animation: 3s linear infinite moveupbounce
}

.tablet {
    top: 15%;
    right: 100px;
    width: 200px
}

.mobile {
    bottom: 10%;
    right: 20%
}

.coins1 {
    animation: 5.2s ease-in-out infinite alternate-reverse livecoins
}

.coins2 {
    animation: 5.2s ease-in-out infinite alternate-reverse livecoin2
}

.scale {
    left: 200px
}

.scale2 {
    left: 40px;
    top: -100px
}

.moniter {
    background-color: #031d30;
    padding: 20px;
    border: 10px solid #cff0f7;
    border-radius: 20px
}

.stand:before {
    width: 20%;
    height: 72px;
    bottom: -67px;
    left: 37%;
    border-bottom: 24px solid #cff0f7
}

.stand:after {
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;
    width: 33%;
    height: 50px;
    bottom: -118px;
    left: 31%;
    box-shadow: -2px 12px 5px #ededed
}

.tablet-view-pd {
    padding: 0 3rem
}

.poker-rowss,
.rowss {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row
}

.product-50 {
    flex: 50%;
    width: 50%
}

.poker-60 {
    flex: 55%;
    width: 55%
}

.poker-40 {
    flex: 35%;
    width: 35%
}

.poker-20 {
    flex: 20%;
    width: 20%
}

.pool-board-arrange {
    position: relative;
    right: -3%
}

#kinect_game {
    background-image: url(../images/game-development/kinect-game-development/banner.png);
    aspect-ratio: 3.2;
    padding-top: 60px;
    z-index: 0;
    border: 0;
    outline: 0;
    margin-top: 12px
}

.casestudies-ex {
    background-color: #fff;
    border: 1px solid rgba(158, 158, 158, .33);
    padding: 0;
    height: 490px
}

.casestudies-ex:hover {
    background: rgba(255, 255, 255, .01);
    box-shadow: 0 4px 17px 2px rgba(0, 0, 0, .1);
    border: 1px solid rgba(255, 255, 255, .01)
}

.casestudies-images {
    border-radius: 15px 15px 0 0 !important
}

.casestudies-images_new {
    border-radius: 15px 15px 0 0 !important;
    height: 200px;
    /* Set a fixed height for the image container */
    overflow: hidden;
}

.casestudies-images_new img {
    width: 100%;
    /* Make sure the image fills its container */
    height: fit-content;
    /* Maintain the aspect ratio of the image */
    object-fit: contain;
}

.casestudies-content_new {
    color: var(--paragraph-color) !important;
    padding: 15px;
}







.casestudies-content p,
.navbar-style-two-with-color .main-navbar .navbar .navbar-nav .nav-item {
    color: var(--paragraph-color) !important
}

.fixed-all-pages {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #14042c
}

.casestudies-postion {
    position: absolute;
    top: 40%;
    left: 28%;
    transform: translate(-28%, -40%);
    width: 100%
}

.facebook-desktop {
    display: inline-block !important
}

.cursor-pointer,
.facebook-mobile,
.mobile-casestudies,
.mobile-services {
    display: none !important
}

.mixitup-control-active {
    background-color: #3aeafe !important;
    color: #fff !important
}

.margin-casestudies {
    margin-top: 10rem
}

.pooker-images .swiper-slide img {
    width: 50vw
}

.casino-content {
    padding-left: 15%
}

.facecook-casino {
    padding-left: 11.5%
}

.Slot_Girl {
    height: 500px;
    margin-top: -50px
}

.artwork_Boy {
    margin-top: 0px;
    width: 60%
}

#portfolio_Dinomonk {
    background-image: url(../images/Portfolio/dragon.jpg);
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
    z-index: 5
}

.dinomonk_Leafe {
    position: absolute;
    bottom: 0;
    z-index: 1
}

.dinomonk_logo {
    position: absolute;
    top: 30%;
    left: 38%;
    width: 20%
}

.dinomonk_video {
    background: #14190d;
    width: 100%;
    padding-top: 100px;
    padding-bottom: 80px;
    margin: 0;
    z-index: 99;
    position: relative
}

#ios-game,
.animationd,
.character,
.enviroment,
.game-assets,
.game-ui,
.slot-animation,
.slot-character,
.slot-machine,
.slot-symbols,
.slot-uiux {
    margin-top: 12px
}

#ludo-hover a {
    position: relative;
    z-index: 1
}

.dinomonk_project {
    position: relative;
    z-index: 555
}

#donomonk1 {
    background-image: url(../images/Portfolio/Dinomonk/Background/2.jpg);
    width: 100%
}

#donomonk2 {
    background-image: url(../images/Portfolio/Dinomonk/Background/1.jpg);
    width: 100%
}

#donomonk3 {
    background-image: url(../images/Portfolio/Dinomonk/Background/3.jpg);
    width: 100%
}

.dinomonk-main {
    font-family: var(--monoton-font-family);
    font-weight: 200;
    color: #d0d0d0
}

.container-fluid #ludo-game {
    position: relative;
    height: 500px;
    width: 80%;
    margin: auto;
    transition: .1s ease-in
}

.container-fluid #ludo-game div img {
    position: absolute;
    height: auto;
    width: 300px !important;
    transition: .3s ease-in;
    border: 10px solid #fff;
    border-radius: 25px
}

.container-fluid #ludo-game #img1 img {
    left: 36%;
    z-index: 1;
    transform: translate(0)
}

.container-fluid #ludo-game #img2 img {
    left: 38%;
    z-index: 3;
    transform: translate(0)
}

.container-fluid #ludo-game #img3 img {
    left: 40%;
    z-index: 3;
    transform: translate(0)
}

.container-fluid #ludo-game #img4 img {
    left: 43%;
    z-index: 4;
    transform: translate(0)
}

.container-fluid #ludo-game #img5 img {
    left: 45%;
    z-index: 5;
    transform: translate(0)
}

.video-main-ludo {
    position: absolute;
    z-index: 99;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 23%;
    border: 15px solid #f1f1f1;
    border-radius: 25px;
    background-color: #f1f1f1;
    box-shadow: -10px 20px 44px rgba(0, 0, 0, .28)
}

.main-portfolio div img,
.main-portfolio div video,
.overlay-portfolio {
    border-top: 4px solid #fff;
    border-right: 4px solid #fff;
    width: 100%
}

.top-border-n {
    border-top: none
}

.dice-ludo-portfolio {
    position: absolute;
    bottom: -30px;
    left: 58%;
    width: 120px;
    z-index: 555
}

.ludo-character2 {
    position: absolute;
    bottom: 0;
    right: 0
}

#ludo-hover a::before {
    content: "\f00e";
    font-family: "Font Awesome 5 Free";
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.2);
    transform-origin: center;
    z-index: 0;
    color: #fff;
    visibility: hidden;
    font-weight: 600;
    transition: 1s
}

#ludo-hover a:hover::before {
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
    z-index: 5
}

.main-banner-ludo {
    position: sticky;
    top: 80px;
    z-index: -1
}

.game-link {
    color: #00c2ff
}

.arrow-left,
.arrow-right {
    background: #000;
    padding: 10px;
    position: fixed;
    top: 50%;
    z-index: 22;
    cursor: pointer;
    color: #fff
}

#game-porting,
#game-testing,
#playto,
#provably,
.background-design {
    background-repeat: no-repeat
}

.arrow-right {
    right: 0
}

.background-design {
    background-size: cover;
    background-position: center;
    height: 900px
}

.slot-character {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/slot-character.jpg)
}

.slot-animation {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #0a0b0d), url(../images/Portfolio/Banner-images/slot-animation.jpg)
}

.slot-symbols {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/slot-symbol.jpg)
}

.slot-machine {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/slot-machine.jpg)
}

.game-assets {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/games-assests.jpg)
}

.slot-animation-background {
    background-color: #0a0b0d !important
}

.enviroment {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/caual-art-bg.jpg)
}

.game-ui {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/game-uio-and-ux.jpg)
}

.slot-uiux {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/slot-ui-and-ux.jpg)
}

.character {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/2dcharacter.jpg) !important
}

.animationd {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/2d-animation.jpg) !important
}

.background-portfolio {
    width: 100%;
    background-color: #212121
}

.background-portfolio .col-12:first-child img,
.background-portfolio .col-12:first-child video,
.background-portfolio .col-6:first-child img,
.background-portfolio .col-6:first-child video,
.background-portfolio .ludo-portfolio img {
    margin-top: -470px
}

.game-ui-small {
    font-size: 2.5rem;
    font-weight: 500
}

.left-border {
    border-left: 5px solid #fff
}

.main-portfolio div:nth-child(9) img {
    border-bottom: 4px solid #fff
}

.main-portfolio div:nth-child(10) img {
    border-bottom: 2px solid #fff
}

.overlay-portfolio {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    transition: .5s;
    background-color: rgba(0, 0, 0, .6)
}

.text {
    color: #fff;
    font-size: 35px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    letter-spacing: 5px;
    font-weight: 600
}

.portfolio-art {
    background-color: #fff !important;
    margin: 50px 0 !important;
    padding: 2px !important
}

.allcard2 {
    height: 610px
}

#ios-game,
.allcards {
    height: 600px
}

.img-big {
    width: 47%
}

.img-mini,
.w-40 {
    width: 45%
}

.not-found {
    background-color: #14042c;
    z-index: 1
}

.main-logo-width {
    width: 80px
}

.not-found-index {
    z-index: 1;
    margin-top: 30px
}

.cat-character {
    bottom: 0;
    width: 100%;
    z-index: -3
}

#iframediv,
.z-index {
    z-index: 9999
}

.androidhtml {
    bottom: -40%;
    left: -12%;
    transform: rotate(48deg);
    opacity: .5
}

.posleft-30 {
    left: 30%
}

.posleft-25 {
    bottom: 0;
    left: 25%
}

.bg-anroid,
.casino-box {
    background-color: #f4f7fa;
    border-radius: 20px;
    margin-bottom: 20px
}

.bg-gamix {
    background: #1d1d1d
}

#game-porting,
#playto,
#provably,
.rummy_banner {
    background-size: cover
}

.kincet-game-pd {
    padding: 0 10%
}

.latest-tech {
    background-color: #f5f5f5;
    width: 100%
}

.casinocoin1,
.casinocoin2 {
    position: absolute;
    width: 15%
}

.nft-video {
    background-color: #000;
    padding: 3% 5%;
    border: 5px solid #fff;
    border-radius: 25px
}

video {
    object-fit: fill
}

.casinocoin1 {
    top: 10px;
    left: -100px;
    z-index: 2
}

.casinocoin2 {
    top: -50px;
    left: -50px;
    z-index: 1
}

.casinocoin3,
.casinocoin4 {
    position: absolute;
    left: -5%;
    width: 10%
}

.casinocoin3 {
    bottom: 30%
}

.casinocoin4 {
    bottom: 15%
}

.dice2,
.token {
    position: absolute;
    bottom: 0
}

.pdr-tenper {
    padding-right: 10%
}

.secondcoinlive img:first-child {
    position: absolute;
    bottom: 10%;
    left: 60%;
    transform: rotate(45deg) !important;
    width: 80px !important
}

.secondcoinlive img:nth-child(2) {
    position: absolute;
    bottom: 10%;
    left: 41%;
    z-index: -2;
    transform: rotate(-40deg) !important;
    width: 80px !important
}

.minus-mar img:first-child {
    position: absolute;
    z-index: 1;
    left: 30%
}

.minus-mar img:nth-child(2) {
    position: absolute;
    z-index: -1;
    left: 28%
}

.minus-mar img:nth-child(3) {
    position: absolute;
    z-index: -2;
    left: 20%
}

.minus-mar img:nth-child(4) {
    position: absolute;
    z-index: -3;
    left: 10%
}

.token {
    z-index: 2;
    left: 0
}

.dice2 {
    z-index: 3;
    right: 15%
}

.navbar-style-two-with-color .main-navbar .navbar .navbar-nav .nav-item .megamenu li a:hover {
    color: var(--main-color) !important
}

.plr-30 {
    padding: 0 70px !important
}

.megamenu .container-fluid .row .col-lg-4>li>a:hover::before {
    visibility: hidden !important
}

.megamenu .container-fluid .row .col-lg-4 li a {
    padding: 15px 0 0 !important
}

.megamenu .container-fluid .row .col-lg-4 li ul a,
.megamenu .container-fluid .row .col-lg-4 li ul li a {
    font-size: 1.6rem !important;
    font-family: 'Open Sans';
    color: rgba(23, 7, 47, .82) !important;
    font-weight: 500
}

.megamenu .container-fluid .row .col-lg-4 li ul li a {
    font-weight: 600
}

.megamenu .container-fluid .row .col-lg-4 li hr {
    width: 80%
}

.megamenu .container-fluid .row .col-lg-4:nth-child(4),
.megamenu .container-fluid .row .col-lg-4:nth-child(5),
.megamenu .container-fluid .row .col-lg-4:nth-child(6) {
    margin-top: 20px
}

.megamenu .container-fluid .row .col-lg-4 li h2 {
    font-size: 1.9rem !important;
    font-weight: 500;
    font-family: 'Open Sans';
    cursor: context-menu
}

.common-icon-class a::before,
.common-icon-class li a::before {
    content: "" !important;
    width: 30px !important;
    height: 30px !important;
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
    top: 8px !important;
    left: -15px !important;
    transition: var(--transition);
    margin: auto;

}

.common-icon-class li a:hover:before {
    left: 20px;
}

.common-icon-class a:hover,
.game-development-icon li a:hover {
    /* margin-right: 1% */
    /* left: 10px; */
    /* transition: var(--transition); */
    /* transition: transform 0.1s ease; */
    transition: 0.9s ease-in-out;

    transform: translateX(20px);

}

.common-icon-class a,
.game-development-icon li a {
    margin-left: 20%
}


.game-development-icon li:first-child a::before {
    background-image: url(../images/Menu-Icon/Facebook.png) !important
}

.game-development-icon li:nth-child(2) a::before {
    background-image: url(../images/Menu-Icon/Android.png) !important
}

.game-development-icon li:nth-child(3) a::before {
    background-image: url(../images/Menu-Icon/Html.png) !important
}

.game-development-icon li:nth-child(4) a::before {
    background-image: url(../images/Menu-Icon/Mobile.png) !important
}

.game-development-icon li:nth-child(5) a::before {
    background-image: url(../images/Menu-Icon/Console.png) !important
}

.game-development-icon li:nth-child(6) a::before {
    background-image: url(../images/Menu-Icon/pc-game-development.png) !important
}

.game-development-icon-2 li:first-child a::before {
    background-image: url(../images/Menu-Icon/ios_icon.png) !important
}

.game-development-icon-2 li:nth-child(2) a::before {
    background-image: url(../images/game-development/game-porting/port_icon.png) !important
}

.game-development-icon-2 li:nth-child(3) a::before {
    background-image: url(../images/Menu-Icon/game_portal.png) !important
}

.game-development-icon-2 li:nth-child(4) a::before {
    background-image: url(../images/Menu-Icon/Ludo.png) !important
}

.game-development-icon-2 li:nth-child(5) a::before {
    background-image: url(../images/Menu-Icon/Pool.png) !important
}
.game-development-icon-2 li:nth-child(6) a::before {
    background-image: url(../images/Menu-Icon/game_portal.png) !important
}

.game-development-icon-3 li:first-child a::before {
    background-image: url(../images/Menu-Icon/game.png) !important
}

.game-development-icon-3 li:nth-child(2) a::before {
    background-image: url(../images/Menu-Icon/tester.png) !important
}

.game-development-icon-3 li:nth-child(3) a::before {
    background-image: url(../images/Menu-Icon/unity-game-development.png) !important
}

.game-development-icon-3 li:nth-child(4) a::before {
    background-image: url(../images/Menu-Icon/unreal-game-development.png) !important
}

.game-development-icon-3 li:nth-child(5) a::before {
    background-image: url(../images/Menu-Icon/Kinect.png) !important
}

.game-development-icon-3 li:nth-child(6) a::before {
    background-image: url(../images/Menu-Icon/tester.png) !important
}

.game-art-icon li:first-child a::before {
    background-image: url(../images/Menu-Icon/2D-artwork.png) !important
}

.game-art-icon li:nth-child(2) a::before {
    background-image: url(../images/Menu-Icon/2D-animation.png) !important
}

.game-art-icon li:nth-child(3) a::before {
    background-image: url(../images/Menu-Icon/game_character.png) !important
}

.game-art-icon li:nth-child(4) a::before {
    background-image: url(../images/Menu-Icon/game_ui_ux.png) !important
}

.game-art-icon li:nth-child(5) a::before {
    background-image: url(../images/Menu-Icon/2d_environment.png) !important
}


.game-art-icon-2 li:first-child a::before {
    background-image: url(../images/Menu-Icon/illustrations.png) !important
}

/* .game-art-icon-2 li:nth-child(2) a::before {
    background-image: url(../images/Menu-Icon/2d_environment.png) !important
} */

.game-art-icon-2 li:nth-child(3) a::before {
    background-image: url(../images/Menu-Icon/game_asset.png) !important
}

.casino-solutions-icon li:first-child a::before {
    background-image: url(../images/Menu-Icon/Live-Casino.png) !important
}

.casino-solutions-icon li:nth-child(2) a::before {
    background-image: url(../images/Menu-Icon/Casino.png) !important
}

.casino-solutions-icon li:nth-child(3) a::before {
    background-image: url(../images/Menu-Icon/poker-cards.png) !important
}

.casino-solutions-icon li:nth-child(4) a::before {
    background-image: url(../images/Menu-Icon/Slots.png) !important
}
.casino-solutions-icon li:nth-child(5) a::before {
    background-image: url(../images/Menu-Icon/icon.png) !important
}

.casino-solutions-icon-2 li:first-child a::before {
    background-image: url(../images/Menu-Icon/pokericon.png) !important
}

.casino-solutions-icon-2 li:nth-child(2) a::before {
    background-image: url(../images/Menu-Icon/rummy_icon.png) !important
}

.casino-solutions-icon-2 li:nth-child(3) a::before {
    background-image: url(../images/Menu-Icon/land-slot.png) !important
}
.casino-solutions-icon-2 li:nth-child(4) a::before {
    background-image: url(../images/Menu-Icon/icon.png) !important
}


.blockchain-icon li:first-child a::before {
    background-image: url(../images/Menu-Icon/Nft.png) !important
}

.blockchain-icon li:nth-child(2) a::before {
    background-image: url(../images/Menu-Icon/Metaverse.png) !important
}

.blockchain-icon li:nth-child(3) a::before {
    background-image: url(../images/Menu-Icon/playtime.png) !important
}

.blockchain-icon li:nth-child(4) a::before {
    background-image: url(../images/Menu-Icon/gambling.png) !important
}

.unreal-min-height {
    height: auto;
    min-height: 262px !important
}

.console-game {
    height: auto;
    min-height: 200px !important
}

.casino {
    width: 98.5% !important;
    height: 100% !important;
    border-top: 20px solid #fff !important;
    border-left: 20px solid #fff !important;
    border-bottom: 20px solid #fff !important;
    border-radius: 25px 0 0 25px !important
}

.variants ul li {
    font-size: 2.5rem;
    color: var(--paragraph-color)
}

.variants ul li p {
    font-size: var(--heading-font-family);
    font-weight: 400
}

#ios-game {
    background-image: url(../images/game-development/ios-game-development/ios_banner.png);
    padding-top: 20px !important
}

.mar-2 {
    margin-right: 20px
}

.gap-2 {
    grid-gap: 0rem !important;
    gap: 0 !important
}

#iframediv {
    position: absolute;
    top: 0;
    left: 30%;
    width: 40%;
    transform: translate(0, -100%);
    transition: 1s
}

#iframediv iframe {
    height: 95vh
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, .4)
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: 700
}

.close:focus,
.close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer
}

.fa-circle-xmark {
    color: #e7f8ff;
    font-size: 30px;
    display: block !important;
    margin: auto
}

#game-porting,
#game-testing,
#playto,
#provably,
.rummy_banner {
    margin-top: 12px
}

#game-porting {
    background-image: url(../images/game-development/game-porting/game_porting.jpg);
    width: 100%;
    height: 646px
}

#game-testing {
    background-image: url(../images/game-development/game-testing/game_testing.png);
    width: 100%;
    height: 700px
}

#game-testing .container-fluid .row {
    height: 92.2%
}

.desktop-girl {
    position: absolute;
    bottom: 0;
    width: 100%
}

#game-testing .container .row .col-md-6 {
    z-index: 999
}

#game-testing,
.banner-color {
    color: #606060 !important
}

#playto {
    background-image: url(../images/game-development/play-to-earn/play-to-earn-2.jpg);
    width: 100%;
    height: 646px;
    z-index: -2
}

#provably {
    background-image: url(../images/game-development/provably-fair-game/provably_fair_banner.jpg);
    width: 100%;
    height: 646px
}

.height-game-portal {
    min-height: 200px;
    height: 205px
}

.coins-play img:first-child {
    position: absolute;
    top: -30px;
    left: -200px;
    z-index: 99;
    -webkit-animation: 5s linear infinite reverse slidelymove;
    animation: 5s linear infinite reverse slidelymove
}

.coins-play img:nth-child(2) {
    position: absolute;
    bottom: -80px;
    left: -200px;
    z-index: 99;
    -webkit-animation: 5s linear infinite slidelymove;
    animation: 5s linear infinite slidelymove
}

.coins-play img:nth-child(3) {
    position: absolute;
    bottom: -80px;
    right: 20px;
    -webkit-animation: 8s linear infinite slidelymove;
    animation: 8s linear infinite slidelymove
}

.coins-play img:nth-child(4) {
    position: absolute;
    top: -30px;
    right: 20px;
    -webkit-animation: 10s linear infinite slidelymove;
    animation: 10s linear infinite slidelymove
}

.menu-wh {
    width: 100% !important
}

.Artportfolio {
    position: static !important
}

.border-right {
    border-right: 1px solid #000
}

@keyframes slidelymove {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-50px)
    }
}

#playto .casino-content {
    padding-left: 11%
}

.content-play {
    position: absolute;
    top: -70px;
    right: 25%;
    rotate: -30deg
}

.remote-rotate {
    position: absolute;
    bottom: 30px;
    right: 10%;
    -webkit-animation: 5s linear infinite remote;
    animation: 5s linear infinite remote
}

@-webkit-keyframes remote {

    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg)
    }
}

@keyframes remote {

    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg)
    }
}

.msg img:first-child,
.msg img:nth-child(2) {
    transform: translate(-35%);
    width: 25%;
    position: absolute
}

#loading_career,
.muted {
    transform: translate(-50%, -50%)
}

.bug-icon img:first-child {
    position: absolute;
    top: 20px;
    -webkit-animation: 5s linear infinite fadein;
    animation: 5s linear infinite fadein
}

.bug-icon img:nth-child(2) {
    position: absolute;
    top: 20px;
    right: 20px;
    -webkit-animation: 5s linear infinite fadein;
    animation: 5s linear infinite fadein
}

@keyframes fadein {

    0%,
    100% {
        opacity: 1
    }

    25% {
        opacity: .2
    }

    50% {
        opacity: .5
    }

    75% {
        opacity: 0
    }
}

.msg img:first-child {
    left: -18px;
    top: 35%;
    -webkit-animation: 5s infinite leftright;
    animation: 5s infinite leftright
}

.msg img:nth-child(2) {
    top: 18%;
    left: 25%;
    -webkit-animation: 5s linear infinite leftright;
    animation: 5s linear infinite leftright
}

.msg img:nth-child(3) {
    position: absolute;
    top: 26.5%;
    right: 5%;
    width: 25%;
    -webkit-animation: 3s linear infinite leftright;
    animation: 3s linear infinite leftright
}

@keyframes leftright {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(20px)
    }
}

.desktop-girl img {
    position: absolute;
    bottom: 28%;
    right: 0
}

.rummy_banner {
    background-image: url(../images/game-development/rummy/bg.png);
    width: 100%;
    height: 645px;
    overflow: hidden
}

.rummy_banner .rummy-table {
    width: 85%
}

.rummy-girl {
    position: absolute;
    bottom: 0;
    right: -4%;
    z-index: 99
}

.about-areas,
.sticky-main {
    z-index: -9999;
    margin-bottom: 40px;

}

.sticky-main_ourgames {
    z-index: -9999;
    /* margin-bottom: 40px; */
    margin-left: 50%;

}



.rummy-girl img {
    width: 87%
}

.coins-rummy img:first-child {
    top: -70px;
    left: 50%;
    transform: translate(-50%);
    -webkit-animation: 5s linear infinite up;
    animation: 5s linear infinite up
}

.coins-rummy img:nth-child(2) {
    bottom: -50px;
    left: 20%;
    -webkit-animation: 5s linear infinite down;
    animation: 5s linear infinite down
}

@keyframes up {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-50px)
    }
}

@keyframes down {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(40px)
    }
}

.mt-54 {
    margin-top: 54px
}

.active,
.active h2 {
    /* color: #38e8fe !important */
}

@keyframes layeranimation {
    0% {
        height: 100%
    }

    100% {
        height: 0%
    }
}

#gamedevelopment_content {
    z-index: 0;
    width: 100%;
    display: block;
    transition: 1s;
    cursor: pointer;
    /* padding-left: 5em */
    /* background-color: red; */
}

#Blockchain_content,
#casino_content,
#gameart_content,
#other_content,
#technology_content {
    z-index: 0;
    width: 100%;
    display: none;
    transition: 1s;
    padding-left: 5em;
    cursor: pointer
}

.text-rightss {
    text-align: end !important;
    --webkit-text-align: right !important;
    font-size: 4rem;
    font-weight: 500
}

.service-new li {
    list-style: none;
    color: #000;
    padding: .8rem 2rem;
    cursor: pointer;
    font-size: 1.7rem;
    font-weight: 500;
    position: relative
}

.mt_6{
    margin-top: 3rem;
}
@media (max-width:1450px) {
   
.service-new-2 {
    padding-left: 9.2rem;
}

.mt_6{
    margin-top: 1.5rem;
}
}


.active_service {
    color: #16c1f3 !important;
    font-size: 700 !important
}

.sticky,
.sticky_client {
    writing-mode: vertical-rl;
    font-size: 5rem;
}



/* .sticky_right 
 {
    writing-mode: vertical-lr;
    font-size: 5rem;
} */




.active_service:before {
    content: "";
    color: #16c1f3;
    border-left: .4rem solid #16c1f3;
    position: absolute;
    width: .4rem;
    height: 60%;
    left: .8rem;
    z-index: 9999
}

.bg-services {
    background: #d0eaf4;
    border-radius: 40px 0;
    padding: 25px 0
}

.justify-content-between {
    justify-content: space-between
}

.border-left {
    border-left: 1px solid #fff
}

.inner_section_services {
    width: 82%;
    margin: auto
}

.services_new {
    padding-right: 18%
}

.button-see {
    background-color: #000;
    width: 13.4rem;
    display: flex;
    
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    /* margin: 2rem 0; */
    transition: .5s;
    height: 4.5rem;
   
}
.button-see-new {
    background-color: #000;
    width: 13.4rem;
    display: flex;
    
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    /* margin: 2rem 0; */
    transition: .5s;
    height: 4.5rem;
   
}


@media (max-width:1600px) {
    .button-see-new{
      
        /* margin-left: 10rem; */
    }
}

.button-see-new:hover {
    background-color: #16c1f3
}

.button-see-new a {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1.5rem 0;
    font-family: 'Open Sans';
}





.button-see:hover {
    background-color: #16c1f3
}

.button-see a {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1.5rem 0
}

.about-wrap-content p {
    margin-bottom: 2rem;
    font-size: 1.6rem;
    color: #858585;
    font-weight: 400
}

.bg_process {
    /* background: linear-gradient(100.63deg, #24caee 25.58%, #5ceede 93.31%); */
    background-color: #24CAEE;
    position: relative;
    overflow: hidden;
    padding: 4rem 1rem
}

.murgi {
    position: absolute;
    /* top: 27%; */
    right: -4.49%;
    width: 15%;
    bottom: -27%;
    z-index: 1;
}

.bg_process h2 {
    font-size: var(--small-heading)
}

.our_work {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px
}

.our_work .coloum a {
    width: 100%;
    margin-top: .8rem
}

.our_work .coloum2 {
    flex: 50%;
    max-width: 50%;
    display: flex;
    flex-wrap: wrap
}

.our_work .coloum2 a {
    margin-top: .8rem
}

.coloum2 a {
    width: 50%
}

.coloum2 a img {
    width: 100%;
    padding: 0 4px
}

.our_work .coloum {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px
}

.our_work_main h1 {
    font-size: var(--main-heading)
}

.box-test {
    width: 52.8rem;
    height: auto;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 5px 28px rgba(0, 0, 0, .1);
    padding: 1rem 3rem;
    border-radius: 30px 30px 30px 0;
    min-height: 20rem;
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 89px;


}

.box-test p {
    margin: auto;
    /* font-weight: 500;
    font-size: 1.7rem;
    line-height: 2;
    color: #000; */
    color:black;
    font-size: 15px;
    font-weight: 500;
}

.client-content p,
.client-heading {
    font-weight: 400 !important;
 
}

.projects-slides-two-client div h2 {
    text-transform: uppercase;
    color: #00c2ff;
    font-weight: 600;
    font-size: var(--main-heading)
}

.projects-slides-two .owl-nav {
    position: absolute;
    left: -26rem;
    margin-top: -6rem
}

.projects-slides-two-left-right.owl-theme .owl-nav .owl-next i:hover,
.projects-slides-two-left-right.owl-theme .owl-nav .owl-prev i:hover {
    color: white !important;
    border: 1px solid transparent !important;
    background-color: #32E0FD;
    transition: all 0.5s ease-in-out;
    
}

.projects-slides-two-left-right .owl-nav .owl-next i,
.projects-slides-two-left-right .owl-nav .owl-prev i {
    font-size: 3.5rem;
    color: rgba(0, 0, 0, .571);
    background-color: none;
    border-radius: 50%;
    border: 2px solid black
}

.projects-slides-two-client .owl-nav .owl-next:hover i {
    background-color: #fff !important;
    fill: white
}

.projects-slides-two-new .owl-nav .owl-prev {
    position: absolute;
    background: 0 0 !important;
    left: -5rem;
    top: 50%
}

.projects-slides-two-new .owl-nav .owl-next {
    position: absolute;
    right: -3rem;
    background: 0 0 !important;
    top: 50%
}

.projects-slides-two-new .owl-nav .owl-next i,
.projects-slides-two-new .owl-nav .owl-prev i {
    font-size: 3.5rem;
    color: #000;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid black;
}




.projects-slides-two-new .owl-nav .owl-next i:hover,
.projects-slides-two-new .owl-nav .owl-prev i:hover {
    color: white !important;
    border: 1px solid transparent !important;
    background-color: #32E0FD;
    transition: all 0.5s ease-in-out;
} 

.projects-slides-two .owl-nav .owl-next,
.projects-slides-two .owl-nav .owl-prev {
    width: 51px;
    height: 51px;
}

.projects-slides-two-new .owl-nav .owl-next,
.projects-slides-two-new .owl-nav .owl-prev {
    width: 51px;
    height: 51px;
}

#slot_character,
#unity_game_development {
    visibility: visible;
    transition: 1s ease-in-out;
    margin-bottom: 49px;
}

#android_game_development,
#game_porting,
#html_game_development,
#kinect_game_development,
#ludo_game_development {
    visibility: hidden;
    position: absolute;
    top: 4rem;
    right: 0;
    transition: 1s ease-in-out
}

#slot_background,
#slot_symbol,
#slot_ui {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    transition: 1s ease-in-out
}

.sticky-main {
    position: -webkit-sticky;
    position: sticky;
    top: 5rem;
    display: flex;
    justify-content: end
}

.sticky {
    color: #d2d2d2;
    height: 40rem;
    position: absolute;
    top: 8rem;
}

.bg_black_section {
    background: linear-gradient(101.63deg, #06213a 16.49%, #03121f 79.89%);
    position: relative;

}


.client_sticky {
    display: flex;
    justify-content: end
}

.sticky_client {
    position: absolute;
    top: 20%;
    right: -2rem;
    color: #1d5386
}

.about-content {
    padding-left: 18% !important
}

.projects-slides-two-client::before {
    content: url(../images/home-page/partical.webp);
    display: block;
    position: absolute;
    right: 10%;
    top: -12%
}

.projects-slides-two-client::after {
    content: url(../images/home-page/partical.webp);
    display: block;
    position: absolute;
    bottom: 10%;
    left: 10%;
    z-index: -1
}

.work {
    margin-top: 3rem;
}



.projects-slides-two-client .owl-nav .owl-prev {
    position: absolute;
    background: 0 0 !important;
    left: -5%;
    top: 40%
}

.projects-slides-two-client .owl-nav .owl-next {
    position: absolute;
    right: -5%;
    background: 0 0 !important;
    top: 40%
}

.projects-slides-two-client .owl-nav .owl-next i,
.projects-slides-two-client .owl-nav .owl-prev i {
    font-size: 7rem;
    color: #ababab5c;
    /* top: -40px; */
}






.client-content {
    padding-left: 12% !important;
    width: 95%
}

.client-content_new {
    /* padding-left: 12% !important; */
    width: 100%;
    height: 100%;
}

.client-heading {
    color: #525252;
    font-size: 4rem
}

.game-position {
    position: absolute;
    left: 10%
}

.game-position_1 {
    position: absolute;
    right: 10%;
    text-align:justify
}


@media (max-width:992px) {

    .game-position_1 {
        /* right: 10%; */
        position: static;
    }
}


.game_art_position {
    position: absolute;
    right: 10%;
    
}
@media (max-width:1600px) {

    .game-position_1 {
       min-width: 44vw;
       right: 8%;
       text-align:justify
    }
}


@media (max-width:1450px) {

    .game-position_1 {
       min-width: 44vw;
       right: 8%;
       text-align:justify
    }
}



@media (max-width:1602px) {

    .game_art_position {
        position: absolute;
        right: 7%
    }

}


.projects-slides-two-left-right .owl-nav .owl-prev {
    position: absolute;
    background: 0 0 !important;
    left: -10rem;
    top: 50%
}

.projects-slides-two-left-right .owl-nav .owl-next {
    position: absolute;
    right: -10rem;
    background: 0 0 !important;
    top: 50%
}

.muted {
    position: absolute;
    bottom: 2%;
    right: 2%
}

.font_size_heading {
    font-size: 7rem !important
}

#loading_career {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999
}

.footer_clr {
    background-color: #f5f5f5
}

.footer_brown {
    background-color: #212121
}

@media (max-width:1920px) {

    .img-big,
    .img-mini {
        width: 50%
    }

    .allcard2 {
        height: 650px
    }
}

@media (max-width:1800px) {

    .mobile,
    .tablet {
        position: absolute
    }

    :root {
        --main-font-family: "Open Sans", sans-serif;
        --heading-font-family: Jost, sans-serif;
        --monoton-font-family: Monoton, cursive;
        --main-color: #38e8fe;
        --optional-color: #3e019a;
        --white-color: #fff;
        --black-color: #14042c;
        --paragraph-color: #888;
        --paragraph-size: 1.5rem;
        --main-heading: 3.4rem;
        --main-heading-line-height: 1.3;
        --sub-heading: 2.4rem;
        --transition: .6s;
        --all-box: 2rem;
        --case-study-main-heading: 3.4rem;
        --btn-gradient-color: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%);
        --big-heading: 9rem;
        --small-heading: 5rem
    }

    .tablet {
        top: 10%;
        right: 50px;
        width: 200px
    }

    .mobile {
        bottom: 10%;
        right: 100px
    }

    #kinect_game {
        background-image: url(../images/game-development/kinect-game-development/banner.png);
        background-size: cover;
        background-position: center;
        height: 590px;
        aspect-ratio: unset;
        padding-top: 20px;
        position: relative;
        z-index: 0
    }
}

@media (max-width:1700px) {
    :root {
        --small-heading-main: 8rem
    }

    .msg img:first-child {
        top: 50%;
        transform: translate(-50%)
    }

    .msg img:nth-child(2) {
        top: 30%;
        transform: translate(-30%)
    }

    .msg img:nth-child(3) {
        top: 40%;
        transform: translate(-40%)
    }

    .mobile,
    .tablet {
        position: absolute
    }

    .tablet {
        top: 10%;
        right: 0;
        width: 200px
    }

    .mobile {
        bottom: 10%;
        right: 50px
    }

    .services-section-content .services-bg-text {
        font-size: 8rem
    }

    .projects-section-content .projects-bg-text {
        color: #dddd;
        font-size: 8rem
    }
}

@media (max-width:1600px) {
    .font_size_heading {
        font-size: 6rem !important
    }

    :root {
        --small-heading: 3.7rem;
        --big-heading: 8rem
    }

    .rummy_banner {
        height: 585px
    }

    #facebookbanner,
    #livecasino {
        background-size: cover;
        background-position: center;
        padding-top: 60px;
        position: relative
    }

    .mobile,
    .rotationright,
    .tablet {
        position: absolute
    }

    .height {
        height: 470px
    }

    .rotationright {
        bottom: 50%;
        right: 4%;
        z-index: -1;
        width: 10%;
        animation: 10s linear 0 infinite reverse mymove
    }

    #livecasino {
        background-image: url(../images/game-development/Livecasino/banner.jpg);
        height: 650px;
        z-index: -2
    }

    .tablet {
        top: 10%;
        right: 0;
        width: 200px
    }

    .mobile {
        bottom: 10%;
        right: 50px
    }

    .circle-ripple {
        background-color: #fff;
        width: 100%;
        height: 300px;
        border-radius: 50%;
        animation: .7s linear infinite ripple;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 100px
    }

    #facebookbanner {
        background-image: url(../images/game-development/Facebook/facebookbanner.png);
        height: 700px;
        z-index: 0;
        background-color: #f6f6f6
    }

    .container-fluid #ludo-game {
        position: relative;
        height: 450px;
        width: 90%;
        margin: auto;
        transition: .5s ease-in
    }

    .container-fluid #ludo-game div img {
        position: absolute;
        height: auto;
        width: 280px !important;
        transition: .3s ease-in
    }

    .container-fluid #ludo-game video:first-child {
        left: 30%;
        z-index: 1;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(2) {
        left: 35%;
        z-index: 2;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(3) {
        left: 40%;
        z-index: 3;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(4) {
        left: 45%;
        z-index: 4;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(5) {
        left: 50%;
        z-index: 5;
        transform: translate(0)
    }
}

@media (max-width:1500px) {
    :root {
        --small-heading: 3.5rem;
        --small-heading-main: 7rem
    }

    .about-wrap-content p {
        margin-bottom: 2rem;
        font-size: 1.4rem;
        color: #858585;
        font-weight: 400
    }

    .projects-section-content .service-new li {
        width: 100%;
        margin-left: 0;
        font-size: 1.6rem
    }

    .rummy-girl img {
        width: 90%
    }

    .msg img:first-child {
        top: 55%;
        transform: translate(-55%)
    }

    .msg img:nth-child(2) {
        top: 35%;
        transform: translate(-35%)
    }

    .msg img:nth-child(3) {
        top: 45%;
        transform: translate(-45%)
    }

    #game-porting,
    #playto,
    #provably {
        height: 600px
    }

    .small-heading-casestudy {
        font-size: 4rem;
        color: #fff
    }

    .container-fluid #ludo-game {
        position: relative;
        height: 350px;
        width: 90%;
        margin: auto;
        transition: .5s ease-in
    }

    .container-fluid #ludo-game div img {
        position: absolute;
        height: auto;
        width: 220px !important;
        transition: .3s ease-in
    }

    .container-fluid #ludo-game video:first-child {
        left: 30%;
        z-index: 1;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(2) {
        left: 35%;
        z-index: 2;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(3) {
        left: 40%;
        z-index: 3;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(4) {
        left: 45%;
        z-index: 4;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(5) {
        left: 50%;
        z-index: 5;
        transform: translate(0)
    }
}

@media (max-width:1400px) {
    .font_size_heading {
        font-size: 5rem !important
    }

    #casinobanner,
    #livecasino {
        background-size: cover;
        background-position: center
    }

    #anroidbanner,
    #casinobanner,
    #livecasino {
        padding-top: 60px;
        position: relative;
        z-index: -2
    }

    .rotationright,
    .rotationrightback {
        animation: 10s linear 0 infinite reverse mymove
    }

    :root {
        --main-font-family: "Open Sans", sans-serif;
        --heading-font-family: Jost, sans-serif;
        --monoton-font-family: Monoton, cursive;
        --main-color: #38e8fe;
        --optional-color: #3e019a;
        --white-color: #fff;
        --black-color: #14042c;
        --paragraph-color: #888;
        --paragraph-size: 1.5rem;
        --main-heading: 3rem;
        --main-heading-line-height: 1.3;
        --sub-heading: 2rem;
        --transition: .6s;
        --all-box: 1.8rem;
        --case-study-main-heading: 3rem;
        --btn-gradient-color: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%);
        --big-heading-main: 11rem;
        --small-heading-main: 5rem;
        --big-heading: 7rem;
        --small-heading: 3.5rem
    }

    .services-contents p {
        font-family: var(--main-font-family);
        font-size: 1.6rem;
        font-weight: 400
    }

    .projects-filter-menu li {
        padding: 10px 15px;
        font-size: 1.5rem;
        margin-right: 5px
    }

    .arrange-cat {
        bottom: -2%
    }

    .small-heading-main {
        font-size: var(--small-heading-main);
        color: #40c4ff;
        margin-top: 0
    }

    .big-heading-main {
        font-size: 94px !important;
        color: #fff;
        line-height: .9
    }

    .height-content {
        min-height: 420px;
        height: auto;
        cursor: pointer;
        transition: .5s
    }

    .anroid-height {
        min-height: 200px;
        height: auto
    }

    .html-height {
        min-height: 280px;
        height: auto
    }

    #anroidbanner {
        background: #06c085;
        background: linear-gradient(105deg, #06c085 0, #37c94f 35%, #a4c639 100%);
        background-size: cover;
        background-position: center;
        height: 690px
    }

    #livecasino {
        background-image: url(../images/game-development/Livecasino/banner.jpg);
        height: 550px
    }

    .casino-content {
        padding-left: 5%
    }

    .facecook-casino {
        padding-left: 4%
    }

    .ludo_banner {
        background: linear-gradient(to right, #02a4d6, #00457d)
    }

    .gamix_portal,
    .ludo_banner,
    .pool_banner {
        background-size: cover;
        background-position: center;
        height: 690px;
        padding-top: 60px;
        position: relative
    }

    .pool_banner {
        background-image: url(../images/product/8pool-game/8pool_Banner_Gamix.jpg)
    }

    .gamix_portal {
        background-image: url(../images/product/Game-Portal/Portal_bg.png)
    }

    .mobile,
    .rotationright,
    .rotationrightop,
    .tablet {
        position: absolute
    }

    .height {
        height: 350px
    }

    .rotationright {
        bottom: 5%;
        right: 10%;
        z-index: -1;
        width: 60px
    }

    .rotationrightback {
        position: absolute;
        bottom: 15%;
        right: 5%;
        z-index: -2;
        width: 30px
    }

    .rotationrightop {
        bottom: 0;
        right: 7%;
        z-index: -1;
        animation: 10s linear 0 infinite reverse mymoves;
        width: 30px
    }

    .tablet {
        top: 17%;
        right: 0;
        width: 160px
    }

    .mobile {
        bottom: 2%;
        right: 50px;
        width: 300px
    }

    .main-navbar .navbar .navbar-nav .nav-item {
        position: relative;
        margin-left: 15px !important;
        margin-right: 15px !important
    }



}



/* ================================================================================================== */

@media (max-width:1380px) {
    .rummy_banner {
        height: 550px
    }

    .msg img:first-child {
        top: 60%;
        transform: translate(-60%)
    }

    .msg img:nth-child(2) {
        top: 45%;
        transform: translate(-45%)
    }

    .msg img:nth-child(3) {
        top: 55%;
        transform: translate(-55%)
    }

    .main-heading-casestudy {
        color: #76def4 !important;
        font-size: 9rem !important;
        font-family: var(--monoton-font-family) !important;
        font-weight: 400 !important;
        line-height: 1
    }

    #iframediv {
        position: absolute;
        top: 0;
        left: 25%;
        width: 50%;
        z-index: 9999;
        transform: translate(0, -100%);
        transition: 1s
    }

    .small-heading-casestudy {
        font-size: 4rem;
        color: #fff
    }
}

@media (max-width:1294px) {

    .stand:after,
    .stand:before {
        content: "";
        display: block;
        position: absolute;
        background: #fff
    }

    :root {
        --main-font-family: "Open Sans", sans-serif;
        --heading-font-family: Jost, sans-serif;
        --monoton-font-family: Monoton, cursive;
        --main-color: #38e8fe;
        --optional-color: #3e019a;
        --white-color: #fff;
        --black-color: #14042c;
        --paragraph-color: #888;
        --paragraph-size: 1.5rem;
        --main-heading: 3rem;
        --main-heading-line-height: 1.3;
        --sub-heading: 2rem;
        --transition: .6s;
        --all-box: 1.8rem;
        --case-study-main-heading: 3rem;
        --btn-gradient-color: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%);
        --big-heading-main: 9rem;
        --small-heading-main: 4.5rem;
        --big-heading: 7rem
    }

    .stand:before {
        width: 25%;
        height: 66px;
        bottom: -60px;
        left: 37%;
        border-bottom: 15px solid #cff0f7
    }

    .stand:after {
        border-top-left-radius: 150px;
        border-top-right-radius: 150px;
        width: 45%;
        height: 50px;
        bottom: -110px;
        left: 27.5%;
        box-shadow: -2px 12px 5px #ededed
    }

    .small-heading-main {
        font-size: var(--small-heading-main);
        color: #40c4ff;
        margin-top: 0
    }

    .services-contents p {
        font-family: var(--main-font-family);
        font-size: 1.5rem;
        font-weight: 400
    }
}

@media (max-width:1200px) {
    .font_size_heading {
        font-size: 4rem !important
    }

    .height-content {
        min-height: 10px;
        height: auto;
        cursor: pointer;
        transition: .5s
    }

    #anroid-height .col-md-6 .col-md-12 .height-content {
        min-height: 180px !important
    }

    .main-heading-casestudy {
        color: #76def4 !important;
        font-size: 7rem !important;
        font-family: var(--monoton-font-family) !important;
        font-weight: 400 !important;
        line-height: 1
    }

    .small-heading-casestudy {
        font-size: 3rem;
        color: #fff
    }

    .margin-12 {
        margin-bottom: 50px
    }

    .mobile-casestudies,
    .mobile-services {
        display: block !important
    }

    :root {
        --main-font-family: "Open Sans", sans-serif;
        --heading-font-family: Jost, sans-serif;
        --monoton-font-family: Monoton, cursive;
        --main-color: #38e8fe;
        --optional-color: #3e019a;
        --white-color: #fff;
        --black-color: #14042c;
        --paragraph-color: #888;
        --paragraph-size: 1.5rem;
        --main-heading: 3rem;
        --main-heading-line-height: 1.3;
        --sub-heading: 1.8rem;
        --transition: .6s;
        --all-box: 2rem;
        --case-study-main-heading: 3rem;
        --btn-gradient-color: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%);
        --big-heading-main: 11rem;
        --small-heading-main: 5rem;
        --big-heading: 7rem;
        --small-heading: 3rem
    }

    .plr-30 {
        padding: 0 !important
    }

    .megamenu .container-fluid .row .col-lg-4>li>a:hover::before {
        visibility: hidden !important
    }

    .megamenu .container-fluid .row .col-lg-4 li a {
        padding: 1.5em 5.3% 1em 10% !important
    }

    .megamenu .container-fluid .row .col-lg-4 li ul a,
    .megamenu .container-fluid .row .col-lg-4 li ul li a {
        font-size: 1.3rem !important;
        font-family: 'Open Sans';
        color: var(--paragraph-color) !important;
        font-weight: 500
    }

    .megamenu .container-fluid .row .col-lg-4 li ul li a {
        font-weight: 600
    }

    .megamenu .container-fluid .row .col-lg-4 li hr {
        display: none
    }

    .megamenu .container-fluid .row .col-lg-4 li h2 {
        font-size: 1.3rem !important;
        font-weight: 400;
        font-family: 'Open Sans'
    }

    .game-development-icon li a::before {
        content: "" !important;
        display: none
    }

    .common-icon-class a::before {
        content: "" !important;
        display: none !important
    }
}

@media (max-width:1080px) {
    .projects-slides-two .owl-nav {
        position: relative;
        left: 0;
        margin: 0
    }

    .coins-play,
    .gamixmobile,
    .girl,
    .girl-2,
    .rummy-girl,
    .tablet-playto {
        display: none
    }

    #game-porting,
    #playto,
    #provably {
        height: 500px
    }

    .pooker_banner,
    .pool_banner,
    .slot-product {
        position: relative
    }

    #portfolio_Dinomonk,
    .pooker_banner,
    .pool_banner,
    .slot-product,
    .teenpatti_banner {
        background-size: cover
    }

    #donomonk1,
    #donomonk2,
    #donomonk3 {
        background-attachment: fixed;
        background-size: 100%;
        background-repeat: no-repeat;
        width: 100%
    }

    #donomonk1,
    #donomonk2,
    #donomonk3,
    #portfolio_Dinomonk,
    .pooker_banner,
    .pool_banner,
    .slot-product,
    .teenpatti_banner {
        background-position: center
    }

    .projects-filter-menu li {
        font-size: 1.3rem;
        padding: 10px
    }

    .case-study-new-heading {
        font-size: 6rem !important
    }

    .case-study-sub-heading {
        font-size: 3rem !important
    }

    .projects-details-desc .article-projects-with-info .projects-info-content .info-list li,
    .projects-details-desc .article-projects-with-info .projects-info-content .info-list li span {
        font-size: 1.5rem
    }

    .slot-product {
        background-image: url(../images/product/Slot-game/Slot-banner.jpg);
        width: 100%;
        height: 930px
    }

    .pooker_banner {
        background-image: url(../images/product/PokerGame/pooker_banner.jpg);
        height: 550px;
        padding-top: 20px !important
    }

    .teenpatti_banner {
        background-image: url(../images/game-development/teenpatti/teenpatti-banner.jpg);
        height: 600px;
        padding-top: 20px !important
    }

    .pool_banner {
        background-image: url(../images/product/8pool-game/8pool_Banner_Gamix.jpg);
        height: 520px;
        background-size: auto
    }

    .pk-content,
    .pool-content {
        padding: 50px 50px 0
    }

    .gamix-image-content {
        position: absolute;
        top: 50px;
        left: 80%;
        transform: translate(0)
    }

    .poker-40,
    .poker-60,
    .product-50 {
        flex: 100%;
        width: 100%
    }

    .poker-40 {
        margin-top: 0
    }

    .slot-arrange {
        position: relative;
        top: 20px
    }

    .slot-only {
        flex-direction: column-reverse !important
    }

    .right-align {
        text-align: left
    }

    .poker-rowss,
    .rowss {
        display: flex;
        flex-wrap: wrap
    }

    .rowss {
        flex-direction: column
    }

    .poker-rowss {
        flex-direction: column-reverse
    }

    .ludo-product {
        height: auto !important
    }

    .ludoimg {
        position: relative;
        overflow: hidden;
        width: 1250px
    }

    .pool-content {
        position: relative;
        left: 0
    }

    :root {
        --main-font-family: "Open Sans", sans-serif;
        --heading-font-family: Jost, sans-serif;
        --monoton-font-family: Monoton, cursive;
        --main-color: #38e8fe;
        --optional-color: #3e019a;
        --white-color: #fff;
        --black-color: #14042c;
        --paragraph-color: #888;
        --paragraph-size: 1.5rem;
        --main-heading: 3rem;
        --main-heading-line-height: 1.3;
        --sub-heading: 2rem;
        --transition: .6s;
        --all-box: 1.8rem;
        --case-study-main-heading: 3rem;
        --btn-gradient-color: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%);
        --big-heading-main: 7rem;
        --small-heading-main: 3rem;
        --big-heading: 7rem;
        --small-heading: 5rem
    }

    .blue {
        font-size: var(--paragraph-size);
        font-weight: 600;
        margin-bottom: 0;
        font-family: var(--heading-font-family);
        color: #26d1fc
    }

    .rounded-border p {
        color: #646464;
        font-weight: 600;
        line-height: 1.5;
        padding: 0 8px
    }

    .first-game,
    .five-game,
    .second-game,
    .six-game {
        height: 450px
    }

    .four-game,
    .third-game {
        height: 558px
    }

    .services-contents p {
        font-size: 1.4rem
    }

    .walkmen {
        display: none !important
    }

    .main-banner-image {
        position: relative;
        z-index: 1;
        text-align: center;
        top: 14px !important;
        left: 11% !important
    }

    .small-heading-main {
        font-size: var(--small-heading-main);
        color: #40c4ff;
        margin-top: 0
    }

    .main-banner-area {
        padding-top: 120px
    }

    .pb-pro {
        padding-bottom: 70px
    }

    #portfolio_Dinomonk {
        background-image: url(../images/Portfolio/dragon.jpg);
        background-attachment: fixed;
        height: 60vh;
        width: 100%;
        position: relative;
        z-index: 5
    }

    .dinomonk_Leafe {
        position: absolute;
        bottom: 0;
        z-index: 1
    }

    .dinomonk_logo {
        position: absolute;
        top: 30%;
        left: 35%;
        width: 30%
    }

    .dinomonk_project {
        position: relative;
        z-index: 555
    }

    #donomonk1 {
        background-image: url(../images/Portfolio/Dinomonk/Background/2.jpg)
    }

    #donomonk2 {
        background-image: url(../images/Portfolio/Dinomonk/Background/1.jpg)
    }

    #donomonk3 {
        background-image: url(../images/Portfolio/Dinomonk/Background/3.jpg)
    }

    .dinomonk-main {
        font-family: var(--monoton-font-family);
        font-weight: 200;
        color: #d0d0d0
    }

    .container-fluid #ludo-game {
        position: relative;
        height: 300px;
        width: 80%;
        margin: auto;
        transition: .1s ease-in
    }

    .container-fluid #ludo-game div img {
        position: absolute;
        height: auto;
        width: 180px !important;
        border: 5px solid #fff;
        transition: .3s ease-in
    }

    .container-fluid #ludo-game video:first-child {
        left: 27%;
        z-index: 1;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(2) {
        left: 32%;
        z-index: 2;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(3) {
        left: 38%;
        z-index: 3;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(4) {
        left: 45%;
        z-index: 4;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(5) {
        left: 50%;
        z-index: 5;
        transform: translate(0)
    }

    .single-features-card {
        transform: none !important
    }

    .single-features-card::before {
        content: "";
        background: 0 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    .single-features-card:hover::before {
        opacity: 1;
        visibility: visible;
        width: 100%;
        height: 100%;
        background: 0 0
    }

    .single-features-card:hover .content {
        opacity: 1;
        visibility: visible
    }

    .single-features-card:hover .content h3 a {
        color: #000
    }

    .single-features-card:hover .content p {
        color: var(--paragraph-color)
    }

    .single-features-card:hover .hover-content {
        opacity: 0;
        visibility: hidden
    }

    .single-features-card:hover .hover-content h3 a {
        color: #fff !important
    }

    .single-features-card:hover .hover-content p {
        color: var(--white-color)
    }
}

@media (max-width:992px) {

    .game-position,
    .game_development_position,
    .projects-slides-two-left-right .owl-nav .owl-next,
    .projects-slides-two-left-right .owl-nav .owl-prev {
        position: static;
        /* margin-bottom: -13rem; */
    }

    .gamix_portal,
    .ludo_banner,
    .teenpatti_banner {
        padding-top: 20px !important
    }

    .box-test p,
    .services-contents p {
        font-size: 1.4rem
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse
    }

    #homa_page .col-lg-7 .w-50 {
        width: auto !important
    }

    .projects-area.style-two-area .container-fluid {
        padding-bottom: 1rem
    }

    .border-after::after,
    .border-before::after,
    .container-fluid #ludo-game,
    .d-none-md,
    .game-testing,
    .murgi,
    .sticky-main,
    .sticky_client {
        display: none
    }

    #slot_background,
    #slot_symbol,
    #slot_ui {
        top: 18.5rem
    }

    .services_new {
        padding-right: 0 !important
    }

    #html_game_development,
    #kinect_game_development,
    #ludo_game_development,
    #unity_game_development {
        top: 22rem
    }

    .game-position {
        left: 0
    }

    .game_art_position {
        position: static;
        right: 0
    }

    .rummy_banner {
        height: 1000px
    }

    .about-content {
        padding-left: 2% !important
    }

    .client-content {
        padding-left: 0 !important;
        margin-top: 0
    }

    .client-heading
    .projects-slides-two-new .owl-nav .owl-next i,
    .projects-slides-two-new .owl-nav .owl-prev i  */
    {
        font-size: 2.5rem
    }

    /* .projects-slides-two-new .owl-nav .owl-next  */
    /* {
        right: -3rem
    } */

    /* .projects-slides-two-new .owl-nav .owl-prev */
     /* {
        left: -3rem
    } */

    .box-test {
        width: 80%
    }

    .projects-slides-two-client .owl-nav .owl-next i,
    .projects-slides-two-client .owl-nav .owl-prev i {
        /* font-size: 4rem; */
        font-size: 3rem;
        font-weight: 100;
    }

    .projects-slides-two-client .owl-nav .owl-next {
        right: -5%
        /* background-image: url('path/to/your-right-arrow-image.png') */
    }

    .projects-slides-two-client .owl-nav .owl-prev {
        left: -5%
        /* background-image: url(../images/game-development/kinect-game-development/banner.png) */
    }

    .box-test p {
        font-weight: 500;
        line-height: 1.5;
        color: #000;
        text-align: left
    }

    .rummy_banner .rummy-table {
        margin-top: 40px !important;
        width: 100%
    }

    #game-testing,
    .five-game,
    .six-game {
        height: 450px
    }

    #game-testing .container-fluid .row .services-contents {
        align-items: flex-start !important
    }

    .bg-back {
        background-image: url(../images/game-development/game-art.png);
        background-size: cover;
        opacity: .5;
        height: 100%;
        padding-bottom: 20px
    }

    #anroidbanner,
    #casinobanner,
    #livecasino {
        padding-top: 60px;
        z-index: -2
    }

    .teenpatti_banner {
        background: #0d1d37;
        height: 400px
    }

    .first-game,
    .second-game {
        height: 420px
    }

    .mobile-ludo-video {
        border: 5px solid #fff;
        border-radius: 15px;
        width: 60%;
        margin: auto
    }

    .mobile-ludo img:first-child {
        z-index: 5
    }

    .mobile-ludo img:nth-child(2) {
        z-index: 4
    }

    .mobile-ludo img:nth-child(3) {
        z-index: 3
    }

    .mobile-ludo img:nth-child(4) {
        z-index: 2
    }

    .mobile-ludo img:nth-child(5) {
        z-index: 1
    }

    .slot-product {
        background-image: url(../images/product/Slot-game/Slot-banner.jpg);
        background-size: cover;
        background-position: center;
        width: 100%;
        position: relative;
        height: 800px
    }

    .four-game,
    .third-game {
        height: 490px
    }

    .scale-character {
        transform: scale(1.2) !important
    }

    .walkmen {
        display: none !important
    }

    .small-heading-main {
        font-size: var(--small-heading-main);
        color: #40c4ff;
        margin-top: 0
    }

    .main-banner-image {
        position: relative;
        z-index: 1;
        text-align: center;
        top: 0;
        left: 12% !important
    }

    .border-right p {
        font-size: 7rem
    }

    #anroidbanner {
        background: #06c085;
        background: linear-gradient(105deg, #06c085 0, #37c94f 35%, #a4c639 100%);
        height: 750px
    }

    #anroidbanner,
    #casinobanner,
    #livecasino,
    .gamix_portal,
    .ludo_banner {
        background-size: cover;
        background-position: center;
        position: relative
    }

    #casinobanner,
    #livecasino {
        background-image: url(../images/game-development/Casino/banner.png);
        height: 800px
    }

    #livecasino {
        background-image: url(../images/game-development/Livecasino/banner.jpg)
    }

    .ludo_banner {
        background-image: linear-gradient(to right, #02a4d6, #00457d);
        height: 520px
    }

    .gamix_portal {
        background-image: url(../images/product/Game-Portal/Portal_bg.png);
        height: 650px
    }
}

@media (max-width:820px) {
    :root {
        --main-font-family: "Open Sans", sans-serif;
        --heading-font-family: Jost, sans-serif;
        --monoton-font-family: Monoton, cursive;
        --main-color: #38e8fe;
        --optional-color: #3e019a;
        --white-color: #fff;
        --black-color: #14042c;
        --paragraph-color: #888;
        --paragraph-size: 1.5rem;
        --main-heading: 3rem;
        --main-heading-line-height: 1.3;
        --sub-heading: 2rem;
        --transition: .6s;
        --all-box: 1.8rem;
        --case-study-main-heading: 3rem;
        --btn-gradient-color: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%);
        --big-heading-main: 7rem;
        --small-heading-main: 3rem;
        --big-heading: 7rem;
        --small-heading: 3.6rem
    }

    .gamix-image-content {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%)
    }

    .margin-casestudies {
        margin-top: 1rem
    }

    #casestudybanner {
        height: 300px
    }

    .projects-filter-menu li {
        font-size: 1rem
    }

    .arrange-cat {
        right: -10px
    }

    .main-heading-casestudy {
        color: #76def4 !important;
        font-size: 5rem !important;
        font-family: var(--monoton-font-family) !important;
        font-weight: 400 !important;
        line-height: 1
    }

    .small-heading-casestudy {
        font-size: 2rem;
        color: #fff
    }

    .circle-ripple {
        background-color: #fff;
        width: 100%;
        height: 200px;
        border-radius: 50%;
        animation: .7s linear infinite ripple;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 100px
    }

    .dinomonk_video {
        background: #14190d;
        width: 100%;
        padding-top: 30px;
        padding-bottom: 40px;
        margin: 0;
        z-index: 99;
        position: relative
    }

    .container-fluid #ludo-game {
        position: relative;
        height: 200px;
        width: 80%;
        margin: auto;
        transition: .1s ease-in
    }

    .container-fluid #ludo-game video {
        position: absolute;
        height: auto;
        border: 3px solid #fff;
        width: 120px !important;
        transition: .1s ease-in
    }

    .container-fluid #ludo-game video:first-child {
        left: 0;
        z-index: 1;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(2) {
        left: 20%;
        z-index: 2;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(3) {
        left: 38%;
        z-index: 3;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(4) {
        left: 55%;
        z-index: 4;
        transform: translate(0)
    }

    .container-fluid #ludo-game video:nth-child(5) {
        left: 70%;
        z-index: 5;
        transform: translate(0)
    }
}

@media (max-width:800px) {
    .pooker-images .swiper-slide img {
        width: 300px !important
    }
}

@media (max-width:768px) {

    #facebookbanner,
    #kinect_game,
    #livecasino {
        padding-top: 20px;
        position: relative
    }

    #casinobanner,
    #facebookbanner,
    #htmlbanner,
    #kinect_game,
    #livecasino {
        position: relative
    }

    .flex div {
        width: 50%;
        padding: 10px
    }

    #facebookbanner,
    .bg-img,
    .gunman-sub-product {
        background-size: cover
    }

    #unrealbanner {
        height: auto !important;
        padding-bottom: 20px !important
    }

    .mb-unreal {
        padding-top: 20px !important
    }

    #casinobanner,
    #htmlbanner {
        padding-top: 60px;
        z-index: -2
    }

    .stand:after,
    .stand:before {
        content: "";
        background: #fff;
        height: 32px;
        position: absolute
    }

    .pool-board-arrange {
        position: relative;
        right: -8%
    }

    .about-wrap-content {
        padding-left: 0
    }

    s .Slot_Girl {
        height: 500px;
        margin-top: 0
    }

    #kinect_game {
        height: 600px;
        background-image: url(../images/game-development/kinect-game-development/banner.png);
        aspect-ratio: unset;
        z-index: 0
    }

    .container-fluid {
        padding: 0 25px
    }

    .container {
        padding: 0 20px
    }

    .section-title h2 .overlay {
        position: absolute;
        left: 0 !important;
        top: 0;
        background: var(--btn-gradient-color);
        width: 100%;
        height: 100%;
        z-index: 1
    }

    .main-banner-image {
        top: 0 !important
    }

    .small-heading-main {
        font-size: var(--small-heading-main);
        color: #40c4ff;
        margin-top: 0
    }

    #facebookbanner {
        background-image: url(../images/game-development/Facebook/facebookbanner.png);
        background-position: center;
        height: 700px
    }

    .anroid-banner-image,
    .arrange-cat,
    .arrange-game,
    .desktop-visible,
    .dice,
    .facebook-cristle,
    .gamix-portal-image,
    .gamixmobile,
    .ludoboard {
        display: none
    }

    .toprotation,
    .toprotationbig {
        position: absolute;
        z-index: -1
    }

    #casinobanner,
    #htmlbanner,
    #kinect_game,
    #livecasino,
    .pool {
        background-position: center;
        background-size: cover
    }

    .border-after::after,
    .border-before::after {
        content: "";
        display: none
    }

    .android-icon {
        right: -20%;
        opacity: .5
    }

    #htmlbanner {
        background-image: url(../images/game-development/Html/banner.png);
        height: 640px
    }

    .firrst-view {
        margin-top: 50px
    }

    .pool,
    .w-60 {
        width: 100%
    }

    #casinobanner {
        background-image: url(../images/game-development/Casino/banner.png);
        height: auto !important;
        padding-bottom: 20px
    }

    #casinobanner .container-fluid .row .height {
        height: 0 !important
    }

    #casinobanner .container-fluid .row .col-md-7 .pr-5 {
        padding-right: 0 !important
    }

    #livecasino {
        background-image: url(../images/game-development/Livecasino/banner.jpg);
        height: 620px;
        z-index: -2
    }

    .flex-1 {
        flex: 50%;
        max-width: 50%
    }

    .walkmen {
        display: none !important
    }

    .circle-ripple {
        background-color: #fff;
        width: 70%;
        height: 200px;
        border-radius: 50%;
        animation: .7s linear infinite ripple;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 80px auto
    }

    .circle-ripple img {
        width: 100px
    }

    .toprotation {
        top: -40px;
        left: 50%;
        width: 60px;
        animation: 10s linear 0 infinite reverse mymove
    }

    .toprotationbig {
        top: -30px;
        left: 30%;
        width: 80px;
        animation: 10s linear 0 infinite reverse mymoves
    }

    .rotation,
    .rotationback,
    .rotationright,
    .rotationrightback {
        animation: 10s linear 0 infinite reverse mymove;
        position: absolute
    }

    .rotationop,
    .rotationrightop {
        position: absolute;
        animation: 10s linear 0 infinite reverse mymoves
    }

    .rotation {
        bottom: 20px;
        left: -10%;
        z-index: -1;
        width: 50px
    }

    .rotationback {
        bottom: 50px;
        left: -5%;
        z-index: -2;
        width: 40px
    }

    @keyframes mymove {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    .rotationop {
        bottom: 10px;
        left: 20px;
        z-index: -1;
        width: 30px
    }

    @keyframes mymoves {
        0% {
            transform: rotate(360deg)
        }

        to {
            transform: rotate(0)
        }
    }

    .rotationright {
        bottom: 5%;
        right: 10%;
        z-index: -1;
        width: 60px
    }

    .rotationrightback {
        bottom: 15%;
        right: 5%;
        z-index: -2;
        width: 30px
    }

    .rotationrightop {
        bottom: 0;
        right: 7%;
        z-index: -1;
        width: 30px
    }

    .ludo {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        left: 0;
        padding: 0 60px
    }

    .mobile-visible,
    .stand:after,
    .stand:before {
        display: block
    }

    .right-align {
        text-align: left
    }

    .text-centers {
        padding: 0 10px;
        text-align: center
    }

    .para-gamix {
        padding: 0 10px;
        width: 490px
    }

    .gamix-image-content {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%)
    }

    .gamix {
        width: 100%;
        padding-top: 20px;
        height: 700px
    }

    .moniter {
        background-color: #031d30;
        padding: 20px;
        border: 10px solid #cff0f7;
        border-radius: 20px;
        margin-top: 20px
    }

    .stand:before {
        width: 40%;
        bottom: -26px;
        left: 29%
    }

    .stand:after {
        border-top-left-radius: 150px;
        border-top-right-radius: 150px;
        width: 60%;
        bottom: -58px;
        left: 20%;
        box-shadow: -2px 12px 5px #ededed
    }

    .allcard2 {
        height: 420px !important;
        margin-top: 50px
    }

    .gunman-sub-product {
        background-image: url(../images/product/Gumman/banner_img.jpg);
        background-position: initial;
        height: 680px;
        padding-top: 60px;
        position: relative
    }

    .main-portfolio div:nth-child(9) img {
        border-bottom: none
    }

    .text {
        font-size: 15px;
        letter-spacing: 3px;
        line-height: 20px
    }

    #metaverse {
        background: linear-gradient(132.93deg, #2d3d9c 46.5%, #273485 53.13%);
        background-size: cover;
        background-position: center;
        padding: 60px 0 0;
        position: relative;
        height: auto;
        z-index: 0;
        background-color: #f6f6f6
    }

    #metaverse .container-fluid .row .col-md-6 img {
        position: static;
        bottom: 0;
        width: 100%
    }
}

@media (max-width:600px) {
    .box-test {
        width: 95%;
        position: relative;
        bottom: 5rem;
    }


    #iframediv,
    .beeline,
    .casestudyvideo,
    .casino-case,
    .die,
    .election,
    .gameportal,
    .kinect-banner,
    .letterstack,
    .livecasino,
    .milo,
    .minesweeper,
    .nft,
    .prodigy,
    .projects-details-desc .article-projects-with-info .projects-info-content .info-list,
    .tug,
    .wheel,
    .worldcasino,
    .landslot,
    .zilla {
        width: 100%
    }

    .font_size_heading {
        font-size: 3.5rem !important
    }

    .rummy_banner {
        height: 700px;
        margin-top: 12px
    }

    #metaverse,
    .main-banner-area,
    .projects-details-area {
        margin-top: 12px !important
    }

    .about-wrap-content .about-bg-text {
        font-size: 2.3rem
    }

    #game-porting,
    #playto,
    #provably,
    .background-design {
        height: 470px;
        margin-top: 12px
    }

    .content-play {
        position: absolute;
        top: 6px;
        right: 0%;
    }

    #iframediv {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
        transform: translate(0, -100%);
        transition: 1s
    }

    .beeline,
    .casino-case,
    .die,
    .election,
    .gameportal,
    .kinect-banner,
    .letterstack,
    .livecasino,
    .milo,
    .minesweeper,
    .nft,
    .prodigy,
    .tug,
    .wheel,
    .worldcasino,
    .landslot,
    .zilla {
        background-position: top center;
        background-size: 250%
    }

    .case-study-new-heading,
    .main-heading-casestudy {
        font-family: var(--monoton-font-family) !important;
        font-weight: 400 !important;
        line-height: 1
    }

    #casinobanner,
    #facebookbanner,
    #htmlbanner {
        background-position: center
    }

    #anroidbanner,
    #casinobanner,
    #htmlbanner {
        padding-top: 20px;
        z-index: -2
    }

    .ludoimg,
    .pokerchip {
        position: relative;
        overflow: hidden
    }

    #donomonk1,
    #donomonk2,
    #donomonk3 {
        background-size: 70%
    }

    #donomonk1,
    #donomonk2,
    #donomonk3,
    .beeline,
    .casino-case,
    .die,
    .election,
    .gameportal,
    .kinect-banner,
    .letterstack,
    .livecasino,
    .milo,
    .minesweeper,
    .nft,
    .prodigy,
    .tug,
    .wheel,
    .worldcasino,
    .landslot,
    .zilla {
        background-repeat: no-repeat
    }

    #donomonk1,
    #donomonk2,
    #donomonk3,
    #portfolio_Dinomonk,
    .beeline,
    .casino-case,
    .die,
    .election,
    .gameportal,
    .kinect-banner,
    .letterstack,
    .livecasino,
    .milo,
    .minesweeper,
    .nft,
    .prodigy,
    .tug,
    .wheel,
    .worldcasino,
    .landslot,
    .zilla {
        background-attachment: fixed
    }

    #casestudybanner {
        height: 350px;
        margin-top: 0
    }

    #anroidbanner,
    #console-game,
    #facebookbanner,
    #game-testing,
    #htmlbanner,
    #ios-game,
    #kinect_game,
    #mobile-game,
    #unitybanner,
    #unrealbanner,
    .gamix_portal,
    .ludo_banner,
    .pool_banner,
    .services-area,
    .services-details-area,
    .teenpatti_banner {
        margin-top: 12px
    }

    .pm-0 {
        padding: 0 !important
    }

    .arrange-monkey,
    .br,
    .coins1,
    .coins2,
    .dice-ludo-portfolio,
    .dragon,
    .gif-prodigy,
    .ludo-character,
    .ludo-character2,
    .projects-filter-menu .facebook,
    .sm-none {
        display: none
    }

    .casino-content,
    .facecook-casino,
    .pl-50 {
        padding-left: 0
    }

    .pk-content,
    .pool-content {
        padding: 20px 0 0
    }

    .kinect-banner {
        background-image: url(../images/casestudy/kinect-Penalty-Kick-Game/Kincet-game.png)
    }

    .minesweeper {
        background-image: url(../images/casestudy/Minesweeper/Minesweeper_Banner.png)
    }

    .election {
        background-image: url(../images/casestudy/Election_Ke_Baazigaar/Eelection_Ke_Banner.png)
    }

    .milo {
        background-image: url(../images/casestudy/Nestle_Milo_Game/Milo_Banner.png)
    }

    .nft {
        background-image: url(../images/casestudy/Dinominks/Dinomonks_Banner.png)
    }

    .casino-case {
        background-image: url(../images/casestudy/Casin_Royale/Casino_Royale_Banner.png)
    }

    .prodigy {
        background-image: url(../images/casestudy/The_Prodigy_Rises/Prodigy_Banner.png)
    }

    .worldcasino {
        background-image: url(../images/casestudy/World_Casino/World_Casino_Banner.jpg)
    }

    .landslot {
        background-image: url(../images/casestudy/landslot/Landslot_banner_.png);
    }

    .livecasino {
        background-image: url(../images/casestudy/Live_Casino/Live_Casino_Banner.png)
    }

    .gameportal {
        background-image: url(../images/casestudy/Game-Portal/Game_Portal_Banner.png)
    }

    .beeline {
        background-image: url(../images/casestudy/Beeline/Belline_Banner.jpg)
    }

    .tug {
        background-image: url(../images/casestudy/Conjunnect_Four_Tug_of_Walrus/Tug_Walrus_Banner.png)
    }

    .die {
        background-image: url(../images/casestudy/Die_De_Los_Verbos/Die_De_Los_Verbos_Banner.png)
    }

    .zilla {
        background-image: url(../images/casestudy/Zillaniore/Zillaniore_Game_Banner.png)
    }

    .wheel {
        background-image: url(../images/casestudy/Wheel_Of_Fortune/Wheel_Of_Fortune.png)
    }

    #casinobanner,
    #facebookbanner,
    #htmlbanner,
    #portfolio_Dinomonk,
    .slot-product {
        background-size: cover
    }

    .casestudyvideo {
        max-height: 300px !important
    }

    .case-study-new-heading {
        color: #dddd !important;
        font-size: 5rem !important
    }

    .button-position-casestudies {
        position: relative;
        top: -158px
    }

    .case-study-sub-heading {
        font-size: 2.5rem !important
    }

    .projects-details-desc .article-projects-with-info .projects-info-content .info-list li,
    .projects-details-desc .article-projects-with-info .projects-info-content .info-list li span {
        font-size: 1.5rem
    }

    .projects-filter-menu li {
        font-size: 1.5rem;
        padding: 10px 20px;
        margin-bottom: 0px !important
    }

    .facebook-desktop {
        display: none !important
    }

    .facebook-mobile {
        display: inline-block !important
    }

    .main-heading-casestudy {
        color: #76def4 !important;
        font-size: 4rem !important
    }

    .small-heading-casestudy {
        font-size: 1.8rem;
        color: #fff;
        width: 100%
    }

    .black-service {
        color: #000 !important
    }

    .black-p {
        color: var(--paragraph-color) !important
    }

    .mb-w-100 {
        width: 100% !important
    }

    #facebookbanner {
        background-image: url(../images/game-development/Facebook/facebookbanner.png);
        height: 850px;
        padding-top: 20px;
        position: relative
    }

    #anroidbanner {
        background: #06c085;
        background: linear-gradient(105deg, #06c085 0, #37c94f 35%, #a4c639 100%);
        background-size: cover;
        background-position: center;
        height: 550px;
        position: relative
    }

    #htmlbanner {
        background-image: url(../images/game-development/Html/banner.png);
        height: 830px;
        position: relative
    }

    #mobile-game {
        background-color: #31065a
    }

    #console-game {
        background-color: #1d0552;
        z-index: 0
    }

    #pc-game-development {
        background-color: #17003e;
        margin-top: 12px
    }

    #ios-game {
        height: 400px;
        padding-top: 0 !important
    }

    #unitybanner {
        height: 600px;
        background-image: url(../images/game-development/unity-game-development/unity-banner.jpg)
    }

    #unrealbanner {
        height: auto !important;
        padding-bottom: 20px !important
    }

    .ludoimg {
        max-width: 133%;
        left: -18%
    }

    .pokerchip {
        max-width: 200%;
        left: -40%;
        margin: auto
    }

    .para-gamix {
        width: 350px
    }

    #donomonk1,
    #donomonk2,
    #donomonk3,
    #portfolio_Dinomonk,
    .slot-product {
        background-position: center;
        width: 100%
    }

    .gamix {
        height: 550px
    }

    .gamix-image-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 0)
    }

    .slot-product {
        background-image: url(../images/product/Slot-game/Slot-banner.jpg);
        position: relative;
        height: 680px
    }

    .pool-content {
        position: relative;
        left: 0
    }

    .pooker-logo {
        margin-top: 20px
    }

    .allcard2,
    .mt-100 {
        margin-top: 50px
    }

    .services-contents p {
        font-size: 1.4rem
    }

    .scale2 {
        left: 0;
        top: 0
    }

    .scale {
        left: 80px
    }

    .accordion-container .accordion-title {
        position: relative;
        margin: 10px 0 0;
        padding: .625em 2.5em .625em 2em;
        background-color: #f4f7fa;
        font-size: 1.8rem;
        font-weight: 400;
        color: #888;
        cursor: pointer
    }

    #donomonk1 {
        background-image: url(../images/Portfolio/Dinomonk/Background/2.jpg)
    }

    #donomonk2 {
        background-image: url(../images/Portfolio/Dinomonk/Background/1.jpg)
    }

    #donomonk3 {
        background-image: url(../images/Portfolio/Dinomonk/Background/3.jpg)
    }

    .dinomonk_logo,
    .video-main-ludo {
        position: absolute;
        top: 30%;
        left: 24%;
        width: 50%
    }

    .video-main-ludo {
        z-index: 99;
        top: 10%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 60%;
        border: 10px solid #f1f1f1;
        border-radius: 25px;
        background: rgba(241, 241, 241, .8);
        box-shadow: -10px 20px 44px rgba(0, 0, 0, .28)
    }

    #portfolio_Dinomonk {
        background-image: url(../images/Portfolio/dragon.jpg);
        height: 40vh;
        position: relative;
        z-index: 5
    }

    .ludo-project {
        padding-top: 250px !important
    }

    .projects-filter-menu {
        margin-bottom: 20px
    }

    .allcard2 {
        height: 230px !important
    }

    .mt-sm-5 {
        margin-top: 1.5rem
    }

    .Slot_banner {
        background-image: url(../images/product/Slot-game/Slot_Banner.jpg);
        background-size: cover;
        background-position: initial;
        height: 520px;
        padding-top: 60px;
        position: relative;
        margin-top: 0px
    }

    .game-ui-small {
        font-size: 2rem;
        font-weight: 500;
        padding: 0 10px
    }

    .background-portfolio .col-12:first-child img,
    .background-portfolio .col-12:first-child video,
    .background-portfolio .col-6:first-child img,
    .background-portfolio .col-6:first-child video,
    .background-portfolio .ludo-portfolio img {
        margin-top: -150px
    }

    .game-assets {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/gameAssets_mobile.jpg) !important;
        margin-top: 12px
    }

    .game-ui {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/game-uio-and-ux-mobile.jpg) !important;
        margin-top: 12px
    }

    .slot-uiux {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/Slot_ui_ux-mobile.jpg) !important
    }

    .slot-machine {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/slot-machine-mobile.jpg) !important
    }

    .slot-symbols {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/Slots_symbol-mobile.jpg) !important
    }

    .slot-animation {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/slot-animation-mobile.jpg) !important
    }

    .portfolio-art {
        margin: 20px 0 !important
    }

    .character {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/2dcharacter-mobile.jpg) !important;
        margin-top: 12px
    }

    .animationd {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 58%, #212121), url(../images/Portfolio/Banner-images/2d-animation-mobile.jpg) !important
    }

    .arrow-left,
    .arrow-right {
        background: #000;
        padding: 10px;
        position: fixed;
        top: 40%;
        color: #fff;
        z-index: 22;
        cursor: pointer
    }

    .arrow-right {
        right: 0
    }

    .unreal-min-height {
        height: auto;
        min-height: 200px !important
    }

    .margin-testing {
        margin-top: 0px !important;
    }


}

.service-home-button,
.service-home-p {
    font-family: 'Open Sans';
    font-style: normal
}

@media (max-width:480px) {

    #casinobanner,
    #livecasino,
    .pooker_banner {
        margin-top: 12px
    }

    :root {
        --main-font-family: "Open Sans", sans-serif;
        --heading-font-family: Jost, sans-serif;
        --monoton-font-family: Monoton, cursive;
        --main-color: #38e8fe;
        --optional-color: #3e019a;
        --white-color: #fff;
        --black-color: #14042c;
        --paragraph-color: #888;
        --paragraph-size: 1.5rem;
        --main-heading: 2.5rem;
        --case-study-main-heading: 2.5rem;
        --sub-heading: 2rem;
        --main-heading-line-height: 1.3;
        --all-box: 1.8rem;
        --big-heading-main: 7rem;
        --small-heading-main: 3rem;
        --big-heading: 3.2rem;
        --small-heading: 2.5rem;
        --transition: .6s;
        --btn-gradient-color: linear-gradient(90.15deg, #3aeafe -.95%, #23cefb 77.12%, #1cc5fa 101.6%)
    }

    #casinobanner {
        background-image: url(../images/game-development/Casino/banner.jpg);
        height: auto !important;
        padding-bottom: 20px;
        position: relative
    }

    .allcards {
        height: 550px
    }

    .allcard2 {
        height: 400px
    }

    .allcard3 {
        height: 250px
    }

    .small-heading-main {
        font-size: var(--small-heading-main);
        color: #40c4ff;
        margin-top: 0
    }

    .main-banner-content p {
        margin-top: 1.4rem;
        margin-bottom: 0;
        max-width: 825px;
        color: #fff
    }

    /* .get {
        padding: 10px 20px ;
    } */
    .get1 {
        padding: 0px 20px 10px !important;
    }

    .mt-mb-70 {
        margin-top: 70px
    }

    .content-play {
        top: -6px !important;
    }
}

@media (max-width:397px) {
    .minus-mar {
        position: relative;
        right: 20%
    }

    .dice2 {
        bottom: -10% !important;
        margin-bottom: 50px
    }
}

@media (max-width:376px) {
    .container {
        padding: 0 13px
    }

    .slot-arrange {
        top: 50px
    }
}

@media (max-width:361px) {
    .get {
        padding: 10px 20px
    }

    :root {
        --big-heading: 2.8rem
    }

    .teenpatti_banner {
        background: #0d1d37;
        height: 450px;
        padding-top: 20px !important
    }
}

@media all and (min-width:992px) {
    .navbar .has-megamenu {
        position: static !important
    }

    .navbar .megamenu {
        left: 0;
        right: 0;
        width: 100% !important;
        margin: auto;
        padding: 3rem 0 !important;
        display: block
    }
}

.siqembed.zsiq-newtheme iframe {
    height: 100% !important;
    box-shadow: none;
    width: 1px;
    min-width: 100%;
    background: 0 0
}

.projects-slides-two-new .row h2 {
    color: #fff !important;
    font-size: var(--main-heading)
}

.projects-slides-two-new .row p {
    color: rgba(255, 255, 255, .774)
}

.projects-slides-two-new .row .col-sm-6 img {
    width: auto !important
}

.projects-slides-two-new .row .col-sm-6 {
    padding: 0 3%
}

.projects-slides-two.owl-theme .owl-nav [class*=owl-] {
    margin: 0 15px;
    padding: 0;
    background: 0 0;
    color: #000;
    border: 2px solid #000;
    border-radius: 50%;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    display: inline-block;
    width: 41px;
    height: 41px;
     /* line-height: 51px; */
    text-align: center;
    font-size: 3.5rem
}

@media (max-width:1450px) {
    .projects-slides-two.owl-theme .owl-nav [class*=owl-] {
        margin: 92px -15px;

    }

}
@media (max-width:1100px) {
    .projects-slides-two.owl-theme .owl-nav [class*=owl-] {
        margin: 40px -15px;

    }

}

@media (max-width:950px) {
    .projects-slides-two.owl-theme .owl-nav [class*=owl-] {
        margin: 32px -15px;

    }

}


@media (max-width:600px) {
    .projects-slides-two.owl-theme .owl-nav [class*=owl-] {
        margin: -14px -15px;
        top: 1.5rem;
    }

    

}








.projects-slides-two-left-right .owl-theme .owl-nav i [class*=owl-] {
    margin: 0 15px;
    padding: 0;
    background: 0 0;
    color: #000;
    border: 2px solid #000;
    border-radius: 50%;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    display: inline-block;
    width: 41px;
    height: 41px;
     /* line-height: 51px; */
    text-align: center;
    font-size: 3.5rem
}

.projects-slides-two-new .owl-theme .owl-nav i [class*=owl-] {
    margin: 0 15px;
    padding: 0;
    background: 0 0;
    color: #000;
    border: 2px solid #000;
    border-radius: 50%;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    display: inline-block;
    width: 41px;
    height: 41px;
     /* line-height: 51px; */
    text-align: center;
    font-size: 3.5rem
}
.projects-slides-two-left-right.owl-theme .owl-nav .owl-next:hover,
.projects-slides-two-left-right.owl-theme .owl-nav .owl-prev:hover,
.projects-slides-two-new.owl-theme .owl-nav .owl-next:hover,
.projects-slides-two-new.owl-theme .owl-nav .owl-prev:hover,
.projects-slides-two.owl-theme .owl-nav .owl-next:hover,
.projects-slides-two.owl-theme .owl-nav .owl-prev:hover {
    color: white !important;
    border: 0px solid transparent !important;
    background-color: #32E0FD;
    

}

.service-home-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: start
}

.service-home-button {
    background: #c8c8c8;
    border-radius: 3px;
    font-weight: 700;
    font-size: 14px;
    line-height: 36px;
    color: #323232;
    display: inline;
    margin-right: 10px;
    margin-top: 10px
}

.service-home-button:hover {
    background-color: #16c1f3;
    transition: 1s
}

.service-home-p {
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #fff;
    margin-top: 10 px
}

.service-home-h2 {
    font-family: Jost;
    font-style: normal;
    font-weight: 700;
    font-size: 45px;
    overflow-wrap: break-word !important;
    text-transform: uppercase;
    color: #16c1f3
}

.service-game-development-bottom-heading {
    font-family: Jost;
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 30px;
    color: #fff
}

.service-game-development-bottom-p {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    display: flex;
    align-items: center;
    color: #fff
}

.speclize_h4 {
    font-family: Jost;
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 30px
}

.speclize_p {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 36px;
    color: #858585
}

.speclize_box {
    border: 1px solid #e9e9e9 !important
}

.service-home-faq-bg {
    background: #f5f5f5
}

.white-bg {
    background: #fff
}

.min-hight-280 {
    min-height: 280px
}

.megamenu1 {
    position: absolute !important;
    width: 1700px !important;
    top: 100px !important;
    opacity: 0 !important;
    height: 0
}

.dropdown:hover>.megamenu1 {
    opacity: 1 !important;
    height: auto
}

@media only screen and (max-width:1408px) {
    .megamenu1 {
        position: absolute !important;
        width: 1170px !important
    }
}

@media only screen and (max-width:1510px) {
    .megamenu1 {
        position: absolute !important;
        width: 1300px !important
    }
}

@media only screen and (max-width:1780px) {
    .megamenu1 {
        position: absolute !important;
        width: 1400px !important
    }
}

@media only screen and (max-width:480px) {
    img {
        margin-top: 0px
    }

    .projects-slides-two-client .owl-nav .owl-next,
    .projects-slides-two-client .owl-nav .owl-prev {
        top: 30%
    }

    .service-home-h2 {
        font-size: 29px
    }

    /* .projects-slides-two-new .owl-nav .owl-next i:hover,
    .projects-slides-two-new .owl-nav .owl-prev i:hover {
        font-size: 3rem;
        border-radius: 70%
    } */

    .service-home-button {
        width: 300px
    }
}

.image-wrapper {
    width: 100%;
    height: 0;
}

.bg_black_section1 {
    /* background-image: url(../images/main-banner/banner-bg.webp); */
    background-image: url(../images/main-banner/1.png);

    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 101%;
    overflow: hidden;

}

.bg_black_section2 {
    background-image: url(../images/main-banner/banner-bg-ludo.webp) !important;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 101%;
    overflow: hidden;
}

.bg_black_section3 {
    background-image: url(../images/s-banner/banner-sticky.webp) !important;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 101%;
    overflow: hidden;
}

@media (max-width:800px) {
    .bg_black_section2 {
        background-size: cover;
        width: 103%;
        overflow: hidden;
    }

    .bg_black_section1 {
        background-size: cover;
        width: 103%;
        overflow: hidden;

    }

    .big-heading-main {
        padding-top: 45px;
    }

    .big-heading-main {
        font-size: 49px !important;

    }

    .main-banner-image1 .scale-character {}
}

/* @media (max-width:400px){
    .bg_black_section2 {
        background-size: cover;
        width: 103%;
        height: 6px;
    }
} */
.inner_section_services1 {
    width: 100% !important;
    margin: auto;
}

.ludo-product,
.poker-product1 {
    width: 100%;
    justify-content: center;
    align-items: center;
    background-size: cover;
}



.inner_section_services1 .main-banner-image {
    position: relative;
    z-index: 1;
    top: 19px;
    left: 27%;
}

.inner_section_services1 .owl-carousel .owl-item img {
    display: block;

}

.inner_section_services1 .owl-carousel .owl-item .image-set-mobile {
    width: 100% !important;
}

.inner_section_services1 .main-banner-image2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    position: relative;
    left: 15%;
    top: 25px;
}

.projects-slides-two-new1 {
    width: 100% !important;
    position: relative;
    left: -7px;
}


/* =============media query for new slider end  ================ */

.get1 {

    border: 2px solid !important;
    background-color: transparent !important;
    padding: 0px !important;
    margin: 5px;
    transition: .7s;
}

.default-btn:before,
.get1::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 550px;
    height: 550px;
    margin: auto;
    background-color: #00c2ff !important;
    border-radius: 50%;
    z-index: -1;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) translateY(-5%) scale(.4);
    transform: translateX(-50%) translateY(-5%) scale(.4);
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform .1s;

}

.get1:hover {
    border: 2px solid #00c2ff !important;
    transition: .6s;
}

.get2:hover {
    border: 2px solid #0165e1 !important;
    transition: .6s;
}

.get2::before {
    background-color: #0165e1 !important;
    transition: .6s;
}

.get3:hover {
    border: 2px solid #DB4437 !important;
    transition: .6s;
}

.get3::before {
    background-color: #DB4437 !important;
    transition: .6s;
}

.get4:hover {
    border: 2px solid #007AFF !important;
    transition: .6s;
}

.get4::before {
    background-color: #007AFF !important;
    transition: .6s;
}




.swiper {
    width: 100%;
    /* background-image: url(../images/main-banner/banner-bg.webp); */
    position: relative;
    background-position: center;
    background-repeat: no-repeat;

}

.swiper-slide {
    background-position: center;
    background-size: cover;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

.new-slider-bg .swiper-slide img {
    transform: none
}

.new-slider-bg .swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: 'prev';
    display: none;
}

.new-slider-bg .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: 'next';
    display: none;
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 13px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 13px));
    background-color: #fff;
}

.main-banner-image1 {
    position: relative;
    z-index: 1;
    top: 13px;
    left: 29%;
}

.main-banner-content {
    position: relative;
    z-index: 3;
    padding: 20px 40px 0px;
    margin-top: -10rem;
}
@media (max-width:1300px) {
    .main-banner-content {
        
        margin-top: 0rem;
    }
}


.new-slider-bg {
    background-color: #000;
    width: 100%;
    position: relative;
    left: -8px;
    max-height: 100vh !important;

}

@media(min-width:2100px) and (max-width:2110px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 404px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:2090px) and (max-width:2100px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 394px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:2080px) and (max-width:2090px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 384px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:2070px) and (max-width:2080px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 374px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:2060px) and (max-width:2070px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 364px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:2050px) and (max-width:2060px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 354px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:2040px) and (max-width:2050px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 344px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:2030px) and (max-width:2040px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 334px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:2020px) and (max-width:2030px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 324px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:2010px) and (max-width:2020px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 314px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:2000px) and (max-width:2010px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 304px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1990px) and (max-width:2000px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 294px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1980px) and (max-width:1990px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 284px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1970px) and (max-width:1980px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 274px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1960px) and (max-width:1970px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 264px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1950px) and (max-width:1960px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 254px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1940px) and (max-width:1950px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 244px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1930px) and (max-width:1940px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 234px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1920px) and (max-width:1930px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 224px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1910px) and (max-width:1920px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 214px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1900px) and (max-width:1910px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 204px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1890px) and (max-width:1900px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 194px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1880px) and (max-width:1890px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 184px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1870px) and (max-width:1880px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 174px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1860px) and (max-width:1870px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 164px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1850px) and (max-width:1860px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 154px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1840px) and (max-width:1850px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 144px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1830px) and (max-width:1840px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 134px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1820px) and (max-width:1830px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 124px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1810px) and (max-width:1820px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 114px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1800px) and (max-width:1810px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 104px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1790px) and (max-width:1800px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 94px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1780px) and (max-width:1790px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 84px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1770px) and (max-width:1780px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 74px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1760px) and (max-width:1770px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 64px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1750px) and (max-width:1760px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 54px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1740px) and (max-width:1750px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 44px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1730px) and (max-width:1740px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 34px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1720px) and (max-width:1730px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 24px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1710px) and (max-width:1720px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 13px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
    }


}

@media(min-width:1700px) and (max-width:1710px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 4px !important;
        padding: 0px 15px 8px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;

    }


}

@media(min-width:1690px) and (max-width:1700px) {
    .bg_black_section1 {
        height: 840px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 840px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: 4px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1680px) and (max-width:1690px) {
    .bg_black_section1 {
        height: 830px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 830px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1670px) and (max-width:1680px) {
    .bg_black_section1 {
        height: 820px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 820px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1660px) and (max-width:1670px) {
    .bg_black_section1 {
        height: 810px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 810px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1650px) and (max-width:1660px) {
    .bg_black_section1 {
        height: 805px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 805px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1640px) and (max-width:1650px) {
    .bg_black_section1 {
        height: 800px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 800px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1630px) and (max-width:1640px) {
    .bg_black_section1 {
        height: 795px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 795px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1620px) and (max-width:1630px) {
    .bg_black_section1 {
        height: 790px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 790px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1610px) and (max-width:1620px) {
    .bg_black_section1 {
        height: 785px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 785px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1600px) and (max-width:1610px) {
    .bg_black_section1 {
        height: 780px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 780px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1590px) and (max-width:1600px) {
    .bg_black_section1 {
        height: 770px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 770px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1580px) and (max-width:1590px) {
    .bg_black_section1 {
        height: 760px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 760px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 2px !important;
    }


}

@media(min-width:1570px) and (max-width:1580px) {
    .bg_black_section1 {
        height: 760px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 760px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1550px) and (max-width:1570px) {
    .bg_black_section1 {
        height: 750px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 750px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1550px) and (max-width:1570px) {
    .bg_black_section1 {
        height: 750px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 750px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1530px) and (max-width:1550px) {
    .bg_black_section1 {
        height: 740px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 740px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1510px) and (max-width:1530px) {
    .bg_black_section1 {
        height: 730px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 730px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1500px) and (max-width:1510px) {
    .bg_black_section1 {
        height: 720px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 720px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;

    }


}

@media(min-width:1490px) and (max-width:1500px) {
    .bg_black_section1 {
        height: 715px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 715px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1480px) and (max-width:1490px) {
    .bg_black_section1 {
        height: 710px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 710px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1470px) and (max-width:1480px) {
    .bg_black_section1 {
        height: 705px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 705px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1460px) and (max-width:1470px) {
    .bg_black_section1 {
        height: 700px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 700px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1450px) and (max-width:1460px) {
    .bg_black_section1 {
        height: 690px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 690px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1430px) and (max-width:1450px) {
    .bg_black_section1 {
        height: 675px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 675px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1420px) and (max-width:1430px) {
    .bg_black_section1 {
        height: 670px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 670px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1410px) and (max-width:1420px) {
    .bg_black_section1 {
        height: 665px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 665px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1400px) and (max-width:1410px) {
    .bg_black_section1 {
        height: 662px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 662px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1390px) and (max-width:1400px) {
    .bg_black_section1 {
        height: 650px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 650px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1380px) and (max-width:1390px) {
    .bg_black_section1 {
        height: 645px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 645px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1370px) and (max-width:1380px) {
    .bg_black_section1 {
        height: 640px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 640px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1360px) and (max-width:1370px) {
    .bg_black_section1 {
        height: 635px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 635px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1350px) and (max-width:1360px) {
    .bg_black_section1 {
        height: 630px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 630px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1340px) and (max-width:1350px) {
    .bg_black_section1 {
        height: 625px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 625px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1330px) and (max-width:1340px) {
    .bg_black_section1 {
        height: 620px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 620px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1320px) and (max-width:1330px) {
    .bg_black_section1 {
        height: 615px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 615px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1320px) and (max-width:1330px) {
    .bg_black_section1 {
        height: 610px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 610px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1310px) and (max-width:1320px) {
    .bg_black_section1 {
        height: 605px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 605px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1300px) and (max-width:1310px) {
    .bg_black_section1 {
        height: 600px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 600px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }
}

@media(min-width:1290px) and (max-width:1300px) {
    .bg_black_section1 {
        height: 593px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 593px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1280px) and (max-width:1290px) {
    .bg_black_section1 {
        height: 588px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 588px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1270px) and (max-width:1280px) {
    .bg_black_section1 {
        height: 580px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 580px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1260px) and (max-width:1270px) {
    .bg_black_section1 {
        height: 575px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 575px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1250px) and (max-width:1260px) {
    .bg_black_section1 {
        height: 570px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 570px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1240px) and (max-width:1250px) {
    .bg_black_section1 {
        height: 565px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 565px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1230px) and (max-width:1240px) {
    .bg_black_section1 {
        height: 560px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 560px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1220px) and (max-width:1230px) {
    .bg_black_section1 {
        height: 555px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 555px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 3px !important;
    }


}

@media(min-width:1200px) and (max-width:1220px) {
    .bg_black_section1 {
        height: 547px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 547px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 125px 0px 0px 350px !important;
        left: 4px !important;
    }


}

@media(min-width:1190px) and (max-width:1200px) {
    .bg_black_section1 {
        height: 538px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 538px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 125px 0px 0px 350px !important;
        left: 5px !important;
    }


}

@media(min-width:1180px) and (max-width:1190px) {
    .bg_black_section1 {
        height: 533px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 533px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 5px !important;
    }


}

@media(min-width:1160px) and (max-width:1180px) {
    .bg_black_section1 {
        height: 521px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 521px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 5px !important;
    }

    .big-heading-main {
        font-size: 95px !important;
    }

}

@media(min-width:1140px) and (max-width:1160px) {
    .bg_black_section1 {
        height: 512px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 512px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 340px !important;
        left: 5px !important;
    }

    .big-heading-main {
        font-size: 95px !important;
    }

}

@media(min-width:1120px) and (max-width:1140px) {
    .bg_black_section1 {
        height: 500px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 500px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 340px !important;
        left: 5px !important;
    }

    .big-heading-main {
        font-size: 95px !important;
    }

}

@media(min-width:1100px) and (max-width:1120px) {
    .bg_black_section1 {
        height: 490px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 490px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 130px 0px 0px 350px !important;
        left: 5px !important;

    }

    .big-heading-main {
        font-size: 95px !important;
    }

}

@media(min-width:1090px) and (max-width:1100px) {
    .bg_black_section1 {
        height: 475px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 475px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 5px !important;

    }

    .big-heading-main {
        font-size: 85px !important;
    }

}

@media(min-width:1080px) and (max-width:1090px) {
    .bg_black_section1 {
        height: 468px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 468px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 5px !important;

    }

    .big-heading-main {
        font-size: 85px !important;
    }

}

@media(min-width:1070px) and (max-width:1080px) {
    .bg_black_section1 {
        height: 455px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 455px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 120px 0px 0px 350px !important;
        left: 5px !important;

    }

    .big-heading-main {
        font-size: 85px !important;
    }
}

@media(min-width:1060px) and (max-width:1070px) {
    .bg_black_section1 {
        height: 465px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 465px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 112px 0px 0px 350px !important;
        left: 5px !important;

    }

    .big-heading-main {
        font-size: 85px !important;
    }
}


@media(min-width:1050px) and (max-width:1060px) {
    .bg_black_section1 {
        height: 460px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 460px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 112px 15px 0px 299px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 112px 0px 0px 350px !important;
    }

    .big-heading-main {
        font-size: 85px !important;
    }
}


@media(min-width:1030px) and (max-width:1050px) {
    .bg_black_section1 {
        height: 480px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 480px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 111px 23px 0px 230px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 101px 0px 1px 262px !important;
        left: 6px !important;
    }

    .big-heading-main {
        font-size: 85px !important;
    }
}

@media(min-width:1000px) and (max-width:1030px) {
    .bg_black_section1 {
        height: 480px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 480px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 111px 25px 0px 205px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 105px 0px 1px 230px !important;
        left: 6px !important;
    }

    .big-heading-main {
        font-size: 85px !important;
    }
}

@media(min-width:990px) and (max-width:1000px) {
    .bg_black_section1 {
        height: 470px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 470px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 111px 25px 0px 205px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 105px 0px 1px 230px !important;
        left: 6px !important;
    }

    .big-heading-main {
        font-size: 85px !important;
    }

    .small-heading-main {
        font-size: 38px;
    }

    .photobanner a {
        height: 110px;
    }

    .gallery-slider-box {
        bottom: 55px;
    }
}

@media(min-width:970px) and (max-width:990px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 23px 25px 0px 205px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 65px 1px 230px !important;
    }
}

@media(min-width:950px) and (max-width:970px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 35px 25px 0px 205px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 65px 1px 209px !important;
    }
}

@media(min-width:930px) and (max-width:950px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 33px 2px 0px 184px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 65px 1px 164px !important;
    }
}

@media(min-width:920px) and (max-width:930px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 33px 2px 0px 184px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 65px 1px 164px !important;
    }
}

@media(min-width:910px) and (max-width:920px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 33px 2px 0px 184px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 67px 1px 153px !important;
    }
}

@media(min-width:900px) and (max-width:910px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 41px 2px 0px 165px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 65px 1px 134px !important;
    }
}

@media(min-width:890px) and (max-width:900px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 41px 2px 0px 165px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 65px 1px 134px !important;
    }
}

@media(min-width:880px) and (max-width:890px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 41px 2px 0px 146px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 65px 1px 111px !important;
    }
}

@media(min-width:870px) and (max-width:880px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 41px 2px 0px 146px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 65px 1px 111px !important;
    }
}

@media(min-width:850px) and (max-width:870px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 41px 2px 0px 146px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 65px 1px 111px !important;
    }
}

@media(min-width:830px) and (max-width:850px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 48px 6px 0px 133px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 65px 0px 83px !important;
    }
}

@media(min-width:810px) and (max-width:830px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 48px 6px 0px 110px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 0px 59px 0px 66px !important;
    }
}

@media(min-width:790px) and (max-width:810px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 59px 6px 0px 110px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 11px 59px 0px 66px !important;
    }
}

@media(min-width:770px) and (max-width:790px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 47px 22px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 45px 74px 0px 100px !important;
    }
}

@media(min-width:750px) and (max-width:770px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 47px 22px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 45px 67px 0px 91px !important;
    }
}

@media(min-width:735px) and (max-width:750px) {
    .bg_black_section1 {
        height: 755px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 755px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 47px 22px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 65px 67px 0px 91px !important;
    }

    .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: var(--swiper-pagination-bottom, 25px);
    }
}

@media(min-width:700px) and (max-width:735px) {
    .bg_black_section1 {
        height: 730px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 730px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 20px 67px 0px 91px !important;
    }
}

@media(min-width:680px) and (max-width:700px) {
    .bg_black_section1 {
        height: 725px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 725px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 34px 60px 0px 75px !important;
    }
}

@media(min-width:665px) and (max-width:680px) {
    .bg_black_section1 {
        height: 715px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 715px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 34px 60px 0px 75px !important;
    }
}

@media(min-width:655px) and (max-width:665px) {
    .bg_black_section1 {
        height: 710px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 710px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 34px 60px 0px 75px !important;
    }
}

@media(min-width:640px) and (max-width:655px) {
    .bg_black_section1 {
        height: 700px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 700px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 55px 0px 61px !important;
    }
}

@media(min-width:630px) and (max-width:640px) {
    .bg_black_section1 {
        height: 695px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 695px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 55px 0px 61px !important;
    }
}

@media(min-width:625px) and (max-width:635px) {
    .bg_black_section1 {
        height: 695px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 695px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 55px 0px 61px !important;
    }
}

@media(min-width:615px) and (max-width:625px) {
    .bg_black_section1 {
        height: 685px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 685px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 55px 0px 61px !important;
    }
}

@media(min-width:600px) and (max-width:615px) {
    .bg_black_section1 {
        height: 672px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 672px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 43px 0px 61px !important;
    }
}

@media(min-width:590px) and (max-width:600px) {
    .bg_black_section1 {
        height: 672px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 672px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 43px 0px 61px !important;
    }
}

@media(min-width:580px) and (max-width:590px) {
    .bg_black_section1 {
        height: 672px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 672px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 43px 0px 61px !important;
    }
}

@media(min-width:570px) and (max-width:580px) {
    .bg_black_section1 {
        height: 665px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 665px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 68px 0px 0px 155px !important;
    }
}

@media(min-width:560px) and (max-width:570px) {
    .bg_black_section1 {
        height: 660px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 660px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 43px 0px 61px !important;
    }
}

@media(min-width:550px) and (max-width:560px) {
    .bg_black_section1 {
        height: 650px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 650px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 89px 0px 0px 156px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 0px 0px 132px !important;
    }
}

@media(min-width:540px) and (max-width:550px) {
    .bg_black_section1 {
        height: 645px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 645px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 43px 0px 61px !important;
    }
}

@media(min-width:530px) and (max-width:540px) {
    .bg_black_section1 {
        height: 638px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 638px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 43px 0px 61px !important;
    }
}

@media(min-width:520px) and (max-width:530px) {
    .bg_black_section1 {
        height: 635px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 635px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 43px 0px 61px !important;
    }
}

@media(min-width:510px) and (max-width:520px) {
    .bg_black_section1 {
        height: 655px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 655px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 43px 0px 61px !important;
    }
}

@media(min-width:500px) and (max-width:510px) {
    .bg_black_section1 {
        height: 650px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 650px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 43px 0px 61px !important;
    }
}

@media(min-width:491px) and (max-width:500px) {
    .bg_black_section1 {
        height: 640px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 640px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 31px 0px 61px !important;
    }
}

@media(min-width:480px) and (max-width:490px) {
    .bg_black_section1 {
        height: 630px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 630px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 31px 0px 61px !important;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }
}

@media(min-width:470px) and (max-width:480px) {
    .bg_black_section1 {
        height: 620px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 620px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 43px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 31px 0px 61px !important;
    }
}

@media(min-width:460px) and (max-width:470px) {
    .bg_black_section1 {
        height: 605px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 605px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 30px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 31px 0px 61px !important;
    }
}

@media(min-width:450px) and (max-width:460px) {
    .bg_black_section1 {
        height: 595px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 595px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 30px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 31px 0px 61px !important;
    }
}

@media(min-width:440px) and (max-width:450px) {
    .bg_black_section1 {
        height: 595px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 595px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 30px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 31px 0px 61px !important;
    }
}

@media(min-width:430px) and (max-width:440px) {
    .bg_black_section1 {
        height: 580px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 580px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 30px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 31px 0px 61px !important;
    }

}

@media(min-width:420px) and (max-width:430px) {
    .bg_black_section1 {
        height: 573px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 573px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 30px 8px 0px 77px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 31px 31px 0px 61px !important;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }

}

@media(min-width:400px) and (max-width:420px) {
    .bg_black_section1 {
        height: 573px;
        overflow: hidden;
    }

    .bg_black_section2 {
        height: 573px;
        overflow: hidden;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 29px 9px 40px 98px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 32px 33px 35px 60px !important;
    }

}

@media(min-width:396px) and (max-width:400px) {
    .bg_black_section1 {
        height: 600px;
    }

    .bg_black_section2 {
        height: 600px;
    }

    .main-banner-image1 {
        padding: 38px 0px 0px 79px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 32px !important;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }

}



@media(min-width:390px) and (max-width:395px) {
    .bg_black_section1 {
        height: 600px;
    }

    .bg_black_section2 {
        height: 600px;
    }

    .main-banner-image1 {
        left: -2px !important;

        padding: 43px 17px 33px 66px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 64px 24px 0px 80px !important;
        left: 3px !important;
    }

    .height-game-portal {
        min-height: 200px;
        height: 240px;
    }

    .unreal-box {
        height: 90px !important;
    }

    .margins-bottom {
        margin-bottom: 130px !important;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 10px !important;
    }

}

@media(min-width:385px) and (max-width:390px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        padding: 29px 0px 0px 79px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 40px 25px !important;
    }

    .get1 {
        margin: 5px 0px;
    }

    p .blink-btn a {
        font-size: 16px;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }


}


@media(min-width:380px) and (max-width:385px) {
    .bg_black_section1 {
        height: 595px;
    }

    .bg_black_section2 {
        height: 595px;
    }

    .main-banner-image1 {
        left: -2px !important;

        padding: 43px 9px 33px 62px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 59px 24px 0px 80px !important;
        left: 3px !important;
    }

    p .blink-btn a {
        font-size: 15px;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }

}

@media(min-width:375px) and (max-width:380px) {
    .bg_black_section1 {
        height: 595px;
    }

    .bg_black_section2 {
        height: 595px;
    }

    .main-banner-image1 {
        left: -2px !important;

        padding: 43px 9px 33px 62px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 59px 24px 0px 80px !important;
        left: 3px !important;
    }

    .margins-bottom {
        margin-bottom: 130px !important;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }
}

@media(min-width:370px) and (max-width:375px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;

        padding: 43px 9px 33px 62px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 55px 24px 0px 80px !important;
        left: 3px !important;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }
}

@media(min-width:365px) and (max-width:370px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;

        padding: 43px 9px 33px 62px !important;
    }

    .bg_black_section2 .main-banner-image1 {
        padding: 35px 29px !important;
        left: 3px !important;
    }

    .margins-bottom {
        margin-bottom: 130px !important;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }

    p .blink-btn a {
        font-size: 16px !important;
    }
}

@media(min-width:360px) and (max-width:365px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 44px 25px 5px 52px !important;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }

    p .blink-btn a {
        font-size: 16px !important;
    }
}

@media(min-width:355px) and (max-width:360px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 48px 24px 0px 50px !important;
    }

    .margins-bottom {
        margin-bottom: 130px !important;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }
}

@media(min-width:350px) and (max-width:355px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 0px 26px !important;

    }

    .big-heading-main {
        font-size: 35px !important;
    }

    .main-banner-content .read-btn-set,
    .section-title.section-style-two {
        margin-top: 0px !important;
    }
}



@media(min-width:340px) and (max-width:350px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 51px 30px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 53px 23px !important;
        left: 3px !important;
    }

    .big-heading-main {
        font-size: 35px !important;
    }
}

@media(min-width:330px) and (max-width:340px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 51px 30px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 53px 23px !important;
        left: 3px !important;
    }
}

@media(min-width:320px) and (max-width:330px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 51px 30px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 53px 23px !important;
        left: 3px !important;
    }
}

@media(min-width:315px) and (max-width:320px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 51px 30px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 53px 23px !important;
        left: 3px !important;
    }
}

@media(min-width:310px) and (max-width:315px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 51px 30px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 25px !important;
    }
}

@media(min-width:300px) and (max-width:310px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 44px 9px 0px 67px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 62px 22px !important;
    }
}

@media(min-width:290px) and (max-width:300px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 46px 0px 0px 75px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 40px 20px !important;
    }

}

@media(min-width:280px) and (max-width:290px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 37px 22px 0px 75px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 51px 20px !important;
    }
}


@media(min-width:260px) and (max-width:280px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 28px 14px 0px 88px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 34px 20px !important;
    }
}

@media(min-width:260px) and (max-width:270px) {
    .bg_black_section1 {
        height: 580px;
    }

    .bg_black_section2 {
        height: 580px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 49px 16px 0px 61px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 49px 20px !important;
    }

    .big-heading-main {
        font-size: 32px !important;
    }

    .small-heading-main {
        font-size: 20px;
    }
}

@media(min-width:250px) and (max-width:260px) {
    .bg_black_section1 {
        height: 590px;
    }

    .bg_black_section2 {
        height: 590px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 39px 22px 0px 75px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 55px 20px !important;
    }

    .big-heading-main {
        font-size: 32px !important;
    }
}

@media(min-width:100px) and (max-width:255px) {
    .bg_black_section1 {
        height: 650px;
    }

    .bg_black_section2 {
        height: 650px;
    }

    .main-banner-image1 {
        left: -2px !important;
        padding: 31px 22px 0px 75px !important;

    }

    .bg_black_section2 .main-banner-image1 {
        padding: 17px 20px !important;
    }

    .big-heading-main {
        font-size: 32px !important;
    }
}




@media only screen and (min-width: 1150px) and (max-width: 1550px) {
    .big-heading-main {
        font-size: 100px !important;
        word-wrap: normal;

    }

    .small-heading-main {
        font-size: 50px;
    }
}

@media (max-width:640px) {
    .swiper-pagination {
        display: none;
    }
}

@media only screen and (min-width: 291px) and (max-width: 350px) {
    .big-heading-main {
        font-size: 38px !important;
    }

    .small-heading-main {
        font-size: 24px;
    }
}

@media only screen and (min-width: 280px) and (max-width: 290px) {
    .big-heading-main {
        font-size: 35px !important;
    }

    .small-heading-main {
        font-size: 23px;
    }
}

.top-paddings {
    padding-top: 30px !important;
}


p .blink-btn a {
    font-size: 20px;
    padding-left: 5px;

}

@media only screen and (max-width:2100px) {

    .mobile-view {
        display: none !important;
    }

    .tap-none {
        display: none !important;
    }
}

@media only screen and (max-width:800px) {
    .photobanner a {
        height: 110px !important;
    }

    .gallery-slider-box {
        bottom: 76px !important;
    }
}

@media only screen and (max-width:600px) {
    .photobanner a {
        margin: 10px 10px !important;
        height: 105px !important;
    }

    .gallery-slider-box {
        bottom: 60px !important;
    }

}

@media only screen and (max-width:479px) {
    .desktop-view {
        display: none !important;
    }

    .mobile-view {
        display: block !important;
    }

    /* .tap-none{
        display: none !important;
    } */
    .photobanner a {
        height: 75px !important;
        margin: 10px 3px !important;
        box-shadow: 0px 15px 7px -3px #c9c9c9;
    }

    .gallery-slider-box {
        z-index: 1;
        position: relative;
        bottom: 30px !important;
        left: -3px !important;
    }

    .bg_black_section3 {
        background-image: url(../images/banner_final.jpg) !important;
        background-size: contain;

    }

    /* .photobanner  a img{
    width: 324px;
    float: none;
    margin: 0;
} */
    .aos-animate {
        margin: 5px 0px;
    }

    .game-testing-box {
        min-height: 170px;
    }

    .anroid-height,
    .col-xl-4 .col-md-12 .border,
    .unity .col-xl-3 {
        min-height: 200px;
        height: 200px;
    }

    .height-game-portal {
        min-height: 200px;
        height: 250px !important;
        margin-bottom: 30px;
    }

    .margin-top-new {
        margin-top: 40px !important;
    }

    .pt-50 {
        padding-top: 30px !important;
    }

    .top-set-new {
        height: 200px !important;
    }

    .unreal-min-height {
        min-height: 184px !important;
    }

    .margin-bot-set {
        margin-bottom: 30px !important;
    }

    .margin-bot-set1 {
        margin-bottom: 7px !important;
    }

    .threed-box1 {
        position: relative;
        top: 30px !important;
    }
}

.gallery-slider-box {
    z-index: 1;
    position: relative;
    bottom: 150px;
    left: -7px;

}

.photobanner {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    margin-top: 1.5rem;
}

@media(max-width:680px) {

    .photobanner {
        display: flex;
        justify-content: center;
        align-items: center;
        justify-items: center;
        margin-top: 1.5rem;
    }
}


@media(max-width:770px) {}




.photobanner a {
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    margin: 10px 7px;
    border-radius: 6px;
    background-color: #fff;
    overflow: hidden;
    justify-items: right;
    justify-content: right;
    height: 120px;
    box-shadow: 0px 6px 7px -5px #2a2a2a;
    transition: 0.7s;
}

.photobanner a img {
    max-width: 100%;
}

.photobanner a:hover {
    transition: 0.7s;
    transform: scale(1.07);
    background-color: #000;

}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
    display: none;
}

.active-slide {
    border: 2px solid #fff;
    transform: scale(1.1);
    transition: 1s;
}

/* .set-border{
    border: 2px solid #000 !important;
} */
@media only screen and (min-width:1200px) and (max-width:1430px) {
    .photobanner a {
        height: 110px;
    }

    .gallery-slider-box {
        bottom: 60px;
    }

    .flex_footer_email button {
        width: 35% !important;
    }
}

@media only screen and (min-width:900px) and (max-width:1200px) {
    .photobanner a {
        height: 100px;
        margin: 10px 8px;
    }

    .gallery-slider-box {
        bottom: 50px;
    }

    .big-heading-main {
        font-size: 95px !important;
    }

    .flex_footer_email button {
        width: 35% !important;
    }
}

@media only screen and (min-width:765px) and (max-width:992px) {
    .padding-left1 {
        padding-left: 0% !important;
    }

}

@media only screen and (max-width:1399px) {
    .bg-change-land-slot {
        margin-top: -28px !important;
    }

    .py-2 {
        padding: 0px 0px !important;
    }

    .bg-color-change {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .position-absolute {
        top: -2px !important;
        position: relative !important;
        left: -15px !important;
    }

    .land-slot-round .rounded-border {
        padding: 0px 0px !important;
    }

    .unreal-min-height {
        height: auto;
        min-height: 315px !important;
    }
}

@media only screen and (max-width:1199px) {
    .position-absolute {
        top: -10px !important;
    }

    .bg-change-land-slot {
        margin-top: -10px !important;
    }

    .unreal-min-height {
        height: auto;
        min-height: 200px !important;
    }

}

@media only screen and (max-width:991px) {
    .bg-color-change {
        padding-right: 0px !important;
    }

    .land-slot-p {
        padding: 30px 0px 0px !important;
    }

    .slot-number {
        margin-left: 10px !important;
    }

    .bg-change-land-slot {
        margin-top: -10px !important;
    }

    .land-slot-heading {
        padding: 0px 0px 0px 0px !important;
    }

    .button-position-casestudies {
        position: relative;
        top: -80px;
    }

    .content-play {
        top: 5px;
    }

}

@media only screen and (max-width:779px) {
    .bg-color-change {
        padding-right: 0 !important;
        padding-top: 10px;
        padding-bottom: 40px;
        width: 100% !important;

    }

    #game-porting,
    #playto,
    #provably {
        height: 530px
    }

    .unreal-min-height {
        height: auto;
        min-height: 200px !important;
    }

    .game-testing-box {
        min-height: 190px;
        height: auto;
    }

    .bg-change-land-slot {
        margin-top: 0px !important;
    }

    .threed-box1 {
        position: relative;
        top: 0px !important;
        width: 100%;
    }

    .position-absolute {
        position: relative !important;
        top: 0px !important;
        left: 0px !important;
    }

    .slot-number {
        margin-left: 10px !important;
    }

    .accordion-container .accordion-title {
        padding: 0.625em 1.625em 0.625em 2em !important;
    }

    .button-position-casestudies {
        position: relative;
        top: -82px;
    }

    .casestudies-ex {
        height: 530px;
    }
}

@media only screen and (max-width:479px) {
    .bg-change-land-slot {
        margin-top: -5px !important;
    }

    .accordion-container .accordion-title {
        padding: 0.625em 2.625em 0.625em 2em !important;
    }

    .button-position-casestudies {
        position: relative;
        top: -146px;
    }

    #casestudybanner {
        height: 460px;
    }

    .casestudies-ex {
        height: 490px;
    }

    #game-porting,
    #playto,
    #provably {
        height: 490px
    }
}

.land-slot-img {
    width: 100%;
}

.land-slot-heading {
    padding: 55px 50px 0px 0px;
}

.bg-color-change {
    background: linear-gradient(0deg, rgba(30, 144, 250, 1) 0%, rgba(30, 200, 250, 1) 35%, rgba(0, 212, 255, 1) 100%);
    border-top-right-radius: 70px;
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 70px;
    width: 100%;
}

.position-absolute {
    position: absolute;
    left: -8px;
    top: 107px;
    z-index: -1;
}

.slot-number {
    font-size: 120px;
    color: white;
    opacity: 0.7;
    margin-left: 40px;
    margin-top: 10px;
    font-weight: 700;
}

.bg-change-land-slot {
    background-image: url(..//images//product/land-slot/blurred-image-casino-s-slot-machine.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 60px 0px;
    margin-top: -33px;
}

.land-slot-box {
    background: linear-gradient(94deg, rgba(217, 217, 217, 1) 0%, rgba(245, 245, 245, 1) 39%, rgba(255, 255, 255, 1) 100%);
    margin: 15px 0px;
    padding: 10px 15px;
}

.feature-slot-img {
    margin-top: -50px;
}

.slot-content {
    padding-left: 9% !important;
    /* padding-top: 10px;
    margin-bottom: 20px; */
}

.margin-testing {
    margin-top: 50px !important;
}

/* phone slider*/


.slider {
    margin-bottom: 30px;
    position: relative;
}

.slider .owl-item.active.center .slider-card {
    transform: scale(1.15);
    opacity: 1;

    /* background: -webkit-linear-gradient(to bottom, #ff5e62, #ff9966);
    background: linear-gradient(to bottom, #ff5e62, #ff9966); */
    color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 2px #fff;

}



.owl-item.active.center {
    position: relative;
}

/* .mirror-image {
      border-radius: 10px;
      position: absolute;
      bottom: -106%;
      left: 0;
      width: 40%;
      height: 100%;
      transform: scaleY(-1);
      opacity: 0.3; 
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)); 
      pointer-events: none;
      display: none; 
      visibility: hidden;
  
    } */


/* .slider .owl-item.active.center .slider-card .mirror-image {
      visibility: initial;
    } */




@media (max-width:992px) {
    .slider .owl-item.active.center .slider-card {
        margin-inline: auto;
    }


}







@media (max-width:1600px) {
    .slider-card {
        background: #fff;
        padding: 0px 0px;
        /* margin: 50px 15px 20px 50px; */
        border-radius: 12px;
        box-shadow: 0 15px 45px -20px rgb(0 0 0 / 73%);
        transform: scale(0.2);
        opacity: 1;
        transition: all 0.3s;
        height: 430px;
        width: 250px;
        border: 9px solid white;
    }

}




.slider-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure the image covers the entire container while maintaining aspect ratio */
    /* box-shadow: 0 10px 20px rgba(184, 160, 160, 0.7), 0 0 0 2px #fff;  */
    border-radius: 10px;
}





.owl-nav .owl-prev {
    position: absolute;
    top: calc(50% - 25px);
    left: 0;
    opacity: 1;
    font-size: 30px !important;
    z-index: 99999;

}

.owl-nav .owl-next {


    position: absolute;
    top: calc(50% - 25px);
    right: 0;
    opacity: 1;
    font-size: 30px !important;
    z-index: 9999;


}

.pos .owl-nav .owl-prev {
    position: absolute;
    top: calc(50% - 25px);
    right: 0;
    opacity: 1;
    font-size: 30px !important;
    z-index: 9999;

}




.pos .owl-nav .owl-next {

    position: absolute;
    top: calc(50% - 25px);
    left: 7rem;
    opacity: 1;
    font-size: 30px !important;
    z-index: 99999;

}






.owl-dots {
    text-align: center;
}

.owl-dots .owl-dot {
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: #ccc !important;
    margin-left: 3px;
    margin-right: 3px;
    outline: none;
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 0 2px #fff;  */
    display: none;
}

.owl-dots .owl-dot.active {
    background: transparent !important;
}







@media (max-width:992px) {

    /* .projects-slides-two.owl-theme .owl-nav [class*=owl-] {
        margin: 29px 10px;
        padding: 0;
        background: 0 0;
        color: #000;
        border: 2px solid #000;
        border-radius: 50%;
        -webkit-transition: var(--transition);
        transition: var(--transition);
        display: inline-block;
        width: 55px;
        height: 55px;
        line-height: 55px;
        text-align: center;
        font-size: 3.5rem;
    } */

  

}


/*  */
/* Add this CSS to style the navigation buttons */
.owl-carousel-1 .owl-nav {
    position: absolute;
    bottom: 50px;
    width: 28rem;
    left: 33%;
}

@media (max-width:700px) {
    .owl-carousel-1 .owl-nav {



        left: 13%;
    }
}

@media (max-width:445) {
    .owl-carousel-1 .owl-nav {



        left: 8%;
    }
}

.owl-carousel-1 .owl-nav button {
    background: #fff;
    color: #333;
    padding: 10px;
    border: none;
    cursor: pointer;
    font-size: 20px;
    transition: background 0.3s, color 0.3s;
}

.owl-carousel-1 .owl-nav .owl-prev::after {
    content: "PICTURE PUZZLE";
    position: absolute;
    left: 60px;
    bottom: -5.4rem;
    font-size: 20px;
    white-space: nowrap;
    font-weight: 700;
    z-index: 999999;


}

@media(max-width:1600px) {
    .owl-carousel-1 .owl-nav .owl-prev::after {
        content: "PICTURE PUZZLE";
        position: absolute;
        left: -148px;
        bottom: -5.4rem;
        font-size: 20px;
        white-space: nowrap;
        font-weight: 700;
        z-index: 999999;


    }
}
@media(max-width:950px) {
    .owl-carousel-1 .owl-nav .owl-prev::after {
        content: "PICTURE PUZZLE";
        position: absolute;
        left: 3rem;
        bottom: -5.4rem;
        font-size: 20px;
        white-space: nowrap;
        font-weight: 700;
        z-index: 999999;


    }
}





@media(max-width:600px) {
    .owl-carousel-1 .owl-nav .owl-prev::after {
        content: "PICTURE PUZZLE";
        position: absolute;
        left: 4px;
        bottom: -5.4rem;
        font-size: 20px;
        white-space: nowrap;
        font-weight: 700;
        z-index: 999999;


    }

}





.owl-carousel-1 .owl-nav .owl-prev {
    position: absolute;
    top: calc(50% - 25px);
    left: 0;
    opacity: 1;
    font-size: 30px !important;
    z-index: 99999;

}

.owl-carousel-1 .owl-nav .owl-next {
    position: absolute;
    top: calc(50% - 25px);
    right: 0;
    opacity: 1;
    font-size: 30px !important;
    z-index: 9999;


}



.owl-carousel-1 .owl-nav button i:hover {
    /* background: #333; */
    color: white;
    border: 1px solid transparent !important;
    background-color: #32E0FD;
    

}

/* Add this CSS to style the navigation icons */
.owl-carousel-1 .owl-nav button i {
    font-size: 30px !important;
    border: 2px solid black;

    border-radius: 50%;
    padding: 6px 14px;
    position: relative;
    top: 65px;
    z-index: 12;



}

@media(max-width:1600px) {
    .owl-carousel-1 .owl-nav button i {

        left: -21rem;



    }

}
@media(max-width:950px) {
    .owl-carousel-1 .owl-nav button i {

        left: -3rem;



    }

}






@media(max-width:600px) {
    .owl-carousel-1 .owl-nav button i {
        left: -127%;
    }

}








.slider-card {
    background: #fff;

    padding: 0px 0px;
    margin: 50px 15px 90px 15px;
    /* border-radius: 12px; */
    /* box-shadow: 0 15px 45px -20px rgb(0 0 0 / 73%); */
    transform: scale(0.9);
    opacity: 0.5;
    transition: all 0.3s;
    height: 430px;
    width: 250px;
    /* border: 9px solid transparent; */

}


.my_height {
    background-color: green;
    height: 100vh;
    z-index: -1;

}



/* phone */
.static-frame {
    position: relative;
    overflow: hidden;
}

.static-frame-overlay {
    position: absolute;
    top: -3%;
    left: 30.5%;
    transform: translate(-50%, -50%);
    border: 9px solid white !important;
    /* background-color: red; */
    box-sizing: border-box;
    z-index: 1;
    height: 430px;
    width: 250px;
    border-radius: 12px;
    box-shadow: 0 15px 45px -20px rgb(0 0 0 / 73%);
    transform: scale(0.9);
    /* opacity: 0.5; */
    transition: all 0.3s;
    height: 590px;
    width: 340px;
    border: 9px solid white;
    z-index: 2;
}

@media(max-width:1600px) {
    .static-frame-overlay {
        height: 564px;
        left: -3.5%;
    }
}
@media(max-width:950px) {
    .static-frame-overlay {
        height: 564px;
        left: 26.5%;
    }
}
@media(max-width:800px) {
    .static-frame-overlay {
        height: 564px;
        left: 17.5%;
    }
}


@media(max-width:750px) {
    .static-frame-overlay {
        height: 564px;
        left: 18.5%;
    }
}







@media(max-width:600px) {

    .static-frame-overlay {

        top: -3%;
        left: -13%;
        width: 307px;

    }
}

.row_2 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1*var(--bs-gutter-y));
    margin-right: calc(-.5*var(--bs-gutter-x));
    margin-left: calc(-.5*var(--bs-gutter-x));
    /* flex-direction: row; */



}


@media(max-width:1600px) {

    .static-frame-overlay {

width: 320px;

user-select: none;

}

    .row_2 {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: nowrap;
        margin-top: calc(-1*var(--bs-gutter-y));
        margin-right: calc(-.5*var(--bs-gutter-x));
        margin-left: calc(-.5*var(--bs-gutter-x));
        /* flex-direction: row; */



    }
}



@media(max-width:400px) {

    .static-frame-overlay {

        width: 304px;
        left: -11%;
    }

}



/* @media screen and (max-width: 600px), 
  screen and (min-height: 800px){
    .static-frame-overlay {
        top: -3%;
        left: -14%;
        width: 277px;
    }
  }
       */





.owl-carousel {
    z-index: 1;
}

/*  slider phone*/
/* phone */




/* phone */




/* lightbox */
/* .image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .image-gallery img {
    width: 150px;
    height: 150px;
    margin: 5px;
    cursor: pointer;
  }

.fancybox-slide {
  z-index: 9999 !important; 
}

.fancybox-inner img {
  width: 100% !important; 
  height: auto !important; 
}

.fancybox-thumbs {
  display: none !important; 
} */



/* video */





.frame-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.frame-container-1 {
    position: absolute;
    top: 3%;
    left: 40%;
    transform: translate(-50%, -50%);
    transform: scale(0.8);
}
.frame_text{
    max-width: 80vw; left: -14rem;
}

@media(max-width:600px) {
    .frame-container-1 {
        position: absolute;
        top: 20%;
        left: 0%;
        transform: translate(-50%, -50%);
        transform: scale(0.8);
        z-index: 99;
       
    }
    .frame_text{
        min-width: 100%; 
        left: 0;
        height: fit-content;
        overflow: scroll;
        display: none;
        
    }
}



.frame {
    position: relative;
    width: 60vw;
    height: 50%;

    overflow: hidden;

}

.frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 5;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

}

#myVideo {
    position: absolute;
    top: 50%;
    left: 50.1%;
    transform: translate(-50%, -50%);
    width: 96.3%;
    height: 88.5%;
    object-fit: cover;
    border-radius: 1px;
    z-index: 1;

}

.video-text {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    z-index: 1;

}


/* #myVideo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
        z-index: 1;
    }
    
    .video-text {
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 2;
    }
     */

.video-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    /* Adjust as needed */
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-container:hover .video-text {
    opacity: 1;
}



@keyframes shine {
    0% {
        color: #E4D459;
    }

    50% {
        color: #FFD700;
    }

    100% {
        color: #E4D459;
    }
}

.video-text h2 {
    font-size: 80px;
    color: #E4D459 !important;
    font-weight: 700;
    white-space: nowrap;
    font-weight: bolder;
    animation: shine 2s infinite;

}

@media(max-width:900px) {
    .video-text h2 {
        font-size: 60px;
    }
}

@media(max-width:700px) {
    .video-text h2 {
        font-size: 50px;
    }
}

@media(max-width:500px) {
    .video-text h2 {
        font-size: 40px;
    }
}

@media(max-width:400px) {
    .video-text h2 {
        font-size: 30px;
    }
}

@media(max-width:300px) {
    .video-text h2 {
        font-size: 20px;
    }
}

@media(max-width:200px) {
    .video-text h2 {
        font-size: 10px;
    }
}



@media (max-width: 1200px) {
    .background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .frame {
        position: relative;
        width: 100vw;
        height: 50%;

        overflow: hidden;
    }

}




/* .centered-video {
        max-width: 50%;
        max-height: 50%;
        width: auto;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .video_div {
        position: relative;
        overflow: hidden;
    }
    
    video {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    } 
     */




.top_flower {
    position: absolute;
    left: -20%;
    bottom: 20%;
    animation-name: flyInLeft;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;


}

.bot_flower {
    position: absolute;
    left: -20%;
    bottom: -30%;
    animation-name: flyInLeft;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-iteration-count: infinite;
}

@keyframes flyInLeft {
    0% {
        transform: translateX(-100%) translateY(-50%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(300%) translateY(0);
        opacity: 0;
    }
}

@keyframes flyInRight {
    0% {
        transform: translateX(100%) translateY(-50%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }
}


.img_size {
    width: 100px;
    height: 100px;
}

.col_par {
    display: flex;
    flex-wrap: wrap;
}

.col_my {
    width: 25%;

}

@media (max-width: 1000px) {
    .col_my {
        min-width: 300px;
    }

}

.col_16 {
    width: 16.66%;


}

.min_height {
    min-height: 15rem;
}

.myFlex {
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 1000px) {
    .col_16 {
        min-width: 300px;
    }

}

.margin_relative {
    position: relative;
    bottom: 1px;
}


.mt {
    margin-top: 19rem;
}

.mt_2d {
    margin-top: 30rem;

}

/* .mt_25{
    padding: -30rem;

} */


.mt_20 {
    margin-top: 56rem;
}


@media (max-width:1600px) {
    .mt_35 {
        margin-top: 42rem;
    }
}

@media (max-width:500px) {
    .mt_26 {
        margin-top: 13rem;
    }
}

@media (max-width:500px) {
    .mt_27 {
        margin-top: 12rem;
    }
}





.mt_22 {
    margin-top: 50rem;
}


.mt_2234 {
    margin-top: 76rem;
}

@media (max-width:1600px) {
    .mt_2234 {
        margin-top: 60rem;
    }
}


@media (max-width:600px) {
    .mt_2234 {
        margin-top: 15rem;
    }
}

.collection {
    margin-top: 6rem;
}

@media (max-width:600px) {
    .collection {
        margin-top:3rem;
    }
}


@media (max-width:600px) {
    .porttext {
        margin-top: -10rem;
    }
}



.mt_21 {
    margin-top: 23rem;
}



.mt_20 p {
    color: black;
}


.mt_10 {
    margin-top: 13rem;

}


/* art hreading */
.artheading {
    text-align: center;

}

.content_art {
    margin-top: 4rem;
}


@media (max-width:1600px) {
    .content_art {
        margin-top: 0rem;
    }

}

@media (max-width:1050px) {
    .content_art {
        margin-top: -30rem;
    }

}


/* @media (max-width:600px) {
    .content_art {
        margin-top: 2rem;
    }

} */

@media (max-width:600px) {
    .content_art {
        margin-top: -35rem;
    }



}


.art_phone {
    margin-top: 4rem;
}

@media (max-width:1460px) {
    .art_phone {
        margin-top: -10rem;
    }
}

@media (max-width:960px) {
    .art_phone {
        margin-top: -30rem;
    }
}


@media (max-width:550px) {
    .art_phone {
        margin-top: 2rem;
    }
}













.slot_area {
    margin-top: -20rem;
}


@media (max-width: 1450) {
    /* .slot_area{
        margin-top: -10rem;
        } */
}

@media (max-width: 500px) {
    .slot_area {
        margin-top: -4rem;
    }
}





.flex_game {
    display: flex;
    gap: 10px;

}

.game_area {
    border: 1ppx solid red;
    background-color: #F5F5F5;
    min-height: 40.5rem;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 72rem;
    margin-left: 10rem;
    /* padding-inline: 10rem; */

}
.col_black{
    color: black !important;
    font-size: 4rem;
}



@media(max-width:1600px) {

    .pig {
        position: relative;
        left: -10rem;
        /* text-align: center; */
        /* height: 26rem; */
    }
 }


@media(max-width:600px) {

    .pig {
        position: relative;
        left: -14rem;
        /* text-align: center; */
        /* height: 26rem; */
    }
 }

.myanime{
    object-fit: cover; height: 30em;
}

@media(max-width:600px){
    .myanime{
        object-fit: cover; height: 26em;
    }
}


.h_img {
    width: 69rem;
    max-height: 40.5rem;



}

.h_img img {
    object-fit: cover;


}

.game_pad {
    padding: 0 !important;
}


.myflex {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media(max-width:1600px) {

    .myflex {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;

    }

    .game_area {
        width: 60rem;
        margin-left: 33px;
    }

}

@media (max-width: 1100px) {
    .myflex {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .game_area {
        /* width: 100%; */
        margin-left: 0;

        /* border: 1px solid red; */
        /* background-color: red; */
        min-height: 40.5rem;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        width: 100vw;
        margin-left: -24rem;
    }
}
@media (max-width: 1005px) {
    .myflex {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .game_area {
        /* width: 100%; */
        margin-left: 0;

        /* border: 1px solid red; */
        /* background-color: red; */
        min-height: 40.5rem;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        width: 100vw;
        margin-left: -15rem;
    }
}

@media(max-width:600px) {
    .game_area {

border: 1ppx solid red;
    background-color: rgb(237, 231, 231);
    min-height: 40.5rem;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 100vw;
    margin-left: -2rem;
    padding-inline: 10rem

    }}
/* @media(max-width:600px) {
    .game_area {
        border: 1ppx solid red;
        background-color: rgb(237, 231, 231);
        min-height: 40.5rem;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        width: 100vw;

        margin-left: -39rem;
        

    }

} */





/* .game_area_img{
    min-width:50% ;
    min-height:46rem;
    background-color: rgb(237, 231, 231);
    object-fit: cover;

} */




.game_area img {
    height: 46px;
}

.game_p {
    color: black !important;
}



/* .mygame_area{
    padding-inline: 20rem;

} */

.pt_port {
    margin-top: -15rem;
}

.game_imgs {
    padding-inline: 13rem;
    /* margin: auto; */
    
}




@media (max-width: 500px) {

    .pt_port {
        /* margin: auto !important; */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 6rem;
        margin-top: -3rem;
        /* background-color: red; */
        padding-right: 4.3rem;
        padding-top: 9rem;
        padding-inline: auto;
        z-index: -1;
        /* transform: translateX(-14%); */
       
       
    }
}
@media (max-width: 400px) {

    .pt_port {
        /* margin: auto !important; */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 6rem;
        margin-top: -3rem;
        /* background-color: red; */
        padding-right: 8.3rem;
        padding-top: 9rem;
        padding-inline: auto;
        z-index: -1;
        /* transform: translateX(-14%); */
       
       
    }
}




@media (max-width: 1000px) {

    .pt_port {
        /* margin: auto !important; */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 10rem;
        margin-top: -12rem;
    }
}

.row_new {
    max-width: 100%;
    display: flex;
    flex-direction: row;

    margin-top: var(--bs-gutter-y);
}


@media (max-width: 500px) {

    .row_new {
        max-width: 100%;
        display: flex;
        flex-direction: column;

        margin-top: var(--bs-gutter-y);
    }

    .row_img img {
        width: 20rem;
        height: 20rem;
    }

}

.slot_port_1 {
    position: fixed;
    top: 38%;
    right: -7%;
    z-index: 11;
    height: 20rem;
    width: 20rem;

}

.slot_port_2 {
    position: fixed;
    top: 19%;
    right: -2%;
    z-index: 1;
    height: 20rem;
    width: 20rem;
}

@media (max-width: 1600px) {
    .slot_port_1 {
        position: fixed;
        top: 38%;
        right: -9%;
        z-index: 11;
        height: 20rem;
        width: 20rem;

    }

    .slot_port_2 {
        position: fixed;
        top: 19%;
        right: -2%;
        z-index: 1;
        height: 20rem;
        width: 20rem;
    }

}



@media (max-width: 600px) {

    .slot_port_1 {
        height: 4rem;
        width: 2rem;
        right: 0%;
    }

    .slot_port_2 {
        height: 7rem;
        width: 8rem;
        right: -3.5%;
        top: 29%;
    }

}

.character-box {
    margin: 30px 0px;
}

.art_gallery_images {
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: white;
    border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    background-color: #ffffff;
    /* border: 1px solid black; */

    margin: auto;
    /* background-color: #333; */
    color: white;
    border: 5px solid rgb(255, 255, 235, 0.5);
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    border-radius: 16px;
    z-index: 1000;
    /* box-shadow: 0 15px 45px -20px rgb(0 0 0 / 43%); */
    /* box-shadow: inset 0 15px 45px -20px rgba(0, 0, 0, 0.43); */
    box-shadow: 0 15px 45px -20px rgba(0, 0, 0, 0.1);
    /* box-shadow: 0 0 0 10px white,
            0 15px 45px -20px rgba(0, 0, 0, 0.1); */

}

.art_gallery_images img {
    border-radius: 8px;
}

.image_border img {
    border-radius: 8px;

}


/* 
.myvid{
    width: 26vw;
    height:38vh;
    padding-inline: 5rem;
    margin-left: -5.1rem;
} */

.myvid {
    width: 26vw;
    /* You can adjust this value as needed */
    height: auto;
    /* Let the height adjust automatically based on the aspect ratio */
    max-height: 38vh;
    /* Set a maximum height if necessary */
    padding-inline: 5rem;
    margin-left: -5.1rem;
}


@media (max-width: 500px) {
    .myvid {
        min-width: 93vw;
        min-height: 40vw;
        /* pointer-events:initial */
        
    }
}

@media (max-width: 1000px) {
    .myvid {
        width: 48vw;
    }
}



/* .myvid_2 {
            width: 100%;
            max-width: 800px; 
            height: 54vh; 
            padding: 0; 
            margin-left: auto;
            margin-right: auto;
            border-radius: 10px;
        } */

.myvid_2 {
    width: 100%;
    max-width: 800px;
    /* Increased max-width */
    height: 54vh;
    /* Increased height */
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    object-fit: contain;
    /* Ensure the video maintains its aspect ratio */
}



@media (max-width: 1600px) {
    .myvid_2 {
        height: 55vh;
        /* Reduced height for smaller screens */
    }
}

@media (max-width: 600px) {
    .myvid_2 {
        height: 45vh;
        /* Further reduced height for even smaller screens */
        padding-left: 1rem;
    }
}

.art_bg{
    background-color: white !important;
}

/* my tab*/





.mytab {
    max-width: 70vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    /* min-width: var(--min-width); */
    /* max-width: var(--max-width); */
    max-height: 80vh;
    color: var(--text-color);
    background-color: var(--background-color);
    font-family: Helvetica, Arial, sans-serif;
    border: 1px solid white;

    background-color: white;
    /* border-radius: 0.5em; */
    /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 35px 2px -20px #e7e7ef; */
    color: white;
    /* border: 5px solid  rgb(255, 255, 235,0.3); */
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    border-radius: 16px;


    box-shadow: 0 15px 45px -20px rgb(0 0 0 / 20%);
    margin-top: 5rem;
    overflow-x: hidden;
}


@media(max-width:1600px) {

  
.mytab {
    max-width: 70vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    /* min-width: var(--min-width); */
    /* max-width: var(--max-width); */
    max-height: 80vh;
    color: var(--text-color);
    background-color: var(--background-color);
    font-family: Helvetica, Arial, sans-serif;
    border: 1px solid white;

    background-color: white;
    /* border-radius: 0.5em; */
    /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 35px 2px -20px #e7e7ef; */
    color: white;
    /* border: 5px solid  rgb(255, 255, 235,0.3); */
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    border-radius: 16px;


    box-shadow: 0 15px 45px -20px rgb(0 0 0 / 0%);
    margin-top: 5rem;
    overflow-x: hidden;
}

    

}







.mytab>p {
    margin: 1em 2em;
    text-align: center;
}

[mv-app] {
    min-width: var(--min-width);
    max-width: 90vw;
    background-color: white;
    /* border-radius: 0.5em; */
    /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 35px 2px -20px #e7e7ef; */
    color: white;
    /* border: 5px solid  rgb(255, 255, 235,0.3); */
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    border-radius: 16px;


    box-shadow: 0 15px 45px -20px rgb(0 0 0 / 15%);
}








@media(max-width:600px) {

    [mv-app] {
        min-width: var(--min-width);
        max-width: 90vw;
        background-color: white;
        /* border-radius: 0.5em; */
        /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 35px 2px -20px #e7e7ef; */
        color: white;
        /* border: 5px solid  rgb(255, 255, 235,0.3); */
        /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
        border-radius: 16px;
    
    
        box-shadow: 0 15px 45px -20px rgb(0 0 0 / 0%);
    }
    

}




[mv-app]>[property=headline] {
    margin: 0;
    padding: 1.1em 1em;
    text-align: center;
    color: var(--text-color-accent);
    border-bottom: 1px solid var(--line-color);
}

.tabs {
    display: grid;
    grid-template-columns: repeat(var(--count, 5), minmax(8em, 1fr));
    grid-template-rows: auto auto;
}

details[property=tab] {
    display: contents;
}

details[property=tab][open] [property=content] {
    grid-column: 1/-1;
    width: auto;
    margin-inline: -13rem;
}

@media(max-width:600px) {
    details[property=tab][open] [property=content] {
        grid-column: 1/-1;
        width: auto;
        margin-inline: -1rem;
    }
}







details[property=tab]:not([open]) [property=title] {
    color: #8c90ab;
    background-color: #f5f7fa;
    border-bottom: 1px solid var(--line-color);
}

details[property=tab]:not([open]) [property=title] .icon {
    filter: grayscale(85%) opacity(45%);
}

details[property=tab]:not([open]) [property=content] {
    display: none;
}

details[property=tab]:first-child [property=title] {
    border-left: none;
}

[property=title] {
    grid-row: 1;
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 1px solid var(--line-color);
    color: var(--main-color);
    text-align: center;
    list-style: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.6rem;
}


@media(max-width:600px) {
    [property=title] {
        grid-row: 1;
        padding: 1em;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-left: 1px solid var(--line-color);
        color: var(--main-color);
        text-align: center;
        list-style: none;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 1rem;
    }

}




[property=title]::-webkit-details-marker {
    display: none;
}

[property=title] .icon {
    max-height: 4em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

[property=title]:focus {
    outline: none;
}

[property=content] {
    grid-row: 2;
    padding: 3em 1em;
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    grid-column-gap: 1.2em;
    grid-template-areas: "image headline" "image text" "image link";
}

[property=content] [property=image] {
    grid-area: image;
    max-width: 85%;
    /* max-height: 22em; */
    /* margin: auto; */
    margin-left: 15rem;
    border-radius: 20px;
}


@media (max-width: 500px) {
    [property=content] [property=image] {
        grid-area: image;
        max-width: 100%;
        /* max-height: 22em; */
        /* margin: auto; */
        /* margin-left: 15rem; */
        border-radius: 20px;
        margin: auto;
    }


}




[property=content] [property=headline] {
    grid-area: headline;
    margin-bottom: 0.5em;
    color: var(--main-color);
    font-size: 170%;
    /* max-width: 40rem; */
}

[property=content] [property=headline]:not([mv-mode=edit]) {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, var(--main-color), var(--main-color-accent));
}

[property=content] [property=text] {
    grid-area: text;
    line-height: 1.5em;
    /* max-width: 40rem; */
    margin-left: 9rem;
    width: 60rem;
}


@media(max-width:600px) {
    [property=content] [property=text] {
        grid-area: text;
        line-height: 1.5em;
        max-width: 35rem;
        margin-left: -9rem;
        /* margin: auto; */
        /* text-align: center; */
    }

}






[property=content] [property=data] {
    margin-left: 9rem;
    font-size: 4rem;
}

[property=text] {
    margin-top: 1rem;
    width: 110%;
    line-height: 16px;
    z-index: 2;



}

@media (max-width: 500px) {
    [property=content] [property=text] {

        max-width: 26rem;
        margin-left: 5rem;

    }

    [property=content] [property=data] {
        margin-left: 4rem;
        font-size: 2rem;
        width: 100%;
    }
}

[property=content] [property=url] {
    grid-area: link;
    align-self: center;
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin-top: 1.5em;
    padding: 0.7em 2em;
    color: white;
    background-image: linear-gradient(135deg, var(--main-color), var(--main-color-accent));
    border-radius: 999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    font-size: 0.8em;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[property=content] [property=url]:hover {
    filter: brightness(135%);
}

[mv-app][mv-mode=edit] [property=open] {
    display: none;
}

footer {
    /* margin-top: 3em; */
    text-align: center;
}

footer a {
    color: var(--main-color);
}

::-moz-focus-inner {
    border: 0;
}

@media (max-width: 1600px) {
    .mytab {
        max-width: 100vw;
        max-height: none;
        padding: 1em;
        margin-top: 5rem;
    }
}

@media (max-width: 500px) {
    .mytab {
        max-width: 100vw;
        max-height: none;
        padding: 1em;
        /* margin-top: -37rem; */
    }

    .tabs {
        grid-template-columns: repeat(var(--count, 1), minmax(0, 1fr));
        grid-template-rows: auto;
    }

    [property=content] {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "headline" "text" "link";
        grid-row-gap: 1em;

    }

    [property=content] [property=headline] {
        font-size: 150%;
    }

    [property=content] [property=image] {
        max-width: 100%;
        max-height: auto;
    }

    details[property=tab][open] [property=content] {

        margin-inline: 0rem;
    }
}


/* my tab */


/*  */

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    /* margin-left: 9rem; */
    margin-inline: auto;
}


@media (max-width: 600px) {
    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next,
    .owl-carousel button.owl-dot {
        background: none;
        color: inherit;
        border: none;
        padding: 0 !important;
        /* margin-left: 9rem; */
        margin-inline: auto;
        margin-left: 15px;
    }
    
}





/* .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0px;
    width: 100%;
    bottom:4rem;
} */




@media (max-width: 500px) {
    .mb_40 {
        padding: 5rem 0rem !important;
        margin-top: 1rem;
    }
}

@media (max-width: 500px) {
    .myFlex {
        margin-left: 88px;

    }
}


.exp {
    position: relative;
    top: -14rem;
    z-index: 9999;
}


.main_head {
    text-align: center;
    position: relative;
    top: 15rem;
    z-index: 99999;

}



@media (max-width: 500px) {
    .main_head {
        text-align: center;
        position: relative;
        top: 5rem;
        z-index: 99999;

    }

}



@media (max-width: 500px) {

    .btn_new {
        /* gap: 40px; */
        padding: 15px 30px;
        background-color: #000;
        color: white;
        font-weight: 400;
        outline: none;
        border-radius: 2px;
        width: 20rem;
        /* margin: auto; */
        text-align: center;
        border: none;
        font-weight: 600;
        z-index: 1;
        margin-top: 7rem;
    }
}




@media (max-width: 1000px) {
    .mt_22 {
        margin-top: 58rem;
    }

}

@media (max-width: 700px) {
    .new_banner {
        display: none;
    }
}



.myBanner {
    position: fixed;
    top: 5rem;
    right: 1rem;
}

.portvideo {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.portvideo video {
    width: 100%;
    /* Set the width of the video to fill the container */
    height: 100%;
    /* Set the height of the video to fill the container */
    object-fit: cover;
    /* Maintain aspect ratio while filling the container */
}



@media (max-width: 1600px) {
    .myBanner {
        /* position: fixed;
        top: 0rem;
        right:2rem; */
    }
}

.portvideo {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.portvideo video {
    width: 100%;
    /* Set the width of the video to fill the container */
    height: 100%;
    /* Set the height of the video to fill the container */
    object-fit: cover;
    /* Maintain aspect ratio while filling the container */
}

@media (max-width: 600px) {
    .portvideo {
        max-height: 40vh;
    }
}

.faq {
    font-size: 1.8rem;
    font-weight: 500;
    color: black;
}



@media (max-width: 600px) {

    .girl_bg {
        margin-top: -9px;
    }

}

#hoverText {
    position: absolute;
    display: none;
    /* Initially hidden */
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px;
}


.para_font {
    font-size: 1.5rem !important;
}

.anim_margin {
    margin-left: 28rem;
}

@media (max-width: 600px) {

    .anim_margin {
        margin-left: 14rem;
    }
}



/* video portfolio text */
.video-container-new {
    position: relative;
    margin-bottom: 20px;
    /* Adjust margin between each video or image */
}

.hover-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 1.5rem;
    padding: 20px;
    border-radius: 5px;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.video-container-new:hover .hover-text {
    opacity: 1;
}




@media (max-width: 600px) {

    .vidmobile {
        margin-top: -47px;
    }
.game_view{
    margin-top: -5.5rem;
    margin-inline: auto;
    text-align: center;
   
}
.animate_gif img{
   max-height: 23em;
}

}



/* faq and font  utilty classes */

.faq_heading {
    color: rgb(136, 136, 136);
    font-size: 18px;
    font-weight: 400;
}

.faq_para {
    color: rgb(136, 136, 136);  
    font-size: 15px;
    font-weight: 600;
}


.why {
    color: rgb(20, 4, 44);
    font-weight: 800;
    font-size: 34px;
}

.why_heading {
    color: rgb(20, 4, 44);
    font-weight: 800;
    font-size: 20px;
}


/* .our_games{
    color: #38E8FE !important;

} */

/* .contact{
    color: #38E8FE !important;

} */


.mt_h2{
    margin-top: -4rem;
}

.contact {
    color: #38E8FE !important;
}



/* new */

/* .slotflex{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.width{
    width: 40%;
} */



.slot-section-3 {
    padding-top: 50px;
    padding-bottom: 50px;
}
.slot-heading-3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
}
.slot-text-3 {
    font-size: 18px;
    margin-bottom: 20px;
}
.slot-img-3 {
    width:100%;
    height: auto;
}


.slotflex-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.slot-content-3 {
    flex: 1 1 49%;
    margin-bottom: 20px;
}
.slot-img-container-3 {
    flex: 1 1 48%;
    text-align: center;
}
@media (max-width: 768px) {
    .slot-content-3, .slot-img-container-3 {
        flex: 1 1 100%;
    }
}




/*  */


.slot-section-1 {
    padding-top: 50px;
    padding-bottom: 50px;
}
.slot-heading-1 {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
}
.slot-text-1 {
    font-size: 18px;
    margin-bottom: 20px;
}

.slot-img-1 {
    width: 63%;
    height: auto;
}
.slotflex-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.slot-content-1 {
    flex: 1 1 48%;
    margin-bottom: 20px;
}
.slot-img-container-1 {
    flex: 1 1 48%;
    text-align: center;
}
@media (max-width: 768px) {
    .slot-content-1, .slot-img-container-1 {
        flex: 1 1 100%;
    }
}

.sub-headingss{
    font-size: 29px;
}

.sub-headings{
    font-size: 22px;
}


/* breadcrumbs */
/* Basic breadcrumb styling */
/* .breadcrumb {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #f8f9fa;
    border-radius: 4px;
  }
  
  .breadcrumb-item {
    margin: 0;
    padding: 8px 16px;
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    margin: 0 8px;
    color: #6c757d;
  }
  
  .breadcrumb-item a {
    text-decoration: none;
    color: #007bff;
  }
  
  .breadcrumb-item a:hover {
    text-decoration: underline;
  }
  
  .breadcrumb-item.active {
    color: #6c757d;
  }
   */

   /* #watch-time {
    font-size: 18px;
    font-weight: bold;
    
    position: absolute;
    top: 24px;
    right: -8rem;
} */


.nav_linky {
    opacity: 0;
    transform: translateY(-20px);
  }
  


  /* Initial styles for the Instagram link */
.instagram-link {
    display: inline-block;
    color: #000; /* Default color */
    font-size: 24px; /* Adjust size as needed */
    transition: color 0.3s ease, background-clip 0.3s ease;
    position: relative;
}

/* Hover effect with Instagram gradient */
.instagram-link:hover {
    color: transparent;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Ensure the icon adjusts to the gradient effect */
.instagram-link i {
    display: inline-block;
    transition: color 0.3s ease;
}


.our_games ~ .our_services {
    display: none;
}

#our_port{
    position:absolute; z-index:99; white-space:nowrap; padding-left: 40px;
}


.slots_port {
    color: #d2d2d2;
    height: 40rem;
    position: absolute;
    top: 8rem;
    display:inline; margin:0; padding:0;
    writing-mode: vertical-rl;
    font-size: 5rem;
}

@media (max-width: 1450px) {
    .slots_port {
        
        top: 7rem;
        
    }
    #our_games{
   
        position: relative;
        right:25px ;
        left: 0;
     }
    
}


@media (max-width: 1600px) {
    #our_port{
        position:absolute; z-index:99; white-space:nowrap; padding-left: 40px;
    }
    .slots_port{
        display: inline;
    margin-top: -53px;
    margin-left: -15px;
    }
    
    
}
/* @media (max-width: 600px) {
    #our_port{
        display: none;
    }
} */

.our_g{
    background-color: white!important;
    position: relative;
    z-index: 99999;
}


@media (max-width: 1200px) {
  
    #our_port{
        display: none;
    }
}




@media (max-width: 600px) {
    #our_services{
        display: none;
    }
    #our_games{
        display: none;
    }
    #our_port{
        display: none;
    }
}

.boy_heading
{
    position:relative;top:8rem;z-index:4
}

@media (max-width: 950px) {

    .boy_heading{
    top: 1rem;
    }
    }
@media (max-width: 600px) {

.boy_heading{
top: 3rem;
}
}

@media (max-width: 950px) {
    .mygame_area {
        flex-direction: column-reverse;
    }
    .game_pad {
        text-align: center;
    }
    .h_img {
        margin-bottom: 20px; 
    }

 

    
}



.text_position{
    position: relative; bottom: 0px;
}

@media (max-width: 1550px) {
    .text_position{
        position: relative; bottom:35px;
        /* margin-top: -0.5rem; */
    }
    

}
@media (max-width: 1550px) {
.heading_position{
    position: relative;
    bottom: -4rem;
}
}
@media (max-width: 900px) {
    .heading_position{
        position: relative;
        bottom: 0rem;
    }
    }


    /* .projects-filter-menu li {
 
        margin-block: 5px; 
       
    } */

    .projects-filter-menu-new li {
        /* margin: 0; */
        margin-block: 5px; 
       
    }
    @media (max-width: 700px) {
    .projects-filter-menu-blog{
margin-top: 0.4rem;
    }
    .projects-filter-menu-blog li{
        margin-block: -10px; 

            }
}
@media (max-width: 600px) {
    .projects-filter-menu-blog{
margin-top: -0.4rem;
    }
    .projects-filter-menu-blog li{
        margin-block: 4px; 

            }
}

.mobile_header{
position: relative; z-index: 999; max-width: 50%;
}

.border_top{
    border-top: 3px solid #E0E0E0;
}