@media (max-width:1439px) {
    .container {
        width: 90%;
    }
    header .bottom .links {
        display: none;
    }
    .main .h1 {
        width: 55%;
    }
    .main .desc {
        width: 55%;
    }
    header .bottom .catalogBtn {
        display: block;
        background-color: var(--white);
        padding: 10px 20px;
        border-radius: 10px;
        border: 1px solid var(--white);
        color: var(--gray);
        text-transform: uppercase;
    }
    header .bottom .catalogBtn:hover {
        border: 1px solid var(--blue);
    }
    header .bottom .catalogBtn i {
        color: var(--gray);
        margin-right: 8px;
    }
    header .bottom .search {
        margin-right: 50px;
    }
}

@media (max-width:1300px) {
    .banner .imgs {
        width: 500px;
        height: 500px;
        top: -37%;
    }
    .main form {
        width: 35%;
    }
}

@media (max-width:1200px) {
    .main form {
        width: 40%;
        margin-bottom: 150px;
    }
    .contact .right {
        width: 40%;
    }
    .banner .wrapper .bt .text {
        font-size: 16px;
    }
    .numbers .number span:first-child {
        font-size: 34px;
    }
    .banner .numbers .number span:last-child {
        font-size: 16px;
    }
    .portfolio {
        grid-template-columns: repeat(3, 1fr);
    }
    .banner .imgs {
        width: 450px;
        height: 450px;
        top: -24%;
    }
}

@media (max-width:1024px) {
    .team .img {
        height: 200px;
    }
    .team .wrapper .card {
        height: 360px;
    }
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
    .post_detail_content {
        flex-direction: column;
    }
    .post_detail_content .portfolio {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 1em;
        grid-row-gap: 1em;
    }
    .post_detail_content .right {
        width: 100%;
    }
    .main .icons {
        width: 100%;
    }
    .mob {
        display: block;
    }
    .calc.img .right {
        width: 50%;
    }
    .calc .chexblock label img {
        height: 60px;
    }
    .calc .step span {
        width: 46px;
        min-width: 46px;
        height: 46px;
    }
    .category .grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .portfolio .card .title {
        height: 50px;
    }
    .section {
        margin-top: 65px;
        margin-bottom: 65px;
    }
    .main_cat {
        margin-top: 3em;
    }
    .portfolio .card .go {
        width: 32px;
        height: 32px;
    }
    .start p {
        width: 65%;
    }
    .main_category .grid .card {
        padding: 24px;
    }
    .main_category ul {
        margin-bottom: 25px;
    }
    .how-mobile {
        display: flex!important;
    }
    .how {
        display: none;
    }
    .how .line .title {
        font-size: 18px;
    }
    .banner .h1 {
        display: none;
    }
    .mini-certs {
        display: none;
    }
    .banner .imgs {
        display: none;
    }
    .banner .wrapper .bt .text {
        margin-bottom: 30px;
    }
    .banner.line {
        height: 100%;
    }
    .numbers {
        width: 80%;
        justify-items: center;
        margin: 0 auto;
    }
    .banner .wrapper {
        flex-direction: column;
        align-items: center;
    }
    .banner .bt {
        width: 100%;
    }
    h1 {
        font-size: 32px;
    }
    .h1 {
        font-size: 32px;
    }
    .works {
        display: none;
    }
    .works .right .wrapper,
    .works .right img {
        height: 400px;
    }
    .work-many {
        display: none;
    }
    .container {
        width: 95%;
    }
    .contact .right {
        width: 40%;
    }
    .contact .left {
        width: 40%;
    }
    .whywe .grid {
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 1em;
        grid-row-gap: 1em;
    }
    .start p {
        font-size: 36px;
        margin: 0 auto 25px auto;
    }
    .start button {
        font-size: 24px;
    }
}

@media (max-width:768px) {
    .main_cat {
        flex-direction: column-reverse;
    }
    .main_cat .left,
    .main_cat .right {
        width: 100%;
    }
    .main_cat .left {
        margin-bottom: 2em;
    }
    .contact {
        flex-direction: column;
    }
    .contact .left {
        width: 100%;
        margin-bottom: 40px;
    }
    .calc.img .right {
        width: 100%;
    }
    .post_detail_content .left {
        width: 100%;
    }
    .post_detail {
        flex-direction: column;
    }
    .post_detail .left {
        width: 100%;
    }
    .post_detail .right {
        width: 100%;
        display: none;
    }
    .post_detail .img.mobile {
        display: block;
    }
    .service .big_img {
        height: 400px;
    }
    .section h2 {
        margin-bottom: 25px;
    }
    .category {
        flex-direction: column;
    }
    .category .left {
        width: 100%;
        margin-bottom: 30px;
    }
    .category .right {
        width: 100%;
    }
    .category .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact .h1 {
        margin-bottom: 25px;
    }
    .h2 {
        font-size: 22px
    }
    .contact .right {
        width: 50%;
    }
    .main .h1 {
        width: 100%;
        margin-bottom: 15px;
    }
    .main .desc {
        width: 100%;
    }
    .main .icons {
        display: none;
    }
    .main .container {
        width: 100%;
        padding-left: 2.5%;
        padding-right: 2.5%;
        padding-top: 160px;
        padding-bottom: 120px;
    }
    .main_category h1 {
        width: 75%;
    }
    .main form {
        width: 75%;
        margin: 0 auto;
    }
    .main .inner {
        width: 75%;
        margin: 0 auto;
    }
    .main_category .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .portfolio {
        grid-template-columns: repeat(2, 1fr);
    }
    .portfolio.flex {
        grid-template-columns: none;
    }
    .slick-arrow {
        width: 32px;
        height: 32px;
        font-size: 30px;
        padding-bottom: 2px;
    }
    .portfolio_detail .left {
        width: 100%;
    }
    .portfolio_detail .right {
        width: 100%;
        height: 50vh;
        margin-bottom: 25px;
    }
    .portfolio_detail {
        flex-direction: column-reverse;
    }
}

@media (max-width:700px) {
    header .bottom .img {
        margin-right: 35px;
    }
    header .bottom .search {
        margin-right: 35px;
    }
}

@media (max-width:640px) {
    #overlayForm .accessForm {
        width: 90%;
    }
    #overlayForm.access .accessForm {
        top: -20%;
    }
    .main_cat .btn {
        margin-top: 2em;
        padding: 24px 24px;
        margin: 2em auto 0 auto;
        width: 100%;
    }
    .main_cat .under span {
        font-size: 1.6rem;
    }
    .service .mini-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    .page404 .title {
        font-size: 102px;
    }
    .page404 .text {
        font-size: 28px;
    }
    .post_detail_content .portfolio {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    .numbers {
        width: 100%;
    }
    .quest details {
        width: 100%;
        margin-bottom: 1em;
    }
    .service .big_img {
        height: 300px;
    }
    .main_cat .big_img {
        height: 300px;
    }
    .contact form {
        padding: 20px;
    }
    .calc.img .right {
        width: 100%;
    }
    .category .grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .portfolio .slick-list,
    .video__gallery .slick-list,
    .brand .wrapper .slick-list,
    .portfolio.slick,
    .team .wrapper .slick-list,
    .how-mobile .wrapper .slick-list {
        width: 85%;
    }
    .about .img {
        height: 30vh;
    }
    .portfolio_detail .right {
        width: 100%;
        height: 30vh;
        margin-bottom: 25px;
    }
    .bread h1 {
        width: 90%;
    }
    .portfolio .card .title {
        font-size: 14px;
        height: 40px;
    }
    .docs .wrapper {
        gap: 0.5em;
    }
    .certs .img {
        height: 200px;
    }
    .bread {
        margin-top: 100px;
    }
    .bread ol {
        margin-bottom: 20px;
    }

    .section {
        margin-top: 34px;
        margin-bottom: 50px;
    }
    .main_cat {
        margin-top: 0;
    }
    .portfolio .slick-list,
    .video__gallery .slick-list,
    .brand .wrapper .slick-list,
    .portfolio.slick,
    .team .wrapper .slick-list {
        width: 80%;
    }
    h1 {
        font-size: 28px;
    }
    .h1 {
        font-size: 28px;
    }
    main {
        margin-top: 0;
    }
    header .mobile__top {
        display: block;
        z-index: 5;
        background-color: var(--gray);
        padding: 10px;
    }
    header .mobile__top .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    header .mobile__top i {
        font-size: 28px;
        margin-right: 10px;
    }
    header .mobile__top .img {
        height: 63px;
    }
    header .top {
        display: none;
    }
    header .bottom {
        display: none;
    }
    header .menu {
        cursor: pointer;
    }
    .main_category .grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .main_category h1 {
        width: 100%;
    }
    .contact {
        flex-direction: column;
    }
    .contact .left {
        width: 100%;
        margin-bottom: 40px;
    }
    .contact .right {
        width: 100%;
    }
    footer .inner .wrapper {
        flex-direction: column;
    }
    footer .col {
        margin-bottom: 30px;
    }
    .popUp.inverse {
        background-color: var(--gray);
        z-index: 98;
    }
    .popUp.inverse a,
    .popUp.inverse button,
    .popUp.inverse i {
        color: var(--white);
    }
    .popUp.inverse .inner {
        margin-top: 0;
    }
    .popUp {
        width: 100%;
    }
    .popUp .social .timework {
        color: var(--lightgray);
        font-size: 13px;
        line-height: normal;
        margin-bottom: 8px;
        display: block;
    }
    .popUp .social {
        margin-bottom: 30px;
    }
    .popUp .social .tel {
        text-decoration: underline;
        margin-bottom: 8px;
    }
    .popUp .social .icons i {
        color: var(--lightgray);
        font-size: 24px;
        cursor: pointer;
    }
    .popUp .social .icons i:first-child {
        margin-right: 8px;
    }
    .popUp .cityCall {
        color: var(--white);
        display: inline-block;
        text-decoration: underline;
        margin-bottom: 30px;
    }
    .portfolio_text {
        width: 90%;
    }
    .portfolio {
        grid-template-columns: repeat(1, 1fr);
    }
    .portfolio .card {
        padding: 12px 10px;
    }
    .about {
        flex-direction: column;
    }
    .about .left {
        width: 100%;
    }
    .about .right {
        width: 100%;
    }
    .about .text {
        margin-bottom: 40px;
    }
    .section h2 {
        margin-bottom: 30px;
    }
    .numbers {
        margin-bottom: 30px;
    }
    .numbers .number span:first-child {
        font-size: 32px;
    }
    .start {
        height: 200px;
    }
    .start p {
        font-size: 24px;
        width: 80%;
        margin: 0 auto 20px auto;
    }
    .start button {
        font-size: 16px;
    }
    .whywe .block {
        padding: 12px;
    }
    .docs a {
        padding: 10px 8px;
        font-size: 14px;
        border-radius: 15px;
    }
    .main .h1 {
        width: 100%;
        margin-bottom: 15px;
    }
    .main .desc {
        width: 100%;
    }
    .main .icons {
        display: none;
    }
    .main .container {
        width: 100%;
        padding-left: 2.5%;
        padding-right: 2.5%;
        padding-top: 200px;
        padding-bottom: 120px;
    }
    .main form {
        width: 85%;
    }
    .main .inner {
        width: 85%;
    }
    .h2 {
        font-size: 20px;
    }
    .popup-h{
        color:white;
    }
    .works {
        flex-direction: column;
    }
    .works .left {
        width: 100%;
    }
    .works .right {
        width: 100%;
    }
    .works .left .h1,
    .works .left .bt {
        width: 100%;
    }
    .portfolio .card .img {
        height: 200px;
    }
    .portfolio .card .go {
        width: 32px;
        height: 32px;
    }
}

@media (max-width:424px) {
    .numbers {
        display: flex;
        flex-direction: column;
    }
    .whywe .block {
        margin-left: 0;
        margin-top: 0;
        width: 100%;
    }
    .numbers .number {
        margin-bottom: 1em;
    }
}