/*=========================================
 RAITA HTML FRAMEWORK
 RESPONSIVE
==========================================*/

/*==============================
 Laptop
==============================*/

@media(max-width:1200px){

.container{
max-width:95%;
}

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

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

.hero-content{
padding-top:25px;
}

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

}

/*==============================
 Tablet
==============================*/

@media(max-width:991px){

.header .container{
height:70px;
}

.menu{
display:none;
}

.search input{
width:180px;
}

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

aside{
margin-top:40px;
}

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

.hero{
padding:30px 0;
}

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

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

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

}

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

@media(max-width:768px){

.header .container{
flex-wrap:wrap;
padding:12px 0;
height:auto;
}

.logo{
width:100%;
text-align:center;
margin-bottom:15px;
}

.logo a{
font-size:30px;
}

.search{
width:100%;
}

.search input{
width:100%;
}

.hero{
padding:20px 0;
}

.hero-grid{
gap:20px;
}

.hero h1{
font-size:28px;
line-height:1.3;
}

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

.btn{
display:block;
text-align:center;
}

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

.card img{
height:220px;
}

.card h3{
font-size:22px;
}

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

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

footer{
padding:45px 0 20px;
}

.widget{
padding:20px;
}

}

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

@media(max-width:480px){

.container{
max-width:94%;
}

.header{
padding:0;
}

.logo a{
font-size:28px;
}

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

.hero p{
font-size:14px;
}

.badge{
font-size:12px;
padding:5px 12px;
}

.card-body{
padding:16px;
}

.card h3{
font-size:20px;
}

.card p{
font-size:14px;
}

.meta{
font-size:13px;
}

.section{
padding:35px 0;
}

.section-title{
margin-bottom:20px;
}

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

.widget h3{
font-size:20px;
}

.footer-grid h3{
font-size:20px;
}

.copyright{
font-size:13px;
}

}

/*==============================
 Ultra Wide
==============================*/

@media(min-width:1600px){

.container{
width:1400px;
}

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

.posts{
gap:35px;
}

.card img{
height:260px;
}

}