/* =========================
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;

transition: all 0.3s ease-in-out;

}



.nav-links a{

color:white;

text-decoration:none;

font-size:15px;

font-weight:600;

transition:.3s;


}



.nav-links a:hover{

color:#76fbff;

scale: 1.06;

}





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


.hero{

height:100vh;

min-height:650px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

background:

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

url("images/hero.webp");


background-size:cover;

background-position:center;

}



.hero-content{

max-width:900px;

padding:20px;

color:white;

}



.hero-content span{

font-size:13px;

letter-spacing:4px;

opacity:.8;

}



.hero h1{

font-size:75px;

letter-spacing:-3px;

line-height:1.1;

margin:25px 0;

}



.hero p{

font-size:21px;

line-height:1.7;

opacity:.9;

}



.hero-btn{

display:inline-block;

margin-top:35px;

padding:16px 40px;

background:white;

color:#111;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.3s;

}



.hero-btn:hover{

transform:translateY(-5px);

}



/* =========================
PORTFOLIO
========================= */


.portfolio-section{

background:white;

padding-bottom:100px;

}



.section-heading{

text-align:center;

padding:90px 20px 50px;

}



.section-heading h2{

font-size:45px;

letter-spacing:-1px;

}



.section-heading p{

color:#777;

margin-top:15px;

font-size:18px;

}



/* =========================
PORTFOLIO
========================= */

.gallery{

max-width:1400px;
margin:auto;
padding:20px 30px;

display:grid;
grid-template-columns:repeat(3,minmax(280px,1fr));
gap:40px;

}



.card{

background:#fff;

border-radius:24px;

overflow:hidden;

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

transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;

border:2px solid transparent;

display:flex;
flex-direction:column;

}



.card:hover{
transform:translateY(-10px) scale(1.015);
box-shadow:0 25px 60px rgba(0,0,0,.15);
border-color:#76fbff;
}



.card a{

display:flex;

align-items:center;

justify-content:center;

height:320px;

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

border-bottom:1px solid #ececec;

padding:25px;

overflow:hidden;

}



.card img{
width:88%;
height:88%;
object-fit:contain;
margin:auto;
transition:transform .35s ease;
will-change:transform;
cursor:pointer;
}



.card:hover img{

transform:scale(1.03);

}



.card-text{

padding:22px;

background:white;

position:static;

color:#111;

}



.category{

display:inline-block;

padding:6px 12px;

background:#eefcff;

color:#00aeb8;

border-radius:50px;

font-size:11px;

font-weight:700;

letter-spacing:1px;

margin-bottom:14px;

}



.card-text h3{

font-size:22px;

font-weight:700;

line-height:1.35;

margin-bottom:12px;

}



.card-text p{

font-size:15px;

line-height:1.6;

color:#7a7a7a;

}



.dark-btn{

display:block;

width:max-content;

margin:50px auto 0;

background:#050505;

color:white;

padding:16px 40px;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.3s;

}



.dark-btn:hover{

background:#333;

}



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


.about-section{

background: linear-gradient(103deg, black, #303030);

color:white;

padding:100px 30px;

}



.about-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

}



.about-content h2{

font-size:45px;

}



.about-content p{

margin-top:20px;

line-height:1.8;

color:#ccc;

}



.stats{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}



.stat-box{

background:#111;

padding:35px;

border-radius:20px;

text-align:center;

border:1px solid #fff;

box-shadow: 0px 5px #ffffff;

}



.stat-box h3{

font-size:45px;

}



.stat-box p{

color:#aaa;

}



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


.services{

background:white;

padding-bottom:100px;

}



.service-grid{

max-width:1200px;

margin:auto;

padding:0 30px;

display:grid;

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

gap:25px;

}



.service-card{

padding:35px;

border-radius:20px;

background:#f5f5f5;

transition:.3s;

}



.service-card:hover{

background:#111;

color:white;

transform:translateY(-8px);

}



.service-card p{

margin-top:15px;

line-height:1.6;

color:#777;

}



.service-card:hover p{

color:#ccc;

}



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


.contact-section{

background:#050505;

color:white;

padding:120px 30px;

text-align:center;

}



.contact-container{

max-width:800px;

margin:auto;

}



.contact-container h2{

font-size:50px;

}



.contact-container p{

margin:25px 0;

color:#ccc;

font-size:18px;

line-height:1.7;

}



.contact-btn{

display:inline-block;

background:white;

color:black;

padding:16px 40px;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition: all 0.3s ease-in-out;

}

.contact-btn:hover {

    scale: 1.08;

    background: #76fbff;

}



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


footer{

background:#000;

color:white;

text-align:center;

padding:50px;

}


footer h2{

letter-spacing:3px;

margin-bottom:15px;

}





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


@media(max-width:900px){


.hero h1{

font-size:45px;

}


.nav-links{

gap:15px;

}



.about-container{

grid-template-columns:1fr;

}



.gallery,
.service-grid{

grid-template-columns:1fr;

}



.stats{

grid-template-columns:1fr;

}


}


/* =========================
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;

}



@media(max-width:600px){


.filters{

justify-content:flex-start;

flex-wrap:nowrap;

overflow-x:auto;

padding:0 10px 10px;

scrollbar-width:none;

}


.filters::-webkit-scrollbar{

display:none;

}


.filter-btn{

font-size:13px;

padding:11px 22px;

}


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


/* NAVIGATION */

.navbar{

flex-direction:column;
padding:20px;

}


.logo h2{

font-size:28px;

}


.nav-links{

width:100%;
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;

}


.nav-links a{

font-size:14px;

}



/* HERO */

.hero{

min-height:80vh;

}


.hero-content{

padding:20px;

}


.hero-content h1{

font-size:38px;
line-height:1.2;

}


.hero-content p{

font-size:16px;

}



/* PORTFOLIO */

.gallery{

display:grid;
grid-template-columns:1fr;
gap:25px;
padding:20px 10px;

}

.card a{

height:260px;

}


.portfolio-section{

padding:50px 20px;

}


.section-heading h2{

font-size:32px;

}






/* ABOUT */

.about-container{

display:flex;
flex-direction:column;
gap:30px;

}


.about-content h2{

font-size:32px;

}


.stats{

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

}



/* SERVICES */

.service-grid{

grid-template-columns:1fr;

}


/* CONTACT */

.contact-container{

padding:20px;

}
}