* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

*:focus {
    outline: none;
}

body {
    font-family: var(--Font);
    background: var(--allColor1);
}

main {
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    margin: 0 auto;
}

html {
    scroll-behavior: smooth;
}

.searc {
    width: 100%;
    height: 130%;
    position: absolute;
    top: -55px;
    background: var(--allColor1);
    overflow-y: auto;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    padding: 20px;
    z-index: 105;
}

.searc>p {
    width: 100%;
    padding-right: 10px;
    height: 50px;
    font-size: 30px;
    margin-bottom: 30px;
}

.searc>span {
    position: absolute;
    top: 80px;
    right: 30px;
    width: 200px;
    height: 2px;
    background: var(--allColor3);
}

#exit {
    position: absolute;
    top: 35px;
    left: 40px;
    width: 30px;
    height: 30px;
    filter: invert(100%) sepia(11%) saturate(267%) hue-rotate(199deg) brightness(98%) contrast(87%);
    cursor: pointer;
    z-index: 99;
}


/* /////////////////////// < header > //////////////////////////////  */

header {
    width: 100%;
    height: 135px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--Color-text);
    position: relative;
    z-index: 101;
}

header nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-Top {
    height: 80px;
    background: var(--Color-top);
}

.nav-Top>div {
    width: 40%;
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.nav-Top>div>svg {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: 30px;
    stroke: var(--Color-search);
}

.nav-Top>a>img {
    /* width: 200px; */
    height: 50px;
    margin-left: 15px;
}

.nav-Top input {
    width: 100%;
    height: 45px;
    border-radius: 30px;
    /* box-shadow: 0px 0px 8px var(--Color-search); */
    background: var(--Color-top);
    border: 1px solid var(--Color-search);
    color: var(--Color-text);
    padding: 5px 10px 5px 33px;
    font-family: var(--Font);
    font-size: 17px;
}

.nav-Down {
    height: 55px;
    padding-right: 10px;
    background: var(--Color-down);
}

.nav-Down-Right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-Down-Right>div {
    width: 16%;
    height: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
}

.nav-Down-Right>div a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Color-text);
}

.img_res {
    display: none;
}

.daste {
    width: 21% !important;
    border-left: 1px solid var(--allColor1);
    justify-content: space-evenly !important;
}

.nav-Down-Right>div:hover a {
    color: var(--Color-act) !important;
    opacity: 1 !important;
}

.nav-Down-Right>div svg {
    transition: all ease-in-out .05s;
    stroke: var(--Color-icon);
}

.nav-Down-Right>div:hover svg {
    stroke: var(--Color-act) !important;
    cursor: pointer;
}

.nav-Down-Right>div img {
    transition: all ease-in-out .05s;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.nav-Down-Right>div:hover img {
    filter: invert(99%) sepia(34%) saturate(5230%) hue-rotate(212deg) brightness(103%) contrast(103%);
    cursor: pointer;
}

.nav-Down-Left {
    width: 150px;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-top: 10px;
}

.nav-Down-Left>a {
    position: relative;
    cursor: pointer;
}

.nav-Down-Left>a>p {
    position: absolute;
    top: -3px;
    right: -6px;
    width: 17px;
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    border-radius: 100%;
    background: var(--Color-act);
    color: var(--Color-text);
}

.nav-Down-Left>a>svg {
    width: 25px;
    height: 27px;
    transition: all ease-in-out .05s;
    stroke: var(--Color-icon);
}

.nav-Down-Left>a:hover svg {
    stroke: var(--Color-act);
}

.Grouping {
    width: 95%;
    height: 70vh;
    display: none;
    border-radius: 10px;
    padding: 5px;
    box-shadow: inset 0px -3px 20px 9px var(--allColor5);
    background: var(--allColor1);
    z-index: 104;
}

.Grouping-Cat {
    width: 200px;
    height: 70vh;
    background: var(--allColor2);
    border-radius: 0 10px 10px 0;
    margin-left: 10px;
    overflow: auto;
}

.Grouping-Cat>a {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out .2s;
    color: var(--allColor1);
}

.Grouping-Cat>a:hover {
    cursor: pointer;
    color: var(--allColor4);
    background: var(--allColor1);
    border: 1px solid var(--allColor2);
}

.Grouping-SubCat {
    width: calc(100% - 210px);
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: wrap;
}

.Grouping-SubCat>ul {
    width: fit-content;
    color: var(--allColor2);
    padding: 5px;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    height: 70vh;
}

.Grouping-SubCat>ul>li {
    width: 160px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px 0;
    text-align: center;
}

.Grouping-SubCat>ul>li>* {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg_Grop {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 103;
    display: none;
}


/* /////////////////////// < main > //////////////////////////////  */
/* ---------- < Login > ----------------------------  */

.Login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Login>img {
    height: 100vh;
    width: 50%;
}

.Login>section {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.Reg,
.Form_Login {
    width: 500px;
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.Reg>p,
.Form_Login>p {
    opacity: .9;
    cursor: pointer;
}

.Reg>p:hover,
.Form_Login>p:hover {
    opacity: 1;
}

.Reg>a,
.Reg>p,
.Reg>h4,
.Reg>h2,
.Form_Login>a,
.Form_Login>p,
.Form_Login>h4,
.Form_Login>h2 {
    width: 100%;
    text-align: center;
}

.Reg>div,
.Form_Login>div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
}

.Reg>div p,
.Form_Login>div p {
    width: 90%;
    margin-bottom: 5px;
}

.Reg>div input,
.Form_Login>div input {
    width: 90%;
    height: 55px;
    border-radius: 15px;
    border: none;
    padding: 10px;
    font-size: 17px;
}

.Reg>button,
.Reg>span,
.Form_Login>button {
    width: 150px;
    height: 55px;
    background: var(--allColor4);
    border-radius: 15px;
    color: var(--allColor1);
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    cursor: pointer;
}

.log {
    color: #0169A4;
    cursor: pointer;
}

#recovery {
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------------------- < Slider > ------------------------------------  */

.Slider {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.Slider>section {
    width: 90%;
    height: 380px;
    overflow: hidden;
    position: relative;
}

.Slider .swiper-slide a {
    opacity: 1;
}

.Slider .swiper-slide a>img {
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

.Slider-dot {
    width: fit-content !important;
    height: 30px;
    position: absolute;
    display: flex;
    left: unset !important;
    bottom: 13px !important;
    z-index: 100 !important;
}

.Slider-dot>span {
    width: 9px;
    height: 6px;
    background: #595959;
    border-radius: 20px;
    transition: all ease-in-out 0.1s;
    opacity: 1;
    margin: 0 3px !important;
}

.Slider-dot>span:hover {
    cursor: pointer;
    background: var(--allColor4) !important;
    width: 14px;
}

.swiper-pagination-bullet-active {
    background: var(--allColor4) !important;
    width: 15px !important;
}

.btn_slideL,
.btn_slideR {
    width: 50px;
    height: fit-content;
    position: absolute;
    left: -60px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    cursor: pointer;
}

.btn_slideR {
    /* transform: rotate(180deg); */
    right: -60px !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 27px !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--allColor1) !important;
    transition: all ease-in-out .2s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: var(--allColor4) !important;
}

/* .btn_slideL img,
.btn_slideR img {
    width: 11px;
    height: 19px;
    filter: invert(99%) sepia(100%) saturate(100%) hue-rotate(201deg) brightness(163%) contrast(100%);
    z-index: 99;
    position: absolute;
    transition: all ease-in-out .2s;
} */

.btn_slideL span,
.btn_slideR span {
    width: 25px;
    height: 40px;
    transition: all ease-in-out .2s;
    z-index: 96;
}

.btn_slideL:hover span,
.btn_slideR:hover span {
    cursor: pointer;
    background: #d7d7d7;
    filter: blur(25px);
}

/* .btn_slideL:hover img,
.btn_slideR:hover img {
    margin-right: 5px;
} */

.Amazing {
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 20px 0;
}

.Amazing-Slide {
    width: 90%;
    height: 85%;
    position: relative;
}

.Amazing-Slide>div {
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer;
    transition: all ease-in-out .2s;
    border-radius: 25px;
    transition: all ease-in-out .5s;
    position: absolute;
    right: -170px;
    opacity: 0;
}

.Amazing-Slide>div:hover {
    opacity: 0;
}

.Amazing-Slide-Right {
    width: 200px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #191919;
    border-radius: 1px 25px 25px 1px;
    padding: 5px;
    box-shadow: 1px 1px 5px var(--allColor5);
    color: var(--allColor1);
}

.Amazing-Slide-Right>img {
    width: 80%;
}

.Amazing-Slide-Right>h2 {
    width: 100%;
    text-align: center;
}

.Amazing-Slide-Right>a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--allColor1);
}

.Amazing-Slide-Right>a:hover {
    cursor: pointer;
    color: var(--allColor4);
}

.Amazing-Slide-Right>a>img {
    margin: 0 5px;
    width: 10px;
    height: 15px;
}

.Amazing-Slide-Left {
    width: calc(100% - 200px);
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(97.49deg, #F2F2F2 -104.76%, var(--allColor1) 100%);
    box-shadow: 1px 1px 5px var(--allColor5);
    border-radius: 25px 1px 1px 25px;
    padding: 5px 15px;
    padding-right: 40px;
}

.Amazing-Slide-Left>a {
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 1;
}

.Amazing-Slide-Left>a>img {
    width: 300px;
    height: 250px;
}

.Amazing-prop {
    width: 50%;
    height: 100%;
    padding-right: 40px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}

.Amazing-prop>p {
    width: 100%;
    font-size: 24px;
    font-family: 'IR-B';
}

.Amazing-prop>div {
    width: 100%;
    display: flex;
    margin: 20px 0;
}

.Amazing-prop>div>p {
    margin-left: 10px;
}

.off {
    text-decoration: line-through;
}

.Amazing-prop>div>span {
    width: 50px;
    height: 20px;
    border-radius: 50px;
    background: #F81B43;
    text-align: center;
    color: var(--allColor1);
    font-size: 14px;
}

.money {
    color: var(--allColor4);
    font-family: 'IR-B';
    margin-top: 0 !important;
    font-size: 19px;
}

.Amazing-icons {
    width: 120px;
    height: 100%;
    display: flex;
    justify-content: end;
    padding: 10px;
}

.Amazing-icons>img {
    width: 25px;
    height: 25px;
    margin: 0 10px;
}

.Amazing-dot {
    width: 90%;
    height: 30px;
    position: absolute;
    display: flex;
    justify-content: flex-end;
    bottom: 18px;
    z-index: 99;
    padding-left: 15px;
}

.Amazing-dot>div {
    width: 18px;
    height: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Amazing-dot>div>span {
    width: 9px;
    height: 6px;
    background: #595959;
    border-radius: 20px;
    transition: all ease-in-out 0.1s;
}

.Amazing-dot>div:hover span {
    cursor: pointer;
    background: var(--allColor4);
    width: 14px;
}

.Amazing_Active {
    opacity: 1 !important;
    z-index: 49;
    right: 0 !important;
}

.Active_Dot {
    width: 14px !important;
    background: var(--allColor4) !important;
}

.Category {
    width: 90%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.Category>a {
    width: 270px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    opacity: .9;
    transition: all ease-in-out .3s;
    margin-bottom: 15px;
    color: var(--allColor1);
    overflow: hidden;
    border-radius: 25px;
}

.Category>a>img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    transition: all ease-in-out 0.3s;
    transform-origin: center;
}

.Category>a>h1 {
    position: absolute;
    font-size: 16px;
}

.Category>a:hover {
    opacity: 1;
    cursor: pointer;
}

.Category>a:hover img {
    transform: scale(1.1);
}

.NewProduct {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    margin: 20px 0;
}

.NewProduct-Head {
    width: 90%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-radius: 20px;
    background: var(--allColor1);
    box-shadow: 0px 0px 8px var(--allColor5);
    margin-bottom: 15px;
}

.NewProduct-Head img {
    width: 30px;
    height: 12px;
    cursor: pointer;
}

.NewProduct-List {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: start;
    overflow: auto;
    padding: 5px;
    scroll-behavior: smooth;
}

.product_list_not {
    width: 100%;
    text-align: center;
}

.listProduct-Box,
.NewProduct-List-Box {
    min-width: 200px;
    max-width: 200px;
    height: 270px;
    padding: 5px;
    border-radius: 20px;
    background: var(--allColor1);
    box-shadow: 0px 0px 4px var(--allColor5);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    transition: all ease-in-out .2s;
    margin-left: 20px;
}

.listProduct-Box {
    margin-left: 9px;
}

.listProduct-Box>img,
.NewProduct-List-Box>img {
    width: 150px;
    height: 120px;
}

.listProduct-Box>span,
.NewProduct-List-Box span {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, rgba(219, 219, 219, 0) 0%, #DBDBDB 100%);
    position: absolute;
    bottom: 0;
    border-radius: 0 0 20px 20px;
    transition: all ease-in-out .4s;
    opacity: .6;
}

.listProduct-Box:hover,
.NewProduct-List-Box:hover {
    box-shadow: 0px 0px 13px var(--allColor5);
    cursor: pointer;
}

.listProduct-Box:hover>span,
.NewProduct-List-Box:hover>span {
    height: 50%;
}

.listProduct-Box>h5,
.NewProduct-List-Box>h5 {
    text-align: center;
    height: 55px;
    width: 100%;
    font-size: 16px;
    white-space: break-spaces;
    overflow: hidden;
}

.listProduct-Box>p,
.NewProduct-List-Box>p {
    text-align: center;
    height: 35px;
    width: 100%;
}

.box-Money {
    font-size: 25px;
    font-family: var(--Font-B);
}

.symbols {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    margin: 20px 0;
}

.symbols-div {
    width: 160px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    font-family: var(--Font);
    cursor: pointer;
    margin-bottom: 40px;
}

.symbols-div>p {
    width: 100%;
    text-align: center;
}

.symbols-div>div {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    background: var(--allColor1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    box-shadow: 0px 0px 4px var(--allColor5);
    transition: all ease-in-out .2s;
}

.symbols-div:hover>div {
    background: linear-gradient(180deg, var(--allColor1) 0%, #DBDBDB 100%);
    box-shadow: 0px 5px 10px var(--allColor5);
}

.Brands {
    width: 90%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    margin: 20px 0;
}

.Brands>div {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: start;
    margin-bottom: 20px;
}

.Brands>div>h2 {
    width: 150px;
    height: 90%;
    border-bottom: 3px solid #2C2C2C;
    text-align: center;
}

.Brands>a {
    width: 190px;
    height: 110px;
    border-radius: 50px;
    background: var(--allColor1);
    padding: 5px;
    margin: 0 10px;
    margin-bottom: 15px;
    opacity: .9 !important;
}

.Brands>a img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
}

.Brands>a:hover {
    box-shadow: 0px 0px 2px var(--allColor5);
}


/* ------------------- < product > -------------------------------  */

.Direction {
    width: 90%;
    height: 80px;
    display: flex;
    align-items: center;
}

.Direction>img {
    width: 10px;
    height: 15px;
    filter: invert(30%) sepia(202%) saturate(1554%) hue-rotate(347deg) brightness(0%) contrast(87%);
    margin: 0 10px;
}

.Direction>div {
    width: 55px;
    display: flex;
    align-items: center;
    position: relative;
}

.Direction>div a {
    width: 100%;
    text-align: end;
}

.Direction>div img {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 1px;
}

.Product {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 20px;
}

.Product-Head {
    width: 90%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 20px 20px 5px 5px;
    background: var(--allColor1);
    box-shadow: 6px 6px 50px var(--allColor5);
    margin-bottom: 15px;
}

.Product-body {
    width: 90%;
    height: calc(100% - 75px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Product-body-images {
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.back_blur {
    width: 100vw;
    height: 150%;
    /* background: var(--allColor5); */
    backdrop-filter: blur(7.5px);
    position: fixed;
    z-index: 100;
    display: none;
    justify-content: center;
    padding-top: 130px;
    margin-top: -140px;
    /* display: flex; */
    background: #0c0c0ca6;
}

.back_blur>span {
    width: 30px;
    height: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    border-radius: 10%;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4px;
    margin-left: 5px;
}

.back_blur .Slider {
    width: 50%;
    height: 500px;
    max-width: 650px;
}

.back_blur .Slider>section {
    width: 100%;
    height: 100%;
}

.back_blur .Slider img {
    top: 0%;
    position: fixed;
    width: 100%;
    border-radius: 20px;
    aspect-ratio: 3 / 2;
}

.Product-images-Right {
    width: 80px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow-y: auto;
}

.Product-images-Right>div {
    width: 75px;
    height: 75px;
    border-radius: 5px;
    background: var(--allColor1);
    padding: 3px;
    opacity: .9;
    transition: all ease-in-out .2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Product-images-Right>div:hover {
    cursor: pointer;
    opacity: 1;
}

.Product-images-Right>div>img {
    max-width: 100%;
    max-height: 100%;
}

.Product-images-Left {
    width: calc(100% - 95px);
    height: 100%;
    background: var(--allColor1);
    border-radius: 5px;
    padding: 3px;
    opacity: .9;
    transition: all ease-in-out .2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Product-images-Left>img {
    min-width: 80%;
    min-height: 80%;
    max-width: 100%;
    max-height: 100%;
}

.Product-images-Left:hover {
    cursor: pointer;
    opacity: 1;
}

.Product-body-Prop {
    width: 57%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    background: var(--allColor1);
    border-radius: 5px;
    padding: 5px;
}

.Product-Prop-review {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.Product-Prop-review>div {
    display: flex;
    align-items: center;
    margin: 0 4px;
}

.Product-Prop-review>div>img {
    width: 18px;
    height: 18px;
    margin-bottom: 4px;
}

.Product-Prop-review>div>p {
    margin-right: 5px;
    font-family: var(--Font-M);
}

.Product-Prop-review>div>span {
    margin-right: 10px;
}

.Product-Prop-main {
    width: 50%;
    height: 260px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}

.Product-Prop-main>div {
    width: 100%;
    height: 50%;
    font-size: 18px;
}

.Product-Prop-main>div>div {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 4px 0;
}

.Product-Prop-main>div>div>img {
    margin-left: 10px;
}

.Product-Prop-main>div>div>a,
.Product-Prop-main>div>div>h5 {
    margin-right: 5px;
}

.Product-Prop-Left {
    display: flex;
}

.Prop-Left-Selected {
    width: 130px !important;
    padding: 0 !important;
}

.Prop-Left-Selected .color_chosed {
    width: calc(100% - 60px);
}

.Prop-Left-Selected #nameS {
    font-size: 14px;
}

.Product-Prop-Left #color {
    width: calc(100% - 130px);
    justify-content: center !important;
    flex-wrap: wrap;
}

.Product-Prop-Left>div>div {
    min-width: 35px;
    min-height: 35px;
    padding: 2px 5px;
    border-radius: 50px;
    box-shadow: 0px 0px 2px var(--allColor5);
    margin: 5px;
    transition: all ease-in-out .2s;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--Font-M);
}

.Product-Prop-Left>div>div:hover {
    cursor: pointer;
    background: var(--allColor4);
    color: var(--allColor1);
    box-shadow: 0px 0px 2px var(--allColor4);
}

.Product-Prop-introd {
    height: 220px;
    width: 50%;
    padding: 10px;
}

.Product-Prop-introd h3 {
    height: 35px;
    margin-bottom: 5px;
}

.Product-Prop-introd p {
    font-size: 13px;
    opacity: .9;
}

.Product-Prop-introd p:hover {
    cursor: pointer;
    opacity: 1;
}

.Product-Prop-introd pre {
    height: calc(100% - 35px);
    font-family: var(--Font);
    padding-right: 10px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.Product-Prop-money {
    width: 40%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Product-Prop-money>h3 {
    margin: 0 10px;
}

.Product-Prop-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    margin-top: 10px;
}

.Product-Prop-btn>p {
    font-family: var(--Font-B);
}

.Product-Prop-btn>span,
.Product-Prop-btn>button {
    min-width: 200px;
    height: 45px;
    padding: 10px 30px;
    background: var(--allColor4);
    color: var(--allColor1);
    border: 1px solid var(--allColor4);
    box-shadow: 0px 1px 5px var(--allColor5);
    border-radius: 100px;
    margin-top: 10px;
    font-family: var(--Font);
    margin: 0 20px 0 0;
}

.Product-Prop-btn>span {
    background: #595959 !important;
    border: 1px solid #595959 !important;
}

.Info {
    width: 100%;
    height: fit-content;
    /* max-height: 550px; */
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    position: relative;
    margin: 20px 0;
}

.Info-Head {
    width: 90%;
    height: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.Info-Head>div {
    width: 85px;
    height: 40px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--allColor1);
    border-radius: 3px;
    transition: all ease-in-out .2s;
    /* box-shadow: 6px 6px 50px var(--allColor5); */
}

.Info-Head>div:hover {
    cursor: pointer;
    background: var(--allColor4);
    color: var(--allColor1);
}

.Info-Introd {
    width: 90%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    background: var(--allColor1);
    border-radius: 3px;
    box-shadow: 6px 6px 50px var(--allColor5);
}

.Info-Introd>h3 {
    width: 100%;
    margin-bottom: 10px;
}

.Info-Introd>pre {
    font-family: var(--Font);
    padding-right: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.Info-Prop {
    width: 90%;
    /* height: 370px; */
    padding: 10px;
    background: var(--allColor1);
    border-radius: 3px;
    display: none;
    flex-wrap: wrap;
    box-shadow: 6px 6px 50px var(--allColor5);
}

.Info-Prop>h3 {
    width: 100%;
    margin-bottom: 10px;
    padding-right: 20px;
}

.Info-Prop-amount,
.Info-Prop-criterion {
    width: 30%;
    height: calc(100% - 40px);
    display: flex;
    justify-content: flex-end;
    align-content: space-between;
    flex-wrap: wrap;
}

.Info-Prop-amount {
    width: calc(70% - 15px) !important;
    justify-content: flex-start !important;
    margin-right: 15px;
}

.Info-Prop-criterion>div,
.Info-Prop-amount>div {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    background: #E4E4E4;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

.Info-Review {
    width: 90%;
    display: none;
}

.Info-Review-Right {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-left: 20px;
}

.Question-Right-count,
.Review-Right-Star {
    width: 100%;
    height: 170px;
    padding: 10px;
    background: var(--allColor1);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
    box-shadow: 6px 6px 50px var(--allColor5);
}

.Question-Right-count>h3,
.Review-Right-Star>h3 {
    width: 100%;
    text-align: center;
}

.Question-Right-count>p,
.Review-Right-Star>p {
    width: 100%;
    text-align: center;
}

.Review-Right-Star>div>svg {
    width: 25px;
    height: 25px;
}

.Review-Right-Score {
    width: 100%;
    height: 170px;
    padding: 10px;
    background: var(--allColor1);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
    box-shadow: 6px 6px 50px var(--allColor5);
}

.Review-Right-Score>div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
}

.Review-Right-Score>div>div {
    width: 85%;
    height: 14px;
    display: flex;
    justify-content: flex-start;
    background: #E4E4E4;
    border-radius: 50px;
    margin-right: 5px;
}

.Review-Right-Score>div>div>div {
    height: 14px;
    display: flex;
    background: var(--allColor4);
    border-radius: 50px;
}

.Question-Right-sabt,
.Review-Right-sabt {
    width: 100%;
    height: 135px;
    padding: 15px;
    background: var(--allColor1);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 6px 6px 50px var(--allColor5);
    text-align: center;
    font-size: 14px;
}

.Question-Right-sabt p,
.Review-Right-sabt p {
    width: 100%;
}

.Question-Right-sabt>div,
.Review-Right-sabt>div {
    min-width: 120px;
    height: 36px;
    padding: 5px;
    background: var(--allColor4);
    border: 1px solid var(--allColor4);
    color: var(--allColor1);
    box-shadow: 0px 2px 8px var(--allColor5);
    border-radius: 15px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.Info-Review-Left {
    width: calc(80% - 20px);
    height: 520px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: auto;
}

.Review-Left-view {
    width: 100%;
    height: fit-content;
    padding: 10px;
    background: var(--allColor1);
    border-radius: 3px;
    display: flex;
    box-shadow: 1px 2px 8px var(--allColor5);
    margin-bottom: 15px;
}

.Left-view-right {
    width: 85%;
    height: 100%;
}

.Left-view-right>div {
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.Left-view-right>div>div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.Left-view-right>div h3 {
    width: 100%;
    margin-bottom: 2px;
}

.Left-view-right>div svg {
    width: 17px;
    height: 17px;
    transition: all ease-in-out .2s;
}

/* .Left-view-right>div svg:hover {
    cursor: pointer;
    fill: #191919;
} */

.Left-view-right>div>span {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #191919;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

.Left-view-right>div>span img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.Left-view-right>p {
    width: 100%;
    height: calc(100% - 60px);
    padding: 5px;
    font-size: 14px;
}

.Left-view-left {
    width: 20%;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
}

.Left-view-left>div {
    width: 100%;
    display: flex;
    justify-content: end;
    padding: 5px;
}

.Left-view-left>div>div {
    width: 50px;
    height: 25px;
    display: flex;
    align-items: center;
    align-content: flex-end;
}

.Left-view-left>div>div>p {
    margin-bottom: -5px;
    margin-left: 10px;
    font-size: 14px;
}

.Left-view-left>div>div>img {
    width: 22px;
    height: 20px;
}

.Left-view-left>div>div>img:hover {
    cursor: pointer;

}

.Info-Question {
    width: 90%;
    height: 490px;
    display: none;
}

.Question-Right-count {
    height: 115px !important;
}

.Question-Right-Score {
    width: 100%;
    height: 225px;
    padding: 15px;
    background: var(--allColor1);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 6px 6px 50px var(--allColor5);
}

.Question-Right-Score>img {
    width: 90%;
    height: 100px;
    margin-bottom: 10px;
}

.Question-Right-Score>div {
    width: 90%;
    height: 40px;
    display: flex;
    justify-content: start;
    align-items: center;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 180, 215, 0.7) 0%, #00B4D7 100%);
    border-radius: 5px;
    color: var(--allColor1);
    cursor: pointer;
    font-size: 14px;

}

.Question-Right-Score>div>img {
    width: 30px;
    height: 30px;
    margin: 0 20px;
}

.Question-Left-view {
    width: 100%;
    height: fit-content;
    padding: 10px;
    background: var(--allColor1);
    border-radius: 3px;
    display: flex;
    box-shadow: 6px 6px 50px var(--allColor5);
    margin-bottom: 17px;
    opacity: .9;
    /* transition: all ease-in-out .2s; */
}

.Question-Left-view:hover {
    cursor: pointer;
    opacity: 1;
}

.Left-Ques-right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

.Left-Ques-right>div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Left-Ques-right>div h4 {
    width: calc(100% - 166px);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #2c2c2c;
}

.Left-Ques-right>div img {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    opacity: .9;
}

.Left-Ques-right span {
    display: flex;
    align-items: center;
    height: 40px;
    width: 100px;
    transition: all ease-in-out .2s;
    opacity: .9;
}

.Left-Ques-right span:hover {
    opacity: 1;
    cursor: pointer;
}

.Left-Ques-right span img {
    height: 13px;
    width: 23px;
    margin-bottom: -5px;
}

.Left-Ques-right span>p {
    padding: 5px;
}

.Ques-right-comment {
    flex-wrap: wrap;
    height: fit-content;
    padding: 5px 20px;
    margin: 10px 0;
    opacity: .9;
}

.right-comment-top {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 5px;
}

.right-comment-top>p {
    width: calc(100% - 60px);
}

.right-comment-down {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(65, 65, 65, 0.5);
    padding-bottom: 8px;
}

.right-comment-down>div {
    display: flex;
    align-items: center;
}

.right-comment-down>p,
.right-comment-down>div>p {
    margin-left: 10px;
    font-size: 13px;
}

.right-comment-down>div>div {
    width: 50px;
    height: 25px;
    display: flex;
    align-items: center;
    align-content: flex-end;
}

.right-comment-down>div>div>p {
    margin-bottom: -5px;
    margin-left: 10px;
    font-size: 14px;
}

.right-comment-down>div>div>img {
    width: 22px;
    height: 20px;
}

.right-comment-down>div>div>img:hover {
    cursor: pointer;
}

.Sabt_Pasokh,
.Sabt_Quiz,
.Sabt_Review {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    justify-content: center;
}

.Sabt_Pasokh>form,
.Sabt_Quiz>form,
.Sabt_Review>form {
    width: 600px;
    height: 380px;
    background: var(--allColor1);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 0px 0px 20px var(--allColor5);
    border-radius: 20px;
    padding: 15px 10px;
    z-index: 99;
    position: fixed;
}

.Sabt_Pasokh>form,
.Sabt_Quiz>form {
    width: 500px;
    height: 290px;
}

.Sabt_Pasokh>form>div,
.Sabt_Quiz>form>div,
.Sabt_Review>form>div {
    width: 100%;
    height: 82px;
    padding: 5px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.Sabt_Pasokh>form>div p,
.Sabt_Quiz>form>div p,
.Sabt_Review>form>div p {
    width: 100%;
}

.Sabt_Review>form>div div {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
}

.Sabt_Review>form>div input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 18px;
    height: 18px;
    background-color: var(--allColor3) !important;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #C6C6C6;
    cursor: pointer;
}

.Sabt_Review>form>div input::-webkit-slider-thumb:active {
    box-shadow: inset 0 0 3px var(--allColor3), 0 0 9px var(--allColor3) !important;
    -webkit-box-shadow: inset 0 0 3px var(--allColor3), 0 0 9px var(--allColor3) !important;
}

.Sabt_Review>form>div input::-webkit-slider-thumb:hover {
    background: var(--allColor3) !important;
}

.Sabt_Review>form>div>input {
    width: 100%;
    height: 2px;
    background-color: #CCCCCC;
    margin: 10px 0;
    /* -webkit-appearance: none;
    appearance: none; */
    /* background: linear-gradient(to right, rgb(198, 198, 198) 0%, rgb(198, 198, 198) 10%, rgb(84, 89, 234) 10%, rgb(84, 89, 234) 100%, rgb(198, 198, 198) 100%);
    z-index: 0; */
}

.Sabt_Pasokh>form textarea,
.Sabt_Quiz>form textarea,
.Sabt_Review>form textarea {
    width: 100% !important;
    height: 140px !important;
    border-radius: 10px;
    padding: 10px;
    border-color: #CCCCCC;
    font-family: var(--Font);
}

.undify {
    justify-content: flex-start !important;
}

.undify * {
    transition: all ease-in-out .2s;
}

.Sabt_Pasokh>form>div h5,
.Sabt_Pasokh>form>div button,
.Sabt_Quiz>form>div h5,
.Sabt_Review>form>div h5,
.Sabt_Quiz>form>div button,
.Sabt_Review>form>div button {
    width: 100px;
    height: 30px;
    border-radius: 50px;
    background: none;
    border: 1px solid var(--allColor4);
    margin-left: 15px;
    color: var(--allColor4);
    font-family: var(--Font-B);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out .2s;
}

.Sabt_Pasokh>form>div h5:hover,
.Sabt_Pasokh>form>div button:hover,
.Sabt_Quiz>form>div h5:hover,
.Sabt_Review>form>div h5:hover,
.Sabt_Quiz>form>div button:hover,
.Sabt_Review>form>div button:hover {
    cursor: pointer;
    color: var(--allColor1);
    background: var(--allColor4);
}

.Sabt_Pasokh>span,
.Sabt_Quiz>span,
.Sabt_Review>span {
    width: 100%;
    height: 100%;
    /* background: var(--allColor5); */
    backdrop-filter: blur(7.5px);
    position: absolute;
    z-index: 95;
}

/* --------------------- < list_Product > ------------------------------------------  */

.List-main {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.List-main-aside {
    min-width: 260px;
    width: 260px;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    /* margin-top: 30px; */
    font-family: var(--Font);
    position: relative;
    margin-left: 15px;
}

.List-main-aside>form>section {
    width: 100%;
    height: 40px;
    max-height: 285px;
    background: var(--allColor1);
    box-shadow: -3px 3px 10px 1px var(--allColor5);
    border-radius: 5px;
    padding: 10px 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all ease-in-out .2s;
}

.Side__Title {
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.Side__Title>img {
    width: 12px;
    cursor: pointer;
    transition: all ease-in-out .2s;
    transform: rotate(180deg);
}

.Side__Content {
    width: 100%;
}

.Side__Content>ul {
    height: 100%;
    overflow-y: auto;
}

.Side__Content li {
    display: flex;
    justify-content: flex-start;
    margin-top: 5px;
    margin-right: 25px;
}

label:not(.login label) {
    display: flex;
    align-items: center;
    position: relative;
    opacity: .5;
    transition: all ease-in-out .2s;
}

label:not(.login label)::before,
label:not(.login label)::after {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 100%;
    position: absolute;
    right: -25px;
}

label:not(.login label)::before {
    border: 1px solid gray;
}

label:not(.login label)::after {
    border: 1px solid var(--allColor4);
    opacity: 0;
}

label:not(.login label)>div {
    width: 14.5px;
    height: 14px;
    background: var(--allColor4);
    border-radius: 100%;
    position: absolute;
    right: -22.5px;
    opacity: 0;
}

input:checked~label:not(.login label),
input:checked~label:not(.login label)::after,
input:checked~label:not(.login label)>div,
input:hover~label:not(.login label),
input:hover~label:not(.login label)::after {
    opacity: 1;
    cursor: pointer;
}

input[type="checkbox"] {
    /* visibility: hidden; */
    display: none;
}

.inp_search>input {
    width: 100%;
    height: 25px;
    border-radius: 50px;
    box-shadow: 0px 0px 10px var(--allColor5);
    border: none;
    padding: 5px 10px;
    padding-left: 35px;
    font-family: var(--Font);
    font-size: 13px;
}

.inp_search {
    width: 100%;
    height: 35px;
    margin: var(--order-head-span-margin);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#img {
    width: 13px;
    height: 13px;
    position: absolute;
    top: 11px;
    left: 10px;
}

.List-main-Left {
    width: calc(90% - 275px);
}

.List-main-Left>div {
    width: 100%;
    height: 60px;
    background: var(--allColor1);
    box-shadow: -3px 3px 10px 1px var(--allColor5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
}

.List-main-Left>div>div {
    display: flex;
}

.List-main-Left>div>div select {
    width: 130px;
    border: none;
    font-family: var(--Font-L);
    cursor: pointer;
    margin-right: 10px;
}

.List-main-Left>section {
    width: calc(100% + 10px);
    height: calc(100% - 80px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}

.listProduct-Box>span {
    border-radius: 0 0 5px 5px !important;
}

.filtering {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out .2s;
    background: var(--allColor1);
    box-shadow: -3px 3px 10px 1px var(--allColor5);
}

.filtering:hover {
    cursor: pointer;
    background: var(--allColor4);
    color: var(--allColor1);
}

.p_fil {
    cursor: pointer;
    display: none;
    margin-right: 10px;
}

.p_fil p {
    margin: 0 5px;
}

.back_fil {
    filter: invert(100%) sepia(6%) saturate(41%) hue-rotate(314deg) brightness(126%) contrast(92%);
    cursor: pointer;
    display: none;
    margin-bottom: 10px;
}

/* ------------------- < Contact US > ----------------------------------------  */

.Contact {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.Contact iframe {
    width: 100%;
    height: 390px;
    position: absolute;
    top: -140px
}

.Contact>section {
    width: 800px;
    height: 350px;
    position: absolute;
    display: flex;
    box-shadow: -4px 4px 10px 2px var(--allColor5);
    opacity: .8;
    transition: all ease-in-out .2s;
}

.Contact>section:hover {
    opacity: 1;
}

.Contact>section>div {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.Contact-divRight {
    background-image: url(../img/reg1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    color: var(--allColor1);
}

.Contact-divRight>* {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px;
}

.Contact-divRight .adres-Right-commun>div {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: start;
    margin: 0px;
}

.addr {
    width: 80% !important;
    padding-right: 13px;
}

.Contact-divRight .adres-Right-commun>div>img {
    filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(46deg) brightness(105%) contrast(101%);
}

.Contact-divRight .adres-Right-icon>a {
    width: 35px;
    height: 35px;
    background: none;
    border: 1px solid var(--allColor1);
}

.Contact-divRight .adres-Right-icon>a img {
    width: 22px;
    height: 20px;
    filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(46deg) brightness(105%) contrast(101%);
}

.Contact-divRight .adres-Right-icon>a:hover {
    background: var(--allColor1);
}

.Contact-divRight .adres-Right-icon>a:hover img {
    filter: invert(17%) sepia(1%) saturate(1426%) hue-rotate(314deg) brightness(93%) contrast(97%);
}

.Contact-divLeft {
    background: var(--allColor1);
    padding-bottom: 5px;
}

.Contact-divLeft>h3 {
    width: 100%;
    text-align: center;
}

.Contact-divLeft>div {
    width: 48%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    margin-left: 3px;
}

.Contact-divLeft>div p {
    width: 99%;
    font-size: 14px;
    margin-bottom: 3px;
    padding-right: 13px;
}

.Contact-divLeft>div input {
    width: 90%;
    height: 30px;
    border-radius: 50px;
    border: 1px solid #656565B2;
    font-size: 12px;
    padding: 8px;
    font-family: var(--Font);
}

.Contact-divLeft>div textarea:focus,
.Contact-divLeft>div input:focus {
    border: 1px solid #2c2c2c !important;
}

.Contact-divLeft>div textarea {
    width: 95% !important;
    height: 100px !important;
    border-radius: 10px;
    border: 1px solid #656565B2;
    font-size: 12px;
    padding: 8px;
}

.Contact-divLeft>a {
    width: 180px;
    height: 30px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #0169A4;
    color: #0169A4;
    margin-top: 10px;
    background: var(--allColor1);
}

.Contact-divLeft>a:hover {
    background: #0169A4;
    color: var(--allColor1);
}

/* ----------------- < About > --------------------------------------------  */

.About {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    padding-top: 15px;
}

.About>section {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.About-info {
    align-items: flex-start;
    padding-top: 20px;
}

.About-info-abou {
    width: 80%;
    text-align: center;
    color: #2c2c2c;
}

.About-video {
    align-items: center;
    padding-top: 120px;
    background-image: url(../img/Path208771.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -15px;
}

.About-video>video {
    width: 400px;
    height: 200px;
    box-shadow: -3px 3px 20px 1px var(--allColor5);
    border-radius: 10px;
}

.About-video>p {
    width: 60%;
    color: #0169A4;
    text-align: center;
}

.About_history {
    width: 100%;
    margin: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-image: url(../img/Path\ 20878.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.About_history p {
    width: 90%;
    text-align: center;
    color: #2c2c2c;
}

.history_more {
    display: none;
}

/* ----------------- < Profile > ---------------------------------------------------  */

.Profile {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    padding-top: 15px;
}

.Profile-Right {
    width: 300px;
    margin-left: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: start;
    z-index: 99;
    transition: all ease-in-out .2s;
}

.open_Prof>img,
.open_Prof {
    transition: all ease-in-out .2s;
}

.open_Prof {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--allColor1);
    box-shadow: 0px 0px 5px var(--allColor5);
    position: fixed;
    cursor: pointer;
}

.Profile-Right>div {
    width: 100%;
    background: var(--allColor1);
    box-shadow: -3px 3px 10px 1px var(--allColor5);
    border-radius: 5px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px;
}

.Profile-Right>div>div {
    height: 80px;
    width: 80px;
    border-radius: 100%;
    background: var(--allColor2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    padding: 3px;
}

.Profile-Right>div>div img {
    max-width: 100%;
    max-height: 100%;
    min-width: 45px;
    min-height: 45px;
    border-radius: 100%;
}

.Profile-Right>div>span {
    width: 80%;
    padding: 5px;
    border-top: 0.4px solid rgba(29, 47, 66, 0.4);
    border-bottom: 0.4px solid rgba(29, 47, 66, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.Profile-Right>div>span img {
    cursor: pointer;
}

.Profile-Right>div>p {
    font-size: 14px;
    margin-top: 5px;
}

.Profile-Right-down>ul {
    width: 100%;
}

.Profile-Right-down>ul>li {
    width: fit-content;
    height: 30px;
    display: flex;
    justify-content: flex-start;
    padding: 5px;
    transition: all ease-in-out .2s;
    margin: 7px 0;
}

.Profile-Right-down>ul>li img {
    width: 18px;
    height: 18px;
    margin-left: 5px;
    filter: invert(54%) sepia(0%) saturate(1917%) hue-rotate(169deg) brightness(94%) contrast(103%);
}

.Profile-Right-down>ul>li:hover input,
.Profile-Right-down>ul>li:hover {
    cursor: pointer;
    padding-right: 10px;
    color: #0169A4;
}

.Profile-Right-down>ul>li:hover input {
    padding: 0;
}

.Profile-Right-down>ul>li:hover img {
    filter: invert(22%) sepia(67%) saturate(3213%) hue-rotate(185deg) brightness(93%) contrast(99%);
}

.Profile-Right-down>ul>li input {
    background: none;
    border: none;
    font-family: var(--Font-M);
    font-size: 14px;
    cursor: pointer;
    height: 100%;
}

.login_admin {
    width: 220px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--allColor3);
    border-radius: 50px;
    margin-top: 15px;
    color: var(--allColor3);
    transition: all ease-in-out .3s;
}

.login_admin:hover {
    color: var(--allColor1);
    background: var(--allColor4);
    background-image: linear-gradient(to right, var(--allColor3), var(--allColor4));
}


.Profile-lately {
    width: calc(92% - 320px);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.Profile-lately-head {
    width: 100%;
    height: 55px;
    background: var(--allColor1);
    box-shadow: -3px 3px 10px 1px var(--allColor5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

.Profile-lately-head button {
    background: var(--allColor1);
    color: #191919;
}

.Profile-lately>div {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.CH_List {
    width: 100%;
    display: flex;
    background: var(--allColor1);
    box-shadow: -3px 3px 10px 1px var(--allColor5);
    padding: 10px;
    border-radius: 5px;
}

.CH_List>div {
    margin-left: 75px;
}

.pay {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}

.pay>h3,
.pay>p {
    width: 100%;
    text-align: center;
    margin: 5px 0;
}

.Profile-lately-list {
    width: 100%;
    display: flex;
    overflow-x: auto;
}

.Profile-lately-list>a {
    margin-left: 15px;
}

.Profile-Order {
    width: calc(92% - 320px);
    display: none;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

/* 
.Profile-Order-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.Profile-Order-box>div {
    width: 170px;
    height: 175px;
    background: var(--allColor1);
    box-shadow: 0px 3px 5px var(--allColor5);
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out .2s;
    opacity: .9;
}

.Profile-Order-box>div img {
    width: 100px;
    height: 100px;
}

.Profile-Order-box>div p {
    width: 100%;
    text-align: center;
}

.Profile-Order-box>div:hover {
    cursor: pointer;
    box-shadow: 0px 4px 15px var(--allColor5);
    opacity: 1;
} */

.Profile-Lists {
    width: 100%;
    margin-bottom: 25px;
    margin-top: 20px;
}

#Current,
#given,
#retur,
#Cancel {
    display: block !important;
}

.not {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Profile-Review {
    width: calc(92% - 320px);
    height: 532px;
    display: none;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: auto;
}

.Profile-Review>div {
    width: 100%;
    height: fit-content !important;
}

.Profile-Recent,
.Profile-interest {
    width: calc(92% - 320px);
    display: none;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
}

.Profile-Recent-list,
.Profile-interest-List {
    width: 100%;
    height: 560px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    overflow-y: auto;
}

.Profile-User {
    width: calc(92% - 320px);
    display: none;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* .Profile-User>form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
} */

.passwords,
.Profile-User-main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background: var(--allColor1);
    box-shadow: 0px 3px 5px var(--allColor5);
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
}

.Profile-User-main>div {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.passwords>div,
.Profile-User-main>div>div {
    width: 48%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    margin-left: 3px;
    margin-bottom: 10px;
}

.passwords>div p,
.Profile-User-main>div>div p {
    width: 80%;
    font-size: 14px;
    margin-bottom: 3px;
    padding-right: 20px;
}

.passwords>div input,
.Profile-User-main>div>div select,
.Profile-User-main>div>div input {
    width: 70%;
    height: 35px;
    border-radius: 50px;
    border: 1px solid #656565B2;
    font-size: 12px;
    padding: 8px;
    font-family: var(--Font);
}

.Profile-User-main>div>div span {
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Profile-User-main>div>div span input {
    margin: 0 5px;
    border: none;
    border-bottom: 1px solid #9F9F9F;
    text-align: center;
    border-radius: 0 !important;
}

.Profile-User-main>div>div span input:focus {
    border: none !important;
    border-bottom: 1px solid #9F9F9F !important;
}

.Profile-User-main>div>div select {
    cursor: pointer;
    padding: 5px 10px !important;
}

.passwords>div input:focus,
.Profile-User-main>div>div select:focus,
.Profile-User-main>div>div textarea:focus,
.Profile-User-main>div>div input:focus {
    border: 1px solid #2c2c2c !important;
}

.Profile-User-main>div>div textarea {
    width: 95% !important;
    height: 100px !important;
    border-radius: 10px;
    border: 1px solid #656565B2;
    font-size: 12px;
    padding: 8px;
    font-family: var(--Font);
}

.Profile-User-main>div>div>div {
    height: 80px;
    width: 80px;
    border-radius: 100%;
    background: var(--allColor2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    padding: 3px;
}

.Profile-User-main>div>div>div img {
    max-width: 100%;
    max-height: 100%;
    min-width: 45px;
    min-height: 45px;
    border-radius: 100%;
}

.passwords>button {
    width: 250px;
    height: 35px;
    border-radius: 50px;
    border: 1px solid #0169A4;
    color: #0169A4;
    margin-bottom: -20px;
    background: var(--allColor1);
}

.passwords>button:hover {
    background: #0169A4;
    color: var(--allColor1);
    cursor: pointer;
    box-shadow: 0px 1px 5px var(--allColor5);
}

.passwords>div {
    position: relative;
}

.passwords>div div {
    width: 75%;
    display: flex;
    align-items: center;
    position: relative;
}

.passwords>div img {
    min-width: 18px !important;
    min-height: 18px !important;
    width: 18px !important;
    height: 18px !important;
    position: absolute;
    left: 10px;
    cursor: pointer;
}

.passwords>div input {
    width: 100%;
    padding-left: 30px;
}

/* ------------------------------ < MyShop > ---------------------------------------------------- */

.modal {
    background-color: rgb(223, 28, 28);
    /* background-color: rgb(29, 4, 255); */
    color: #fff;
    padding: 30px;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    font-size: 18px;
    font-weight: bold;
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 999;
    transition: all ease-in-out .2s;
}

.Payment,
.myShop {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    padding-top: 15px;
}

.myShop-Right {
    width: calc(95% - 320px);
    padding: 0px 10px 10px 10px;
    margin-left: 15px;
    border-radius: 10px;
}

.myShop-Right-notProduct {
    background: #FFFFFF;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.myShop-Right-notProduct>h2 {
    width: 100%;
    text-align: center;
}

.myShop-Right-Box {
    width: 100%;
    height: 265px;
    display: flex;
    margin-bottom: 20px;
    padding-left: 10px;
    background: var(--allColor1);
    box-shadow: 0px 3px 5px var(--allColor5);
    border-radius: 10px;
}

.myShop-Box-img {
    width: 200px;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 5px
}

.myShop-Box-img>img {
    width: 150px;
    height: 150px;
}

.myShop-Box-img>form,
.myShop-Box-img>div {
    width: 80%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--allColor3);
    border-bottom: 1px solid var(--allColor3);
}

.myShop-Box-img>form>*:not(#count),
.myShop-Box-img>div>*:not(#count) {
    cursor: pointer;
}

.myShop-Box-img>form img,
.myShop-Box-img>div img {
    width: 20px;
    height: 20px;
}

.myShop-Box-img>form>p,
.myShop-Box-img>div>p {
    font-family: var(--Font-M);
    color: var(--allColor3);
}

.myShop-Box-img>form>button,
.myShop-Box-img>div>a {
    font-family: var(--Font-M);
    color: var(--allColor3);
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
}

.myShop-Box-img>form input,
.myShop-Box-img>div input {
    width: 80px;
    height: 50px;
    border: none;
    font-family: var(--Font-M);
    color: var(--allColor3);
    text-align: center;
}

.myShop-Box-prop {
    width: 40%;
    height: 100%;
    padding-top: 20px;
}

.myShop-Box-prop>div,
.myShop-Box-prop>div {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.myShop-Box-prop>div>span,
.myShop-Box-prop>div>span {
    width: 3px;
    height: 10px;
    border-radius: 10px;
    background: var(--allColor3);
    margin: 0 5px;
}

.myShop-Box-money {
    width: calc(60% - 200px);
    height: 100%;
    padding-top: 20px;
}

.myShop-Box-money>p {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    margin: 8px 0;
}

.myShop-Box-money>p span {
    width: 8px;
    height: 11px;
    border-radius: 2px 10px 10px 2px;
    background: var(--allColor3);
    margin: 0 5px;
}

.myShop-Left {
    width: 300px;
    height: 285px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.myShop-Left>button,
.myShop-Left>div {
    width: 95%;
    background: var(--allColor1);
    box-shadow: 0px 3px 5px var(--allColor5);
    padding: 15px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.myShop-Left>div>div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    font-size: 14px;
}

#pay {
    justify-content: space-between;
    height: 60px;
    background: var(--allColor4);
    color: var(--allColor1);
}

.Payment>section {
    width: 100%;
    border-radius: 10px;
    margin-left: 15px;
    display: flex;
    justify-content: center;
}

.Payment-Right {
    width: calc(88% - 320px);
    margin-left: 20px;
}

.Payment-Right>* {
    width: 100% !important;
    margin-bottom: 10px;
    background: var(--allColor1);
    box-shadow: 0px 3px 5px var(--allColor5);
    padding: 10px;
    border-radius: 10px;
}

.Payment-Right textarea {
    width: 100% !important;
    height: 65px !important;
    border: none;
    padding: 15px;
    font-family: var(--Font);
    text-align: center;
}

.other_Prof {
    height: 100px;
    display: flex;
    justify-content: space-between;
    padding: 0 !important;
    background: none;
    box-shadow: none;
}

.other_Prof>div {
    width: 32%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    background: var(--allColor1);
    box-shadow: 0px 3px 5px var(--allColor5);
    margin-left: 3px;
    border-radius: 5px;
}

.other_Prof>div select,
.other_Prof>div input {
    width: 90%;
    height: 35px;
    border: none;
    font-size: 12px;
    padding: 8px;
    font-family: var(--Font);
}

.other_Prof>div input:focus {
    border-bottom: 1px solid var(--allColor2);
}

.other_Prof>div select {
    cursor: pointer;
}

.other_Prof>div p {
    width: 90%;
}

.Payment-Right-offer {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 15px;
}

.Payment-Right-offer input {
    width: calc(100% - 95px);
    height: 45px;
    border: none;
    box-shadow: 1px 1px 1px 0px var(--allColor5);
    border-radius: 10px;
    padding: 10px;
    font-family: var(--Font);
    text-align: center;
}

.Payment-Right-offer button {
    width: 90px;
    height: 35px;
    border-radius: 10px;
    background: var(--allColor1);
    border: 1px solid var(--allColor4);
}

.Payment-Right-offer button:hover {
    background: var(--allColor4);
    border: 1px solid var(--allColor1);
    color: var(--allColor1);
}

.Payment-Right-offer p {
    width: 100%;
    padding-top: 5px;
    font-size: 14px;
    color: #595959;
}

.Payment-Right-Paik {
    background: none;
    box-shadow: none;
    padding: 0;
}

.Payment-Right-Paik ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.Payment-Right-Paik ul>li {
    width: 48%;
    height: 100px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: var(--allColor1);
    box-shadow: 0px 3px 5px var(--allColor5);
    border-radius: 10px;
    padding: 10px;
    transition: all ease-in-out .2s;
    margin: 0 0 10px 0 !important;
    cursor: pointer;
}

.Payment-Right-Paik ul>li:hover label {
    opacity: 1;
}

.Payment-Right-Paik ul>li:hover label::before,
.Payment-Right-Paik ul>li:hover label::after {
    border: 1px solid var(--allColor4);
}

.Right-Paik-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.Payment-Paik-Tops {
    width: 100%;
    height: 60px;
    color: #2C2C2C;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.Payment-Paik-Tops img {
    width: 30px;
    height: 30px;
    margin: 0 5px;
    transition: all ease-in-out .2s;
    cursor: pointer;
}

.Payment-Paik-Downs {
    width: 100%;
    height: calc(100% - 50px);
    text-align: center;
    padding: 0 5px;
    font-size: 14px;
    color: #2c2c2c;
    display: none;
}

.Payment-Right-Des>p {
    width: 100%;
    font-size: 14px;
    color: #2c2c2c;
}

.basketEmp {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.basketEmp h2 {
    width: 100%;
    text-align: center;
}

.btn_Payment {
    height: 60px;
    cursor: pointer;
}

/* ---------------------- < Order > --------------------------------------- */

.Order {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 15px;
    margin-bottom: 20px;
}

.Order-Ok {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.Order-Ok-head {
    width: 80%;
    height: 70px;
    border-radius: 50px 50px 3px 3px;
    background: var(--allColor1);
    box-shadow: 0px 0px 5px 2px rgba(0, 255, 30, 0.2);
    margin-bottom: 20px;
    color: #12e912;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Order-Ok-about {
    width: 27%;
    background: var(--allColor1);
    box-shadow: 0px 0px 5px var(--allColor5);
    border-radius: 10px;
    padding: 15px 25px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

.Order-Ok-about p {
    margin: 15px 0;
    font-family: var(--Font-M);
}

.Order-about-left p {
    width: 200px;
}

.Users-AllUsers {
    width: 71%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 10px;
    background: var(--article-back);
    box-shadow: 0px 3px 5px var(--allColor5);
    padding: 10px;
}

.ActOrders-Right-List {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--allColor2);
}

.ActOrders-List-head {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ActOrders-List-Thead {
    width: 100%;
    height: 40px;
    margin-bottom: 7px;
}

.ActOrders-List-Thead>div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--allColor3);
    padding: 10px;
}

.ActOrders-List-Thead>div p {
    height: 100%;
    font-size: 13px;
    text-align: center;
    color: var(--allColor3);
}

table {
    table-layout: fixed;
    word-wrap: break-word;
}

.ActOrders-List-Tbody {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow-y: auto;
}

.ActOrders-List-Tbody>a {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin: 5px 0;
    opacity: 1;
    transition: all ease-in-out .2s;
    border-bottom: 1px solid var(--allColor5);
}

.ActOrders-List-Tbody>a:hover {
    background: rgba(230, 230, 252, 0.2);
    box-shadow: 0px 0px 20px var(--allColor5);
    cursor: pointer;
}

.ActOrders-List-Tbody>a>div,
.ActOrders-List-Tbody>a>p {
    height: 100%;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ActOrders-List-Tbody>a>div img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    transition: all ease-in-out .2s;
}

.ActOrders-List-Tbody>a>div img:hover {
    border-radius: 5px !important;
}

.AllOrders-List-name {
    width: 32%;
}

.AllOrders-List-condition {
    width: 17%;
}


/* /////////////////////// < Footer > //////////////////////////////  */

footer {
    width: 100%;
    height: 590px;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
}

.footer-Head {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #191919;
    border-top: 1px solid #191919;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.footer-Head>p {
    text-align: center;
    width: 80%;
    font-size: 14px;
}

.footer-Head>h1 {
    padding: 0px 25px;
    text-align: center;
    position: absolute;
    top: -27px;
    font-size: 30px;
}

.footer-daste {
    width: 90%;
    height: 270px;
    display: flex;
    justify-content: space-between;
    padding-top: 35px;
}

.footer-daste>div {
    width: 20%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.footer-daste>div>div {
    width: 100%;
    margin-top: 5px;
    padding-right: 5px;
}

.footer-daste>div>div>a {
    height: 30px;
    font-size: 14px;
}

.footer-daste>div>div>a:hover {
    color: var(--allColor4);
}

.footer-daste>span {
    width: 300px;
}

.email {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.email>p {
    width: 250px;
    font-size: 11px;
    margin: 5px 0;
}

.email>input {
    width: 200px;
    height: 30px;
    background: rgba(44, 44, 44, 0.2);
    border-radius: 1px 5px 5px 1px;
    border: none;
    font-family: var(--Font);
    padding: 5px;
    font-size: 12px;
}

.email>button {
    width: 30px;
    height: 30px;
    background: #2C2C2C;
    color: var(--allColor1);
    border-radius: 5px 1px 1px 5px;
    margin: 0 !important;
}

.footer-adres {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.footer-adres>div>a>img {
    width: 125px;
    height: 125px;
    margin: 0 5px;
    transition: all ease-in-out .2s;
    border-radius: 25px;
}

.footer-adres>div>a>img:hover {
    border: 1px solid var(--allColor2);
}

.footer-adres-Right {
    width: 500px;
}

.footer-adres-Right>div {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.footer-adres-Right>div>img {
    margin-left: 5px;
}

.adres-Right-commun>div {
    display: flex;
    margin-left: 15px;
    font-size: 15px;
}

.adres-Right-commun>div>img {
    margin-left: 5px;
}

.adres-Right-icon>a {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: var(--allColor1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    cursor: pointer;
}

.adres-Right-icon>a>img {
    width: 30px;
    height: 30px;
}

.footer-Copy {
    width: 100%;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2C2C2C;
    color: var(--allColor1);
}

.footer-Copy>p {
    z-index: 99;
}

.footer-Copy>div {
    position: absolute;
    top: -40px;
    display: flex;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background: #2C2C2C;
    padding-top: 10px;
    cursor: pointer;
}

.footer-Copy>div>img {
    width: 35px;
    height: 35px;
}

#icon_Supp {
    width: 55px;
    height: 55px;
    padding: 8px 10px 10px 9px;
    border-radius: 100%;
    background: var(--allColor2);
    position: fixed;
    bottom: 20px;
    right: 5px;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 102;
}

#icon_Supp img {
    width: 90%;
    height: 90%;
}

/* ------------------- */
.Slider_Img,
.NewProduct,
.Brands,
.symbols,
.Amazing {
    margin-top: 60px !important;
}