* {
    scroll-padding-top: 140px;
    scroll-behavior: smooth;
}

/* location popup */
.popupLocation {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100000000000000000;
    pointer-events: none;
    transition: all 0.5s;
    opacity: 0;
}

.popupLocation.open {
    opacity: 1;
    pointer-events: auto;
}

.popupLocation i.bgPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.popupLocation .contentPopupLocation {
    position: relative;
    padding: 20px 20px 20px;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.67, 0.51, 0, 1.25);
    opacity: 0;
    transform: scale(0);
    grid-gap: 10px;
    border-radius: 15px;
    max-width: 580px;
}

.popupLocation.open .contentPopupLocation {
    opacity: 1;
    transform: scale(1);
}

.popupLocation.open .contentPopupLocation img {
    width: 100%;
    max-width: 280px;
}

.popupLocation.open .contentPopupLocation .text {
    position: relative;
    width: 100%;
    max-width: 360px;
    text-align: center;
    padding: 0;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    text-align: justify;
    color: #464646;
}

.popupLocation h2.title strong {
    color: var(--color2);
}

.btnsLocatio {
    position: relative;
    display: flex;
    grid-gap: 20px;
    align-items: center;
    padding: 20px 0;
}

.btnsLocatio a.btnLoc {
    position: relative;
    width: 250px;
    padding: 0 20px;
    height: 40px;
    border: 1px solid #dc0000;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400 !important;
    background: none !important;
    color: #333;
}

.btnsLocatio a.btnLoc:hover {
    background: #dc0000 !important;
    color: #fff;
}

.btnsLocatio button.btnLoc {
    position: relative;
    width: 250px;
    padding: 0 20px;
    height: 40px;
    border: 1px solid #457aab;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 300 !important;
    background: none !important;
    color: #333;
}

.btnsLocatio button.btnLoc:hover {
    color: #fff;
    background: #457aab !important;
}

.popupLocation i.close {
    position: absolute;
    top: -20px;
    right: 14px;
    z-index: 100;
    color: #dc0000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    font-size: 18px;
    cursor: pointer;
    background: #fff;
    border-radius: 10px 10px 0px 0px;
}

.mainContentPopupLocatio {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-gap: 10px;
    min-width: 380px;
    display: none;
}

.mainContentPopupLocatio.open {
    display: flex !important;
}

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

.CountryLang,
.Region,
.CityLang,
.StateLang {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
}

.CountryList,
.CityList,
.RegionList .StateList,
.region,
.mantagh {
    position: relative;
    width: calc(100% + 10px);
    min-height: 400px;
    max-height: 500px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    grid-gap: 4px;
    direction: rtl;
    padding-left: 10px;
    margin-left: -13px;
}

input.SearchCountry,
input.SearchState,
input.SearchRegion,
input.SearchCity {
    position: relative;
    width: 100%;
    padding: 0 20px;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    height: 50px;
    background: transparent !important;
    color: #333;
    font-weight: 600 !important;
}

button.RegionItem,
button.CountryItem,
button.CityItem,
button.StateItem {
    position: relative;
    width: 100%;
    height: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none !important;
    font-size: 18px;
    font-weight: 400 !important;
    cursor: pointer;
    border-bottom: 1px solid #e9e9e9;
    transition: all 0.2s;
    border: none !important;
}

button.RegionItem:before,
button.CountryItem:before,
button.CityItem:before,
button.StateItem:before {
    position: absolute;
    left: 0;
    margin: auto;
    width: 100%;
    height: 0;
    content: '';
    bottom: 0;
    border-bottom: 1px dashed #c8c8c8;
}

button.CountryItem strong,
button.RegionItem strong,
button.CityItem strong,
button.StateItem strong {
    font-weight: 300 !important;
}

button.CountryItem:hover,
button.RegionItem:hover,
button.CityItem:hover,
button.StateItem:hover {
    background-color: #fff !important;
    border-bottom: 1px solid transparent;
    border-radius: 8px;
}

button.RegionItem span.arrow,
button.CountryItem span.arrow,
button.CityItem span.arrow,
button.StateItem span.arrow {
    position: relative;
    width: 7px;
    height: 16px;
    display: block;
    background: url(../img/arrLeft.png) no-repeat center / auto 100%;
    cursor: pointer;
    filter: grayscale(1) brightness(2.5);
    transition: all 0.2s;
}

button.CountryItem:hover span.arrow,
button.CountryItem.active span.arrow,
button.RegionItem:hover span.arrow,
button.RegionItem.active span.arrow,
button.CityItem:hover span.arrow,
button.CityItem.active span.arrow,
button.StateItem:hover span.arrow,
button.StateItem.active span.arrow {
    filter: grayscale(0) brightness(1);
}

.CountryList::-webkit-scrollbar-track,
.RegionList::-webkit-scrollbar-track,
.CityList::-webkit-scrollbar-track,
.StateList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    border-radius: 10px;
    z-index: 1000000000000000000000000000000000000000000;
}

.CountryList::-webkit-scrollbar,
.RegionList::-webkit-scrollbar,
.StateList::-webkit-scrollbar,
.CityList::-webkit-scrollbar {
    width: 6px;
    background-color: #a85089;
    border-radius: 10px;
    z-index: 1000000000000000000000000000000000000000000;
}

.CountryList::-webkit-scrollbar-thumb,
.RegionList::-webkit-scrollbar-thumb,
.CityList::-webkit-scrollbar-thumb,
.StateList::-webkit-scrollbar-thumb {
    background-color: #a85089;
    border-radius: 10px;
    z-index: 1000000000000000000000000000000000000000000;
}

.CountryLang i.removeTextInput,
.RegionLang i.removeTextInput,
.CityLang i.removeTextInput,
.StateLang i.removeTextInput {
    position: absolute;
    right: 0;
    width: 50px;
    height: 50px;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    z-index: 10;
    cursor: pointer;
}

.CountryLang i.removeTextInput.show,
.RegionLang i.removeTextInput.show,
.CityLang i.removeTextInput.show,
.StateLang i.removeTextInput.show {
    display: flex;
}

.mainContentPopupLocatio .btnDet.withicon .icon {
    margin-left: 0 !important;
}

/* .mainContentPopupLocatio.TypeLocationSelect {
    display: flex;
} */
.resultSearch .itemSearchResult.pinned span.iconPin {
    transform: rotate(-30deg) scale(1.2);
}

/* location popup */


.sec1home .customCarousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.container.controllSlider {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.itemSlideHome .container.contentSlider {
    position: absolute;
    top: 0;
    z-index: 10;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

.itemSlideHome .pic {
    position: relative;
    width: 100%;
    display: block;
}

.itemSlideHome .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemSlideHome .pic:before {
    position: relative;
    width: 100%;
    padding-top: 31%;
    display: block;
    content: '';
}


.swiper-button-next,
.swiper-button-prev {
    width: 20px;
    height: 45px;
    pointer-events: auto;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    content: '' !important;
    background: url(../img/arrow.svg) no-repeat center / 100%;
    width: 20px;
    height: 45px;
}

.swiper-button-next:after {
    transform: scaleX(1);
}

.swiper-button-prev:after {
    transform: scaleX(-1);
}

.sec1home .swiper-button-next {
    right: 40px !important;
    left: auto !important;
    opacity: 0.6;
    transition: all 0.2s;
}

.sec1home .swiper-button-prev {
    left: 40px !important;
    right: auto !important;
    opacity: 0.6;
    transition: all 0.2s
}

.sec1home .swiper-button-nexthover,
.sec1home .swiper-container-rtl .swiper-button-prev:hover,
.sec1home .swiper-button-prev:hover,
.sec1home .swiper-container-rtl .swiper-button-next:hover {
    opacity: 1 !important;
}

.sec1home .swiper-pagination {
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px;
    pointer-events: none !important;
    gap: 5px;
}

.sec1home .swiper-pagination .swiper-pagination-bullet {
    position: relative;
    width: 17px;
    height: 37px;
    opacity: 1;
    border-radius: 0;
    background: url(../img/dot1.png) no-repeat center / 100%;
    pointer-events: auto;
}

.sec1home .swiper-pagination .swiper-pagination-bullet-active {
    position: relative;
    width: 17px;
    height: 37px;
    opacity: 1;
    border-radius: 0;
    background: url(../img/dot2.png) no-repeat center / 100%;
}

.itemSlideHome .textSlide {
    position: relative;
    padding: 0 80px 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}

.itemSlideHome .textSlide .title1Slide {
    font-size: 58px;
    background: linear-gradient(to left, #c0171d, #d74e28);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 800;
}

.itemSlideHome .textSlide .title2Slide {
    font-size: 36px;
    color: #fff;
    font-weight: 400;
}

.sec1home .customCarousel>.container.controllSlider {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-right: 105px;
}

.sec1home .customCarousel>.container.controllSlider .gap {
    position: relative;
    height: 240px;
}

.sec1home .customCarousel>.container.controllSlider .btnCustom {
    position: relative;
    pointer-events: auto;
}

.rowBtns {
    position: relative;
    display: flex;
    gap: 10px;
}

.rowBtns.center {
    justify-content: center;
    width: 100%;
}

.btnCustom {
    position: relative;
    padding: 0 40px;
    height: 45px;
    border: 1px solid var(--color2);
    color: var(--color2);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 160px;
    cursor: pointer;
}

.btnCustom:hover {
    background-color: var(--color2);
    color: #fff;
}

.btnCustom.fill {
    background: var(--color2);
    color: #fff;
}

.btnCustom.fill:hover {
    background: transparent;
    color: var(--color2);
}

.btnCustom.white {
    border-color: #fff;
    color: #fff;
}

.btnCustom.white:hover {
    border-color: #fff;
    color: var(--color2);
    background-color: #fff;
}

.btnCustom.btnGreen {
    background: #4CAF50;
    border: #4CAF50;
    color: #fff;
}

.btnCustom.btnGreen:hover {
    background: transparent !important;
    color: #4CAF50;
    border: 1px solid #4CAF50;
}

.btnCustom.black {
    border-color: #959595;
    color: #2b2b2b;
}

.btnCustom.black:hover {
    background-color: #2b2b2b;
    color: #fff;
}

.row3col {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.sec2home .row3col {
    padding: 20px 0;
    gap: 20px;
}

.sec2home .row3col .col {
    position: relative;
}

.itemBanner {
    position: relative;
    width: 100%;
    display: block;
    padding-top: 48%;
    background: no-repeat center / cover;
    border-radius: 8px;
    transition: all 0.5s;
    cursor: pointer;
}

.itemBanner:hover {
    filter: brightness(1.5);
}

.sec3home,
.sec4home,
.sec5home,
.sec6home,
.sec8home,
.sec10home,
.sec5Blog,
.sec4Blog,
.SecLoad,
.SecMore,
.sec2About,
.secSendCM {
    position: relative;
    width: 100%;
    padding: 60px 0;
    overflow: hidden;
}

.titleMore {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.titleMore.center {
    justify-content: center;
}

.titleMore .title {
    position: relative;
    padding-right: 25px;
    font-size: 28px;
    font-family: 'IRANYekan';
    color: #6d6d6d;
    font-weight: 400;
}

.titleMore .title .icon {
    position: absolute;
    width: 30px;
    height: 35px;
    right: -5px;
}

.titleMore .moreLink {
    font-size: 18px;
    color: #8f8f8f;
    font-weight: 300;
    padding-left: 20px;
    display: flex;
    align-items: center;
}

.titleMore .moreLink .icon {
    position: absolute;
    left: 0;
    width: 8px;
    height: 17px;
    background: no-repeat center left;
    top: 0px;
    bottom: 0;
    margin: auto;
    transition: all 0.2s;
}

.titleMore .moreLink:hover .icon {
    left: -10px;
}

.secSendCM .bg, .sec3About .bg, .sec5home .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}
.secSendCM .bg.okloadlazy, .sec3About .bg.okloadlazy, .sec5home .bg.okloadlazy {
    background-repeat: repeat !important;
}

.secSendCM .titleMore .title,
.sec3About .titleMore .title ,
.sec5home .titleMore .title {
    color: #fff;
}

.secSendCM .titleMore .moreLink,
.sec3About .titleMore .moreLink,
.sec5home .titleMore .moreLink {
    color: #fff;
}

.secSendCM .titleMore {
    margin-bottom: 60px;
}
.sec3About .titleMore {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #fff;
}

.sec3About .titleMore .subTitleAbout {
    font-size: 20px;
    padding-right: 25px;
}
.sec6home .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background-size: auto !important;
    background-repeat: repeat !important;
}

.titleMore .title small {
    position: absolute;
    right: 30px;
    text-wrap: nowrap;
    top: 40px;
    font-weight: 300;
    color: #959595;
}

.videoBox .cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center / cover;
}

.videoBox {
    position: relative;
    width: 100%;
    display: block;
    padding-top: 35%;
    background: #3e3e3e;
}

.videoBox .play {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 100%;
    border: none !important;
    background: var(--color2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.videoBox .play:hover {
    transform: scale(1.2);
    background: #e54045;
}

.videoBox .play svg {
    margin: 0 0 0 10px;
}

.customCarousel {
    overflow: hidden;
}

.swiper-button-next {
    right: 40px !important;
    left: auto !important;
}

.swiper-button-prev {
    left: 40px !important;
    right: auto !important;
}

.outarrow .swiper-button-next {
    right: -20px !important;
    left: auto !important;
}

.outarrow .swiper-button-prev {
    left: -20px !important;
    right: auto !important;
}

.NextPrevSlider {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    margin: auto;
    bottom: 0;
    height: 0;
}

.contentTabs .NextPrevSlider {
    width: calc(100% + 40px);
    left: -20px;
}

.itemEvent figure.pic a.hoverIcon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 33px;
    transition: all 0.2s;
    opacity: 0;
    z-index: 10;
}

.itemEvent figure.pic {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.itemEvent figure.pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 100%;
}

.itemEvent figure.pic i.light {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50%;
    width: 120%;
    background: linear-gradient(12deg, #2196F3, transparent, transparent);
    z-index: 1;
    opacity: 0.7;
    mix-blend-mode: screen;
    transition: all 0.2s;
}

.itemEvent:hover figure.pic i.light {
    background: linear-gradient(12deg, #c4161c, transparent, transparent);
    opacity: 0.6;
}

.itemEvent .contentEvent {
    position: relative;
    width: 100%;
    padding: 20px;
}

.itemEvent .contentEvent .listicon {
    position: relative;
    padding: 0 !important;
    list-style: none !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 16px;
    font-family: 'IRANYekan';
    color: #363636;
}

a.hoverlink {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

.itemEvent .infoitem {
    position: relative;
    height: 25px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.itemEvent .infoitem i.icon {
    position: relative;
    width: 25px;
    height: 25px;
    display: flex;
}

.itemEvent .infoitem .nameitem .seprator {
    color: #333;
}

.itemEvent .infoitem time.nameitem {
    color: #ababab;
}

.itemEvent .infoitem i.icon.okloadlazy {
    background: no-repeat center / 100%;
}

.itemEvent figure.pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.itemEvent figure.pic figcaption.eventInfo {
    position: absolute;
    z-index: 2;
    bottom: 0;
    padding: 0 20px 40px;
    display: flex;
    flex-direction: column;
    color: #fff;
    width: 100%;
    gap: 10px;
}

.itemEvent figure.pic:after {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 50%;
    content: '';
    background: linear-gradient(0deg, black, rgb(0 0 0 / 65%), transparent);
}

.itemEvent figure.pic figcaption.eventInfo .titleEvent {
    font-size: 22px;
    font-family: 'IRANYekan' !important;
    font-weight: 300;
}

.itemEvent figure.pic figcaption.eventInfo span.capacity {
    font-size: 16px;
    opacity: 0.6;
}

.itemEvent figure.pic a.hoverIcon i.fa-search {
    transform: scaleX(-1);
}

.itemEvent figure.pic a.hoverIcon:hover {
    opacity: 1;
}



.itemClub {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.itemClub figure.pic {
    position: relative;
    display: block;
}

.itemClub figure.pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 74%;
}

.itemClub figure.pic:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(0deg, black, rgba(0, 0, 0, 0.5), transparent);
    content: '';
    z-index: 1;
}

.itemClub figure.pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemClub figure.pic span.hoverIcon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 30px;
    opacity: 0;
}

.itemClub:hover figure.pic span.hoverIcon {
    opacity: 1 !important;
    z-index: 10;
}

.itemClub figure.pic span.hoverIcon>i {
    transform: scaleX(-1);
}

.itemClub .contentClub {
    position: relative;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.itemClub .contentClub .right {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
}

.itemClub .contentClub .left {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row-reverse;
    font-size: 18px;
    font-weight: 500;
}

.itemClub .contentClub .likes {
    position: relative;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 5px;
}

.itemClub .contentClub .comments {
    position: relative;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 5px;
}

.itemClub .right .likes i.icon {
    position: relative;
    width: 25px;
    height: 25px;
    display: block;
    filter: grayscale(1) brightness(2);
}

.itemClub .right .comments i.icon {
    position: relative;
    width: 25px;
    height: 25px;
    display: block;
}

.itemClub .pic .clubtInfo .titleclub {
    font-size: 22px;
    font-weight: 400;
}

.itemClub .pic .clubtInfo .location {
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.itemClub .pic .clubtInfo .location i.icon {
    color: #c0171d;
    font-size: 20px;
}

.itemClub .contentClub .left>span {
    transform: translateY(3px);
}

.itemClub figure.pic figcaption.clubtInfo {
    position: absolute;
    bottom: 0;
    z-index: 10;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    gap: 10px;
}


.contentTab {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-height: 0;
}

.contentTab.active {
    display: block;
    overflow: inherit;
    max-height: 1000px;
}

.btnsTab {
    position: relative;
    width: 100%;
    padding-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.btnsTab .btnTab {
    position: relative;
    background: transparent !important;
    font-size: 20px;
    border: none !important;
    color: #a6a6a6;
    font-family: 'IRANYekan' !important;
    padding: 10px 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
}

.btnsTab .btnTab.active {
    color: #313131;
}

.btnsTab .btnTab:before {
    position: absolute;
    bottom: 0;
    width: 0%;
    height: 1px;
    content: '';
    background: #313131;
    right: 0;
    transition: all 0.2s;
}

.btnsTab .btnTab.active:before {
    width: 100%;
}

.towItemGameCenter {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

article.itemGameCenter {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

article.itemGameCenter .pic {
    position: relative;
    width: 100%;
    transition: all 0.2s;
    transition-delay: 0.2s;
    border-radius: 8px !important;
    overflow: hidden;
}

article.itemGameCenter:hover .pic {
    filter: brightness(2);
    transition-delay: 0s;
}

article.itemGameCenter .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

article.itemGameCenter .pic .gameCentertInfo {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    padding: 30px;
    z-index: 10;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

article.itemGameCenter .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 48%;
}

article.itemGameCenter .pic .gameCentertInfo .titleGameCenter {
    position: relative;
    font-size: 22px;
    font-weight: 400;
}

article.itemGameCenter .pic .gameCentertInfo .nikname {
    position: relative;
    font-size: 18px;
    opacity: 0.7;
}

.sec5home .btnsTab .btnTab.active {
    color: #fff;
}

.sec5home .btnsTab .btnTab.active:before {
    background-color: #fff;
}


/* استایل پایه برای کاروسل */
.customCarousel {
    position: relative;
    overflow: hidden;
}

.sec6home {
    overflow: hidden;
}

.sec6home .horizontalslider {
    overflow: inherit;
}

/* استایل برای حالت عمودی */
.horizontalslider {
    /* height: 400px; ارتفاع دلخواه را تنظیم کنید */
}

.horizontalslider .swiper-slide {
    /* height: auto; */
}

/* افکت حرکت خطی */
.horizontalslider .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* استایل هاور */
.customCarousel:hover .swiper-wrapper {
    animation-play-state: paused !important;
}

.sec6home .horizontalslider .swiper-wrapper {
    padding: 50px 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.sec6home .horizontalslider .swiper-wrapper .swiper-slide {
    min-height: 100%;
    display: flex;
    justify-content: space-between;
    /* max-width: 300px; */
}

.towItemGamer {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
}

.itemGamer .pic {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.2s;
}

.itemGamer:hover .pic {
    filter: brightness(1.5);
}

.itemGamer .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 100%;
}

.itemGamer .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.itemGamer .gameContent {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    gap: 5px;
}

.itemGamer .gameContent .titleGameCenter {
    position: relative;
    font-size: 16px;
    color: #212121;
    font-weight: 400;
}

.itemGamer .gameContent .nikname {
    font-size: 16px;
    color: #656364;
}

.sec6home .horizontalslider .swiper-wrapper {
    padding: 50px 0;
}

.towItemGamer[data-rand='1'] .itemGamer:first-child,
.towItemGamer[data-rand='11'] .itemGamer:first-child {
    width: 80%;
    margin-left: 20%;
}

.towItemGamer[data-rand='1'] .itemGamer:last-child,
.towItemGamer[data-rand='11'] .itemGamer:last-child {
    width: 60%;
    margin-right: 40%;
}

.towItemGamer[data-rand='2'] .itemGamer:first-child,
.towItemGamer[data-rand='12'] .itemGamer:first-child {
    width: 60%;
    margin-right: 40%;
    margin-top: -20%;
    margin-bottom: 20%;
}

.towItemGamer[data-rand='2'] .itemGamer:last-child,
.towItemGamer[data-rand='12'] .itemGamer:last-child {
    width: 100%;
    margin-right: 0;
    margin-bottom: -20%;
    margin-top: 20%;
}

.towItemGamer[data-rand='3'] .itemGamer:first-child,
.towItemGamer[data-rand='13'] .itemGamer:first-child {
    width: 80%;
    margin-left: 0%;
    margin-top: 10%;
    margin-bottom: -10%;
}

.towItemGamer[data-rand='3'] .itemGamer:last-child,
.towItemGamer[data-rand='13'] .itemGamer:last-child {
    width: 60%;
    margin-right: 40%;
    margin-bottom: -40%;
    margin-top: 40%;
}

.towItemGamer[data-rand='4'] .itemGamer:first-child,
.towItemGamer[data-rand='14'] .itemGamer:first-child {
    width: 100%;
    margin-right: 20%;
    margin-top: -30%;
    margin-bottom: 30%;
}

.towItemGamer[data-rand='4'] .itemGamer:last-child,
.towItemGamer[data-rand='14'] .itemGamer:last-child {
    width: 80%;
    margin-right: 40%;
    margin-bottom: 20%;
    margin-top: -20%;
}

.towItemGamer[data-rand='5'] .itemGamer:first-child,
.towItemGamer[data-rand='15'] .itemGamer:first-child {
    width: 50%;
    margin-right: 20%;
    margin-top: 10%;
    margin-bottom: -10%;
}

.towItemGamer[data-rand='5'] .itemGamer:last-child,
.towItemGamer[data-rand='15'] .itemGamer:last-child {
    width: 60%;
    margin-right: 40%;
    margin-bottom: -20%;
    margin-top: 20%;
}

.towItemGamer[data-rand='6'] .itemGamer:first-child,
.towItemGamer[data-rand='16'] .itemGamer:first-child {
    width: 50%;
    margin-left: 40%;
    margin-top: -40%;
    margin-bottom: 40%;
}

.towItemGamer[data-rand='6'] .itemGamer:last-child,
.towItemGamer[data-rand='16'] .itemGamer:last-child {
    width: 90%;
    margin-right: 10%;
    margin-bottom: -60%;
    margin-top: 40%;
}

.towItemGamer[data-rand='7'] .itemGamer:first-child,
.towItemGamer[data-rand='17'] .itemGamer:first-child {
    width: 100%;
    margin-left: 10%;
    margin-top: 0%;
    margin-bottom: 0%;
}

.towItemGamer[data-rand='7'] .itemGamer:last-child,
.towItemGamer[data-rand='17'] .itemGamer:last-child {
    width: 70%;
    margin-right: 20%;
    margin-bottom: -10%;
    margin-top: 10%;
}

.towItemGamer[data-rand='8'] .itemGamer:first-child,
.towItemGamer[data-rand='18'] .itemGamer:first-child {
    width: 60%;
    margin-right: 60%;
    margin-top: -30%;
    margin-bottom: 30%;
}

.towItemGamer[data-rand='8'] .itemGamer:last-child,
.towItemGamer[data-rand='18'] .itemGamer:last-child {
    width: 100%;
    margin-right: 20%;
    margin-bottom: -10%;
    margin-top: 10%;
}

.towItemGamer[data-rand='9'] .itemGamer:first-child,
.towItemGamer[data-rand='19'] .itemGamer:first-child {
    width: 60%;
    margin-right: 20%;
    margin-top: 5%;
    margin-bottom: -5%;
}

.towItemGamer[data-rand='9'] .itemGamer:last-child,
.towItemGamer[data-rand='19'] .itemGamer:last-child {
    width: 80%;
    margin-right: 60%;
    margin-bottom: 0%;
    margin-top: 0%;
}

.towItemGamer[data-rand='10'] .itemGamer:first-child,
.towItemGamer[data-rand='20'] .itemGamer:first-child {
    width: 100%;
    margin-right: -20%;
    margin-top: -20%;
    margin-bottom: 20%;
}

.towItemGamer[data-rand='10'] .itemGamer:last-child,
.towItemGamer[data-rand='20'] .itemGamer:last-child {
    width: 80%;
    margin-right: 60%;
    margin-bottom: -20%;
    margin-top: 20%;
}



@keyframes moveDownUp {

    0%,
    100% {
        transform: translateY(8px);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes moveUpDown {

    0%,
    100% {
        transform: translateY(-8px);
    }

    50% {
        transform: translateY(8px);
    }
}

.towItemGamer .itemGamer.moveup .contentItemGamer {
    animation: moveDownUp var(--i) infinite linear;
}

.towItemGamer .itemGamer.movedown .contentItemGamer {
    animation: moveUpDown var(--i) infinite linear;
}

.sec7home {
    overflow: hidden;
}

.sec7home .titleMore {
    margin-bottom: 50px;
}

.sec7home .titleMore .title {
    color: #fff;
}

.sec7home .titleMore .title small {
    color: #d5d5d5;
}

.row2col {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sec7home .contentRight {
    position: relative;
    width: 100%;
    padding: 0 30px;
    color: #fff;
    font-size: 18px;
}

.sec7home .contentRight .text {
    position: relative;
    width: 100%;
    text-align: justify;
    line-height: 2;
    color: rgba(255, 255, 255, 0.7);
    padding-bottom: 20px;
}

.boxCounter {
    position: relative;
    width: 100%;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.itemCounter {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    gap: 10px;
}

.itemCounter .counter {
    position: relative;
    font-size: 28px;
    color: var(--color2);
    font-weight: 700;
}

.itemCounter .titleCounter {
    position: relative;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
}

.sec7home .row2col>.col:first-child {
    padding: 100px 0;
}

.row3col.verticalCarousels {
    height: 100%;
    overflow: hidden;
    width: calc((100% + var(--contoffsetleft)) - 30px);
    gap: 20px;
}

.row3col.verticalCarousels .col {
    max-height: 720px;
}

.row3col.verticalCarousels .col .verticaldown,
.row3col.verticalCarousels .col .verticalTop {
    height: 100%;
    overflow: hidden;
}

.row3col.verticalCarousels .col .verticaldown,
.row3col.verticalCarousels .col .verticalTop {
    height: 100%;
    overflow: hidden;
}

article.itemAbout {
    position: relative;
    display: flex;
}

article.itemAbout .pic {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

article.itemAbout .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

article.itemAbout .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 117%;
}

.sec8home .titleMore {
    margin-bottom: 50px;
}

.sec8home .titleMore {
    margin-bottom: 50px;
}

.towItemScenario {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

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

.itemScenario .pic {
    position: relative;
    width: 100%;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
}

.itemScenario:hover .pic {
    filter: brightness(2);
}

.itemScenario .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemScenario .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 55%;
}

.itemScenario .scenarioInfo {
    position: relative;
    padding: 10px;
}

.itemScenario .scenarioInfo .titleScenario {
    position: relative;
    padding: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
}

.sec8home .sliderBox {
    position: relative;
}

.sec8home .sliderBox .NextPrevSlider {
    left: -40px;
    width: calc(100% + 80px);
    top: -40px;
}


.itemBlog {
    position: relative;
    width: calc(100% - 10px);
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0px 0px 15px -8px rgba(0, 0, 0, 0.5);
    margin: auto;
}

.itemBlog .pic {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 6px !important;
}

.itemBlog .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 65%;
}

.itemBlog .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemBlog .pic .hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    transition: 0.2s;
    opacity: 0;
}

.itemBlog:hover .pic .hover {
    opacity: 1;
}

.itemBlog .pic .hover:before {
    position: relative;
    width: 110px;
    height: 110px;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 32px;
    transform: scaleX(-1);
}

.sec5Blog .swiper-wrapper ,
.sec4Blog .swiper-wrapper ,
.sec10home .swiper-wrapper {
    position: relative;
    padding: 20px 0;
}

.sec45Blog .contentItemBlog ,
.sec4Blog .contentItemBlog ,
.itemBlog .contentItemBlog {
    position: relative;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.itemBlog .date {
    position: relative;
    font-size: 16px;
    color: #ababab;
    font-weight: 500;
    display: block;
    width: 100%;
}

.mostview .itemBlog .date {
    position: absolute;
    left: 60px;
    right: auto !important;
    width: auto;
    padding: 0px 20px 0 40px;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 14px;
    background: #d5d5d5;
    border-radius: 4px;
    z-index: 10;
    top: -15px;
    color: #000;
}

.mostview .itemBlog .date:before {
    position: absolute;
    left: -7px;
    border-radius: 10px;
    background: var(--color2);
    content: '';
    width: 26px;
    height: 26px;
    transform: rotate(45deg);
    border: 5px solid #fff;
}
.itemBlog .titleBlog {
    position: relative;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 20px;
    line-height: 2;
    color: #2c2c2c;
}

.itemBlog .captionBlog {
    position: relative;
    width: 100%;
    text-align: justify;
    font-size: 15px;
    line-height: 2;
    color: #7e7e7e;
}

.rowBtns.end {
    justify-content: flex-end;
    margin: 10px;
}

.sec5Blog .titleMore ,
.sec4Blog .titleMore ,
.sec10home .titleMore {
    margin-bottom: 40px;
}

.itemBlog .moreLink {
    font-size: 16px;
    font-weight: 700;
    color: #2b2b2b;
    position: relative;
    padding: 0 0 0 35px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 20;
}

.itemBlog .moreLink:hover {
    color: var(--color2);
}

.itemBlog .moreLink i.icon {
    position: absolute;
    width: 25px;
    height: 20px;
    top: 0;
    bottom: 0;
    left: 0;
    background: no-repeat center / 100%;
    margin: auto;
}

.newsLetter {
    position: relative;
    width: 100%;
    border-radius: 8px;
    background: #192132;
}

.newsLetter .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 90%;
    background: transparent no-repeat left top / 100%;
    border-radius: 8px 0 0 0;
}

.newsLetter .bg:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 9.6%;
}

.newsLetter .rowCustom>.colCustom:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 50px 80px 50px;
    gap: 10px;
}

.newsLetter .textNewsletter {
    position: relative;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 2;
    padding-left: 140px;
}

.newsLetter .titleNewsletter {
    color: #fff;
    font-size: 28px;
}

.newsLetter .textNewsletter {
    position: relative;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 2;
}

.frmNewsletter {
    position: relative;
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
}

.frmNewsletter .inputNewsletter {
    height: 60px;
    width: calc(100% - 180px);
    border-radius: 6px !important;
    border: none !important;
    background: #fff !important;
    direction: ltr;
    letter-spacing: 6px;
    font-size: 24px;
    padding: 0 20px;
    font-family: 'IRANYekan' !important;
    font-weight: 300;
}

.frmNewsletter .btnNewsletter {
    position: relative;
    width: 170px;
    height: 60px;
    border-radius: 6px !important;
    border: none !important;
    background: var(--color2) !important;
    color: #fff !important;
    font-size: 16px;
    cursor: pointer;
}

.frmNewsletter .btnNewsletter:hover {
    background: #cb4045 !important;
}

.newsLetter {
    position: relative;
    width: 100%;
    border-radius: 8px;
    background: #192132;
    margin-top: 100px;
}

.newsLetter:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(9deg, #c0171d, transparent, transparent);
    z-index: 3;
    content: '';
    mix-blend-mode: color;
}

.newsLetter .rowCustom .frameMobile {
    position: relative;
    width: 70%;
    overflow: hidden;
    margin: -120px auto 0;
}

.newsLetter .rowCustom {
    position: relative;
}

.newsLetter .colCustom .bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 75%;
    height: 100%;
    background: no-repeat center bottom / 100%;
    right: 0;
    margin: auto;
}

.colCustom {
    position: relative;
}

.newsLetter .rowCustom .frameMobile:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 113%;
}

.newsLetter .rowCustom .frameMobile .mobile {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center / cover;
    z-index: 10;
    pointer-events: none;
}

.newsLetter .rowCustom .frameMobile .sliderBoxMobile {
    position: absolute;
    left: 0;
    right: 2%;
    bottom: 0;
    width: 65%;
    height: calc(100% - 21px);
    transform: skew(15deg, -3deg) rotateY(11deg);
    transform-origin: right bottom;
    border-radius: 60px 30px 0 0 !important;
    overflow: hidden;
}

.sliderBoxMobile .itemMobileSlide .pic {
    position: relative;
    width: 100%;
}

.sliderBoxMobile .itemMobileSlide .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 170%;
    background: blue;
}

.sliderBoxMobile .itemMobileSlide .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemMobileSlide .videoBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.listCofe {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}


button.btnShowFilterSearch {
    position: fixed !important;
    top: 80vh;
    bottom: auto;
    right: 7%;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 3px solid #e50000 !important;
    background: linear-gradient(0deg, #ae0000, #e50000);
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    z-index: 100000000000;
}

button.btnShowFilterSearch:hover {
    background: linear-gradient(0deg, #e50000, #ae0000);
}

.popupFilters {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000000000000000000000000;
    opacity: 0;
    transition: all 0.2s;
    pointer-events: none !important;
}

.popupFilters.open {
    opacity: 1;
    pointer-events: auto !important;
}

.popupFilters .formPopupFilters input,
.popupFilters .formPopupFilters select {
    position: relative;
    width: 100%;
    height: 40px;
    border: none !important;
    background-color: #e7e7e7 !important;
    margin-bottom: 0;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 6px;
}

.popupFilters i.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.popupFilters .formPopupFilters {
    position: relative;
    padding: 40px;
    background: #fff;
    border-radius: 25px;
    width: 100%;
    max-width: 740px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.popupFilters .formPopupFilters .filter-group .lbl {
    font-size: 18px;
    color: #000;
    margin-bottom: 5px !important;
    display: block;
}

.popupFilters .formPopupFilters i.close {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    z-index: 10;
    color: #000;
    cursor: pointer;
}

.popupFilters .formPopupFilters i.close:before {
    position: relative;
}


.popupFilters .formPopupFilters .filter-group .lbl {
    font-size: 18px;
    color: #000;
    display: block;
}

.popupFilters .formPopupFilters .radioOption {
    position: relative;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.popupFilters .formPopupFilters .radioOption .checkboxs {
    position: relative;
    width: calc((100% / 2) - 5px);
}

.popupFilters .formPopupFilters .radioOption label {
    position: relative;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #fff;
    display: flex !important;
    align-items: center;
    border-radius: 5px !important;
    width: 100%;
    cursor: pointer;
    background-color: #f1f1f1;
    margin: 0 !important;
    font-size: 12px;
    font-weight: 500;
}

.popupFilters .formPopupFilters .radioOption label:hover {
    background: #eee;
    color: #000;
    border-color: #eee;
}

.popupFilters .formPopupFilters .radioOption input[type="radio"]+label.lblinput {
    display: inline-block;
    /* بسیار مهم */
    cursor: pointer;
    /* برای تغییر شکل موس */
}

.popupFilters .formPopupFilters .radioOption input[type="radio"]:checked+label.lblinput {
    background: #8BC34A;
    border-color: #8BC34A;
    color: #fff;
}

.popupFilters .formPopupFilters .filter-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #eee;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

.popupFilters .formPopupFilters .filter-group .titleField {
    position: relative;
    padding: 0 10px;
    border-radius: 0 6px 6px 0 !important;
    background: #c7c7c7;
    height: 100%;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
}

.checkboxs input[type="radio"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 0;
}

button.btnFilter {
    position: relative;
    height: 50px;
    display: flex;
    border-radius: 8px;
    color: #fff;
    background: var(--color2);
    font-size: 16px;
    border: none !important;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    cursor: pointer;
}

button.btnFilter:hover {
    background: #a70008;
    color: #fff;
}

button.btnFilter:before {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    background: no-repeat center / 100%;
    content: '';
    display: block;
    margin: auto;
}

.pagination {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0;
    direction: ltr;
}

.pagination .page-numbers {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    font-size: 16px;
    font-weight: 500;
    color: #5c5c5c;
}

.pagination span.page-numbers {
    border-color: #808080;
}

.pagination .next.page-numbers {
    width: auto !important;
    padding-left: 20px;
    border-left: 1px solid #d9d9d9;
}

.pagination .prev.page-numbers {
    width: auto !important;
    padding-right: 20px;
    border-right: 1px solid #d9d9d9;
}


.btnsSort {
    position: relative;
    width: 100%;
    padding-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.btnsSort .sortbt {
    position: relative;
    background: transparent !important;
    font-size: 20px;
    border: none !important;
    color: #a6a6a6;
    font-family: 'IRANYekan' !important;
    padding: 10px 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
}

.btnsSort .sortbt.active {
    color: #313131;
}

.btnsSort .sortbt:before {
    position: absolute;
    bottom: 0;
    width: 0%;
    height: 1px;
    content: '';
    background: #313131;
    right: 0;
    transition: all 0.2s;
}

.btnsSort .sortbt.active:before {
    width: 100%;
}

.listEvents {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.list3col,
.listGameMaster {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.listScenario {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.sec1,
.sec2,
.sec5 {
    position: relative;
    padding: 40px 0;
    overflow: hidden;
}

.sec4 {
    position: relative;
    padding: 40px 0 80px;
    overflow: hidden;
}

.sec1Detail {
    position: relative;
    padding: 0px 0 0px;
    overflow: hidden;
}

.allSecPack {
    position: relative;
}

.navFixedDetail {
    position: sticky;
    top: 50px;
    background: #ffffff;
    right: 0;
    z-index: 100;
}

.sec5home .pagination .page-numbers {
    color: #fff;
}

.listHelp {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.breadShare {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    min-height: 50px;
    background: #f3f3f3;
}

.breadShare:before {
    position: absolute;
    left: calc(-1 * var(--contoffsetleft));
    top: 0;
    content: '';
    background: #f3f3f3;
    height: 100%;
    width: 100vw;
}

.breadShare .breadcrumb-nav {
    position: relative;
}

.breadShare .breadcrumb-nav .breadcrumb {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0px;
    height: 100%;
    list-style: none !important;
}

.breadShare .breadcrumb-nav .breadcrumb .breadcrumb-item {
    position: relative;
    padding-left: 20px;
}

.breadShare .breadcrumb-nav .breadcrumb .breadcrumb-item:last-child {
    padding-left: 0;
}

.breadShare .breadcrumb-nav .breadcrumb .breadcrumb-item:after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600;
    content: "\f053";
    font-size: 12px;
}

.breadShare .breadcrumb-nav .breadcrumb .breadcrumb-item:last-child:after {
    display: none;
}

.breadShare .share-buttons {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}

.share-grid {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

.share-grid .share-btn {
    position: relative;
    background: transparent !important;
    border: none !important;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    color: #333;
}

.share-grid .share-btn:hover {
    color: var(--color2);
}

.share-grid .share-btn>span {
    position: absolute;
    top: 100%;
    right: -25px;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    padding: 5px 10px;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    border-radius: 4px;
    transition: all 0.2s;
    z-index: 10;
    transform-origin: top center;
    transform: scale(0);
}

/* پیام نوتیفیکیشن کپی */
.toast-message {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 1000;
    animation: slideIn 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

img.imgPageText {
    position: relative;
    display: block;
    margin: 0px auto 20px;
    border-radius: 8px;
}

.pageText {
    line-height: 2;
    font-size: 16px;
    text-align: justify;
}

.videoEmbed {
    position: relative;
    width: 100%;
    max-width: 1024px;
    margin: 10px auto;
    overflow: hidden;
    border-radius: 8px;
}

.ItemPopupGallery {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin: auto;
    cursor: zoom-in;
}

.ItemPopupGallery:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 100%;
}

.ItemPopupGallery i.pic {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center / 100%;
}

.ItemPopupGallery i.pic:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #047940;
    content: '';
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s;
}

.ItemPopupGallery:hover i.pic:before {
    opacity: 0.3;
}

.popupCaroudelBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000000000000000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    opacity: 0;
    pointer-events: none;
}

.popupCaroudelBox.show {
    opacity: 1;
    pointer-events: auto;
}

.popupCaroudelBox i.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.5);
}

.popupCaroudelBox img.picPopup {
    position: relative;
    display: block;
    z-index: 100000000;
    transition: all 0.5s cubic-bezier(0, 1.04, 0, 1.04);
    opacity: 0;
    transform: scale(0);
    max-width: 90%;
    max-height: 90%;
}

.popupCaroudelBox.show img.picPopup {
    transition-delay: 0.5s;
    opacity: 1;
    transform: scale(1);
}

.sliderPopup .NextPrevSlider {
    top: 60px;
}

.itemCM {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
}

.itemCM .colAvatar span.cmAvatar {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    border-radius: 100%;
    overflow: hidden;
    filter: grayscale(1);
    transition: all 0.2s;
    background-size: cover;
}

.itemCM:hover .colAvatar span.cmAvatar {
    filter: grayscale(0);
}

.itemCM .titleItemCM {
    position: relative;
    width: 100%;
}

.itemCM .titleItemCM .nameUserCM {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    height: 42px;
}

.itemCM .titleItemCM .nameUserCM:after {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    height: 1px;
    background: linear-gradient(45deg, #eee, #eee, #eee, #eee, var(--color2), var(--color2), var(--color2));
    width: 100%;
}

.itemCM .titleItemCM .Created_at {
    position: absolute;
    left: 0;
    top: -5px;
    color: #a2a2a2;
}

.itemCM .titleItemCM .cmRate {
    position: absolute;
    left: 0;
    bottom: -23px;
    display: flex;
    align-items: center;
}

.itemCM .titleItemCM .cmRate .rateStar {
    position: relative;
    width: 100px;
    height: 20px;
}

.itemCM .titleItemCM .cmRate .rateStar:before,
.itemCM .titleItemCM .cmRate .rateStar:after {
    background-size: auto 20px;
}

.itemCM .titleItemCM .cmRate .rateStar:before,
.itemCM .titleItemCM .cmRate .rateStar:after {
    background-size: auto 20px;
}

.itemCM .ContextCM {
    position: relative;
    width: calc(100% - 110px);
    line-height: 2;
    color: #272727;
}

.showCM {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.childrenCM {
    position: relative;
    grid-column: span 2;
    padding-right: 100px;
}

.ratingCM {
    position: relative;
    padding: 20px;
    background: #373737;
    border-radius: 20px !important;
    display: flex;
    gap: 60px;
    color: #e2e2e2;
    font-size: 14px;
    grid-column: span 2;
}

form.formSendCM {
    position: relative;
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.formSendCM .row2col {
    gap: 20px;
}

.formSendCM .row2col .rowBtns {
    grid-column: span 2;
    padding: 0 !important;
    margin: 0 !important;
}

button.btnSubmit {
    position: relative;
    padding: 0 80px;
    height: 50px;
    font-size: 16px;
    color: #fff;
    background: var(--color2);
    border: none !important;
    border-radius: 6px;
    cursor: pointer;
}

button.btnSubmit:hover {
    background: #9d1015;
}

.boxInput {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.boxInput input:not([type='checkbox'], [type='radio']) {
    position: relative;
    width: 100%;
    height: 50px;
    border-radius: 0;
    border: none !important;
    padding: 0 10px !important;
    color: #fff !important;
    background: transparent !important;
    border-bottom: 1px solid #464646 !important;
}

.customForm .boxInput input:not([type='checkbox'], [type='radio']) {
    border: none !important;
}
.formContact .boxInput select {
    position: relative;
    width: 100%;
    height: 50px;
    border-radius: 0;
    border: none !important;
    padding: 0 10px !important;
    color: #fff !important;
    background-color: transparent !important;
    border-bottom: 1px solid #464646 !important;
}
.formContact .boxInput textarea {
    padding: 10px;
    min-height: 140px;
    resize: none !important;
    padding: 10px 10px !important;
    color: #fff !important;
    background-color: transparent !important;
    border-bottom: 1px solid #464646 !important;
}
.formContact button.btnSubmit:hover {
    background: #fff !important;
    color: var(--color1);
}
.formContact button.btnSubmit {
    position: relative;
    width: 100%;
    margin-top: 20px;
    background: transparent !important;
    border-radius: 6px !important;
    border: 2px solid #fff !important;
}
.formContact select {
    background-image: url(../img/icon/arr1.png) !important;
    background-position: 10px center !important;
    background-size: 20px;
}
.formContact .boxInput select * {
    color: #333;
}
.boxInput.full {
    grid-column: span 2;
}

.boxInput textarea {
    position: relative;
    width: 100%;
    min-height: 180px;
    border-radius: 0;
    border: none !important;
    padding: 0 10px;
    color: #fff !important;
    background: transparent !important;
    border-bottom: 1px solid #464646 !important;
}

.allRateBox {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
}

.ratingCM .titleRating {
    position: relative;
    text-wrap: nowrap;
}

.allRateBox i.line1 {
    width: 2px;
    position: absolute;
    right: calc((100% / 4) - 10px);
    height: 100%;
    background: #000000;
    top: 0;
}

.allRateBox i.line2 {
    width: 2px;
    position: absolute;
    right: calc((100% / 4 * 2) - 3px);
    height: 100%;
    background: #000000;
    top: 0;
}

.allRateBox i.line3 {
    width: 2px;
    position: absolute;
    right: calc((100% / 4 * 3) + 5px);
    height: 100%;
    background: #000000;
    top: 0;
}

.itemRate {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.fiveStar {
    position: relative;
    width: 100px;
    height: 20px;
    display: flex;
    flex-direction: row-reverse;
}

.fiveStar:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: url(../img/icon/23.png) repeat-x left center / auto 20px;
    filter: grayscale(1) brightness(1.2);
}

.fiveStar:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    content: '';
    transition: all 0.2s;
    background: url(../img/icon/23.png) repeat-x left center / auto 20px;
}

.fiveStar .star {
    position: relative;
    width: calc(100% / 5);
    height: 100%;
    cursor: pointer;
    z-index: 10;
}

.fiveStar.oks1:after,
.fiveStar.s1:after {
    width: 20%;
}

.fiveStar.oks2:after,
.fiveStar.s2:after {
    width: 40%;
}

.fiveStar.oks3:after,
.fiveStar.s3:after {
    width: 60%;
}

.fiveStar.oks4:after,
.fiveStar.s4:after {
    width: 80%;
    align-items: center;
}

.fiveStar.oks5:after,
.fiveStar.s5:after {
    width: 100%;
}






/* Login Register Codes--------------------------------------------------------- */
.RegisterLoginSection {
    position: relative;
    width: 100%;
    margin-bottom: -100px;
}

i.picReg {
    position: relative;
    width: 100%;
    display: block;
    background: no-repeat center / cover;
}

i.picReg:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 95%;
}

.RegisterLoginSection .row2col .col1 {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

.RegisterLoginSection .row2col .col1 .stepRegister {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 120px;
    gap: 2px;
}

.stepRegister .tabStep {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 15px 20px;
    background: #fafafa;
    max-width: 110px;
    text-align: center;
    line-height: 1.7;
    font-size: 16px;
    font-weight: 500;
    color: #5c5c5c;
    border-radius: 0px 6px 6px 0;
    transition: all 0.5s;
}

.stepRegister .tabStep.active {
    background: #eeeeee;
}

.stepRegister .tabStep:before {
    position: absolute;
    left: -8px;
    width: 16px;
    height: 16px;
    content: '';
    background: #fff;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #929292;
    border-radius: 3px;
    box-shadow: 0px 0px 7px -3px rgba(0, 0, 0, 0.5) inset;
}

.stepRegister .tabStep.active:before {
    background: var(--color2);
    border-color: var(--color2);
    box-shadow: none;
}

.stepRegister .tabStep span.num {
    font-size: 28px;
    font-weight: 600;
    color: #575757;
    line-height: 1;
}

.RegisterLoginSection .row2col {
    gap: 0;
}

.RegisterLoginSection .row2col .col1 .contentStepRegister {
    position: relative;
    background: #ebebeb;
    border-radius: 0 6px 6px 0;
    padding: 40px 70px 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.loginregpage footer {
    margin-top: 0;
}

body.loginregpage .newsLetter {
    display: none;
}

.titleStep {
    position: relative;
    margin-bottom: 10px;
}

.titleStep .title {
    position: relative;
    padding-right: 25px;
    font-size: 26px;
    font-family: 'IRANYekan';
    color: #6d6d6d;
    font-weight: 500;
}

.titleStep .title .icon {
    position: absolute;
    width: 30px;
    height: 35px;
    right: -5px;
}

.RegisterLoginSection .caption {
    position: relative;
    width: 100%;
    font-size: 16px;
    line-height: 2;
    color: #898989;
    margin-bottom: 20px;
}

.formInfo {
    overflow: revert;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.formInfo .boxInput {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    text-wrap: nowrap;
    font-size: 16px;
    font-weight: 500;
    font-family: 'IRANYekan' !important;
    align-items: center;
    gap: 15px;
}

.formInfo .boxInput.labelend {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row !important;
}

.formInfo .boxInput input:not([type='checkbox'], [type='radio']),
.formInfo .boxInput select {
    border: none !important;
    background-color: #fff !important;
    height: 50px;
    border-radius: 6px !important;
    color: #747474 !important;
    font-size: 22px;
    font-weight: 200;
    line-height: 1;
}

.formInfo .boxInput input:not([type='checkbox'], [type='radio']):focus,
.formInfo .boxInput select:focus {
    background-color: #f1f1ff !important;
}

.formInfo .boxInput textarea {
    border: none !important;
    background-color: #fff !important;
    min-height: 120px;
    resize: none;
    border-radius: 6px !important;
    color: #000 !important;
    padding: 5px 10px;
}

.formInfo .boxInput textarea:focus {
    background-color: #f1f1ff !important;
}

.formInfo .boxInput.textarea {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start;
}

.formInfo .boxInput.textarea .lblinput {
    display: none !important;
}

.contentStep .rowBtns {
    margin: 10px 0 0 !important;
}

.messageSuccess {
    position: relative;
    padding: 30px;
    background: #4CAF50;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    color: #fff;
}

.nextStep {
    position: relative;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 50px;
    border-radius: 8px;
    border: none !important;
    background: var(--color2);
    color: #fff;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
}

.prevStep:focus,
.nextStep:focus {
    background: #911c20;
}

.nextStep.startReg {
    background: #4CAF50;
}

.nextStep.startReg:focus {
    background: #367c38;
}

.nextStep .icon {
    position: relative;
    width: 12px;
    height: 18px;
    background: no-repeat center / 100%;
    transition: all 0.2s;
}

.nextStep:hover .icon {
    transform: translateX(-10px);
}

.prevStep {
    position: relative;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 50px;
    border-radius: 8px;
    border: none !important;
    background: var(--color2);
    color: #fff;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
    flex-direction: row-reverse;
}

.prevStep .icon {
    position: relative;
    width: 12px;
    height: 18px;
    background: no-repeat center / 100%;
    transition: all 0.2s;
    transform: scaleX(-1);
}

.prevStep:hover .icon {
    transform: scaleX(-1) translateX(-10px);
}

.rowBtns.between {
    justify-content: space-between !important;
}

.termsText {
    position: relative;
    width: 100%;
    max-height: 400px;
    overflow: auto;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: justify;
    padding: 0 0 0 10px;
}

.contentStep {
    position: relative;
    overflow: hidden;
    max-height: 0;
    padding: 0;
}

.contentStep.active {
    position: relative;
    overflow: hidden;
    max-height: 10000px;
    padding: 0;
}

.RegisterLoginSection.loginPage .row2col .col1 {
    grid-template-columns: 1fr;
}


.btn2stepLogin,
.btnLogin {
    position: relative;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 50px;
    border-radius: 8px;
    border: none !important;
    background: #181b2e;
    color: #fff;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
}

.btn2stepLogin:focus,
.btnLogin:focus {
    background: #2c3152;
    color: #fff;
}

.btn2stepLogin.startReg,
.btnLogin.startReg {
    background: #4CAF50;
}

.btn2stepLogin .icon,
.btnLogin .icon {
    position: relative;
    width: 35px;
    height: 35px;
    background: no-repeat center / 100%;
    transition: all 0.2s;
    filter: brightness(6.5);
    margin: 0 -12px;
}

.btn2stepLogin:hover .icon,
.btnLogin:hover .icon {
    transform: translateX(-10px);
}

.formInfo .boxInput.approveinput {
    display: none;
}

.formInfo .boxInput.approveinput {
    display: none;
}

.formInfo.loginstep2 .approvemobile {
    display: none;
}

.formInfo.loginstep2 .approveinput {
    display: grid;
}

.formInfo .boxInput.err :is(input, textarea, select) {
    border: 1px solid red !important;
    background: #ffecf1 !important;
}

a.nextStep.gotohome {
    background: var(--color1);
}

a.nextStep.gotohome:focus {
    background: #4b44a7;
}

a.nextStep.gotohome:hover {
    color: #fff;
}



.RegisterLoginSection.s1 [data-step="1"],
.RegisterLoginSection.s2 [data-step="2"],
.RegisterLoginSection.s3 [data-step="3"],
.RegisterLoginSection.s4 [data-step="4"],
.RegisterLoginSection.s5 [data-step="5"] {
    max-height: unset;
}

.RegisterLoginSection.s1 .tabStep[data-step="1"],
.RegisterLoginSection.s2 .tabStep[data-step="2"],
.RegisterLoginSection.s3 .tabStep[data-step="3"],
.RegisterLoginSection.s4 .tabStep[data-step="4"],
.RegisterLoginSection.s5 .tabStep[data-step="5"] {
    background: #eeeeee !important;
}

.RegisterLoginSection.s1 .tabStep.tabStep[data-step="1"]:before,
.RegisterLoginSection.s2 .tabStep.tabStep[data-step="2"]:before,
.RegisterLoginSection.s3 .tabStep.tabStep[data-step="3"]:before,
.RegisterLoginSection.s4 .tabStep.tabStep[data-step="4"]:before,
.RegisterLoginSection.s5 .tabStep.tabStep[data-step="5"]:before {
    background: var(--color2);
    border-color: var(--color2);
    box-shadow: none;
}

.UploadFiles {
    position: relative;
    width: 100%;
    height: 50px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    border: 1px solid #bbb;
    background: #fff;
    border: none !important;
}

.UploadFiles input[type="file"] {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

.UploadFiles .openUploader {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-right: 130px;
    cursor: pointer;
}

.UploadFiles .openUploader label:first-child {
    cursor: pointer;
    width: calc(100% - 110px);
    height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px 0 0;
    gap: 5px;
    color: #959595;
    font-size: 12px;
}

.UploadFiles .openUploader .btn {
    position: absolute;
    left: 0 !important;
    top: 0;
    right: auto !important;
    bottom: 0;
    margin: auto 0;
    height: 50px;
    width: 140px;
    background: #99999a;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.UploadFiles .openUploader .btn:hover {
    background: red;
    color: #fff;
}

/* Login Register Codes--------------------------------------------------------- */
.checkboxCustom input[type='radio'],
.checkboxCustom input[type='checkbox'] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.checkboxCustom label.lblinput {
    position: relative;
    padding-right: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkboxCustom label.lblinput:before {
    position: absolute;
    right: 0px;
    width: 16px;
    height: 16px;
    content: '';
    background: #fff;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #929292;
    border-radius: 3px;
    box-shadow: 0px 0px 7px -3px rgba(0, 0, 0, 0.5) inset;
}

.checkboxCustom input[type="checkbox"]:checked+label.lblinput {
    color: #56a100 !important;
    font-weight: 800;
}

.checkboxCustom input[type="checkbox"]:focus+label.lblinput {
    border: 1px dashed #65d4ff;
    border-width: 1px 0;
    background-color: rgb(198, 224, 255);
}

.checkboxCustom input[type="checkbox"]:checked+label.lblinput:before {
    border-color: #90d441 !important;
    background-color: #dbffb1;
}

.checkboxCustom input[type="checkbox"]:checked+label.lblinput:after {
    position: absolute;
    right: 3px;
    width: 12px;
    height: 12px;
    content: '';
    background: #8BC34A;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
    border: none;
    border-radius: 3px;
    box-shadow: none;
}

.select2-container--default .select2-selection--single {
    border: none !important;
    height: 50px !important;
}

.select2-container--default .select2-selection--single {
    border: none !important;
    height: 50px !important;
}

.popupFilters .select2-container--default .select2-selection--single {
    height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}

.select2-container {
    z-index: 10000000000 !important;
}

.popupFilters .select2-container--default .select2-selection--single {
    height: 40px !important;
    background-color: #e7e7e7 !important;
    border-radius: 0 8px 8px 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-style: none !important;
    height: 8px !important;
    left: 50% !important;
    border-width: 0 !important;
    margin-left: -4px;
    margin-top: -3px;
    position: absolute;
    top: 71% !important;
    width: 14px !important;
    background: url(../img/icon/arr.png) no-repeat center !important;
    color: transparent !important;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
    left: 7px !important;
}

.galleryTopDetail {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 0.66fr 0.66fr 0.66fr;
    gap: 10px;
}

.galleryTopDetail .itemgall {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
}

.galleryTopDetail .itemgall img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galleryTopDetail .itemgall .hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    font-size: 18px;
}

.galleryTopDetail .itemgall:before {
    position: relative;
    width: 100%;
    display: block;
    background: #efefef;
    content: '';
    padding-top: 60%;
}

.galleryTopDetail .itemgall:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    content: '';
    z-index: 10;
    transition: all 0.2s;
    opacity: 0;
}

.galleryTopDetail .itemgall:hover:after {
    opacity: 1;
}

.galleryTopDetail .itemgall:first-child {
    position: relative;
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.navDetail {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0 0;
    border-bottom: 2px solid #dcdcdc;
}

.navDetail .DetailMenu {
    position: relative;
    display: flex;
    gap: 10px;
}

.navDetail .DetailMenu a.itemMenu {
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 16px;
    color: #959595;
}

.navDetail .DetailMenu a.itemMenu.active {
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 16px;
    color: #333;
}

.navDetail .DetailMenu a.itemMenu:before {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: auto;
    height: 2px;
    background: #333;
    content: '';
    width: 0%;
    transition: all 0.2s;
}

.navDetail .DetailMenu a.itemMenu:hover:before,
.navDetail .DetailMenu a.itemMenu.active:before {
    width: 100%;
}

.sideMenuDetail {
    position: relative;
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color2);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
}

.sideMenuDetail:hover {
    background: #8b0b0f !important;
}

.container.cafedetailpage .breadShare:before {
    background: #fff !important;
}

.itemLog i.icon {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.shortInfo {
    position: relative;
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.lblavatar {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    color: #2f2e2e;
}

.avatarPic .datetime {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
}

.avatarPic .datetime:before {
    position: relative;
    font-weight: 500;
}

.shortInfo .rightCol {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
}

.shortInfo .rightCol .avatarPic {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.shortInfo .rightCol .avatarPic .contentAvatar {
    gap: 10px;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 40px;
}

.shortInfo .rightCol .avatarPic .contentAvatar .title {
    position: relative;
    width: 100%;
    font-size: 22px;
    font-weight: 600;
}

.shortInfo .rightCol .avatarPic .contentAvatar .title small {
    font-weight: 500;
    font-size: 16px;
}

.horizontalsliderMasterDetail .galleryTopDetail {
    grid-template-columns: 1fr;
}

.galleryTopDetail.item2row {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.shortInfo .btnrepFav {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 30px;
    min-height: 35px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.shortInfo .btnrepFav:before {
    position: absolute;
    right: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 200;
}

.shortInfo .btnrepFav:hover {
    color: var(--color2);
}

.shortInfo .rightCol .avatarPic .pic {
    position: relative;
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 100%;
    overflow: hidden;
}

.shortInfo .rightCol .avatarPic .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shortInfo .leftCol {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.itemLog {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 20px;
    background: #fafafa;
    gap: 8px;
    min-width: 100px;
}

.itemLog .title {
    font-weight: 500;
    color: #000;
    font-size: 12px;
}

.itemLog .count {
    position: relative;
    font-size: 16px;
}

.itemLog .count strong {
    position: relative;
    color: #000;
}

.itemLog .count small {
    position: relative;
    color: #838383;
    font-weight: 600;
}

.itemLog:before {
    position: absolute;
    left: -8px;
    width: 1px;
    height: 60%;
    content: '';
    background: #e8abad;
    top: 0;
    bottom: 0;
    margin: auto;
}

.itemLog:last-child:before {
    display: none;
}

.h_iframe-aparat_embed_frame {
    position: relative;
}

.h_iframe-aparat_embed_frame .ratio {
    display: block;
    width: 100%;
    height: auto;
}

.h_iframe-aparat_embed_frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Personnel {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    padding: 40px 0;
}

.itemPersonnel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 0;
}

.itemPersonnel .pic {
    position: relative;
    width: 80px;
    height: 80px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #fff !important;
    border-radius: 100% !important;
    border: 2px solid #959595;
}

.itemPersonnel .contentPersonnel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 10px;
}

.itemPersonnel .contentPersonnel .name {
    position: relative;
    width: 100%;
    font-size: 18px;
}

.itemPersonnel:before {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    content: '';
    background: linear-gradient(-45deg, #fff, #fff, transparent);
    border-right: 2px solid red;
    width: calc(100% - 40px);
    right: 40px;
}

.itemPersonnel .icontext {
    position: relative;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding-right: 25px;
    height: 25px;
    font-weight: 500;
    color: #464545;
}

.itemPersonnel a.icontext:hover {
    color: red;
}

.itemPersonnel .icontext:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftTitle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
}

.searchBox {
    position: relative;
    display: flex;
    align-items: center;
}

.searchBox input.searchInput {
    position: relative;
    width: 200px;
    direction: rtl;
    text-align: left;
    padding: 0 10px 0 40px;
    border: none;
    background: #fff;
    height: 40px;
    border-radius: 8px;
}

.navbar .searchBox input.searchInput {
    border-radius: 0px;
}

.searchBox input.searchInput:focus {
    background: #eee;
}

.navbar .searchBox input.searchInput:focus {
    background: transparent;
}

.searchBox .icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: red;
}

.searchBox .icon:before {
    font-weight: 400;
    transform: scaleX(-1);
}



/* FAQ ---------------------------------------- */

.accotdionFAQ {
    font-size: 12px;
    position: relative;
    width: calc(100% - 40px);
    margin: 0 auto;
    /* max-width: 860px; */
    transition: all 0.2s;
}

.accotdionFAQ.active {
    margin-bottom: 30px;
}

.accotdionFAQ:before {
    position: absolute;
    top: 15px;
    right: 21px;
    width: 2px;
    height: 0px;
    content: '';
    transition: all 0.2s;
    background: #cdcdcd;
}

.accotdionFAQ.active:before {
    height: calc(100% + 30px);
    /* max-height: 171px; */
}

.accotdionFAQ label.name {
    font-family: 'IRANSharp';
    font-size: 16px;
    color: #868686;
    font-weight: normal;
}

.RowFAQ.cm .col2 {
    flex-direction: column;
    font-family: 'IRANSharp';
    font-weight: normal;
    color: #757575;
    padding: 0 10px 10px;
}

.RowFAQ.cm .col2 .rowTitle {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.RowFAQ {
    position: relative;
    width: 100%;
    display: flex;
    margin-bottom: 3px;
    font-size: 14px;
}

.contentCard .accotdionFAQ .RowFAQ {
    position: relative;
    width: 100%;
    display: flex;
    margin-bottom: 3px;
    font-size: 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px -14px rgba(0, 0, 0, 0.5);
}

.contentCard .accotdionFAQ.active .RowFAQ {
    position: relative;
    width: 100%;
    display: flex;
    margin-bottom: 3px;
    font-size: 14px;
    background-color: var(--color2);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px -14px rgba(0, 0, 0, 0.5);
}

.contentCard .accotdionFAQ .RowFAQ .col2 {
    border: None !important;
    color: #333;
    transition: all 0.2s;
}

.contentCard .accotdionFAQ.active .RowFAQ .col2 {
    border: None !important;
    color: #fff;
}

.ContentFAQ .lineTitle {
    margin-right: 0;
}

.accotdionFAQ.active .RowFAQ .col2 {
    font-size: 18px !important;
    color: #000;
}

.RowFAQ .col2 {
    position: relative;
    width: 100%;
    MIN-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 3px;
    color: #333;
    padding: 0 40px 0 10PX;
    font-size: 15px;
    font-weight: 500;
}


.RowFAQ.title .col1,
.RowFAQ.title .col2 {
    background-color: #161616;
    color: #fff;
    justify-content: center;
}

.accotdionFAQ span.AnswerQuestion {
    position: absolute;
    background: #161616;
    font-weight: normal;
    font-family: IranYekan;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    right: 5px;
    cursor: pointer;
    font-weight: bold;
    width: 30px;
}

.accotdionFAQ span.AnswerQuestion:after {
    /* content: 'مشاهده پاسخ'; */
}

.accotdionFAQ.active span.AnswerQuestion:before {
    content: "\f068";
}

.accotdionFAQ.active span.AnswerQuestion:after {
    /* content: 'بستن پاسخ'; */
}

.accotdionFAQ span.AnswerQuestion {
    background: transparent;
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    border-radius: 5px;
}

.accotdionFAQ span.AnswerQuestion:hover {
    background: #eee;
}

.accotdionFAQ span.AnswerQuestion:active {
    color: var(--color1);
}

.accotdionFAQ.active span.AnswerQuestion {
    background: #6b6b6b;
    color: #fff;
    border-color: #6b6b6b;
}

.accotdionFAQ.active span.AnswerQuestion:hover {
    background: #dddddd;
    color: #6b6b6b;
}

.accotdionFAQ.active span.AnswerQuestion:active {
    background: #acb8ce;
    color: #f4f4f4;
}

.accotdionFAQ span.AnswerQuestion:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    left: 0;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
}

.accotdionFAQ.active span.AnswerQuestion:before {
    transform: rotate(180deg);
}

.accotdionFAQ .ContentAccotdionFAQ {
    position: relative;
    width: 100%;
    display: flex;
    transition: all 0.2s;
    max-height: 0;
    overflow: hidden;
    flex-wrap: wrap;
}

.accotdionFAQ.active .ContentAccotdionFAQ {
    transition: all 0.5s;
    max-height: 100%;
}

.ContentAccotdionFAQ .textAccordionFAQ {
    position: relative;
    width: 100%;
    text-align: right;
    padding: 0px 30px;
    box-sizing: border-box;
    /* font-weight: bold; */
    font-family: 'IranYekan';
    font-size: 14px;
    display: flex;
    padding: 10px 30px;
    flex-direction: column;
    display: none;
}

.accotdionFAQ.active .textAccordionFAQ {
    color: #333;
    display: block;
}

.allContentTab {
    position: relative;
    width: 100%;
    padding: 20px 0;
}

.allContentTab:before {
    position: absolute;
    right: 26px;
    width: 2px;
    background: #e6e6e6;
    height: calc(100% - 80px);
    content: '';
    top: 40px;
}

.ContentAccotdionFAQ .moreAccordionFAQ {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 5px;
    box-sizing: border-box;
}

/* FAQ ---------------------------------------- */


.timeWorkCafe {
    position: relative;
    padding: 40px !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    column-gap: 40px;
}

.itemTimeWork {
    position: relative;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #919191;
    height: 50px;
}

.itemTimeWork span.day {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: 600;
    gap: 8px;
    font-size: 14px;
}

.itemTimeWork span.day:before {
    font-weight: 500;
}

.itemTimeWork span.hours {
    color: var(--color2);
    font-weight: 500;
    font-size: 14px;
}

.reviewRates {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 40px 0;
    gap: 20px;
}

.itemRateView {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    align-items: center;
    padding: 0 12px;
}

.itemRateView i.icon {
    position: relative;
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: 100%;
}

.itemRateView .titleRateview {
    position: relative;
    font-size: 18px;
    color: #444444;
}

.itemRateView span.ratesmall {
    position: relative;
    font-size: 16px;
    gap: 10px;
    display: flex;
    flex-direction: row-reverse;
    color: #999999;
    font-weight: 600;
}

.itemRateView span.ratesmall:before {
    color: #dcc054;
    margin-top: -2px;
}

.itemRateView:before {
    position: absolute;
    left: -9px;
    : ;
    width: 2px;
    height: 40%;
    background: #bd0c13;
    content: '';
    top: 0;
    bottom: 0;
    margin: auto;
}

.itemRateView:last-child:before {
    display: none;
}

.secMap {
    position: relative;
    width: 100%;
    padding: 40px 0;
}

.secMap.ed {
    margin: 40px 0;
}

.secMap .mapCustom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container.cafedetailpage {
    overflow: hidden;
}

.secMap .mapCustom .js-map {
    position: absolute;
    right: 0;
    top: 0;
    width: 140%;
    height: 100%;
}

.itemBlog.news {
    background: #fff !important;
    box-shadow: 0px 0px 25px -20px rgba(0, 0, 0, 0.5);
    border: none !important;
}

.itemBlog.news .contentItemBlog {
    padding: 10px 20px;
}

.itemBlog.news .pic .date {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: auto;
    padding: 0 10px;
    background: var(--color2);
    font-size: 12px;
    color: #fff;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}

.itemBlog.news .contentItemBlog .titleBlog {
    font-size: 16px;
    overflow: inherit !important;
}

.itemBlog.news .contentItemBlog .titleBlog:before {
    position: absolute;
    top: 0;
    right: -20px;
    width: 2px;
    height: 100%;
    content: '';
    background: red;
    display: block;
}

.itemBlog.news .contentItemBlog .captionBlog {
    font-size: 12px;
    font-weight: 500;
}

.secMap .titleMore {
    margin: 0 !important;
}

.secMap .titleMore .title {
    color: #000;
    font-size: 20px;
    height: 40px;
    display: flex;
    align-items: center;
    padding-right: 60px;
    font-weight: 500;
}

.secMap .row2col>.colCustom:nth-child(1) {
    position: relative;
    padding: 40px 60px;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.listInfoContact {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.listInfoContact:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 100%;
    background: transparent;
    content: '';
    border: solid #f0f0f0;
    border-width: 0 2px;
}

.itemInfoContact {
    position: relative;
    width: 100%;
    padding-right: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    color: #3f3f3f;
    font-size: 16px;
}

.itemInfoContact i.icon {
    width: 45px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: 33px !important;
    font-size: 22px;
    color: #a3a3a3;
}

.itemInfoContact a:hover {
    color: var(--color2);
}

.itemInfoContact .contentInfo {
    position: relative;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    gap: 5px;
}

.itemInfoContact .contentInfo span.value {
    display: flex;
    align-items: center;
    gap: 30px;
}

.itemInfoContact .contentInfo {
    position: relative;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    gap: 5px;
}

.itemInfoContact .contentInfo span.value {
    display: flex;
    align-items: center;
    gap: 30px;
}

.itemInfoContact .contentInfo span.value a.neshan,
.itemInfoContact .contentInfo span.value a.balad {
    width: 100px;
}

.itemInfoContact .contentInfo span.value a.neshan img,
.itemInfoContact .contentInfo span.value a.balad img {
    width: 100%;
}

.itemInfoContact .socialIcons .socicon {
    position: relative;
    width: 25px;
    height: 25px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 21px;
    color: rgb(44 44 44) !important;
}

.itemInfoContact .socicon.aparat:before {
    filter: none !important;
    opacity: 0.8;
}

.itemInfoContact i.icon:after {
    position: absolute;
    left: -3px;
    width: 4px;
    height: 100%;
    content: '';
    background: var(--color2);
    border-radius: 8px;
}

.itemInfoContact .contentInfo span.items {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 30px;
}

.itemInfoContact .contentInfo span.items:last-child {
    margin: 0 !important;
}

.secMap .titleMore .title .icon {
    width: 40px;
    right: 5px;
}

.itemVideoSlide {
    position: relative;
    width: 100%;
    display: block;
}

.itemVideoSlide figure.pic {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.itemVideoSlide figure.pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 74%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.2s;
}

.itemVideoSlide:hover figure.pic:before {
    background: rgba(0, 0, 0, 0.2);
}

.itemVideoSlide figure.pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemVideoSlide .contentItemVideoSlide {
    position: relative;
    width: 100%;
    padding: 20px 15px;
    font-size: 18px;
    color: #333;
}

.itemVideoSlide figure.pic i.play {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 60px;
    height: 60px;
    background: url(/dist/img/play1.png);
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100%;
    mix-blend-mode: screen;
    transition: all 0.2s;
}

.itemVideoSlide:hover figure.pic i.play {
    transform: scale(1.3);
}



.itemAlbum {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 6px;
}

.itemAlbum figure.pic {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.itemAlbum figure.pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 74%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.2s;
}

.itemAlbum:hover figure.pic:before {
    background: rgba(0, 0, 0, 0.2);
}

.itemAlbum figure.pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemAlbum .contentItemVideoSlide {
    position: relative;
    width: 100%;
    padding: 20px 15px;
    font-size: 18px;
    color: #333;
}

.itemAlbum .contentItemAlbum {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    padding: 20px;
    color: #fff;
    width: 100%;
    background: linear-gradient(0deg, black, transparent);
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.itemAlbum .contentItemAlbum .title {
    position: relative;
    font-size: 20px;
    font-weight: 300;
}



/* ---------------- Start Style Modal ---------------- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.modal.active {
    pointer-events: auto;
    z-index: 1000000000000000000000000000000;
}

.modal.m400 .BoxModal {
    max-width: 400px;
}

.modal.m600 .BoxModal {
    max-width: 600px;
}

.modal.m800 .BoxModal {
    max-width: 800px;
}

.modal.m1000 .BoxModal {
    max-width: 1000px;
}

.modal .bgModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: block;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
}

.modal.active .bgModal {
    opacity: 1;
}

.modal .BoxModal {
    position: relative;
    transition: all 0.2s;
    transform: scale(1.5);
    opacity: 0;
    width: 100%;
    min-width: 280px;
    background: #fff;
    padding: 15px 30px;
}

.modal.round10 .BoxModal {
    border-radius: 10px !important;
}

.modal.round20 .BoxModal {
    border-radius: 20px !important;
}

.modal.round30 .BoxModal {
    border-radius: 30px !important;
}

.modal.fullscreen .BoxModal {
    /* width: 100vw; */
    /* height: 100vh; */
    max-width: 960px;
}

.modal.fullscreen .bgModal {
    background: #fff !important;
}

.modal.fullscreen .BoxModal .contentModal {
    max-height: calc(100vh - 101px);
}

.modal .titleModal {
    position: relative;
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #e4e4e4;
    display: flex;
    align-items: center;
    color: var(--color1);
}

.modal .titleModal label {
    position: relative;
    padding: 0 5px;
    height: 60px;
    display: flex;
    align-items: center;
    font-weight: 300;
    font-size: 22px;
}

.modal .titleModal label:before {
    position: absolute;
    width: 100%;
    bottom: -1px;
    content: '';
    right: 0;
    height: 3px;
    background: var(--color1);
}

.modal.active .BoxModal {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

.modal .close {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    cursor: pointer;
    color: #bbb;
    z-index: 10;
}

.modal .close:hover {
    color: red;
}

.modal .BoxModal .contentModal {
    position: relative;
    padding: 20px !important;
    max-height: 580px;
    overflow: auto;
}

.btnModalCenter {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0 0;
}

.modal .text {
    color: #626262;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 10px;
    line-height: 1.6;
    text-align: center;
}

/* ---------------- End Style Modal ---------------- */

.modal[data-modalname="galleryPopup"] .slider-thumbnail .swiper-slide {
    position: relative;
}

.modal[data-modalname="galleryPopup"] .slider-thumbnail .swiper-slide:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 67%;
}

.modal[data-modalname="galleryPopup"] .slider-thumbnail .swiper-slide img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.5;
    overflow: hidden;
    border-radius: 12px;
    transition: all 0.5s;
    cursor: pointer;
    filter: grayscale(1);
}

.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
    cursor: unset;
    pointer-events: none;
    filter: grayscale(0) brightness(1.3);
}


.modal[data-modalname="galleryPopup"] .sliderLargGallery .swiper-slide {
    position: relative;
    display: block;
    width: 100% !important;
}

.modal[data-modalname="galleryPopup"] .sliderLargGallery .swiper-slide:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 63%;
}

.modal[data-modalname="galleryPopup"] .sliderLargGallery .swiper-slide img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal.fullscreen .BoxModal .container {
    padding: 0px 0;
    max-width: 960px;
}

.sliderLargGallery {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 10px;
}

.slider-thumbnail {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
}

.modal.fullscreen .close {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 31px;
    cursor: pointer;
    color: #3e3e3e;
    z-index: 10;
}

.modal .BoxModal .contentModal .reviewRates {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px !important;
    padding: 0;
}

.modal .BoxModal .contentModal .reviewRates .itemRateView:before {
    display: none !important;
}

.modal .BoxModal .contentModal .reviewRates .itemRateView {
    background: #eee;
    width: 100%;
    padding: 15px;
}

.formCustom {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px !important;
}

.formCustom .boxInput input:not([type='checkbox'], [type='radio']),
.formCustom .boxInput select {
    background-color: #e5e5e5 !important;
    border-radius: 6px;
    border: none !important;
    height: 40px;
}

.formCustom .boxInput textarea {
    background-color: #e5e5e5 !important;
    border-radius: 6px;
    border: none !important;
    resize: none !important;
    min-height: 130px !important;
    padding: 10px !important;
}

.shortInfo .btnfavorite:after {
    position: absolute;
    right: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    content: "\f004";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    color: var(--color2);
    z-index: 10;
    transition: all 0.2s;
    transform: scale(1.5);
    opacity: 0;
}

.shortInfo .btnfavorite.active:after {
    transform: scale(1.1);
    opacity: 01;
}

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

.headerEventDetail:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 31%;
}

.headerEventDetail i.bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.headerEventDetail .contentHeaderDetail {
    position: absolute;
    top: 0;
    z-index: 10;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 50px 80px;
    color: #fff;
}

.headerEventDetail .contentHeaderDetail .title {
    font-size: 48px;
}

.headerEventDetail .contentHeaderDetail span.capacity {
    position: relative;
    font-size: 38px;
    font-weight: 400;
    color: var(--color2);
}

.startTime {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 10px 0;
}

.timer {
    position: relative;
    direction: ltr;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.time-unit {
    position: relative;
}

.time-unit.days {
    background: #c0171d9e;
    padding: 8px;
    border-radius: 8px;
    min-width: 3px;
    display: block;
}

.hours .time-unit {
    position: relative;
}

.time-unit div {
    display: flex;
    gap: 2px;
}

.timerContent {
    position: relative;
    display: flex;
    gap: 14px;
}

.timerContent .time-unit:before {
    position: absolute;
    left: 100%;
    width: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    content: ":";
    top: 0;
    height: 100%;
}

.startTime .lbl {
    position: relative;
    font-size: 30px;
    font-weight: 300;
}

.timerContent .time-unit:last-child:before {
    display: none;
}

.hours span.digit,
.minutes span.digit,
.seconds span.digit {
    background: #c0171d9e;
    padding: 8px;
    border-radius: 8px;
    min-width: 3px;
    display: flex;
    width: 25px;
    justify-content: center;
}

.time-unit div:last-child {
    position: absolute;
    font-size: 10px;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    top: 100%;
}

.startTime .lblCancel {
    position: relative;
    padding: 0 30px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #fff;
    background: transparent !important;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.endTimer {
    position: relative;
    height: 40px;
    border: 1px solid var(--color2);
    padding: 5px 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: var(--color2);
    font-weight: 700;
    border-radius: 6px;
    transform: rotate(12deg);
}

.leftMenu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btnInvite {
    position: relative;
    padding: 0 40px 0 20px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color2);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
}

.btnInvite:hover {
    position: relative;
    padding: 0 40px 0 20px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #940005;
    border-radius: 6px;
    color: #fff;
}

.btnInvite:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
    background: url(../img/arrl.png) no-repeat center / 100%;
    width: 16px;
    height: 24px;
    content: '';
    display: block;
    margin: auto;
}

.btnStartEvent {
    position: relative;
    padding: 0 40px 0 20px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #474747;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
}

.btnStartEvent:hover {
    position: relative;
    padding: 0 40px 0 20px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #252525;
    border-radius: 6px;
    font-weight: 500px;
    color: #fff;
    cursor: pointer;
}

.btnStartEvent:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
    width: 16px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.btnrepFav {
    position: relative;
    cursor: pointer;
    font-weight: 400;
    color: #474747;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 40px;
}

.btnrepFav:before {
    margin-top: -4px;
}

div#facilities .titleMore .title small {
    right: 0px !important;
}

.divisionTitle {
    position: relative;
    padding: 10px 30px 10px 0;
    font-family: 'IRANYekan';
    font-weight: 300;
    color: #959595;
    font-size: 24px;
}

.divisionTitle .icon {
    position: absolute;
    width: 30px;
    height: 35px;
    right: -5px;
}

.reportSlider {
    position: relative;
    padding: 40px 0px;
}

ul.TermsOfUse {
    position: relative;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 20px;
}

ul.TermsOfUse li:before {
    position: absolute;
    right: 0;
    width: 29px;
    height: 33px;
    content: '';
    background: url(../img/check.png) no-repeat center / 100%;
    display: block;
    top: 0;
    bottom: 0;
    margin: auto;
}

ul.TermsOfUse li {
    position: relative;
    font-size: 16px;
    color: #333;
    padding-right: 35px;
    height: 35px;
    display: flex;
    align-items: center;
}

.reportSlider.outarrow .swiper-button-next {
    right: -35px !important;
}

.reportSlider.outarrow .swiper-button-prev {
    left: -35px !important;
}

.hoverOperation {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    background-color: rgba(0, 0, 0, .5);
    background-position: center;
    background-size: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hoverOperation i.bgEvent {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    background: no-repeat center / 100%;
}

.itemGameCenter .operationInfo {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

.reportSlider article.itemGameCenter {
    padding-bottom: 25px;
}

.itemGameCenter .operationInfo .titleOp {
    font-size: 18px;
    padding: 12px 0;
    font-weight: 400;
    color: #333;
    position: relative;
}

.itemGameCenter .operationInfo .titleOp .byInfo {
    position: absolute;
    left: 0;
    top: 90%;
    height: 20px;
    font-size: 16px;
    color: #7c7c7c;
}

.resultEvent {
    position: relative;
    width: 100%;
    border-radius: 8px;
    margin: 20px 0 0px;
}

.resultEvent .contentResult {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 12% 0 0;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 20px;
    gap: 10px;
}

.secMap .container {
    pointer-events: none;
}

.secMap .container a {
    pointer-events: auto !important;
}

.resultEvent:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 28%;
}

.listHelp .itemSlideHome {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    padding: 0 !important;
}

.itemSlideHome>.contentSlider>.rowBtns {
    position: relative;
    padding: 20px 80px;
}



/* -------------- FAQ --------------- */
.buttonsFaq {
    position: relative;
    width: 100%;
    padding: 20px 0;
    overflow: hidden;
}

.faqList {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 60px;
}

.FAQTitle {
    position: relative;
    height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #414141;
    margin: 10px 0px;
}

.tabBtns {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 2px solid var(--realColor1);
}

.tabBtns button.btntab {
    position: relative;
    width: 80px;
    height: 80px;
    border: none;
    outline: none;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 !important;
    background: none;
    border-radius: 0;
    background-clip: content-box;
    padding: 2px;
    background-color: #eee;
    padding: 0;
}

.tabBtns button.btntab.active {
    background-color: var(--realColor1);
}

.tabBtns button.btntab:before {
    position: absolute;
    bottom: -13px;
    height: 3px;
    background: #111727;
    content: '';
    width: 3%;
    transition: all 0.5s;
    opacity: 0;
}



.tabBtns button.btntab i {
    position: relative;
    width: 50px;
    height: 50px;
    background: no-repeat center / 100%;
    filter: grayscale(1) brightness(0);
    cursor: pointer;
}

.tabBtns button.btntab:hover i {
    filter: grayscale(1) brightness(0);
}

.tabBtns button.btntab label {
    color: #030303;
    position: absolute;
    border: 0;
    bottom: calc(100% + 10px);
    padding: 0 10px;
    width: 150px;
    border-radius: 6px;
    z-index: 100;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s;
}

.tabBtns button.btntab:hover label,
.tabBtns button.btntab.active label {
    opacity: 1;
    transform: scale(1);
}


button.btntab.active i {
    filter: grayscale(1) brightness(20);
}

.tabContent {
    position: relative;
    width: 100%;
    transition: all 0.2s;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
}

.tabContent.active {
    transition: all 0.5s;
    opacity: 1;
    min-height: 30px;
    max-height: 2000px;
    padding: 0px 0;
    overflow: inherit;
}

.accotdionFAQ {
    font-size: 12px;
    width: 100%;
    margin: 5px;
    float: right;
}

.RowFAQ {
    position: relative;
    width: 100%;
    display: flex;
    margin-bottom: 3px;
    font-size: 14px;
    background: transparent;
    overflow: hidden;
    border-radius: 0;
    color: #333 !important;
    transition: all 0.5s;
    border-radius: 6px;
}

.ContentFAQ .lineTitle {
    margin-right: 0;
}

.accotdionFAQ .ContentAccotdionFAQ {
    position: relative;
    width: 100%;
    display: flex;
    transition: all 0.2s;
    max-height: 0;
    overflow: hidden;
    flex-wrap: wrap;
}

.accotdionFAQ.active .ContentAccotdionFAQ {
    transition: all 0.5s;
    max-height: 100%;
}

.ContentAccotdionFAQ .textAccordionFAQ {
    position: relative;
    width: 100%;
    text-align: justify;
    padding: 10px 50px 10px 10px;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 16px;
    color: #626262;
    line-height: 2;
}

.RowFAQ .col1 {
    position: relative;
    width: 100px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    /* display: none; */
    border-left: 5px solid #fff;
    font-weight: bold;
}

.RowFAQ .col2 {
    position: relative;
    width: 100%;
    MIN-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 3px;
    color: #676767;
    padding: 0 50px 0 10px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
}

span.subtitleCenter {
    font-size: 16px;
    color: #676767;
}

button.showAdvancedSearch {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 18px;
    z-index: 10000;
    background: #1e2e69;
    color: #fff;
    border-radius: 10px 10px 0 0;
    box-shadow: 0px -10px 20px -10px rgb(0 0 0 / 30%);
    display: none;
}

button.showAdvancedSearch:hover {
    background: #082385;
}

section.sliderCarousel2 .NextPrevSlider {
    background: white;
}

.RowFAQ.title .col1,
.RowFAQ.title .col2 {
    background-color: #161616;
    color: #fff;
    justify-content: center;
}

.accotdionFAQ span.AnswerQuestion {
    position: absolute;
    font-family: IRANYekanXVF;
    height: 35px;
    width: 35px;
    background: #fff !important;
    right: 0;
    left: auto;
    cursor: pointer;
    font-weight: 100;
    color: #131313 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    border-radius: 8px;
    transition: all 0.2s;
    border: 2px solid #c2c2c2;
}

.accotdionFAQ span.AnswerQuestion {
    background: var(--color1);
}




.itemCatCustom {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

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

.departmentsList .container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 20px 0;
}

section.secFaq {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

button.itemCatCustom {
    cursor: pointer;
}

.faqList .sliderBox {
    position: relative;
    max-width: 1024px;
    margin: auto;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 28px;
    padding: 20px 0;
}

.faqList .sliderBox .NextPrevSlider {
    width: calc(100% + 40px);
    left: -20px;
}

.itemCatCustom .bg {
    position: relative;
    background: no-repeat center / 100%;
    width: 80px;
    height: 80px;
    filter: grayscale(1);
    transition: all 0.2s;
}

.itemCatCustom:hover .bg {
    filter: grayscale(0.5);
}

.itemCatCustom.active .bg {
    filter: grayscale(0);
}

.itemCatCustom .bg:before {
    position: relative;
    width: 100%;
    padding-top: 100%;
    display: block;
    content: '';
}

.itemCatCustom .bg:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: '';
    background: url(../img/cats/jobs/line.png) no-repeat center / 100%;
    z-index: 10;
    transition: all 1s;
}

.itemCatCustom:hover .bg:after {
    transform: rotate(720deg);
}

.itemCatCustom .bg img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemCatCustom .title {
    position: relative;
    bottom: 0;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.secCatCustom .carouselProducts {
    padding: 20px 0 0;
}

a.moreAcc {
    position: relative;
    padding: 0 10px;
    height: 30px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 30px;
    font-family: IRANYekanXVF;
    font-weight: normal;
    transition: all 0.2s;
    font-weight: bold;
    font-size: 12px;
}

a.moreAcc:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Font Awesome 5 Pro';
}

a.moreAcc:hover {
    color: #f5f5f5;
    background: #161616;
}

a.moreAcc:active {
    color: #161616;
    background: #d3d3d3;
}


.accotdionFAQ.active .RowFAQ .col2 {
    color: #000;
    font-weight: 550;
}

.accotdionFAQ.active .RowFAQ .col2 span.AnswerQuestion {
    background: #6b6b6b !important;
    transform: rotate(180deg);
    color: #fff !important;
}

.rowFAQCol {
    position: relative;
    width: 100%;
    display: flex;
    gap: 0;
    flex-direction: column;
}

.rowFAQCol .col1 {
    position: relative;
    width: calc(100% - 300px);
    padding: 10px;
}

.rowFAQCol .col2 {
    position: relative;
    width: 290px;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.rowFAQCol .col2 img {
    position: relative;
    width: 280px;
}

.titleRight {
    position: relative;
    padding-right: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 22px;
    color: #424242;
    font-weight: 550 !important;
}

.titleRight:before {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0;
    top: 0;
    content: '';
    background: url(../img/icons/titleStep.png) no-repeat center / 35px;
}

.sectopFaq {
    position: relative;
    padding: 20px 0;
}

.sectopFaq .titleMore {
    margin: 0 !important;
}

.rowFAQCol .description {
    position: relative;
    width: 100%;
    font-size: 14px;
    line-height: 2;
    color: #626262;
    padding: 10px;
    text-align: justify;
}

button.submitForm {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    padding: 0;
    background: var(--color2) !important;
    color: #fff;
    cursor: pointer;
}

button.submitForm:hover {
    background: var(--color1) !important;
    color: #fff;
}

/* -------------- FAQ --------------- */

.itemTestimonial {
    position: relative;
    width: calc(100% - 20px);
    margin: 10px auto;
    padding: 20px;
    border-radius: 25px;
    box-shadow: 0px 0px 25px -15px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.itemTestimonial .personInfo {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
}

.itemTestimonial .personInfo i.pic {
    position: relative;
    width: 60px !important;
    height: 60px !important;
    border-radius: 100%;
    background-color: #e9e9e9 !important;
    display: block;
}

.itemTestimonial .personInfo .caption {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.itemTestimonial .personInfo .caption span.name {
    position: relative;
    font-size: 20px;
    font-weight: 500;
}

.itemTestimonial .text {
    position: relative;
    font-size: 14px;
    line-height: 1.7;
    text-align: justify;
    color: #787878;
    display: -webkit-box;
}

.itemTestimonial small.position {
    font-size: 14px;
    color: #5c5c5c;
}


.itemService {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    padding: 20px 30px;
    background: #f7f7f7;
    border-radius: 8px;
}

.itemService i.pic {
    position: relative;
    width: 100px;
    height: 100px;
}

.itemService .title {
    position: relative;
    font-size: 18px;
    font-weight: 600;
}

.itemService .text {
    font-size: 14px;
    line-height: 1.7;
}

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

.CertificateList .container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding: 20px 0;
}

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

.ImageGallery .container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.ImageGallery.r4col .container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pageText.mt-20 {
    margin-top: 20px;
}





.customForm {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 20px auto;
    background: #f1f1f1;
    padding: 40px;
    color: #fff !important;
    border-radius: 25px;
}

.customForm .boxInput {
    position: relative;
    width: 100%;
    display: flex;
    gap: 5px;
    flex-direction: column !important;
    align-items: flex-start;
}

.customForm .boxInput label {
    position: relative;
    width: 100%;
    font-size: 16px;
    color: #333;
}

.inputCustom {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 8px !important;
}

.inputCustom .select2-container {
    width: 100% !important;
}

.inputCustom label.placeHolder {
    position: absolute;
    right: 2px;
    top: 2px;
    height: 56px;
    padding: 0 10px;
    background: transparent;
    display: flex;
    align-items: center;
    z-index: 10000000000;
    transition: all 0.2s;
    color: #000;
    border-radius: 5px;
    flex-direction: row !important;
    justify-content: flex-start;
    text-wrap: nowrap;
    pointer-events: none;
}

.boxInput.has-value1 .placeHolder,
.boxInput.has-value .placeHolder,
.inputCustom.has-value .placeHolder,
.inputCustom:focus-within .placeHolder {
    height: 24px;
    top: -12px;
    font-size: 12px;
    right: 14px;
    width: auto;
    color: #585858;
    font-weight: 500;
    width: auto !important;
    border-radius: 6px !important;
    pointer-events: none;
}

.boxInput.has-value .placeHolder:before,
.boxInput:focus .placeHolder:before,
.boxInput:focus-within .placeHolder:before {
    position: absolute !important;
    height: 50%;
    bottom: 0;
    right: 0;
    min-width: 100% !important;
    background-color: #f1f1f1;
    content: '';
    font-weight: 500;
    width: auto !important;
    border-radius: 0 0 6px 6px !important;
    pointer-events: none;
    z-index: -2;
}

.inputCustom select {
    position: relative;
    width: 100%;
    height: 60px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #777777;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 35px 0 10px;
}

.inputCustom input {
    position: relative !important;
    width: 100% !important;
    height: 60px !important;
    border-radius: 4px !important;
    border: 1px solid #919191 !important;
    background-color: #fff !important;
    padding: 0 20px 0 20px !important;
}

.inputCustom textarea {
    position: relative !important;
    width: 100% !important;
    min-height: 150px !important;
    max-height: 150px !important;
    resize: none;
    border-radius: 6px !important;
    border: 1px solid #777777 !important;
    background-color: #fff !important;
    padding: 10px 20px 10px 20px !important;
    font-family: 'BNazanin' !important;
}

.inputCustom .UploadFiles {
    position: relative !important;
    width: 100% !important;
    min-height: 120px !important;
    max-height: 120px !important;
    resize: none;
    border-radius: 6px !important;
    border: 1px solid #03707c !important;
    background-color: #f0fffc !important;
    padding: 0 20px 0 20px !important;
}

.inputCustom::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    z-index: 100;
}

.inputCustom input:focus+.placeHolder {
    background: #fff;
    height: 16px;
    top: -8px;
    font-size: 12px;
    right: 10px;
    width: auto;
}

/* upload file custom */

.UploadFiles {
    position: relative;
    width: 100%;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    border: 1px solid #024926;
    color: #ffffff52;
}

.UploadFiles input[type="file"] {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

.UploadFiles .openUploader {
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 140px;
    cursor: pointer;
    padding: 0 !important;
}

.UploadFiles .openUploader label:first-child {
    cursor: pointer;
    width: calc(100% - 10px);
    height: 50px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px 0 0;
    gap: 5px;
    background: #fff;
    border-radius: 8px;
}

.UploadFiles .openUploader .btn {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 50px;
    width: 140px;
    background: var(--color2);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.UploadFiles .openUploader .btn:hover {
    background: var(--color1);
    color: #fff;
}

.UploadFiles .openUploader .btn:active {
    background: var(--color2);
    color: var(--color5);
}

.customForm .row2Col .rowBtns {
    grid-column: span 2;
}

.customForm .titleMore.center i.icon {
    top: 0;
    bottom: 0;
    margin: auto;
}

.customForm .titleMore.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #474747;
}

/* upload file custom */
.boxInput input,
.boxInput textarea,
.boxInput select,
.boxInput .UploadFiles {
    background-color: transparent !important;
    border: none !important;
    padding: 0px 10px !important;
    width: 100% !important;
}

.customForm .boxInput input,
.customForm .boxInput textarea,
.customForm .boxInput select,
.customForm .boxInput .UploadFiles {
    width: calc(100% - 125px);
    color: #000 !important;
}

.boxInput .UploadFiles {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.frmFaq {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0px auto 40px;
}

.frmFaq .row3Col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.row2Col {
    position: relative;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.row2Col .boxInput.full {
    grid-column: span 2;
}

.row3Col .boxInput.full {
    grid-column: span 3;
}

.row4Col .boxInput.full {
    grid-column: span 4;
}

.row5Col .boxInput.full {
    grid-column: span 5;
}

.row6Col .boxInput.full {
    grid-column: span 6;
}

.boxInput textarea {
    padding: 10px;
    min-height: 140px;
    resize: none !important;
}

.customForm .boxInput select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(../img/arrSelect.jpg);
    background-repeat: no-repeat;
    background-position: 0% center;
    background-size: auto;
    text-indent: 1px;
}

.timeworkingFromTO {
    position: relative;
    width: calc(100% - 125px);
    display: flex;
    align-items: center;
    gap: 5px;
}

.timeworkingFromTO span {
    font-size: 16px;
}



.lightBoxADS {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000000000000000000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s;
}

.lightBoxADS.show {
    opacity: 1;
    pointer-events: auto;
}

.lightBoxADS i.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.lightBoxADS .ContentlightBoxADS {
    position: relative;
    z-index: 1;
    max-width: 400px;
}

.lightBoxADS .ContentlightBoxADS img {
    width: 100%;
}

.lightBoxADS i.close {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    font-size: 20px;
    border-radius: 5px;
    cursor: pointer;
}

.lightBoxADS i.close:hover {
    background: rgba(255, 255, 255, 0.5);
    color: yellow;
}




/* Basket---------------------------------------------------------------- */
.contentBasket {
    position: relative;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    width: calc(100% - 20px);
    margin: 10px auto;
}

.contentBasket .leftBasket {
    position: relative;
    width: calc(100% - 290px);
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 15px -10px;
}

.contentBasket .rightBasket {
    position: relative;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 15px -10px;
    width: 280px;
}

.StepBasket {
    position: relative;
    width: calc(100% - 30px);
    margin: 0px auto;
    max-width: unset;
    padding: 0;
    border-top: none;
    display: none;
    opacity: 0;
}

.StepBasket.active {
    display: block;
    transition-delay: 0.5s;
    opacity: 1;
}

.StepBasket h5 {
    margin: 5px 0;
}

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

span.radioGift {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc((100% / 4) - 30px);
    margin: 5px;
    transition: all 1s;
    cursor: pointer;
    background: #f3f3f3;
    padding: 10px;
    align-items: center;
}

a.backToHome {
    position: relative;
    height: 35px;
    background: #535353;
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 0;
    padding: 0 20px 0px 20px;
    line-height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

a.backToHome:hover {
    filter: brightness(0.9);
}

a.backToHome:active {
    filter: brightness(1.2);
}

i.picRadioGift {
    position: relative;
    width: 100%;
    background: no-repeat center / cover;
}

i.picRadioGift:before {
    position: relative;
    width: 100%;
    display: block;
    padding-top: 100%;
    content: '';
}

span.radioGift h2 {
    position: relative;
    width: 100%;
    font-size: 14px;
    text-align: center;
    color: #333;
}

span.radioGift .spanSelect:before {
    position: absolute;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    padding: 5px;
    border: 1px solid #939598;
    top: 5px;
    right: 5px;
    background: #fff;
    border-radius: 100%;
}

span.radioGift .spanSelect:after {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    top: 9px;
    right: 9px;
    background: #fff;
    transition: all 1s;
    border-radius: 100%;
}

span.radioGift.active .spanSelect:after {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    top: 9px;
    right: 9px;
    background: var(--color1);
    border-radius: 100%;
}

span.spanSelect {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 30px;
    color: #858585;
    padding-right: 30px;
}

h4.titlteBasketStep {
    position: absolute;
    top: -19px;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    padding: 5px;
    display: block;
    width: 120px;
    text-align: center;
    width: fit-content;
    color: #353b43;
}

.table {
    position: relative;
    width: calc(100% - 20px);
    margin: 10px auto;
    /* overflow: auto; */
    overflow: auto;
    font-weight: bold;
    padding: 0 0 20px;
    font-size: 14px;
    font-family: 'IRANYekan' !important;
}

.table .Row8 {
    position: relative;
    min-width: 960px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #f5f5f5;
    border-bottom: none;
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
    width: 100%;
}

.table .Row8:last-child {
    position: relative;
    /*min-width: 700px;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

.table .Row8.Rtitle {
    background: var(--color1);
    border: 0px solid var(--color1);
    border-radius: 0;
    padding: 5px 0;
    color: #fff !important;
}

.table .Row8.Rtitle .col {
    border-left: transparent;
}

.Row8.br .col.larg {
    position: relative;
    min-width: 539px;
    max-width: 539px;
}

.table .Row8 .col {
    position: relative;
    min-width: 48px;
    text-align: center;
    font-size: 14px;
    padding: 4px 2px;
    width: 150px;
    /* max-width: 180px; */
    min-width: 160px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center !important;
}

i.delItemBasket {
    color: var(--color1);
    cursor: pointer;
}

i.delItemBasket:hover {
    color: #03b990;
}

.table .Row8 .col.xs {
    min-width: 50px;
    max-width: 50px;
    min-width: 50px;
}

.table .Row8 .col.sm {
    min-width: 120px;
    max-width: 120px;
}

.table .Row8 .col.lg {
    min-width: 180px;
    max-width: 180px;
}

img.sizeBasketImg {
    position: relative;
    display: block;
    width: 25px;
    height: 25px;
    margin: auto;
}

.contentCustomer .row {
    flex-wrap: nowrap;
    margin: 10px 0;
    text-align: center;
}

.contentCustomer .row label {
    margin-left: 10px;
    min-width: 100px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.addressAdd {
    position: relative;
    width: calc(100% - 40px);
    margin: 20px auto;
}

.row.AddAddress .col {
    position: relative;
    padding: 10px;
    border: 1px solid #bfbfbf;
    width: 100%;
    border-bottom: 0;
    border-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.row.AddAddress:last-child .col {
    border-bottom: 1px solid #bfbfbf;
    text-align: right;
}

.row.AddAddress .col:last-child {
    border-left: 1px solid #bfbfbf;

}

.row.AddAddress .col.xs {
    max-width: 40px;
}

.row.AddAddress .col.sm {
    max-width: 70px;
}

.row.AddAddress .col.lg {
    max-width: 100%;
}

a.addAddressBtn {
    position: relative;
    color: #555;
    margin-right: 40px;
}

a.addAddressBtn:before {
    position: absolute;
    content: "+";
    display: block;
    color: var(--color1);
    margin-right: 40px;
    font-size: 24px;
    font-weight: bold;
    top: -6px;
    right: -20px;
    transition: all 1s;
    margin: auto;
}

span.RadioAddress {
    position: relative;
    width: 20px;
    border: 1px solid #bfbfbf;
    height: 20px;
    display: block;
    border-radius: 50px;
    margin: auto;
    cursor: pointer;
}

span.RadioAddress:before {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #fff;
    transition: all 1s;
}

span.RadioAddress.active:before {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #9491c5;
}

.contentCustomer .row.AddAddress {
    flex-wrap: nowrap;
    margin: 0 0;
    text-align: center;
}

.row.AddAddress.select {
    background: #ebf1ff;
}

.popupAddressAdd {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.5s;
    transform: rotateY(90deg);
    transition-delay: 0.5s;
    opacity: 0;
}

.popupAddressAdd.active {
    transition: all 0.5s;
    transform: rotateY(0deg);
    opacity: 1;
}

.cntntAddressAdd {
    position: relative;
    max-width: 450px;
    margin: auto;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #354da2;
    box-shadow: 0 2px 11px -5px #000;
    color: #fff;
    font-size: 16px;
    transition: all 0.5s;
    transform: perspective(360px) rotateX(90deg);
    transition-delay: 0.5s;
    opacity: 0;
    width: calc(100% - 20px);
}

.popupAddressAdd.active .cntntAddressAdd {
    transition: all 0.5s;
    transform: perspective(360px) rotateX(0deg);
    opacity: 1;
    transition-delay: 0.5s;
}

.cntntAddressAdd label {
    position: relative;
    display: block;
    background: transparent;
    width: 100%;
    margin: 10px 0;
    text-align: center !important;
}

.cntntAddressAdd input.addRealAddres {
    position: relative;
    width: calc(100% - 40px);
    border: 1px solid var(--color1);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    margin: 10px 0;
}

.cntntAddressAdd button.btnaddAddresss {
    position: relative;
    width: 160px;
    height: 40px;
    background: #1e2e69;
    border: none;
    color: #e0e7ff;
    font-size: 16px;
    border-radius: 10px 10px 0 0;
}

.cntntAddressAdd button.btnaddAddresss:hover {
    background: #e0e7ff;
    color: #1e2e69;
}

.cntntAddressAdd .closeaddres {
    position: absolute;
    top: 6px;
    left: 10px;
    color: #ffe000;
    font-size: 20px;
    cursor: pointer;
    z-index: 100;
}

.StepBasket .titleAccordion.nobg {
    margin: 0 0 20px;
}

.stepbystep {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.stepbystep.s1:after {
    height: 25px;
}

.stepbystep.s2:after {
    height: 105px;
}

.stepbystep.s3:after {
    height: 185px;
}

.stepbystep.s4:after {
    height: 265px;
}

.stepbystep.s5:after {
    height: 345px;
}

.stepbystep.s6:after {
    height: 425px;
}

h4.titlestepe {
    position: absolute;
    top: 0;
    right: 50px;
    margin: auto;
    bottom: 0;
    width: calc(100% - 50px);
    font-size: 12px;
    text-align: center;
    padding: 0;
    transition: all 1s;
    bottom: 0;
    height: 50px;
    background: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px 0 0;
    border-radius: 0 !IMPORTANT;
    font-weight: normal !important;
}

h4.titlestepe small {
    position: relative;
    z-index: 1;
    font-size: 14px;
    color: #a6a6a6;
    transition: all 1s;
    font-weight: bold;
}

.stepe {
    position: relative;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    margin: 0;
    justify-content: space-between;
    border-bottom: 1px solid #e0e0e0;
    z-index: 11;
}

.stepe:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(100% - 33px);
    background: #fff;
    content: '';
    transition: all 0.5s;
    transform-origin: right center;
    transform: scaleX(0);
}

.ProertYContactBox h3 {
    font-size: 14px;
    margin: 14px 0;
    font-size: 14px;
}

.stepe span {
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--color1) !important;
    display: block;
    right: 0;
    top: 0;
    z-index: 1000000000;
    color: #ffffff;
    transition: all 0.5s;
    border: none !;
    border-radius: 0 !important;
    bottom: 0;
    margin: auto;
    z-index: 10;
}

.stepe span i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform: rotate(0deg);
    transition: all 1s;
}

.stepe span i:after {
    position: absolute;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: #dddddd;
    display: block;
    left: auto;
    border-radius: 100px;
    margin: auto;
    bottom: 0;
    transform-origin: center;
    transform: rotate(146deg);
    right: -8px;
    transition: all 1s;
    top: 0;
}

.stepe label {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    color: #FFF !IMPORTANT;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    z-index: 10000000000;
    transition: all 1s;
    width: 100%;
    font-size: 16px;
    height: 100%;
    font-weight: bold;
}

h4.titlestepe {
    --brColor: #b2dfe3;
    --brColor1: var(--color1);
}

h4.titlestepe:before {
    position: absolute;
    right: 2px;
    width: 2px;
    height: calc(100% - 4px);
    content: '';
    display: block;
    border-style: solid;
    border-color: var(--brColor);
    border-width: 2px 0;
    top: 0;
    opacity: 0.5;
    transition: all 0.2s;
}

h4.titlestepe:after {
    position: absolute;
    left: 2px;
    width: 2px;
    height: calc(100% - 4px);
    content: '';
    display: block;
    border-style: solid;
    border-color: var(--brColor);
    border-width: 2px 0;
    top: 0;
    opacity: 0.5;
    transition: all 0.2s;
}

h4.titlestepe {
    border-style: solid;
    border-color: transparent;
    border-width: 0px !important;
}

h4.titlestepe small {
    position: relative;
    width: calc(100% + 10px);
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: -10px;
    padding: 0 10px 0 0;
}

h4.titlestepe small:before {
    position: absolute;
    right: 7px;
    width: 8px;
    height: calc(100% - 4px);
    content: '';
    display: block;
    border-style: solid;
    border-color: var(--brColor);
    border-width: 2px 0;
    top: 0;
    opacity: 0.5;
    transition: all 0.2s;
}

h4.titlestepe small:after {
    position: absolute;
    left: 7px;
    width: 8px;
    height: calc(100% - 4px);
    content: '';
    display: block;
    border-style: solid;
    border-color: var(--brColor);
    border-width: 2px 0;
    top: 0;
    opacity: 0.5;
    transition: all 0.2s;
}

h4.titlestepe i {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: calc(100% - 40px);
    border-style: solid;
    border-color: var(--brColor);
    border-width: 2px 0;
    height: 100%;
    margin: 0 auto;
    opacity: 0.5;
    transition: all 0.2s;
}

h4.titlestepe i:before {
    position: absolute;
    top: -2px;
    right: 0;
    content: '';
    left: 0;
    width: 80px;
    border-style: solid;
    border-color: var(--brColor1);
    border-width: 2px 0;
    height: 100%;
    margin: 0 auto;
    opacity: 0.8;
    transition: all 0.2s;
}

h2.titleSection span,
.titleAccordion label.titleLabel {
    position: relative;
    height: calc(100% + 4px);
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--color1);
    padding: 0 5px 0 20px;
}

.stepbystep.s1 .stepe:nth-child(1) h4.titlestepe {
    background-color: transparent;
}

.stepbystep.s1 .stepe:nth-child(1) h4.titlestepe {
    border-style: solid;
    --brColor: #fddebb;
    --brColor1: var(--color2);
    border-width: 2px 2px 2px 0px;
    color: var(--color1);
}

.stepbystep.s1 .stepe:nth-child(1) h4.titlestepe small {
    color: #333;
    font-size: 14px;
    font-weight: bold;
}

.stepbystep.s1 .stepe:nth-child(1) span {
    background: var(--color2) !important;
    border-color: var(--color2);
}

.stepbystep.s1 .stepe:nth-child(1) span:before {
    background-color: var(--color1);
}

.stepbystep.s1 .stepe:nth-child(1) label {
    color: var(--color1);
}

.stepbystep.s2 .stepe:nth-child(-n+2) h4.titlestepe {
    border-style: solid;
    --brColor: #fddebb;
    --brColor1: var(--color2);
    border-width: 2px 2px 2px 0px;
    color: var(--color1);
}

.stepbystep.s2 .stepe:nth-child(-n+2) h4.titlestepe small {
    color: #333;
    font-size: 14px;
    font-weight: bold;
}

.stepbystep.s2 .stepe:nth-child(-n+2) span {
    background: var(--color2) !important;
    border-color: var(--color2);
}

.stepbystep.s2 .stepe:nth-child(-n+2) span:before {
    background-color: var(--color1);
}

.stepbystep.s2 .stepe:nth-child(-n+2) label {
    color: var(--color1);
}

.stepbystep.s3 .stepe:nth-child(-n+3) h4.titlestepe {
    border-style: solid;
    --brColor: #fddebb;
    --brColor1: var(--color2);
    border-width: 2px 2px 2px 0px;
    color: var(--color1);
}

.stepbystep.s3 .stepe:nth-child(-n+3) h4.titlestepe small {
    color: #333;
    font-size: 14px;
    font-weight: bold;
}

.stepbystep.s3 .stepe:nth-child(-n+3) span {
    background: var(--color2) !important;
    border-color: var(--color2);
}

.stepbystep.s3 .stepe:nth-child(-n+3) span:before {
    background-color: var(--color1);
}

.stepbystep.s3 .stepe:nth-child(-n+3) label {
    color: var(--color1);
}


.stepbystep.s4 .stepe:nth-child(-n+4) h4.titlestepe {
    border-style: solid;
    --brColor: #fddebb;
    --brColor1: var(--color2);
    border-width: 2px 2px 2px 0px;
    color: var(--color1);
}

.stepbystep.s4 .stepe:nth-child(-n+4) h4.titlestepe small {
    color: #333;
    font-size: 14px;
    font-weight: bold;
}

.stepbystep.s4 .stepe:nth-child(-n+4) span {
    background: var(--color2) !important;
    border-color: var(--color2);
}

.stepbystep.s4 .stepe:nth-child(-n+4) span:before {
    background-color: var(--color1);
}

.stepbystep.s4 .stepe:nth-child(-n+4) label {
    color: var(--color1);
}

.stepbystep.s5 .stepe:nth-child(-n+5) h4.titlestepe {
    border-style: solid;
    --brColor: #fddebb;
    --brColor1: var(--color2);
    border-width: 2px 2px 2px 0px;
    color: var(--color1);
}

.stepbystep.s5 .stepe:nth-child(-n+5) h4.titlestepe small {
    color: #333;
    font-size: 14px;
    font-weight: bold;
}

.stepbystep.s5 .stepe:nth-child(-n+5) span {
    background: var(--color2) !important;
    border-color: var(--color2);
}

.stepbystep.s5 .stepe:nth-child(-n+5) span:before {
    background-color: var(--color1);
}

.stepbystep.s5 .stepe:nth-child(-n+5) label {
    color: var(--color1);
}

.discountCode {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 0;
}

.discountCode label {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.discountCode .contentDiscount {
    position: relative;
    width: 250px;
    height: 30px;
}

input.dicountInput {
    height: 30px;
    background: #fff;
    border: 1px solid #d4d4d4;
    padding: 0 10px 0 92px;
    width: 100%;
    min-height: unset;
}

button.discountBtn {
    background: #878787;
    border: none;
    position: relative;
    height: 30px;
    width: 90px;
    min-height: 30px;
    top: 0px;
    left: 0;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #fff;
    padding: 0;
    cursor: pointer;
    position: absolute;
    margin: 0;
    display: flex;
}

button.discountBtn:hover {
    filter: brightness(0.9);
}

button.discountBtn:active {
    filter: brightness(1.2);
}

.row {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

button.btnStep {
    position: relative;
    height: 35px;
    background: var(--color2);
    color: #fff;
    cursor: pointer;
    border: none;
    padding: 0 20px 0px 20px;
    line-height: 12px;
    font-weight: bold;
}

button.btnStep:hover {
    filter: brightness(0.9);
}

button.btnStep:active {
    filter: brightness(1.2);
}

button.btnStep.btnbackStep {
    background: #878787;
}

button.btnStep.btnbackStep:before {
    left: auto;
    right: 10px;
}

h4.label small {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.col.btnsENDbasket {
    position: relative;
    display: flex;
    flex-direction: row;
}

.col.btnsENDbasket button {
    position: relative;
    height: 35px;
    border: none;
    padding: 0 20px;
    margin: 0 2px;
    cursor: pointer;
    color: #fff;
    min-width: 120px;
    margin: 0 2px;
    border-radius: 0;
}

.row.AddAddress.Rtitle .col:first-child {
    border-radius: 0 15px 0 0;
}

.row.AddAddress.Rtitle .col:last-child {
    border-radius: 15px 0 0 0;
}

button.btnPay {
    background: var(--color1);
}

button.btnPay:hover {
    background: #8d7140;
}

button.btnPayHome {
    background: var(--color1);
}

button.btnPayHome:hover {
    background: #8d7140;
}

button.btnWallet {
    background: #6a6a6a;
}

button.btnWallet:hover {
    background: #bfbbbb;
}

button.btnPayBank {
    background: var(--color1);
}

button.btnPayBank:hover {
    background: #8d7140;
}

.contentCustomer.frmss textarea {
    min-width: calc(100% - 110px) !important;
    max-width: calc(100% - 110px) !important;
}

.col.btnsENDbasket {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.table .Row8 .col {
    border-left: 1px solid #f5f5f5;
}

.table .Row8 .col.lg.lf {
    text-align: right;
    padding: 0 8px 0 0;
    min-width: 115px;
    max-width: 115px;
    border-right: 1px solid #f5f5f5;
}

.table .tblmore .Row8 .col.lg.lf {
    text-align: right;
    padding: 0 8px 0 0;
    min-width: 120px;
    max-width: 120px;
    border-right: 1px solid #f5f5f5;
}

.br {
    border-left: 1px solid #fff !important;
}

.contentCustomer .row {
    flex-wrap: nowrap;
    margin: 10px 0;
    text-align: center;
}

.contentCustomer .row label {
    margin-left: 10px;
    min-width: 100px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    max-width: 100px;
}

.contentCustomer .row input,
.contentCustomer .row select {
    width: calc(100% - 20px);
    padding: 10px;
    border-radius: 0px;
    height: 40px;
}

.contentCustomer .row textarea {
    width: calc(100% - 20px);
    padding: 10px;
    border-radius: 0px;
    height: 140px;
    resize: none;
}

.boxRahgiri:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    position: absolute;
    right: 8px;
    top: 0;
    color: var(--color1);
}

.boxRahgiri {
    position: relative;
    width: calc(100% - 80px);
    margin: 10px auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: normal;
    padding-right: 30px;
}

.boxRahgiri label {
    font-size: 18px;
    color: #888888;
    margin: 0 5px;
}

label.rahgitiCode {
    position: relative;
    width: 300px;
    display: block;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}

.rowDetail.full .socialsshare {
    width: 100%;
    margin: 10px 0;
}

.titleDetail {
    position: relative;
    width: calc(100% - 20px);
    padding: 0 10px;
    height: 80px;
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
}


.itemAddress {
    position: relative;
    width: 100%;
    min-height: 40px;
    border: 1px solid #bebebe;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-width: 1px 1px 0 1px;
}

.itemAddress:last-child {
    border-width: 1px;
}

.itemAddress .checkboxs label.lblinput {
    position: relative;
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 40px 0 10px;
    justify-content: flex-start;
}

.formAddress {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 0 0;
}

.itemAddress .checkboxs input[type=radio]+label.lblinput:before {
    right: 10px;
}

.itemAddress .checkboxs input[type=radio]+label.lblinput:after {
    right: 13px;
}

.itemAddress .checkboxs label.lblinput span {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bebebe;
    border-width: 0 1px;
    margin-left: 5px;
}

.itemAddress .checkboxs input[type=radio]+label.lblinput * {
    color: #666;
}

.itemAddress .checkboxs input[type=radio]:checked+label.lblinput * {
    color: var(--color1);
}

.itemAddress .checkboxs input[type=radio]+label.lblinput:after {
    background: var(--color1);
    background: radial-gradient(circle, var(--color1) 0%, var(--color1) 100%);
    transition: all 0.5s cubic-bezier(0.04, 1.13, 0.02, 1.14);
}

.tblmore .col.line {
    position: relative;
    min-width: 690px !important;
    max-width: 690px !important;
    padding: 0 10px;
}

.StepBasket .row {
    justify-content: space-between;
}

.StepBasket .row .col {
    width: auto;
}

.StepBasket .row button.btnStep {
    position: relative;
    width: auto;
    padding: 0 30px;
    font-size: 14px;
    font-weight: normal;
}

.col.btnsENDbasket button {
    width: auto;
}

ol#secssion3 {
    padding: 0 !important;
    margin: 0 !important;
}

div.tblmore {
    position: relative;
    padding: 0 0;
    overflow: hidden;
    min-width: 960px;
}

.titleColResponsive {
    display: none;
}

label.titleAdd {
    position: relative;
    padding: 10px 0px;
    font-size: 16px;
    font-weight: bold;
    display: block;
}

.rowCustom.fend {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

button.btnAddAddress {
    width: auto;
    margin: 10px 0;
    background: var(--color1);
    padding: 0 30px;
    color: #fff;
    height: 40px;
    border: none !important;
}

button.btnAddAddress:hover {
    background: #007881;
    color: #3fe6f3;
}

button.btnAddAddress:active {
    background: #3fe6f3;
    color: #007881;
}

.contentBasket input,
.contentBasket select,
.contentBasket textarea {
    border-radius: 6px !important;
    background-color: #fff !important;
    border: 1px solid #d4d4d4;
}

button.btnStep.btnNextStep {
    border-radius: 0;
}

section.basketContainer {
    position: relative;
    padding-bottom: 60px !important;
}

.itemAddress .checkboxs label.lblinput:before {
    position: absolute;
    width: 16px;
    height: 16px;
    content: '';
    background: transparent;
    right: 10px !important;
    left: auto;
    border-radius: 100%;
    border: 2px solid #a5a5a5;
}

.itemAddress .checkboxs label.lblinput:after {
    position: absolute;
    width: 12px;
    height: 12px;
    content: '';
    background: transparent;
    right: 14px !important;
    left: auto;
    border-radius: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.2s !important;
    transform: scale(2.5);
    opacity: 0;
}

.itemAddress .checkboxs input[type=radio]:checked+label.lblinput:after {
    transform: scale(1);
    opacity: 1;

}

.formAddress input.getAddress {
    position: relative;
    height: 50px;
    padding: 0 10px;
}

.contentCustomer.frmss .row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contentCustomer.frmss .row textarea {
    width: 100% !important;
    min-width: 100% !important;
}

.titleCard {
    position: relative;
    font-size: 20px;
    font-weight: 300;
    margin: 10px 0 20px;
}

@media only screen and (max-width:768px) {

    ol#secssion3 {
        padding: 0 !important;
        margin: 0 !important;
        grid-gap: 10px;
        overflow: hidden;
        width: 100%;
        max-width: unset !important;
        min-width: unset !important;
        display: flex;
        flex-wrap: wrap;
    }

    ol#secssion3 .Row8 {
        margin: 0;
    }

    .table .Row8:last-child {
        position: relative;
        min-width: unset;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
    }

    .contentBasket .rightBasket {
        width: 100%;
    }

    .contentBasket .leftBasket {
        width: 100%;
    }

    .table {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: px;
        overflow: hidden;
        width: 100%;
        max-width: unset !important;
        min-width: unset !important;
        display: flex;
        flex-wrap: wrap;
    }

    .table .Row8 {
        position: relative;
        width: calc((100% / 1) - 10px);
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-width: unset;
        background: #fff;
        padding: 20px 20px;
        border-radius: 8px;
        box-shadow: 0px 0px 20px -13px rgba(0, 0, 0, 0.5);
        margin: 7px 7px;
    }

    .table .Row8 .col.xs:first-child {
        display: none;
    }

    .table .Row8 .col.lg:nth-child(2) {
        grid-column: span 2;
        text-align: right;
        flex-direction: row;
        width: 100% !important;
    }

    .table .Row8.Rtitle {
        display: none !important;
    }

    .table .Row8 .col {
        border: none !important;
        display: grid;
        max-width: 100% !important;
        width: 100% !important;
        min-width: unset !important;
        margin: 0px 0;
        grid-template-columns: auto 1fr;
        align-items: center !important;
        gap: 4px;
    }

    .titleColResponsive {
        display: flex;
        position: relative;
        padding: 5px 10px;
        background: #838383;
        border-radius: 4px;
        color: #fff;
    }

    .table .Row8 .col span:not(.titleColResponsive) {
        background: #ededed;
        width: 100%;
        padding: 5px 10px;
        border-radius: 4px;
    }

    .table .Row8 .col span {
        margin: 0 5px 0 0;
    }

    .table .Row8 .col.removeItemBasket {
        position: absolute;
        left: 0;
        width: 30px !important;
        height: 30px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
        margin: 0;
        min-width: unset !important;
    }

    .table div.tblmore {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        min-width: unset;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .table div.tblmore .Row8 {
        width: 100%;
    }

    .table div.tblmore#table-discount .Row8:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .table div.tblmore#table-discount .Row8:last-child .discountCode {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }

    .table div.tblmore {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        min-width: unset;
    }

    .table div.tblmore .Row8 {
        width: 100%;
        grid-template-columns: 1fr;
        display: flex;
        justify-content: center;
        flex-direction: column !important;
        align-items: center;
        padding: 0px;
        margin: 0;
        box-shadow: none !important;
    }

    .table div.tblmore span:not(.titleColResponsive) {
        background: transparent !important;
    }

    .table div.tblmore .titleColResponsive {
        display: none !important;
    }
}

@media only screen and (max-width: 580px) {

    .table .Row8 .col,
    .table .Row8 .col.lg:nth-child(2) {
        grid-template-columns: 1fr !important;
    }
}

@media only screen and (max-width: 480px) {
    .table .Row8 .col {
        font-size: 12px;
        font-weight: 400 !important;
    }
}

/* Basket---------------------------------------------------------------- */


.menuCafe {
    position: relative;
    width: 100%;
    display: inline;
}

.navTop {
    position: sticky;
    top: 0px;
    right: 0;
    width: 100%;
    background: #fff;
    padding: 10px;
    box-shadow: 0px 10px 16px -16px rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.contentMenuCafe {
    position: relative;
    overflow: auto;
    max-width: 100%;
    min-width: 100%;
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    height: 150px;
}

.itemMenuCafe {
    position: relative;
    padding: 10px;
    background: #f3f3f3;
    border-radius: 8px;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.itemMenuCafe:hover {
    background: #d9edff;
}

.itemMenuCafe.active {
    background: #a7ffc6;
}

.itemMenuCafe i.icon {
    position: relative;
    width: 60px;
    height: 60px;
    background: no-repeat center / auto 100%;
}

.itemMenuCafe .fatitle {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin: 10px 0 0;
}

.itemMenuCafe .entitle {
    position: relative;
    font-size: 12px;
    text-align: center;
    font-weight: 500;
    color: #858585;
    line-height: 1.5;
}

.menuCafe .swiper-button-next,
.menuCafe .swiper-button-prev {
    width: 12px;
    height: 26px;
}

.menuContents {
    position: relative;
    width: 100%;
    padding: 20px 0;
}

.menuContents>.container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
}

.MenuCafeDivision {
    position: relative;
    padding: 20px 20px;
    background: #f9f9f9;
    border-radius: 10px;
}

.listProductCafeMenu {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 20px 0 0;
}

.itemProdMenu {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    gap: 15px;
    box-shadow: 0px 0px 20px -15px rgba(0, 0, 0, 0.5);
}

.itemProdMenu .pic {
    position: relative;
    width: 100px;
    height: 100px;
    background: #e7e7e7;
    border-radius: 10px;
}

.itemProdMenu .pic i.bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.itemProdMenu .pic i.bg.okloadlazy {
    background-size: cover !important;
}

.prodContentModal .contentProdMenu .rateStar,
.itemProdMenu .rateStar {
    width: 80px;
    height: 16px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.prodContentModal .contentProdMenu .rateStar:before,
.prodContentModal .contentProdMenu .rateStar:after,
.itemProdMenu .rateStar:before,
.itemProdMenu .rateStar:after {
    background-size: auto 16px;
}

.titleMenuCafe {
    position: relative;
}

.titleMenuCafe:before {
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 25%;
    height: 1px;
    content: '';
    border-bottom: 1px dashed #bbb;
}

.titleMenuCafe .title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 55px;
    height: 40px;
    font-size: 24px;
    font-weight: 500;
}

.titleMenuCafe .title .entitile {
    font-weight: 200;
    color: #9f9f9f;
}

.titleMenuCafe .title i.icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: no-repeat center / cover;
    bottom: 0;
    margin: auto;
}

.itemProdMenu .titleProd .caption {
    position: relative;
    font-size: 12px;
    color: #7c7c7c;
    line-height: 1.7;
    padding-left: 110px;
}

.itemProdMenu .contentProdMenu {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.itemProdMenu .contentProdMenu .priceAdd {
    position: relative;
    width: 100%;
}

.itemProdMenu .contentProdMenu .priceAdd .price {
    font-size: 16px;
    font-weight: 700;
}

.itemProdMenu .contentProdMenu .priceAdd .price small {
    position: relative;
    font-size: 10px;
    font-weight: 500;
}

.itemProdMenu .contentProdMenu .titleProd {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

button.addToCart {
    position: absolute;
    left: 0px;
    bottom: -5px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none !important;
    font-size: 14px;
    border-radius: 100%;
    background: var(--color2) !important;
    color: #fff;
    box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

button.addToCart {
    background: #9d0e13 !important;

}

button.addToCart:after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 100%;
    border-right-color: #fff;
    content: '';
    opacity: 0;
    transition: all 0.2s;
}

button.addToCart.loading {
    font-size: 0;
}

button.addToCart.loading:after {
    animation: loadingAnim 1s infinite linear;
    opacity: 1;
}

.cart-button-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-direction: row-reverse;
}

button.addToCart {
    position: relative;
    left: 0;
    bottom: 0px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none !important;
    font-size: 14px;
    border-radius: 100%;
    background: var(--color2) !important;
    color: #fff;
    box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    margin: 0;
}

button.addToCart {
    background: #9d0e13 !important;
}

.item-count {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding: 2px 8px;
    border-radius: 0;
    min-width: 30px;
    text-align: center;
}

button.removeFromCart {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: none;
    background: #6c757d;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    overflow: hidden;
}

button.removeFromCart:hover {
    background: #dc3545;
}

button.removeFromCart i {
    font-size: 14px;
}

button.addToCart.loading {
    font-size: 0;
}

button.addToCart.loading:after {
    animation: loadingAnim 1s infinite linear;
    opacity: 1;
}

.CounterBtns {
    position: absolute;
    left: 0;
    bottom: 0;
}

@keyframes loadingAnim {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}








.counterProd {
    position: relative;
    display: flex;
    align-items: center;
    direction: ltr !important;
    width: 80px;
}

.counterProd input.numberCount {
    width: 100% !important;
    height: 30px;
    border: 1px solid #252070 !important;
    border-radius: 0 !important;
    border-width: 1px 0 !important;
    text-align: center;
    color: #444;
}

/* حذف اسپینر در مرورگرهای WebKit (Chrome, Safari, Edge, Opera) */
.counterProd input.numberCount::-webkit-inner-spin-button,
.counterProd input.numberCount::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* حذف اسپینر در Firefox */
.counterProd input.numberCount {
    -moz-appearance: textfield;
    appearance: textfield;
}

.counterProd button.btnPlus {
    position: relative;
    min-width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    height: 30px;
    border: none !important;
    background: #252070;
    color: #fff !important;
    cursor: pointer;
}

.counterProd button.btnPlus:hover {
    background: #2d23bd;
}

.counterProd button.btnMinus {
    position: relative;
    min-width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    height: 30px;
    border: none !important;
    background: #252070;
    color: #fff !important;
    cursor: pointer;
}

.counterProd button.btnMinus:hover {
    background: #2d23bd;
}

@keyframes loadingAnim {
    to {
        transform: rotate(360deg);
    }
}

button.addToCart span.tooltips {
    position: absolute;
    left: 0;
    bottom: calc(100% + 5px);
    text-wrap: nowrap;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.2s;
    transform-origin: left center;
    transform: scale(0);
    background: rgba(0, 0, 0, 0.9);
    padding: 6px 10px;
    color: #fff !important;
    border-radius: 6px;
}

button.addToCart:hover span.tooltips {
    transform: scale(1);
}

.prodContentModal {
    position: relative;
    width: 100%;
    margin: 0px 0 0;
    display: flex;
    flex-direction: column;
}

.prodContentModal .pic {
    position: relative;
    display: block;
    width: 100%;
    margin: auto;
    background: #eee;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.prodContentModal .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 50%;
}

.prodContentModal .pic i.bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center / cover;
}

.prodContentModal .contentProdMenu {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
}

.prodContentModal .contentProdMenu .titleProd {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 18px;
}

.prodContentModal .contentProdMenu .titleProd small.caption {
    position: relative;
    font-size: 14px;
    color: #8f8f8f;
    min-height: 60px;
    padding-left: 110px;
}

.prodContentModal .contentProdMenu .rateStar {
    position: absolute;
    left: 0;
    top: 0;
}

.prodContentModal .contentProdMenu button.addToCart {
    bottom: 0 !important;
    width: 40px;
    height: 40px;
    font-size: 18px;
}

.basketMenu {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px -8px rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.basketMenu .basketSmall {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    color: var(--color2);
}

.basketMenu .basketSmall .cart-total-count {
    position: absolute;
    font-size: 16px;
    background: var(--color2);
    border-radius: 100%;
    width: 25px;
    height: 25px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -10px;
    left: 0;
    right: 0;
    margin: auto;
}

.sec2Contact ,
.sec1About {
    position: relative;
    width: 100%;
    padding: 60px 0;
}


.sec2Contact .titleMore ,
.sec1About .titleMore {
    flex-direction: column;
    color: #959595;
    font-size: 22px;
    gap: 10px;
}

.sec2Contact .titleMore .title ,
.sec1About .titleMore .title {
    color: #2b2b2b;
    font-weight: 600;
}

.sec2Contact i.bg ,
.sec1About i.bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: repeat center;
    background-size: auto !important;
    opacity: 0.2;
}

.sec1About .rowBtns {
    margin-top: 30px;
}

.sec1About .col2 {
    position: relative;
    padding: 60px 0 60px 20%;
    display: flex;
    flex-direction: column;
}

.sec1About .col1 .pics {
    position: relative;
}

.sec1About .col1 .pics:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 65%;
}

.sec1About .col1 .pics .pic {
    width: 223px !important;
    transition: all 0.5s;
}

.sec1About .col1 .pics .pic:before {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    content: '' !important;
    padding-top: 140% !important;
}

.sec1About .col1 .pics .pic img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    border-radius: 10px !important;
    border: 5px solid #ffffff;
    box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 0.5);
}

.sec1About .col1 .pics .pic.pic1 {
    position: absolute;
    right: 15%;
    top: 35%;
    z-index: 3;
    transform: translate(210%, 40%);
    opacity: 0;
}

.sec1About .col1 .pics .pic.pic1 {
    transform: translate(0%, 0%);
    opacity: 1;
}

.sec1About .col1 .pics .pic.pic2 {
    position: absolute;
    right: 35%;
    top: 3%;
    z-index: 2;
    transform: translate(0px, -210%) rotate(245deg);
    opacity: 0;
}

.sec1About .col1 .pics .pic.pic2 {
    transform: translate(0px, 0%) rotate(0deg);
    opacity: 1;
}

.sec1About .col1 .pics .pic.pic3 {
    position: absolute;
    right: 58%;
    top: 24%;
    z-index: 1;
    transform: translate(-290%, -210%);
    opacity: 0;
}

.sec1About .col1 .pics .pic.pic3 {
    transform: translate(0%, 0%);
    opacity: 1;
}




.boxShowmore .contentBoxShowMore {
    color: #1b1b1b;
    transition: all 0.5s;
    padding: 0;
    margin: 20px 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: unset !important;
    line-height: 2;
    font-size: 16px;
    text-align: justify;
}

.boxShowmore.open .contentBoxShowMore {
    -webkit-line-clamp: 10000;
}

.boxShowmore {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.btnShowmore {
    position: relative;
    display: flex;
    align-items: center;
    height: 45px;
    font-size: 14px;
    padding-left: 30px;
    cursor: pointer;
    transition: all 0.2s;
    padding-left: 70px;
}

.btnShowmore:hover {
    color: var(--color1);
}

.btnShowmore:before {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    content: '';
    background: url(../img/arrD.png) no-repeat center / 16px 12px;
}

.btnShowmore:hover:before {
    filter: brightness(10);
}

.boxShowmore.open .btnShowmore:before {
    transform: rotate(180deg);
}

.btnShowmore:after {
    position: relative;
    display: block;
    content: attr(data-text1);
}

.boxShowmore.open .btnShowmore:after {
    position: relative;
    display: block;
    content: attr(data-text2);
}

.boxShowmore.open .contentBoxShowMore {
    max-height: 1000px;
}

.sec3About {
    position: relative;
    padding: 80px 0;
}
.title2line {
    position: relative;
    padding: 60px 0 0px;
}
.title2line .title {
    position: relative;
    padding-right: 35px;
    font-size: 28px;
    font-family: 'IRANYekan';
    color: #1b1b1b;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.title2line .title .icon:before {
    position: absolute;
    bottom: calc(100% + 2px);
    width: 4px;
    height: 40px;
    content: '';
    background: #c0171d;
    left: 0;
    right: 5px;
    margin: auto;
    border-radius: 10px 10px 0 0;
}
.title2line .title .icon:after {
    position: absolute;
    top: calc(100% + 2px);
    width: 4px;
    height: 40px;
    content: '';
    background: #c0171d;
    left: 0;
    right: 5px;
    margin: auto;
    border-radius: 0 0 10px 10px;
}
.title2line .title .subTitleAbout {
    position: relative;
    font-size: 24px;
    font-weight: 500;
}

.title2line .title .icon {
    position: absolute;
    width: 30px;
    height: 35px;
    right: -5px;
    top: 0;
}
.itemSlidePhoto {
    position: relative;
    width: 100%;
}

.itemSlidePhoto .pic {
    position: relative;
    width: 100%;
    display: block;
}

.itemSlidePhoto .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 60%;
}

.itemSlidePhoto .pic i {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.itemSlidePhoto .pic i.okloadlazy {
    background-repeat: no-repeat;
    background-size: cover !important;
    background-position: center !important;
}
.sec4About .col1 {
    position: relative;
    padding: 0 20px 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec4About .col2 {
    position: relative;
    padding: 0 20px;
}

.sec4About .col2 .sliderBox {
    position: relative;
    padding: 0 20px;
}
.sec4About .col2 .sliderBox .customCarousel {
    border-radius: 8px;
}
.sec4About {
    position: relative;
    width: 100%;
    padding: 80px 0;
}
a.morebtn {
    position: relative;
    height: 20px;
    padding: 0 0 0 25px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 800;
}
a.morebtn:hover {
    color: red;
}
a.morebtn:before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    content: '';
    background: url(../img/arrD.png) no-repeat center / 16px 12px;
    transform: rotate(90deg);
    opacity: 0.5;
    transition: all 0.2s;
}
a.morebtn:hover:before {
    left: -10px;
}
.sec4About .container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 80px;
}
.sec4About .container .itemAboutBox:nth-child(even) .row2col .col1 {
    grid-column: 2;
    grid-row: 1;
}

.sec4About .container .itemAboutBox:nth-child(even) .row2col .col2 {
    grid-column: 1;
    grid-row: 1;
}
.sec5About {
    position: relative;
    padding: 80px 0;
    width: 100%;
    overflow: hidden;
}
.sec5About .titleMore .title {
    color: #fff;
}
.sec6About {
    position: relative;
    padding: 80px 0;
    clear: both !important;
    display: flex;
    flex-direction: column;
}
.sec7About {
    position: relative;
    width: 100%;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
}

.ItemBlogCustom {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.ItemBlogCustom:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 100%;
    background: #fff;
}

.ItemBlogCustom i.pic {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.ItemBlogCustom i.pic.okloadlazy {
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat  !important;
}
.ItemBlogCustom i.pic:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 31px;
    z-index: 10;
    transition: all 0.2s;
    opacity: 0;
    background-color: rgba(0,0,0,0.5);
}
.ItemBlogCustom:hover i.pic:before {
    opacity: 1;
}
.sec8About {
    position: relative;
    width: 100%;
    padding: 80px 0;
}
.sec8About .titleMore {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sec8About .titleMore span.subTitleAbout {
    font-size: 20px;
}
.sliderPopup.testimonials {
    width: calc(100vw - var(--contoffsetleft) - 10px);
}
.sliderPopup.testimonials .NextPrevSlider {
    position: absolute;
    left: -80px;
    width: 160px !important;
    margin: 0;
    top: auto;
    height: 50px;
    bottom: -60px;
}

.ItemTestimonial {
    position: relative;
    width: 100%;
    padding: 30px;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ItemTestimonial i.pic {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 6px;
}

.ItemTestimonial i.pic.okloadlazy {
    background-size: cover;
}

.ItemTestimonial .title {
    position: relative;
    font-size: 20px;
    color: #1a1a46;
    padding-left: 40%;
    line-height: 1.6;
}

.ItemTestimonial .caption {
    position: relative;
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ItemTestimonial i.texture {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    opacity: 0;
}
.ItemTestimonial:hover i.texture {
    opacity: 1;
}
.ItemTestimonial i.texture.okloadlazy {
    background-size: 100% !important;
    background-position: top center !important;
}

.itemHistory {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.itemHistory .pic {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 6px;
}

.itemHistory .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemHistory .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 63%;
}

.itemHistory  .contentItemHistory {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    color: #fff;
    gap: 8px;
}

.itemHistory .contentItemHistory .title {
    font-size: 20px;
    font-weight: 500;
}

.itemHistory .contentItemHistory .subtitle {
    font-size: 16px;
    font-weight: 300;
}
.towSlider {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 30px 0 0;
}
.units {
    position: relative;
    width: 100%;
    display: flex;
    gap: 40px;
    justify-content: space-evenly;
}
.itemunit {
    position: relative;
    width: calc(100% / 5);
    display: flex;
    max-width: 280px;
    flex-direction: column;
}
.itemunit .titleunit {
    position: relative;
    font-size: 20px;
    font-weight: 600;
    color: #313131;
    padding-right: 50px;
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 5px;
    margin-right: -20px;
}
.itemunit .contentUnit {
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(322deg, #f0f0f059, transparent);
}
.itemunit .contentUnit:after {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    content: '';
    background: #919191;
    right: 0;
}
.itemunit .titleunit .icon {
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
}

.itemunit .titleunit .icon.okloadlazy {
    background-size: 100% !important;
}
.itemunit .telmail {
    font-size: 16px;
    color: #313131;
}

.itemunit .telmail a {
    color:#313131;
}
.itemunit .telmail a:hover {
    color:var(--color2);
}

.sec3Contact {
    position: relative;
    padding: 20px 0;
}
.sec3Contact .col1 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 60px;
}

.sec3Contact .col1:before {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(50vw - 10px);
    height: 100%;
    content: '';
    background: rgb(24 27 46 / 90%);
}
.sec3Contact .titleMore .title {
    color: #fff;
}
.sec3Contact .col1 .description {
    color: #fff;
    position: relative;
    z-index: 1;
}
.sec3Contact i.bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}




.topBlog {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 20px 0;
    gap: 14px;
}

.topBlog .blogSlider {
    position: relative;
    width: 100%;
    grid-column: span 2;
    grid-row: span 2;
    overflow: hidden;
    border-radius: 6px;
}
.itemSlideBlog {
    position: relative;
    display: block;
}

.itemSlideBlog .pic {
    position: relative;
    width: 100%;
}
.itemSlideBlog .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 71%;
    z-index: 2;
    background: linear-gradient(0deg, black, transparent, transparent);
}
.itemSlideBlog .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s;
}
.itemSlideBlog:hover .pic img {
    transform: scale(1.2) rotate(5deg);
}
.itemSlideBlog .pic .date {
    position: absolute;
    left: 20px;
    top: 20px;
    padding: 0 20px;
    height: 35px;
    background: var(--color2);
    color: #fff ;
    font-weight: 400 ;
    font-size: 14px;
    z-index: 10;
    border-radius: 6px ;
    display: flex;
    align-items: center;
}
.itemSlideBlog .textSlide {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 30px 30px 30px 70px !important;
    z-index: 30 !important;
    color: #fff;
    display: flex;
    flex-direction: column;
}
.itemSlideBlog .textSlide .title1Slide {
    font-size: 20px;
    font-weight: 400;
    position: relative;
    line-height: 1.6;
}
.itemSlideBlog .textSlide .title1Slide:before {
    position: relative;
    width: 35px;
    height: 30px;
    content: '';
    display: block;
    background: url(../img/icon/17.png) no-repeat center / 100%;
    float: right;
    margin-left: 5px;
}
.itemSlideBlog .textSlide .title2Slide {
    position: relative;
    font-size: 16px;
    color: #fff;
    opacity: 0.7;
    line-height: 1.7;
}

.topBlog .blogSlider .NextPrevSlider {
    width: 65px;
    height: 35px;
    left: 20px;
    bottom: 20px;
    top: auto;
    right: auto;
    display: flex;
    gap: 5px;
}
.topBlog .blogSlider .NextPrevSlider .swiper-button-next {
    position: relative;
    width: 30px;
    background: #4d4d4d;
    max-width: 30px;
    height: 35px;
    border-radius: 6px;
    margin: 0 !important;
    left: 0 !important;
    top: 0;
    right: auto !important;
    transform: none !important;
}
.topBlog .blogSlider .NextPrevSlider .swiper-button-next:after {
    width: 10px;
    filter: brightness(1.5);
    transform: scaleY(-1);
}
.topBlog .blogSlider .NextPrevSlider .swiper-button-prev {
    position: relative;
    width: 30px;
    background: #4d4d4d;
    max-width: 30px;
    height: 35px;
    border-radius: 6px;
    margin: 0 !important;
    left: 0 !important;
    top: 0;
    right: auto !important;
    transform: none !important;
}
.topBlog .blogSlider .NextPrevSlider .swiper-button-prev:after {
    width: 10px;
    filter: brightness(1.5);
}
.topBlog .blogSlider .NextPrevSlider .swiper-button-next:hover ,
.topBlog .blogSlider .NextPrevSlider .swiper-button-prev:hover {
    background-color: var(--color2);
}


.itemBlogTop {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    display: flex;
}

.itemBlogTop .textSlide {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 20px;
    z-index: 2;
}

.itemBlogTop .pic {
    position: relative;
    width: 100%;
    display: flex;
}

.itemBlogTop .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s;
}
.itemBlogTop:hover .pic img {
    transform: scale(1.2) rotate(5deg);
}

.itemBlogTop .pic:before {
    position: relative;
    width: 100%;
    padding-top: 66%;
    display: block;
    content: '';
    z-index: 2;
    background: linear-gradient(0deg, black, transparent, transparent);
}


.itemBlogTop .pic .date {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 0 20px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--color2);
    border-radius: 6px;
}
.itemBlogTop .textSlide .title1Slide {
    font-size: 16px;
    font-weight: 400;
    position: relative;
    line-height: 1.6;
    color: #fff;
}

.listBlog {
    position: relative;
    width: 100%;
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.listBlog article.itemBlog {
    width: 100%;
}
.sec3Blog {
    position: relative;
    padding: 50px 0;
}
.blog3col {
    position: relative;
    width: 100%;
    gap: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 10px;
}
.blog3col .col2 {
    position: relative;
    width: 100%;
    grid-column: span 2;
}
.itemBlogSmall {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
}

.itemBlogSmall figure.pic {
    position: relative;
    width: 100px;
    overflow: hidden;
    border-radius: 5px !important;
}

.itemBlogSmall figure.pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemBlogSmall .contentItemBlog {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    justify-content: center;
    align-items: flex-start;
}
.titleSideBlog {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding-right: 40px;
    height: 50px;
    font-size: 20px;
    color: #000;
    font-weight: 600;
    border-bottom: 1px solid #bdbdbd;
    margin-bottom: 10px;
}

.titleSideBlog i.icon {
    position: absolute;
    right: 0;
    height: 35px !important;
    display: flex;
    width: 35px !important;
}

.titleSideBlog i.icon.okloadlazy {
    background-repeat: no-repeat;
    background-size: 100% !important;
}

.sliderBox .swiper-pagination {
    position: absolute;
    left: 0;
    top: -50px;
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.sliderBox .swiper-pagination .swiper-pagination-bullet {
    position: relative;
    height: 3px;
    width: 15px;
    border-radius: 6px !important;
    background: #9b9b9b;
    opacity: 1;
    transition: all 0.2s;
}

.sliderBox .swiper-pagination .swiper-pagination-bullet-active {
    width: 30px;
    background: var(--color2);
}
.col4row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 21px;
}
.sliderBox {
    position: relative;
}
.itemBlogSmall:before {
    position: absolute;
    bottom: -10px;
    height: 1px;
    content: '';
    width: 100%;
    content: '';
    background: #ebebeb;
}

.itemBlogSmall:last-child:before {
    display: none;
}
.itemBlogSmall .titleBlog {
    color: #303030;
    font-size: 14px;
    padding: 5px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.itemBlogSmall .date {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0 5px;
    border-bottom: 2px solid #c0c0c0;
}

.itemBlogSmall .date:before {
    position: absolute;
    height: 2px;
    width: 4px;
    background: #c0c0c0;
    content: '';
    right: calc(100% + 4px);
    bottom: -2px;
}
.itemBlogSmall .date:after {
    position: absolute;
    height: 2px;
    width: 2px;
    background: #c0c0c0;
    content: '';
    right: calc(100% + 12px);
    bottom: -2px;
}
.itemSlide3colBlog {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.itemSlide3colBlog .pic {
    position: relative;
    width: 100%;
    display: block;
}

.itemSlide3colBlog .pic .date {
    position: absolute;
    left: 20px;
    top: 20px;
    background: var(--color2);
    padding: 0 20px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 1;
    border-radius: 6px;
}

.itemSlide3colBlog .pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 56%;
}

.itemSlide3colBlog .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.itemSlide3colBlog .textSlide {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 30px;
    z-index: 10;
    color: #fff;
}
.blog3col .col2 .blogSlider {
    position: relative;
    overflow: hidden;
    border-radius: 6px !important;
}
.itemBlogSmall figure.pic {
    position: relative;
    width: 120px;
    overflow: hidden;
    border-radius: 5px !important;
}
.itemBlogSmall figure.pic:before {
    position: relative;
    width: 100%;
    display: block;
    content: '';
    padding-top: 77.5%;
}
.blog3col .col2 .swiper-button-next {
    right: -8px !important;
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 70px 10px 00px 70px;
}
.blog3col .col2 .swiper-button-prev {
    left: -8px !important;
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px 70px 70px 10px;
}
.itemSlide3colBlog .textSlide .title1Slide {
    font-size: 20px;
    font-weight: 400;
    position: relative;
    line-height: 1.6;
}
@media only screen and (max-width: 1600px) {}

@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 1366px) {}

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 1024px) {}

@media only screen and (max-width: 980px) {}

@media only screen and (max-width: 890px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 680px) {}

@media only screen and (max-width: 480px) {}

@media only screen and (max-width: 390px) {}

/* Navbar  */