/* ==========================================
   RESPONSIVE CSS
   VIDYA BHARATI SAMBAD
========================================== */


/* ==========================================
   LARGE LAPTOP
========================================== */

@media(max-width:1400px){

.container{
max-width:1200px;
}

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

}


/* ==========================================
   LAPTOP
========================================== */

@media(max-width:1200px){

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

.hero-main img{
height:400px;
}

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

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

}


/* ==========================================
   TABLET
========================================== */

@media(max-width:992px){

.topbar-wrap{
flex-direction:column;
gap:10px;
text-align:center;
}

.header-wrap{
flex-wrap:wrap;
gap:15px;
}

.logo{
font-size:28px;
}

.menu{
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

.hero-main img{
height:350px;
}

.hero-content h2{
font-size:28px;
}

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

.news-grid{
grid-template-columns:
repeat(2,1fr);
gap:20px;
}

.news-card img{
height:200px;
}

.newsletter h2{
font-size:32px;
}

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

}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

.container{
padding:0 15px;
}

.topbar{
font-size:13px;
}

.header-wrap{
justify-content:center;
text-align:center;
}

.header-right{
width:100%;
justify-content:center;
flex-wrap:wrap;
}

.logo{
font-size:26px;
}

.menu{
flex-direction:column;
gap:0;
width:100%;
}

.menu li{
width:100%;
text-align:center;
border-bottom:
1px solid #eee;
}

.menu li a{
padding:15px;
}

.hero{
padding:25px 0;
}

.hero-main img{
height:250px;
}

.hero-content{
padding:18px;
}

.hero-content h2{
font-size:22px;
}

.hero-card img{
height:120px;
}

.hero-card h4{
font-size:16px;
}

.section{
padding:50px 0;
}

.section-title{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

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

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

.news-card img{
height:220px;
}

.news-content h3{
font-size:18px;
}

.ebook-card img{
height:280px;
}

.newsletter{
padding:50px 15px;
}

.newsletter h2{
font-size:26px;
}

.newsletter form{
flex-direction:column;
}

.newsletter input{
width:100%;
}

.footer{
padding:50px 0 20px;
}

.footer-grid{
grid-template-columns:1fr;
gap:30px;
}

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media(max-width:480px){

.logo{
font-size:22px;
}

.hero-main img{
height:220px;
}

.hero-content h2{
font-size:20px;
}

.hero-card img{
height:100px;
}

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

.news-card img{
height:180px;
}

.news-content{
padding:15px;
}

.news-content h3{
font-size:16px;
}

.ebook-card{
padding:15px;
}

.ebook-card img{
height:220px;
}

.newsletter h2{
font-size:22px;
}

.btn{
width:100%;
}

}


/* ==========================================
   EXTRA SMALL DEVICE
========================================== */

@media(max-width:360px){

.logo{
font-size:20px;
}

.hero-content h2{
font-size:18px;
}

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

.news-content h3{
font-size:15px;
}

.newsletter h2{
font-size:20px;
}

}

/* ============================================
    Slider
=============================================*/

@media(max-width:768px){

.carousel-item img{

height:350px;

}

.carousel-caption{

left:20px;

right:20px;

bottom:30px;

}

.carousel-caption h2{

font-size:28px;

}

.carousel-caption p{

font-size:14px;

}

}