/* =========================

   CAMP CONTACT PAGE

========================= */



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}





/* BODY */



body {

  min-height: 100vh;



  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;



  gap: 30px;



  padding: 20px;



  background:

    radial-gradient(circle at top left, rgba(138,44,255,0.15), transparent 30%),

    radial-gradient(circle at bottom right, rgba(0,217,255,0.08), transparent 30%),

    #07090f;



  font-family: "Poppins", sans-serif;



  overflow: hidden;

}





/* LOGO */



body img {

  width: 180px;



  object-fit: contain;



  filter:

    drop-shadow(0 0 18px rgba(138,44,255,0.45));

}





/* =========================

   FORM CONTAINER

========================= */



.form-container {

  width: 520px;



  padding: 38px 32px;



  border-radius: 30px;



  background:

    linear-gradient(#0b0714, #0b0714) padding-box,

    linear-gradient(

      145deg,

      transparent 15%,

      #8a2cff,

      #c84dff,

      #00d9ff

    ) border-box;



  border: 2px solid transparent;



  background-size: 250% 250%;



  animation: gradient 6s ease infinite;



  box-shadow:

    0 0 30px rgba(138,44,255,0.30),

    0 0 80px rgba(0,217,255,0.10);

}





/* ANIMATION */



@keyframes gradient {



  0% {

    background-position: 0% 50%;

  }



  50% {

    background-position: 100% 50%;

  }



  100% {

    background-position: 0% 50%;

  }



}





/* FORM */



.form {

  display: flex;

  flex-direction: column;



  gap: 22px;

}





/* GROUP */



.form-group {

  display: flex;

  flex-direction: column;



  gap: 10px;

}





/* LABEL */



.form-group label {

  color: #ffffff;



  font-size: 14px;

  font-weight: 600;



  letter-spacing: 0.5px;

}





/* INPUT */



.form-group input,

.form-group textarea {

  width: 100%;



  padding: 16px 18px;



  border-radius: 16px;



  border: 1px solid rgba(138,44,255,0.22);



  background: rgba(255,255,255,0.04);



  color: #ffffff;



  font-size: 14px;

  font-family: inherit;



  outline: none;



  transition: 0.35s ease;

}





/* PLACEHOLDER */



.form-group input::placeholder,

.form-group textarea::placeholder {

  color: rgba(255,255,255,0.45);

}





/* TEXTAREA */



.form-group textarea {

  resize: none;



  min-height: 150px;

}





/* FOCUS */



.form-group input:focus,

.form-group textarea:focus {

  border-color: #b84dff;



  box-shadow:

    0 0 16px rgba(138,44,255,0.45),

    0 0 35px rgba(0,217,255,0.08);

}





/* BUTTON */



.form-submit-btn {

  width: 100%;

  height: 58px;



  border: none;

  border-radius: 16px;



  cursor: pointer;



  color: #ffffff;



  font-size: 15px;

  font-weight: 600;

  letter-spacing: 1px;



  background: linear-gradient(

    135deg,

    #7b2cff,

    #a93cff,

    #00d9ff

  );



  background-size: 220% 220%;



  transition: 0.35s ease;



  box-shadow:

    0 0 22px rgba(138,44,255,0.35);

}





/* BUTTON HOVER */



.form-submit-btn:hover {

  transform: translateY(-2px);



  background-position: right center;



  box-shadow:

    0 0 35px rgba(138,44,255,0.7),

    0 0 65px rgba(0,217,255,0.15);

}





/* BUTTON ACTIVE */



.form-submit-btn:active {

  transform: scale(0.98);

}





/* =========================

   MOBILE

========================= */



@media (max-width: 600px) {



  .form-container {

    width: 100%;

  }



  body img {

    width: 140px;

  }



}





/* FORM CONTAINER */



.form-container {

  width: 850px;



  display: flex;

  align-items: center;

  justify-content: space-between;



  gap: 40px;



  padding: 40px;



  border-radius: 30px;



  background:

    linear-gradient(#0b0714, #0b0714) padding-box,

    linear-gradient(

      145deg,

      transparent 15%,

      #8a2cff,

      #c84dff,

      #00d9ff

    ) border-box;



  border: 2px solid transparent;



  background-size: 250% 250%;



  animation: gradient 6s ease infinite;



  box-shadow:

    0 0 30px rgba(138,44,255,0.30),

    0 0 80px rgba(0,217,255,0.10);

}





/* LOGO */



.form-container img {

  width: 260px;



  object-fit: contain;



  filter:

    drop-shadow(0 0 25px rgba(138,44,255,0.35));

}





/* FORM */



.form {

  width: 100%;



  display: flex;

  flex-direction: column;



  gap: 22px;

}