/* ---------------- GLOBAL ---------------- */

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Inter, sans-serif;
background:#ffffff;
color:#111;
}

/* ---------------- TOOLS MARQUEE ---------------- */

.marquee-wrapper{
overflow:hidden;
width:100%;
border-top:1px solid #e5e7eb;
border-bottom:1px solid #e5e7eb;
padding:20px 0;
}

.marquee{
display:flex;
width:max-content;
gap:80px;
animation:scroll 20s linear infinite;
font-weight:600;
font-size:18px;
}

.marquee span{
flex-shrink:0;
opacity:0.7;
padding:10px 18px;
border-radius:999px;
background:#f3f4f6;
}

.marquee span:hover{
opacity:1;
}

/* animation */

@keyframes scroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* ---------------- PROJECT CARDS ---------------- */

.project-card{
border-radius:16px;
overflow:hidden;
background:white;
box-shadow:
0 8px 20px rgba(0,0,0,0.05),
0 20px 40px rgba(0,0,0,0.06);
transition:transform .35s ease, box-shadow .35s ease;
cursor:pointer;
text-decoration:none;
color:inherit;
display:block;
}

.project-card img{
width:100%;
display:block;
border-radius: 12px;
transition:transform .5s ease;
}

.project-card:hover{
transform:translateY(-10px);
box-shadow:
0 10px 20px rgba(0,0,0,0.04),
0 20px 40px rgba(0,0,0,0.06);
}

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

.project-image{
width:100%;
height:300px;
overflow:hidden;
border-radius:16px 16px 0 0;
position:relative;
}

.project-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.project-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

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

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

opacity:0;
transition:opacity .3s ease;
}

.project-overlay span{
color:white;
font-weight:600;
font-size:16px;
letter-spacing:.5px;
}

.project-card:hover .project-overlay{
opacity:1;
}

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


/* ---------------- SCROLL REVEAL ---------------- */

.hidden{
opacity:0;
transform:translateY(40px);
transition:all .7s ease;
}

.show{
opacity:1;
transform:translateY(0);
}

/* ---------------- NAVBAR ---------------- */

nav{
backdrop-filter:blur(10px);
}

/* ---------------- FOOTER ---------------- */

footer{
background:#000;
color:white;
}

/* HERO IMAGE */

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

.profile-img{
width:360px;
height:360px;
border-radius:50%;
object-fit:cover;

box-shadow:
0 20px 40px rgba(0,0,0,.12),
0 40px 120px rgba(37,99,235,.15);

transition:transform .5s ease;
}

.profile-img:hover{
transform:scale(1.05);
}

/* glow animation */

.hero-image::before{

content:"";
position:absolute;

width:500px;
height:500px;

background:radial-gradient(circle, rgba(37,99,235,0.15), transparent 70%);

border-radius:50%;

z-index:-1;

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

}

@keyframes glowPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

.hidden{
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
}

.show{
opacity:1;
transform:translateY(0);
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
}

.faq-item.active .faq-answer{
max-height:200px;
}

.faq-icon{
font-size:22px;
transition:transform .3s ease;
}

.faq-item.active .faq-icon{
transform:rotate(45deg);
}

input, textarea{

outline:none;
border:none;

}

input:focus, textarea:focus{

box-shadow:0 0 0 2px #2563eb;

}

.social-icons a{
color:white;
opacity:1;
font-size:24px;
transition:all .3s ease;
}

.social-icons a:hover{
color:#60a5fa;
transform:translateY(-3px);
}

.case-cover{
width:100%;
height:400px;
overflow:hidden;
border-radius:16px;
margin-top:20px;
margin-bottom:60px;
}

.case-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.process-images img{
opacity:0.9;
transition:all .3s ease;
}

.process-images img:hover{
opacity:1;
transform:scale(1.02);
}

.metric-number{
font-size:36px;
font-weight:700;
color:#111;
}

.metric-label{
font-size:14px;
color:#6b7280;
margin-top:4px;
}