@import url('https://fonts.googleapis.com/css2?family=Estedad:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

:root{
    --blue:#1769e0;
    --blue-dark:#0d4fb5;
    --blue-light:#eaf2ff;
    --dark:#09172f;
    --dark-2:#102343;
    --text:#17233b;
    --muted:#6b7890;
    --bg:#f4f7fc;
    --white:#fff;
    --line:#e3eaf4;
    --green:#159b62;
    --green-light:#e9f8f1;
    --red:#dc4141;
    --red-light:#fff0f0;
    --yellow:#c58a00;
    --yellow-light:#fff7df;
    --shadow:0 10px 35px rgba(20,48,91,.07);
    --shadow-lg:0 20px 55px rgba(20,48,91,.12);
    --radius:18px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    width:100%;
    max-width:100%;
}

body{
    margin:0;
    width:100%;
    max-width:100%;
    font-family:'Vazirmatn',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.9;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Estedad',sans-serif;
    color:var(--dark);
}

button,
.btn{
    font-family:'Estedad',sans-serif;
}

input,
select,
textarea{
    font-family:'Vazirmatn',sans-serif;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
}

/* =========================================================
   GLOBAL CONTAINERS
========================================================= */

.container{
    width:min(1120px,92%);
    margin:auto;
}

.muted{
    color:var(--muted);
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:11px 19px;
    min-height:44px;
    border-radius:12px;
    background:var(--blue);
    color:#fff;
    font-weight:800;
    border:1px solid var(--blue);
    cursor:pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.btn:hover{
    transform:translateY(-2px);
    background:var(--blue-dark);
    box-shadow:0 10px 25px rgba(23,105,224,.22);
}

.btn-sm{
    padding:8px 13px;
    min-height:38px;
    font-size:13px;
}

.btn.ghost{
    background:#fff;
    color:var(--blue);
    border-color:#d5e2f7;
}

.btn.ghost:hover{
    background:var(--blue-light);
    border-color:#bcd1f1;
}

button{
    cursor:pointer;
}

/* =========================================================
   MAIN HEADER
========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    border-bottom:1px solid rgba(227,234,244,.85);
}

.nav-wrap{
    min-height:74px;
    display:flex;
    align-items:center;
    gap:20px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Estedad',sans-serif;
    font-weight:900;
    font-size:20px;
}

.brand img{
    width:42px;
    height:42px;
    object-fit:contain;
    border-radius:11px;
}

.site-header nav{
    display:flex;
    gap:20px;
    font-family:'Vazirmatn',sans-serif;
    font-size:14px;
    flex:1;
    justify-content:center;
}

.site-header nav a{
    transition:color .2s ease;
}

.site-header nav a:hover{
    color:var(--blue);
}

.nav-actions{
    display:flex;
    gap:8px;
}

.menu-btn{
    display:none;
    border:0;
    background:transparent;
    font-size:25px;
}

/* =========================================================
   HERO
========================================================= */

.hero{
    padding:85px 0 65px;
    background:
        radial-gradient(circle at 85% 20%,rgba(23,105,224,.10),transparent 30%),
        linear-gradient(135deg,#f8fbff,#eaf2ff);
}

.hero-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:50px;
    align-items:center;
}

.hero h1{
    font-size:clamp(34px,6vw,64px);
    line-height:1.25;
    margin:12px 0;
}

.hero p{
    font-size:18px;
    color:#53627a;
    max-width:650px;
}

.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:25px;
}

.hero-photo{
    background:#fff;
    border-radius:28px;
    padding:10px;
    box-shadow:0 25px 70px rgba(23,61,122,.13);
    animation:heroFloat 4s ease-in-out infinite;
}

.hero-photo img{
    width:100%;
    display:block;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:22px;
}

/* =========================================================
   SECTIONS
========================================================= */

.section{
    padding:75px 0;
}

.section.alt{
    background:#fff;
}

.section-title{
    text-align:center;
    max-width:700px;
    margin:0 auto 38px;
}

.section-title h2{
    font-size:34px;
    margin:0 0 8px;
}

.section-title p{
    color:var(--muted);
}

/* =========================================================
   ABOUT
========================================================= */

.about-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:45px;
    align-items:center;
}

.about-photo img{
    width:100%;
    border-radius:24px;
    display:block;
}

/* =========================================================
   CARDS
========================================================= */

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.card{
    background:rgba(255,255,255,.96);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:#d4e1f4;
}

.card h3{
    margin-top:0;
}

/* =========================================================
   FEATURES
========================================================= */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.feature{
    padding:22px;
    background:#fff;
    border-radius:18px;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.feature:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}

.feature .num{
    font-family:'Inter',sans-serif;
    font-size:28px;
    font-weight:900;
    color:var(--blue);
}

/* =========================================================
   PROCESS
========================================================= */

.process{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    counter-reset:step;
}

.step{
    position:relative;
    padding:25px;
    background:#f8fbff;
    border:1px solid var(--line);
    border-radius:18px;
    transition:.25s ease;
}

.step:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}

.step:before{
    counter-increment:step;
    content:counter(step);
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    background:var(--blue);
    color:#fff;
    border-radius:50%;
    font-family:'Inter',sans-serif;
    font-weight:900;
}

/* =========================================================
   CERTIFICATES
========================================================= */

.certs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.cert{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.cert:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}

.cert img{
    width:100%;
    height:280px;
    object-fit:contain;
    background:#f7f9fc;
    border-radius:14px;
}

.cert h3{
    margin-bottom:4px;
}

/* =========================================================
   LEVELS
========================================================= */

.level-bar{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.level-bar span{
    padding:7px 13px;
    border-radius:10px;
    background:var(--blue-light);
    color:var(--blue);
    font-family:'Estedad',sans-serif;
    font-weight:900;
}

/* =========================================================
   PRICING
========================================================= */

.price-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
}

.price-table th,
.price-table td{
    padding:14px;
    border-bottom:1px solid var(--line);
    text-align:right;
}

.price-table th{
    background:#eef4ff;
}

.price-table tr:last-child td{
    border-bottom:0;
}

.price-box{
    margin-top:20px;
    overflow:auto;
}

/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.quote{
    background:#fff;
    padding:22px;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
}

.stars{
    letter-spacing:2px;
}

/* =========================================================
   CTA
========================================================= */

.cta{
    background:
        radial-gradient(circle at 90% 20%,rgba(23,105,224,.22),transparent 30%),
        var(--dark);
    color:#fff;
    border-radius:28px;
    padding:45px;
}

.cta h2,
.cta h3{
    color:#fff;
}

.cta p{
    color:#b8c5da;
}

/* =========================================================
   CONTACT
========================================================= */

.contact-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:24px;
    align-items:stretch;
}

.contact-card{
    background:#fff;
    border:1px solid var(--line);
    padding:22px;
    border-radius:18px;
    height:100%;
    box-shadow:var(--shadow);
}

/* =========================================================
   FORMS
========================================================= */

.form{
    background:#fff;
    border:1px solid var(--line);
    padding:25px;
    border-radius:20px;
    box-shadow:var(--shadow);
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.field.full{
    grid-column:1/-1;
}

.field label{
    font-weight:700;
    font-size:14px;
}

.field input,
.field select,
.field textarea{
    width:100%;
    max-width:100%;
    padding:12px 13px;
    border:1px solid #ccd7e8;
    border-radius:11px;
    font:inherit;
    background:#fff;
    color:var(--text);
    outline:none;
    transition:.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:#77a5ea;
    box-shadow:0 0 0 4px rgba(23,105,224,.09);
}

.field textarea{
    min-height:120px;
    resize:vertical;
}

.form-actions{
    margin-top:18px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* =========================================================
   ALERTS
========================================================= */

.alert{
    width:min(1120px,92%);
    margin:14px auto;
    padding:13px 17px;
    border-radius:13px;
    background:#eef4ff;
    color:#174b9b;
    border:1px solid #d8e6fb;
}

.alert.success{
    background:var(--green-light);
    color:#127346;
    border-color:#cceede;
}

.alert.error{
    background:var(--red-light);
    color:#a22;
    border-color:#ffd5d5;
}

.alert.warning{
    background:var(--yellow-light);
    color:#8a6200;
    border-color:#f4e2ad;
}

/* =========================================================
   LOGIN
========================================================= */

.login-wrap{
    min-height:80vh;
    display:grid;
    place-items:center;
    padding:30px 0;
}

.login-box{
    width:min(450px,92%);
    background:#fff;
    border:1px solid var(--line);
    padding:30px;
    border-radius:22px;
    box-shadow:var(--shadow-lg);
}

.login-box h1{
    margin-top:0;
}

/* =========================================================
   PANEL BASE
========================================================= */

.panel-body{
    background:
        radial-gradient(circle at 90% 0%,rgba(23,105,224,.035),transparent 28%),
        #f4f7fc;
    font-family:'Vazirmatn',sans-serif;
    color:var(--text);
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.panel-shell{
    display:flex;
    min-height:100vh;
    position:relative;
    width:100%;
    max-width:100%;
    min-width:0;
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{
    width:270px;
    background:
        linear-gradient(180deg,#08162f 0%,#0c1d3d 100%);
    color:#dce7f8;
    padding:22px 17px;
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    left:auto;
    direction:rtl;
    z-index:40;
    overflow-y:auto;
    box-shadow:-8px 0 30px rgba(4,18,43,.10);
}

.sidebar .brand{
    color:#fff;
    margin-bottom:20px;
    padding:5px 7px;
}

.sidebar .brand img{
    box-shadow:0 5px 18px rgba(0,0,0,.2);
}

.side-user{
    padding:14px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.07);
    border-radius:15px;
    margin-bottom:17px;
}

.side-user strong{
    color:#fff;
}

.sidebar nav{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.sidebar nav a{
    position:relative;
    display:flex;
    align-items:center;
    min-height:44px;
    padding:10px 13px;
    border-radius:11px;
    color:#cdd9ec;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.sidebar nav a:hover{
    background:rgba(255,255,255,.09);
    color:#fff;
    transform:translateX(-2px);
}

.sidebar nav a.active{
    background:linear-gradient(135deg,#1769e0,#155bc1);
    color:#fff;
    box-shadow:0 8px 20px rgba(23,105,224,.22);
}

/* =========================================================
   ADMIN NAV
========================================================= */

.admin-nav{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.admin-nav-link,
.admin-nav-toggle{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    padding:10px 13px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#cdd9ec;
    font:inherit;
    text-align:right;
    cursor:pointer;
    transition:.2s ease;
}

.admin-nav-link:hover,
.admin-nav-toggle:hover{
    background:rgba(255,255,255,.09);
    color:#fff;
}

.admin-nav-link.active{
    background:linear-gradient(135deg,#1769e0,#155bc1);
    color:#fff;
    box-shadow:0 8px 20px rgba(23,105,224,.22);
}

.admin-nav-toggle{
    justify-content:space-between;
}

.admin-nav-toggle span{
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-subnav{
    display:none;
    flex-direction:column;
    gap:3px;
    padding:5px 8px 5px 0;
}

.admin-subnav.open{
    display:flex;
}

.admin-subnav a{
    min-height:39px;
    font-size:13px;
    color:#aebdd5;
}

.admin-subnav a:hover{
    color:#fff;
}

.admin-logout{
    margin-top:12px;
    color:#ffb1b1!important;
}

.admin-logout:hover{
    background:rgba(220,65,65,.12)!important;
}

/* =========================================================
   PANEL MAIN
========================================================= */

.panel-main{
    margin-right:270px;
    margin-left:0;
    width:calc(100% - 270px);
    min-width:0;
    max-width:calc(100% - 270px);
    padding:28px;
    overflow-x:hidden;
}

.panel-top{
    min-height:54px;
    display:flex;
    align-items:center;
    gap:14px;
    font-size:24px;
    font-weight:900;
    margin-bottom:20px;
    direction:rtl;
    min-width:0;
    max-width:100%;
}

.panel-top .menu-btn{
    display:none;
    order:0;
    margin:0;
}

/* =========================================================
   PANEL STATS
========================================================= */

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    width:100%;
    max-width:100%;
    min-width:0;
}

.stat{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    box-shadow:var(--shadow);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
    min-width:0;
    max-width:100%;
}

.stat::before{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    left:-28px;
    bottom:-35px;
    border-radius:50%;
    background:rgba(23,105,224,.07);
}

.stat:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}

.stat span{
    display:block;
    position:relative;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    margin-bottom:5px;
    overflow-wrap:anywhere;
}

.stat strong{
    display:block;
    position:relative;
    font-family:'Estedad',sans-serif;
    color:var(--dark);
    font-size:27px;
    line-height:1.5;
    overflow-wrap:anywhere;
}

/* =========================================================
   PANEL GRID
========================================================= */

.panel-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:18px;
    width:100%;
    max-width:100%;
    min-width:0;
}

.panel-grid > *{
    min-width:0;
    max-width:100%;
}

.panel-grid .card{
    min-width:0;
    max-width:100%;
}

/* =========================================================
   PANEL CARDS
========================================================= */

.panel-body .card{
    box-shadow:0 8px 28px rgba(20,48,91,.055);
    min-width:0;
    max-width:100%;
}

.panel-body .card h3{
    font-size:18px;
    margin-bottom:14px;
}

/* =========================================================
   PROGRESS
========================================================= */

.progressbar{
    width:100%;
    max-width:100%;
    height:11px;
    margin-top:18px;
    background:#e8eef7;
    border-radius:20px;
    overflow:hidden;
}

.progressbar span{
    display:block;
    height:100%;
    background:linear-gradient(90deg,#1769e0,#4b91f0)!important;
    border-radius:20px;
    transition:width .5s ease;
}

/* =========================================================
   SESSIONS
========================================================= */

.sessions-card{
    margin-top:18px;
    width:100%;
    max-width:100%;
    min-width:0;
}

.sessions-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
    min-width:0;
    max-width:100%;
}

.sessions-header h3{
    margin-bottom:2px!important;
    min-width:0;
    max-width:100%;
}

.session-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    width:100%;
    max-width:100%;
    min-width:0;
}

.session-box{
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:17px;
    overflow:hidden;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
    min-width:0;
    max-width:100%;
}

.session-box:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(20,48,91,.09);
}

.session-box::before{
    content:"";
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:4px;
    background:#94a3b8;
}

.session-planned::before{
    background:var(--blue);
}

.session-done::before{
    background:var(--green);
}

.session-absent::before{
    background:var(--yellow);
}

.session-cancelled::before{
    background:var(--red);
}

.session-rescheduled::before{
    background:#805ad5;
}

.session-number{
    font-family:'Estedad',sans-serif;
    font-weight:900;
    color:var(--dark);
    font-size:15px;
    overflow-wrap:anywhere;
}

.session-date{
    margin-top:8px;
    font-size:13px;
    color:var(--muted);
    overflow-wrap:anywhere;
}

.session-time{
    margin-top:3px;
    font-family:'Inter','Vazirmatn',sans-serif;
    direction:rtl;
    font-size:14px;
    font-weight:800;
    color:#33415b;
    overflow-wrap:anywhere;
}

.session-status{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:10px;
    padding:5px 9px;
    border-radius:8px;
    background:#f1f5f9;
    color:#64748b;
    font-size:12px;
    font-weight:800;
    max-width:100%;
    overflow-wrap:anywhere;
}

.session-done .session-status{
    background:var(--green-light);
    color:#14754a;
}

.session-absent .session-status{
    background:var(--yellow-light);
    color:#896300;
}

.session-cancelled .session-status{
    background:var(--red-light);
    color:#a42b2b;
}

.session-rescheduled .session-status{
    background:#f1eaff;
    color:#6941a5;
}

.session-planned .session-status{
    background:var(--blue-light);
    color:#1a5fbe;
}

.session-box form{
    margin-top:11px!important;
    max-width:100%;
}

.session-box form .btn{
    min-height:38px;
    border-radius:10px;
    max-width:100%;
}

/* =========================================================
   TABLES
========================================================= */

.table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:15px;
    width:100%;
    max-width:100%;
    min-width:0;
}

.data-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
}

.data-table th,
.data-table td{
    padding:13px;
    border-bottom:1px solid var(--line);
    text-align:right;
    white-space:nowrap;
}

.data-table th{
    background:#f7faff;
    color:#53627a;
    font-size:13px;
    font-weight:800;
}

.data-table tr:last-child td{
    border-bottom:0;
}

.data-table tbody tr{
    transition:background .2s ease;
}

.data-table tbody tr:hover{
    background:#f9fbff;
}

/* =========================================================
   BADGES
========================================================= */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 10px;
    border-radius:8px;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.badge.green{
    background:var(--green-light);
    color:#14754a;
}

.badge.red{
    background:var(--red-light);
    color:#a42b2b;
}

.badge.yellow{
    background:var(--yellow-light);
    color:#896300;
}

.badge.blue{
    background:var(--blue-light);
    color:#1a5fbe;
}

/* =========================================================
   ACTIONS
========================================================= */

.actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    max-width:100%;
}

/* =========================================================
   NOTICES
========================================================= */

.notice{
    position:relative;
    padding:14px 16px;
    border-right:4px solid var(--blue);
    background:#f8fbff;
    border-radius:12px;
    margin-bottom:10px;
    border-top:1px solid #e7eef9;
    border-bottom:1px solid #e7eef9;
    border-left:1px solid #e7eef9;
    max-width:100%;
    overflow-wrap:anywhere;
}

.notice b{
    display:block;
    color:var(--dark);
    margin-bottom:3px;
}

.notice p{
    margin:0;
    color:#5f6d83;
    font-size:13px;
    overflow-wrap:anywhere;
}

/* =========================================================
   PAGINATION
========================================================= */

.pagination{
    margin-top:15px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    max-width:100%;
}

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

.footer{
    background:#071126;
    color:#d8e2f4;
    padding:14px 0;
}

.footer-one-line{
    width:min(1400px,96%);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    direction:rtl;
    min-height:30px;
}

.footer-one-line > div{
    margin:0;
    padding:0;
    border:0;
    display:flex;
    align-items:center;
    flex-shrink:0;
    min-height:30px;
}

.footer-brand{
    white-space:nowrap;
}

.footer-brand strong{
    display:block;
    color:#fff;
    font-size:13px;
    line-height:30px;
    white-space:nowrap;
}

.footer-description,
.footer-contact,
.footer-address,
.footer-copy{
    color:#b9c7dc;
    font-size:11px;
    line-height:30px;
    white-space:nowrap;
}

.footer-contact{
    direction:ltr;
}

.footer-copy{
    color:#93a4bf;
}

/* =========================================================
   ANIMATIONS
========================================================= */

.btn,
.card,
.feature,
.step,
.quote,
.contact-card,
.cert,
.stat,
.session-box{
    -webkit-tap-highlight-color:transparent;
}

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

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

.hero-grid>div:first-child{
    animation:heroText .7s ease both;
}

@keyframes heroText{
    from{
        opacity:0;
        transform:translateX(30px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

body{
    animation:pageFade .35s ease both;
}

@keyframes pageFade{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.scroll-animation{
    opacity:0;
    transform:translateY(35px);
    transition:opacity .7s ease,transform .7s ease;
}

.scroll-animation.show{
    opacity:1;
    transform:translateY(0);
}

/* =========================================================
   PANEL FONT
   EXACTLY MATCH MAIN WEBSITE
========================================================= */

.panel-body{
    font-family:'Vazirmatn',sans-serif;
    font-weight:500;
}

/* متن‌های معمولی پنل */
.panel-body,
.panel-body .sidebar,
.panel-body .panel-main,
.panel-body .card,
.panel-body .stat,
.panel-body .data-table,
.panel-body .notice,
.panel-body .session-box,
.panel-body .badge,
.panel-body .alert,
.panel-body .field,
.panel-body label,
.panel-body p,
.panel-body span,
.panel-body a,
.panel-body li,
.panel-body td,
.panel-body th,
.panel-body input,
.panel-body select,
.panel-body textarea{
    font-family:'Vazirmatn',sans-serif;
}

/* تیترها مثل سایت اصلی */
.panel-body h1,
.panel-body h2,
.panel-body h3,
.panel-body h4,
.panel-body h5,
.panel-body h6,
.panel-body .panel-top,
.panel-body .panel-brand,
.panel-body .panel-brand-title,
.panel-body .brand,
.panel-body .stat strong,
.panel-body .session-number{
    font-family:'Estedad',sans-serif;
}

/* دکمه‌ها و منوها مثل سایت اصلی */
.panel-body button,
.panel-body .btn,
.panel-body .admin-nav-link,
.panel-body .admin-nav-toggle,
.panel-body .panel-logout,
.panel-body .panel-menu-btn{
    font-family:'Estedad',sans-serif;
}

/* منوی اصلی پنل */
.panel-body .panel-nav,
.panel-body .panel-nav > a,
.panel-body .panel-mobile-nav,
.panel-body .panel-mobile-nav > a{
    font-family:'Vazirmatn',sans-serif;
}

/* زمان جلسه */
.panel-body .session-time{
    font-family:'Inter','Vazirmatn',sans-serif;
}

/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media(max-width:1100px){

    .session-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
    }
}

/* =========================================================
   RESPONSIVE - MOBILE SIDEBAR
========================================================= */

@media(max-width:900px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .site-header nav,
    .nav-actions{
        display:none;
    }

    .site-header .menu-btn{
        display:block;
        margin:0;
    }

    .nav-wrap{
        justify-content:space-between;
    }

    .nav-open .site-header nav{
        display:flex;
        position:absolute;
        top:74px;
        right:0;
        left:0;
        background:#fff;
        padding:18px;
        flex-direction:column;
        box-shadow:0 15px 30px rgba(20,48,91,.08);
        border-bottom:1px solid var(--line);
    }

    .hero-grid,
    .about-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .cards,
    .certs,
    .testimonials{
        grid-template-columns:1fr 1fr;
    }

    .feature-grid,
    .process{
        grid-template-columns:1fr 1fr;
    }

    .sidebar{
        width:280px;
        transform:translateX(110%);
        transition:transform .25s ease;
        z-index:100;
        right:0;
        left:auto;
        box-shadow:0 0 40px rgba(0,0,0,.3);
    }

    .side-open .sidebar{
        transform:translateX(0);
    }

    .panel-main{
        margin-right:0;
        margin-left:0;
        width:100%;
        max-width:100%;
        min-width:0;
        padding:22px;
        overflow-x:hidden;
    }

    .panel-top{
        direction:rtl;
        justify-content:flex-start;
        max-width:100%;
        min-width:0;
    }

    .panel-top .menu-btn{
        display:block;
        margin:0;
        order:0;
    }

    .site-header .nav-wrap{
        direction:ltr!important;
        flex-direction:row!important;
    }

    .panel-body *,
    .panel-body *::before,
    .panel-body *::after{
        max-width:100%;
    }

    .panel-grid,
    .stats,
    .session-grid{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .panel-grid > *,
    .stats > *,
    .session-grid > *{
        min-width:0;
        max-width:100%;
    }

    .panel-body .card{
        min-width:0;
        max-width:100%;
        overflow:hidden;
    }

    .panel-body .card h1,
    .panel-body .card h2,
    .panel-body .card h3,
    .panel-body .card h4,
    .panel-body .card h5,
    .panel-body .card h6,
    .panel-body .card p,
    .panel-body .card span,
    .panel-body .card strong,
    .panel-body .card div{
        overflow-wrap:anywhere;
        word-break:normal;
    }

    .panel-body p{
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .actions{
        max-width:100%;
    }

    .actions .btn{
        max-width:100%;
        white-space:normal;
        text-align:center;
    }

    .field,
    .field input,
    .field select,
    .field textarea{
        min-width:0;
        max-width:100%;
    }
}

/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media(max-width:600px){

    .container{
        width:min(94%,1120px);
    }

    .section{
        padding:50px 0;
    }

    .cards,
    .certs,
    .testimonials,
    .feature-grid,
    .process,
    .form-grid{
        grid-template-columns:1fr;
    }

    .hero{
        padding:50px 0;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:16px;
    }

    .panel-main{
        padding:12px;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .panel-top{
        font-size:20px;
        min-height:48px;
        margin-bottom:14px;
    }

    .stats{
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    .stat{
        width:100%;
        min-width:0;
        max-width:100%;
        padding:13px;
        border-radius:15px;
    }

    .stat strong{
        font-size:20px;
        line-height:1.4;
        overflow-wrap:anywhere;
    }

    .stat span{
        font-size:11px;
        line-height:1.7;
        white-space:normal;
        overflow-wrap:anywhere;
    }

    .panel-grid{
        grid-template-columns:1fr;
        gap:12px;
        margin-top:14px;
        width:100%;
        max-width:100%;
    }

    .panel-grid > *{
        width:100%;
        min-width:0;
        max-width:100%;
    }

    .card{
        padding:18px;
        border-radius:16px;
    }

    .panel-body .card{
        width:100%;
        max-width:100%;
        min-width:0;
        padding:16px;
        border-radius:15px;
        overflow:hidden;
    }

    .panel-body .card h3{
        font-size:16px;
        line-height:1.7;
        overflow-wrap:anywhere;
    }

    .sessions-card{
        margin-top:14px;
        width:100%;
        max-width:100%;
        min-width:0;
        overflow:hidden;
    }

    .sessions-header{
        width:100%;
        max-width:100%;
        min-width:0;
        gap:10px;
        flex-wrap:wrap;
    }

    .sessions-header h3{
        min-width:0;
        max-width:100%;
        font-size:16px;
        overflow-wrap:anywhere;
    }

    .session-grid{
        grid-template-columns:1fr;
        gap:9px;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .session-box{
        width:100%;
        max-width:100%;
        min-width:0;
        padding:14px;
    }

    .session-number,
    .session-date,
    .session-time,
    .session-status{
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .session-time{
        font-size:13px;
    }

    .table-wrap{
        margin-left:-4px;
        margin-right:-4px;
        width:calc(100% + 8px);
        max-width:calc(100% + 8px);
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
    }

    .data-table{
        width:max-content;
        min-width:100%;
    }

    .data-table th,
    .data-table td{
        padding:9px 10px;
        font-size:12px;
    }

    .form{
        padding:18px;
        max-width:100%;
        min-width:0;
    }

    .form-actions{
        flex-direction:column;
        max-width:100%;
    }

    .form-actions .btn{
        width:100%;
        max-width:100%;
    }

    .actions{
        width:100%;
        max-width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:7px;
    }

    .actions .btn{
        max-width:100%;
        white-space:normal;
        font-size:12px;
    }

    .panel-body h1,
    .panel-body h2,
    .panel-body h3,
    .panel-body h4,
    .panel-body h5,
    .panel-body h6{
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .panel-body p{
        font-size:13px;
        line-height:1.9;
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .panel-body a{
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .homework,
    .homework-card,
    .homework-list,
    .homework-item{
        max-width:100%;
        min-width:0;
    }

    .footer{
        padding:14px 0;
    }

    .footer-one-line{
        flex-direction:column;
        gap:3px;
    }

    .footer-one-line > div{
        min-height:auto;
        height:auto;
    }

    .footer-brand strong,
    .footer-description,
    .footer-contact,
    .footer-address,
    .footer-copy{
        white-space:normal;
        text-align:center;
        line-height:22px;
    }

    .panel-top{
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        direction:rtl;
    }

    .panel-top .menu-btn{
        order:0;
        margin:0;
    }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:380px){

    .panel-main{
        padding:10px;
    }

    .stats{
        gap:7px;
    }

    .stat{
        padding:11px;
    }

    .stat span{
        font-size:10px;
    }

    .stat strong{
        font-size:18px;
    }

    .panel-body .card{
        padding:14px;
    }

    .session-box{
        padding:12px;
    }

    .panel-body .btn{
        font-size:12px;
    }
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
}