/* Base Reset */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     text-decoration: none;
     font-family: 'Plus Jakarta Sans', sans-serif;
 }
 
 body {
     background: linear-gradient(225deg, #8177b7, #6d649a);
     background-repeat: no-repeat;
     background-size: cover;
     overflow-x: hidden;
     color: #eff6f8;
 }
 
 img {
     width: 100%;
     height: auto;
     object-fit: cover;
 }
 
 /* Utility Classes */
 .hidden {
     display: none!important;
 }
 
 .bg-bugPurple {
     background-color: #796fab;
 }
 
 .text-bugWhite {
     color: #eff6f8;
 }
 
 .text-bugPurple {
     color: #796fab;
 }

 .text-black{
     color: #282828;
 }
 .closeCount{
    font-size: 10px;
    font-weight: 600;
 }
 .spinner-border {
    position: relative;
}

.closeCount {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: bold;
    animation: none; /* Prevents rotation */
    z-index: 10; /* Ensures it appears above the spinner */
}
 button {
     border: none;
     cursor: pointer;
 }
 
 .spinner {
     width: 3.5rem;
     height: 3.5rem;
     border: 0.5rem solid rgba(255, 255, 255, 0.2);
     border-top: 0.5rem solid #eff6f8;
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }
 
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 /* Navbar */
 #navbar {
     width: 100%;
     position: sticky;
     top: 0;
     backdrop-filter: blur(5px);
     background-color: rgba(121, 111, 171, 0.4);
     padding: 1rem 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 10;
 }
 
 #navbar .logo {
     width: 150px;
 }
 
 /* Form Section */
 .form_cont {
     margin-top: 2rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 2rem;
     padding: 1rem;
 }
 
 .frm {
     box-shadow: -20px 20px 60px #675e91, 20px -20px 60px #8b80c5;
     border-radius: 20px;
     padding: 2rem;
     background: #eff6f8;
     width: 100%;
     max-width: 500px;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
 }
 
 .frm input,
 .frm textarea {
     border: 2px solid #282828bd;
     border-radius: 10px;
     padding: 0.8rem;
     background: none;
     width: 100%;
 }
 
 .frm input[type="submit"] {
     background: linear-gradient(225deg, #8177b7, #6d649a);
     color: #fff;
     font-weight: bold;
     box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
     border: none;
     padding: 0.8rem;
     cursor: pointer;
 }
 
 .frm input[type="submit"]:hover {
     background: linear-gradient(225deg, #6d649a, #8177b7);
 }
 
 .frm label {
     font-weight: bold;
     color: #282828;
 }
 
 /* Countdown */
 .countdown {
     display: flex;
     gap: 1rem;
     align-items: center;
 }
 
 .countdown div {
     text-align: center;
 }
 
 .countdown div span {
     display: block;
 }
 
 /* Rocket Image */
 .rocket img {
     max-width: 30vw;
     margin: 1rem 0;
     filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.2));
 }
 
 .general .row h2 {
     font-size: 3rem;
     font-weight: 900;
     font-style: oblique;
     text-shadow: -5px 4px #423c5e;
     line-height: 50px;
}

.rocket img {
     z-index: -10;
     filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.178));
}

 .text-dark-emphasis{
     color: #eff6f878 !important;
 }
 #modal{
     background: #796fab55;
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.178));
     backdrop-filter: blur(5px);
     width: 100vw;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 5vw ;
 }
 .modal-content{
    background-color: #eff6f8;
    width: 80vw;
    padding: 2vw;
    border-radius: 15px;
    color: #282828;
    border: 1px solid #796fab;
 }
 .modal-header{
    border-bottom:  2px solid #282828;
    color: #796fab;
    padding: 5px;
    font-weight: 800!important;
    font-size: 15px!important;
 }
 .modal-body{
    padding: 5px;
 }
 .modal-footer a, .btn-primary{
    background: #796fab;
    border: 1px solid #796fab;
    outline: none;
 }
 .modal-footer a:hover, .btn-primary{
    background: #796fabdd;
    outline: none;
    border: 1px solid #796fabdd;
 }
 /* Responsive Design */
 @media (max-width: 1024px) {
     .frm {
         padding: 1.5rem;
     }
 
     #navbar .logo {
         width: 120px;
     }
 
     .rocket img {
         max-width: 40vw;
     }
 }
 
 @media (max-width: 768px) {
     #navbar .logo {
         width: 100px;
     }
     #navbar{
          flex-direction: column;
          gap: 30px;
     }
     .gap-4 {
          gap: 0rem !important;
      }
 
     .frm {
         padding: 1rem;
     }
 
     .rocket img {
         max-width: 70vw;
         margin-right: auto !important;
         margin-left: auto !important;
     }
     body {
          height: 100%;
          padding: 0rem 0 2rem;
     }

     .general .row h2 {
          font-size: 2.5rem!important;
          font-weight: bold;
          text-shadow: -3px 2px #423c5e;


     }

     .general .row p {
          font-size: 0.8rem;
     }

     .frm {
          padding: 1.5rem 1.5rem;
          height: 100%;
     }
}