/* Styles for Content Section */
.content-section {
    position: relative; /* Positioning context for children */
    z-index: 3; /* Ensure content appears above other elements */
    color: #000000; /* White text for better contrast against background */
    padding: 40px; /* Add some padding around the content */
  
}

/* Heading Styles */
.content-section h1 {
    font-size: 3rem; /* Large font size for the main heading */
    margin-bottom: 20px; /* Space below the heading */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); /* Shadow for depth */
}

/* Paragraph Styles */
.content-section p {
    font-size: 1.25rem; /* Slightly larger font size */
    margin-bottom: 30px; /* Space below paragraphs */
    line-height: 1.5; /* Improved line height for readability */
}

/* Input Group Styles */
.input-group {
    margin-bottom: 1.5rem; /* Space below the input group */
}

/* Button Styles */
.input-group-append .btn {
    background-color: #007bff; /* Bootstrap primary color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Comfortable padding */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.input-group-append .btn:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

/* Contact Info Styles */
.contact-info {
    font-size: 1rem; /* Standard font size */
    text-align: center; /* Center align contact info */
}

.contact-info p {
    margin: 5px 0; /* Space between contact info lines */
}

/* Social Icons Styles */
.social-icons a {
    margin: 0 15px; /* Space between social icons */
    font-size: 2rem; /* Larger icons for better visibility */
    transition: transform 0.3s; /* Smooth transition for hover effect */
}

.social-icons a:hover {
    transform: scale(1.2); /* Slightly enlarge icons on hover */
}



/*Admin */
#login-section {
    max-width: 140px; /* Set a maximum width for the form */
    margin: auto; /* Center the form horizontally */
    transition: transform 0.3s; /* Smooth transition for hover effect */
}

#login-section:hover {
    transform: scale(1.02); /* Slightly enlarge on hover for emphasis */
}

.btn-primary {
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition for button hover */
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker shade on hover */
    border-color: #004085; /* Change border color on hover */
}


/* Custom styles for the admin panel */
#admin-panel {
    transition: transform 0.3s; /* Smooth transition for hover effect */
}

#admin-panel:hover {
    transform: scale(1.02); /* Slightly enlarge on hover */
}

#toggle-select {
    transition: background-color 0.3s; /* Smooth transition for button hover */
}

#toggle-select:hover {
    background-color: #6c757d; /* Darker shade on hover */
}

.btn-info, .btn-danger {
    transition: background-color 0.3s; /* Smooth transition for button hover */
}

.btn-info:hover {
    background-color: #17a2b8; /* Darker shade for info button on hover */
}

.btn-danger:hover {
    background-color: #c82333; /* Darker shade for danger button on hover */
}

.list-group-item {
    transition: background-color 0.3s; /* Smooth transition for list item hover */
}

.list-group-item:hover {
    background-color: #f8f9fa; /* Light background on hover */
}