@charset "utf-8";
/* CSS Document */

@media (min-width: 1400px) {
    .container {
        max-width: 1790px;
    }
}

@media screen  and (min-width:1760px) and (max-width:1919px) {}

@media screen  and (min-width:1680px) and (max-width:1759px) {
    .custom-engine .block-eng .h1,
    .custom-our-prod .titles .h1 {
        font-size: 65px;
    }
    .history-scroll .history-track {
        padding-left: 20px;
    }
    .history-scroll .history-track::before {
        left: 77px;
    }
}

@media screen  and (min-width:1600px) and (max-width:1679px) {
    .custom-engine .block-eng .h1,
    .custom-our-prod .titles .h1 {
        font-size: 65px;
    }
    .history-scroll .history-track {
        padding-left: 20px;
    }
    .history-scroll .history-track::before {
        left: 77px;
    }
    .custom-port-hover .wrap-img-port {
        height: 500px;
    }
}
@media screen  and (min-width:1440px) and (max-width:1599px) {
    .custom-engine .block-eng .h1,
    .custom-our-prod .titles .h1 {
        font-size: 55px;
    }
    .history-scroll .history-track {
        padding-left: 20px;
    }
    .history-scroll .history-track::before {
        left: 77px;
    }
    .custom-mars .mars-content {
        padding-bottom: 60px;
    }
    .custom-port-hover .wrap-img-port {
        height: 500px;
    }
}
@media screen  and (min-width:1400px) and (max-width:1439px) {
    .custom-engine .block-eng .h1,
    .custom-our-prod .titles .h1 {
        font-size: 55px;
    }
    .history-scroll .history-track {
        padding-left: 20px;
    }
    .history-scroll .history-track::before {
        left: 77px;
    }
    .custom-mars .mars-content {
        padding-bottom: 60px;
    }
    .custom-port-hover .wrap-img-port {
        height: 450px;
    }
}
@media screen  and (min-width:1366px) and (max-width:1399px) {

}
@media screen  and (min-width:1280px) and (max-width:1365px) {

}
@media screen  and (min-width:1200px) and (max-width:1279px) {

}
@media screen  and (min-width:1200px) and (max-width:1365px) {

}
@media screen  and (min-width:1200px) and (max-width:1399px) {
    body {
        font-size: 14px;
    }
    h1, .h1 {
        font-size: 36px;
    }
    h2, .h2 {
        font-size: 28px;
    }
    h3, .h3 {
        font-size: 24px;
    }
    h4, .h4 {
        font-size: 22px;
    }
    h5, .h5 {
        font-size: 18px;
    }
    h6, .h6 {
        font-size: 16px;
    }
    .group-btns {
        gap: 14px;
    }
    .btn {
        padding: 10px 15px;
    }
    .top-site .main-menu ul {
        gap: 20px;
    }
    .history-scroll .history-track {
        padding-left: 43px;
    }
    .history-scroll .history-track::before {
        left: 70px;
    }
    .custom-mars .mars-content {
        padding-bottom: 50px;
    }
    .custom-head-about .logo-big img {
        width: 425px;
    }
    .custom-5-direct .block-dir .wrap {
        min-height: 250px;
    }
    .custom-full-cycle .block-cycle .wrap {
        min-height: 230px;
    }
    .production-cycle-list {
        padding-right: 0;
    }
    .custom-approach .approach-desktop .approach-list::before {
        width: 75vw;
    }
    .custom-port-hover .wrap-img-port {
        height: 400px;
    }
}
@media screen  and (max-width:1199px) {
    body {
        font-size: 14px;
    }
    h1, .h1 {
        font-size: 36px;
    }
    h2, .h2 {
        font-size: 28px;
    }
    h3, .h3 {
        font-size: 24px;
    }
    h4, .h4 {
        font-size: 22px;
    }
    h5, .h5 {
        font-size: 18px;
    }
    h6, .h6 {
        font-size: 16px;
    }
    .group-btns {
        gap: 14px;
    }
    .btn {
        padding: 10px 15px;
    }
    #goTop {
        padding: 2px 10px;
    }
    #goTop i {
        font-size: 30px;
    }
    .top-site {
        padding: 15px;
    }
    .top-site .logo a img {
        width: 140px;
    }
    .header-light .burger svg path {
        stroke: #000;
    }
    .offcanvas-header a img {
        width: 140px;
    }
    .offcanvas-header .btn-close {
        background-image: none;
        opacity: 1;
        width: auto;
        height: auto;
    }
    .offcanvas-header .btn-close i {
        color: #ffffff;
        font-size: 38px;
    }
    .offcanvas-body .mob-menu {}
    .offcanvas-body .mob-menu .block-menu ul {
        display: block;
    }
    .offcanvas-body .mob-menu .block-menu ul li {}
    .offcanvas-body .mob-menu .block-menu ul li a {
        color: #ffffff;
        font-size: 16px;
    }
    .custom-port-hover .block-img-port a {
        display: block;
        overflow: hidden;
        border-radius: 15px;
        border: 1px solid #dfdddf;
    }
}
@media screen  and (min-width:992px) and (max-width:1199px) {
    .offcanvas-body .mob-menu .block-menu {
        width: 100%;
    }
    /******* home **********/
    /*------ header --------*/
    .titles-mod .custom-header .mod-custom {
        padding-top: 20px;
    }
    /*------ ThreeRouts ------*/
    .custom-three-routs .row-head {
        margin-bottom: 40px;
    }
    /*------- Engine -----*/
    /*------ OurProd -------*/
    /*------ Process-------*/
    .custom-process .blocks-proc .proc-item .proc-icon img {
        width: 110px;
    }
    .custom-process .blocks-proc .proc-item:nth-child(2) {
        margin: 20px 0;
    }
    /*------- Projecting -----*/
    .process-mobile-inner .process-mobile-item {
        color: #ffffff;
        border-radius: 16px;
        border: 1px solid #272727;
        background-color: #101010;
        padding: 20px;
    }
    .process-mobile-inner .process-mobile-item .process-mobile-number {
        font-weight: 700;
        border-radius: 6px;
        background-color: #272727;
        display: inline-flex;
        padding: 8px;
        margin-bottom: 10px;
        justify-content: center;
        align-items: flex-start;
    }
    /*------- Stack -------*/
    /******** footer ********/
    /******** Copyright ******/
    /********* inside pages****/
    /*----- exo tanks --------*/
    .custom-mars .mars-content {
        padding-bottom: 40px;
    }
    .custom-three-tanks .block-tank .desc {
        padding: 0;
    }
    /*------ page Digital products ---*/
    .custom-5-direct .block-dir .wrap {
        min-height: 200px;
        padding: 20px;
    }
    .custom-projecting .row-titles {
        margin-bottom: 40px;
    }
    .digital .process-mobile-inner .process-mobile-item {
        background-color: #C45315;
        border-color: #E9562D;
    }
    .digital .process-mobile-inner .process-mobile-item .process-mobile-number {
        background-color: #B54406;
    }
    .custom-full-cycle .block-cycle .wrap {
        min-height: 170px;
    }
    .custom-port-hover .block-img-port a img {
        height: 280px;
        object-fit: cover;
        object-position: 0 top;
    }
    /*------- page about ---------*/
    .custom-head-about .logo-big {
        text-align: center;
    }
    .custom-head-about .logo-big img {
        max-width: 425px;
    }
    .custom-projecting .row-titles {
        margin-bottom: 40px;
    }
    .custom-approach .approach-item {
        border-radius: 16px;
        border: 1px solid #272727;
        background-color: #101010;
        padding: 20px;
    }
    /*------ page Game development --*/
    .custom-header-dev .desc .group-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }
    .custom-header-dev .desc .group-btns .btn {
        width: 100%;
        justify-content: center;
    }
    .custom-cycle-dev .block-cycle .wrap {
        border-radius: 15px;
        padding: 20px;
        min-height: 320px;
    }
    .production-cycle-list {
        padding-right: 0;
    }
    .production-cycle-item {
        padding: 15px 25px;
    }
    /******* form before footer ****/
}
@media screen  and (min-width:768px) and (max-width:991px) {
    .offcanvas-body .mob-menu .block-menu {
        width: 100%;
    }
    .container {
        max-width: 100%;
    }
    .sppb-row-container {
        max-width: 100% !important;
    }
    /******* home **********/
    /*------ header --------*/
    .titles-mod .custom-header .mod-custom {
        padding-top: 20px;
    }
    /*------ ThreeRouts ------*/
    .custom-three-routs .row-head {
        margin-bottom: 40px;
    }
    .custom-three-routs .blocks-routs .block-rout .img img {
        border-radius: 15px;
    }
    /*------- Engine -----*/
    /*------ OurProd -------*/
    /*------ Process-------*/
    .custom-process .blocks-proc .proc-item .proc-icon img {
        width: 110px;
    }
    .custom-process .blocks-proc .proc-item:nth-child(2) {
        margin: 20px 0;
    }
    /*------- Projecting -----*/
    .process-mobile-inner .process-mobile-item {
        color: #ffffff;
        border-radius: 16px;
        border: 1px solid #272727;
        background-color: #101010;
        padding: 20px;
    }
    .process-mobile-inner .process-mobile-item .process-mobile-number {
        font-weight: 700;
        border-radius: 6px;
        background-color: #272727;
        display: inline-flex;
        padding: 8px;
        margin-bottom: 10px;
        justify-content: center;
        align-items: flex-start;
    }
    /*------- Stack -------*/
    /******** footer ********/
    .footer-main {
        padding: 50px 0;
    }
    .footer-logo a img {
        width: 200px;
    }
    /******** Copyright ******/
    /********* inside pages****/
    /*----- exo tanks --------*/
    .custom-mars .mars-content {
        padding-bottom: 40px;
    }
    .custom-three-tanks .block-tank .desc {
        padding: 0;
    }
    .cutom-team-steps .img-block img,
    .custom-develop-game .img-dev img {
        border-radius: 15px;
    }
    /*------ page Digital products ---*/
    .custom-head-digit .desc {
        padding-top: 20px;
    }
    .custom-5-direct .block-dir .wrap {
        min-height: 200px;
        padding: 20px;
    }
    .custom-projecting .row-titles {
        margin-bottom: 40px;
    }
    .digital .process-mobile-inner .process-mobile-item {
        background-color: #C45315;
        border-color: #E9562D;
    }
    .digital .process-mobile-inner .process-mobile-item .process-mobile-number {
        background-color: #B54406;
    }
    .custom-full-cycle .block-cycle .wrap {
        min-height: 170px;
    }
    .custom-port-hover .block-img-port a img {
        height: 280px;
        object-fit: cover;
        object-position: 0 top;
    }
    /*------- page about ---------*/
    .custom-head-about .row-top-head {
        margin-bottom: 40px;
    }
    .custom-head-about .logo-big {
        text-align: center;
    }
    .custom-head-about .logo-big img {
        max-width: 425px;
    }
    .custom-projecting .row-titles {
        margin-bottom: 40px;
    }
    .custom-approach .approach-item {
        border-radius: 16px;
        border: 1px solid #272727;
        background-color: #101010;
        padding: 20px;
    }
    .custom-partner-model .block-part .wrap {
        border-radius: 15px;
        padding: 20px;
    }
    /*------ page Game development --*/
    .custom-header-dev .desc {
        padding-top: 20px;
    }
    .custom-cycle-dev .block-cycle .wrap {
        border-radius: 15px;
        padding: 20px;
        min-height: 320px;
    }
    .production-cycle-list {
        padding-right: 0;
    }
    .production-cycle-item {
        padding: 15px 25px;
    }
    /******* form before footer ****/
    /*----- video player ------*/
    .video-block {
        margin-bottom: 20px;
    }
}
@media screen and (max-width:767px) {
    .offcanvas-body .mob-menu .block-menu {
        width: 100%;
    }
    .container {
        max-width: 100%;
    }
    .sppb-row-container {
        max-width: 100% !important;
    }
    /******* home **********/
    /*------ header --------*/
    .titles-mod .custom-header .mod-custom {
        padding-top: 20px;
    }
    /*------ ThreeRouts ------*/
    .custom-three-routs .row-head {
        margin-bottom: 40px;
    }
    .custom-three-routs .blocks-routs .block-rout .img img {
        border-radius: 15px;
    }
    /*------- Engine -----*/
    /*------ OurProd -------*/
    /*------ Process-------*/
    .custom-process .blocks-proc .proc-item .proc-icon img {
        width: 80px;
    }
    .custom-process .blocks-proc .proc-item:nth-child(2) {
        margin: 20px 0;
    }
    /*------- Projecting -----*/
    .process-mobile-inner .process-mobile-item {
        color: #ffffff;
        border-radius: 16px;
        border: 1px solid #272727;
        background-color: #101010;
        padding: 20px;
    }
    .process-mobile-inner .process-mobile-item .process-mobile-number {
        font-weight: 700;
        border-radius: 6px;
        background-color: #272727;
        display: inline-flex;
        padding: 8px;
        margin-bottom: 10px;
        justify-content: center;
        align-items: flex-start;
    }
    /*------- Stack -------*/
    /******** footer ********/
    .footer-main {
        padding: 50px 0;
    }
    .footer-logo a img {
        width: 200px;
    }
    /******** Copyright ******/
    /********* inside pages****/
    /*----- exo tanks --------*/
    .header-exo .titles-mod .desc-header {
        margin-top: 15vh;
    }
    .different-tanks .wrap-titles {
        margin-top: 40px;
    }
    .custom-mars .mars-content {
        padding-bottom: 40px;
    }
    .custom-three-tanks .block-tank .desc {
        padding: 0;
    }
    .cutom-team-steps .img-block img,
    .custom-develop-game .img-dev img {
        border-radius: 15px;
    }
    /*------ page Digital products ---*/
    .custom-head-digit .desc {
        padding-top: 20px;
    }
    .custom-5-direct .block-dir .wrap {
        min-height: 100%;
        padding: 20px;
    }
    .custom-projecting .row-titles {
        margin-bottom: 40px;
    }
    .digital .process-mobile-inner .process-mobile-item {
        background-color: #C45315;
        border-color: #E9562D;
    }
    .digital .process-mobile-inner .process-mobile-item .process-mobile-number {
        background-color: #B54406;
    }
    .custom-full-cycle .block-cycle .wrap {
        min-height: 100%;
    }
    .custom-port-hover .block-img-port a img {
        height: 180px;
        object-fit: cover;
        object-position: 0 top;
    }
    /*------- page about ---------*/
    .custom-head-about .row-top-head {
        margin-bottom: 40px;
    }
    .custom-head-about .logo-big {
        text-align: center;
    }
    .custom-head-about .logo-big img {
        max-width: 225px;
    }
    .custom-projecting .row-titles {
        margin-bottom: 40px;
    }
    .custom-approach .approach-item {
        border-radius: 16px;
        border: 1px solid #272727;
        background-color: #101010;
        padding: 20px;
    }
    .custom-partner-model .block-part .wrap {
        border-radius: 15px;
        padding: 20px;
    }
    /*------ page Game development --*/
    .custom-header-dev .desc {
        padding-top: 20px;
    }
    .custom-cycle-dev .block-cycle .wrap {
        border-radius: 15px;
        padding: 20px;
        min-height: 100%;
    }
    .custom-cycle-dev .block-cycle .img {
        margin-bottom: 20px;
    }
    .production-cycle-list {
        padding-right: 0;
    }
    .production-cycle-item {
        padding: 15px 25px;
    }
    /******* form before footer ****/
    #BeforeFooter .addon-root-text-block > .clearfix {
        background-image: none !important;
    }
    .custom-before-footer .include-form .btn-submit {
        width: 100%;
    }
    .custom-before-footer .include-form .btn-submit .cf-btn-text {}
    /*----- video player ------*/
    .video-block {
        margin-bottom: 20px;
    }
    /*------- modal --------*/
    .form-modal-dialog .project-modal-title .h6 {
        padding: 0;
    }
    .form-modal-dialog .include-form .cf-form-wrap {
        padding-left: 0;
        padding-right: 0;
    }
    .form-modal-dialog .include-form .btn-submit {
        width: 100%;
    }
}
@media screen and (max-width:575px) {
    .header-exo .titles-mod .desc-header {
        margin-top: 5vh;
    }
    .titles-mod .desc-header .h1 {
        line-height: 1;
    }
    #MarsSection {
        background-position: 25% 50% !important;
    }
    .mars-section {
        aspect-ratio: auto;
        min-height: 360px;
    }
    .custom-mars .mars-content {
        min-height: 380px;
        justify-content: flex-end;
        padding-bottom: 25px;
    }
    .custom-before-footer .titles-form .h1 {
        font-size: 28px;
    }
    .custom-port-hover .block-img-port a img {
        height: 250px;
    }
}
@media screen and (max-width:420px) {
    .group-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }
    .group-btns .btn {
        width: 100%;
        justify-content: center;
    }
}