/* Apply styles to the form container */
#form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Style the form headings */
#form-container h2 {
    text-align: center;
    color: #333;
}

/* Style form groups */
#form-container .form-group {
    margin-bottom: 15px;
}

/* Style form labels with icons */
#form-container label {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    color: #666;
    font-weight: bold;
}

#form-container label i {
    margin-right: 10px;
}

/* Style text inputs */
#form-container input[type="text"],
#form-container input[type="email"],
#form-container input[type="tel"],
#form-container input[type="password"] {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Flexbox for inline form groups */
#form-container .form-inline {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

#form-container .form-inline .form-group {
    flex: 1;
}

/* Style buttons */
#form-container button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    width: 100%;
}

#form-container button[type="submit"]:hover {
    background-color: #45a049;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    #form-container {
        padding: 10px;
    }

    #form-container .form-inline {
        flex-direction: column;
    }

    #form-container .form-inline .form-group {
        margin-bottom: 10px;
    }
}

/* Navbar */
.button-container {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap if container width is too small */
    gap: 10px; /* Adds space between buttons */
    margin-top: 1%;
    width: 50%; /* Adjust as needed */
    margin-left: auto; /* Center align */
    margin-right: auto; /* Center align */
    justify-content: center; /* Centers the buttons within the container */
    transition: all 0.3s ease-in-out; /* Adds a smooth transition effect */
}

/* Button styles */
.button-container .btn {
    flex: 1; /* Makes buttons grow and shrink equally */
    max-width: calc(25% - 10px); /* Ensures four buttons per row with space */
    background-color: rgb(76, 165, 211);
    color: white;
    text-align: center; /* Centers text within button */
    padding: 10px 15px; /* Adjust padding as needed */
    border: none; /* Remove default button border */
    cursor: pointer; /* Pointer cursor on hover */
    transition: transform 0.3s, background-color 0.3s; /* Adds animation effects */
}

/* Button text */
.button-container .btn span {
    font-size: 12px;
    color: #000;
}

/* Button hover effect */
.button-container .btn:hover {
    transform: scale(1.1); /* Slightly enlarges the button */
    background-color: #0056b3; /* Changes background colour on hover */
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .button-container {
        width: 100%; /* Full width on smaller screens */
    }
    
    .button-container .btn {
        max-width: calc(50% - 10px); /* Two buttons per row on smaller screens */
    }
}

@media (max-width: 480px) {
    .button-container .btn {
        max-width: 100%; /* Single button per row on very small screens */
    }
}

/* end navbar */
/* Style for the select dropdown */
#login-type {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside the dropdown */
    border: 1px solid #ccc; /* Border for the dropdown */
    border-radius: 4px; /* Rounded corners */
    font-size: 16px; /* Font size */
    background-color: #fff; /* Background colour */
}

/* Optional: Custom styling for the dropdown's options */
#login-type option {
    padding: 10px; /* Padding inside each option */
    background-color: #f8f8f8; /* Background colour for each option */
    color: #333; /* Text colour */
}

/* Style for the selected option (not directly applicable but useful for general styling) */
#login-type option:checked {
    background-color: #d0e6f9; /* Background colour for the selected option */
    color: #0056b3; /* Text colour for the selected option */
}



.page-title {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('https://www.sas.com/en_in/solutions/ai/_jcr_content/par/styledcontainer_ced3/image.img.jpg/1714053863203.jpg') 
                no-repeat center center; /* Add your image */
    background-size: cover; /* Ensure the image covers the area */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    height: auto; /* Adjust height based on content */
    overflow: hidden; /* Prevent content overflow */
    color: white; /* Ensure text is visible */
    padding: 20px; /* Add padding if needed */
}