/* General styling */
.teacher-profile *,
.teacher-profile *::before,
.teacher-profile *::after {
    box-sizing: border-box;
}

.teacher-profile body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.teacher-profile .wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
}

.teacher-profile .profile-container {
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    padding-top: 60px; /* Match the height of the navbar */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}

/* Profile header and details */
.teacher-profile .profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    width: 100%;
}

.teacher-profile .profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.teacher-profile .profile-info h2 {
    font-size: 2em;
    color: #333;
    margin: 0;
    text-align: center;
}

.teacher-profile .profile-info p {
    font-size: 1em;
    color: #666;
    margin: 5px 0;
    text-align: center;
}

.teacher-profile button, .edit-btn, .classroom-btn, .btn {
    background-color: #ffffff;
    border: 2px solid #ffc107;
    color: #333;
    padding: 10px 20px;
    text-align: center;
    font-size: 1em;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

.teacher-profile button:hover, .edit-btn:hover, .classroom-btn:hover, .btn:hover {
    background-color: #ffc107;
    color: #fff;
}

.teacher-profile .profile-details {
    width: 100%;
    padding: 10px 20px;
    text-align: left;
}

.teacher-profile .profile-details p {
    margin: 5px 0;
    font-size: 1.1em;
    color: #666;
}

.teacher-profile .profile-details p span {
    font-weight: bold;
    color: #333;
}

/* Classroom container styling */
.teacher-profile .course-list {
    margin-top: 20px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.teacher-profile .classroom-sections {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.teacher-profile .classroom-sections li {
    flex: 1 1 calc(33.33% - 20px);
    max-width: 180px;
    text-align: center;
    margin: 0 10px;
    aspect-ratio: 16 / 9;
}

/* Classroom button styling */
.teacher-profile .classroom-logo-btn {
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
    background-color: #ffffff;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: rgb(0, 0, 0);
}

.teacher-profile .classroom-logo-btn span {
    display: block;
    font-size: 1.2em;
    padding-top: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(0, 0, 0);
}

.teacher-profile .classroom-logo-btn:hover {
    background-color: #72affd;
}

/* Social media links */
.teacher-profile .socials-container {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 20px 40px;
    background-color: transparent;
    margin: 0 auto;
}

.teacher-profile .social {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgb(194, 194, 194);
    background-color: #fff;
}

.teacher-profile .social svg {
    fill: black;
    height: 20px;
}

.teacher-profile .social:hover {
    background: linear-gradient(45deg, #f0f0f0, #f5f5f5);
}

.teacher-profile .twitter:hover {
    background: linear-gradient(45deg, #66757f, #00acee, #36daff, #dbedff);
}

.teacher-profile .facebook:hover {
    background: linear-gradient(45deg, #134ac0, #316ff6, #78a3ff);
}

.teacher-profile .google-plus:hover {
    background: linear-gradient(45deg, #872419, #db4a39, #ff7061);
}

.teacher-profile .instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

/* "Manage Routine" Button styling from Uiverse.io by Bodyhc */
.teacher-profile .ag-courses_item {
    margin: auto;
    overflow: hidden;
    border-radius: 28px;
    width: fit-content;
    margin-top: 20px;
}

.teacher-profile .ag-courses-item_link {
    display: block;
    padding: 30px 20px;
    background-color: #121212;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    text-align: center;
    color: #fff;
}

.teacher-profile .ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
    color: #121212;
}

.teacher-profile .ag-courses-item_link:hover .ag-courses-item_bg {
    transform: scale(10);
}

.teacher-profile .ag-courses-item_title {
    min-height: 57px;
    margin: 0 0 30px;
    overflow: hidden;
    font-weight: bold;
    font-size: 20px;
    color: rgb(255, 255, 255);
    z-index: 2;
    position: relative;
}

.teacher-profile .ag-courses-item_bg {
    height: 130px;
    width: 100px;
    background-color: #f9b234;
    z-index: 1;
    position: absolute;
    top: -75px;
    right: -75px;
    border-radius: 50%;
    transition: all 0.5s ease;
}

/* General styling for mobile */
@media (max-width: 768px) {
    .teacher-profile .profile-container {
        padding: 15px;
    }

    .teacher-profile .profile-info h2 {
        font-size: 1.5em;
    }

    .teacher-profile .profile-info p, .profile-details p {
        font-size: 0.9em;
        text-align: center;
        word-wrap: break-word;
    }

    .teacher-profile .profile-picture {
        width: 120px;
        height: 120px;
    }

    .teacher-profile .profile-details {
        padding: 10px;
    }

    .teacher-profile .classroom-sections {
        gap: 10px;
        justify-content: center; /* Center the items on smaller screens */
    }

    .teacher-profile .classroom-sections li {
        flex: 1 1 100%; /* Allow each item to take up full width */
        max-width: none;
    }

    .teacher-profile .classroom-logo-btn {
        font-size: 0.9em;
    }

    /* Adjust button container for mobile */
    .teacher-profile .button-container {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center;   /* Center align buttons */
        justify-content: center; /* Ensure central alignment */
        gap: 15px; /* Add spacing between buttons */
    }

    .teacher-profile .card {
        width: 90%; /* Set button width to take up most of the screen */
        max-width: none; /* Remove max-width restriction */
    }

    .teacher-profile .content .heading {
        font-size: 1.2em;
    }

    .teacher-profile .content .para {
        font-size: 0.9em;
    }

    .teacher-profile .socials-container {
        flex-wrap: wrap;
        gap: 15px;
    }

    .teacher-profile .social {
        width: 40px;
        height: 40px;
    }

    .teacher-profile .social svg {
        height: 16px;
    }
}

/* Card Styling (shared with Student Profile) */
.teacher-profile .card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    border-radius: 24px;
    overflow: hidden;
    line-height: 1.6;
    border: 1px solid #999999;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    box-sizing: border-box;
}
/* Style the card to match the width of the surrounding containers */
.teacher-profile .card {
    flex: 1;  /* Allows the cards to grow equally */
    max-width: 300px; /* Set a maximum width if desired */
    height: auto;
    cursor: pointer;
}

.teacher-profile .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #000000;
    text-align: center;
}

.teacher-profile .content .heading {
    font-weight: 700;
    font-size: 24px;
    z-index: 1;
}

.teacher-profile .content .para {
    font-size: 18px;
    opacity: 0.8;
}

.teacher-profile .card::before, .card::after {
    content: "";
    position: absolute;
    width: 10.4rem;
    height: 10.4rem;
    background: #0a3cff;
    z-index: 0;
    opacity: 0;
    border-radius: 50%;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.teacher-profile .card::before {
    right: -5.2rem;
    top: -5.2rem;
}

.teacher-profile .card::after {
    left: -5.2rem;
    bottom: -5.2rem;
}

.teacher-profile .card:hover::before, .card:hover::after {
    scale: 7;
    opacity: 1;
}

.teacher-profile .card:hover .content .heading, .card:hover .content .para {
    color: #ffffff;
}

/* Style adjustments for card hover effects */
.teacher-profile .card:hover {
    box-shadow: 0rem 6px 13px rgba(0, 0, 0, 0.1), 0rem 24px 24px rgba(0, 0, 0, 0.09),
                0rem 55px 33px rgba(0, 0, 0, 0.05), 0rem 97px 39px rgba(0, 0, 0, 0.01),
                0rem 152px 43px rgba(0, 0, 0, 0);
    border-color: #0a3cff;
    scale: 1.05;
}

/* Align the buttons side by side */
.teacher-profile .button-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}