/*-----------------------------------*\
    #CONTACT
  \*-----------------------------------*/
  
  .mapbox {
    position: relative;
    height: 250px;
    width: 100%;
    border-radius: 16px;
    margin-bottom: 30px;
    border: 1px solid var(--jet);
    overflow: hidden;
  }
  
  .mapbox figure { height: 100%; }
  
  .mapbox iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(1) invert(1);
  }
  
  .contact-form { margin-bottom: 10px; }
  
  .form-title { margin-bottom: 20px; }
  
  .input-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 25px;
  }
  
  .form-input {
    color: var(--white-2);
    font-size: var(--fs-6);
    font-weight: var(--fw-400);
    padding: 13px 20px;
    border: 1px solid var(--jet);
    border-radius: 14px;
    outline: none;
  }
  
  .form-input::placeholder { font-weight: var(--fw-500); }
  
  .form-input:focus { border-color: var(--orange-yellow-crayola); }
  
  textarea.form-input {
    min-height: 100px;
    height: 120px;
    max-height: 200px;
    resize: vertical;
    margin-bottom: 25px;
  }
  
  textarea.form-input::-webkit-resizer { display: none; }
  
  .form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }
  
  .form-btn {
    position: relative;
    width: 100%;
    background: var(--border-gradient-onyx);
    color: var(--orange-yellow-crayola);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 14px;
    font-size: var(--fs-6);
    text-transform: capitalize;
    box-shadow: var(--shadow-3);
    z-index: 1;
    transition: var(--transition-1);
  }
  
  .form-btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--bg-gradient-jet);
    border-radius: inherit;
    z-index: -1;
    transition: var(--transition-1);
  }
  
  .form-btn ion-icon { font-size: 16px; }
  
  .form-btn:hover { background: var(--bg-gradient-yellow-1); }
  
  .form-btn:hover::before { background: var(--bg-gradient-yellow-2); }
  
  .form-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
  
  .form-btn:disabled:hover { background: var(--border-gradient-onyx); }
  
  .form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }