/* Prevent horizontal scrolling */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Lock horizontal scrolling */
    box-sizing: border-box; /* Include padding and border in width calculations */
}

/* General Page Styling */
.container {
    width: 100%;
    max-width: 100%;
    padding: 0 20px; /* Adjust padding to prevent overflow */
    padding-top: 60px; /* Match the height of the navbar */
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* Department section styling */
.department-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
    width: 100%; /* Ensure full-width for mobile responsiveness */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Department title styling */
.department-title {
    font-size: 1.8em;
    color: #856c00;
    margin-bottom: 10px; /* Space between title and logo */
    text-align: center;
}

/* Logo Styling */
.logo-container {
    text-align: center;
    margin-bottom: 20px; /* Space between logo and teacher cards */
}

.department-logo {
    width: 60px; /* Adjust size as needed */
    height: auto;
}

/* Teacher Row Styling */
.teacher-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%; /* Ensure no horizontal scroll */
    margin: 0; /* Avoid extra margins */
    padding: 0;
    box-sizing: border-box; /* Include padding and border in width */
}

/* Teacher Card Styling */
.teacher-card {
    width: 220px;
    margin: 10px;
    background-color: #000000;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    color: #333;
    text-decoration: none;
    overflow: hidden;
}

.teacher-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.teacher-img {
    width: 100%;
    height: 70%; /* Increased height for desktop and mobile */
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.teacher-info {
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Teacher Name Styling */
.teacher-name {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px 0 0 0; /* Reduce spacing */
    color: #ffffff;
    line-height: 1.2; /* Compact line height */
}

/* Teacher Display Text Styling */
.teacher-display-text {
    font-size: calc(1rem - 0.1vw); /* Dynamic font size based on screen width */
    color: #e1e1e1;
    margin: 5px 0 0; /* Reduced margin */
    line-height: 1.4; /* Maintain readability */
    max-height: calc(1.4em * 3); /* Allow up to 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Clamp text to 3 lines */
    -webkit-box-orient: vertical;
    word-break: break-word; /* Handle long words gracefully */
}

/* Specific department background gradients */
.mathematics-background {
    background: linear-gradient(135deg, #ffdb10, #4e4305);
}

.language-background {
    background: linear-gradient(135deg, #0056b3, #ab37b5);
}

.science-background {
    background: linear-gradient(135deg, #000000, #2e16b8);
}

.business-background {
    background: linear-gradient(135deg, #008f39, #040804);
}

.law-background {
    background: linear-gradient(135deg, #000000, #bd6969);
}

.junior-section-background {
    background: linear-gradient(135deg, #f39c12, #f1c40f);
}

/* Responsive Adjustments for Tablets and Smaller Screens */
@media (max-width: 768px) {
    .teacher-card {
        width: 200px;
        height: auto; /* Let height adjust based on content */
        padding-bottom: 10px; /* Add padding for breathing space */
    }

    .teacher-img {
        width: 100%;
        height: 70%; /* Increased height for desktop and mobile */
        object-fit: cover;
        border-radius: 8px 8px 0 0;
    }

    .teacher-name {
        font-size: 1em; /* Smaller font size */
        line-height: 1.2; /* Adjusted line height */
    }

    .teacher-display-text {
        font-size: calc(0.9rem - 0.05vw); /* Slightly smaller font size */
        line-height: 1.3; /* Adjusted for readability on small screens */
        max-height: calc(1.3em * 3); /* Adjust max height for 3 lines */
    }

    .department-title {
        font-size: 1.5em; /* Adjusted department title size */
    }

    .teacher-row {
        gap: 10px; /* Adjust gap for smaller screens */
    }
}

/* Adjustments for Very Small Screens (Mobile) */
@media (max-width: 480px) {
    .department-section {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .teacher-row {
        justify-content: center; /* Center-align the row contents */
        padding-right: 15px; /* Add horizontal padding to ensure spacing from edges */
        padding-left: 15px;
        gap: 20px; /* Set consistent gap between cards */
        width: 100%; /* Ensure the row spans the full width */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    .teacher-card {
        width: calc(48% - 10px); /* Keep two cards per row with proper spacing */
        max-width: 220px; /* Prevent cards from being too wide */
        margin: 0; /* Remove extra margins for precise alignment */
        height: auto; /* Allow dynamic height */
        box-sizing: border-box; /* Include padding and borders in width */
    }

    .teacher-info {
        padding: 5px; /* Compact padding for card content */
        align-items: center; /* Ensure content is centered inside the card */
    }

    .teacher-img {
        width: 100%;
        height: 70%; /* Increased height for desktop and mobile */
        object-fit: cover;
        border-radius: 8px 8px 0 0;
    }
    .teacher-name {
        font-size: 0.9em;
        margin-top: 5px; /* Reduce spacing above the name */
        text-align: center; /* Center-align text */
    }

    .teacher-display-text {
        font-size: 0.75rem; /* Smaller font for mobile */
        line-height: 1.2; /* Compact line height */
        max-height: calc(1.2em * 3); /* Limit text to 3 lines */
        text-align: center; /* Center-align text */
    }
}