/*=========================================
        GOOGLE FONTS
=========================================*/

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

/*=========================================
        ROOT VARIABLES
=========================================*/

:root{

--bg:#050816;

--bg2:#0F172A;

--card:#111827;

--card2:#1F2937;

--text:#ffffff;

--text2:#94A3B8;

--purple:#8B5CF6;

--blue:#38BDF8;

--gold:#FACC15;

--green:#22C55E;

--danger:#EF4444;

--shadow:0 10px 40px rgba(0,0,0,.35);

--radius:18px;

--transition:.4s ease;

}

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

*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}

html{

overflow-x:hidden;

}

body{

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

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

position:relative;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0b1020;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--purple),
var(--blue)
);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--gold);

}

/*=========================================
            GLOBAL
=========================================*/

section:not(.hero){

padding:110px 8%;

position:relative;

z-index:2;

}

.container{

max-width:1300px;

margin:auto;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:white;

}

ul{

list-style:none;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading span{

color:var(--blue);

font-weight:600;

letter-spacing:3px;

font-size:.95rem;

}

.section-heading h2{

font-size:3rem;

margin-top:15px;

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

}

.section-heading p{

margin-top:18px;

max-width:700px;

margin-inline:auto;

color:var(--text2);

}

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

.bg-gradient{

position:fixed;

inset:0;

background:

radial-gradient(circle at top left,
rgba(139,92,246,.12),
transparent 35%),

radial-gradient(circle at bottom right,
rgba(56,189,248,.12),
transparent 35%),

#050816;

z-index:-10;

}

.bg-blur{

position:fixed;

width:420px;

height:420px;

border-radius:50%;

filter:blur(120px);

opacity:.25;

z-index:-5;

animation:blob 14s infinite ease-in-out;

}

.bg-blur.purple{

background:#8B5CF6;

top:-120px;

left:-120px;

}

.bg-blur.blue{

background:#38BDF8;

right:-100px;

bottom:10%;

animation-delay:3s;

}

.bg-blur.gold{

background:#FACC15;

bottom:-120px;

left:40%;

animation-delay:6s;

}

@keyframes blob{

0%{

transform:translate(0,0) scale(1);

}

50%{

transform:translate(40px,-40px) scale(1.2);

}

100%{

transform:translate(0,0) scale(1);

}

}

/*=========================================
            PRELOADER
=========================================*/

#loader{

position:fixed;

width:100%;

height:100vh;

background:#050816;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

}

.loader-circle{

width:80px;

height:80px;

border-radius:50%;

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

border-top:6px solid var(--blue);

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:18px 8%;

transition:.4s;

}

header.active{

background:rgba(5,8,22,.75);

backdrop-filter:blur(16px);

box-shadow:0 5px 20px rgba(0,0,0,.25);

}

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:2rem;

font-weight:700;

font-family:"Space Grotesk";

}

.logo span{

color:var(--blue);

}

.nav-links{

display:flex;

gap:35px;

}

.nav-links a{

font-weight:500;

transition:.3s;

position:relative;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--blue);

transition:.4s;

}

.nav-links a:hover::after{

width:100%;

}

.nav-links a:hover{

color:var(--blue);

}

.nav-right{

display:flex;

align-items:center;

gap:20px;

}

.cv-btn{

padding:12px 26px;

border-radius:50px;

background:linear-gradient(
135deg,
var(--purple),
var(--blue)
);

font-weight:600;

transition:.4s;

box-shadow:0 0 25px rgba(56,189,248,.25);

}

.cv-btn:hover{

transform:translateY(-5px);

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

}

.menu-btn{

display:none;

font-size:1.7rem;

cursor:pointer;

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

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    padding:0 8%;
}

.hero-container{

max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.hero-content{

position:relative;

z-index:5;

}

.hello{

display:inline-block;

padding:10px 22px;

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

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

backdrop-filter:blur(15px);

border-radius:50px;

font-size:.95rem;

margin-bottom:25px;

color:var(--blue);

}

.hero h1{

font-size:5rem;

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

font-weight:700;

line-height:1.1;

margin-bottom:10px;

}

.hero h1 span{

background:linear-gradient(
135deg,
var(--purple),
var(--blue)
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero h2{

font-size:2rem;

margin-bottom:30px;

color:var(--gold);

height:55px;

font-weight:600;

}

.hero-text{

max-width:620px;

color:var(--text2);

font-size:1.05rem;

margin-bottom:35px;

}

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

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:40px;

}

.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

border-radius:60px;

background:linear-gradient(
135deg,
var(--purple),
var(--blue)
);

font-weight:600;

transition:var(--transition);

box-shadow:0 15px 35px rgba(56,189,248,.25);

}

.primary-btn:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(56,189,248,.45);

}

.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

border-radius:60px;

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

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

backdrop-filter:blur(15px);

transition:var(--transition);

}

.secondary-btn:hover{

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

transform:translateY(-8px);

}

/*=========================
      SOCIAL ICONS
==========================*/

.social-links{

display:flex;

gap:18px;

margin-bottom:45px;

}

.social-links a{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

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

font-size:1.3rem;

transition:.4s;

backdrop-filter:blur(10px);

}

.social-links a:hover{

background:linear-gradient(
135deg,
var(--purple),
var(--blue)
);

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

}

/*=========================
        STATS
==========================*/

.stats{

display:grid;

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

gap:18px;

}

.stat-card{

padding:25px;

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

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

backdrop-filter:blur(18px);

border-radius:20px;

text-align:center;

transition:.4s;

}

.stat-card:hover{

transform:translateY(-10px);

border-color:var(--blue);

box-shadow:0 20px 45px rgba(56,189,248,.20);

}

.stat-card h2{

font-size:2rem;

color:var(--blue);

margin-bottom:10px;

}

.stat-card p{

font-size:.95rem;

color:var(--text2);

}

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

.hero-image{

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.image-wrapper{

position:relative;

width:450px;

height:450px;

display:flex;

align-items:center;

justify-content:center;

}

.image-wrapper img{

width:340px;

height:340px;

object-fit:cover;

border-radius:50%;

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

box-shadow:

0 0 60px rgba(56,189,248,.20),

0 0 120px rgba(139,92,246,.18);

z-index:10;

}

/*=========================
         RINGS
==========================*/

.ring{

position:absolute;

border-radius:50%;

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

animation:rotateRing linear infinite;

}

.ring.one{

width:360px;

height:360px;

animation-duration:15s;

}

.ring.two{

width:420px;

height:420px;

border-style:dashed;

animation-duration:25s;

animation-direction:reverse;

}

.ring.three{

width:500px;

height:500px;

border-color:rgba(56,189,248,.20);

animation-duration:35s;

}

@keyframes rotateRing{

100%{

transform:rotate(360deg);

}

}

/*=========================================
      FLOATING TECH ICONS
=========================================*/

.floating{

position:absolute;

width:65px;

height:65px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

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

backdrop-filter:blur(16px);

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

font-size:2rem;

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

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

}

.react{

top:5%;

left:-20px;

color:#61DBFB;

}

.js{

right:-10px;

top:18%;

color:#F7DF1E;

animation-delay:1s;

}

.html{

left:-40px;

bottom:25%;

color:#E44D26;

animation-delay:2s;

}

.css{

right:-35px;

bottom:10%;

color:#2196F3;

animation-delay:3s;

}

.node{

top:75%;

left:10%;

color:#3C873A;

animation-delay:4s;

}

.git{

top:65%;

right:10%;

color:#F1502F;

animation-delay:5s;

}

.ai{

top:-10px;

left:50%;

font-size:2rem;

animation-delay:6s;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

/*=========================================
      SCROLL DOWN
=========================================*/

.scroll-down{

position:absolute;

left:50%;

bottom:30px;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

font-size:.9rem;

color:var(--text2);

animation:bounce 2s infinite;

}

.scroll-down i{

font-size:1.3rem;

color:var(--blue);

}

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

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

}

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

.about{

position:relative;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-left{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.about-image{

width:430px;

height:520px;

overflow:hidden;

border-radius:30px;

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

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

backdrop-filter:blur(18px);

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

transition:.5s;

}

.about-image:hover{

transform:translateY(-10px);

box-shadow:0 25px 70px rgba(56,189,248,.25);

}

.about-image img{

width:100%;

height:100%;

object-fit:cover;

}

.floating-card{

position:absolute;

padding:22px;

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

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

backdrop-filter:blur(18px);

border-radius:20px;

min-width:180px;

text-align:center;

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

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

}

.project-float-card{

top:40px;

left:-30px;

}

.client-card{

bottom:50px;

right:-30px;

animation-delay:2s;

}

.floating-card h3{

font-size:2rem;

color:var(--blue);

margin-bottom:8px;

}

.floating-card p{

font-size:.95rem;

color:var(--text2);

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.about-right h3{

font-size:2.7rem;

margin-bottom:25px;

font-family:"Space Grotesk";

}

.about-right h3 span{

background:linear-gradient(135deg,var(--purple),var(--blue));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.about-right p{

color:var(--text2);

margin-bottom:22px;

font-size:1.05rem;

}

.about-info{

display:grid;

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

gap:22px;

margin:40px 0;

}

.info-card{

display:flex;

gap:18px;

align-items:flex-start;

padding:22px;

border-radius:18px;

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

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

backdrop-filter:blur(15px);

transition:.4s;

}

.info-card:hover{

transform:translateY(-8px);

border-color:var(--blue);

box-shadow:0 20px 45px rgba(56,189,248,.20);

}

.info-card i{

font-size:2rem;

color:var(--blue);

margin-top:5px;

}

.info-card h4{

margin-bottom:8px;

}

.info-card p{

font-size:.9rem;

margin:0;

}

.about-buttons{

display:flex;

gap:20px;

margin-top:25px;

}

/*=========================================
            ACHIEVEMENTS
=========================================*/

.achievements{

padding-top:40px;

}

.achievement-grid{

display:grid;

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

gap:25px;

}

.achievement-card{

padding:40px 30px;

border-radius:22px;

text-align:center;

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

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

backdrop-filter:blur(18px);

transition:.4s;

position:relative;

overflow:hidden;

}

.achievement-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:radial-gradient(circle,
rgba(56,189,248,.25),
transparent);

top:-110px;

right:-110px;

transition:.5s;

}

.achievement-card:hover::before{

transform:scale(1.4);

}

.achievement-card:hover{

transform:translateY(-10px);

border-color:var(--blue);

}

.achievement-card i{

font-size:2.7rem;

color:var(--gold);

margin-bottom:25px;

}

.achievement-card h2{

font-size:2.5rem;

margin-bottom:12px;

color:var(--blue);

}

.achievement-card p{

color:var(--text2);

}

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

.services{

position:relative;

}

.services-grid{

display:grid;

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

gap:30px;

}

.service-box{

padding:35px;

border-radius:25px;

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

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

backdrop-filter:blur(18px);

transition:.45s;

overflow:hidden;

position:relative;

}

.service-box::before{

content:"";

position:absolute;

width:300px;

height:300px;

background:radial-gradient(circle,
rgba(139,92,246,.15),
transparent);

top:-180px;

right:-180px;

transition:.5s;

}

.service-box:hover::before{

transform:scale(1.5);

}

.service-box:hover{

transform:translateY(-15px);

border-color:var(--blue);

box-shadow:0 25px 60px rgba(56,189,248,.20);

}

.service-image{
    display:flex;
    justify-content:center;
    align-items:center;
    height:200px;
    margin-bottom:25px;
}

.service-image img{
    width:180px;
    height:180px;
    object-fit:contain;
    transition:.4s;
}

.service-box:hover .service-image img{
    transform:scale(1.08);
}

.service-box h3{

font-size:1.5rem;

margin-bottom:15px;

font-family:"Space Grotesk";

}

.service-box p{

color:var(--text2);

margin-bottom:25px;

}

.service-box a{

display:inline-flex;

align-items:center;

gap:8px;

color:var(--blue);

font-weight:600;

transition:.3s;

}

.service-box a:hover{

letter-spacing:1px;

}

/*=========================================
            FEATURE STRIP
=========================================*/

.feature-strip{

padding:50px 8%;

}

.feature-strip .container{

display:grid;

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

gap:20px;

}

.feature-item{

padding:22px;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

border-radius:16px;

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

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

backdrop-filter:blur(15px);

transition:.4s;

}

.feature-item:hover{

transform:translateY(-8px);

border-color:var(--gold);

}

.feature-item i{

font-size:1.4rem;

color:var(--gold);

}

.feature-item span{

font-weight:500;

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

.skills{

position:relative;

}

.skills-grid{

display:grid;

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

gap:28px;

}

.skill-card{

padding:30px;

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

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

backdrop-filter:blur(18px);

border-radius:22px;

text-align:center;

transition:.45s;

position:relative;

overflow:hidden;

}

.skill-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:220px;

height:220px;

background:radial-gradient(circle,
rgba(56,189,248,.18),
transparent);

transition:.5s;

}

.skill-card:hover::before{

transform:scale(1.6);

}

.skill-card:hover{

transform:translateY(-12px);

border-color:var(--blue);

box-shadow:0 20px 55px rgba(56,189,248,.20);

}

.skill-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

display:flex;

align-items:center;

justify-content:center;

font-size:3rem;

border-radius:50%;

background:linear-gradient(
135deg,
rgba(139,92,246,.20),
rgba(56,189,248,.20)
);

color:var(--blue);

}

.skill-card h3{

margin-bottom:20px;

font-size:1.3rem;

}

.progress{

height:8px;

border-radius:50px;

background:#1e293b;

overflow:hidden;

margin-bottom:15px;

}

.progress-bar{

height:100%;

background:linear-gradient(
90deg,
var(--purple),
var(--blue)
);

border-radius:50px;

}

.skill-card span{

color:var(--blue);

font-weight:600;

}

/*=========================================
            TECH STACK
=========================================*/

.tech-stack{

padding-top:70px;

}

.stack-grid{

display:grid;

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

gap:25px;

}

.stack-box{

padding:35px 20px;

text-align:center;

border-radius:20px;

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

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

transition:.4s;

backdrop-filter:blur(15px);

}

.stack-box:hover{

transform:translateY(-12px) rotate(2deg);

border-color:var(--purple);

box-shadow:0 20px 45px rgba(139,92,246,.18);

}

.stack-box i{

font-size:3rem;

margin-bottom:18px;

background:linear-gradient(
135deg,
var(--purple),
var(--blue)
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.stack-box h4{

font-size:1.05rem;

}

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

.experience{

position:relative;

}

.timeline{

position:relative;

max-width:900px;

margin:auto;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

width:3px;

height:100%;

background:linear-gradient(
180deg,
var(--purple),
var(--blue)
);

transform:translateX(-50%);

}

.timeline-item{

position:relative;

width:50%;

padding:30px 45px;

}

.timeline-item:nth-child(odd){

left:0;

text-align:right;

}

.timeline-item:nth-child(even){

left:50%;

}

.timeline-dot{

position:absolute;

top:45px;

width:20px;

height:20px;

background:var(--blue);

border-radius:50%;

box-shadow:0 0 20px var(--blue);

}

.timeline-item:nth-child(odd) .timeline-dot{

right:-11px;

}

.timeline-item:nth-child(even) .timeline-dot{

left:-9px;

}

.timeline-content{

padding:30px;

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

border-radius:20px;

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

backdrop-filter:blur(18px);

transition:.4s;

}

.timeline-content:hover{

transform:translateY(-8px);

border-color:var(--blue);

}

.timeline-content span{

display:inline-block;

margin-bottom:15px;

color:var(--gold);

font-weight:600;

}

.timeline-content h3{

margin-bottom:12px;

font-size:1.5rem;

}

.timeline-content p{

color:var(--text2);

}

/*=========================================
            EDUCATION
=========================================*/

.education-card{

max-width:900px;

margin:auto;

padding:45px;

border-radius:25px;

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

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

backdrop-filter:blur(18px);

text-align:center;

transition:.45s;

}

.education-card:hover{

transform:translateY(-10px);

border-color:var(--purple);

box-shadow:0 20px 60px rgba(139,92,246,.18);

}

.education-card h3{

font-size:2rem;

margin-bottom:18px;

font-family:"Space Grotesk";

}

.education-card h4{

color:var(--blue);

margin-bottom:20px;

}

.education-card p{

color:var(--text2);

max-width:700px;

margin:auto;

}

/*=========================================
            AI SECTION
=========================================*/

.future{

position:relative;

overflow:hidden;

}

.future-content{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

}

.future-content span{

color:var(--blue);

font-weight:600;

letter-spacing:2px;

}

.future-content h2{

font-size:3rem;

margin:18px 0;

font-family:"Space Grotesk";

}

.future-content p{

color:var(--text2);

margin-bottom:35px;

max-width:600px;

}

.future-image{

display:flex;

justify-content:center;

}

.future-image img{

width:420px;

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

filter:drop-shadow(0 20px 45px rgba(56,189,248,.25));

}
/*=========================================
                PROJECTS
=========================================*/

.projects{

position:relative;

}

.projects-grid{

display:grid;

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

gap:35px;

}

.project-card{

background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:25px;
backdrop-filter:blur(18px);
transition:.45s;
position:relative;
padding:32px;
min-height:390px;
display:flex;
}

.project-content{
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
width:100%;
padding:0;
}

.project-content p{
line-height:1.9;
margin:20px 0 28px;
color:var(--text2);
}

.project-image,
.project-overlay,
.project-btn{
display:none;
}


.project-card:hover{

transform:translateY(-15px);

border-color:var(--blue);

box-shadow:0 25px 60px rgba(56,189,248,.22);

}

.project-image{

position:relative;

height:260px;

overflow:hidden;

}

.project-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}

.project-card:hover img{

transform:scale(1.08);

}

.project-overlay{

position:absolute;

inset:0;

background:rgba(5,8,22,.75);

display:flex;

align-items:center;

justify-content:center;

gap:20px;

opacity:0;

transition:.4s;

}

.project-card:hover .project-overlay{

opacity:1;

}

.project-btn{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(
135deg,
var(--purple),
var(--blue)
);

font-size:1.3rem;

transition:.35s;

}

.project-btn:hover{

transform:scale(1.15) rotate(8deg);

}

.project-content{

padding:30px;

}

.project-category{

display:inline-block;

padding:7px 15px;

background:rgba(56,189,248,.15);

color:var(--blue);

border-radius:40px;

font-size:.85rem;

margin-bottom:18px;

}

.project-content h3{

font-size:1.7rem;

margin-bottom:15px;

font-family:"Space Grotesk";

}

.project-content p{

color:var(--text2);

margin-bottom:22px;

}

.project-tech{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.project-tech span{

padding:8px 14px;

border-radius:50px;

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

font-size:.85rem;

}

/*=========================================
            CASE STUDY
=========================================*/

.case-grid{

display:grid;

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

gap:25px;

}

.case-box{

padding:35px;

border-radius:22px;

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

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

transition:.4s;

position:relative;

overflow:hidden;

}

.case-box:hover{

transform:translateY(-10px);

border-color:var(--gold);

}

.case-number{

font-size:3rem;

font-weight:700;

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

margin-bottom:20px;

}

.case-box h3{

margin-bottom:15px;

font-size:1.5rem;

}

.case-box p{

color:var(--text2);

}

/*=========================================
            TESTIMONIALS
=========================================*/

.testimonial-slider{

display:grid;

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

gap:30px;

}

.testimonial-card{

padding:35px;

text-align:center;

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

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

border-radius:25px;

transition:.4s;

backdrop-filter:blur(18px);

}

.testimonial-card:hover{

transform:translateY(-12px);

border-color:var(--blue);

}

.testimonial-card img{

display:none;

}

.testimonial-card h3{

margin-bottom:8px;

}

.testimonial-card h5{

color:var(--gold);

margin-bottom:18px;

font-weight:500;

}

.testimonial-card p{

color:var(--text2);

font-style:italic;

}

/*=========================================
                BLOG
=========================================*/

.blog-grid{

display:grid;

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

gap:30px;

}

.blog-card{

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

border-radius:22px;

overflow:hidden;

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

transition:.45s;

}

.blog-card:hover{

transform:translateY(-12px);

border-color:var(--purple);

}

.blog-card img{

height:240px;

width:100%;

object-fit:cover;

}

.blog-content{

padding:28px;

}

.blog-content span{

color:var(--blue);

font-size:.9rem;

}

.blog-content h3{

margin:18px 0;

font-size:1.45rem;

font-family:"Space Grotesk";

}

.blog-content a{

color:var(--gold);

font-weight:600;

}

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

.contact-wrapper{

display:grid;

grid-template-columns:380px 1fr;

gap:50px;

}

.contact-info{

display:flex;

flex-direction:column;

gap:22px;

}

.contact-item{

display:flex;

gap:20px;

padding:24px;

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

border-radius:18px;

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

transition:.35s;

}

.contact-item:hover{

border-color:var(--blue);

transform:translateX(8px);

}

.contact-item i{

font-size:1.8rem;

color:var(--blue);

}

.contact-item h4{

margin-bottom:8px;

}

.contact-item p{

color:var(--text2);

}

form{

display:flex;

flex-direction:column;

gap:22px;

}

form input,

form textarea{

padding:18px 22px;

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

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

border-radius:15px;

color:white;

font-family:Poppins;

outline:none;

transition:.35s;

}

form input:focus,

form textarea:focus{

border-color:var(--blue);

box-shadow:0 0 15px rgba(56,189,248,.25);

}

textarea{

resize:none;

}

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

footer{

padding:80px 8% 30px;

background:#030712;

margin-top:100px;

}

.footer-grid{

display:grid;

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

gap:40px;

margin-bottom:40px;

}

.footer-grid h2{

font-family:"Space Grotesk";

margin-bottom:18px;

}

.footer-grid h3{

margin-bottom:20px;

}

.footer-grid p,

.footer-grid li{

color:var(--text2);

margin-bottom:12px;

}

.footer-grid ul li a{

color:var(--text2);

transition:.3s;

}

.footer-grid ul li a:hover{

color:var(--blue);

}

.footer-social{

display:flex;

gap:15px;

margin-top:20px;

}

.footer-social a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

transition:.35s;

}

.footer-social a:hover{

background:linear-gradient(
135deg,
var(--purple),
var(--blue)
);

transform:translateY(-6px);

}

footer hr{

border:none;

height:1px;

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

margin:40px 0 25px;

}

.copyright{

text-align:center;

color:var(--text2);

font-size:.95rem;

}

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

@media(max-width:1200px){

.hero-container,
.about-grid,
.future-content{

grid-template-columns:1fr;

text-align:center;

}

.hero-text{

margin:auto auto 35px;

}

.stats{

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

}

.skills-grid{

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

}

.services-grid,
.projects-grid,
.blog-grid,
.testimonial-slider,
.case-grid{

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

}

.stack-grid{

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

}

.footer-grid{

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

}

.contact-wrapper{

grid-template-columns:1fr;

}

.timeline::before{

left:25px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:70px;

padding-right:20px;

text-align:left!important;

}

.timeline-dot{

left:16px!important;

right:auto!important;

}

}

@media(max-width:768px){

.nav-links{

display:none;

}

.menu-btn{

display:block;

}

.hero h1{

font-size:3.2rem;

}

.hero h2{

font-size:1.5rem;

}

.stats,

.skills-grid,

.services-grid,

.projects-grid,

.case-grid,

.blog-grid,

.stack-grid,

.testimonial-slider,

.achievement-grid,

.about-info,

.feature-strip .container,

.footer-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:2.2rem;

}

.image-wrapper{

width:320px;

height:320px;

}

.image-wrapper img{

width:240px;

height:240px;

}

.floating{

display:none;

}

.about-image{

width:100%;

height:auto;

}

.future-image img{

width:280px;

}

.hero-buttons{

flex-direction:column;

}

.about-buttons{

flex-direction:column;

}

}



/* ===== HERO FIX (Added by ChatGPT) ===== */
#particles-js{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-2;
    pointer-events:none;
}

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:90px 8% 40px !important;
    position:relative;
    overflow:hidden;
    z-index:2;
}

.hero-container{
    width:100%;
    max-width:1300px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
    min-height:calc(100vh - 90px);
    position:relative;
    z-index:3;
}

.hero-content{
    position:relative;
    z-index:5;
}

@media(max-width:1200px){
    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
        min-height:auto;
    }
}
/* About section without image */

.about-grid.single-column{
    display:block;
}

.about-grid.single-column .about-right{
    max-width:900px;
    margin:0 auto;
}

.about-grid.single-column .about-right h3{
    text-align:left;
}

.about-grid.single-column .about-right p{
    text-align:left;
}

.about-grid.single-column .about-info{
    margin-top:40px;
}

.about-grid.single-column .about-buttons{
    justify-content:flex-start;
}
/* Center the last service card */
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.services-grid .service-box:last-child{
    grid-column:2;
}


/* =========================
   FINAL RESPONSIVE PATCH
========================= */

@media (max-width:992px){
.hero-container,.future-content{grid-template-columns:1fr!important;text-align:center;}
.services-grid,.projects-grid,.skills-grid,.case-grid,.testimonial-slider,.achievement-grid{grid-template-columns:repeat(2,1fr)!important;}
.stack-grid{grid-template-columns:repeat(3,1fr)!important;}
.feature-strip .container{grid-template-columns:repeat(2,1fr)!important;}
.contact-wrapper,.footer-grid{grid-template-columns:1fr!important;}
.services-grid .service-box:last-child{grid-column:auto!important;}
}

@media (max-width:768px){
header{padding:15px 20px;}
.menu-btn{display:block;}
.cv-btn{display:none;}
.nav-links{
display:none;
position:absolute;
top:75px;
left:0;
width:100%;
background:#0F172A;
flex-direction:column;
padding:25px;
gap:18px;
border-radius:16px;
z-index:999;
}
.nav-links.show{display:flex;}
.hero{padding:120px 20px 60px!important;}
.hero-container{grid-template-columns:1fr!important;gap:40px;}
.hero h1{font-size:2.6rem;}
.hero h2{font-size:1.25rem;height:auto;}
.hero-text{font-size:.95rem;}
.hero-buttons,.about-buttons{flex-direction:column;}
.primary-btn,.secondary-btn{width:100%;}
.stats,.about-info,.services-grid,.projects-grid,.skills-grid,.case-grid,.stack-grid,.testimonial-slider,.achievement-grid,.feature-strip .container,.footer-grid{
grid-template-columns:1fr!important;
}
.image-wrapper{width:260px;height:260px;}
.image-wrapper img{width:200px;height:200px;}
.ring.one{width:240px;height:240px;}
.ring.two{width:280px;height:280px;}
.ring.three{width:320px;height:320px;}
.floating{display:none!important;}
.service-image{height:150px;}
.service-image img{width:120px;height:120px;}
.future-image img{width:220px;}
.contact-item{flex-direction:column;text-align:center;}
.social-links,.footer-social{justify-content:center;}
footer{text-align:center;}
}
@media (max-width:768px){

    .projects{
        padding: 80px 20px !important;
    }

    .projects-grid{
        grid-template-columns:1fr;
        gap:25px;
        padding:0;
    }

    .project-card{
        width:100%;
        margin:0 auto;
    }

}
@media (max-width:768px){

    .container{
        width:100%;
        padding:0 20px;
    }

}