/* ====================================
        TABLET DEVICES
==================================== */

@media(max-width:992px){

    .container{
    
    flex-direction:column;
    
    }
    
    nav ul{
    
    margin:20px 0;
    
    }
    
    .hero h1{
    
    font-size:42px;
    
    }
    
    .hero p{
    
    font-size:18px;
    
    }
    
    .section-title h2{
    
    font-size:34px;
    
    }
    
    }
    /* Responsive Footer Grid */
@media screen and (max-width: 768px) {
        .footer-grid {
          grid-template-columns: 1fr 1fr !important;
          gap: 2rem;
        }
      }
      
      @media screen and (max-width: 480px) {
        .footer-grid {
          grid-template-columns: 1fr !important;
          text-align: center;
        }
      }
    
    /* ====================================
            MOBILE DEVICES
    ==================================== */
    
    @media(max-width:768px){
    
    nav ul{
    
    flex-direction:column;
    
    align-items:center;
    
    }
    
    nav ul li{
    
    margin:10px 0;
    
    }
    
    .logo img{
    
    height:60px;
    
    }
    
    .call-btn{
    
    margin-top:20px;
    
    }
    
    .hero{
    
    height:auto;
    
    padding:100px 20px;
    
    }
    
    .hero h1{
    
    font-size:32px;
    
    }
    
    .hero p{
    
    font-size:16px;
    
    }
    
    .hero-buttons{
    
    flex-direction:column;
    
    }
    
    .cta-buttons{
    
    flex-direction:column;
    
    }
    
    .section-title h2{
    
    font-size:30px;
    
    }
    
    .footer-container{
    
    text-align:center;
    
    }
    
    }
    
    
    /* ====================================
            SMALL MOBILE
    ==================================== */
    
    @media(max-width:480px){
    
    .hero h1{
    
    font-size:28px;
    
    }
    
    .section-title h2{
    
    font-size:26px;
    
    }
    
    .stat-box h2{
    
    font-size:38px;
    
    }
    
    .service-card{
    
    padding:25px;
    
    }
    
    .process-card{
    
    padding:25px;
    
    }
    
    .testimonial-card{
    
    padding:25px;
    
    }
    
    }

    @media(max-width:992px){

        .hero{
        
        flex-direction:column;
        
        text-align:center;
        
        }
        
        .hero h1{
        
        font-size:42px;
        
        }
        
        .hero-right img{
        
        max-width:350px;
        
        }
        
        .hero-features{
        
        justify-items:center;
        
        }
        
        }

        @media(max-width:768px){

                .map-box{
                
                    width:95%;
                
                    height:300px;
                
                }
                
                }