/* ==================================================
   TOPCABS HYDERABAD WEBSITE
   RESPONSIVE STYLESHEET
================================================== */


/* ==================================================
   TABLET DEVICES
   SCREEN SIZE : 991px AND BELOW
================================================== */

@media (max-width: 991px) {

    /* ----------------------------------------------
       HEADER
    ---------------------------------------------- */

    .navbar {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    /* ----------------------------------------------
       HERO SECTION
    ---------------------------------------------- */

    .hero-wrapper {
        grid-template-columns: 1fr;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    /* ----------------------------------------------
       STATS SECTION
    ---------------------------------------------- */

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ----------------------------------------------
       WHY CHOOSE TOPCABS
    ---------------------------------------------- */

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ----------------------------------------------
       SERVICES SECTION
    ---------------------------------------------- */

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ----------------------------------------------
       FLEET SECTION
    ---------------------------------------------- */

    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ----------------------------------------------
       SERVICE KEYWORDS
    ---------------------------------------------- */

    .service-keywords-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ----------------------------------------------
       TESTIMONIALS
    ---------------------------------------------- */

    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    /* ----------------------------------------------
       CONTACT SECTION
    ---------------------------------------------- */

    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ----------------------------------------------
       FOOTER
    ---------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==================================================
   MOBILE DEVICES
   SCREEN SIZE : 768px AND BELOW
================================================== */

@media (max-width: 768px) {

    /* ----------------------------------------------
       HEADER
    ---------------------------------------------- */

    .call-btn {
        display: none;
    }

    /* ----------------------------------------------
       HERO SECTION
    ---------------------------------------------- */

    .hero {
        padding: 130px 0 80px;
    }

    .hero-content h1 {
        font-size: 34px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-features {
        flex-direction: column;
        gap: 10px;
    }

    .page-hero{
    padding:120px 0 60px;
    }

    .page-hero h1{
    font-size:34px;
    }
    
    /* ----------------------------------------------
       COMMON SECTION TITLES
    ---------------------------------------------- */

    .section-title h2 {
        font-size: 30px;
    }

    /* ----------------------------------------------
       STATS SECTION
    ---------------------------------------------- */

    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* ----------------------------------------------
       WHY CHOOSE TOPCABS
    ---------------------------------------------- */

    .why-grid {
        grid-template-columns: 1fr;
    }

    /* ----------------------------------------------
       FLEET SECTION
    ---------------------------------------------- */

    .fleet-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .fleet-card {
        padding: 20px;
    }

    /* ----------------------------------------------
       SOLUTIONS SECTION
    ---------------------------------------------- */

    .solutions-grid {
        grid-template-columns: 1fr;
    }

    /* ----------------------------------------------
       SERVICE KEYWORDS
    ---------------------------------------------- */

    .service-keywords-grid {
        grid-template-columns: 1fr;
    }

    /* ----------------------------------------------
       CTA SECTION
    ---------------------------------------------- */

    .cta-box h2 {
        font-size: 34px;
    }

    /* ----------------------------------------------
       CONTACT SECTION
    ---------------------------------------------- */

    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* ----------------------------------------------
       FOOTER
    ---------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* ==================================================
   SMALL MOBILE DEVICES
   SCREEN SIZE : 576px AND BELOW
================================================== */

@media (max-width: 576px) {

    /* ----------------------------------------------
       GLOBAL
    ---------------------------------------------- */

    .container {
        width: 92%;
    }

    /* ----------------------------------------------
       HERO SECTION
    ---------------------------------------------- */

    .hero-content h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .hero-content p {
        font-size: 15px;
    }

    .hero-badge {
        font-size: 13px;
    }

    .page-hero h1{
    font-size:28px;
    }

    .page-hero p{
    font-size:15px;
    }

    .page-hero .btn-primary,
    .page-hero .btn-secondary{
    display:block;
    margin:10px auto;
    width:220px;
    }
    
    /* ----------------------------------------------
       BUTTONS
    ---------------------------------------------- */

    .btn-primary,
    .btn-secondary {
        text-align: center;
    }

    /* ----------------------------------------------
       BOOKING FORM
    ---------------------------------------------- */

    .booking-card {
        padding: 25px;
    }
}


/* ==================================================
   EXTRA SMALL DEVICES
   SCREEN SIZE : 480px AND BELOW
================================================== */

@media (max-width: 480px) {

    /* ----------------------------------------------
       FLEET SECTION
    ---------------------------------------------- */

    .fleet-grid {
        grid-template-columns: 1fr;
    }

    /* ----------------------------------------------
       SERVICES SECTION
    ---------------------------------------------- */

   
    .services-grid {
        grid-template-columns: 1fr;
    }
    
}