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

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

:root{
--gold:#F5A623;
--blue:#1E8FFF;
--dark:#05070A;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#05070A;
color:white;
overflow-x:hidden;
}

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

.navbar{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

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

backdrop-filter:blur(16px);

border-bottom:
1px solid rgba(255,255,255,0.05);
}

.nav-container{

max-width:1500px;

margin:auto;

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

padding:14px 40px;
}

.logo{
width:180px;
}


/* ========================= */
/* NAV LINKS */
/* ========================= */

.nav-links{
display:flex;
align-items:center;
gap:34px;
}

.nav-links a{

text-decoration:none;

color:white;

font-size:13px;
font-weight:700;

letter-spacing:2px;

opacity:0.72;

transition:0.3s ease;
}

.nav-links a:hover{

color:var(--gold);

opacity:1;
}

/* ========================= */
/* DROPDOWN */
/* ========================= */

.dropdown{
position:relative;
display:inline-block;
}

.dropbtn{

background:none;
border:none;

color:white;

font-size:13px;
font-weight:700;

letter-spacing:2px;

opacity:0.72;

cursor:pointer;

display:flex;
align-items:center;
gap:8px;

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

transition:0.3s ease;
}

.dropbtn:hover{

color:var(--gold);

opacity:1;
}

.dropdown-content{

display:none;

position:absolute;

top:100%;
padding-top:14px;

.dropdown::after{
content:'';
position:absolute;
left:0;
top:100%;
width:100%;
height:18px;
}

background:#0b1017;

min-width:240px;

border-radius:16px;

overflow:hidden;

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

box-shadow:
0 0 24px rgba(0,0,0,.35);

z-index:999;
}

.dropdown-content a{

display:block;

padding:14px 18px;

color:#fff;

text-decoration:none;

transition:.25s;

font-size:.9rem;

letter-spacing:1px;

opacity:1;
}

.dropdown-content a:hover{

background:
rgba(22,141,255,.12);

color:var(--gold);
}

/* DESKTOP HOVER */

@media(min-width:769px){

.dropdown:hover .dropdown-content{
display:block;
}

}

/* MOBILE CLICK */

.show{
display:block;
}

/* ========================= */
/* SOCIAL ICONS */
/* ========================= */

.social-icons{

display:flex;
align-items:center;
gap:14px;
}

.social-icons a{

width:44px;
height:44px;

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

border-radius:50%;

background:
rgba(255,255,255,0.06);

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

color:white;

font-size:18px;

text-decoration:none;

transition:0.3s ease;

box-shadow:
0 0 20px rgba(255,255,255,0.04);
}

.social-icons a:hover{

transform:
translateY(-4px);

background:
rgba(30,143,255,0.18);

border-color:
rgba(30,143,255,0.35);

box-shadow:
0 0 25px rgba(30,143,255,0.45);
}

/* ========================= */
/* PHONE BUTTON */
/* ========================= */

.phone-btn{

display:flex;
align-items:center;
gap:10px;

padding:12px 20px;

background:
rgba(245,166,35,0.10);

border:
1px solid rgba(245,166,35,0.25);

border-radius:12px;

text-decoration:none;

color:white;

font-size:14px;
font-weight:700;

transition:0.3s ease;

box-shadow:
0 0 18px rgba(245,166,35,0.08);
}

.phone-btn:hover{

transform:
translateY(-4px);

box-shadow:
0 0 24px rgba(245,166,35,0.25);
}

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

.hero{

position:relative;

min-height:100vh;

display:flex;
align-items:center;

background-image:
url("HERO.png");

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

.hero-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,0.92) 0%,
rgba(0,0,0,0.78) 40%,
rgba(0,0,0,0.18) 100%
);
}

.hero-content{

position:relative;

z-index:5;

width:100%;

max-width:1500px;

margin:auto;

padding:
160px 50px 80px;
}

.hero-left{
max-width:660px;
}

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

.hero-title{

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

line-height:0.86;

text-transform:uppercase;
}

.hero-title span{
display:block;
}

.gold{

font-size:clamp(72px,8vw,155px);
color:var(--gold);

text-shadow:
0 0 2px rgba(245,166,35,0.12);

}

.blue{

font-size:clamp(72px,8vw,155px);
color:var(--blue);

text-shadow:
0 0 2px rgba(30,143,255,0.10);

}

.silver{

font-size:
clamp(64px,7vw,130px);

background:
linear-gradient(
180deg,
#FFFFFF 0%,
#D9E7F5 55%,
#AFCFFF 100%
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:
0 0 10px rgba(255,255,255,0.08),
0 0 18px rgba(30,143,255,0.06);
}

.hero-sub{

margin-top:28px;

margin-bottom:34px;

font-size:18px;

line-height:1.7;

color:
rgba(255,255,255,0.82);

max-width:560px;
}

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

.hero-btn{

display:inline-flex;
align-items:center;
gap:12px;

padding:20px 34px;

background:
linear-gradient(
135deg,
#FFD04D,
#F5A623
);

color:black;

text-decoration:none;

font-size:16px;
font-weight:800;

border-radius:14px;

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

box-shadow:
0 0 10px rgba(245,166,35,0.30),
0 0 20px rgba(245,166,35,0.18);

transition:0.3s ease;
}

.hero-btn:hover{

transform:
translateY(-4px);

box-shadow:
0 0 16px rgba(245,166,35,0.45),
0 0 30px rgba(245,166,35,0.22);
}

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

.hero-stats{

display:grid;

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

gap:18px;

margin-top:42px;
}

.stat-card{

padding:28px 20px;

background:
rgba(255,255,255,0.05);

backdrop-filter:blur(14px);

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

border-radius:22px;

text-align:center;

transition:0.3s ease;

box-shadow:
0 0 20px rgba(255,255,255,0.04);
}

.stat-card:hover{

transform:
translateY(-8px);

border-color:
rgba(245,166,35,0.22);

box-shadow:
0 0 32px rgba(245,166,35,0.12);
}

.stat-card i{

font-size:30px;

margin-bottom:18px;

color:var(--gold);

text-shadow:
0 0 16px rgba(245,166,35,0.42);
}

.stat-card h3{

font-size:15px;

margin-bottom:6px;
}

.stat-card p{

font-size:11px;

letter-spacing:2px;

opacity:0.7;
}

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

.section{

padding:120px 50px;
}

.dark-section{

background:
linear-gradient(
180deg,
#080B10,
#040608
);
}

.section-header{

text-align:center;

margin-bottom:80px;
}

.section-header span{

display:inline-block;

margin-bottom:20px;

color:var(--gold);

font-size:13px;
font-weight:700;

letter-spacing:3px;
}

.section-header h2{

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

font-size:
clamp(58px,7vw,120px);

line-height:0.92;

text-transform:uppercase;
}

.blue-text{

color:var(--blue);

text-shadow:
0 0 22px rgba(30,143,255,0.25);

font-size:
clamp(72px,8vw,145px);
}

/* ========================= */
/* BENEFITS */
/* ========================= */

.benefit-grid{

max-width:1400px;

margin:auto;

display:grid;

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

gap:28px;
}

.benefit-card{

padding:48px 36px;

background:
rgba(255,255,255,0.04);

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

backdrop-filter:blur(14px);

border-radius:24px;

transition:0.3s ease;

box-shadow:
0 0 20px rgba(255,255,255,0.04);
}

.benefit-card:hover{

transform:
translateY(-10px);

border-color:
rgba(30,143,255,0.22);

box-shadow:
0 0 34px rgba(30,143,255,0.12);
}

.benefit-card i{

font-size:34px;

margin-bottom:24px;

color:var(--blue);

text-shadow:
0 0 18px rgba(30,143,255,0.42);
}

.benefit-card h3{

margin-bottom:16px;

font-size:24px;
}

.benefit-card p{

line-height:1.7;

opacity:0.72;
}

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

.process-grid{

max-width:1400px;

margin:auto;

display:grid;

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

gap:28px;
}

.process-card{

padding:52px 42px;

background:
rgba(255,255,255,0.04);

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

backdrop-filter:blur(14px);

border-radius:24px;

transition:0.3s ease;
}

.process-card:hover{

transform:
translateY(-10px);

border-color:
rgba(245,166,35,0.22);

box-shadow:
0 0 34px rgba(245,166,35,0.12);
}

.process-card span{

display:block;

margin-bottom:24px;

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

font-size:76px;

color:
rgba(245,166,35,0.20);
}

.process-card h3{

margin-bottom:18px;

font-size:30px;

line-height:1.2;
}

.process-card p{

line-height:1.9;

opacity:0.78;

font-size:16px;
}

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

.form-wrapper{

max-width:850px;

margin:auto;
}

.contact-form{

display:flex;
flex-direction:column;

gap:22px;
}

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

width:100%;

padding:18px 20px;

background:
rgba(255,255,255,0.05);

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

border-radius:14px;

color:white;

font-size:16px;

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

outline:none;

transition:0.3s ease;
}

.contact-form textarea{

min-height:140px;

resize:none;
}

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

border-color:
rgba(30,143,255,0.45);

box-shadow:
0 0 18px rgba(30,143,255,0.12);
}

.sms-consent{

display:flex;
align-items:flex-start;

gap:14px;

font-size:13px;

line-height:1.6;

color:
rgba(255,255,255,0.72);
}

.sms-consent input{

margin-top:4px;

width:18px;
height:18px;
}

.contact-form button{

padding:22px;

border:none;

border-radius:14px;

background:
linear-gradient(
135deg,
#FFD04D,
#F5A623
);

color:black;

font-size:16px;
font-weight:800;

cursor:pointer;

transition:0.3s ease;

box-shadow:
0 0 18px rgba(245,166,35,0.18);
}

.contact-form button:hover{

transform:
translateY(-4px);

box-shadow:
0 0 28px rgba(245,166,35,0.28);
}

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

.cta-section{

padding:120px 50px;
}

.cta-box{

max-width:1400px;

margin:auto;

padding:70px 60px;

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

background:
linear-gradient(
135deg,
rgba(245,166,35,0.10),
rgba(30,143,255,0.06)
);

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

border-radius:28px;

box-shadow:
0 0 40px rgba(245,166,35,0.06);
}

.cta-box h2{

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

font-size:
clamp(42px,5vw,90px);

line-height:0.95;
}

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

footer{

padding:80px 20px;

text-align:center;

border-top:
1px solid rgba(255,255,255,0.06);
}

.footer-logo{

width:210px;

margin-bottom:18px;
}

.footer-serving{

font-size:15px;

letter-spacing:2px;

color:
rgba(255,255,255,0.70);

margin-bottom:28px;
}

.footer-links{

display:flex;
justify-content:center;
gap:30px;

margin-bottom:28px;
}

.footer-links a{

color:
rgba(255,255,255,0.68);

text-decoration:none;

font-size:14px;

transition:0.3s ease;
}

.footer-links a:hover{
color:var(--gold);
}

.footer-socials{

display:flex;
justify-content:center;
gap:16px;

margin-bottom:28px;
}

.footer-socials a{

width:46px;
height:46px;

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

border-radius:50%;

background:
rgba(255,255,255,0.06);

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

color:white;

font-size:18px;

text-decoration:none;

transition:0.3s ease;
}

.footer-socials a:hover{

transform:
translateY(-4px);

background:
rgba(30,143,255,0.18);

box-shadow:
0 0 22px rgba(30,143,255,0.28);
}

footer p{

opacity:0.45;

font-size:14px;
}


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

.mobile-menu-btn{

display:none;

font-size:24px;

color:white;

cursor:pointer;
}

.mobile-menu{

position:fixed;

top:0;
right:-100%;

width:82%;

height:100vh;

background:#05070A;

z-index:9999;

padding:120px 30px 40px;

display:flex;

flex-direction:column;

gap:24px;

transition:0.35s ease;

box-shadow:
-10px 0 30px rgba(0,0,0,0.45);
}

.mobile-menu.active{
right:0;
}

.mobile-menu a{

color:white;

text-decoration:none;

font-size:18px;

font-weight:700;

letter-spacing:1px;

transition:0.3s ease;
}

.mobile-menu a:hover{
color:var(--gold);
}

.mobile-phone{

margin-top:20px;

padding:16px 20px;

background:
rgba(245,166,35,0.12);

border:
1px solid rgba(245,166,35,0.22);

border-radius:14px;

display:flex;

align-items:center;

gap:12px;
}

@media(max-width:1100px){

.hero-stats,
.benefit-grid,
.process-grid{

grid-template-columns:
1fr 1fr;
}

.cta-box{

flex-direction:column;

gap:40px;

text-align:center;
}

}

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

@media(max-width:768px){

/* FORCE MOBILE WIDTH FIX */

html,
body{
overflow-x:hidden;
max-width:100%;
}

/* MOBILE OVERFLOW FIX */

.hero,
.hero-content,
.hero-left{
max-width:100%;
}

.reviews-grid,
.review-card{
max-width:100%;
overflow:hidden;
}

.hero-title{
width:100%;
}

.hero-title .gold,
.hero-title .blue,
.hero-title .silver{
word-break:break-word;
}
  
/* MOBILE HERO FIX */

.hero-title .gold,
.hero-title .blue{
font-size:clamp(52px,14vw,72px);
line-height:0.9;
}

.hero-title .silver{
font-size:clamp(48px,13vw,66px);
line-height:0.9;
}

.hero-left{
max-width:100%;
overflow:hidden;
}

.hero{
overflow:hidden;
}

.hero-content{
overflow:hidden;
width:100%;
}

.hero-title{
max-width:100%;
overflow-wrap:break-word;
}

.nav-links{
display:none !important;
}

.desktop-socials{
display:none !important;
}

.social-icons{

display:flex;

align-items:center;

gap:8px;

margin-left:auto;

margin-right:14px;
}

.social-icons a{

width:36px;
height:36px;

font-size:14px;
}

.phone-btn{
display:none;
}

.mobile-menu-btn{
display:block;
}

.logo{
width:130px;
}

.nav-container{
padding:14px 16px;
}

.hero-stats,
.benefit-grid,
.process-grid{

grid-template-columns:1fr;
}

.section,
.cta-section{

padding:90px 20px;
}

.hero-btn{

width:100%;

justify-content:center;
}

}

.section-header h2{

font-size:
clamp(46px,8vw,80px);
}

.blue-text{

font-size:
clamp(54px,9vw,90px);
}

.gold{

text-shadow:
0 0 5px rgba(245,166,35,0.85),
0 0 10px rgba(245,166,35,0.45),
0 0 18px rgba(245,166,35,0.14);
}

.blue{

text-shadow:
0 0 5px rgba(30,143,255,0.85),
0 0 10px rgba(30,143,255,0.45),
0 0 18px rgba(30,143,255,0.14);
}

}

/* REVIEWS PAGE */

.stats-bar{
padding:34px 20px;
background:#08111d;
border-top:1px solid rgba(255,255,255,0.05);
border-bottom:1px solid rgba(255,255,255,0.05);
}

.stats-grid{
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px;
}

.stat-item{
text-align:center;
padding:20px;
background:rgba(255,255,255,0.04);
border-radius:18px;
border:1px solid rgba(255,255,255,0.06);
}

.stat-item i{
font-size:22px;
margin-bottom:12px;
color:var(--gold);
}

.stat-item h3{
font-size:15px;
line-height:1.5;
letter-spacing:1px;
}

.reviews-section{
padding:120px 50px;
}

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

.review-card{
padding:40px 34px;
border-radius:24px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(14px);
transition:0.3s ease;
position:relative;
overflow:hidden;
}

.review-card:hover{
transform:translateY(-10px);
border-color:rgba(30,143,255,0.22);
box-shadow:0 0 28px rgba(30,143,255,0.10);
}

.review-stars{
margin-bottom:20px;
color:var(--gold);
font-size:18px;
}

.review-text{
font-size:17px;
line-height:1.9;
color:rgba(255,255,255,0.84);
margin-bottom:28px;
}

.review-author{
font-size:15px;
font-weight:700;
letter-spacing:1px;
color:var(--blue);
}

.cta-section{
padding:120px 20px;
text-align:center;
background:
linear-gradient(
180deg,
rgba(8,17,29,1) 0%,
rgba(5,7,10,1) 100%
);
}

.cta-section h2{
font-family:'Anton',sans-serif;
font-size:clamp(54px,7vw,120px);
line-height:0.92;
text-transform:uppercase;
margin-bottom:24px;
}

.cta-section p{
max-width:780px;
margin:auto;
font-size:20px;
line-height:1.8;
opacity:0.82;
margin-bottom:42px;
}

.cta-btn{
display:inline-flex;
align-items:center;
gap:12px;
padding:22px 38px;
background:linear-gradient(135deg,#FFD04D,#F5A623);
color:black;
text-decoration:none;
font-size:17px;
font-weight:800;
border-radius:14px;
}

/* MOBILE REVIEWS FIX */

@media(max-width:768px){

.review-grid{
grid-template-columns:1fr !important;
}

.review-card{
width:100%;
padding:32px 24px;
}

.reviews-section{
padding:80px 20px;
overflow:hidden;
}

body{
overflow-x:hidden;
}

}

.logo-link{
    display:flex;
    align-items:center;
    text-decoration:none;
}

```css
/* =========================
PROJECTS PAGE
========================= */

/* HERO */

.projects-hero{
    position:relative;
    min-height:100vh;
    background:url('../black-exterior-solar-screens.jpg');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    padding:0 8%;
    overflow:hidden;
}

.projects-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.75));
}

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

.projects-hero h1{
    font-size:6rem;
    line-height:.92;
    font-weight:900;
    margin-bottom:28px;
    text-transform:uppercase;
    letter-spacing:-2px;
}

.orange-text{
    color:#f7a623;
}

.blue-text{
    color:#00aaff;
}

.projects-hero p{
    font-size:1.15rem;
    line-height:1.9;
    color:#d0d0d0;
    max-width:620px;
}

.hero-btn{
    display:inline-block;
    margin-top:38px;
    background:#f7a623;
    color:#111;
    text-decoration:none;
    padding:18px 38px;
    border-radius:12px;
    font-weight:800;
    transition:.3s ease;
}

.hero-btn:hover{
    transform:translateY(-3px);
}

/* SECTION */

.projects-section{
    padding:110px 8%;
    background:#0d0d0f;
}

.section-header{
    margin-bottom:60px;
}

.section-header h2{
    font-size:3.2rem;
    text-transform:uppercase;
    margin-bottom:18px;
}

.section-header p{
    color:#bdbdbd;
    line-height:1.9;
    max-width:760px;
}

/* GRID */

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

.project-card{
    background:#151515;
    border-radius:22px;
    overflow:hidden;
    transition:.3s ease;
    box-shadow:0 0 30px rgba(0,0,0,.4);
}

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

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

.project-card-content{
    padding:28px;
}

.project-card-content h3{
    font-size:1.7rem;
    margin-bottom:15px;
}

.project-card-content p{
    color:#c8c8c8;
    line-height:1.8;
}

/* CTA */

.projects-cta{
    padding:120px 8%;
    background:#101010;
    text-align:center;
}

.projects-cta h2{
    font-size:4rem;
    margin-bottom:20px;
    text-transform:uppercase;
}

.projects-cta p{
    max-width:720px;
    margin:auto;
    color:#bdbdbd;
    line-height:1.9;
}

.cta-btn{
    display:inline-block;
    margin-top:40px;
    background:#f7a623;
    color:#111;
    text-decoration:none;
    padding:18px 42px;
    border-radius:12px;
    font-weight:900;
}

/* MOBILE */

@media(max-width:900px){

.projects-hero h1{
    font-size:3.8rem;
}

.section-header h2{
    font-size:2.4rem;
}

.projects-cta h2{
    font-size:2.6rem;
}

.project-card img{
    height:280px;
}

}
```