@media screen and (min-width:200px) and (max-width:683px) {
    body {
        font-size: 85%;
    }

   
   
    :root {
        --btnradius: 80px;
    --radius: 30px;
    --small-radius: 30px;
    }
   
    .container {
        width: 90%;
    }
  
   

    ul.sub {

        padding: 0 0 0 20px;
    }
    .mobile-only {
        display: block;
      }
   

    .menu-toggle {
        color: #000;
        width: 20px;
    }

    .flex {
        display: flex;
        flex-wrap: wrap
    }

 

    .logo {
        width: 40%;
    }

  
    .flex {
        flex-wrap: wrap;
    }

 
    .logo img {
        max-width: 120px;
    }
    .header.bgcolor .logo img {
        max-width: 110px;
    }
    h1 {
        font-size: 2.3em;
    }
    
    .header-btn {
        display: none;
    }
    header {
        padding: 20px 0;
    }
    
    h2 {
        font-size: 2.1em;
    }
    
    h3 {
        font-size: 1.7em;
    }
    
    .mobile-only ul {
        margin: 40px 0 0 0;
        width: 100%;
    }
    .mobile-only li {
        width: 100%;
        margin: 0 0 10px 0;
    }
    .banner-sec {
        margin: 130px 0 0 0;
    }
    .banner-text {
        padding: 100px 20px 0;
    }
    .banner {
        height: 75vh;
    min-height: 550px;
    }
    .why-choose-block {
        width: 100%;
    }
    .why-choose-block.flex {
        flex-wrap: nowrap;
    }
    .home .banner {
        background-position: 65%!important;
    }
    .middle-content {
   background-color: rgb(28 178 181 / 91%);
        padding: 50px 20px;
}
    .middle-content h2 {
    color: var(--secondcolor);
    font-size: 2em;
}
    .middle-content p {
     
    font-size: 1.2em;
    
}
    .middle-content h3 {
        font-size: 1.2em;
    }
    .middle-sec {

    transform: translateY(-45px);
}
    .text-sec {
        width: 90%;
    }
    .service-block {
        width: 100%;
        padding: 10px 20px;
    }
    .service-list.flex {
        gap: 0;
        margin: 10px 0 10px 0;
    }
    .banner-text p {
        color: var(--secondcolor);
    }
    .banner-text h1 {
         color: var(--secondcolor);
    }
    .about-us {
        padding: 0 0 50px 0;
    }
    .vertical-tabs {
        padding: 30px;
    }
    .testimonials .left {
        width: 100%;
        height: 150px;
        background: url(../img/qts.png) no-repeat center center / 45%;
    }
    .left h4 {
        width: 70%;
        font-size: 2.8em;
    }
    .testimonials .right {
        width: 100%;
    }
    .footer-text h3 {
        font-size: 1.8em;
        padding: 0 0 30px 0;
    }
    .footer-left {
        width: 100%;
    }
    .footer-middle {
        width: 100%;
    }
    .footer-right {
        width: 100%;
        text-align: center;
    }
    .footer-right img {
        max-width: 50px;
    }
    .footer-text {
        width: 90%;
    }
    .footer-block.flex {
        flex-direction: column-reverse;
        gap: 30px;
    }
    .right-sec {
        padding: 20px 0 0 0;
    }
    .bottom-footer .left {
        width: 100%;
    }
    .bottom-footer .right {
        width: 100%;
        padding: 20px 0 0 0;
    }
    .inner .banner {
        height: 40vh;
    min-height: 500px;
    }
    .about-sec h2 {
        font-size: 2.1em;
    }
    .middle-content.flex {
    gap: 30px;
}
    .inner .banner-text {
        padding: 210px 0 0;
    }
    .team-sec h2 {
        font-size: 2.1em;
    }
    .team-block {
        width: 47%;
    }
    .team-sec {
        padding: 0 0 100px 0;
    }
    .footer-sec {
        padding: 50px 0;
    }
    .contact-link-sec {
        width: 100%;
    }
    .contact-link.flex {
        gap: 40px;
      
    }
    .contact-link-sec a {
        font-size: 1.5em;
    }
    .contact-sec {
        width: 100%;
        padding: 100px 0 50px 0;
    }
    .contact-form-wrap {
        padding: 30px;
    }
    .contact-form .flex {
        gap: 0;
    }
    .contact-form input[type="submit"] {
        width: auto;
    }
    .contact-form {
        margin: 0 0 100px 0;
    }
    .why-choose  {
        padding: 50px 0 0 0;
    }
    .why-choose-sec {
        background-size: 200px;
    }
    .services {
        padding: 50px 0;
    }
    ul#tabs-nav li {
        padding: 10px 0 5px 0;
        font-size: 1.1em;
        margin-right: 23px;
    }
    .tabs h3 {
        font-size: 2.3em;
    }
    .tabs p {
        font-size: 1.3em;
    }
    p {
        line-height: 1.2;
    }
    .about-banner {
    
        background: linear-gradient(0deg, rgba(0,0,0,0.1966036414565826) 0%, rgba(0,0,0,0.19940476190476186) 100%),url(../img/tab-banner.jpg) no-repeat 68% 0 / cover;
       min-height: 450px;
    }
  
    .testimonials {
        width: 100%;
        padding: 0 0 100px 0;
    }
    .testimonials .flex {
        gap: 50px;
    }
    .testimonial-content b {
        padding: 20px 0 0 0;
    }
    .about-sec {
        width: 100%;
        padding: 50px 0;
    }
    .header.bgcolor::before {
  display: none;
    }
    .header::before {
        height: 110px;
    }
    header {
        flex-wrap: nowrap;
    }
    .header header nav ul li a {
        margin: 0 12px 0 0;
        padding: 8px 0 10px 2px;
    }
    header nav ul li:first-child {
 display: none;
    }

    header nav ul { 
        justify-content: flex-end;
    }
    .contact-menu {
        display: block;
        background-color: #171c1c;
        position: fixed;
        width: 100%;
        padding: 10px;
        bottom: 0;
        text-align: center;
        z-index: 99;

       }
       .contact-menu a {
        color: var(--secondcolor);
        font-size: 1.3em;
        font-weight: 500;
       }
       .contact-widget {
        display: none;
       }
    .middle-content .left {
    width: 100%;
}
    .middle-content .right {
    width: 100%;
}
}

@media screen and (min-width:684px) and (max-width:1024px) {
   body {
        font-size: 90%;
    }
 
    .container {
        width: 90%;
    }

   p {
    font-size: 1.3em;
   }
        .middle-content .left {
    width: 100%;
}
    .middle-content .right {
    width: 100%;
}

    .flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    h1 {
        font-size: 4.5em;
    }
    .header-btn a.btn {
        white-space: nowrap;
    }
    
    .banner-text {
        max-width: 700px;
    }
    .banner {
        height: 60vh;
        height: 700px;
    }
    .why-choose-sec {
        background-size: 2s00px;
    }
    .why-choose-block.flex {
        flex-wrap: nowrap;
    }
    .about-banner {
        min-height: 500px;
    }
    .service-list.flex {
        gap: 0;
    }
    .testimonials .flex {
        flex-wrap: nowrap;
    }
    .inner .banner {
        height: 50vh;
        min-height: 600px;
    }
    .contact-link.flex {
        gap: 50px;
        margin: 50px 0 0 0;
        flex-wrap: nowrap;
    }
    .service-block {
        padding: 8px;
    }
     .middle-content h3 {
        font-size: 1.5em;
    }
       .middle-content {
   background-color: rgb(28 178 181 / 91%);
        padding: 50px 40px;
}
    .why-choose-block {
    width: 48%;
}
    .service-block {
            width: 48%;
    }
    .banner-text h1 {
        color: var(--secondcolor);
    }
        .banner-text p {
        color: var(--secondcolor);
    }
    .inner .banner {
        height: 40vh;
        min-height: 500px;
    }
    .inner .banner-text {
        padding: 210px 0 0;
    }
}

@media screen and (min-width:1024px) and (max-width:1550px) {

    body {
        font-size: 85%;
    }
  

}