/* for the landing page */
.landingPage {
    background-image: url('/Images/web-solutions-homepage-banner-clean-speed3.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    background-color: rgba(255,255,255,0.7);
    background-blend-mode: lighten;                             
    height: 100vh; 
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;                                 
}

.landingPage h1 {
    font-size: 64px;
    color: black;
}

.landingPage p {
    font-size: 22px;
    margin-bottom:20px;
    color: black;
}        

.sign-up-btn {
    padding: 10px 20px;
    font-size: 1.2rem;
    border: none;
    background-color: #325fa8;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

.sign-up-btn:hover {
    background-color: #1d4076;
    color: white;
}

.navbar-sign-up-btn {
    background-color:white; 
    color: #325fa8;
}

.navbar-sign-up-btn:hover {
    background-color: lightgrey;
}

.login-btn {
    background-color:white; 
    color: #325fa8;
}

.login-btn:hover {
    background-color: lightgrey;
}

.loginBtn{
    background-color: #325fa8;
    color: white;
}

.loginBtn:hover {
    background-color: #1d4076;
    color: white;
}

.HomeBtn{
    background-color: #cccccc;
}

.HomeBtn:hover{
    background-color: darkgrey;
}

/* Header */

.titleLVS {
    font-family: "Neuton", serif;
    font-weight: 500;
    font-style: normal;
}

/* Footer */

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: #325fa8;
    color: white;
    text-align: center;
    padding: 1rem;
}

/* Admin Index Page */

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

#headerImage {
    animation: slideIn 1.5s ease-out;
}

/* Make the carousel smaller in height */
.carousel-item img {   
    height: 235px;
    object-fit: cover; /* Ensure images scale proportionally */
    width: 100%; /* Ensure image width covers the container */
}

/* Courses Admin Index */

/* Style the search bar with a border */
.dataTables_filter {       
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;   /* Rounded corners */
}

/* Style the search input field */
.dataTables_filter input {
    border-radius: 5px;
    padding: 5px;
}

/* Optional: Add a little space between the search bar and the table */
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 10px;
}

.logoutBtn {
    background-color:white; 
    color: #325fa8;
}

.logoutBtn:hover {
    background-color: lightgrey;
}

.btnApproveUser {
    background-color:#cccccc; 
}

.btnApproveUser:hover {
    background-color: darkgrey;
}

.btnDeclineUser {
    background-color:#000000; 
    color: white;
}

.btnDeclineUser:hover {
    color : white; 
    background-color: grey;
}

/* Sign Up Page */

.create-Btn {
    background-color:#325fa8; 
    color: white;
}

.create-Btn:hover {
    color: white;
    background-color: #1d4076;
}

/* User Management Page */

.btnUserEditUser{
    background-color:#cccccc; 
}

.btnUserEditUser:hover{
    background-color: darkgrey;
}

.btnUserDeleteUser{
    background-color:#325fa8; 
    color: white;
}

.btnUserDeleteUser:hover{
    color: white;
    background-color: #1d4076;
}

.btnCourseEdit{
    background-color:#cccccc; 
}

.btnCourseEdit:hover{
    background-color: darkgrey;
}

.btnCourseDelete{
    background-color:#325fa8; 
    color: white;
}

.btnCourseDelete:hover{
    background-color:#325fa8; 
    color: white;
}


.addUserBtn{
    background-color:#325fa8; 
    color: white;
}

.addUserBtn:hover{
    color: white;
    background-color: #1d4076;    
}

.addCourseBtn{
    background-color:#325fa8; 
    color: white;
}

.addCourseBtn:hover{
    color: white;
    background-color: #1d4076;    
}

.saveUserBtn {
    background-color:#325fa8; 
    color: white;
}

.saveUserBtn:hover{
    color: white;
    background-color: #1d4076;    
}

.saveAddCourseBtn{
    background-color:#325fa8; 
    color: white;
}

.saveAddCourseBtn:hover{
    color: white;
    background-color: #1d4076;  
}

.userTitle{
    font-family: "Neuton", serif;
    font-weight: 500;
    font-style: normal;    
}

.saveAddUserBtn{
    background-color:#325fa8; 
    color: white;
}

.saveAddUserBtn:hover{
    color: white;
    background-color: #1d4076;    
}

/* course admin */

.saveCourseBtn {
    background-color:#325fa8; 
    color: white;
}

.saveCourseBtn:hover{
    color: white;
    background-color: #1d4076;    
}

.courseTitle{
    font-family: "Neuton", serif;
    font-weight: 500;
    font-style: normal;  
}

/* Course Enrolment */

.course-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: white;
}

.course-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Course image styling */
.course-image {
    height: 50%;
    object-fit: cover;
    width: 100%;
}

/* Course title styling */
.course-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Button styling for enroll/unroll */
.btnEnrollUnenroll {
    background-color:#325fa8; 
    color: white;
}

.btnEnrollUnenroll:hover {
    color: white;
    background-color: #1d4076;    
}

/* Card body text styling */
.card-body {
    padding: 15px;
    text-align: center;
}

.avaliableCourse{
    font-family: "Neuton", serif;
    font-weight: 500;
    font-style: normal;
}

.standardText{
    font-family: "Neuton", serif;
    font-weight: 500;
    font-style: normal;
}

.btnStaffDelete{
    background-color:#325fa8; 
    color: white;
}

.btnStaffDelete:hover{
    color: white;
    background-color: #1d4076; 
}