/* =====================================
   Zhikko UI Framework
   Bootstrap Replacement
===================================== */


*,
*::before,
*::after{

    box-sizing:border-box;

}


html{

    direction:rtl;

}


body{

    margin:0;

    padding:0;

    font-family:'Shabnam',sans-serif;

    background:#f7f7f7;

    color:#222;

}


/* ---------- Container ---------- */


.container{

    width:95%;

    max-width:1450px;

    margin:30px auto;

}


.container-fluid{

    width:100%;

    padding:0 25px;

}


/* ---------- Flex ---------- */


.d-flex{

    display:flex;

}


.flex-column{

    flex-direction:column;

}


.justify-between{

    justify-content:space-between;

}


.align-center{

    align-items:center;

}


.gap-10{

    gap:10px;

}


.gap-20{

    gap:20px;

}



/* ---------- Grid ---------- */


.grid{

    display:grid;

}


.grid-2{

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

}


.grid-3{

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

}


.grid-4{

    grid-template-columns:repeat(4,1fr);

}


/* ---------- Card ---------- */


.card{

    background:white;

    border-radius:18px;

    padding:20px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);

}



/* ---------- Buttons ---------- */


.btn{

    height:45px;

    padding:0 22px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-family:inherit;

    transition:.2s;

}


.btn-primary{

    background:#ff9800;

    color:white;

}


.btn-primary:hover{

    background:#f57c00;

}


.btn-success{

    background:#4caf50;

    color:white;

}


.btn-danger{

    background:#f44336;

    color:white;

}


.btn-info{

    background:#2196f3;

    color:white;

}



.btn-secondary{

    background:#607d8b;

    color:white;

}



/* ---------- Forms ---------- */


input,
select,
textarea{


    width:100%;

    height:45px;

    border:

    1px solid #ddd;

    border-radius:10px;

    padding:0 15px;

    font-family:inherit;

    outline:none;

}


input:focus,
select:focus,
textarea:focus{

    border-color:#ff9800;

}



/* ---------- Table ---------- */


.table-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}


table{

    width:100%;

    border-collapse:collapse;

}


thead{

    background:#ff9800;

    color:white;

}


th{

    padding:15px;

}


td{

    padding:15px;

    text-align:center;

    border-bottom:1px solid #eee;

}


tr:hover{

    background:#fff8ef;

}



/* ---------- Text ---------- */


.text-center{

    text-align:center;

}


.text-right{

    text-align:right;

}


.text-muted{

    color:#777;

}



/* ---------- Margin ---------- */


.mt-10{

    margin-top:10px;

}


.mt-20{

    margin-top:20px;

}


.mb-20{

    margin-bottom:20px;

}



/* ---------- Responsive ---------- */


@media(max-width:900px){


.grid-2,
.grid-3,
.grid-4{

    grid-template-columns:1fr;

}



.container{

    width:95%;

}



}

/* =========================
   Zhikko Navbar
========================= */


.custom-navbar{

    background:
    linear-gradient(
        135deg,
        #0f0c29,
        #050505,
        #24243e
    );

    box-shadow:
    0 0 20px #00ffff55,
    0 0 35px #00ffff22;

    padding:10px 20px;

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

    position:fixed;

    top:0;

    right:0;

    width:100%;

    z-index:1000;

    direction:rtl;

}



.nav-container{

    width:95%;

    max-width:1450px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.navbar-brand{

    font-size:1.8rem;

    font-weight:bold;

    color:#00ffff;

    text-decoration:none;

    text-shadow:
    0 0 8px #00ffff,
    0 0 20px #00ffffaa;

}



.navbar-nav{

    display:flex;

    list-style:none;

    padding:0;

    margin:0;

    gap:20px;

}



.nav-item{

    list-style:none;

}



.nav-link{

    text-decoration:none;

}



.neon-link{

    color:#E0E0E0;

    position:relative;

    font-weight:500;

    transition:.3s;

}



.neon-link:hover{

    color:#00ffff;

    text-shadow:
    0 0 8px #00ffff;

}



.neon-link::after{

    content:"";

    position:absolute;

    bottom:-8px;

    right:0;

    width:0;

    height:3px;

    background:#00ffff;

    box-shadow:
    0 0 10px #00ffff;

    transition:.3s;

}



.neon-link:hover::after{

    width:100%;

}



.navbar-toggler{

    display:none;

    background:none;

    color:#00ffff;

    border:1px solid #00ffff;

    border-radius:8px;

    font-size:22px;

    padding:5px 12px;

}



@media(max-width:900px){


.navbar-toggler{

    display:block;

}



.navbar-collapse{

    display:none;

    width:100%;

}



.navbar-collapse.active{

    display:block;

}



.nav-container{

    flex-wrap:wrap;

}



.navbar-nav{

    flex-direction:column;

    padding:20px 0;

    text-align:center;

}


}

/*در صفحه اصلی چپ چین و راست*/

.process-section{

    width:90%;
    max-width:1200px;
    margin:70px auto;
    direction:rtl;

}


.process-section h2{

    text-align:center;
    color:white;
    font-size:28px;
    margin-bottom:40px;

}



.process-grid{

    display:grid;

    grid-template-columns:
    repeat(5,1fr);

    gap:15px;

}



.process-card{

    position:relative;

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

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

    border-radius:20px;

    padding:25px 15px;

    text-align:center;

    min-height:190px;

    transition:.3s;

}



.process-card:hover{

    transform:translateY(-10px);

    border-color:#00ffff;

    box-shadow:
    0 0 25px rgba(0,255,255,.35);

}



.process-number{

    display:flex;

    width:45px;

    height:45px;

    margin:0 auto 15px;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#00ffff;

    border:2px solid #00ffff;

    font-weight:bold;

    box-shadow:
    0 0 15px #00ffff;

}



.process-card h3{

    color:#00ffff;

    font-size:17px;

    margin-bottom:12px;

}



.process-card p{

    color:#ccc;

    font-size:13px;

    line-height:1.8;

}



@media(max-width:1000px){

.process-grid{

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

}

}



@media(max-width:650px){

.process-grid{

    grid-template-columns:1fr;

}


}