.membership-section {

    position: relative;

    padding: 80px 0;

    overflow: hidden;

    text-align: center;

    color: #fff;

}



.membership-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover; /* Ensures the image covers the full section */

    z-index: -1;

}



.membership-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover; /* Ensures full coverage of the section */

    position: absolute;

    top: 0;

    left: 0;

}



.membership-title {

    font-size: 2.4rem;

    font-weight: bold;

    text-align: center;

    margin-bottom: 20px;

    color: #e5c685;

    font-family: var(--font-playfair-display);



}

.cost{ 

    font-size: 2.5rem;

    /* font-weight: normal; */

    color: var(--primary-color);

    font-family: var(--font-playfair-display);



}

.price {

    font-size: 2.5rem;

    font-weight: normal;

    color: white;

    font-family: var(--font-playfair-display);

    text-align: center;



}



.form-container {

    background: rgba(255, 255, 255, 0.15); /* Slightly more visible */

    padding: 30px;

    border-radius: 10px;

    backdrop-filter: blur(10px); 

    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

    /* Adds a glassmorphism effect */

}



.form-control {

    font-style: italic;



    background: transparent;

    color: #fff;

    border: none;

    border-bottom: 2px solid rgba(255, 255, 255, 0.5);

    border-radius: 0;

    margin-bottom: 15px;

    padding: 10px;

    font-size: 1rem;

}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus, 
.form-control:-webkit-autofill:active {
    background-color: transparent; /* Keeps original background */
    color: white!important; /* Ensures text remains white */
    -webkit-text-fill-color: #fff !important; /* Forces white text */
    -webkit-box-shadow: 0 0 0px 1000px rgb(31, 90, 108) inset !important; /* Prevents autofill background change */
    transition: background-color 5000s ease-in-out 0s;
  }
.form-control::placeholder {

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

}
 .textInputWrapper {
    position: relative;
    margin: 12px 0;
  }
  
  .textInput {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    background: rgb(31, 90, 108);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    color: #fff;
    outline: none;
    transition: all 0.3s ease-in-out;
  }
  
  .textInput::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  
  .textInput:focus {
    border-color: #e5c685;
    box-shadow: 0 0 8px #e5c685;
  }
  
  select.textInput {
    appearance: none;
    cursor: pointer;
  }
  .textInput:-webkit-autofill,
  .textInput:-webkit-autofill:hover, 
  .textInput:-webkit-autofill:focus, 
  .textInput:-webkit-autofill:active {
    background-color: rgb(31, 90, 108) !important; /* Keeps original background */
    color: #fff !important; /* Ensures text remains white */
    -webkit-text-fill-color: #fff !important; /* Forces white text */
    -webkit-box-shadow: 0 0 0px 1000px rgb(31, 90, 108) inset !important; /* Prevents autofill background change */
    transition: background-color 5000s ease-in-out 0s;
  }
  
  


.btn-submit {

    background: #e5c685;

    color: #000;

    font-weight: bold;

    padding: 12px;

    border: none;

    width: 100%;

    border-radius: 5px;

    transition: 0.3s ease;

}



.btn-submit:hover {

    background: #d4b36a;

}



/* Responsive Design */

@media (max-width: 1024px) {

    .membership-section {

        padding: 60px 20px;

    }

    .membership-title {

        font-size: 1.8rem;

    }

    .price {

        font-size: 1.3rem;

    }

    .form-container {

        padding: 20px;

    }

}



@media (max-width: 768px) {

    .membership-section {

        padding: 40px 15px;

    }

    .row {

        flex-direction: column;

        text-align: center;

    }

    .membership-title {

        font-size: 1.6rem;

    }

    .price {

        font-size: 1.2rem;

    }

    .form-container {

        padding: 15px;

    }

    .form-control {

        font-size: 0.9rem;

    }

}



@media (max-width: 480px) {

    .membership-title {

        font-size: 1.4rem;

    }

    .price {

        font-size: 1rem;

    }

    .btn-submit {

        padding: 10px;

        font-size: 0.9rem;

    }

}