/*=========================================================
    responsive.css
    National Engineering College SDG Website
=========================================================*/

/*==============================
        LARGE DEVICES
==============================*/

@media (max-width:1200px){

.container{
    width:95%;
}

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

.hero-overlay h2{
    font-size:28px;
}

}

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

@media (max-width:992px){

header{

    flex-direction:column;

    align-items:center;

    padding:20px;

}

.logo{

    margin-bottom:20px;

}

.logo img{

    width:220px;

}

nav ul{

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

}

.hero{

    height:75vh;

}

.hero-overlay{

    padding:40px;

}

.hero-overlay h1{

    font-size:42px;

}

.hero-overlay h2{

    font-size:24px;

}

.hero-overlay p{

    font-size:18px;

}

h1{

    font-size:36px;

}

h2{

    font-size:30px;

}

.cards{

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

}

.sdg-map{

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

}

.counter-wrapper{

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

}

.footer-container{

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

}

}

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

@media (max-width:768px){

header{

    position:relative;

}

.logo img{

    width:180px;

}

nav ul{

    flex-direction:column;

    gap:12px;

}

nav ul li{

    width:100%;

    text-align:center;

}

nav ul li a{

    display:block;

    padding:10px;

}

.home-btn{

    display:inline-block;

    margin-top:8px;

}

.hero{

    height:70vh;

}

.hero-overlay{

    padding:30px 20px;

}

.hero-overlay h1{

    font-size:34px;

    line-height:1.3;

}

.hero-overlay h2{

    font-size:22px;

}

.hero-overlay p{

    font-size:16px;

}

.section{

    padding:60px 0;

}

.container{

    width:92%;

}

h1{

    font-size:30px;

}

h2{

    font-size:28px;

}

h3{

    font-size:22px;

}

p{

    font-size:16px;

}

.card{

    padding:25px;

}

.cards{

    grid-template-columns:1fr;

}

.info-card{

    padding:25px;

}

.sdg-map{

    grid-template-columns:1fr;

}

.counter-wrapper{

    grid-template-columns:1fr;

}

.counter{

    font-size:48px;

}

.counter-box{

    padding:30px;

}

.footer-container{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-container p{

    text-align:center;

}

.footer-links ul{

    padding:0;

}

.footer-links li{

    list-style:none;

}

.footer-contact{

    margin-top:20px;

}

}

/*==============================
      SMALL MOBILE
==============================*/

@media (max-width:480px){

.logo img{

    width:150px;

}

.hero{

    height:65vh;

}

.hero-overlay h1{

    font-size:28px;

}

.hero-overlay h2{

    font-size:18px;

}

.hero-overlay p{

    font-size:15px;

}

.btn{

    padding:12px 25px;

    font-size:15px;

}

h1{

    font-size:26px;

}

h2{

    font-size:24px;

}

h3{

    font-size:20px;

}

.card{

    padding:20px;

}

.info-card{

    padding:20px;

}

.counter{

    font-size:42px;

}

.counter-box p{

    font-size:16px;

}

.cta-section h2{

    font-size:28px;

}

.cta-section p{

    font-size:16px;

}

footer{

    padding:50px 0 20px;

}

}

/*==============================
      EXTRA SMALL DEVICES
==============================*/

@media (max-width:360px){

.hero-overlay h1{

    font-size:24px;

}

.hero-overlay h2{

    font-size:16px;

}

.hero-overlay p{

    font-size:14px;

}

.logo img{

    width:130px;

}

.btn{

    width:100%;

    text-align:center;

}

}