/*==================================================
RESPONSIVE CSS
Velocity Motors
==================================================*/


/*==========================================
LARGE DESKTOPS
==========================================*/

@media (min-width:1400px){

.hero-container,
.footer-container,
.vehicle-grid,
.latest-grid,
.why-container,
.services-container{

    max-width:1400px;
    margin:auto;

}

}


/*==========================================
LAPTOPS
==========================================*/

@media (max-width:1200px){

.navbar{

    padding:0 40px;

}

.logo img{

    height:60px;

}

.nav-links{

    gap:30px;

}

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-left{

    max-width:850px;

    margin:auto;

}

.hero-left h1{

    font-size:82px;

}

.hero-text{

    margin:auto;

    max-width:700px;

}

.hero-buttons{

    justify-content:center;

}

.vehicle-grid,
.latest-grid,
.testimonial-grid,
.cars-grid,
.services-container,
.why-grid{

    grid-template-columns:repeat(2,1fr);

}

.finance-section,
.finance-page,
.about-section,
.contact-page{

    grid-template-columns:1fr;

}

.footer-container{

    grid-template-columns:repeat(2,1fr);

}

}
/*==========================================
TABLETS
==========================================*/

@media (max-width:991px){

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

.navbar{

    height:80px;
    padding:0 25px;

}

.logo img{

    height:50px;

}

/*========== HAMBURGER ==========*/

.menu-toggle{

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    z-index:1001;

}

.menu-toggle span{

    width:30px;
    height:3px;
    background:#fff;
    border-radius:20px;
    transition:.35s;

}

/*========== NAVIGATION ==========*/

nav{

    position:absolute;
    top:80px;
    left:0;
    width:100%;

}

.nav-links{

    display:none;
    flex-direction:column;

    width:100%;

    background:#101010;

    padding:30px 0;

    text-align:center;

    gap:25px;

    border-top:1px solid rgba(255,255,255,.08);

}

.nav-links.active{

    display:flex;

}

.nav-links li{

    width:100%;

}

.nav-links a{

    display:block;

    padding:15px;

    font-size:18px;

}

.btn{

    display:none;

}

/*========== HERO ==========*/

.hero{

    min-height:90vh;

}

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

    padding:0 30px;

}

.hero-left h1{

    font-size:70px;

}

.hero-text{

    font-size:18px;

    max-width:100%;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-stats{

    justify-content:center;

    flex-wrap:wrap;

    gap:35px;

}

/*========== GRIDS ==========*/

.vehicle-grid,
.latest-grid,
.testimonial-grid,
.cars-grid,
.services-container,
.why-grid,
.why-container{

    grid-template-columns:1fr;

}

.inventory-top{

    grid-template-columns:1fr;

}

.finance-section,
.finance-page,
.about-section,
.contact-page{

    grid-template-columns:1fr;

}

.footer-container{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-col:first-child{

    padding-left:0;

}

}
/*==========================================
MOBILE PHONES
==========================================*/

@media (max-width:768px){

section{
    padding:70px 6%;
}

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

.navbar{
    height:75px;
    padding:0 20px;
}

.logo img{
    height:42px;
}

nav{
    top:75px;
}

.nav-links{
    padding:25px 0;
}

.nav-links a{
    font-size:17px;
}

/*========== HERO ==========*/

.hero{
    min-height:100vh;
}

.hero-container{
    padding:0 20px;
}

.hero-left h1{
    font-size:52px;
    line-height:1;
}

.hero-tag{
    font-size:12px;
    letter-spacing:3px;
}

.hero-text{
    font-size:17px;
    line-height:1.8;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
    gap:18px;
}

.primary-btn,
.secondary-btn{
    width:100%;
    max-width:300px;
    text-align:center;
}

/*========== CARDS ==========*/

.vehicle-card img,
.latest-card img,
.car-card img,
.image-placeholder{
    height:220px;
}

.vehicle-info,
.latest-info,
.car-info{
    padding:25px;
}

.vehicle-info h3,
.latest-info h3,
.car-info h3{
    font-size:24px;
}

.vehicle-info h4,
.latest-info h4,
.car-info h4{
    font-size:28px;
}

/*========== PAGE HERO ==========*/

.page-hero{
    min-height:45vh;
    padding:120px 20px 70px;
}

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

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

/*========== TITLES ==========*/

.section-title{
    margin-bottom:45px;
}

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

.section-title p{
    font-size:16px;
}

/*========== PAGE LAYOUTS ==========*/

.about-section,
.finance-page,
.contact-page,
.finance-section{
    gap:40px;
}

.about-text h2,
.finance-left h2,
.finance-info h2,
.contact-details h2{
    font-size:40px;
}

/*========== FINANCE CARD ==========*/

.finance-card{
    padding:35px 25px;
}

.finance-card h1{
    font-size:56px;
}

/*========== FOOTER ==========*/

.footer{
    padding:60px 20px 30px;
}

.footer-container{
    gap:40px;
}

.footer-col{
    text-align:center;
}

.footer-col p{
    padding-right:0;
}

.footer-bottom{
    margin-top:30px;
}

.developer-logo{
    width:90px;
}

/*========== INVENTORY ==========*/

.inventory-section{
    padding:40px 6% 80px;
}

.inventory-top{
    gap:15px;
}

.inventory-top input,
.inventory-top select{
    width:100%;
}

}
/*==========================================
SMALL PHONES
==========================================*/

@media (max-width:480px){

.navbar{
    height:70px;
    padding:0 15px;
}

.logo img{
    height:35px;
}

nav{
    top:70px;
}

.menu-toggle span{
    width:28px;
}

.hero{
    min-height:100vh;
}

.hero-container{
    padding:0 15px;
}

.hero-left h1{
    font-size:42px;
    line-height:1.05;
}

.hero-tag{
    font-size:11px;
    letter-spacing:2px;
}

.hero-text{
    font-size:15px;
    line-height:1.7;
}

.primary-btn,
.secondary-btn{
    width:100%;
    max-width:260px;
    padding:15px 25px;
    font-size:15px;
}

.page-hero{
    padding:110px 15px 60px;
}

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

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

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

.section-title p{
    font-size:15px;
}

.vehicle-card img,
.latest-card img,
.car-card img,
.image-placeholder{
    height:190px;
}

.vehicle-info,
.latest-info,
.car-info{
    padding:20px;
}

.vehicle-info h3,
.latest-info h3,
.car-info h3{
    font-size:22px;
}

.vehicle-info h4,
.latest-info h4,
.car-info h4{
    font-size:24px;
}

.finance-card h1{
    font-size:46px;
}

.footer{
    padding:50px 15px 25px;
}

.footer-container{
    gap:30px;
}

.footer-col h3{
    font-size:24px;
}

.footer-col p,
.footer-col a{
    font-size:15px;
}

.footer-bottom{
    text-align:center;
}

.developer-logo{
    width:80px;
}

}


/*==========================================
LANDSCAPE PHONES
==========================================*/

@media (max-height:600px) and (orientation:landscape){

.hero{
    min-height:130vh;
}

.page-hero{
    min-height:70vh;
}

}