:root{

--bg:#070707;
--card:#121212;
--text:#ffffff;

--primary:#ff1e8a;
--primary-light:#ff4fa8;

--gray:#9f9f9f;

--border:
rgba(255,255,255,0.08);

--shadow:
0 0 35px rgba(255,30,138,0.25);

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

}

/* =========================
LIGHT MODE
========================= */

.light-mode{

--bg:#fff7f2;
--card:#ffffff;
--text:#111111;

--gray:#666666;

--border:
rgba(0,0,0,0.08);

}

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

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

html{
scroll-behavior:smooth;
}

body{

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

background:var(--bg);
color:var(--text);

overflow-x:hidden;

transition:0.4s;

}

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

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{

background:var(--primary);
border-radius:20px;

}

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

.navbar{

padding:20px 0;

background:
rgba(0,0,0,0.65);

backdrop-filter:blur(12px);

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

}

.light-mode .navbar{

background:
rgba(255,255,255,0.75);

}

.logo{

display:flex;
align-items:center;
gap:12px;

font-size:32px;
font-weight:700;

color:var(--text);

text-decoration:none;

}

.logo:hover{
color:var(--text);
}

.logo-circle{

width:44px;
height:44px;

border-radius:50%;

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

background:var(--gradient);

color:white;

font-weight:700;

box-shadow:var(--shadow);

}

.nav-link{

color:var(--text) !important;

margin-left:20px;

font-weight:500;

position:relative;

transition:0.3s;

}

.nav-link:hover{

color:var(--primary) !important;

}

.nav-link::after{

content:'';

position:absolute;

left:0;
bottom:-6px;

width:0%;
height:2px;

background:var(--primary);

transition:0.3s;

}

.nav-link:hover::after{
width:100%;
}

.navbar-toggler{

border:none;
color:white;

}

.navbar-toggler:focus{
box-shadow:none;
}

/* =========================
THEME BUTTON
========================= */

.theme-btn{

width:46px;
height:46px;

border:none;
border-radius:50%;

margin-left:18px;

background:var(--card);

color:var(--text);

transition:0.4s;

}

.theme-btn:hover{

background:var(--primary);

color:white;

box-shadow:var(--shadow);

}

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

section{
padding:120px 0;
}

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

#home{

min-height:100vh;

display:flex;
align-items:center;

position:relative;

overflow:hidden;

}

/* BLUR */

.hero-blur{

position:absolute;

border-radius:50%;

filter:blur(120px);

}

.hero-blur-1{

width:500px;
height:500px;

background:
rgba(255,30,138,0.18);

top:-120px;
right:-120px;

}

.hero-blur-2{

width:400px;
height:400px;

background:
rgba(91,72,255,0.12);

bottom:-120px;
left:-120px;

}

/* BADGE */

.hero-badge{

display:inline-flex;
align-items:center;
gap:10px;

padding:12px 18px;

border-radius:40px;

background:
rgba(255,255,255,0.05);

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

margin-bottom:28px;

font-size:14px;
font-weight:500;

backdrop-filter:blur(10px);

}

/* HERO TITLE */

/* .hero-title{
font-size:56px;
line-height:70px;
font-weight:800;
} */

.hero-title span{

color:var(--primary);

text-shadow:
0 0 20px rgba(255,30,138,0.35);

}

/* HERO TEXT */

.hero-text{

font-size:10px;
line-height:34px;

color:var(--gray);

max-width:620px;

margin-bottom:38px;

}

/* BUTTON */

.main-btn{

display:inline-flex;
align-items:center;
gap:10px;

padding:16px 36px;

border-radius:16px;

background:var(--gradient);

color:white;

text-decoration:none;

font-weight:600;

transition:0.4s;

box-shadow:var(--shadow);

}

.main-btn:hover{

transform:
translateY(-5px);

color:white;

}

/* HERO IMAGE */

.hero-image-wrapper{

position:relative;

display:flex;
justify-content:center;

}

.hero-image-glow{

position:absolute;

width:100px;
height:100px;

border-radius:50%;

background:
rgba(255,30,138,0.25);

filter:blur(90px);

z-index:0;

}

.hero-image{

position:relative;

z-index:1;

width:100%;
max-width:520px;

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

}

/* =========================
SECTION HEAD
========================= */

.section-head{

margin-bottom:70px;

}

.section-head.center{
text-align:center;
}

.section-head span{

display:inline-block;

padding:10px 16px;

border-radius:40px;

background:
rgba(255,255,255,0.05);

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

margin-bottom:18px;

font-size:14px;

}

.section-head h2{

font-size:48px;
font-weight:700;

line-height:64px;

max-width:700px;

}

.section-head.center h2{
margin:auto;
}

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

.about-wrapper{

background:var(--card);

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

border-radius:32px;

padding:55px;

}

.about-image-box{

position:relative;

}

.about-image{

width:100%;

border-radius:28px;

height:100%;
object-fit:cover;

}

.about-content h3{

font-size:36px;
line-height:54px;

margin-bottom:28px;

}

.about-content p{

font-size:16px;
line-height:32px;

color:var(--gray);

margin-bottom:20px;

}

.about-cards{

display:grid;

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

gap:20px;

margin-top:35px;

}

.about-card{

display:flex;
align-items:center;
gap:18px;

padding:20px;

background:
rgba(255,255,255,0.04);

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

border-radius:22px;

transition:0.4s;

}

.about-card:hover{

transform:translateY(-6px);

border-color:
rgba(255,30,138,0.25);

}

.about-card i{

font-size:28px;

color:var(--primary);

}

.about-card h5{

margin-bottom:5px;

font-size:18px;

}

.about-card span{

font-size:14px;

color:var(--gray);

}

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

.project-card{

background:var(--card);

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

border-radius:28px;

overflow:hidden;

height:100%;

transition:0.4s;

}

.project-image{
width:100%;
height:200px;
object-fit:cover;
}

.project-card:hover{

transform:translateY(-10px);

border-color:
rgba(255,30,138,0.25);

box-shadow:
0 20px 50px rgba(255,30,138,0.12);

}

.project-image{
overflow:hidden;
}

.project-image img{

width:100%;
height:260px;

object-fit:cover;

transition:0.5s;

}

.project-card:hover img{

transform:scale(1.08);

}

.project-content{
padding:28px;
}

.project-content h4{

font-size:25px;

margin-bottom:15px;

}

.project-content p{

color:var(--gray);

line-height:30px;

margin-bottom:24px;

}

/* TECH */

.project-tech{

display:flex;
flex-wrap:wrap;
gap:12px;

}

.tech-badge{

display:flex;
align-items:center;
gap:8px;

padding:10px 16px;

border-radius:40px;

background:
rgba(255,255,255,0.05);

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

font-size:14px;

transition:0.3s;

cursor:default;

}

.tech-badge:hover{

background:var(--primary);

color:white;

}

.tech-badge i{
font-size:16px;
}

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

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}

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

@media(max-width:992px){

.hero-title{

font-size:58px;
line-height:72px;

}

.section-head h2{

font-size:42px;
line-height:56px;

}

.about-content h3{

font-size:30px;
line-height:46px;

}

}

@media(max-width:768px){

section{
padding:90px 0;
}

.hero-title{

font-size:44px;
line-height:58px;

}

.hero-text{

font-size:16px;
line-height:30px;

}

.section-head h2{

font-size:34px;
line-height:48px;

}

.about-wrapper{
padding:30px;
}

.about-cards{

grid-template-columns:1fr;

}

}

@media(max-width:576px){

.hero-title{

font-size:36px;
line-height:50px;

}

.section-head h2{

font-size:30px;
line-height:42px;

}

.project-content{
padding:22px;
}

}

:root{

--bg:#070707;
--card:#121212;
--text:#ffffff;

--primary:#ff1e8a;
--primary-light:#ff4fa8;

--gray:#9f9f9f;

--border:rgba(255,255,255,0.08);

--shadow:0 0 35px rgba(255,30,138,0.25);

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

}

.light-mode{

--bg:#fff7f2;
--card:#ffffff;
--text:#111111;

--gray:#666;

--border:rgba(0,0,0,0.08);

--shadow:0 0 25px rgba(255,30,138,0.18);

}

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

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
transition:0.4s;
}

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

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:var(--primary);
border-radius:20px;
}

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

.navbar{
padding:18px 0;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
z-index:1000;
}

.light-mode .navbar{
background:rgba(255,255,255,0.85);
}

.logo{
display:flex;
align-items:center;
gap:12px;
font-size:30px;
font-weight:700;
color:var(--text);
text-decoration:none;
}

.logo-circle{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:var(--gradient);
box-shadow:var(--shadow);
color:#fff;
font-weight:700;
}

/* NAV LINKS */

.nav-link{
color:var(--text)!important;
margin-left:18px;
position:relative;
font-weight:500;
transition:0.3s;
}

.nav-link:hover{
color:var(--primary)!important;
}

.nav-link::after{
content:'';
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:var(--primary);
transition:0.3s;
}

.nav-link:hover::after{
width:100%;
}

/* ================= ACTIVE LINK FIX ================= */

.nav-link.active{
color:var(--primary)!important;
}

/* ================= TOGGLE ================= */

.theme-btn{
width:46px;
height:46px;
border:none;
border-radius:50%;
background:var(--card);
color:var(--text);
margin-left:18px;
transition:0.3s;
}

.theme-btn:hover{
background:var(--primary);
color:#fff;
box-shadow:var(--shadow);
}

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

section{
padding:110px 0;
}

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

#home{
min-height:100vh;
display:flex;
align-items:center;
position:relative;
overflow:hidden;
}

.hero-blur{
position:absolute;
filter:blur(120px);
border-radius:50%;
}

.hero-blur-1{
width:520px;
height:520px;
background:rgba(255,30,138,0.18);
top:-150px;
right:-150px;
}

.hero-blur-2{
width:420px;
height:420px;
background:rgba(80,60,255,0.12);
bottom:-150px;
left:-150px;
}

/* HERO TEXT */

.hero-badge{
display:inline-flex;
gap:10px;
align-items:center;
padding:10px 18px;
border-radius:40px;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
font-size:14px;
margin-bottom:25px;
}

.hero-title{
font-size:72px;
font-weight:800;
line-height:88px;
}

.hero-title span{
color:var(--primary);
text-shadow:0 0 18px rgba(255,30,138,0.35);
}

.hero-text{
margin-top:20px;
font-size:18px;
line-height:32px;
color:var(--gray);
max-width:600px;
}

/* BUTTON */

.main-btn{
display:inline-flex;
gap:10px;
align-items:center;
margin-top:30px;
padding:15px 34px;
border-radius:14px;
text-decoration:none;
background:var(--gradient);
color:#fff;
font-weight:600;
transition:0.3s;
box-shadow:var(--shadow);
}

.main-btn:hover{
transform:translateY(-5px);
}

/* HERO IMAGE */

.hero-image-wrapper{
position:relative;
display:flex;
justify-content:center;
}

.hero-image-glow{
position:absolute;
width:420px;
height:420px;
background:rgba(255,30,138,0.25);
filter:blur(90px);
border-radius:50%;
}

.hero-image{
position:relative;
z-index:1;
width:100%;
max-width:520px;
animation:float 4s ease-in-out infinite;
}

/* ================= SECTION HEAD ================= */

.section-head{
margin-bottom:60px;
}

.section-head.center{
text-align:center;
}

.section-head span{
display:inline-block;
padding:8px 16px;
border-radius:30px;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
font-size:13px;
margin-bottom:15px;
}

.section-head h2{
font-size:44px;
font-weight:700;
}

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

.about-wrapper{
background:var(--card);
border:1px solid var(--border);
border-radius:30px;
padding:50px;
}

.about-content h3{
font-size:34px;
line-height:50px;
margin-bottom:20px;
}

.about-content p{
color:var(--gray);
line-height:30px;
margin-bottom:18px;
}

.about-cards{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-top:30px;
}

.about-card{
display:flex;
gap:15px;
align-items:center;
padding:18px;
border-radius:18px;
background:rgba(255,255,255,0.04);
border:1px solid var(--border);
transition:0.3s;
}

.about-card:hover{
transform:translateY(-5px);
border-color:rgba(255,30,138,0.3);
}

.about-card i{
font-size:26px;
color:var(--primary);
}

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

.project-card{
background:var(--card);
border:1px solid var(--border);
border-radius:26px;
overflow:hidden;
transition:0.3s;
height:100%;
}

.project-card:hover{
transform:translateY(-10px);
border-color:rgba(255,30,138,0.25);
box-shadow:0 20px 40px rgba(255,30,138,0.12);
}

.project-image img{
width:100%;
height:250px;
object-fit:cover;
transition:0.4s;
}

.project-card:hover img{
transform:scale(1.08);
}

.project-content{
padding:25px;
}

.project-content p{
color:var(--gray);
margin-bottom:20px;
}

/* TECH */

.project-tech{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.tech-badge{
padding:8px 14px;
border-radius:30px;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
font-size:13px;
transition:0.3s;
}

.tech-badge:hover{
background:var(--primary);
}

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

.skill-item{
background:var(--card);
border:1px solid var(--border);
border-radius:24px;
padding:40px 20px;
text-align:center;
transition:0.3s;
}

.skill-item:hover{
transform:translateY(-8px);
}

.skill-item i{
font-size:55px;
color:var(--primary);
margin-bottom:18px;
}

.skill-item span{
display:block;
margin-top:10px;
color:var(--gray);
font-size:13px;
}

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

.contact-card{
background:var(--card);
border:1px solid var(--border);
border-radius:24px;
padding:35px;
text-align:center;
transition:0.3s;
}

.contact-card:hover{
transform:translateY(-8px);
border-color:rgba(255,30,138,0.25);
}

.contact-icon{
width:70px;
height:70px;
margin:auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:var(--gradient);
margin-bottom:18px;
}

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

.social-links{
margin-top:50px;
display:flex;
justify-content:center;
gap:15px;
}

.social-links a{
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--card);
border:1px solid var(--border);
color:var(--text);
transition:0.3s;
}

.social-links a:hover{
background:var(--primary);
transform:translateY(-5px);
}

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

.footer{
padding:60px 0;
border-top:1px solid var(--border);
text-align:center;
}

.footer-logo{
display:flex;
justify-content:center;
gap:10px;
font-size:28px;
font-weight:700;
margin-bottom:15px;
}

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

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-15px);}
100%{transform:translateY(0);}
}

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

@media(max-width:768px){

.hero-title{
font-size:40px;
line-height:55px;
}

.section-head h2{
font-size:30px;
}

.about-wrapper{
padding:25px;
}

.about-cards{
grid-template-columns:1fr;
}

}