/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {
    h1{
        font-size: 9rem
    }
    section.main-block .container{
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: var(--size-2)
    }
    section.main-block .content{
        padding: 12px;
        background: var(--main-color);
        border: 4px solid var(--light-yellow);
        border-radius: 12px
    }
    section.main-block .subtitle{
        font-size: 1.6rem;
        margin-bottom: 12px
    }
    section.main-block h1 + p{
        margin-top: 0;
        line-height: 1.1;
        color: var(--pale-main)
    }
    .title-center h2, .title-center h2 + p {
        padding: 0
    }
    .how-we-work .container {
        padding-left: 12px;
        padding-right: 12px
    }
    .call img{
        height: 43px
    }
    h2 {
        font-size: 2.8rem;
        margin-bottom: var(--size-1)
    }
    h3, .counter-item__text, .footer-title {
        font-size: 2.2rem
    }
    .counter-item__number, .counter-item__number + span{
        font-size: 5rem
    }
    .projects-slider .item .text{
        padding: var(--size-1);
        max-width: calc(100% - 24px)
    }
    .projects-slider .item .testimonial{
        max-width: calc(100% - 24px);
        padding: var(--size-1);
        right: var(--size-1);
        bottom: 80px
    }
    .projects-slider .item .testimonial .name{
        margin-top: -12px
    }
    .contact form >p{
        gap: var(--size-1)
    }
    .footer{
        padding-top: var(--size-2);
        padding-bottom: var(--size-2)
    }
    .footer >div:first-of-type p {
        margin-top: var(--size-1)
    }
    .projects-slider .item .sale.text {
        top: 30px;
        left: -99px;
        padding: 6px 70px;
        width: 350px;
        height: 74px
    }
    .projects-slider .img-container >img {
        height: 420px !important
    }
    .projects .slider-nav {
        bottom: calc(210px - 12.5px)
    }
   
}
@media all and (max-width: 600px){
    h1{
        font-size: 6rem
    }
    section.about .img-container {
        height: 520px
    }
   
   
}
@media all and (max-width: 480px){
   .circular-text{
        display: none
   }
   .about__media {
        padding-right: 0
    }
    .services-slider .item{
        padding: var(--size-1)
    }
    .services-slider .item .btn{
        margin-top: var(--size-1)
    }
    
}
@media all and (max-width: 400px){
   


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