* i{
    /*font-size:30px;*/
    margin-bottom:15px;
    background:linear-gradient(

            90deg,

            #0f172a,
            #1e3a8a,
            #2563eb,
            white,
            #2563eb,
            #1e3a8a,
            #0f172a

    );

    background-size:200% 100%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:iconGlow 4s linear infinite;

    filter:drop-shadow(0 0 3px rgba(37,99,235,.25));
}


.toptext{
    background: rgba(20,40,90,.35);

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

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

    box-shadow:
            0 10px 40px rgba(0,80,255,.15);
    justify-content: center;
    text-align: center;


}


/*i{*/
/*    background:linear-gradient(*/

/*            90deg,*/

/*            #0f172a,*/
/*            #1e3a8a,*/
/*            #2563eb,*/
/*            white,*/
/*            #2563eb,*/
/*            #1e3a8a,*/
/*            #0f172a*/

/*    );*/

/*    background-size:200% 100%;*/

/*    -webkit-background-clip:text;*/

/*    -webkit-text-fill-color:transparent;*/

/*    animation:iconGlow 4s linear infinite;*/

/*    filter:drop-shadow(0 0 3px rgba(37,99,235,.25));*/


/*}*/

/*@keyframes iconGlow{*/

/*    0%{*/

/*        background-position:0%;*/

/*    }*/

/*    100%{*/

/*        background-position:200%;*/

/*    }*/

/*}*/



/*-----------------------------*/
/* old timeline removed — new .tl-* classes handle this section */
.stats{
    margin-top: 5%;
    width: 81%;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    background: rgba(20,40,90,.35);

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

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

    box-shadow:
            0 10px 40px rgba(0,80,255,.15);
    border-radius: 20px;
    justify-content: space-around;
    padding: 10px;
    gap: 10px;
    box-sizing: border-box;
}

.stat-card{
    background:#0b1735;
    border-radius:20px;
    padding:10px;
    text-align:center;
}

.stat-card i{

    font-size:30px;
    margin-bottom:15px;
    background:linear-gradient(

            90deg,

            #0f172a,
            #1e3a8a,
            #2563eb,
            white,
            #2563eb,
            #1e3a8a,
            #0f172a

    );

    background-size:200% 100%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:iconGlow 4s linear infinite;

    filter:drop-shadow(0 0 3px rgba(37,99,235,.25));

}

.stat-card h3{
    background: none;
    color:white;
    font-size:35px;
}

.stat-card span{
    background: none;
    color:#cbd5e1;
}
.noback{
    background: none!important;
}
.academy-zone{
    margin-top: 5%;
    margin-bottom: 5%;
    width:82%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    gap:25px;
    box-sizing: border-box;
}

.skill-vault,
.award-vault{
    width: 80%;
border-radius: 20px;
    flex:1;
    padding: 30px;

    background: rgba(20,40,90,.35);

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

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

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

.vault-head{
    display: flex;
    background: none;
    margin-bottom:30px;
}

.vault-head h3{
    background: none;

    color:white;

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

    font-size:28px;
}



.vault-row,
.award-row{

    display:flex;
    align-items:center;

    gap:20px;

    padding:0 4px;

    margin-bottom:15px;

    border-radius:18px;

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

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

    transition:.35s;
}

.vault-row:hover,
.award-row:hover{

    transform:translateY(-5px);

    border-color:#1da1ff;

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

.vault-date,
.award-date{
    background: none;
    min-width:110px;

    color:#8fa8c8;

    font-size:14px;
}

.vault-info,
.award-info{
    background: none;
    flex:1;
}

.vault-info h4,
.award-info h4{background: none;

    color:white;
    margin-bottom:6px;
}

.vault-info span,
.award-info span{
    background: none;
    color:#92a6c5;
    font-size:14px;
}

.vault-logo,
.award-badge{
    background: none!important;
    width:65px;
    height:65px;

    border-radius:18px;

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

    font-size:28px;
}

.cyan{
    color:#00d4ff;

    background:
            rgba(0,212,255,.12);
}

.gold{
    color:#ffcb47;

    background:
            rgba(255,203,71,.12);
}

.yellow{
    color:#ffe45a;

    background:
            rgba(255,228,90,.12);
}

.award-badge{

    color:#ffbf00;

    background:
            rgba(255,191,0,.12);
}
/*.edu_showcase{*/
/*    height: 200px;*/


/*    position:relative;*/

/*    width:95%;*/

/*    min-height:320px;*/

/*    margin:40px auto;*/

/*    border-radius:30px;*/

/*    overflow:hidden;*/

/*    display:flex;*/

/*    align-items:center;*/

/*    justify-content:space-between;*/


/*    !*background: rgba(20,40,90,.35);*!*/
/*    background: url("../pictures/mazan.jpg")!important;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat!important;*/

/*    backdrop-filter: blur(18px);*/
/*    -webkit-backdrop-filter: blur(18px);*/

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

/*    box-shadow:*/
/*            0 10px 40px rgba(0,80,255,.15);*/
/*}*/


/*!* background image *!*/
/*.rang{*/
/*    background:*/
/*            rgba(255,255,255,.025)!important;*/

/*}*/

/*.edu_showcase_bg{*/

/*    position:absolute;*/

/*    inset:0;*/

/*    background:url("pictures/mazan.jpg");*/

/*    background-size:cover;*/

/*    background-position:center;*/

/*    opacity:.15;*/

/*    filter:blur(4px);*/

/*    transform:scale(1.15);*/
/*}*/


/*!*.edu_showcase::before{*!*/

/*!*    content:"";*!*/

/*!*    position:absolute;*!*/

/*!*    inset:0;*!*/

/*    !*background:*!*/
/*    !*        url("../pictures/mazan.jpg")!important;*!*/
/*    !*        background-size: cover;*!*/
/*    !*        background-repeat: no-repeat!important;*!*/
/*    !*        linear-gradient(*!*/
/*    !*                90deg,*!*/
/*    !*                rgba(4,11,30,.95) 15%,*!*/
/*    !*                rgba(4,11,30,.65) 55%,*!*/
/*    !*                rgba(4,11,30,.95) 100%*!*/
/*    !*        );*!*/

/*!*    z-index:1;*!*/
/*!*    width: 100%;*!*/
/*!*}*!*/


/*!* image *!*/

/*.edu_showcase_photo{*/
/*    background: none;*/

/*    position:relative;*/

/*    z-index:3;*/

/*    width:460px;*/

/*    margin-right:60px;*/
/*}*/


/*.edu_showcase_photo img{*/


/*    width:100%;*/

/*    height:240px;*/

/*    object-fit:cover;*/

/*    border-radius:20px;*/

/*    border:2px solid rgba(0,132,255,.25);*/

/*    box-shadow:*/
/*            0 0 30px rgba(0,132,255,.20);*/
/*}*/


/*.edu_showcase_badge{*/

/*    position:absolute;*/

/*    top:-18px;*/

/*    left:-18px;*/

/*    width:65px;*/

/*    height:65px;*/

/*    border-radius:50%;*/

/*    display:flex;*/

/*    justify-content:center;*/

/*    align-items:center;*/

/*    background:*/
/*            linear-gradient(*/
/*                    135deg,*/
/*                    #2f80ff,*/
/*                    #1aa4ff*/
/*            );*/

/*    color:#fff;*/

/*    font-size:26px;*/

/*    box-shadow:*/
/*            0 0 25px #1e90ff;*/
/*}*/


/*!* content *!*/

/*.edu_showcase_content{*/


/*    position:relative;*/

/*    z-index:3;*/

/*    width:50%;*/

/*    color:white;*/

/*    padding-left:60px;*/

/*    text-align:right;*/
/*}*/


/*.edu_showcase_content h1{*/

/*    font-size:55px;*/

/*    margin-bottom:12px;*/

/*    font-weight:700;*/
/*}*/


/*.edu_showcase_content h1::after{*/


/*    content:"";*/

/*    display:block;*/

/*    width:110px;*/

/*    height:3px;*/

/*    margin-top:10px;*/

/*    background:*/
/*            linear-gradient(*/
/*                    to left,*/
/*                    transparent,*/
/*                    #1aa4ff,*/
/*                    transparent*/
/*            );*/

/*    box-shadow:*/
/*            0 0 15px #1aa4ff;*/
/*}*/


/*.edu_path{*/


/*    margin-bottom:25px;*/

/*    color:#5aa9ff;*/

/*    font-size:15px;*/
/*}*/


/*.edu_path i{*/

/*    font-size:6px;*/

/*    margin:0 10px;*/
/*}*/


/*.edu_showcase_content p{*/

/*    line-height:2.4;*/

/*    font-size:18px;*/

/*    color:#d6e2ff;*/
/*}*/
.topwpic{
    width: 81%;
    max-width: 960px;
    margin: 30px auto 0;
    height: 400px;
    background: rgba(20,40,90,.35);

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

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

    box-shadow:
            0 10px 40px rgba(0,80,255,.15);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    box-sizing: border-box;
}
.towpic2{
    display: flex;
    width: 100%;
    height: 100%;

    /*background: url("../pictures/dark_tint.png");*/
    justify-content: center;
    align-items: center;
    border-radius: 20px;

}
.sizei{
    font-size: 5vw;

}
.heightajs{
    width: 70%!important;
    margin-top: 20px;
}
.topwpictext{
    margin: 0;
text-align: center;
    align-items: center;
    justify-content: center;

    width: 40%;
    height: 80%;
    background: none;
    /*background: rgba(20,40,90,.35);*/

    /*backdrop-filter: blur(18px);*/
    /*-webkit-backdrop-filter: blur(18px);*/

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

    /*box-shadow:*/
    /*        0 10px 40px rgba(0,80,255,.15);*/
    /*border-radius: 14px;*/

}
.topwpictext p{
    padding: 20px;
    margin-top: 10px;
}
.topwpicpic{
    border-radius: 14px;
    width: 40%;
    height: 80%;
    background: url("../pictures/mazan.jpg");
    background-size: cover;

}
.rangeax{

    /*font-size: 58px!important;*/

    /*color:#00aaff;*/

    /*margin-bottom:25px;*/

    /*text-shadow:*/

    /*        0 0 5px rgba(0,140,255,.55),*/

    /*        0 0 12px rgba(0,140,255,.35),*/

    /*        0 0 22px rgba(0,140,255,.15);*/

    /*display:block;*/
    z-index: 10000;
    font-size:58px!important;

    background:linear-gradient(

            90deg,

            #0f172a,
            #1e3a8a,
            #2563eb,
            white,
            #2563eb,
            #1e3a8a,
            #0f172a

    );

    background-size:200% 100%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:iconGlow 4s linear infinite;

    filter:drop-shadow(0 0 3px rgba(37,99,235,.25));


}

@keyframes iconGlow{

    0%{

        background-position:0%;

    }

    100%{

        background-position:200%;

    }

}

/* old responsive block removed — new responsive handled in NEW TIMELINE section below */

/* ============================================================
   TIMELINE — مدارک تحصیلی  (کاملاً ریسپانسیو)
   ============================================================ */

/* section wrapper */
.education {
    width: 82%;
    max-width: 860px;
    margin: 4% auto 0;
    padding: 36px 40px 44px;
    border-radius: 25px;
    background: rgba(20,40,90,.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 40px rgba(0,80,255,.15);
    box-sizing: border-box;
}

/* ستون تایم‌لاین */
.tl-wrap {
    background: none!important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* هر ردیف */
.tl-item {
    background: none!important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ستون دایره + خط */
.tl-icon-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

/* دایره درخشان */
.tl-dot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 50% !important;
    background-color: white !important;
    background: white !important;
    border: 4px solid #6d4aff !important;
    box-shadow: 0 0 14px #6d4aff !important;
    flex-shrink: 0 !important;
    margin: 30px 0 0 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* خط عمودی */
.tl-vline {
    flex: 1 !important;
    width: 3px !important;
    min-height: 30px !important;
    background: linear-gradient(to bottom, #8b5cf6, #2196f3) !important;
    background-color: transparent !important;
    border-radius: 2px !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    display: block !important;
}

.tl-item--last .tl-vline {
    display: none !important;
}

/* کارت */
.tl-card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 36px 20px 20px !important;
    margin: 10px 0 18px 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 6px 24px rgba(0,80,255,.12) !important;
    position: relative !important;
    transition: transform .3s, box-shadow .3s !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.tl-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(109,74,255,.5) !important;
    box-shadow: 0 12px 36px rgba(0,120,255,.22) !important;
}

/* بج سال — بالای کارت */
.tl-year {
    border: solid 2px #1e3a8a;
    position: absolute !important;
    top: -1px !important;
    right: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 6px 16px !important;
    background:linear-gradient(

            90deg,

            #0f172a,
            #1e3a8a,
            #2563eb,
            white,
            #2563eb,
            #1e3a8a,
            #0f172a

    );

    background-size:200% 100%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:iconGlow 4s linear infinite;
    border-radius: 17px 17px 0 0 !important;
    color: white !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
    letter-spacing: 1px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* آیکون داخل کارت */
.tl-icon-box {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*.tl-icon-box i {*/
/*    background: none !important;*/
/*    -webkit-background-clip: unset !important;*/
/*    background-clip: unset !important;*/
/*    -webkit-text-fill-color: #b388ff !important;*/
/*    color: #b388ff !important;*/
/*    animation: none !important;*/
/*    filter: none !important;*/
/*    font-size: 26px !important;*/
/*    margin: 0 !important;*/
/*}*/

/* محتوا */
.tl-content {
    flex: 1 !important;
    min-width: 0 !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tl-content h3 {
    color: white !important;
    font-size: clamp(14px, 1.6vw, 17px) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    background: none !important;
    line-height: 1.5 !important;
}

.tl-content p {
    color: #b8c3d9 !important;
    font-size: clamp(13px, 1.4vw, 15px) !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    background: none !important;
}

.tl-content small {
    color: #8fa2c7 !important;
    font-size: 13px !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .topwpic  { width: 95%; height: auto; padding: 20px; }
    .towpic2  { flex-direction: column; gap: 20px; }
    .topwpicpic  { width: 90%; height: 200px; }
    .topwpictext { width: 90%; height: auto; }

    .stats { width: 95%; flex-wrap: wrap; gap: 12px; padding: 10px; }
    .stat-card { flex: 1 1 120px; }

    .education { width: 95%; padding: 28px 16px 36px; }

    .academy-zone { flex-direction: column; width: 95%; gap: 16px; }
}

@media (max-width: 600px) {
    .topwpic { height: auto; }
    .topwpicpic { height: 160px; }
    .sizei { font-size: 10vw; }
    .stat-card { flex: 1 1 100%; }

    .education { padding: 20px 10px 28px; }

    /* کارت عمودی در موبایل */
    .tl-card {
        flex-wrap: wrap !important;
        padding: 36px 14px 16px !important;
        gap: 10px !important;
    }
    .tl-icon-box { width: 50px !important; height: 50px !important; min-width: 50px !important; font-size: 20px !important; }
    .tl-content h3 { font-size: 14px !important; }

    .vault-row, .award-row { flex-direction: column; gap: 8px; }
    .vault-date, .award-date { min-width: unset; }
    .vault-logo, .award-badge { width: 44px; height: 44px; }
}

@media (max-width: 400px) {
    .tl-item { gap: 10px !important; }
    .tl-icon-col { width: 18px !important; }
    .tl-dot { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; }
}
/* ============================================================ */