@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@200;300;400;500;600;700&display=swap');

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

body {
    background: white;
    font-family: 'MuseoModerno', sans-serif;
    overflow-x: hidden !important;
}

.main {
    overflow-x: hidden !important;
}

.navbar-nav {
    background: #1E1E1E;
    padding: 0.6vw 2.5vw;
    border-radius: 17px;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

.nav-link {
    color: white;
    font-size: 1vw;
    z-index: 999;
    cursor: pointer;
}

.nav-link:hover {
    color: white !important;
    text-decoration: none;
    border-bottom: 2px solid white !important;
    cursor: pointer;

}

.navbar {
    padding: 20px;
    cursor: pointer;
}

.logo_navbar {
    width: 6vw;
    cursor: pointer;
}

.navbar-dark {
    background-color: white;
    transition: all 0.5s ease-in-out;

}

.withactive {
    border-bottom: 2px solid white;
    transition: 0.5s ease-in-out;
}


.index_navbar {
    background: white;
}

/* =====================================================================home ================================================*/
.banner_home {
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 15vh;
}

.banner_logos {
    width: 40vw;
}

.banner_absolute {
    position: absolute;
    top: 0px;
    width: 10vw;
}

.banner_absolute1 {
    position: absolute;
    top: 40%;
    width: 15vw;
}

.banner_absolute2 {
    position: absolute;
    bottom: 10%;
    width: 10vw;
}

.banner_absolute3 {
    position: absolute;
    top: 0%;
    right: 0px;
    width: 10vw;
}

.banner_absolute4 {
    position: absolute;
    top: 35%;
    right: 5%;
    width: 10vw;
    animation: rotate 10s normal linear infinite;
}

.banner_absolute5 {
    position: absolute;
    bottom: 10%;
    right: 0%;
    width: 15vw;
}

.banner_absolute6 {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -0%);
    width: 10vw;
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }

    25% {
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
    }

    50% {
        -webkit-transform: rotate3d(0, 0, 1, 180deg);
        transform: rotate3d(0, 0, 1, 180deg);
    }

    75% {
        -webkit-transform: rotate3d(0, 0, 1, 270deg);
        transform: rotate3d(0, 0, 1, 270deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

.about_headings {
    color: #FF4800;
    font-size: 1vw;
}

.about_para {
    font-size: 1.6vw;
    color: black;
    font-weight: 700;
}

#about {
    display: flex;
    min-height: 40vh;
    justify-content: center;
    align-items: center;
}

.games {
    position: relative;
    margin-top: 7%;
}

.games_head {
    font-size: 3.80vw;
    color: #601850;
    text-align: center;
}

.gamesabsolute {
    width: 15vw;
    position: absolute;
    left: 0px;
    top: 10%;
}

.gamesabsolute1 {
    width: 20vw;
    position: absolute;
    right: 0px;
    bottom: 10%;
    z-index: -1;
}

.careermain {
    position: relative;
    margin-top: 12%;
    margin-bottom: 12%;
}

.career_head {
    font-size: 3vw;
    font-weight: 700;
    color: #601850;
}

.career_subhead {
    font-size: 4vw;
    font-weight: 700;
    color: #22C58A;
}

.career_parra {
    font-size: 1.1vw;
    width: 80%;
    color: black;
}

.careerabsolute {
    position: absolute;
    left: 0px;
    top: -10%;
    width: 7vw;
    z-index: -1;
}

#fanta {
    position: absolute;
    width: 40%;
    z-index: 2;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.careerabsolute1 {
    position: absolute;
    right: 0px;
    bottom: 10%;
    width: 15vw;
    z-index: -1;
}

.middle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    position: absolute;
    width: 21.09vw;
    height: 21.09vw;
    background-color: #1e1e1e;
    border-radius: 50%;
    cursor: pointer;

}

.inner_circle {
    position: absolute;
    border-radius: 50%;
    width: 18.53vw;
    height: 18.53vw;
    cursor: pointer;
    border: 14px solid aqua;
    transition: all 0.5s ease-in-out;
}

.inner_circle:hover {
    transition: all 0.5s ease-in-out;
    transform: rotate(-0.5turn);
    border: 14px solid #f5da4a;
}

.viewCareer {
    position: absolute;
    color: white !important;
    font-size: 2vw;
}

.square {
    position: absolute;
    right: -15px;
    bottom: 70px;
    background-color: #1e1e1e;
    width: 3vw;
    cursor: pointer;
    height: 3vw;
}

.containershome {
    position: relative;
    border-radius: 12px;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: blur(20px);
    background: transparent;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
    border-radius: 12px;
    cursor: pointer;
}

.containershome:hover .overlay {
    height: 100%;
}

.linked-1 {
    text-decoration: none;
}

.game_text {
    color: white;
    position: absolute;
    top: 50%;
    width: 80%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    cursor: pointer;
}

.image {
    display: block;
    width: 100%;
    height: 35vw;
    object-fit: cover;
    border-radius: 12px;
}

.game_name {
    font-size: 3vw;
    cursor: pointer;
}

.game_parra {
    font-size: 1vw;
    cursor: pointer;
}


/* ===================================================================footer ==========================================*/


.footermain {

    background: url(../images/home/footer.webp);
    background-position: center;
    background-size: cover;
    padding: 30px;


}

.footer_contact {
    margin-top: 0px;
    padding: 20px;

}

.quick_head {
    color: white;
    font-size: 1.5vw;
    text-align: center;

}

.footer_links {
    color: white;
    font-size: 1vw;
    text-align: center;

}

.footer_links:hover {
    color: white !important;

}

.link_all {
    text-decoration: none;
    color: white;
    cursor: pointer !important;
}

.link_all:hover {
    text-decoration: none;
    color: white !important;
}

.map {
    width: 15vw;
    height: 10vw;
    border-radius: 12px;
}

.border_footer {
    border-bottom: 2px solid white;
}

.footerenbd_para {
    text-align: center;
    color: white;
    font-size: 1vw;
    margin-bottom: 0px;
}


/* ================================================================games ====================================================*/
.games_fixed {
    position: fixed;
    top: 0px;
    z-index: 999;
    width: 100%;
}

.aboutform {
    background: url(../images/about/aboutbanner.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutform1 {
    background: url(../images/about/stumble\ ball\ final\ portrait\ 1\ 1.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutform2 {
    background: url(../images/about/Landscape\ Space\ final\ 1\ 1.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.games_name {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.games_name h3 {
    color: white;
    font-size: 3vw;
}

.images_small .next_arrow {
    position: absolute;
    font-size: 2.4vw;
    color: white;
    right: 10%;
    top: 69%;
    transform: translate(-50%, -50%);
    bottom: -6vw;
    padding: 10px 20px !important;
}

.images_small .priv_arrow {

    position: absolute;
    font-size: 2.4vw;
    left: 10%;
    top: 69%;
    transform: translate(-50%, -50%);
    bottom: -6vw;
    z-index: 999;
    color: white;
    padding: 10px 20px !important;
}

.games_parra {
    font-size: 1.2vw;

}

.gamesvideo {
    height: 28vw;
    object-fit: cover;
    border-radius: 12px;
}

.slideaboutimages {
    background: url(../images/about/slide.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;
}

.slideaboutimages4 {
    background: url(../images/about/Screenshot_20240104_141646_MINIGAME.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;

}

.slideaboutimages8 {
    background: url(../images/about/Selected\ photo.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;
}

.slideaboutimages1 {
    background: url(../images/about/slide2.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;
}

.slideaboutimages9 {
    background: url(../images/about/Selected\ photo1.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;
}

.slideaboutimages5 {
    background: url(../images/about/Screenshot_20240104_141653_MINIGAME.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;

}

.slideaboutimages10 {
    background: url(../images/about/Selected\ photo2.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;

}

.slideaboutimages2 {
    background: url(../images/about/slide3.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;
}

.slideaboutimages11 {
    background: url(../images/about/Selected\ photo4.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;

}

.slideaboutimages6 {
    background: url(../images/about/Screenshot_20240104_141709_MINIGAME.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;
}

.slideaboutimages3 {
    background: url(../images/about/slide4.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;
}

.slideaboutimages7 {
    background: url(../images/about/Screenshot_20240111_143927_MINIGAME.webp);
    background-position: center;
    background-size: cover;
    width: 15.62vw;
    height: 10.43vw;
    border-radius: 12px;
}




.screenshot_head {
    font-size: 2vw;
    color: #601850;
}

.first_logo {
    display: none;
}

.firstmobile {
    display: none;
}


/* =========================================================================================career =================================================*/

.careerImages {
    height: 37vw;
}

.heading {
    position: relative;
    border-top: 1px solid gray;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
    transition: all .25s ease-in;
    z-index: 999;
    background-color: #7621D6;
    overflow: hidden;
    height: 10vw;
}

.heading::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 50%;
    background-color: white;
    transition: .5s;
    z-index: -99;
    overflow: hidden;
}

.heading::after {
    content: "";
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 50%;
    background-color: white;
    transition: .5s;
    z-index: -99;
    overflow: hidden;
}

.heading:hover::before {
    top: -50%;
    z-index: -999 !important;
}

.heading:hover::after {
    bottom: -50%;
    z-index: -999;
}

.heading:nth-child(5) {
    border-bottom: 1px solid grey;
}

.heading:hover .h1 a {
    color: white !important;
}

.h1 a {
    padding: 0px !important;
    margin: 0 !important;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1 !important;
    transition: .20s ease-in-out;
    color: black !important;
    text-decoration: none !important;
}

.h1 {
    color: white !important;
}

a:hover {
    color: rgb(0, 0, 0) !important;
    cursor: default;
}

.hide {
    display: none;
}

.active {
    display: block;
}

.orange {
    background-color: #eb5939;
}

.black {
    background-color: #000;
}

.open_roles {
    font-size: 3vw;
    font-weight: 700;
}


/*============================================================== careervacancy page =======================================*/
.modal {
    background: rgba(0, 0, 0, 0.493);
}

.read_span {
    color: aqua;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.2vw;
}

.btn_secondary1 {
    width: 20%;
    font-size: 1.2vw;
    background-color: transparent;
    color: black;
    border: 2px solid black;
    padding: 10px;
    margin-top: 2%;
    margin-bottom: 4%;
}

#more {
    display: none;
}

.modal_flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 100vh;
    background-color: transparent;
}

.modal_head {
    font-size: 3vw;
    color: white;
}

.modal_para {
    font-size: 1.3vw;
    color: #fff;
    margin: 0 aut;
    width: 70%;
}

.modal_input {
    width: 20vw !important;
    border: none;
    border-bottom: 2px solid black;
    outline: none;
    padding: 10px;
}

.modal_input1 {
    width: 20vw;
    border: none;
    margin-top: 10% !important;
    border-bottom: 2px solid black;
    outline: none;
    padding: 10px;
    background: transparent;

}

.modal_portfoliopara {
    font-size: 0.7vw;
    width: 20vw !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-show {
    background: black !important;
}

.file_label {
    border: 2px dashed #7621d6;
    border-width: 0.2vw;
    width: 20vw !important;
    padding: 5px;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center;
}

.btn_modal_file {
    background-color: #7621d6;
    width: 20vw !important;
    border: none;
    outline: none;
    color: white;
    padding: 10px;
}

.file_textarea {
    width: 20vw !important;
    border: none;
    outline: none;
    background-color: #eeeeeed0;
    padding: 10px;
    height: 150px;
    border-radius: 5px;
}

.file_include {
    background-color: #7621d6;
    color: white;
    font-size: 1vw;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.fileModal {
    display: none;
}

.modal-content {
    background-color: transparent;
    border: none !important;
    font-size: 1.3vw;
}

.form_modal {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 100%;
    margin-top: 20%;
    min-height: 50vh !important;
    padding: 40px;
    border-radius: 7px;
    position: relative;
}

.btn-close {
    color: black;
    font-size: 1vw;
    float: right;
}

.invalid-feedback {
    font-size: 1vw;
}

.vacancy_head {
    font-size: 2.5vw;
    color: black;
}

.vacancy_para {
    font-size: 1vw;
    width: 90%;
}

.vacancy_subhead {
    font-size: 2vw;
    color: #000;
}

.career_list {
    font-size: 1vw;
    color: black;
    width: 90%;
}

/* ==============================================contact ===========================*/

.contact_background {
    background: url(../images/contact.webp);
    background-position: center;
    background-size: cover;
    max-height: 90vh;
}

.contact_main {
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.Contact_head {
    color: white;
    font-size: 3vw;
}

.contact_parra {
    color: white;
    font-size: 1.2vw;
    width: 70%;
}

.call_parra {
    color: white;
    font-size: 1vw;
}

.call_head {
    color: white;
    font-size: 2vw;
}

.address_head {
    font-size: 2vw;
    color: white;
    text-align: center;
}

.address_para {
    font-size: 1vw;
    color: white;
    width: 40%;
    text-align: center;
    margin: 0 auto;
}

.mobile_container {
    display: none;
}

.modal_head {
    font-size: 3vw;
    color: black;
}

.selectoptions {
    background-color: transparent;
    border: none;
    outline: none;
    border-bottom: 2px solid black;
    width: 15vw;
    padding: 10px;
    font-size: 1vw;
    color: black;
}

.vacancies_head {
    font-size: 3vw;
    color: black;
}

/* ================================================================Tab Resolution ====================*/


@media only screen and (max-width: 990px) {
    .desktop_navbar {
        display: none;
    }

    .mobile_container {
        display: block;
    }

    .mobile_container .header_mobile {
        position: fixed !important;
        display: block;
        top: 0;
        left: 0;
        overflow-x: hidden !important;
        z-index: 999999 !important;
    }

    .content {
        padding: 40px 5% 20px;
        text-align: justify;
        max-height: 100%;
        color: #333;
        overflow-y: scroll;
    }

    .content img {
        width: 100%;
        position: relative;
        display: block;
        margin: 40px auto 30px;
    }

    /* End container/placeholder */

    /* Menu header_mobile */
    .header_mobile {
        background: white;
        overflow: hidden !important;
        height: 15vh;
        width: 100%;
        z-index: 1;
        position: fixed !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.4s ease-out, background 1s ease-out;
    }

    .games_mobile {
        background: transparent;
    }

    .header_mobile.navbar-dark {
        background-color: white;
    }

    .header_mobile.menu-open {
        height: 100%;
        background: #000000d4;
        transition: all 0.45s ease-out, background 0.8s ease-out;
    }

    /* Menu List items */
    .mobile-menu {
        clear: both;
        display: flex;
        justify-content: end;
        align-items: center;
        height: 100vh;
    }

    .header_mobile ul.menu {
        position: relative;
        margin-bottom: 20vw;
        padding: 0px 40px 0;
        list-style: none;


    }

    .header_mobile ul.menu li.menu-item a {
        display: block;
        position: relative;
        color: #fff;
        text-align: right;
        text-decoration: none;
        font-size: 4vw;
        line-height: 2.8;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    .menu-item a:hover {
        color: white !important;


    }



    .header_mobile ul.menu li.menu-item {

        margin-top: 5px;
        opacity: 0;
        transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
        transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
        transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    }

    .header_mobile ul.menu li.menu-item:nth-child(1) {
        transition-delay: 0.35s;
    }

    .header_mobile ul.menu li.menu-item:nth-child(2) {
        transition-delay: 0.3s;
    }

    .header_mobile ul.menu li.menu-item:nth-child(3) {
        transition-delay: 0.25s;
    }

    .header_mobile ul.menu li.menu-item:nth-child(4) {
        transition-delay: 0.2s;
    }

    .header_mobile ul.menu li.menu-item:nth-child(5) {
        transition-delay: 0.15s;
    }

    .header_mobile ul.menu li.menu-item:nth-child(6) {
        transition-delay: 0.1s;
    }

    .header_mobile ul.menu li.menu-item:nth-child(7) {
        transition-delay: 0.05s;
    }

    .header_mobile.menu-open ul.menu li.menu-item {
        opacity: 1;
    }

    .header_mobile.menu-open ul.menu li.menu-item:nth-child(1) {
        transition-delay: 0.05s;
    }

    .header_mobile.menu-open ul.menu li.menu-item:nth-child(2) {
        transition-delay: 0.1s;
    }

    .header_mobile.menu-open ul.menu li.menu-item:nth-child(3) {
        transition-delay: 0.15s;
    }

    .header_mobile.menu-open ul.menu li.menu-item:nth-child(4) {
        transition-delay: 0.2s;
    }

    .header_mobile.menu-open ul.menu li.menu-item:nth-child(5) {
        transition-delay: 0.25s;
    }

    .header_mobile.menu-open ul.menu li.menu-item:nth-child(6) {
        transition-delay: 0.3s;
    }

    .header_mobile.menu-open ul.menu li.menu-item:nth-child(7) {
        transition-delay: 0.35s;
    }

    .hamburger {
        font-size: 7vw;

    }

    .games_hamburger {
        color: white;
    }

    /* Menu Icon */
    .icon-container {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 2;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    }

    .icon-container #menuicon {
        width: 20px;
        height: 10px;
        position: relative;
        display: block;
        margin: -4px auto 0;
        top: 50%;
    }

    .closed {
        display: none;
    }

    #menuicon .bar {
        width: 100%;
        height: 1px;
        display: block;
        position: relative;
        background: #fff;
        transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    }

    #menuicon .bar.bar1 {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg);
    }

    #menuicon .bar.bar2 {
        -webkit-transform: translateY(6px) rotate(0deg);
        transform: translateY(6px) rotate(0deg);
    }

    #menuicon .bar.bar3 {
        -webkit-transform: translateY(12px) rotate(0deg);
        transform: translateY(12px) rotate(0deg);
    }

    .menu-open .closed {
        display: block;
        font-size: 6vw;
        color: white;
        float: right;
    }

    .menu-open .icon-container .hamburger {
        display: none;
    }

    .menu-open .logo {
        display: none !important;
    }

    .menu-open .icon-container #menuicon .bar {
        transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
        transition-delay: 0.1s;
    }

    .menu-open .icon-container #menuicon .bar.bar1 {
        -webkit-transform: translateY(4px) rotate(45deg);
        transform: translateY(4px) rotate(45deg);
    }

    .menu-open .icon-container #menuicon .bar.bar2 {
        -webkit-transform: translateY(3px) rotate(-45deg);
        transform: translateY(3px) rotate(-45deg);
    }

    .mobile_pallete {
        height: 15vh;
    }

    .navbar {
        display: none;
    }

    .logo {
        width: 13vw;
    }


    /* home page */

    .banner_absolute,
    .banner_absolute1,
    .banner_absolute2,
    .banner_absolute3,
    .banner_absolute4,
    .banner_absolute5,
    .banner_absolute6,
    .gamesabsolute,
    .gamesabsolute1,
    .careerabsolute,
    .careerabsolute1 {
        width: 23vw;
    }

    #fanta {
        width: 60vw !important;
    }

    .about_headings {
        margin-top: 40vh !important;
        font-size: 4vw;
    }

    .about_para {
        font-size: 3vw;
        width: 100%;
    }

    .games_head {
        font-size: 7vw;
    }

    .career_head {
        text-align: center;
        font-size: 4vw;
    }

    .career_subhead {
        text-align: center;
        font-size: 6vw;
    }

    .career_parra {
        font-size: 3vw;
        margin: 0 auto;
    }

    .middle {
        margin-top: 30%;
        margin-bottom: 20%;
    }

    .image {
        display: block;
        width: 100%;
        height: 70vw;
        object-fit: cover;
    }

    .containershome {
        position: relative;
        width: 50vw;
    }

    .game_name {
        font-size: 5vw;
    }

    .game_parra {
        font-size: 3vw;
    }

    .circle {
        width: 35vw;
        height: 35vw;
    }

    .inner_circle {
        width: 28vw;
        height: 28vw;
    }

    .viewCareer {
        font-size: 3vw;
    }

    .banner_home {
        min-height: 80vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top: 15vh;
    }


    /* ============================================footer ====================================*/

    .footer_logo {
        width: 30vw;
    }

    .quick_head {
        font-size: 3vw;
    }

    .footer_links {
        font-size: 2vw;
    }

    .map {
        width: 30vw;
        height: 30vw;
    }

    .footerenbd_para {
        font-size: 2vw;
    }


    /* =======================================================================games ==================================*/

    .games_name h3 {
        font-size: 6vw;
    }

    .images_small .next_arrow {
        position: absolute;
        font-size: 3.4vw;
        color: white;
        right: 10%;
        top: 67%;
        transform: translate(-50%, -50%);
        bottom: -6vw;
        padding: 10px 20px !important;
    }

    .images_small .priv_arrow {

        position: absolute;
        font-size: 3.4vw;
        left: 10%;
        top: 67%;
        transform: translate(-50%, -50%);
        bottom: -6vw;
        z-index: 999;
        color: white;
        padding: 10px 20px !important;
    }

    .games_parra {
        font-size: 2.5vw;
    }

    .screenshot_head {
        font-size: 5vw;
        text-align: center;
    }

    .slideaboutimages,
    .slideaboutimages1,
    .slideaboutimages2,
    .slideaboutimages3, 
    .slideaboutimages4, 
    .slideaboutimages5, 
    .slideaboutimages6, 
    .slideaboutimages7, 
    .slideaboutimages8, 
    .slideaboutimages9, 
    .slideaboutimages10, 
    .slideaboutimages11
    {
        width: 35vw;
        height: 30vw;

    }

    /* ======================================================career ============================================*/

    .mobile_plus {
        margin-top: 20vh;
    }

    .careerImages {
        height: 50vw;
    }

    .heading::before {
        content: "";
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 50%;
        background-color: #7621D6;
        transition: .5s;
        z-index: -99;
        overflow: hidden;
    }

    .heading::after {
        content: "";
        position: absolute;
        bottom: 0%;
        left: 0%;
        width: 100%;
        height: 50%;
        background-color: #7621D6;
        transition: .5s;
        z-index: -99;
        overflow: hidden;
    }

    .h1 a {
        color: white !important;
    }

    /* =========================================================================contact ===========================*/

    .Contact_head {
        font-size: 4vw;
        text-align: center;
    }

    .contact_parra {
        font-size: 2vw;
        text-align: center;
        width: 100%;
    }

    .call_head {
        font-size: 3.5vw;
    }

    .call_parra,
    .address_para {
        font-size: 2vw;
    }

    .address_head {
        font-size: 3.5vw;
    }

    .aboutform {
        min-height: 100vh;
    }


    /* ================================================================vacancy_page ===================================*/

    .vacancy_head {
        margin-top: 18vh !important;
        font-size: 6vw;
    }

    .vacancy_para {
        font-size: 2vw
    }

    .vacancy_subhead {
        font-size: 4vw;
    }

    .career_list {
        font-size: 2vw;
    }

    .read_span {
        font-size: 2vw;
    }

    .btn_secondary1 {
        width: 40%;
        font-size: 2vw;
    }

    .modal_head {
        margin-top: 17vh;
    }

    .modal_head {
        font-size: 6vw;
    }

    .modal_para {
        font-size: 2vw;
        width: 100%;
        margin-top: 2%;
    }

    .form_modal {
        margin-top: 10%;
    }

    .modal_input1,
    .modal_input,
    .modal_portfoliopara,
    .file_label,
    .file_textarea {
        width: 50vw !important;
        font-size: 2vw;
    }

    .file_include {
        font-size: 2vw;
    }

    .btn_modal_file {
        font-size: 2.5vw;
    }

    .btn-close {
        font-size: 2vw;
    }

    .invalid-feedback {
        font-size: 2vw;
    }

    .selectoptions {
        background-color: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid black;
        width: 50%;
        padding: 10px;
        font-size: 3vw;
        color: black;
    }

    .vacancies_head {
        font-size: 3vw;
        color: black;
    }
}


@media only screen and (max-width: 600px) {
    .logo {
        width: 25vw;
    }

    .hamburger {
        font-size: 11vw;
    }

    .header_mobile ul.menu li.menu-item a {
        font-size: 6vw;
    }

    .menu-open .closed {
        font-size: 13vw;
    }


    /* ====================================================Home ======================*/

    .banner_absolute,
    .banner_absolute1,
    .banner_absolute2,
    .banner_absolute3,
    .banner_absolute4,
    .banner_absolute5,
    .banner_absolute6,
    .gamesabsolute,
    .gamesabsolute1,
    .careerabsolute,
    .careerabsolute1 {
        width: 30vw;
    }

    #fanta {
        width: 80vw !important;
    }

    .about_headings {
        font-size: 6vw;
        margin-top: 35vh !important;
    }

    .about_para {
        font-size: 4vw;
    }

    .games_head {
        font-size: 9vw;
    }

    .career_head {
        margin-top: 0vh;
        font-size: 5vw;
    }

    .career_subhead {
        font-size: 7vw;
    }

    .career_parra {
        font-size: 4vw;
    }

    .circle {
        width: 45vw;
        height: 45vw;
    }

    .inner_circle {
        width: 40vw;
        height: 40vw;
    }

    .square {
        width: 5vw;
        height: 5vw;
    }

    .middle {
        margin-top: 40%;
    }

    .viewCareer {
        font-size: 3.5vw;
    }



    /* ============================================================footer ======================*/
    .footer_logo {
        width: 40vw;
    }

    .quick_head {
        font-size: 4vw;
    }

    .footer_links {
        font-size: 3vw;
    }

    .footerenbd_para {
        font-size: 3vw;
    }


    /* =========================================================games ========================*/

    .images_small .next_arrow {
        right: 5%;
        font-size: 4vw;
    }

    .games_parra {
        font-size: 4vw;
    }

    .gamesvideo {
        width: 100%;
        height: 100%;
    }

    .screenshot_head {
        font-size: 7vw;
    }


    /* ==========================================================career ===================*/

    .mobile_plus {
        margin-top: 20vh;
    }

    .careerImages {
        width: 80%;
        height: 80%;
    }

    .content {
        padding: 0px;
        margin-top: 5%;
    }

    .open_roles {
        font-size: 7vw;
    }

    .h1 a {
        font-size: 7vw;
    }

    .heading {
        height: 25vw;
    }


    /* =========================================================vacancy page ===================*/
    .vacancy_head {
        font-size: 8vw;
    }

    .vacancy_para {
        font-size: 3vw;
    }

    .vacancy_subhead {
        font-size: 6vw;
    }

    .career_list,
    .read_span {
        font-size: 3vw;
    }

    .btn_secondary1 {
        width: 50%;
        font-size: 3vw;
    }

    .modal_head {
        font-size: 7vw;
        text-align: center;
    }

    .modal_para {
        font-size: 3vw;
        text-align: center;
    }

    .modal_input1,
    .modal_input,
    .modal_portfoliopara,
    .file_label,
    .file_textarea {
        width: 70vw !important;
        font-size: 3vw;
    }

    .btn-close {
        font-size: 3vw;
    }

    .file_include {
        font-size: 3vw;

    }

    .btn_modal_file {
        width: 30vw !important;
        font-size: 3vw;
    }

    .invalid-feedback {
        font-size: 2.5vw;
    }


    /* ===========================================contact ==================================*/

    .Contact_head {
        font-size: 7vw;
    }

    .contact_parra {
        font-size: 3vw;
    }

    .call_head {
        font-size: 6vw;
    }

    .call_parra,
    .address_para {
        font-size: 3vw;
    }

    .address_head {
        font-size: 6vw;
    }

    .address_para {
        width: 80%;
    }

    .selectoptions {
        background-color: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid black;
        width: 80%;
        padding: 10px;
        font-size: 5vw;
        color: black;
    }

    .vacancies_head {
        font-size: 5vw;
        color: black;
    }

    .image {
        display: block;
        width: 100%;
        height: 80vw;
        object-fit: cover;
    }

    .containershome {
        position: relative;
        width: 60vw;
    }

    .game_name {
        font-size: 7vw;
    }

    .game_parra {
        font-size: 3.5vw;
    }
}