/* Import Google font - Poppins */
   @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
   }

   .myFormContainer .container {
     position: relative;
     max-width: 500px;
     width: 100%;
     /*42%*/
     background: #fff;
     padding: 15px 25px;
     border-radius: 8px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
     opacity: .95;
   }

   .myFormContainer .container header {
     font-size: 1.5rem;
     color: #333;
     font-weight: 500;
     text-align: center;
   }

   .myFormContainer .container .form {
     margin-top: 30px;
   }

   .myFormContainer .form .input-box {
     width: 100%;
     margin-top: 8px;
     /*20px*/
   }

   .myFormContainer .input-box label {
     color: #333;
     font-size: 12px;
   }

   .myFormContainer .form :where(.input-box input, .select-box) {
     position: relative;
     height: 50px;
     width: 100%;
     outline: none;
     font-size: 13px;
     color: #707070;
     margin-top: 8px;
     border: 1px solid #ddd;
     border-radius: 6px;
     padding: 0 15px;
   }

   .myFormContainer .input-box input:focus {
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
   }

   .myFormContainer .form .column {
     display: flex;
     column-gap: 15px;
   }

   .myFormContainer .address :where(input, .select-box) {
     margin-top: 15px;
   }

   /*dzzzz  */
   /* Style for the select box */
   .myFormContainer .select-box {
     position: relative;
     display: inline-block;
     width: 100%;
   }




   .myFormContainer .select-box select {
     /* height: 100%; */
     height: 100%;
     overflow-y: auto;

     width: 100%;
     outline: none;
     border: none;
     color: #707070;
     font-size: 13px;
   }

   /*             -----Button-----         */
   .myFormContainer .form button {
     position: relative;
     overflow: hidden;
     /* Ensure content doesn't overflow */
     height: 55px;
     width: 100%;
     color: #fff;
     font-size: 13px;
     /*1rem*/
     font-weight: 400;
     margin-top: 10px;
     /*30px*/
     border: none;
     cursor: pointer;
     transition: color 0.3s ease;
     /* Transition for font color */
     background: #001d6e;
     border-color: #001d6e;
     border-radius: 4px;
     border: 1px solid #001d6e;
   }

   .myFormContainer .form button:hover {
     color: #001d6e;
     /* Change font color on hover */
     border-color: #001d6e;
   }

   .myFormContainer .form button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     /* Start from the left, outside the button */
     width: 100%;
     height: 100%;
     background-color: #fff;
     /* Hover background color */
     border-color: #001d6e;
     transition: left 0.3s ease;
     /* Slide transition effect */
     z-index: 0;
     /* Ensure it is behind the button content */
   }

   .myFormContainer .form button:hover::before {
     left: 0;
     /* Slide to cover the button */
   }

   .myFormContainer .form button span {
     position: relative;
     z-index: 1;
     /* Ensure text is above the hover effect */
   }

   /*         --------Button---------          */

   /*Responsive*/
   @media screen and (max-width: 500px) {
     //  .myFormContainer .form .column {
     //    /*flex-wrap: wrap;*/
     //  }

     .myFormContainer .form :where(.gender-option, .gender) {
       row-gap: 15px;
     }
   }

   .myFormContainer .iti__country-list {
     width: 210px;

   }

   .myFormContainer #phone-div {
     display: block;
     margin-bottom: 8px;
   }

   /* Centering and Decorating the <hr> Divider */
   .myFormContainer #barre {
     width: 60%;
     /* Adjust the width to your preference */
     margin: 4px auto -15px auto;
     /* Centers the hr and adds vertical spacing */
     border: none;
     /* Removes the default border style */
     height: 1.5px;
     /* Sets the height of the line */
     background-color: #333;
     /* Change color to your desired decoration */
     position: relative;
     opacity: .4;
   }


   /* Adjust the size of the form */
   .myFormContainer {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;

     padding: 20px;
     /* Reduce padding */
     font-size: 10px;
     /* Decrease font size for the form */

   }

   /* ----button---- */
   /* .myFormContainer .form .butn:after {
     content: '';
     width: 0;
     height: 55px;
     position: absolute;
     bottom: 0;
     left: 100%;
     z-index: 1;
     background: #fff;
     color: #001d6e;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
   } */


   /* Adjust the input fields and button size */


   .close-btn {
     position: absolute;
     top: 10px;
     right: 10px;
     background: transparent;
     border: none;
     cursor: pointer;
     transition: transform 0.3s ease;
   }

   .close-btn:hover {
     transform: rotate(90deg);
     /* Rotation effect on hover */
   }

  //  /* Responsive styles for screens with max-width of 768px */
  //  @media screen and (max-width: 768px) {
  //    .myFormContainer .container {
  //      position: relative;
  //      max-width: 400px;
  //      /* Adjusts max-width */
  //      width: 60%;
  //      /* Changes width to 60% */
  //      background: #fff;
  //      padding: 5px 25px;
  //      /* Reduces padding for smaller screens */
  //      border-radius: 8px;
  //      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  //      opacity: .95;
  //    }
  //  }