/*==================================================
  AEGIS Portfolio
  Author : OpenAI
  Owner  : Shayan Abdul Rauf Khairi
==================================================*/

/* GOOGLE FONTS */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');

/* VARIABLES */

:root{

--bg:#030712;
--surface:#0b1220;
--surface2:#111827;
--glass:rgba(255,255,255,.05);

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

--primary:#3b82f6;

--secondary:#06b6d4;

--accent:#14b8a6;

--white:#ffffff;

--text:#e5e7eb;

--muted:#94a3b8;

--radius:22px;

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

--transition:.4s ease;

}

/* RESET */

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

html{

scroll-behavior:smooth;

}

body{

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

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

/* Scrollbar */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#050816;

}

::-webkit-scrollbar-thumb{

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

border-radius:30px;

}

/* LINKS */

a{

text-decoration:none;

color:inherit;

}

/* IMAGE */

img{

width:100%;

display:block;

}

/* LIST */

ul{
list-style:none;
}

/* SELECTION */

::selection{

background:var(--primary);

color:white;

}

/* SECTION */

section{

padding:120px 10%;

position:relative;

}

/* TITLES */

.section-title{

margin-bottom:70px;

}

.section-title span{

color:var(--secondary);

font-size:15px;

letter-spacing:2px;

text-transform:uppercase;

font-weight:600;

}

.section-title h2{

font-family:'Space Grotesk',sans-serif;

font-size:48px;

margin-top:12px;

font-weight:700;

color:white;

}

/* GLASS */

.glass{

background:var(--glass);

backdrop-filter:blur(20px);

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

border-radius:var(--radius);

}

/* BUTTONS */

.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

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

border-radius:100px;

font-weight:600;

color:white;

transition:var(--transition);

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

}

.primary-btn:hover{

transform:translateY(-5px);

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

}

.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

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

border-radius:100px;

transition:.4s;

font-weight:600;

margin-left:15px;

}

.secondary-btn:hover{

background:white;

color:#000;

}

/* LOADER */

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#020617;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-content{

text-align:center;

}

.loader-content h1{

font-size:70px;

font-family:'Space Grotesk',sans-serif;

letter-spacing:8px;

color:white;

margin-bottom:20px;

}

.loader-content p{

color:#94a3b8;

margin-bottom:25px;

}

.loading-bar{

width:300px;

height:5px;

background:#111827;

border-radius:20px;

overflow:hidden;

}

.loading-progress{

height:100%;

width:0%;

background:linear-gradient(to right,var(--primary),var(--secondary));

animation:loading 3s linear forwards;

}

@keyframes loading{

100%{

width:100%;

}

}

/* BACKGROUND */

#networkCanvas{

position:fixed;

width:100%;

height:100vh;

left:0;

top:0;

z-index:-3;

}

.noise{

position:fixed;

inset:0;

background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

opacity:.04;

pointer-events:none;

z-index:-2;

}

/*==================================================
NAVIGATION
==================================================*/

header{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:1000;
    padding:22px 7%;
    transition:.4s;
}

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

    background:rgba(8,15,30,.55);

    backdrop-filter:blur(18px);

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

    border-radius:70px;

    padding:16px 30px;

    box-shadow:0 15px 50px rgba(0,0,0,.35);
}

.logo{

    font-size:28px;

    font-weight:800;

    color:white;

    font-family:'Space Grotesk',sans-serif;

    letter-spacing:1px;

}

.logo span{

    color:var(--primary);

}

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-links a{

    color:var(--muted);

    font-size:15px;

    transition:.35s;

    position:relative;

}

.nav-links a:hover{

    color:white;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:linear-gradient(to right,var(--primary),var(--secondary));

    transition:.4s;

}

.nav-links a:hover::after{

    width:100%;

}

.resume-btn{

    padding:14px 28px;

    border-radius:100px;

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

    color:white;

    font-weight:600;

    transition:.35s;

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

}

.resume-btn:hover{

    transform:translateY(-4px);

}

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

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:80px;

}

.hero-left{

    position:relative;

    z-index:5;

}

.hero-top{

    color:var(--secondary);

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:25px;

    font-size:14px;

    font-weight:600;

}

.hero h1{

    font-size:72px;

    line-height:1.05;

    font-family:'Space Grotesk',sans-serif;

    color:white;

    margin-bottom:25px;

}

.hero h2{

    font-size:34px;

    font-weight:600;

    color:var(--primary);

    margin-bottom:30px;

}

.hero-description{

    color:var(--muted);

    font-size:18px;

    max-width:640px;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    align-items:center;

    margin-bottom:60px;

}

.hero-stats{

    display:flex;

    gap:60px;

}

.hero-stats div{

    position:relative;

}

.hero-stats h3{

    color:white;

    font-size:34px;

    font-family:'Space Grotesk',sans-serif;

}

.hero-stats span{

    color:var(--muted);

}

/*==================================================
IMAGE
==================================================*/

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.image-card{

    position:relative;

    width:440px;

    border-radius:35px;

    overflow:hidden;

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

    backdrop-filter:blur(20px);

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

    padding:20px;

    box-shadow:0 30px 80px rgba(0,0,0,.45);

}

.image-card img{

    border-radius:25px;

    transition:.5s;

}

.image-card:hover img{

    transform:scale(1.03);

}

.image-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:#2563eb;

    filter:blur(120px);

    opacity:.28;

    top:-100px;

    right:-70px;

}

.image-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:#06b6d4;

    filter:blur(120px);

    opacity:.22;

    bottom:-100px;

    left:-60px;

}

/*==================================================
SCROLL INDICATOR
==================================================*/

.scroll-down{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    animation:float 2s infinite;

}

@keyframes float{

    0%{

        transform:translate(-50%,0px);

    }

    50%{

        transform:translate(-50%,12px);

    }

    100%{

        transform:translate(-50%,0px);

    }

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

.about-preview{

    position:relative;

}

.about-preview p{

    max-width:900px;

    color:var(--muted);

    font-size:20px;

    line-height:2;

}

/*==================================================
SKILLS
==================================================*/

.skills{

    position:relative;

}

.skills-grid{

    display:grid;

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

    gap:35px;

}

.skill-card{

    position:relative;

    padding:45px;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

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

    transition:.45s;

    overflow:hidden;

}

.skill-card::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

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

    filter:blur(120px);

    opacity:0;

    transition:.45s;

    right:-120px;

    top:-120px;

}

.skill-card:hover{

    transform:translateY(-12px);

    border-color:rgba(59,130,246,.5);

}

.skill-card:hover::before{

    opacity:.22;

}

.skill-card i{

    font-size:55px;

    color:var(--primary);

    margin-bottom:25px;

}

.skill-card h3{

    font-size:28px;

    color:white;

    margin-bottom:15px;

    font-family:'Space Grotesk',sans-serif;

}

.skill-card p{

    color:var(--muted);

    font-size:17px;

}

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

.cta{

    text-align:center;

    padding:140px 10%;

}

.cta h2{

    font-size:56px;

    color:white;

    font-family:'Space Grotesk',sans-serif;

    margin-bottom:25px;

}

.cta p{

    color:var(--muted);

    font-size:20px;

    max-width:760px;

    margin:auto;

    margin-bottom:45px;

}

.cta a{

    display:inline-block;

    padding:18px 42px;

    border-radius:60px;

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

    color:white;

    font-weight:700;

    transition:.4s;

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

}

.cta a:hover{

    transform:translateY(-8px);

}

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

footer{

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:45px 8%;

    background:#050816;

}

.footer-left h3{

    color:white;

    font-size:28px;

    margin-bottom:10px;

    font-family:'Space Grotesk',sans-serif;

}

.footer-left p{

    color:var(--muted);

}

.footer-right{

    display:flex;

    gap:18px;

}

.footer-right a{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

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

    color:white;

    transition:.4s;

    font-size:18px;

}

.footer-right a:hover{

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

    transform:translateY(-8px) rotate(360deg);

}

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

body::before{

    content:"";

    position:fixed;

    width:500px;

    height:500px;

    background:#2563eb;

    left:-200px;

    top:150px;

    filter:blur(220px);

    opacity:.12;

    z-index:-5;

}

body::after{

    content:"";

    position:fixed;

    width:450px;

    height:450px;

    background:#06b6d4;

    right:-150px;

    bottom:-100px;

    filter:blur(220px);

    opacity:.10;

    z-index:-5;

}

/*==================================================
TEXT GLOW
==================================================*/

.hero h1{

    text-shadow:

    0 0 20px rgba(37,99,235,.15),

    0 0 40px rgba(37,99,235,.08);

}

.section-title h2{

    text-shadow:

    0 0 25px rgba(255,255,255,.05);

}

/*==================================================
SMOOTH TRANSITIONS
==================================================*/

*{

    transition:

    background .3s,

    color .3s,

    border .3s,

    transform .35s;


}


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

.about-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:60px;

align-items:center;

}

.about-text p{

font-size:18px;

color:var(--muted);

margin-bottom:28px;

line-height:2;

}

.about-buttons{

margin-top:45px;

}

.about-card{

padding:45px;

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

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

border-radius:28px;

backdrop-filter:blur(25px);

}

.about-card h3{

margin-bottom:30px;

font-size:28px;

font-family:'Space Grotesk',sans-serif;

color:white;

}

.fact{

display:flex;

justify-content:space-between;

padding:18px 0;

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

}

.fact:last-child{

border:none;

}

.fact span{

color:var(--muted);

}

.fact strong{

color:white;

}
/* ==========================
   PROFILE CARD
========================== */

.profile-card{

padding:35px;

border-radius:28px;

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

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

backdrop-filter:blur(30px);

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

}

.profile-top{

display:flex;

align-items:center;

gap:12px;

padding-bottom:20px;

margin-bottom:20px;

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

}

.status-dot{

width:12px;

height:12px;

background:#22c55e;

border-radius:50%;

box-shadow:0 0 15px #22c55e;

animation:pulse 2s infinite;

}

.profile-top span{

font-weight:600;

color:white;

}

.profile-item{

display:flex;

gap:18px;

margin:25px 0;

align-items:flex-start;

}

.profile-item i{

font-size:24px;

color:#3b82f6;

width:35px;

margin-top:5px;

}

.profile-item h4{

color:white;

margin-bottom:5px;

font-size:18px;

}

.profile-item p{

color:var(--muted);

line-height:1.7;

font-size:15px;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.3);

opacity:.6;

}

100%{

transform:scale(1);

opacity:1;

}

}
/*==================================
ENTERPRISE METRICS
==================================*/

.metrics{

display:grid;

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

gap:30px;

padding:80px 10%;

}

.metric-card{

padding:45px 30px;

text-align:center;

transition:.4s;

position:relative;

overflow:hidden;

}

.metric-card::before{

content:"";

position:absolute;

width:180px;

height:180px;

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

filter:blur(100px);

opacity:0;

transition:.4s;

top:-60px;

right:-60px;

}

.metric-card:hover{

transform:translateY(-10px);

border-color:rgba(59,130,246,.45);

}

.metric-card:hover::before{

opacity:.22;

}

.metric-card h2{

font-size:58px;

font-family:'Space Grotesk',sans-serif;

color:white;

margin-bottom:10px;

}

.metric-card p{

color:var(--muted);

font-size:17px;

letter-spacing:.5px;

}
/*==========================================
EXPERIENCE TIMELINE
==========================================*/

/*==========================================
EXPERIENCE TIMELINE
==========================================*/

.experience{

padding-bottom:80px;

}


.timeline{

position:relative;

max-width:1050px;

margin:auto;

padding:50px 0;

}



/* TIMELINE LINE */

.timeline::before{

content:"";

position:absolute;

left:25px;

top:0;

bottom:0;

width:2px;

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

}


/* TIMELINE ITEM */

.timeline-item{

position:relative;

padding-left:75px;

margin-bottom:55px;

}





/* DOT */

.timeline-dot{

position:absolute;

left:14px;

top:35px;

width:24px;

height:24px;

border-radius:50%;

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

box-shadow:

0 0 25px rgba(59,130,246,.8);

z-index:2;

}





/* EXPERIENCE CARD */

.timeline-content{

padding:32px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

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

border-radius:24px;

backdrop-filter:blur(20px);

box-shadow:

0 20px 60px rgba(0,0,0,.35);

transition:.4s ease;

position:relative;

overflow:hidden;

}




/* CARD GLOW */

.timeline-content::before{

content:"";

position:absolute;

width:180px;

height:180px;

right:-80px;

top:-80px;

background:var(--secondary);

filter:blur(100px);

opacity:.15;

}





/* HOVER */

.timeline-content:hover{

transform:translateY(-8px);

border-color:var(--secondary);

box-shadow:

0 25px 70px rgba(6,182,212,.20);

}





/* DATE BADGE */

.timeline-date{

display:inline-block;

padding:6px 15px;

border-radius:50px;

background:rgba(6,182,212,.12);

border:1px solid rgba(6,182,212,.25);

color:var(--secondary);

font-size:12px;

letter-spacing:1.2px;

font-weight:700;

text-transform:uppercase;

}





/* JOB TITLE */

.timeline-content h3{

margin:16px 0 6px;

font-size:26px;

color:white;

font-family:'Space Grotesk',sans-serif;

}





/* COMPANY */

.timeline-content h4{

margin-bottom:18px;

font-size:17px;

color:var(--primary);

}





/* DESCRIPTION */

.timeline-content p{

color:var(--muted);

font-size:15px;

line-height:1.8;

margin-bottom:18px;

}





/* TECHNOLOGY BOX */

.tech-stack{

margin-top:20px;

padding:15px 18px;

background:rgba(59,130,246,.08);

border:1px solid rgba(59,130,246,.18);

border-radius:14px;

color:#cbd5e1;

font-size:13px;

line-height:1.9;

}





/* HIDE OLD BULLETS */

.timeline-content ul{

display:none;

}


.timeline-content li{

display:none;

}