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

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


html{
scroll-behavior:smooth;
}


body{

font-family:"Segoe UI",Arial,sans-serif;

background:white;

color:#111;

}





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


.navbar{

position:sticky;

top:0;

z-index:999;

background:#050505;

padding:20px 7%;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 10px 30px rgba(0,0,0,.25);

}



.logo h2{

color:white;

letter-spacing:3px;

font-size:25px;

}



.nav-links{

display:flex;

gap:35px;

}



.nav-links a{

color:white;

text-decoration:none;

font-weight:600;

font-size:15px;

transition:.3s;

}



.nav-links a:hover{
color:#76fbff;
scale:1.06;
}




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


.portfolio-hero{

height:550px;

background:

linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.85)
),

url("images/hero.webp");


background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

}



.portfolio-hero span{

letter-spacing:5px;

font-size:13px;

opacity:.8;

}



.portfolio-hero h1{

font-size:75px;

letter-spacing:-3px;

margin:25px 0;

}



.portfolio-hero p{

font-size:20px;

max-width:600px;

line-height:1.7;

}





/* =========================
FILTERS
========================= */


.filters{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

margin:40px 0;

flex-wrap:wrap;

}



.filter-btn{

white-space:nowrap;

background:transparent;

border:1px solid #ddd;

color:#111;

padding:12px 28px;

border-radius:50px;

font-size:14px;

font-weight:500;

cursor:pointer;

transition:.3s ease;

}



.filter-btn:hover{

background:#111;

color:white;

border-color:#111;

}



.filter-btn.active{

background:#111;

color:white;

border-color:#111;

}







/* =========================
PROJECT GRID
========================= */


.projects{

max-width:1400px;

margin:auto;

padding:70px 40px 100px;

display:grid;

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

gap:35px;

}




.project{

display:flex;
flex-direction:column;

background:white;

border-radius:24px;

overflow:hidden;

box-shadow:
0 8px 24px rgba(0,0,0,.06),
0 20px 50px rgba(0,0,0,.05);

transition:.35s ease;

border:2px solid transparent;

}



.project:hover{

transform:translateY(-10px) scale(1.015);

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

border-color:#76fbff;

}





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


.project a{

height:320px;

display:flex;

align-items:center;

justify-content:center;

position:relative;

background:
linear-gradient(180deg,#ffffff,#f7f7f7);

border-bottom:1px solid #ececec;

overflow:hidden;

}




.project img{

width:88%;
height:88%;
object-fit:contain;
margin:auto;
transition:.35s ease;
position:relative;
z-index:2;

}

.project:hover img{

transform:scale(1.03);

}




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


.project.logo a{

background:

linear-gradient(
135deg,
#111827,
#1f2937,
#020617
);

}





/* blurred light left */

.project.logo a::before{

content:"";

position:absolute;

width:260px;

height:260px;

top:-90px;

left:-80px;


background:

radial-gradient(
circle,
rgba(255,255,255,.35),
transparent 65%
);


filter:blur(50px);

}





/* blurred light right */

.project.logo a::after{

content:"";

position:absolute;

width:320px;

height:320px;

bottom:-120px;

right:-100px;


background:

radial-gradient(
circle,
rgba(99,102,241,.35),
transparent 65%
);


filter:blur(60px);

}





.project.logo img{

max-width:80%;

filter:

drop-shadow(
0 20px 35px rgba(0,0,0,.45)
);

}





.project.logo:hover img{

transform:

scale(1.08)
translateY(-5px);

}







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


.project.photo a{

background:#111;

}



.project.photo img{

object-fit:contain;

padding:20px;

}




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


.project div{

padding:22px;
flex:1;

}


.project h3{

font-size:23px;

margin-bottom:10px;

}



.project p{

color:#777;

line-height:1.5;

}

/* =========================
CATEGORY BADGE
========================= */


.category{

display:inline-block;

padding:7px 14px;

background:#eefcff;

color:#00aeb8;

border-radius:50px;

backdrop-filter:blur(10px);

font-size:11px;

font-weight:700;

letter-spacing:1px;

margin-bottom:15px;

text-transform:uppercase;

}






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


.contact{

background:#050505;

color:white;

padding:120px 30px;

text-align:center;

}



.contact h2{

font-size:50px;

}



.contact p{

margin:25px 0;

color:#ccc;

font-size:18px;

}



.contact a{

display:inline-block;

background:white;

color:#111;

padding:16px 40px;

border-radius:50px;

font-weight:700;

text-decoration:none;

}






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


footer{

background:#000;

color:white;

text-align:center;

padding:50px;

}



footer h2{

letter-spacing:4px;

margin-bottom:15px;

}







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


@media(max-width:900px){


.nav-links{

gap:15px;

}



.portfolio-hero{

height:450px;

}

.portfolio-hero p{

font-size:16px;

padding:0 20px;

}



.portfolio-hero h1{
font-size:clamp(45px,6vw,75px);
}



.filters{

flex-wrap:wrap;

}



.projects{

grid-template-columns:1fr;

padding:40px 20px 70px;

}


}


@media(max-width:600px){

.navbar{

flex-direction:column;

gap:20px;

padding:20px;

}


.logo h2{

font-size:24px;

}


.nav-links{

width:100%;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}


.nav-links a{

font-size:14px;

}


}