TPS_web_october/themes/tps/assets/css/components/2-layout/responsive.scss

// 1400 ========================
@include xlg-xxxlg {

    // About ================
    .about {
        padding: 100px 0 120px;

        &_video {
            &-box {
                height: 470px;
            }
        }
    }

    // Gallery ==============
    .gallery {
        padding: 80px 0;

        &_box {
            &-item {
                height: 300px;
            }
        }

        .gal {
            &_slider {
                &-item {
                    height: 300px !important;
                }
            }
        }
    }

    // Service Page ===============
    .service.page {
        .service {
            &_box {
                width: calc(100% + 60px);

                .slick-list {
                    padding: 0 60px 0 0 !important;
                }
            }

        }
    }

}

// 1200 ========================
@include xlg-xxlg {

    // Hero ==============
    .hero {
        &_item {
            &-title {
                font-size: 30px;
            }

            &-txt {
                margin: 20px 0;
            }

            &-link {
                font-size: 14px;
            }
        }

        .page {
            &_box {
                &-link {
                    font-size: 16px;
                }
            }
        }
    }

    // About ================
    .about {
        &_box {
            flex-direction: column;
        }

        &_info {
            width: 100%;
            margin-right: 0;
            margin-bottom: 40px;

            &-title {
                font-size: 30px;
                margin-bottom: 30px;
            }

            &-link {
                margin: 0 auto;
            }
        }

        &_video {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;

            &-box {
                height: 430px;

                .video_play {
                    width: 65px;
                    height: 65px;

                    &::before {
                        width: 13px;
                        height: 17px;
                    }
                }
            }
        }
    }

    // Service ===============
    .service {
        &_item {
            &-title {
                font-size: 14px;
            }

            &-txt {
                font-size: 13px;
            }
        }
    }

    // Contact ===========
    .contact {
        padding: 70px 0;

        &_title {
            font-size: 30px;
            margin-bottom: 30px;
        }
    }

    // Client ================
    .client {
        &_title {
            font-size: 30px;
            margin-bottom: 30px;
        }

        &_box {
            .slick-next {
                width: 30px;
                height: 30px;
                right: -35px;
            }

            .slick-prev {
                width: 30px;
                height: 30px;
                left: -35px;
            }
        }

        &_item {
            height: 145px !important;
        }
    }

    // Footer =============
    .footer {
        .logo {
            width: 160px;
            height: 55px;
        }
    }

}

// 1100 =======================
@include lg-xxlg {

    .auto_container {
        padding: 0 35px;
    }

    // Header ==================
    .header {

        .burger {
            display: flex;
            align-items: center;
            justify-content: center;

            cursor: pointer;
            width: 30px;
            height: 25px;
            position: relative;

            &.active {
                span {
                    background: transparent;

                    &::before {
                        transform: rotate(45deg);
                        width: 25px;
                        height: 1.5px;
                        top: 0;
                    }

                    &::after {
                        width: 25px;
                        height: 1.5px;
                        transform: rotate(-45deg);
                        bottom: 0;
                    }
                }
            }

            span {
                position: relative;
                display: block;
                width: 20px;
                height: 1.5px;
                background: #fff;

                @include transition;

                &::before {
                    content: '';
                    position: absolute;
                    top: -7px;
                    right: 0;
                    width: 30px;
                    height: 1.5px;
                    background: #fff;

                    @include transition;
                }

                &::after {
                    content: '';
                    position: absolute;
                    bottom: -7px;
                    right: 0;
                    width: 10px;
                    height: 1.5px;
                    background: #fff;

                    @include transition;
                }
            }
        }

        .lang {
            &_drop {
                background: transparent;
                color: #fff;

                &.active {
                    top: calc(100% + 25px);
                }

                display: flex;
                justify-content: center;

                &-link {
                    color: #fff !important;
                    padding: 7px 15px;
                }
            }
        }

        .nav {
            &_bg {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .7);
                backdrop-filter: blur(8px);

                opacity: 0;
                pointer-events: none;
                transform: scale(0);

                transition: all .3s linear;
                -ms-transition: all .3s linear;
                -moz-transition: all .3s linear;
                -webkit-transition: all .3s linear;

                &.active {
                    opacity: 1;
                    pointer-events: unset;
                    transform: scale(1);
                }
            }

            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;

            ul {
                flex-direction: column;
                justify-content: center;
                height: 100%;

                li {
                    margin-right: 0;
                    margin-bottom: 50px;

                    a {
                        font-size: 20px;
                    }
                }
            }

            .service_nav {
                top: -100px;
            }
        }

    }

    // Hero =====================
    .hero {
        &_item {
            &-title {
                font-size: 22px;
            }

            &-txt {
                font-size: 15px;
            }

            &-link {
                font-size: unset;

                a {
                    font-size: 14px;
                    padding: 10px 25px;
                }
            }
        }

        .swiper {
            &-pagination {
                &-bullet {
                    width: 10px;
                    height: 10px;

                    &-active {
                        &::after {
                            width: 5px;
                            height: 5px;
                        }
                    }
                }
            }

            &-button {
                &-prev {
                    span {
                        width: 13px;
                        height: 20px;

                        svg {
                            @include ImgCon;
                        }
                    }
                }

                &-next {
                    span {
                        width: 13px;
                        height: 20px;

                        svg {
                            @include ImgCon;
                        }
                    }
                }
            }
        }
    }

    // About ================
    .about {
        padding: 35px 0 120px;

        &_video {
            max-width: 500px;

            &-box {
                height: 385px;
            }
        }


    }

    // About Page ====================
    .about.page {
        .about {
            &_box {
                &-item {
                    &-title {
                        font-size: 18px;
                    }

                    &-txt {
                        font-size: 14px;
                    }
                }
            }
        }
    }

    // Contact ===============
    .contact {
        &_box {
            flex-direction: column;
        }

        &_form {
            width: 100%;
            margin-right: 0;
            margin-bottom: 60px;
        }

        &_input {
            input {
                font-size: 14px;
            }

            textarea {
                font-size: 14px;
            }
        }

        &_btn {
            padding: 14px 30px;
        }

        &_info {
            width: 100%;
            margin-left: 0;
        }
    }

    // Service ===============
    .service {
        .inner {
            height: 600px;
        }

        &_box {
            &-image {
                height: 600px;
            }
        }

        &_item {
            &-info {
                top: 35%;
            }
        }
    }
}

// 1000 ======================
@include lg-xlg {

    // Gallery =================
    .gallery {
        &_box {
            flex-wrap: wrap;

            &-item {
                width: calc(50% - 2px);
            }
        }
    }

    // Service Page =================
    .service.page {
        .service {
            &_box {
                width: calc(100% + 70px);

                .slick-list {
                    padding: 0 170px 0 0 !important;
                }
            }
        }
    }

    // About Page ====================
    .about.page {
        .about {
            &_box {
                &-item {
                    width: calc(50% - 82px);
                }
            }
        }
    }
}

// 750 ========================
@include lg-lg {

    // Header =================
    .header {
        .logo {
            &_bg {
                width: 55px;
                height: 55px;
            }

            &_inner {
                &-text {
                    width: 30px;
                    height: 30px;
                    top: 50%;
                    font-size: unset;
                    display: block;

                    svg {
                        @include ImgCon;
                    }
                }
            }

            &_group {
                &-txt {
                    width: 95px;

                }
            }
        }
    }

    // Crumb =================
    .crumb {
        padding: 180px 0 40px;

        &_title {
            font-size: 30px;
        }

        &_txt {
            line-height: 30px;
            font-size: 14px;
        }
    }

    // Hero ====================
    .hero {
        &_item {
            height: 800px !important;

            &-title {
                font-size: 18px;
            }
        }

        &_pag {
            display: none;
        }

        .page {
            &_box {
                top: -50px;

                &-group {
                    padding: 20px 50px 20px 0;

                    &::before {
                        width: 1500px;
                        left: -1499px;
                    }
                }

                &-link {
                    font-size: 14px;

                    &::after {
                        top: 5px;
                        width: 17px;
                        right: -24px;
                    }
                }
            }
        }
    }

    // About ==================
    .about {
        padding-top: 0;

        &_info {
            &-title {
                font-size: 26px;
                margin-bottom: 25px;
            }

            &-txt {
                font-size: 15px;
                line-height: 30px;
            }

            &-link {
                font-size: 14px;
                line-height: 30px;
            }
        }

        &_video {
            &-box {
                height: 300px;

                .video_play {
                    width: 54px;
                    height: 54px;

                    &::before {
                        width: 13px;
                        height: 13px;
                    }
                }
            }
        }

    }

    // Contact =================
    .contact {
        padding: 50px 0;

        &_title {
            font-size: 26px;
            margin-bottom: 25px;
        }

        &_input {
            input {
                padding: 10px 20px;
            }

            textarea {
                padding: 10px 20px;
            }
        }

        &_btn {
            padding: 12px 30px;
            line-height: 30px;
        }
    }

    // Clients ===================
    .client {
        &_title {
            font-size: 26px;
            margin-bottom: 25px;
        }

        &_box {

            .slick {

                &-next,
                &-prev {
                    display: none !important;
                }

                &-dots {
                    li {
                        &:nth-child(n+7) {
                            display: none;
                        }

                        button {
                            width: 12px;
                            height: 12px;
                        }
                    }
                }
            }
        }
    }

    // Footer =================
    .footer {
        &_box {
            flex-direction: column;
        }

        .logo {
            margin-bottom: 30px;
        }

        .copyright {
            font-size: 14px;
            line-height: 30px;
            text-align: center;
        }
    }

    // Gallery =================
    .gallery {
        &_box {
            &-item {
                width: calc(50% - 2px);
                height: 245px;

                &-title {
                    font-size: 13px;
                    line-height: 27px;
                }

                &-txt {
                    font-size: 12px;
                }
            }
        }

        .gal {
            &_slider {
                &-item {
                    height: 245px !important;
                }
            }
        }
    }

    // Service Page ================
    .service.page {
        .service {
            &_box {
                &-item {
                    min-width: 390px;

                    &-photo {
                        height: 280px;
                    }
                }
            }
        }
    }

    .main_title {
        font-size: 20px;
    }
}

// 650 =======================
@include md-sm {

    // Gallery ==============
    .gallery {
        padding: 60px 0;

        &_filter {
            &-row {
                flex-direction: column;
                align-items: flex-start;

                .category {
                    margin-bottom: 30px;

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }

        &_box {
            margin-top: 30px;

            &-item {
                width: calc(100% - 2px);
            }
        }
    }

    // Service Page ================
    .service.page {
        .service {
            &_box {
                width: 100%;

                .slick-list {
                    padding: 0 !important;
                }

                &-item {
                    min-width: 280px;
                    margin-right: 15px;

                    &-photo {
                        height: 240px;
                    }

                    &-title {
                        font-size: 20px;
                        line-height: 27px;
                    }
                }
            }

            &_list {
                li {
                    p {
                        line-height: 28px;
                    }
                }
            }
        }
    }

    // About Page ====================
    .about.page {
        .about {
            &_box {
                &-item {
                    width: calc(100% - 82px);
                }
            }
        }
    }
}

// 400 ===========================
@include md-xsm {
    .auto_container {
        padding: 0 20px;
    }

    // Header ================
    .header {
        top: 30px;
    }

    // Crumb =================
    .crumb {
        padding: 180px 0 40px;

        &_title {
            font-size: 26px;
        }

        &_txt {
            line-height: 30px;
            font-size: 14px;
        }
    }

    // Hero ==================
    .hero {
        &_item {
            height: 700px !important;
        }
    }

    // About =================
    .about {
        margin-top: -20px;

        &_video {
            &-box {
                height: 230px;
            }
        }
    }

    // Service Page =================
    .service.page {
        .service {
            &_box {
                width: calc(100% + 0px);

                &-item {
                    min-width: unset !important;
                    margin-right: 5px;
                }

                .slick-list {
                    padding: 0 !important;
                }
            }
        }
    }
}