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

body{
  line-height:1.6;
  background:#f4f6f8;
  color:#222;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit}

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

header{
  position:sticky;
  top:0;
  z-index:999;
  background:#fff;
  color:#0a3d62;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  flex-wrap:wrap;
}

.logo-area img{
  height:65px;
  width:auto;
}

.menu-toggle{
  display:none;
  font-size:26px;
  cursor:pointer;
}

/* NAV */

nav{
  display:flex;
  gap:15px;
}

nav a{
  color:#0a3d62;
  font-weight:bold;
  padding:6px 4px;
}

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

.hero{
  width:100%;
  min-height:380px;
  background-image:
    linear-gradient(rgba(10,61,98,0.65),rgba(10,61,98,0.65)),
    url("solar-bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  padding:90px 20px;
  text-align:center;
}

.hero-content{max-width:1100px;margin:auto}

.hero h1{font-size:42px;margin-bottom:15px}
.hero-sub{font-size:18px;margin-bottom:10px}
.hero-types{font-size:16px}

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

.section{
  background:#fff;
  margin:25px auto;
  padding:30px;
  max-width:1150px;
  border-radius:14px;
}

h2{color:#0a3d62;margin-top:0}

/* ================= GRID ================= */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  margin-top:18px;
}

.card{
  background:#f0f4f8;
  padding:22px;
  border-radius:12px;
  font-weight:normal;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  color:#000;
}

/* ================= SOLAR OPTIONS ================= */

.solar-options{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  margin-top:25px;
}

.solar-btn{
  color:#222;
  background:#f7fbff;
  padding:25px;
  border-radius:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  transition:.3s;
  animation:floatUpDown 3s ease-in-out infinite;
}

.solar-btn:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 25px rgba(0,0,0,.25);
}

.solar-btn h3{color:#0a3d62}
.solar-btn p{color:#000}

.solar-btn span{
  display:inline-block;
  margin-top:15px;
  background:#0a3d62;
  color:#fff;
  padding:8px 16px;
  border-radius:25px;
  font-size:13px;
}

/* ================= BRANDS ================= */

.brands-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:20px;
  align-items:center;
  margin-top:25px;
}

.brands-grid a{
  background:#fff;
  padding:12px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  display:flex;
  justify-content:center;
}

.brands-grid img{
  max-width:110px;
  max-height:60px;
  object-fit:contain;
}

/* ================= FOUNDER ================= */

.founder-box{
  display:flex;
  gap:30px;
  align-items:center;
  background:#f7fbff;
  padding:30px;
  border-radius:18px;
  box-shadow:0 1px 20px rgba(0,0,0,.08);
}

.founder-photo{
  width:180px;
  height:220px;
  border-radius:20px;
  overflow:hidden;
  border:4px solid #0a3d62;
  flex-shrink:0;
}

.founder-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.founder-text p{
  color:#444;
  line-height:1.7;
  margin-bottom:12px;
}

.founder-sign{
  margin-top:12px;
  color:#0a3d62;
  font-weight:bold;
}

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

footer{
  background:#0a3d62;
  color:#fff;
  padding:30px 15px;
  text-align:center;
  margin-top:40px;
}

.footer-box{
  max-width:600px;
  margin:auto;
}

/* ================= WHATSAPP ================= */

.whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  width:55px;
  height:55px;
  background:#25d366;
  color:#fff;
  border-radius:50%;
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}

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

@media(max-width:768px){

  .menu-toggle{display:block}

  nav{
    position:fixed;
    top:70px;
    right:-100%;
    background:#fff;
    width:100%;
    height:100vh;
    flex-direction:column;
    padding-top:30px;
    transition:.3s;
  }

  nav.active{right:0}

  nav a{
    padding:15px;
    border-bottom:1px solid #eee;
  }

  .hero{padding:70px 15px}
  .hero h1{font-size:28px}

  .section{margin:15px 10px;padding:20px}

  .founder-box{
    flex-direction:column;
    text-align:center;
  }

  .footer-box{width:100%}
}

/* ================= ANIMATION ================= */

@keyframes floatUpDown{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}
/* ================= GET FREE QUOTE BUTTON FIX ================= */

.quote-btn{
  display:inline-block;
  margin-top:40px;
  padding:18px 46px;
  background:linear-gradient(135deg,#25d366,#0a8f4d);
  color:#fff;
  font-size:20px;
  font-weight:bold;
  border-radius:50px;
  text-decoration:none;
  animation:pulseGlow 1.6s infinite;
  transition:0.3s ease;
  box-shadow:0 0 0 rgba(37,211,102,0.7);
}

.quote-btn:hover{
  transform:scale(1.08);
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
}

@keyframes pulseGlow{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,0.7); }
  70%{ box-shadow:0 0 0 22px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
/* ================= BRAND LOGO HOVER ANIMATION ================= */

.brands-grid a{
  background:#fff;
  padding:12px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  display:flex;
  justify-content:center;
  align-items:center;
  transition:0.35s ease;
}

.brands-grid a:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 12px 25px rgba(0,0,0,0.18);
}

.brands-grid img{
  max-width:110px;
  max-height:60px;
  object-fit:contain;
  filter:grayscale(100%);
  transition:0.35s ease;
}

.brands-grid a:hover img{
  filter:grayscale(0%);
}
/* ================= CARD HOVER ANIMATION (ALL SECTIONS) ================= */

.card{
  transition:0.35s ease;
  cursor:pointer;
}

.card:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 14px 28px rgba(0,0,0,0.18);
  background:#ffffff;
}

/* Optional: smoother on mobile touch */
@media(max-width:768px){
  .card:hover{
    transform:translateY(-6px) scale(1.02);
  }
}