/* ===========================
   GOOGLE FONT & RESET
=========================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
html{scroll-behavior:smooth;}
:root{
    --bg:#090909;
    --bg2:#121212;
    --glass:rgba(255,255,255,.05);
    --glass2:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.08);
    --text:#F5F5F5;
    --muted:#B8B8B8;
    --accent:#C084FC;
}
body{
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    letter-spacing:.3px;
}
.background{
    position:fixed; inset:0; z-index:-10;
    background:
    radial-gradient(circle at top left,rgba(192,132,252,.08),transparent 35%),
    radial-gradient(circle at bottom right,rgba(192,132,252,.05),transparent 40%),
    var(--bg);
}
nav{
    position:fixed;top:0;width:100%;
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 9%;
    background:rgba(18,18,18,.55);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.05);
    z-index:999;
}
nav h2{font-size:32px;font-weight:700;}
nav ul{display:flex;gap:35px;list-style:none;}
nav a{text-decoration:none;color:#fff;font-weight:500;transition:.3s;}
nav a:hover,nav a.active{color:var(--accent);}
.hero{
    min-height:100vh;
    display:flex;justify-content:space-between;align-items:center;
    padding:120px 9%;
    gap:60px;
}
.left{flex:1;}
.left p:first-child{color:var(--accent);letter-spacing:2px;}
.left h1{font-size:74px;line-height:1.1;margin:10px 0;}
.left h2{color:var(--accent);min-height:50px;}
.desc{margin-top:30px;color:var(--muted);line-height:2;max-width:650px;}
.buttons{display:flex;gap:18px;margin-top:40px;flex-wrap:wrap;}
.btn{
    text-decoration:none;
    background:var(--accent);
    color:#111;
    padding:15px 34px;
    border-radius:20px;
    font-weight:600;
    transition:.3s;
    position:relative;
    overflow:hidden;
}
.btn:hover{transform:translateY(-4px);}
.glass{
    background:var(--glass);
    color:#fff;
    border:1px solid var(--border);
}
.right{flex:1;display:flex;justify-content:center;}
.photo-card{

    position:relative;

    width:320px;
    height:400px;

    overflow:hidden;

    border-radius:26px;

    background:#151515;

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

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

}

/* Main champagne light */

.photo-card::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:36px;

    background:conic-gradient(

        transparent 0deg,
        transparent 210deg,

        rgba(255,236,180,.10) 230deg,

        #FFF9E8 245deg,

        #FFE8B3 260deg,

        #FFF4D6 280deg,

        rgba(255,236,180,.15) 295deg,

        transparent 320deg,

        transparent 360deg

    );

    animation:rotate1 5s linear infinite;

    filter:blur(3px);

}

/* Secondary warm reflection */

.photo-card .shine{

    position:absolute;

    inset:-12px;

    border-radius:36px;

    background:conic-gradient(

        transparent 0deg,

        rgba(255,224,150,.08) 40deg,

        #d7960a 65deg,

        rgba(255,224,150,.12) 85deg,

        transparent 120deg,

        transparent 360deg

    );

    animation:rotate2 8s linear infinite reverse;

    filter:blur(6px);

}

/* Inner glass */

.photo-card::after{

    content:"";

    position:absolute;

    inset:4px;

    background:#151515;

    border-radius:22px;

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

    z-index:1;

}

.photo-card img{

    position:relative;

    z-index:2;

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:22px;

}
@keyframes rotate1{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes rotate2{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

.photo-card img{

    width:99%;
    height:99%;

    object-fit:cover;

    /* object-position:center top; */
    object-position:center 45%;

    display:block;

    border-radius:24px;

    transition:.4s;

}

.photo-card:hover img{

    transform:scale(1.04);

}
@keyframes float{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-15px);}
}
section{padding:110px 9%;}
.section-title{
    text-align:center;
    font-size:48px;
    margin-bottom:70px;
}
.card{
    background:var(--glass);
    border:1px solid var(--border);
    backdrop-filter:blur(20px);
    border-radius:22px;
    padding:36px;
    transition:.3s;
}
.card:hover{
    transform:translateY(-8px);
    border-color:rgba(192,132,252,.25);
}
.about-card{
    max-width:900px;
    margin:auto;
    text-align:center;
    line-height:2;
    color:var(--muted);
}
.skills-grid,.project-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
}
.skill-card{
display:flex;
align-items:center;
justify-content:center;
gap:15px;
font-size:20px;
}
.skill-card i{
font-size:28px;
color:var(--accent);
}
.project h3{margin-bottom:15px;}
.project p{line-height:1.8;color:var(--muted);margin-bottom:20px;}
.project a{text-decoration:none;color:var(--accent);font-weight:600;}
.contact-card{max-width:720px;margin:auto;text-align:center;}
.contact-card p{color:var(--muted);margin:20px 0 35px;}
.social{
display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
}
.social a{
width:58px;height:58px;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
background:var(--glass);
border:1px solid var(--border);
color:#fff;text-decoration:none;
transition:.3s;
}
.social a:hover{
background:var(--accent);
color:#111;
transform:translateY(-5px);
}
.hidden{opacity:0;transform:translateY(60px);transition:1s;}
.show{opacity:1;transform:none;}
.mouseGlow{
position:fixed;
width:260px;height:260px;
border-radius:50%;
pointer-events:none;
transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(192,132,252,.06),transparent 70%);
z-index:-5;
}
.ripple{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,.35);
transform:scale(0);
animation:ripple .6s linear;
}
@keyframes ripple{to{transform:scale(4);opacity:0;}}
footer{
padding:60px;
text-align:center;
color:#888;
border-top:1px solid rgba(255,255,255,.05);
}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#090909;}
::-webkit-scrollbar-thumb{background:#6d28d9;border-radius:30px;}
@media(max-width:1000px){

.hero{

    flex-direction:column-reverse;

    text-align:center;

}

.left,
.right{

    width:100%;

}

.left h1{

    font-size:52px;

}

.desc{

    margin:auto;

    margin-top:30px;

}

.buttons{

    justify-content:center;

}

.photo-card{

    width:300px;

    height:380px;

}

/* Hamburger */

.hamburger{

    display:flex;

}

/* Mobile Menu */

.nav-links{

    position:fixed;

    top:78px;

    left:-100%;

    width:100%;

    background:#111;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:35px 0;

    gap:25px;

    transition:.4s;

}

.nav-links.active{

    left:0;

}

}
:root{

--bg:#090909;
--surface:#121212;
--glass:rgba(255,255,255,.04);

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

--text:#F5F5F5;
--secondary:#9A9A9A;

--accent:#E7D7B8;      /* Champagne */

--accent-hover:#F4E7CF;

}
/*=============================
SHOWCASE
=============================*/

.showcase-subtitle{

text-align:center;

color:#9d9d9d;

margin-top:-45px;

margin-bottom:60px;

font-size:18px;

}

.showcase-container{

display:flex;

align-items:center;

justify-content:center;

gap:30px;

}

.slider{

width:950px;

overflow:hidden;

}

.slide{

display:none;

grid-template-columns:1.1fr 1fr;

gap:50px;

align-items:center;

background:#151515;

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

border-radius:24px;

padding:40px;

}

.slide.active{

display:grid;

animation:fade .5s;

}

@keyframes fade{

from{

opacity:0;

transform:translateX(30px);

}

to{

opacity:1;

transform:none;

}

}

.slide-image img{

width:100%;

border-radius:18px;

display:block;

}

.tag{

display:inline-block;

padding:8px 18px;

background:#232323;

border-radius:50px;

color:#E7D7B8;

margin-bottom:20px;

font-size:14px;

}

.slide-content h3{

font-size:38px;

margin-bottom:20px;

}

.slide-content p{

color:#B4B4B4;

line-height:1.9;

margin-bottom:25px;

}

.tech{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:30px;

}

.tech span{

padding:10px 18px;

background:#1d1d1d;

border-radius:50px;

font-size:14px;

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

}

.slide-buttons{

display:flex;

gap:18px;

}

.slider-btn{

width:60px;

height:60px;

border:none;

border-radius:50%;

cursor:pointer;

background:#181818;

color:#E7D7B8;

font-size:20px;

transition:.3s;

}

.slider-btn:hover{

background:#242424;

transform:scale(1.08);

}

.dots{

display:flex;

justify-content:center;

gap:14px;

margin-top:35px;

}

.dot{

width:12px;

height:12px;

border-radius:50%;

background:#444;

cursor:pointer;

transition:.3s;

}

.dot.active{

width:42px;

border-radius:50px;

background:#E7D7B8;

}

@media(max-width:900px){

.slide{

grid-template-columns:1fr;

}

.slider{

width:100%;

}

.showcase-container{

gap:12px;

}

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


/* Hide hamburger by default (Desktop) */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1001;
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    border-radius: 10px;
    background: #E7D7B8;
    transition: all 0.35s ease-in-out;
}

/* Mobile View (max-width: 1000px) */
@media(max-width: 1000px) {
    .hamburger {
        display: flex; /* Show on mobile */
    }

    /* Animation for the "X" when active */
    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

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

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}
}