*{
    font-family: "Vazirmatn", sans-serif;
}
.top3{
    margin-top: 50px;
    /*border: solid 3px white;*/
    border-spacing: 12px;
    width: 900px;
    height: 268px;

}
.top3 tr{
    /*background-color: red;*/
    border-radius: 20px;
    width: 200px;


}
.top3 tr td{
    /*background-color: green;*/
    border-radius: 20px;


}
/*.sk11{*/
/*    display:flex;*/
/*    flex-wrap:wrap;*/
/*    width:90%;*/
/*    !*height: 78%;*!*/
/*    !*padding:20px;*!*/
/*    !*overflow:hidden;*!*/

/*    !*border-radius:40px;*!*/

/*    !*background: rgba(40,120,255,.12);*!*/

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

/*    !*border:1px solid rgba(150,200,255,.18);*!*/

/*    !*box-shadow:*!*/
/*    !*        0 8px 40px rgba(0,120,255,.20),*!*/
/*    !*        inset 0 1px 1px rgba(255,255,255,.15);*!*/

/*}*/
.sk2{

text-align: center;
    /*width:24%;*/
    padding:20px;
    overflow:hidden;

    border-radius:40px;

    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);

}
.noback{
    background: none!important;
}
.skill-icon{

    /*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;*/
    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%;

    }

}
.skill-icon1111{

    /*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;*/
    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%;

    }

}

.blue-line{
    width:100%;
    height:2px;

    background:linear-gradient(
            90deg,
            transparent,
            #03253d,
            #0a4d73,
            #1fbfff,
            white,
            #1fbfff,
            #0a4d73,
            #03253d,
            transparent
    );

    background-size:200% 100%;

    box-shadow:
            0 0 8px rgba(0,180,255,.8),
            0 0 20px rgba(0,180,255,.4);

    animation: glowMove 4s linear infinite;
}
.ptopz{
    margin-top: 20px;
}
.pbotz{
    margin-bottom: 20px;
}
.linew{
    width: 1068px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.topma{
    margin-top: 50px;
}
.abzarz{
    margin-bottom: 50px;
    margin-top: 50px;
    border-spacing: 12px;
    width: 1044px;
    height: 150px;
    /*border: 3px solid white;*/
}
.abzarz tr{
    /*background-color: red;*/
    border-radius: 20px;
    width: 200px;
    border: 3px solid red;



}
.abzarz tr td{
    text-align: center;
    /*background-color: green;*/
    border-radius: 20px;
    /*border: 3px solid yellow;*/
}
.pad{
    padding: 0;
    margin: 0;
}
.yadgiri{
    /*border: 2px solid white;*/
    width: 1044px;
    height:300px!important;
    border-spacing: 12px;
    overflow: hidden!important;

}
.yadgiri tr{
    height:300px!important;


}
.yadgiri tr td{
    height:300px!important;

}
.yadgiri tr td ul{

    background: none;
}
.yadgiri tr td ul li{
    display: flex;
    background: none;
}
.lisk1{

    list-style: disc!important;


    /*width:24%;*/
    padding:20px;
    overflow:hidden;

    border-radius:17px;

    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);

}
.lisk{

width: 64%;
    height: 16px;
/*height: 10px;*/
    margin-right: -23px;
    /*width:24%;*/
    padding: 4px 25px;
    overflow:hidden;

    border-radius:8px;

    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);

}
/*.book-icon{*/
/*    z-index: 1000!important;*/

/*    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 6px rgba(0,180,255,.5));*/
/*    opacity:0.9;*/
/*    margin-right: 0px;*/
/*    margin-top: -0px;*/


/*}*/
.book-icon{
    font-size:58px;
    background:linear-gradient(
            90deg,
            #0f172a,
            #1e3a8a,
            #2563eb,
            #ffffff,
            #2563eb,
            #1e3a8a,
            #0f172a
    );
    background-size:200% 100%;
    background-clip:text;
    -webkit-background-clip:text!important;
    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
    margin-top: 10px;
    left: 20px!important;
}
.bookkaj{
    transform:rotate(-20deg) ;
}
.tik{

    font-size:20px;

    background:linear-gradient(

            90deg,
            rgba(0, 185, 242, 0.77),

            #0059c8,

            #1fbfff,

            #1fbfff,

            #0059c8,

            #0059c8,

            #0059c8

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    filter:drop-shadow(0 0 4px rgba(0,180,255,.5))

    drop-shadow(0 0 10px rgba(0,180,255,.25));

    margin-left:10px;

}
/*--------------------------------------------------------*/

.timeline-container{
    margin-top: 40px;
    width:57%;
    max-width:1400px;

    background:rgba(5,15,35,.55);
    border:1px solid rgba(0,140,255,.15);

    border-radius:25px;
    padding:60px 40px;

    backdrop-filter:blur(12px);

    box-shadow:
            inset 0 0 30px rgba(0,120,255,.08),
            0 0 40px rgba(0,80,255,.12);
}

.title{
    text-align:center;
    color:#29a8ff;
    font-size:34px;
    margin-bottom:70px;
    text-shadow:0 0 15px rgba(41,168,255,.7);
}

.timeline{
    position: relative;
    display: flex;
    justify-content: space-between;
}

.timeline::before{
    content: "";
    position: absolute;
    top: 14px; /* نصف ارتفاع دایره 28px */
    left: 0;
    right: 0;
    height: 2px;
    background: #1ea7ff;
    box-shadow: 0 0 10px #1ea7ff;
    z-index: 1;
}

.item{
    position: relative;
    z-index: 2;
}

.circle{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin: 0 auto;
    background: #03182f;
    border: 3px solid #1ea7ff;
    box-shadow:
            0 0 8px #1ea7ff,
            0 0 18px #1ea7ff;
}

.line{
    position:absolute;
    top:17px;
    left:5%;
    width:10%;
    height:2px;

    background:linear-gradient(
            90deg,
            rgba(0,170,255,.4),
            #1ea7ff,
            rgba(0,170,255,.4)
    );

    box-shadow:0 0 12px #1ea7ff;
}





.year{
    display:block;
    color:#ffffff;
    font-size:28px;
    margin-top:20px;
    margin-bottom:12px;
    font-weight:500;
}

.item p{
    color:#d8e7ff;
    font-size:22px;
    line-height:1.9;
}

/* Responsive */

@media (max-width: 992px){

    .timeline{
        flex-direction:column;
        gap:50px;
        align-items:center;
    }

    .line{
        width:2px;
        height:85%;
        left:50%;
        top:0;
        transform:translateX(-50%);
    }

    .item{
        width:100%;
        max-width:320px;
    }
}

/*---------------*/
.orange-line{

    width:1016px;
    height:2px;

    background:linear-gradient(
            90deg,
            transparent,
            #03253d,
            #0a4d73,
            #1fbfff,
            white,
            #1fbfff,
            #0a4d73,
            #03253d,
            transparent
    );

    box-shadow:
            0 0 8px rgba(0,180,255,.8),
            0 0 20px rgba(0,180,255,.4);

    /*animation: glowMove 4s linear infinite;*/
    animation:pulse 2s infinite ease-in-out;
}

@keyframes pulse{

    0%,100%{

        transform:scaleX(.95);
        filter:brightness(.85);

    }

    50%{

        transform:scaleX(1);
        filter:brightness(1.4);

    }

}

/*----------------------------*/
.honars{
margin: 0 auto;
    width: 900px;
    /*max-width: 600px;*/
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;

}
.honar{
    padding: 10px!important;
    width: 400px;
    height: 50px;
padding: 0;
margin: 0;
}
.skillname{font-size: 18px;


}
.skillbar{
    height: 14px;
    background-color: rgba(2, 37, 57, 0.51);

border-radius: 20px;
}
.skillper{
    height: 14px;
    background-color: #1e3a8a;
    border-radius: 20px;
    position: relative;
    animation: fillBars 2.5s 1;
    margin: 0;
}
.skillper::before{
    content: attr(per);
    position: absolute;
    padding: 4px 6px;
    background-color: red;
    border-radius: 20px;
    font-size: 12px;
    top: -35px;
    left: 0;
    transform: translateX(50%);
    z-index: 10000;

}
.skillper::after{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    top: -20px;
    left: 27px;
    transform: translateX(50%) rotate(45deg);
    border-radius: 2px;
}
@keyframes fillBars {
    from{
        width: 0;
    }
    to{
        width: 100%;
    }

}

/* ============================================================
   RESPONSIVE — maharat.css  (skills.php)
   ============================================================ */

/* --- flex wrappers replacing tables --- */
.skills-top-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 30px auto;
    width: 95%;
    max-width: 960px;
}
.skills-top-row .sk2 {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 300px;
    text-align: center;
}

.tools-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 95%;
    max-width: 1060px;
    margin: 0 auto;
}
.tools-row .sk2 {
    flex: 1 1 100px;
    min-width: 90px;
    max-width: 140px;
    text-align: center;
    padding: 14px 10px;
}

.learning-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    width: 85%;
    max-width: 1060px;
    margin: 0 auto;
}
.learning-row .lisk1 {
    flex: 1 1 280px;
    min-width: 260px;
}

/* linew fix */
.linew { width: 95% !important; max-width: 1060px; }

/* honars fix */
.honars { width: 85%; max-width: 960px; }
.honar  { width: calc(50% - 20px); }

@media (max-width: 768px) {
    .skills-top-row .sk2 { max-width: 100%; flex: 1 1 100%; }
    .tools-row .sk2 { flex: 1 1 80px; min-width: 80px; }
    .learning-row { flex-direction: column; align-items: center; }
    .learning-row .lisk1 { width: 90%; }
    .honar { width: 100%; }
    .lisk { width: 85%; }
    .book-icon { margin-right: 0; display: block; margin-top: 16px; }
}

@media (max-width: 480px) {
    .tools-row .sk2 { flex: 1 1 70px; min-width: 70px; font-size: 13px; }
    .tools-row .sk2 .skill-icon { font-size: 36px !important; }
    .skills-top-row .sk2 .skill-icon { font-size: 40px !important; }
}
/* ============================================================ */