/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter', sans-serif;
}

body{
  background:linear-gradient(135deg,#f4f7fb,#ffffff);
  color:#111827;
}

/* PAGE CENTER */
.contact-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 20px;
}

/* CONTAINER */
.contact-container{
  width:100%;
  max-width:520px;
  text-align:center;
}

/* LOGO */
.contact-logo{
  margin-bottom:25px;
}

.logo-circle{
  width:72px;
  height:72px;
  margin:0 auto 10px;
  border-radius:50%;
  background:linear-gradient(135deg,#663a00,#af6600);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgb(63, 40, 0);
  font-size:28px;
  font-weight:700;
  position:relative;
  box-shadow:0 15px 30px rgba(102,58,0,.25);
  transition:.4s ease;
  animation:floatLogo 3s ease-in-out infinite;
}

/* glow effect */
.logo-circle::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:linear-gradient(135deg,#663a00,#af6600);
  filter:blur(12px);
  opacity:.35;
  z-index:-1;
  transition:.4s;
}

/* hover effect */
.logo-circle:hover{
  transform:scale(1.08);
  box-shadow:0 20px 40px rgba(102,58,0,.35);
}

.logo-circle:hover::before{
  opacity:.6;
  filter:blur(18px);
}

/* floating animation */
@keyframes floatLogo{
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-6px); }
  100%{ transform:translateY(0px); }
}

.contact-logo h2{
  font-size:26px;
}

.contact-logo p{
  color:#6b7280;
  font-size:14px;
}

/* TITLE */
.contact-title{
  font-size:42px;
  margin-bottom:20px;
}

/* CHOOSE STEP */
.contact-choose{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}

.choose-btn{
  flex:1;
}

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

.hidden{
  display:none;
}

/* INPUTS */
.contact-form input,
.contact-form textarea{
  padding:15px 18px;
  border:none;
  outline:none;
  border-radius:14px;
  background:#f5f5f5;
  font-size:16px;
  transition:.3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
  background:#fff;
  box-shadow:0 0 0 3px rgba(175,102,0,.25);
  transform:translateY(-2px);
}

/* BUTTON */
.btn{
  background:#663a00;
  color:white;
  padding:12px 22px;
  font-weight:600;
  display:inline-block;
  transition:0.3s;
}

.btn:hover{
  background:#281700;
  color: #281700;
  transform:translateY(-2px);
  border-color: transparent;
}

/* FOOTER */
.footer-text{
  margin-top:25px;
  font-size:13px;
  color:#9ca3af;
}

/* RESPONSIVE */
@media(max-width:768px){

  .contact-title{
    font-size:32px;
  }

  .contact-choose{
    flex-direction:column;
  }
}