@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap') ;
@import url("https://fonts.googleapis.com/css2?family=Cookie&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap") ;
@import url("https://fonts.googleapis.com/css2?family=Cookie&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap") ;
@import url("https://fonts.googleapis.com/css2?family=Cookie&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Tektur:wght@400..900&display=swap") ;
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cookie&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Tektur:wght@400..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap") ;
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cookie&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Teko:wght@300..700&family=Tektur:wght@400..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap") ;
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cookie&family=Lobster&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Teko:wght@300..700&family=Tektur:wght@400..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap") ;
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cookie&family=Lobster&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Rochester&family=Teko:wght@300..700&family=Tektur:wght@400..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap") ;
* 

{
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
  }

  body {
    background: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  
  .form-container {
    background: #656262a9;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 500px;
  }
  
  h2 {
    text-align: center;
    font-family: 'Montserrat';
    margin-bottom: 1.5rem;
    color: #ffffff;
  }
  
  .form-group {
    margin-bottom: 1rem;
    position: relative;
  }
  
  label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
  }
  
  input,
  textarea,
  select {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #efefef;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: #29292a;
    outline: none;
  }
  
  .phone-input {
    display: flex;
    gap: 0.5rem;
  }
  
  select {
    width: 30%;
  }
  
  textarea {
    resize: vertical;
  }
  
  button {
    width: 100%;
    padding: 0.8rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  button:hover {
    background: #2C5E9E;
  }
  
  .error-message {
    color: red;
    font-size: 0.8rem;
    margin-top: 0.3rem;
    display: none;
  }
  

  /* Background watermark */

  .watermark-container {
    background-image: url('logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 150vh;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.1; /* watermark fade effect */
    padding-left: 100px;
  }
  
  .watermark-text {
    font-size: 15px;
    color: black;
    opacity: 1; /* make sure text is fully visible */
  }
  
/* Style for the success message */
.custom-success-message {
  display: none; /* Will be shown via JS */
}

/* Hide Formspark elements by default if you want */
.formspark-footer, [class*="powered-by"] {
  display: none;
}

/* Error message styles (existing) */
.error-message {
  color: red;
  font-size: 0.8em;
  display: none;
  margin-top: 5px;
}
.back-button {
  background-color: #86898c8a; /* Soft blue */
  color: white;
  border: none;
  padding: 20px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease, transform 0.2s;
  margin-top: 10px;
}

.back-button:hover {
  background-color: #357ABD;
  transform: translateY(-2px);
}

.back-button:active {
  background-color: #2C5E9E;
  transform: translateY(0);
}



@media (max-width: 768px) {

  .form-container {
      width: 90%;
      padding: 1.5rem;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  h2 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
  }

  input,
  textarea,
  select {
      font-size: 0.9rem;
      padding: 0.5rem;
  }

  .phone-input {
      flex-direction: row;
      gap: 0.3rem;
  }

  select {
      width: 20%;
  }

  button {
      font-size: 0.9rem;
      padding: 1rem;
  }

  .error-message {
      font-size: 0.7rem;
  }

  .watermark-container {
      height: auto;
      padding: 20px;
      background-size: cover;
      opacity: 0.2;
  }

  .back-button {
      font-size: 0.9rem;
      padding: 10px 15px;
  }
}

@media (max-width: 480px) {
  h2 {
      font-size: 1.2rem;
  }

  input,
  textarea,
  select {
      font-size: 0.8rem;
      padding: 0.4rem;
  }

  button {
      font-size: 0.8rem;
      padding: 0.5rem;
  }

  .back-button {
      font-size: 0.8rem;
      padding: 8px 12px;
  }

  .watermark-container {
      padding: 10px;
      background-size: contain;
  }
}