/* ===============================
NLIC SOLAR ENERGY MASTER CSS
FINAL VERSION
=============================== */

/* ===============================
VARIABLES
=============================== */

:root {
--green: #215733;
--gold: #DB9D2C;
--blue: #28487A;
--gray: #3F3F41;
--white: #F7F9FC;

```
--dark-bg: #1a1a1a;
--dark-text: #f0f0f0;
--dark-card: #2b2b2b;
```

}

/* ===============================
RESET
=============================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

/* ===============================
GLOBAL IMAGE PROTECTION
=============================== */

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

/* ===============================
GLOBAL
=============================== */

body {
font-family: "Inter", sans-serif;
background: var(--white);
color: var(--gray);
line-height: 1.6;
}

a {
text-decoration: none;
}

/* ===============================
CONTAINER
=============================== */

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

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

.header {
background: #ffffff;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding: 15px 0;
}

nav {
flex: 1;
display: flex;
justify-content: center;
}

/* ===============================
LOGO
=============================== */

.logo {
flex-shrink: 0;
}

.logo img {
width: 70px;
height: 70px;
object-fit: contain;
}

/* ===============================
NAVIGATION
=============================== */

.nav-links {
display: flex;
gap: 30px;
list-style: none;
}

.nav-links a {
color: var(--gray);
font-weight: 500;
transition: .3s;
}

.nav-links a:hover {
color: var(--green);
}

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

.btn-primary {
background: var(--green);
color: #fff;
padding: 14px 26px;
border-radius: 50px;
font-weight: 600;
display: inline-block;
transition: .3s;
}

.btn-primary:hover {
background: #183f25;
}

.btn-secondary {
background: var(--gold);
color: #fff;
padding: 14px 26px;
border-radius: 50px;
font-weight: 600;
display: inline-block;
transition: .3s;
}

.btn-secondary:hover {
background: #c48d22;
}

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

.hero {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
overflow: hidden;
}

.hero-bg-image {
position: absolute;
inset: 0;

```
width: 100%;
height: 100%;

object-fit: cover;
object-position: center center;

z-index: 0;
```

}

.hero-overlay {
position: absolute;
inset: 0;

```
background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.60) 0%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.20) 100%
    );

z-index: 1;
```

}

.hero-content {
position: relative;
z-index: 2;
max-width: 720px;
color: white;
}

.hero h1 {
font-size: 4.2rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 22px;

```
text-shadow:
    0 3px 12px rgba(0,0,0,.45);
```

}

.hero p {
font-size: 1.25rem;
line-height: 1.7;
margin-bottom: 35px;

```
color: rgba(255,255,255,.95);

text-shadow:
    0 2px 8px rgba(0,0,0,.40);
```

}

.hero-buttons {
display: flex;
gap: 18px;
flex-wrap: wrap;
}

/* ===============================
SECTIONS
=============================== */

.section {
padding: 90px 0;
}

.alt-bg {
background: #f4f7f9;
}

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

.section-title h2 {
font-size: 2.4rem;
color: var(--green);
margin-bottom: 10px;
}

.section-title p {
max-width: 700px;
margin: auto;
}

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

.card-grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}

.card {
background: white;
padding: 25px;
border-radius: 18px;

```
box-shadow:
    0 10px 25px rgba(0,0,0,.08);

transition: .3s;
```

}

.card:hover {
transform: translateY(-5px);
}

.card h3 {
color: var(--green);
margin-bottom: 10px;
}

/* ===============================
TECHNOLOGY IMAGE
=============================== */

.technology-image-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}

.technology-feature-image {
width: 40%;
max-width: 450px;
min-width: 250px;
height: auto;
}

/* ===============================
FEATURED PROJECTS
=============================== */

.project-grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}

.project-card {
background: white;
border-radius: 18px;
overflow: hidden;

```
box-shadow:
    0 8px 24px rgba(0,0,0,.08);

transition: .3s ease;
```

}

.project-card:hover {
transform: translateY(-5px);

```
box-shadow:
    0 14px 35px rgba(0,0,0,.12);
```

}

.project-image {
width: 100%;
height: 220px;
overflow: hidden;
}

.project-image img {
width: 100%;
height: 100%;

```
object-fit: cover;
object-position: center center;
```

}

.project-card h3 {
color: var(--green);
font-size: 1.35rem;
font-weight: 700;

```
padding: 15px 18px 5px;
```

}

.project-card p {
padding: 0 18px 18px;
}

/* ===============================
CTA
=============================== */

.cta-section {
background: var(--green);
color: white;
text-align: center;
padding: 90px 20px;
}

.cta-section h2 {
font-size: 2.6rem;
margin-bottom: 15px;
}

.cta-section p {
margin-bottom: 25px;
}

/* ===============================
FORMS
=============================== */

input,
textarea {
padding: 12px;
border-radius: 10px;
border: 1px solid #ddd;
font-family: inherit;
}

input:focus,
textarea:focus {
outline: none;
border-color: var(--green);
}

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

.footer {
background: var(--green);
color: white;
text-align: center;
padding: 50px 20px;
}

.footer-logo {
display: flex;
justify-content: center;
}

.footer-logo img {
width: 50px;
height: 50px;
object-fit: contain;
opacity: .85;
margin-bottom: 15px;
}

/* ===============================
DARK MODE
=============================== */

body.dark-mode {
background: var(--dark-bg);
color: var(--dark-text);
}

body.dark-mode .card,
body.dark-mode .project-card {
background: var(--dark-card);
color: var(--dark-text);
}

body.dark-mode .nav-links a {
color: var(--dark-text);
}

body.dark-mode .nav-links a:hover {
color: var(--gold);
}

body.dark-mode .footer {
background: var(--gray);
}

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

@media (max-width: 900px) {

```
.nav-container {
    flex-wrap: wrap;
}

nav {
    order: 3;
    width: 100%;
    justify-content: center;
}

.nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

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

.hero {
    min-height: 75vh;
}

.hero h1 {
    font-size: 2.5rem;
}

.hero p {
    font-size: 1.05rem;
}

.hero-buttons {
    flex-direction: column;
    align-items: flex-start;
}

.technology-feature-image {
    width: 70%;
}

.project-grid {
    grid-template-columns: 1fr;
}

.project-image {
    height: 220px;
}
```

}
/* ===================================
   SOLUTIONS PAGE HERO
=================================== */

.hero-solutions {
    position: relative;
    min-height: 85vh;
    overflow: hidden;

    /* Fallback fill color derived from the image */
    background: #dbe7f1;
}

.solutions-bg-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    /* Preserve almost the entire image */
    object-fit: contain;

    /* Small vertical enlargement (about 8%) */
    transform: scaleY(1.08);

    transform-origin: center center;

    z-index: 0;
}

.hero-solutions .hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.50) 0%,
            rgba(0,0,0,.30) 45%,
            rgba(0,0,0,.15) 100%
        );

    z-index: 1;
}

.hero-solutions .hero-content {
    position: relative;
    z-index: 2;
}

.hero-solutions h1 {
    color: #ffffff;

    text-shadow:
        0 3px 12px rgba(0,0,0,.40);
}

.hero-solutions p {
    color: rgba(255,255,255,.95);

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);
}

/* Mobile adjustment */

@media (max-width: 900px) {

    .hero-solutions {
        min-height: 70vh;
    }

    .solutions-bg-image {
        transform: scaleY(1.05);
    }
}

/* ===================================
   TECHNOLOGY PAGE HERO
=================================== */

.hero-technology {
    position: relative;
    min-height: 85vh;
    overflow: hidden;

    background: #e6e1d5;
}

.technology-bg-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform: scaleY(1.08);

    transform-origin: center center;

    z-index: 0;
}

.hero-technology .hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.30) 45%,
            rgba(0,0,0,.12) 100%
        );

    z-index: 1;
}

.hero-technology .hero-content {
    position: relative;
    z-index: 2;
}

.hero-technology h1 {
    color: #ffffff;

    text-shadow:
        0 3px 12px rgba(0,0,0,.45);
}

.hero-technology p {
    color: rgba(255,255,255,.95);

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);
}

@media (max-width: 900px) {

    .hero-technology {
        min-height: 70vh;
    }

    .technology-bg-image {
        transform: scaleY(1.05);
    }
}

/* ===================================
   PROJECTS PAGE HERO
=================================== */

.hero-projects {
    position: relative;
    min-height: 85vh;
    overflow: hidden;

    /* Light sky-blue filler derived from projects banner */
    background: #d9e7ef;
}

.projects-bg-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    /* Preserve the entire image */
    object-fit: contain;

    /* Slight vertical enlargement */
    transform: scaleY(1.08);

    transform-origin: center center;

    z-index: 0;
}

.hero-projects .hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.35) 45%,
            rgba(0,0,0,.15) 100%
        );

    z-index: 1;
}

.hero-projects .hero-content {
    position: relative;
    z-index: 2;
}

.hero-projects h1 {
    color: #ffffff;

    text-shadow:
        0 3px 12px rgba(0,0,0,.45);
}

.hero-projects p {
    color: rgba(255,255,255,.96);

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);
}

.hero-projects .hero-buttons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {

    .hero-projects {
        min-height: 70vh;
    }

    .projects-bg-image {
        transform: scaleY(1.05);
    }

    .hero-projects .hero-buttons {
        justify-content: center;
    }
}

.project-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
}

.project-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ===================================
   ABOUT PAGE HERO
=================================== */

.hero-about {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;

    /* dominant color from image:
       Manila skyline blue */
    background: #dce8f2;
}

.about-bg-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    transform: scaleY(1.08);

    z-index: 1;
}

.hero-about .hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(10, 25, 45, 0.42);

    z-index: 2;
}

.hero-about .hero-content {
    position: relative;
    z-index: 3;
}

/* ==================================================
   CONTACT PAGE HERO
================================================== */

.hero-contact{
    position:relative;
    overflow:hidden;

    min-height:650px;

    background:#dbe7ef;
}

.contact-bg-image{
    position:absolute;

    top:50%;
    left:50%;

    width:100%;
    height:108%;

    transform:translate(-50%, -50%);

    object-fit:cover;
    object-position:center center;

    z-index:0;
}

.hero-contact .hero-overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.38);

    z-index:1;
}

.hero-contact .hero-content{
    position:relative;
    z-index:2;
}

/* ==================================================
   CALCULATOR PAGE HERO
================================================== */

.hero-calculator{
    position:relative;
    overflow:hidden;

    min-height:650px;

    background:#edf3ee;
}

.calculator-bg-image{
    position:absolute;

    top:50%;
    left:50%;

    width:100%;
    height:108%;

    transform:translate(-50%, -50%);

    object-fit:cover;
    object-position:center center;

    z-index:0;
}

.hero-calculator .hero-overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.35);

    z-index:1;
}

.hero-calculator .hero-content{
    position:relative;
    z-index:2;
}

/* ==========================================
   CALCULATOR PAGE FORM
========================================== */

.calculator-form-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px;
}

.calculator-form-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-bottom: 20px;
}

.calculator-form-row label {
    width: 320px;
    text-align: right;
    font-weight: 600;
    flex-shrink: 0;
}

.calculator-form-row input {
    width: 320px;
    padding: 12px 15px;
}

.calculator-button-row {
    text-align: center;
    margin-top: 30px;
}

.calculator-results {
    max-width: 700px;
    margin: 30px auto 0;
    padding: 30px;
    text-align: center;
    display: none;
}

.calculator-results h3 {
    margin-bottom: 15px;
}

.calculator-results p {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* ==================================================
   CONTACT FORM ALIGNMENT FIX v2
================================================== */

.contact-form{

    max-width:900px;

    margin:0 auto;

    padding:40px !important;

}

.contact-form .form-row{

    display:grid;

    grid-template-columns:180px 500px;

    justify-content:center;

    align-items:center;

    gap:25px;

    margin-bottom:20px;

}

.contact-form label{

    text-align:right;

    font-weight:600;

    color:#1f2937;

    padding-right:5px;

}

.contact-form input,
.contact-form textarea{

    width:500px;

    max-width:100%;

    padding:14px 16px;

    border:1px solid #d1d5db;

    border-radius:8px;

    font-size:16px;

    box-sizing:border-box;

}

.contact-form textarea{

    min-height:160px;

    resize:vertical;

}

.contact-form .submit-row{

    text-align:center;

    margin-top:30px;

}

.contact-form .btn-primary{

    min-width:220px;

}

/* =====================================
   LANDING PAGE HERO
===================================== */

.hero-landing {
    position: relative;
    min-height: 520px;
    overflow: hidden;

    background: #d9e8d7;
}

.landing-bg-image {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;
    height: auto;

    min-width: 100%;

    transform: translate(-50%, -42%);

    object-fit: contain;
}

.hero-landing .hero-overlay {
    position: absolute;
    inset: 0;

    background:
    linear-gradient(
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.35)
    );
}

.hero-landing .hero-content {
    position: relative;
    z-index: 2;
}

/* =====================================
   FREE QUOTE SECTION
===================================== */

.quote-footer-section {
    padding: 90px 20px;
    background: #ffffff;
}

.quote-container {
    max-width: 1000px;
    margin: 0 auto;
}

.quote-header {
    text-align: center;
    margin-bottom: 50px;
}

.quote-header h2 {
    margin-bottom: 15px;
}

.quote-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* SAME ALIGNMENT SYSTEM USED
   ON CONTACT + CALCULATOR */

.quote-row {
    display: flex;
    align-items: center;

    justify-content: center;

    margin-bottom: 22px;
}

.quote-row label {

    width: 320px;

    text-align: right;

    padding-right: 25px;

    font-weight: 600;
}

.quote-row input,
.quote-row select {

    width: 420px;

    padding: 12px 15px;

    border: 1px solid #d8d8d8;

    border-radius: 8px;

    font-size: 1rem;
}

.quote-actions {
    text-align: center;
    margin-top: 35px;
}

.quote-actions .btn-primary {
    display: inline-block;
}

.trust-badge {
    display: block;

    margin-top: 18px;

    color: #666;
    font-size: 0.95rem;
}

/* MOBILE */

@media (max-width: 768px) {

    .quote-row {
        flex-direction: column;
        align-items: stretch;
    }

    .quote-row label {
        width: 100%;
        text-align: left;
        padding-right: 0;
        margin-bottom: 8px;
    }

    .quote-row input,
    .quote-row select {
        width: 100%;
    }

}

/* ===================================
LANDING PAGE HERO
=================================== */

.hero-landing {
    position: relative;
    overflow: hidden;

    min-height: 600px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f2f0eb; /* light beige-gray sampled from image */
}

.landing-bg-image {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;
    height: auto;

    object-fit: contain;

    max-width: none;
}

.hero-landing .hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(0,0,0,0.35),
            rgba(0,0,0,0.35)
        );
}

.hero-landing .hero-content {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {

    .hero-landing {
        min-height: 500px;
    }

    .landing-bg-image {
        width: auto;
        height: 100%;
    }

}


/* ======================================
QUOTE FORM
====================================== */

.quote-footer-section{
padding:90px 20px;
background:#f7f9fc;
}

.quote-container{
max-width:1100px;
margin:auto;
background:white;
padding:50px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.quote-header{
text-align:center;
margin-bottom:50px;
}

.quote-header h2{
color:var(--green);
margin-bottom:10px;
}

.quote-form-grid{
display:flex;
flex-direction:column;
gap:20px;
max-width:900px;
margin:auto;
}

.quote-row{
display:grid;
grid-template-columns:280px 1fr;
align-items:center;
gap:20px;
}

.quote-row label{
text-align:right;
font-weight:600;
}

.quote-row input,
.quote-row select{
width:100%;
padding:14px;
border:1px solid #d9d9d9;
border-radius:10px;
font-size:1rem;
}

.form-actions{
text-align:center;
margin-top:40px;
}

.trust-badge{
display:block;
margin-top:15px;
font-size:.95rem;
color:#666;
}

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

@media(max-width:768px){

.quote-row{
grid-template-columns:1fr;
}

.quote-row label{
text-align:left;
}

}

/* ===================================
TRUST STRIP
=================================== */

.trust-strip{
    background:#f7f9fc;
    border-bottom:1px solid #e5e5e5;
    padding:18px 0;
}

.trust-container{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}

.trust-item{
    font-weight:600;
    color:var(--green);
}

/* ===================================
FORM PROGRESS
=================================== */

.quote-progress{
    max-width:700px;
    margin:0 auto 35px;
    text-align:center;
}

.quote-progress span{
    font-weight:700;
    color:var(--green);
}

.progress-bar{
    width:100%;
    height:10px;
    background:#e5e5e5;
    border-radius:50px;
    margin:10px 0;
}

.progress-fill{
    width:100%;
    height:100%;
    background:var(--green);
    border-radius:50px;
}

.quote-progress p{
    font-size:.9rem;
    color:#777;
}

/* ===================================
LANDING PAGE JOURNEY GRID
=================================== */

.journey-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:30px;
    max-width:900px;
    margin:0 auto;
}

.journey-grid .card{
    text-align:center;
}

/* Mobile */

@media (max-width:768px){

    .journey-grid{
        grid-template-columns:1fr;
    }

}

/* ===================================
FAQ SPACING IMPROVEMENT
=================================== */

.faq-section .card h3:not(:first-child) {
    margin-top: 35px;   /* blank line BEFORE each new question */
}

.faq-section .card p {
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 1.8;
}

/* ===================================
PAGE LOAD ANIMATION
=================================== */

.hero-bg-image {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    animation: heroReveal 1.2s ease-out;

    will-change: transform;
}

@keyframes heroReveal {

    from {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.08);

    }

    to {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

    }

}

/* ===================================
QUOTE SUCCESS BUBBLE
=================================== */

.quote-submit-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:25px;
    flex-wrap:wrap;
}

.quote-success-bubble{

    max-width:350px;

    background:#F6D25C;

    color:#3F3F41;

    padding:16px 22px;

    border-radius:18px;

    box-shadow:
        0 12px 25px rgba(0,0,0,0.18);

    font-weight:600;

    line-height:1.5;

    position:relative;

    opacity:0;

    visibility:hidden;

    transform:translateY(8px);

    transition:
        opacity .5s ease,
        transform .5s ease,
        visibility .5s ease;
}

/* speech bubble tail */

.quote-success-bubble::before{

    content:"";

    position:absolute;

    left:-12px;

    top:28px;

    width:0;
    height:0;

    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:12px solid #F6D25C;
}

/* visible state */

.quote-success-bubble.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}