body{
    overflow-x: hidden;
    width: 100vw;
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 1050px){
    .site-info{
        flex-wrap: wrap;
    }

    .messengers-block{
        flex-direction: column;
    }

    .my-photo{
        max-width: 60%;
    }

    .mobile-hide{
        display: none;
    }

    hr{
        margin-left: 0;
    }

    footer > .payment-icons,
    .page-container > .payment-icons{
        max-width: 400px;
        margin-left: 0px;
    }
}

@media screen and (max-width: 950px){    
    .my-photo{
        max-width: 95%;
        align-self: center;
    }

    figure > img.centered{
        margin-left: 80px;
    }

    /* img[src="./img/conferentions/Saint-P.png"]{
        margin-left: 150px !important;
     }
     */

    .form-img{
        display: none;
    }

    .close{
        top: 0px;
        right: 60px;
    }

    .modal{
        left: 20%;
        top: 10%;
        transform: translate(-0px, -0px);
    }

    #fieldset{
        padding: 50px;
    }

    div.consultation{
        scale: 0.9;
        flex-wrap: nowrap;
    }
    
    progress{
        width: 490px;
    }

    #interactiveQuiz{
        width: 700px;
    }

    h2.question{
        width: auto;
        font-size: 20px;
    }

    #submit{
        width: 650px;
    }

    span.answer-description{
        width: 290px;
    }

    span.nowidth{
        width: auto;
    }

    .none{
        display: flex;
        align-self: center;
        gap: 20px;
    }
}

@media screen and (max-width: 1200px){
    header{
        flex-wrap: wrap;
    }

    .head-container{
        align-items: flex-start;
        margin: 0 20px;
    }

    #nav{
        display: none;
    }

    .burger-menu{
        display: block;
    }

    /* footer style */

    footer{
        padding-left: 10%;
    }

    .footer-lists{
        margin: 0;
    }
    
    ul.footer-list{
        padding-left: 0;
    }

    .burger-copyright{
        left: 7%;
    }

    main{
        gap: 0px;
        margin: 100px 50px 0 50px;
        align-items: center;
        justify-content: center;
    }

    .main-container{
        align-items: center;
        margin-bottom: 0;
    }

    .page-container{
        width: 95%;
        margin-top: 0;
        padding-top: 0;
    }

    .site-info{
        scale: 0.9;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 20px 0;
    }

    #info{
        text-align: center;
    }

    .started{
        align-self: start;
    }

    #test-preview{
        flex-wrap: wrap-reverse;
        scale: 1;  
    }

    .reverse{
        flex-direction: column;
        scale: 1;
    }

    .none{
        display: flex;
        gap: 20px;
    }

    .hide{
        display: none;
    }

    .itc-slider{
        max-width: 90%;
    }

    .test-slider-item{
        flex: 100%;
        width: 330px;
    } 

    .test-slider-wrapper{
        padding: 0;
        margin: 20px 0;
    }

    .itc-slider-item{
        flex: 0 0 18%;
    }

    .itc-slider-items{
        gap: 30px;
    }

    .itc-slider-btn-prev:hover,
    .itc-slider-btn-next:hover{
        opacity: 1;
    }


    .offer-slider-item:hover{
        box-shadow: none;
    }

    .offer-slider-item{
        flex:  0 0 29%;
        height: auto;
        width: 320px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .client-card:hover,
    .offer-slider-item:hover,
    .itc-slider-item:hover{
        scale: 1;
    }

    .consultations{
        align-items: center;
        justify-content: center;
    }

    h1.page-title{
        align-self: center;
    }

    .cards{
        flex-wrap: wrap;
    }

    .contact-card{
        gap: 15px;
    }

    .contact-page{
        flex-direction: column;
        gap: 20px;
    }

    .page-header{
        align-items: center;
        width: 100vw;
    }

    .page-title{
        font-size: 38px;
    }

    .breadcrumb{
        display: none;
    }
}

@media screen and (max-width: 675px){
    /* header style */
    header{
        flex-wrap: wrap;
    }

    figure > img.centered{
        margin-left: 50px;
    }

    /* img[src="./img/conferentions/Saint-P.png"]{
        margin-left: 100px !important;
     } */
    

    #nav{
        display: none;
    }

    .burger-menu{
        display: block;
    }

    .burger-copyright{
        left: 15%;
    }

    /* footer style */

    footer{
        padding-left: 10%;
    }

    .footer-lists{
        margin: 0;
    }
    
    ul.footer-list{
        padding-left: 0;
    }

    /* body style */
    main{
        padding: 0 15px;
        gap: 50px;
        margin: 100px 0 0 0;
        align-items: center;
        justify-content: center;
        overflow-x: hidden;
    }

    .main-container{
        align-items: center;
        margin-bottom: 0;
    }

    .page-container{
        width: 95%;
        margin-top: 0;
        padding-top: 0;
    }

    .site-info{
        scale: 1;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    #info{
        text-align: center;
    }

    .started{
        align-self: start;
    }
    
    h1{
        font-size: 40px;
        text-align: center;
    }

    .my-photo{
        max-width: 95%;
        align-self: center;
    }

    .test-photo{
        width: 85%;
    }

    .check-list-container,
    .check-list,
    .btns{
        flex-direction: column;
    }

    .btn{
        width: inherit;
    }

    .btn:hover{
        scale: 1.02;
        background-color: #fff;
    }

    #nextPage{
        display: flex;
        align-self: flex-start;
        margin-left: 20px;
        width: 350px;
        gap: 20px;
    }

    h2.container-name{
        font-size: 25px;
    }

    .offers{
        justify-content: center;
    }

    .none{
        display:flex;
    }

    .hide{
        display: none;
    }

    .itc-slider{
        max-width: 85%;
    }

    .test-slider-wrapper{
        padding: 0;
        margin: 20px 0;
    }

    .itc-slider-item{
        flex: 0 0 100%;
    }

    .client-card:hover{
        scale: 1;
    }

    .itc-slider-btn-prev:hover,
    .itc-slider-btn-next:hover{
        opacity: 1;
    }

    .offer-slider-item:hover{
        box-shadow: none;
    }

    .offer-slider-item{
        flex:  1;
        height: auto;
        width: 320px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .consultations{
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .price-img{
        width: 90vw;
    }

    .element-animation {
        opacity: 0;
        transform: translateY(0%);
    }

    .consultation{
        scale: 1;
    }

    h2.price{
        text-align: center;
    }

    .form-img{
        display: none;
    }

    .mySlides,
    .mySlides01 {
        margin: 150px 0;
    }

    .page-header{
        align-items: center;
        margin: 0 auto;
        width: 100vw;
    }

    .page-title{
        font-size: 38px;
    }

    .breadcrumb{
        display: none;
    }

    .contact-page,
    .contact-cards{
        align-items: center;
        justify-content: center;
    }

    .contact-card{
        gap: 20px;
    }

    .map{
        display: none;
    }

    .contact-btn{
        align-self: center;
        width: inherit;
    }

    .cards{
        flex-wrap: wrap;
    }

    .card{
        width: 95%;
    }

    .client-img{
        width: 305px;
    }

    ol, .list{
        padding: 15px;
    }

    ol li,
    ul li{
        text-align: left;
    }

    .information{
        text-align: left;
    }

    .test-slider-item{
        flex: 1;
        padding: 5px;
    }

    a.link-btn{
        width: 310px;
        font-size: 20px;
    }

    #aboutBtn{
        width: 100%;
    }

    .close{
        top: 0px;
        right: 60px;
    }

    .modal{
        margin: 0;
        padding: 0;
        align-self: center;
        left: 0.5%;
        top: 10%;
        transform: translate(-0px, -0px);
        width: 100%;
    }

    fieldset{
        padding: 50px 25px 20px 25px;
        width: 98vw;
        margin: 0 auto;
    }

    input.text{
        width: 85vw;
    }

    .quiz-list{
        gap: 0;
    }

    span.answer-description{
        width: 290px;
    }

    span.nowidth{
        width: auto;
    }

    .progress{
        flex-direction: column;
    }

    progress{
        width: 250px;
    }

    h2.question{
        width: auto;
        font-size: 18px;
    }

    h3.summary{
        text-align: center;
    }

    span{
        font-size: 17.5px;
    }

    #interactiveQuiz{
        width: inherit;
    }

    #submit{
        width: inherit;
    }
}

@media screen and (max-width: 380px){
    main{
        overflow-x: hidden;
    }

    .main-container:nth-child(odd){
        width: auto;
        gap: 0;
    }

    .consultations{
        display: block;
        gap: 0px;
    }

    span.sale{
        padding: 0 15px;
    }

    figure > img.centered{
        margin-left: 20px;
    }

 /* img[src="./img/conferentions/Saint-P.png"]{
    margin-left: 50px !important;
 } */
    
    #menu{
        top: -170%;
        padding-top: 150px;
        margin: 0;
    }

    h2.logo-title{
        font-size: 25px;
    }

    #menuToggle{
        position: absolute;
        top: 40px;
    }

    .logotype{
        gap: 5px;
        margin-left: 40px;
    }

    article .copyright{
        margin-left: 0;
    }

    .burger-copyright{
        left: 5%;
        top: 15px;
    }

    .modal{
        margin: 0;
        padding: 0;
        align-self: center;
        left: 1%;
        top: 1%;
        transform: translate(-0px, -0px);
        width: 100%;
    }

    .input-section{
        gap: 15px;
    }

    input.text,
    textarea{
        width: 100%;
    }
}