
.edu-banner-wrap{
    direction:rtl;
    position:relative
}


.edu-banner{
    background:linear-gradient(135deg,#002A63 0%,#003d7a 30%,#005392 60%,#1a7abf 100%);
    border-radius:20px;
    padding:0;
    overflow:hidden;
    position:relative;
    box-shadow:0 12px 40px rgba(0,42,99,.22),0 2px 8px rgba(0,42,99,.1)
}


.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)}
}


.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:14px;
    font-weight:600;letter-spacing:.2px
}

.edu-running-courses{
    display:flex;gap:6px;
    flex-wrap:wrap;align-items:center
}
.edu-cat-label{
    color:rgba(255,255,255,.9);
    font-size:14px;font-weight:700;
    margin-right:4px
}
.edu-cat-sep{
    width:1.5px;height:18px;
    background:rgba(255,255,255,.3);
    margin:0 8px;flex-shrink:0;
    border-radius:1px
}
.edu-course-badge{
    background:rgba(255,255,255,.18);
    color:#fff;padding:3px 12px;
    border-radius:20px;font-size:11px;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)
}


.edu-body{
    display:grid;
    grid-template-columns:1fr auto;
    gap:28px;padding:34px 38px 30px;
    position:relative;z-index:2;align-items:center
}

.edu-content{
    display:flex;flex-direction:column;gap:18px
}

.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:200px;
    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:nth-child(1)::before{background:#2BA2EE}
.edu-info-card:nth-child(2)::before{background:#10B981}
.edu-info-card:nth-child(3)::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-online{background:rgba(43,162,238,.2);color:#fff}
.edu-info-icon.edu-loc{background:rgba(16,185,129,.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}


.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}
}


.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)}}

.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
}


@media(max-width:768px){
    .edu-body{
        grid-template-columns:1fr;
        padding:24px 20px 22px;text-align:center
    }
    .edu-banner-wrap{
    max-width:100%;
}
    .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-cat-sep{
        width:100%;height:1px;margin:4px 0
    }
    .edu-deco-1,.edu-deco-3,.edu-deco-4{display:none}
}
@media(max-width:480px){
    .edu-banner-wrap{
    max-width:100%;
}
    .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}
}
