/* =====================================================
   IPPM Responsive Styles
   Institute of Public Peace and Management
   ===================================================== */

/* Large Desktop */
@media (min-width:1400px){

.hero-overlay h1{
    font-size:4rem;
}

.hero-overlay h2{
    font-size:2rem;
}

.focus .grid{
    grid-template-columns:repeat(4,1fr);
}

}

/* Laptop */

@media (max-width:1200px){

.navbar{
    padding:15px 30px;
}

.hero-overlay{
    padding:40px;
}

.hero-overlay h1{
    font-size:3rem;
}

.focus .grid{
    grid-template-columns:repeat(3,1fr);
}

}

/* Tablet */

@media (max-width:992px){

.navbar{
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}

.navbar ul{
    flex-wrap:wrap;
    justify-content:center;
}

.hero{
    height:auto;
}

.hero img{
    height:420px;
    object-fit:cover;
}

.hero-overlay{
    position:relative;
    background:rgba(0,0,0,.65);
    padding:40px 25px;
}

.hero-overlay h1{
    font-size:2.5rem;
}

.hero-overlay h2{
    font-size:1.4rem;
}

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

section{
    padding:60px 30px;
}

.contact img{
    width:170px;
}

}

/* Large Phones */

@media (max-width:768px){

.navbar{
    flex-direction:column;
}

.navbar ul{
    flex-direction:column;
    gap:15px;
    text-align:center;
}

.logo img{
    width:85px;
}

.hero img{
    height:320px;
}

.hero-overlay h1{
    font-size:2rem;
}

.hero-overlay h2{
    font-size:1.2rem;
}

.hero-overlay p{
    font-size:1rem;
}

.button{
    display:block;
    width:220px;
    margin:15px auto;
}

.focus .grid{
    grid-template-columns:1fr;
}

.focus .grid div{
    padding:25px;
}

.contact p{
    font-size:15px;
}

footer{
    font-size:14px;
}

}

/* Small Phones */

@media (max-width:480px){

body{
    font-size:15px;
}

.hero-overlay{
    padding:25px 20px;
}

.hero-overlay h1{
    font-size:1.6rem;
}

.hero-overlay h2{
    font-size:1rem;
}

.hero-overlay p{
    font-size:.95rem;
}

section{
    padding:45px 20px;
}

section h2{
    font-size:1.8rem;
}

.navbar{
    padding:12px;
}

.navbar ul{
    gap:12px;
}

.contact img{
    width:150px;
}

.button{
    width:100%;
}

}

/* Ultra Small */

@media (max-width:360px){

.hero-overlay h1{
    font-size:1.4rem;
}

.hero-overlay p{
    font-size:.85rem;
}

.logo img{
    width:70px;
}

}