/* =====================================================
   responsive.css
   Responsive Layout Garuda4D Promo
===================================================== */

/* ===========================
   Laptop Kecil (1200px)
=========================== */

@media screen and (max-width:1200px){

.container{
    width:95%;
}

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

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

.promo-grid{
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.banner img{
    height:auto;
}

}

/* ===========================
   Tablet Landscape (992px)
=========================== */

@media screen and (max-width:992px){

.header-area{

    flex-direction:column;
    gap:20px;

}

nav ul{

    justify-content:center;
    flex-wrap:wrap;

}

.hero{

    padding:40px 0;

}

.hero h1{

    font-size:32px;

}

.section-title h2{

    font-size:28px;

}

.section-title p{

    font-size:16px;

}

.marquee-content{

    font-size:16px;

}

.promo-grid{

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

}

.detail-title{

    font-size:30px;

}

.detail-content{

    font-size:16px;

}

}

/* ===========================
   Tablet Portrait (768px)
=========================== */

@media screen and (max-width:768px){

.logo{

    width:180px;

}

.hero{

    padding:30px 0;

}

.hero h1{

    font-size:28px;
    line-height:1.3;

}

.banner{

    border-radius:10px;

}

.banner img{

    width:100%;

}

.marquee{

    padding:10px;

}

.marquee-content{

    font-size:15px;

}

.section-title{

    margin-bottom:30px;

}

.section-title h2{

    font-size:24px;

}

.section-title p{

    font-size:15px;

}

.promo-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.promo-card{

    border-radius:12px;

}

.promo-image img{

    height:220px;

}

.promo-content{

    padding:20px;

}

.promo-content h3{

    font-size:20px;

}

.detail-title{

    font-size:26px;

}

.detail-image img{

    border-radius:10px;

}

.detail-content{

    font-size:15px;

}

.footer-content{

    grid-template-columns:1fr;

    text-align:center;

}

}

/* ===========================
   Mobile Besar (576px)
=========================== */

@media screen and (max-width:576px){

.container{

    width:94%;

}

.hero h1{

    font-size:24px;

}

.logo{

    width:150px;

}

.marquee-content{

    font-size:14px;

}

.banner{

    margin-top:20px;

}

.banner img{

    border-radius:8px;

}

.promo-image img{

    height:200px;

}

.promo-content{

    padding:18px;

}

.promo-content h3{

    font-size:18px;

    line-height:1.5;

}

.tanggal{

    font-size:14px;

}

.promo-content p{

    font-size:14px;

}

.btn-read{

    width:100%;

    text-align:center;

}

.detail-title{

    font-size:22px;

}

.detail-date{

    font-size:14px;

}

.detail-content{

    font-size:14px;

    line-height:1.8;

}

.scrollTop{

    width:45px;
    height:45px;

    bottom:20px;
    right:20px;

}

}

/* ===========================
   Mobile Kecil (430px)
=========================== */

@media screen and (max-width:430px){

.hero{

    padding:20px 0;

}

.hero h1{

    font-size:20px;

}

.logo{

    width:130px;

}

.section-title h2{

    font-size:22px;

}

.section-title p{

    font-size:14px;

}

.marquee-content{

    font-size:13px;

}

.promo-image img{

    height:180px;

}

.promo-content{

    padding:15px;

}

.promo-content h3{

    font-size:17px;

}

.btn-read{

    font-size:14px;

    padding:12px;

}

.detail-title{

    font-size:20px;

}

.detail-content{

    font-size:14px;

}

.overlay button{

    padding:10px 20px;

    font-size:14px;

}

}

/* ===========================
   Mobile Sangat Kecil (360px)
=========================== */

@media screen and (max-width:360px){

.logo{

    width:120px;

}

.hero h1{

    font-size:18px;

}

.section-title h2{

    font-size:20px;

}

.marquee-content{

    font-size:12px;

}

.promo-image img{

    height:170px;

}

.promo-content h3{

    font-size:16px;

}

.btn-read{

    font-size:13px;

}

.detail-title{

    font-size:18px;

}

.detail-content{

    font-size:13px;

}

}

/* ===========================
   Monitor Besar (1600px+)
=========================== */

@media screen and (min-width:1600px){

.container{

    max-width:1500px;

}

.hero h1{

    font-size:52px;

}

.section-title h2{

    font-size:42px;

}

.promo-grid{

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

}

.promo-image img{

    height:280px;

}

}