/* ===================================
   SP SOLAR WATER HEATER
   STYLE.CSS - PART 1
=================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#081420;
color:#fff;
overflow-x:hidden;
line-height:1.6;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

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

header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
padding:18px 0;
transition:.4s;
}

.navbar{

width:92%;
max-width:1300px;

margin:auto;

padding:14px 22px;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(10,20,35,.75);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

}

/* ===== Premium Logo ===== */

.logo{
display:flex;
align-items:center;
gap:15px;
color:#fff;
}

.logo img{
height:70px;
width:auto;
}

.logo-text{
display:flex;
flex-direction:column;
}

.logo-text h2{
font-size:24px;
font-weight:700;
line-height:1;
margin:0;
color:#fff;
}

.logo-text span{
margin-top:6px;
font-size:11px;
letter-spacing:2px;
color:#ff9800;
font-weight:600;
}

}

.nav-links a{

color:#fff;

font-weight:500;

transition:.35s;

}

.nav-links a:hover{

color:#ff9800;

}

.call-btn{

background:#ff9800;

padding:14px 28px;

border-radius:40px;

color:#fff;

font-weight:600;

transition:.35s;

}

.call-btn:hover{

background:#ff6f00;

transform:translateY(-3px);

}

.menu-btn{

display:none;

font-size:28px;

cursor:pointer;

}

/* ================= HERO ================= */

.hero{

height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

position:relative;

background:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.72)),
url("background.jpg");

background-size:cover;

background-position:center;

}

.overlay{

position:absolute;

inset:0;

}

.hero-content{

position:relative;

z-index:5;

width:90%;

max-width:900px;

}

.experience{

display:inline-block;

padding:10px 24px;

background:rgba(255,152,0,.18);

border:1px solid rgba(255,152,0,.4);

border-radius:40px;

color:#ffb300;

margin-bottom:25px;

font-weight:600;

}

.hero h1{

font-size:72px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero h1 span{

color:#ff9800;

}

.hero p{

font-size:20px;

color:#ddd;

max-width:750px;

margin:auto;

}

.hero-buttons{

margin-top:40px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.primary-btn{

background:#ff9800;

padding:16px 38px;

border-radius:50px;

color:#fff;

font-weight:600;

transition:.35s;

}

.primary-btn:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(255,152,0,.35);

}

.secondary-btn{

padding:16px 38px;

border-radius:50px;

border:2px solid #fff;

color:#fff;

font-weight:600;

transition:.35s;

}

.secondary-btn:hover{

background:#fff;

color:#081420;

}

/* ================= STATS ================= */

.stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

width:90%;

max-width:1200px;

margin:80px auto;

}

.stat-box{

background:#0d2031;

padding:35px;

text-align:center;

border-radius:20px;

transition:.35s;

}

.stat-box:hover{

transform:translateY(-8px);

background:#10283d;

}

.stat-box h2{

font-size:42px;

color:#ff9800;

margin-bottom:10px;

}

.stat-box p{

color:#d6d6d6;

font-size:17px;

}
/* ===================================
   ABOUT SECTION
=================================== */

.about{
padding:100px 0;
}

.about .container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about-image img{
width:100%;
border-radius:25px;
box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.section-tag{
display:inline-block;
padding:8px 20px;
background:#ff9800;
color:#fff;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:15px;
}

.about-content h2{
font-size:42px;
margin-bottom:20px;
line-height:1.2;
}

.about-content p{
color:#cfcfcf;
margin-bottom:30px;
font-size:17px;
}

.about-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-bottom:35px;
}

.about-list div{
background:#0f2335;
padding:15px;
border-radius:12px;
transition:.3s;
}

.about-list div:hover{
background:#163149;
transform:translateY(-5px);
}

/* ===================================
   SECTION TITLE
=================================== */

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title span{
color:#ff9800;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
}

.section-title h2{
font-size:42px;
margin-top:10px;
}

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

.services{
padding:100px 0;
background:#0b1c2b;
}

.service-grid{
width:90%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.service-card{
background:#11283c;
padding:35px 25px;
border-radius:20px;
text-align:center;
transition:.35s;
border:1px solid rgba(255,255,255,.05);
}

.service-card:hover{
transform:translateY(-10px);
border-color:#ff9800;
box-shadow:0 20px 40px rgba(255,152,0,.15);
}

.service-card i{
font-size:50px;
color:#ff9800;
margin-bottom:20px;
}

.service-card h3{
margin-bottom:15px;
font-size:24px;
}

.service-card p{
color:#cfcfcf;
font-size:15px;
}

/* ===================================
   WHY CHOOSE US
=================================== */

.why{
padding:100px 0;
}

.why-grid{
width:90%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.why-box{
background:#102334;
padding:35px;
border-radius:20px;
transition:.3s;
text-align:center;
}

.why-box:hover{
background:#17344e;
transform:translateY(-8px);
}

.why-box h3{
margin-bottom:15px;
font-size:24px;
color:#ff9800;
}

.why-box p{
color:#d8d8d8;
}

/* ===================================
   PRODUCTS
=================================== */

.products{
padding:100px 0;
background:#0b1c2b;
}

.product-grid{
width:90%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.product-card{
background:#102334;
border-radius:20px;
overflow:hidden;
transition:.35s;
}

.product-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.product-card img{
width:100%;
height:240px;
object-fit:cover;
}

.product-card h3{
padding:20px 20px 10px;
font-size:24px;
}

.product-card p{
padding:0 20px 25px;
color:#d6d6d6;
line-height:1.7;
}
/* ===================================
   GALLERY
=================================== */

.gallery{
padding:100px 0;
}

.gallery-grid{
width:90%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.gallery-item{
overflow:hidden;
border-radius:20px;
background:#102334;
}

.gallery-item img{
width:100%;
height:280px;
object-fit:cover;
transition:.5s;
}

.gallery-item:hover img{
transform:scale(1.08);
}

/* ===================================
   TESTIMONIALS
=================================== */

.testimonials{
padding:100px 0;
background:#0b1c2b;
}

.testimonial-grid{
width:90%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.testimonial-card{
background:#102334;
padding:35px;
border-radius:20px;
transition:.35s;
border:1px solid rgba(255,255,255,.05);
}

.testimonial-card:hover{
transform:translateY(-8px);
border-color:#ff9800;
}

.testimonial-card p{
margin:20px 0;
color:#d9d9d9;
line-height:1.8;
}

.testimonial-card h4{
color:#ff9800;
}

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

.contact{
padding:100px 0;
}

.contact-box{
width:90%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
}

.contact-box h3{
font-size:32px;
margin-bottom:20px;
}

.contact-box p{
margin-bottom:18px;
color:#ddd;
line-height:1.8;
}

.contact-box form{
display:flex;
flex-direction:column;
gap:20px;
}

.contact-box input,
.contact-box textarea{

width:100%;

padding:16px 18px;

background:#102334;

border:1px solid rgba(255,255,255,.1);

border-radius:12px;

color:#fff;

font-size:16px;

outline:none;

}

.contact-box input:focus,
.contact-box textarea:focus{

border-color:#ff9800;

}

.contact-box button{

border:none;

cursor:pointer;

}

/* ===================================
   FLOATING BUTTONS
=================================== */

.floating-call,
.floating-whatsapp{

position:fixed;

right:25px;

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

color:#fff;

font-size:22px;

z-index:999;

transition:.35s;

}

.floating-call{

bottom:95px;

background:#ff9800;

}

.floating-whatsapp{

bottom:25px;

background:#25D366;

}

.floating-call:hover,
.floating-whatsapp:hover{

transform:scale(1.1);

}

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

footer{

padding:25px;

text-align:center;

background:#061019;

border-top:1px solid rgba(255,255,255,.08);

}

footer p{

color:#bbb;

font-size:15px;

}
/* ===================================
   RESPONSIVE DESIGN
=================================== */

@media (max-width:1100px){

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

.about .container,
.contact-box{

grid-template-columns:1fr;

}

.service-grid{

grid-template-columns:repeat(2,1fr);

}

.why-grid{

grid-template-columns:repeat(2,1fr);

}

.product-grid{

grid-template-columns:repeat(2,1fr);

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

.testimonial-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:768px){

.nav-links{

display:none;

}

.menu-btn{

display:block;

}

.navbar{

padding:15px 20px;

}

.logo img{

height:55px;

}

.hero{

padding:120px 20px 80px;

height:auto;

min-height:100vh;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.stats{

grid-template-columns:repeat(2,1fr);

}

.about-list{

grid-template-columns:1fr;

}

.service-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.product-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.testimonial-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:34px;

}

.about-content h2{

font-size:34px;

}

}

@media (max-width:480px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:15px;

}

.primary-btn,
.secondary-btn{

width:100%;

text-align:center;

}

.stats{

grid-template-columns:1fr;

}

.stat-box{

padding:25px;

}

.contact-box{

gap:30px;

}

.floating-call,
.floating-whatsapp{

width:52px;

height:52px;

font-size:20px;

right:18px;

}

}

/* ===================================
   SIMPLE ANIMATIONS
=================================== */

.primary-btn,
.secondary-btn,
.call-btn,
.service-card,
.product-card,
.why-box,
.stat-box,
.gallery-item,
.testimonial-card{

transition:all .35s ease;

}

html{

scroll-behavior:smooth;

}
/* ================= MOBILE MENU ================= */

@media (max-width:768px){

.nav-links{

position:absolute;

top:90px;

left:5%;

width:90%;

background:#081420;

display:flex;

flex-direction:column;

align-items:center;

padding:25px 0;

border-radius:20px;

gap:25px;

opacity:0;

visibility:hidden;

transform:translateY(-20px);

transition:.35s;

box-shadow:0 15px 40px rgba(0,0,0,.3);

}

.nav-links.active{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.nav-links li{

width:100%;

text-align:center;

}

.nav-links li a{

display:flex;

align-items:center;

justify-content:center;

width:85%;

height:58px;

margin:12px auto;

border:2px solid #ffffff;

border-radius:50px;

background:transparent;

color:#ffffff;

font-size:20px;

font-weight:600;

transition:.3s;

}

.nav-links li a:hover{

background:#ffffff;

color:#081420;

}
}
.logo{

display:flex;

align-items:center;

gap:12px;

color:#fff;

}

.logo img{

height:70px;

width:auto;

}

.logo-text h2{

font-size:24px;

font-weight:800;

line-height:1;

color:#fff;

}

.logo-text span{

display:block;

font-size:12px;

letter-spacing:2px;

color:#ff9800;

margin-top:3px;

font-weight:600;

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

.logo img{
height:65px;
}

.logo-text h2{
font-size:17px;
}

.logo-text span{
font-size:9px;
letter-spacing:1px;
}

}
.hero-features{

margin-top:35px;

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.hero-features div{

background:rgba(255,255,255,.08);

backdrop-filter:blur(10px);

padding:12px 20px;

border-radius:50px;

border:1px solid rgba(255,255,255,.12);

font-size:15px;

font-weight:600;

transition:.3s;

}

.hero-features div:hover{

background:#ff9800;

transform:translateY(-5px);

}
.hero-wave{

position:absolute;

bottom:0;

left:0;

width:100%;

line-height:0;

}

.hero-wave svg{

display:block;

width:100%;

height:100px;

}
/* ================= HERO INFO ================= */

.hero-info{

position:absolute;

bottom:-55px;

left:50%;

transform:translateX(-50%);

width:90%;

max-width:1150px;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

z-index:50;

}

.info-box{

background:rgba(8,20,32,.9);

backdrop-filter:blur(18px);

padding:28px;

text-align:center;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.info-box:hover{

transform:translateY(-8px);

border-color:#ff9800;

box-shadow:0 20px 50px rgba(255,152,0,.25);

}

.info-box h2{

font-size:42px;

color:#ff9800;

margin-bottom:10px;

}

.info-box p{

color:#ddd;

}
/* ================= OFFER POPUP ================= */

.offer-popup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.75);

backdrop-filter:blur(6px);

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

opacity:0;

visibility:hidden;

transition:.4s;

}

.offer-popup.active{

opacity:1;

visibility:visible;

}

.popup-box{

width:90%;

max-width:450px;

background:#081420;

padding:40px 30px;

border-radius:25px;

text-align:center;

border:2px solid #ff9800;

position:relative;

box-shadow:0 20px 60px rgba(255,152,0,.3);

}

.popup-box h4{

color:#ff9800;

margin-bottom:10px;

letter-spacing:2px;

}

.popup-box h1{

font-size:60px;

color:#fff;

margin-bottom:10px;

}

.popup-box h3{

color:#ff9800;

margin-bottom:20px;

}

.popup-box p{

color:#ddd;

line-height:1.8;

margin-bottom:25px;

}

.popup-btn{

display:inline-block;

background:#ff9800;

padding:15px 35px;

border-radius:50px;

color:#fff;

font-weight:700;

}

.close-popup{

position:absolute;

top:15px;

right:20px;

font-size:35px;

cursor:pointer;

color:#fff;

}