/*==================================================
MB Academy
Professional UI v1.0
===============================================*/

:root{

--primary:#00C853;
--primary-dark:#00a844;
--secondary:#1f2937;

--white:#ffffff;
--light:#f8fafc;
--border:#e5e7eb;

--text:#202124;
--text-light:#666;

--shadow:
0 10px 35px rgba(0,0,0,.08);

--shadow-hover:
0 18px 45px rgba(0,200,83,.20);

--radius:20px;

--transition:.35s;

}

/*============================
Dark Mode
============================*/

body.dark-mode{

--white:#102418;
--light:#08140A;

--border:#1f4b2b;

--text:#ffffff;
--text-light:#c9d5cd;

background:#08140A;

color:#fff;

}

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

*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}

html{

overflow-x:hidden;

}

body{

font-family:'Cairo',sans-serif;

background:var(--light);

color:var(--text);

overflow-x:hidden;

transition:.4s;

}

/*============================
Scrollbar
============================*/

::-webkit-scrollbar{

width:11px;

}

::-webkit-scrollbar-track{

background:#e8e8e8;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#00a844;

}

/*============================
Selection
============================*/

::selection{

background:var(--primary);

color:#fff;

}

/*============================
Links
============================*/

a{

text-decoration:none;

transition:.3s;

}

img{

max-width:100%;

display:block;

}

/*============================
Container
============================*/

.container{

position:relative;

z-index:2;

}

/*============================
Animated Background
============================*/

.animated-background{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

overflow:hidden;

z-index:-2;

pointer-events:none;

}

.animated-background span{

position:absolute;

font-size:30px;

font-weight:700;

color:rgba(0,200,83,.09);

animation:floatCode 25s linear infinite;

user-select:none;

}

.animated-background span:nth-child(1){

left:5%;

top:90%;

animation-duration:18s;

}

.animated-background span:nth-child(2){

left:15%;

top:80%;

animation-duration:21s;

}

.animated-background span:nth-child(3){

left:28%;

top:95%;

animation-duration:24s;

}

.animated-background span:nth-child(4){

left:40%;

top:88%;

animation-duration:17s;

}

.animated-background span:nth-child(5){

left:53%;

top:92%;

animation-duration:26s;

}

.animated-background span:nth-child(6){

left:65%;

top:86%;

animation-duration:19s;

}

.animated-background span:nth-child(7){

left:75%;

top:93%;

animation-duration:23s;

}

.animated-background span:nth-child(8){

left:86%;

top:84%;

animation-duration:20s;

}

.animated-background span:nth-child(9){

left:10%;

top:70%;

animation-duration:22s;

}

.animated-background span:nth-child(10){

left:92%;

top:75%;

animation-duration:18s;

}

.animated-background span:nth-child(11){

left:55%;

top:78%;

animation-duration:20s;

}

.animated-background span:nth-child(12){

left:33%;

top:73%;

animation-duration:17s;

}

.animated-background span:nth-child(13){

left:70%;

top:68%;

animation-duration:27s;

}

@keyframes floatCode{

0%{

transform:translateY(0) rotate(0deg);

opacity:0;

}

15%{

opacity:1;

}

85%{

opacity:1;

}

100%{

transform:translateY(-120vh) rotate(360deg);

opacity:0;

}

}

/*============================
Loader
============================*/

#loader{

    position:fixed;

    inset:0;

    background:#07190c;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:.7s ease;

}

body.dark-mode #loader{

    background:#07190c;

}

.loader-hide{

    opacity:0;

    visibility:hidden;

}

.loader-content{

    text-align:center;

    animation:fadeIn .8s ease;

}

.loader-logo{

    width:190px;

    height:190px;

    object-fit:contain;

    margin:auto;

    animation:logoFloat 2.5s ease-in-out infinite;

    filter:drop-shadow(0 0 18px rgba(0,255,136,.35));

}

.loader-content h2{

    margin-top:25px;

    font-size:56px;

    font-weight:900;

    color:#00ff88;

    letter-spacing:1px;

    margin-bottom:8px;

}

.loader-content p{

    font-size:24px;

    color:#ffffff;

    font-weight:500;

    letter-spacing:3px;

    margin-bottom:35px;

}

.loader-bar{

    width:340px;

    height:10px;

    background:rgba(255,255,255,.15);

    border-radius:50px;

    overflow:hidden;

    margin:auto;

}

.loader-bar span{

    display:block;

    height:100%;

    width:0;

    border-radius:50px;

    background:linear-gradient(90deg,#00C853,#00ff88,#7CFFCB);

    animation:loading 2s linear forwards;

}

@keyframes loading{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes logoFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}




/*============================
Header
============================*/

.main-header{

position:sticky;

top:0;

z-index:5000;

background:rgba(255,255,255,.92);

backdrop-filter:blur(14px);

box-shadow:0 8px 30px rgba(0,0,0,.05);

transition:.35s;

}

body.dark-mode .main-header{

background:rgba(8,20,10,.92);

}

.header-scrolled{

box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.header-wrapper{

display:flex;

align-items:center;

justify-content:space-between;

padding:14px 0;

gap:20px;

}

.brand-area{

display:flex;

align-items:center;

gap:15px;

color:inherit;

}
.site-logo{

    width:180px;

    height:80px;

    object-fit:contain;

    transition:.4s;

}
.site-logo:hover{

transform:rotate(-8deg) scale(1.08);

}

.brand-title{

font-size:28px;

font-weight:800;

color:var(--primary);

line-height:1.1;

}

.brand-subtitle{

font-size:14px;

color:var(--text-light);

margin-top:4px;

}

.header-actions{

display:flex;

align-items:center;

gap:12px;

flex-wrap:wrap;

}

.header-btn{

border-radius:50px;

padding:10px 22px;

font-weight:700;

transition:.35s;

}

.header-btn:hover{

transform:translateY(-4px);

box-shadow:var(--shadow-hover);

}

.header-icon{

width:46px;

height:46px;

border:none;

border-radius:50%;

background:#fff;

box-shadow:var(--shadow);

font-size:18px;

cursor:pointer;

transition:.35s;

}

body.dark-mode .header-icon{

background:#143820;

color:#fff;

}

.header-icon:hover{

background:var(--primary);

color:#fff;

transform:rotate(10deg) scale(1.06);

}

.welcome-user{

font-weight:700;

color:var(--primary);

padding-inline:10px;

}

.language-switch{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-width:72px;
    height:44px;

    padding:0 16px;

    border-radius:50px;

    background:linear-gradient(135deg,#00b894,#00d26a);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    font-size:15px;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.language-switch:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(0,0,0,.25);

}

.language-switch span{

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

}

/*============================
Back + Home Buttons
============================*/

.page-buttons{
    position:fixed;
    left:25px;
    bottom:95px;
    display:flex;
    gap:10px;
    z-index:4000;
}

.home-button,
.back-button{

    display:flex;
    align-items:center;
    gap:8px;

    border:none;

    padding:14px 20px;

    border-radius:50px;

    color:#fff;

    font-weight:700;

    text-decoration:none;

    cursor:pointer;

    box-shadow:var(--shadow);

    transition:.35s;
}

.home-button{

    background:#198754;

}

.back-button{

    background:var(--primary);

}

.home-button:hover,
.back-button:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-hover);

    color:#fff;

}

/*============================
Scroll Top
============================*/

#scrollTopBtn{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:22px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:4000;

box-shadow:var(--shadow);

}

#scrollTopBtn:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-hover);

}

.show-top{

opacity:1!important;

visibility:visible!important;

}


/*============================
Hero
============================*/

.hero-section{

padding:90px 0;

position:relative;

overflow:hidden;

}

.hero-badge{

display:inline-block;

padding:10px 22px;

background:rgba(0,200,83,.12);

color:var(--primary);

border-radius:50px;

font-weight:700;

margin-bottom:18px;

}

.hero-title{

font-size:68px;

font-weight:900;

line-height:1.05;

margin-bottom:15px;

}

.hero-subtitle{

font-size:28px;

font-weight:700;

color:var(--primary);

margin-bottom:25px;

}

.hero-description{

font-size:20px;

line-height:2;

color:var(--text-light);

max-width:720px;

}

.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:35px;

}

.hero-buttons .btn{

padding:14px 34px;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.hero-buttons .btn:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-hover);

}

/*============================
Glass Photo
============================*/

.glass-photo{

background:rgba(255,255,255,.25);

border:1px solid rgba(255,255,255,.4);

backdrop-filter:blur(18px);

border-radius:30px;

padding:22px;

box-shadow:0 20px 60px rgba(0,0,0,.12);

position:relative;

overflow:hidden;

transition:.4s;

}

body.dark-mode .glass-photo{

background:rgba(20,56,32,.45);

}

.glass-photo:hover{

transform:translateY(-10px);

}

.hero-image{

width:100%;

border-radius:22px;

}

.experience-box{

position:absolute;

bottom:35px;

left:35px;

background:var(--primary);

color:#fff;

padding:18px 24px;

border-radius:18px;

font-size:24px;

font-weight:800;

box-shadow:0 12px 35px rgba(0,200,83,.35);

animation:floatBox 3s ease-in-out infinite;

}

@keyframes floatBox{

50%{

transform:translateY(-10px);

}

}
/*============================
Sections
============================*/

section{

padding:90px 0;

position:relative;

}

.section-header{

margin-bottom:60px;

}

.section-badge{

display:inline-block;

padding:10px 24px;

border-radius:50px;

background:rgba(0,200,83,.12);

color:var(--primary);

font-weight:700;

margin-bottom:18px;

}

.section-title{

font-size:46px;

font-weight:900;

margin-bottom:18px;

color:var(--text);

}

.section-description{

font-size:20px;

color:var(--text-light);

max-width:760px;

margin:auto;

line-height:2;

}

/*============================
Reveal Animation
============================*/

.reveal{

opacity:0;

transform:translateY(70px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/*============================
Statistics
============================*/

.statistics-section{

padding-top:40px;

}

.counter-card{

background:var(--white);

border-radius:25px;

padding:40px 20px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

border:1px solid var(--border);

height:100%;

}

body.dark-mode .counter-card{

background:#102418;

}

.counter-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow-hover);

}

.counter-card h2{

font-size:52px;

font-weight:900;

color:var(--primary);

margin-bottom:12px;

}

.counter-card p{

font-size:20px;

font-weight:700;

margin:0;

}

/*============================
Stage Cards
============================*/

.stages-section{

position:relative;

}

.stage-card{

background:rgba(255,255,255,.70);

backdrop-filter:blur(18px);

border-radius:28px;

padding:35px 25px;

text-align:center;

box-shadow:var(--shadow);

transition:.4s;

height:100%;

border:1px solid rgba(255,255,255,.45);

overflow:hidden;

position:relative;

}

body.dark-mode .stage-card{

background:#102418;

border:1px solid #1e4f2c;

}

.stage-card::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

background:linear-gradient(90deg,
transparent,
rgba(255,255,255,.25),
transparent);

transition:.8s;

}

.stage-card:hover::before{

left:120%;

}

.stage-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow-hover);

}

.stage-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

background:rgba(0,200,83,.12);

}

.stage-card h3{

font-size:23px;

font-weight:800;

margin-bottom:15px;
line-height:1.3;

}

.course-title-small{
    font-size:20px !important;
}

.stage-card p{

color:var(--text-light);

line-height:1.9;

min-height:60px;

margin-bottom:25px;

}

.stage-card .btn{

border-radius:50px;

padding:12px 30px;

font-weight:700;

transition:.35s;

}

.stage-card .btn:hover{

transform:scale(1.06);

}

/*============================
Hover Glow
============================*/

.stage-card:hover .stage-icon{

animation:rotateIcon .8s;

}

@keyframes rotateIcon{

0%{

transform:rotate(0);

}

50%{

transform:rotate(12deg) scale(1.12);

}

100%{

transform:rotate(0);

}

}
/*============================
Latest Courses
============================*/

.latest-courses{

position:relative;

overflow:hidden;

}

.courses-slider{

overflow:hidden;

position:relative;

}

.courses-track{

display:flex;

gap:30px;

width:max-content;

animation:courseSlider 40s linear infinite;

}

.courses-slider:hover .courses-track{

animation-play-state:paused;

}

.course-slide{

width:360px;

border-radius:28px;

overflow:hidden;

position:relative;

background:var(--white);

box-shadow:var(--shadow);

flex-shrink:0;

transition:.4s;

}

body.dark-mode .course-slide{

background:#102418;

}

.course-slide:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.course-image{

width:100%;

height:260px;

object-fit:cover;

transition:.6s;

}

.course-slide:hover .course-image{

transform:scale(1.08);

}

.course-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:22px;

background:linear-gradient(

to top,

rgba(0,0,0,.82),

rgba(0,0,0,.10)

);

color:#fff;

}

.course-overlay h4{

margin:0;

font-size:24px;

font-weight:800;

}

.empty-slider{

background:var(--white);

border-radius:24px;

padding:70px;

text-align:center;

box-shadow:var(--shadow);

}

body.dark-mode .empty-slider{

background:#102418;

}

@keyframes courseSlider{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

/*==================================
Premium Gallery
==================================*/

.gallery-section{
    position:relative;
}

.gallery-slider{


min-height:420px;
display:flex;
align-items:center;

    position:relative;

    overflow:hidden;

    border-radius:35px;

    padding:45px 0;

    background:linear-gradient(
        135deg,
        #d7d7d7,
        #f6f6f6,
        #c9c9c9,
        #ffffff,
        #d8d8d8
    );

    background-size:400% 400%;

    animation:silverBG 10s linear infinite;

    box-shadow:
        0 25px 70px rgba(0,0,0,.12);

    border:1px solid rgba(255,255,255,.8);

    backdrop-filter:blur(25px);

}

.gallery-slider::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.18),
    transparent 70%);

    z-index:0;

}

/*==========================
Background Logo
==========================*/

.gallery-bg-logo{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    pointer-events:none;

    z-index:1;

}

.gallery-bg-logo img{

  width:700px;
    max-width:70%;

    opacity:.22;

    animation:logoFloat 7s ease-in-out infinite;

    filter:

        drop-shadow(0 0 30px rgba(255,255,255,.7));

}

/*==========================
Silver Shine
==========================*/

.gallery-shine{

    position:absolute;

    left:-40%;

    top:0;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transform:skewX(-25deg);

    animation:shineMove 5s linear infinite;

    z-index:2;

}

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

.gallery-track{

    display:flex;

    align-items:center;

    gap:28px;

    width:max-content;

    position:relative;

    z-index:3;

    will-change:transform;

}

/*==========================
Cards
==========================*/

.gallery-card{

    width:320px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:28px;

    background:rgba(255,255,255,.30);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.55);

    transition:.35s;

    box-shadow:

        0 15px 40px rgba(0,0,0,.12);

}

.gallery-card:hover{

    transform:

        translateY(-10px)

        scale(1.03);

}

.gallery-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.45s;

}

.gallery-card:hover img{

    transform:scale(1.08);

}

.gallery-info{

    padding:18px;

    text-align:center;

}

.gallery-info h5{

    margin:0;

    font-size:21px;

    font-weight:800;

}

/*==========================
Animations
==========================*/

@keyframes silverBG{

0%{

background-position:0% 50%;

}

100%{

background-position:100% 50%;

}

}

@keyframes shineMove{

0%{

left:-45%;

}

100%{

left:140%;

}

}

@keyframes logoFloat{

50%{

transform:translateY(-18px) scale(1.05);

}

}



/*=========================================================*
* MB ACADEMY
* WHY MB ACADEMY - TRUE CIRCULAR 3D CAROUSEL
*=========================================================*/

.why-section {
    position: relative;
    width: 100%;
    padding: 60px 0 100px;
    overflow: visible !important;
}

/*=========================================================*
* Carousel
*=========================================================*/

.why-carousel {
    position: relative;
    width: 100%;
    min-height: 480px;

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

    overflow: visible !important;
    perspective: 1600px;
}

/*=========================================================*
* Stage
*=========================================================*/

.why-carousel-stage {
    position: relative;

    width: 100%;
    height: 430px;

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

    transform-style: preserve-3d;
    perspective: 1600px;

    overflow: visible !important;
}

/*=========================================================*
* Carousel Cards - Desktop
*=========================================================*/

.why-carousel-card {
    position: absolute;

    width: 190px;
    height: 250px;

    top: 50%;
    left: 50%;

    margin-left: -95px;
    margin-top: -125px;

    transform-style: preserve-3d;
    transform-origin: center center;

    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        opacity .6s ease,
        filter .6s ease;

    will-change: transform;

    pointer-events: auto;
}

/*=========================================================*
* Glass Card
*=========================================================*/

.why-carousel-card .why-card {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 20px 14px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.035)
        );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(110,220,255,.35);

    box-shadow:
        0 18px 45px rgba(0,0,0,.38),
        0 0 22px rgba(0,200,255,.08),
        inset 0 1px 0 rgba(255,255,255,.25),
        inset 0 -1px 0 rgba(255,255,255,.05);

    overflow: hidden;

    transition:
        box-shadow .5s ease,
        border-color .5s ease,
        background .5s ease;
}

/*=========================================================*
* Glass Reflection
*=========================================================*/

.why-carousel-card .why-card::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.18),
            transparent 35%
        ),

        radial-gradient(
            circle at top center,
            rgba(100,230,255,.18),
            transparent 50%
        );

    opacity: .7;
}

/*=========================================================*
* Inner Glow
*=========================================================*/

.why-carousel-card .why-card::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    box-shadow:
        inset 0 0 45px rgba(80,220,255,.06);
}

/*=========================================================*
* Active Center Card
*=========================================================*/

.why-carousel-card.active .why-card {

    border-color:
        rgba(100,230,255,.90);

    background:
        linear-gradient(
            145deg,
            rgba(80,210,180,.20),
            rgba(20,80,65,.10)
        );

    box-shadow:

        0 22px 55px rgba(0,0,0,.50),

        0 0 22px rgba(0,255,190,.28),

        0 0 50px rgba(0,220,170,.14),

        inset 0 1px 0
        rgba(255,255,255,.35),

        inset 0 0 50px
        rgba(0,255,200,.08);
}

/*=========================================================*
* Icon
*=========================================================*/

.why-carousel-card .why-icon {

    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

    margin-bottom: 12px;

    font-size: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(0,200,180,.10);

    border:
        1px solid
        rgba(100,230,220,.25);

    box-shadow:

        inset 0 0 16px
        rgba(100,230,220,.10),

        0 0 16px
        rgba(0,220,200,.08);
}

/*=========================================================*
* Icon Image
*=========================================================*/

.why-carousel-card .why-icon img {

    width: 48px !important;
    height: 48px !important;

    object-fit: contain;
}

/*=========================================================*
* Title
*=========================================================*/

.why-carousel-card .why-card h4 {

    position: relative;
    z-index: 2;

    margin: 0 0 8px;

    font-size: 17px;

    font-weight: 800;

    color: #8de4ff;

    line-height: 1.3;
}

/*=========================================================*
* Description
*=========================================================*/

.why-carousel-card .why-card p {

    position: relative;
    z-index: 2;

    margin: 0;

    width: 92%;

    color:
        rgba(255,255,255,.72);

    font-size: 11px;

    line-height: 1.5;
}

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

.why-carousel-btn {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(100,230,220,.50);

    background:
        rgba(255,255,255,.06);

    backdrop-filter: blur(15px);

    color: #fff;

    font-size: 17px;

    cursor: pointer;

    z-index: 100;

    transition: .35s;

    box-shadow:
        0 0 18px
        rgba(0,220,200,.10);
}

.why-carousel-prev {
    left: 3%;
}

.why-carousel-next {
    right: 3%;
}

.why-carousel-btn:hover {

    background:
        #00d26a;

    color:
        #06110b;

    transform:
        translateY(-50%)
        scale(1.1);

    box-shadow:
        0 0 28px
        rgba(0,210,106,.40);
}

/*=========================================================*
* Dots
*=========================================================*/

.why-carousel-dots {

    position: absolute;

    bottom: 5px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    z-index: 100;
}

.why-dot {

    width: 7px;
    height: 7px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        rgba(255,255,255,.25);

    cursor: pointer;

    transition: .35s;
}

.why-dot.active {

    width: 21px;

    border-radius: 20px;

    background:
        #00dca0;

    box-shadow:
        0 0 12px
        rgba(0,220,160,.75);
}

/*=========================================================*
* Tablet
*=========================================================*/

@media (max-width: 992px) {

    .why-carousel {

        min-height:
            450px;
    }

    .why-carousel-stage {

        height:
            390px;
    }

    .why-carousel-card {

        width:
            170px;

        height:
            225px;

        margin-left:
            -85px;

        margin-top:
            -112.5px;
    }

    .why-carousel-card .why-card {

        padding:
            18px 12px;
    }

    .why-carousel-card .why-icon {

        width:
            54px;

        height:
            54px;

        font-size:
            26px;

        margin-bottom:
            10px;
    }

    .why-carousel-card .why-icon img {

        width:
            45px !important;

        height:
            45px !important;
    }

    .why-carousel-card .why-card h4 {

        font-size:
            15px;
    }

    .why-carousel-card .why-card p {

        font-size:
            10px;
    }

    .why-carousel-btn {

        width:
            40px;

        height:
            40px;
    }

    .why-carousel-prev {
        left: 10px;
    }

    .why-carousel-next {
        right: 10px;
    }
}

/*=========================================================*
* Mobile
*=========================================================*/

@media (max-width: 768px) {

    .why-section {

        padding:
            50px 0 80px;
    }

    .why-carousel {

        min-height:
            410px;
    }

    .why-carousel-stage {

        height:
            350px;
    }

    .why-carousel-card {

        width:
            150px;

        height:
            200px;

        margin-left:
            -75px;

        margin-top:
            -100px;
    }

    .why-carousel-card .why-card {

        padding:
            15px 10px;

        border-radius:
            20px;
    }

    .why-carousel-card .why-icon {

        width:
            50px;

        height:
            50px;

        font-size:
            23px;

        margin-bottom:
            8px;
    }

    .why-carousel-card .why-icon img {

        width:
            41px !important;

        height:
            41px !important;
    }

    .why-carousel-card .why-card h4 {

        font-size:
            13px;

        margin-bottom:
            6px;
    }

    .why-carousel-card .why-card p {

        font-size:
            9px;

        line-height:
            1.4;
    }

    .why-carousel-btn {

        width:
            36px;

        height:
            36px;

        font-size:
            14px;
    }

    .why-carousel-prev {
        left: 5px;
    }

    .why-carousel-next {
        right: 5px;
    }
}

/*=========================================================*
* Small Mobile
*=========================================================*/

@media (max-width: 480px) {

    .why-carousel {

        min-height:
            370px;
    }

    .why-carousel-stage {

        height:
            320px;
    }

    .why-carousel-card {

        width:
            135px;

        height:
            180px;

        margin-left:
            -67.5px;

        margin-top:
            -90px;
    }

    .why-carousel-card .why-card {

        padding:
            12px 8px;

        border-radius:
            18px;
    }

    .why-carousel-card .why-icon {

        width:
            44px;

        height:
            44px;

        font-size:
            20px;

        margin-bottom:
            7px;
    }

    .why-carousel-card .why-icon img {

        width:
            36px !important;

        height:
            36px !important;
    }

    .why-carousel-card .why-card h4 {

        font-size:
            12px;
    }

    .why-carousel-card .why-card p {

        font-size:
            8px;

        line-height:
            1.35;
    }

    .why-carousel-btn {

        width:
            33px;

        height:
            33px;

        font-size:
            13px;
    }
}

/*============================*
* Locations
*============================*/

.locations-section {
    position: relative;
}

.location-card {

    background:
        var(--white);

    border-radius:
        28px;

    padding:
        35px;

    box-shadow:
        var(--shadow);

    height:
        100%;

    transition:
        .35s;

    border:
        1px solid
        var(--border);
}

body.dark-mode .location-card {

    background:
        #102418;

    border-color:
        #1f4b2b;
}

.location-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        var(--shadow-hover);
}

.location-card h4 {

    font-size:
        28px;

    font-weight:
        800;

    margin-bottom:
        18px;

    color:
        var(--primary);
}

.location-card p {

    font-size:
        18px;

    line-height:
        2;

    color:
        var(--text-light);

    margin:
        0;
}

.map-box {

    margin-top:
        25px;

    height:
        420px;

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            #eafdf0,
            #d9ffe8
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    font-size:
        24px;

    font-weight:
        700;

    box-shadow:
        var(--shadow);

    overflow:
        hidden;
}

body.dark-mode .map-box {

    background:
        #143820;
}


/*============================
Contact
============================*/

.contact-card{

background:rgba(255,255,255,.82);

backdrop-filter:blur(18px);

border-radius:28px;

padding:35px 20px;

text-align:center;

height:100%;

box-shadow:var(--shadow);

transition:.35s;

border:1px solid rgba(255,255,255,.45);

}

body.dark-mode .contact-card{

background:#102418;

border-color:#1f4b2b;

}

.contact-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.contact-card i{

font-size:48px;

color:var(--primary);

margin-bottom:20px;

transition:.35s;

}

.contact-card:hover i{

transform:scale(1.15) rotate(8deg);

}

.contact-card h5{

font-size:24px;

font-weight:800;

margin-bottom:15px;

}

.contact-card p{

margin:0;

font-size:18px;

color:var(--text-light);

word-break:break-word;

}

/*============================
Footer
============================*/

.footer{

position:relative;

overflow:hidden;

padding:90px 0 35px;

margin-top:80px;

background:linear-gradient(135deg,#041108,#082012,#0B2A18);

border-top:2px solid rgba(0,200,83,.25);

color:#fff;

}

/* حتى لو Light Mode يفضل Dark */

body.dark-mode .footer{

background:linear-gradient(135deg,#041108,#082012,#0B2A18);

border-top:2px solid rgba(0,200,83,.25);

}

.footer-animation{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:0;

}

.footer-animation span{

position:absolute;

font-size:34px;

font-weight:900;

color:rgba(255,255,255,.05);

animation:footerFloat 24s linear infinite;

}

.footer-animation span:nth-child(1){left:4%;top:90%;animation-duration:20s;}
.footer-animation span:nth-child(2){left:16%;top:84%;animation-duration:23s;}
.footer-animation span:nth-child(3){left:28%;top:92%;animation-duration:18s;}
.footer-animation span:nth-child(4){left:42%;top:87%;animation-duration:25s;}
.footer-animation span:nth-child(5){left:56%;top:93%;animation-duration:22s;}
.footer-animation span:nth-child(6){left:68%;top:82%;animation-duration:19s;}
.footer-animation span:nth-child(7){left:81%;top:90%;animation-duration:24s;}
.footer-animation span:nth-child(8){left:93%;top:86%;animation-duration:21s;}

@keyframes footerFloat{

0%{

transform:translateY(0) rotate(0);

opacity:0;

}

15%{

opacity:1;

}

85%{

opacity:1;

}

100%{

transform:translateY(-120vh) rotate(360deg);

opacity:0;

}

}

.footer .container{

position:relative;

z-index:2;

}

.footer-title{

font-size:34px;

font-weight:900;

color:#00D26A;

margin-bottom:20px;

}

.footer-heading{

font-size:24px;

font-weight:800;

margin-bottom:22px;

color:#fff;

}

.footer-text{

line-height:2;

font-size:17px;

color:#d9d9d9;

}

.contact-item{

display:flex;

align-items:center;

gap:14px;

margin-bottom:18px;

font-size:17px;

color:#e8e8e8;

}

.contact-item a{

color:#e8e8e8;

text-decoration:none;

transition:.3s;

}

.contact-item a:hover{

color:#00D26A;

}

.contact-item i{

color:#00D26A;

font-size:22px;

width:26px;

text-align:center;

}

.location-box{

padding:15px 18px;

margin-bottom:15px;

border-radius:16px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.location-box:hover{

transform:translateY(-5px);

border-color:#00D26A;

background:rgba(0,210,106,.12);

}

.footer-line{

margin:45px 0 25px;

border-color:rgba(255,255,255,.08);

}

.footer-bottom{

text-align:center;

font-size:16px;

line-height:2;

color:#cfcfcf;

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

@media (max-width:1200px){

.hero-title{

font-size:58px;

}

.container{

padding-inline:20px;

}

}

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

@media (max-width:992px){

.header-wrapper{

flex-direction:column;

gap:20px;

text-align:center;

}

.header-actions{

justify-content:center;

flex-wrap:wrap;

gap:10px;

}

.hero-content{

text-align:center;

}

.hero-title{

font-size:48px;

}

.hero-subtitle{

font-size:22px;

}

.hero-description{

max-width:100%;

}

.hero-buttons{

justify-content:center;

}

.glass-photo{

margin:40px auto;

max-width:420px;

}

.section-title{

font-size:38px;

}

.counter-card,

.why-card,

.contact-card{

margin-bottom:20px;

}

.footer .row>div{

margin-bottom:35px;

text-align:center;

}

.contact-item{

justify-content:center;

}

.location-box{

text-align:right;

}

}

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

@media (max-width:768px){

section{

padding:70px 0;

}

.hero{

padding-top:120px;

}

.hero-title{

font-size:38px;

line-height:1.4;

}

.hero-subtitle{

font-size:20px;

}

.hero-description{

font-size:17px;

}

.brand-title{

font-size:24px;

}

.brand-subtitle{

display:none;

}

.site-logo{

width:60px;

height:60px;

}

.header-btn{

padding:10px 18px;

font-size:14px;

}

.course-slide{

width:300px;

}

.gallery-card{

width:280px;

}

.gallery-track{

gap:20px;

}

.contact-card{

padding:25px;

}

.footer-title{

font-size:28px;

}

.footer-heading{

font-size:22px;

}

.back-button{

left:15px;

bottom:85px;

padding:12px 16px;

}

#scrollTopBtn{

right:15px;

bottom:20px;

width:50px;

height:50px;

}

}

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

@media (max-width:576px){

.hero-title{

font-size:32px;

}

.hero-subtitle{

font-size:18px;

}

.section-title{

font-size:28px;

}

.hero-buttons{

flex-direction:column;

gap:15px;

}

.hero-buttons .btn{

width:100%;

}

.header-btn{

width:100%;

}

.header-actions{

width:100%;

}

.header-icon{

width:45px;

height:45px;

}

.counter-card h2{

font-size:40px;

}

.counter-card p{

font-size:15px;

}

.contact-card{

padding:22px;

}

.gallery-card{

width:240px;

}

.course-slide{

width:250px;

}

.footer{

padding:70px 0 25px;

}

.experience-box{

left:15px;

bottom:15px;

font-size:16px;

padding:14px 18px;

}

}

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

@media (max-width:400px){

.hero-title{

font-size:28px;

}

.section-title{

font-size:24px;

}

.brand-title{

font-size:20px;

}

.site-logo{

width:50px;

height:50px;

}

.footer-title{

font-size:24px;

}

.footer-heading{

font-size:20px;

}

.contact-item{

font-size:15px;

}

}
/*==================================
Cursor Glow
==================================*/

.cursor-glow{

position:fixed;

width:26px;

height:26px;

border-radius:50%;

background:rgba(0,200,83,.18);

pointer-events:none;

transform:translate(-50%,-50%);

backdrop-filter:blur(6px);

z-index:999999;

transition:

left .05s linear,

top .05s linear,

transform .2s;

}

body:hover .cursor-glow{

transform:translate(-50%,-50%) scale(1);

}

/*==================================
Ripple
==================================*/

.btn{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

background:rgba(255,255,255,.45);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/*==================================
Smooth Images
==================================*/

img{

transition:.45s;

}

img:hover{

filter:brightness(1.05);

}

/* ================================
Emergency Fix - Restore Layout
================================ */

.main-header .container-fluid{
    max-width:1400px;
    margin:auto;
}

.header-wrapper{
    flex-direction:row;
}



.brand-title{
    font-size:28px;
}

.header-actions{
    flex-direction:row;
}

.hero-section{
    min-height:auto;
}

.hero-title{
    font-size:48px;
}

.hero-description{
    max-width:600px;
}

img{
    max-width:100%;
    height:auto;
}

@media(max-width:992px){

.header-wrapper{
    flex-direction:column;
}

.header-actions{
    justify-content:center;
}

}

/* ==========================
Course Colors
========================== */

.python-card{
    border-top:6px solid #3776AB;
}

.python-card .btn{
    background:#3776AB;
    border-color:#3776AB;
}

.python-card .btn:hover{
    background:#2f6590;
    border-color:#2f6590;
}

.scratch-card{
    border-top:6px solid #FFAB19;
}

.scratch-card .btn{
    background:#FFAB19;
    border-color:#FFAB19;
    color:#222;
}


.web-card{
    border-top:6px solid #E44D26;
}

.web-card .btn{
    background:#E44D26;
    border-color:#E44D26;
}


.js-card{
    border-top:6px solid #F7DF1E;
}

.js-card .btn{
    background:#F7DF1E;
    border-color:#F7DF1E;
    color:#111;
}


.graphic-card{
    border-top:6px solid #FF0066;
}

.graphic-card .btn{
    background:#FF0066;
    border-color:#FF0066;
}


/*==============================
Footer Branches
==============================*/

.footer-branch-card{

    margin-bottom:18px;

}

.branch-info h6{

    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;

    font-size:17px;

    margin-bottom:8px;

}

.branch-icon{

    width:34px;

    height:34px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid rgba(255,255,255,.35);

    box-shadow:0 0 10px rgba(255,255,255,.15);

    flex-shrink:0;

}

.branch-info p{

    color:#cfcfcf;

    margin:0 0 10px 44px;

    font-size:14px;

}

.branch-map{

    margin-right:44px;

    color:#ffd54f;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.branch-map:hover{

    color:#fff;

    letter-spacing:.5px;

}

/*==============================
Footer Social Clock
==============================*/

.mb-social-clock{
    position:relative;
    width:220px;
    height:220px;
    margin:25px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mb-social-trigger{
    position:relative;
    z-index:10;
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#00C853;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    box-shadow:
        0 0 0 6px rgba(0,200,83,.15),
        0 10px 30px rgba(0,200,83,.35);
    transition:.35s;
}

.mb-social-trigger:hover{
    transform:scale(1.08) rotate(180deg);
}

.mb-social-list{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.mb-social-btn{
    position:absolute;
    top:50%;
    left:50%;
    width:52px;
    height:52px;
    margin:-26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    font-size:20px;
    opacity:0;
    pointer-events:none;
    transition:
        transform .5s ease,
        opacity .35s ease;
}

.mb-social-clock:hover .mb-social-btn{
    opacity:1;
    pointer-events:auto;
}

.mb-social-btn:nth-child(1){
    transform:translateY(-82px);
}

.mb-social-btn:nth-child(2){
    transform:translate(58px,-58px);
}

.mb-social-btn:nth-child(3){
    transform:translateX(82px);
}

.mb-social-btn:nth-child(4){
    transform:translate(58px,58px);
}

.mb-social-btn:nth-child(5){
    transform:translateY(82px);
}

.mb-social-btn:nth-child(6){
    transform:translate(-58px,58px);
}

.mb-social-btn:nth-child(7){
    transform:translateX(-82px);
}

.mb-social-btn:nth-child(8){
    transform:translate(-58px,-58px);
}

/*==============================
Social Colors
==============================*/

.mb-social-btn.facebook{
    background:#1877f2;
}

.mb-social-btn.instagram{
    background:#e4405f;
}

.mb-social-btn.whatsapp{
    background:#25d366;
}

.mb-social-btn.youtube{
    background:#ff0000;
}

.mb-social-btn.linkedin{
    background:#0a66c2;
}

.mb-social-btn.tiktok{
    background:#000;
}

.mb-social-btn.email{
    background:#555;
}

.mb-social-btn.phone{
    background:#198754;
}

/*==============================
Contact Footer
==============================*/

.footer-contact{
    text-align:center;
}

.footer-contact .footer-heading{
    text-align:center;
    margin-bottom:25px;
}

/*==============================
Mobile
==============================*/

@media(max-width:576px){

    .mb-social-clock{
        width:200px;
        height:200px;
    }

    .mb-social-btn{
        width:48px;
        height:48px;
        margin:-24px;
        font-size:18px;
    }

}

/* ==========================
Header Responsive Final
========================== */

.main-header .container-fluid{
    max-width:1400px;
    margin:auto;
}

@media (max-width:768px){

.header-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:auto;
    padding:15px 0;
    gap:15px;
}

.brand-area{
    flex-direction:column;
    text-align:center;
}

.site-logo{
    width:120px;
    height:auto;
    margin:0;
}

.brand-title{
    font-size:24px;
}

.brand-subtitle{
    display:none;
}

.header-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    width:100%;
}

.header-btn{
    width:auto;
    padding:10px 18px;
}

.header-icon{
    width:42px;
    height:42px;
}

}

/* =========================================================
   MB ACADEMY - LEARNING CENTERS SHOWCASE
   ========================================================= */

.centers-showcase {
    position: relative;
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
}

.centers-showcase .footer-heading {
    text-align: center;
    margin-bottom: 20px;
}


/* =========================
   Center Stage
   ========================= */

.center-stage {
    position: relative;
    width: 100%;
    min-height: 285px;
    overflow: hidden;
    border-radius: 28px;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 210, 106, 0.16),
            rgba(255, 255, 255, 0.035) 55%,
            rgba(255, 255, 255, 0.015)
        );

    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25),
        inset 0 0 40px rgba(255, 255, 255, 0.025);

    backdrop-filter: blur(12px);
}


/* =========================
   Slides
   ========================= */

.center-slide {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 18px;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(35px)
        scale(.94);

    transition:
        opacity .55s cubic-bezier(.4,0,.2,1),
        transform .55s cubic-bezier(.4,0,.2,1),
        visibility .55s;

    pointer-events: none;
}

.center-slide.active {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(0)
        scale(1);

    pointer-events: auto;
}


/* =========================
   Center Image
   ========================= */

.center-image-wrapper {
    width: 125px;
    height: 125px;

    border-radius: 50%;

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

    margin-bottom: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 210, 106, .25),
            rgba(255, 215, 0, .12)
        );

    border: 2px solid rgba(255, 255, 255, .25);

    box-shadow:
        0 0 0 8px rgba(255, 255, 255, .025),
        0 15px 35px rgba(0, 0, 0, .35);

    overflow: hidden;

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.center-slide.active .center-image-wrapper {
    animation: centerImageFloat 4s ease-in-out infinite;
}

.center-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

@keyframes centerImageFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

}


/* =========================
   Center Information
   ========================= */

.center-content {
    width: 100%;
    text-align: center;
}

.center-name {
    margin: 0 0 8px;

    color: #00D26A;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.3;
}

.center-address {
    margin: 0 auto 10px;

    max-width: 300px;

    color: #d9d9d9;

    font-size: 13px;
    line-height: 1.6;
}

.center-address i {
    color: #00D26A;
    margin-left: 4px;
    margin-right: 4px;
}


/* =========================
   Map Button
   ========================= */

.center-map {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 7px 14px;

    border-radius: 30px;

    color: #FFD54F;

    background: rgba(255, 213, 79, .08);

    border: 1px solid rgba(255, 213, 79, .25);

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.center-map:hover {
    transform: translateY(-3px);

    color: #111;

    background: #FFD54F;

    box-shadow:
        0 10px 25px rgba(255, 213, 79, .25);
}


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

.centers-navigation {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 15px;
}

.center-nav-btn {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .18);

    background: rgba(255, 255, 255, .07);

    color: #fff;

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

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.center-nav-btn:hover {
    transform: scale(1.12);

    background: #00D26A;

    color: #07140b;

    box-shadow:
        0 8px 25px rgba(0, 210, 106, .3);
}

.center-counter {
    min-width: 55px;

    text-align: center;

    color: #cfcfcf;

    font-size: 13px;
    font-weight: 700;
}

.center-counter #centerCurrent {
    color: #00D26A;
    font-size: 17px;
}


/* =========================
   Dots
   ========================= */

.center-dots {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 6px;

    margin-top: 12px;
}

.center-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .25);

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease,
        transform .3s ease;
}

.center-dot.active {
    width: 22px;

    border-radius: 10px;

    background: #00D26A;
}

.center-dot:hover {
    transform: scale(1.25);
}


/* =========================
   Mobile
   ========================= */

@media (max-width: 992px) {

    .centers-showcase {
        max-width: 420px;
    }

}

@media (max-width: 576px) {

    .centers-showcase {
        max-width: 100%;
    }

    .center-stage {
        min-height: 270px;
        border-radius: 24px;
    }

    .center-image-wrapper {
        width: 105px;
        height: 105px;
    }

    .center-name {
        font-size: 18px;
    }

    .center-address {
        font-size: 12px;
    }

}

.centers-navigation {
    direction: ltr;
}

/*==============================*
* MB Academy Premium 3D
*==============================*/

.footer-about {
    text-align: center;
    perspective: 1000px;
}

.about-3d-logo {

    display: inline-block;

    position: relative;

    margin: 0 auto 18px;

    direction: ltr;

    color: #f4f7fb;

    font-size: 32px;

    font-weight: 800;

    letter-spacing: 2px;

    transform-style: preserve-3d;

    transform-origin: center;

    text-align: center;

    cursor: default;

    text-shadow:
        1px 1px 0 #b8bec7,
        2px 2px 0 #8f969f,
        4px 4px 12px rgba(0, 0, 0, .45);

    animation: academyPremium3D 5s ease-in-out infinite;

    transition:
        transform .5s ease,
        text-shadow .5s ease;
}


/*==============================*
* 3D Depth
*==============================*/

.about-3d-logo::before,
.about-3d-logo::after {

    content: attr(data-text);

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    color: #d9dee5;

    pointer-events: none;

}


/* الخلفية الأولى */

.about-3d-logo::before {

    transform:
        translateZ(-4px)
        translateX(2px)
        translateY(2px);

    opacity: .35;

}


/* الخلفية الثانية */

.about-3d-logo::after {

    transform:
        translateZ(-8px)
        translateX(4px)
        translateY(4px);

    opacity: .18;

}


/*==============================*
* Premium 3D Movement
*==============================*/

@keyframes academyPremium3D {

    0% {

        transform:
            rotateX(0deg)
            rotateY(-8deg)
            translateZ(0)
            translateY(0);

    }

    20% {

        transform:
            rotateX(5deg)
            rotateY(5deg)
            translateZ(8px)
            translateY(-3px);

    }

    40% {

        transform:
            rotateX(0deg)
            rotateY(10deg)
            translateZ(16px)
            translateY(0);

    }

    60% {

        transform:
            rotateX(-5deg)
            rotateY(3deg)
            translateZ(8px)
            translateY(3px);

    }

    80% {

        transform:
            rotateX(3deg)
            rotateY(-6deg)
            translateZ(4px)
            translateY(0);

    }

    100% {

        transform:
            rotateX(0deg)
            rotateY(-8deg)
            translateZ(0)
            translateY(0);

    }

}


/*==============================*
* Mouse Hover
*==============================*/

.about-3d-logo:hover {

    animation-play-state: paused;

    transform:
        rotateX(8deg)
        rotateY(-12deg)
        translateZ(25px)
        scale(1.05);

    text-shadow:
        1px 1px 0 #c7ccd3,
        3px 3px 0 #9299a2,
        0 12px 25px rgba(0, 0, 0, .5);

}


/*==============================*
* About Description
*==============================*/

.footer-about .footer-text {

    text-align: center;

    margin-left: auto;

    margin-right: auto;

}


/*=========================================================*
* Hover Card Zoom
*=========================================================*/

.why-carousel-card:hover {
    z-index: 50 !important;
}

.why-carousel-card:hover .why-card {
    transform: scale(1.12);
    border-color: rgba(100,230,255,.85);

    box-shadow:
        0 25px 60px rgba(0,0,0,.55),
        0 0 35px rgba(0,220,200,.25),
        inset 0 0 40px rgba(0,255,200,.08);
}



/*=========================================================*
* WHY MB ACADEMY - LIGHT MODE TEXT
*=========================================================*/

body:not(.dark-mode) .why-carousel-card .why-card h4 {
    color: #087f5b !important;

}

body:not(.dark-mode) .why-carousel-card .why-card p {
    color: #263238 !important;
}

/* الكارت النشط */
body:not(.dark-mode) .why-carousel-card.active .why-card h4 {
    color: #056b4f !important;
}

body:not(.dark-mode) .why-carousel-card.active .why-card p {
    color: #263238 !important;
}

/* شكل الزجاج في الوضع الأبيض */
body:not(.dark-mode) .why-carousel-card .why-card {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.82),
            rgba(235,250,247,.62)
        );

    border-color:
        rgba(0,150,120,.28);

    box-shadow:
        0 20px 50px rgba(0,0,0,.12),
        0 0 25px rgba(0,180,150,.08),
        inset 0 1px 0 rgba(255,255,255,.90);
}

/* الكارت الموجود في المنتصف */
body:not(.dark-mode) .why-carousel-card.active .why-card {
    background:
        linear-gradient(
            145deg,
            rgba(220,255,245,.95),
            rgba(240,255,250,.82)
        );

    border-color:
        rgba(0,180,140,.65);

    box-shadow:
        0 25px 65px rgba(0,0,0,.18),
        0 0 30px rgba(0,190,150,.20),
        inset 0 1px 0 rgba(255,255,255,1);
}

/* الأيقونة */
body:not(.dark-mode) .why-carousel-card .why-icon {
    background:
        rgba(0,180,150,.08);

    border-color:
        rgba(0,150,130,.30);

    box-shadow:
        inset 0 0 18px rgba(0,180,150,.08),
        0 0 18px rgba(0,180,150,.06);
}



.footer-credit {
    margin-top: 200px;
}




/*=========================================================*
 * MB ACADEMY - LUXE COLOR THEME (ADDED ONLY)
 * Original CSS above is intentionally preserved.
 *=========================================================*/

body.theme-luxe{
    --primary:#0EA5A8;
    --primary-dark:#087F82;
    --secondary:#14213D;
    --border:#dce8e8;
    --text:#172033;
    --text-light:#5f6b7a;
    --shadow-hover:0 18px 45px rgba(14,165,168,.24);
}

body.dark-mode.theme-luxe{
    --white:#10252a;
    --light:#08171b;
    --border:#245057;
    --text:#f7fbfc;
    --text-light:#c9d8db;
    background:#08171b;
    color:#f7fbfc;
}

/* Main green surfaces -> Luxe teal */

body.theme-luxe #scrollTopBtn,
body.theme-luxe .back-button,
body.theme-luxe .experience-box{
    background:linear-gradient(135deg,#0EA5A8,#0B7F83) !important;
}

body.theme-luxe .announcement-label{
    background:#08666a !important;
}

body.theme-luxe .brand-title,
body.theme-luxe .welcome-user,
body.theme-luxe .hero-subtitle,
body.theme-luxe .hero-badge,
body.theme-luxe .section-badge{
    color:#0EA5A8 !important;
}

body.theme-luxe .hero-badge,
body.theme-luxe .section-badge{
    background:rgba(14,165,168,.12) !important;
}

body.theme-luxe .header-icon:hover{
    background:linear-gradient(135deg,#0EA5A8,#F5B942) !important;
}

body.theme-luxe .home-button{
    background:linear-gradient(135deg,#F5B942,#D99A1E) !important;
}

body.theme-luxe .language-switch{
    background:linear-gradient(135deg,#0EA5A8,#F5B942) !important;
}

body.theme-luxe .experience-box{
    box-shadow:0 12px 35px rgba(14,165,168,.32) !important;
}

body.theme-luxe .loader-content h2{
    color:#5FE4D2 !important;
}

body.theme-luxe .loader-bar span{
    background:linear-gradient(90deg,#0EA5A8,#5FE4D2,#F5B942) !important;
}

body.theme-luxe .loader-logo{
    filter:drop-shadow(0 0 18px rgba(14,165,168,.38));
}

body.theme-luxe .animated-background span{
    color:rgba(14,165,168,.09) !important;
}

body.dark-mode.theme-luxe .main-header{
    background:rgba(8,23,27,.94) !important;
}

body.dark-mode.theme-luxe .header-icon{
    background:#12353a !important;
}

body.dark-mode.theme-luxe .glass-photo{
    background:rgba(18,53,58,.46) !important;
}

body.dark-mode.theme-luxe .counter-card{
    background:#10252a !important;
}

/* Keep existing components, but make their accent follow the selected theme */
body.theme-luxe .btn-primary,
body.theme-luxe .btn-success,
body.theme-luxe .btn-outline-success:hover{
    background:linear-gradient(135deg,#0EA5A8,#087F82) !important;
    border-color:#0EA5A8 !important;
    color:#fff !important;
}

body.theme-luxe .btn-outline-success{
    color:#0EA5A8 !important;
    border-color:#0EA5A8 !important;
}

body.theme-luxe .btn-outline-success:hover{
    color:#fff !important;
}

body.theme-luxe .progress-bar,
body.theme-luxe .badge.bg-success{
    background:linear-gradient(135deg,#0EA5A8,#F5B942) !important;
}

/* AI circuit keeps its futuristic character while following the new palette */
body.theme-luxe .neural-line{
    stroke:rgba(14,165,168,.14) !important;
}

body.theme-luxe .ai-chip::before{
    background:radial-gradient(circle,rgba(14,165,168,.18),transparent 68%) !important;
}

body.theme-luxe .ai-chip-inner{
    border-color:rgba(14,165,168,.55) !important;
    background:linear-gradient(135deg,rgba(14,165,168,.05),rgba(245,185,66,.08)) !important;
    box-shadow:0 0 18px rgba(14,165,168,.16),0 0 45px rgba(245,185,66,.08),inset 0 0 25px rgba(14,165,168,.06) !important;
}

body.theme-luxe .ai-chip-text,
body.theme-luxe .ai-chip-brand{
    color:#B9FFF3 !important;
}

/* Small premium palette switcher */
#colorThemeBtn{
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#0EA5A8;
    box-shadow:var(--shadow);
    cursor:pointer;
    transition:.35s;
    position:relative;
}

#colorThemeBtn::after{
    content:"";
    position:absolute;
    right:2px;
    bottom:2px;
    width:11px;
    height:11px;
    border-radius:50%;
    background:linear-gradient(135deg,#0EA5A8 0 50%,#F5B942 50% 100%);
    border:2px solid #fff;
}

#colorThemeBtn:hover{
    transform:rotate(10deg) scale(1.06);
    box-shadow:0 14px 35px rgba(14,165,168,.22);
}

body.dark-mode #colorThemeBtn{
    background:#12353a;
    color:#F5B942;
}

body.dark-mode #colorThemeBtn::after{
    border-color:#12353a;
}

/* Make common accent icons/text use the active theme */
body.theme-luxe .text-success,
body.theme-luxe .icon-success,
body.theme-luxe [class*="text-success"]{
    color:#0EA5A8 !important;
}

body.theme-luxe [class*="border-success"]{
    border-color:#0EA5A8 !important;
}










/* =========================================================
   MB ACADEMY
   GLOBAL THEME COLORS FOR ALL CARDS
   ========================================================= */

/* =========================================================
   1. THEME VARIABLES
   ========================================================= */

body.theme-luxe{

    --card-bg:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--primary) 8%,
                var(--white) 92%
            ),
            var(--white)
        );

    --card-border:
        color-mix(
            in srgb,
            var(--primary) 22%,
            var(--border) 78%
        );

    --card-glow:
        color-mix(
            in srgb,
            var(--primary) 28%,
            transparent
        );

    --card-icon-bg:
        color-mix(
            in srgb,
            var(--primary) 12%,
            transparent
        );

    --card-button:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );
}


/* =========================================================
   2. ALL COMMON CARDS
   ========================================================= */

body.theme-luxe .stage-card,
body.theme-luxe .counter-card,
body.theme-luxe .why-card,
body.theme-luxe .contact-card,
body.theme-luxe .course-slide,
body.theme-luxe .empty-slider,
body.theme-luxe .gallery-card{

    background:var(--card-bg) !important;

    border-color:var(--card-border) !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.08),
        0 0 0 1px
        color-mix(
            in srgb,
            var(--primary) 5%,
            transparent
        ) !important;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease,
        background .4s ease;

}


/* =========================================================
   3. DARK MODE - ALL CARDS
   ========================================================= */

body.dark-mode.theme-luxe .stage-card,
body.dark-mode.theme-luxe .counter-card,
body.dark-mode.theme-luxe .why-card,
body.dark-mode.theme-luxe .contact-card,
body.dark-mode.theme-luxe .course-slide,
body.dark-mode.theme-luxe .empty-slider,
body.dark-mode.theme-luxe .gallery-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 13%,
                #08171b 87%
            ),

            color-mix(
                in srgb,
                var(--primary-dark) 16%,
                #061115 84%
            )
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 35%,
            #245057 65%
        ) !important;

    color:var(--text) !important;

    box-shadow:
        0 15px 40px rgba(0,0,0,.30),
        0 0 25px
        color-mix(
            in srgb,
            var(--primary) 8%,
            transparent
        ) !important;

}


/* =========================================================
   4. STAGE CARDS
   ========================================================= */

body.theme-luxe .stage-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 7%,
                #ffffff 93%
            ),

            #ffffff
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            #dce8e8 80%
        ) !important;

}


/* =========================================================
   5. STAGE CARD DARK
   ========================================================= */

body.dark-mode.theme-luxe .stage-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 15%,
                #10252a 85%
            ),

            #0b1b1f
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--primary) 38%,
            #245057 62%
        ) !important;

}


/* =========================================================
   6. STAGE ICON
   ========================================================= */

body.theme-luxe .stage-icon{

    background:
        color-mix(
            in srgb,
            var(--primary) 12%,
            transparent
        ) !important;

    color:var(--primary) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 18%,
            transparent
        );

    transition:
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}


body.theme-luxe .stage-card:hover .stage-icon{

    background:
        color-mix(
            in srgb,
            var(--primary) 20%,
            transparent
        ) !important;

    box-shadow:
        0 0 25px
        color-mix(
            in srgb,
            var(--primary) 22%,
            transparent
        );

}


/* =========================================================
   7. STAGE CARD TEXT
   ========================================================= */

body.theme-luxe .stage-card h3{

    color:var(--text) !important;

}


body.theme-luxe .stage-card p{

    color:var(--text-light) !important;

}


/* =========================================================
   8. ALL CARD BUTTONS
   ========================================================= */

body.theme-luxe .stage-card .btn,
body.theme-luxe .counter-card .btn,
body.theme-luxe .why-card .btn,
body.theme-luxe .contact-card .btn{

    background:
        var(--card-button) !important;

    border-color:
        var(--primary) !important;

    color:#ffffff !important;

    box-shadow:
        0 8px 20px
        color-mix(
            in srgb,
            var(--primary) 20%,
            transparent
        );

}


body.theme-luxe .stage-card .btn:hover,
body.theme-luxe .counter-card .btn:hover,
body.theme-luxe .why-card .btn:hover,
body.theme-luxe .contact-card .btn:hover{

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        ) !important;

    border-color:
        var(--primary) !important;

    transform:
        translateY(-3px)
        scale(1.03);

}


/* =========================================================
   9. COUNTER CARDS
   ========================================================= */

body.theme-luxe .counter-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 8%,
                #ffffff 92%
            ),

            #ffffff
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            #dce8e8 80%
        ) !important;

}


body.theme-luxe .counter-card h2{

    color:
        var(--primary) !important;

}


body.theme-luxe .counter-card p{

    color:
        var(--text-light) !important;

}


body.dark-mode.theme-luxe .counter-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 16%,
                #10252a 84%
            ),

            #0b1b1f
        ) !important;

}


/* =========================================================
   10. WHY CARDS
   ========================================================= */

body.theme-luxe .why-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 7%,
                #ffffff 93%
            ),

            #ffffff
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            #dce8e8 80%
        ) !important;

}


body.theme-luxe .why-icon{

    color:
        var(--primary) !important;

    background:
        color-mix(
            in srgb,
            var(--primary) 12%,
            transparent
        ) !important;

}


body.theme-luxe .why-card h4{

    color:
        var(--text) !important;

}


body.theme-luxe .why-card p{

    color:
        var(--text-light) !important;

}


body.dark-mode.theme-luxe .why-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 15%,
                #10252a 85%
            ),

            #0b1b1f
        ) !important;

}


/* =========================================================
   11. CONTACT CARDS
   ========================================================= */

body.theme-luxe .contact-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 7%,
                #ffffff 93%
            ),

            #ffffff
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            #dce8e8 80%
        ) !important;

}


body.theme-luxe .contact-card i{

    color:
        var(--primary) !important;

}


body.theme-luxe .contact-card h5{

    color:
        var(--text) !important;

}


body.theme-luxe .contact-card p{

    color:
        var(--text-light) !important;

}


body.theme-luxe .contact-card:hover{

    transform:
        translateY(-8px);

    border-color:
        var(--primary) !important;

    box-shadow:
        0 20px 45px
        color-mix(
            in srgb,
            var(--primary) 18%,
            transparent
        ) !important;

}


body.dark-mode.theme-luxe .contact-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 15%,
                #10252a 85%
            ),

            #0b1b1f
        ) !important;

}


/* =========================================================
   12. COURSE CARDS
   ========================================================= */

body.theme-luxe .course-slide{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 7%,
                #ffffff 93%
            ),

            #ffffff
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            #dce8e8 80%
        ) !important;

}


body.dark-mode.theme-luxe .course-slide{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 15%,
                #10252a 85%
            ),

            #0b1b1f
        ) !important;

}


/* =========================================================
   13. COURSE OVERLAY
   ========================================================= */

body.theme-luxe .course-overlay{

    background:
        linear-gradient(
            to top,

            color-mix(
                in srgb,
                var(--primary-dark) 65%,
                #000000 35%
            ),

            rgba(0,0,0,.05)
        ) !important;

}


/* =========================================================
   14. REMOVE FIXED COURSE COLORS
   ========================================================= */

/*
   Python / Scratch / Web / JS / Graphic
   كلها تتبع لون الـ Theme بدل ألوانها الأصلية
*/


body.theme-luxe .python-card,
body.theme-luxe .scratch-card,
body.theme-luxe .web-card,
body.theme-luxe .js-card,
body.theme-luxe .graphic-card{

    border-top:
        6px solid var(--primary) !important;

}


body.theme-luxe .python-card .btn,
body.theme-luxe .scratch-card .btn,
body.theme-luxe .web-card .btn,
body.theme-luxe .js-card .btn,
body.theme-luxe .graphic-card .btn{

    background:
        var(--card-button) !important;

    border-color:
        var(--primary) !important;

    color:#ffffff !important;

}


/* =========================================================
   15. GALLERY MAIN BOX
   ========================================================= */

body.theme-luxe .gallery-slider{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 12%,
                #ffffff 88%
            ),

            color-mix(
                in srgb,
                var(--primary-dark) 10%,
                #eef7f7 90%
            )
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            #dce8e8 80%
        ) !important;

}


body.dark-mode.theme-luxe .gallery-slider{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 17%,
                #08171b 83%
            ),

            color-mix(
                in srgb,
                var(--primary-dark) 20%,
                #061115 80%
            )
        ) !important;

}


/* =========================================================
   16. GALLERY CARDS
   ========================================================= */

body.theme-luxe .gallery-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 8%,
                #ffffff 92%
            ),

            #ffffff
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            #dce8e8 80%
        ) !important;

}


body.dark-mode.theme-luxe .gallery-card{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 14%,
                #10252a 86%
            ),

            #0b1b1f
        ) !important;

}


/* =========================================================
   17. GALLERY INFO
   ========================================================= */

body.theme-luxe .gallery-info{

    background:
        linear-gradient(
            to top,
            color-mix(
                in srgb,
                var(--primary-dark) 75%,
                #000 25%
            ),
            transparent
        ) !important;

}


/* =========================================================
   18. EMPTY SLIDER
   ========================================================= */

body.theme-luxe .empty-slider{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary) 8%,
                #ffffff 92%
            ),

            #ffffff
        ) !important;

}


/* =========================================================
   19. FOOTER
   ========================================================= */

body.theme-luxe .footer{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary-dark) 78%,
                #071216 22%
            ),

            color-mix(
                in srgb,
                var(--primary) 45%,
                #08171b 55%
            )
        ) !important;

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 35%,
            transparent
        ) !important;

}


body.dark-mode.theme-luxe .footer{

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary-dark) 45%,
                #03090b 55%
            ),

            #061115
        ) !important;

}


/* =========================================================
   20. FOOTER TITLES
   ========================================================= */

body.theme-luxe .footer-title,
body.theme-luxe .footer-heading{

    color:
        #ffffff !important;

}


body.theme-luxe .footer p{

    color:
        rgba(255,255,255,.78) !important;

}


/* =========================================================
   21. FOOTER LINKS
   ========================================================= */

body.theme-luxe .footer a{

    color:
        rgba(255,255,255,.82);

}


body.theme-luxe .footer a:hover{

    color:
        var(--primary) !important;

}


/* =========================================================
   22. FOOTER BRANCHES
   ========================================================= */

body.theme-luxe .branch-info h6{

    color:
        #ffffff !important;

}


body.theme-luxe .branch-info p{

    color:
        rgba(255,255,255,.72) !important;

}


body.theme-luxe .branch-map{

    color:
        var(--primary) !important;

}


body.theme-luxe .branch-map:hover{

    color:
        #ffffff !important;

}


/* =========================================================
   23. FOOTER BRANCH ICON
   ========================================================= */

body.theme-luxe .branch-icon{

    border-color:
        color-mix(
            in srgb,
            var(--primary) 55%,
            #ffffff 45%
        ) !important;

    box-shadow:
        0 0 15px
        color-mix(
            in srgb,
            var(--primary) 25%,
            transparent
        ) !important;

}


/* =========================================================
   24. FOOTER SOCIAL ICONS
   ========================================================= */

body.theme-luxe .footer-social a,
body.theme-luxe .social-link{

    background:
        color-mix(
            in srgb,
            var(--primary) 18%,
            transparent
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 35%,
            transparent
        ) !important;

    color:
        #ffffff !important;

}


body.theme-luxe .footer-social a:hover,
body.theme-luxe .social-link:hover{

    background:
        var(--primary) !important;

    color:
        #ffffff !important;

}


/* =========================================================
   25. HOME / BACK BUTTONS
   ========================================================= */

body.theme-luxe .home-button,
body.theme-luxe .back-button{

    background:
        var(--card-button) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 40%,
            transparent
        ) !important;

}


body.theme-luxe .home-button:hover,
body.theme-luxe .back-button:hover{

    box-shadow:
        0 15px 35px
        color-mix(
            in srgb,
            var(--primary) 28%,
            transparent
        ) !important;

}


/* =========================================================
   26. SCROLL TOP
   ========================================================= */

body.theme-luxe #scrollTopBtn{

    background:
        var(--card-button) !important;

    box-shadow:
        0 12px 30px
        color-mix(
            in srgb,
            var(--primary) 25%,
            transparent
        ) !important;

}


/* =========================================================
   27. SECTION BADGE
   ========================================================= */

body.theme-luxe .section-badge{

    background:
        color-mix(
            in srgb,
            var(--primary) 12%,
            transparent
        ) !important;

    color:
        var(--primary) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 18%,
            transparent
        );

}


/* =========================================================
   28. HERO BADGE
   ========================================================= */

body.theme-luxe .hero-badge{

    background:
        color-mix(
            in srgb,
            var(--primary) 12%,
            transparent
        ) !important;

    color:
        var(--primary) !important;

}


/* =========================================================
   29. HOVER EFFECT FOR ALL CARDS
   ========================================================= */

body.theme-luxe .stage-card:hover,
body.theme-luxe .counter-card:hover,
body.theme-luxe .why-card:hover,
body.theme-luxe .contact-card:hover,
body.theme-luxe .course-slide:hover,
body.theme-luxe .gallery-card:hover{

    border-color:
        color-mix(
            in srgb,
            var(--primary) 55%,
            transparent
        ) !important;

    box-shadow:
        0 20px 50px
        color-mix(
            in srgb,
            var(--primary) 18%,
            transparent
        ) !important;

}


/* =========================================================
   30. DARK MODE CARD HOVER
   ========================================================= */

body.dark-mode.theme-luxe .stage-card:hover,
body.dark-mode.theme-luxe .counter-card:hover,
body.dark-mode.theme-luxe .why-card:hover,
body.dark-mode.theme-luxe .contact-card:hover,
body.dark-mode.theme-luxe .course-slide:hover,
body.dark-mode.theme-luxe .gallery-card:hover{

    box-shadow:
        0 20px 55px
        color-mix(
            in srgb,
            var(--primary) 25%,
            transparent
        ) !important;

}


/* =========================================================
   31. COMMON SUCCESS ELEMENTS
   ========================================================= */

body.theme-luxe .btn-success,
body.theme-luxe .bg-success{

    background:
        var(--card-button) !important;

    border-color:
        var(--primary) !important;

    color:#ffffff !important;

}


/* =========================================================
   32. REMOVE OLD GREEN DARK CARD COLORS
   ========================================================= */

body.dark-mode.theme-luxe .stage-card,
body.dark-mode.theme-luxe .course-slide,
body.dark-mode.theme-luxe .empty-slider{

    background-color:
        transparent !important;

}


/* =========================================================
   33. THEME TRANSITION
   ========================================================= */

body.theme-luxe .stage-card,
body.theme-luxe .counter-card,
body.theme-luxe .why-card,
body.theme-luxe .contact-card,
body.theme-luxe .course-slide,
body.theme-luxe .gallery-card,
body.theme-luxe .gallery-slider,
body.theme-luxe .footer{

    transition:
        background .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        color .45s ease,
        transform .4s ease;

}


/* =========================================================
   END
   ========================================================= */