@media screen and (max-width: 991px)
{
    .hero-button
    {
        width: 55%;
    }
}
@media screen and (max-width: 767px)

{
    .company-pro
    {
        padding-left: 10px;
    }
    nav 
    {
        position: sticky;
        top: 0;
        background-color: white;
        padding-block: 1px;
        z-index: 2;
        box-shadow:  0 3px 10px #888;
    }
    .nav-toggle
    {
        display: block;
        margin-right: 20px;
    }
    .nav-links
    {
        position: absolute;
        background-color: white;
        box-shadow: #888 0px 25px 20px -20px;
        left: -100%;
        top: 100%;
        width: 100%;
        padding-block: 20px;
        transition: 0.2s ease-in-out;
        z-index: 2;
    }
    .nav-links.active 
    {
        left: 0;
    }
    .nav-links ul
    {
        flex-direction: column;
        gap: 30px;
    }
    .main-nav 
    {
        position: initial;
        margin-top: 10px;
    }
    .banner-text h1 
    {
        font-size: 0.8rem;
    }
    
    .company-pro img
    {
        padding-bottom: 5px;
    }
    .primary-button
    {
        width: 100%;
    }
    h3 
    {
        font-size: 1.2rem;
    }
    .hero-section
    {
      flex-direction: column-reverse;
      margin-inline: -80px;
      gap: 10px;
    }
    header 
    {
        padding: 0px;
    }
    .back-video video 
    {
      padding-top: 0px;  
      width: 100%;
      border-radius: 2px;
    } 
    .hero-info
   {
    max-width: 100vw;
    text-align: center;
   }
   .hero-button
   {
    height: 55px;
    margin-top: 10px;
    padding-block: 15px;
    border-radius: 0px;
   }
   .arrow 
   {
    margin-top: 10px;
   }
    .tag 
    {
        margin-top: 30px;
    }
    #About
    {
        margin-top: 20px;
    }
    .service-img 
    {
        gap: 10px;
    }
    .service-img img 
    {
        border-radius: 12px;
    }
    .service-card
    {
        flex-wrap: wrap;
        width: 100%;
        height: 140px;
        border-radius: 12px;
    }
    .recent-img 
    {
        gap: 10px;
    }
    .recent-card
    {
        flex-wrap: wrap;
        width: 100%;
        height: 140px;
    }
   .vision 
   {
    flex-direction: column-reverse;
    margin-top: 5px;
    padding-inline: 0;
   }
   .vision-text
   {
     margin-top: 0px;
   }
   .vision-photo
   {
      margin-top: 5px;
     padding-left: 0px;
   }
   .vision-photo img 
   {
     width: 230px;
   }
   @keyframes moving
{
    from{
        margin-left: 850%;
    }
    to{
        margin-left: -900%;
    }
}
    input 
    {
        width: 100%;
    }
    textarea 
    {
        width: 100%;
    }
    button 
    {
        width: 100%;
    }
    footer 
    {
        padding-block: 20px;
    }
    .footer
    {
        flex-direction: column;
        gap: 10px;
    }
    .footer img 
    {
        width: 65px;
    }
    .footer-link a 
    {
        font-size: 0.85rem;
    }
    .footer-link-sec a 
    {
        font-size: 0.85rem;
    }

    .phone-info p
    {
        font-size: 0.8rem;
    }
    .phone-info 
    {
        padding-top: 5px;
    }
    .mailto 
    {
        font-size: 0.7em;
    }
    .subfooter
    {
        padding-top: 10px;
    }
    .subfooter a 
    {
      font-size: 0.7rem;
    }
    .subfooter main 
    {
        height: 10vh;
    }
    .small-bold-text
    {
        font-size: 0.8rem;
    }
    .loc iframe 
   {
    width: 100%;
    border-radius: 15px;
   }
   .contact
{
    gap: 10px;
}

}
@media screen and (max-width: 479px)
{
    :root 
    {
        --padding-inline-section: 10px;
    }
.company-pro img
    {
        width: 40px;
    }
h1 
{
    font-size: 2rem;
}

h2
{
    font-size: 1.5rem;
}
h3
{
    font-size: 1.2rem;
}
p 
{
    font-size: 1rem;
}
.back-video video 
{
    border-radius: 2px;
}
header 
{
    padding: 0px;
}
.vision-tagline h3 
{
     font-size: 1.1rem;
}
.vision-tagline span 
{
    font-weight: 600;
}
.icon-long 
{
    font-size: 23px;
}

  @keyframes moving
{
    from{
        margin-left: 950%;
    }
    to{
        margin-left: -1000%;
    }
}
.client
{
    min-height: 250px;
    min-width: 220px;
    animation-delay: 0s;
    animation-duration: 6s;
}
.client 
{
    font-size: 0.7rem;
}
@keyframes running
{
    from{
        margin-left: 105%;
    }
    to{
        margin-left: -25%;
    }
}
.company-logo img 
{
    width: 90px;
    animation-duration: 15s;
}
.contact
{
    gap: 10px;
}
.mess h3 
{
    font-size: 1rem;
}
.our-loc h3
{
    font-size: 1rem;
}
.mail 
{
    flex-grow: 1;
}
.loc iframe 
{
    width: 100%;
    border-radius: 15px;
}
.ham-icon
{
    font-size: 22px;
}
.hover-link img
{
    font-size: 23px;
}
}