/* ==========================================
RESPONSIVE DESIGN
========================================== */

@media (max-width:1200px){

.container{
width:95%;
}

}

@media (max-width:992px){

.header .container{
height:80px;
}

.hero-content,
.about-page .container,
.vision .container{
flex-direction:column;
text-align:center;
}

.about-grid,
.policy-grid,
.objective-grid,
.values-grid,
.flag-grid,
.contact-grid,
.why-grid,
.footer-grid{
grid-template-columns:repeat(2,1fr);
}

.hero-left h1{
font-size:42px;
}

}

@media (max-width:768px){

.about-grid,
.policy-grid,
.objective-grid,
.values-grid,
.flag-grid,
.contact-grid,
.why-grid,
.footer-grid{
grid-template-columns:1fr;
}

.hero-left h1{
font-size:34px;
}

.hero-left p{
font-size:16px;
}

.page-banner h1{
font-size:36px;
}

.logo img{
height:60px;
}

.btn{
width:220px;
display:block;
margin:15px auto;
text-align:center;
}

}

@media (max-width:480px){

.hero-left h1{
font-size:28px;
}

.section-title h2{
font-size:28px;
}

.hero-right img{
width:220px;
}

}