/*==================================================
RESPONSIVE.CSS
Speedway Tours & Guide
==================================================*/

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

@media (max-width:992px){

.header{
    height:75px;
}

.header .container{
    height:75px;
}

.logo img{
    width:50px;
    height:50px;
}

.main-logo{
    font-size:24px;
}

.sub-logo{
    font-size:10px;
    letter-spacing:3px;
}

/*==========================
MENU BUTTON
==========================*/

#menu-btn{
    display:block;
    font-size:28px;
    color:#0d6efd;
    cursor:pointer;
    z-index:1001;
}

/*==========================
NAVBAR
==========================*/

.navbar{
    position:fixed;
    top:75px;
    right:-100%;
    width:300px;
    height:calc(100vh - 75px);
    background:#fff;
    overflow-y:auto;
    padding:30px;
    transition:.35s ease;
    box-shadow:-10px 0 35px rgba(0,0,0,.12);
    z-index:9999;
}

.navbar.active{
    right:0;
}

.navbar ul{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.navbar ul li{
    width:100%;
}

.navbar ul li a{
    display:block;
    padding:12px 0;
    border-bottom:1px solid #eee;
}

/*==========================
MOBILE LOGIN
==========================*/

.mobile-login{
    display:block;
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid #ddd;
}

.mobile-login a{
    display:block;
    padding:12px 0;
    color:#333;
    font-weight:500;
}

.mobile-login a i{
    width:24px;
    color:#0d6efd;
}

/*==========================
HEADER BUTTONS
==========================*/

.header-buttons{
    display:none;
}

}
/* ===========================
   MOBILE LOGIN (Show on Mobile)
=========================== */

@media (max-width:992px){

    .mobile-login{
        display:block;
        margin-top:20px;
        padding-top:20px;
        border-top:1px solid #ddd;
    }

    .mobile-login a{
        display:block;
        padding:12px 0;
        text-decoration:none;
        color:#333;
        font-weight:500;
    }

    .mobile-login a i{
        width:24px;
        color:#0d6efd;
    }

    .header-buttons{
        display:none;
    }

}
/* =====================================
   TABLET (992px and below)
===================================== */

@media (max-width:992px){

    .search-box form{
        grid-template-columns:1fr 1fr;
        gap:15px;
    }

    .hero-content{
        margin:auto;
        text-align:center;
    }

    .hero-buttons{
        justify-content:center;
    }

    .about .container,
    .contact-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .feature-grid,
    .service-grid,
    .destination-grid,
    .package-grid,
    .gallery-grid,
    .testimonial-grid,
    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/* =====================================
   MOBILE (768px and below)
===================================== */

@media (max-width:768px){

    section{
        padding:70px 0;
    }

    .hero{
        min-height:90vh;
    }

    .hero-content{
        width:100%;
        text-align:center;
        margin:0;
    }

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

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

    .search-box{
        margin-top:-30px;
    }

    .search-box form{
        grid-template-columns:1fr;
    }

    .feature-grid,
    .service-grid,
    .destination-grid,
    .package-grid,
    .gallery-grid,
    .testimonial-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

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

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

    .hero-buttons a,
    .hero-buttons button{
        width:100%;
    }

}

/* =====================================
   SMALL MOBILE (480px and below)
===================================== */

@media (max-width:480px){

    .main-logo{
        font-size:22px;
    }

    .sub-logo{
        font-size:10px;
        letter-spacing:2px;
    }

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

    .hero-content h4{
        font-size:20px;
    }

    .search-box .container{
        padding:15px;
    }

    .book-btn,
    .primary-btn,
    .secondary-btn{
        width:100%;
    }

}
/*==================================================
MOBILE LOGIN MENU FIX
==================================================*/

@media (max-width:992px){

    .navbar .mobile-login{
        display:block !important;
        width:100% !important;
        margin-top:20px;
        padding-top:20px;
        border-top:1px solid #eee;
    }

    .navbar .mobile-login a{
        display:flex !important;
        align-items:center;
        width:100% !important;
        padding:13px 0 !important;
        margin:0 !important;
        color:#222 !important;
        font-size:16px;
        font-weight:600;
        line-height:1.4;
        text-decoration:none !important;
        border-bottom:1px solid #eee;
    }

    .navbar .mobile-login a i{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:30px;
        min-width:30px;
        margin-right:8px;
        color:#0d6efd;
    }

}