/* Default CSS */
@font-face {
    font-family: 'vazir';
    src: url("../fonts/vazir/Vazir-Medium-FD-WOL.eot");
    src: url("../fonts/vazir/Vazir-Medium-FD-WOL.woff") format('woff'), url("../fonts/vazir/Vazir-Medium-FD-WOL.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior:smooth;
}
html.overlay{
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
}

body {
    margin: auto;
    width: 100%;
    padding: 0;
    direction: rtl;
    font-family: 'vazir';
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}
*.disable {
    cursor: auto;
    opacity: .6;
}
img {
    object-fit: cover;
}
ul,ol {
    list-style: none;
    margin: 0;
}
a {
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    color: #444;
}
a:hover {
    text-decoration: none;
}
p,span {
    font-weight: 400;
}
section {
    overflow: hidden;
    width: 100%;
}
:root {
    --btn-back-color: #a31521;
    --green-txt-color: #4e6f47;
    --pink-color: #f5e7e7;
    --light-pink: #f5e7e799;
    --box-shadow: 1px 1px 5px #ccc;
}
.mobile-view{
    display: none;
}
.row {
    overflow-x: hidden !important;
    margin: auto;
}
.owl-stage-outer {
    width: 100% !important;
}
.owl-item > * {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.owl-nav{
    /* height: auto !important;
    width: auto !important;  */
    position: absolute;
    width: 100% !important;
    top: 45%;
}
.owl-prev , .owl-next{
    position: absolute;
    background-color: #fff !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 1px solid #44444477 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.owl-prev{
    right: -5%;
}
.owl-next{
    left: -5%;
}
:is(.owl-prev , .owl-next , .slider__btn-switch--light, .slider__btn-switch--dark):focus{
    outline: 0 !important;
}
:is(.owl-prev, .owl-next).disabled,
:is(.owl-prev, .owl-next).disabled svg{
    color: #ccc9 !important;
    border-color: #ccc9 !important;
    border-color: #ccc !important;
}
.owl-item {
    height: 80% !important;
}


/* HEADER */
header{
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    position: relative;
    z-index: 100;
    box-shadow: 0 7px 8px 0 rgb(0 0 0 / 4%);
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: rgba(255,255,255,.8);
    margin-bottom: 80px;
}
input:focus {
    outline: 1px solid #548ca8;
    border: 0 !important;
}
textarea:focus {
    outline: 1px solid #548ca8;
    border: 1px solid transparent !important;
}
header + div{
    margin-top: 70px;
}

.mobile-nav{
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 900;
    top: 0;
    right: -100%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.mobile-nav.show{
    right: 0;
}
.mobile-nav .close-menu{
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 10px;
    cursor: pointer;
}
.mobile-nav .desktop-menu{
    padding-block: 10px 20px;
    max-width: 80%;
}
.mobile-nav .desktop-menu li{
    text-align: right;
    max-width: 80%;
    margin: 10px auto;
}
.header-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: unset !important;
}
.header-row img{
    width: 60px;
}
header .menu-icon{
    display: none;
    cursor: pointer;
    padding: 10px 0 10px 10px;
}
header .menu-icon svg{
    font-size: 1.5em;
}
.header-row .menu-box,
.header-row .desktop-menu,
.header-row .desktop-menu li,
.header-row .search-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-row .search-box{
    gap: 10px;
}
.header-row .desktop-menu li svg{
    margin-right: 5px;
    color: #838181;
}
:is(.header-row .menu-box , .header-row .desktop-menu) > *{
    margin: auto 5px;
}
.header-row .menu-box a{
    color: #585858;
    font-weight: 400;
}
.header-row .desktop-menu > li > span,
.header-row .desktop-menu > li > a{
    padding: 23px 12px;
    font-size: 13px;
    color: #585858;
}
.header-row .search-box .cart-link{
    margin-right: 20px;
    position: relative;
}
.header-row .search-box .cart-link .count{
    position: absolute;
    top: -9px;
    right: -12px;
    width: 18px;
    height: 18px;
    padding: 10px;
    border-radius: 50%;
    background-color: var(--btn-back-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    font-size: 12px;
}
.header-row .search-box .login-link{
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    border: 1px solid #e3e3e3;
    padding-inline: 10px;
    border-radius: 8px;
    gap: 5px;
    display: flex;
    align-items: center;
    padding: 5px 4px;
}
.header-row .search-box .login-link svg:first-child{
    /*width: 25px;*/
    /*height: 30px;*/
}
.header-login-icon{
    -webkit-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    display: flex;
    align-items: center;
}
.login-link.clicked .header-login-icon{
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.header-login-icon svg{
    width: 15px !important;
    height: 13px !important;
}
.header-login-icon .fa-angle-down{
    color: #505050;
}
.header-row .user-nav{
    background: #fff;
    padding: 10px;
    width: 150px;
    position: absolute;
    top: 40px;
    left: 0;
    border-radius: 10px;
    color: #444;
    box-shadow: 1px 1px 5px #ccc;
    display: none;
    flex-direction: column;
    text-align: right;
}
.header-row .user-nav.show{
    display: flex;
}
.header-row .user-nav > a{
    padding-block: 10px;
    font-size: 12px;
    cursor: pointer;
    color: #444;
}
.header-row .user-nav > a:not(:last-child){
    border-bottom: 1px solid #e1dede;
}
.header-row .user-nav > a:hover{
    color: var(--btn-back-color);
}
.header-row .user-nav img{
    width: 20px;
    margin-left: 5px;
}
.header-row .user-nav> a:last-child img{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.header-row .search-box input[type="text"]{
    color: #585858;
    border: 1px solid #c3c3c3;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11px;
}
.header-row .search-box button{
    z-index: 1;
    position: relative;
    width: 20px;
    margin: 2px -35px 10px 0;
    border: 0;
    background-color: transparent;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.header-row .search-box > svg{
    margin-right: 35px;
    cursor: pointer;
}
.header-row .search-btn{
    display: none;
    margin-right: 15px;
}
.search-row{
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    height: 0;
    justify-content: center;
    align-items: center;
}
.search-row.show{
    height: 60px;
    max-height: 60px;
}
.search-row .search-box{
    width: 90%;
    display: flex;
    align-items: center;
    margin-top: -15px;
}
.search-row input{
    color: #585858;
    border: 1px solid #a4a4a4;
    outline: 0;
    border-radius: 20px;
    padding: 5px 10px;
    width: 100%;
}
.search-row button{
    z-index: 1;
    position: relative;
    width: 20px;
    margin: 2px -35px 10px 0;
    border: 0;
    background-color: transparent;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
a.has-submenu{
    position: relative;
}
.overlay-section{
    display: none;
    background-color: rgba(175, 174, 174, 0.5);
    z-index: 1050;
    position: fixed;
    outline: none;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}
.overlay-section.show{
    display: block;
}
.mega-menu{
    display: none;
    align-items: flex-start;
    width: 800px;
    max-height: 370px;
    flex-wrap: nowrap;
    overflow: hidden;
    position: absolute;
    top: 95%;
     right: 23%;
    background-color: #fff;
    z-index: 1000;
    border-radius: 25px;
    padding: 0;
    box-shadow: rgb(0 0 0 / 24%) 0px 2px 6px;
}

.mega-menu > ul{
    height: 370px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 150px;
    background-color: #a31621;

}
.mega-menu > ul > li{
    padding-block: 8px;
    width: 100%;
    height: 100%;
    justify-content: flex-start !important;
    padding-right: 15px;
    margin: auto;
}
.mega-menu > ul > li:not(:first-child){
    border-top: 1px solid #fff;
}
.mega-menu > ul > li span{
    color: #fff;
    cursor: pointer;
    width: 100%;
    text-align: right;
}
.mega-menu .tab-content{
    width: 100%;
}
.mega-menu .tab-panel{
    display: none;
    height: 370px;
    max-height: 370px;
}
.mega-menu .tab-panel.active{
    display: block;
}
.mega-menu .tab-panel > .row:first-child > div{
    text-align: right;
    padding-block: 10px;
}
.mega-menu .tab-panel .title-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mega-menu .tab-panel .title-text{
    text-align: right;
    border-right: 2px  solid var(--btn-back-color);
    padding-right: 10px;
    color: #4449;
    font-size: 18px;
    padding-bottom: 5px;
}
.mega-menu .tab-panel .title-box > a{
    color: var(--btn-back-color) !important;
    padding-bottom: 5px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    border-bottom: 2px solid transparent;
    font-size: 0.8rem;
}
.mega-menu .tab-panel .title-box > a:hover{
    border-bottom: 2px solid var(--btn-back-color);
}
.mega-menu .sub-menu-items{
    padding-right: 5px;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    overflow: hidden;
    max-height: 300px;
}
.mega-menu .sub-menu-items li{
    text-align: right;
    justify-content: flex-start;
    color: #444;
    padding-right: 10px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.mega-menu .sub-menu-items li a{
    font-size: 14px;
    width: 100%;
    padding: 0.6rem;
}
.mega-menu .menu-items li:hover,
.mega-menu .menu-items li.active{
    background-color: #fff;
    border-color: #fff;
}
.mega-menu .sub-menu-items li:hover a,
.mega-menu .sub-menu-items li.active a{
    color: var(--btn-back-color);
}
:is(.mega-menu .menu-items > li:hover, .mega-menu .menu-items li.active) span{
    color: var(--btn-back-color);
}
.mega-menu .tab-content .tab-panel.active{
    background-image: linear-gradient(to right , rgba(255,255,255,0) , rgba(255,255,255,.6)) , url("../img/menupics/flower.jpg");
}
.mega-menu .tab-content .tab-panel{
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
}
.mega-menu .tab-content .tab-panel .row:nth-child(2){
    height: 320px;
}
.mega-menu .tab-content .tab-panel .img-box{
    position: relative;
}
.mega-menu .tab-content .tab-panel img{
    display: none;
}
/* INDEX */


.index-banner-slider img{
    width: 100vw;
    height: 600px;
}
.index-banner-slider .swiper-pagination{
    background-color: rgba(255,255,255,.85);
    padding: 10px;
    border-radius: 20px;
    width: max-content !important;
    position: absolute;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
}
/* GALLERY-SECTION   */
.gallery-section{
    margin-top: 50px;
    background-image: url("../img/bg-vectors/blue\ bg.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    padding-bottom: 250px;
    text-align: right;
}
.gallery-section .categories{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-block: 20px;
    margin: auto;
    overflow-x: auto;
}
.gallery-section .categories .owl-nav{
    top: 15%;
}
.gallery-section .categories .owl-next,
.gallery-section .categories .owl-prev{
    border: 0 !important;
    background-color: transparent !important;
}
.gallery-section .categories .owl-prev{
    right: -8% !important;
}
.gallery-section .categories .owl-next{
    left: -8% !important;
}
.gallery-section .categories span{
    position: relative;
    font-size: 16px;
    border-radius: 10px;
    padding: 5px 20px;
    margin: auto 10px;
    /* min-width: 50px; */
    min-width: max-content;
    cursor: pointer;
    font-size: 13px;
}
.gallery-section .categories span.active,
.gallery-section .categories span:hover{
    background-color: var(--btn-back-color);
    color: #fff;

}
.gallery-section .categories span:not(:last-child)::after{
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #66666647;
    /* margin-right: 35px; */
    left: -30px;
}
.gallery-section .patterns .pattern-item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    margin: 20px auto;
}
.gallery-section .patterns .pattern-item.not-show{
    display: none;
}
.gallery-section .show-more {
    display: none;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
.gallery-section .show-more.show{
    display: flex;
}
.gallery-section .show-more span{
    cursor: pointer;
    position: relative;
    width: 100%;
    text-align: center;
}
.gallery-section .show-more span::before,
.gallery-section .show-more span::after{
    content: "";
    position: absolute;
    top: 50%;
    width: 43%;
    height: 1px;
    background-color: #ccc;
    cursor: auto;
}
.gallery-section .show-more span::before{
    left: 0;
}
.gallery-section .show-more span::after{
    right: 0;
}
.gallery-section .show-more svg{
    margin-right: 10px;
    width: 20px;
    height: 20px;
}
.effect-bubba {
	background: var(--menu-color);
}

.effect-bubba img {
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}
.effect-bubba .text-box::before,
.effect-bubba .text-box::after {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.effect-bubba .text-box::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

.effect-bubba .text-box::after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

.effect-bubba .text-box span {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

.effect-bubba:hover .text-box::before,
.effect-bubba:hover .text-box::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.effect-bubba:hover span{
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.shine{
    position: relative;
}
.shine::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.shine:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}


.allShine{
    position: relative;
    overflow: hidden;
}
/* .allShine::before {
	position: absolute;
	top: 0;
	left: -70%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.allShine:hover::before {
	-webkit-animation: Allshine .75s;
	animation: Allshine .75s;
} */
@-webkit-keyframes Allshine {
	100% {
		left: 65%;
	}
}
@keyframes Allshine {
	100% {
		left: 65%;
	}
}
.gallery-section .patterns img{
    width: 250px;
    height: 250px;
    border-radius: 20px;
    border: 1px solid #444;
}
.gallery-section .patterns .text-box{
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 250px;
    height: 250px;
    border-radius: 20px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}
.gallery-section .pattern-item:hover .text-box{
    background-color: #548ca888;
}
.gallery-section .patterns .text-box span{
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
}
:is(.gallery-section, .top-seller , .cloth-types , .blog-section , .newest-clothes) h4.title{
    padding-right: 20px;
    font-size: 1.2rem !important;
}


/* TOP-SELLER */
.top-seller{
    background-color: #eee;
    margin-top: -180px;
}
.top-seller::before{
    content: "";
    background: url("../img/bg-vectors/bargg.svg");
    background-repeat: repeat;
    background-repeat: repeat;
    position: absolute;
    right: 0;
    width: 100%;
    height: 40%;
    background-repeat: no-repeat;
    margin-top: -95px;
    z-index: 2;
}
.top-seller, .newest-clothes{
    padding-block: 30px;
    text-align: right;
}
:is(.top-seller, .newest-clothes) .container{
    margin-top: 10px;
    overflow: hidden;
}
.newest-clothes{
    padding-block: 0 30px;
}

:is(.top-seller, .newest-clothes) .items{
    padding-block: 30px;
    z-index: 3;
    overflow: visible;
}
:is(.top-seller, .newest-clothes) .top-sell-item{
    background-color: #fff;
    padding-block: 20px;
    border: 1px solid #44444438;
    border-radius: 20px;
    max-width: 100%;
    margin: auto 1px;
    height: 300px;
    position: relative;
    display: flex;
    justify-content: center;
}
:is(.top-seller, .newest-clothes, .index-banner-slider) .swiper-button-prev,
:is(.top-seller, .newest-clothes, .index-banner-slider) .swiper-button-next{
    border-radius: 50% !important;
    border: 1px solid #548ca8 !important;
    width: 40px;
    height: 40px;
    background-color: #fff;
}
:is(.top-seller, .newest-clothes) .swiper-button-prev{
    right: -10px !important;
}
:is(.top-seller, .newest-clothes) .swiper-button-next{
    left: -10px !important;
}
:is(.top-seller, .newest-clothes, .index-banner-slider) .swiper-button-prev::after,
:is(.top-seller, .newest-clothes, .index-banner-slider) .swiper-button-next::after{
    font-size: 1em;
    font-weight: bold;
    color: #548ca8;
}
.swiper-button-disabled{
    opacity: .5 !important;
}
:is(.top-seller, .newest-clothes) .top-sell-item img{
    width: 150px;
    border-radius: 20px;
    margin-bottom: 10px;
    position: absolute;
    top: 30px;
    -webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
:is(.top-seller, .newest-clothes) .top-sell-item .text-box{
    padding-block: 15px;
    text-align: center;
    width: 100%;
    color: #444;
    position: absolute;
    bottom: 20px;
}
:is(.top-seller, .newest-clothes) .top-sell-item .text-box h6{
    margin-bottom: 20px;
}
:is(.top-seller, .newest-clothes) .top-sell-item .text-box span{
    padding: 5px 20px;
    border-radius: 15px;
    border: 1px solid var(--btn-back-color);
    color: var(--btn-back-color);
    margin-top: 15px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: relative;
    overflow: hidden !important;
    font-size: 0.65rem;
}
:is(.top-seller, .newest-clothes) .top-sell-item:hover .text-box span{
    color: #fff;
    background-color: var(--btn-back-color);
}
:is(.top-seller, .newest-clothes) .owl-nav > button{
   border-color: #548ca8 !important;
}
:is(.top-seller, .newest-clothes) .owl-nav > button.disabled{
    border-color: #ccc !important;
}
:is(.top-seller, .newest-clothes) svg{
    color: #548ca8;
}
.top-seller .items > div{
    margin-bottom: 30px;
}
.circle{
    position: relative;
}
.circle::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.circle:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 125%;
		height: 125%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 125%;
		height: 125%;
		opacity: 0;
	}
}

/* SLIDER */
button {
    all: unset;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent ;
  }
  .inner-container {
    height: 100%;
    margin: 0 auto;
    max-width: 85rem;
    width: calc(100% - var(--gutter));
  }

  /* ---General classes--- */
  .flex-row {
    display: flex;
  }
  .flex-column {
    display: flex;
    flex-direction: column;
  }
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .justify-between {
    display: flex;
    justify-content: space-between;
  }
  /* ---General classes--- */

  .slider {
    height: 100%;
    overflow: hidden;
    background-color: #fff;
  }
  .slider__wrraper {
    height: 100%;
    justify-content: flex-end;
  }
  .slider__content{
      position: relative;
      background-image: url("../img/bg-vectors/logo15opacity.svg");
      background-repeat: no-repeat;
      background-size: 200px;
      background-position: 230px 65px;
  }
  .slider__img {
    width: 20rem;
    align-self: center;
    margin-bottom: 1.7rem;
    margin-top: 3.5rem;
  }
  .slider__context {
    font-weight: 900;
    font-size: 1.55rem;
    width: fit-content;
    margin-bottom: 1.5rem;
    text-transform: capitalize;
    position: absolute;
    left: 15%;
    bottom: 10%;
  }
  .slider__title {
    font-size: .8em;
    margin: 0.1rem 0 0.35rem;
    color: #fff;
    border-bottom: 2px solid #fff;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .slider__category {
    margin: 0;
    font-size: 1.55rem;
    letter-spacing: 0.05em;
    color: #fff;
  }
  .slider__price {
    font-size: 0.5em;
    font-weight: lighter;
    font-family: sans-serif;
  }
  .context {
    display: flex;
    font-weight: 900;
    font-size: 1.55rem;
    width: fit-content;
    margin-bottom: 3.05em;
    flex-direction: column;
    text-transform: capitalize;
  }
  .slider__footer {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 0 30px;
  }
  .slider__btns {
    width: 75%;
    font-size: 1.9em;
    align-items: center;
    margin: auto;
  }
  .slider__btn-buy {
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-radius: 15px;
    text-transform: uppercase;
    padding: 0.5rem 2.2rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.533);
  }
  .slider__btn-switch {
    width: 30px;
    height: 30px;
    position: relative;
    border-radius: 50%;
    margin-inline-start: 0.7rem;
  }
  .slider__btn-switch::before {
    content: "";
    height: 0.4rem;
    width: 0.4rem;
    position: absolute;
    border: 2px solid;
    border-top: unset;
    border-left: unset;
    margin-inline-end: -0.1rem;
    transform: rotate(-45deg);
  }
  .slider__btn-switch--dark {
    background-color: #252525;
    transform: rotate(180deg);
  }
  .slider__btn-switch--dark::before {
    border-color: #fff;
  }
  .slider__btn-switch--light {
    background-color: #fff;
  }
  .slider__btn-switch--light::before {
    border-color: #252525;
  }
  .slider__index {
    right: 14%;
    gap: 0 5.7em;
    display: flex;
    font-weight: 900;
    font-weight: 600;
    font-size: 0.85em;
    visibility: hidden;
    position: absolute;
    font-family: system-ui;
    justify-content: center;
    bottom: calc(100% + 0.8em);
  }
  .slider__index :last-child {
    color: #fff;
  }
  .slider__index::before {
    top: 55%;
    height: 1%;
    width: 42%;
    content: "";
    position: absolute;
    transform-origin: center;
    background-color: #252525;
  }

.new-types{
    background-image: url("../img/bg-vectors/red\ back.svg");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 350;
    padding-top: 40px;
}


:is(.cloth-types, .newest-clothes) .container{
    border-bottom: 1px solid #4444443d;
    padding-bottom: 45px;
}

.cloth-types,
.blog-section{
    text-align: right;
    padding-block: 30px;
}
.blog-section{
    padding-block: 0 30px;
}
.cloth-types .tiny-images-slider{
    /* transform: rotate(270deg); */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* padding: 0 15px !important; */
}
.cloth-types .tiny-images-slider .swiper-wrapper{
    align-items: center;
}
.cloth-types .cloth-item{
    /* text-align: center; */
    /* margin: 10px auto; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.cloth-types .main-cloth-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cloth-types .row > .tiny-images-slider{
    /* padding-top: 38px; */
    margin-top: 60px;
    max-height: 30vh;
    overflow: hidden;
}
.cloth-types .main-cloth-item > *{
    margin: 5px auto;
}
.cloth-types .main-image{
    width: 320px;
    max-width: 330px;
    border-radius: 20px;
}
.cloth-types .tiny-image{
    width: 80px;
    /* max-width: 100px; */
    border-radius: 20px;
    cursor: pointer;
}
.cloth-types .cloth-item:not(.main-cloth-item) .cloth-name,
.cloth-types .cloth-item:not(.main-cloth-item) .cloth-info{
    display: none;
}

.blog-section .blog-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.blog-section .blog-items{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 20px;
    flex-wrap: wrap;
}
.blog-section .blog-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.blog-section .blog-item > *{
    margin: 5px 0;
}
.blog-section .blog-item img{
    width: 300px;
    height: 200px;
    border: 2px solid #ccc;
    border-radius: 10px;
}
.blog-section .blog-item .blog-info{
    width: 350px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.blog-section .blog-item .blog-info .title{
    font-size: 1rem !important;
    display: -webkit-box;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    height: 50px;
}
.blog-section .blog-item .blog-info span,
.blog-section .blog-item .blog-info a{
    color: #548ca8;
    font-size: 11px;
}
.blog-section .blog-item .blog-info a{
    align-self: flex-end;
    padding: 10px 20px;
    border: 1px solid #548ca8;
    border-radius: 10px;
}
.blog-section .blog-item .blog-info p{
    overflow: hidden;
    max-height: 75px;
    text-align: justify;
    font-size: 0.8rem;
}
.blog-section .owl-nav{
   top: 37%;
}


footer{
    background-image: url("../img/bg-vectors/blue\ flower.svg") , url("../img/bg-vectors/footer.svg");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 300px , cover;
    padding-top: 150px;
    background-blend-mode: multiply;
    margin-top: 5rem;
}
footer .container{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
footer .lists{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-right: 100px;
}
footer .lists a{
    line-height: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 0.8rem;
}
footer .lists a svg{
    margin-left: 5px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
footer .lists > a:hover > svg{
    transform: rotateX(90deg);
}
footer .social-icons{
    display: flex;
    margin: 5px auto;
    justify-content: center;
    align-items: center;
    padding-block: 20px;
}
footer .social-icons > a{
    margin: auto 10px;
}
footer .social-icons > a > svg{
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
footer .social-icons > a:hover svg{
    transform: rotateY(360deg);
}
footer .footer-content{
    max-width: 50%;
}
footer .footer-content p{
    text-align: justify;
    color: #fff;
}
footer .footer-content .namads{
    display: flex;
    justify-content: space-evenly;
    padding-block: 10px;
    align-items: center;
}
footer .footer-content .namads img{
    width: 50px;
}
footer .copyright{
    text-align: center;
    padding-block: 10px;
    width: 80%;
    margin: auto;
}
footer .copyright span,
footer .copyright a{
    color: #ccc;
    font-size: 12px;
}
footer .copyright a{
    text-decoration: underline;
}
footer .copyright a:hover{
    color: #444;
}



/* PRODUCT-DETAIL PAGE */

.page-address{
    background-color: var(--btn-back-color);
    color: #444;
    padding-block: 10px;
    text-align: right;
    margin-top: 90px;
}
.page-address .items > span{
    margin-left: 10px;
    position: relative;
    color: #fff;
}.page-address .items > span a{

    color: #fff;
}
.page-address .items > span:not(:last-child)::after{
    content: "\203A";
    margin-right: 20px;
    font-size: 20px;

}

.product-section{
    padding-block: 30px;
}
.product-section .row{
    overflow-x: visible !important;
}
.product-section .product-image{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.product-section .product-image img{
    width: 380px;
    max-width: 380px;
    height: 330px;
    max-height: 330px;
    border-radius: 20px;
    margin-bottom: 10px;
    box-shadow: var(--box-shadow);
    cursor: zoom-in;
    align-self: flex-end;
}
.product-image .large,
.product-image .zoom-place {
	width: 100px; height: 100px;
	position: absolute;
	display: none;
}
.product-image .zoom-place {
  height:400px;
  width: 500px;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
	0 0 7px 7px rgba(0, 0, 0, 0.25),
	inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
}
.product-image .large {
  width: 75px;
  height: 75px;
  z-index: 10;
}
.product-image .zoom-wrapper {
    background-color: white;
    position: absolute;
    right: 110%;
    top: 0px;
    display: none;
    overflow: hidden;
    min-height: 600px;
    min-width: 750px;
    max-width: 750px;
    border: solid 5px white;
    box-shadow: -4px 5px 13px #333;
    z-index: 10;
    border-radius: 10px;
}
.product-image .zoom-place{
    width: 750px;
    height: 600px;
}
.product-image .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;

}
.product-image .clearfix {
    display: inline-block;
}


.product-section .price-box{
    background: var(--pink-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    width: 300px;
    height: 250px;
    margin: 50px 0 0 0;
    border: 1px solid var(--btn-back-color);
}
.product-section .price-box > *{
    margin: 10px auto;
}
.product-section .price-box .unit-price{
    border: 1px solid var(--btn-back-color);
    border-radius: 20px;
    padding: 10px;
    font-size: 12px;
}
.product-section .price-box .addToCart{
    background-color: var(--btn-back-color);
    padding: 10px 30px;
    color: #fff;
    font-weight: 400;
    border-radius: 20px;
}
.product-section .price-box #priceChange{
    font-weight: 600;
}
.product-section .title-box{
    margin-bottom: 50px;
    display: flex;
    align-items: center;
}
.product-section .title{
    margin-right: 10px;
}
.product-section .patterns-slider .row{
    padding-block: 15px;
    /* overflow-x: visible !important; */
    overflow: hidden !important;
}
/* .product-section .patterns-slider .row .owl-stage-outer{
    overflow: hidden;
    margin: auto;
}
.product-section .patterns-slider .owl-nav{
    top: 30%;
}
.product-section .patterns-slider .owl-prev,
.product-section .patterns-slider .owl-next{
    border: 0 !important;
    background-color: transparent !important;
}
.product-section .patterns-slider .owl-prev{
    right: -2%;
}
.product-section .patterns-slider .owl-next{
    left: -2%;
}
.product-section .patterns-slider .owl-nav .disabled{
    display: none;
} */
:is(.patterns-slider, .order-slider) .swiper-button-prev{
    right: -10px !important;
}
:is(.patterns-slider, .order-slider) .swiper-button-next{
    left: -5px !important;
}
:is(.patterns-slider, .order-slider) :is(.swiper-button-next, .swiper-button-prev)::after{
    font-size: 1rem !important;
    color: #444;
}
.product-section .patterns-slider .item{
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
}
.product-section .patterns-slider img{
    cursor: pointer;
    min-width: 100px;
    width: 100px;
    min-height: 100px;
    height: 100px;
    object-fit: unset;
    border-radius: 20px;
    box-shadow: 1px 5px 10px #ccc;
}
.product-section .patterns-slider .text-box{
    display: none;
}

/* prod detail mobile-view modal */
.modal.show {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal .modal-content{
    border: 0;
}
.modal .modal-header{
    border-bottom: 1px solid #548ca8;
}
.modal .modal-header .close {
    padding: 0 !important;
    margin: 0 !important;
}
.product-modal{
    display: none;
}
.product-modal .close span{
    color: #548ca8;
    font-weight: 900;
    font-size: 24px !important;
}
.modal .modal-body {
    text-align: right;
}
.modal .modal-dialog {
    width: 100% !important;
    position: absolute;
    background-color: #fff;
    bottom: 0;
    margin: 0;

}
.product-modal .modal-header{
    border-top: 1px solid #548ca8;
    border-radius: 0;
}


.pattern-color-choose,
.pattern-size-choose,
.cloth-type-choose,
.cloth-meter-choose,
.product-section .footer-content{
    padding-block-start: 30px;
}
.colors, .sizes, .types, .meters{
    padding-block: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.product-section .default-item{
    display: none;
}
:is(.colors, .sizes, .types, .meters) > span,
:is(.colors, .sizes, .types, .meters) > input{
    min-width: 135px;
    max-width: 160px;
    padding: 10px 20px;
    border-radius: 15px;
    border: 1px solid var(--btn-back-color);
    margin: 5px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background: transparent!important;
}
.tags{
    width: 380px;
    padding: 0 20px;
    margin-right: -25px;
}
.tags span{
    padding: 0;
    width: max-content !important;
    min-width: max-content;
    border-radius: 10px;
    background-color: var(--btn-back-color) !important;
}
.tags span a{
    padding: 5px 10px;
    width: max-content;
    display: block;
    font-size: 12px;
    background-color: var(--btn-back-color) !important;
    color: #fff !important;
}
.tags span a:hover{
    color: #fff !important;
}
:is(.colors, .sizes, .types, .meters) > input.active::placeholder{
    color: #fff;
}
:is(.colors, .sizes, .types, .meters) > span{
    white-space:nowrap;
    text-overflow:ellipsis;
    width:160px;
    text-align: center;
}
:is(.colors, .sizes, .types, .meters) > *.active{
    background-color: var(--btn-back-color) !important;
    color: var(--pink-color) !important;
}
:is(.colors, .sizes, .types, .meters) > span:hover{
    border: 1px solid var(--btn-back-color);
    color: var(--pink-color) !important;
}
:is(.colors, .sizes, .types, .meters) > span::before{
    content: '';
    width: 0%;
    height: 100%;
    display: block;
    background: var(--btn-back-color);
    position: absolute;
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    left: -10%;
    opacity: 1;
    top: 0;
    z-index: -12;
    -moz-transition: all .7s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all .7s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all .7s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all .7s cubic-bezier(0.77, 0, 0.175, 1);
   box-shadow:2px 0px 14px rgba(0,0,0,.6);
}
:is(.colors, .sizes, .types, .meters) > span::after{
    content: '';
    width: 0%;
    height: 100%;
    display: block;
    background: var(--pink-color);
    position: absolute;
	-ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    left: -10%;
    opacity: 0;
    top: 0;
    z-index: -15;
    -webkit-transition: all .94s cubic-bezier(.2,.95,.57,.99);
    -moz-transition: all .4s cubic-bezier(.2,.95,.57,.99);
    -o-transition: all .4s cubic-bezier(.2,.95,.57,.99);
    transition: all .4s cubic-bezier(.2,.95,.57,.99);
    box-shadow: 2px 0px 14px rgba(0,0,0,.6);
}
:is(.colors, .sizes, .types, .meters) > span:hover::before{
	opacity:1;
	width: 116%;
}
:is(.colors, .sizes, .types, .meters) > span:hover::after{
	opacity:1;
	width: 120%;
}
:is(.colors, .sizes, .types, .meters) > input:focus-visible{
    outline: none;
}
:is(.colors, .sizes, .types, .meters) input{
    background: transparent;
    border: 0;
    color: #444;
}
:is(.colors, .sizes, .types, .meters) input::placeholder{
    color: #444 !important;
}
:is(.colors, .sizes, .types, .meters) > *.active input,
:is(.colors, .sizes, .types, .meters) > *.active input::placeholder,
:is(.colors, .sizes, .types, .meters) > *:hover input ,
:is(.colors, .sizes, .types, .meters) > *:hover input::placeholder{
    color: #fff !important;
    outline: 0 !important;
}
.meters span{
    cursor: auto;
}
.meters-modal,
.cloth-type-modal{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 600px;
    max-width: 90%;
    height: 420px;
    max-height: 420px;
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: #fff;
    border-radius: 20px;
    margin: auto;
}
:is(.meters-modal , .cloth-type-modal).show{
    display: flex;
}
:is(.meters-modal , .cloth-type-modal) .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 95%;
    max-width: 95%;
    height: 95%;
    max-height: 95%;
    margin: auto;
    border: 2px solid var(--btn-back-color);
    border-radius: 10px;
    padding: 10px;
    position: relative;
}
:is(.meters-modal , .cloth-type-modal) .title{
    position: absolute;
    top: 15px;
    border-bottom: 2px solid #444;
    font-size: 1rem !important;
    padding-bottom: 10px;
}
:is(.meters-modal , .cloth-type-modal, .product-modal, .cart-modal) .close{
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1rem;
}
.product-modal .close{
    top: 20px;
}
.product-modal .modal-title{
    margin: 3px 25px 0 0;
}
:is(.meters-modal , .cloth-type-modal) .items{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
}
:is(.meters-modal, .cloth-type-modal) .items{
    position: absolute;
    top: 75px;
    overflow-y: auto;
    min-height: 295px;
    max-height: 295px;
    padding-right: 20px;
    scrollbar-color: var(--btn-back-color) #fff;
    scrollbar-width: thin;
}
:is(.meters-modal, .cloth-type-modal) .items::-webkit-scrollbar{
    width: 10px;
}
:is(.meters-modal, .cloth-type-modal) .items::-webkit-scrollbar-track{
    background: #fff;
}
:is(.meters-modal, .cloth-type-modal) .items::-webkit-scrollbar-thumb{
    background: var(--btn-back-color);
}
.meters-modal .items{
    min-height: max-content;
}
:is(.meters-modal , .cloth-type-modal) .items > span,
.meters-modal .inputMeters{
    width: 160px;
    min-width: 135px;
    max-width: 160px;
    max-height: 40px;
    padding: 10px 20px;
    border-radius: 15px;
    border: 1px solid var(--btn-back-color);
    margin: 5px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}
:is(.meters-modal , .cloth-type-modal) .items > span.active{
    background-color: var(--btn-back-color) !important;
    color: var(--pink-color);
}
.cloth-type-modal .items > span{
    margin-top: 20px;
}
.meters-modal .input-meters{
    width: 92%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.meters-modal .inputMeters{
    margin-right: 30px;
    outline: 0;
    cursor: auto;
}
:is(.meters-modal , .product-modal) .inputMeters:focus,
:is(.meters-modal , .product-modal) .inputMeters:focus-visible{
    outline: 1px solid var(--btn-back-color);
}

.meters-modal .input-meters > span{
    min-width: 135px;
    max-width: 160px;
    font-size: 14px;
    margin-right: 5px;
}
:is(.meters-modal , .product-modal) .input-meters > .confirm{
    padding: 8px 20px;
    border: 1px solid var(--btn-back-color);
    border-radius: 15px;
    background-color: var(--btn-back-color);
    color: #fff;
    min-width: 115px;
    max-width: 115px;
    margin: 5px 0;
    text-align: center;
}
.meters-modal .input-meters > .confirm:disabled{
    background-color: #a3152199;
    color: #ccc;
    cursor: not-allowed;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
.types{
    margin-top: 5px;
}
.types .fabricSelect{
    margin-bottom: 30px;
}
.types .icon{
    position: relative;
}
:is(.types, .cloth-type-modal) .icon svg{
    margin-left: 20px;
    cursor: pointer;
    width: 14px;
    height: 20px;
    position: absolute;
    top: -45px;
    right: -163px;
}
.cloth-type-modal .icon svg{
    top: 0;
}
:is(.types, .cloth-type-modal) .icon svg path{
    stroke: #ccc;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
:is(.types, .cloth-type-modal) .icon:hover svg path{
    stroke: #548ca8;
}
:is(.types, .cloth-type-modal) .cloth-info{
    display: none;
    background-color: #548ca8;
    text-align: justify;
    z-index: 10;
    position: absolute;
    top: -30px;
    left: 175px;
    max-width: 400px;
    width: 400px;
    margin: auto;
    padding: 10px 15px;
    border-radius: 0 15px 15px 15px;
    box-shadow: 1px 1px 5px #548ca8aa;
}
.cloth-type-modal .cloth-info{
    top: 20px;
    left: -5px;
    width: 150px;
    max-width: 150px;
    border-radius: 15px 0 15px 15px;
}
:is(.types, .cloth-type-modal) .cloth-info.show{
    display: block;
}
.types .cloth-info::after{
    position: absolute;
    top: -8px;
    left: 0px;
    margin-left: -15px;
    width: 0;
    border-top: 12px solid #548ca8;
    border-right: 28px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
    transform: rotate(215deg);
}
.cloth-type-modal .cloth-info::after{
    position: absolute;
    top: 0;
    right: -13px;
    margin-left: -15px;
    width: 0;
    border-top: 12px solid #548ca8;
    border-right: 28px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
    transform: rotate(325deg);
}
:is(.types, .cloth-type-modal) .cloth-info:hover::after{
    opacity: 1;
    visibility: visible;
}
:is(.types, .cloth-type-modal) .cloth-info *{
    color: #fff !important;
    margin: 0;
    font-size: 0.7rem !important;
    line-height: 19px;

}
.cloth-selection{
    display: flex;
}
.cloth-meter-choose{
    margin-right: 50px;
}
.cloth-selection .choosen{
    display: none;
}
.product-section .title-text{
    font-weight: 600;
}
.product-section .meter-btn,
.product-section .type-btn{
    margin-right: 10px;
    color: var(--btn-back-color);
    cursor: pointer;
}
.product-section .selectedMetersSpan{
    cursor: pointer;
}
.product-section .footer-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.product-section .footer-content > *{
    margin: 10px 0;
}
.product-section .footer-content .vip-order{
    color: var(--btn-back-color);
    text-decoration: underline;
    cursor: pointer;
}
.prod-spec-section{
    position: relative;
    background-color: #eee;
}
.prod-spec-section::before{
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    top: 55px;
    right: 0;
    left: 0;
    background-color: #b5c1c7;
}
.prod-spec-section .container > .row{
    overflow: hidden;
    padding-block: 20px;
    text-align: right;
}
.prod-spec-section .buttons span{
    margin: auto;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
}
.prod-spec-section .buttons span:hover,
.prod-spec-section .buttons span.active{
    background-color: #d7e4ec;
}
.prod-spec-section .specification > div{
    display: none;
}
.prod-spec-section .specification > div.active{
    display: block;
    padding-right: 50px;
    min-height: 450px;
    width: 100%;
}

.prod-spec-section .point-reg .points {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.prod-spec-section .point-reg .points > div{
    direction: ltr;
}
.prod-spec-section .point-reg .points svg{
    cursor: pointer;
}
.prod-spec-section .point-reg .points svg.clicked path{
    fill: #F4CF48;
}
.prod-spec-section .point-reg .points span{
    margin-right: 20px;
    font-size: 13px;
}
.cart-modal{
    display: none;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: fixed;
    inset: 0;
    width: 600px;
    max-width: 80%;
    margin: auto;
    height: max-content;
    z-index: 1051;
    background-color: #fff;
    box-shadow: 1px 1px 5px #ccc;
    padding: 20px;
    border-radius: 10px;
}
.cart-modal.vip{
    width: 700px;
}
.cart-modal.show{
    display: flex;
}
.cart-modal .head{
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    width: 100%;
    text-align: center;
}
.cart-modal .close{
    top: 5px;
}
.cart-modal .content{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    width: 100%;
    padding-block: 20px;
}
.cart-modal img{
    width: 170px;
    max-width: 170px;
    height: 160px;
    max-height: 160px;
    border-radius: 10px;
    box-shadow: 1px 1px 5px #ccc;
}
.cart-modal .right-side{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
.cart-modal .details{
    text-align: right;
    margin-right: 10px;
}
.cart-modal .details *{
    font-size: 13px;
    font-weight: 400;
    color: #444;
    margin-block: 5px;
}
.cart-modal.vip .details *{
    margin-block: 2px;
}
.cart-modal .details .caption{
    color: #9c9c9c;
}
.cart-modal .details .price,
.cart-modal .details .name{
    color: #444;
}
.cart-modal .details .name{
    font-size: 18px;
}
.cart-modal .details .price > span{
    font-size: 18px;
    font-weight: bold;
}
.cart-modal .left-side{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cart-modal .left-side > *{
    margin-bottom: 15px;
    color: #fff;
    background-color: var(--btn-back-color);
    padding: 5px;
    font-size: 12px;
    border-radius: 50px;
    height: 40px;
    max-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.cart-modal .shop-goOn{
    background-color: #fff;
    border: 1px solid var(--btn-back-color);
    color: var(--btn-back-color);
    -webkit-transition: all .5s;
    transition: all .5s;
}
.cart-modal .shop-goOn:hover{
    background-color: var(--btn-back-color);
    color: #fff;
}
.cart-modal.vip .details{
    width: 100%;
}
.cart-modal.vip .lined-props{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-modal.vip .lined-props > *{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-inline: 5px;
}
.cart-modal.vip .lined-props #vip-product-color-modal,
.cart-modal.vip .lined-props #vip-product-size-modal{
    border: 1px solid #bdb9ba;
    padding: 5px 10px;
    border-radius: 15px;
    width: 220px;
    max-width: 220px;
}
.cart-modal.vip .orderBtn{
    position: absolute;
    left: 20px;
    top: 126px;
    width: 145px;
    background: var(--btn-back-color);
    color: #fff;
    border-radius: 25px;
    padding: 10px;
    text-align: center;
}
.cart-modal.vip .drop-zone{
    width: 200px;
    max-width: 150px;
    height: 180px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    color: #ccc;
    border: 1px dashed #ccc;
    border-radius: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.cart-modal.vip .drop-zone-input{
    display: none;
}
.cart-modal.vip .drop-zone-prompt{
    font-size: 14px;
    line-height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cart-modal.vip .drop-zone-prompt svg{
    margin-top: 10px;
}
.cart-modal.vip .drop-zone--over {
    border-style: solid;
}
.drop-zone__thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
    background-size: cover;
    position: relative;
}

.drop-zone__thumb::after {
    content: attr(data-label);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
}

.msg-reg form {
    padding-block: 30px;
    display: flex;
    flex-direction: column;
    max-width: 60%;
}
.msg-reg form > div{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 5px 0;
}
.msg-reg form .uname,
.msg-reg form .email,
.msg-reg form .msg-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.msg-reg form label,
.msg-reg form input,
.msg-reg form textarea,
.msg-reg form button{
    font-size: 12px;
    color: #4d6070;
}
.msg-reg form input{
    width: 420px;
    border-radius: 10px;
    height: 35px;
    border: 1px solid #4444444a;
    padding: 5px 10px;
}

.msg-reg form textarea{
    border-radius: 10px;
    border: 1px solid #4444444a;
    width: 420px;
    padding: 10px;
}
.msg-reg button{
    width: 57%;
    border: 0;
    width: 370px;
    padding: 9px 25px;
    border-radius: 10px;
    color: var(--btn-back-color) !important;
    cursor: pointer;
    border: 1px solid var(--btn-back-color);
    margin: 20px 0 0;
    text-align: center;
}
.msg-reg button:hover{
    background-color: var(--btn-back-color);
    color: #fff !important;
}
.user-comment{
    border-top: 1px solid #444;
    padding-block: 15px;
}
.user-comment.last-user-comment{
    border-bottom: 1px solid #444;
}
.user-comment .title-box{
    padding-block: 0 10px;
}
.user-comment .title-box,
.user-comment .title-box > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user-comment .title-box > div span{
    margin-left: 5px;
}
.user-comment span.user-cmt-text{
    color: var(--green-txt-color);
}
.user-comment span.title{
    font-size: 13px;
    color: #444;
}
.user-comment p.cmt-text{
    padding-block: 20px;
    margin: auto;
}
.user-comment .like-icons{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.user-comment .like-icons svg{
    width: 30px;
    height: 30px;
    margin: auto 10px;
    cursor: pointer;
}

.comments .more-comments{
    padding-block: 15px;
    text-align: center;
    width: 100%;
    display: block;
    margin: auto;
    cursor: pointer;
    font-size: 12px;
}

.categoriesPattern{
    display: none;
}
.activePattern{
    display: block;
}

/* ALL PRODUCTS */
.prod-categories .container{
    display: flex;
    align-items: center;
    padding-block: 30px;
}
.prod-categories .cat-item{
    padding: 25px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid #ccc9;
    border-radius: 15px;
    width: 170px;
    height: 155px;
    cursor: pointer;
    margin: auto 10px 20px 10px;
    position: relative;
    overflow: hidden;
}
.prod-categories .cat-item.active{
    background-color: var(--btn-back-color);
}
.prod-categories .cat-item:before {
    background: var(--light-pink);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform 200ms ease-out;
    width: 100%;
    z-index: 2;
    transform: translateY(100%);
}
.prod-categories .cat-item:hover:before,
.prod-categories .cat-item:focus:before {
    transform: translateY(0);
}
.prod-categories .cat-item:focus {
    outline: 2px solid var(--btn-back-color);
}
.prod-categories .not-show{
    display: none;
}
.prod-categories .cat-item img{
    width: 66px;
    height: 66px;
    position: relative;
    z-index: 5;
}

.prod-categories .cat-item:hover img,
.prod-categories .cat-item:focus img {
    z-index: 5;
}
.prod-categories .cat-item .text-box{
    margin-top: 17px;
    transform: scale(1);
    transition: transform 200ms ease-in;
    z-index: 5;
    max-width: 115px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* direction: ltr; */
    white-space: nowrap;
    color: #fff;
}
.prod-categories .cat-item:hover .text-box,
.prod-categories .cat-item:focus .text-box {
  color: #fff;
  transform: scale(1.1);
}
.prod-categories .cat-item .text-box span{
    font-size: 14px;
    color: #444;
}
.prod-categories .cat-item.active span{
    color: #fff;
}
.prod-categories .cat-item:hover span{
    color: var(--btn-back-color);
}
.address-bar{
    background-color: var(--btn-back-color);
}
.search-address-bar{
    margin-top: 70px;
}
.address-bar .row{
    justify-content: flex-start;
    align-items: center;
    padding-block: 17px;
    padding-right: 10px;
}
.address-bar .products-address{
    justify-content: space-between;
}
.address-bar div > *{
    margin: auto 5px;
    color: #fff !important;
    font-size: 0.7rem;
}
.prod-filters > div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid rgb(53 86 104 / 42%);
    margin-bottom: 20px;
    padding: 0 10px;
    border-radius: 20px;
}
.prod-filters > div .title{
    padding: 10px 0 10px 5px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}
.prod-filters > div .title svg{
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    transform: rotate(0deg);
}
.prod-filters > div .title svg.rotate{
    transform: rotate(180deg);
}
.prod-filters > div span{
    color: #444444b8;
}
.prod-filters .search-filter{
    padding-block: 10px;
    position: relative;
    border-bottom: 1px solid #ccc;
    width: 100%;
}
.prod-filters .search-filter input{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    color: #4449;
    font-size: 14px;
    width: 100%;
}
.prod-filters .search-filter input::placeholder{
    color: #4449;
}
.prod-filters .search-filter svg{
    margin-right: -25px;
    position: absolute;
    top: 40%;
    color: #4449;
    width: 15px;
}
.prod-filters .choosables{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #548ba9 #ccc;
    padding: 0px 5px;
    margin-block: 10px;
}
.prod-filters .choosables::-webkit-scrollbar{
    width: 10px;
}
.prod-filters.choosables::-webkit-scrollbar-track{
    background: #ccc;
}
.prod-filters .choosables::-webkit-scrollbar-thumb{
    background-color: #548ba9;
    border-radius: 20px;
    border: 1px solid #ccc;
}
.prod-filters .choosables.not-show{
    display: none;
}
.prod-filters span{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prod-filters .choosables input{
    accent-color: #548ba9;
    cursor: pointer;
}
.prod-filters .choosables label{
    cursor: pointer;
    font-size: 0.79rem;
}
.prod-content .container{
    padding-block: 20px;
}
.prod-content .sort-links{
    padding-block: 0 20px;
}
.prod-content .sort-links > a{
    padding: 6px 14px;
    margin: auto 5px;
    border-radius: 10px;
    border: 1px solid #548ba9;
    font-size: 0.7rem;
    color: #548ba9;
}
.prod-content .sort-links > a.active,
.prod-content .sort-links > a:hover{
    border-color: #548ba9;
    background-color: #548ba9e6;
    color: #fff;
}
.prod-row{
    padding-block: 2px 0;
}
.prod-row > div{
    margin-bottom: 20px;
    padding: 0 10px;
    position: relative;
}
.prod-row .not-found{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 25px;
    min-height: 410px;
}
.allShine{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 25px;
    min-width: 160px;
    min-height: 190px;
    cursor: pointer;
    position: relative;
}
.allShine.mobile-mode{
    display: none;
}
:is(.prod-row, .top-seller, .newest-clothes) img{
    width: 155px;
    height: 140px;
    border-radius: 20px;
}
.desktop-mode img{
    width: 240px;
    min-width: 240px;
    height: 230px;
    min-height: 230px;
}
.not-found{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.not-found img{
    width: 180px;
    height: 140px;
    margin-top: 60px;
}
.cart-box .not-found img{
    width: 100%;
    height: 220px;
    object-fit: contain;
    margin-block: 40px;
}
.prod-row span{
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.prod-row span.title{
    margin: auto;
    overflow: hidden;
    max-width: 125px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    position: absolute;
    right: 20px;
    top: -50px;
    z-index: 2;
    color: #fff;
    font-weight: bold;
}
.prod-row .desktop-mode:hover span.title{
    top: 20px;
}
:is(.prod-row, .top-seller , .newest-clothes) span.like{
    position: absolute;
    bottom: -100%;
    padding: 10px;
    border-radius: 50%;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
}
span.like{
    bottom: -30%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.desktop-mode:hover span.like{
    bottom: 0;
}

.add-to-fav ,
.login-link button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border-style: initial;
    border: 1px solid #a31521;
    color: #a31521;
    cursor: pointer;
    transition: all 0.5s ease;
    background: #fff;
}
:is(.add-to-fav, .login-link button):focus {
    outline: none;
}
:is(.add-to-fav, .login-link button):hover {
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
}
:is(.add-to-fav, .login-link button).liked {
    border-color: #a31521;
    -webkit-animation: shadow-grow 2s;
    animation: shadow-grow 2s;
}
:is(.add-to-fav, .login-link button) svg {
    width: 20px;
    height: auto;
    fill: #d9d9d9;
}
:is(.add-to-fav, .login-link button).liked svg {
    -webkit-animation: heart-grow 0.7s;
    animation: heart-grow 0.7s;
    fill: #a31521;
}
:is(.add-to-fav, .login-link button).liked .heart {
    fill: #a31521;
}

:is(.add-to-fav, .login-link button) svg .heart {
    fill: rgba(0, 0, 0, 0.15);
}
:is(.add-to-fav, .login-link button) svg .shine {
    fill: #ffffff;
}
.login-link{
    display: flex;
    justify-content: center;
    align-items: center;
}
@-webkit-keyframes shadow-grow {
    0% {
        box-shadow: 0 0;
    }
    50% {
        box-shadow: 0 0 5px 20px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes shadow-grow {
    0% {
        box-shadow: 0 0;
    }
    50% {
        box-shadow: 0 0 5px 20px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
@-webkit-keyframes heart-grow {
    0% {
        transform: scale(3);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}
@keyframes heart-grow {
    0% {
        transform: scale(3);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}


.left-sidebar{
    position: fixed;
    left: -100%;
    top: 0;
    height: 100%;
    width: 22%;
    max-width: 22%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    z-index: 1000;
    padding-block: 3% 5%;
    background-color: #fff;
}
.left-sidebar.show{
    left: 0;
}
.left-sidebar .close{
    position: absolute;
    right: 4%;
    top: 2%;
    color: var(--btn-back-color) !important;
    opacity: 1;
}
.left-sidebar .close svg{
    width: 16px;
    height: 16px;
}
.left-sidebar > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    margin: auto;
}
.left-sidebar img{
    width: 380px;
    max-width: 380px;
    height: 250px;
    max-height: 250px;
    border-radius: 10px;
    box-shadow: 1px 1px 5px #ccc;
    margin-bottom: 35px;
    cursor: zoom-in;
}
.left-sidebar .show-product{
    padding: 10px 25px;
    background-color: #fff;
    color: var(--btn-back-color) !important;
    border: 1px solid var(--btn-back-color);
    border-radius: 10px;
}
.left-sidebar .zoom-wrapper{
    right: -140%;
    min-width: 500px;
    max-width: 500px;
    min-height: 400px;
    border-radius: 10px;
}

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

.mobile-buttons{
    display: none;
}
.moreDetail{
    font-size: 0.7rem;
    border: 1px solid;
    padding: 6px;
    border-radius: 9px;
    color: #a31521;
}
.productListPage nav span,
.productListPage nav a{
    height: max-content;
}
.productListPage nav svg{
    width: 20px;
}
.productListPage nav > nav{
    padding-bottom: 10px;
}
.productListPage nav > div{
    height: max-content;
}

ul.pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 30px 50px;
}
ul.pagination > li{
    margin: auto 10px;
    box-shadow: var(--box-shadow);
    border-radius: 8px !important;
    width: 40px;
    max-width: 40px;
    height: 40px;
    max-height: 40px;
}

ul.pagination > li .page-link{
    border-radius: 8px !important;
    width: 40px;
    max-width: 40px;
    height: 40px;
    max-height: 40px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.page-item.active .page-link,
.page-item:hover .page-link{
    background-color: #548ca8;
    border-color: #548ca8;
    color: #fff !important;
    cursor: pointer;
}

/* CONTACT PAGE */
.title-sec{
    text-align: right;
    padding-block: 30px;
}
.title-sec p{
    color: #4449;
    font-size: 14px;
}
.links .container{
    background-color: var(--btn-back-color);
    padding-block: 30px;
}
.links a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 190px;
    height: 170px;
    margin: auto;
    padding-block: 10px;
    border: 2px solid #fff;
    border-radius: 10px;
    position: relative;
}
.links svg{
    position: absolute;
    top: 40px;
}
.links span{
    color: #fff;
    position: absolute;
    bottom: 20px;
    font-weight: 600;
}
.address-sec{
    padding-block: 30px;
}
.address-sec .container{
    padding-bottom: 30px;
    padding-inline: 0;
}
.address-sec .container .row{
    align-items: center;
    margin-bottom: 10px;
}
.address-sec svg{
    margin-left: 10px;
    width: 30px;
    color: #4449 !important;
}
.address-sec span{
    color: #4449;
}
.connect-form .row{
    margin-block: 30px 60px;
}
.connect-form h6,
.connect-form label,
.connect-form span{
    color: #4449;
}
.connect-form h6{
    margin-bottom: 20px;
}
.vertical-flex{
    display: flex;
    flex-direction: column;
}
.connect-form .vertical-flex input{
    height: 45px;
    /*margin-bottom: 20px;*/
    max-width: 300px;
}
.connect-form .vertical-flex input,
.connect-form .vertical-flex textarea{
    border-radius: 7px;
    border: 1px solid #ccc;
    padding: 0 10px;
    font-size: 13px;
}
.connect-form .vertical-flex textarea{
    max-width: 400px;
}
.error-contact{
    color: #e58282;
    font-size: 12px;
    display: none;
}
.connect-form .vertical-flex{
    margin-bottom: 1rem;
}

.connect-form .save-name{
    padding-block: 10px;
}
.connect-form input[type="checkbox"]{
    border-radius: 10px;
    accent-color: var(--btn-back-color);
    cursor: pointer;
}
.connect-form .save-name label{
    font-size: 14px;
}
.connect-form .contact-form-submit{
    padding: 8px 40px;
    border-radius: 5px;
    border: 1px solid var(--btn-back-color);
    color: var(--btn-back-color);
    width: 58%;
    text-align: center;
}
.connect-form .contact-form-submit:hover{
    color: #fff;
    background-color: var(--btn-back-color);
}
.connect-form .img-box{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.connect-form .img-box img{
    width: 520px;
}

/* ABOUT */
.about-nilshan{
    margin-block: 120px;
}
.about-nilshan .container{
    background: #ebced0;
}
.about-nilshan .row{
    position: relative;
    padding-block: 30px;
    overflow-x: unset !important;
}
.about-nilshan .row > div:first-child{
    right: 0;
    bottom: -120px;
}
.about-nilshan .row > div:last-child{
    left: 0;
    top: -90px;
}
.about-nilshan .title{
    font-size: 18px;
}
.about-nilshan p{
    text-align: justify;
    font-size: 14px;
    color: #4449;
    max-height: 200px;
    overflow: hidden;
    line-height: 2;
}
.about-nilshan img{
    max-width: 100%;
    width: 400px;
    border: 1px solid #444;
    border-radius: 10px;
    height: 170px;
    object-fit: unset;
}

.features{
    padding-block: 50px;
}
.features .row{
    justify-content: space-evenly;
    align-items: center;
}
.features .row > div{
    width: 160px;
    height: 150px;
    border-radius: 10px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-link {
    color: #548ca8 !important;
}
button:disabled{
    border-color: #6c757d54 !important;
}
button:disabled  svg {
    color: #6c757d;
}

/* CART PAGE */
.cart-page{
    text-align: right;
    padding-block: 30px 150px;
    position: relative;
}
.cart-page .title-col{
    display: flex;
    align-items: center;
}
.cart-page .count{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--btn-back-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
    margin-right: 10px;
    font-size: 14px;
}
.cart-page .prod-items{
    border: 1px solid #C79EA3;
    border-radius: 20px;
}
.cart-page .prod-items > .row{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 10px;
}
.cart-page .prod-items > .row:not(:last-child){
    border-bottom: 1px solid #C79EA3;
}
.cart-page .prod-items > .row > *{
    min-width: 120px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    display: block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.cart-page .prod-item img{
    height: 110px;
    border-radius: 10px;
    margin-left: 10px;
}
.cart-page .prod-item .remove svg{
    cursor: pointer;
}
.cart-page .item.remove{
    color: var(--btn-back-color);
}
.cart-page .meters-edit-input{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.cart-page .meters-edit-input svg{
    cursor: pointer;
}
.cart-page .meters-edit-input svg.fa-edit path{
    color: var(--btn-back-color);
}
.cart-page .meters-edit-input svg.fa-check path{
    color: #72D941;
}
.cart-page .meters-edit-input input{
    width: 55px;
    height: 35px;
    box-shadow: none !important;
    border: 1px solid #ced4da !important;
    text-align: center;
}
.cart-page .prod-items .total-price{
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: #437f9c;*/
    color: #437f9c;
    padding: 5px;
    border-radius: 5px;
}
/* .cart-page .item{
    background-color: #fff;
    margin: 0 auto 20px auto;
    border: 1px solid #cccccc91;
    border-radius: 10px;
    padding: 25px 5px;
    text-align: right;
}
.cart-page .img-box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-page .item img{
    width: 90px;

    height: 90px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}
.cart-page .item-spec{
    padding-block: 15px 5px;
}
.cart-page .item-spec > div{
    width: 100%;
}
.cart-page .item-spec,
.cart-page .item-spec .prod-details{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.cart-page .item-spec .prod-details > *{
    color: #545454;
    font-size: 13px;
    margin-bottom: 0.7rem;
}
.cart-page .title-box{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.cart-page .item-spec .del-item{
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
}
.cart-page  .del-item .del{
    color: #bb6057;
    cursor: pointer;
} */
.cart-page .basket-box{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.cart-page .basket-box > div{
    border: 1px solid #C79EA3;
    border-radius: 20px;
    padding: 10px 5px;
    position: relative;
    width: 350px;
    height: 275px;
    margin: 20px 0 0 130px;
}
.cart-page .basket-box .total-sum,
.cart-page .basket-box .sale-sum{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 90%;
    margin: auto;
    padding: 20px 0;
}
.cart-page .total-sum span{
    color: #949494;
}
.cart-page .offer-sum .price{
    color: var(--btn-back-color);
}
.cart-page .basket-box span{
    font-size: 0.9rem ;
}
.cart-page .final-price{
    font-size: 1.5rem !important;
    font-weight: bold;
}
.cart-page .sale-sum{
    border-top: 1px solid #cccccc8f;
}
:is(.cart-page , .check-page) .basket-box a,
:is(.cart-page , .check-page) .basket-box button{
    position: absolute;
    right: 0;
    bottom: 20px;
    background-color: var(--btn-back-color);
    padding: 15px;
    width: 94%;
    margin: auto 3%;
    color: #fff;
    text-align: center;
    border-radius: 10px;
}
:is(.cart-page , .check-page) .mobile-sum{
    display: none;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--box-shadow);
    padding-block: 10px;
    margin-top: 20px;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    z-index: 20;
    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
}
:is(.cart-page , .check-page) .mobile-sum.not-fixed{
    position: relative;
}
:is(.cart-page , .check-page) .mobile-sum .price-col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
:is(.cart-page , .check-page) .mobile-sum .price-col span:first-child{
    color: #ccc;
    font-size: 12px;
}
.cart-page .finalPriceChange{
    color: #444 !important;
    font-size: 15px !important;
}
.not-found .row{
    padding-block: 75px 150px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.not-found .backToProduct{
    border: 1px solid #327CA3;
    padding: 10px 20px;
    color: #327CA3;
    margin-top: 30px;
    border-radius: 10px;
}
.not-found .backToProduct:hover{
    background-color: #327CA3;
    color: #fff;
}

/* CHECKOUT PAGE */
.check-page .row.item{
    background-color: #fff;
    margin: 0 auto 20px auto;
    border: 1px solid #C79EA3;
    border-radius: 10px;
    padding: 5px;
    text-align: right;
}
.check-page-items-row{
    margin-top: 20px;
}
.check-page-items-col{
    /* margin-top: 20px; */
}
.check-page .img-box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.check-page .item img{
    width: 90px;
    height: 90px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}
.check-page .item-spec{
    padding-block: 15px 5px;
}
.check-page .item-spec > div{
    width: 100%;
}
.check-page .item-spec,
.check-page .item-spec .prod-details{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.check-page .item-spec .prod-details > *{
    color: #545454;
    font-size: 13px;
    margin-bottom: 0.7rem;
}
.check-page .title-box{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.check-page .item-spec .del-item{
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    margin-bottom: 20px;
}
.check-page  .del-item .del{
    color: #bb6057;
    cursor: pointer;
}
.check-page .content{
    background-color: #fff;
    border-radius: 10px;
    padding-block: 30px;
    box-shadow: 1px 1px 5px #ccc;
    margin-bottom: 50px;
}
.check-page .item-spec{
    padding-block: 0;
    position: relative;
}
.check-page .item-spec > div{
    margin: 20px auto 0;
}
.check-page .item-spec .prod-details > *{
    font-size: 16px;
}
.check-page .item-spec .prod-details svg{
    margin-left: 10px;
    width: 25px;
    height: 25px;
}
.check-page .sale-sum{
    border: 0;
}
.check-page .mobile-off-form{
    display: none;
}
.check-page .basket-box{
    height: max-content;
    max-height: 100%;
    border: 1px solid #C79EA3;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.check-page .basket-box > div{
    border-bottom: 1px solid #e5e1e1;
    padding: 10px 0;
    line-height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.check-page .offer-sum,
.check-page .sale-sum,
.check-page .bank-choose{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}
.check-page .basket-box > div:not(.total-sum , .pay-price) > *,
.check-page .basket-box .total-sum{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.check-page .basket-box .total-sum{
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.check-page .off-code,
.check-page .bank-choose > div{
    justify-content: flex-start !important;
}
.check-page .off-code,
.check-page form{
    margin: 5px 0;
    /*display: none !important;*/
}
:is(.check-page .off-code, .check-page form).collapsed{
    display: flex !important;
}
.check-page .bank-choose{
    border: 0 !important;
}
.check-page label{
    margin-bottom: 0;
    cursor: pointer;
    font-size: 14px;
}
.check-page input[type="checkbox"]{
    margin-right: 5px;
    width: 17px;
    height: 17px;
    cursor: pointer;
}
.check-page input[type="checkbox"],
.check-page input[type="radio"]{
    accent-color: #327ca3;
}
.check-page .bank-name{
    margin: 0 10px;
    cursor: pointer;
}

.check-page form input[type="text"]{
    max-width: 200px;
    max-height: 35px;
    border: 1px solid #4449;
    border-radius: 10px;
    padding: 0 15px;
}
.check-page form input[type="text"]:focus-visible{
    outline: 1px solid #327CA3;
    border: 0 !important;
}
.check-page form button{
    color: #327CA3;
    /* border: 1px solid #327CA3; */
    border-radius: 10px !important;
    padding: 10px 15px !important;
    font-size: 12px;
    margin: 10px 4% !important;
    /* width: max-content !important; */
    position: relative !important;
    bottom: 0 !important;
}
.check-page form button:hover{
    background-color: #327CA3;
    color: #fff;
}
.check-page .open-btn{
    cursor: pointer;
}
.check-page .open-btn svg{
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.check-page .open-btn svg.rotate{
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.check-page .order-slider a{
    position: relative;
    min-height: 100%;
    max-height: 200px;
    color: #444;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.order-slider-img-box{
    position: relative;
    overflow: hidden;
}
.order-slider-vipText{
    position: absolute;
    transform: rotate(-50deg);
    left: -25px;
    top: 5px;
    width: 100%;
    text-align: center;
    background-color: #0072b3;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 5px;
}
.check-page .order-slider img{
    top: 0;
    box-shadow: 1px 5px 10px #ccc;
}
.check-page .order-slider span{
    margin-top: 6px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* .check-page .order-slider .owl-nav{
    top: 25% !important;
}
.check-page .order-slider .owl-nav > button{
    border: 0 !important;
    background-color: transparent !important;
}
.check-page .order-slider .owl-prev{
    right: -3% !important;
}
.check-page .order-slider .owl-next{
    left: -3% !important;
} */
.check-page #address-item form{
    display: block !important;
}
.check-page #address-item .row > div{
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}
.check-page #address-item .row > div:last-child{
    align-items: center;
    justify-content: flex-end;
}
.check-page #address-item input,
.check-page #address-item textarea,
.check-page #address-item select{
    max-width: 100%;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ccc;
    min-height: 35px;
    margin-top: 5px;
    padding: 10px;
}
.check-page #address-item select{
    padding: 2px 5px;
}
.check-page #address-item button{
    padding: 0 15px;
    border: 1px solid #327CA3;
    color: #327CA3;
    min-height: 35px;
    font-size: 14px;
}
.check-page #address-item button:hover{
    color: #fff;
    background-color: #327CA3;
}
.check-page .user-account{
    overflow: hidden;
}
.check-page .user-account .login-link{
    color: #327CA3;
    margin-right: 10px;
    padding: 5px;
    border-bottom: 1px solid transparent;
}
.check-page form > .input-row h6{
    width: 100%;
}
.check-page .pay-details{
    margin-bottom: 20px;
}
.check-page input[type="radio"],
.check-page input[type="radio"]:focus,
.check-page input[type="radio"]:focus-visible{
    outline: 0;
    box-shadow: unset !important;
    margin-left: 10px;
}
.check-page .post-type{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: rgb(241, 241, 241);
    max-width: 95%;
    margin-right: 15px;
    padding-block: 15px;
    border-radius: 5px;
}
.check-page .post-type > *{
    color: rgb(136, 136, 136);
}
.check-page .post-type label{
    margin-bottom: 0 !important;
    margin-left: 30px;
}
.check-page .post-logo{
    width: 40px;
    height: 40px;
    position: absolute;
    left: 20px;
}
.under-const{
    background-image: url(../img/under.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding-top: 60px;
}
.under-const .logo-box{
    position: absolute;
    right: 40px;
    top: 40px;
}
.under-const .logo-box img{
    width: 100px;
    height: 100px;
}


/* ------------------
      blog page
--------------------*/
.blog-page.blog-item{
    background-image: url("../img/bg-vectors/bargg.svg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 300px;
    background-blend-mode: color-burn;
}
.blog-item .row{
    padding-block: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.blog-item .row > *{
    margin-block: 15px;
}
.blog-item .title h4{
    border-bottom: 1px solid #a31521;
    padding-bottom: 10px;
}
.blog-item img{
    width: 1000px;
    max-width: 1000px;
    border-radius: 10px;
    max-height: 400px;
    box-shadow: 1px 1px 5px #ccc;
}
.blog-item .text{
    max-width: 1000px;
    line-height: 36px;
    text-align: justify;
    font-size: 15px;
}
.blog-item .text *{
    font-size: 14px !important;
    line-height: 25px;
}
.other-posts{
    padding-bottom: 100px;
}
.other-posts .title{
    padding-block: 20px;
    font-size: 1.2rem;
}
.other-posts .item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.other-posts .item > *{
    margin-block: 10px;
}
.other-posts img{
    width: 350px;
    height: 200px;
    border-radius: 10px;
}
.other-posts .text-box{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.other-posts .text-box > *{
    margin-block: 5px;
}
.other-posts .text-box .text{
    color: #5e5e5ee6;
    line-height: 21px;
    overflow: hidden;
    max-height: 88px;
    text-align: justify;
    font-size: 0.8rem;
}
.other-posts a{
    padding: 5px 15px;
    align-self: flex-end;
    border: 1px solid #548ca8;
    border-radius: 10px;
    color: #548ca8;
    font-size: 11px;
}
button:focus {
    outline: none;
}
.point-title-star{
    margin-bottom: 5px;
    padding-bottom: -5px;
    display: block;
    color: #526070;
    font-size: 13px;
    font-weight: lighter;
    text-align: right;
}
.toast-message {
    font-size: 13px;
}
.count-cart-table{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.5rem;
    padding: 5px;
    background: #fff;
    border-radius: 50%;
    font-size: 14px;
    color: #a31521;
    width: 25px;
    height: 25px;
}
.text-table-total{
    font-size: 0.8rem !important;
    color: #727171;
    font-weight: lighter;

}
.unit{
    font-size: 11px !important;
    margin-right: 5px;
}
.title-checkout-address-box{
    font-size: 16px;
    margin-bottom: 1.2rem;
    margin-right: 1rem;
}

.item-small-checkout{
    display: inline-block !important;
    width: 13px !important;
    height: 18px !important;
    box-shadow:none !important;
    border-radius: 0 !important;

}

/*login page*/
.First .container > .row{
    overflow: hidden;
    padding-block: 100px;
    justify-content: center;
    align-items: center;
}
.EntranceBox {
    text-align: center;
    position: relative;
    padding: 30px;
    border-radius: 10px;
    width: 433px;
    max-width: 450px;
    min-height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* box-shadow: 1px 1px 5px #ccc; */
    padding-bottom: 30px;
    /* box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px; */
    border: 1px solid #dfdfdf;
}
.First .reg-box {
    margin-top: 20px;
}
.First .change_number,
.First .forget_pass{
    cursor: pointer;
    color: #5c5c5b;
    font-size: 0.75rem;
    min-width: 25%;
}
.wrongPassIn{
    width: 100%;
    margin: 0;
    margin-top: 1rem;
}
.First input{
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px 14px;
    width: 100%;
    font-size: 13px;
}
.EntranceBox input[type="text"]{
    direction: ltr;
    text-align: center;
}
.EntranceBox input[name="phone"].dir-left{
    padding: 11px;
}
.EntranceBox .buttons,
.EntranceBox .reg-buttons{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 25px;
}
.EntranceBox .reg-buttons .CallUs{
    margin-top: 0;
}
.dotShapes {
    width: 15px;
    position: absolute;
    right: 25px;
    top: 25px;
}
.EntranceBox h4 {
    color: #706f6f;
    font-weight: 100;
    font-size: 17px;
    margin: 14px 0;
}
.EntranceBox label{
    color: #706f6f;
    font-size: 12px;
    margin-top: 0.5rem;
}
.sticky + .First {
    padding-top: 151px;
}
#codeNum {
    direction: ltr;
    width: 80%;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #fff;
    text-align: center;
}
.First .CallUs {
    border: none !important;
    background-color: var(--btn-back-color) !important;
    background-image: none;
    color: #fff !important;
    padding: 10px 0;
    min-width: 120px;
    margin-top: 25px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;

}
.loginCode {
    display: none;
}
.First .row.loginPass, .First .row.loginCode, .First .row.resetPass, .First .registerCode {
    justify-content: center;
    align-items: center;
}
.loginCode form {
    display: flex;
    justify-content: center;
}

.afterEntry {
    position: relative;
    display: none;
    max-width: 100%;
    width: auto;
    min-width: 500px;
}
.afterEntry .enterMessage{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 4px;
}
.warranty span{
    font-size: 0.8rem;
    color: #7e7e7e;
}
.priceToman{

    font-size: 0.7rem;
}
.finalPriceCartSize{
    font-size: 1rem;

}
.textCartSize{
    font-size: 0.8rem;

}

/*  Profile-section */
/* PROFILE PAGE */
.profile-section {
    padding-block: 30px 88px;
}
.profile-section .container > .row {
    margin: 50px auto;
    overflow: hidden;
}
.profile-section .container .mainList {
    display: flex;
    padding: 0;
    height: 100%;
    margin-top: 50px;
}
.profile-section .container > .row > div > div ,
.profile-section .container .favourites {
    background-color: #fff;
    margin: auto;
    text-align: right;
    padding: 0;
    font-size: 14px;
    width: 100%;
    border: 1px solid #dbdbdb;
    border-radius: 7px;
}
.profile-section .container .favourites {
    border: 0;
}
.profile-section .order-title{
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    margin-top: 22px !important;
}
.profile-section .container > .row > .order > div {
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: 1px 1px 5px #ccc9;
}
.profile-section .container > .row > .prof-details {
    height: 100%;
    text-align: right;
}
.profile-section .container > .row > .prof-details > h6 {
    margin-right: 20px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gray-link-color);
    padding-block: 10px;
}
.profile-section .container > .row > .prof-details .row > div {
    padding: 10px 30px;
    color: var(--gray-link-color);
    font-weight: 600;
    display: flex;
    flex-direction: column;
}
.profile-section .container > .row > .prof-details > div{
    padding: 3rem 0.5rem;
    padding-bottom: 6rem;
}
.profile-section .container > .row > .prof-details a {
    text-align: center;
    width: max-content;
    display: block;
    color: var(--link-color);
}
.profile-section .form-text{
    margin-bottom: 10px;
    font-size: 13px;
}
.profile-section .form-control{
    border: 1px solid #cdcdcd;
    border-radius: 10px;
    padding: 1rem;
    font-size: 0.9rem;
}
.profile-section .edit-div{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 5px;
}
.profile-section .edit-btn{
    background-color: var(--btn-back-color);
    color: #fff;
    padding: 10px 15px;
    border-radius: 10px;
}
.profile-section .edit-btn:focus,
.profile-section .edit-btn:focus-visible{
    outline: 0 !important;
    box-shadow: none !important;
}
.profile-section .user-details > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px;
}
.profile-section .user-details > div:first-child svg {
    color: #ccc;
}
.profile-section .user-details > div:first-child > div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 15px;
}
.profile-section .user-details > div:nth-child(2) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.profile-section .user-details .club {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.profile-section .container > .row .list > div {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    border-top: 1px solid #ccc9;
}
.profile-section .container > .row .list a > svg:last-child {
    display: none;
}
.profile-section .container > .row .list > div span {
    font-size: 12px;
    margin-right: 10px;
}
.profile-section .container > .row .list > div > div{
    padding-right: 15px;
}

.profile-section .container > .row .list a:hover,
.profile-section .container > .row .list a.active {
    color: var(--link-color) !important;
}
.profile-section .container > .row .list .exit {
    width: 100%;
    padding-block: 10px;
    padding-right: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}
.profile-section .orderDetail,
.profile-section .prof-details,
.profile-section .myOrders{
    padding-left: 0 !important;
}
.profile-section .orderDetail{
    text-align: right;
}
.profile-section .history {
    padding: 1px 10px 0 0 !important;
    border-bottom: 1px solid #ccc9;
    margin-top: 10px;
}
.profile-section .fav-history{
    border: 0 !important;
    padding: 1px 10px 0 0 !important;
    border-radius: 0 !important;
}
.profile-section .order-title{
    display: flex;
    align-items: center;
}
.profile-section .back-link{
    display: none !important;
    margin: auto 10px !important;
    color: #b5b6b3  !important;
    padding-bottom: 5px;
}
.profile-section > h6 {
    position: relative;
    padding-bottom: 5px;
}
.profile-section h6::after {
    content: "";
    width: 70px;
    height: 2px;
    background-color: var(--border-color);
    position: absolute;
    top: 100%;
    right: 0;
}
.profile-section .history > div ,
.profile-section .order-title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--gray-link-color);
    /* padding-top: 1rem; */
}
.profile-section .history > div > div {
    cursor: pointer;
}
.profile-section .history > div > div {
    margin: 0 0 10px 17px;
    padding: 0 1px;
    font-size: 12px;
}
.order-btn span{
    padding-left: 0.4rem;
}
.profile-section .history .order-btn{

}
.profile-section .history .order-btn.active {
    color: var(--link-color);
    position: relative;
}
.profile-section .history .order-btn.active::after {
    content: "";
    position: absolute;
    background-color: var(--btn-back-color);
    width: 100%;
    height: 5px;
    top: 120%;
    right: 0;
    border-radius: 10px 10px 0 0;
}
.profile-section .history span.num {
    background-color: #c2c2c2;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 26px;
}
.profile-section .history > div div.active span{
    color: var(--btn-back-color);
}
.profile-section .history > div div.active span.num {
    background-color: var(--btn-back-color);
    color: #fff;
}
.profile-section .orders ,
.profile-section .favourites{
    margin: 0 20px;
    padding-block: 20px;
}
:is(.profile-section .orders , .profile-section .favourites) > div{
    display: none;
}
:is(.profile-section .orders , .profile-section .favourites) > div.active{
    display: block !important;
}
:is(.profile-section .orders , .profile-section .favourites) .item{
    /* border: 1px solid #d5d5d5; */
    border-radius: 5px;
    padding-block: 10px;
    margin-bottom: 0;
    position: relative;
}
:is(.profile-section .orders , .profile-section .favourites) .item::after{
    content: '';
    position: absolute;
    top: 104%;
    right: 0;
    width: 100%;
    height: 1px;
    /*background-color: #C79EA3;*/
}
:is(.profile-section .orders , .profile-section .favourites) .item .title{
    margin-right: 0;
    margin-bottom: 0;
    font-size: 1rem;
    color: #5e5e5e;
}
:is(.profile-section .orders , .profile-section .favourites) .item .title svg{
    width: 30px;
}
.profile-section .orders .pay-btn{
    border: 1px solid var(--btn-back-color);
    background-color: var(--btn-back-color);
    color: #fff;
    border-radius: 10px;
    font-size: 12px
}
:is(.profile-section .orders , .profile-section .favourites) > div > span{
    width: 200px;
    margin: auto 5%;
}
:is(.profile-section .orders , .profile-section .favourites) .details > div {
    display: flex;
    align-items: center;
    /* padding-right: 20px; */
}
:is(.profile-section .orders , .profile-section .favourites) .details > div > * {
    margin: auto 10px;
}
:is(.profile-section .orders .details > div , .profile-section .orders .factor-show) > a {
    position: absolute;
    left: 0;
    top: -20px;
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    color: #767676;
}
:is(.profile-section .orders .processing , .profile-section .orders .sending) .details > div > a{
    top: -25px;
}
:is(.profile-section .orders , .profile-section .favourites) .factor-show .row{
    align-items: center;
}
:is(.profile-section .orders , .profile-section .favourites) .factor-show > a{
    left: 68px !important;
}
:is(.profile-section .orders , .profile-section .favourites) .details .sum-price {
    margin: 20px 0;
}
:is(.profile-section .orders , .profile-section .favourites) .objects {
    padding: 10px;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #b3b1b1;
}
:is(.profile-section .orders , .profile-section .favourites) .objects > div {
    display: flex;
    padding: 10px 0;
    overflow: auto;
}
:is(.profile-section .orders , .profile-section .favourites) .objects > div > div {
    margin: auto 10px;
}
:is(.profile-section .orders , .profile-section .favourites) .objects img {
    width: 50px;
    height: 50px;
}
.profile-section .orders span.caption{
    color: #818181;
    font-size: 12px;
}
.profile-section .favourites{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-section .favourite-items{
    padding-top: 1.5rem !important;
}
.profile-section .favourite-items img{
    width: 235px;
    /*max-width: 190px;*/
    height: 235px;
    /*max-height: 145px;*/
    border-radius: 10px;
    object-fit: unset;
}
.profile-section .fav-item{
    padding: 3px !important;
    margin-bottom: 15px;
}
.profile-section .fav-item > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0 !important;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    width: 98%;
    margin: auto;
    height: 350px;
    position: relative;
}
.profile-section .titles{
    display: flex;
    padding: 20px 15px 15px 15px;
}
.profile-section .fav-item .details{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    width: 100%;
    position: absolute;
    bottom: 12px;
}
.profile-section .fav-item .view-more{
    border: 1px solid var(--btn-back-color);
    padding: 10px;
    min-width: 150px;
    text-align: center;
    border-radius: 7px;
    color: var(--btn-back-color) !important;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 100;
}
.profile-section .fav-item .remove{
    padding: 10px;
    border: 1px solid #cdcdcd;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #5a5a5a;
    font-size: 12px;
}

.profile-section .fav-item svg path{
  fill: #8f8e8e!important;
}
.profile-section .titles h6 {
    font-weight: bold;
}
.profile-section .titles h6 a {
    color: #444;
}
.profile-section .titles span:last-child {
    position: absolute;
    left: 5%;
    cursor: pointer;
}

.profile-section .reciever, .profile-section .prices {
    padding-block: 20px;
    border: 1px solid #d5d5d5;
    border-right: 0;
    border-left: 0;
    max-width: 95%;
    margin: auto;
}
:is(.profile-section .reciever , .profile-section .prices , .profile-section .order-objects .dates) span:first-child {
    color: var(--gray-link-color);
}
.profile-section .reciever > div {
    display: flex;
    align-items: center;
}
.profile-section .reciever > div > div {
    margin: auto 10px;
}
.profile-section .prices {
    border: 0;
    display: flex;
    align-items: center;
}
.profile-section .prices > div {
    margin: auto 10px;
}
.profile-section .order-details {
    border-bottom: 1px solid #ccc;
}
:is(.profile-section .order-details , .profile-section .order-objects) a {
    color: #444 !important;
}
.profile-section .order-objects {
    max-width: 95%;
    margin: 25px auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px 0;
}
.profile-section .order-objects .dates {
    padding-block: 0 10px;
    border-bottom: 1px solid #ccc;
}
.profile-section .order-objects img {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    height: 80px;
    max-height: 80px;
}
.profile-section .order-objects svg {
    max-width: 20px;
}
.profile-section .order-objects .dates > div {
    display: flex;
    align-items: center;
    margin: 10px auto;
}
.profile-section .order-objects .dates > div > * {
    margin: auto 10px;
}
.profile-section .order-objects .item {
    padding: 15px 10px;
    display: flex;
    align-items: flex-start;
}
.profile-section .order-objects .item:not(:nth-child(1)) {
    border-top: 1px solid #C79EA3;
}
.profile-section .order-detail-vipText{
    background-color: #0072b3;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 5px;
}
.profile-section .order-objects .item > div {
    margin: 0 10px;
}
.profile-section .order-objects .item > div:nth-child(2) {
    width: 100%;
    position: relative;
}
.profile-section .order-objects .item > div:nth-child(2) > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}
.profile-section .order-objects .item > div:nth-child(2) > div:last-child {
    position: absolute;
    left: 5%;
    bottom: 0;
}
.profile-section .user-details > .buttons {
    display: none;
}
.profile-section .user-details > .buttons > a{
    border: 1px solid var(--link-color);
    color: var(--link-color) !important;
    padding: 5px;
    border-radius: 10px;
    margin: 20px 5px;
}
.profile-section .order-mobile-details > div {
    text-align: center;
    padding-block: 20px;
    display: flex;
    flex-direction: column;
    font-size: 16px;
}
.profile-section .order-mobile-details > div:not(:nth-child(2n),:last-child) {
    border-left: 1px solid #ccc9;
}
.profile-section .order-mobile-details > div:not(:last-child) {
    border-bottom: 1px solid #ccc9;
}

.profile-section .order-mobile-details > div > span {
    margin: 5px auto;
}
.profile-section .order-mobile-details > div > span:first-child {
    color: #a6a6a6;
}

.profile-section .user-details > div{
    margin: auto 15px;
    padding-top: 0px;
}
.profile-section .user-details .user-img{
    padding-block: 34px;
    border-bottom: 1px solid var(--btn-back-color);
}
.profile-section .container > .row .list > div{
    border: none;
}
.profile-section .container > .row .list > div > div{
    width: 100%;
}

.profile-section .list .item:not(:last-child){
    border-bottom: 1px solid #d1d1d1;
}
.profile-section .container > .row .list a{
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 20px;
    color: #444;
    font-size: 15px;
}
:is(.profile-section .container > .row .list a.active , .profile-section .container > .row .list a:hover) span,
:is(.profile-section .container > .row .list a.active , .profile-section .container > .row .list a:hover) svg{
    color: var(--btn-back-color);
}
:is(.profile-section .container > .row .list a.active , .profile-section .container > .row .list a:hover)::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 100%;
    background-color: var(--btn-back-color);
    right: -15px;
    border-radius: 5px 0 0 5px;
}
.profile-section .container > .row .list a > svg:last-child{
    display: block;
    margin-left: 20px;
    position: absolute;
    left: 0;
}
.profile-section .container > .row .list .exit{
    display: none;
}
.comment-no-login{
    border: 0;
    width: 370px;
    padding: 9px 25px;
    border-radius: 10px;
    color: var(--btn-back-color) !important;
    cursor: pointer;
    border: 1px solid var(--btn-back-color);
    margin-right: 10px;
    text-align: center;
    display: inline-block;
    margin: 5px auto;
    margin-bottom: 0;
}
.no-cmt-text{
    margin-block: 20px;
}
.profile-section .cmt-row{
    padding-block: 1rem !important;
}
.profile-section .comment-item{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;

    padding: 2rem 1.5rem !important;
}
.profile-section .comment-item:not(:last-child){
    border-bottom: 1px solid #b9b9b9;
}
.profile-section .comment-item .status{
    border-radius: 10px;
    padding: 5px 10px;
    width: max-content;
    text-align: center;
    position: absolute;
    left: 20px;
    top: 32px;
    font-size: 10px;
    color: #fff;
}
.profile-section .user-info > span{
    margin-block: 5px;
}
.profile-section .comment-item .status.confirmed{
    background-color: #06721fbd;
}
.profile-section .comment-item .status.denied{
    background-color: var(--btn-back-color);
}
.profile-section .comment-item .status.waiting{
    background-color: #F18F01;
}
.profile-section .comment-item .img-box{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.profile-section .comment-item img{
    width: 70px;
    max-width: 70px;
    height: 70px;
    max-height: 70px;
    margin-left: 10px;
    border-radius: 15px;
}
.profile-section .comment-item .title{
    font-size: 1rem;
}
.profile-section .comment-item .date{
    color: #464646;
    font-size: 12px;
    /* border-bottom: 1px solid var(--btn-back-color);
    padding-bottom: 5px; */
    position: relative;
}
.profile-section .comment-item .date::after{
    content: '';
    position: absolute;
    width: 36vw;
    height: 1px;
    /*background-color: var(--btn-back-color);*/
    background: #dddfe1;
    top: 142%;
    right: 0;
}
.profile-section .comment-text{
    padding-block: 15px;
    font-size: 14px;
    text-align: justify;
    padding-right: 80px;
}


.font-gray{
    color: #706f6f;
}
input.error{
    outline: 1px solid #ef4056;
    border: 0;
}
.change_number:hover{
    color: #0c5460;
}

/* sweet-alert design */
.sweet-alert h2{
    font-size: 1rem !important;
    float: right;
    padding-bottom: 1rem;
    color: #606060;
}
.sa-confirm-button-container .confirm{
    font-size: 13px !important;
}
.sa-button-container .cancel {
    font-size: 13px !important;
    border: 1px solid #c3c3c3;
}
.sweet-alert .sa-icon{
    width: 65px!important;
    height: 64px!important;

}
.sweet-alert .sa-icon.sa-error .sa-line {
    height: 3px!important;
    width: 34px!important;
    top: 31px!important;
}
.sa-button-container{
    float: left;

}
/* sweet-alert end*/

.connect-form label {
    color: #444444d9 !important;
    font-size: 12px !important;
}

.alert-success {

    font-size: 12px;
}


.order-review-page{
    margin-top: 100px;
}
.order-review-page .orderDetail{
    height: 500px;
}
.order-review-page .orderDetail > .row{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    height: 100%;
}
.order-review-page .orderDetail img{
    margin-bottom: 50px;
    margin-top: 1rem;
}
.order-review-page .orderDetail p{
    margin-inline: 10px;
    text-align: justify;
}
.order-review-page .order-detail-show{
    padding: 14px 31px;
    margin: auto 5px;
    border-radius: 6px;
    border: 1px solid #548ba9;
    font-size: 0.75rem;
    color: #548ba9;
}
.order-review-page .order-detail-show:hover{
    border-color: #548ba9;
    background-color: #548ba9e6;
    color: #fff;
}
.order-review-tel{
    padding: 0.5rem;
    color: #a31521;
}
.order-review-tel:hover{
   text-decoration: underline;
}
.Icon--cart{
    width: 20px;
    height: 20px;
}
.Icon--account{
    width: 17px;
    height: 20px;
    color: #6c6b6b;
}
.header-user-name{
    font-size: 13px;
    color: #464646;
}