.displayResposive {
    display: none
}

@media screen and (min-width: 1px) and (max-width:576px) {
    .displayResposive.show-xs {
        display:block
    }
}

@media screen and (min-width: 577px) and (max-width:768px) {
    .displayResposive.show-sm {
        display:block
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .displayResposive.show-md {
        display:block
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    .displayResposive.show-lg {
        display:block
    }
}

@media screen and (min-width: 1201px) and (max-width:1400px) {
    .displayResposive.show-xl {
        display:block
    }
}

@media screen and (min-width: 1401px) and (max-width:1920px) {
    .displayResposive.show-xxl {
        display:block
    }
}

@media screen and (min-width: 1921px) {
    .displayResposive.show-3xl {
        display:block
    }
}

html.debugMode:before {
    z-index: 10000;
    content: "";
    position: fixed;
    right: 5px;
    top: 5px;
    background: red;
    color: #fff;
    display: none;
    width: 35px;
    height: 35px;
    padding: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

html.debugMode:after {
    z-index: 10000;
    content: "";
    position: fixed;
    right: 40px;
    top: 5px;
    background: blue;
    color: #fff;
    display: none;
    width: 35px;
    height: 35px;
    padding: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

@media screen and (min-width: 1px) {
    html.debugMode:after {
        content:"xs";
        display: flex
    }
}

@media screen and (min-width: 577px) {
    html.debugMode:after {
        content:"sm";
        display: flex
    }
}

@media screen and (min-width: 769px) {
    html.debugMode:after {
        content:"md";
        display: flex
    }
}

@media screen and (min-width: 993px) {
    html.debugMode:after {
        content:"lg";
        display: flex
    }
}

@media screen and (min-width: 1201px) {
    html.debugMode:after {
        content:"xl";
        display: flex
    }
}

@media screen and (min-width: 1401px) {
    html.debugMode:after {
        content:"xxl";
        display: flex
    }
}

@media screen and (min-width: 1921px) {
    html.debugMode:after {
        content:"3xl";
        display: flex
    }
}

@media screen and (min-width: 2561px) {
    html.debugMode:after {
        content:"4xl";
        display: flex
    }
}

@media screen and (max-width: 2559px) {
    html.debugMode:before {
        content:"4xl";
        display: flex
    }
}

@media screen and (max-width: 1919px) {
    html.debugMode:before {
        content:"3xl";
        display: flex
    }
}

@media screen and (max-width: 1399px) {
    html.debugMode:before {
        content:"xxl";
        display: flex
    }
}

@media screen and (max-width: 1199px) {
    html.debugMode:before {
        content:"xl";
        display: flex
    }
}

@media screen and (max-width: 991px) {
    html.debugMode:before {
        content:"lg";
        display: flex
    }
}

@media screen and (max-width: 767px) {
    html.debugMode:before {
        content:"md";
        display: flex
    }
}

@media screen and (max-width: 575px) {
    html.debugMode:before {
        content:"sm";
        display: flex
    }
}

@media screen and (max-width: -1px) {
    html.debugMode:before {
        content:"xs";
        display: flex
    }
}

@media screen and (max-width: 768px) {
    header .wrapper {
        padding:20px 15px
    }

    header .wrapper .logo img {
        width: 200px !important;
    }

    header .wrapper .menu .openMegaMenuBtn {
        display: block
    }

    header .wrapper .menu .languageSelection {
        display: none
    }

    header .wrapper .menu ul {
        display: none
    }

    header .searchWrapper {
        padding: 20px 0
    }

    header .searchWrapper .content {
        flex-direction: column;
        gap: 15px
    }

    header .searchWrapper .content .text {
        text-align: center
    }

    header .searchWrapper .content .form-group input {
        padding: 0 16px
    }

    header .searchWrapper .content .form-group button {
        right: 12px;
        padding: 14px 22px
    }

    header .searchWrapper .content .form-group button span {
        display: none
    }

    header .searchWrapper .content .form-group button .icon {
        display: block;
        width: 15px;
        height: 15px;
        fill: #fff
    }

    .fixedSearchPopup .wrapper {
        padding: 24vh 0 60px
    }

    .fixedSearchPopup .wrapper form input {
        margin-bottom: 20px;
        padding: 0 20px;
        height: 70px
    }

    .fixedSearchPopup .wrapper form button {
        position: relative;
        top: unset;
        right: unset;
        transform: unset;
        margin: 0 auto;
        background: #fff;
        color: #0f0f0f
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    header .wrapper {
        padding:33px 15px
    }

    header .wrapper .logo {
        min-width: 100px
    }

    header .wrapper .menu {
        gap: 10px
    }

    header .wrapper .menu .openMegaMenuBtn {
        display: block
    }

    header .wrapper .menu .languageSelection {
        display: none
    }

    header .wrapper .menu ul {
        display: none
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    header .wrapper {
        padding:33px 15px
    }

    header .wrapper .menu {
        gap: 15px
    }

    header .wrapper .menu ul {
        gap: 10px;
        margin-right: 10px
    }

    header .wrapper .menu ul>li {
        padding: 15px 5px 0
    }
}

@media screen and (min-width: 1200px) and (max-width:1400px) {
    header .wrapper .menu {
        gap:15px
    }

    header .wrapper .menu ul {
        gap: 15px;
        margin-right: 10px
    }

    header .wrapper .menu ul>li {
        padding: 15px 10px 0
    }
}

@media screen and (max-width: 768px) {
    footer {
        padding-bottom:20px
    }

    footer .footerMenu {
        margin-bottom: 30px
    }

    footer .getHelp {
        margin-bottom: 40px;
        text-align: center
    }

    footer .getHelp p {
        margin-bottom: 20px
    }

    footer .info {
        text-align: center
    }

    footer .info .social {
        justify-content: center
    }

    footer .newsletter {
        margin-bottom: 30px;
        text-align: center
    }

    footer hr {
        margin: 65px 0 40px
    }

    footer .logos {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 20px 10px
    }

    footer .logos a {
        width: calc(50% - 5px);
        flex: unset
    }

    footer .logos a img {
        object-fit: contain
    }

    footer .logos.right {
        justify-content: space-between;
        margin-top: 20px
    }

    footer .logos.right a img {
        height: unset
    }

    footer .stage {
        margin: 30px auto
    }
}

@media screen and (min-width: 577px) and (max-width:768px) {
    footer .logos {
        text-align:center
    }

    footer .logos a {
        width: calc(33.3333333333% - 10px)
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    footer .newsletter {
        margin-bottom:30px
    }

    footer .footerMenu {
        margin-bottom: 30px
    }

    footer .info {
        text-align: center
    }

    footer .info .social {
        justify-content: center
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    footer .newsletter {
        margin-bottom:30px
    }

    footer .footerMenu {
        margin-bottom: 30px
    }
}

@media screen and (min-width: 577px) and (max-width:768px) {
    .container.customContainer1 {
        max-width:90vw;
        --containerMaxWidth: 90vw
    }

    .container.customContainer2 {
        max-width: 80vw;
        --containerMaxWidth: 80vw
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .container.customContainer1 {
        max-width:94vw;
        --containerMaxWidth: 94vw
    }

    .container.customContainer2 {
        max-width: 84vw;
        --containerMaxWidth: 84vw
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    .container.customContainer1 {
        max-width:94vw;
        --containerMaxWidth: 94vw
    }

    .container.customContainer2 {
        max-width: 84vw;
        --containerMaxWidth: 84vw
    }
}

@media screen and (min-width: 1200px) and (max-width:1399px) {
    .container.customContainer1 {
        max-width:1710px;
        --containerMaxWidth: 1710px
    }

    .container.customContainer2 {
        --containerMaxWidth: 1370px
    }

    .container.customContainer2:not(.container.customContainer2.containerLeftPadding) {
        max-width: 1370px
    }

    .container.customContainer3 {
        max-width: 1250px;
        --containerMaxWidth: 1250px
    }

    .container.customContainer4 {
        max-width: 1410px;
        --containerMaxWidth: 1410px
    }

    .row>.col-xxl-custom-5 {
        flex: 0 0 auto;
        width: 20%
    }

    .row>.col-xxl-custom-10 {
        flex: 0 0 auto;
        width: 10%
    }

    .row .col-xxl-custom-7 {
        flex: 0 0 auto;
        width: 14.28%
    }
}

@media screen and (min-width: 1400px) {
    .container {
        max-width: 1300px;
        --containerMaxWidth: 1300px;
    }

    .container.customContainer1 {
        max-width: 1710px;
        --containerMaxWidth: 1710px
    }

    .container.customContainer2 {
        --containerMaxWidth: 1370px
    }

    .container.customContainer2:not(.container.customContainer2.containerLeftPadding) {
        max-width: 1370px
    }

    .container.customContainer3 {
        max-width: 1250px;
        --containerMaxWidth: 1250px
    }

    .container.customContainer4 {
        max-width: 1410px;
        --containerMaxWidth: 1410px
    }

    .row>.col-xxl-custom-5 {
        flex: 0 0 auto;
        width: 20%
    }

    .row>.col-xxl-custom-10 {
        flex: 0 0 auto;
        width: 10%
    }

    .row .col-xxl-custom-7 {
        flex: 0 0 auto;
        width: 14.28%
    }
}

@media screen and (min-width: 577px) and (max-width:768px) {
    .container.customContainer1 {
        display:block
    }

    .container.customContainer2 {
        display: block
    }

    .container.customContainer3 {
        display: block
    }

    .container.customContainer4 {
        display: block
    }
}

@media screen and (max-width: 576px) {
    .btn.btn-lg {
        padding:22px 53px
    }

    .customcheckbox2 {
        padding: 12px;
        gap: 10px
    }

    .customcheckbox2 .content .text {
        font-size: 14px;
        line-height: 18px
    }

    .customcheckbox2 .content .icon {
        min-width: 20px;
        width: 20px;
        height: 20px
    }

    .customcheckbox3 {
        padding: 12px;
        gap: 10px
    }

    .customcheckbox3 .content .text {
        font-size: 14px;
        line-height: 18px
    }
}

@media screen and (max-width: 768px) {
    .checkboxList>* {
        max-width:calc(100% - 10px)
    }

    .customcheckbox4.marginLeft {
        margin-left: 0
    }

    .editorContent h1 {
        font-size: 38px;
        line-height: 40px
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .checkboxList>* {
        max-width:calc(100% - 10px)
    }

    .editorContent h1 {
        font-size: 42px;
        line-height: 50px
    }

    .customcheckbox2 {
        padding: 12px;
        gap: 10px
    }

    .customcheckbox2 .content .text {
        font-size: 14px;
        line-height: 18px
    }

    .customcheckbox2 .content .icon {
        min-width: 20px;
        width: 20px;
        height: 20px
    }

    .customcheckbox3 {
        padding: 12px;
        gap: 10px
    }

    .customcheckbox3 .content .text {
        font-size: 14px;
        line-height: 18px
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    .checkboxList>* {
        max-width:calc(100% - 10px)
    }
}

@media screen and (max-width: 768px) {
    section.pageContent.subCategoryList .itemList {
        justify-content:space-around
    }

    section.pageContent.subCategoryList .itemList .item {
        width: auto
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    section.pageContent.subCategoryList .itemList .item {
        width:calc((100% - (18px * 3))/4)
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    section.pageContent.subCategoryList .itemList .item {
        width:calc((100% - (18px * 4))/5)
    }
}

@media screen and (min-width: 1201px) and (max-width:1400px) {
    section.pageContent.subCategoryList .itemList .item {
        width:calc((100% - (18px * 5))/6)
    }
}

@media screen and (min-width: 1401px) and (max-width:1920px) {
    section.pageContent.subCategoryList .itemList .item {
        width:calc((100% - (18px * 6))/7)
    }
}

@media screen and (max-width: 768px) {
    .gPage.pageCatalog .openSidePopup {
        padding:13px 45px
    }

    .gPage .searchBox form .form-group input {
        height: 80px;
        padding: 0 85px 0 12px;
        font-size: 14px
    }

    .gPage .searchBox form .form-group button {
        padding: 6px 25px;
        right: 10px
    }

    .gPage .contentWrapper hr {
        margin: 70px 0 60px
    }

    .gPage .pageBanner {
        margin-bottom: -50px;
        height: 95vh
    }

    .gPage .pageBanner .breadcrumb {
        margin-bottom: 60px
    }

    .gPage .pageBanner .bannerTitle {
        font-size: 30px;
        line-height: 43px
    }

    .gPage .pageBottomImage {
        aspect-ratio: unset;
        height: 700px
    }

    .gPage.pagePadding {
        padding-bottom: 210px
    }

    .gPage .pageDefaultWrapper {
        padding-top: 40px
    }

    .gPage .pageDefaultMiniWrapper .pageTitleArea {
        flex-direction: column;
        gap: 30px
    }

    .gPage .pageDefaultMiniWrapper .pageTitleArea .title {
        font-size: 38px;
        line-height: 47px
    }

    .gPage .filterItemsBox {
        width: 100%;
        max-width: unset
    }

    .gPage .pageTitle1 {
        margin-bottom: 15px
    }

    .gPage .titleGroup {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px
    }

    .sideMenuList {
        margin-bottom: 20px;
        display: none
    }

    .moreProductbutton {
        display: inline-flex;
        width: 150px;
        max-width: 100%;
        border-radius: 0;
        background: #000000;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff;
        height: 50px;
    }

    section .title br {
        display: none;
    }

    .news-sub-title h2 {
        font-size: 30px;
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .gPage .pageBanner {
        margin-bottom:-150px
    }

    .gPage .pageBanner .breadcrumb {
        margin-bottom: 60px
    }

    .gPage .pageBanner .bannerTitle {
        font-size: 30px;
        line-height: 43px
    }

    .gPage .pageBottomImage {
        aspect-ratio: unset;
        height: 700px
    }

    .gPage .pageDefaultMiniWrapper .pageTitleArea {
        align-items: center;
        gap: 30px
    }

    .gPage .pageDefaultMiniWrapper .pageTitleArea .title {
        font-size: 38px;
        line-height: 47px
    }
}

@media screen and (max-width: 576px) {
    footer .info .logo img {
        width: 200px !important;
    }

    footer .row .col-6 {
        order: 2;
    }

    .footer-company {
        order: 1;
        margin-bottom: 60px;
    }

    section.mainSlider .swiper-container .swiper-slide {
        flex-direction:column;
        gap: 30px
    }

    section.mainSlider .swiper-container .swiper-slide .content {
        text-align: center
    }

    section.mainSlider .swiper-container .swiper-slide .content .title {
        font-size: 30px;
        line-height: 41px
    }

    section.mainSlider .swiper-container .swiper-slide .content .description {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 30px
    }

    section.mainSlider .swiper-container .swiper-slide .content .viewBtn {
        padding: 18px 48px
    }

    section.mainSlider .swiper-container .swiper-slide .imgArea {
        width: 100%
    }

    section.mainSlider .swiper-pagination {
        display: none
    }

    section.mainNewProducts {
        margin-top: 50px;
        margin-bottom: 50px
    }

    section.mainNewProducts .wrapper {
        padding-top: 50px
    }

    section.mainNewProducts .wrapper .titleArea {
        flex-wrap: wrap
    }

    section.mainNewProducts .wrapper .titleArea .title {
        width: 100%;
        margin-bottom: 20px;
        font-size: 30px;
        line-height: 16px;
    }

    section.mainNewProducts .wrapper .titleArea .title b {
        display: inline-block
    }

    section.mainNewProducts .wrapper .titleArea .right {
        gap: 40px
    }

    section.mainNewProducts .wrapper .titleArea .right .description {
        font-size: 19px;
        line-height: 20px
    }

    section.mainNewProducts .owl-newProducts {
        width: 100%
    }

    section.mainNewProducts .owl-newProducts .owl-stage-outer {
        overflow: hidden
    }

    section.mainSolutions .wrapper {
        border-radius: 0 28px 28px
    }

    section.mainSolutions .wrapper .titleArea .title {
        font-size: 32px;
        line-height: 38px
    }

    section.mainSolutions .wrapper .titleArea .right .description {
        font-size: 16px;
        line-height: 19px
    }

    section.mainSolutions .wrapper .solutions {
        padding-bottom: 60px
    }

    section.mainStandards .standardsContentArea {
        flex-direction: column
    }

    section.mainStandards .standardsContentArea .content {
        order: 2;
        width: 100%
    }

    section.mainStandards .standardsContentArea .navsArea {
        order: 1;
        width: 100%
    }

    section.mainStandards .standardsContentArea .navsArea .customTabNavs {
        flex-direction: row;
        max-width: 100%;
        overflow: hidden;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 20px
    }

    section.mainStandards .standardsContentArea .navsArea .customTabNavs::-webkit-scrollbar-track {
        background: #fff;
        background: linear-gradient(0deg,rgb(255,255,255) 45%,rgba(112,112,112,0.15) 45%,rgba(112,112,112,0.15) 55%,rgb(255,255,255) 55%);
        border-radius: 45%
    }

    section.mainStandards .standardsContentArea .navsArea .customTabNavs li a {
        padding: 15px 0 0;
        font-size: 14px
    }

    section.mainStandards .standardsContentArea .navsArea .customTabNavs li a b {
        font-size: 16px
    }

    section.mainStandards .standardsContentArea .navsArea .customTabNavs li a:before {
        top: 0;
        left: 0;
        transform: rotate(90deg)
    }

    section.mainStandards .standardsContentArea .navsArea:before {
        left: 0;
        top: 0;
        bottom: 10px;
        right: unset;
        height: unset;
        width: 100px;
        background: linear-gradient(90deg,rgb(255,255,255) 5%,rgba(255,255,255,0.58) 30%,rgba(255,255,255,0) 97%)
    }

    section.mainStandards .standardsContentArea .navsArea:after {
        right: 0;
        top: 0;
        bottom: 10px;
        left: unset;
        height: unset;
        width: 100px;
        background: linear-gradient(90deg,rgb(255,255,255) 5%,rgba(255,255,255,0.58) 30%,rgba(255,255,255,0) 97%)
    }

    section.mainStandards .standardsContentArea .owl-mainStandards {
        order: 3;
        width: 100%
    }

    section.mainStandards .wrapper {
        border-radius: 0 28px 0
    }

    section.mainStandards .wrapper .customTabContent {
        padding: 33px 0 46px
    }

    section.mainNews .swiper-pagination {
        right: 20px;
        left: unset;
        width: auto;
        justify-content: center
    }

    section.mainNews .swiper-container {
        aspect-ratio: unset
    }

    section.mainNews .swiper-container:hover .swiper-pagination .swiper-pagination-bullet {
        background: #0f0f0f
    }

    section.mainNews .swiper-container:hover .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #e50019
    }

    section.mainNews .newsItem {
        padding-right: 15px
    }

    section.mainNews .newsItem .newsWrapper .text b {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    section.mainNews .newsItem .newsWrapper .text p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        line-clamp: 5;
        -webkit-box-orient: vertical;
        min-height: 135px
    }
}

@media screen and (min-width: 577px) and (max-width:768px) {
    section.mainSlider .swiper-container .swiper-slide {
        gap:30px
    }

    section.mainSlider .swiper-container .swiper-slide .content .title {
        font-size: 30px;
        line-height: 41px
    }

    section.mainSlider .swiper-container .swiper-slide .content .description {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 30px
    }

    section.mainSlider .swiper-container .swiper-slide .content .viewBtn {
        padding: 18px 48px
    }

    section.mainSlider .swiper-container .swiper-slide .imgArea {
        min-width: 50%;
        width: 50%
    }

    section.mainSlider .swiper-pagination {
        display: none
    }

    section.mainNewProducts {
        margin-top: -280px;
        margin-bottom: 170px
    }

    section.mainNewProducts .wrapper {
        padding-top: 50px;
        padding-bottom: 200px;
        margin-bottom: -200px
    }

    section.mainNewProducts .wrapper .titleArea .title {
        margin-bottom: 20px;
        font-size: 30px;
        line-height: 37px
    }

    section.mainNewProducts .wrapper .titleArea .right {
        gap: 30px
    }

    section.mainNewProducts .wrapper .titleArea .right img {
        height: 50px
    }

    section.mainNewProducts .wrapper .titleArea .right .description {
        font-size: 16px;
        line-height: 21px
    }

    section.mainNewProducts .owl-newProducts {
        width: 100%
    }

    section.mainNewProducts .owl-newProducts .owl-stage-outer {
        overflow: hidden
    }

    section.mainSolutions .wrapper .titleArea .title {
        margin-bottom: 20px;
        font-size: 30px;
        line-height: 37px
    }

    section.mainSolutions .wrapper .titleArea .right {
        gap: 30px
    }

    section.mainSolutions .wrapper .titleArea .right img {
        height: 50px
    }

    section.mainSolutions .wrapper .titleArea .right .description {
        font-size: 16px;
        line-height: 21px
    }

    section.mainStandards .standardsContentArea {
        flex-direction: column
    }

    section.mainStandards .standardsContentArea .content {
        order: 2;
        width: 100%
    }

    section.mainStandards .standardsContentArea .navsArea {
        order: 1;
        width: 100%
    }

    section.mainStandards .standardsContentArea .navsArea .customTabNavs {
        flex-direction: row;
        max-width: 100%;
        overflow: hidden;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 20px
    }

    section.mainStandards .standardsContentArea .navsArea .customTabNavs::-webkit-scrollbar-track {
        background: #fff;
        background: linear-gradient(0deg,rgb(255,255,255) 45%,rgba(112,112,112,0.15) 45%,rgba(112,112,112,0.15) 55%,rgb(255,255,255) 55%);
        border-radius: 45%
    }

    section.mainStandards .standardsContentArea .navsArea .customTabNavs li a {
        padding: 15px 0 0;
        font-size: 14px
    }

    section.mainStandards .standardsContentArea .navsArea .customTabNavs li a b {
        font-size: 16px
    }

    section.mainStandards .standardsContentArea .navsArea .customTabNavs li a:before {
        top: 0;
        left: 0;
        transform: rotate(90deg)
    }

    section.mainStandards .standardsContentArea .navsArea:before {
        left: 0;
        top: 0;
        bottom: 10px;
        right: unset;
        height: unset;
        width: 100px;
        background: linear-gradient(90deg,rgb(255,255,255) 5%,rgba(255,255,255,0.58) 30%,rgba(255,255,255,0) 97%)
    }

    section.mainStandards .standardsContentArea .navsArea:after {
        right: 0;
        top: 0;
        bottom: 10px;
        left: unset;
        height: unset;
        width: 100px;
        background: linear-gradient(90deg,rgb(255,255,255) 5%,rgba(255,255,255,0.58) 30%,rgba(255,255,255,0) 97%)
    }

    section.mainStandards .standardsContentArea .owl-mainStandards {
        order: 3;
        width: 100%
    }

    section.mainStandards .wrapper {
        border-radius: 0 28px 0
    }

    section.mainStandards .wrapper .customTabContent {
        padding: 80px 0 65px
    }

    section.mainNews .wrapper {
        padding: 80px 20px 30px
    }

    section.mainNews .wrapper .swiper-pagination {
        right: 20px
    }

    section.mainNews .swiper-container {
        max-height: 270px
    }

    section.mainNews .swiper-slide {
        padding: 0 10px
    }

    section.mainNews .swiper-slide .newsArea .text {
        font-size: 20px;
        line-height: 33px
    }

    section.mainNews .swiper-slide .newsArea .moreBtn {
        padding: 20px 50px
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    section.mainSlider .swiper-container .swiper-slide .content .title {
        font-size:45px;
        line-height: 56px
    }

    section.mainSlider .swiper-container .swiper-slide .imgArea {
        width: 50%;
        min-width: 50%
    }

    section.mainSlider .swiper-pagination {
        margin-top: 50px
    }

    section.mainNewProducts .wrapper {
        padding-bottom: 200px;
        margin-bottom: -200px
    }

    section.mainNewProducts .wrapper .titleArea .right {
        gap: 30px
    }

    section.mainSolutions .wrapper:before {
        -webkit-mask-position: 80% top
    }

    section.mainStandards .standardsContentArea {
        gap: 30px;
        flex-wrap: wrap
    }

    section.mainStandards .standardsContentArea .content {
        width: calc(70% - 30px);
        min-width: calc(70% - 30px);
        order: 2
    }

    section.mainStandards .standardsContentArea .navsArea {
        width: 30%;
        min-width: 30%;
        order: 1
    }

    section.mainStandards .standardsContentArea .owl-mainStandards {
        order: 3;
        width: 100%
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    section.mainSlider .swiper-pagination {
        top:40px
    }

    section.mainNewProducts .wrapper {
        padding-bottom: 200px;
        margin-bottom: -200px
    }
}

@media screen and (min-width: 1201px) and (max-width:1920px) {
    section.mainNewProducts .wrapper {
        padding-bottom:200px;
        margin-bottom: -200px
    }
}

@media screen and (max-width: 768px) {
    .pageCorporate .corporateStats {
        margin-top:100px
    }

    .pageCorporate section.history {
        margin-top: -90px
    }

    .corporateStats {
        max-width: unset;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: auto auto;
        gap: 30px 10px;
        align-items: center
    }

    .corporateStats .item {
        order: 2;
        text-align: center
    }

    .corporateStats .item .text {
        text-align: center!important
    }

    .corporateStats .item.nowvaden {
        order: 1
    }

    .corporateStats .item.nowvaden img {
        margin: 0
    }

    section.history .owl-history {
        width: 100%
    }

    section.history .owl-history .owl-item .item {
        width: unset
    }

    section.history .owl-history .owl-stage-outer {
        overflow: hidden
    }
}

@media screen and (min-width: 577px) and (max-width:768px) {
    .pageCorporate .corporateStats {
        margin-top:150px
    }

    .corporateStats {
        max-width: unset;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: auto auto;
        gap: 30px 10px;
        align-items: center
    }

    .corporateStats .item {
        order: 4
    }

    .corporateStats .item .text {
        text-align: center!important
    }

    .corporateStats .item.nowvaden {
        grid-row: span 2
    }

    .corporateStats .item.nowvaden img {
        margin: 0
    }

    .corporateStats .item:nth-child(1) {
        order: 1
    }

    .corporateStats .item:nth-child(2) {
        order: 2
    }

    .corporateStats .item:last-child {
        order: 3
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .pageCorporate .corporateStats {
        margin-top:200px
    }

    .corporateStats {
        max-width: unset;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: auto auto;
        gap: 30px 10px;
        align-items: center
    }

    .corporateStats .item {
        order: 4
    }

    .corporateStats .item .text {
        text-align: center!important
    }

    .corporateStats .item.nowvaden {
        grid-row: span 2
    }

    .corporateStats .item.nowvaden img {
        margin: 0
    }

    .corporateStats .item:nth-child(1) {
        order: 1
    }

    .corporateStats .item:nth-child(2) {
        order: 2
    }

    .corporateStats .item:last-child {
        order: 3
    }

    section.history .owl-history {
        width: 100%
    }

    section.history .owl-history .owl-item .item {
        width: 50vw
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    .pageCorporate .corporateStats {
        margin-top:200px
    }

    section.history .owl-history {
        width: 100%
    }

    section.history .owl-history .owl-item .item {
        width: 50vw
    }
}

@media screen and (min-width: 1201px) and (max-width:1400px) {
    section.history .owl-history .owl-item .item {
        width:40vw
    }
}

@media screen and (max-width: 768px) {
    .productFilterArea {
        display:flex;
        gap: 10px;
        justify-content: space-between;
        flex-wrap: wrap
    }

    .productFilterArea .openMobileFiter {
        display: flex;
        width: 100%
    }

    .productFilterArea .filterTags {
        flex-wrap: nowrap;
        overflow: hidden;
        justify-content: flex-start;
        margin: 0;
        overflow-x: auto
    }

    .productFilterArea .filterTags::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: #9f0829
    }

    .productFilterArea .filterTags .tag {
        padding-right: 30px
    }

    .productFilterArea .filterTags .tag .deleteTag {
        right: 10px;
        opacity: 1
    }

    .productFilterArea .select2 {
        display: none
    }

    .filterTags {
        margin-bottom: 20px
    }

    .filterTags .tag {
        padding: 7.5px 17px;
        font-size: 12px
    }

    .filterTags .tag:hover .deleteTag {
        margin-right: -5px
    }

    .filterSidebar {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        opacity: 0;
        pointer-events: none;
        padding: 0;
        background: #fff;
        display: flex;
        flex-direction: column
    }

    .filterSidebar .sideBarTitle {
        display: block
    }

    .filterSidebar .sidebarSubmit {
        display: block;
        flex: 1;
        flex-shrink: 1
    }

    .filterSidebar .productListSidebar {
        border: 0;
        border-radius: 0;
        overflow: hidden;
        flex-grow: 1;
        overflow-y: auto;
        padding-bottom: 0
    }

    .filterSidebar .productListSidebar::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: #9f0829
    }

    .filterSidebar .productListSidebar .sidebarItem.order {
        display: block
    }

    .filterSidebar .productListSidebar .sidebarItem.order .list {
        display: flex;
        white-space: nowrap;
        gap: 10px;
        overflow: hidden;
        overflow-x: scroll
    }

    .filterSidebar .productListSidebar .sidebarItem.order .list::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: #9f0829
    }

    .filterSidebar .productListSidebar .sidebarItem.order+hr {
        display: block
    }

    .filterSidebar .productListSidebar .sidebarItem .list {
        padding-bottom: 0
    }

    .filterSidebar .productListSidebar .productCount {
        display: none
    }

    .filterSidebar .productListSidebar .productCount+hr {
        display: none
    }

    .filterSidebar.active {
        opacity: 1;
        pointer-events: auto
    }
}

@media screen and (max-width: 768px) {
    .contactInfoArea .mapArea {
        margin:20px 0
    }

    .contactCard {
        padding: 30px 41px
    }
}

@media screen and (max-width: 768px) {
    .pageDealers .centeredSlogan {
        position:relative;
        top: 0;
        transform: unset;
        font-size: 40px;
        line-height: 47px
    }

    .pageDealers .nowVaden {
        display: none
    }

    .dealerContactInfo {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 10px 40px
    }

    .dealerContactInfo .item {
        padding: 0
    }

    .dealerContactInfo .item:after {
        display: none
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .dealerContactInfo {
        padding:20px 20px 40px
    }
}

@media screen and (max-width: 768px) {
    .pageNewsDetail .contentWrapper .date {
        height:62px;
        font-size: 16px
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .pageNewsDetail .contentWrapper .date {
        height:62px;
        font-size: 16px
    }
}

@media screen and (max-width: 575px) {
    .productSteps {
        flex-wrap:wrap;
        gap: 10px
    }

    .productSteps .step {
        gap: 20px;
        align-items: center!important
    }

    .productSteps .step .icon {
        width: 24px;
        min-width: 24px;
        height: 24px
    }

    .productSteps .step .text {
        font-size: 12px
    }

    .productSteps .step:after {
        display: none
    }

    .productSteps .step.lastStep {
        flex: unset;
        padding: 0;
        width: 100%;
        border-radius: 8px
    }
}

@media screen and (min-width: 576px) and (max-width:768px) {
    .productSteps {
        flex-wrap:wrap;
        gap: 10px
    }

    .productSteps .step {
        gap: 20px
    }

    .productSteps .step .icon {
        width: 24px;
        min-width: 24px;
        height: 24px
    }

    .productSteps .step .text {
        font-size: 12px
    }

    .productSteps .step:after {
        display: none
    }

    .productSteps .step.lastStep {
        padding: 0;
        width: 100%;
        border-radius: 8px
    }
}

@media screen and (max-width: 768px) {
    .pageProductDetail .pageDefaultWrapper {
        border-radius:0 0 30px 30px;
        padding-bottom: 20px
    }

    .pageProductDetail .productContent {
        padding: 0;
        margin-top: 30px
    }

    .pageProductDetail .productContent .code {
        font-size: 30px;
        line-height: 33px
    }

    .pageProductDetail .productContent .eanCode {
        font-size: 16px
    }

    .pageProductDetail .productContent .customTabNavs {
        padding-left: 0
    }

    .pageProductDetail .productContent .customTabContent .brandOemList {
        padding-left: 0
    }

    .pageProductDetail .productContent .customTabContent .brandOemList li {
        width: 45%;
        text-align: center
    }

    .pageProductDetail .getContact {
        flex-direction: column;
        display: none
    }

    .pageProductDetail .productTabs .customTabNavs {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 20px 10px
    }

    .pageProductDetail .productTabs .customTabNavs li {
        width: calc(50% - 5px);
        text-align: center
    }

    .pageProductDetail .productTabs .customTabNavs li a {
        font-size: 16px
    }

    .pageProductDetail .productTab2 .tabTitleArea {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px
    }

    .pageProductDetail .productTab2 .tabTitleArea .filterItemsBox {
        max-width: 100%
    }

    .pageProductDetail .productTab2 table tr td:first-child {
        padding-left: 12px
    }

    .pageProductDetail .productSpecs {
        flex-direction: column
    }

    .pageProductDetail .productSpecs .btns {
        max-width: 100%
    }

    .otherOemNumbers li {
        width: 100%
    }

    .productTags {
        display: flex;
        flex-wrap: wrap
    }

    .productTags li {
        width: calc(50% - 10px);
        text-align: center;
        font-size: 13px
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .productTags {
        grid-template-columns:repeat(4,1fr)
    }

    .pageProductDetail .productContent {
        padding-left: 0
    }

    .pageProductDetail .productContent .code {
        padding-right: 60px;
        font-size: 31px
    }

    .pageProductDetail .productContent .eanCode {
        padding-right: 60px
    }

    .pageProductDetail .productContent .customTabNavs {
        gap: 10px 20px
    }

    .pageProductDetail .productContent .getContact {
        flex-direction: column
    }

    .pageProductDetail .productTabs .customTabNavs li a {
        font-size: 16px
    }

    .productSteps {
        flex-wrap: wrap;
        gap: 10px
    }

    .productSteps .step:after {
        display: none
    }

    .productSteps .step.lastStep {
        margin-top: 10px;
        padding: 0;
        width: 100%;
        flex: unset
    }

    .otherOemNumbers li {
        flex-direction: column;
        width: 100%
    }

    .otherOemNumbers li .brand {
        width: 100%
    }

    .otherOemNumbers li .oemNo {
        width: 100%;
        min-height: 64px
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    .otherOemNumbers li .brand {
        padding:0 12px
    }

    .otherOemNumbers li .oemNo {
        padding: 0 12px
    }

    .pageProductDetail .pageDefaultWrapper {
        border-radius: 0 0 30px 30px;
        padding-bottom: 20px
    }
}

@media screen and (max-width: 768px) {
    .pageQuality {
        padding-top:150px
    }

    .pageQuality .qualityLinks {
        flex-direction: column;
        gap: 30px;
        margin-top: 120px;
        align-items: center;
        text-align: center
    }

    .pageQuality .qualitySlogan {
        display: none
    }

    .pageQuality .nowVaden {
        display: none
    }

    .pageQuality .qualityContent {
        width: 100%;
        flex-direction: column;
        text-align: center;
        align-items: center
    }

    .pageQuality .qualityContent img {
        width: 50%
    }
}

@media screen and (max-width: 576px) {
    .page404Content .buttons {
        flex-direction:column
    }

    .page404Content .notFound {
        font-size: 120px;
        line-height: 120px
    }
}

@media screen and (max-width: 576px) {
    .solutionItem {
        padding: 20px 30px;
        gap: 10px
    }

    .solutionItem .title {
        font-size: 22px;
        line-height: 18px;
        min-height: 36px;
        display: flex;
        align-items: center
    }

    .solutionItem .icon {
        min-width: 25px;
        width: 60px;
        height: 60px;
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    .solutionItem {
        padding:20px 26px 20px 25px
    }
}

@media screen and (max-width: 576px) {
    .mainCard {
        padding:30px 20px;
        border-radius: 14px;
        gap: 30px
    }

    .mainCard .description {
        font-size: 16px;
        line-height: 22px
    }

    .mainCard .cardImg {
        max-height: 80px
    }

    .mainCard.view-2 .cardImg {
        max-height: 57%
    }

    .mainCard .swiper-container {
        width: 100%
    }

    .mainCard .swiper-pagination {
        margin: 0
    }

    .mainCardVideoItem {
        gap: 15px
    }

    .mainCardVideoItem .title {
        font-size: 16px;
        line-height: 22px
    }
}

@media screen and (min-width: 577px) and (max-width:768px) {
    .mainCard {
        border-radius:14px;
        gap: 30px;
        aspect-ratio: 560/225
    }

    .mainCard .description {
        font-size: 16px;
        line-height: 22px
    }

    .mainCard .cardImg {
        max-height: 80px
    }

    .mainCard.view-2 .cardImg {
        max-height: 57%
    }

    .mainCard .swiper-container {
        width: 110%
    }

    .mainCard .swiper-pagination {
        margin: 0
    }

    .mainCardVideoItem {
        gap: 15px
    }

    .mainCardVideoItem .title {
        font-size: 16px;
        line-height: 22px
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .mainCard {
        border-radius:14px;
        padding: 50px 25px;
        gap: 20px;
        aspect-ratio: unset;
        height: 360px;
        position: relative
    }

    .mainCard .cardImg {
        max-height: 50px
    }

    .mainCard.view-2 .cardImg {
        max-height: 40%
    }

    .mainCard .swiper-container {
        width: 100%
    }

    .mainCard .swiper-pagination {
        position: absolute;
        right: 25px;
        bottom: 25px;
        top: unset;
        left: unset;
        margin: 0
    }

    .mainCardVideoItem {
        gap: 15px
    }

    .mainCardVideoItem .title {
        font-size: 14px;
        line-height: 19px
    }

    .mainCardVideoItem .imgArea:after {
        width: 20px
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    .mainCard {
        border-radius:14px;
        padding: 50px 25px;
        gap: 20px;
        aspect-ratio: unset;
        height: 450px;
        position: relative
    }

    .mainCard.view-2 .cardImg {
        max-height: 40%
    }

    .mainCard .swiper-pagination {
        position: absolute;
        right: 25px;
        bottom: 25px;
        top: unset;
        left: unset;
        margin: 0
    }

    .mainCardVideoItem {
        gap: 15px
    }

    .mainCardVideoItem .title {
        font-size: 14px;
        line-height: 19px
    }

    .mainCardVideoItem .imgArea:after {
        width: 20px
    }
}

@media screen and (min-width: 1201px) and (max-width:1400px) {
    .mainCard {
        border-radius:14px;
        padding: 50px 25px;
        gap: 20px;
        aspect-ratio: unset;
        height: 450px;
        position: relative
    }

    .mainCard.view-2 .cardImg {
        max-height: 40%
    }

    .mainCard .swiper-pagination {
        position: absolute;
        right: 25px;
        bottom: 25px;
        top: unset;
        left: unset;
        margin: 0
    }

    .mainCard .swiper-container {
        width: 110%
    }

    .mainCardVideoItem {
        gap: 15px
    }

    .mainCardVideoItem .title {
        font-size: 14px;
        line-height: 19px
    }

    .mainCardVideoItem .imgArea:after {
        width: 20px
    }
}

@media screen and (max-width: 992px) {
    .historyItem {
        border-radius:14px;
        padding: 25px
    }

    .historyItem .text {
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (max-width: 768px) {
    .facilityItem {
        border-radius:12px;
        padding: 35px;
        aspect-ratio: unset
    }

    .facilityItem .title {
        font-size: 30px
    }

    .facilityItem .stats {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 30px 10px;
        margin-top: 90px
    }

    .facilityItem .stats .item {
        padding: 0;
        font-size: 19px;
        line-height: 20px;
        white-space: nowrap;
        text-align: left
    }

    .facilityItem .stats .item:after {
        display: none
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .facilityItem {
        border-radius:12px;
        padding: 35px
    }

    .facilityItem .title {
        font-size: 30px
    }

    .facilityItem .stats {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 30px 10px
    }

    .facilityItem .stats .item {
        padding: 0;
        font-size: 19px;
        line-height: 20px;
        white-space: nowrap
    }

    .facilityItem .stats .item:after {
        display: none
    }
}

@media screen and (max-width: 576px) {
    .catalogItem1 .catalogAddToList {
        padding:14px 10px;
        font-size: 12px;
        text-align: center;
        border-radius: 19px
    }
}

@media screen and (max-width: 768px) {
    .catalogItem1 {
        flex-wrap:wrap;
        padding: 32px;
        justify-content: space-between;
        gap: 30px 0;
        margin-top: 30px;
        margin-bottom: 18px
    }

    .catalogItem1 img {
        top: 0;
        margin: 0;
        width: 40%;
        min-width: unset
    }

    .catalogItem1 .content {
        width: 100%
    }

    .catalogItem1 .content .item {
        gap: 10px
    }

    .catalogItem1 .content .item b {
        min-width: 50%;
        width: 50%;
        font-size: 15px
    }

    .catalogItem1 .content .item span {
        font-size: 14px
    }

    .catalogItem1 .catalogAddToList {
        width: 50%;
        padding: 15px 18px;
        text-align: center
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .catalogItem1 {
        flex-wrap:wrap;
        padding: 42px 30px;
        gap: 30px 0
    }

    .catalogItem1 .content {
        width: 70%
    }

    .catalogItem1 .content .item {
        gap: 10px
    }

    .catalogItem1 .content .item b {
        min-width: 50%;
        width: 50%
    }

    .catalogItem1 img {
        width: 30%;
        min-width: unset;
        margin-right: 0
    }

    .catalogItem2 img {
        width: 100px;
        margin-right: 10px
    }
}

@media screen and (max-width: 768px) {
    .sidePopup {
        width:100vw;
        padding: 45px 0 75px
    }

    .sidePopup.active {
        max-width: 100vw;
        padding: 45px 0 75px
    }

    .sidePopup .closeBtn {
        right: 30px
    }

    .sidePopup .wrapper {
        padding: 0 30px;
        width: 100vw
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .sidePopup {
        width:50vw;
        padding: 45px 40px 95px
    }

    .sidePopup .wrapper {
        padding-left: 0
    }
}

@media screen and (min-width: 993px) and (max-width:1400px) {
    .sidePopup {
        width:40vw;
        padding: 45px 40px 95px
    }

    .sidePopup .wrapper {
        padding-left: 0
    }
}

@media screen and (max-width: 768px) {
    .accordionItem .accordionHeader {
        padding:13px 40px 13px 20px;
        font-size: 16px
    }

    .accordionItem .accordionHeader:after {
        right: 15px
    }

    .accordionItem.typContact .accordionHeader {
        padding: 31px 40px 31px 20px
    }

    .accordionItem.typContact .accordionHeader:after {
        right: 20px
    }

    .accordionItem.typContact .accordionBody {
        padding: 0 30px
    }

    .accordionItem.typeImage .accordionHeader {
        padding: 36px 21px;
        flex-direction: column;
        gap: 20px;
        text-align: center
    }

    .accordionItem.typeImage .accordionHeader .imgArea {
        height: 90px;
        width: unset;
        min-width: unset;
        padding: 20px
    }

    .accordionItem.typeImage .accordionHeader .text {
        font-size: 16px
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .accordionItem.typContact .accordionHeader {
        padding:31px 40px 31px 20px
    }

    .accordionItem.typContact .accordionHeader:after {
        right: 20px
    }

    .accordionItem.typContact .accordionBody {
        padding: 0 30px
    }

    .accordionItem.typeImage .accordionHeader {
        gap: 20px
    }

    .accordionItem.typeImage .accordionHeader .imgArea {
        width: 240px;
        min-width: 240px
    }
}

@media screen and (max-width: 768px) {
    .vectorMapWrapper .list {
        display:grid;
        grid-template-columns: repeat(2,1fr)
    }

    .vectorMapWrapper #vectorMap {
        margin: 0
    }
}

@media screen and (min-width: 577px) and (max-width:768px) {
    .agentItem {
        padding:30px 10px
    }
}

@media screen and (max-width: 768px) {
    .newsItem {
        aspect-ratio:unset
    }

    .newsItem .newsWrapper {
        flex-direction: column;
        padding: 30px 15px
    }

    .newsItem .newsWrapper .text {
        font-size: 16px;
        line-height: 27px
    }

    .newsItem .newsWrapper .text b {
        font-size: 20px;
        line-height: 33px
    }

    .newsItem .newsWrapper .bottom {
        position: relative;
        bottom: 0;
        gap: 20px;
        width: 100%;
        margin-top: 25px
    }

    .newsItem .newsWrapper .bottom .moreBtn {
        padding: 17px 48px;
        bottom: 0
    }

    .newsItem .newsWrapper .bottom .date {
        font-size: 16px
    }

    .newsItem .moreBtn {
        padding: 20px 50px
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .newsItem {
        aspect-ratio:1712/690
    }

    .newsItem .newsWrapper {
        flex-direction: column;
        gap: 20px;
        justify-content: space-evenly;
        padding: 20px
    }

    .newsItem .newsWrapper .text {
        font-size: 30px;
        line-height: 40px
    }

    .newsItem .newsWrapper .bottom {
        position: relative;
        bottom: 0;
        gap: 20px;
        width: 100%;
        margin-top: 10px
    }

    .newsItem .newsWrapper .bottom .moreBtn {
        padding: 17px 48px;
        bottom: 0
    }

    .newsItem .newsWrapper .bottom .date {
        font-size: 16px
    }
}

@media screen and (min-width: 993px) and (max-width:1200px) {
    .newsItem {
        aspect-ratio:1712/600
    }

    .newsItem .newsWrapper {
        flex-direction: column;
        gap: 20px;
        justify-content: space-evenly;
        padding: 20px
    }

    .newsItem .newsWrapper .text {
        font-size: 30px;
        line-height: 40px
    }

    .newsItem .newsWrapper .bottom {
        position: relative;
        bottom: 0;
        gap: 20px;
        width: 100%;
        margin-top: 10px
    }

    .newsItem .newsWrapper .bottom .moreBtn {
        padding: 17px 48px;
        bottom: 0
    }

    .newsItem .newsWrapper .bottom .date {
        font-size: 16px
    }
}

@media screen and (max-width: 768px) {
    .breadcrumb .breadCrumbTitle {
        margin-bottom:9px
    }

    .breadcrumb ul {
        flex-wrap: wrap;
        /* gap: 10px 0; */
    }
}

@media screen and (max-width: 768px) {
    .blogItem img {
        width:100%
    }
}

@media screen and (min-width: 769px) and (max-width:992px) {
    .blogItem {
        gap:30px
    }

    .blogItem .content {
        width: calc(70% - 30px)
    }
}

@media screen and (max-width: 768px) {
    .productListSlider .swiper-container .swiper-slide .backgroundImage {
        aspect-ratio:1317/470
    }

    .productListSlider .swiper-container .swiper-pagination {
        right: 20px;
        bottom: 20px;
        top: unset;
        transform: unset
    }

    .productListSlider .searchBox {
        width: 100%;
        margin: 20px 0
    }

    .productListSlider .searchBox form .form-group button {
        padding: 6px 15px;
        height: 40px;
        width: 110px
    }
}

@media screen and (max-width: 768px) {
    .page-header {
        aspect-ratio:unset;
        border-radius: 12px
    }

    .page-header .content .title {
        font-size: 16px;
        line-height: 23px;
        margin-bottom: 30px
    }

    .page-header .content .text {
        font-size: 15px
    }

    .breadcrumb ul li a, .breadcrumb ul li span {
        font-size: 14px;
        line-height: 20px;
    }
}