@import url(fonts.css);
@import url(grid.css);
@import url(global.css);
@import url(header.css);


.breadcrumb-menu{
    display: flex;

}
.breadcrumb-menu::before{
    content: " ";
    width: 24px;
    height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 16C15 15.2044 14.6839 14.4413 14.1213 13.8787C13.5587 13.3161 12.7957 13 12 13C11.2044 13 10.4413 13.3161 9.87868 13.8787C9.31607 14.4413 9 15.2043 9 16V20H4L4 10L8 6.5M12 3L20 10L20 20H15' stroke='%23D61C4E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: inline-block;
    margin-left: 5px;
}
.breadcrumb__item{
    font-family: var(--font-yekan-regular);
    font-size: var(--font-size-1);
}
.breadcrumb__item.active{
    color: var(--color-red-primary);
    font-family: var(--font-yekan-medium);
}
.breadcrumb__item:not(:last-child):after{
    content: "/";
    margin: 0 3px;
}
.page-title{
    padding: 9px 22px;
    background-color: #F9F9F9;
    border-radius: 200px;
    color: var(--color-red-primary);
    font-size: 16px;
}
.large-text{
    color: var(--color-text-primary);
    font-size: var(--font-size-3);
    font-family: var(--font-yekan-regular);
    line-height: 40px;
    text-align: justify;
    margin-bottom: 25px;
}
.small-text{
    color: var(--color-text-primary);
    font-size: var(--font-size-2);
    font-family: var(--font-yekan-regular);
    line-height: 40px;
    text-align: justify;
    margin-bottom: 25px;
}
.gray-box{
    padding: 35px;
    background-color: #F5F5F5;
    border-radius: 50px;
    margin-bottom: 20px;
}
.form__row{
    margin-bottom: 20px;
    position: relative;
}
.form__lable{
    display: block;
    position: relative;
    font-family: var(--font-yekan-medium);
    font-size: var(--font-size-2);
    color: #000;
    margin-bottom: 8px;
    user-select: none;
}
.form__lable svg{
    float: left;
    margin-left: 10px;
}
.form__input{
    height: 50px;
    background-color: #fff;
    border: none;
    border-radius: 50px;
    width: 100%;
    padding: 0 16px;
    font-size: var(--font-size-1);
    border: 1px solid transparent;
    transition: all 0.5s ease;
}
.form__input:focus{
    border-color:var(--color-red-primary);
}
.check__lable{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.check__lable::before{
    content: " ";
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--color-text-primary);
}
.check__lable.checked::before{
        background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33329 0.666626C5.56518 0.666626 3.86949 1.369 2.61925 2.61925C1.369 3.86949 0.666626 5.56518 0.666626 7.33329V20.6666C0.666626 22.4347 1.369 24.1304 2.61925 25.3807C3.86949 26.6309 5.56518 27.3333 7.33329 27.3333H20.6666C22.4347 27.3333 24.1304 26.6309 25.3807 25.3807C26.6309 24.1304 27.3333 22.4347 27.3333 20.6666V7.33329C27.3333 5.56518 26.6309 3.86949 25.3807 2.61925C24.1304 1.369 22.4347 0.666626 20.6666 0.666626H7.33329ZM18.9733 12.2453C19.0931 12.1175 19.1865 11.9673 19.2482 11.8034C19.3099 11.6395 19.3388 11.465 19.3331 11.2899C19.3274 11.1149 19.2873 10.9426 19.215 10.7831C19.1428 10.6235 19.0398 10.4797 18.912 10.36C18.7841 10.2402 18.634 10.1468 18.4701 10.085C18.3061 10.0233 18.1317 9.99447 17.9566 10.0002C17.7815 10.0059 17.6093 10.046 17.4497 10.1182C17.2902 10.1905 17.1464 10.2935 17.0266 10.4213L12.916 14.808L10.8853 13.004C10.6192 12.7828 10.2776 12.6737 9.93262 12.6997C9.58762 12.7257 9.26625 12.8849 9.03639 13.1435C8.80653 13.402 8.68619 13.7399 8.70079 14.0855C8.71539 14.4312 8.86378 14.7577 9.11463 14.996L12.1146 17.6626C12.3742 17.8932 12.7135 18.0134 13.0603 17.9978C13.4072 17.9821 13.7343 17.8317 13.972 17.5786L18.972 12.2453H18.9733Z' fill='%23828284'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
}

.btn{
    border-radius: 50px;
    border: 2px solid;
    height: 60px;
    font-family: var(--font-yekan-regular);
    text-align: center;
    font-size: var(--font-size-2);
    padding:0  30px;
    transition: all 0.3s;
    min-width: 175px;
    background-color: transparent;
    margin-bottom: 8px;
}
.red-btn{
   background-color: var(--color-red-primary);
   color: #fff;
   border-color: var(--color-red-primary);
}
.green-btn{
    background-color: var(--color-green-primary);
    color: #fff;
    border-color: var(--color-green-primary);
}
.blue-btn{
    background-color: var(--color-blue-primary);
    color: #fff;
    border-color: var(--color-blue-primary);
}
.yellow-btn{
    background-color: var(--color-yellow-primary);
    color: var(--color-text-primary);
    border-color: var(--color-yellow-primary);
}
.red-btn.border-btn{
     border-color: var(--color-red-primary);
    color: var(--color-red-primary);
    background-color: transparent;
}
.green-btn.border-btn{
     border-color: var(--color-green-primary);
    color: var(--color-green-primary);
    background-color: transparent;
}
.blue-btn.border-btn{
     border-color: var(--color-blue-primary);
    color: var(--color-blue-primary);
    background-color: transparent;
}
.yellow-btn.border-btn{
     border-color: var(--color-yellow-primary);
    color: var(--color-text-primary);
    background-color: transparent;
}
.red-btn:hover{
    background-color: var(--color-red-primary);
    color: #fff;
    box-shadow: 0px 15px 50px rgba(214, 28, 78, 0.25);
    
}
.green-btn:hover{
    background-color: var(--color-green-primary);
    color: #fff;
    box-shadow: 0px 15px 50px rgba(28, 214, 206, 0.25);
    
}
.blue-btn:hover{
    background-color: var(--color-blue-primary);
    color: #fff;
    box-shadow: 0px 15px 50px rgba(41, 52, 98, 0.25);
    
}
.yellow-btn:hover{
    background-color: var(--color-yellow-primary);
    box-shadow: 0px 15px 50px rgba(254, 219, 57, 0.25)
    
}
.btn.disable{
    color: #808080 !important;
    border-color: #808080 !important;
    background-color: transparent !important;
}
.btn.disable:hover{
    color: #808080 !important;
    border-color: #808080 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}