/* Responsive styles for index.html */

/* General resets for responsiveness */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Navbar adjustments */
@media (max-width: 992px) {
    .navbar-nav {
        text-align: center;
    }
    
    .navbar-nav .nav-link {
        padding: 10px 0;
        font-size: 1rem;
    }

    .custom-navbar .container {
        padding: 0 15px;
    }

    .navbar-brand img.logo {
        width: 120px;
    }
}

@media (max-width: 576px) {
    .navbar-brand img.logo {
        width: 100px;
        height: 100px;
    }

    .navbar-toggler {
        padding: 5px;
    }
}

/* Hero section */
@media (max-width: 768px) {
    .hero-sec {
        min-height: 40vh;
        padding: 20px;
    }

    .hero-head p {
        font-size: 46px;
    }

    .hero-head span {
        font-size: 4rem;
    }

    .hero-title p {
        font-size: 1.2rem;
    }

    .hero-btn button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
        .banner-btn {
            width: 100% !important;
        }
        .banner-btn b {
            width: 100%;
            font-size: 0.7rem;
        }   
}

@media (max-width: 576px) {
    
    .hero-head p {
        font-size: 46px;
        line-height: 100%;
         
    }

    .hero-head span {
        font-size: 2.5rem;
    }

    .hero-title p {
        font-weight: 300;
        font-size: 1.5rem;
    }
    .test-block{
        border: none !important;
    }
}






/* Stats section */
@media (max-width: 768px) {
    .row.p-5.text-center .col-md-3 {
        margin-bottom: 30px;
    }

    .row.p-5.text-center img {
        width: 80px;
        height: 80px;
    }

    .row.p-5.text-center .fs-2 {
        font-size: 1.2rem !important;
    }
}

/* Services section */
@media (max-width: 992px) {
    #service .row.gap-5 {
        gap: 2rem !important;
        
    }

    #service .col-sm {
        
        max-width: 50%;
    }

    #service .w-75 {
        width: 100% !important;
    }

    #service .service-img {
        width: 100%;
        height: 140px;
        
    }

    #service .services-title p {
        font-size: 1rem;
    }

    #service .fs-4 {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 576px) {
    #service .service-head {
        font-size: 1.8rem;
    }

    #service .service-descp {
        font-size: 0.9rem;
    }
    .service-img{
        width:80%;
    }

    
}

/* Gallery section */
@media (max-width: 992px) {
    #gallery .ms-3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #gallery .img1,
    #gallery .img2,
    #gallery .img3,
    #gallery .img4,
    #gallery .img5,
    #gallery .img6,
    #gallery .img7,
    #gallery .img8,
    #gallery .img9,
    #gallery .img10,
    #gallery .img11,
    #gallery .img12,
    #gallery .img13,
    #gallery .img14,
    #gallery .img15,
    #gallery .img16 {
        position: static !important;
        margin: 10px;
    }

    

    #gallery .position-relative {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 576px) {
    #gallery .contact-head {
        font-size: 1.8rem;
    }

    #gallery .contact-title {
        font-size: 1.2rem;
    }

    #gallery .contact-descp {
        font-size: 0.9rem;
    }
}

/* Why Choose Us section */
@media (max-width: 768px) {
    .wcu-head p {
        font-size: 1.8rem;
    }

    .wcu-descp {
        font-size: 1.2rem;
    }

    .wcu-text {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }
}

/* Testimonials section */
@media (max-width: 992px) {
    #testimonial .d-flex {
        flex-direction: column;
        align-items: center;
    }

    #testimonial .p-0 img {
        width: 100%;
        max-width: 350px;
        height: auto;
        margin-bottom: 10px;
    }

    #testimonial .testimonial-head {
        font-size: 2.5rem;
        font-weight: 700;
        text-align: center;
    }

    #testimonial .testi-descp {
        font-size: 1rem;
    }
        #testimonial .testi-head{
            width: 100%;
       font-size: 1.3rem;
    }
    
}

/* Our Other Brands section */
@media (max-width: 992px) {
    .brands-head p {
        font-size: 1.8rem;
    }
    .brands{
        flex-direction: column;
        
    }
    .brands .img-bg{
        padding: 0px 10%;
    }
    .row.mt .col {
        margin-bottom: 30px;
        
    }

    .row.mt .img-fluid {
        width: 100%;
        max-width: 300px;
        height: 50%;
        
    }
    .brands-text{
        width: 100% !important;
    }

    .row.mt .text-center.w-50 {
        width: 100% !important;
        font-size: 0.9rem;
    }

}

/* Contact section */
@media (max-width: 992px) {
    #contact .row.d-flex.justify-content-center .col {
        margin-bottom: 30px;
    }
    .contacts{
        flex-direction: column;
    }
    #contact .contact-details img {
        width: 80px;
        height: 80px;
    }

    #contact .contact-details p {
        font-size: 1.3rem;
    }

    #contact .contact-head {
        font-size: 1.8rem;
    }

    #contact .contact-title {
        font-size: 1.2rem;
    }

    #contact .contact-descp {
        font-size: 0.9rem;
    }
    .map-img{
        width: 100%;
        height: auto;
        max-width: 500px;
    }
}

/* Contact form */
@media (max-width: 768px) {
    .contact-us .col-sm-5 {
        margin: 20px !important;
    }
        .form-container{
            width: 90%;
        }
    .form-container .form-control,
    .form-container .form-select {
        font-size: 0.9rem;
    }

    .form-container .btn {
        width: 50% !important;
        font-size: 0.9rem;
    }
}

/* Footer */
@media (max-width: 992px) {

    .footer .row .col-md-5,
    .footer .row .col-md-4,
    .footer .row .col-md-3 {
        margin-bottom: 30px;
        text-align: center;
    }

    .footer img.fs-1 {
        width: 100%;
        height: auto;
    }
    .follow-us{
        
        flex-direction: row;
        width: 50px;
       
    }
    .follow-us img{
        width: 50px;
        padding: 0%;
        margin: 0%;
    }

    .footer p[style*="font-size: 32px"] {
        font-size: 1.5rem !important;
    }

    .footer p[style*="font-size: 24px"] {
        font-size: 1.2rem !important;
    }

    .footer .quick-links li {
        font-size: 0.9rem;
    }

    
}

@media (max-width: 576px) {
    .footer img.fs-1 {
        width: 120px;
    }

    .footer p[style*="font-size: 32px"] {
        font-size: 1.2rem !important;
    }

    .footer .row.w-100 .col-md-2 {
        flex: 0 0 50%;
        max-width: 50%;
    } }



        @media (max-width: 768px) {
            .img-testi {
                padding: 20px;
                aspect-ratio: 4 / 3;
            }
        }
    
        @media (max-width: 576px) {
            .img-testi {
                aspect-ratio: 4 / 3;
            } }



    @media screen and (min-width: 227px) and (max-width: 527px) {
        .profile-img {
                max-width: 300px;
                margin-top: -91px;
            }
        
            .about-head {
                margin-top: -200px;
                font-size: 1rem;
                margin-left: 150px;
            }
        
            .about-legacy {
                font-size: 1.75rem;
                margin-left: 150px;
            }
        
            .lagacy-descp {
                font-size: 1rem;
                margin-left: 150px;
            }
        
            .about-text {
                font-size: 1rem;
            padding: 20px;   }
    }
    
    
    @media screen and (min-width: 527px) and (max-width: 768px) {
        .profile-img {
                width: 50%;
                position: absolute;
                top: 378px;
                left: 0;
                z-index: 1;
            }
        
            .about-head {
                top:0%;
                text-align: center;
                font-size: 1.2rem;
            }
        
            .about-legacy {
                width: 100%;
                margin-right: 200px;
                text-align: center;
                font-size: 2rem;
            }
        
            .lagacy-descp {
                width: 100%;
                margin-right: 200px;
                text-align: center;
                font-size: 1.25rem;
            }
        
            .about-text {
                
                font-size: 1.2rem;   }
            }
       
    @media screen and (min-width:768px) and (max-width:992px) {
        .profile-img {
            
               width: 50%;
                position: absolute;
                top: 128px;
                left: 0;
                z-index: 1;
            }
        
            .about-container {
                min-height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
        
            .about-head {
                font-size: 1.3rem;
                text-align: center;
            }
        
            .about-legacy {
                font-size: 2.5rem;
            }
        
            .lagacy-descp {
                font-size: 1.4rem;
            }
        
            .about-text {
                font-size: 1.3rem;   }
    }
    @media screen and (min-width: 992px) and (max-width: 1200px) {
        .profile-img {
            width: 50%;
                
                position: absolute;
                top: 364px;
                left: 0;
                z-index: 1;
            }
        
            .about-head {
                font-size: 1.4rem;
            }
        
            .about-legacy {
                font-size: 3rem;
            }
        
            .lagacy-descp {
                font-size: 1.5rem;
            }
        
            .about-text {
                font-size: 1.4rem;   }
        
    }


    @media screen and (min-width: 1200px) and (max-width: 1400px) {
        .profile-img {
                width: auto;
                height: auto;
                position: absolute;
                top: 285px;
                left: 0;
                z-index: 1;       }
        
    }


    @media screen and (min-width: 1400px) and (max-width: 1800px) {
        .profile-img {
                
                position: absolute;
                top: 415px;
                
                z-index: 1;
            }
        
    }


    @media screen and (min-width: 1800px) and (max-width: 2400px) {
        
    }


    @media screen and (min-width: 2400px) and (max-width: 3200px) {
        
    }