:root{
  --navy:#0B2A52;
  --navy-dark:#0A2342;
  --bg1:#0a0e1a;
  --bg2:#1a1f2e;
  --bg3:#0f1419;
  --white:#fff;
  --muted:#b8c5d6;
}

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

html,body{
  width:100%;
  height:100%;
  font-family:Outfit,system-ui,sans-serif;
}

.main-wrapper{
  min-height:100vh;
  background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 5%;
}

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

.contact-header{text-align:center;margin-bottom:4rem}
.contact-header h1{
  font-size:4rem;
  color:var(--white);
  text-shadow:0 10px 30px rgba(0,0,0,.6),0 4px 8px rgba(0,0,0,.4);
  transition:all .3s ease;
}

.contact-header h1:hover{
  transform:scale(1.02);
  text-shadow:0 15px 40px rgba(0,0,0,.7),0 6px 12px rgba(0,0,0,.5);
}
.contact-subtitle{color:var(--muted);font-size:1.4rem;text-shadow:0 6px 20px rgba(0,0,0,.35);transition:all .3s ease}

.contact-subtitle:hover{color:#fff;text-shadow:0 8px 25px rgba(0,0,0,.45)}

.contact-wrapper{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:3rem;
}

.contact-info{
  background:linear-gradient(145deg,var(--navy),var(--navy-dark));
  padding:3rem;
  border-radius:16px;
  color:#fff;
  box-shadow:0 25px 60px rgba(0,0,0,.6),0 12px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 8px rgba(0,0,0,.2);
  transition:all .4s ease;
}

.contact-info h3{
  margin-bottom:1rem;
  font-size:1.5rem;
  color:#fff;
  text-shadow:0 4px 12px rgba(0,0,0,.5);
}

.contact-info > p{
  margin-bottom:2rem;
  color:var(--muted);
  text-shadow:0 2px 6px rgba(0,0,0,.3);
}

.info-item{
  display:flex;
  gap:1.5rem;
  background:rgba(255,255,255,.1);
  padding:1.5rem;
  border-radius:12px;
  margin-bottom:1.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);
  transition:all .4s cubic-bezier(.4,0,.2,1);
}

.info-item:hover{
  background:rgba(255,255,255,.15);
  transform:translateX(8px) translateY(-2px);
  box-shadow:-15px 12px 40px rgba(0,0,0,.5),-8px 6px 20px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.12);
}

.info-icon{
  width:48px;height:48px;
  background:#fff;
  color:var(--navy);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.2);
  transition:all .3s ease;
}

.info-text h4{
  font-weight:700;
  margin-bottom:.5rem;
  color:#fff;
}

.info-text span,
.info-text a{
  color:var(--muted);
  text-decoration:none;
}

.info-text a:hover{
  color:#fff;
  text-decoration:underline;
}

.contact-form{
  background:#fff;
  padding:4rem;
  border-radius:16px;
  box-shadow:0 25px 60px rgba(0,0,0,.5),0 12px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.8);
  transition:all .4s ease;
}

.contact-form:hover{
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 15px 35px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-bottom:2rem;
}

.form-group{margin-bottom:2rem}
.form-group label{
  display:block;
  font-weight:700;
  margin-bottom:.8rem;
  color:var(--navy);
  font-size:.9rem;
  text-shadow:0 1px 2px rgba(255,255,255,.8);
  transition:all .3s ease;
}

.form-group:hover label{
  color:var(--navy-dark);
  text-shadow:0 1px 2px rgba(255,255,255,.9);
}

.form-group input,
.form-group textarea{
  width:100%;
  padding:1.2rem;
  border-radius:8px;
  border:1px solid #ccc;
  font-family:inherit;
  font-size:1rem;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.05);
  transition:all .3s ease;
}

.form-group input:hover,
.form-group textarea:hover{
  border-color:var(--navy);
  box-shadow:0 4px 12px rgba(11,42,82,.15),inset 0 2px 4px rgba(0,0,0,.08);
}

.form-group textarea{
  min-height:150px;
  resize:vertical;
}

.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(11,42,82,.1);
}

.submit-button{
  width:100%;
  padding:1.5rem;
  background:linear-gradient(145deg,var(--navy),var(--navy-dark));
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:800;
  cursor:pointer;
  transition:all .3s ease;
  font-size:1rem;
  letter-spacing:.5px;
  box-shadow:0 10px 25px rgba(11,42,82,.5),inset 0 2px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.3);
  text-shadow:0 2px 4px rgba(0,0,0,.3);
}

.submit-button:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 35px rgba(11,42,82,.6),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.4);
}

.submit-button:active{
  transform:translateY(0);
  box-shadow:0 5px 15px rgba(11,42,82,.4),inset 0 2px 8px rgba(0,0,0,.4);
}

.form-message{
  display:none;
  margin-top:1.5rem;
  background:#d4edda;
  color:#155724;
  padding:1rem;
  border-radius:8px;
}

.form-message.success{display:block}

@media(max-width:900px){
  .contact-wrapper{grid-template-columns:1fr}
  .contact-header h1{font-size:3rem}
}

@media(max-width:640px){
  .main-wrapper{padding:2rem 1rem}
  .contact-header h1{font-size:2rem}
  .contact-info,
  .contact-form{padding:2rem}
  .form-row{grid-template-columns:1fr;gap:1rem}
}