:root {
  --navy: #064783;
  --aqua: #54bedc;
  --dark: #074682;
  --text: #101010;
  --muted: #676767;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, sans-serif; color: var(--text); }
a { color: inherit; text-decoration: none; }

.header {
  height: 86px; padding: 0 1%;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10; background: white;
  border-bottom: 1px solid #e5e5e5;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 800;
  font-size: 25px;
}

.header .brand img {
  width: 58px;
  height: 58px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

footer .brand img {
  width: 100px;
  height: 100px;
  display: block;
  object-fit: contain;
}

.brand i {
  font-size: 38px;
  color: #111b34;
}

@media (max-width: 650px) {
  .header .brand {
    gap: 8px;
    font-size: 23px;
  }

  .header .brand img {
    width: 46px;
    height: 46px;
  }
}

.nav { display: flex; align-items: center; gap: 28px; font-weight: 600; }
.nav-button, .button { border-radius: 10px; font-weight: 700; }
.nav-button { background: var(--navy); color: white; padding: 15px 25px; }
.menu-button { display: none; border: 0; background: none; font-size: 25px; }

.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 70px;
  align-items: center; padding: 125px 5% 90px;
}

.tag {
  display: inline-flex; gap: 8px; padding: 6px 12px; margin: 0 0 35px;
  border: 1px solid #ddd; border-radius: 10px; color: var(--aqua); font-weight: 700;
}

.hero h1 { max-width: 720px; margin: 0 0 35px; font-size: clamp(48px, 5vw, 76px); line-height: .98; letter-spacing: -3px; }
.hero h1 span { color: var(--navy); }
.hero h1 strong { color: var(--aqua); }
.lead { font-size: 22px; color: var(--muted); }
.description { max-width: 780px; font-size: 18px; line-height: 1.55; color: var(--muted); }

.hero-actions { display: flex; gap: 18px; margin: 35px 0 55px; }
.button { display: inline-flex; gap: 8px; justify-content: center; padding: 17px 25px; }
.primary { background: var(--aqua); color: white; }
.outline { border: 2px solid var(--aqua); color: var(--aqua); }

.trust-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust-cards article {
  min-height: 155px; padding: 25px 20px; display: flex; gap: 15px; align-items: center;
  border: 1px solid #ddd; border-radius: 15px; box-shadow: 0 3px 8px #0000000d;
}
.trust-cards i { color: var(--aqua); font-size: 26px; }
.trust-cards h3 { margin: 0 0 9px; font-size: 16px; }
.trust-cards p { margin: 0; color: var(--muted); font-size: 13px; }

.hero-image {
  min-height: 460px; border-radius: 25px; position: relative; overflow: hidden;
  background: url("assets/images/home-solar.png") center/cover;
  box-shadow: 0 20px 42px #2897d433;
}

.saving-card, .bill-card {
  position: absolute; background: #fffffff2; border-radius: 15px;
  box-shadow: 0 8px 18px #0002;
}
.saving-card { top: 30px; right: 30px; width: 195px; padding: 22px; display: grid; }
.saving-card b { font-size: 48px; color: var(--aqua); }
.saving-card strong { color: var(--navy); }
.saving-card span, .bill-card span { color: var(--muted); font-size: 14px; }

.bill-card { bottom: 30px; left: 30px; width: 390px; padding: 22px; font-size: 18px; }
.bill-card b { color: var(--navy); font-size: 40px; }
.bill-card span { display: block; margin-top: 13px; }
.bill-card i { display: block; height: 10px; width: 90%; margin-top: 12px; background: var(--aqua); border-radius: 10px; }

.process { padding: 100px 4%; text-align: center; color: white; background: var(--dark); }
.dark { color: white; border-color: #b5d9ed; }
.process h2, .heading h2 { margin: 0 0 18px; font-size: clamp(38px, 4vw, 58px); letter-spacing: -2px; }
.section-text { max-width: 800px; margin: auto; font-size: 21px; line-height: 1.5; color: #dcefff; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 65px 0; text-align: left; }
.steps article { min-height: 410px; padding: 35px; border: 2px solid #c6e8f3; border-radius: 18px; display: flex; flex-direction: column; }
.steps i { color: #c7edfb; font-size: 32px; margin-bottom: 50px; }
.steps span { font-weight: 800; color: #d9f3ff; }
.steps h3 { margin: 18px 0; font-size: 25px; }
.steps p { margin-top: auto; line-height: 1.5; font-size: 17px; }
.aqua { background: var(--aqua); color: var(--navy); }

.calculator { padding: 110px 5%; }
.heading { max-width: 900px; margin: 0 auto 60px; text-align: center; }
.heading > p { color: var(--navy); font-weight: 700; }
.heading > span { color: var(--muted); font-size: 20px; line-height: 1.5; }

.calculator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
#solar-form, .result-box { padding: 35px; border: 1px solid #ddd; border-radius: 18px; }
#solar-form h3 { margin: 0; font-size: 29px; }
#solar-form > p { color: var(--muted); }
#solar-form label { display: block; margin: 22px 0; font-weight: 700; }
input, select {
  width: 100%; padding: 16px; margin-top: 10px; border: 1px solid #ddd;
  border-radius: 10px; font: inherit;
}
.calculate-button { width: 100%; border: 0; border-radius: 10px; padding: 18px; color: white; background: var(--navy); font: 700 17px Inter; }
.result-box { display: grid; place-items: center; text-align: center; min-height: 400px; border-style: dashed; }
.result-box > div { width: 100%; }
.result-box > div > i { color: #bbb; font-size: 60px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats div { padding: 17px 8px; border-radius: 10px; background: #edf9fc; }
.stats small { display: block; color: var(--muted); }
.stats b { display: block; margin-top: 8px; color: var(--navy); font-size: 19px; }

footer { padding: 75px 5% 30px; border-top: 1px solid #ddd; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 45px; }
.footer-grid h3 { margin-top: 0; }
.footer-grid p, .footer-grid a { display: block; color: var(--muted); line-height: 1.55; margin: 0 0 12px; }
.copyright { margin: 45px 0 0; padding-top: 28px; border-top: 1px solid #ddd; color: var(--muted); }

.whatsapp {
  position: fixed; right: 25px; bottom: 24px; z-index: 20;
  width: 67px; height: 67px; display: grid; place-items: center;
  border-radius: 50%; background: #20cf65; color: white; font-size: 34px;
  box-shadow: 0 6px 18px #0004;
}

@media (max-width: 900px) {
  .hero, .calculator-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .trust-cards { max-width: 750px; }
  .nav { gap: 12px; font-size: 13px; }
}

@media (max-width: 650px) {
  .header { height: 72px; padding: 0 20px; }
  .brand { font-size: 20px; }
  .brand i { font-size: 30px; }
  .menu-button { display: block; }

  .nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    padding: 20px; background: white; box-shadow: 0 8px 16px #0002;
    flex-direction: column; align-items: stretch;
  }
  .nav.open { display: flex; }

  .hero { padding: 65px 23px; gap: 40px; }
  .hero-actions, .trust-cards, .steps, .footer-grid { grid-template-columns: 1fr; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-image { min-height: 330px; }
  .bill-card { left: 17px; bottom: 17px; width: calc(100% - 34px); }
  .saving-card { right: 17px; top: 17px; width: 145px; }
  .steps article { min-height: 290px; }
  .calculator, .process { padding: 65px 23px; }
  .stats { grid-template-columns: 1fr; }
}
.residential-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 115px 5%;
  background: #f8fcff;
}

.residential-hero h1 {
  margin: 0 0 25px;
  font-size: clamp(44px, 5vw, 70px);
  line-height: 1;
  letter-spacing: -3px;
}

.residential-hero h1 span {
  color: #064783;
}

.residential-hero p:not(.tag) {
  max-width: 650px;
  margin: 0 0 35px;
  color: #676767;
  font-size: 18px;
  line-height: 1.6;
}

.residential-image {
  min-height: 450px;
  position: relative;
  border-radius: 24px;
  background:
    linear-gradient(135deg, #06478333, #54bedc22),
    url("assets/images/residential-solar.png") center/cover;
  box-shadow: 0 20px 42px #2897d433;
}

.image-label {
  position: absolute;
  left: 28px;
  bottom: 28px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #fffffff2;
  color: #064783;
  font-weight: 700;
  box-shadow: 0 5px 15px #0002;
}

.image-label i {
  margin-right: 8px;
  color: #54bedc;
}

.residential-section,
.residential-process,
.residential-cta {
  padding: 105px 5%;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.benefits-grid article {
  min-height: 280px;
  padding: 30px;
  border: 1px solid #dedede;
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 12px #0000000d;
}

.benefits-grid i {
  color: #54bedc;
  font-size: 32px;
}

.benefits-grid h3 {
  margin: 28px 0 15px;
  font-size: 22px;
}

.benefits-grid p {
  margin: 0;
  color: #676767;
  line-height: 1.55;
}

.residential-process {
  background: #064783;
  color: white;
}

.residential-process .heading p,
.residential-process .heading span {
  color: #d9f3ff;
}

.residential-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  max-width: 1250px;
  margin: 55px auto 0;
}

.residential-steps article {
  padding: 35px;
  border: 1px solid #b9e3f2;
  border-radius: 18px;
}

.residential-steps span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: #54bedc;
  color: #064783;
  font-weight: 800;
  font-size: 20px;
}

.residential-steps h3 {
  margin: 25px 0 15px;
  font-size: 24px;
}

.residential-steps p {
  margin: 0;
  color: #e2f5ff;
  line-height: 1.55;
}

.residential-cta {
  text-align: center;
  background: #f8fcff;
}

.residential-cta h2 {
  margin: 0 0 18px;
  font-size: clamp(38px, 4vw, 56px);
  letter-spacing: -2px;
}

.residential-cta > p:not(.tag) {
  margin: 0 auto 30px;
  max-width: 620px;
  color: #676767;
  font-size: 18px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .residential-hero {
    grid-template-columns: 1fr;
  }

  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .residential-hero,
  .residential-section,
  .residential-process,
  .residential-cta {
    padding: 70px 23px;
  }

  .residential-image {
    min-height: 320px;
  }

  .benefits-grid,
  .residential-steps {
    grid-template-columns: 1fr;
  }
}
.amc-hero {
  min-height: 470px;
  padding: 110px 12%;
  display: flex;
  align-items: center;
  color: white;

  background-image:
    linear-gradient(
      90deg,
      rgba(6, 71, 131, 0.82),
      rgba(16, 148, 208, 0.35)
    ),
    url("assets/images/amc-solar-care.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.amc-hero > div { max-width: 820px; }
.amc-tag { color: white; border-color: #ffffff99; }
.amc-hero h1 { font-size: clamp(46px, 5vw, 76px); margin: 0 0 20px; letter-spacing: -3px; }
.amc-hero p:not(.tag) { max-width: 760px; font-size: 20px; line-height: 1.55; }

.amc-section { padding: 95px 8%; }
.amc-section > h2 { font-size: clamp(35px, 4vw, 55px); margin: 0 0 20px; letter-spacing: -2px; }
.wide-text { max-width: 1000px; color: #676767; font-size: 18px; line-height: 1.65; }
.section-intro { color: #676767; font-size: 18px; }

.amc-components, .pricing-box {
  max-width: 1200px;
  margin-top: 38px;
  padding: 32px;
  border: 1px solid #dedede;
  border-radius: 16px;
  background: white;
}

.amc-components h3, .pricing-box h3 { margin: 0 0 8px; font-size: 26px; }
.amc-components > p, .pricing-box > p { color: #676767; }

.component-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 45px;
  margin-top: 35px;
}

.component-list span { font-size: 16px; }
.component-list i { margin-right: 10px; color: #18a56c; font-size: 21px; }

.amc-benefits { background: #f8fcff; }

.pricing-box table {
  width: 100%;
  margin: 25px 0;
  border-collapse: collapse;
}

.pricing-box th, .pricing-box td {
  padding: 16px;
  border-bottom: 1px solid #dedede;
  text-align: left;
}

.pricing-box th { background: #064783; color: white; }
.pricing-box tr:last-child td { border-bottom: 0; }

.amc-cta {
  padding: 100px 8%;
  text-align: center;
  color: white;
  background: #064783;
}

.amc-cta h2 { margin: 0 0 18px; font-size: clamp(38px, 4vw, 58px); }
.amc-cta > p:not(.tag) { max-width: 680px; margin: 0 auto 30px; color: #e2f5ff; font-size: 18px; }

.amc-form {
  max-width: 1000px;
  margin: auto;
  padding: 35px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 25px;
  border: 1px solid #dedede;
  border-radius: 18px;
}

.amc-form label { display: block; margin: 12px 0; font-weight: 700; }
.amc-form textarea {
  width: 100%;
  min-height: 130px;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font: inherit;
  resize: vertical;
}

.full-width { grid-column: 1 / -1; }
.form-message { margin: 0; color: #14854f; font-weight: 700; text-align: center; }

@media (max-width: 650px) {
  .amc-hero, .amc-section, .amc-cta { padding: 70px 23px; }
  .component-list, .amc-form { grid-template-columns: 1fr; }
  .amc-form { padding: 25px 20px; }
}
.consultancy-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 110px 8%;
  background: #f8fcff;
}

.consultancy-hero h1 {
  margin: 0 0 25px;
  font-size: clamp(45px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -3px;
}

.consultancy-hero h1 span {
  color: #064783;
}

.consultancy-hero p:not(.tag) {
  max-width: 650px;
  margin: 0 0 35px;
  color: #676767;
  font-size: 18px;
  line-height: 1.6;
}

.consultancy-image {
  min-height: 430px;
  position: relative;
  border-radius: 24px;
  background:
    linear-gradient(135deg, #06478355, #54bedc33),
    url("assets/images/solar-consultancy.png") center/cover;
  box-shadow: 0 20px 42px #2897d433;
}

.expert-card {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 20px;
  border-radius: 14px;
  background: #fffffff2;
  box-shadow: 0 6px 18px #0002;
}

.expert-card i {
  color: #54bedc;
  font-size: 31px;
}

.expert-card b,
.expert-card span {
  display: block;
}

.expert-card span {
  margin-top: 5px;
  color: #676767;
  font-size: 14px;
}

.consultancy-main,
.expect-section {
  padding: 100px 8%;
}

.consultancy-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 45px;
  max-width: 1250px;
  margin: auto;
}

.consultancy-form {
  padding: 35px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 25px;
  border: 1px solid #dedede;
  border-radius: 18px;
}

.consultancy-form label {
  display: block;
  margin: 12px 0;
  font-weight: 700;
}

.consultancy-form textarea {
  width: 100%;
  min-height: 130px;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font: inherit;
  resize: vertical;
}

.consultancy-contact {
  padding: 35px;
  border-radius: 18px;
  color: white;
  background: #064783;
}

.consultancy-contact h3 {
  margin-top: 0;
  font-size: 27px;
}

.consultancy-contact > a:not(.button),
.consultancy-contact > div {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin: 28px 0;
}

.consultancy-contact > a:not(.button) i,
.consultancy-contact > div i {
  color: #54bedc;
  font-size: 22px;
}

.consultancy-contact b,
.consultancy-contact span {
  display: block;
}

.consultancy-contact b {
  margin-bottom: 6px;
}

.expect-section {
  background: #f8fcff;
}

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

.expect-grid article {
  min-height: 280px;
  padding: 32px;
  border: 1px solid #dedede;
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 12px #0000000d;
}

.expect-grid i {
  color: #54bedc;
  font-size: 32px;
}

.expect-grid h3 {
  margin: 28px 0 14px;
  font-size: 23px;
}

.expect-grid p {
  margin: 0;
  color: #676767;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .consultancy-hero,
  .consultancy-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .consultancy-hero,
  .consultancy-main,
  .expect-section {
    padding: 70px 23px;
  }

  .consultancy-image {
    min-height: 320px;
  }

  .consultancy-form,
  .expect-grid {
    grid-template-columns: 1fr;
  }

  .consultancy-form {
    padding: 25px 20px;
  }
}
.solutions-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 110px 8%;
  background: #f8fcff;
}

.solutions-hero h1 {
  margin: 0 0 25px;
  font-size: clamp(45px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -3px;
}

.solutions-hero h1 span {
  color: #064783;
}

.solutions-hero p:not(.tag) {
  max-width: 650px;
  margin: 0 0 35px;
  color: #676767;
  font-size: 18px;
  line-height: 1.6;
}

.solutions-image {
  min-height: 430px;
  position: relative;
  border-radius: 24px;
  background:
    linear-gradient(135deg, #06478355, #54bedc33),
    url("assets/images/solar-solutions.png") center/cover;
  box-shadow: 0 20px 42px #2897d433;
}

.solution-image-card {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 20px;
  border-radius: 14px;
  background: #fffffff2;
  box-shadow: 0 6px 18px #0002;
}

.solution-image-card i {
  color: #54bedc;
  font-size: 32px;
}

.solution-image-card b,
.solution-image-card span {
  display: block;
}

.solution-image-card span {
  margin-top: 5px;
  color: #676767;
  font-size: 14px;
}

.solutions-main,
.solution-steps,
.solutions-cta {
  padding: 100px 8%;
}

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

.solutions-grid article {
  min-height: 300px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  border: 1px solid #dedede;
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 12px #0000000d;
}

.solutions-grid article > i {
  color: #54bedc;
  font-size: 32px;
}

.solutions-grid h3 {
  margin: 26px 0 14px;
  font-size: 23px;
}

.solutions-grid p {
  margin: 0 0 25px;
  color: #676767;
  line-height: 1.55;
}

.solutions-grid article > a:not(.button) {
  margin-top: auto;
  color: #064783;
  font-weight: 700;
}

.solution-highlight {
  background: #064783 !important;
  color: white;
}

.solution-highlight > i,
.solution-highlight p {
  color: #d9f3ff !important;
}

.solution-steps {
  color: white;
  background: #064783;
}

.solution-steps .heading p,
.solution-steps .heading span {
  color: #d9f3ff;
}

.solution-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1250px;
  margin: auto;
}

.solution-steps-grid article {
  padding: 35px;
  border: 1px solid #b9e3f2;
  border-radius: 18px;
}

.solution-steps-grid span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: #54bedc;
  color: #064783;
  font-weight: 800;
}

.solution-steps-grid h3 {
  margin: 25px 0 15px;
  font-size: 24px;
}

.solution-steps-grid p {
  margin: 0;
  color: #e2f5ff;
  line-height: 1.55;
}

.solutions-cta {
  text-align: center;
  background: #f8fcff;
}

.solutions-cta h2 {
  margin: 0 0 18px;
  font-size: clamp(38px, 4vw, 58px);
  letter-spacing: -2px;
}

.solutions-cta > p:not(.tag) {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #676767;
  font-size: 18px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .solutions-hero {
    grid-template-columns: 1fr;
  }

  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .solutions-hero,
  .solutions-main,
  .solution-steps,
  .solutions-cta {
    padding: 70px 23px;
  }

  .solutions-image {
    min-height: 320px;
  }

  .solutions-grid,
  .solution-steps-grid {
    grid-template-columns: 1fr;
  }
}
.commercial-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 110px 8%;
  background: #f8fcff;
}

.commercial-hero h1 {
  margin: 0 0 25px;
  font-size: clamp(45px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -3px;
}

.commercial-hero h1 span {
  color: #064783;
}

.commercial-hero p:not(.tag) {
  max-width: 650px;
  margin: 0 0 35px;
  color: #676767;
  font-size: 18px;
  line-height: 1.6;
}

.commercial-image {
  min-height: 430px;
  position: relative;
  border-radius: 24px;
  background:
    linear-gradient(135deg, #06478355, #54bedc33),
    url("assets/images/commercial-solar.png") center/cover;
  box-shadow: 0 20px 42px #2897d433;
}

.commercial-image-card {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 20px;
  border-radius: 14px;
  background: #fffffff2;
  box-shadow: 0 6px 18px #0002;
}

.commercial-image-card i {
  color: #54bedc;
  font-size: 32px;
}

.commercial-image-card b,
.commercial-image-card span {
  display: block;
}

.commercial-image-card span {
  margin-top: 5px;
  color: #676767;
  font-size: 14px;
}

.commercial-section,
.business-types,
.commercial-cta {
  padding: 100px 8%;
}

.commercial-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1350px;
  margin: auto;
}

.commercial-benefits article,
.business-grid article {
  min-height: 280px;
  padding: 32px;
  border: 1px solid #dedede;
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 12px #0000000d;
}

.commercial-benefits i,
.business-grid i {
  color: #54bedc;
  font-size: 32px;
}

.commercial-benefits h3,
.business-grid h3 {
  margin: 26px 0 14px;
  font-size: 22px;
}

.commercial-benefits p,
.business-grid p {
  margin: 0;
  color: #676767;
  line-height: 1.55;
}

.business-types {
  background: #f8fcff;
}

.business-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1350px;
  margin: auto;
}

.commercial-cta {
  text-align: center;
  color: white;
  background: #064783;
}

.commercial-cta h2 {
  margin: 0 0 18px;
  font-size: clamp(38px, 4vw, 58px);
  letter-spacing: -2px;
}

.commercial-cta > p:not(.tag) {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d9f3ff;
  font-size: 18px;
  line-height: 1.5;
}

.commercial-cta .tag {
  color: white;
  border-color: #b9e3f2;
}

@media (max-width: 900px) {
  .commercial-hero {
    grid-template-columns: 1fr;
  }

  .commercial-benefits,
  .business-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .commercial-hero,
  .commercial-section,
  .business-types,
  .commercial-cta {
    padding: 70px 23px;
  }

  .commercial-image {
    min-height: 320px;
  }

  .commercial-benefits,
  .business-grid {
    grid-template-columns: 1fr;
  }
}
.industrial-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 110px 8%;
  background: #f8fcff;
}

.industrial-hero h1 {
  margin: 0 0 25px;
  font-size: clamp(45px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -3px;
}

.industrial-hero h1 span {
  color: #064783;
}

.industrial-hero p:not(.tag) {
  max-width: 650px;
  margin: 0 0 35px;
  color: #676767;
  font-size: 18px;
  line-height: 1.6;
}

.industrial-image {
  min-height: 430px;
  position: relative;
  border-radius: 24px;
  background:
    linear-gradient(135deg, #06478366, #54bedc33),
    url("assets/images/industrial-solar.png") center/cover;
  box-shadow: 0 20px 42px #2897d433;
}

.industrial-image-card {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 20px;
  border-radius: 14px;
  background: #fffffff2;
  box-shadow: 0 6px 18px #0002;
}

.industrial-image-card i {
  color: #54bedc;
  font-size: 32px;
}

.industrial-image-card b,
.industrial-image-card span {
  display: block;
}

.industrial-image-card span {
  margin-top: 5px;
  color: #676767;
  font-size: 14px;
}

.industrial-section,
.industrial-applications,
.industrial-cta {
  padding: 100px 8%;
}

.industrial-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1350px;
  margin: auto;
}

.industrial-features article,
.application-grid article {
  min-height: 280px;
  padding: 32px;
  border: 1px solid #dedede;
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 12px #0000000d;
}

.industrial-features i,
.application-grid i {
  color: #54bedc;
  font-size: 32px;
}

.industrial-features h3,
.application-grid h3 {
  margin: 26px 0 14px;
  font-size: 22px;
}

.industrial-features p,
.application-grid p {
  margin: 0;
  color: #676767;
  line-height: 1.55;
}

.industrial-applications {
  background: #f8fcff;
}

.application-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1350px;
  margin: auto;
}

.industrial-cta {
  text-align: center;
  color: white;
  background: #064783;
}

.industrial-cta h2 {
  margin: 0 0 18px;
  font-size: clamp(38px, 4vw, 58px);
  letter-spacing: -2px;
}

.industrial-cta > p:not(.tag) {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d9f3ff;
  font-size: 18px;
  line-height: 1.5;
}

.industrial-cta .tag {
  color: white;
  border-color: #b9e3f2;
}

@media (max-width: 900px) {
  .industrial-hero {
    grid-template-columns: 1fr;
  }

  .industrial-features,
  .application-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .industrial-hero,
  .industrial-section,
  .industrial-applications,
  .industrial-cta {
    padding: 70px 23px;
  }

  .industrial-image {
    min-height: 320px;
  }

  .industrial-features,
  .application-grid {
    grid-template-columns: 1fr;
  }
}
.ongrid-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 110px 8%;
  background: #f8fcff;
}

.ongrid-hero h1 {
  margin: 0 0 25px;
  font-size: clamp(45px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -3px;
}

.ongrid-hero h1 span { color: #064783; }

.ongrid-hero p:not(.tag) {
  max-width: 650px;
  margin: 0 0 35px;
  color: #676767;
  font-size: 18px;
  line-height: 1.6;
}

.ongrid-image {
  min-height: 430px;
  position: relative;
  border-radius: 24px;
  background:
    linear-gradient(135deg, #06478355, #54bedc33),
    url("assets/images/on-grid-solar.png") center/cover;
  box-shadow: 0 20px 42px #2897d433;
}

.ongrid-image-card {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 20px;
  border-radius: 14px;
  background: #fffffff2;
  box-shadow: 0 6px 18px #0002;
}

.ongrid-image-card i,
.ongrid-benefits i,
.usecase-grid i {
  color: #54bedc;
  font-size: 32px;
}

.ongrid-image-card b,
.ongrid-image-card span {
  display: block;
}

.ongrid-image-card span {
  margin-top: 5px;
  color: #676767;
  font-size: 14px;
}

.ongrid-section,
.ongrid-benefit-section,
.ongrid-cta {
  padding: 100px 8%;
}

.ongrid-steps,
.ongrid-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1250px;
  margin: auto;
}

.ongrid-steps article {
  padding: 35px;
  border: 1px solid #dedede;
  border-radius: 18px;
  background: white;
  box-shadow: 0 4px 12px #0000000d;
}

.ongrid-steps span {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 50%;
  background: #54bedc;
  color: #064783;
  font-weight: 800;
  font-size: 20px;
}

.ongrid-steps h3,
.ongrid-benefits h3,
.usecase-grid h3 {
  margin: 25px 0 14px;
  font-size: 23px;
}

.ongrid-steps p,
.ongrid-benefits p,
.usecase-grid p {
  margin: 0;
  color: #676767;
  line-height: 1.55;
}

.ongrid-benefit-section {
  background: #f8fcff;
}

.ongrid-benefits article,
.usecase-grid article {
  min-height: 250px;
  padding: 32px;
  border: 1px solid #dedede;
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 12px #0000000d;
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1350px;
  margin: auto;
}

.ongrid-cta {
  text-align: center;
  color: white;
  background: #064783;
}

.ongrid-cta h2 {
  margin: 0 0 18px;
  font-size: clamp(38px, 4vw, 58px);
  letter-spacing: -2px;
}

.ongrid-cta > p:not(.tag) {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d9f3ff;
  font-size: 18px;
  line-height: 1.5;
}

.ongrid-cta .tag {
  color: white;
  border-color: #b9e3f2;
}

@media (max-width: 900px) {
  .ongrid-hero { grid-template-columns: 1fr; }
  .ongrid-steps,
  .ongrid-benefits,
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  .ongrid-hero,
  .ongrid-section,
  .ongrid-benefit-section,
  .ongrid-cta { padding: 70px 23px; }

  .ongrid-image { min-height: 320px; }

  .ongrid-steps,
  .ongrid-benefits,
  .usecase-grid { grid-template-columns: 1fr; }
}
.offgrid-hero {
  background: #f7fcf8;
}

.offgrid-hero h1 span {
  color: #16834d;
}

.offgrid-image {
  background:
    linear-gradient(135deg, #0b613d55, #a8d95c33),
    url("assets/images/off-grid-solar.png") center/cover;
}
.hybrid-hero {
  background: #faf8ff;
}

.hybrid-hero h1 span {
  color: #6b4bb8;
}

.hybrid-image {
  background:
    linear-gradient(135deg, #4d328055, #54bedc33),
    url("assets/images/hybrid-solar.png") center/cover;
}
.water-pump-hero {
  background: #f8fcf7;
}

.water-pump-hero h1 span {
  color: #188a6f;
}

.water-pump-image {
  background:
    linear-gradient(135deg, #087a6355, #64c8d933),
    url("assets/images/solar-water-pump.png") center/cover;
}
.atta-hero {
  background: #fffaf1;
}

.atta-hero h1 span {
  color: #b87518;
}

.atta-image {
  background:
    linear-gradient(135deg, #a8612055, #f0c55333),
    url("assets/images/solar-atta-chakki.png") center/cover;
}
.partner-hero {
  background: #f8fbff;
}

.partner-hero h1 span {
  color: #0a7a9f;
}

.partner-image {
  background:
    linear-gradient(135deg, #075a8055, #52bddc33),
    url("assets/images/trusted-partner.png") center/cover;
}

.partner-note {
  margin: 5px 0 15px;
  color: #676767;
  font-size: 14px;
}

.expect-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .expect-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .expect-grid {
    grid-template-columns: 1fr;
  }
}
.careers-hero {
  padding: 110px 8%;
  text-align: center;
  color: white;
  background:
    linear-gradient(135deg, #064783e6, #1597bdd6),
    url("assets/images/careers-solar.png") center/cover;
}

.careers-hero .tag {
  color: white;
  border-color: #ffffff99;
}

.careers-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(45px, 5vw, 72px);
  letter-spacing: -3px;
}

.careers-hero h1 span {
  color: #8fe3fa;
}

.careers-hero > p:not(.tag) {
  margin: 0;
  font-size: 20px;
}

.careers-main {
  max-width: 1200px;
  margin: auto;
  padding: 95px 8%;
}

.careers-notice {
  padding: 45px;
  text-align: center;
  border: 1px solid #dedede;
  border-radius: 18px;
  background: #f8fcff;
}

.careers-notice > i {
  color: #54bedc;
  font-size: 48px;
}

.careers-notice h2 {
  margin: 22px 0 16px;
  font-size: 30px;
}

.careers-notice p {
  max-width: 850px;
  margin: 15px auto;
  color: #676767;
  line-height: 1.6;
}

.careers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin: 35px 0;
}

.careers-grid article {
  padding: 35px;
  border: 1px solid #dedede;
  border-radius: 18px;
  background: white;
  box-shadow: 0 4px 12px #0000000d;
}

.careers-grid i {
  color: #54bedc;
  font-size: 31px;
}

.careers-grid h2 {
  margin: 22px 0;
  font-size: 26px;
}

.careers-grid ul {
  margin: 0;
  padding-left: 20px;
  color: #676767;
  line-height: 2;
}

.careers-contact {
  padding: 55px 25px;
  text-align: center;
  color: white;
  border-radius: 18px;
  background: #064783;
}

.careers-contact h2 {
  margin: 0 0 14px;
  font-size: 32px;
}

.careers-contact p {
  margin: 0 0 25px;
  color: #d9f3ff;
}

@media (max-width: 650px) {
  .careers-hero,
  .careers-main {
    padding: 70px 23px;
  }

  .careers-notice {
    padding: 30px 22px;
  }

  .careers-grid {
    grid-template-columns: 1fr;
  }
}
.more-dropdown {
  position: relative;
}

.more-dropdown summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.more-dropdown summary::-webkit-details-marker {
  display: none;
}

.more-dropdown summary i {
  margin-left: 5px;
  font-size: 12px;
}

.more-menu {
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 30;
  min-width: 180px;
  padding: 9px;
  display: grid;
  border: 1px solid #dedede;
  border-radius: 10px;
  background: white;
  box-shadow: 0 8px 20px #0000001a;
}

.more-menu a {
  padding: 10px;
  border-radius: 6px;
  color: #333;
  font-size: 14px;
}

.more-menu a:hover {
  color: #064783;
  background: #edf9fc;
}

@media (max-width: 650px) {
  .more-dropdown summary {
    padding: 12px 0;
  }

  .more-menu {
    position: static;
    margin: 0 0 5px 15px;
    box-shadow: none;
  }
}
.nav-dropdown {
  position: relative;
}

.nav-dropdown summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown summary i {
  margin-left: 5px;
  font-size: 12px;
}

.dropdown-menu {
  position: absolute;
  top: 30px;
  left: -15px;
  z-index: 30;
  min-width: 220px;
  padding: 9px;
  display: grid;
  border: 1px solid #dedede;
  border-radius: 10px;
  background: white;
  box-shadow: 0 8px 20px #0000001a;
}

.dropdown-menu a {
  padding: 10px;
  border-radius: 6px;
  color: #333;
  font-size: 14px;
}

.dropdown-menu a:hover {
  color: #064783;
  background: #edf9fc;
}

@media (max-width: 650px) {
  .nav-dropdown summary {
    padding: 12px 0;
  }

  .dropdown-menu {
    position: static;
    margin: 0 0 5px 15px;
    box-shadow: none;
  }
}
/* Hide the browser's default dropdown triangle */
.site-dropdown summary {
  list-style: none !important;
}

.site-dropdown summary::-webkit-details-marker {
  display: none !important;
}

.site-dropdown summary::marker {
  content: "" !important;
  font-size: 0 !important;
}
/* Final dropdown layout fix */
.site-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.site-dropdown > .site-dropdown-menu {
  display: none;
  position: absolute;
  top: 32px;
  left: -15px;
  z-index: 100;
  min-width: 220px;
  padding: 9px;
  border: 1px solid #dedede;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.site-dropdown[open] > .site-dropdown-menu {
  display: grid;
}

.site-dropdown-menu a {
  display: block;
  padding: 10px;
  border-radius: 6px;
  color: #333;
  font-size: 14px;
  white-space: nowrap;
}

.site-dropdown-menu a:hover {
  color: #064783;
  background: #edf9fc;
}

.dropdown-right {
  right: 0;
  left: auto;
  min-width: 180px;
}

@media (max-width: 650px) {
  .site-dropdown > .site-dropdown-menu {
    position: static;
    margin: 0 0 5px 15px;
    box-shadow: none;
  }
}
/* =========================
   MODERN SOLAR THEME UPDATE
   ========================= */

:root {
  --navy: #063f73;
  --aqua: #39bce3;
  --solar-gold: #f7b928;
  --solar-green: #16a36a;
  --ink: #102033;
  --muted: #627185;
  --surface: #ffffff;
  --soft-blue: #effaff;
  --line: #dceaf1;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 10% 0%, #e7f9ff 0, transparent 26%),
    radial-gradient(circle at 90% 25%, #fff5d6 0, transparent 22%),
    #f8fbfd;
  color: var(--ink);
}

::selection {
  color: white;
  background: var(--aqua);
}

/* Header and navigation */

.header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(6, 63, 115, 0.1);
  box-shadow: 0 6px 24px rgba(8, 50, 84, 0.08);
}

.brand {
  letter-spacing: -1px;
}

.brand i {
  color: var(--solar-gold);
  filter: drop-shadow(0 4px 5px rgba(247, 185, 40, 0.25));
}

.nav > a,
.site-dropdown summary {
  position: relative;
  color: var(--ink);
  transition: color 0.2s ease;
}

.nav > a:hover,
.site-dropdown summary:hover {
  color: var(--aqua);
}

.nav > a:not(.nav-button)::after,
.site-dropdown summary::after {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 2px;
  content: "";
  border-radius: 10px;
  background: var(--solar-gold);
  transition: width 0.2s ease;
}

.nav > a:not(.nav-button):hover::after,
.site-dropdown summary:hover::after {
  width: 100%;
}

.nav-button {
  background: linear-gradient(135deg, #07548d, #0877b6);
  box-shadow: 0 8px 18px rgba(5, 76, 133, 0.22);
}

.nav-button:hover {
  background: linear-gradient(135deg, #0877b6, #39bce3);
}

/* Buttons */

.button,
.calculate-button {
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover,
.calculate-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px rgba(4, 68, 113, 0.2);
}

.primary {
  background: linear-gradient(135deg, #28b9df, #0782bd);
}

.outline {
  border-color: var(--aqua);
  background: rgba(255, 255, 255, 0.65);
}

.calculate-button {
  background: linear-gradient(135deg, #063f73, #087db8);
}


.tag,
.eyebrow {
  border-color: rgba(57, 188, 227, 0.35);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 12px rgba(5, 68, 113, 0.06);
}

.heading > p {
  color: #0782bd;
}

.heading h2,
.section-heading h2 {
  color: var(--navy);
}

.heading h2::after,
.section-heading h2::after {
  display: block;
  width: 58px;
  height: 4px;
  margin: 16px auto 0;
  content: "";
  border-radius: 99px;
  background: linear-gradient(90deg, var(--solar-gold), var(--aqua));
}


.trust-cards article,
.benefits-grid article,
.expect-grid article,
.commercial-benefits article,
.business-grid article,
.industrial-features article,
.application-grid article,
.ongrid-steps article,
.ongrid-benefits article,
.usecase-grid article,
.solutions-grid article,
.step-card,
.card {
  border-color: rgba(6, 63, 115, 0.1);
  box-shadow: 0 8px 22px rgba(8, 50, 84, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.trust-cards article:hover,
.benefits-grid article:hover,
.expect-grid article:hover,
.commercial-benefits article:hover,
.business-grid article:hover,
.industrial-features article:hover,
.application-grid article:hover,
.ongrid-steps article:hover,
.ongrid-benefits article:hover,
.usecase-grid article:hover,
.solutions-grid article:hover,
.step-card:hover,
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 32px rgba(8, 50, 84, 0.14);
}

.trust-cards article i,
.benefits-grid article > i,
.expect-grid article > i,
.commercial-benefits article > i,
.business-grid article > i,
.industrial-features article > i,
.application-grid article > i,
.ongrid-benefits article > i,
.usecase-grid article > i,
.solutions-grid article > i {
  color: var(--solar-gold);
}


.hero {
  position: relative;
}

.hero h1 strong {
    background: linear-gradient(90deg, #0b8bc2, #56d0ef);
    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


.hero-image,
.hero-visual {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 24px 55px rgba(5, 93, 145, 0.22);
}

.saving-card,
.bill-card,
.saving-badge,
.zero-bill {
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
}

#solar-form,
.calculator-form,
.amc-form,
.consultancy-form,
.result-box,
.calculator-result {
  border-color: rgba(6, 63, 115, 0.12);
  box-shadow: 0 10px 28px rgba(8, 50, 84, 0.08);
}

input,
select,
textarea {
  border-color: #d7e7ee !important;
  background: #fbfeff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--aqua) !important;
  box-shadow: 0 0 0 4px rgba(57, 188, 227, 0.16);
}

.result-box,
.calculator-result {
  background:
    radial-gradient(circle at 80% 10%, #e0f8ff, transparent 36%),
    #ffffff;
}

.process,
.section-dark,
.solution-steps,
.residential-process,
.commercial-cta,
.industrial-cta,
.ongrid-cta,
.amc-cta,
.careers-contact {
  background:
    radial-gradient(circle at 12% 0%, rgba(57, 188, 227, 0.26), transparent 28%),
    linear-gradient(135deg, #042f58, #075e96);
}

.process .section-heading h2,
.section-dark .section-heading h2,
.solution-steps .heading h2,
.residential-process .heading h2,
.commercial-cta h2,
.industrial-cta h2,
.ongrid-cta h2,
.amc-cta h2,
.careers-contact h2 {
  color: white;
}

.site-dropdown-menu {
  border-color: rgba(6, 63, 115, 0.12);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 15px 34px rgba(5, 52, 86, 0.16);
}

.site-dropdown-menu a {
  font-weight: 500;
}

.site-dropdown-menu a:hover {
  background: linear-gradient(90deg, #eafaff, #fff9e9);
}

footer {
  background:
    linear-gradient(180deg, #ffffff, #edf8fc);
}

.whatsapp {
  background: linear-gradient(135deg, #2bd76d, #11a94c);
  box-shadow: 0 10px 24px rgba(18, 169, 76, 0.3);
  transition: transform 0.2s ease;
}

.whatsapp:hover {
  transform: scale(1.1);
}

@media (max-width: 650px) {
  .header {
    background: rgba(255, 255, 255, 0.97);
  }

  .hero h1 {
    letter-spacing: -2px;
  }

  .heading h2::after,
  .section-heading h2::after {
    margin-top: 12px;
  }

  .trust-cards article:hover,
  .benefits-grid article:hover,
  .expect-grid article:hover,
  .commercial-benefits article:hover,
  .business-grid article:hover,
  .industrial-features article:hover,
  .application-grid article:hover,
  .ongrid-steps article:hover,
  .ongrid-benefits article:hover,
  .usecase-grid article:hover,
  .solutions-grid article:hover {
    transform: none;
  }
}

.careplus-hero {
  min-height: 560px;
  padding: 120px 8%;
  display: flex;
  align-items: center;
  color: white;
  background:
    linear-gradient(
      100deg,
      rgba(3, 48, 86, 0.86),
      rgba(5, 113, 157, 0.42)
    ),
    url("assets/images/amc-solar-care.png") center / cover no-repeat;
}

.careplus-hero-content {
  max-width: 850px;
}

.careplus-badge {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 0 0 25px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  font-weight: 700;
}

.careplus-hero h1 {
  max-width: 840px;
  margin: 0 0 22px;
  font-size: clamp(46px, 5.2vw, 80px);
  line-height: 1.02;
  letter-spacing: -3px;
}

.careplus-hero h1 span {
  color: #8ee5f8;
}

.careplus-hero > div > p:not(.careplus-badge) {
  max-width: 760px;
  font-size: 19px;
  line-height: 1.65;
  color: #e9f8fd;
}

.careplus-actions,
.careplus-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.careplus-actions {
  margin: 32px 0;
}

.light-outline {
  color: white;
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.08);
}

.careplus-hero-points span {
  font-size: 14px;
  color: #d8f5ff;
}

.careplus-hero-points i {
  color: #f7c445;
}

.careplus-section {
  padding: 100px 8%;
}

.careplus-definition,
.careplus-brand {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 60px;
  align-items: center;
}

.careplus-copy h2,
.careplus-brand h2 {
  margin: 0 0 20px;
  color: var(--navy);
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -2px;
}

.careplus-copy p,
.careplus-brand > div > p {
  color: #627185;
  font-size: 17px;
  line-height: 1.7;
}

.careplus-definition-card {
  padding: 38px;
  border: 1px solid #d8edf4;
  border-radius: 24px;
  background: linear-gradient(145deg, #edfaff, #ffffff);
  box-shadow: 0 18px 35px rgba(6, 63, 115, .1);
}

.careplus-definition-card > i {
  color: #f7b928;
  font-size: 48px;
}

.careplus-definition-card h3 {
  margin: 24px 0 12px;
  color: var(--navy);
  font-size: 25px;
}

.careplus-definition-card p {
  margin: 0;
  color: #627185;
  line-height: 1.6;
}

.careplus-importance {
  background: linear-gradient(180deg, #f8fcfe, #edf9fd);
}

.importance-grid,
.careplus-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1320px;
  margin: auto;
}

.importance-grid article,
.careplus-benefits article {
  padding: 28px;
  border: 1px solid #dbeaf0;
  border-radius: 18px;
  background: white;
  box-shadow: 0 8px 20px rgba(8, 50, 84, .06);
}

.importance-grid i {
  color: #eb8b32;
  font-size: 28px;
}

.careplus-benefits i {
  color: #16a36a;
  font-size: 28px;
}

.importance-grid h3,
.careplus-benefits h3 {
  margin: 20px 0 10px;
  color: var(--navy);
  font-size: 20px;
}

.importance-grid p,
.careplus-benefits p {
  margin: 0;
  color: #627185;
  line-height: 1.55;
}

.careplus-brand {
  color: white;
  background:
    radial-gradient(circle at 85% 10%, rgba(83, 202, 235, .28), transparent 28%),
    linear-gradient(135deg, #04355f, #0873a8);
}

.careplus-brand h2,
.careplus-brand > div > p {
  color: white;
}

.careplus-checklist {
  display: grid;
  gap: 16px;
}

.careplus-checklist span {
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
}

.careplus-checklist i {
  margin-right: 9px;
  color: #f7c445;
}

.choose-plan {
  background: #f8fcfe;
}

.plan-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0 auto 50px;
  color: #65778b;
  font-size: 14px;
  font-weight: 700;
}

.plan-steps span {
  display: flex;
  gap: 8px;
  align-items: center;
}

.plan-steps b {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dcecf2;
}

.plan-steps .active {
  color: var(--navy);
}

.plan-steps .active b {
  color: white;
  background: var(--aqua);
}

.plan-steps > i {
  width: 40px;
  height: 2px;
  background: #dcecf2;
}

.selector-title {
  max-width: 1320px;
  margin: 0 auto 22px;
  color: var(--navy);
  font-size: 25px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1320px;
  margin: auto;
}

.selection-card,
.package-card {
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.selection-card {
  min-height: 285px;
  padding: 24px;
  border: 1px solid #dbeaf0;
  border-radius: 18px;
  background: white;
}

.selection-card:hover {
  transform: translateY(-5px);
  border-color: var(--aqua);
  box-shadow: 0 15px 28px rgba(7, 105, 152, .13);
}

.selection-card.selected {
  border: 2px solid var(--aqua);
  background: #ecfbff;
  box-shadow: 0 14px 30px rgba(7, 137, 190, .16);
}

.selection-card > i {
  color: var(--solar-gold);
  font-size: 29px;
}

.selection-card .capacity {
  display: inline-block;
  margin: 18px 0 10px;
  padding: 5px 9px;
  border-radius: 8px;
  background: #effaff;
  color: #0875a8;
  font-size: 12px;
  font-weight: 800;
}

.selection-card h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 19px;
}

.selection-card p {
  min-height: 67px;
  margin: 0;
  color: #627185;
  font-size: 14px;
  line-height: 1.5;
}

.selection-card strong {
  display: block;
  margin-top: 15px;
  color: #0875a8;
  font-size: 13px;
}

.unsure-card {
  border-style: dashed;
  background: #fffdf7;
}

.package-panel {
  max-width: 1320px;
  margin: 50px auto 0;
  padding: 32px;
  border: 1px solid #dbeaf0;
  border-radius: 24px;
  background: white;
}

.package-panel.is-locked {
  opacity: .62;
}

.package-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.step-label {
  color: #0875a8;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.package-panel-heading h3 {
  margin: 7px 0 7px;
  color: var(--navy);
  font-size: 27px;
}

.package-panel-heading p {
  margin: 0;
  color: #627185;
}

.package-panel-heading > i {
  color: var(--solar-gold);
  font-size: 25px;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.package-card {
  position: relative;
  min-height: 330px;
  padding: 28px;
  border: 1px solid #dbeaf0;
  border-radius: 18px;
  background: #fff;
}

.package-card:disabled {
  cursor: not-allowed;
}

.package-card:not(:disabled):hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 28px rgba(7, 105, 152, .12);
}

.package-card.selected {
  border: 2px solid #16a36a;
  background: #f3fff8;
}

.package-card.featured {
  border-color: #f7c445;
}

.popular-label {
  position: absolute;
  top: -12px;
  right: 20px;
  padding: 6px 10px;
  border-radius: 99px;
  background: #f7b928;
  color: #573900;
  font-size: 11px;
  font-weight: 800;
}

.package-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 20px;
}

.silver { background: #edf1f4; color: #617180; }
.gold { background: #fff1c4; color: #b27200; }
.platinum { background: #ede6ff; color: #6c51ba; }

.package-card h3 {
  margin: 21px 0 4px;
  color: var(--navy);
  font-size: 26px;
}

.package-subtitle {
  margin: 0 0 14px;
  color: #0875a8;
  font-weight: 800;
}

.package-card > p:not(.package-subtitle) {
  color: #627185;
  line-height: 1.55;
}

.package-best {
  display: block;
  margin-top: 18px;
  color: #536b7c;
  font-size: 13px;
  font-style: italic;
}

.package-card strong {
  display: block;
  margin-top: 18px;
  color: #0875a8;
}

.package-note {
  margin: 23px 0 0;
  color: #627185;
  font-size: 13px;
  line-height: 1.5;
}

.selected-plan-summary {
  max-width: 1320px;
  margin: 28px auto 0;
  padding: 25px 28px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #063f73, #087db8);
  color: white;
}

.selected-plan-summary h3 {
  margin: 5px 0 7px;
  font-size: 23px;
}

.selected-plan-summary p {
  margin: 0;
  color: #dff7ff;
}

.selection-values {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 13px;
}

.selection-values span {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  color: #e9faff;
  font-size: 13px;
}

.selection-values i {
  margin-right: 5px;
  color: #f7c445;
}

.selection-cta {
  flex-shrink: 0;
  color: #063f73;
  background: #f7c445;
}

.request-section {
  background: linear-gradient(180deg, #ffffff, #f0faff);
}

.careplus-form {
  max-width: 1050px;
  margin: auto;
  padding: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  border: 1px solid #dbeaf0;
  border-radius: 22px;
  background: white;
  box-shadow: 0 16px 35px rgba(8, 50, 84, .08);
}

.careplus-form label {
  display: block;
  margin: 12px 0;
  color: var(--ink);
  font-weight: 700;
}

.careplus-form textarea {
  width: 100%;
  min-height: 125px;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #d7e7ee;
  border-radius: 10px;
  font: inherit;
  resize: vertical;
}

.form-full {
  grid-column: 1 / -1;
}

.request-plan-strip {
  grid-column: 1 / -1;
  margin-bottom: 9px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #eefaff;
  color: #31566d;
  font-size: 14px;
}

.request-plan-strip i {
  margin-right: 7px;
  color: #0875a8;
}

.whatsapp-request {
  justify-self: center;
  color: white;
  background: linear-gradient(135deg, #23c768, #10a94b);
}

.careplus-process {
  color: white;
  background: linear-gradient(135deg, #04355f, #0873a8);
}

.careplus-process .heading h2 {
  color: white;
}

.careplus-process .heading p,
.careplus-process .heading span {
  color: #d7f5ff;
}

.process-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1320px;
  margin: auto;
}

.process-flow article {
  padding: 28px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  background: rgba(255,255,255,.08);
}

.process-flow span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f7c445;
  color: #063f73;
  font-weight: 800;
}

.process-flow h3 {
  margin: 20px 0 10px;
  font-size: 21px;
}

.process-flow p {
  margin: 0;
  color: #d9f4ff;
  line-height: 1.5;
}

.terms-section {
  background: #f8fcfe;
}

.terms-accordions {
  max-width: 1050px;
  margin: auto;
}

.terms-accordions details {
  margin-bottom: 14px;
  padding: 0 22px;
  border: 1px solid #dbeaf0;
  border-radius: 14px;
  background: white;
}

.terms-accordions summary {
  padding: 20px 0;
  cursor: pointer;
  color: var(--navy);
  font-weight: 800;
  list-style: none;
}

.terms-accordions summary::-webkit-details-marker {
  display: none;
}

.terms-accordions summary i {
  float: right;
  transition: transform .2s ease;
}

.terms-accordions details[open] summary i {
  transform: rotate(180deg);
}

.terms-accordions ul {
  margin: 0 0 20px;
  padding-left: 20px;
  color: #627185;
  line-height: 1.75;
}

@media (max-width: 1050px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .category-grid .unsure-card {
    grid-column: 2 / 3;
  }
}

@media (max-width: 760px) {
  .careplus-hero,
  .careplus-section {
    padding: 70px 23px;
  }

  .careplus-definition,
  .careplus-brand,
  .careplus-form,
  .package-grid,
  .process-flow {
    grid-template-columns: 1fr;
  }

  .importance-grid,
  .careplus-benefits,
  .category-grid {
    grid-template-columns: 1fr 1fr;
  }

  .category-grid .unsure-card {
    grid-column: auto;
  }

  .selected-plan-summary,
  .package-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .selection-cta {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .importance-grid,
  .careplus-benefits,
  .category-grid {
    grid-template-columns: 1fr;
  }

  .careplus-hero h1 {
    letter-spacing: -2px;
  }

  .plan-steps {
    gap: 7px;
    font-size: 11px;
  }

  .plan-steps > i {
    width: 15px;
  }

  .careplus-form,
  .package-panel {
    padding: 22px 18px;
  }
}
.site-dropdown > .site-dropdown-menu {
  top: 100%;
  margin-top: 6px;
}
/* Keep the brand firmly on the left side */
.header {
  justify-content: flex-start;
}

.header .brand {
  margin-right: auto;
  justify-content: flex-start;
}

.header .nav {
  margin-left: auto;
}

@media (max-width: 650px) {
  .header .menu-button {
    margin-left: auto;
  }
}