/* ===========================================
   RESPONSIVE.CSS
   Mobile First Responsive
=========================================== */

/* Laptop Besar (1400px ke bawah) */
@media (max-width:1400px){

.container,
nav{
    width:92%;
}

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

}

/* Laptop (1200px ke bawah) */
@media (max-width:1200px){

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

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

.cards,
.grid,
.armada,
.gallery{

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

}

.about{

grid-template-columns:1fr;

}

}

/* Tablet (992px ke bawah) */
@media (max-width:992px){

nav{

flex-direction:column;
gap:20px;

}

nav ul{

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

}

.hero{

height:75vh;

}

.hero h1{

font-size:40px;

}

.hero p{

font-size:17px;

}

section{

padding:70px 6%;

}

.title h2{

font-size:34px;

}

.grid,
.cards,
.armada,
.gallery{

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

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

/* HP Besar (768px ke bawah) */
@media (max-width:768px){

header{

position:relative;

}

nav{

flex-direction:column;
padding:20px 0;

}

nav ul{

flex-direction:column;
align-items:center;

}

.hero{

height:65vh;
padding:20px;

}

.hero h1{

font-size:34px;
line-height:1.4;

}

.hero p{

font-size:16px;

}

.btn{

padding:12px 28px;
font-size:15px;

}

.title h2{

font-size:30px;

}

.title p{

font-size:15px;

}

.grid,
.cards,
.armada,
.gallery{

grid-template-columns:1fr;

}

.about{

grid-template-columns:1fr;

}

.about img{

margin-bottom:30px;

}

table{

display:block;
overflow-x:auto;
white-space:nowrap;

}

.contact{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

iframe{

height:300px;

}

}

/* HP Sedang (576px ke bawah) */
@media (max-width:576px){

.hero{

height:60vh;

}

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

}

.logo{

font-size:24px;

}

section{

padding:60px 20px;

}

.title h2{

font-size:26px;

}

.card,
.armada-card{

padding:20px;

}

.card h3{

font-size:22px;

}

.card p{

font-size:14px;

}

.btn{

width:100%;
text-align:center;

}

input,
textarea,
select{

font-size:14px;
padding:14px;

}

button{

width:100%;

}

}

/* HP Kecil (400px ke bawah) */
@media (max-width:400px){

.hero h1{

font-size:24px;

}

.hero p{

font-size:14px;

}

.title h2{

font-size:22px;

}

.logo{

font-size:22px;

}

nav ul li a{

font-size:14px;

}

.btn{

font-size:14px;

padding:12px 18px;

}

}

/* Layar Sangat Lebar */
@media (min-width:1600px){

.container,
nav{

max-width:1500px;
margin:auto;

}

.hero h1{

font-size:64px;

}

.hero p{

font-size:22px;

}

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

.section-title h2{

font-size:32px;

}

.promo{

padding:70px 20px;

}

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

.rute{

padding:70px 20px;

}

.rute-grid{

grid-template-columns:1fr;

}

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

.keunggulan{

padding:70px 20px;

}

.keunggulan-grid{

grid-template-columns:1fr;

}

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

.armada-home{

padding:70px 20px;

}

.armada-grid{

grid-template-columns:1fr;

}

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

.jadwal-home{

padding:70px 20px;

}

.jadwal-table table{

font-size:14px;

}

.jadwal-table th,
.jadwal-table td{

padding:12px;

}

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

.berita{

padding:70px 20px;

}

.berita-grid{

grid-template-columns:1fr;

}

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

.testimoni{

padding:70px 20px;

}

.testimoni-grid{

grid-template-columns:1fr;

}

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

.cta{

padding:70px 20px;

}

.cta-content h2{

font-size:32px;

}

.cta-content p{

font-size:16px;

}

.cta-button{

flex-direction:column;

align-items:center;

}

.btn-wa,
.btn-outline{

width:100%;

max-width:320px;

text-align:center;

}

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

.footer{

padding:50px 20px 20px;

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

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

.hero{

text-align:center;

justify-content:center;

padding:20px;

}

.hero-content{

max-width:100%;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.hero-button{

justify-content:center;

}

}