@media (max-width: 992px) {
    .caption h1 {
        font-size: 42px;
    }

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

@media (max-width: 768px) {
    nav {
        flex-direction: column;
    }

    nav ul {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    nav ul li {
        margin: 10px 15px;
    }

    .caption {
        left: 5%;
        max-width: 90%;
    }

    .caption h1 {
        font-size: 32px;
    }

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

    .btn {
        padding: 12px 25px;
    }

    .prev, .next {
        font-size: 28px;
    }
}
/* ======================================
   HUANGCHAN CONSTRUCTION
   RESPONSIVE DESIGN
====================================== */


/* ================================
   LARGE TABLETS / SMALL LAPTOPS
================================ */


@media(max-width:1100px){


nav{

    width:95%;

}


.caption h1{

    font-size:48px;

}


.caption p{

    font-size:18px;

}


/* Statistics */

.stats{

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

}



/* Services */

.service-grid{

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

}



/* Industries */

.industry-grid{

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

}


/* Projects */

.project-grid{

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

}



/* Why */

.why-grid{

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

}



.news-grid{

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

}


}





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


@media(max-width:768px){


header{

    position:absolute;

}


/* Navigation */

nav{

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

}


.logo{

    margin-bottom:15px;

}


nav ul{

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

}


nav ul li{

    margin:8px 15px;

}




/* Slider */

.slider{

    height:90vh;

}


.caption{

    left:5%;
    right:5%;
    text-align:center;

}


.caption h1{

    font-size:38px;

}


.caption p{

    font-size:16px;

}



/* Buttons */

.btn{

    padding:12px 25px;

}



/* Company */

.company-intro h2{

    font-size:32px;

}



/* Statistics */


.stats{

    grid-template-columns:1fr;
    padding:50px 20px;

}


.stat h2{

    font-size:38px;

}



/* Services */


.service-grid{

    grid-template-columns:1fr;

}


.service-card img{

    height:250px;

}



/* Industries */


.industry-grid{

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

}



/* Projects */


.project-grid{

    grid-template-columns:1fr;

}



/* Mining */


.mining h2{

    font-size:32px;

}


/* Why */


.why-grid{

    grid-template-columns:1fr;

}


/* News */


.news-grid{

    grid-template-columns:1fr;

}



/* Footer */


.footer-grid{

    grid-template-columns:1fr;
    text-align:center;

}



}





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


@media(max-width:480px){



.logo{

    font-size:26px;

}



nav ul{

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

}



nav ul li{

    margin:7px 0;

}



.slider{

    height:85vh;

}



.caption h1{

    font-size:30px;

}


.caption p{

    font-size:15px;

}



.section-title h2{

    font-size:30px;

}



.company-intro{

    padding:60px 20px;

}



.company-intro p{

    font-size:16px;

}



.stats{

    padding:40px 15px;

}



.stat h2{

    font-size:35px;

}



.industry-grid{

    grid-template-columns:1fr;

}



.service-card img{

    height:200px;

}



.mining{

    background-position:center;

}



.mining p{

    font-size:16px;

}



.careers-home h2{

    font-size:30px;

}



.cta h2{

    font-size:30px;

}


footer{

    padding-top:40px;

}



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


.timeline:before{

left:20px;

}


.timeline-item{

display:block;
padding-left:50px;

}


.year{

width:90px;
height:90px;

font-size:20px;

}


.timeline-content{

width:100%;
margin-top:20px;

}


.page-banner h1{

font-size:38px;

}


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


.leader-grid{

grid-template-columns:1fr;

}


.leader-card img{

height:300px;

}


}