/* =========================================================
   KAGE GEE LLC
   Main Stylesheet
   Version 1.0
========================================================= */

:root{

    --bg:#07070a;
    --bg2:#111119;

    --primary:#7c3aed;
    --secondary:#4f46e5;

    --accent:#00d9ff;

    --white:#ffffff;

    --gray:#b7b7b7;

    --card:#14141d;

    --border:rgba(255,255,255,.08);

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

    --radius:18px;

    --transition:.35s ease;

}

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

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

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);

    color:var(--white);

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

    overflow-x:hidden;

    line-height:1.7;

}

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

a{

    color:inherit;

    text-decoration:none;

}

ul{
    list-style:none;
}

.container{

    width:min(1300px,92%);

    margin:auto;

}

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

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(124,58,237,.25),
    transparent 40%),

    radial-gradient(circle at bottom left,
    rgba(0,217,255,.15),
    transparent 45%),

    var(--bg);

    z-index:-2;

}

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

.navbar{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

    backdrop-filter:blur(18px);

    background:rgba(9,9,12,.55);

    border-bottom:1px solid var(--border);

}

.nav-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

.logo img{

    height:62px;

}

nav ul{

    display:flex;

    gap:38px;

    align-items:center;

}

nav a{

    transition:var(--transition);

    font-weight:600;

}

nav a:hover{

    color:var(--accent);

}

.quote-btn{

    padding:14px 28px;

    background:linear-gradient(135deg,
    var(--primary),
    var(--secondary));

    border-radius:999px;

    box-shadow:0 0 35px rgba(124,58,237,.35);

}

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

.hero{

    min-height:100vh;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.hero-background{

    position:absolute;

    inset:0;

}

.hero-background img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.05);

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(to bottom,
    rgba(0,0,0,.25),
    rgba(0,0,0,.85));

}

.hero-content{

    position:relative;

    z-index:5;

    text-align:center;

}

.hero-logo{

    width:180px;

    margin:auto auto 40px;

}

.hero h1{

    font-size:clamp(3rem,8vw,6.8rem);

    font-weight:800;

    line-height:1;

    margin-bottom:25px;

}

.hero h1 span{

    color:var(--accent);

}

.hero p{

    font-size:1.2rem;

    color:var(--gray);

    max-width:760px;

    margin:auto;

}

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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:50px;

    flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

    padding:18px 36px;

    border-radius:999px;

    transition:var(--transition);

    font-weight:700;

}

.btn-primary{

    background:linear-gradient(135deg,
    var(--primary),
    var(--secondary));

}

.btn-secondary{

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

}

.btn-primary:hover,
.btn-secondary:hover{

    transform:translateY(-6px);

}

/* =======================================
SERVICES
======================================= */

.services-preview{

    padding:120px 0;

}

.services-preview h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:70px;

}

.service-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

}

.service-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:40px;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:rgba(124,58,237,.45);

}

.service-card h3{

    margin-bottom:18px;

    font-size:1.5rem;

}

.service-card p{

    color:var(--gray);

}

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

footer{

    padding:70px 0;

    border-top:1px solid var(--border);

    text-align:center;

    color:var(--gray);

}

/* =======================================
SCROLLBAR
======================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-track{

    background:#090909;

}
/* ==========================
   GALLERY
========================== */

.gallery-section{

    padding:120px 0;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

}

.gallery-item{

    overflow:hidden;

    border-radius:18px;

    background:#14141d;

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

    transition:.35s;

}

.gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;

}

.gallery-item:hover{

    transform:translateY(-10px);

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-cta{

    padding:120px 0;

    text-align:center;

}

.gallery-cta p{

    max-width:700px;

    margin:25px auto 40px;

    color:#b7b7b7;

}
/* ==========================
ABOUT
==========================*/

.about-section{

padding:120px 0;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.about-image img{

width:100%;

border-radius:20px;

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

}

.about-content p{

margin:25px 0;

color:#b7b7b7;

}

.about-services{

padding:120px 0;

}

.process-section{

padding:120px 0;

background:#101018;

}

.timeline{

display:grid;

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

gap:30px;

text-align:center;

}

.number{

width:70px;

height:70px;

margin:auto;

border-radius:50%;

background:#7c3aed;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

font-weight:bold;

margin-bottom:20px;

}

.why-section{

padding:120px 0;

}

.about-cta{

padding:120px 0;

text-align:center;

}

.about-cta p{

margin:25px auto 40px;

max-width:700px;

color:#b7b7b7;

}

@media(max-width:900px){

.about-grid{

grid-template-columns:1fr;

}

.timeline{

grid-template-columns:1fr;

}

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

.contact-section{

padding:120px 0;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:60px;

align-items:start;

}

.info-card{

display:flex;

gap:20px;

margin-bottom:35px;

align-items:flex-start;

}

.info-card img{

width:48px;

height:48px;

}

.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,

.contact-form select,

.contact-form textarea{

padding:18px;

background:#16161f;

border:1px solid #2f2f44;

border-radius:10px;

color:#fff;

font-size:16px;

}

.contact-form input:focus,

.contact-form select:focus,

.contact-form textarea:focus{

outline:none;

border-color:#7c3aed;

}

.contact-form textarea{

resize:vertical;

}

.contact-cta{

padding:120px 0;

text-align:center;

}

.contact-cta p{

max-width:650px;

margin:25px auto 40px;

color:#b7b7b7;

}

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

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

footer{

background:#09090d;

padding:80px 0 0;

margin-top:120px;

border-top:1px solid #222;

}

.footer-grid{

display:grid;

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

gap:50px;

}

.footer-logo{

height:90px;

margin-bottom:25px;

}

footer h3{

margin-bottom:20px;

color:#fff;

}

footer p,

footer li,

footer a{

color:#b5b5c5;

text-decoration:none;

line-height:2;

transition:.3s;

}

footer a:hover{

color:#9f67ff;

}

footer ul{

list-style:none;

padding:0;

}

.copyright{

margin-top:60px;

padding:25px;

text-align:center;

border-top:1px solid #222;

font-size:14px;

color:#888;

}

@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:auto auto 25px;

}

}