@media  (max-width:1367px) {
    .f-55 {
        font-size: 50px
    }

    body {
        font-size: 14px
    }

    .f-24 {
        font-size: 22px
    }
}

@media  (max-width:1181px) {

    .banner-after,
    .banner-before {
        width: 200px
    }

    .f-18 {
        font-size: 15px
    }

    .circle {
        padding: 25% 12% 10%
    }

    .number {
        margin: -111px auto 30px
    }

    .cta-left {
        width: 250px;
        height: 375px
    }

    .cta {
        border-radius: 150px
    }

    .f-55 {
        font-size: 45px
    }

    .f-40 {
        font-size: 35px
    }

    .f-24 {
        font-size: 20px
    }

    .gallery {
        height: 240px
    }
}
@media (max-width: 1024px) {
   .banner .f-55 {
        font-size: 27px;
    }
    .banner  .c-list li {
        font-size: 13px;
    }
    .f-18 {
        font-size: 13px;
    }
    ul.list-unstyled.c-list li {
        font-size: 13px;
    }
    .f-55 {
        font-size: 33px;
    }
    .reviews .box {
        min-height: 310px;
    }
    .f-40 {
        font-size: 24px;
    }
        
    
    
    
}

@media (max-width: 768px) {
	.f-55 {
        font-size: 27px;
    }
    .f-40 {
        font-size: 15px;
    }
    .reviews .box {
        min-height: 380px;
    }
}


@media  (max-width:992px) {
    .center-icon {
        width: 200px;
        height: 200px
    }

    .banner-after,
    .banner-before {
        width: 150px;
        opacity: .2
    }

    img.logo {
        object-position: center
    }

    .drop-down-cont {
        position: relative;
        height: auto;
        max-height: none !important;
        color: rgba(var(--light-color), 1) !important;
        box-shadow: unset
    }

    .drop-down-cont,
    .nav-bar {
        background: rgba(var(--dark-color), 1)
    }

    .nav-bar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transform: translateX(200%);
        z-index: 99999999;
        transition: .8s;
        padding-left: 20px;
        padding-right: 20px;
        color: rgba(var(--light-color), 1);
        overflow-y: scroll
    }

    .nav-bar li {
        margin: 10px auto
    }

    .drop-down-cont li {
        margin: 5px 0 !important
    }

    .nav-bar.active {
        transform: translateX(0)
    }

    .circle {
        width: 77%
    }

    .number {
        margin: -132px auto 30px
    }

    .f-40 {
        font-size: 30px
    }
}

@media  (max-width:576px) {
    .box {
        padding: 20px
    }

    .cta {
        border-radius: 100px
    }

    .f-55 {
        font-size: 28px;
    }

    .f-40,
    footer .f-40 {
        font-size: 24px
    }
    #v-pills-tab button.col-md-12.col-6.nav-link {
        width: 40%;
        margin: 0 auto;
    }
}

@media  (max-width:475px){
    #v-pills-tab button.col-md-12.col-6.nav-link {
        width: 50%;
    }
    .reviews .box {
        min-height: auto !important;
        height: auto;
    }
    #v-pills-tab button.col-md-12.col-6.nav-link {
        width: 48%;
        padding: 9px  0!important;
        font-size: 11px;
    }
    .col-lg-3.col-md-4.col-8.order-2.order-md-1, .col-lg-3.col-md-4.col-2.order-1.order-md-2, .col-lg-3.col-md-4.col-2.order-2.order-md-3 {
        padding: 0 6px;
    }
    .row.justify-content-center.mt-5 .col-lg-4.col-md-4.col-2 {
        padding: 0 6px;
    }
    
    .lozad.bg .icon {
        height: 50px;
        padding: 20px;
        width: 50px;
    }

}



@media  (max-width:431px) {
    body {
        font-size: 12px
    }

    .btn,
    button {
        padding: 10px !important
    }
}






