* {
     font-family: Vazir-FD;
     font-size: 1.4rem;
     box-sizing: border-box;
     font-weight: 400;
     user-select: none;
}

input,
select {
     outline: none;
     border: 0.1rem solid #dddddd9c;
}

a {
     text-decoration: none;
     list-style: none;
     color: #343a40;
}

body {
     overflow: hidden;
     position: relative;
     width: 100%;
     height: 100vh;
     background-color: #ededed;
}

html {
     font-size: 10px;
}

.body {
     width: 100%;
     height: 100%;
}

.slides {
     width: 110%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     position: absolute;
     height: 100vh;
     margin: 0 auto;
}

.slide {
     width: 100%;
     height: 100%;
     display: block;
}

.slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0.3;

}

.Ttile_box {
     position: fixed;
     top: 10%;
     left: 0;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

.index_logo{
     width: 30rem;
     height: 30rem;
     object-fit: contain;
     border-radius: 15%;
     -webkit-border-radius: 15%;
     -moz-border-radius: 15%;
     -ms-border-radius: 15%;
     -o-border-radius: 15%;
     opacity: 0.8;
}
.Ttile_box h1 {
     font-size: 5rem;
     font-weight: 900;
     color: #000000;
}

.Ttile_box h2 {
     font-size: 2.6rem;
     margin-top: -1rem;
     font-weight: 400;
     color: #4a4a4a;
}

.Ttile_box span {

     background-color: #0023ff;
     border: 0.1rem solid #0023ff;
     padding: 1.2rem 4rem;
     color: #fff;
     border-radius: 5rem;
     font-size: 1.5rem;
     transition: all 0.4s ease;
     margin-top: 3rem;
     cursor: pointer;
}

.joinBox {
     width: 50rem;
     height: 20rem;
     background-color: #fff;
     position: fixed;
     top: 25%;
     left: 50%;
     transform: translateX(-50%);
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     -o-transform: translateX(-50%);
     opacity: 0;
     pointer-events: none;
}

.joinBox.active {
     animation: join 0.5s linear forwards;
     -webkit-animation: join 0.5s linear forwards;
}

@keyframes join {
     0% {
          opacity: 0;
     }

     100% {
          opacity: 1;
          pointer-events: all;
     }
}

.joinBox h3 {
     width: 100%;
     text-align: center;
     background-color: #0022ff;
     color: #fff;
     margin-top: 0;
     padding: 1rem 0;
     border-bottom-left-radius: 4rem;
     border-bottom-right-radius: 4rem;
}

.join_btnBoxs {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 3rem 0;
     margin-top: 2rem;
}

.join_btnBoxs a {
     padding: 1rem 2rem;
     background-color: #0022ff;
     margin: 0 1rem;
     border-radius: 0.5rem;
     -webkit-border-radius: 0.5rem;
     -moz-border-radius: 0.5rem;
     -ms-border-radius: 0.5rem;
     -o-border-radius: 0.5rem;
     color: #fff;
     transition: all 0.4s ease;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     -ms-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
}

.join_btnBoxs a:hover {
     box-shadow: 0 0.5rem 0.9rem 0.1rem #0022ff5b;
}

.close_joinBox {
     position: absolute;
     font-size: 1.7rem;
     top: 0.5rem;
     left: 1rem;
     color: #fff;
     cursor: pointer;
}

.close_joinBox svg {
     font-size: 2rem;
}

.Ttile_box a:hover {
     box-shadow: 0 0.7rem 1.2rem 0.1rem #0022ff5b;
}

.side_bar {
     position: fixed;
     top: 0;
     right: 0;
     background-color: #fff;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-direction: column;
     padding: 1rem 0;
     width:100px;
     z-index: 999999;
     border-left: 0.1rem solid #dddddd9c;
     transition: all 0.4s ease;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     -ms-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
}


.heder_sidebar {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-direction: column;


}

.logo {
     width: 4rem;
     height: 4rem;
}

.logo img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     cursor: pointer;
}

.items {
     width: 100%;
}

.menu_items,
.menu_items2 {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-direction: column;
     list-style: none;
     padding: 0;
}

.menu_items2 .menu_list {
     margin: 0;
}

.menu_list {
     margin: 2.5rem 0;
}

.menu_link {
     cursor: pointer;
}

.menu_link svg {
     width: 2rem;
     height: 2rem;
     opacity: 0.5;
}

.menu_link:hover svg {
     opacity: 1;
}

.menu_title2 {
     font-size: 2rem;
     font-weight: 700;
}


.d-none {
     display: none;
}

.menu_btnBox,
.Sidebar_btnBox {
     width: 5rem;
     height: 5rem;
     box-shadow: 0 0 0.7rem 0.1rem #dddddd9c;
     position: absolute;
     top: 1rem;
     left: 3rem;
     background-color: #fff;
     border-radius: 5rem;
     cursor: pointer;
     z-index: 90000;
}

.menu_btn {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;

}
.inner_menu_btn{
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0rem;
     height: 0rem;
     background-color: #ee720d;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     -o-border-radius: 50%;
     transform-origin: center;
     transform: translate(-50%,-50%);
     -webkit-transform: translate(-50%,-50%);
     -moz-transform: translate(-50%,-50%);
     -ms-transform: translate(-50%,-50%);
     -o-transform: translate(-50%,-50%);
}
.inner_menu_btn.active{
 animation: fade 1s linear infinite;
 -webkit-animation: fade 1s linear infinite;
 transform-origin: center;
}


@keyframes fade {
     0%{
          width: 0.1rem;height: 0.1rem;
     }
     100%{
          width: 5rem;
          height:5rem;
          opacity: 0.1;
     }
}
.no_notfications{
     width: 95%;
     padding: 1rem 0;
     background-color: #00b289;
     color: #fff;
     margin: 0 auto;
     text-align: center;
}
.menu_btn svg {
     font-size: 2rem;
     color: #e46014;
}

.Sidebar_btnBox {
     left: unset;
     right: 3rem;
     display: none;
     transition: all 0.4s ease;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     -ms-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
}
.Sidebar_btnBox.active {
    margin-right:70px;
}
.Sidebar_btn {
     position: absolute;
     width: 30%;
     left: 50%;
     top: 50%;
     height: 0.1rem;
     background-color: #0023ff;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     transition: all 0.4s ease;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     -ms-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
}

.Sidebar_btn::before,
.Sidebar_btn::after {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     background-color: #0023ff;
     top: -0.5rem;
}

.Sidebar_btn::after {
     top: 0.5rem !important;
}

.Sidebar_btn.active::before {
     transform: rotate(45deg);
     top: 0;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
}

.Sidebar_btn.active::after {
     transform: rotate(-45deg);
     top: 0 !important;
}

.Sidebar_btn.active {
     background-color: transparent;
}

.menu2 {
     width:0;
     height: 100vh;
     background-color: #fff;
     position: absolute;
     top: 0;
     left:0;
     padding-top: 0rem;
     transition: all 0.4s ease;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     -ms-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
     border-right: 0.1rem solid #dddddd9c;
     z-index: 90000;
     overflow:hidden;
     opacity:0;
}

.menu2.active {

     width: 30rem !important;
     opacity:1;
}

.menu2 h4 {
     width: 100%;
     text-align: right;
     border-bottom: 0.1rem solid #343a401c;
     padding: 2.5rem 1.5rem;
     margin-top: 0;
     font-weight: 500;
     font-size: 1.7rem;

}

.menu2_msg {
     width: 95%;
     height: 5rem;
     margin: 0.5rem auto;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 0 0.5rem;
     border-radius: 0.3rem;
     -webkit-border-radius: 0.3rem;
     -moz-border-radius: 0.3rem;
     -ms-border-radius: 0.3rem;
     -o-border-radius: 0.3rem;
     border-bottom: 0.1rem solid #343a401c;
     background-color: #5353530a;
     cursor: pointer;

}
.menu2_msg.unread{
     background-color: #ee720d;
     color: #fff;
}

.home_items {
     position: fixed;
     top: 0;
     right: -100%;
     height: 100%;
     width: 30rem;
     background-color: #344258;
     overflow: hidden;
     background: linear-gradient(0deg, #344258e8, #344258e8), url("../images/menu_bg.jpg") no-repeat;
     background-size: cover;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-direction: column;
     transition: all 0.5s ease;
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     z-index: 9000;
}

.home_items.active {
     right: 8.8rem !important;
}

.home_items_box {
     z-index: 90000;
     width: 100%;
     display: flex;
     align-items: flex-start;
     justify-content: center;
     flex-direction: column;
     line-height: 2.5;
     list-style: none;
     padding: 0;
     margin-top: 0;
}

.home_items_list {
     padding: 2rem 0;
     border-bottom: 0.1rem solid #777788;
     width: 100%;
}

.home_items_link,
.home_items_link2 {
     color: #fff;
     margin-right: 1.5rem;
}

.home_items_link:hover {
     opacity: 0.8;
}

.home_items_profile {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 2rem;
     cursor: pointer;

}

.profile {
     width: 5rem;
     height: 5rem;
     border: 0.2rem solid #fff;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     -o-border-radius: 50%;
     padding: 0.3rem;
}

.profile img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 5rem;
     -webkit-border-radius: 5rem;
     -moz-border-radius: 5rem;
     -ms-border-radius: 5rem;
     -o-border-radius: 5rem;
}

.profile_info {
     color: #fff;
     display: flex;
     align-items: flex-start;
     justify-content: center;
     flex-direction: column;
     margin-right: 1rem;
}

.profile_info span {
     font-size: 1.5rem;
}

.close_btn {
     position: absolute;
     top: 1.5rem;
     left: 1.5rem;
     cursor: pointer;
     z-index: 900000;
     transition: all 0.5s ease;
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     transform-origin: center;
     width: 3rem;
     height: 3rem;
     display: flex;
     align-items: center;
     justify-content: center;
}

.close_btn svg {
     color: #fff;
     font-size: 2rem;

}

.close_btn:hover {
     transform: rotate(270deg);
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
     -ms-transform: rotate(270deg);
     -o-transform: rotate(270deg);
}

.bagBox {
     width: 30rem;
     height: 100vh;
     position: absolute;
     top: 0;
     right: -100%;
     background-color: #fff;
     transition: all 0.5s ease;
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     z-index: 90000;
}

.bagBox.active {
     right: 8.8rem !important;
}

.bagBox h3.bag_title {
     width: 100%;
     font-size: 1.7rem;
     border-bottom: 0.1rem solid #343a401c;
     padding: 2rem 1.5rem;
     margin: 0 !important;
}

.bag_sub_info {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 3rem 0;
}

.bag_sub_info img {
     width: 15rem;
     height: 15rem;
     object-fit: cover;
}

.bag_sub_info h3 {
     font-size: 1.7rem;
     font-weight: 600;
}

.bag_sub_info span {
     font-size: 1.3rem;
     color: #343a40;
}

.bag_sub_info a {
     padding: 1.4rem 3.5rem;
     border: 0.1rem solid #0022ff;
     margin: 1rem 0;
     border-radius: 5rem;
     -webkit-border-radius: 5rem;
     -moz-border-radius: 5rem;
     -ms-border-radius: 5rem;
     -o-border-radius: 5rem;
     color: #0022ff;
     transition: all 0.4s ease;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     -ms-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
}

.bag_sub_info a:hover {
     background-color: #0022ff;
     color: #fff;
     box-shadow: 0 0.7rem 1.2rem 0.1rem #0022ff5b;

}

.bag_sub_info small {
     color: #343a40;
}

.bag_close_btn svg {
     color: #343a40;
}
.msg_alert{
     width: 100%;
     background-color: #0022ff;
     color: #fff;
     padding: 2rem;
     border-radius: 0.5rem;
     -webkit-border-radius: 0.5rem;
     -moz-border-radius: 0.5rem;
     -ms-border-radius: 0.5rem;
     -o-border-radius: 0.5rem;
     margin-top: 5rem;
     text-align: center;
}
.shareing_box{
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 0 1rem;
}
.shareing_box span{
     font-size: 1.5rem;
     display: block;
     width: 100%;
     margin-bottom: 2rem;

}
.bag_sub_info h4{
     background-color: #0022ff;
     color: #fff;
     padding: 1rem;
     width: 100%;
     text-align: center;
     margin-top: 0;
     border-bottom-left-radius: 3rem;
     border-bottom-right-radius: 3rem;
}
.bag_sub_info2{
     padding: 0 !important;
     width: 90%;
     margin: 1rem auto !important;
     border: 0.1rem solid #4a4a4a;
     border-top: 0.1rem solid #0022ff;
     border-radius: 0.5rem;
     -webkit-border-radius: 0.5rem;
     -moz-border-radius: 0.5rem;
     -ms-border-radius: 0.5rem;
     -o-border-radius: 0.5rem;
     overflow: hidden;

}
.not_alert{
     width: 50%;
     display: block;
     padding:2rem 1rem;
     background-color: #00b288be;
     color: #fff;
     border-radius: 5px;
     margin: 0 auto;
     text-align:center;
}
.alert__body2{
     width: 100%;
     height: 87%;
     overflow: auto !important;
}
.alert__body2::-webkit-scrollbar{
     width: 5px;

}
.alert__body2::-webkit-scrollbar-thumb{
     width: 5px;
     background-color: #343a401c;
}
.banner_img{
     opacity: 0.5;
}
.banner_img:hover{
     opacity: 1;
}
.help_msg{
     width: 100%;
     height: 15rem;
     outline: none;
     border: 0.1rem solid #4a4a4a71;
     border-radius: 5px;
     resize: none;
     padding: 5px 10px;
}