*{
    font-family: "Vazirmatn", sans-serif;
}
* 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));
}
.abtme{
    width: 100%;
    height: 100%;

    /*overflow: scroll;*/

    /*max-width:1000px;*/

    /*padding:20px;*/

    border-radius:40px;
    background: rgb(38, 40, 43);

    backdrop-filter:
            blur(15px);

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

    border:

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

    box-shadow:

            0 8px 32px rgba(249, 245, 245, 0.48),

            inset 0 1px 1px rgba(255,255,255,.1);

}
.hey2{
    margin-top: 50px;
}
.hey3{
    margin-bottom: 50px;
}
.abtme2{
    overflow: hidden;

    /*max-width:1000px;*/

    padding:20px;

    border-radius:40px;
    background: rgb(38, 40, 43);

    backdrop-filter:
            blur(15px);

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

    border:

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

    box-shadow:

            0 8px 32px rgba(249, 245, 245, 0.48),

            inset 0 1px 1px rgba(255,255,255,.1);
}
.picturesme1{
    display: flex;
    width: 514px;
    height: 386px;
    justify-content: center;

    border-radius: 40px;
    background-color: #0a4d73;
}
.picturesme{
    width: 300px;
    height: 100px;
    background-color: #1fbfff;
    background: url("../pictures/msg47261701-18932.jpg");
    background-size: cover;
}
.moarefi1{
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}
.moarefi2{
    align-items: self-start;
    justify-content: center;
    margin-top: 30px;
    display: flex;
}
.moarefi2 h3{
    display:inline-block;
    padding-bottom: 30px;

}
.sk1{
    display:flex;
    flex-wrap:wrap;
    width:95%;
    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{
    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);

}


.abtjas{
    /*background-color: white;*/
    width: 833px!important;
    height: 1200px!important;
    border-spacing: 20px;

}
.tr-moarefi{
    width: 33%;
    height: 25%;
    /*background-color: yellow;*/
}
.td-moarefi{
    width: 33%;
    height: 23%;
}
.cars{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 20px;
}
.dakhel{
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 20px;

    box-shadow:
            0 8px 32px rgba(0,0,0,0.3);

    padding: 20px;
}
p{
    background: none;
}
h2{
    background: none;
}
h3{background: none}
.h3takhasos{
    width: 100%;
    margin-bottom: 20px;
}
h4{background: none}
.colorp{
    color: #a0a0a9;
}
.neveshteyem{
    width: 92%;
    height: 80%;
}
.h2-col1{
    padding: 40px;

}
.h4-col1{
    padding: 40px;
    font-size: 18px;

}
.tr1{
    padding-bottom: 50px;
}
.padtop{
    padding-top: 40px;
}

.custom-input{

    width: 150px;

    padding: 5px 20px;

    border:3px solid transparent;

    border-radius:999px;

    background:
            linear-gradient(#111,#111) padding-box,

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

    background-size:100% 100%, 200% 100%;

    animation: glowMove 4s linear infinite;

    color:#1fbfff;

    text-align:center;

    outline:none;
}


@keyframes glowMove{

    0%{
        background-position:
                0 0,
                0% 50%;
    }

    100%{
        background-position:
                0 0,
                200% 50%;
    }

}


.colori{

    padding:20px 30px;

    border:2px solid transparent;

    border-radius:15px;

    background:

            linear-gradient(#111,#111) padding-box,

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

    background-size:
            100% 100%,
            200% 100%;

    animation:glowMove 4s linear infinite;

    color:white;

    text-align:center;

}


@keyframes glowMove{

    0%{

        background-position:
                0 0,
                0% 50%;

    }

    100%{

        background-position:
                0 0,
                200% 50%;

    }

}
/* ============================================================
   RESPONSIVE — sliders.css  (aboutme.php)
   ============================================================ */

/* --- flex wrapper جایگزین table --- */
.abtjas-wrap {
    width: 90%;
    max-width: 960px;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.abt-row--top {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
}
.abt-row--top .neveshteyem {
    flex: 2;
    width: auto;
    height: auto;
}
.abt-img-wrap {
    flex: 1;
    min-height: 260px;
    border-radius: 20px;
    overflow: hidden;
}

.abt-row--stats {
    display: flex;
    flex-direction: row;
    gap: 16px;
}
.abt-row--stats .stat-box {
    flex: 1;
    text-align: center;
}

.abt-row--skills { width: 100%; }

@media (max-width: 768px) {
    .abtjas-wrap { width: 95%; gap: 16px; margin: 16px auto; }

    .abt-row--top { flex-direction: column; }
    .abt-img-wrap { min-height: 220px; max-height: 280px; }
    .abt-row--top .neveshteyem { width: 100%; }
    .h2-col1 { padding: 20px; font-size: 18px; }
    .h4-col1 { padding: 20px; font-size: 15px; }

    .abt-row--stats { flex-direction: column; gap: 12px; }
    .abt-row--stats .stat-box { width: 100%; }

    .sk2 { width: 44%; font-size: 14px; padding: 12px; }
}

@media (max-width: 480px) {
    .abtjas-wrap { width: 98%; }
    .abt-img-wrap { min-height: 180px; max-height: 220px; }
    .h2-col1 { padding: 14px; font-size: 16px; }
    .h4-col1 { padding: 14px; font-size: 13px; line-height: 1.9; }
    .sk2 { width: 100%; }
    .custom-input { width: 120px; font-size: 13px; }
}
/* ============================================================ */