.edu-banner-wrap{
    direction:rtl;
    margin:30px auto;
    max-width:100%;
    position:relative
}

/* Main Container */
.edu-banner{
    background:linear-gradient(135deg,#002A63 0%,#003d7a 30%,#005392 60%,#1a7abf 100%);
    border-radius:22px;
    padding:0;
    overflow:hidden;
    position:relative;
    box-shadow:0 12px 40px rgba(0,42,99,.22),0 2px 8px rgba(0,42,99,.1)
}

/* Decorative elements */
.edu-banner::before{
    content:'';
    position:absolute;
    top:-60px;
    left:-40px;
    width:200px;
    height:200px;
    background:radial-gradient(circle,rgba(43,162,238,.12) 0%,transparent 70%);
    border-radius:50%;
    pointer-events:none
}
.edu-banner::after{
    content:'';
    position:absolute;
    bottom:-70px;
    right:8%;
    width:260px;
    height:260px;
    background:radial-gradient(circle,rgba(230,31,55,.08) 0%,transparent 70%);
    border-radius:50%;
    pointer-events:none
}
.edu-deco-1{
    position:absolute;
    top:18%;
    left:4%;
    width:50px;
    height:50px;
    background:rgba(230,31,55,.1);
    border-radius:12px;
    transform:rotate(45deg);
    pointer-events:none;
    animation:edu-float-1 6s ease-in-out infinite
}
.edu-deco-2{
    position:absolute;
    bottom:20%;
    right:3%;
    width:35px;
    height:35px;
    background:rgba(43,162,238,.12);
    border-radius:50%;
    pointer-events:none;
    animation:edu-float-2 5s ease-in-out infinite
}
.edu-deco-3{
    position:absolute;
    top:50%;
    left:15%;
    width:20px;
    height:20px;
    background:rgba(255,255,255,.06);
    border-radius:6px;
    transform:rotate(30deg);
    pointer-events:none;
    animation:edu-float-1 8s ease-in-out infinite reverse
}
.edu-deco-4{
    position:absolute;
    top:30%;
    right:12%;
    width:14px;
    height:14px;
    background:rgba(43,162,238,.1);
    border-radius:50%;
    pointer-events:none;
    animation:edu-float-2 7s ease-in-out infinite reverse
}

@keyframes edu-float-1{
    0%,100%{transform:rotate(45deg) translateY(0)}
    50%{transform:rotate(45deg) translateY(-12px)}
}
@keyframes edu-float-2{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-8px) scale(1.1)}
}

/* ── Top Strip ── */
.edu-top-strip{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:11px 24px;
    background:linear-gradient(90deg,#c41830,#E61F37,#c41830);
    position:relative;
    z-index:2;
    overflow:hidden
}
.edu-top-strip::before{
    content:'';
    position:absolute;
    top:0;left:-100%;
    width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    animation:edu-shine 4s ease-in-out infinite
}
@keyframes edu-shine{
    0%{left:-100%}
    50%,100%{left:200%}
}

.edu-live-dot{
    width:9px;
    height:9px;
    background:#fff;
    border-radius:50%;
    animation:edu-pulse 1.4s ease-in-out infinite;
    flex-shrink:0;
    box-shadow:0 0 6px rgba(255,255,255,.5)
}
@keyframes edu-pulse{
    0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 6px rgba(255,255,255,.5)}
    50%{opacity:.35;transform:scale(.65);box-shadow:0 0 2px rgba(255,255,255,.2)}
}

.edu-top-strip>span{
    color:#fff;
    font-size:.86rem;
    font-weight:600;
    letter-spacing:.2px
}
.edu-running-courses{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center
}
.edu-course-badge{
    background:rgba(255,255,255,.18);
    color:#fff;
    padding:3px 12px;
    border-radius:20px;
    font-size:.76rem;
    font-weight:600;
    backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.22);
    transition:all .3s
}
.edu-course-badge:hover{
    background:rgba(255,255,255,.3);
    transform:scale(1.05)
}

/* ── Body ── */
.edu-body{
    display:grid;
    grid-template-columns:1fr auto;
    gap:28px;
    padding:34px 38px 30px;
    position:relative;
    z-index:2;
    align-items:center
}

/* Content side */
.edu-content{
    display:flex;
    flex-direction:column;
    gap:18px
}

/* ── Info Cards ── */
.edu-info-row{
    display:flex;
    gap:14px;
    flex-wrap:wrap
}
.edu-info-card{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    padding:16px 22px;
    backdrop-filter:blur(8px);
    transition:all .35s cubic-bezier(.25,.46,.45,.94);
    flex:1;
    min-width:210px;
    position:relative;
    overflow:hidden
}
.edu-info-card::before{
    content:'';
    position:absolute;
    top:0;right:0;
    width:4px;height:100%;
    border-radius:0 16px 16px 0;
    transition:width .3s
}
.edu-info-card:first-child::before{background:#2BA2EE}
.edu-info-card:last-child::before{background:#E61F37}

.edu-info-card:hover{
    background:rgba(255,255,255,.16);
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    border-color:rgba(255,255,255,.2)
}
.edu-info-card:hover::before{width:6px}

.edu-info-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.35rem;
    flex-shrink:0;
    transition:transform .3s
}
.edu-info-card:hover .edu-info-icon{transform:scale(1.1)}

.edu-info-icon.edu-cal{background:rgba(43,162,238,.2);color:#fff}
.edu-info-icon.edu-phone{background:rgba(230,31,55,.2);color:#fff}

.edu-info-label{
    font-size:.73rem;
    color:rgba(255,255,255,.55);
    margin-bottom:3px;
    font-weight:400
}
.edu-info-value{
    font-size:.97rem;
    color:#fff;
    font-weight:700;
    direction:ltr;
    text-align:right;
    letter-spacing:.3px
}
.edu-info-value a{
    color:#fff;
    text-decoration:none;
    transition:color .3s
}
.edu-info-value a:hover{color:#2BA2EE}

/* ── Completed Courses ── */
.edu-completed{
    margin-top:8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:16px 18px;
    backdrop-filter:blur(8px);
    position:relative;
    overflow:hidden
}
.edu-completed::after{
    content:'';
    position:absolute;
    inset:-40% -20%;
    background:radial-gradient(circle at 15% 20%,rgba(43,162,238,.08),transparent 40%);
    pointer-events:none
}
.edu-completed-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px
}
.edu-completed-title{
    color:#fff;
    font-weight:700;
    font-size:.95rem
}
.edu-completed-badge{
    font-size:.72rem;
    color:#fff;
    background:rgba(230,31,55,.18);
    border:1px solid rgba(230,31,55,.28);
    padding:3px 10px;
    border-radius:999px
}
.edu-completed-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:8px
}
.edu-completed-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    padding:10px 12px;
    transition:all .3s
}
.edu-completed-item:hover{
    background:rgba(255,255,255,.14);
    transform:translateY(-2px)
}
.edu-completed-item span{
    color:#fff;
    font-weight:600;
    font-size:.9rem
}
.edu-completed-item a{
    color:#fff;
    text-decoration:none;
    font-size:.82rem;
    font-weight:700
}
.edu-completed-item a:hover{color:orange}

/* Details (show more) */
.edu-details{
    margin-top:10px;
    border-top:1px dashed rgba(255,255,255,.16);
    padding-top:10px
}
.edu-details summary{
    list-style:none;
    cursor:pointer;
    color:#fff;
    font-weight:700;
    font-size:.86rem;
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    padding:9px 12px;
    border-radius:12px;
    transition:all .3s
}
.edu-details summary:hover{
    background:rgba(255,255,255,.14)
}
.edu-details summary::-webkit-details-marker{display:none}
.edu-details summary .edu-arrow{
    width:18px;height:18px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(43,162,238,.2);
    border-radius:50%;
    transition:transform .3s
}
.edu-details[open] summary .edu-arrow{transform:rotate(180deg)}
.edu-details .edu-completed-list{
    margin-top:10px
}

/* ── CTA Row ── */
.edu-cta-row{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:2px;
    flex-wrap:wrap
}
.edu-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg,#E61F37,#c41830);
    color:#fff;
    padding:13px 30px;
    border-radius:14px;
    text-decoration:none;
    font-size:.93rem;
    font-weight:700;
    transition:all .35s cubic-bezier(.25,.46,.45,.94);
    border:none;
    cursor:pointer;
    box-shadow:0 4px 18px rgba(230,31,55,.35);
    position:relative;
    overflow:hidden
}
.edu-cta-btn::before{
    content:'';
    position:absolute;
    top:0;left:-100%;
    width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
    transition:left .5s
}
.edu-cta-btn:hover::before{left:100%}
.edu-cta-btn:hover{
    background:linear-gradient(135deg,#c41830,#a01228);
    transform:translateY(-3px);
    box-shadow:0 8px 28px rgba(230,31,55,.45);
    color:#fff
}
.edu-cta-btn .edu-btn-icon{
    font-size:1.15rem;
    transition:transform .3s
}
.edu-cta-btn:hover .edu-btn-icon{transform:scale(1.15) rotate(-8deg)}

.edu-cta-hint{
    color:rgba(255,255,255,.5);
    font-size:.78rem;
    display:flex;
    align-items:center;
    gap:5px;
    animation:edu-hint-pulse 2.5s ease-in-out infinite
}
@keyframes edu-hint-pulse{
    0%,100%{opacity:.5}
    50%{opacity:.9}
}

/* ── Icon Block ── */
.edu-icon-block{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative
}
.edu-big-icon{
    width:130px;
    height:130px;
    border-radius:28px;
    background:rgba(255,255,255,.06);
    border:2px solid rgba(255,255,255,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3.8rem;
    position:relative;
    backdrop-filter:blur(6px);
    transition:all .4s
}
.edu-big-icon:hover{
    background:rgba(255,255,255,.1);
    transform:scale(1.04);
    border-color:rgba(255,255,255,.18)
}
.edu-big-icon::after{
    content:'';
    position:absolute;
    inset:-10px;
    border-radius:32px;
    border:1.5px dashed rgba(255,255,255,.08);
    animation:edu-spin 25s linear infinite
}
.edu-big-icon::before{
    content:'';
    position:absolute;
    inset:-20px;
    border-radius:38px;
    border:1px dotted rgba(43,162,238,.08);
    animation:edu-spin 40s linear infinite reverse
}
@keyframes edu-spin{to{transform:rotate(360deg)}}

/* Small orbiting dots */
.edu-orbit-dot{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    animation:edu-spin 12s linear infinite
}
.edu-orbit-dot-1{
    top:-6px;right:50%;
    background:#2BA2EE;
    box-shadow:0 0 8px rgba(43,162,238,.4);
    animation-duration:10s
}
.edu-orbit-dot-2{
    bottom:-4px;left:30%;
    background:#E61F37;
    box-shadow:0 0 8px rgba(230,31,55,.4);
    animation-duration:14s;
    animation-direction:reverse
}
/* ══════ Responsive ══════ */
@media(max-width:768px){
    .edu-body{
        grid-template-columns:1fr;
        padding:24px 20px 22px;
        text-align:center
    }
    .edu-info-row{
        flex-direction:column;
        align-items:stretch
    }
    .edu-info-card{justify-content:center}
    .edu-icon-block{display:none}
    .edu-cta-row{justify-content:center}
    .edu-top-strip{
        flex-wrap:wrap;
        gap:8px;
        padding:10px 16px
    }
    .edu-deco-1,.edu-deco-3,.edu-deco-4{display:none}
    .edu-completed-item{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
    .edu-info-card{
        padding:13px 16px;
        min-width:auto
    }
    .edu-cta-btn{
        padding:12px 24px;
        font-size:.88rem;
        width:100%;
        justify-content:center
    }
    .edu-cta-hint{
        width:100%;
        justify-content:center
    }
    .edu-info-icon{width:42px;height:42px}
}