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

.about-hero{
    position:relative;
    height:65vh;
    background:
    linear-gradient(rgba(5,10,20,.75),rgba(5,10,20,.85)),
    url("../images/about-banner.jpg") center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;
}

.about-hero::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background:radial-gradient(circle,#00ff9d55,transparent 70%);
    animation:pulseGlow 6s infinite;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.2);
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
    padding:20px;
}

.hero-content h4{
    color:#00ff99;
    letter-spacing:6px;
    margin-bottom:20px;
    font-size:18px;
}

.hero-content h1{
    font-family:Orbitron;
    font-size:72px;
    color:#fff;
    text-shadow:
    0 0 15px #00ff88,
    0 0 30px #00ff88;
}

.hero-content p{
    margin-top:25px;
    color:#ddd;
    font-size:22px;
    line-height:1.8;
}

/* =========================
COMPANY
========================= */

.company{

padding:100px 8%;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

background:#08121f;

}

.company img{

width:100%;

border-radius:25px;

box-shadow:
0 0 25px rgba(0,255,153,.30);

transition:.5s;

}

.company img:hover{

transform:scale(1.03);

box-shadow:
0 0 45px rgba(0,255,153,.55);

}

.company h2{

font-size:42px;

margin-bottom:25px;

font-family:Orbitron;

color:#00ff99;

}

.company p{

font-size:18px;

line-height:1.9;

margin-bottom:18px;

color:#d8d8d8;

}

/* =========================
VISION
========================= */

.vision{

display:grid;

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

gap:35px;

padding:80px 8%;

background:#0d1625;

}

.box{

padding:45px;

border-radius:25px;

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

backdrop-filter:blur(18px);

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

transition:.4s;

}

.box:hover{

transform:translateY(-12px);

box-shadow:

0 0 35px rgba(0,255,153,.35);

}

.box h2{

color:#00ff99;

margin-bottom:18px;

font-family:Orbitron;

}

.box p{

line-height:1.9;

color:#d8d8d8;

}

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

.why{

padding:100px 8%;

background:#08121f;

}

.why h2{

text-align:center;

font-size:48px;

margin-bottom:60px;

font-family:Orbitron;

color:#00ff99;

}

.why-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.why-card{

padding:35px;

text-align:center;

border-radius:25px;

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

backdrop-filter:blur(20px);

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

transition:.4s;

}

.why-card:hover{

transform:translateY(-12px);

box-shadow:

0 0 30px rgba(0,255,153,.45);

}

.why-card h3{

margin-bottom:15px;

color:#00ff99;

font-size:24px;

}

.why-card p{

color:#ddd;

line-height:1.7;

}

/* =========================
COUNTERS
========================= */

.stats{

padding:90px 5%;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:30px;

background:#0b1320;

}

.stat-box{

padding:40px;

text-align:center;

border-radius:20px;

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

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

}

.stat-box h2{

font-size:55px;

color:#00ff99;

font-family:Orbitron;

text-shadow:0 0 20px #00ff99;

}

.stat-box p{

margin-top:12px;

font-size:18px;

color:#ddd;

}

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

.cta{

padding:100px 20px;

text-align:center;

background:linear-gradient(135deg,#03111d,#071b2f);

}

.cta h2{

font-size:50px;

font-family:Orbitron;

margin-bottom:20px;

color:#fff;

}

.cta p{

font-size:22px;

margin-bottom:35px;

color:#ddd;

}

.cta .btn-primary{

display:inline-block;

padding:18px 45px;

background:#00ff99;

color:#000;

font-weight:bold;

text-decoration:none;

border-radius:50px;

transition:.4s;

}

.cta .btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 0 30px #00ff99;

}

/* =========================
ANIMATION
========================= */

@keyframes pulseGlow{

0%{
transform:scale(.9);
opacity:.6;
}

50%{
transform:scale(1.2);
opacity:1;
}

100%{
transform:scale(.9);
opacity:.6;
}

}

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

@media(max-width:991px){

.company{

grid-template-columns:1fr;

}

.vision{

grid-template-columns:1fr;

}

.hero-content h1{

font-size:48px;

}

.hero-content p{

font-size:18px;

}

.why h2{

font-size:36px;

}

.cta h2{

font-size:36px;

}

}