@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
    --text-color: #686868;
    --main-color: #D20015;
    --main-color-hover: #E30916;
    --orange-color: #FDC040;
    --font-family: "Quicksand", sans-serif;
    --transition: all 300ms linear 0s;
}

body {
    font-family: var(--font-family) !important;
    font-weight: 400;
}

.headerAreaSearch {
    position: relative;
}

.headerAreaSearch input {
    border: 2px solid var(--main-color);
    border-radius: 4px;
    background-color: #fff;
    width: 100%;
    height: 50px;
    font-size: 14px;
    font-weight: 500;
    padding: 0 50px 0 15px;
}

.headerAreaSearch button {
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.headerAreaSearch button i {
    font-size: 20px;
    line-height: 20px;
    display: grid;
    color: var(--main-color);
}

.headerActionButton i {
    font-size: 25px;
    line-height: 25px;
    color: #000;
    position: relative;
}

.headerActionButton i p {
    font-style: normal;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--main-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    top: -10px;
    right: -9px;
}

.headerActionButton > a {
    width: 45px;
    height: 45px;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #dfdfdf;
}

.headerActionButton span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-left: -2px;
    font-weight: bold;
}

.headerActionButton a:hover {
    text-decoration: none;
    font-style: normal;
}

.headerActionAccountMenu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 150px;
    background: white;
    right: 0;
    border-radius: 10px;
    border: 1px solid #ececec;
    box-shadow: 5px 5px 15px rgb(0 0 0 / 5%);
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 111;
}

.headerActionAccountMenu.active {
    visibility: visible;
    opacity: 1;
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    margin-top: 20px;
}

.headerActionAccountMenu ul {
    padding: 15px;
    margin: 0;
}

.headerActionAccountMenu ul li {
    list-style-type: none;
}

.headerActionAccountMenu ul li a {
    display: block;
    color: #253D4E;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 0;
}

.headerActionAccountMenu ul li a i {
    font-size: 14px;
    line-height: 14px;
    margin-right: 10px;
}

.headerActionAccountMenu ul li:hover a {
    color: var(--main-color);
}

.headerActionAccountMenu::before {
    content: '';
    height: 20px;
    top: -20px;
    width: 100%;
    position: absolute;
}

.headerCategory {
    background: var(--main-color);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.headerCategory i {
    font-size: 13px;
    line-height: 8px;
}

.headerCategory div i {
    font-size: 18px;
    line-height: 18px;
}

.headerCategory div div {
    line-height: 1;
    margin-left: 15px;
}

.headerCategoryList {
    position: absolute;
    left: 0;
    top: 60px;
    width: 500px;
    box-shadow: 5px 5px 15px rgb(0 0 0 / 5%);
    border: 1px solid #BCE3C9;
    padding: 30px;
    background: #fff;
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    z-index: 99999;
}

.headerCategoryList.active {
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    visibility: visible;
    opacity: 1;
}

.headerCategoryList ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.headerCategoryList ul li {
    list-style-type: none;
    width: 48%;
    margin-bottom: 15px;
}

.headerCategoryList ul li:nth-of-type(2n+1) {
    margin-right: 7.5px;
}

.headerCategoryList ul li:nth-of-type(2n+1):last-child {
    margin-bottom: 0;
}

.headerCategoryList ul li:nth-of-type(2n+2) {
    margin-left: 7.5px;
}

.headerCategoryList ul li:nth-of-type(2n+2):last-child {
    margin-bottom: 0;
}

.headerCategoryList ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    border: 1px solid #F2F3F4;
    padding: 0 18px;
    height: 100px;
    text-decoration: none;
    font-size: 14px;
    color: #253D4E;
    transition: .3s ease-in-out;
}

.headerCategoryList ul li a img {
    object-fit: contain;
    width: 100%;
}

.headerCategoryList ul li a:hover {
    border: 1px solid var(--main-color);
    color: var(--main-color);
    transition: .3s ease-in-out;
}

.bodyAreaHero {
    width: 100%;
}

.heroSliderContent {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 50px;
    width: 50%;
}

.heroSliderContentTitle {
    font-size: 72px;
    color: #253D4E;
    font-weight: 700;
    line-height: 72px;
}

.heroSliderContentText {
    font-size: 30px;
    color: #7e7e7e;
    font-weight: 400;
    line-height: 24px;
    margin-top: 30px;
}

.heroSliderContentButton {
    margin-top: 50px;
}

.heroSliderArrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition);
}

.heroSwipe:hover .heroSliderArrows {
    visibility: visible;
    opacity: 1;
    transition: var(--transition);
}

.heroSliderArrows .heroSlider-button-prev,
.heroSliderArrows .heroSlider-button-next {
    width: 50px;
    height: 50px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 15px;
    border-radius: 50%;
    transition: var(--transition);
}

.heroSliderArrows .heroSlider-button-prev:hover,
.heroSliderArrows .heroSlider-button-next:hover {
    background: var(--main-color);
    color: white;
    transition: var(--transition);
}

.heroSliderArrows .heroSlider-button-prev {
    position: absolute;
    left: 20px;
}

.heroSliderArrows .heroSlider-button-next {
    position: absolute;
    right: 20px;
}

.primaryButtonRounder {
    background-color: var(--main-color);
    border: none;
    outline: none;
    box-shadow: none;
    color: white;
    border-radius: 30px;
    padding: 15px 40px;
    transition: var(--transition);
    font-size: 16px;
}

.primaryButtonRounder:hover {
    background-color: var(--main-color-hover);
    transition: var(--transition);
}

.primaryButton {
    background-color: var(--main-color);
    border: none;
    outline: none;
    box-shadow: none;
    color: white !important;
    border-radius: 5px;
    height: 50px;
    padding: 0 20px;
    transition: var(--transition);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primaryButton:hover {
    background-color: var(--main-color);
    transition: var(--transition);
}

.primaryButton2 {
    background-color: #253D4E;
    border: none;
    outline: none;
    box-shadow: none;
    color: white !important;
    border-radius: 5px;
    height: 50px;
    padding: 0 20px;
    transition: var(--transition);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important;
    display: flex;
    align-items: center;
}

.primaryButton2:hover {
    background-color: var(--main-color);
    transition: var(--transition);
}

.primaryButtonSmall {
    padding: 0 15px;
    height: 40px;
}

.primaryButtonBlock {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bodyAreaHeroBannerButton {
    margin-top: 30px;
}

.primaryButtonAnimation i {
    transition: var(--transition);
}

.primaryButtonAnimation:hover button {
    background: var(--orange-color);
}

.primaryButtonAnimation:hover i {
    padding-left: 10px;
    transition: var(--transition);
}

.bodyAreaHeroBannerContent {
    position: absolute;
    width: 65%;
    padding: 50px;
    top: 0;
}

.bodyAreaHeroBanner {
    overflow: hidden;
}

.bodyAreaHeroBannerTitle {
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    color: #253D4E;
}

.primaryButtonAnimation i {
    line-height: 12px;
    font-size: 12px;
    margin-left: 10px;
}

.bodyAreaBannersBox {
    position: relative;
    overflow: hidden;
}

.bodyAreaBannersBoxContent {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 50px;
    width: 65%;
}

.bodyAreaBannersBoxContentTitle {
    font-weight: 700;
    font-size: 24px;
    color: #253D4E;
}

.bodyAreaBannersBoxContentButton {
    margin-top: 30px;
}

.bodyAreaProductsBox {
    background: white;
    border-radius: 20px;
    border: 1px solid #ececec;
    padding: 15px;
    transition: var(--transition);
}

.bodyAreaProductsBox img {
    border-radius: 15px;
    max-height: 255px;
    height: 255px;
    object-fit: contain;
}

.bodyAreaProductsBox:hover {
    box-shadow: 5px 5px 15px rgb(0 0 0 / 5%);
    transition: var(--transition);
}

.bodyAreaProductsBoxCategoryName {
    font-size: 12px;
    font-weight: 400;
    color: #adadad;
    margin-top: 15px;
}

.bodyAreaProductsBoxTitle a {
    font-size: 16px;
    font-weight: 500;
    color: #253D4E;
    margin-top: 5px;
    display: block;
    transition: var(--transition);
    min-height: 75px;
}

.bodyAreaProductsBoxTitle a:hover {
    text-decoration: none;
    color: var(--main-color);
    transition: var(--transition);
}

.bodyAreaProductsBoxPrice {
    width: 50%;
}

.bodyAreaProductsBoxPrice span {
    display: block;
}

.bodyAreaProductsBoxPrice span:first-child {
    color: #29235c;
    font-size: 18px;
    font-weight: 700;
    display: inline;
}

.bodyAreaProductsBoxPrice span strike {
    font-size: 14px;
    font-weight: 700;
    color: #adadad;
}

.bodyAreaProductsBoxButton {
    width: 50%;
    padding: 6px 20px 6px 20px;
    border-radius: 4px;
    background: var(--main-color);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.bodyAreaProductsBoxButton:hover {
    background-color: #29235c;
    color: white;
    transition: var(--transition);
}

.sectionTitle {
    font-weight: 700;
    font-size: 32px;
    color: #253D4E;
}

.bodyAreaNewsLetterBox {
    overflow: hidden;
    width: 100%;
    padding: 60px;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
}

.bodyAreaNewsLetterBoxTitle {
    font-size: 40px;
    line-height: 48px;
    font-weight: bold;
    color: #253D4E;
}

.bodyAreaNewsLetterBoxText {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #7e7e7e;
    margin-top: 20px;
}

.bodyAreaNewsLetterBoxForm {
    position: relative;
    margin-top: 50px;
}

.bodyAreaNewsLetterBoxForm i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 18px;
}

.bodyAreaNewsLetterBoxForm input {
    height: 60px;
    border-radius: 60px;
    border: none;
    outline: none;
    width: 100%;
    padding-left: 55px;
    padding-right: 150px;
}

.bodyAreaNewsLetterBoxForm button {
    height: 60px;
    border-radius: 60px;
    border: none;
    outline: none;
    background: var(--main-color);
    color: white;
    padding: 0 30px;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.bodyAreaInformationBox {
    background: #F4F6FA;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.bodyAreaInformatioBoxTitle {
    font-size: 18px;
    font-weight: 600;
    color: #242424;
}

.bodyAreaInformatioBoxText {
    font-size: 16px;
    font-weight: 400;
    color: #868686;
}

.bodyAreaNewsLetterBoxImage {
    position: absolute;
    bottom: -60px;
}

.footerAreaAbout {
    font-size: 17px;
    font-weight: 400;
    color: #253D4E;
    margin-top: 25px;
}

.footerAreaContact {
    margin-top: 25px;
}

.footerAreaContactList i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 14px;
    color: var(--main-color);
}

.footerAreaContactList {
    font-size: 15px;
    font-weight: 400;
    color: #253D4E;
    margin-bottom: 15px;
}

.footerAreaContactList:last-child {
    margin-bottom: 0;
}

.footerAreaContactList b {
    font-weight: 600;
}

.footerAreaColumnTitle {
    font-size: 24px;
    font-weight: 700;
    color: #253D4E;
}

.footerAreaColumn {
    margin-left: 15%;
}

.footerAreaColumnList {
    margin-top: 30px;
}

.footerAreaColumnList ul {
    padding: 0;
    margin: 0;
}

.footerAreaColumnList ul li {
    list-style: none;
}

.footerAreaColumnList ul li a {
    display: block;
    color: #253D4E;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 13px;
    transition: var(--transition);
    text-decoration: none !important;
}

.footerAreaColumnList ul li:hover a {
    color: var(--main-color);
    transition: var(--transition);
    padding-left: 15px;
}

.footerAreaColumnList ul li:last-child a {
    margin-bottom: 0;
}

.copyright {
    font-size: 14px;
    font-weight: 400;
    color: #7e7e7e;
}

.socialMedia {
    font-size: 16px;
    font-weight: 700;
    color: #253D4E;
}

.socialMedia ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.socialMedia ul li {
    list-style: none;
}

.socialMedia ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    background: var(--main-color);
    font-size: 18px;
    line-height: 12px;
    text-decoration: none !important;
    transition: var(--transition);
    margin-right: 10px;
}

.socialMedia ul li a:hover {
    background: var(--main-color-hover);
    margin-top: -10px;
    transition: var(--transition);
}

.socialMedia ul li:last-child a {
    margin-right: 10px;
}

@media (min-width: 1350px) {
    .col-xl-1-5 {
        width: 20%;
        max-width: 20%;
        flex: 0 0 20%;
    }
}

@media (min-width: 980px) and (max-width: 1300px) {
    .col-lg-1-5 {
        width: 20%;
        max-width: 20%;
        flex: 0 0 20%;
    }
}


.pageOverlay {
    transition: var(--transition);
}

.pageOverlay.active {
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(0.5rem);
    transition: var(--transition);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 0;
}

.headerAreaTop2 {
    font-size: 14px;
    font-weight: 500;
    background: var(--main-color);
    color: white;

}

.headerAreaTop2 a {
    color: white;
    text-decoration: none !important;
}

.headerAreaTop2 .headerAreaTop2List {
    display: flex;

}

.headerAreaTop2 .headerAreaTop2List a:first-child {
    border-right: 2px solid #c2c1c1;
    padding-right: 10px;
    margin-right: 10px;
}

.supportNo {
    font-size: 15px;
    color: var(--main-color);
    font-weight: 700;
}

.supportNo span {
    font-size: 12px;
    color: #7e7e7e;
    font-weight: 500;
    text-align: center;
}

.bodyAreaTitle {
    font-weight: 700;
    font-size: 32px;
    color: #253D4E;
    display: flex;
    justify-content: center;
    position: relative;
}

.bodyAreaTitle span {
    padding: 0 30px;
    display: inline;
    background: white;
    position: relative;
    z-index: 9;
}

.bodyAreaTitle::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #7c7c7c;
    top: 50%;
    transform: translateY(-50%);
}

.brandSwipeBox {
    border: 1px solid #e1e1e1;
    padding: 10px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brandSwipeBox img {
    width: 100%;
}

.brandSwipe {
    padding-right: 5px;
}

.blogSwipeBoxCategory {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #b6b6b6;
}

.blogSwipeBoxTitle a {
    display: block;
    text-align: center;
    color: #253D4E;
    transition: var(--transition);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-decoration: none !important;
}

.blogSwipeBoxTitle a:hover {
    color: var(--main-color);
    transition: var(--transition);
}

.blogSwipeBoxDate {
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: #7e7e7e;
}

.blogSwipeBoxImage {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.blogSwipeBoxImage img {
    transition: var(--transition);
}

.blogSwipeBox:hover .blogSwipeBoxImage img {
    transform: scale(1.2);
    transition: var(--transition);
}

.contentAreaImage {
    border-radius: 20px;
    overflow: hidden;
}

.contentAreaTitle {
    font-size: 40px;
    font-weight: 700;
    color: var(--main-color);
}

.contentAreaText {
    font-size: 16px;
    font-weight: 400;
    color: #7e7e7e;
}

.contentAreaGallery img {
    border-radius: 10px;
}

.contentAreaGalleryArrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3;

}

.contentAreaGalleryArrows-button-prev,
.contentAreaGalleryArrows-button-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F2F3F4;
    font-size: 20px;
    line-height: 15px;
    color: var(--main-color);
    transition: var(--transition);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

}

.contentAreaGalleryArrows-button-prev:hover,
.contentAreaGalleryArrows-button-next:hover {
    color: white;
    background: var(--main-color);
    transition: var(--transition);
}

.contentAreaGalleryArrows-button-prev {
    position: absolute;
    left: -20px;
}

.contentAreaGalleryArrows-button-next {
    position: absolute;
    right: -20px;
}


.contentAreaInformationBox {
    padding: 50px 30px;
    border-radius: 15px;
    border: 1px solid #ececec;
    background: #fff;
    transition: var(--transition);

}


.contentAreaInformationBox:hover {
    transition: var(--transition);
    box-shadow: 5px 5px 15px rgb(0 0 0 / 5%);
}

.contentAreaInformationBoxIcon {
    display: flex;
    justify-content: center;
}

.contentAreaInformationBoxTitle {
    font-size: 24px;
    font-weight: 700;
    color: #253d4e;
    margin-top: 25px;
    text-align: center;
}

.contentAreaWhoAreWeTopTitle {
    font-size: 24px;
    font-weight: 700;
    color: #b6b6b6;
}

.contentAreaWhoAreWeTitle {
    color: #253D4E;
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    margin-top: 20px;
}

.contentAreaWhoAreWeText {
    font-size: 16px;
    font-weight: 500;
    color: #7e7e7e;
    margin-top: 20px;
}

.ca-thereeListTitle {
    font-size: 32px;
    font-weight: 700;
    color: #253d4e;
}

.ca-thereeListText {
    font-size: 16px;
    font-weight: 400;
    color: #7e7e7e;
}

.contentAreaCounter {
    box-shadow: 5px 5px 15px rgb(0 0 0 / 5%);
    z-index: 100;
    position: relative;
    color: #fff;
    border-radius: 15px;
    padding: 100px 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

.contentAreaCounter::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #4B675A;
    top: 0;
    left: 0;
    opacity: .8;
}

.contentAreaCounterBox {
    width: 20%;
    text-align: center;
    position: relative;
    z-index: 9;
}

.contentAreaCounterBoxTitle {
    font-size: 72px;
    font-weight: 700;
}

.contentAreaCounterBoxText {
    font-size: 24px;
    font-weight: 700;
}


.contactAreaMap {
    overflow: hidden;
    border-radius: 15px;
    height: 350px;

}

.contentAreaAltTitle {
    font-size: 24px;
    color: var(--main-color);
    font-weight: 700;
}

.contentAreaAltText {
    font-weight: 500;
    font-size: 14px;
    color: #7e7e7e;
}

.contentAreaTopTitle {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
}

.contentAreaIamge {
    border-radius: 15px;
    overflow: hidden;
}

.contentFormElem input {
    border: 1px solid #ececec;
    border-radius: 10px;
    height: 64px;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-left: 20px;
    font-size: 16px;
    width: 100%;
    transition: var(--transition);
}

.contentFormElem input:focus {
    background: transparent;
    border: 1px solid #BCE3C9;
    transition: var(--transition);
}

.contentFormElem textarea {
    padding-top: 15px;
    border: 1px solid #ececec;
    border-radius: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-left: 20px;
    font-size: 16px;
    width: 100%;
    transition: var(--transition);
    min-height: 150px;
    height: 100%;
}

.contentFormElem textarea:focus {
    background: transparent;
    border: 1px solid #BCE3C9;
    transition: var(--transition);
}


.nav--menu {
    background: white;
    z-index: 99;
}

.nav--menu .single__menu::before {
    content: '';
    position: absolute;
    top: -20px;
    height: 20px;
    width: 250px;
    left: 0;
}

.nav--menu .single__menu::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    background: white;
    border-radius: 6px;
    box-shadow: 0 10px 25px -6px rgb(245 143 181 / 54%);
}

.nav--menu .single__menu {
    padding: 0;
    position: absolute;
    width: 250px;
    left: 50%;
    transform: translateX(-50%);
    transition: .3s ease-in-out;
    background: white;
    box-shadow: 0 10px 25px -6px rgb(245 143 181 / 54%);
    border-radius: 8px;
    margin-top: 20px;
    visibility: hidden;
    opacity: 0;
}

.nav--menu ul li:hover .single__menu {
    visibility: visible;
    opacity: 1;
    transition: .3s ease-in-out;
}

.nav--menu .single__menu li {
    list-style: none;
    position: relative;
    display: block;
}

.nav--menu .single__menu li a {
    color: black;
    font-size: 14px;
    font-weight: 600;
    display: block;
    padding: 10px;
    position: relative;
    z-index: 9999;
}

.nav--menu .single__menu li:hover a {
    color: white;
    transition: .3s ease-in-out;
    background: var(--color-main);
}

.nav--menu .single__menu li:hover a:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.nav--menu .single__menu li:hover a:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.nav--menu > ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav--menu > ul > li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: inline-block;
}

.nav--menu > ul > li:hover > a {
    color: var(--main-color);
    transition: .3s ease-in-out;
}

.nav--menu > ul > li > a {
    padding: 15px 10px;
    color: #000500;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.nav--sub-menu {
    position: absolute;
    left: 15px;
    top: 60px;
    width: calc(100% - 30px);
    visibility: hidden;
    opacity: 0;
    transition: .3s ease-in-out;
    border-radius: 10px;
    background: white;
    border: 2px solid #ececec;
    box-shadow: 5px 5px 15px rgb(0 0 0 / 15%);

}

.nav--sub-menu.active {
    visibility: visible;
    opacity: 1;
    transition: .3s ease-in-out;
}

.menu--item-title a {
    color: var(--main-color);
    font-size: 19px;
    font-weight: 700;
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.menu--item-title a:hover {
    color: var(--main-color-hover);
    transition: var(--transition);
}


.sub--menu-item ul {
    padding: 0;
    margin: 0;
}

.sub--menu-item ul li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.sub--menu-item ul li a {
    color: var(--text-color);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    transition: var(--transition);
}

.sub--menu-item ul li:hover a {
    color: var(--text-color);
    transition: var(--transition);
}

.sub--menu-item ul li:last-child a {
    margin-bottom: 0;
}

.sub--menu-item ul li a:hover {
    color: var(--main-color);
}

.sub--menu-item {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.sub--menu-item .menu--item {
    width: calc(100% / 5);
}

.sub--menu-item {
    padding: 30px;
}


.nav--brand-menu {
    background: white;
}

.nav--brand-menu .brand--menu-title {
    font-size: 14px;
    font-weight: 500;
    color: #212529;
}

.nav--brand-menu ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.nav--brand-menu ul li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.nav--brand-menu ul li a {
    display: block;
    padding: 10px;
}

.nav--sub-menu {
    z-index: 999;
}

.headerNavMenu {
    display: flex;
    align-items: center;
    /*position: relative;*/
    z-index: 999;
}

.headerNavMenu > ul {
    padding: 0;
    margin: 0;
    display: flex;
}

.headerNavMenu > ul > li {
    list-style: none;
    position: relative;
}

.headerNavMenu > ul > li > a {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #253D4E;
    padding: 15px 10px;
    text-decoration: none !important;
    transition: .3s ease-in-out;
}

.headerNavMenu ul li a i {
    font-size: 11px;
    line-height: 8px;
}

.headerNavMenu ul > li:hover > a {
    color: var(--main-color);
    transition: .3s ease-in-out;
}

.headerNavMenu ul li ul.headerNavSingleMenu {
    padding: 0;
    z-index: 9;
    width: 250px;
    background: white;
    position: absolute;
    right: 0;
    border-radius: 10px;
    border: 1px solid #ececec;
    box-shadow: 5px 5px 15px rgb(0 0 0 / 5%);
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    flex-wrap: wrap;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
}

.headerNavMenu ul li:hover ul.headerNavSingleMenu {
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform: translateX(-50%);
    visibility: visible;
    opacity: 1;
}

.headerNavMenu ul li ul.headerNavSingleMenu li {
    display: block;
    width: 100%;
}

.headerNavMenu ul li ul.headerNavSingleMenu li:hover a {
    color: var(--main-color);
    transition: .3s ease-in-out;
}

.headerNavMenu ul li ul.headerNavSingleMenu li a {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #253D4E;
    padding: 10px 15px;
    text-decoration: none !important;
    transition: .3s ease-in-out;
}


.breadcrumb_wrapper {
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 20px;
    padding: 70px 80px;
    background-size: cover;
}

.breadcurmbTitle {
    font-size: 18px;
    font-weight: 500;
    color: black;
}

.breadcurmbTitle span {
    font-size: 48px;
    font-weight: 700;
    color: #253d4e;
}


.breadcurmbNav ol {
    padding: 0;
    margin: 0;
    margin-top: 15px;
    display: flex;
    align-items: center;
}

.breadcurmbNav ol li {
    list-style-type: none;
}

.breadcurmbNav ol li a {
    font-size: 14px;
    font-weight: 600;
    color: #7e7e7e;
}

.breadcrumb-item.active {
    color: var(--main-color) !important;
}

.otherCategories button {
    background-color: #fff;
    display: inline-block;
    border-radius: 30px;
    box-shadow: 5px 5px 15px rgb(0 0 0 / 5%);
    padding: 10px 20px;
    border: 1px solid #ececec;
    font-size: 17px;
    font-weight: 700;
    margin-right: 10px;
    transition: var(--transition);
    color: var(--main-color);
}

.otherCategories button:last-child {
    margin-right: 0px;
}

.otherCategories button:hover {
    color: var(--orange-color);
    transition: var(--transition);
    transform: translateY(-10px);
}

.border-bottom {
    border-bottom-color: #ececec !important;
}

@media only screen and (max-width: 950px) {
    .contentAreaCounterBox {
        width: 50%;
    }

    .contentAreaCounterBox:last-child {
        width: 100%;
    }

    .headerActionButton span {
        display: none;
    }

    .mobileMenu {
        font-size: 25px;
        color: #253D4E;
        text-decoration: none !important;
    }

    .mobileMenu:hover {
        color: var(--main-color-hover);
    }

    .lh14px {
        line-height: 14px;
    }

    .headerCategoryList {
        width: 100%;
        padding: 15px;
        box-shadow: 0 0 15px rgba(0, 0, 0, .4);
    }

    .headerCategoryList ul li {
        width: 47.5%;
    }

    .heroSliderContentTitle {
        font-size: 25px;
        line-height: normal;
    }

    .heroSliderContentText {
        font-size: 20px;
        font-weight: 400;
        margin-top: 15px;
    }

    .heroSliderContent {
        padding: 25px;
        width: 100%;
    }

    .heroSliderContentButton {
        margin-top: 25px;
    }

    .primaryButtonRounder {
        padding: 8px 20px;
    }

    .bodyAreaHeroBannerContent {
        padding: 25px;
    }

    .bodyAreaHeroBannerTitle {
        font-size: 30px;
        line-height: normal;
    }

    .bodyAreaBannersBoxContent {
        padding: 25px;
    }

    .bodyAreaBannersBoxContentTitle {
        font-size: 20px;
        line-height: normal;
    }

    .bodyAreaProductsBoxButton {
        width: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bodyAreaProductsBoxButton i {
        margin-right: 10px;
    }

    .bodyAreaNewsLetterBox {
        padding: 30px;
    }

    .bodyAreaNewsLetterBoxTitle {
        font-size: 24px;
        line-height: normal;
    }

    .bodyAreaNewsLetterBoxText {
        font-size: 16px;
    }

    .bodyAreaNewsLetterBoxImage {
        display: none;
    }

    .bodyAreaNewsLetterBoxForm button {
        padding: 0 15px;
        font-size: 15px;
    }

    .footerAreaColumn {
        margin-left: 0;
    }

    .headerCategoryList ul li a img {
        margin-right: 10px;
    }

    .headerActionButton i p {
        right: -9px;
    }


    .pb20px {
        padding-bottom: 20px;
    }

    .mobileMenuClose {
        text-decoration: none !important;
        color: red;
        font-size: 17px;
        line-height: 14px;
    }

    .breadcrumb_wrapper {
        padding: 25px 25px;
    }

    .breadcurmbTitle span {
        font-size: 30px;
        text-align: center;
    }

    .breadcurmbTitle {
        font-size: 16px;
        text-align: center;
    }

    .breadcurmbNav ol {
        flex-wrap: wrap;
        justify-content: center;
    }

    .otherCategories {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .breadcrumb_wrapper .w-50 {
        width: 100% !important;
    }
}

.productColorRed {
    background: #ffd2d2;
    color: red;
}

.productColorRed:hover {
    background: var(--main-color-hover);
    color: white;
}

.KampanyaliUrun {
    background: red;
    color: #fff;
}

.productDetailTopBox {
    margin-right: 5px;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.productDetailTopBox:last-child {
    margin-right: 0;
}

.productDetailTopInner {
    margin-right: 5px;
    position: absolute;
    display: inline-block;
    border-radius: 5px;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 700;
    flex-direction: column;
}

.productDetailTopInner:last-child {
    margin-right: 0;
}

.productDetailTopInner .productDetailTopBox {
    margin-bottom: 5px !important;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    flex-flow: column !important;
    min-width: 85px;
    text-align: center;
}

.productDetailTopInner .productDetailTopBox:last-child {
    margin-right: 0;
}

.KargoBedava {
    color: #1ab31a;
    background: #ccffcc;
}

.CokSatilan {
    color: #d3921b;
    background: #ffe9c6;
}

.TavsiyeUrun {
    color: #0707ce;
    background: #ceceff;
}

.YeniUrun {
    color: #cc0808;
    background: #ffc8c8;
}

.ui-widget.ui-widget-content {
    z-index: 9999;
}

.vPopup {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    backdrop-filter: blur(5px);
    background: #ffffff75;
    background-image: url(data:image/png;base64,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);
    z-index: 1999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease-in-out;
}

.vPopupModal {
    border-radius: 30px;
    width: 350px;
    background: #191a1a;
    z-index: 11;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.3);

}

.vPopupHeader {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 15px;
    position: relative;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vPopupHeader button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    background: transparent;
    cursor: pointer;
    outline: none;
    border: none;
    position: absolute;
    right: 20px;
}

.vPopupBody {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 15px;
}

@media only screen and (max-width: 767px) {
    .vPopupModal {
        width: 100% !important;
    }
}

.memberChoseeBox {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.memberChoseeBoxFlag {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memberChoseeBoxButton {
    margin-top: 20px;
    width: 100%;
}

.memberChoseeBoxButton a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-color);
    outline: none;
    text-decoration: px;
    border-radius: 7px;
    border: none;
    color: white;
    font-size: 15px;
    font-weight: bold;
    height: 50px;
    transition: .3s ease-in-out;
    width: 100%;
    background-size: 185% 100%;
}

.memberChoseeBoxButton a:hover {
    background: var(--main-color-hover);
    color: white;
}