/*==================================================
RESPONSIVE.CSS
Toyota Landing Page 2026
==================================================*/

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

@media(max-width:1200px){

.container{

    width:95%;

}

.hero-content h1{

    font-size:50px;

}

.section-title h2{

    font-size:38px;

}

}

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

@media(max-width:992px){

.header .container{

    height:75px;

}

.navbar{

    position:fixed;

    top:75px;

    left:-100%;

    width:280px;

    height:100vh;

    background:#fff;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:40px 30px;

    gap:25px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.navbar.active{

    left:0;

}

.menu-toggle{

    display:flex;

}

.btn-header{

    display:none;

}

.hero-container{

    grid-template-columns:1fr;

    gap:50px;

    text-align:center;

}

.hero-content p{

    margin:auto auto 30px;

}

.hero-buttons{

    justify-content:center;

}

.hero-feature{

    justify-content:center;

}

.hero-image{

    max-width:650px;

    margin:auto;

}

.promo-banner{

    grid-template-columns:1fr;

}

.promo-right{

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

}

.mobil-grid{

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

}

.why-counter{

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

}

.why-grid{

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

}

.testimoni-grid{

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

}

.contact-grid{

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

}

}

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

@media(max-width:768px){

section{

    padding:70px 0;

}

.hero{

    padding-top:130px;

}

.hero-content h1{

    font-size:40px;

}

.hero-content p{

    font-size:15px;

}

.section-title h2{

    font-size:32px;

}

.hero-feature{

    flex-direction:column;

}

.promo-banner{

    padding:30px;

}

.promo-left h3{

    font-size:30px;

}

.promo-right{

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

}

.mobil-grid{

    grid-template-columns:1fr;

}

.why-counter{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.why-cta{

    padding:45px 25px;

}

.why-cta h3{

    font-size:30px;

}

.cta h2{

    font-size:36px;

}

.cta-button{

    flex-direction:column;

}

.testimoni-grid{

    grid-template-columns:1fr;

}

#waForm{

    padding:30px;

}

.contact-grid{

    grid-template-columns:1fr;

}

.footer-social{

    gap:15px;

}

}

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

@media(max-width:576px){

.logo img{

    width:135px;

}

.hero-content h1{

    font-size:33px;

}

.hero-tag{

    font-size:13px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons a{

    width:100%;

}

.hero-feature div{

    padding:18px;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:28px;

}

.section-title p{

    font-size:14px;

}

.promo-left h3{

    font-size:25px;

}

.promo-item{

    padding:25px 15px;

}

.promo-item i{

    width:60px;

    height:60px;

    font-size:24px;

}

.mobil-card img{

    height:210px;

}

.mobil-card h3{

    font-size:22px;

}

.harga{

    font-size:22px;

}

.counter-box h3{

    font-size:34px;

}

.why-card{

    padding:28px 22px;

}

.why-icon{

    width:70px;

    height:70px;

}

.why-icon i{

    font-size:28px;

}

.cta{

    padding:70px 0;

}

.cta h2{

    font-size:30px;

}

.cta p{

    font-size:15px;

}

.avatar{

    width:75px;

    height:75px;

}

.avatar i{

    font-size:30px;

}

.testimoni-card{

    padding:28px;

}

.faq-item{

    padding:22px;

}

.faq-item h3{

    font-size:18px;

}

#waForm{

    padding:25px;

}

#waForm button{

    width:100%;

}

.foto-sales{

    width:150px;

    height:150px;

}

.contact-card{

    padding:30px 20px;

}

.footer{

    padding:60px 0 30px;

}

.footer-logo{

    width:140px;

}

.footer-social a{

    width:45px;

    height:45px;

}

}

/*==================================
400px
==================================*/

@media(max-width:400px){

.hero-content h1{

    font-size:28px;

}

.section-title h2{

    font-size:24px;

}

.promo-right{

    grid-template-columns:1fr;

}

.hero-feature h3{

    font-size:26px;

}

.counter-box h3{

    font-size:30px;

}

.why-cta h3{

    font-size:24px;

}

.cta h2{

    font-size:26px;

}

.floating-social{

    right:12px;

    bottom:15px;

}

.floating-social a{

    width:48px;

    height:48px;

    font-size:20px;

}

}
@media(max-width:768px){

.hero{

flex-direction:column;
text-align:center;
padding:100px 25px 60px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.hero-rating{

justify-content:center;
flex-wrap:wrap;
gap:20px;

}

.hero-button{

justify-content:center;

}

.hero-image img{

max-width:100%;

}

}
@media(max-width:768px){

.hero{
    min-height:100vh;
    text-align:center;
    padding:120px 20px 80px;
}

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

.hero-content{
    max-width:100%;
}

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

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

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

}
@media(max-width:768px){

.hero{

text-align:center;

padding:120px 20px 80px;

}

.hero-container{

flex-direction:column;

}

.hero h1{

font-size:40px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-info{

justify-content:center;

}

.hero-image{

margin-top:30px;

}

.hero-image img{

width:100%;

max-width:420px;

}

}
@media(max-width:992px){

.nav-menu{

display:none;

}

.btn-header{

display:none;

}

.menu-toggle{

display:flex;

}

.logo img{

height:42px;

}

}