/* ==========================================
Responsive CSS
BJSTR
==========================================*/
/* ===========================
Large Desktop
===========================*/
@media (max-width:1400px){
.container{
width:95%;
}
}
/* ===========================
Laptop
===========================*/
@media (max-width:1200px){
h1{
font-size:44px;
}
.hero{
padding:100px 0;
}
.stats-grid{
grid-template-columns:repeat(2,1fr);
}
.feature-grid{
grid-template-columns:repeat(2,1fr);
}
.footer-grid{
grid-template-columns:repeat(2,1fr);
}
.issue-card{
grid-template-columns:250px 1fr;
gap:30px;
}
}
/* ===========================
Tablet
===========================*/
@media (max-width:992px){
section{
padding:70px 0;
}
.site-header .container{
padding:15px 0;
}
.logo img{
width:60px;
}
.logo-text h2{
font-size:24px;
}
.logo-text span{
display:none;
}
.menu-toggle{
display:block;
}
#mainMenu{
display:none;
position:absolute;
left:0;
top:100%;
width:100%;
background:#fff;
box-shadow:0 10px 20px rgba(0,0,0,.08);
}
#mainMenu.active{
display:block;
}
#mainMenu ul{
flex-direction:column;
align-items:flex-start;
padding:20px;
gap:0;
}
#mainMenu ul li{
width:100%;
border-bottom:1px solid #eee;
}
#mainMenu ul li:last-child{
border:none;
}
#mainMenu ul li a{
display:block;
width:100%;
padding:15px 5px;
}
.hero{
text-align:center;
padding:80px 0;
}
.hero-content{
margin:auto;
}
.hero h1{
font-size:40px;
}
.hero p{
font-size:18px;
}
.hero-buttons{
justify-content:center;
}
.issue-card{
grid-template-columns:1fr;
text-align:center;
}
.issue-card img{
max-width:260px;
margin:auto;
}
.scope-grid{
justify-content:center;
}
.footer-grid{
grid-template-columns:1fr 1fr;
gap:30px;
}
}
/* ===========================
Mobile
===========================*/
@media (max-width:768px){
.top-bar{
display:none;
}
section{
padding:60px 0;
}
h1{
font-size:34px;
}
h2{
font-size:28px;
}
h3{
font-size:22px;
}
.hero{
padding:70px 0;
}
.hero p{
font-size:17px;
}
.hero-buttons{
flex-direction:column;
align-items:center;
}
.hero-buttons .btn{
width:250px;
text-align:center;
}
.stats-grid{
grid-template-columns:1fr;
}
.feature-grid{
grid-template-columns:1fr;
}
.footer-grid{
grid-template-columns:1fr;
}
.stat-box{
padding:30px;
}
.feature-box{
padding:30px;
}
.scope-grid span{
font-size:14px;
padding:12px 18px;
}
.submit-btn{
display:none;
}
.page-banner{
padding:70px 0;
}
.page-banner h1{
font-size:32px;
}
}
/* ===========================
Small Mobile
===========================*/
@media (max-width:480px){
.container{
width:94%;
}
.logo img{
width:50px;
}
.logo-text h2{
font-size:20px;
}
.hero{
padding:60px 0;
}
.hero h1{
font-size:28px;
}
.hero p{
font-size:16px;
}
.btn{
padding:12px 20px;
font-size:14px;
}
.section-title{
margin-bottom:35px;
}
.section-title h2{
font-size:26px;
}
.issue-card{
padding:25px;
}
.footer{
padding-top:50px;
}
.footer-logo{
width:70px;
}
.social-icons{
justify-content:center;
}
.copyright{
font-size:13px;
}
#backToTop{
width:45px;
height:45px;
right:15px;
bottom:15px;
}
}
/* ===========================
Extra Small Devices
===========================*/
@media (max-width:360px){
.hero h1{
font-size:24px;
}
.hero p{
font-size:15px;
}
.logo-text h2{
font-size:18px;
}
.btn{
width:100%;
}
}
@media (max-width:768px){

.top-header .container{

flex-direction:column;

gap:10px;

text-align:center;

}

.top-left{

display:flex;

flex-direction:column;

gap:8px;

}

.divider{

display:none;

}

.top-right{

justify-content:center;

flex-wrap:wrap;

}

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

.subjects-grid{

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

}

}

@media(max-width:768px){

.subjects-grid{

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

gap:25px;

}

.subject-card img{

width:90px;

height:90px;

}

}

@media(max-width:480px){

.subjects-grid{

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

}

.subjects-section h2{

font-size:28px;

}

}