/*
Theme Name:
Theme URI:
Author: samayari - Devix
Description: sama - Devix
Author URI: https://devix.ir
Version: 3
*/
@font-face {
    font-family: devix;
    font-style: normal;
    font-weight: 400;
    src: url('fonts/woff/YekanBakhFaNum-Regular.woff') format('woff'),url('fonts/woff2/YekanBakhFaNum-Regular.woff2') format('woff2')
}
@font-face {
    font-family: devix;
    font-style: normal;
    font-weight: 600;
    src: url('fonts/woff/YekanBakhFaNum-SemiBold.woff') format('woff'),url('fonts/woff2/YekanBakhFaNum-SemiBold.woff2') format('woff2')
}
@font-face {
    font-family: devix;
    font-style: normal;
    font-weight: 700;
    src: url('fonts/woff/YekanBakhFaNum-Bold.woff') format('woff'),url('fonts/woff2/YekanBakhFaNum-Bold.woff2') format('woff2')
}
@font-face {
    font-family: devix;
    font-style: normal;
    font-weight: 900;
    src: url('fonts/woff/YekanBakhFaNum-ExtraBlack.woff') format('woff'),url('fonts/woff2/YekanBakhFaNum-ExtraBlack.woff2') format('woff2')
}
@font-face {
    font-family: devix-2;
    font-style: normal;
    font-weight: 900;
    src: url('fonts/woff2/Mahoor-ExtraBold.woff2')
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
:root {
    --primary-color:#3569F2;
    --txt-color:#353535;
    --black:#454545;
    --btn-color:#2E71E5;
    --border-color:#EDEDED;
    --svg-color:#A6A9AC;
    --secondary-txt-color:#555767; 
    --input-background:#F4F7FC;
    --green:#079545;
    --dark-green:#265E5F;
    --orange:#EE5715;
    --blue:#0C58ED;
    --purple:#7B05E3;
    --dark-pink:#B30C9C;
}
body {
    margin: 0!important;
    background-color: #FEFEFE;
}
html{
    font-size: clamp(12px,2.5wv,20px);
    position: relative;
}
a {
    text-decoration: none!important
}
ul,li{
    list-style: none;
}
a,b,button,div,h1,h2,h3,h4,h5,h6,i,input,label,p,section,select,strong,textarea,time,ul {
    font-family: devix,serif!important;
    margin: 0
}
#devix span {
    font-family: devix,serif;
}
.margin{
    margin: 24px auto !important;
}
.cw{
    width:100% !important;
}
.hw{
    width: 50% !important;
    margin-left: auto;
}
.grin{
    color: #00bd52 !important;
}
.red{
    color: rgb(219, 0, 0) !important;
}
.clear{clear:both}.img-responsive{display:block;max-width:100%;height:auto}.pp{padding:0!important}.pl{padding-left:0!important}.pr{padding-right:0!important}.container,.container-fluid{width:90%;margin-left:auto;margin-right:auto}@media (min-width: 576px){.container{max-width: 97%;}}@media (min-width: 768px){.container{max-width: 97%;}}@media (min-width: 992px){.container{max-width: 97%;}}@media (min-width: 1200px){.container{max-width: 97%;}}@media (min-width: 1400px){.container{max-width: 97%;}}@media (min-width: 1700px){.container{max-width:1676px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-left:calc(var(--bs-gutter-x) / -2);margin-right:calc(var(--bs-gutter-x) / -2)}.row-cols-auto > *{flex:0 0 auto;width:auto}.row-cols-1 > *{flex:0 0 auto;width:100%}.row-cols-2 > *{flex:0 0 auto;width:50%}.row-cols-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-4 > *{flex:0 0 auto;width:25%}.row-cols-5 > *{flex:0 0 auto;width:20%}.row-cols-6 > *{flex:0 0 auto;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333333%}.col-2{flex:0 0 auto;width:16.6666666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333333%}.col-5{flex:0 0 auto;width:41.6666666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333333%}.col-8{flex:0 0 auto;width:66.6666666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333333%}.col-11{flex:0 0 auto;width:91.6666666667%}.col-12{flex:0 0 auto;width:100%}@media(max-width:575px){.hidden-xs{display:none}}@media (min-width: 576px){.hidden-sm{display:none}.col-sm{flex:1 0 0}.row-cols-sm-auto > *{flex:0 0 auto;width:auto}.row-cols-sm-1 > *{flex:0 0 auto;width:100%}.row-cols-sm-2 > *{flex:0 0 auto;width:50%}.row-cols-sm-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-sm-4 > *{flex:0 0 auto;width:25%}.row-cols-sm-5 > *{flex:0 0 auto;width:20%}.row-cols-sm-6 > *{flex:0 0 auto;width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333333%}.col-sm-2{flex:0 0 auto;width:16.6666666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333333333%}.col-sm-5{flex:0 0 auto;width:41.6666666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333333333%}.col-sm-8{flex:0 0 auto;width:66.6666666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333333333%}.col-sm-11{flex:0 0 auto;width:91.6666666667%}.col-sm-12{flex:0 0 auto;width:100%}}@media (max-width: 991px){.hidden-md{display:none}.col-md{flex:1 0 0}.row-cols-md-auto > *{flex:0 0 auto;width:auto}.row-cols-md-1 > *{flex:0 0 auto;width:100%}.row-cols-md-2 > *{flex:0 0 auto;width:50%}.row-cols-md-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-md-4 > *{flex:0 0 auto;width:25%}.row-cols-md-5 > *{flex:0 0 auto;width:20%}.row-cols-md-6 > *{flex:0 0 auto;width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333333%}.col-md-2{flex:0 0 auto;width:16.6666666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333333333%}.col-md-5{flex:0 0 auto;width:41.6666666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333333333%}.col-md-8{flex:0 0 auto;width:66.6666666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333333333%}.col-md-11{flex:0 0 auto;width:91.6666666667%}.col-md-12{flex:0 0 auto;width:100%}}@media (min-width: 992px){.hidden-lg{display:none}.col-lg{flex:1 0 0}.row-cols-lg-auto > *{flex:0 0 auto;width:auto}.row-cols-lg-1 > *{flex:0 0 auto;width:100%}.row-cols-lg-2 > *{flex:0 0 auto;width:50%}.row-cols-lg-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-lg-4 > *{flex:0 0 auto;width:25%}.row-cols-lg-5 > *{flex:0 0 auto;width:20%}.row-cols-lg-6 > *{flex:0 0 auto;width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.3333333333%}.col-lg-2{flex:0 0 auto;width:16.6666666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333333333%}.col-lg-5{flex:0 0 auto;width:41.6666666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333333333%}.col-lg-8{flex:0 0 auto;width:66.6666666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333333333%}.col-lg-11{flex:0 0 auto;width:91.6666666667%}.col-lg-12{flex:0 0 auto;width:100%}}@media (min-width: 1200px){.hidden-xl{display:none}.col-xl{flex:1 0 0}.row-cols-xl-auto > *{flex:0 0 auto;width:auto}.row-cols-xl-1 > *{flex:0 0 auto;width:100%}.row-cols-xl-2 > *{flex:0 0 auto;width:50%}.row-cols-xl-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-xl-4 > *{flex:0 0 auto;width:25%}.row-cols-xl-5 > *{flex:0 0 auto;width:20%}.row-cols-xl-6 > *{flex:0 0 auto;width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.3333333333%}.col-xl-2{flex:0 0 auto;width:16.6666666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333333333%}.col-xl-5{flex:0 0 auto;width:41.6666666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.3333333333%}.col-xl-8{flex:0 0 auto;width:66.6666666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333333333%}.col-xl-11{flex:0 0 auto;width:91.6666666667%}.col-xl-12{flex:0 0 auto;width:100%}}@media (min-width: 1400px){.hidden-xxl{display:none}.col-xxl{flex:1 0 0}.row-cols-xxl-auto > *{flex:0 0 auto;width:auto}.row-cols-xxl-1 > *{flex:0 0 auto;width:100%}.row-cols-xxl-2 > *{flex:0 0 auto;width:50%}.row-cols-xxl-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-xxl-4 > *{flex:0 0 auto;width:25%}.row-cols-xxl-5 > *{flex:0 0 auto;width:20%}.row-cols-xxl-6 > *{flex:0 0 auto;width:16.6666666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.3333333333%}.col-xxl-2{flex:0 0 auto;width:16.6666666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.3333333333%}.col-xxl-5{flex:0 0 auto;width:41.6666666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.3333333333%}.col-xxl-8{flex:0 0 auto;width:66.6666666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.3333333333%}.col-xxl-11{flex:0 0 auto;width:91.6666666667%}.col-xxl-12{flex:0 0 auto;width:100%}}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}@media (min-width: 576px){.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}}@media (min-width: 768px){.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}}@media (min-width: 992px){.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}}@media (min-width: 1200px){.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}}@media (min-width: 1400px){.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}}.p-full{padding:0 12px}figure{margin:0;line-height: 0;}
/***********************************menu*****************************************/


/****************************************************end-menu***************************************/
button{
    cursor: pointer;
}
svg{
    width: 24px;
    height: 24px;
}
input{
    border: none;
    outline: none;
    width: 100%;
    font-size: 12px;
}

/**login style **/
.auth-form {
    display: none !important;
    width: 100%;
}

.auth-form.active {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}

.auth-form .input {
    width: 100%;
    box-sizing: border-box;
}

.auth-form .form-btn {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.auth-form .form-btn button {
    width: 100%;
    padding: 12px;
    cursor: pointer;
}

.auth-form .rules {
    margin-top: 12px;
}

.auth-form .rules input {
    accent-color: var(--primary-color);
}
.login-container > .tab-content form > button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
}

.slider2 .swiper-button-next,
.slider2 .swiper-button-prev{
    display:flex;
    width:40px;
    height:40px;
    background:#fff;
    border-radius:50%;
    z-index:10;
}
.add-photo-box{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:15px;

    width:100%;
    overflow-x:auto;
    overflow-y:hidden;

    flex-wrap:nowrap;
    padding-bottom:10px;
}


/* هر عکس */
.photo-item{
    flex:0 0 120px;
    width:120px;
    height:120px;
    position:relative;
}


/* عکس داخل باکس */
.photo-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:10px;
}


/* دکمه حذف */
.remove-photo{
    position:absolute;
    top:5px;
    right:5px;
}


/* باکس افزودن عکس */
.add-photo{
    flex:0 0 120px;
    width:120px;
    height:120px;

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

    cursor:pointer;
}




.container-small{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 60px;
    align-items: center;
}
.login-page{
    display: flex
    ;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 64px;
        padding: 80px 74px;
        border: 1px solid #f1f6fc;
        width: fit-content;
        border-radius: 16px;
        box-shadow: 0px 0px 16px #c6d6db2e;
}
.login-title{
    color: var(--primary-color);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}
.login-title strong{
    font-weight: 700;
    font-size: 1.2rem;
}
.login-title img{
    width: 100px;
}
.login-title p{
    font-size: 1.125rem;
    font-weight: 700;
}
.login-title span{
    font-size: 1rem;
    font-weight: 600;
}
.login-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.login-container h1{
    font-size: 1rem;
    font-weight: 700;
    color: var(--txt-color);
}
.login-container span{
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--txt-color);
}
.login-container form{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.login-container form input{
    outline: none;
    border: none;
    margin-right: auto;
    text-align: left;
}
.login-container form label{
    color: var(--txt-color);
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: auto;
}
.input{
    display: flex;
    width:fit-content;
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: 8px;
    width: 100%;
}
.input:focus-within{
    outline: 1px solid var(--btn-color);
}
.input svg{
   color:var(--svg-color);
}
.form-btn{
    display: flex;
    gap: 16px;
    margin: 8px 0;
    align-items: center;
}
.form-btn button.active:hover{
    background: #0842a5 !important;
}
.form-btn button{
    padding: 8px 64px;
    border: 1px solid var(--btn-color);
    background: #fff;
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 700;
    transition: 0.3s;
}
.form-btn button:hover{
    background:#0842a5;
    color: #fff;
}
.form-btn button.active{
    background: var(--primary-color) !important;
    color: #fff !important;
    transition: 0.3s;
}
.rules{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rules svg{
    width: 24px;
    height: 24px;
    background:var(--primary-color);
    color: #fff;
    padding: 4px;
    border-radius: 4px;
}
.rules p{
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-color);
}
.rules strong{
    font-weight: 700;
    color: var(--txt-color);
}
.rules input{
    width: fit-content;
}
.lock{
    font-size: 0.7rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--secondary-txt-color) !important;
    margin: 24px 0;
}
.lock svg{
    width: 16px;
    height: 16px;
}
.tab-content {
    display: none;
    width: 100%;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/***profile***/
.tabs .active{
    background: var(--primary-color) !important;
    color: #fff !important;
    transition: 0.3s;
}
.profile-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.profile-title h1{
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--txt-color);
}
.profile-title p{
    font-size: 0.875rem;
    color: var(--secondary-txt-color);
    font-weight: 600;
}
.camera-btn{
    display: flex;
}
.camera-container{
    background: #ebeff19c;
    padding: 24px;
    border: 1px solid #cad9f1;
    border-radius: 50%;
}
.camera-btn svg{
    color: var(--primary-color);
}
.profile-title input[type="file"] {
    display: none;
}
form{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tabs{
    width: 100%;
    gap: 12px;
    display: flex;
    justify-content: center;

}

.profile-form{
    width: 50%;
    margin: 0 auto;
    border: 1px solid #f5f5f5;
    padding: 24px;
    border-radius: 24px;
    box-shadow: 0px 0px 12px #d5e2e7ad;
    margin-top: 88px;
}
.profile-form form{
    width: 100%;
}
.tab-box {
    margin-top: 32px;
    width: 100%; 
}

.tab-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tab-btn .active {
    background: #f1f8ff !important;
    color: #fff !important;
    transition: 0.3s;
    outline: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color) !important;
}
.tab-content label{
    font-size: 1rem;
    font-weight: 600;
    color: var(--txt-color);
}
.tab-content {
    display: none;

}
.tab-content.active {
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.btn{
    background: var(--primary-color);
    width: 100%;
    padding:16px 8px;
    border: none;
    outline: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}
/*8888888888888*/

.selected-items {
    border: 1px solid #dddddda1;
    border-radius: 8px;
    padding: 7px;
    flex-wrap: wrap;
    gap: 7px;
}



.selected-tag {
    display: flex;
    align-items: center;
    gap: 7px;

    background: #f2f2f2;

    padding: 6px 10px;

    border-radius: 6px;

    font-size: 0.8125rem;
}


.remove-tag {
    border: none;
    background: transparent;

    font-size: 1.125rem;
    line-height: 1;

    cursor: pointer;
}


/* لیست گزینه‌ها */

.options-list {
    margin-top: 10px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}
.option{

    height:46px;
    padding:0 14px;

    background:#f7f9fc;

    border:1px solid #e5eaf2;

    border-radius:12px;

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

    color:#344054;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    white-space:nowrap;

}

.option svg{

    width:16px;
    height:16px;

    fill:#98a2b3;

}
.add-activity-btn{

    height:46px;

    padding:0 15px;

    border-radius:12px;

    border:1px dashed #cfd8e6;

    background:#fff;

    color:#1769ff;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

}

.add-activity-btn svg{

    width:18px;

    height:18px;

    fill:#1769ff;

}



/* فرم افزودن */

.add-activity-form{

    display:none;

    margin-top:15px;

    gap:10px;

}


.add-activity-form input{

    height:46px;

    flex:1;

    border-radius:12px;

    border:1px solid #dfe5ee;

    padding:0 15px;

    font-family:inherit;

    font-size:14px;

    outline:none;

}



.add-activity-form input:focus{

    border-color:#1769ff;

}
.city-form{

    display:block;

}
.city-bxx{
    margin: 16px 0;
    width: 100%;
}

.add-activity-form button{

    height:46px;

    padding:0 20px;

    border:0;

    border-radius:12px;

    background:#1769ff;

    color:#fff;

    font-size:14px;

    font-weight:700;

}
.option:hover {
    background:var(--primary-color);
    color: #fff;
}
.multi-select{
        display: flex;
        flex-direction: column;
        margin: 16px 0;
}
.profile-form span{
    font-size: 0.875rem;
    color:var(--txt-color);
    font-weight: 600;
}
.option.selected {
    display: none;
}
#addActivityBtn{
    background: var(--primary-color);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}
/*******************************************************افزودن مورد *********************/
.add-activity-form {
    display: none;
    margin-top: 10px;
    gap: 8px;
}

.add-activity-form.active {
    display: flex;
}

.add-activity-btn {
    margin-top: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    padding: 8px;
    font-size:0.8125rem;
    width: 100%;
    color: var(--primary-color);
    font-weight: 600;
}

.add-activity-form input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    outline: none;
}

.add-activity-form button {
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.complete-name-info{
    display: flex;
    gap: 16px;
    justify-content: center;
}
.name-info{
    width: 100%;
}
/*************************************************************main-page-style***********************************************************/
.header-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    width: 100%;
}
.logo-bx{
    display: flex;
    gap:12px;
    align-items: center;
    justify-content: center;
}
.logo-bx h1{ 
    color: var(--primary-color) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}
.index-logo span{
    font-size: 1rem;
    font-weight: 600;
    color: var(--txt-color);
}
.index-logo{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.index-input-bx{
    border: 1px solid #f1f1f1;
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    box-shadow: 0px 1px 3px #cccccc2b;
    border-radius: 8px;
    flex-direction: row-reverse;
}
.index-form{
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}
.search-bx{
    width: 100%;
}
.search-bx:focus-within{
    border: 1px solid var(--primary-color);
}
.city-bx{
    width: 30%;
}
select{
    border: none;
    outline: none;
    width: 100%;
}
.city-bx select option{
    border:none!important;
    outline: none !important;
}
.category{
    display: flex;
}
.index-main-category{
    width: 100%;
}
.category{
    padding: 16px 0;
    display: flex;
    gap: 24px;
}
.sort-box{
    width: 20%;
    display: flex;
    gap: 16px;
    align-items: center;
    margin-right: auto;
}
hr {
    border: none;
    border-top: 1px solid #dfdfdf9c;
    margin: 16px 0;
}
.users-index{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    width: 100%;
}
.users-index a{
    border: 1px solid #f5f5f5;
    padding: 16px;
    border-radius: 16px;
    box-shadow:0px 1px 6px #e7e7e770;
    width: 100%;
}
.user-index{
    display: flex;
    gap: 12px;
}
.user-index img{
    border-radius: 50%;
    width: 100%;
    max-width: 90px;
    height: 90px;
    object-fit: cover;
}
.users-index-information{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
    border-right: 1px solid #e0e0e0a4;
    width: 100%;
}
.users-index-information h3{
    font-size: 1.0625rem;
    color: var(--txt-color);
    font-weight: 700;
}
.users-index-information strong{
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color);

}
.users-index-information span{
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--txt-color);
    align-items: center;
    display: flex;
    gap: 8px;
}
.span-mrgin{
    margin: 16px 0;
}
.bottom-menu {
    display: none;
}
.bottom-menu a{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color:var(--secondary-txt-color) !important;
    font-size: 12px !important;
    font-weight: 600;
    border-radius: 50%;
    padding: 12px;
    justify-content: center;
    border-radius: 50%;
}
.bottom-menu .active{
    color:var(--primary-color) !important;
}
.plus{
    background: var(--primary-color);
}
.plus svg{
    color: #fff;
}
.bottom-menu a img{
    border-radius: 50%;
    height: auto;
    width: 24px;
}
.slider-main-btm {
    width: 100%;
}

.slider1 {
    width: 100%;
    position: relative;
}

.slider1 .swiper-container {
    width: 100%;
    height: 280px;
    border-radius: 16px;
    margin-top: 24px;
    overflow: hidden !important;
}

.slider1 .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.slider1 .swiper-slide {
    width: 100%;
    height: 100%;
}

.slider1_banner {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 24px;
}

.slider1_banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}
.page1{
    position: relative;
}

.slider1 .page1 {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.slider1 .swiper-pagination {
    text-align: center;
}
.slider1 .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    opacity: 0.6;
    margin: 0 4px;
}
.slider1 .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
}

.slider1 .page1 {
    position: absolute;
    bottom: 24px;
    right: 50%;
    left: 0;
    width: 100%;
    z-index: 10;
}
/********************************************************************ویرایش پروفایل********************************************************************/
.profile-edit-header {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
.profil-edit-information{
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}
.profil-edit-information-box{
    display: flex;
    gap: 16px;
}
.profil-edit-information-box img{
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
}
.profil-edit-information-btn{
    border: 1px solid var(--btn-color);
    display: flex;
    padding: 8px 24px;
    height: fit-content;
    border-radius: 8px;
    gap: 8px;
    color: var(--primary-color);
}
.profile-edit-header-buttons{
    display: flex;
    gap: 16px;
}
.all {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
}
.gallery{

    column-count:4;
    column-gap:15px;

}


.gallery-item{

    break-inside:avoid;

    margin-bottom:15px;

}


.gallery-item img{

    width:100%;
    height:auto;

    display:block;

    border-radius:12px;

} 
.activities-box{
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px #cccccc8f;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.all svg{
    color: var(--primary-color);
}
.all h2{
    font-size: 18px;
    font-weight: 700;
    color: var(--txt-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

      .activities-box .tabs .tab-btn {
        flex: 0 0 auto !important;
        min-width: max-content;
        white-space: nowrap;
    }
    .activities-box .tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        gap: 8px;
        padding: 4px 2px 10px;

        overflow-x: auto !important;
        overflow-y: hidden;

        direction: rtl;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
.activities-box .tabs button{
    width: fit-content;
    padding: 8px 86px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--txt-color);
}
.info-box-button{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: center;
    gap: 16px;
}
.info-box-button a{
    width: 100%;
    color: var(--txt-color);
    display: flex;
    gap: 8px;
    align-items: center;
    border-right: 1px solid #ccc;
    padding: 0 16px ;
    font-size: 13px;
}
.info-box-button a:hover{
    color:var(--primary-color);
}
.info-box-button a:hover svg{
    color:var(--primary-color);
}
.info-box-button a:first-child{
    border: none;
}
.expre-boxs,
.about-me-box {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: 50%;
    box-sizing: border-box;
}
.info-box-button a svg{
    color: var(--txt-color);
}
 .about-me-box p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;

        overflow: hidden;
        line-height: 2;
        max-height: 8em;
    }

    .about-me-box.open p {
        display: block;
        max-height: none;
        overflow: visible;
    }
.cont-user{
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.about-me-box.open p {
    -webkit-line-clamp: unset;
    display: block;
}
.about-me-box button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
}
.about-me-box button svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}
.about-me-box.open button svg {
    transform: rotate(180deg);
}
.gallery-title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.gallery-title h2{
    font-size: 18px;
    color: var(--txt-color);
    font-weight: 700;
    display: flex;
    gap: 7px;
}
.gallery-title a{
    font-size: 14px;
    color: var(--txt-color);
    font-weight: 600;
    display: flex;
    gap: 8px;
    align-items: center;
}




.about-description {
    line-height: 2;
    overflow: hidden;
    max-height: 45px;
    transition: max-height 0.5s ease;
}


.about-me-box.active .about-description {
    max-height: 500px;
}


.read-more-btn {
    cursor: pointer;
    border: none;
    background: transparent;
}


.read-more-btn svg {
    transition: .3s;
}


.about-me-box.active .read-more-btn svg {
    transform: rotate(180deg);
}
/**********************addpost**********************/
.add-photo-box{
    display:flex;
    gap:8px;
    direction:rtl;
    align-items: center;
    gap: 24px;
}

.photo-item{
    width:132px;
    height:132px;
    position:relative;
}

.photo-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:8px;
}

.remove-photo{
    position:absolute;
    top:3px;
    right:3px;
    width:18px;
    height:18px;
    border:0;
    border-radius:50%;
    background:#0066ff;
    color:#fff;
    font-size:14px;
    cursor:pointer;
}

.add-photo{
        width: 80px;
    height: 85px;
    border: 1px dashed #ddd;
    background: #fff;
    border-radius: 8px;
    color: #0066ff;
    font-size: 11px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.add-photo span{
    display:block;
    font-size:25px;
}
.post-options{
    display: flex;
    gap: 16px;
    width: 100%;
}
.fist-post-options{
    width: 100%;
}
.fist-post-options h3{
    font-size: 16px;
    color: var(--txt-color);
}
.nokte{
    background: #e9f1ff;
    padding: 16px;
    border-radius: 16px;
    gap: 8px;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--txt-color);
}
.nokte span{
    display: flex;
    gap: 8px;
}
.post{
        width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.form{
        display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    align-content: flex-start;
    gap: 16px;
    margin: 24px 0;
}
.nokte p{
        font-size: 14px;
    font-weight: 600;
    color: var(--txt-color);
}
.nokte span svg{
    color: var(--primary-color) !important;
}
.post-title{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
}
.post-title h2{
    color: var(--txt-color);
    font-size: 18px;
    font-weight: 700;
}
.post-title a{
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 700;
}
.header-box svg{
    color: var(--txt-color);
}
.calendere-box{
    border: 1px solid rgb(219, 219, 219);
    height: fit-content;
    display: flex;
    gap: 16px;
    padding:4px 8px;
    border-radius: 6px;
    color: var(--txt-color);
}
.title-post-show{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: flex-end;
    margin-top: 16px;
}
 .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
        border-radius: 24px;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    /*****post-show******/
    .slider2{
        height: 300px;
        width: 100%;
    }
    .showpost-slider{
         width: 100%;
    }
    .show-post-btn{
        display: flex;
        width: 100%;
        gap: 24px;
        justify-content: flex-end;
    }
    .show-post-btn button{
        background: none;
        border: none;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--txt-color);
    }
    .show-post-expre{
        width: 100%;
        padding: 16px;
        border: 1px solid #e9e9e9;
        border-radius: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .show-post-expre h3{
        color: var(--txt-color);
        font-size: 18px;
        border-right: 4px solid var(--primary-color);
        padding: 0 8px;
    }
    .show-post-expre p{
        color: var(--txt-color);
        font-size: 16px;
        line-height: 1.8;
    }
    .sveed-photo-title {
        display: flex;
        flex-direction: column;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }
     .sveed-photo-title p{
        color: var(--txt-color);
        font-size: 16px;
        font-weight: 600;
     }
     .sveed-photo-title span{
        font-size: 14px;
        color: var(--txt-color);
        font-weight: 400;
        display: flex;
        align-items: center;
        gap: 8px;
     }
    .save-box {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}
.save-box img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.save-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: #24242494;
    color: #FFE;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.save-btn svg {
    width:24px;
    height:24px;
    stroke:#333;
}
.saved-photo-box{
    display: grid;
    align-items: center;
    gap:24px;
    grid-template-columns: repeat(5, 1fr);
}
.save-btn.active svg {
    fill: white;
}
.profil-edit-information h3{
    font-size: 18px;
    font-weight: 600;
    color: var(--txt-color);
}
.profil-edit-information span{
    font-size: 14px;
    font-weight: 600;
    color: var(--txt-color);
}
.spansvg{
    display: flex;
    align-items: center;
    gap: 8px;
}
.column{
    flex-direction: column;
    width: 100%;
}
.tab-boxs{
    margin-top: 0 !important;
}
.tabbs{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}



/***********************************menu*******************************************/
/* کانتینر اصلی */
.header-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
}


/* دکمه های اطراف منو */
.header-box > a{
    display:flex;
    align-items:center;
    justify-content:center;
}

.header-box svg{
    width:24px;
    height:24px;
}


/* منوی اصلی */
#bazsho{
    position:relative;
}
.baz{
    display: none !important;
}


.menu-top > ul{
    display:flex;
    align-items:center;
    gap:35px;
    list-style:none;
    margin:0;
    padding:0;
}


.menu-top > ul > li{
    position:relative;
}


.menu-top > ul > li > a{
    display:flex;
    align-items:center;
    padding:15px 0;
    color:#222;
    text-decoration:none;
    font-size:16px;
    transition:.3s;
}


.menu-top > ul > li > a:hover{
    color:#c89b5b;
}


/* زیر منو */
.menu-top ul li ul{

    position:absolute;
    top:100%;
    right:0;

    width:200px;

    background:#fff;

    padding:10px 0;
    margin:0;

    list-style:none;

    border-radius:12px;

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

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:.3s;

    z-index:999;
}


/* نمایش زیر منو */
.menu-top ul li:hover > ul{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



/* آیتم های زیر منو */
.menu-top ul li ul li{

    width:100%;

}


.menu-top ul li ul li a{

    display:block;

    padding:12px 20px;

    color:#333;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}


.menu-top ul li ul li a:hover{

    background:#f7f7f7;

    color:#c89b5b;

}


/* فلش کنار منوی دارای زیر منو */
.sub-menu-style::after{

    content:"";

    width:7px;

    height:7px;

    border-right:2px solid #333;

    border-bottom:2px solid #333;

    transform:rotate(45deg);

    margin-right:10px;

    margin-top:-5px;

}
/************************************************************************collaboration-page**************************************************************/
.collaboration-header-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.collaboration-header-box h2{
    font-size: 20px;
    font-weight: 700;
    color: var(--txt-color);
}
.collaboration-header{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 24px 0;
}
.collaboration-header-btns{
    display: flex;
    gap: 8px;
}
.collaboration-btn{
    display: flex;
    gap:8px;
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    color:var(--txt-color);
    align-items: center;
}
.collaboration-btn:first-child{
    background: var(--btn-color);
    color: #fff;
}
.collaboration-main-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.collaboration-main-box form{
    width: 100%;
}
.select-city{
    display: flex;
    justify-content: space-between;
    border: 1px solid #e2e2e2;
    width: 50%;
    padding: 8px;
    border-radius: 8px;
}
.collaboration-main-box span{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--txt-color);
    font-size: 14px;
    font-weight: 400;
}
.collaboration-activity-box{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    width: 100%;
    gap: 24px;
}
.option-big-box{
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: fit-content;
        align-items: center;
        border: 1px solid #e4e4e457;
        width: 100%;
        padding: 24px;
        box-shadow: 0px 0px 4px #e6e6e65c;
        border-radius: 16px;
        gap: 16px;
        color: var(--txt-color);
        font-size: 16px;
        font-weight: 600;
        justify-content: flex-start;
}
.collaboration-activity-box a svg{
    width: 64px;
    height: 64px;
    padding: 8px;
    border-radius: 50%;
    border: 1px solid #eeeeee;
}
.collaborate-span-green {
    font-size: 10px !important;
    color: var(--green) !important;
    margin-right: auto;
}
.collaborate-span-green svg,
.collaborate-span-yellow svg {
    width: 16px;
    height: 16px;
}
.collaborate-span-yellow{
    font-size: 10px !important;
    color:#ff7800 !important;
    margin-right: auto;
}
.green-icn svg{
    background: #e2fff1;
    color: var(--green);
}
.blue-icn svg{
    background: #daf1ff;
    color: var(--blue);
}
.purple-icn svg{
    background: #ffecfd;
    color: var(--purple);
}
.dark-green-icn svg{
    background: #dcedee;
    color: var(--dark-green);
}
.orange-icn svg{
    background: #ffe8d3;
    color:var(--orange);
}
.dark-pink-icn svg{
    background: #fae2ff;
    color: var(--dark-pink);
}
.collaboration-search{
    width: 100%;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 16px 0;
    align-items: flex-start;
}
.collaboration-search h3{
    font-size: 16px;
    color: var(--txt-color);
    font-weight: 700;
}
.collaboration-search .select-city{
    width:20%
}
.yellow{
    border: 1px solid rgb(255, 166, 0) !important;
    color: rgb(255, 145, 0) !important;
}
.yellow:hover{
    color:#fff !important;
    border: none !important;
}
.green{
    border: 1px solid rgb(5, 133, 33) !important;
    color:  rgb(5, 133, 33) !important;
}
.green:hover{
     color:#fff !important;
    border: none !important;
}
.mobile-sheet{
    display: none;
}
.user-details-box{
    display:none;
    position:fixed;
    inset:0;
    background:white;
    z-index:9999;
    overflow:auto;
}


.user-details-box.show{
    display:block;
}


.request-card{

    width:100%;

    background:#eef7ff;

    border-radius:28px;

    padding:25px;

}



.sheet-handle{

    display:none;

}





.request-header{

    display:flex;

    align-items:center;

    gap:20px;

    border-bottom:1px solid #d8e4ef;

    padding-bottom:20px;

}



.request-header img{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:50%;

}



.request-title{

    flex:1;

}



.request-title h2{

    text-align:center;

    font-size:22px;

    color:#14275b;

    margin-bottom:15px;

}



.request-user{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.request-user strong{

    color:#14275b;

    font-size:16px;

}



.request-user span{

    color:#14275b;

    font-size:14px;

    display:flex;

    align-items:center;

    gap:5px;

}



.section-title{

    margin:25px 0 15px;

    font-size:18px;

    color:#14275b;

}



.request-info{

    display:grid;

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

    gap:0 40px;

}



.request-info div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #d8e4ef;

    padding:12px 0;

}



.request-info span{

    color:#172b55;

    font-size:14px;

}



.request-info strong{

    color:#172b55;

    font-size:14px;

}



.description{

    color:#172b55;

    font-size:16px;

    line-height:2;

}



.request-buttons{

    display:flex;

    gap:15px;

    margin-top:25px;

}



.request-buttons a{

    width:50%;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    font-size:18px;

    font-weight:700;

}



.profile-btn{

    background:#fff;

    border:1px solid #c8d3e3;

    color:#14275b;

}



.contact-btn{

    background:#1769e8;

    color:white;

}






/* موبایل */

@media(max-width:768px){
    .tabs{
    -webkit-overflow-scrolling: touch;
}

       .activities-box .tabs{
        overflow-x: scroll !important;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) #e5e7eb;
       }
          .activities-box .tabs::-webkit-scrollbar {
        display: block !important;
        height: 5px;
    }
  .about-me-box.activities-box.col-6 {
        width: 100%;
        padding: 20px;
    }

    .about-me-box h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .about-me-box h2 svg {
        width: 20px;
        height: 20px;
    }

    .about-me-box p {
        font-size: 14px;
        line-height: 1.9;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    .about-me-box.open p {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .about-me-box button {
        margin-top: 12px;
        font-size: 13px;
    }

    .about-me-box button svg {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }

    .about-me-box.open button svg {
        transform: rotate(180deg);
    }
       .mobile-sheet{

        display:block;

        position:fixed;

        bottom:0;

        left:0;

        width:100%;

        background:#fff;

        border-radius:25px 25px 0 0;

        transform:translateY(100%);

        transition:.35s ease;

        z-index:9999;

        box-shadow:0 -5px 20px rgba(0,0,0,.15);

    }
    .mobile-sheet.active{

        transform:translateY(0);

    }
 .sheet-handle{

        width:50px;

        height:5px;

        background:#9ba7b8;

        border-radius:10px;

        margin:12px auto;

    }
   .request-card{

        max-height:80vh;

        overflow-y:auto;

        padding:20px;

    }



    .request-header{

        flex-direction:column;

    }



    .request-title h2{

        font-size:18px;

    }



    .request-user{

        gap:10px;

        flex-direction:column;

    }



    .request-info{

        grid-template-columns:1fr;

    }



    .request-buttons{

        flex-direction:column;

    }



    .request-buttons a{

        width:100%;

    }


}

/*************************************************register-collaboration*****************************/
.register-colaboration-form{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}
.field{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px
}
.properties-project{
    width: 100%;
}
.collaboration-details-project{
    width: 100%;
}
.field label{
    color: var(--txt-color);
    font-size: 14px;
    font-weight: 600;
}
.select-city>select{
    color: var(--txt-color);
    font-size: 12px;
    font-weight: 400;
    border: none;
}
.select-city>select>option:hover{
    background: var(--primary-color) !important;
    color: #fff;
}
.select-city:focus-within{
    border: 1px solid var(--primary-color);
}
.titlle{
    display: flex;
    gap: 8px;
    margin: 8px 0 0 0
}
.titlle h3{
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}
.fields{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}
.field textarea{
    height: 100px;
    border: 1px solid #ccc;
    outline: none;
    border-radius: 8px;
    padding: 8px;
}
.collaboration-header span{
    font-size: 14px;
    color: var(--secondary-txt-color);
    font-weight: 400;
}
/****************************************************************forms**************************************/
.form-header{
    background:rgb(221 236 255);
    border-radius: 0 0 16px 16px;
    padding:0 16px;
}
.sub-title{
    display: flex;
}
/**************************************************************option-title*********************************/
.option-big-box p{
    font-size: 16px;
    font-weight: 600;
    color: var(--txt-color);
    text-align: center;
}
.option-big-box  span{
    font-size: 12px;
    font-weight: 400;
    color: var(--secondary-txt-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.options-big-boxs{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.option-btn{
    background: #e5edf4;
    padding: 8px;
    width: 100%;
    text-align: center;
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
}
.check-list-baner img{
    width: 100%;
}
.news-link{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.news-link-box{
    display: flex;
    justify-content: space-between;
    color: var(--txt-color);
    border: 1px solid #e8e8e8;
    padding: 8px 16px;
    box-shadow: 0 0 4px #e8e8e880;
    border-radius: 8px;
    align-items: center;
    transition: 0.3s;
}
.news-link-box:hover{
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}
.news-link h3{
    font-size: 15px;
    font-weight: 600;
}
.news-link span{
    color: var(--txt-color);
    font-size: 14px;
    font-weight: 400;
        display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.news-link-boxs{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
    margin: 16px 0;
}
.references-request{
    display: flex;
    gap: 16px;
    background: rgb(227, 244, 255);
    padding: 16px;
    border-radius: 8px;
    width: 100%;
}
.requset-box{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.references-request span{
    border: 1px solid var(--primary-color);
    padding:8px 16px;
    width: fit-content;
    height: fit-content;
    border-radius: 8px;
    font-size: 14px;
    color: var(--primary-color);
}
.requset-box strong{
    font-size: 16px;
    font-weight: 700;
    color:rgb(0, 36, 102);
}
.requset-box span{
    border: none;
    color:rgb(0, 36, 102);
    font-size: 14px;
    font-weight: 600;
    padding: 0;
}
.references-request svg{
    margin-right: auto;
    flex-shrink: 0;
    color: var(--primary-color);
}
.building-svg{
    display: flex;
    gap: 16px;
}
.svg-box{
    border: 1px solid #ebebeb;
    padding: 8px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: var(--primary-color)
}
/*************************************************************************checklist****************************************************/
.myproject-box{
    display: flex;
    flex-direction: column;
    gap: 32px;
    border: 1px solid #b8d8e7;
    margin: 8px;
    border-radius: 16px;
    padding: 20px;
    background: #ebf4f7;
}
.myproject-header{
    display: flex;
    gap: 16px;
    align-items: center;
}
.myproject-title{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.myproject-title span{
    display: flex;
    gap: 8px;
    font-size: 14px;
    color: var(--txt-color);
}
.myproject-title h3{
    font-size: 18px;
    font-weight: 700;
    color: var(--txt-color);
}
.myproject-header svg{
    width: 60px;
    height: 60px;
    color: var(--primary-color);
    background: #d4f1fc;
    padding:10px;
    border-radius: 8px;
}
.myproject-title svg{
    background: none;
    padding:0;
    width: 24px;
    height: 24px;
    color: var(--txt-color);
}
.myproject-options{
    display: flex;
    justify-content: space-between;
    background: #f7fdff;
    padding: 16px;
    border-radius: 12px;
}
.myproject-option{
   display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    justify-content: center;
    border-right: 1px solid #e3e3e3;
}
.myproject-option-expre{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.myproject-option-expre span{
    font-size: 16px;
    font-weight: 400;
    color: var(--secondary-txt-color);
}
.myproject-option-expre strong{
    font-size: 16px;
    font-weight: 700;
    color: var(--txt-color);
}
.myproject-option svg{
    color: var(--primary-color);
}
.myproject-option:first-child{
    border-right: none;
}
.hfit{
    height: 232px !important;
}
.steps{
    margin: 24px 0;
    width:100%;
    display:flex;
    align-items:flex-start;
    direction:rtl;

}
.calc-boxs{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
}

.step{

    display:flex;
    flex-direction:column;
    align-items:center;

    min-width:70px;

}


.step-circle{

    width:34px;
    height:34px;

    border-radius:50%;

    border:1px solid #d5ddea;

    background:#fff;

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

    font-size:14px;

    color:#4b5563;

    position:relative;

    z-index:2;

}


.step-title{

    margin-top:8px;

    font-size:12px;

    color:#555;

    white-space:nowrap;

}


/* خط بین مراحل */

.step-line{

    flex:1;

    height:1px;

    background:#d8dfeb;

    margin-top:17px;

}



/* مرحله فعال */

.step.active .step-circle{

    background:#1769e8;

    color:#fff;

    border-color:#1769e8;

}


.step.active .step-title{

    color:#1769e8;

    font-weight:700;

}



/* مرحله تکمیل شده */

.step.done .step-circle{

    border-color:#22b573;

}


.step-check{

    position:absolute;

    bottom:-2px;

    right:-5px;

    width:14px;
    height:14px;

    background:#22b573;

    color:white;

    border-radius:50%;

    font-size:10px;

    display:flex;

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

}











/*************************************************************************price-page*********************/
.proice-title{
    width:100%;
    display:grid;
    grid-template-columns:35fr 23fr 15fr;
    gap:24px;
    border-radius:8px;
    background:#e7f2fa;
    margin-top:24px;
}
.price-right-title{
    margin-left: 10%;
    display: flex;
    gap: 8px;
}
.proice-title span{
    padding: 0 32px;
}
.properties{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.price-content{

    min-height:70px;
    padding:8px 15px;
    margin-top:7px;

    display:grid;
    grid-template-columns:35fr 23fr 15fr;
    column-gap:24px;
    align-items:center;

    background:#fff;
    border:1px solid #eeeeee;
    border-radius:10px;
}
.price-content span{
    font-size: 14px;
    font-weight: 600;
    color: var(--txt-color);
}
.tab-content {
    display: none;
    width: 100%;
}
.tab-content.active {
    display: block;
}
.pding{
    padding: 8px 0;
}
.proice-title {
    width: 100%;
    display: grid;
    grid-template-columns: 35fr 23fr 15fr;
    gap: 24px;
}
.proice-title > span {
    text-align: center;
}
.proice-title > span:first-child {
    text-align: right;
}
.price-right-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.price-right-title img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    border-radius: 6px;
}
.properties {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.price-right-title .properties {
    align-items: flex-start;
}
.properties span:first-child {
    font-size: 14px;
    color: #172554;
}
.properties span:last-child {
    font-size: 11px;
    color: #888;
}
.price-btn{
    padding: 8px 24px !important;
}
.tabs-price{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    width: 100%;
}
.proice-title span{
    font-size: 16px;
    color: var(--txt-color);
    font-weight: 600;
}
/*****************************************************calculator-page************************************************/
.calculator-title-box{
    display: flex;
    gap: 24px;
}
.calculator-title h3{
    font-size: 16px;
    font-weight: 600;
    color: var(--txt-color);
}
.calculator-title  span{
    font-size: 14px;
    color: var(--txt-color);
    font-weight: 400;
}
.calc-btn{
    width: 30%;
    margin: 8px 0;
}
.price-items{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 24px;
}


.price-item{
    width:100%;
    min-height:160px;
    border:1px solid #e7eaf0;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#fff;
    padding:15px 10px;
}


.price-item svg{
    width:35px;
    height:35px;
    margin-bottom:10px;
    fill:#55627a;
}


.price-item span{
    font-size:14px;
    color:#555;
    margin-bottom:8px;
}


.price-item strong{
    font-size:22px;
    color:#1748b8;
    font-weight:700;
    margin-bottom:5px;
}


.price-item small{
    font-size:13px;
    color:#777;
}
.calc-items h3{
    font-size: 16px;
    color: var(--txt-color);
    font-weight: 600;
    padding: 8px 0;
}
.calc-items{
    border: 1px solid #ccc;
    padding:8px 16px;
    border-radius: 16px;
}
.calc-box{
    width:100%;
    height:70px;
    border:1px solid #e7eaf0;
    border-radius:12px;
    display:flex;
    align-items:center;
    padding:0 15px;
    direction:rtl;
    background:#fff;
    gap:20px;
}


.calc-arrow{

    width:35px;
    display:flex;
    justify-content:center;

}


.calc-arrow svg{

    width:18px;
    height:18px;
    fill:#1c3d7a;

}


.calc-content{

    flex:1;

}


.calc-content h3{

    margin:0 0 6px;

    font-size:15px;
    color:#162b55;

    font-weight:700;

}


.calc-content span{

    font-size:12px;
    color:#777;

}


.calc-info{

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    font-size:12px;
    color:#273b67;

    gap:5px;

}


.calc-info small{

    color:#555;

}


.calc-menu svg{

    width:22px;
    height:22px;
    fill:#152957;

}
.check-list-box{
    margin: 24px;
    width:100%;
    border:1px solid #e4e9f2;
    border-radius:18px;
    padding:25px;
    direction:rtl;
    background:#fff;

}


.check-list-header{

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

}


.check-list-header h3{

    margin:0;
    font-size:18px;
    color:#172b55;

}


.check-list-header span{

    font-size:14px;
    color:#444;

}



.progress{

    height:6px;
    background:#e9eef8;
    border-radius:10px;
    margin:20px 0;

}


.progress-done{

    width:55%;
    height:100%;
    background:#20b77a;
    border-radius:10px;

}



.check-item{

    height:80px;

    display:flex;
    align-items:center;

    border-bottom:1px solid #edf0f5;

    position:relative;

    cursor:pointer;

}


.check-info{

    flex:1;

}


.check-info span{
    display:block;
    font-size:14px;
    font-weight:700;
    color:#172b55;
}


.check-info small{

    color:#777;
    font-size:13px;

}



.check-item input{

    display:none;

}



.custom-check{

    width:30px;
    height:30px;

    border:2px solid #d5dae5;

    border-radius:7px;

    display:flex;

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

    margin-left:20px;

}



.check-item input:checked + .custom-check{

    background:#20b77a;
    border-color:#20b77a;

}



.check-item input:checked + .custom-check::after{

    content:"✓";

    color:#fff;

    font-size:20px;

    font-weight:bold;

}



.more{

    position:absolute;

    left:0;

    border:0;
    background:none;

    font-size:28px;

    color:#172b55;

    cursor:pointer;

}



.add-check{
    font-weight: 600;
    width:100%;
    padding: 12px 0;
    border:0;
    margin-top:20px;
    border-radius:15px;
    background:#f3f7ff;
    color:#1769e8;
    font-size:14px;
    cursor:pointer;
}
.modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    z-index: 998;
}


.user-modal{

    position: fixed;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;

    right: 50%;
    top: 50%;

    transform: translate(50%,-45%) scale(.9);

    background:#fff;
    border-radius:20px;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:999;
}


.user-modal.show{

    opacity:1;
    visibility:visible;

    transform:translate(50%,-50%) scale(1);

}


.modal-overlay.show{
    display:block;
}



.modal-close{

    position:absolute;
    left:20px;
    top:15px;

    width:35px;
    height:35px;

    border:0;
    background:#eee;

    border-radius:50%;

    font-size:25px;

    cursor:pointer;

}


















/* =====================
   حالت موبایل
===================== */

@media(max-width:991px){


.header-box{

    position:relative;

}


/* منوی بازشو */
#bazsho{

    position:fixed;

    top:0;

    right:-320px;

    width:280px;

    height:100vh;

    background:#fff;

    padding:80px 20px 20px;

    transition:.4s;

    box-shadow:-5px 0 20px rgba(0,0,0,.15);

    z-index:1000;

}


/* وقتی باز شد */
#bazsho.active{

    right:0;

}



.menu-top > ul{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:0;

}


.menu-top > ul > li{

    width:100%;

    border-bottom:1px solid #eee;

}


.menu-top > ul > li > a{

    justify-content:space-between;

    padding:15px 0;

}



/* زیرمنو موبایل */

.menu-top ul li ul{

    position:static;

    width:100%;

    box-shadow:none;

    border-radius:0;

    display:none;

    opacity:1;

    visibility:visible;

    transform:none;

    padding-right:15px;

}



.menu-top ul li:hover > ul{

    display:block;

}


}
.back-c{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.4);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:900;

}


.back-c.active{

    opacity:1;

    visibility:visible;

}


.request-card {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid #d9e3f2;
    border-radius: 32px 32px 0 0;
    background: #f3f7ff;
    box-shadow: 0 0 16px rgba(0, 31, 84, 0.08);
    box-sizing: border-box;
    direction: rtl;
    color: #07124d;
}

.sheet-handle {
    display: none;
    width: 40px;
    height: 4px;
    margin: 0 auto 20px;
    border-radius: 10px;
    background: #7897d4;
}

.request-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ccd6e5;
}

.request-header > img {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    border-radius: 50%;
    object-fit: cover;
}

.request-title {
    flex: 1;
    min-width: 0;
}

.request-title h2 {
    margin: 0 0 20px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
}

.request-user-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 16px;
}

.request-user-info strong,
.request-user-info span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.request-user-info svg,
.request-detail svg,
.request-actions svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.request-details {
    padding-top: 20px;
}

.request-details h3,
.request-description h3 {
    margin: 0 0 16px;
    font-size: 1rem;
}

.request-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
}

.request-detail {
    display: grid;
    grid-template-columns: 28px 110px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #d7dfec;
}

.request-detail span {
    color: #5f6680;
}

.request-detail strong {
    font-weight: 600;
}

.request-description {
    padding-top: 24px;
}

.request-description p {
    margin: 0;
    line-height: 2;
    color: #323956;
}

.request-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.request-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 16px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    box-sizing: border-box;
}

.request-contact-btn {
    border: 1px solid #1769e8;
    background: #1769e8;
    color: #fff;
}

.request-profile-btn {
    border: 1px solid #ccd5e5;
    background: #fff;
    color: #07124d;
}
.check-lists-option-box{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    border: 1px solid #e2e2e2;
    padding: 8px 16px;
    border-radius: 16px;
    margin: 24px 0;
}
.chk{
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid #ccc;
    align-items: center;
    font-size: 14px;
}
.chk:first-child{
    border: none;
}
.calc-btn{
    background: var(--primary-color);
    padding: 8px 24px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    color: #fff;
    gap: 8px;
}













@media (max-width: 991px) {
    .slider1 .swiper-container {
        height: 220px;
        overflow: hidden;

    }
}


@media (max-width: 768px){
    
    .container-small {
        padding: 24px 16px;
    }

    .login-page {
        width: 100%;
        max-width: 100%;
        padding: 40px 16px;
        box-sizing: border-box;
    }

    .login-title {
        text-align: center;
    }

    .login-title p,
    .login-title span {
        line-height: 2;
    }

    .login-container {
        width: 100%;
    }
    .calc-boxs{
    grid-template-columns: repeat(1,1fr);
}
    .chk{
        font-size: 12px;
    }
    .check-lists-option-box{
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}
     .request-card {
        max-width: 100%;
        padding: 16px;
        border-radius: 28px 28px 0 0;
    }

    .sheet-handle {
        display: block;
    }

    .request-header {
        gap: 12px;
        padding-bottom: 16px;
    }

    .request-header > img {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .request-title h2 {
        margin-bottom: 14px;
        font-size: 1.1rem;
    }

    .request-user-info {
        gap: 6px;
        font-size: 0.75rem;
    }

    .request-user-info svg {
        width: 18px;
        height: 18px;
    }

    .request-details-grid {
        column-gap: 16px;
    }

    .request-detail {
        grid-template-columns: 22px minmax(65px, auto) minmax(0, 1fr);
        gap: 5px;
        padding: 10px 0;
        font-size: 0.75rem;
    }

    .request-detail svg {
        width: 19px;
        height: 19px;
    }

    .request-description {
        padding-top: 18px;
    }

    .request-description p {
        font-size: 0.8rem;
        line-height: 2;
    }

    .request-actions {
        gap: 8px;
        margin-top: 18px;
    }

    .request-actions a {
        min-height: 50px;
        padding: 8px;
        font-size: 0.8rem;
    }

    .request-actions svg {
        width: 22px;
        height: 22px;
    }
    .select-city{
        width: 100%;
    }
    .collaboration-header span{
        display: none;
    }
    .collaboration-btn{
    display: flex;
    gap: 8px;
    border: 1px solid var(--border-color);
    padding: 8px 7px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--txt-color);
}
    .collaboration-header span{
        font-size: 12px;
    }
    .collaboration-activity-box{
            grid-template-columns: repeat(3, 1fr);
    }
    .save-btn {
    top: 8px;
    right: 8px;
    }
    .save-box{
        height: 150px;
    }
    .saved-photo-box{
    grid-template-columns: repeat(4, 1fr);
    }
    .post-options{
        flex-direction: column;
    }
    body {
        padding-bottom: 80px; 
    }
    .users-index {
    grid-template-columns: repeat(2, 1fr);
}
    .sort-box{
        width: 64%;
    }

   
    .bottom-menu {
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 70px;
        background: #fff;
        align-items: center;
        justify-content: space-around;
        border-top: 1px solid #ddd;
    }

    .bottom-menu a {
        text-decoration: none;
        color: #201201;
        font-size: 14px;
    }
    .slider1 .swiper-container {
        height: 180px;
    }
     .info-box-button{
        grid-template-columns: repeat(2,1fr);
    }
     .activities-box .tabs button{
        width: 50%;
    }
    .option-big-box p{
        font-size: 14px;
    }
}

@media (max-width: 375px){
    .user-index img{
        width:50px;
        height:50px;
    }
    .collaboration-main-box span{
        font-size: 10px;
    }
    .option-big-box{
        font-size: 12px ;
    }
    
    .login-page{
        margin-top: 32px;
    }
    .profil-edit-information span {
        display: flex;
        gap: 4px;
    }
    .profile-edit-header h3{
        font-size: 14px;
    }
    .profile-edit-header{
        gap: 16px;
    }
    .profil-edit-information-btn{
        font-size: 12px;
        padding: 4px 4px;
    }
   
   
        .all {
        flex-direction: column;
    }

    .expre-boxs,
    .about-me-box {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .tabs .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .myproject-options{

        display:flex;
        flex-wrap:nowrap;
        gap:5px;
        padding:10px;

    }


    .myproject-option{

        width:25%;
        flex:1;

        gap:5px;

        border-right:1px solid #e3e3e3;

        justify-content:center;

    }


    .myproject-option svg{

        width:20px;
        height:20px;

    }


    .myproject-option-expre span{

        font-size:10px;

    }


    .myproject-option-expre strong{

        font-size:12px;

    }

    .myproject-option{

        flex-direction:column;
        text-align:center;

    }


    .myproject-option-expre span{

        white-space:nowrap;

    }
        .step{
        min-width:45px;
    }


    .step-circle{

        width:28px;
        height:28px;

        font-size:12px;

    }


    .step-line{

        flex:1;
        margin-top:14px;

    }


    .step-title{

        font-size:10px;

    } 
    .price-items{
        grid-template-columns: repeat(3,1fr);
        gap: 16px;
    }
    .calc-btn{
        width: 100%;
    }
    .properties span:first-child{
        font-size: 12px;
    }
    .tabs-price button{
        width: 100%;
    }
    .price-btn {
    padding: 8px 11px !important;
    width: 100%;
}
     
    .proice-title,
    .price-content{
        grid-template-columns: 1.5fr 1fr 0.8fr;
        gap:5px;
    }
    .proice-title span{
        padding: 0 !important;
        font-size: 14px;
    }
    .price-right-title{
        gap:5px;
    }
    .tabs-price {
        grid-template-columns: repeat(3, 1fr);
    }
    .building-svg{
        gap: 8px;
    }
    .news-link-boxs{
        grid-template-columns: repeat(1,1fr);
    }
    .options-big-boxs{
        grid-template-columns: repeat(2,1fr);
    }
    .hw{
        width: 100% !important;
    }
    .fields{
        grid-template-columns: repeat(2,1fr);
    }
    .collaboration-details-project .fields{
        grid-template-columns: repeat(1,1fr);
    }
    .collaboration-activity-box a{
        padding: 16px;
    }
    .collaboration-search .select-city{
        width: 40%;
    }
    .collaboration-activity-box{
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .sveed-photo-title span{
        font-size: 12px;
    }
    .save-btn {
        width: 38px;
        height: 38px;
    }
    .save-btn svg {
    width: 20px;
    height: 20px;
    }
    .save-box{
        height:100px;
    }
     .saved-photo-box{
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    }
    .calendere-box{
        width: 36%;
    }
       .activities-box {
        min-width: 0;
        width: 100%;
    }
    .all{
        flex-direction: column-reverse;
    }
    .profil-edit-information-box{
        gap: 8px;
    }
    .profil-edit-information-box img{
        width: 100px;
        height: 100px;
    }
    .profile-edit-header{
        flex-direction: row;
    }
    .profile-edit-header-buttons{
        flex-direction: column;
    }
   
    .category {
        padding: 0 0 16px 0;
    }
    label{
            font-size: 14px;
    font-weight: 600;
    }
     select {
    font-size: 0.7rem;
}
    select option{
        font-size: 0.7rem !important;
    }
    .search-bx input::placeholder {
        font-size: 0.6rem !important;
    }
    .city-bx {
        width: 50%;
    }
    .users-index{
        grid-template-columns: repeat(1,1fr);
    }
    .complete-name-info{
        flex-direction: column;
    }
    .tabs button{
        padding: 8px 40px !important;
    }
    .profile-form{
        width: 100%;
        padding: 24px;
        margin: 0;
    }
    .container-small{
        padding: 0;
    }
    .login-page{
        padding: 0;
        border: none;
        box-shadow: none;
    }
    .form-btn button{
        padding: 8px 16px;
    }
    .login-title p{
        font-size: 0.9rem;
    }
    .login-title span{
        font-size: 0.8rem;
    }
    .slider1 .swiper-container {
        height: 140px;
        overflow: hidden;
    }
}

/* =========================================================
   Other profile activity gallery
   Pure CSS masonry: keeps each image's natural aspect ratio
   and avoids absolute positioning / Masonry height issues.
   ========================================================= */
.profile-gallery {
    width: 100%;
    column-count: 4;
    column-gap: 16px;
}

.profile-gallery .gallery-item {
    width: 100%;
    display: inline-block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 16px;
    overflow: hidden;
    border-radius: 12px;
    vertical-align: top;
}

.profile-gallery .gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: inherit;
    object-fit: cover;
    transition: transform .3s ease;
}

.profile-gallery .gallery-item:hover img {
    transform: scale(1.025);
}

@media (max-width: 1200px) {
    .profile-gallery {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .profile-gallery {
        column-count: 2;
        column-gap: 12px;
    }

    .profile-gallery .gallery-item {
        margin-bottom: 12px;
        border-radius: 10px;
    }
}
@media (max-width: 576px) {
        .tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

}
@media (max-width: 480px) {
        .users-index {
        grid-template-columns: repeat(1, 1fr);
    }
   
}
.demo-pages{
        display: flex;
    padding: 64px;
    flex-direction: column;
    align-items: center;
}
.demo-pages ul li a{
    border:1px solid #ccc !important;
    padding: 8px !important;
    border-radius:4px !important;
}
.demo-pages ul{
        display: flex;
    flex-direction: column;
    gap: 24px;
}