html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    background-color: #f8fae5 !important;
}

.login-card {
    border: 2px solid #cce2a3;
    transition: box-shadow .2s;
}

    .login-card:focus-within, .login-card:hover {
        box-shadow: 0 0 0 0.2rem #bed98580;
    }

.courses-table-wrapper {
    background: #e9efc5;
    border-radius: 18px;
    box-shadow: 0 4px 32px 0 rgba(31,38,135,0.09);
    padding: 24px 18px;
    margin-top: 32px;
}

.table-courses th, .table-courses td {
    vertical-align: middle !important;
    text-align: left;
}

    .table-courses td img {
        border-radius: 8px;
        max-width: 90px;
        max-height: 90px;
        object-fit: cover;
        box-shadow: 0 1px 4px #0001;
    }

.btn-xs {
    padding: 0.25rem 0.7rem;
    font-size: 0.95rem;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .courses-table-wrapper {
        padding: 8px 2px;
    }

    .table-courses td, .table-courses th {
        font-size: 0.97rem;
        padding: 6px 2px;
    }

        .table-courses td img {
            max-width: 55px;
            max-height: 55px;
        }

    /* ===== HERO SECTION ===== */
    .page-hero-section {
        padding: 100px 0 50px 0;
        background: linear-gradient(90deg, #fff 60%, #f3f5f7 100%);
        position: relative;
    }

    .details-hero-subtitle {
        display: inline-block;
        font-size: 18px;
        color: #ff733b;
        font-style: italic;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    .details-hero-title {
        font-size: 2.8rem;
        font-weight: 700;
        color: #222f3e;
        margin-bottom: 10px;
    }

    .details-hero-desc {
        color: #495160;
        font-size: 1.2rem;
        margin-bottom: 0;
        opacity: 0.85;
    }

    /* ===== DETAILS CARD ===== */
    .details-card-section {
        padding: 50px 0 100px 0;
        background: #fff;
    }

    .details-card {
        background: #fafbfc;
        border-radius: 20px;
        box-shadow: 0 4px 28px 0 rgba(34,47,62,.10);
        padding: 38px 34px 28px 34px;
        margin-top: -70px;
        position: relative;
    }

    .details-card-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1d2b40;
        margin-bottom: 18px;
    }

    .details-list {
        list-style: none;
        padding: 0;
        margin: 0 0 10px 0;
    }

        .details-list li {
            font-size: 1.07rem;
            color: #222f3e;
            padding: 8px 0;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
        }

    .details-label {
        min-width: 110px;
        color: #8e99a6;
        font-weight: 500;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .status-badge {
        display: inline-block;
        padding: 2px 12px;
        background: #ff8c24;
        color: #fff;
        border-radius: 999px;
        font-size: 0.96em;
        font-weight: 500;
        margin-left: 5px;
    }

    .details-full-desc h5 {
        font-size: 1.18rem;
        font-weight: 600;
        color: #ff3294;
        margin-bottom: 8px;
    }

    .details-full-desc p {
        font-size: 1.07rem;
        color: #495160;
        line-height: 1.7;
        margin-bottom: 0;
    }

    /* ===== Responsive ===== */
    @media (max-width: 991px) {
        .details-card {
            padding: 24px 14px;
        }

        .page-hero-section {
            padding: 60px 0 30px 0;
        }
    }

    @media (max-width: 575px) {
        .details-hero-title {
            font-size: 2rem;
        }

        .details-card-title {
            font-size: 1.1rem;
        }
    }

    /* Ensure footer stays at the bottom */
    footer {
        position: relative;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        background-color: #f8fae5; /* Adjust background color if needed */
    }

    /* Center content in the footer */
    .footer-content {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

        /* Social media icons */
        .footer-content a img {
            width: 25px;
            height: 25px;
            margin: 0 10px;
        }

    /* Image in footer */
    .footer-image {
        max-width: 200px; /* Adjust size of image */
        height: auto;
        margin-top: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Ensure there's padding between footer content and page content */
    body {
        padding-bottom: 80px; /* Add space at the bottom */
    }