/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {
    :root {
        --section-distance: 45px
    }
    h1 {
        font-size: 2.6rem
    }
    h2 {
        font-size: 1.8rem
    }
    h3, .testimonial .name {
        font-size: 1.4rem
    }
    body{
        font-size: 1.4rem
    }
    ul li:not(nav ul li):before {
        width: 6px;
        height: 6px;
        top: 9px
    }
    .header {
        padding: var(--size-1) 0
    }
    .btn, input, input[type="submit"], input::placeholder{
        font-size: 1.4rem;
        height: 36px;
        border-radius: 9px
    }
    section p:not(:first-child), footer p{
        margin-top: 8px
    }
    .main-block .container{
        justify-content: flex-end;
        padding-bottom: var(--size-2)
    }
    .main-block .form{
        width: 100%
    }
   
    .advantages__item .title img{
        width: 60px
    }
    .advantages__item .title{
        gap: var(--size-1)
    }
    .advantages__item{
        align-items: flex-start
    }
    .advantages__item p {
        text-align: left
    }
    .advantages__items {
        margin-top: var(--size-2)
    }
    section.about .logo {
        top: 12px;
        left: 18px
    }
    section.about .img-container {
        border: 3px solid var(--primary-color)
    }
    .services .title{
        flex-direction: column;
        align-items: flex-start;
        gap: var(--size-1)
    }
    .services .slider-nav {
        gap: var(--size-1)
    }
 
    .about .media .img-container, .services-slider__item,
    .projects-slider .item
    {
        height: 280px
    }
    .services-slider__item .item-title img {
        width: 10px;
        margin-top: 5px
    }
    .services-slider__item .item-title{
        max-width: calc(100% - calc(var(--size-2) * 2));
        width: fit-content;
        padding: 8px 24px 11px;
        gap: var(--size-1)
    }
    .projects .decor-left, .projects .decor-right{
        width: 38px
    }
    .projects h2, .projects h2 + p, .testimonials h2, .testimonials h2 + p{
        max-width: calc(100% - 100px)
    }
    .projects-slider-wrap{
         max-width: calc(100% - 100px);
        width: calc(100% - 124px)
    }
    .projects .container{
        padding: var(--section-distance) 0
    }
    .projects-slider .item{
        border: 3px solid var(--white)
    }
    .projects .slider-nav{
        display: none
    }
    .projects-slider .item .text{
        top: var(--size-1);
        left: var(--size-1);
        padding: var(--size-1);
        max-width: calc(100% - 30px);
        background-color: #ffffffab
    }
    .testimonial > img{
        width: 75px !important;
        height: 75px;
        margin-top: -37.5px
    }
    .contact .text{
        flex-direction: column
    }
    .contact .text img{
        width: 80%
    }
    .projects-slider .item .btn{
        bottom: var(--size-1)
    }
    .social a{
        width: 34px;
        height: 34px
    }
    .mfp-figure video{
        position: static;
        width: calc(100vw - 12px)!important
    }
    .call img{
        height: 55px
    }
    
        
}
@media all and (max-width: 600px){
  
   
}
@media all and (max-width: 480px){
   
   
}
@media all and (max-width: 400px){
   
  


}
@media all and (max-width: 360px){
   
   
}