/* ===========================================
   NEXTA SOLUTIONS
   Premium Dark Theme
=========================================== */

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

html{
scroll-behavior:smooth;
}

body{

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

background:#050816;

color:#fff;

overflow-x:clip;

}

/* Background */

.background{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

z-index:-2;

background:
radial-gradient(circle at top left,#1d4ed833,transparent 30%),
radial-gradient(circle at bottom right,#7c3aed33,transparent 35%),
linear-gradient(180deg,#050816,#0b1120);

}

/* Navbar */

.navbar{

padding:18px 0;

backdrop-filter:blur(20px);

background:rgba(8,12,25,.45);

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

transition:.35s;

position:relative;

z-index:2000;

isolation:isolate;

}

.logo{

font-size:34px;

font-weight:700;

color:#fff!important;

letter-spacing:.5px;

}

.nav-link{

color:#cbd5e1!important;

margin-left:25px;

font-weight:500;

transition:.3s;

}

.nav-link:hover{

color:#38bdf8!important;

}

.dropdown-menu{

background:#111827;

border:none;

border-radius:15px;

padding:10px;

position:absolute;

z-index:3000;

min-width:260px;

box-shadow:0 25px 50px rgba(0,0,0,.55);

}

.dropdown-item{

color:white;

padding:12px;

border-radius:10px;

white-space:normal;

}

.dropdown-item:hover{

background:#1d4ed8;

color:white;

}

/* Buttons */

.quote-btn{

margin-left:30px;

padding:14px 30px;

border-radius:40px;

text-decoration:none;

font-weight:600;

color:white;

background:linear-gradient(135deg,#2563eb,#8b5cf6);

transition:.35s;

box-shadow:0 0 25px rgba(59,130,246,.35);

}

.quote-btn:hover{

transform:translateY(-3px);

box-shadow:0 0 40px rgba(59,130,246,.6);

color:white;

}

/* Hero */

.hero{

padding:120px 0;

min-height:92vh;

display:flex;

align-items:center;

}

.hero h5{

color:#38bdf8;

font-weight:600;

letter-spacing:2px;

margin-bottom:20px;

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.1;

margin-bottom:30px;

}

.hero p{

font-size:20px;

line-height:1.8;

color:#94a3b8;

max-width:650px;

margin-bottom:45px;

}

/* Hero Buttons */

.btn-primary-custom{

display:inline-block;

padding:18px 40px;

background:linear-gradient(135deg,#2563eb,#8b5cf6);

border-radius:50px;

text-decoration:none;

color:white;

font-weight:600;

margin-right:15px;

transition:.35s;

box-shadow:0 0 30px rgba(37,99,235,.4);

}

.btn-primary-custom:hover{

transform:translateY(-4px);

color:white;

box-shadow:0 0 50px rgba(37,99,235,.7);

}

.btn-outline-custom{

display:inline-block;

padding:18px 40px;

border:2px solid #2563eb;

border-radius:50px;

text-decoration:none;

color:white;

font-weight:600;

transition:.35s;

}

.btn-outline-custom:hover{

background:#2563eb;

color:white;

}

/* Hero Card */

.hero-card{

display:grid;

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

gap:25px;

}

.floating-card{

padding:35px;

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

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

backdrop-filter:blur(25px);

border-radius:24px;

text-align:center;

transition:.35s;

animation:float 5s ease-in-out infinite;

}

.floating-card:nth-child(2){

animation-delay:.5s;

}

.floating-card:nth-child(3){

animation-delay:1s;

}

.floating-card:nth-child(4){

animation-delay:1.5s;

}

.floating-card:nth-child(5){

animation-delay:2s;

}

.floating-card:nth-child(6){

animation-delay:2.5s;

}

.floating-card:hover{

transform:translateY(-10px);

border-color:#2563eb;

box-shadow:0 0 35px rgba(59,130,246,.35);

}

.floating-card i{

font-size:44px;

margin-bottom:18px;

color:#38bdf8;

}

.floating-card h3{

font-size:22px;

}

/* Footer */

footer{

padding:40px 0;

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

text-align:center;

color:#94a3b8;

}

/* Floating Animation */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/* Responsive */

@media(max-width:992px){

.hero{

padding-top:60px;

text-align:center;

}

.hero h1{

font-size:48px;

}

.hero-card{

margin-top:60px;

}

}

@media(max-width:768px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.hero-card{

grid-template-columns:1fr;

}

.quote-btn{

display:none;

}

.dropdown-menu{

position:static;

min-width:100%;

box-shadow:none;

margin-top:8px;

}

}
.show{
opacity:1 !important;
transform:translateY(0) !important;
}

.floating-card{
opacity:0;
transform:translateY(40px);
transition:.8s ease;
}
/* ==============================
SERVICES
============================== */

.services{

padding:120px 0;

background:#08101d;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h5{

color:#38bdf8;

font-weight:600;

letter-spacing:2px;

margin-bottom:15px;

}

.section-title h2{

font-size:48px;

font-weight:700;

margin-bottom:20px;

}

.section-title p{

color:#94a3b8;

font-size:20px;

}

.service-box{

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

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

border-radius:25px;

padding:45px 35px;

transition:.4s;

height:100%;

position:relative;

overflow:hidden;

}

.service-box::before{

content:"";

position:absolute;

top:-100%;

left:0;

width:100%;

height:100%;

background:linear-gradient(180deg,transparent,rgba(37,99,235,.18));

transition:.45s;

pointer-events:none;

z-index:0;

}

.service-box> *{

position:relative;

z-index:1;

}

.service-box:hover::before{

top:0;

}

.service-box:hover{

transform:translateY(-12px);

border-color:#2563eb;

box-shadow:0 25px 45px rgba(37,99,235,.25);

}

.service-icon{

width:80px;

height:80px;

border-radius:20px;

background:linear-gradient(135deg,#2563eb,#8b5cf6);

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

margin-bottom:30px;

}

.service-box h3{

font-size:28px;

margin-bottom:18px;

}

.service-box p{

color:#94a3b8;

line-height:1.8;

margin-bottom:25px;

}

.service-box a{

color:#38bdf8;

text-decoration:none;

font-weight:600;

}

.service-box a i{

margin-left:8px;

transition:.3s;

}

.service-box:hover a i{

margin-left:16px;

}
/* ===========================
WHY US
=========================== */

.why-us{

padding:120px 0;

background:#050816;

}

.why-us h5{

color:#38bdf8;

letter-spacing:2px;

margin-bottom:15px;

}

.why-us h2{

font-size:50px;

font-weight:700;

margin-bottom:25px;

}

.why-us> .container> .row> .col-lg-6:first-child> p{

color:#94a3b8;

font-size:18px;

line-height:1.8;

margin-bottom:45px;

}

.feature{

display:flex;

gap:20px;

margin-bottom:30px;

}

.feature i{

font-size:28px;

color:#3b82f6;

margin-top:5px;

}

.feature h4{

margin-bottom:8px;

}

.feature p{

color:#94a3b8;

margin:0;

}

.stats-grid{

display:grid;

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

gap:25px;

}

.stat-card{

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

border-radius:25px;

padding:45px;

text-align:center;

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

transition:.4s;

}

.stat-card:hover{

transform:translateY(-10px);

border-color:#2563eb;

box-shadow:0 20px 40px rgba(37,99,235,.3);

}

.stat-card h3{

font-size:60px;

background:linear-gradient(135deg,#38bdf8,#8b5cf6);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:15px;

}

.stat-card p{

color:#94a3b8;

margin:0;

font-size:18px;

}
/* ==============================
INDUSTRIES
============================== */

.industries{

padding:120px 0;

background:#08101d;

}

.industry-box{

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

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

border-radius:20px;

padding:35px 20px;

text-align:center;

transition:.35s;

height:100%;

}

.industry-box:hover{

transform:translateY(-8px);

border-color:#2563eb;

box-shadow:0 20px 35px rgba(37,99,235,.22);

}

.industry-box i{

font-size:32px;

color:#38bdf8;

margin-bottom:16px;

}

.industry-box h4{

font-size:17px;

font-weight:600;

margin:0;

}

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

.contact{

padding:120px 0;

background:#050816;

}

.contact h5{

color:#38bdf8;

font-weight:600;

letter-spacing:2px;

margin-bottom:15px;

}

.contact h2{

font-size:44px;

font-weight:700;

margin-bottom:22px;

}

.contact> .container> .row> .col-lg-5> p{

color:#94a3b8;

font-size:18px;

line-height:1.8;

margin-bottom:40px;

}

.contact-item{

display:flex;

align-items:flex-start;

gap:20px;

margin-bottom:28px;

}

.contact-item i{

font-size:22px;

color:#3b82f6;

margin-top:4px;

width:22px;

}

.contact-item h4{

font-size:16px;

margin-bottom:4px;

}

.contact-item a,
.contact-item p{

color:#94a3b8;

text-decoration:none;

margin:0;

}

.contact-item a:hover{

color:#38bdf8;

}

.quote-form{

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

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

border-radius:25px;

padding:45px;

}

.quote-form .form-label{

color:#cbd5e1;

font-weight:500;

margin-bottom:8px;

}

.quote-form .form-control,
.quote-form .form-select{

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

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

color:#fff;

padding:12px 16px;

border-radius:12px;

}

.quote-form .form-control:focus,
.quote-form .form-select:focus{

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

border-color:#2563eb;

box-shadow:0 0 0 .2rem rgba(37,99,235,.25);

color:#fff;

}

.quote-form .form-control::placeholder{

color:#64748b;

}

.quote-form select option{

background:#111827;

color:#fff;

}

.form-submit-btn{

border:none;

cursor:pointer;

font-size:17px;

}

.form-submit-btn:disabled{

opacity:.6;

cursor:not-allowed;

transform:none!important;

}

.form-alert{

padding:16px 20px;

border-radius:12px;

margin-bottom:25px;

font-weight:500;

}

.form-alert-success{

background:rgba(34,197,94,.12);

border:1px solid rgba(34,197,94,.4);

color:#4ade80;

}

.form-alert-error{

background:rgba(239,68,68,.12);

border:1px solid rgba(239,68,68,.4);

color:#f87171;

}

/* Footer links */

.footer-links{

display:flex;

justify-content:center;

gap:35px;

flex-wrap:wrap;

margin-bottom:20px;

}

.footer-links a{

color:#94a3b8;

text-decoration:none;

font-weight:500;

transition:.3s;

}

.footer-links a:hover{

color:#38bdf8;

}

/* Smooth anchor offset */

html{

scroll-padding-top:20px;

}

/* ==============================
SERVICE DETAIL PAGES
============================== */

.service-hero{

padding:160px 0 100px;

text-align:center;

}

.service-hero-icon{

width:90px;

height:90px;

margin:0 auto 30px;

border-radius:24px;

background:linear-gradient(135deg,#2563eb,#8b5cf6);

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

box-shadow:0 0 40px rgba(37,99,235,.4);

}

.service-hero h5{

color:#38bdf8;

font-weight:600;

letter-spacing:2px;

margin-bottom:18px;

}

.service-hero h1{

font-size:52px;

font-weight:800;

margin-bottom:22px;

}

.service-hero p{

color:#94a3b8;

font-size:19px;

line-height:1.8;

max-width:700px;

margin:0 auto 35px;

}

/* Provider cards */

.providers{

padding:100px 0;

background:#08101d;

}

.provider-card{

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

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

border-radius:25px;

padding:40px;

height:100%;

transition:.35s;

}

.provider-card:hover{

transform:translateY(-8px);

border-color:#2563eb;

box-shadow:0 25px 45px rgba(37,99,235,.22);

}

.provider-head{

display:flex;

align-items:center;

gap:18px;

margin-bottom:20px;

}

.provider-badge{

width:56px;

height:56px;

min-width:56px;

border-radius:16px;

background:linear-gradient(135deg,#2563eb,#8b5cf6);

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

}

.provider-head h3{

font-size:24px;

margin:0;

}

.provider-card> p{

color:#94a3b8;

line-height:1.75;

margin-bottom:22px;

}

.provider-benefits{

list-style:none;

margin:0 0 26px;

padding:0;

}

.provider-benefits li{

display:flex;

align-items:flex-start;

gap:12px;

color:#cbd5e1;

margin-bottom:12px;

font-size:15px;

}

.provider-benefits li i{

color:#38bdf8;

margin-top:4px;

}

.provider-cta{

display:inline-flex;

align-items:center;

gap:8px;

color:#38bdf8;

text-decoration:none;

font-weight:600;

}

.provider-cta i{

transition:.3s;

}

.provider-cta:hover i{

margin-left:6px;

}

/* Energy supplier marquee */

.energy-marquee-wrap{

overflow:hidden;

-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);

mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);

}

.energy-marquee{

overflow:hidden;

}

.energy-track{

display:flex;

gap:25px;

width:max-content;

animation:scroll-left 45s linear infinite;

}

@keyframes scroll-left{

0%{ transform:translateX(0); }

100%{ transform:translateX(-50%); }

}

.energy-card{

flex:0 0 260px;

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

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

border-radius:20px;

padding:30px 25px;

}

.energy-icon{

width:52px;

height:52px;

border-radius:14px;

background:linear-gradient(135deg,#2563eb,#8b5cf6);

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

margin-bottom:18px;

}

.energy-card h4{

font-size:17px;

margin-bottom:10px;

}

.energy-card p{

color:#94a3b8;

font-size:14px;

line-height:1.65;

margin:0;

}

/* CTA band */

.cta-band{

padding:90px 0;

text-align:center;

background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(139,92,246,.15));

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

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

}

.cta-band h2{

font-size:34px;

font-weight:700;

max-width:650px;

margin:0 auto 30px;

}

@media(max-width:768px){

.service-hero h1{

font-size:36px;

}

.cta-band h2{

font-size:26px;

}

}

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

.navbar-brand.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo-icon{

height:38px;

width:auto;

display:block;

}

.footer-logo{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

margin-bottom:22px;

}

.footer-logo-icon{

height:34px;

width:auto;

}

.footer-logo span{

font-size:22px;

font-weight:700;

color:#fff;

letter-spacing:.5px;

}

@media(max-width:768px){

.logo-icon{

height:32px;

}

}