/*==============================
Large Desktop
==============================*/

@media(max-width:1200px){

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

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

}

@media (max-width:992px){

.logo{
    flex:1;
}

.logo img{
    height:52px;
}

.menu-toggle{
    display:block;
    margin-left:auto;
    font-size:30px;
}

/* Hide menu */

nav{
    display:none;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#fff;
    box-shadow:0 10px 20px rgba(0,0,0,.12);
}

nav.show{
    display:block;
}

nav ul{
    display:block;
}

nav ul li{
    margin:0;
}

nav ul li a{
    display:block;
    padding:15px 20px;
    border-bottom:1px solid #eee;
}

}

.hero{

text-align:center;

}

.hero h1{

font-size:42px;

}

.hero-logo{

margin:auto auto 25px;

}

.footer-grid{

grid-template-columns:1fr;

}

}

/*==============================
Mobile
==============================*/

@media(max-width:768px){

.cards{

grid-template-columns:1fr;

}

.hero{

padding:80px 0;

height:auto;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:17px;

}

.btn-blue,
.btn-white{

display:block;

margin:10px auto;

width:220px;

text-align:center;

}

.section-title h2{

font-size:30px;

}

}

/*==============================
Small Mobile
==============================*/

@media(max-width:480px){

.logo img{

height:50px;

}

.hero h1{

font-size:28px;

}

.container{

width:94%;

}

.card{

padding:30px;

}

}
/* ABOUT PAGE */

@media(max-width:992px){

.about-grid{

grid-template-columns:1fr;

}

.president{

grid-template-columns:1fr;

text-align:center;

}

.stats-grid{

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

}

}

@media(max-width:768px){

.stats-grid{

grid-template-columns:1fr;

}

.page-banner h1{

font-size:38px;

}

.about-grid{

gap:40px;

}

.timeline{

padding-left:25px;

}

.timeline-item:before{

left:-37px;

}

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

.committee-grid{

grid-template-columns:1fr;

}

.committee-image{

height:280px;

}

.committee-content{

padding:25px;

}

.committee-content h3{

font-size:22px;

}

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

.directory-grid{

grid-template-columns:1fr;

}

.directory-photo{

height:220px;

}

.directory-content{

padding:25px;

}

.directory-content h3{

font-size:22px;

}

.directory-search input{

font-size:16px;

padding:15px 20px;

}

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

.filter-buttons{

justify-content:flex-start;

overflow:auto;

padding-bottom:10px;

}

.filter-btn{

white-space:nowrap;

}

.contact-icons{

justify-content:center;

}

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

.menu-toggle{

display:block;

}

nav li{

margin:12px 0;

text-align:center;

}

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

.card-grid,
.cards{

    grid-template-columns:1fr !important;

}
.hero{
    background:url("../images/hero-mobile.jpg") center top no-repeat;
    background-size:cover;
    min-height:650px;
}
}
@media (max-width:992px){

.menu-toggle{
    display:block;
    font-size:30px;
    cursor:pointer;
    color:#0067B8;
}

nav{
    display:none;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#fff;
    z-index:9999;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
}

nav.show{
    display:block;
}

nav ul{
    display:block;
    margin:0;
    padding:0;
}

nav ul li{
    margin:0;
}

nav ul li a{
    display:block;
    padding:15px 20px;
    border-bottom:1px solid #eee;
}

}


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

.hero{
    background:url("../images/hero-mobile.jpg") center top no-repeat;
    background-size:cover;
    min-height:650px;
}

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

.country-grid{

grid-template-columns:1fr;

}

.embassy-grid{

grid-template-columns:1fr;

}

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

.news-grid{

grid-template-columns:1fr;

}

.national-grid{

grid-template-columns:1fr;

}

.news-card img{

height:220px;

}

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

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item img{

height:220px;

}

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

.contact-grid{

grid-template-columns:1fr;

}

.downloads-grid{

grid-template-columns:1fr;

}

.office-info,
.contact-form{

padding:30px;

}

}