/* Form Section Headings */
.registration-form {
    background-color: #ffffff; /* White background for the form */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    margin: 20px auto;
    width: 100%;
    max-width: 1200px; /* Adjust based on your preference */
}

.registration-form h2 {
    font-size: 1.8em;
    color: #011529 ;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 2px solid #3498db; /* Optional: Adds a line under section title */
    padding-bottom: 10px;
}

/* Form Group Spacing */
.form-group {
    margin-bottom: 25px; /* Increases space between fields */
    text-align: left;
}

.registration-form select {
    width: 100%;
    padding: 12px 15px;
    background-color: #f0f8ff; /* Same as other input fields */
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
    color: #333;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.registration-form select:focus {
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
    outline: none;
}

/* Input Fields Styling */
.registration-form input[type="text"],
.registration-form input[type="email"],
.registration-form input[type="password"],
.registration-form input[type="tel"] {
    width: 100%;
    padding: 12px 15px;
    background-color: #f0f8ff; /* Light blue for input fields */
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
    transition: all 0.3s ease-in-out;
}


/* Focused Input Fields */
.registration-form input[type="text"]:focus,
.registration-form input[type="email"]:focus,
.registration-form input[type="password"]:focus,
.registration-form input[type="tel"]:focus {
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* Button Styling */
.buttons {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px; /* Add space between buttons */
    margin-top: 10px; /* Add space between the buttons and the form */
}

.registration-form button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    transition: background-color 0.3s;
    border: none;
}

.registration-form button:hover {
    background-color: #2980b9;
}

.registration-form .cancel {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ff4d4d;
    color: #333; /* Dark text color for cancel button */
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    transition: background-color 0.3s;
    border: none;
}

.registration-form .cancel:hover {
    background-color: #e60000; /* Darker grey on hover */
}

/* Adjust Spacing at the Bottom */
.main-content {
    padding-bottom: 40px;
}

/* Align the flags, country names, and country codes properly */
/* .iti__country-list .iti__country {
    display: flex;
    align-items: center;
    justify-content: space-between;
} */

/* .iti__country .iti__flag {
    margin-right: 10px; 
} */

/* .iti__country {
    background-color: #011529 !important; 
    color: #ffffff !important; 
    display: flex;
    align-items: center;
    justify-content: space-between;
} */

/* .iti__country-name {
    display: inline-block; 
    width: auto; 
    font-size: 1em; 
    color: #fff; 
} */

/* .iti__dial-code {
    font-weight: bold;
    margin-left: auto; 
    color: #ffffff !important; 
} */

/* Ensure the dropdown content is fully visible */
/* .iti__country-list {
    background-color: #011529 !important; 
    color: #ffffff; 
} */

/* Fix any misalignments inside the dropdown */
/* .iti__flag-box {
    margin-right: 10px; 
} */

/* Hover effect for country list */
/* .iti__country:hover {
    background-color: #2980b9 !important; 
    color: #ffffff !important; 
} */

/* .iti__country-name:hover,
.iti__dial-code:hover {
    color: #ffffff !important; 
} */