*{margin: 0px auto;
    background-color: black;
    color: aliceblue;
}


body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding-top: 53px;
    /*overflow-x: hidden;*/

}
.logo{
    overflow: hidden!important;


}
.logoimg{
    width: 50px;
    height: 50px;
    object-fit: contain;
}

ul{
list-style: none;
    background: none;
    align-items: center;
}
.topcenter ul{
    display: flex;
    justify-content: space-between;
    
}
.top{
    overflow: hidden!important;
    top: 0;
    position: fixed;
    width: 100%;
    height: 50px;
   background-color: black;
    z-index: 100000000!important;

}
.top2{
    height: 50px;
    top: 0;
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: space-around;
    margin-top: 0px;
    background-color: black;
    z-index: 100000000!important;

}
a{
    list-style: none;
    text-decoration: none;
    border: none;
}
.sign-Up{
    width: 95px;
    border-radius: 30px;
    background-color: darkgray;
    border: none;
    color: black;
    height: 33px;
}
.space{
    display: flex;
    justify-content: space-between;
}
.topcenter{
    width:500px
}

.fs{
    font-size: 20px!important;
}
.who{
    width: 150px;
    border: 2px solid purple;
    border-radius: 10px;
    background: linear-gradient(to right,#656565,   #7f42a7,    #6600c5,    #5300a0,#757575, #656565);
    background-size: 200%;
    animation: animationGradinet 2.5s linear infinite;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.336);
}
@keyframes animationGradinet {
    to {
        background-position: 200%;
    }

}
.doc{
    width: 100px;
    border: 2px solid rgba(37, 37, 37, 0.697);
    border-radius: 10px;

}
.contact{
    justify-content: center;
    width: 90px;
    height: 20px;
    border: none;
    background-color: aliceblue;
    color: black;
    border-radius: 10px;

}
.talk{
    font-size: 50px;
    margin-top: 15px;
    padding-bottom: 10px;
}
.mehrabt{
    color: rgb(126, 131, 131);
    margin-bottom: 20px;

}
.main-all{
    display: flex;
    border-bottom: 1px solid #1e1e1e;
    padding-bottom: 100px;
    padding-top: 40px;
}
.ai{
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    overflow: hidden!important;

}
.main-left-robat{
    top: 0;
    height: 50%;
    width: 50%;
    border-radius: 100px;
    overflow: hidden!important;

}
/*product*/
.glass-card{
    background: rgba(70,20,0,0.35);

    backdrop-filter: blur(18px);

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

    border-radius:28px;

    box-shadow:
            0 10px 40px rgba(0,0,0,.45),
            inset 0 1px 1px rgba(255,255,255,.05);
}
.about1{
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;

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



.skills-card{

    width:500px;
    overflow: hidden;

    /*max-width:1000px;*/

    padding:20px;

    border-radius:40px;

    background: rgba(167, 41, 0, 0.71);

    backdrop-filter:blur(18px);

    box-shadow:
            0 10px 50px rgba(0,0,0,.45);

}
.skills-card2{

    width:300px;
    overflow: hidden;

    /*max-width:1000px;*/

    padding:20px;

    border-radius:40px;
    list-style: circle;

    background: rgba(219, 55, 0, 0.45);

    backdrop-filter:blur(18px);

    box-shadow:
            0 10px 50px rgba(0,0,0,.45);


}
.skills-card1{

    width:88%;
    overflow: hidden;

    /*max-width:1000px;*/

    padding:20px;

    border-radius:40px;

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

    backdrop-filter:blur(18px);

    box-shadow:
            0 10px 50px rgba(0,0,0,.45);

}
.main-product{
    margin-top: 60px;
    border-bottom: 1px solid #1e1e1e;
    padding-bottom: 60px;
}
/*--------------------------------------------------------------------------*/
.ed{
    background: rgb(84, 84, 84);

    backdrop-filter: blur(18px);

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

    border-radius:28px;

    box-shadow:
            0 10px 40px rgba(0,0,0,.45),
            inset 0 1px 1px rgba(255,255,255,.05);
}
.ed2{
    display: inline-block;
}
.madrak{
    margin: 0;
    width: 40%;


}

.zero{
    padding: 10px;
}
.tahsilat{
    display: flex;
    justify-content: space-between;
}
.uni{
    padding: 0;
    margin: 0;
    width: 40%;
}
.orange-line{

    width:100%;
    height:2px;

    background:linear-gradient(
            to right,
            transparent,
            #5a2200,
            #b84d00,
            #ff8c1a,
            rgba(255,255,255,.95),
            #ff8c1a,
            #b84d00,
            #5a2200,
            transparent
    );

    box-shadow:
            0 0 10px rgba(255,140,26,.9),
            0 0 25px rgba(255,120,0,.6),
            0 0 45px rgba(255,170,80,.25);

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

    }

}
.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;
}

@keyframes glowMove{

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

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

}
/*---------------------------------------------------------------------*/
.background{



    inset:0;

    z-index:-1;

}

.background span{

    position:absolute;

    width:140px;
    height:2px;

    border-radius:999px;

    background:
            linear-gradient(
                    90deg,
                    rgba(255,255,255,.9),
                    rgba(120,200,255,.5),
                    transparent
            );

    filter:blur(.8px);

    box-shadow:

            0 0 10px rgba(100,200,255,.5),
            0 0 25px rgba(100,200,255,.2);

    opacity:0;

    animation:
            shooting linear infinite;

}

/* پخش در کل صفحه */

span:nth-child(1){top:10%;left:5%;animation-duration:8s;animation-delay:0s;}
span:nth-child(2){top:30%;left:70%;animation-duration:7s;animation-delay:2s;}
span:nth-child(3){top:60%;left:20%;animation-duration:9s;animation-delay:1s;}
span:nth-child(4){top:80%;left:50%;animation-duration:6s;animation-delay:3s;}
span:nth-child(5){top:15%;left:85%;animation-duration:10s;animation-delay:2s;}
span:nth-child(6){top:50%;left:40%;animation-duration:7s;animation-delay:4s;}
span:nth-child(7){top:75%;left:10%;animation-duration:8s;animation-delay:1s;}
span:nth-child(8){top:25%;left:55%;animation-duration:9s;animation-delay:5s;}


@keyframes shooting{

    0%{

        opacity:0;

        transform:

                translate(0,0)
                rotate(35deg);

    }

    10%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:

                translate(700px,500px)
                rotate(35deg);

    }

}
/*------*/
.skill-box{
    width:20%;
    overflow: hidden;

    /*max-width:1000px;*/

    padding:20px;

    border-radius:40px;
    background:
            rgba(255,40,40,.15);

    backdrop-filter:
            blur(15px);

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

    border:

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

    box-shadow:

            0 8px 32px rgba(255,0,0,.15),

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

}
/*.doted{*/
/*        background-color: #050505;*/

/*        background-image:*/
/*                radial-gradient(*/
/*                        rgba(255,255,255,0.12) 1px,*/
/*                        transparent 1px*/
/*                );*/

/*        background-size: 25px 25px;*/

/*}*/
/*-----------------------------black line--------*/
.black-line{
    width:100%;
    height:2px;

    background:linear-gradient(
            90deg,
            transparent,
            #000000,
            #626262,
            #c5c5c5,
            white,
            #4c4c4c,
            #730a2a,
            #24033d,
            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;
}

@keyframes glowMove{

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

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

}
.s-box{
    width:90%;
    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);

}
/*-------------------------------end--*/
.allindez{
    background: red!important;
    width: 90%;
    height: 500px;
}
.classtext{
    background: #b84d00!important;
    width: 100px;
    height: 100px;
}
.mehrab1{
    background: red!important;
    width: 90%;
    height: 500px;

}
.allmainp{
    width: 100%;
    min-height: 53vw;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    gap: 20px;
    padding: 40px 20px;
    box-sizing: border-box;
}
.picturememain{
    width: 40%;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1000;
    background: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
}
.picmain-img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: none;
    border-radius: 20px;
}
.margbot{
    margin-bottom: 20px;
}
.margtop{
    margin-top: 20px;
}
.textmemain{
    margin: 0;
    background: none;
    width: 45%;
    border-radius: 20px;
}
.textsizee{
    font-size: 50px!important;
}
/*.hero {*/

/*    background-color: #050814;*/

/*    background-image:*/
/*            radial-gradient(*/
/*                    circle at 60% 20%,*/
/*                    rgba(106, 148, 241, 0.28),*/
/*                    transparent 25%*/
/*            ),*/
/*            radial-gradient(*/
/*                    circle at 50% 50%,*/
/*                    rgba(0, 80, 255, 0.10),*/
/*                    transparent 35%*/
/*            ),*/
/*            radial-gradient(*/
/*                    rgba(255,255,255,0.07) 0.8px,*/
/*                    transparent 0.8px*/
/*            );*/

/*    background-size:*/
/*            auto,*/
/*            auto,*/
/*            22px 22px;*/
/*}*/

.hero {
    background:
            radial-gradient(circle at 60% 20%,
            rgba(0, 234, 255, 0.18),
            transparent 25%),

            radial-gradient(circle at 50% 50%,
            rgba(0,80,255,.10),
            transparent 35%),

            radial-gradient(
                    rgba(255,255,255,.07) .8px,
                    transparent .8px
            );

    background-size:
            auto,
            auto,
            22px 22px;

    background-color: rgba(5, 8, 20, 0.75);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(20px);
}
.menudok{
    margin: 0;
    background: none;
width: 87%;
height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0!important;
}
.t1{
    width: 30%;
    height: 80%;
background: none;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.t1 a{
    width: 7vw;

    border-radius: 30px;
    padding: 10px 20px;


    background-color: rgba(5, 8, 20, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

}
/*-------------------------------footer-------------------------------*/
.footerall{
    /*background: red!important;*/
    width: 93%;
    height: 400px;

}
.foottops{
    /*background: orange!important;*/
    width: 100%;
    height: 320px;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ghesmat1{
    /*background: white!important;*/
    width: 20%;
    height: 96%;
    align-items: center;


}
.ghesmat1 h4{
    font-weight: 20000;

}
.ghesmat1 h5{
    /*background: white!important;*/
   padding: 20px;
    margin: 0!important;


}
.ghesmat1 p{
    /*background: white!important;*/
   padding: 20px;
    margin: 0!important;

}

.footbots h4{
    background: none!important;
    padding: 30px;
}
.footbots{
    /*background: blue!important;*/
    height: 20%;
    margin-top: 0;
    display: flex;
    background: none;

}




/* --- custom-input (دکمه رزومه) --- */
.custom-input {
    display: inline-block;
    cursor: pointer;
    /*background: rgba(5, 8, 20, 0.75);*/
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    color: aliceblue;
    padding: 10px 15px;
    font-size: 15px;
    margin-bottom: 16px;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}


.t1 a {
    width: auto;
    min-width: 100px;
    text-align: center;
    white-space: nowrap;
    border-radius: 30px;
    padding: 10px 22px;
    background-color: rgba(5, 8, 20, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: inline-block;
}

/* --- Navbar hamburger --- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 200000000;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: aliceblue;
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
    position: static;
    animation: none;
    opacity: 1;
    filter: none;
    box-shadow: none;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Tablet & Mobile (768px) ===== */
@media (max-width: 768px) {

    /* --- Navbar --- */
    .top2 {
        flex-wrap: wrap;
        height: 67px;
        /*padding: 8px 12px;*/
        position: fixed;
        align-items: center;
        gap: 8px;
    }
    .nav-toggle { display: flex; }
    .topcenter {
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
        order: 3;
        background: black;
    }
    .topcenter.open { max-height: 300px; }
    .topcenter ul {
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
        margin: 0;
    }
    .topcenter ul li { margin: 0; }
    .topcenter ul li a {
        display: block;
        padding: 12px 20px;
        font-size: 15px;
        background: none;
    }
    .signup { order: 2; }

    /* --- Hero section --- */
    .allmainp {
        flex-direction: column;
        min-height: unset;
        height: auto;
        padding: 24px 16px 40px;
        border-radius: 0;
        align-items: center;
        gap: 16px;
    }
    .picturememain {
        width: 75%;
        max-width: 320px;
        margin: 0 auto;
    }
    .picmain-img {
        width: 100%;
        height: auto;
        border-radius: 16px;
    }
    .textmemain {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        height: auto;
    }
    .textsizee { font-size: 30px !important; }
    .custom-input {
        font-size: 14px;
        padding: 9px 20px;
        margin-bottom: 12px;
    }

    /* --- منوی پایین صفحه --- */
    .menudok {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        height: auto;
        gap: 8px;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
        margin-top: 8px;
    }
    .t1 {
        width: auto;
        flex: 1;
        justify-content: center;
        height: auto;
        min-width: 0;
    }
    .t1 a {
        width: 100%;
        min-width: unset;
        padding: 10px 8px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* --- Footer --- */
    .footerall { width: 100%; height: auto; box-sizing: border-box; padding: 0 8px; }
    .foottops {
        flex-direction: column;
        height: auto;
        align-items: flex-start;
        gap: 20px;
        padding: 20px 8px;
    }
    .ghesmat1 { width: 100%; height: auto; }
    .ghesmat1 h4 { font-size: 14px; }
    .ghesmat1 h5 { padding: 4px 8px; font-size: 13px; }
    .ghesmat1 p  { padding: 4px 8px; font-size: 13px; }
    .footbots { flex-direction: column; height: auto; text-align: center; padding: 8px 0; }
    .footbots h4 { padding: 6px 8px; font-size: 12px; }
}

/* ===== Small phones (480px) ===== */
@media (max-width: 480px) {
    .textsizee { font-size: 26px !important; }
    .custom-input { font-size: 13px; padding: 8px 8px; }
    .picturememain { width: 85%; }
    .t1 a { padding: 9px 6px; font-size: 12px; }
    .ghesmat1 h4 { font-size: 13px; }
    .footbots h4 { font-size: 11px; }
}

/* ===== Very small (360px) ===== */
@media (max-width: 360px) {
    .textsizee { font-size: 22px !important; }
    .custom-input { font-size: 12px; padding: 7px 12px; }
    .t1 a { font-size: 11px; padding: 8px 4px; }
}
/* ============================================================ */

/* footer.css compat */

     /* ===== Section dividers ===== */
 .section-divider {
     width: 85%;
     max-width: 1100px;
     margin: 20px auto;
     padding: 0px 0 19px;
 }
.section-anchor {
    scroll-margin-top: 80px;
}

/* ===== Fix path refs from sliders/ to root ===== */

/* ===== aboutme inline fixes ===== */
.abt-page-wrap {
    width: 90%;
    max-width: 1000px;
    margin: 30px auto 60px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.abt-top-row {
    display: flex;
    flex-direction: row;
    gap: 22px;
    align-items: stretch;
}
.abt-text-box {
    flex: 2;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 22px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    padding: 28px 28px 22px;
    box-sizing: border-box;
}
.abt-photo-box {
    flex: 1;
    min-height: 340px;
    border-radius: 22px;
    background: url("../pictures/img-M.png") center center / cover no-repeat;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
}
.abt-text-box h2 {
    font-size: clamp(16px, 2.2vw, 22px);
    padding: 20px 10px 10px;
    line-height: 1.8;
    color: aliceblue;
    background: none;
    margin: 0;
}
.abt-text-box h4 {
    padding: 10px 10px 0;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 2;
    color: aliceblue;
    background: none;
    margin: 0;
}
#abt-title {
    color: #1fbfff;
    font-size: clamp(15px, 1.8vw, 20px);
    padding: 8px 10px;
    background: none;
    margin: 0;
}
.abt-stats-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
}
.abt-stat-box {
    flex: 1;
    text-align: center;
    padding: 18px 10px;
    border-radius: 16px;
    border: 2px solid transparent;
    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: #a0a0a9;
    box-sizing: border-box;
}
.abt-stat-box p {
    background: none;
    margin: 0;
    font-size: clamp(13px, 1.5vw, 16px);
    color: #a0a0a9;
}
.abt-skills-row { width: 100%; }
.abt-skills-row .sk1 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 20px;
    border-radius: 22px;
    background: rgba(40,120,255,.1);
    border: 1px solid rgba(150,200,255,.15);
    box-shadow: 0 8px 40px rgba(0,120,255,.15);
    box-sizing: border-box;
    list-style: none;
    margin: 0;
}
.abt-skills-row .sk1 h3 {
    width: 100%;
    margin-bottom: 10px;
    color: #a0a0a9;
    background: none;
    font-size: clamp(15px, 1.8vw, 18px);
}
.abt-skills-row .sk2 {
    flex: 0 0 calc(25% - 8px);
    padding: 14px;
    border-radius: 22px;
    background: rgba(20,40,90,.35);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 40px rgba(0,80,255,.12);
    font-size: clamp(12px, 1.4vw, 15px);
    text-align: center;
    color: aliceblue;
    box-sizing: border-box;
    list-style: none;
}

/* ===== tahsilat inline fixes ===== */
.tl-wrap, .tl-item, .tl-icon-col,
.tl-dot, .tl-vline, .tl-card,
.tl-year, .tl-icon-box, .tl-content,
.tl-content h3, .tl-content p, .tl-content small {
    margin: 0 !important;
}
.tl-dot {
    background-color: white !important;
    background: white !important;
}
.tl-vline {
    background: linear-gradient(to bottom, #8b5cf6, #2196f3) !important;
}

/* ===== Responsive for aboutme section ===== */
@media (max-width: 768px) {
    .abt-page-wrap { width: 95%; gap: 16px; margin: 16px auto 40px; }
    .abt-top-row { flex-direction: column-reverse; }
    .abt-photo-box {
        min-height: 260px;
        max-height: 300px;
        border-radius: 18px;
        max-width: 260px;
        min-width: 437px;
    }
    .abt-text-box { padding: 20px 18px; }
    .abt-text-box h2 { font-size: 16px; padding: 12px 4px 6px; }
    .abt-text-box h4 { font-size: 14px; padding: 6px 4px 0; }
    .abt-stats-row { flex-direction: column; gap: 10px; }
    .abt-stat-box { width: 100%; }
    .abt-skills-row .sk2 { flex: 0 0 calc(48% - 6px); }
}
@media (max-width: 480px) {
    .abt-photo-box { min-height: 200px; max-height: 240px; min-width: 300px; max-width: 240px; }
    .abt-text-box h2 { font-size: 14px; }
    .abt-skills-row .sk2 { flex: 0 0 100%; }
}