body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f9f9f9;
        }
        .logo{
            width: 250px!important;

        }
        .container {
            /* display: flex; */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: white;
            border-radius: 8px;
            margin-top: 20px!important;
            padding:40px!important;
            /* overflow: hidden; */
        }
    
        .form-container h1 {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
        }
        .form-container input[type="text"],
        .form-container input[type="email"],
        .form-container input[type="tel"],
        .form-container input[type="url"],
        .form-container input[type="password"],
        .form-container textarea,
        .form-container select {
            width: 100%;
            /* padding: 10px; */
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-container input[type="checkbox"] {
            margin-right: 10px;
        }
        .form-container .terms {
            font-size: 12px;
        }
        .form-container button {
            width: 50%;
            padding: 10px;
            background-color: #F1AE1E;
            border: none;
            color: white;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
        }
        .form-container button:hover {
            background-color: #2980b9;
        }
        .form-container a {
            display: block;
            margin-top: 10px;
            text-align: center;
            font-size: 12px;
            color: #3498db;
            text-decoration: none;
        }
        .form-container a:hover {
            text-decoration: underline;
        }
		    .image-container {
            /* background-color: #f9f9f9; */
            align-items: center !important;
            vertical-align: middle!important;
        text-align: center;


        }
     
        .image-container img {
            width: 100%;
            vertical-align: middle;
            align-items: center;
            bottom: 0px;
            margin-bottom: 20px;
            margin-top: 10px;

            height:87%;
        }
        .input-container {
            position: relative;
          }
          
          .input-container i {
            padding-top: 10px;
            position: absolute;
            left: 25px;
            top: 30%;
            /* transform: translateY(-50%); */
            color: #999; /* Change icon color */
            font-size: 18px;
          }
          
          .input-container input ,          .input-container select             {
            width: 100%;
            padding-left: 35px; /* Adjust padding to make room for the icon */
            height: 40px;
            font-size: 16px;
          }
          
        .input-container textarea{
            width: 100%;
            padding-left: 35px; /* Adjust padding to make room for the icon */
            padding-top: 15px; /* Adjust padding to make room for the icon */

            height: 80px;
            font-size: 16px;
          }
          .social{
            display: block;
            /* background-color: #f9f9f9; */
            padding-bottom: 10px;

          }
          .social a img{
            display: inline-block;
            width: 35px!important;
            /* background-color: #f9f9f9; */

          }
          /* Style for validation messages (alerts) */
.alert {
    color: #e74c3c; /* Red color for errors */
    font-size: 12px; /* Smaller font size */
    margin-top: 5px; /* Add space above the message */
    padding: 3px 5px; /* Padding for a bit of spacing inside the message */
    background-color: #fce4e4; /* Light red background */
    border: 1px solid #e74c3c; /* Thin border for better visibility */
    border-radius: 3px; /* Rounded corners */
    display: inline-block; /* Keep the error message inline */
}

/* Adjust the error message for better spacing with input fields */
.item.bad .alert {
    margin-top: -15px;
}

/* Positioning for validation messages */
.item {
    position: relative;
}

.alert {
    position: absolute;
    right: 0; /* Position to the right of the input */
    top: 100%; /* Position just below the input field */
    transform: translateY(5px); /* Add some spacing below the input field */
}
@media only screen and (max-width: 600px) {
    .form-container
    {
        margin-top: 50px!important;
    }

    .social{
        margin-bottom: 50!important;
    }
}

.input-container select {
  -webkit-appearance: none;  /* يلغي الشكل الافتراضي في iOS */
  -moz-appearance: none;
  appearance: none;
  background: white url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
  background-size: 16px;
  padding-right: 35px; /* مساحة للسهم */
}
  .custom-select {
    position: relative;
  }

  .custom-select i {
    position: absolute;
    left: 25px;
    top: 50% !important;
    transform: translateY(-50%);
    color: #999;
    font-size: 16px;
    pointer-events: none;
  }
.item.custom-select i {
  top: 50% !important;
}
  .custom-select select {
    width: 100%;
    padding-left: 35px;   /* مساحة للأيقونة */
    padding-right: 35px;  /* مساحة للسهم */
    height: 40px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;

    -webkit-appearance: none; /* يلغي الشكل الافتراضي في Safari */
    -moz-appearance: none;
    appearance: none;

    background: #fff url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') 
      no-repeat right 10px center;
    background-size: 16px;
  }