:root{
  --teal-950:#0A2B27;
  --teal-900:#0E3B35;
  --teal-800:#134A42;
  --teal-700:#1B5A50;
  --teal-100:rgba(19,74,66,.08);
  --gold-600:#C27E26;
  --gold-500:#D6963C;
  --gold-300:#EFC078;
  --gold-100:rgba(214,150,60,.12);
  --cream-100:#FBF6EA;
  --cream-200:#F3ECD8;
  --ink-900:#1B2B27;
  --ink-600:#5C6E68;
  --border-soft:rgba(19,74,66,.12);
  --radius-lg:18px;
  --radius-md:14px;
  --bg-page:var(--cream-100);
  --bg-card:#fff;
  --text-body:var(--ink-900);
}
body.dark-mode{
  --bg-page:#0B211E; --bg-card:#12332E; --text-body:#E7E2D4; --ink-600:#9FB0AB;
  --border-soft:rgba(255,255,255,.08); --cream-200:#0F2A26;
}
*{box-sizing:border-box;}
body{font-family:'Cairo',sans-serif; background:var(--bg-page); color:var(--text-body); transition:background .3s,color .3s;}
h1,h2,h3,h4{font-family:'Cairo',sans-serif; font-weight:800;}
.badge-pill{display:inline-flex; align-items:center; gap:.4rem; background:var(--teal-100); color:var(--teal-800); border-radius:30px; padding:.4rem 1rem; font-size:.82rem; font-weight:700; margin-bottom:.9rem;}
body.dark-mode .badge-pill{background:rgba(214,150,60,.14); color:var(--gold-300);}
.text-gold{color:var(--gold-600);}
body.dark-mode .text-gold{color:var(--gold-300);}
.section-sub{color:var(--ink-600); max-width:640px;}
.section-head{text-align:center; margin-bottom:3rem;}
section{padding:5.5rem 0;}
.btn-gold{background:var(--gold-500); border:none; color:#fff; font-weight:700; border-radius:30px; padding:.7rem 1.9rem;}
.btn-gold:hover{background:var(--gold-600); color:#fff;}
.btn-outline-teal{border:1.5px solid var(--teal-800); color:var(--teal-800); border-radius:30px; font-weight:700; padding:.65rem 1.8rem;}
body.dark-mode .btn-outline-teal{border-color:var(--gold-300); color:var(--gold-300);}
.card-soft{background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg);}

/* Navbar */
.navbar-itqan{background:var(--bg-page); padding:.9rem 0; border-bottom:1px solid var(--border-soft);}
.navbar-itqan .nav-link{color:var(--text-body); font-weight:600;}
.navbar-itqan .nav-link.active{color:var(--gold-600); font-weight:700;}
.brand-mark{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--teal-700),var(--teal-950));display:flex;align-items:center;justify-content:center;color:var(--gold-300);font-weight:700;border:2px solid var(--gold-500);}
.form-switch .form-check-input{width:2.6em; height:1.4em; cursor:pointer;}
.lang-select{border:1px solid var(--border-soft); border-radius:20px; padding:.3rem .8rem; background:transparent; color:var(--text-body); font-weight:600; font-size:.85rem;}

/* Logo styling */
.itqan-logo-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    justify-content: center;
    top: 15px;
    position: relative;
}
    .itqan-logo-wrap .logo-img {
        height: 81px;
        width: auto;
        position: absolute;
        z-index: 11;
        text-align: center;
        justify-content: center;
        display: flex;
    }

    .itqan-logo-wrap .logo-shape {
        height: 150px;
        width: auto;
        opacity: .85;
        position: absolute;
    }

    .itqan-logo-wrap .logo-name {
        font-weight: 800;
        font-size: 1.15rem;
        color: var(--teal-800);
        font-family: 'Cairo',sans-serif;
    }

body.dark-mode .itqan-logo-wrap .logo-name {
    color: var(--gold-300);
}

/* Language dropdown */
.lang-dropdown {
    position: relative;
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    end: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    min-width: 180px;
    z-index: 1050;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    display: none;
    padding: .5rem 0;
}

    .lang-dropdown-menu.open {
        display: block;
    }

.lang-trigger {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: .3rem .75rem;
    color: var(--text-body);
    font-weight: 600;
    font-size: .85rem;
}

    .lang-trigger:hover {
        border-color: var(--gold-500);
        color: var(--gold-600);
    }

/* Active nav link */
.navbar-itqan .nav-link.nav-active,
.navbar-itqan .nav-link:hover {
    color: var(--gold-600) !important;
}

/* Hero */
.hero{padding-top:4.5rem;}
.hero h1{font-size:2.8rem; line-height:1.3;}
.hero p.lead{color:var(--ink-600); font-size:1.05rem;}
.hero-card{background:linear-gradient(150deg,var(--teal-800),var(--teal-950)); border-radius:var(--radius-lg); padding:2rem; color:#fff; position:relative; overflow:hidden; box-shadow:0 30px 60px rgba(10,43,39,.25);}
.hero-card::after{content:"";position:absolute; inset:0; background:radial-gradient(circle at 85% 10%, rgba(214,150,60,.18), transparent 45%);}
.badge-icon-circle{width:52px;height:52px;border-radius:50%; background:rgba(214,150,60,.18); display:flex;align-items:center;justify-content:center; color:var(--gold-300); font-size:1.3rem; margin-bottom:1rem;}
.mini-tags{display:flex; gap:.6rem; margin-top:1.2rem; flex-wrap:wrap;}
.mini-tags span{background:rgba(255,255,255,.1); border-radius:20px; padding:.3rem .8rem; font-size:.78rem;}

/* Stats */
.stats-bar{background:linear-gradient(90deg,var(--teal-800),var(--teal-950)); color:#fff;}
.stats-bar .num{font-size:2.1rem; font-weight:800; color:var(--gold-300);}
.stats-bar .lbl{font-size:.85rem; opacity:.85;}

/* Noorania */
.video-frame{border-radius:var(--radius-lg); overflow:hidden; position:relative; cursor:pointer; box-shadow:0 20px 40px rgba(10,43,39,.18);}
.video-frame img{width:100%; display:block; aspect-ratio:16/10; object-fit:cover;}
.video-frame .play-btn{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.video-frame .play-btn i{width:60px;height:60px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--teal-900); display:flex;align-items:center;justify-content:center; font-size:1.5rem;}

/* Stepper (journey) */
.stepper{position:relative; display:flex; justify-content:space-between; margin:3rem 0 1rem; flex-wrap:wrap; gap:1.5rem;}
.stepper::before{content:""; position:absolute; top:34px; right:5%; left:5%; height:2px; background:var(--border-soft); z-index:0;}
.step-node{position:relative; z-index:1; text-align:center; flex:1 1 0; min-width:120px;}
.step-node .circle{width:68px;height:68px;border-radius:50%; background:var(--bg-card); border:2px solid var(--gold-500); display:flex;align-items:center;justify-content:center; margin:0 auto .9rem; font-size:1.4rem; color:var(--gold-600);}
.step-node h6{font-weight:700; font-size:.92rem;}

/* Slider (courses / teachers) */
.mini-viewport{overflow:hidden;}
.mini-track{display:flex; gap:1.25rem; transition:transform .5s ease;}
.mini-slide{flex:0 0 calc(25% - .95rem);}
@media (max-width:991px){ .mini-slide{flex:0 0 calc(50% - .65rem);} }
@media (max-width:575px){ .mini-slide{flex:0 0 100%;} }
.slider-controls{display:flex; gap:.5rem;}
.slider-controls button{width:38px;height:38px;border-radius:50%; border:1.5px solid var(--teal-800); background:transparent; color:var(--teal-800); display:flex;align-items:center;justify-content:center;}
body.dark-mode .slider-controls button{border-color:var(--gold-300); color:var(--gold-300);}
.slider-controls button:hover{background:var(--gold-500); color:#fff; border-color:var(--gold-500);}

.course-card{overflow:hidden; text-align:center;}
.course-card .thumb{height:110px; background:linear-gradient(135deg,var(--teal-800),var(--teal-950)); display:flex;align-items:center;justify-content:center;}
.course-card .thumb .initial{width:64px;height:64px;border-radius:50%; border:3px solid var(--gold-500); background:var(--gold-100); color:var(--gold-300); display:flex;align-items:center;justify-content:center; font-weight:800; font-size:1.3rem;}
.course-card .body{padding:1.1rem;}
.course-card .body h6{font-weight:700; margin-bottom:.15rem;}
.course-card .body span{color:var(--ink-600); font-size:.85rem;}
.course-card .btn-detail{display:block; background:var(--gold-500); color:#fff; font-weight:700; padding:.6rem; text-decoration:none;}
.course-card .btn-detail:hover{background:var(--gold-600); color:#fff;}

.teacher-card2{padding:1.6rem; text-align:center;}
.teacher-avatar{width:64px;height:64px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff; font-weight:800; font-size:1.3rem; margin:0 auto .9rem;}

/* Testimonials */
.testi-card{padding:1.6rem;}
.testi-card i.bi-quote{font-size:1.5rem; color:var(--gold-500);}
.avatar-init{width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff; font-weight:700;}

/* Contact */
.contact-info-item{display:flex; gap:.8rem; margin-bottom:1.1rem;}
.contact-info-item .ic{width:40px;height:40px;border-radius:10px; background:var(--gold-100); color:var(--gold-600); display:flex;align-items:center;justify-content:center; flex:0 0 40px;}
.form-control, .form-select{background:var(--bg-card); border:1px solid var(--border-soft); color:var(--text-body); border-radius:10px; padding:.65rem .9rem;}

/* Footer */
footer{background:var(--teal-950); color:#B9C4BF; padding:4rem 0 0;}
footer h6{color:#fff; font-weight:700; margin-bottom:1.1rem;}
footer a{color:#B9C4BF; text-decoration:none; font-size:.9rem;}
footer a:hover{color:var(--gold-300);}
.social-circle{width:36px;height:36px;border-radius:50%; border:1px solid rgba(255,255,255,.2); color:#fff; display:flex;align-items:center;justify-content:center;}
.bottom-bar{border-top:1px solid rgba(255,255,255,.08); margin-top:2.2rem; padding:1rem 0; text-align:center; font-size:.85rem;}

#backToTop{position:fixed; bottom:24px; left:24px; width:46px;height:46px;border-radius:50%; background:var(--teal-900); color:var(--gold-300); border:none; display:none; align-items:center;justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:999;}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
.ratio-video iframe{width:100%;height:100%;border:0;}

/* Language button */
.lang-btn-wrap {
    display: flex;
    justify-content: flex-end;
}

.lang-trigger-login {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: .3rem .85rem;
    cursor: pointer;
    color: var(--ink-600);
    font-size: .85rem;
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    transition: border-color .2s, color .2s;
}

    .lang-trigger-login:hover {
        border-color: var(--gold-500);
        color: var(--gold-600);
    }

/* ── Language dropdown wrapper ── */
.lang-dropdown-wrap {
    position: relative;
    display: inline-block;
}

/* ── Custom dropdown panel — Bootstrap-style ── */
.lang-dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    min-width: 200px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .175);
    padding: .5rem 0;
    z-index: 1050;
    display: block;
    opacity: 0;
    right: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    height: 380px;
    overflow: auto;
}

    /* Open state — matches Bootstrap's .show */
    .lang-dd-menu.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Reset Bootstrap's own ul.dropdown-menu positioning/display
       so it renders as a plain list inside our wrapper */
    .lang-dd-menu ul.dropdown-menu {
        position: static !important;
        display: block !important;
        float: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0;
        margin: 0;
        border-radius: 0;
    }

    /* Dropdown items — identical to Bootstrap .dropdown-item */
    .lang-dd-menu .dropdown-item {
        display: block;
        width: 100%;
        padding: .35rem 1rem;
        clear: both;
        font-weight: 400;
        font-size: .9rem;
        font-family: 'Cairo', sans-serif;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        cursor: pointer;
        transition: background-color .1s ease, color .1s ease;
    }

        .lang-dd-menu .dropdown-item:hover,
        .lang-dd-menu .dropdown-item:focus {
            color: #1e2125;
            background-color: #f8f9fa; /* Bootstrap hover bg */
        }

        .lang-dd-menu .dropdown-item.active,
        .lang-dd-menu .dropdown-item:active {
            color: #fff;
            background-color: var(--teal-700);
        }

        .lang-dd-menu .dropdown-item.disabled,
        .lang-dd-menu .dropdown-item:disabled {
            color: #adb5bd;
            pointer-events: none;
            background-color: transparent;
        }

    /* Divider — same as Bootstrap .dropdown-divider */
    .lang-dd-menu .dropdown-divider {
        height: 0;
        margin: .5rem 0;
        overflow: hidden;
        border-top: 1px solid rgba(0, 0, 0, .15);
    }

    /* Dropdown header — same as Bootstrap .dropdown-header */
    .lang-dd-menu .dropdown-header {
        display: block;
        padding: .5rem 1rem;
        margin-bottom: 0;
        font-size: .875rem;
        color: #6c757d;
        white-space: nowrap;
    }

    .lang-dd-menu li a {
        text-decoration: 0;
        color: #555;
        width: 100%;
        display: flex;
        padding: .3rem;
    }

        .lang-dd-menu li a:hover {
            background: aliceblue;
        }
/*about*/
.scrollable-desc {
    max-height: 280px;
    overflow: hidden;
    padding-inline-end: 15px;
    text-align: justify;
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    transition: all 0.3s ease;
}

    .scrollable-desc:hover {
        overflow-y: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }

    /* Custom Scrollbar */
    .scrollable-desc::-webkit-scrollbar {
        width: 6px;
    }

    .scrollable-desc::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.03);
        border-radius: 10px;
    }

    .scrollable-desc::-webkit-scrollbar-thumb {
        background: var(--gold-500, #d4af37);
        border-radius: 10px;
    }

        .scrollable-desc::-webkit-scrollbar-thumb:hover {
            background: var(--teal-800, #004d40);
        }

.about-text-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.02);
}

.about-image-wrapper {
    position: relative;
    padding: 20px;
}

        /*norania style*/
.nav-pills .nav-link {
    color: var(--teal-800);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #fff;
        background-color: var(--teal-800);
    }

.card-soft {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
   
}
.tab-content .card-soft {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 345px !important;
    overflow: hidden;
    padding: 1rem !important;
}

    .card-soft:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.06);
        overflow: auto;
    }
/* Custom loader area */
#OurcoursesList {
    min-height: 200px;
    position: relative;
}
.course-container .card-body {
    height: 250px;
}