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

@media only screen and (max-width:768px){

.hero{
padding:25px 15px !important;
}

.hero-container{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
text-align:center !important;
gap:20px !important;
}

.hero-content{
width:100% !important;
}

.hero-content h1{
font-size:28px !important;
line-height:1.25 !important;
}

.hero-content p{
font-size:15px !important;
line-height:1.6 !important;
}

.hero-tag{
font-size:13px !important;
}

.hero-buttons{
justify-content:center !important;
flex-wrap:wrap;
}

.hero-image{
width:100% !important;
}

.hero-image img{
width:100% !important;
max-width:100% !important;
height:auto !important;
border-radius:15px;
}

}

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

@media (max-width:768px){

.header .container{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 15px;
min-height:70px;
}

.header{
position:sticky;
top:0;
z-index:9999;
}
.logo{
display:flex;
align-items:center;
gap:10px;
max-width:calc(100% - 60px);
}

.logo img{
width:50px;
height:50px;
}

.logo-text h2{
font-size:16px;
line-height:1.2;
margin:0;
}

.logo-text span{
display:block;
font-size:11px;
margin-top:2px;
}

.menu-toggle{
display:block;
position:absolute;
top:20px;
right:15px;
font-size:34px;
color:#0B7A32;
cursor:pointer;
z-index:10001;
}
.navbar{
display:none;
}

.navbar.active{
display:flex;
}

}
/* ================= BLOG HERO MOBILE ================= */

@media (max-width:768px){

.blog-hero{
padding:20px 0;
}

.blog-cover{
border-radius:15px;
}

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

.pm-cover{
    padding:20px 0;
}

.pm-cover-img{
    border-radius:15px;
}

}

/* ================= ON GRID COVER MOBILE ================= */

@media (max-width:768px){

.ongrid-cover{
    padding:20px 0;
}

.ongrid-cover-img{
    border-radius:15px;
}

}
/* ================= SOLAR ATTA CHAKKI MOBILE ================= */

@media (max-width:768px){

.atta-cover{
    padding:20px 0;
}

.atta-cover-img{
    width:100%;
    border-radius:15px;
}

}
/* ================= OFF GRID COVER MOBILE ================= */

@media (max-width:768px){

.offgrid-cover{
    padding:20px 0;
}

.offgrid-cover-img{
    width:100%;
    border-radius:15px;
}

}
/* ================= BLOG CONTENT MOBILE ================= */

@media (max-width:768px){

.blog-content{
padding:5px 0 30px;
}

.blog-content h1{
font-size:30px;
line-height:1.3;
}

.blog-content h2{
font-size:24px;
margin:35px 0 15px;
padding-left:10px;
}

.blog-content h3{
font-size:20px;
}

.blog-content p{
font-size:16px;
line-height:1.8;
text-align:left;
}

.blog-content ul,
.blog-content ol{
font-size:16px;
padding-left:22px;
}

.blog-content li{
margin-bottom:10px;
}

.floating-call{
bottom:120px;
}

.floating-whatsapp{
bottom:35px;
}

}
/* ================= PROJECT MOBILE ================= */

@media (max-width:768px){

.project-showcase{
flex-direction:column;
padding:20px;
gap:25px;
}

.project-content h2{
font-size:24px;
}

.project-content p{
font-size:16px;
}

.project-buttons{
justify-content:center;
}

}

/* ================= ABOUT COVER MOBILE ================= */

@media (max-width:768px){

.about-cover{
    padding:20px 0;
}

.about-cover-img{
    width:100%;
    border-radius:15px;
}

}
/* ================= CONTACT COVER MOBILE ================= */

@media (max-width:768px){

.contact-cover{
    padding:20px 0;
}

.contact-cover-img{
    width:100%;
    border-radius:15px;
}

}
/* ================= REVIEW COVER MOBILE ================= */

@media (max-width:768px){

.review-cover{

padding:20px 0;

}

.review-cover-img{

width:100%;
border-radius:15px;

}

}
/* ================= REVIEW MOBILE ================= */

@media(max-width:768px){

.rating-summary{

flex-direction:column;
padding:25px;

}

.rating-score h1{

font-size:55px;

}

.rating-row{

gap:10px;

}

.rating-row span{

width:75px;
font-size:14px;

}

}

/* ================= REVIEW FORM MOBILE ================= */

@media(max-width:768px){

.review-grid{

grid-template-columns:1fr;

}

.review-form{

padding:25px;

}

}
/* ================= REVIEW CARD MOBILE ================= */

@media(max-width:768px){

.review-avatar{

width:50px;
height:50px;
font-size:20px;

}

.review-stars{

font-size:18px;

}

}