:root{
    --sky:#AEE3F0;
    --sky-deep:#7FCDE0;
    --sun:#FFD873;
    --coral:#FF9F9F;
    --mint:#A8E6C9;
    --grape:#5B4B8A;
    --cream:#FFFCF5;
    --white:#ffffff;
    --navy: #06264a;
    --blue: #0f66b0;
    --gold: #f5a623;
    --gold-2: #ff7a45;
    --cream: #f6f4ef;
    --inkcolor: #33445a;
    --muted: #7b8aa0;
    --bg:#F4F2ED;
    --muted:#7A7873;
    --bgbase:#f4ff5f42;
    --blue-ink:#EAEDFF;
    --teal:#0F9E7A;   --teal-ink:#E4F7EF;
    --amber:#FF8A3D;  --amber-ink:#FFEEE0;
    --bgboxb:rgb(179, 218, 236);
    --bgboxw:var(--bgboxw);
  }
  [data-theme="dark"] {
  --bgbase: #121212;
  --inkcolor: #e8e8e8;
  --bgboxw: #1e1e1e;
  --bgboxb: #333333;
}
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Vazirmatn', sans-serif;
    background:var(--cream);
    color:var(--inkcolor);
    min-height:100vh;
    background:
      radial-gradient(600px 400px at 85% -5%, rgba(79, 110, 247, 0.541), transparent 60%),
      radial-gradient(500px 380px at 5% 15%, rgba(0, 189, 164, 0.534), transparent 60%),
      radial-gradient(650px 500px at 50% 110%, rgba(247, 167, 62, 0.815), transparent 60%),
      var(--bgbase);
  }
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  .menubox{
    border:1px solid black; width: 95%; border-radius: 5px; margin-top: 7px;background: rgba(255, 255, 255, 0.23);
  }
  .menucolor{
    font-family:b koodak;font-size:medium; font-weight: bold; text-decoration: none; margin: 2px;display: flex;gap: 10px;align-items: center;color: var(--inkcolor);
  }
.img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* مهم‌ترین خط: پر می‌کنه بدون کشیده شدن */
  object-position: center; /* کدوم قسمت عکس نگه داشته بشه؛ می‌تونی top/bottom/left/right هم بدی */
  display: block;
}

/* =========================================================
   HEADER اصلی
========================================================= */

.school-header {
    position: relative;
    width: 100%;
    direction: rtl;
    font-family: "B Titr", Tahoma, sans-serif;

    background:
        linear-gradient(
            135deg,
            #003b73 0%,
            #00509e 45%,
            #0066b3 100%
        );

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .25);

    z-index: 1000;
}


/* =========================================================
   قسمت بالای هدر
========================================================= */

.school-top {
    min-height: 100px;

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

    position: relative;

    padding: 8px 150px;

    box-sizing: border-box;
}


/* =========================================================
   لوگو و نام مدرسه
========================================================= */

.school-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}


.school-logo {
    width: 82px;
    height: 82px;

    object-fit: contain;

    border-radius: 50%;

    background: #ffffff;

    padding: 4px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .30),
        0 0 0 3px rgba(255, 255, 255, .20);

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


.school-logo:hover {
    transform: scale(1.04);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .35),
        0 0 0 4px rgba(255, 255, 255, .25);
}


/* =========================================================
   نام مدرسه
========================================================= */

.school-name {
    color: rgb(203, 233, 95);

    background:
        linear-gradient(
            135deg,
            rgba(0, 75, 35, .95),
            rgba(0, 105, 45, .85)
        );

    padding: 7px 25px;

    border-radius: 15px;

    margin: 0;

    font-size: 25px;

    line-height: 1.5;

    white-space: nowrap;

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

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .20),
        inset 0 1px rgba(255, 255, 255, .15);

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


.school-name:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .28),
        inset 0 1px rgba(255, 255, 255, .18);
}


/* =========================================================
   پرچم ایران
========================================================= */

.iran-flag-container {

    position: absolute;

    left: 22px;

    top: 50%;

    transform: translateY(-50%);

    width: 120px;
    height: 78px;

    perspective: 1000px;

    z-index: 10;

}


/*
   خود پرچم

   فایل:
   static/Flag_of_Iran.svg
*/

.iran-flag {

    position: relative;

    width: 110px;
    height: 69px;

    overflow: hidden;

    transform-origin: left center;

    /*
       حرکت موجی نرم
    */
    animation:
        iranFlagWave 3.8s ease-in-out infinite;

    filter:
        drop-shadow(
            0 5px 7px rgba(0, 0, 0, .35)
        );

}


/* =========================================================
   تصویر واقعی پرچم
========================================================= */

.iran-flag-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    user-select: none;

    pointer-events: none;

    transform-origin: left center;

}


/* =========================================================
   لایه نور روی پارچه
========================================================= */

.iran-flag::after {

    content: "";

    position: absolute;

    top: -10%;

    left: -45%;

    width: 42%;

    height: 120%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.22) 50%,
            transparent 100%
        );

    transform:
        skewX(-15deg);

    animation:
        flagLight 3.8s ease-in-out infinite;

    opacity: .55;

}


/* =========================================================
   حرکت موجی پرچم
========================================================= */

@keyframes iranFlagWave {

    0% {

        transform:
            perspective(1000px)
            rotateY(0deg)
            rotateZ(0deg)
            skewY(0deg)
            scaleX(1);

    }


    8% {

        transform:
            perspective(1000px)
            rotateY(-2deg)
            rotateZ(.15deg)
            skewY(.2deg)
            scaleX(.995);

    }


    16% {

        transform:
            perspective(1000px)
            rotateY(-5deg)
            rotateZ(.3deg)
            skewY(.5deg)
            scaleX(.985);

    }


    24% {

        transform:
            perspective(1000px)
            rotateY(-8deg)
            rotateZ(.45deg)
            skewY(.8deg)
            scaleX(.97);

    }


    32% {

        transform:
            perspective(1000px)
            rotateY(-3deg)
            rotateZ(-.2deg)
            skewY(-.3deg)
            scaleX(.99);

    }


    40% {

        transform:
            perspective(1000px)
            rotateY(5deg)
            rotateZ(-.4deg)
            skewY(-.7deg)
            scaleX(.975);

    }


    48% {

        transform:
            perspective(1000px)
            rotateY(8deg)
            rotateZ(-.3deg)
            skewY(-.8deg)
            scaleX(.965);

    }


    56% {

        transform:
            perspective(1000px)
            rotateY(3deg)
            rotateZ(.2deg)
            skewY(.3deg)
            scaleX(.99);

    }


    64% {

        transform:
            perspective(1000px)
            rotateY(-5deg)
            rotateZ(.35deg)
            skewY(.6deg)
            scaleX(.98);

    }


    72% {

        transform:
            perspective(1000px)
            rotateY(-8deg)
            rotateZ(.4deg)
            skewY(.8deg)
            scaleX(.965);

    }


    80% {

        transform:
            perspective(1000px)
            rotateY(-2deg)
            rotateZ(-.15deg)
            skewY(-.2deg)
            scaleX(.995);

    }


    88% {

        transform:
            perspective(1000px)
            rotateY(4deg)
            rotateZ(-.3deg)
            skewY(-.5deg)
            scaleX(.98);

    }


    94% {

        transform:
            perspective(1000px)
            rotateY(2deg)
            rotateZ(.1deg)
            skewY(.2deg)
            scaleX(.995);

    }


    100% {

        transform:
            perspective(1000px)
            rotateY(0deg)
            rotateZ(0deg)
            skewY(0deg)
            scaleX(1);

    }

}


/* =========================================================
   حرکت انعکاس نور روی پارچه
========================================================= */

@keyframes flagLight {

    0% {
        left: -45%;
        opacity: .15;
    }

    20% {
        left: -10%;
        opacity: .30;
    }

    50% {
        left: 75%;
        opacity: .45;
    }

    80% {
        left: 110%;
        opacity: .20;
    }

    100% {
        left: 130%;
        opacity: .10;
    }

}


/* =========================================================
   دکمه ورود
========================================================= */

.login-area {

    position: absolute;

    right: 18px;

    top: 50%;

    transform:
        translateY(-50%);

}


.login-button {

    display: inline-block;

    color: #ffffff !important;

    text-decoration: none !important;

    background:
        linear-gradient(
            135deg,
            #238310,
            #42a82d
        );

    padding:
        8px 24px;

    border-radius:
        12px;

    font-family:
        "B Titr",
        Tahoma,
        sans-serif;

    font-size:
        17px;

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

    box-shadow:
        0 4px 10px rgba(0, 0, 0, .25);

    transition:
        all .25s ease;

}


.login-button:hover {

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #2e9d17,
            #54bf3b
        );

    box-shadow:
        0 7px 15px rgba(0, 0, 0, .30);

}


/* =========================================================
   نوار منوی اصلی
========================================================= */

.main-navigation {

    width: 100%;

    min-height: 58px;

    background:
        rgba(0, 43, 83, .86);

    border-top:
        1px solid rgba(255, 255, 255, .12);

    border-bottom:
        1px solid rgba(255, 255, 255, .12);

    backdrop-filter:
        blur(8px);

}


.navigation-inner {

    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 18px;

    box-sizing: border-box;

}



/* =========================================================
   دکمه‌های سه‌بعدی منوی اصلی
   ========================================================= */

.menuuu {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    perspective: 900px;
}

.menuuu span {
    display: inline-flex;
}

.menuuu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 8px 17px;

    color: #edcc9a !important;
    text-decoration: none !important;

    font-family: "B Titr", Tahoma, sans-serif;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;

    border-radius: 10px;

    /* ظاهر سه‌بعدی */
    background:
        linear-gradient(
            145deg,
            #0873bd 0%,
            #00569b 48%,
            #003d73 100%
        );

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

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.18),
        inset 0 -4px 6px rgba(0,0,0,.20),
        0 4px 0 #002e58,
        0 7px 12px rgba(0,0,0,.30);

    transform: translateY(0) translateZ(0);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease;
}

/* درخشش بالای دکمه */
.menuuu a::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 8%;
    width: 84%;
    height: 45%;

    border-radius: 8px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.18),
            rgba(255,255,255,0)
        );

    pointer-events: none;
}

/* خط زیرین قبلی به شکل برجسته‌تر */
.menuuu a::after {
    content: "";
    position: absolute;

    right: 50%;
    bottom: 4px;

    width: 0;
    height: 3px;

    border-radius: 5px;

    background: #cbe961;

    transform: translateX(50%);
    transition: width .22s ease;
}

/* حالت hover */
.menuuu a:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #168bd4 0%,
            #006ab2 48%,
            #00477f 100%
        );

    transform:
        translateY(-3px)
        translateZ(5px);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.24),
        inset 0 -4px 7px rgba(0,0,0,.20),
        0 7px 0 #002e58,
        0 11px 17px rgba(0,0,0,.34);
}

.menuuu a:hover::after {
    width: 65%;
}

/* دکمه فعال */
.menuuu a.active {
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #1687c9 0%,
            #0065a9 50%,
            #004477 100%
        );

    transform: translateY(-1px);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.24),
        inset 0 -4px 7px rgba(0,0,0,.22),
        0 5px 0 #002e58,
        0 8px 14px rgba(0,0,0,.30);
}

.menuuu a.active::after {
    width: 65%;
}

/* هنگام کلیک، دکمه واقعاً کمی فرو برود */
.menuuu a:active {
    transform: translateY(3px);

    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.25),
        inset 0 -2px 4px rgba(255,255,255,.10),
        0 1px 0 #002e58,
        0 3px 7px rgba(0,0,0,.25);
}

/* تبلت: دکمه‌ها کمی کوچک‌تر */
@media (max-width: 1100px) {

    .menuuu {
        gap: 6px;
    }

    .menuuu a {
        min-height: 38px;
        padding: 7px 10px;
        font-size: 13px;
        border-radius: 8px;

        box-shadow:
            inset 0 2px 2px rgba(255,255,255,.17),
            inset 0 -3px 5px rgba(0,0,0,.20),
            0 3px 0 #002e58,
            0 5px 9px rgba(0,0,0,.28);
    }

    .menuuu a:hover {
        box-shadow:
            inset 0 2px 3px rgba(255,255,255,.22),
            inset 0 -3px 6px rgba(0,0,0,.20),
            0 5px 0 #002e58,
            0 8px 13px rgba(0,0,0,.32);
    }
}

/* زیر 850px همان منوی همبرگری قبلی فعال می‌شود */
@media (max-width: 850px) {
    .menuuu {
        display: none;
    }
}

/* =========================================================
   ساعت
========================================================= */

.clockk {

    display: flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;

}


#clock {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 210px;

    padding:
        7px 12px;

    color:
        #edcc9a !important;

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

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

    border-radius:
        10px;

    font-family:
        "B Titr",
        Tahoma,
        sans-serif;

    font-size:
        14px;

    text-decoration:
        none;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, .08);

}


/* =========================================================
   دکمه دانلود اپلیکیشن
========================================================= */

#install-btn {

    border:
        none;

    border-radius:
        9px;

    padding:
        7px 13px;

    font-family:
        "B Titr",
        Tahoma,
        sans-serif;

    font-size:
        13px;

    background:
        linear-gradient(
            135deg,
            #2f9d44,
            #1d7430
        );

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

    transition:
        all .25s ease;

}


#install-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 12px rgba(0, 0, 0, .30);

}


/* =========================================================
   منوی همبرگری
========================================================= */

.openModal {

    z-index:
        1100 !important;

    position:
        fixed !important;

    top:
        12px !important;

    left:
        15px !important;

}


.hamburger {

    width:
        45px;

    height:
        42px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    cursor:
        pointer;

    border-radius:
        10px;

    background:
        rgba(0, 59, 115, .90);

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

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

    transition:
        all .25s ease;

}


.hamburger:hover {

    background:
        #0066b3;

    transform:
        scale(1.05);

}


.hamburger span {

    width:
        24px;

    height:
        3px;

    border-radius:
        5px;

    background:
        #ffffff;

    transition:
        all .25s ease;

}


/* =========================================================
   منوی موبایل
========================================================= */

.modalMenu {

    direction: rtl;

}


/* =========================================================
   تبلت
========================================================= */

@media (max-width: 1100px) {

    .school-top {

        padding-right:
            110px;

        padding-left:
            110px;

    }


    .menuuu a {

        padding:
            8px 8px;

        font-size:
            13px;

    }


    #clock {

        min-width:
            auto;

        font-size:
            12px;

    }

}


/* =========================================================
   تبلت کوچک
========================================================= */

@media (max-width: 850px) {

    .school-top {

        min-height:
            80px;

        padding:
            7px 100px;

    }


    .school-logo {

        width:
            65px;

        height:
            65px;

    }


    .school-name {

        font-size:
            19px;

        padding:
            5px 15px;

    }


    /* پرچم */

    .iran-flag-container {

        left:
            12px;

        width:
            82px;

        height:
            58px;

    }


    .iran-flag {

        width:
            76px;

        height:
            48px;

    }


    .login-area {

        right:
            10px;

    }


    .login-button {

        padding:
            5px 12px;

        font-size:
            13px;

    }


    .menuuu {

        display:
            none;

    }


    .navigation-inner {

        justify-content:
            center;

    }


    .clockk {

        width:
            100%;

        justify-content:
            center;

    }

}


/* =========================================================
   موبایل
========================================================= */

@media (max-width: 600px) {

    .school-top {

        min-height:
            75px;

        padding:
            5px 75px;

    }


    .school-brand {

        gap:
            8px;

    }


    .school-logo {

        width:
            55px;

        height:
            55px;

    }


    .school-name {

        font-size:
            15px;

        padding:
            4px 9px;

    }


    /* پرچم موبایل */

    .iran-flag-container {

        left:
            8px;

        width:
            62px;

        height:
            43px;

    }


    .iran-flag {

        width:
            58px;

        height:
            37px;

    }


    .login-area {

        right:
            7px;

    }


    .login-button {

        padding:
            4px 8px;

        font-size:
            11px;

    }


    #install-btn {

        display:
            none;

    }


    #clock {

        font-size:
            11px;

        padding:
            5px 8px;

    }

}


/* =========================================================
   کنترل منوی همبرگری و منوی موبایل
   منوی اصلی تا عرض 850px نمایش داده می‌شود.
   از عرض 850px به پایین، همبرگر فعال می‌شود.
========================================================= */

/* در دسکتاپ، همبرگر و منوی موبایل کاملاً مخفی هستند */
.openModal {
    display: none;
}

.modalMenu {
    display: none;
}

/* منوی موبایلِ بازشده */
.modalMenu.open {
    display: flex;
    position: fixed;
    top: 64px;
    left: 15px;
    width: min(280px, calc(100vw - 30px));
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    box-sizing: border-box;
    direction: rtl;
    background: rgba(0, 43, 83, .98);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
    z-index: 1099;
}

.modalMenu a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    color: #edcc9a !important;
    text-decoration: none !important;
    font-family: "B Titr", Tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    text-align: right;
    white-space: nowrap;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    transition: all .2s ease;
}

.modalMenu a:hover,
.modalMenu a:focus {
    color: #ffffff !important;
    background: rgba(203, 233, 95, .18);
    transform: translateX(-2px);
    outline: none;
}

/* حالت فعال در منوی موبایل */
.modalMenu a.active {
    color: #ffffff !important;
    background: rgba(203, 233, 95, .18);
}

/* انیمیشن سه خط همبرگر */
.hamburger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* فقط در عرض‌های کوچک، منوی اصلی مخفی و همبرگر فعال شود */
@media (max-width: 850px) {

    .menuuu {
        display: none !important;
    }

    .openModal {
        display: block;
        position: fixed !important;
        top: 12px !important;
        left: 15px !important;
        z-index: 1100 !important;
    }

    .hamburger {
        display: flex;
    }

    .modalMenu.open {
        display: flex;
    }

}

/* در نمایشگرهای خیلی کوچک */
@media (max-width: 600px) {

    .openModal {
        top: 10px !important;
        left: 10px !important;
    }

    .hamburger {
        width: 42px;
        height: 40px;
    }

    .modalMenu.open {
        top: 58px;
        left: 10px;
        width: calc(100vw - 20px);
        max-height: calc(100vh - 70px);
    }

    .modalMenu a {
        padding: 10px 12px;
        font-size: 14px;
    }

}

/* جلوگیری از باز ماندن منوی موبایل در دسکتاپ */
@media (min-width: 851px) {
    .openModal,
    .modalMenu,
    .modalMenu.open {
        display: none !important;
    }

    .menuuu {
        display: flex;
    }
}

  /* ===================== FOOTER ===================== */
  .site-footer{
    position:relative;
    margin-top:140px;
    background:var(--grape);
    color:var(--white);
    padding:20px 5% 30px;
    overflow:visible;
  }
  .footer-wave{
    position:absolute;
    top:-119px; left:0; right:0;
    line-height:0;
    pointer-events:none;
  }
  .footer-wave svg{
    width:100%;
    height:120px;
    display:block;
  }
  .cloud-shape{
    fill:var(--grape);
  }
  .footer-inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1.1fr;
    gap:30px;
    position:relative;
    z-index:2;
  }
  .footer-col h4{
    font-size:1.05rem;
    margin-bottom:16px;
    color:var(--sun);
    font-weight:800;
  }
  .footer-col p{
    font-size:0.9rem;
    line-height:1.9;
    color:#E4DEF5;
  }
  .footer-col ul li{margin-bottom:10px;}
  .footer-col ul li a{
    font-size:0.9rem;
    color:#E4DEF5;
    transition:all .2s ease;
    display:inline-block;
    border-radius:8px;
    padding:2px 4px;
  }
  .footer-col ul li a:hover{
    color:var(--sun);
    transform:translateX(-4px);
  }
  .footer-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    font-size:1.4rem;
    margin-bottom:14px;
  }
  .footer-logo .logo-bubble{
    width:55px; height:55px;
    border-radius: 100%;
    background:var(--mint);
    color:var(--grape);
  }
  .social-row{
    display:flex;
    gap:10px;
    margin-top:16px;
  }
  .social-row a{
    width:40px; height:40px;
    background:rgba(255,255,255,0.12);
    border-radius:50% 50% 50% 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    transition:all .25s ease;
  }
  .social-row a:hover{
    background:var(--coral);
    transform:translateY(-4px) rotate(-6deg);
  }
  .footer-bottom{
    max-width:1200px;
    margin:40px auto 0;
    padding-top:20px;
    border-top:2px dashed rgba(255,255,255,0.2);
    text-align:center;
    font-size:0.85rem;
    color:#C9C1E8;
    position:relative;
    z-index:2;
  }

  @media(max-width:900px){
    .header-inner{justify-content:center; text-align:center;}
    .nav-pills{order:3; width:100%; justify-content:center;}
    .footer-inner{grid-template-columns:1fr 1fr; }
  }
  @media(max-width:520px){
    .footer-inner{grid-template-columns:1fr;}
    .logo{font-size:1.3rem;}
  }

    /* =========================================================
   اسلایدر
   ========================================================= */

    .post1 .slideshows-containers {
        position: relative !important;
        width: min(100%, 1100px) !important;
        height: clamp(250px, 42vw, 0px) !important;

        margin: 0 auto !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        overflow: visible !important;

        perspective: 1400px;
        direction: ltr;
    }


    /* =========================================================
   همه اسلایدها
   ========================================================= */

    .post1 .mySlidess {
        display: block !important;

        position: absolute !important;

        top: 0 !important;
        left: 50% !important;

        width: 72% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        border-radius: 16px;

        background: #fff;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        box-sizing: border-box !important;

        box-shadow:
            0 12px 28px rgba(0, 0, 0, .18);

        transition:
            transform .65s cubic-bezier(.22, .61, .36, 1),
            opacity .55s ease,
            filter .55s ease;
    }


    .post1 .mySlidess img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;

        user-select: none;
        -webkit-user-drag: none;
    }


    /* =========================================================
   اسلاید اصلی
   ========================================================= */

    .post1 .mySlidess.slide-active {

        opacity: 1;
        visibility: visible;

        transform:
            translateX(-50%) translateZ(80px) scale(1);

        filter: none;

        z-index: 100;

        pointer-events: auto;

        box-shadow:
            0 18px 38px rgba(0, 0, 0, .25);
    }


    /* =========================================================
   اسلاید قبلی
   سمت چپ
   کوچک‌تر از اسلاید اصلی
   ========================================================= */

    .post1 .mySlidess.slide-prev-1 {

        width: 22% !important;
        height: 72% !important;

        top: 14% !important;
        left: -7% !important;

        opacity: .78;
        visibility: visible;

        transform:
            translateZ(-100px) scale(.88);

        filter: brightness(.72);

        z-index: 20;

        pointer-events: none;

        border-radius: 12px;

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


    /* =========================================================
   اسلاید بعدی
   سمت راست
   کوچک‌تر از اسلاید اصلی
   ========================================================= */

    .post1 .mySlidess.slide-next-1 {

        width: 22% !important;
        height: 72% !important;

        top: 14% !important;
        left: auto !important;
        right: -7% !important;

        opacity: .78;
        visibility: visible;

        transform:
            translateZ(-100px) scale(.88);

        filter: brightness(.72);

        z-index: 20;

        pointer-events: none;

        border-radius: 12px;

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


    /* =========================================================
   اسلایدهای دوم و بیشتر کاملاً مخفی
   ========================================================= */

    .post1 .mySlidess.slide-next-2,
    .post1 .mySlidess.slide-prev-2,
    .post1 .mySlidess.slide-next-3,
    .post1 .mySlidess.slide-prev-3,
    .post1 .mySlidess.slide-hidden {

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        transform:
            translateX(-50%) translateZ(-200px) scale(.55);

        z-index: 1;
    }


    /* =========================================================
   شماره اسلاید
   ========================================================= */

    .post1 .mySlidess .numbertext {

        position: absolute;

        top: 10px;
        right: 12px;

        z-index: 70;

        padding: 4px 8px;

        border-radius: 8px;

        color: #fff;

        background:
            rgba(0, 0, 0, .42);

        font:
            12px Tahoma, sans-serif;

        backdrop-filter:
            blur(5px);
    }


    /* =========================================================
   دکمه‌های چپ و راست
   ========================================================= */

    .post1 .slider-arrow {

        position: absolute !important;

        top: 50% !important;

        width: 38px !important;
        height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

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

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

        border-radius: 50%;

        color: #fff;

        background:
            rgba(0, 65, 115, .88);

        box-shadow:
            0 6px 16px rgba(0, 0, 0, .28),
            inset 0 1px rgba(255, 255, 255, .20);

        cursor: pointer;

        transform:
            translateY(-50%);

        z-index: 200;

        transition:
            transform .2s ease,
            background .2s ease;
    }


    .post1 .slider-arrow:hover {

        background:
            rgba(0, 105, 178, .98);

        transform:
            translateY(-50%) scale(1.08);
    }


    .post1 .slider-arrow:active {

        transform:
            translateY(-50%) scale(.94);
    }


    /* دکمه چپ */

    .post1 .slider-arrow-left {

        left: 0 !important;
        right: auto !important;
    }


    /* دکمه راست */

    .post1 .slider-arrow-right {

        right: 0 !important;
        left: auto !important;
    }


    .post1 .slider-arrow svg {

        width: 18px;
        height: 18px;

        fill: currentColor;
    }


    /* =========================================================
   نوار پیشرفت قدیمی حذف شود
   ========================================================= */

    .post1>.main-progressbar {

        display: none !important;
    }


    /* =========================================================
   بخش پایین
   ========================================================= */

    .post1 .slider-bottom {

        width: min(100%, 190px);

        margin:
            10px auto 0;

        display: flex;

        flex-direction: column;

        align-items: center;
    }


    /* =========================================================
   نقاط
   ========================================================= */

    .post1 .slider-dots {

        width: 100%;

        display: flex;

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

        gap: 7px;

        direction: ltr;
    }


    .post1 .dotss {

        display: inline-block;

        flex:
            0 0 8px;

        width: 8px;
        height: 8px;

        border-radius: 50%;

        background:
            #b9b9b9;

        cursor: pointer;

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


    .post1 .dotss:hover {

        transform:
            scale(1.25);
    }


    .post1 .dotss.active {

        background:
            #087ac1;

        transform:
            scale(1.3);

        box-shadow:
            0 0 0 2px rgba(8, 122, 193, .14);
    }


    /* =========================================================
   نوار پیشرفت
   ========================================================= */

    .post1 .slider-progress {

        position: relative;

        width: 100%;

        height: 3px;

        margin-top: 7px;

        overflow: hidden;

        border-radius: 10px;

        background:
            rgba(0, 0, 0, .14);
    }


    .post1 .slider-progress .proccess-bar {

        display: block !important;

        width: 0;

        height: 100%;

        min-width: 0;

        border-radius: 10px;

        background:
            #087ac1;

        transition:
            width .08s linear;
    }


    /* =========================================================
   تبلت
   ========================================================= */

    @media (max-width: 900px) {

        .post1 .slideshows-containers {

            width: 100% !important;

            height:
                clamp(220px, 48vw, 430px) !important;
        }


        .post1 .mySlidess {

            width: 68% !important;
        }


        .post1 .mySlidess.slide-active {

            transform:
                translateX(-50%) translateZ(60px) scale(1);
        }


        .post1 .mySlidess.slide-prev-1 {

            width: 20% !important;
            height: 68% !important;

            top: 16% !important;
            left: -5% !important;

            transform:
                translateZ(-80px) scale(.82);
        }


        .post1 .mySlidess.slide-next-1 {

            width: 20% !important;
            height: 68% !important;

            top: 16% !important;
            right: -5% !important;

            transform:
                translateZ(-80px) scale(.82);
        }


        .post1 .slider-bottom {

            width:
                min(100%, 175px);
        }
    }


    /* =========================================================
   موبایل
   ========================================================= */

    @media (max-width: 600px) {

        .post1 .slideshows-containers {

            height: 54vw !important;

            min-height: 190px !important;
        }


        .post1 .mySlidess {

            width: 64% !important;

            border-radius: 12px;
        }


        .post1 .mySlidess.slide-active {

            transform:
                translateX(-50%) translateZ(40px) scale(1);
        }


        .post1 .mySlidess.slide-prev-1 {

            width: 19% !important;
            height: 62% !important;

            top: 19% !important;
            left: -3% !important;

            transform:
                translateZ(-60px) scale(.78);
        }


        .post1 .mySlidess.slide-next-1 {

            width: 19% !important;
            height: 62% !important;

            top: 19% !important;
            right: -3% !important;

            transform:
                translateZ(-60px) scale(.78);
        }


        .post1 .slider-arrow {

            width: 32px !important;
            height: 32px !important;
        }


        .post1 .slider-arrow svg {

            width: 15px;
            height: 15px;
        }


        .post1 .slider-bottom {

            width: 155px;

            margin-top: 8px;
        }


        .post1 .dotss {

            width: 7px;
            height: 7px;

            flex-basis: 7px;
        }


        .post1 .slider-progress {

            height: 2px;

            margin-top: 6px;
        }
    }








  
/* =========================================================
   بخش ورود کاربران مدرسه
   Modern School Login Cards
   ========================================================= */

.school-login-section {
    width: 100%;
    max-width: 1120px;
    margin: 25px auto 10px;
    padding: 0 18px;
    box-sizing: border-box;
    direction: rtl;
}


/* =========================================================
   عنوان
   ========================================================= */

.school-login-title {
    text-align: center;
    margin-bottom: 28px;
}

.school-login-title h2 {
    margin: 0 0 8px;

    color: #1e293b;

    font-family:
        Tahoma,
        "B Titr",
        sans-serif;

    font-size: clamp(21px, 3vw, 30px);
    font-weight: 700;
    line-height: 1.5;
}

.school-login-title p {
    margin: 0;

    color: #64748b;

    font-family:
        Tahoma,
        sans-serif;

    font-size: 14px;
    line-height: 1.8;
}

.school-login-title-line {
    width: 55px;
    height: 4px;

    margin: 12px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #087ac1,
            #18b4c9
        );
}


/* =========================================================
   شبکه کارت‌ها
   ========================================================= */

.school-login-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;
}


/* =========================================================
   لینک
   ========================================================= */

.school-login-card-link {
    display: block;

    width: 100%;

    color: inherit;
    text-decoration: none;

    outline: none;
}


/* =========================================================
   کارت اصلی
   ========================================================= */

.school-login-card {

    position: relative;

    min-height: 245px;

    padding: 18px;

    box-sizing: border-box;

    overflow: hidden;

    border:
        1px solid
        rgba(15, 23, 42, .08);

    border-radius: 22px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    text-align: center;

    isolation: isolate;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, .07);

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


/* =========================================================
   هاله رنگی
   ========================================================= */

.school-login-card::before {

    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    top: -85px;
    right: -70px;

    border-radius: 50%;

    background:
        var(--card-color);

    opacity: .16;

    z-index: -1;

    transition:
        transform .45s ease,
        opacity .35s ease;
}


/* =========================================================
   نوار رنگی بالای کارت
   ========================================================= */

.school-login-card::after {

    content: "";

    position: absolute;

    top: 0;
    right: 18px;
    left: 18px;

    height: 5px;

    border-radius:
        0 0 10px 10px;

    background:
        var(--card-color);

    opacity: 1;
}


/* =========================================================
   Hover کارت
   ========================================================= */

.school-login-card-link:hover
.school-login-card {

    transform:
        translateY(-7px);

    border-color:
        color-mix(
            in srgb,
            var(--card-color) 40%,
            transparent
        );

    box-shadow:
        0 18px 40px
        color-mix(
            in srgb,
            var(--card-color) 18%,
            transparent
        );
}


.school-login-card-link:hover
.school-login-card::before {

    transform:
        scale(1.8);

    opacity: .24;
}


/* =========================================================
   Focus
   ========================================================= */

.school-login-card-link:focus-visible
.school-login-card {

    outline:
        3px solid
        color-mix(
            in srgb,
            var(--card-color) 40%,
            white
        );

    outline-offset: 3px;
}


/* =========================================================
   قاب تصویر
   ========================================================= */

.school-login-image-box {

    position: relative;

    width: 92px;
    height: 92px;

    margin-top: 8px;

    padding: 5px;

    box-sizing: border-box;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--card-color),
            color-mix(
                in srgb,
                var(--card-color) 70%,
                white
            )
        );

    box-shadow:
        0 9px 23px
        color-mix(
            in srgb,
            var(--card-color) 38%,
            transparent
        );

    transition:
        transform .4s cubic-bezier(.22,.61,.36,1),
        box-shadow .4s ease;
}


/* =========================================================
   Hover تصویر
   ========================================================= */

.school-login-card-link:hover
.school-login-image-box {

    transform:
        scale(1.07)
        rotate(-2deg);

    box-shadow:
        0 12px 28px
        color-mix(
            in srgb,
            var(--card-color) 45%,
            transparent
        );
}


/* =========================================================
   تصویر
   ========================================================= */

.school-login-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    background: #fff;

    border:
        3px solid #fff;

    box-sizing: border-box;
}


/* =========================================================
   اطلاعات
   ========================================================= */

.school-login-info {

    width: 100%;

    margin-top: 13px;
}

.school-login-role {

    margin: 0;

    color: #172033;

    font-family:
        Tahoma,
        "B Titr",
        sans-serif;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.6;
}

.school-login-description {

    margin: 4px 0 0;

    color: #64748b;

    font-family:
        Tahoma,
        sans-serif;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   دکمه ورود
   ========================================================= */

.school-login-enter {

    width: 100%;

    margin-top: 14px;

    padding: 9px 13px;

    box-sizing: border-box;

    display: flex;

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

    gap: 7px;

    border-radius: 12px;

    color: #fff;

    background:
        var(--card-color);

    font-family:
        Tahoma,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 5px 13px
        color-mix(
            in srgb,
            var(--card-color) 28%,
            transparent
        );

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


.school-login-card-link:hover
.school-login-enter {

    color: #fff;

    background:
        color-mix(
            in srgb,
            var(--card-color) 88%,
            #000
        );

    gap: 11px;

    box-shadow:
        0 8px 18px
        color-mix(
            in srgb,
            var(--card-color) 38%,
            transparent
        );
}


/* =========================================================
   فلش
   ========================================================= */

.school-login-arrow {

    display: flex;

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

    width: 20px;
    height: 20px;

    border-radius: 50%;

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

    transition:
        transform .3s ease;
}


.school-login-card-link:hover
.school-login-arrow {

    transform:
        translateX(-3px);
}


.school-login-arrow svg {

    width: 13px;
    height: 13px;

    fill: currentColor;
}


/* =========================================================
   رنگ دانش‌آموز
   ========================================================= */

.school-card-student {

    --card-color: #0a8f35;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #effff3 35%,
            #d2f7dc 100%
        );

    border-color:
        rgba(10,143,53,.25);
}


/* =========================================================
   رنگ معلم
   ========================================================= */

.school-card-teacher {

    --card-color: #7135b5;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f0ff 35%,
            #e7d5ff 100%
        );

    border-color:
        rgba(113,53,181,.25);
}


/* =========================================================
   رنگ مدیریت
   ========================================================= */

.school-card-management {

    --card-color: #1266c4;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #eef6ff 35%,
            #d3e8ff 100%
        );

    border-color:
        rgba(18,102,196,.25);
}


/* =========================================================
   رنگ والدین
   ========================================================= */

.school-card-parent {

    --card-color: #c91868;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fff0f7 35%,
            #ffd5e7 100%
        );

    border-color:
        rgba(201,24,104,.25);
}


/* =========================================================
   رنگ مشاور
   ========================================================= */

.school-card-consultant {

    --card-color: #0798ad;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ecfcff 35%,
            #cef5fa 100%
        );

    border-color:
        rgba(7,152,173,.25);
}


/* =========================================================
   رنگ کارمندان
   ========================================================= */

.school-card-employee {

    --card-color: #e64a19;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fff4ee 35%,
            #ffdccc 100%
        );

    border-color:
        rgba(230,74,25,.25);
}


/* =========================================================
   تبلت
   ========================================================= */

@media (max-width: 900px) {

    .school-login-section {

        padding:
            0 14px;
    }


    .school-login-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 13px;
    }


    .school-login-card {

        min-height: 225px;

        padding: 14px;

        border-radius: 19px;
    }


    .school-login-image-box {

        width: 78px;
        height: 78px;
    }


    .school-login-role {

        font-size: 16px;
    }


    .school-login-description {

        font-size: 11px;
    }


    .school-login-enter {

        padding: 8px 9px;

        font-size: 11px;
    }
}


/* =========================================================
   موبایل
   ========================================================= */

@media (max-width: 600px) {

    .school-login-section {

        margin-top: 18px;

        padding:
            0 10px;
    }


    .school-login-title {

        margin-bottom: 20px;
    }


    .school-login-title h2 {

        font-size: 21px;
    }


    .school-login-title p {

        font-size: 12px;
    }


    .school-login-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 11px;
    }


    .school-login-card {

        min-height: 215px;

        padding: 12px;

        border-radius: 17px;
    }


    .school-login-card::after {

        right: 12px;
        left: 12px;

        height: 4px;
    }


    .school-login-image-box {

        width: 72px;
        height: 72px;

        margin-top: 6px;
    }


    .school-login-info {

        margin-top: 9px;
    }


    .school-login-role {

        font-size: 15px;
    }


    .school-login-description {

        font-size: 10px;

        line-height: 1.5;
    }


    .school-login-enter {

        margin-top: 9px;

        padding: 7px;

        border-radius: 10px;

        font-size: 10px;
    }


    .school-login-arrow {

        width: 18px;
        height: 18px;
    }
}


/* =========================================================
   موبایل خیلی کوچک
   ========================================================= */

@media (max-width: 380px) {

    .school-login-grid {

        gap: 8px;
    }


    .school-login-card {

        min-height: 195px;

        padding: 10px;
    }


    .school-login-image-box {

        width: 62px;
        height: 62px;
    }


    .school-login-role {

        font-size: 14px;
    }


    .school-login-description {

        display: none;
    }


    .school-login-enter {

        margin-top: 7px;
    }
}
/* فورم ها */


    /* ===================== پایه و متغیرها ===================== */
    .reg-wrapper * { box-sizing: border-box; }

    .reg-wrapper {
        --blue: #1a73c4;
        --blue-dark: #158bda;
        --gray: #5f8a8a;
        --gray-dark: #4d7373;
        --border: #d8dce2;
        --hint: #8a8a8a;
        --success: #1f8c3c;
        --error: #d33;
        --radius: 6px;
        direction: rtl;
        font-family: "b koodak", Tahoma, sans-serif;
        margin: 20px 0;
    }

    .reg-wrapper .reg-container {
        max-width: 760px;
        margin: 0 auto;
        padding: 0 10px;
    }

    .reg-wrapper .error-message {
        color: var(--error);
        font-family: "b titr", Tahoma, sans-serif;
        font-size: 17px;
        text-align: center;
        margin-bottom: 15px;
    }

    /* ===================== کارت / پنل عمومی ===================== */
    .reg-wrapper .panel {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        margin: 10px 0;
    }

    .reg-wrapper .panel-header {
        background: var(--blue);
        color: #fff;
        text-align: center;
        padding: 10px 8px;
        font-family: "b titr", Tahoma, sans-serif;
        font-size: 16px;
    }

    /* ===================== کارت موفقیت ثبت‌نام ===================== */
    .reg-wrapper .success-title {
        color: var(--success);
        font-family: "b titr", Tahoma, sans-serif;
        font-size: 17px;
        text-align: center;
        padding: 10px 0;
    }

    .reg-wrapper .info-table {
        width: 100%;
        border-collapse: collapse;
    }

    .reg-wrapper .info-table td {
        padding: 8px 14px;
        color: #222;
        font-size: 15px;
        border-bottom: 1px solid #eee;
    }

    .reg-wrapper .info-table tr:last-child td {
        border-bottom: none;
    }

    .reg-wrapper .info-table td:first-child {
        color: #555;
        white-space: nowrap;
        width: 35%;
    }

    /* ===================== فرم اصلی ===================== */
    .reg-wrapper .form-table {
        width: 100%;
        border-collapse: collapse;
    }

    .reg-wrapper .form-table tr {
        border-bottom: 1px solid var(--bgboxw);
    }

    .reg-wrapper .form-table td {
        padding: 10px 8px;
        color: #222;
        vertical-align: middle;
    }

    .reg-wrapper .field-label {
        width: 160px;
        white-space: nowrap;
        font-size: 14.5px;
        color: #2b2b2b;
    }

    .reg-wrapper .field-required {
        color: var(--error);
        font-weight: bold;
        padding-right: 4px;
    }

    .reg-wrapper .field-hint {
        color: var(--hint);
        font-size: 12.5px;
        white-space: nowrap;
    }

    /* ===================== ورودی‌های متن ===================== */
    .reg-wrapper input[type="text"],
    .reg-wrapper textarea,
    .reg-wrapper select {
        width: 100%;
        max-width: 340px;
        font-family: inherit;
        font-size: 14px;
        color: #333;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 7px 10px;
        outline: none;
        text-align: center;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .reg-wrapper input[type="text"]:focus,
    .reg-wrapper textarea:focus,
    .reg-wrapper select:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(26, 115, 196, .12);
    }

    .reg-wrapper input[readonly] {
        background: #f6f7f8;
        color: #555;
        cursor: default;
    }

    .reg-wrapper textarea {
        max-width: 377px;
        width: 94%;
        height: 50px;
        resize: vertical;
    }

    .reg-wrapper select {
        max-width: none;
        width: 100%;
        cursor: pointer;
    }

    /* ===================== جنسیت (رادیو) ===================== */
    .reg-wrapper .gender-group {
        display: inline-flex;
        align-items: center;
        gap: 18px;
    }

    .reg-wrapper .gender-group label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        font-size: 14px;
    }

    .reg-wrapper input.Gender {
        width: 16px;
        height: 16px;
        accent-color: var(--blue);
        cursor: pointer;
    }

    /* ===================== آپلود فایل ===================== */
    .reg-wrapper input.file {
        max-width: 230px;
        font-size: 13px;
        border: 1px dashed var(--border);
        border-radius: 4px;
        padding: 6px;
        background: #fafbfc;
        cursor: pointer;
    }

    .reg-wrapper .file-link {
        display: inline-block;
        text-decoration: none;
        background: #e8894a;
        color: #fff;
        padding: 4px 22px;
        border-radius: 5px;
        font-size: 13px;
        transition: background .15s ease;
    }

    .reg-wrapper .file-link:hover {
        background: #d67437;
    }

    .reg-wrapper .no-file-text {
        color: var(--hint);
        font-size: 13px;
    }

    .reg-wrapper .avatar-preview {
        display: block;
        margin: 0 auto;
        height: 130px;
        width: 130px;
        object-fit: cover;
        border: 1px solid #e3dbdb;
        border-radius: 50%;
    }

    .reg-wrapper .no-avatar-text {
        text-align: center;
        color: var(--hint);
        font-size: 13px;
    }

    /* ===================== تاریخ تولد ===================== */
    .reg-wrapper .date-field {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .reg-wrapper .date-field input {
        max-width: 200px;
        text-align: center;
    }

    .reg-wrapper .date-field img {
        cursor: pointer;
        width: 20px;
        height: 20px;
    }

    /* ===================== دکمه‌ها ===================== */
    .reg-wrapper .btn {
        display: inline-block;
        font-family: "b titr", Tahoma, sans-serif;
        font-size: 15px;
        border: none;
        border-radius: 5px;
        padding: 8px 20px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        transition: background .15s ease, transform .05s ease;
    }

    .reg-wrapper .btn:active {
        transform: translateY(1px);
    }

    .reg-wrapper .btn-primary {
        background: var(--blue-dark);
        color: #fff;
        width: 100%;
        max-width: 220px;
    }

    .reg-wrapper .btn-primary:hover {
        background: var(--blue);
    }

    .reg-wrapper .btn-secondary {
        background: var(--gray);
        color: #fff;
    }

    .reg-wrapper .btn-secondary:hover {
        background: var(--gray-dark);
    }

    .reg-wrapper .form-actions-row td {
        padding-top: 18px;
    }

    .reg-wrapper .print-btn {
        width: 100%;
        font-family: "b titr", Tahoma, sans-serif;
        background: var(--blue-dark);
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 8px 0;
        cursor: pointer;
    }

    .reg-wrapper .print-btn:hover {
        background: var(--blue);
    }

    /* ===================== ریسپانسیو ===================== */
    .reg-wrapper .table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    @media (max-width: 700px) {
        .reg-wrapper .form-table tr {
            display: grid;
            padding: 8px 0;
        }
        .reg-wrapper .field-label {
            width: auto;
        }
        .reg-wrapper input[type="text"],
        .reg-wrapper textarea {
            max-width: 100%;
            width: 100%;
        }
    }

    @media print {
        .reg-wrapper .noprint {
            display: none;
        }
    }


    /* درباره ما */

      :root{
    --yellow:#FFC845;
    --turquoise:#2EC4B6;
    --coral:#FF6F91;
    --purple:#8C7AE6;
    --mint:#A8E6A1;
    --ink:#24272B;
    --cream:#FFFBF3;
    --paper:#FFFFFF;
    --line: rgba(36,39,43,0.12);
  }
  /* ---------- shape helpers (signature motif: circle / star / triangle badges) ---------- */
  .shape{ display:flex; align-items:center; justify-content:center; border:2.5px solid var(--ink); }
  .shape.circle{ border-radius:50%; }
  .shape.triangle{ clip-path:polygon(50% 6%, 95% 92%, 5% 92%); border-radius:16px; }
  .shape.star{ clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); border:none; }

  .confetti{ position:absolute; z-index:0; pointer-events:none; opacity:0.9; }
  @keyframes floaty{ 0%,100%{transform:translateY(0) rotate(var(--r,0deg));} 50%{transform:translateY(-14px) rotate(var(--r,0deg));} }
  .confetti{ animation:floaty 6s ease-in-out infinite; }
  /* ---------- Hero ---------- */
  .hero{
    position:relative; max-width:1180px; margin:0 auto; padding:80px 28px 110px;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--mint); border:2.5px solid var(--ink);
    padding:6px 16px; border-radius:999px; font-weight:700; font-size:0.85rem;
    margin-bottom:22px;
  }
  .hero h1{
    font-size:3rem; font-weight:900; line-height:1.3; letter-spacing:-1px; margin-bottom:22px;
  }
  .hero h1 span{
    color:var(--coral);
    text-decoration:underline; text-decoration-style:wavy; text-decoration-color:var(--yellow);
    text-underline-offset:8px; text-decoration-thickness:3px;
  }
  .hero p{ font-size:1.08rem; color:#525252; max-width:520px; margin-bottom:32px; }
  .hero-btns{ display:flex; gap:16px; flex-wrap:wrap; }
  .btn-primary{
    background:var(--ink); color:var(--paper); padding:15px 30px;
    border-radius:999px; font-weight:700; text-decoration:none; font-size:1rem;
    border:2.5px solid var(--ink); transition:transform .2s ease, background .2s ease;
    display:inline-block;
  }
  .btn-primary:hover{ background:var(--coral); border-color:var(--coral); transform:translateY(-2px) rotate(-1deg); }
  .btn-ghost{
    padding:15px 30px; border-radius:999px; font-weight:700; text-decoration:none; font-size:1rem;
    border:2.5px solid var(--ink); color:var(--ink); display:inline-block; transition:transform .2s ease;
  }
  .btn-ghost:hover{ transform:translateY(-2px) rotate(1deg); background:#fff; }

  .hero-art{ position:relative; height:420px; }
  .hero-art .blob{
    position:absolute; width:300px; height:300px; border-radius:50%;
    background:var(--yellow); top:40px; right:40px; opacity:0.35;
  }
  .hero-art .card{
    position:absolute; width:230px; background:var(--paper); border:3px solid var(--ink);
    border-radius:24px; padding:22px; top:70px; right:70px; text-align:center;
  }
  .hero-art .card .em{ font-size:2.4rem; margin-bottom:8px; }
  .hero-art .card b{ font-size:1.5rem; display:block; color:var(--coral); }
  .hero-art .card span{ font-size:0.82rem; color:#666; font-weight:600; }

  .hero-art .c1{ top:10px; right:0; background:var(--coral); width:56px; height:56px; font-size:1.4rem; --r:-8deg; }
  .hero-art .c2{ top:270px; right:250px; background:var(--turquoise); width:64px; height:64px; font-size:1.6rem; --r:10deg; }
  .hero-art .c3{ top:300px; right:20px; background:var(--purple); width:48px; height:48px; font-size:1.2rem; --r:6deg; }
  .hero-art .c4{ top:0; right:210px; background:var(--mint); width:44px; height:44px; font-size:1.1rem; --r:-12deg; }

  @media(max-width:920px){
    .hero{ grid-template-columns:1fr; padding-top:50px; }
    .hero h1{ font-size:2.2rem; }
    .hero-art{ display:none; }
    nav ul{ display:none; }
  }

  /* ---------- Section shell ---------- */
  section{ position:relative; padding:90px 28px; }
  .section-inner{ max-width:1180px; margin:0 auto; position:relative; z-index:1; }
  .eyebrow{
    font-weight:700; color:var(--coral); font-size:0.9rem; margin-bottom:10px;
    display:flex; align-items:center; gap:8px;
  }
  .eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--coral); }
  h2.section-title{ font-size:2.2rem; font-weight:900; letter-spacing:-0.5px; max-width:640px; margin-bottom:18px; }
  .section-lead{ color:#525252; max-width:640px; font-size:1.02rem; }

  /* ---------- About ---------- */
  .about-sec{ background:var(--paper); }
  .about-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:60px; align-items:center; margin-top:40px; }
  .about-card{ background:var(--cream); border:3px solid var(--ink); border-radius:26px; padding:34px; position:relative; }
  .about-card::before{
    content:"از سال ۱۳۹۶"; position:absolute; top:-18px; right:28px;
    background:var(--yellow); border:2.5px solid var(--ink); border-radius:999px;
    padding:6px 16px; font-weight:800; font-size:0.85rem;
  }
  .about-card h3{ font-size:1.3rem; font-weight:800; margin-bottom:14px; }
  .about-card p{ color:#4a4a4a; margin-bottom:14px; font-size:0.98rem; }
  .about-stats{ display:flex; gap:14px; flex-wrap:wrap; margin-top:44px; }
  .stat-badge{ flex:1; min-width:130px; background:var(--cream); border:3px solid var(--ink); border-radius:20px; padding:22px 16px; text-align:center; }
  .stat-badge b{ display:block; font-size:1.9rem; font-weight:900; color:var(--coral); }
  .stat-badge span{ font-size:0.85rem; color:#555; font-weight:600; }
  @media(max-width:820px){ .about-grid{ grid-template-columns:1fr; } }

  /* ---------- Why us (in-person) ---------- */
  .why-sec{ background:var(--cream); }
  .feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px; }
  .feat-card{ background:var(--paper); border:3px solid var(--ink); border-radius:22px; padding:28px 22px; transition:transform .2s ease; }
  .feat-card:hover{ transform:translateY(-6px) rotate(-1deg); }
  .feat-icon{ width:54px; height:54px; font-size:1.5rem; margin-bottom:16px; }
  .feat-card:nth-child(1) .feat-icon{ background:var(--yellow); }
  .feat-card:nth-child(2) .feat-icon{ background:var(--turquoise); }
  .feat-card:nth-child(3) .feat-icon{ background:var(--coral); }
  .feat-card:nth-child(4) .feat-icon{ background:var(--mint); }
  .feat-card h4{ font-size:1.05rem; font-weight:800; margin-bottom:8px; }
  .feat-card p{ font-size:0.92rem; color:#555; }
  @media(max-width:920px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .feat-grid{ grid-template-columns:1fr; } }

  /* ---------- Online platform features (site capabilities) ---------- */
  .site-sec{ background:var(--ink); color:var(--paper); }
  .site-sec .eyebrow{ color:var(--yellow); }
  .site-sec .eyebrow .dot{ background:var(--yellow); }
  .site-sec .section-lead{ color:#c9c9c9; }

  .site-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
  .site-card{
    background:#2E3238; border:3px solid #3c4046; border-radius:22px; padding:26px;
    display:flex; gap:16px; align-items:flex-start; transition:transform .2s ease, border-color .2s ease;
  }
  .site-card:hover{ transform:translateY(-4px); border-color:var(--yellow); }
  .site-icon{ width:50px; height:50px; font-size:1.35rem; flex:none; }
  .site-card h4{ font-size:1.02rem; font-weight:800; margin-bottom:6px; }
  .site-card p{ font-size:0.9rem; color:#b8b8b8; }

  .mock-browser{
    margin-top:56px; background:var(--paper); color:var(--ink); border-radius:20px;
    border:3px solid #3c4046; overflow:hidden;
  }
  .mock-bar{ background:#EDEDED; padding:12px 16px; display:flex; gap:8px; align-items:center; }
  .mock-bar span{ width:11px; height:11px; border-radius:50%; display:inline-block; }
  .mock-bar span:nth-child(1){ background:var(--coral); }
  .mock-bar span:nth-child(2){ background:var(--yellow); }
  .mock-bar span:nth-child(3){ background:var(--mint); }
  .mock-body{ padding:30px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
  .mock-panel{ background:var(--cream); border-radius:14px; padding:18px; border:2px solid var(--line); }
  .mock-panel b{ display:block; font-size:0.85rem; margin-bottom:6px; }
  .mock-panel .bar{ height:8px; border-radius:6px; background:var(--turquoise); margin-bottom:6px; width:70%; }
  .mock-panel .bar.b2{ background:var(--coral); width:50%; }
  .mock-panel .bar.b3{ background:var(--yellow); width:85%; }
  @media(max-width:820px){ .site-grid{ grid-template-columns:1fr; } .mock-body{ grid-template-columns:1fr; } }

  /* ---------- Team - polaroid style, no hex ---------- */
  .team-sec{ background:var(--cream); }
  .team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:50px; }
  .team-card{
    background:var(--paper); border:3px solid var(--ink); border-radius:22px; padding:22px;
    text-align:center; transition:transform .2s ease;
  }
  .team-card:nth-child(2n){ transform:rotate(-1.2deg); }
  .team-card:nth-child(3n){ transform:rotate(1.2deg); }
  .team-card:hover{ transform:translateY(-6px) rotate(0deg); }
  .avatar{ width:76px; height:76px; margin:0 auto 14px; font-weight:900; font-size:1.4rem; }
  .team-card:nth-child(1) .avatar{ background:var(--yellow); }
  .team-card:nth-child(2) .avatar{ background:var(--coral); }
  .team-card:nth-child(3) .avatar{ background:var(--turquoise); }
  .team-card:nth-child(4) .avatar{ background:var(--purple); }
  .team-card:nth-child(5) .avatar{ background:var(--mint); }
  .team-card:nth-child(6) .avatar{ background:var(--yellow); }
  .team-card h5{ font-size:1.03rem; font-weight:800; margin-bottom:4px; }
  .team-card small{ font-size:0.8rem; font-weight:600; color:#666; }
  @media(max-width:820px){ .team-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .team-grid{ grid-template-columns:1fr; } }

  /* ---------- CTA ---------- */
  .cta-sec{ background:var(--yellow); }
  .cta-box{
    max-width:1180px; margin:0 auto; background:var(--ink); color:var(--paper);
    border-radius:32px; padding:60px 50px; text-align:center; position:relative; overflow:hidden;
  }
  .cta-box h2{ font-size:2.05rem; font-weight:900; margin-bottom:14px; }
  .cta-box p{ color:#c9c9c9; max-width:480px; margin:0 auto 30px; }
  .cta-box .btn-primary{ background:var(--coral); border-color:var(--coral); }
  .cta-box .btn-primary:hover{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }

  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }


  /* وبلاگ لیست */

  /* ---------- Page hero ---------- */
  .blog-hero{ max-width:1180px; margin:0 auto; padding:64px 28px 40px; }
  .eyebrow{ font-weight:700; color:var(--coral); font-size:0.9rem; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
  .eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--coral); }
  .blog-hero h1{ font-size:2.5rem; font-weight:900; letter-spacing:-1px; max-width:640px; margin-bottom:14px; }
  .blog-hero p{ color:#525252; max-width:560px; font-size:1.02rem; }

  /* ---------- Filter chips ---------- */
  .chip-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
  .chip{ border:2.5px solid var(--ink); background:var(--paper); padding:8px 18px; border-radius:999px; font-weight:700; font-size:0.88rem; cursor:pointer; transition:background .2s ease, transform .2s ease; }
  .chip:hover{ transform:translateY(-2px); }
  .chip.active{ background:var(--yellow); }

  /* ---------- Blog grid ---------- */
  .blog-wrap{ max-width:1180px; margin:0 auto; padding:20px 28px 100px; }
  .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:20px; }

  .post-card{
    background:var(--paper); border:3px solid var(--ink); border-radius:24px; overflow:hidden;
    display:flex; flex-direction:column; transition:transform .2s ease;min-height: 550px;
  }
  .post-card:hover{ transform:translateY(-6px); }

  .post-thumb{
    height:150px; display:flex; align-items:center; justify-content:center; font-size:2.6rem;
    border-bottom:3px solid var(--ink); position:relative;
  }
  .post-card:nth-child(6n+1) .post-thumb{ background:var(--yellow); }
  .post-card:nth-child(6n+2) .post-thumb{ background:var(--turquoise); }
  .post-card:nth-child(6n+3) .post-thumb{ background:var(--coral); }
  .post-card:nth-child(6n+4) .post-thumb{ background:var(--mint); }
  .post-card:nth-child(6n+5) .post-thumb{ background:var(--purple); }
  .post-card:nth-child(6n+6) .post-thumb{ background:var(--yellow); }

  .post-tag{
    position:absolute; top:12px; right:12px; background:var(--paper); border:2px solid var(--ink);
    border-radius:999px; padding:4px 12px; font-size:0.72rem; font-weight:800;
  }

  .post-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
  .post-title{ font-size:1.08rem; font-weight:800; margin-bottom:10px; line-height:1.6; }
  .post-excerpt{ font-size:0.9rem; color:#5a5a5a; flex:1; margin-bottom:18px; }

  .post-meta{
    display:flex; align-items:center; justify-content:space-between; font-size:0.8rem; color:#777;
    font-weight:600; margin-bottom:16px; padding-top:14px; border-top:2px dashed var(--line);
  }
  .post-meta span{ display:flex; align-items:center; gap:5px; }

  .post-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:var(--ink); color:var(--paper); text-decoration:none; font-weight:700; font-size:0.88rem;
    padding:11px 0; border-radius:999px; border:2.5px solid var(--ink); transition:background .2s ease, transform .2s ease;
  }
  .post-btn:hover{ background:var(--coral); border-color:var(--coral); transform:translateY(-2px); }

  @media(max-width:980px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:620px){ .blog-grid{ grid-template-columns:1fr; } }

  /* ---------- Pagination ---------- */
  .pagination{ display:flex; justify-content:center; gap:10px; margin-top:54px; }
  .page-btn{
    width:42px; height:42px; border:2.5px solid var(--ink); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.9rem;
    cursor:pointer; background:var(--paper); transition:background .2s ease;
  }
  .page-btn.active{ background:var(--yellow); }
  .page-btn:hover{ background:var(--mint); }



  /* ---------- Breadcrumb ---------- */
  .crumb{ max-width:820px; margin:36px auto 0; padding:0 28px; font-size:0.85rem; color:#777; display:flex; gap:8px; align-items:center; }
  .crumb a{ color:#777; text-decoration:none; font-weight:600; }
  .crumb a:hover{ color:var(--coral); }

  /* ---------- Post header ---------- */
  .post-header{ max-width:820px; margin:0 auto; padding:20px 28px 0; }
  .post-tag{
    display:inline-block; background:var(--mint); border:2.5px solid var(--ink); border-radius:999px;
    padding:6px 16px; font-weight:800; font-size:0.82rem; margin-bottom:20px;
  }
  .post-header h1{ font-size:2.3rem; font-weight:900; line-height:1.5; letter-spacing:-0.5px; margin-bottom:22px; }

  .post-meta-row{ display:flex; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:26px; }
  .author-chip{ display:flex; align-items:center; gap:10px; }
  .author-chip .av{ width:42px; height:42px; background:var(--coral); font-weight:900; font-size:0.95rem; flex:none; }
  .author-chip b{ display:block; font-size:0.9rem; }
  .author-chip span{ font-size:0.78rem; color:#777; }
  .meta-sep{ width:6px; height:6px; border-radius:50%; background:var(--line); }
  .meta-item{ font-size:0.85rem; color:#666; font-weight:600; display:flex; align-items:center; gap:5px; }

  /* ---------- Featured image ---------- */
  .post-hero-img{ max-width:1000px; margin:0 auto; padding:0 28px; }
  .post-hero-img .img-box{
    aspect-ratio: 16 / 8; border-radius:26px; border:3px solid var(--ink);
    display:flex; align-items:center; justify-content:center; font-size:4rem;
  }

  /* ---------- Article body ---------- */
  .post-body{ max-width:720px; margin:0 auto; padding:44px 28px 20px; font-size:1.05rem; color:#333; }
  .post-body p{ margin-bottom:22px; }
  .post-body h2{ font-size:1.4rem; font-weight:800; margin:40px 0 16px; }
  .post-body ul{ margin:0 0 22px; padding-right:22px; }
  .post-body li{ margin-bottom:10px; }
  .post-body .lead{ font-size:1.15rem; font-weight:600; color:var(--ink); }

  .pull-card{
    background:var(--paper); border:3px solid var(--ink); border-radius:20px; padding:24px 26px;
    margin:30px 0; display:flex; gap:16px; align-items:flex-start;
  }
  .pull-card .shape{ background:var(--yellow); width:42px; height:42px; font-size:1.1rem; flex:none; }
  .pull-card p{ margin:0; font-weight:700; font-size:0.98rem; }

  .inline-img{ margin:30px 0; }
  .inline-img .img-box{ aspect-ratio:16/9; border-radius:20px; border:3px solid var(--ink); display:flex; align-items:center; justify-content:center; font-size:3rem; background:var(--turquoise); }
  .inline-img figcaption{ text-align:center; font-size:0.82rem; color:#888; margin-top:10px; }

  /* ---------- Tags + share ---------- */
  .post-footer-row{
    max-width:720px; margin:36px auto 0; padding:26px 28px; border-top:2px dashed var(--line); border-bottom:2px dashed var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  }
  .tag-list{ display:flex; gap:10px; flex-wrap:wrap; }
  .tag-pill{ background:var(--cream); border:2px solid var(--ink); border-radius:999px; padding:6px 14px; font-size:0.8rem; font-weight:700; }
  .share-row{ display:flex; gap:10px; }
  .share-btn{ width:40px; height:40px; border:2.5px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; cursor:pointer; background:var(--paper); transition:background .2s ease; }
  .share-btn:hover{ background:var(--yellow); }

  /* ---------- Author box ---------- */
  .author-box{
    max-width:720px; margin:36px auto 0; padding:0 28px;
  }
  .author-box-inner{
    background:var(--ink); color:var(--paper); border-radius:24px; padding:30px; display:flex; gap:20px; align-items:center;
  }
  .author-box .av{ width:64px; height:64px; background:var(--yellow); color:var(--ink); font-weight:900; font-size:1.3rem; flex:none; }
  .author-box h4{ font-size:1.05rem; margin-bottom:6px; }
  .author-box p{ font-size:0.88rem; color:#c9c9c9; }

  /* ---------- Related posts ---------- */
  .related-sec{ max-width:1180px; margin:80px auto 0; padding:0 28px 100px; }
  .related-sec h3{ font-size:1.5rem; font-weight:900; margin-bottom:26px; }
  .related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .rel-card{ background:var(--paper); border:3px solid var(--ink); border-radius:22px; overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .2s ease; display:block; }
  .rel-card:hover{ transform:translateY(-5px); }
  .rel-card .img-box{ height:130px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; border-bottom:3px solid var(--ink); }
  .rel-card:nth-child(1) .img-box{ background:var(--coral); }
  .rel-card:nth-child(2) .img-box{ background:var(--turquoise); }
  .rel-card:nth-child(3) .img-box{ background:var(--purple); }
  .rel-body{ padding:18px 20px; }
  .rel-body h5{ font-size:0.95rem; font-weight:800; line-height:1.6; margin-bottom:8px; }
  .rel-body span{ font-size:0.78rem; color:#888; font-weight:600; }
  @media(max-width:900px){ .related-grid{ grid-template-columns:1fr; } }
   .spotlight-wrap{ width:100%; max-width: 1100px; margin: auto;}
 
  .spotlight-border{
    padding: 2px;
    border-radius: 28px;
    background: linear-gradient(120deg, var(--gold) 0%, var(--gold-2) 45%, var(--blue) 100%);
    box-shadow: 0 24px 60px -18px rgba(6,38,74,.35);
    margin: 20px 0;
  }
 
  .spotlight-card{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: #ffffff;
    border-radius: 26px;
    overflow: hidden;
  }
 
  /* --- ستون متن --- */
  .spotlight-body{
    flex: 1 1 320px;
    padding: 34px 34px 30px;
    display:flex;
    flex-direction: column;
    justify-content:center;
  }
 
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    align-self:flex-start;
    background: linear-gradient(120deg, var(--gold), var(--gold-2));
    color:#fff;
    font-weight:700;
    font-size: 12.5px;
    padding: 7px 16px;
    border-radius: 999px;
    box-shadow: 0 6px 16px -4px rgba(245,166,35,.55);
    margin-bottom: 18px;
  }
  .eyebrow svg{ width:14px; height:14px; }
 
  .spotlight-title{
    margin:0 0 12px;
    font-size: clamp(20px, 2.4vw, 27px);
    font-weight: 800;
    line-height:1.55;
    color: var(--navy);
  }
  .spotlight-title b{
    color: var(--gold-2);
    font-weight:900;
  }
 
  .spotlight-desc{
    margin:0 0 22px;
    font-size: 14.5px;
    line-height: 2;
    color: var(--ink);
    opacity:.85;
  }
 
  .spotlight-actions{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom: 18px;
  }
 
  .btn-continue{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: linear-gradient(120deg, var(--navy), var(--blue));
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size: 13.5px;
    padding: 12px 22px;
    border-radius: 999px;
    box-shadow: 0 10px 22px -8px rgba(15,102,176,.55);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .btn-continue:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -8px rgba(15,102,176,.65);
    filter: brightness(1.05);
  }
  .btn-continue svg{ width:15px; height:15px; transition: transform .18s ease; }
  .btn-continue:hover svg{ transform: translateX(-3px); }
 
  .spotlight-meta{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    font-size: 12.5px;
    color: var(--muted);
  }
  .spotlight-meta span{ display:inline-flex; align-items:center; gap:5px; }
  .spotlight-meta svg{ width:14px; height:14px; opacity:.8; }
 
  /* --- ستون تصویر --- */
  .spotlight-media{
    flex: 1 1 280px;
    position: relative;
    min-height: 260px;
    background: linear-gradient(160deg, #0b2f57, #0f66b0 65%, #1c7fce);
  }
  .spotlight-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: cover;
    mix-blend-mode: normal;
  }
  .spotlight-media::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(6,38,74,0) 40%, rgba(6,38,74,.55) 100%);
  }
 
  /* مدال دستاورد */
  .achieve-badge{
    position:absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--gold-2), var(--gold) 70%);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow: 0 12px 26px -6px rgba(245,122,69,.65), 0 0 0 6px rgba(255,255,255,.85);
  }
  .achieve-badge strong{ font-size: 24px; font-weight: 900; line-height:1; }
  .achieve-badge span{ font-size: 10.5px; font-weight:600; margin-top:3px; opacity:.95; }
 
  .partner-chip{
    position:absolute;
    top: 18px;
    right: 18px;
    z-index:2;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight:700;
    color: var(--navy);
    display:flex;
    align-items:center;
    gap:6px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }
  .partner-chip svg{ width:14px; height:14px; color: var(--gold-2); }
 
  @media (max-width: 620px){
    .spotlight-card{ flex-direction: column-reverse; }
    .spotlight-media{ min-height: 200px; }
    .achieve-badge{ width:80px; height:80px; left:16px; bottom:16px; }
    .achieve-badge strong{ font-size:20px; }
  }

 /* این استایل هم برای بخش وب  صفحه registration و هم برای ولکام پنل ها میباشد */
  :root{
    --ink:#161B2E;
    --muted:#8A90A6;
    --card:rgba(255,255,255,0.72);
    --card-border:rgba(255,255,255,0.9);

    --blue1:#4F6EF7;  --blue2:#7B8FFB;
    --teal1:#12B5A0;  --teal2:#3FD6BE;
    --amber1:#F7A83E; --amber2:#FBC978;
  }

  /* *{ box-sizing:border-box; }

  body{
    margin:0;
    min-height:100vh;
    font-family:'Vazirmatn', Tahoma, sans-serif;
    color:var(--ink);
    padding:56px 18px 80px;
    background:
      radial-gradient(600px 400px at 85% -5%, rgba(79,110,247,0.16), transparent 60%),
      radial-gradient(500px 380px at 5% 15%, rgba(18,181,160,0.14), transparent 60%),
      radial-gradient(650px 500px at 50% 110%, rgba(247,168,62,0.12), transparent 60%),
      #F4F6FB;
  } */


  .group{ margin-bottom:34px; }

  .group-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 16px;
    padding-right:2px;
  }

  .group-dot{
    width:9px; height:9px; border-radius:50%;
    box-shadow:0 0 0 4px currentColor;
    opacity:0.9;
  }
  .group.c-blue  .group-dot{ color:rgba(79,110,247,0.22); background:var(--blue1); }
  .group.c-teal  .group-dot{ color:rgba(18,181,160,0.22); background:var(--teal1); }
  .group.c-amber .group-dot{ color:rgba(247,168,62,0.22); background:var(--amber1); }

  .group-head h2{
    font-size:14px;
    font-weight:700;
    margin:0;
    color:#3A4159;
  }

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:14px;
  }

  .card{
    position:relative;
    background:var(--card);
    border:1px solid var(--card-border);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-radius:20px;
    padding:20px 14px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(22,27,46,0.04), 0 10px 24px -12px rgba(22,27,46,0.12);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, var(--g1), transparent 45%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:.55;
    pointer-events:none;
  }

  .card:hover{
    transform:translateY(-3px);
    box-shadow:0 4px 10px rgba(22,27,46,0.06), 0 18px 34px -14px rgba(22,27,46,0.22);
  }

  .card:active{ transform:translateY(-1px) scale(.98); }

  .icon-chip{
    width:46px; height:46px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--g1), var(--g2));
    box-shadow:0 6px 14px -6px var(--g1);
    flex-shrink:0;
  }
  .icon-chip i{ font-size:21px; color:#fff; }

  .card-label{
    font-size:12.5px;
    font-weight:600;
    line-height:1.45;
    color:#2B3350;
  }

  .c-blue  .card{ --g1:var(--blue1);  --g2:var(--blue2); }
  .c-teal  .card{ --g1:var(--teal1);  --g2:var(--teal2); }
  .c-amber .card{ --g1:var(--amber1); --g2:var(--amber2); }

  @media (max-width:520px){
    .grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
    .card{ padding:16px 10px 14px; border-radius:18px; }
    .icon-chip{ width:42px; height:42px; border-radius:12px; }
    .icon-chip i{ font-size:19px; }
    .card-label{ font-size:12px; }
  }



  .page{ max-width:1080px; margin:20px auto; }

  .header{ margin-bottom:36px; }
  .header h1{ font-size:26px; font-weight:800; margin:0 6px; }
  .header p{ font-size:13.5px; color:var(--muted); margin:0; }

  .group{ margin-bottom:30px; }

  .group-head{
    display:inline-flex;
    align-items:center;
    padding:6px 16px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
    margin:0 0 14px;
  }
  .c-blue  .group-head{ background:var(--blue-ink);  color:var(--blue); }
  .c-teal  .group-head{ background:var(--teal-ink);  color:var(--teal); }
  .c-amber .group-head{ background:var(--amber-ink); color:var(--amber); }

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:12px;
  }

  /* Card ---------------------------------------------------------*/
  .card{
    position:relative;
    border-radius:22px;
    padding:18px 14px 14px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:right;
    gap:22px;
    justify-content:space-between;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    border:2.5px solid var(--ink);
    box-shadow:4px 4px 0 var(--ink);
    transition:transform .12s ease, box-shadow .12s ease;
    min-height:118px;
    overflow:hidden;
    isolation:isolate;
    -webkit-tap-highlight-color:transparent;
  }

  .card:hover{
    transform:translate(-2px,-2px);
    box-shadow:6px 6px 0 var(--ink);
  }

  .icon-badge{
    width:50px; height:50px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.08);
    position:relative;
    z-index:1;
    padding: 4px;
  }
  .icon-badge i{ font-size:18px; }

  .card-label{
    font-size:13px;
    font-weight:700;
    line-height:1.45;
    position:relative;
    z-index:1;
  }

  .c-blue  .card{ background:var(--blue-ink);  }
  .c-blue  .icon-badge{ background:var(--blue); }
  .c-blue  .icon-badge i{ color:#fff; }
  .c-blue  .card-label{ color:#16225E; }

  .c-teal  .card{ background:var(--teal-ink); }
  .c-teal  .icon-badge{ background:var(--teal); }
  .c-teal  .icon-badge i{ color:#fff; }
  .c-teal  .card-label{ color:#0A4F3E; }

  .c-amber .card{ background:var(--amber-ink); }
  .c-amber .icon-badge{ background:var(--amber); }
  .c-amber .icon-badge i{ color:#fff; }
  .c-amber .card-label{ color:#7A3B0F; }

  /* Glass pane: invisible at rest and on hover. Only on click does
     a pane of glass "exist" for an instant — cracking, an impact
     flash, and 12 shards flying off — like a rock hitting glass. */
  .glass{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }

  .glass::after{
    content:"";
    position:absolute;
    left:46%; top:40%;
    width:14px; height:14px;
    margin:-7px 0 0 -7px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%);
    opacity:0;
  }
  .card.shattering .glass::after{
    animation: impactFlash .35s ease-out forwards;
  }
  @keyframes impactFlash{
    0%{ opacity:1; transform:scale(0.2); }
    100%{ opacity:0; transform:scale(3.4); }
  }

  .shard{
    position:absolute;
    inset:0;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.22) 55%, rgba(255,255,255,0.55)),
      radial-gradient(130px 70px at 22% 12%, rgba(255,255,255,0.75), transparent 62%);
    box-shadow: inset 0 0 0 40px rgba(255,255,255,0.06);
    opacity:0;
  }

  .cracks{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
  }
  .cracks line{
    stroke:rgba(255,255,255,0.95);
    stroke-width:1.4;
    vector-effect:non-scaling-stroke;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.25));
  }
  .card.shattering .cracks{
    animation: crackFlash .5s ease-out forwards;
  }
  @keyframes crackFlash{
    0%{ opacity:0; }
    10%{ opacity:1; }
    55%{ opacity:.55; }
    100%{ opacity:0; }
  }
  .icon-badge  img{
    width: 100%;
    margin: 10px;
    border-radius: 5px;
  }
  /* fan-shaped shards from an impact point at ~46% 40%, 12 pieces */
  .shard:nth-child(1){  clip-path: polygon(46% 40%, 0% 0%,   33% 0%);  --tx:-60px; --ty:85px;  --rot:-55deg; --d:0s; }
  .shard:nth-child(2){  clip-path: polygon(46% 40%, 33% 0%,  66% 0%);  --tx:-25px; --ty:100px; --rot:30deg;  --d:.015s; }
  .shard:nth-child(3){  clip-path: polygon(46% 40%, 66% 0%,  100% 0%);  --tx:10px;  --ty:105px; --rot:-40deg;--d:.03s; }
  .shard:nth-child(4){  clip-path: polygon(46% 40%, 100% 0%, 100% 33%); --tx:45px;  --ty:95px;  --rot:55deg; --d:.045s; }
  .shard:nth-child(5){  clip-path: polygon(46% 40%, 100% 33%,100% 66%); --tx:75px;  --ty:75px;  --rot:-35deg;--d:.02s; }
  .shard:nth-child(6){  clip-path: polygon(46% 40%, 100% 66%,100% 100%);--tx:90px;  --ty:45px;  --rot:60deg; --d:.05s; }
  .shard:nth-child(7){  clip-path: polygon(46% 40%, 100% 100%,66% 100%);--tx:80px;  --ty:15px;  --rot:-50deg;--d:.035s; }
  .shard:nth-child(8){  clip-path: polygon(46% 40%, 66% 100%, 33% 100%);--tx:55px;  --ty:100px; --rot:40deg; --d:.06s; }
  .shard:nth-child(9){  clip-path: polygon(46% 40%, 33% 100%, 0% 100%); --tx:15px;  --ty:110px; --rot:-45deg;--d:.025s; }
  .shard:nth-child(10){ clip-path: polygon(46% 40%, 0% 100%,  0% 66%);  --tx:-30px; --ty:105px; --rot:50deg; --d:.055s; }
  .shard:nth-child(11){ clip-path: polygon(46% 40%, 0% 66%,   0% 33%);  --tx:-65px; --ty:90px;  --rot:-60deg;--d:.01s; }
  .shard:nth-child(12){ clip-path: polygon(46% 40%, 0% 33%,   0% 0%);   --tx:-80px; --ty:55px;  --rot:45deg; --d:.04s; }

  /* full shatter on click ----------------------------------------*/
  .card.shattering .shard{
    animation: shatterFly .65s cubic-bezier(.5,-0.2,.7,1) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes shatterFly{
    0%{   opacity:0; transform:translate(0,0) rotate(0deg); }
    8%{   opacity:1; transform:translate(0,0) rotate(0deg); }
    100%{ opacity:0; transform:translate(var(--tx), var(--ty)) rotate(var(--rot)); }
  }

  @media (max-width:520px){
    .header h1{ font-size:21px; }
    .grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .card{ padding:14px 12px 12px; border-radius:18px; min-height:104px; box-shadow:3px 3px 0 var(--ink); }
    .card:hover{ box-shadow:3px 3px 0 var(--ink); transform:none; }
    .icon-badge{ width:40px; height:40px; }
    .icon-badge i{ font-size:16px; }
    .card-label{ font-size:12px; }
  }