/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {
    .top-banner{
        top: 70px
    }
    .top-banner p{
        font-size: 1.4rem
    }
    .logo{
        top: 10px
    }
    .logo img{
        height: 50px
    }
    .grid-4{
        grid-template-columns: 1fr;
        gap: 30px
    }
    section.about h2 {
        margin-bottom: 15px
    }
    h1{
        font-size: 2.8rem;
        padding: 0 20px
    }
    .main-block h1 + p {
        margin-top: 5px
    }
    .stages-items{
        margin-top: 30px;
        margin-bottom: 30px
    }
    .cost .top-banner{
        padding: 5px 0
    }
    .social{
        top: 23px;
        right: 76px
    }
    .tel:before{
        left: 5px;
        top: -8px
    }
    .menu-open{
        top: 25px
    }
    .size-slider-container .selection-items {
        position: static;
        padding-top: 60px
    }
    .size-slider-container .size-slider{
        margin-top: 20px
    }
    .tel span{
        display: none
    }
    .more-info-wrap .more-info{
        top: 30px;
        left: 20px
    }
    /*.tabs {*/
    /*    flex-direction: row;*/
    /*    bottom: 0;*/
    /*    left: calc(50% - 55px);*/
    /*    right: auto*/
    /*}*/
    .main-block:before{
        filter: blur(100px);
        left: calc(50% - 175px);
        bottom: calc(50% + 0px);
        transform: scale(0.5)
    }

    .tabs-items img {
        height: 150px
    }
    .more-info-slider{
        height: 250px
    }
    .more-info-wrap .price table th, .more-info-wrap .price table td{
        font-size: 1.2rem
    }
    .main-form >div{
        max-height: 60dvh;
        padding-bottom: 30px;
        overflow-y: scroll
    }
    .main-form form{
        grid-template-columns: 1fr
    }
    .counter-items{
        grid-template-columns: 1fr;
        margin: 30px 0 0
    }
    .counter-item{
        width: calc(100vw - 60px);
        margin: 0 7.5px
    }
    .size-slider-container {
        padding: 20px 0
    }
    .back{
        top: 30px
    }
    section.offers h2 + div, .offers-items + div{
        padding: 0
    }
    .advantages-item{
        padding: 15px 0
    }
    section.terms .container, section.popup-section.cost .container {
        align-items: flex-start;
        padding-top: 90px
    }
    section.popup-section .container:not(section.popup-section.cost .container){
        align-items: flex-end
    }

    section.popup-section .container > .content,
    section.popup-section.cost .container .content{
        max-height: calc(100dvh - 90px);
        height: calc(100dvh - 90px);
        padding-bottom: 30px
    }


    .size-slider-container .selection-items{
        flex-wrap: wrap
    }
    .cost .title{
        flex-direction: column;
        text-align: center
    }
    .stages-items{
        margin: 30px 0
    }
    .stages-item, .more-info-wrap .btns, .cost .btns{
        width: calc(100vw - 54px);
        margin: 0 7px
    }
    .more-info-wrap .btns, .cost .btns{
        flex-direction: column
    }
    .more-info-wrap .btns >.btn, .cost .btns >.btn{
        width: 100%
    }
    .price strong{
        font-size: 2rem
    }
    .price ul li:not(nav ul li):before{
        top: 5px
    }
    .main-form form .promo >p
    {
        flex-direction: column;
        gap: 30px
    }
    .main-form form .promo >p >label{
        width: 100%
    }
}
@media all and (max-width: 600px){
    .tabs-items {
        width: 70%
    }
  
}