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

body{
font-family:'Inter',sans-serif;
color:white;

background:linear-gradient(
135deg,
#0f2027,
#203a43,
#00c6ff,
#00ffd5
);

background-size:400% 400%;
animation:gradientShift 12s ease infinite;

min-height:100vh;
display:flex;
flex-direction:column;
}


/* animated gradient */
@keyframes gradientShift{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}


/* NAVBAR */
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;

position:sticky;
top:0;

backdrop-filter:blur(12px);
background:rgba(0,0,0,0.25);
border-bottom:1px solid rgba(255,255,255,0.1);
}

.logo-img{
width:60px;
}

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

.nav-links a{
text-decoration:none;
color:white;
font-weight:500;
position:relative;
}

.nav-links a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#00ffd5;
transition:0.3s;
}

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


/* CONTACT SECTION */
.contact{
flex:1;
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
text-align:center;
}

.contact-container{
max-width:600px;
width:100%;
}


/* TITLE */
.contact h1{
font-size:3rem;
margin-bottom:10px;
}

.contact-subtext{
opacity:0.85;
margin-bottom:30px;
}


/* FORM */
.contact-form{
display:flex;
flex-direction:column;
gap:18px;
}


/* INPUTS */
.contact-form input,
.contact-form textarea{
padding:14px;
border-radius:8px;
border:none;

background:rgba(255,255,255,0.1);
color:white;

backdrop-filter:blur(10px);
outline:none;

font-family:'Inter',sans-serif;
font-size:1rem;

transition:0.2s;
}


/* focus effect */
.contact-form input:focus,
.contact-form textarea:focus{
background:rgba(255,255,255,0.2);
}


/* placeholders */
.contact-form input::placeholder,
.contact-form textarea::placeholder{
color:rgba(255,255,255,0.6);
}


/* TEXTAREA */
.contact-form textarea{
resize:none;
}


/* BUTTON */
.btn{
padding:14px;
border-radius:8px;
font-weight:600;
border:none;
cursor:pointer;
transition:0.25s;
}

.primary{
background:#00ffd5;
color:#003a3a;
}

.primary:hover{
transform:translateY(-3px);
box-shadow:0 10px 20px rgba(0,0,0,0.3);
}


/* gradient text */
.gradient-text {
background: linear-gradient(90deg, #00eaff, #00ffd5);
background-clip: text;
-webkit-text-fill-color: transparent;
}


/* footer */
footer{
text-align:center;
padding:25px;
opacity:0.7;
}
#form-status{
margin-top:15px;
font-size:0.95rem;
opacity:0.8;
}