/*=========================================
ILNPP WEBSITE
responsive.css
=========================================*/

/* Large Devices (1200px and below) */
@media (max-width:1200px){

.container{
    width:95%;
}

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

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

}

/* Medium Devices (992px and below) */

@media (max-width:992px){

.section{
    padding:70px 0;
}

.header .container{
    height:75px;
}

.hero{
    margin-top:75px;
}

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

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

.about-grid,
.services,
.news-grid,
.footer-grid,
.counter .container,
.gallery{
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.leaders{
    grid-template-columns:repeat(2,1fr);
}

.join form{
    width:90%;
}

.contact-wrapper{
    grid-template-columns:1fr;
}

iframe{
    width:100%;
}

}

/* Tablets */

@media (max-width:768px){

#menu-btn{
    display:block;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

.navbar{

    position:absolute;

    top:75px;

    left:0;

    width:100%;

    background:#008751;

    display:none;

    animation:slideDown .3s ease;

}

.navbar.active{
    display:block;
}

.navbar ul{

    display:flex;

    flex-direction:column;

}

.navbar ul li{

    width:100%;

    border-bottom:1px solid rgba(255,255,255,.1);

}

.navbar ul li a{

    display:block;

    padding:15px;

}

.hero{

    height:80vh;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:17px;

}

.about-grid,

.services,

.news-grid,

.counter .container,

.footer-grid,

.gallery,

.leaders{

    grid-template-columns:1fr;

}

.section-title{

    font-size:32px;

}

.about p{

    font-size:17px;

}

.count-box h2{

    font-size:40px;

}

.join form{

    width:100%;

}

.join input,

.join textarea,

.join select{

    width:100%;

}

.news-card img{

    height:220px;

}

.footer-grid{

    text-align:center;

}

.social{

    justify-content:center;

}

}

/* Mobile */

@media (max-width:576px){

.section{

    padding:60px 0;

}

.hero{

    height:75vh;

}

.hero h1{

    font-size:30px;

    line-height:1.3;

}

.hero p{

    font-size:16px;

}

.btn{

    padding:12px 25px;

    font-size:15px;

}

.logo h2{

    font-size:24px;

}

.logo span{

    font-size:10px;

}

.section-title{

    font-size:28px;

}

.box,

.service,

.news-card{

    padding:20px;

}

.count-box h2{

    font-size:34px;

}

.news-card img{

    height:200px;

}

.join input,

.join textarea,

.join select{

    padding:12px;

}

footer{

    text-align:center;

}

.footer-grid{

    gap:25px;

}

.social a{

    width:42px;

    height:42px;

}

}

/* Small Phones */

@media (max-width:400px){

.hero{

    height:70vh;

}

.hero h1{

    font-size:24px;

}

.hero p{

    font-size:15px;

}

.btn{

    width:100%;

    text-align:center;

}

.logo h2{

    font-size:22px;

}

.logo span{

    display:none;

}

.section-title{

    font-size:24px;

}

.count-box h2{

    font-size:30px;

}

.news-card img{

    height:180px;

}

}

/* Landscape Phones */

@media (max-height:500px){

.hero{

    height:100vh;

}

.hero-content{

    padding-top:80px;

}

}

/* Animation */

@keyframes slideDown{

from{

opacity:0;

transform:translateY(-20px);

}

to{

opacity:1;

transform:translateY(0);

}

}