/*=========================================
    SPEED EV+
    RESPONSIVE.CSS
==========================================*/


/*==============================
1400px
==============================*/

@media (max-width:1400px){

.container{
    width:95%;
}

.hero h1{
    font-size:60px;
}

.car-wrapper{
    width:600px;
}

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

}


/*==============================
1200px
==============================*/

@media (max-width:1200px){

.hero h1{
    font-size:54px;
}

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

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

.gallery-grid{
    gap:20px;
}

.car-wrapper{
    width:520px;
}

.charging-area{
    gap:80px;
}

.countdown .box{
    width:130px;
    height:130px;
}

.countdown span{
    font-size:44px;
}

}


/*==============================
992px
==============================*/

@media (max-width:992px){

section{
    padding:90px 0;
}

.hero{
    min-height:auto;
    padding:120px 0;
}

.hero h1{
    font-size:46px;
}

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

.logo{
    width:180px;
}

.charging-area{

    flex-direction:column;

    align-items:center;

    gap:50px;

}

.car-wrapper{
    width:90%;
}

.charger{
    order:-1;
}

.battery{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    margin-bottom:40px;
}

.video-section video{
    border-radius:16px;
}

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

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

.cm-group .container{
    padding:50px 30px;
}

}


/*==============================
768px
==============================*/

@media (max-width:768px){

h1{
    font-size:38px;
}

h2{
    font-size:34px;
}

h3{
    font-size:22px;
}

p{
    font-size:15px;
}

.hero{
    padding:100px 0 70px;
}

.logo{
    width:160px;
}

.mini-title{
    font-size:14px;
    letter-spacing:3px;
}

.countdown{

    gap:15px;

}

.countdown .box{

    width:110px;

    height:110px;

}

.countdown span{

    font-size:34px;

}

.notify-btn{

    padding:15px 40px;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-grid img{

    height:260px;

}

.feature-grid{

    grid-template-columns:1fr;

}

.feature-card{

    padding:30px 25px;

}

.car-wrapper{

    width:100%;

}

.wheel{

    display:none;

}

.charging-wire{

    display:none;

}

.video-section video{

    border-radius:14px;

}

.cm-group img{

    max-width:100%;

}

.footer-logo{

    width:140px;

}

}


/*==============================
576px
==============================*/

@media (max-width:576px){

.container{
    width:92%;
}

.hero h1{

    font-size:32px;

}

.hero p{

    margin:25px auto;

}

.countdown{

    display:grid;

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

}

.countdown .box{

    width:100%;

    height:100px;

}

.countdown span{

    font-size:30px;

}

.notify-btn{

    width:100%;

    text-align:center;

}

.battery{

    width:100%;

    max-width:280px;

}

.car-wrapper{

    margin-top:20px;

}

.car-section{

    padding:70px 0;

}

.gallery-grid img{

    height:220px;

}

.cm-group .container{

    padding:35px 20px;

}

.cm-group h3{

    font-size:26px;

}

section{

    padding:70px 0;

}

}


/*==============================
420px
==============================*/

@media (max-width:420px){

.hero h1{

    font-size:28px;

}

h2{

    font-size:28px;

}

.logo{

    width:140px;

}

.countdown{

    gap:10px;

}

.countdown .box{

    height:90px;

}

.countdown span{

    font-size:26px;

}

.countdown small{

    font-size:12px;

}

.feature-card{

    padding:25px 20px;

}

.feature-card h3{

    font-size:20px;

}

.gallery-grid img{

    height:200px;

}

.video-section video{

    border-radius:10px;

}

footer{

    padding:40px 20px;

}

.footer-logo{

    width:120px;

}

}


/*==============================
360px
==============================*/

@media (max-width:360px){

.hero h1{

    font-size:24px;

}

.hero p{

    font-size:14px;

}

.countdown{

    grid-template-columns:1fr;

}

.countdown span{

    font-size:28px;

}

.notify-btn{

    padding:14px 20px;

    font-size:15px;

}

.mini-title{

    font-size:12px;

}

}