/* =========================
   HAR GHAR SOLAR
   MAIN STYLE
========================= */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:'Inter',sans-serif;

background:#fff;

overflow-x:hidden;

color:#222;

}






/* =========================
   LOADER
========================= */


#loader{

position:fixed;

inset:0;

background:#063b2d;

z-index:99999;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

color:white;

}



.sun{

font-size:55px;

animation:spin 2s linear infinite;

}



#loader p{

font-size:25px;

font-weight:900;

}



@keyframes spin{

100%{

transform:rotate(360deg);

}

}







/* =========================
   PREMIUM TOP BAR
========================= */


.gov-header{

background:

linear-gradient(
90deg,
#063b2d,
#0b7a45
);


color:white;

padding:4px 0;

border-bottom:2px solid #ffc107;

}




.gov-brand{

display:flex;

align-items:center;

gap:8px;

}




.gov-icon{

width:24px;

height:24px;

border-radius:50%;

background:#ffc107;

color:#063b2d;


display:flex;

align-items:center;

justify-content:center;


font-size:13px;

}



.gov-brand h3{

font-size:14px;

font-weight:800;

margin:0;

letter-spacing:.3px;

}




.gov-brand p{

display:none;

}








.header-contact{

display:flex;

justify-content:flex-end;

align-items:center;

gap:25px;

}




.header-contact div{

display:flex;

align-items:center;

gap:6px;


background:none;

padding:0;

}



.header-contact i{

font-size:13px;

color:#ffc107;

}



.header-contact span{

display:none;

}




.header-contact h5{

font-size:13px;

font-weight:700;

margin:0;

}




/* =========================
   NAVBAR
========================= */


.main-nav{

background:white;

padding: 6px;px 0;

box-shadow:

0 5px 25px rgba(0,0,0,.08);


position:sticky;

top:0;

z-index:999;

}



.solar-logo{

display:flex;

align-items:center;

gap:12px;

text-decoration:none;

}



.site-logo{

width:45px !important;

height:45px !important;

object-fit:contain;

}



.logo-text h3{

font-size:23px;

font-weight:900;

margin:0;

color:#063b2d;

}



.logo-text span{

font-size:13px;

font-weight:600;

color:#666;

}





.navbar-nav{

align-items:center;

gap:25px;

}



.navbar-nav .nav-link{

font-size:16px;

font-weight:800;

color:#063b2d;

}



.navbar-nav .nav-link:hover{

color:#00834d;

}





.quote-btn{

background:#ffc107;

color:#063b2d;

padding:11px 24px;

border-radius:50px;

font-weight:900;

text-decoration:none;

}



.quote-btn:hover{

background:#063b2d;

color:white;

}





.govt-strip{

background:#ffc107;

color:#063b2d;

font-size:14px;

padding:5px;

font-weight:800;

}
/* =========================
   HERO SLIDER
========================= */


.slide-img{

height:85vh;

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:center;

}



.slide-img::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(0,70,40,.85),

rgba(0,0,0,.25)

);

}



.img1{

background-image:url("../images/solar1.jpg");

}



.img2{

background-image:url("../images/solar2.jpg");

}



.img3{

background-image:url("../images/solar3.jpg");

}
/* =========================
 PREMIUM HERO FIX
========================= */



.hero-content{

position:relative;

z-index:2;

margin-left:10%;

max-width:700px;

color:white;

}



.hero-content h5{

background:#ffc107;

display:inline-block;

padding:8px 18px;

border-radius:5px;

font-weight:900;

color:#063b2d;

}



.hero-content h1{

font-size:58px;

font-weight:900;

margin:18px 0;

}



.hero-content p{

font-size:21px;

}








/* =========================
   COMMON SECTION
========================= */


section{

overflow:hidden;

}



.section-title{

text-align:center;

margin-bottom:50px;

}



.section-title h5{

color:#00834d;

font-weight:900;

}



.section-title h2{

font-size:42px;

font-weight:900;

color:#063b2d;

}









/* =========================
   SERVICES
========================= */


.services-section{

padding:90px 0;

background:#f7faf9;

}



.service-card{

background:white;

padding:40px 25px;

border-radius:22px;

height:100%;

text-align:center;

box-shadow:

0 12px 35px rgba(0,0,0,.08);


transition:.4s;

}



.service-card:hover{

transform:translateY(-12px);

box-shadow:

0 25px 50px rgba(0,0,0,.15);

}




.service-card i{

font-size:50px;

color:#ffc107;

margin-bottom:20px;

}



.service-card h3{

font-weight:900;

color:#063b2d;

}









/* =========================
   COUNTERS
========================= */


.counter-area{

background:#063b2d;

color:white;

padding:60px 0;

text-align:center;

}



.counter-area h2{

font-size:45px;

font-weight:900;

color:#ffc107;

}








/* =========================
   WHY SECTION
========================= */


.why-section{

padding:90px 0;

}



.why-img,

.subsidy-img,

.about-img{

width:100%;

height:420px;

object-fit:cover;

border-radius:25px;

box-shadow:

0 15px 40px rgba(0,0,0,.2);

}



.why-section h2{

font-size:42px;

font-weight:900;

color:#063b2d;

}



.why-section li{

list-style:none;

margin:15px 0;

font-size:18px;

}








/* =========================
   SUBSIDY
========================= */


.subsidy-section{

padding:90px 0;

background:

linear-gradient(

120deg,

#fff8df,

#e8fff1

);

}



.subsidy-box{

background:white;

padding:35px;

border-radius:22px;

border-left:8px solid #ffc107;

box-shadow:

0 15px 40px rgba(0,0,0,.1);

}



.subsidy-box h3{

font-size:50px;

font-weight:900;

color:#00834d;

}



.subsidy-list span{

display:block;

background:#f3fff8;

margin:12px 0;

padding:14px;

border-radius:10px;

font-weight:700;

}









/* =========================
   EMI
========================= */


.emi-section{

background:

linear-gradient(

90deg,

#063b2d,

#00834d

);

padding:70px;

color:white;

text-align:center;

}



.emi-section h2{

font-size:40px;

font-weight:900;

}
/* =========================
   PAGE BANNER
========================= */


.page-banner{

height:320px;

background:

linear-gradient(

rgba(0,0,0,.6),

rgba(0,0,0,.6)

),

url("../images/solar2.jpg");


background-size:cover;

background-position:center;


display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

}



.page-banner h1{

font-size:50px;

font-weight:900;

}









/* =========================
   ABOUT
========================= */


.about-section{

padding:90px 0;

}



.about-section h5{

color:#00834d;

font-weight:900;

}



.about-section h2{

font-size:42px;

font-weight:900;

color:#063b2d;

}



.about-section li{

list-style:none;

font-size:18px;

margin:15px 0;

}








/* =========================
   MISSION
========================= */


.mission-section{

padding:80px 0;

background:#e8fff1;

}



.mission-card{

background:white;

padding:40px;

height:100%;

border-radius:22px;

box-shadow:

0 15px 40px rgba(0,0,0,.1);

}



.mission-card h3{

color:#00834d;

font-weight:900;

}









/* =========================
   PROCESS
========================= */


.process-section{

padding:90px 0;

background:#f7faf9;

}



.process-card{

background:white;

padding:35px;

height:100%;

text-align:center;

border-radius:22px;

box-shadow:

0 15px 40px rgba(0,0,0,.08);

transition:.3s;

}



.process-card:hover{

transform:translateY(-10px);

}



.process-card h1{

font-size:50px;

font-weight:900;

color:#ffc107;

}



.process-card h3{

font-weight:900;

color:#063b2d;

}










/* =========================
   PACKAGES
========================= */


.package-section{

padding:90px 0;

background:#fff8df;

}



.package-card{

background:white;

padding:35px 25px;

height:100%;

text-align:center;

border-radius:22px;

box-shadow:

0 15px 40px rgba(0,0,0,.1);

transition:.3s;

}



.package-card:hover{

transform:translateY(-12px);

}



.package-card h3{

font-size:42px;

font-weight:900;

color:#00834d;

}



.package-card ul{

padding:0;

margin:25px 0;

}



.package-card li{

list-style:none;

margin:12px 0;

}



.package-card a{

background:#ffc107;

padding:12px 25px;

border-radius:30px;

font-weight:900;

color:#063b2d;

text-decoration:none;

}









/* =========================
   CONTACT
========================= */


.contact-info-section{

padding:70px 0;

background:#f7faf9;

}



.info-card{

background:white;

padding:35px;

height:100%;

text-align:center;

border-radius:22px;

box-shadow:

0 15px 40px rgba(0,0,0,.1);

}



.info-card i{

font-size:42px;

color:#ffc107;

margin-bottom:20px;

}



.contact-page{

padding:90px 0;

background:#e8fff1;

}



.contact-page input{

width:100%;

padding:15px;

margin-bottom:18px;

border-radius:12px;

border:1px solid #ddd;

}



.contact-page button{

width:100%;

padding:15px;

background:#ffc107;

border:none;

border-radius:50px;

font-weight:900;

}



.map-box{

height:450px;

border-radius:22px;

overflow:hidden;

}



.map-box iframe{

width:100%;

height:100%;

}








/* ======================
 MODERN ADMIN CRM FIX
====================== */


.crm-layout{

display:flex;

min-height:100vh;

background:#f4f7fa;

}


/* SIDEBAR */

.crm-sidebar{

width:240px;

min-width:240px;

background:#004b32;

padding:30px 20px;

color:white;

}


.crm-sidebar h3{

font-size:28px;

font-weight:900;

color:#ffc107;

margin-bottom:50px;

}


.crm-sidebar a{

display:flex;

gap:12px;

align-items:center;

color:white;

text-decoration:none;

font-weight:800;

margin-bottom:30px;

}



/* MAIN */

.crm-content{

width:calc(100% - 240px);

padding:35px;

overflow-x:hidden;

}



.crm-title{

font-size:34px;

font-weight:900;

color:#063b2d;

margin-bottom:30px;

}





/* CARDS */


.crm-card{

background:white;

height:150px;

border-radius:22px;

padding:25px;

box-shadow:

0 15px 35px rgba(0,0,0,.08);


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}



.crm-card h1{

font-size:42px;

font-weight:900;

margin:0;

color:#00834d;

}


.crm-card p{

margin:0;

font-weight:700;

}






/* CHART */


.crm-chart{

background:white;

padding:30px;

border-radius:22px;

box-shadow:

0 15px 35px rgba(0,0,0,.08);

margin-bottom:35px;

}


.crm-chart canvas{

max-height:300px;

}




/* SEARCH */

.search-box{

width:100%;

padding:15px 25px;

border-radius:30px;

border:1px solid #ddd;

margin-bottom:25px;

}





/* TABLE */


.table-box{

background:white;

padding:25px;

border-radius:22px;

box-shadow:

0 15px 35px rgba(0,0,0,.08);

overflow:auto;

}


.table{

width:100%;

}


.table th{

background:#004b32 !important;

color:white !important;

white-space:nowrap;

}


.table td{

vertical-align:middle;

}
/* =========================
   PROJECTS
========================= */


.projects-section{

padding:90px 0;

background:white;

}



.project-card{

position:relative;

overflow:hidden;

border-radius:22px;

box-shadow:

0 15px 40px rgba(0,0,0,.12);

}



.project-card img{

width:100%;

height:300px;

object-fit:cover;

transition:.5s;

}



.project-card:hover img{

transform:scale(1.1);

}



.project-card div{

position:absolute;

bottom:0;

left:0;

right:0;

padding:25px;

color:white;

background:

linear-gradient(

transparent,

rgba(0,0,0,.9)

);

}








/* =========================
   REVIEWS
========================= */


.review-section{

padding:90px 0;

background:#e8fff1;

}



.review-card{

background:white;

padding:35px;

height:100%;

border-radius:22px;

box-shadow:

0 15px 40px rgba(0,0,0,.1);

transition:.3s;

}



.review-card:hover{

transform:translateY(-10px);

}









/* =========================
   FOOTER
========================= */


.premium-footer{

background:

linear-gradient(

135deg,

#052b20,

#006b3c

);


color:white;

padding:60px 0 20px;

}



.premium-footer h3,

.premium-footer h4{

color:#ffc107;

font-weight:900;

margin-bottom:20px;

}



.premium-footer p{

color:#ddd;

}



.premium-footer a{

display:block;

color:#ddd;

text-decoration:none;

margin-bottom:10px;

transition:.3s;

}



.premium-footer a:hover{

color:#ffc107;

padding-left:6px;

}



.footer-social i{

width:40px;

height:40px;

background:#ffc107;

color:#063b2d;

border-radius:50%;

line-height:40px;

text-align:center;

margin-right:8px;

}



.footer-bottom{

text-align:center;

color:#ddd;

}









/* =========================
   FLOAT BUTTONS
========================= */


.quick-enquiry{

position:fixed;

left:20px;

bottom:20px;

background:#ffc107;

color:#063b2d;

padding:14px 25px;

border-radius:40px;

font-weight:900;

text-decoration:none;

z-index:999;

box-shadow:

0 10px 30px rgba(0,0,0,.3);

animation:pulse 2s infinite;

}



@keyframes pulse{

50%{

transform:scale(1.08);

}

}



.whatsapp{

position:fixed;

right:20px;

bottom:20px;

width:60px;

height:60px;

background:#25d366;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

z-index:999;

text-decoration:none;

}










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


@media(max-width:768px){


.gov-brand{

justify-content:center;

text-align:center;

}



.header-contact{

margin-top:15px;

justify-content:center;

flex-direction:column;

}



.navbar-nav{

gap:10px;

text-align:center;

padding-top:20px;

}




.site-logo{

width:45px !important;

height:45px !important;

}



.logo-text h3{

font-size:20px;

}



.slide-img{

height:70vh;

}



.hero-content{

margin:0 25px;

}



.hero-content h1{

font-size:36px;

}



.hero-content p{

font-size:16px;

}



.section-title h2,

.about-section h2,

.why-section h2{

font-size:30px;

}



.about-img,

.why-img,

.subsidy-img{

height:280px;

}



.service-card,

.package-card,

.process-card,

.review-card,

.info-card{

margin-bottom:25px;

}



.premium-footer{

text-align:center;

}



.quick-enquiry{

font-size:13px;

padding:12px 18px;

left:10px;

}



.whatsapp{

width:50px;

height:50px;

font-size:28px;

}



}
/* ======================
   CALCULATOR PREMIUM
====================== */


.calculator-section{

padding:90px 0;

background:#f7faf9;

}


.calculator-box{

max-width:650px;

margin:auto;

background:white;

padding:40px;

border-radius:25px;

box-shadow:

0 20px 50px rgba(0,0,0,.12);

}



.calculator-box input{

width:100%;

padding:18px;

border-radius:50px;

border:2px solid #ddd;

margin-bottom:20px;

font-size:18px;

}



.calculator-box button{

width:100%;

padding:16px;

border-radius:50px;

background:#ffc107;

border:none;

font-weight:900;

}



#solarResult{

margin-top:25px;

font-size:22px;

font-weight:900;

color:#063b2d;

text-align:center;

}
/* IMAGE PREMIUM */


.why-img,
.subsidy-img,
.project-card img{


filter:saturate(1.1);

}


.project-card{

transition:.4s;

}


.project-card:hover{


transform:translateY(-10px);

}
/* =========================
   HERO IMAGE ANIMATION
========================= */


.carousel-item.active .slide-img{

animation:zoomHero 8s linear infinite alternate;

}



@keyframes zoomHero{


from{

background-size:100%;

}


to{

background-size:110%;

}


}
/* HERO TEXT ENTRY */


.hero-content{

animation:heroEntry 1s ease;

}


@keyframes heroEntry{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:translateY(0);

}

}
/* SERVICE ICON EFFECT */


.service-card i{

width:80px;

height:80px;

background:#e8fff1;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 25px;

transition:.4s;

}



.service-card:hover i{

background:#ffc107;

transform:rotateY(180deg);

}

/* =========================
   FINAL HERO OVERRIDE
========================= */


.hero-content{

position:relative !important;

z-index:10 !important;

max-width:750px !important;

margin-left:8% !important;

color:white !important;

}


.hero-content h1{

font-size:52px !important;

line-height:1.1 !important;

font-weight:900 !important;

margin-bottom:20px !important;

}


.hero-content p{

font-size:19px !important;

max-width:650px !important;

}


/* HERO BUTTON FIX */


.hero-buttons{

display:flex !important;

gap:18px !important;

align-items:center !important;

margin-top:30px !important;

}



.hero-buttons a{

text-decoration:none !important;

}



.hero-btn{

background:#ffc107 !important;

color:#063b2d !important;

padding:15px 32px !important;

border-radius:50px !important;

font-weight:900 !important;

display:inline-flex !important;

align-items:center !important;

gap:10px !important;

box-shadow:0 12px 30px rgba(0,0,0,.3) !important;

transition:.3s !important;

}



.hero-btn:hover{

background:white !important;

transform:translateY(-5px);

}



.hero-btn-outline{

background:transparent !important;

border:2px solid white !important;

color:white !important;

padding:14px 32px !important;

border-radius:50px !important;

font-weight:900 !important;

display:inline-flex !important;

align-items:center !important;

gap:10px !important;

}



.hero-btn-outline:hover{

background:white !important;

color:#063b2d !important;

}


/* STATS FIX */


.hero-stats{

display:flex !important;

flex-direction:row !important;

gap:20px !important;

margin-top:35px !important;

}



.hero-stats div{

width:120px !important;

background:rgba(255,255,255,.18) !important;

padding:15px !important;

border-radius:15px !important;

text-align:center !important;

backdrop-filter:blur(10px);

}



.hero-stats h3{

font-size:28px !important;

color:#ffc107 !important;

font-weight:900 !important;

}


.hero-stats span{

font-size:13px !important;

color:white !important;

}
/* =========================
   NAVBAR PREMIUM EFFECT
========================= */


.navbar-nav .nav-link{

position:relative;

transition:.3s;

}



.navbar-nav .nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:#ffc107;

border-radius:10px;

transition:.3s;

}



.navbar-nav .nav-link:hover::after{

width:100%;

}



.navbar-nav .nav-link:hover{

transform:translateY(-3px);

}
/* =========================
 CONTACT PREMIUM
========================= */


.contact-card{

background:#063b2d;

color:white;

padding:45px;

border-radius:25px;

height:100%;

box-shadow:

0 20px 50px #0003;

}



.contact-card h2{

font-weight:900;

color:#ffc107;

}



.contact-point{

background:

rgba(255,255,255,.12);

padding:14px;

border-radius:12px;

margin:15px 0;

}





.lead-form{

background:white;

padding:45px;

border-radius:25px;

box-shadow:

0 20px 50px rgba(0,0,0,.12);

}




.lead-form h3{

font-weight:900;

color:#063b2d;

margin-bottom:25px;

}





.lead-form input,
.lead-form select{

width:100%;

padding:16px;

border-radius:12px;

border:1px solid #ddd;

margin-bottom:18px;

}



.lead-form button{

width:100%;

padding:16px;

border:none;

background:#ffc107;

color:#063b2d;

font-weight:900;

border-radius:50px;

transition:.3s;

}



.lead-form button:hover{

background:#063b2d;

color:white;

}
/* ======================
 THANK YOU PAGE
====================== */


.thank-section{

min-height:80vh;

display:flex;

align-items:center;

justify-content:center;

background:#e8fff1;

}



.thank-box{

background:white;

padding:60px;

border-radius:30px;

text-align:center;

box-shadow:

0 25px 60px rgba(0,0,0,.15);

}



.thank-icon{

width:90px;

height:90px;

background:#00834d;

color:white;

border-radius:50%;

font-size:55px;

margin:auto;

}



.thank-box h1{

font-weight:900;

color:#063b2d;

margin-top:20px;

}




.whatsapp-btn,
.home-btn{

display:inline-block;

margin:20px 10px;

padding:14px 28px;

border-radius:50px;

font-weight:900;

text-decoration:none;

}



.whatsapp-btn{

background:#25d366;

color:white;

}



.home-btn{

background:#ffc107;

color:#063b2d;

}
/* ======================
ADMIN CRM
====================== */


.crm-layout{

display:flex;

min-height:100vh;

background:#f4f7f6;

}



.crm-sidebar{

width:260px;

background:#063b2d;

color:white;

padding:30px;

}



.crm-sidebar h3{

color:#ffc107;

font-weight:900;

margin-bottom:40px;

}



.crm-sidebar a{

display:block;

color:white;

text-decoration:none;

padding:15px 0;

font-weight:700;

}




.crm-content{

flex:1;

padding:40px;

}



.crm-title{

font-weight:900;

color:#063b2d;

margin-bottom:30px;

}




.crm-card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:0 15px 40px #0002;

}



.crm-card h1{

font-size:45px;

font-weight:900;

color:#00834d;

}
/* =====================
 CRM CHART
===================== */


.crm-chart{

background:white;

padding:30px;

border-radius:20px;

margin-bottom:35px;

box-shadow:

0 15px 40px rgba(0,0,0,.1);

}



.crm-chart h3{

font-weight:900;

color:#063b2d;

margin-bottom:25px;

}
/* =====================
 ADMIN LOGIN
===================== */


.login-page{

min-height:100vh;

background:

linear-gradient(

135deg,

#063b2d,

#009957

);


display:flex;

align-items:center;

justify-content:center;

}




.login-box{


width:420px;

background:

rgba(255,255,255,.95);


padding:45px;

border-radius:25px;

text-align:center;


box-shadow:

0 25px 60px rgba(0,0,0,.35);

}



.login-logo{

width:80px;

height:80px;

background:#ffc107;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:45px;

margin:0 auto 20px;

}



.login-box h2{

font-weight:900;

color:#063b2d;

}



.login-box p{

color:#777;

}




.login-box input{


width:100%;

padding:15px;

margin-bottom:18px;

border-radius:50px;

border:1px solid #ddd;

padding-left:25px;

}



.login-box button{


width:100%;

padding:15px;

border:none;

border-radius:50px;

background:#ffc107;

font-weight:900;

color:#063b2d;

transition:.3s;

}




.login-box button:hover{


background:#063b2d;

color:white;

transform:translateY(-4px);

}
/* =================
LEAD STATUS
================= */


.status-badge{


background:#ffc107;

color:#063b2d;

padding:7px 18px;

border-radius:30px;

font-weight:900;

display:inline-block;

margin-bottom:8px;


}



.table a{


font-size:13px;

font-weight:800;

text-decoration:none;

color:#00834d;


}