/*=========================================
 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;
}

}


/*=========================================
 PAGINATION RESPONSIVE
==========================================*/

@media (max-width:768px){

.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:20px;
}

.pagination a,
.pagination span{
    min-width:42px;
    height:42px;
    padding:0 14px;
    font-size:15px;
    border-radius:8px;
}

.pagination .prev,
.pagination .next{
    padding:0 16px;
}

}

@media (max-width:480px){

.pagination{
    gap:6px;
    margin-top:15px;
}

.pagination a,
.pagination span{
    min-width:38px;
    height:38px;
    padding:0 10px;
    font-size:14px;
}

.pagination .prev,
.pagination .next{
    padding:0 12px;
    font-size:14px;
}

}

@media(max-width:768px){

.container{
    max-width:98%;
}

.section{
    padding:15px 0;
}

.posts{
    gap:14px;
}

.card{
    border-radius:14px;
}

.card img{
    height:190px;
}

.card-body{
    padding:14px;
}

.card h3{
    font-size:22px;
    line-height:1.35;
    margin-bottom:10px;
}

.card p{
    font-size:15px;
    line-height:1.65;
    margin-bottom:12px;
}

.meta{
    font-size:13px;
}

}