/* =========================================================
   EDULEARN COMPONENT CSS
   Uniform theme for EDU Card & Grid Card components
   1 EDU CARD SECTION
   2 GRID HIGHLIGHT CARDS
   3 EDULEARN UPDATES COMPONENT
   4 DISCOVER MORE COMPONENT
   5 COUNTER HIGHLIGHTS COMPONENT (Bootstrap Icons Version)
   6 STAKEHOLDER TESTIMONIALS – PREMIUM STYLE
   7 
   8 
   9 





   ========================================================= */

/* ---------------- 1. EDU CARD SECTION ---------------- */
/* =====================================================
   EDU PROFILE CARD (Minimal + Reusable)
===================================================== */

.edu-card-section {
    background-color: var(--bs-secondary-bg);
}

/* Card Hover */
.edu-card {
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
    border-radius: var(--bs-card-border-radius);
}

/* Accent Line */
.edu-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;

    /* 🔥 Rounded corners */
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
}

.edu-card:hover::before {
    transform: scaleX(1);
}

.edu-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--bs-box-shadow-lg);
}

/* Avatar */
.edu-avatar {
    width: 130px;
    height: 130px;
    padding: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
}

.edu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    padding: 5px;
    transition: transform .3s ease;
}

.edu-card:hover .edu-avatar img {
    transform: scale(1.08);
}

/* Description */
.edu-card-description {
    color: var(--bs-secondary-color);
    text-align: justify;
}

/* Button refinement */
.edu-card .btn-outline-primary:hover {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: #fff;
}


/* ================= 2. GRID HIGHLIGHT CARDS ================= */

/* =====================================================
   EDU GRID HIGHLIGHT CARDS
===================================================== */

.edu-grid-section {
    background-color: var(--bs-secondary-bg);
}

/* Card */
.edu-grid-card {
    border-radius: var(--bs-card-border-radius);
    color: var(--bs-body-color);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}

/* Accent Line */
.edu-grid-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.edu-grid-card:hover::before {
    transform: scaleX(1);
}

/* Hover */
.edu-grid-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--bs-box-shadow-lg);
}

/* Icon */
.edu-grid-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: #fff;
    transition: transform .3s ease;
}

.edu-grid-card:hover .edu-grid-icon {
    transform: scale(1.12) rotate(6deg);
}

/* Title */
.edu-grid-title {
    font-weight: 600;
    color: var(--bs-heading-color);
    margin-bottom: .5rem;
}

/* Description */
.edu-grid-description {
    color: var(--bs-secondary-color);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .edu-grid-icon {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }
}


/* =========================================================
   3.  EDULEARN UPDATES COMPONENT
   ========================================================= */
/* Uses Bootstrap colors & spacing */
/* ================= UPDATE CARD ================= */
.update-card {
    position: relative;
    overflow: hidden;
    /* safe now */
    border-radius: 1rem;
    transition: transform .3s ease, box-shadow .3s ease;
}

.update-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15);
}

/* Top Gradient Line */
.update-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    border-radius: 4px 4px 0 0;
    /* MATCH HEIGHT */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease, box-shadow .35s ease;
    z-index: 2;
}

.update-card:hover::before {
    transform: scaleX(1);
    box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), .6);
}

/* Keep content below gradient */
.update-card .card-body {
    position: relative;
    z-index: 1;
}


/* ================= DATE BADGE ================= */

.date-box {
    min-width: 60px;
    text-align: center;
    font-size: .75rem;
    line-height: 1.1;
    color: #fff;
    background: linear-gradient(135deg,
            var(--bs-primary),
            var(--bs-info));
    border-radius: .5rem;
    padding: .4rem .25rem;
    font-weight: 600;
}

/* ================= LIST ================= */

.update-item {
    display: flex;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.update-item:last-child {
    border-bottom: 0;
}

.update-list-wrapper {
    max-height: 260px;
    overflow: hidden;
}



/* =========================================================
  4 DISCOVER MORE COMPONENT
   ========================================================= */
.discover-more-section {
    background-color: var(--bs-secondary-bg);
}

/* Slider wrapper for proper arrow alignment */
.discover-slider {
    position: relative;
}

/* Navigation arrows */
.discover-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--bs-light);
    color: var(--bs-dark);
    font-size: 2rem;
    box-shadow: 0 10px 25px rgba(var(--bs-dark-rgb), 0.2);
    cursor: pointer;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.discover-nav:hover {
    background: var(--bs-primary);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.discover-nav.prev {
    left: -18px;
}

.discover-nav.next {
    right: -18px;
}

/* Scroll wrapper */
.discover-scroll-wrapper {
    overflow: hidden;
    position: relative;
    min-height: 280px;
    /* IMPORTANT */
    padding: 1rem 0.5rem;
    /* allows hover + gradient */
}

/* Track */
.discover-track {
    display: flex;
    gap: 1rem;
    will-change: transform;
}

/* Card */
.discover-card {
    flex: 0 0 220px;
    background: var(--bs-light);
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--bs-body-color);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Gradient top line */
.discover-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
    border-radius: 16px 16px 0 0;
    z-index: 2;
}

.discover-card:hover::before {
    transform: scaleX(1);
}

.discover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(var(--bs-dark-rgb), 0.18);
}

/* Icon */
.discover-card .icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    transition: transform 0.35s ease;
}

.discover-card:hover .icon {
    transform: scale(1.15) rotate(8deg);
}

.discover-card h5 {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.discover-card p {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .discover-card {
        flex: 0 0 170px;
    }

    .discover-nav.prev {
        left: -10px;
    }

    .discover-nav.next {
        right: -10px;
    }
}


/* =========================================================
   5 COUNTER HIGHLIGHTS COMPONENT (Bootstrap Icons Version)
   ========================================================= */
/* Counter Highlights Section */
/* ================= Counter Highlights ================= */
.counter-highlights-section {
    background-color: var(--bs-tertiary-bg);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.counter-highlights-section h2 {
    margin-bottom: 0.75rem;
    color: var(--bs-heading-color);
}

.counter-highlights-section p {
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
}

/* ================= Counter Card ================= */
.counter-card {
    position: relative;
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    overflow: hidden;
    cursor: default;
    text-align: center;
    color: var(--bs-dark);
}

/* Card Background Colors */
.counter-card-1 {
    background-color: rgba(13, 71, 161, 0.1);
}

.counter-card-2 {
    background-color: rgba(46, 125, 50, 0.1);
}

.counter-card-3 {
    background-color: rgba(249, 168, 37, 0.1);
}

.counter-card-4 {
    background-color: rgba(198, 40, 40, 0.1);
}

/* Top Gradient Hover Line */
.counter-gradient-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 2;
}

/* Gradient Lines by card */
.counter-card-1 .counter-gradient-line {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
}

.counter-card-2 .counter-gradient-line {
    background: linear-gradient(90deg, var(--bs-success), rgba(46, 125, 50, 0.7));
}

.counter-card-3 .counter-gradient-line {
    background: linear-gradient(90deg, var(--bs-warning), rgba(249, 168, 37, 0.7));
}

.counter-card-4 .counter-gradient-line {
    background: linear-gradient(90deg, var(--bs-danger), rgba(198, 40, 40, 0.7));
}

.counter-card:hover .counter-gradient-line {
    transform: scaleX(1);
}

/* Hover scaling & shadow */
.counter-card:hover {
    transform: scale(1.05);
    box-shadow: 0 1rem 2rem rgba(var(--bs-dark-rgb), 0.2);
}

/* ================= Icon Circle ================= */
.counter-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    margin: 0 auto 1rem;
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Icon Gradients */
.counter-card-1 .counter-icon {
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
}

.counter-card-2 .counter-icon {
    background: linear-gradient(135deg, var(--bs-success), rgba(46, 125, 50, 0.7));
}

.counter-card-3 .counter-icon {
    background: linear-gradient(135deg, var(--bs-warning), rgba(249, 168, 37, 0.7));
}

.counter-card-4 .counter-icon {
    background: linear-gradient(135deg, var(--bs-danger), rgba(198, 40, 40, 0.7));
}

.counter-card:hover .counter-icon {
    transform: scale(1.2) rotate(10deg);
}

/* ================= Counter Number ================= */
.counter-number {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* ================= Counter Text ================= */
.counter-card p {
    font-size: 0.9rem;
    margin-bottom: 0;
    color: var(--bs-dark);
}

/* ================= Responsive Adjustments ================= */
@media (max-width: 992px) {
    .counter-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }

    .counter-number {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .counter-icon {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }

    .counter-number {
        font-size: 1.6rem;
    }
}

@media (max-width: 576px) {
    .counter-icon {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }

    .counter-number {
        font-size: 1.4rem;
    }
}


/* =====================================================
  6 STAKEHOLDER TESTIMONIALS – PREMIUM STYLE
===================================================== */

/* ================= Stakeholder Testimonials ================= */

.stake-section {
    background: var(--bs-tertiary-bg);
    padding: 2rem 0;
}

/* ================= Slider Wrapper ================= */

.stake-slider-wrapper {
    position: relative;
    overflow: hidden;
}

/* ================= Slider Track ================= */

.stake-slider-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================= Slide Card ================= */

.stake-slide {
    position: relative;
    min-width: 100%;
    background: var(--bs-card-bg);
    border-radius: var(--bs-border-radius-lg);
    padding: 2rem 2rem 1.75rem;
    box-shadow: var(--bs-box-shadow-sm);
    text-align: center;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.stake-slide:hover {
    box-shadow: var(--bs-box-shadow);
    transform: translateY(-2px);
}

/* ================= Gradient Hover Line ================= */

.stake-gradient-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg,
            var(--bs-primary),
            var(--bs-info));
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.stake-slide:hover .stake-gradient-line {
    transform: scaleX(1);
}

/* ================= Testimonial Text ================= */

.stake-slide-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bs-body-color);
    text-align: justify;
    margin-bottom: 1.75rem;
}

/* ================= User Box ================= */

.stake-user-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.stake-user-box img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--bs-box-shadow-sm);
}

.stake-user-box h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-heading-color);
}

.stake-user-box span {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

/* ================= Navigation Buttons ================= */

.stake-nav {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.stake-nav .btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--bs-primary);
    border: none;
    color: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-shadow: var(--bs-box-shadow-sm);
    transition: all 0.25s ease;
}

.stake-nav .btn i {
    font-size: 1.1rem;
}

/* Hover */
.stake-nav .btn:hover {
    background-color: var(--bs-link-hover-color);
    transform: translateY(-2px);
    box-shadow: var(--bs-box-shadow);
}

/* Active */
.stake-nav .btn:active {
    transform: scale(0.95);
    box-shadow: var(--bs-box-shadow-sm);
}

/* Focus */
.stake-nav .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

/* ================= Responsive ================= */

@media (max-width: 768px) {
    .stake-slide {
        padding: 1.5rem 1.25rem;
    }

    .stake-slide-text {
        font-size: 0.95rem;
    }

    .stake-user-box img {
        width: 64px;
        height: 64px;
    }
}



/* =========================================================
   OUR ESTEEMED RECRUITERS
========================================================= */

.recruiters-section {
    background: var(--bs-tertiary-bg);
}

/* Slider Wrapper */
.recruiter-slider {
    position: relative;
    width: 100%;
    padding: 1rem 0;
}

/* Track */
.recruiter-track {
    display: flex;
    width: max-content;
    animation: recruiter-scroll 25s linear infinite;
}

/* Pause on hover */
.recruiter-slider:hover .recruiter-track {
    animation-play-state: paused;
}

/* Logo Card */
.recruiter-logo {
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-card-bg);
    border-radius: var(--bs-border-radius-lg);
    transition: all 0.35s ease;
}

/* Logo Image */
.recruiter-logo img {
    max-width: 80%;
    max-height: 60px;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: all 0.35s ease;
}

/* Hover Effects */
.recruiter-logo:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: var(--bs-box-shadow);
}

.recruiter-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Infinite Scroll Animation */
@keyframes recruiter-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .recruiter-logo {
        width: 140px;
        height: 80px;
    }
}


/* =========================================================
   FOOTER
========================================================= */
/* =========================================================
   PRIMARY FOOTER
========================================================= */

.edu-footer {
    background: var(--bs-primary);
}

/* Slight separation for top & bottom */
.edu-footer-top {
    background: rgba(255, 255, 255, 0.03);
}

.edu-footer-bottom {
    background: rgba(0, 0, 0, 0.12);
}

/* Titles */
.footer-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Text */
.footer-text {
    color: rgba(255, 255, 255, 0.85);
}

/* Links */
.footer-links li {
    margin-bottom: 0.45rem;
}

.footer-links a {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--bs-warning);
    padding-left: 4px;
}

/* Mobile alignment */
@media (max-width: 576px) {

    .footer-title,
    .footer-links,
    .footer-text {
        text-align: center;
    }
}

/* =========================================================
   BACK TO TOP BUTTON
========================================================= */

.back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 46px;
    height: 46px;
    z-index: var(--bs-zindex-fixed);

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.35s ease;
}

/* Show button */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover polish */
.back-to-top:hover {
    transform: translateY(-4px);
}

/* Focus ring using theme */
.back-to-top:focus {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
}

/* Mobile sizing */
@media (max-width: 576px) {
    .back-to-top {
        width: 42px;
        height: 42px;
        right: 1rem;
        bottom: 1rem;
    }
}






/* ---------------- 3. SUGGESTIONS / IMPROVEMENTS ---------------- */
/*
1. All cards have a top gradient line on hover for uniform style.
2. Rounded corners standardized to 16px for consistency.
3. Hover shadows unified with subtle depth rgba(var(--bs-dark-rgb), 0.2).
4. Grid cards use flex + height:100% + parent row flex stretch for equal height.
5. Cursor pointer added for all clickable cards.
6. Responsive font and icon sizes ensure readability on all devices.
7. Cross-browser 4-line clamp for grid card descriptions to maintain uniform card height.
8. Transitions for hover effects, scaling, and icons are smooth and consistent.
9. Padding adjustments maintain spacing between content and card edges.
*/