.Login{
    margin-bottom: 9vh;
    width: 40%;
    margin-top: 10vh;
    background: linear-gradient(135deg , #1f1e1edd , #080707dd);
    height: 50vh;
    border-radius: 20px;
    border: 2px solid #a9993f;
    box-shadow: 0px 0px 10px #a9993f;
    display: flex;
    flex-direction: column;
    padding: 30px
}
/* 1. Prevent Safari white gaps by matching background color */
html, body {
    background-color: #0b0c10 !important; /* Replace with your dark background color hex */
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: -webkit-fill-available; /* Safari mobile viewport height fix */
}

/* 2. Extend dark background into mobile Safari header & bottom notches */
:root {
    color-scheme: dark; /* Signals Safari to render native UI bars in dark mode */
}
.hero2{
    position: relative;
    width: 100%;
    height: 100vh; 
    display: flex;
    flex-direction: column;

    align-items: center;
    padding: 60px 80px; 
    background: radial-gradient(circle at center, #161616 0%, #0b0b0b 100%);
}



.LoginHead{
    color: #a9993f;
    font-size: 30px;
}

.InputText{
    color: #a9993f;
    font-size: 20px;
}

.Submit {
    position: relative;
    z-index: 1;
    margin-top: 5vh;
    background: linear-gradient(110deg, #4274D9, #0d1d85);
    color: #908e27 !important;
    font-size: 20px !important;
    border: 2px solid #a9993f;
    box-shadow: 0px 0px 10px #a9993f;
    overflow: hidden;
    cursor: pointer;
}

/* Create the hover gradient on an overlay layer */
.Submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(110deg, #0d1d85, #4274D9);
    opacity: 0;
    /* ADJUST ANIMATION SPEED HERE (e.g., 0.8s, 1.2s, 2s) */
    transition: opacity 0.8s ease-in-out; 
}

/* Fade in the hover layer slowly */
.Submit:hover::before {
    opacity: 1;
}




/* ==========================================
   EXACT MOBILE DESIGN PRESERVATION (<= 768px)
   ========================================== */
@media (max-width: 768px) {

  /* Prevent page cutoff while keeping radial dark background */
  .hero2 {
    min-height: 100vh !important;
    height: auto !important;
    padding: 20px 12px 40px !important;
  }

  /* Retain exact desktop card design, expand width and scale height dynamically */
  .Login {
    width: 90% !important;
    max-width: 420px !important;
    height: auto !important;
    margin-top: 100px !important;
    margin-bottom: 30px !important;
    padding: 30px 20px !important;
    /* Explicitly re-apply dark gradient + gold border styling */
    background: linear-gradient(135deg, rgba(31, 30, 30, 0.87), rgba(8, 7, 7, 0.87)) !important;
    border: 2px solid #a9993f !important;
    box-shadow: 0px 0px 10px #a9993f !important;
    border-radius: 20px !important;
  }

  /* Maintain gold typography */
  .LoginHead {
    color: #a9993f !important;
    font-size: 26px !important;
    text-align: left !important;
  }

  .InputText {
    color: #a9993f !important;
    font-size: 16px !important;
  }

  #emailHelp {
    word-break: break-word !important;
  }

  /* Responsive Submit Button matching original gradient & border */
  .Submit {
    margin-top: 3vh !important;
    width: 100% !important;
    font-size: 18px !important;
    color: #908e27 !important;
    border: 2px solid #a9993f !important;
    box-shadow: 0px 0px 10px #a9993f !important;
  }
}