/* ==========================================
   KAD SOLAR - COMING SOON
   ========================================== */

:root{

    --primary:#0E3370;
    --secondary:#FECC00;
    --green:#1D9F3F;
    --orange:#F38221;
    --dark:#04152D;
    --white:#ffffff;
    --text:#D9E3F5;

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Montserrat',sans-serif;
    background:linear-gradient(135deg,#04152D,#0E3370,#081A3D);
    color:#fff;
    overflow-x:hidden;
    min-height:100vh;

}

/* ==========================================
BACKGROUND
========================================== */

#canvas-container{

    position:fixed;
    inset:0;
    z-index:-3;

}

.overlay{

    position:fixed;
    inset:0;

    background:

    radial-gradient(circle at top,
    rgba(254,204,0,.08),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(243,130,33,.08),
    transparent 35%),

    rgba(0,0,0,.45);

    z-index:-2;

}

/* ==========================================
LOADER
========================================== */

#loader{

    position:fixed;
    inset:0;

    background:#04152D;

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

    z-index:9999;

}

.loader-logo img{

    width:120px;
    animation:pulse 2s infinite;

}

.loading-bar{

    width:220px;
    height:6px;

    background:#163A72;

    border-radius:100px;

    margin-top:30px;

    overflow:hidden;

}

.loading-bar span{

    display:block;

    width:40%;
    height:100%;

    background:linear-gradient(
    90deg,
    var(--secondary),
    var(--orange));

    animation:loading 2s infinite;

}

@keyframes loading{

0%{transform:translateX(-150px);}
100%{transform:translateX(250px);}

}

@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

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

header{

padding:35px 60px;

}

.logo{

width:170px;

}

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

.hero{

min-height:75vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:40px;

}

.badge{

display:inline-block;

padding:10px 28px;

border-radius:50px;

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

backdrop-filter:blur(12px);

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

color:var(--secondary);

font-weight:700;

letter-spacing:2px;

margin-bottom:30px;

}

.hero h1{

font-size:74px;

font-weight:800;

line-height:1.1;

max-width:900px;

}

.hero h1 span{

display:block;

color:var(--secondary);

}

.hero p{

max-width:760px;

font-size:20px;

line-height:1.9;

margin-top:35px;

color:var(--text);

}

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

.buttons{

display:flex;

gap:25px;

margin-top:50px;

flex-wrap:wrap;

justify-content:center;

}

.btn{

padding:18px 38px;

border-radius:60px;

font-weight:700;

text-decoration:none;

transition:.35s;

display:flex;

align-items:center;

gap:12px;

}

.primary{

background:linear-gradient(
45deg,
var(--secondary),
var(--orange));

color:#000;

box-shadow:0 20px 45px rgba(243,130,33,.4);

}

.secondary{

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

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

color:#fff;

backdrop-filter:blur(20px);

}

.btn:hover{

transform:translateY(-6px);

}

/* ==========================================
FEATURES
========================================== */

.features{

display:grid;

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

gap:35px;

padding:70px 8%;

}

.card{

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

backdrop-filter:blur(25px);

border-radius:25px;

padding:45px 35px;

text-align:center;

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

transition:.4s;

}

.card:hover{

transform:translateY(-12px);

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

}

.card i{

font-size:42px;

color:var(--secondary);

margin-bottom:20px;

}

.card h3{

margin-bottom:14px;

font-size:24px;

}

.card p{

color:#D8D8D8;

line-height:1.8;

}

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

.contact{

padding:90px 8%;

text-align:center;

}

.contact h2{

font-size:48px;

margin-bottom:60px;

color:var(--secondary);

}

.contact-grid{

display:grid;

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

gap:40px;

}

.contact-grid div{

padding:35px;

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

backdrop-filter:blur(20px);

border-radius:25px;

}

.contact-grid i{

font-size:36px;

margin-bottom:20px;

color:var(--orange);

}

.contact-grid p{

line-height:1.8;

color:#EAEAEA;

}

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

footer{

padding:35px;

text-align:center;

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

color:#bbb;

}

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

@media(max-width:1100px){

.features{

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

}

.contact-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:56px;

}

}

@media(max-width:768px){

header{

padding:30px;

text-align:center;

}

.logo{

width:130px;

}

.hero{

padding:20px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.features{

grid-template-columns:1fr;

}

.buttons{

flex-direction:column;

width:100%;

}

.btn{

justify-content:center;

}

}