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

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

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

html{
scroll-behavior:smooth;
}

body{
font-family:"Inter",sans-serif;
background:#0a192f;
color:#e6f1ff;
overflow-x:hidden;
line-height:1.7;
}


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

.bg-glow{
position:fixed;
width:600px;
height:600px;
background:#8a2be2;
top:-100px;
left:-100px;
filter:blur(200px);
opacity:.35;
z-index:-1;
}


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

.nav{

position:fixed;
top:0;
left:0;

width:100%;

padding:20px 60px;

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

background:rgba(10,25,47,.75);

backdrop-filter:blur(20px);

z-index:1000;
}

.logo{
color:#64ffda;
font-size:2rem;
font-weight:700;
}

.nav-links{
display:flex;
gap:35px;
}

.nav-links a{

text-decoration:none;
color:#ccd6f6;
font-weight:500;
position:relative;
}

.nav-links a::after{

content:"";

position:absolute;

left:0;
bottom:-5px;

width:0;
height:2px;

background:#64ffda;

transition:.4s;
}

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


/* =====================
HAMBURGER
===================== */

.hamburger{

display:none;

flex-direction:column;
cursor:pointer;
gap:5px;
}

.hamburger span{

width:25px;
height:3px;

background:#64ffda;

transition:.4s;
}

.hamburger.active span:nth-child(1){

transform:
rotate(45deg)
translate(5px,6px);

}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){

transform:
rotate(-45deg)
translate(5px,-6px);

}


/* =====================
SECTIONS
===================== */

.section{

padding:120px 80px;
min-height:100vh;
}


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

.hero{

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

gap:70px;
}

.hero h1{
font-size:4rem;
}

.hero span{
color:#64ffda;
}

.typing{

margin-top:10px;
font-size:1.3rem;

color:#8a2be2;
}

.subtext{

margin-top:20px;

max-width:550px;
opacity:.8;
}


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

.buttons{

display:flex;
gap:20px;

margin-top:30px;
}

.buttons button{

padding:14px 28px;

border:none;
border-radius:50px;

background:#64ffda;

font-weight:600;

cursor:pointer;

transition:.4s;
}

.buttons button:hover{

transform:translateY(-5px);

box-shadow:
0 0 25px rgba(100,255,218,.3);
}


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

.image-card{

padding:20px;

border-radius:25px;

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

backdrop-filter:blur(15px);

transition:.4s;
}

.image-card:hover{

transform:translateY(-10px);
}

.image-card img{

width:260px;

border-radius:20px;
}


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

.about{
text-align:center;
}

.about p{

max-width:800px;

margin:20px auto;

opacity:.8;
}

.stats{

display:flex;
justify-content:center;
flex-wrap:wrap;

gap:20px;

margin-top:40px;
}

.stat{

padding:18px 25px;

border-radius:15px;

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

transition:.4s;
}

.stat:hover{

transform:translateY(-6px);

box-shadow:
0 0 20px rgba(138,43,226,.25);
}


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

.services{

text-align:center;
}

.services-subtitle{

max-width:700px;

margin:auto;

opacity:.8;
}

.service-grid{

display:grid;

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

gap:30px;

margin-top:60px;
}

.service-card{

padding:35px;

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

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

border-radius:25px;

backdrop-filter:blur(20px);

transition:.4s;
}

.service-card:hover{

transform:
translateY(-10px);

border-color:#64ffda;

box-shadow:
0 0 30px rgba(100,255,218,.15);
}

.service-icon{

font-size:35px;

margin-bottom:20px;
}

.service-card h3{

margin-bottom:15px;
}

.service-card p{

opacity:.8;

margin-bottom:20px;
}

.tech-stack{

display:flex;

gap:10px;

flex-wrap:wrap;
}

.tech-stack span{

padding:8px 14px;

border-radius:30px;

font-size:.85rem;

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

color:#64ffda;
}


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

.cards{

display:grid;

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

gap:25px;

margin-top:50px;
}

.card{

padding:25px;

border-radius:20px;

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

backdrop-filter:blur(15px);

transition:.4s;
}

.card:hover{

transform:translateY(-10px);

box-shadow:
0 0 25px rgba(138,43,226,.25);
}

.card a{

display:inline-block;

margin-top:15px;

color:#64ffda;

text-decoration:none;
}


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

.contact{

text-align:center;
}

.contact-form{

max-width:850px;

margin:40px auto;

display:flex;
flex-direction:column;

gap:20px;
}

.input-row{

display:flex;
gap:20px;
}

.contact-form input,
.contact-form textarea{

width:100%;

padding:18px;

border:none;
outline:none;

border-radius:18px;

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

color:white;
}

.contact-form textarea{
resize:none;
}

.contact-form button{

width:fit-content;

padding:14px 35px;

margin:auto;

border:none;

border-radius:50px;

background:#64ffda;

color:#0a192f;

font-weight:600;

cursor:pointer;

transition:.4s;
}

.contact-form button:hover{

transform:translateY(-5px);

box-shadow:
0 0 25px rgba(100,255,218,.25);
}

.contact-form button:hover{

transform:translateY(-5px);

box-shadow:
0 0 25px rgba(100,255,218,.25);
}


/* =====================
WHATSAPP + SOCIALS
===================== */

.quick-contact{
margin-top:40px;
}

.whatsapp-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:15px 30px;

border-radius:50px;

text-decoration:none;

color:white;

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

transition:.4s;
}

.whatsapp-btn:hover{

transform:translateY(-5px);

background:
rgba(37,211,102,.1);

box-shadow:
0 0 25px rgba(37,211,102,.3);
}

.socials{

margin-top:30px;

display:flex;
justify-content:center;
gap:30px;
}

.socials a{

text-decoration:none;
color:#64ffda;
}

/* =====================
POPUP
===================== */

.popup{
position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

background:rgba(0,0,0,.65);

backdrop-filter:blur(10px);

opacity:0;
visibility:hidden;

pointer-events:none;

z-index:9999;

transition:.4s ease;
}

.popup.show{

opacity:1;
visibility:visible;

pointer-events:auto;
}

.popup-content{

width:90%;
max-width:400px;

padding:35px;

border-radius:25px;

background:rgba(17,34,64,.9);

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

backdrop-filter:blur(20px);

text-align:center;

box-shadow:
0 0 35px rgba(100,255,218,.15),
0 0 60px rgba(138,43,226,.15);

transform:translateY(40px);

transition:.4s;
}

.popup.show .popup-content{

transform:translateY(0);
}

.popup-content h3{

font-size:1.8rem;

margin-bottom:15px;

color:#64ffda;
}

.popup-content p{

opacity:.85;

margin-bottom:25px;
}

.popup-content button{

padding:12px 30px;

border:none;
border-radius:40px;

background:#64ffda;

color:#0a192f;

font-weight:600;

cursor:pointer;

transition:.3s;
}

.popup-content button:hover{

transform:translateY(-4px);

box-shadow:
0 0 20px rgba(100,255,218,.3);
}

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

footer{

padding:30px;
text-align:center;
}


/* =====================
MOBILE
===================== */

@media(max-width:768px){

.nav{
padding:20px;
}

.nav-links{

position:absolute;

top:75px;
right:0;

width:100%;

display:none;

flex-direction:column;

align-items:center;

padding:25px;

background:#112240;
}

.nav-links.active{
display:flex;
}

.nav-links a{
margin:12px 0;
}

.hamburger{
display:flex;
}

.hero{

flex-direction:column-reverse;

text-align:center;
}

.hero h1{
font-size:2.7rem;
}

.buttons{

flex-direction:column;
align-items:center;
}

.input-row{
flex-direction:column;
}

.section{
padding:100px 25px;
}

.service-grid{
grid-template-columns:1fr;
}

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

.socials{
flex-direction:column;
gap:15px;
}

.image-card img{
width:220px;
}

}