@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
    display: block;
}

*[hidden] {
    display: none;
}

menu, ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    line-height: 1;
    padding: 0;
    margin: 0;
    font-family: "Manrope", sans-serif;
    /* background: #F4F7F3; */
}

body.overflow {
    overflow: hidden;
}

*, ::after, ::before {
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

button {
    cursor: pointer;
    border: none;
    padding: 0px;
    outline: 0;
}

.btn-check:focus+.btn, .btn:focus{
    outline: 0;
    box-shadow: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

input, select, textarea{
    font-family: "Manrope", sans-serif;
}

section{
    width: 100%;
}

hr{
    margin: 0px;
}

hr.white{
    color: white;
}

a:hover{
    color: unset;
}

@media screen and (min-width:1921px){
    .container-fluid{
        max-width: 1296px;
    }
}

/* general style
-------------------------------------------------------------- */

.header{
    background: #B5BFC3;
    padding: 60px 0 142px 0;
}

.headerWrapper {
    display: flex;
}

.logoArea {
    display: flex;
}

.logoArea a {
    display: flex;
}

.menuWrapper {
    float: right;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 18px;
    position: relative;
}

.menuWrapper > ul {
    gap: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    cursor: pointer;
    transition: all .3s ease;
    padding-bottom: 10px;
}

.menuWrapper > ul li {
    height: 4px;
    background: white;
    display: flex;
    width: 100%;
    transition: all .4s ease-in-out;
}

.menuWrapper > ul li:first-child {
    width: 49px;
    opacity: .4;
}

.menuWrapper > ul li:nth-child(2) {
    width: 26px;
    opacity: .6;
}

.menuWrapper > ul li:nth-child(3) {
    width: 62px;
    opacity: 1;
}

.menuWrapper > ul:hover li:first-child {
    width: 26px;
    opacity: 1;
}

.menuWrapper > ul:hover li:nth-child(2) {
    width: 62px;
    opacity: .6;
}

.menuWrapper > ul:hover li:nth-child(3) {
    width: 42px;
    opacity: .4;
}

.copyright {
    background: white;
    padding: 45px 0;
}

.copyright p {
    color: #B2BCC0;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    text-align: left;
}

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

.footer {
    background: #B2BCC0;
}

.footerMenuArea {
    width: 100%;
    margin: 100px 0 0px 0;
}

.footerMenuArea p {
    color: white;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 300;
    line-height: 20.49px;
    text-align: left;
}

.footerMenuArea ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
}

.footerMenuArea ul li {
    width: calc(50% - 5px);
}

.footerMenuArea span {
    color: #E1E7EA;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 500;
    line-height: 21.86px;
    text-align: left;
    width: 100%;
    margin-bottom: 27px;
    display: block;
}

.footerMenuArea ul li a {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 500;
    line-height: 35px;
    text-align: left;
    color: white;
}

.footerMenuArea ul li a:hover {
    color: #3c444e;
}

.footerMenuArea.singleMenu ul li{
    width: 100%;
}

.socialMedia {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 60px;
}

.socialMedia a {
    display: flex;
}

.socialMedia a:hover img {filter: brightness(0) saturate(100%) invert(21%) sepia(11%) saturate(882%) hue-rotate(173deg) brightness(96%) contrast(81%);}

.footerBottomArea {
    width: 100%;
    justify-content: space-between;
    margin: 50px 0;
}

.footerBottomArea > div{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.footerBottomArea p, .footerBottomArea a {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: white;
}

.footerBottomArea a:hover {
    color: #3c444e;
}

.footerLogoArea {
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    color: white;
    font-family: Manrope;
    font-size: 20px;
    font-weight: 300;
    line-height: 31px;
    text-align: left;
}

.footerLogoArea p {
    width: 100%;
    text-align: right;
}

.footerLogoArea img{
    width: 100%;
    max-width: 300px;
}

.footerTop {
    width: 100%;
    background: #E1E7EA;
    position: relative;
}

.footerTop:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 160px;
    height: 95px;
    background: url('../img/truck3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    left: 28%;
}

.footerTopLogo {
    width: 100%;
    display: flex;
    align-items: center;
}

.footerTopLogo a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footerTopLogo a img {}

.footerTopDesc, .footerTopLogo {
    width: 100%;
    display: flex;
    gap: 40px;
    align-items: center;
    padding: 90px 0;
}
.brands {
    margin-bottom: 175px;
}

.brandsWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 165px;
}

.brandsWrapper h2 {
    font-family: Manrope;
    font-size: 48.83px;
    font-weight: 500;
    line-height: 54px;
    text-align: left;
}

.brandsWrapper ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: auto;
    gap: 30px;
    padding-bottom: 10px;
}

.brandsWrapper ul li {
    display: flex;
}

.brandsWrapper ul li a {
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: center;
}

.brandsWrapper ul li a img {}

.newsAndInnovations {
    width: 100%;
    padding-bottom: 150px;
}

.newsAndInnovations.newPage{
    background: #F5FAFD;
    padding-top: 80px;
}

.themeTitleBig {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.themeTitleBig span {
    font-family: Manrope;
    font-size: 48.83px;
    font-weight: 500;
    line-height: 54px;
    text-align: left;
    width: 100%;
    max-width: 60%;
}

.themeTitleBig p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
    text-align: left;
    color: #94A3A8;
}

.newsListArea {
    width: 100%;
    margin-top: 180px;
}

.newsListArea ul {}

.newsListArea ul li {
    width: 100%;
    border-bottom: 1px solid #C0C9CE99;
    padding: 44px 0 50px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.newsListArea ul li p {
    font-family: Manrope;
    font-size: 22.46px;
    font-weight: 300;
    line-height: 22.92px;
    text-align: left;
    color: #3C444E;
}

.newsListArea ul li p span {}

.newsListArea ul li span {
    font-family: Bai Jamjuree;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.92px;
    text-align: left;
    color: #C0C9CE;
}

.newProducts {
    width: 100%;
    margin-bottom: 170px;
    background: #94A3A8;
    backdrop-filter: blur(4px);
    position: relative;
    z-index: 99;
}

.productList{
    width: 100%;
}

.innovationArea {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.innovationArea span {
    font-family: Bai Jamjuree;
    font-size: 32px;
    font-weight: 275;
    line-height: 34px;
    letter-spacing: 0.38em;
    text-align: left;
    color: #B5C1C5;
    text-transform: uppercase;
}

.innovationArea span strong{
    font-weight: 500;
}

.innovationArea img {
    display: flex;
}

.themeTitle {
    width: 100%;
    margin-bottom: 120px;
    display: flex;
    gap: 37px;
    flex-direction: column;
}

.themeTitle.verticalTitle {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    z-index: 999;
    margin-bottom: 0;
}

.themeTitle h2 {
    display: flex;
    font-family: Manrope;
    font-size: 48.83px;
    font-weight: 500;
    line-height: 54px;
    text-align: left;
    color: white;
    align-items: flex-end;
}

.themeTitle p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
    text-align: left;
    color: white;
}

.themeTitle span {}

.themeTitle h2 img {
    margin-bottom: 8px;
}

.dot{
    color: #E5BC18;
}

.productItem {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    padding: 32px;
    align-items: flex-start;
    gap: 5px;
}

.productItemBrand {
    display: flex;
    object-fit: scale-down;
}

.productItemBrand img {
    object-fit: scale-down;
    height: 20px;
}

.productItemImage {
    display: flex;
    object-fit: scale-down;
}

.productItemImage img {
    object-fit: scale-down;
}

.productItemDetail {
    width: 100%;
}

.productItemDetailDesc {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.productItemDetailDesc h2, .productItemDetailDesc h2 a{
    font-family: Manrope;
    font-size: 17px;
    font-weight: 400;
    line-height: 23px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: inline-block;
}

.productItemDetailDesc h2 a:hover{
    color: #007ca5;
}

.productItemDetailDesc span {
    font-family: Manrope;
    font-size: 13px;
    font-weight: 600;
    line-height: 23px;
    text-align: left;
    color: #94A3A8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.productNumber {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    text-align: left;
    color: #3C444E;
}

.farmingBanner {
    background: #E1E7EA;
    position: relative;
    padding-top: 190px;
    padding-bottom: 0;
}

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

.farmingArea h3 {
    font-family: Manrope;
    font-size: 52px;
    font-weight: 300;
    line-height: 73px;
    text-align: center;
    position: absolute;
    top: 30px;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.farmingArea img {width: 100%;}

.farmingBanner:after {
    content: "";
    width: 100%;
    height: 768px;
    background: url('../img/flu.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    z-index: 9;
    bottom: -360px;
}
.exunaySpareParts {
    background: #AEB9BD;
    padding-top: 120px;
    padding-bottom: 110px;
}
.sliderWrapper{
    width: calc(100% - 305px);
    float: right;
    position: relative;
    z-index: 99;
}

.sliderProducts {
    width: 100%;
}

.spareItemCard {
    background: #E1E7EA;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
}


.spareTitle {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.spareImage {
    width: 100%;
    margin-bottom: 40px;
}

.spareImage img {
    width: 100%;
}

.spareLink {
    display: flex;
}

.spareLink a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 300;
    line-height: 30px;
    text-align: left;
    color: #94A3A8;
}

.spareLink a:hover {
    color: black;
    margin-left: 10px;
}

.spareImage a, .productItemImage a{
    overflow: hidden;
}

.spareImage a:hover img, .productItemImage a:hover img{
    transform: scale(1.04);
}

.spareLink a img, .spareImage a img, .productItemImage a img{
    transition: all .3s ease;
}

.spareTitle h2 {
    font-family: Bai Jamjuree;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-align: left;
    color: #94A3A8;
}

.spareTitle span {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 300;
    line-height: 30px;
    text-align: left;
    color: #94A3A8;
}

.sliderLink {
    width: 100%;
    margin-top: 105px;
}

.btn-link{
    display: flex;
    text-decoration: none;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    text-align: left;
    color: white;
    transition: all .3s ease;
    width: fit-content;
    text-decoration: underline;
}
.btn-link:hover{
    color: #001e29;
}

.ourCompany {
    background-color: #3C444E;
    background-image: url('../img/bgico.png');
    background-repeat: no-repeat;
    background-position: 40% 16%;
    background-size: auto;
    padding-top: 166px;
}

.ourCompanyLeft {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.ourCompanyLeft span {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 400;
    line-height: 34px;
    text-align: left;
    color: #758084;
}

.ourCompanyLeft p {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 400;
    line-height: 34px;
    text-align: left;
    color: #AEB9BD;
}

.ourCompanyRight {}

.ourCompanyRight p {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    text-align: left;
    color: #AEB9BD;
}

.companyIcon{
    display: flex;
    position: relative;
    bottom: -53px;
}
.companyIcon img{
    display: flex;
}

.productItemImage a img, .spareImage a img{
    width: 100%;
}

.hero{
    width: 100%;
    position: relative;
}
.heroBanner{
    width: 100%;
    display: flex;
}
.heroBanner img{
    width: 100%;
}
/*
.hero:after{
    content: "";
    width: 100%;
    height: 768px;
    background: url('../img/flu1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    z-index: 9;
    bottom: -110px;
}
*/

.heroTopWrapper {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
}


.textChangeWrapper {
    width: 100%;
    display: flex;
    font-family: Manrope;
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    text-align: left;
    color: white;
    white-space: nowrap;
}

.textChange{
    width: 100%;
    background-color: #B5BFC3;
    padding-bottom: 150px;
    margin-top: -90px;
}

.changeText {
    display: inline-block;
    height: 50px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    text-align: left;
    padding-left: 10px;
}

.changeText span {
    opacity: 0;
    display: inline-block;
    visibility: hidden; 
    position: absolute;
    width: 100%;
    color: #A3B1B7;
}

.changeText span.active {
    opacity: 1;
    visibility: visible; 
    animation: slideUp 1s ease-in-out;
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

.heroLogo {
    margin-top: -47px;
}

.heroLogo img {
    width: 100%;
    max-width: 205px;
}

.partsFinderWrapper {
    /* padding: 25px 35px 45px 35px; */
    width: 100%;
    backdrop-filter: blur(6.6px);
    border: 1px solid #FFFFFF33;
    background: #D9D9D966;
    display: flex;
    flex-direction: column;
    margin-top: -80px;
}

.formBottom{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 25px 35px 45px 35px;
}

.partsFinderWrapper > span {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-align: left;
    color: white;
    border-bottom: 1px solid #FFFFFF33;
    padding: 20px 35px 29px 55px;
}

.partsFinderSearch {
    width: 100%;
    margin-bottom: 25px;
}

.partsFinderSearch > span {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    text-align: left;
    color: #3C444E;
    padding-left: 20px;
    display: flex;
}

.form-select{
    background-image: url('../img/select.svg');
}

.form-control, .form-select{
    height: 60px;
    margin-bottom: 10px;
    backdrop-filter: blur(23.600000381469727px);
    box-shadow: 0px 0px 60px 0px #909DA333;
    background-color: #FFFFFF33;
    border: 1px solid #FFFFFF80;
    color: #3C444E;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    text-align: left;
}

body .form-select option{
    backdrop-filter: blur(23.600000381469727px);
    box-shadow: 0px 0px 60px 0px #909DA333;
    background-color: #acaba68c;
    border: 1px solid #FFFFFF80;
}

.form-select option > span{
    font-weight: 300;
    color: #3C444E4D;
}

.form-control:focus, .form-select:focus{
    box-shadow: none;
    border-color: #94A3A8;
}

#floatingSearch{
    /* background-image: url('../img/search.svg'); */
    background-repeat: no-repeat;
    background-position: 96% 46%;
    padding-right: 50px;
}

.form-floating>label {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    text-align: left;
    color: #3C444E;
}

.btn-primary {
    backdrop-filter: blur(30px);
    box-shadow: 0px 0px 51.3px 0px #FFCC01CC;
    width: 100%;
    background: #FFCC01CC;
    border: 0;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    text-align: left;
    height: 60px;
    text-align: center;
    color: #3C444E;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover {
    background: #e3b500cc;
    box-shadow: 0px 0px 51.3px 0px #e3b500cc;
    color: #3C444E;
}

.btn-secondary {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    text-align: left;
    backdrop-filter: blur(30px);
    box-shadow: 0px 0px 51.3px 0px #C5D9E0CC;
    width: 100%;
    border: 0;
    background: #fff;
    color: #3C444E;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-radius: 5px;
    
}

.btn-secondary:hover {
    background: #d7d7d7;
    color: #3C444E;
}


.farmingBannerBottom {
    background: #94A2A8;
    padding: 70px 0 120px 0;
}

.exunaySpareParts .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide {
    filter: blur(1.5px);
}

.newProducts .swiper-slide-active, .newProducts .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide {
    filter: blur(1.5px);
}

.accordion-button::after{
    display: none;
}

.accordion-button {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-family: Manrope;
    font-size: 22.46px;
    font-weight: 300;
    line-height: 22.92px;
    text-align: left;
    color: #3C444E!important;
    border-bottom: 1px solid #C0C9CE99;
    padding: 44px 0 50px 0;
    background: none;
    transition: all .3s ease;
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: auto;
}

.accordion-button:hover{
    padding-right: 100px!important;
    background-image: url(../img/arrow_forward.svg);

}

.accordion-button span {
    font-family: Bai Jamjuree;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.92px;
    text-align: left;
    color: #C0C9CE;
}

.accordion-button:not(.collapsed) {
    border-bottom: 1px solid #C0C9CE99;
    padding: 44px 0 50px 0;
    background-color: #fff0;
    box-shadow: none;
    padding-right: 100px!important;
    background-image: url(../img/arrow_forward.svg);
}

.accordion-item {
    background: none;
    border: 0;
}

.accordion-body {
    font-size: 20px;
    font-weight: 300;
    line-height: 32px;
    text-align: left;
    color: #3C444E !important;
    padding: 20px 0px 0px 0px;
}

.accordion-button:focus{
    box-shadow: unset;
    border-color: #C0C9CE99;
}

.accordionWrapper{
    width: 100%;
    margin-top: 125px;
}
.bannerInfo, .bannerInfo a{
    width: 100%;
}
.bannerInfo img{
    width: 100%;
}

.menuWrapper:hover .quickMenu{
    opacity: 1;
    overflow: visible;
    z-index: 999;
}

.quickMenu {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: 100%;
    width: 304px;
    backdrop-filter: blur(100px);
    background: #E1E7EA4D;
    display: flex;
    flex-direction: column;
    z-index: -1;
    transition: all .3s ease;
}

.quickMenu > span {
    backdrop-filter: blur(100px);
    width: 100%;
    padding: 28px 44px;
    display: flex;
    font-family: Manrope;
    font-size: 20px;
    font-weight: 400;
    line-height: 47px;
    text-align: left;
    color: #3C444E;
}

.quickMenu ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.quickMenu ul li {
    width: 100%;
}

.quickMenu ul li a {
    width: 100%;
    font-family: Manrope;
    font-size: 20px;
    font-weight: 300;
    line-height: 42px;
    text-align: left;
    padding: 0 24px 0 44px;
    position: relative;
    display: block;
}

.quickMenu ul li a:hover {
    font-weight: 500;
}

.quickMenu ul li a:hover:after {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    background: url('../img/arrow_forward.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    position: absolute;
    right: 20px;
    top: 8px;
    transition: all .3s ease;
}
.menuBottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 44px;
    border-top: 1px solid #C9C9C9;
}

.menuBottom span, .menuBottom a {
    font-family: Manrope;
    font-size: 12.17px;
    font-weight: 400;
    line-height: 19px;
    text-align: left;
    /* color: white; */
    padding: 0;
}

.categoryList{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 46px;
}

.categoryList .spareItemCard, .categoryList .productItem{
    width: calc(100% * 1/4 - 15px);
}

.centerTitle {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 75px;
}

.centerTitle h2 {
    font-family: Manrope;
    font-size: 22px;
    font-weight: 400;
    line-height: 33px;
    text-align: center;
    color: #3C444E;
}

.centerTitle p {
    font-family: Manrope;
    font-size: 22px;
    font-weight: 400;
    line-height: 33px;
    text-align: center;
    color: #94A3A8;
}

.centerTitle.withImage{
    
flex-direction: row;
    
gap: 30px;
}

.categoryArea {
    background: #f5fafd;
    padding-bottom: 80px;
    margin-bottom: 135px;
}

.seoWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-top: 80px;
}

.seoWrapper p {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    width: 100%;
    margin: 0;
}

.horizantalSearch {
    width: 100%;
    backdrop-filter: blur(23.600000381469727px);
    background: #D9D9D966;
    border: 1px solid #FFFFFF33;
    margin-top: -61px;
    transition: all .3s ease!important;
}

.horizantalSearch:not(.active){
    border-bottom: 0;
}

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

.finderTitle h1 {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-align: left;
    color: white;
}

.finderTitle p {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    color: white;
}

.horizantalSearch .inputWrapper {
    display: flex;
    gap: 20px;
    padding: 45px 20px;
    transition: all .3s ease!important;
}

.active .inputWrapper{
    display: flex!important;
    transition: all .3s ease!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
}

.partfinders {
    width: 100%;
    position: relative;
    background: #f5fafd;
    padding-bottom: 80px;
}

.partfinders.active{
    padding-bottom: 80px!important;
    transition: all .3s ease!important;
}

.horizantalSearch .inputWrapper .form-select, .horizantalSearch .inputWrapper button {
    margin-bottom: 0;
}

.horizantalSearch #floatingSearch {
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    backdrop-filter: blur(23.600000381469727px);
    background-color: #F5FAFD;
}

.finderTitle h1{
    width: 20%;
    text-align: center;
}
.finderTitle p{
    width: 45%;
    padding-right: 5%;
}
.finderTitle .form-floating{
    width: 35%;
}

.titlewithIcon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.backgroundTools {
    position: relative;
    width: 100%;
    height: 0px;
}

.leftTool {
    position: absolute;
    left: 210px;
    top: 100px;
}

.rightTool {
    right: 430px;
    position: absolute;
    top: 25px;
}

.searchInput{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: none;
    width: 50px;
}

.advancedSearch {
    backdrop-filter: blur(30px);
    box-shadow: 0px 0px 51.3px 0px #FFCC01CC;
    background-color: #FFCC01CC;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0;
    height: 60px;
    border: 0;
    gap: 10px;
    background-image: url('../img/down.svg');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 92% 50%;
}

.advancedSearch a {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 10px;
    padding: 0 66px 0 26px;
}

.product-detail {
    display: flex;
    align-items: flex-start;
    width: 100%;
    background: white;
    padding: 30px;
    margin-bottom: 20px;
  }
  
  .image-thumbnails {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    width: 110px;
    height: 100%;
    max-height: 423px;
    overflow-y: scroll;
    box-sizing: border-box;
    object-fit: scale-down;
  }
  
  .image-thumbnails img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid #B5BFC333;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: scale-down;
  }
  
  .image-thumbnails img:hover, .image-thumbnails img.active {
    border-color: #d1d1d1;
  }
  
  .main-image img {
    width: 100%;
    max-width: 400px;
    height: 400px;
    object-fit: scale-down;
  }
  
  .image-thumbnails img:last-child {
    /* margin-bottom: 0; */
}

.detailArea {
    background: #F5FAFD;
    position: relative;
    padding-bottom: 46px;
}

.main-image {
    width: calc(100% - 130px);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #B5BFC333;
    border-radius: 10px;
}

ul::-webkit-scrollbar {width: 5px;height:5px;border-radius: 20px;}
ul::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 20px;}
ul::-webkit-scrollbar-thumb {background: #B5BFC3;border-radius: 20px;}
ul::-webkit-scrollbar-thumb:hover {background: #555;}
.image-thumbnails::-webkit-scrollbar {width: 5px;height:5px;border-radius: 20px;}
.image-thumbnails::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 20px;}
.image-thumbnails::-webkit-scrollbar-thumb {background: #B5BFC3;border-radius: 20px;}
.image-thumbnails::-webkit-scrollbar-thumb:hover {background: #555;}

.detailRightArea {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
}

.detailTop {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #EBF5F9;
    height: 80px;
    align-items: center;
}

.brandLogo {
    width: 45%;
    border-right: 1px solid #EBF5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.prodCode {
    font-family: Bai Jamjuree;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    width: 55%;
    padding-left: 35px;
    height: 100%;
    align-items: center;
}

.prodCode span {
    font-weight: 400;
}

.detailCenter {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px 35px 20px 35px;
}

.detailCenter h2 {
    font-family: Manrope;
    font-size: 19px;
    font-weight: 500;
    line-height: 21px;
    text-align: left;
    color: #3C444E;
    margin-bottom: 44px;
}

.technicalDetail {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.techItem {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.techItem span {
    color: #94A3A8;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    width: 130px;
}

.techDesc {
    font-family: Bai Jamjuree;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    text-align: left;
}

.techDesc small {
    color: #94A3A8;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: left;
}

.detailBottom {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Manrope;
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    color: #3C444E;
    padding: 10px 35px 45px 35px;
    align-items: flex-start;
}

.detailBottom a {
    font-weight: 700;
    text-decoration: underline;
}

.breadCrumpLink{
    width: 100%;
    display: flex;
    margin: 17px 0;
    padding-left: 10px;
}
.breadCrumpLink ul{
    width: 100%;
    display: flex;
    align-items: center;
}
.breadCrumpLink ul li{
    display: flex;
    margin-right: 10px;
}
.breadCrumpLink ul li a{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Manrope;
    font-size: 12px;
    font-weight: 300;
    line-height: 32px;
    text-align: left;
    color: #B2BCC0;
}
.breadCrumpLink ul li a:after{
    content: "";
    width: 6px;
    height: 7px;
    display: block;
    background: url('../img/arrow-right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.breadCrumpLink ul li:last-child a:after{display: none;}

.breadCrump {
    background: #F5FAFD;
    position: relative;
}

.breadCrumpLink ul li a:hover {
    color: #3c3c3c;
}

.singleList{
    background: #F5FAFD;
    margin-bottom: 170px;
}

.singleTitle {
    width: 100%;
    display: flex;
    margin-bottom: 46px;
}

.singleTitle h2 {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    color: #3C444E;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    text-align: left;
    color: #3C444E;
    background: none;
}

.nav-link {
    background: none;
    padding: 0;
    color: #94A3A8;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    padding: 25px 35px;
}

.detailTabs .nav {
    border-bottom: 1px solid #EBF5F9;
}

.nav-link:focus, .nav-link:hover {
    color: #3C444E;
}

.detailTabs {
    background: white;
}

.tabDescription{
    width: 100%;
    display: flex;
    gap: 60px;
}

.tabDescription img{
    display: flex;
}
.tabDescription p{
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
}

.tab-content {
    padding: 40px;
}


table {
    background: #FDFDFDCC;
    margin-bottom: 0!important;
    border-radius: 10px;
}

table tr {
    text-align: center;
}

table tr th, table tr td {
    border-right: 1px solid #EBF5F9;
    border-bottom: 1px solid #EBF5F9!important;
    font-family: Bai Jamjuree;
    font-size: 14px;
    font-weight: 600;
    line-height: 48.5px;
    text-align: center;
    padding: 0!important;
    white-space: nowrap;
}

table tr th:last-child,table tr td:last-child{
    border:0px;
}

table tr td {
    color: #94A3A8;
    font-weight: 500;
}

table tbody tr:last-child th, table tbody tr:last-child td {
    border-bottom: 0px!important;
}

.tableWrapper {
    border: 1px solid #EBF5F9;
    border-radius: 10px;
}

.buttonWrapper{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
}

.buttonWrapper a{
    width: auto;
    min-width: 304px;
}

.notFoundProductWrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.notFoundProductWrapper > span {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    color: #3C444E;
}

.notFoundProductWrapper > h3 {
    font-family: Manrope;
    font-size: 40px;
    font-weight: 300;
    line-height: 26px;
    text-align: center;    
}

section.notFound {
    padding-bottom: 80px;
    background: #F5FAFD;
}

.notFoundProductWrapper p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    color: #94A3A8;
    position: relative;
}

.filterOptions{
    padding-bottom: 80px;
    background: #F5FAFD;
    margin-bottom: 170px;
}

.pageNotFoundBg {
    width: 100%;
    margin-top: -240px;
}

.pageNotFoundBg img{
    max-width: 100%;
}

.pageNotFound .buttonWrapper{
    margin-top: 60px;
}

.postPage{
    background: #F5FAFD;
    padding-bottom: 140px;
}

.postHeadDesc{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 50px;
}

.postHeadDesc.verticalTitle{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.postHeadDesc.verticalTitle > p{
    text-align: center;
    align-items: center;
}

.postHeadDesc > img{}
.postHeadDesc > h2{
    font-family: Manrope;
    font-size: 34px;
    font-weight: 600;
    line-height: 40px;
    text-align: left;
    color: #3C444E;
}
.postHeadDesc > p{
    font-family: Manrope;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: right;
    color: #3C444E;
}

.postHeadDesc.toRight{
    padding-top: 20px;
    justify-content: flex-end;
}

.postDetail{
    width: 100%;
    padding-top: 60px;
    border-top: 1px solid #E1EBEF;
    display: flex;
    flex-direction: column;
    gap: 70px;
    margin-bottom: 55px;
}

.bannerWrapper{
    width: 100%;
    padding-top: 40px;
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.postDetail.centerPage{
    align-items: center;
}

.postDetail.centerPage p{
    font-family: Manrope;
    font-size: 20px;
    font-weight: 400;
    line-height: 34px;
    text-align: center;
    text-align: center;
    color: #94A3A8;
}

.postDetail.centerPage .postImage{
    justify-content: center;
}

.postDetail p{
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
}
.postImage{
    width: 100%;
    display: flex;
}
.postImage > img{
    width: 100%;
}
.solutions{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.solutions.align-start{
    align-items: flex-start;
}

.solutions img{}
.solutions p{
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
}
.solutions p{}
.solutions p span{
    font-weight: 600;
}

.postPageTop {
    padding-top: 50px;
    padding-bottom: 80px;
    background: #F5FAFD;
}

.prodTechSlider {
    background: #f5fafd;
    margin-bottom: 130px;
}

.prodTechItem {
    width: 100%;
    background: white;
}

.prodTechItem a {
    width: 100%;
}

.prodTechTop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 65px 35px 0px 65px;
}

.prodTechTopLeft {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 250px;
}

.prodTechTopRight {
    display: flex;
    align-items: flex-end;

}

.prodTechTopLeft h2 {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
    text-align: left;
}

.prodTechTopLeft span {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 300;
    line-height: 20px;
    text-align: left;
}
.prodTechBottom{
    width: 100%;
    padding: 45px;
    background: #3C444E;
}
.prodTechBottom p{
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: #A9B4C2;
}

.pageTitle {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.pageTitle h3 {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
    text-align: left;
    color: #94A3A8;
}

.pageTitle h2 {
    font-family: Manrope;
    font-size: 48px;
    font-weight: 300;
    color: #3C444E;
}

.pageTitle p {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 300;
    line-height: 36px;
    text-align: left;
}

.innovationSlider {
    background: #f5fafd;
    margin-bottom: 130px;
    padding-bottom: 160px;
    position: relative;
}

.innovationSliderWrapper{
    width: 100%;
}

.innovationSliderWrapper a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 90px;
    background: white;
    gap: 10px;
}

.innovationItem h3 {
    font-family: Manrope;
    font-size: 32px;
    font-weight: 300;
    line-height: 42px;
    text-align: left;
}

.innovationItem p {
    font-family: Manrope;
    font-size: 19px;
    font-weight: 300;
    line-height: 27px;
    text-align: left;
    color: #94A3A8;
}

.prodTechItem.swiper-slide-prev, .prodTechItem.swiper-slide-next{
    filter: blur(1.5px);
}

.innovationItem.swiper-slide-prev, .innovationItem.swiper-slide-next{
    filter: blur(1.5px);
}

.truckMan{
    position: absolute;
    left: calc(33% - 132px);
    bottom: 0;
    z-index: 9;
    width: 100%;
    max-width: 264px;
}

.truckMan img{}

.mb120{
    margin-bottom: 120px;
}
.mb150{
    margin-bottom: 150px;
}

.themeTitleBig.horizantalTitle{
    flex-direction: column;
    align-items: flex-start;
    gap: 42px;
}
.themeTitleBig.horizantalTitle span{max-width: 100%;}
.themeTitleBig.horizantalTitle p{width: 100%;}

.blogText{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 120px;
}
.blogText p{
    font-family: Manrope;
    font-size: 28px;
    font-weight: 400;
    line-height: 47px;
    text-align: left;    
    color: #3C444E;
}

.blogListWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 80px;
}

.blogPostWrapper {
    width: 100%;
    display: flex;
    gap: 65px;
    background: white;
    padding: 65px;
    height: 400px;
}

.blogImg {
    display: flex;
    height: 120px;
}

.blogImg a {
    display: flex;
}

.blogDescription {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.blogDescription > span {
    font-family: Bai Jamjuree;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.92px;
    text-align: left;
    color: #B2BCC0;
}

.blogDescription h2 {
    font-family: Manrope;
    font-size: 22px;
    font-weight: 400;
    line-height: 31px;
    text-align: left;
    color: #000;
}

.blogDescription p {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
    text-align: left;
    color: #94A3A8;
}

.blogDescription a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: #94A3A8;
}

.sideList {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 80px;
}

.sidePostWrapper {
    width: 100%;
    background: white;
    padding: 38px 33px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: 400px;
}

.sidePostWrapper span {
    font-family: Bai Jamjuree;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.92px;
    text-align: left;
    color: #B2BCC0;
}

.sidePostWrapper a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94A3A8;
}

.sidePostWrapper h2 {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    color: #000;
}
.readMoreButton{
 width: 100%;
 flex: 1;
 display: flex;
 align-items: flex-end;
}
.readMoreButton a{
    display: flex;
    align-items: center;
    gap: 10px;
}
.readMoreButton a:hover{    
color: black;    
margin-left: 10px;
}

.informationCard {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 38px 60px;
    background: #FFFFFFCC;
    align-items: flex-start;
    margin-bottom: 20px;
    transition: all .3s ease;
}

.informationCard:hover{
    box-shadow: 1px 0px 15px 10px #00000014;
    border-radius: 10px;
}

.careerPage {
    background: #F5FAFD;
    padding-bottom: 110px;
}

.careerWrapper {}

.careerWrapper > p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 300;
    line-height: 32px;
    text-align: left;
    margin-bottom: 80px;
}

.adressInfo {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    text-align: left;
    color: #94A3A8;
    margin-bottom: 40px;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.adressInfo span {}

.informationCard h2 {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
    color: #000;
    margin-bottom: 20px;
}

.subDesc{
    font-family: Manrope;
    font-size: 28px;
    font-weight: 500;
    line-height: 47px;
    text-align: left;
    margin-top: 80px;
}
.subDesc p{
    font-weight: 400;
}

.kvkkContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: Manrope;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    color: #3C444E;
    gap: 40px;
    margin-top: 60px;
}

.kvkkContent strong {
    font-weight: 500;
}

.contentWrapper {
    width: 100%;
    position: relative;
    z-index: 99;
    margin-top: 92px;
    display: flex;
    flex-direction: column;
}

.bannerBackground {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.bannerBackground img {
    position: absolute;
    z-index: -1;
}

.contentWrapper p {font-family: Manrope;font-size: 15px;font-weight: 400;line-height: 22px;text-align: left;color: #3C444E;margin-bottom: 30px;}

.contentWrapper p span{
    font-weight: 600;
}

.catalogWrapper {
    width: 100%;
    display: flex;
    gap: 20px;
    margin-bottom: 190px;
}

.catalogWrapper {}

.catalogCard {
    width: calc(100% * 1/4 - 15px);
    background-color: white;
    transition: all .3s ease;

}

.catalogCard a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 304px;
    gap: 55px;
    padding: 50px 50px;
}

.catalogCard .readMoreButton {
    flex: unset;
    width: auto;
}

.catalogCard a span {
    font-family: Bai Jamjuree;
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    text-transform: uppercase;
    height: 40px;
    white-space: normal;
    overflow: hidden;
}

.catalogCard:hover{
    box-shadow: 0px 0px 100px 0px #FFCC01CC;
    background-color: #FFCC01;
    border-radius: 5px;
}

.catalogCard:hover a{
    color: white;
}

.catalogCard a img{
    transition: all .3s ease;
}

.catalogCard:hover a > img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(260deg) brightness(103%) contrast(102%);
}

.cardIcon{
    width: 23px;
    height: 23px;
    background: url('../img/right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.catalogCard:hover .cardIcon{
    background: url('../img/right-white.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.pdfLinks {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    transition: all .3s ease;
    margin-top: 120px;
}

.pdfLinks a {
    width: calc(100% * 1/4 - 15px);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    font-family: Bai Jamjuree;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    color: #94A3A8;
    text-transform: uppercase;
    transition: all .3s ease;
}

.pdfLinks a img {
    transition: all .3s ease;
}

.pdfLinks a:hover {
    background: #94A3A8;
    color: white;
}

.pdfLinks a:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(188deg) brightness(105%) contrast(103%);
}

.videoWrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 115px;
}

.videoCard {
    width: calc(100% * 1/2 - 10px);
    position: relative;
    border-radius: 20px;
    transition: all .3s ease;
}

.videoCard a{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.videoCard:hover{
    box-shadow: 1px 0px 15px 10px #0000001f;
    box-shadow: 0px 0px 51.3px 0px #ffcc019f;
}

.videoCard a:after {
    content: "";
    width: 198px;
    height: 158px;
    display: flex;
    background: url('../img/play.png');
    position: absolute;
    z-index: 9999;
    top: calc(50% - 99px);
    left: calc(50% - 79px);
}

.videoCard a img{
    width: 100%;
}


.gallerySliderModel {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 120px;
}

.galleryLeftSelect {
    width: 305px;
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.galleryRightSlider {
    display: flex;
    width: calc(100% - 325px);
}

.galleryRightSlider .gallerySliderItem a img{
    width: 100%;
}

.galleryLeftSelect span {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #3C444E;
}

.gallerySliderModel .form-select{
    padding-left: 60px;
    backdrop-filter: blur(30px);
    box-shadow: 0px 0px 51.3px 0px #FFCC01CC;
    background-color: #FFCC01CC;
}
.imageWidthSelect{
    width: 100%;
    position: relative;
}
.imageWidthSelect:before{
    content: "";
    width: 29px;
    height: 18px;
    background: url(../img/art_track.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 16px;
    top: 21px;
    z-index: 9;
}

.contact {
    padding-top: 80px;
    background: #F5FAFD;
    padding-bottom: 120px;
    margin-bottom: 120px;
}

.contactMapTop {
    width: 100%;
}

.contactTitle {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 17px;
    max-width: 70%;
}

.contactTitle h2 {
    font-family: Manrope;
    font-size: 34px;
    font-weight: 600;
    line-height: 40px;
    text-align: left;
}

.contactTitle p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
}

.contactMapWrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -40px;
}

.mapPerson {
    position: absolute;
    left: -210px;
    bottom: 0;
}

.mapPerson img {
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
}

.contactMap {
    position: relative;
}

.mapImage {
    display: flex;
    margin-top: -66px;
    padding-bottom: 10px;
}

.mapImage img {display: flex;flex-direction: column;}

.getDirections {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.getDirections a {
    width: 250px;
}

.customerSupport {
    width: 100%;
    display: flex;
    gap: 50px;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    text-align: left;
    background: white;
    padding: 30px 60px;
    margin-bottom: 55px;
}

.contactAdressInfo {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 60px 50px;
    min-height: 400px;
    width: 43%;
    position: relative;
}

.contactAdressInfo > span {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    margin-bottom: 30px;
}

.departmentPhone {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 40px;
}

.departmentPhone a {
    font-weight: 500;
}

.departmentPhone span {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 20.49px;
    text-align: left;
}

.sendMeMail {
    display: flex;
    align-items: center;
    gap: 50px;
}

.sendMeMail a {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 20.49px;
    text-align: left;
}

.sendMeMail a:hover, .departmentPhone a:hover{
    color: #e3b500cc;
}

.contactAdressInfo:before {
    content: "";
    width: 40px;
    height: 40px;
    background: url('../img/pin.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    position: absolute;
    top: -20px;
}

.havequestions {
    width: 100%;
}

.questionTitle {
    width: 100%;
    margin-bottom: 75px;
}

.questionTitle h2 {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 300;
    line-height: 40px;
    text-align: left;
    color: #3C444E;
    margin-bottom: 6px;
}

.questionTitle p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
    text-align: left;
    color: #94A3A8;
}

.contactFormWrapper {
    width: 100%;
}

.contactFormWrapper > span{
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: Manrope;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
    color: #3C444E;
    margin-bottom: 30px;
}

.contactFormWrapper .form-control, .contactFormWrapper  .form-select, .sortByWrapper .form-select {
    background-color: white;
    backdrop-filter: blur(30px);
    box-shadow: 0px 0px 60px 0px #909DA333;
    margin-bottom: 20px;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    text-align: left;
    color: #3C444E;
    padding: 10px 10px 10px 30px;
}


body .contactFormWrapper .form-select option, body .sortByWrapper .form-select option{
    backdrop-filter: blur(23.600000381469727px);
    box-shadow: 0px 0px 60px 0px #909DA333;
    background-color: #ffffff8c;
    border: 1px solid #FFFFFF80;
}

.contactFormWrapper .form-control::placeholder, .contactFormWrapper  .form-select::placeholder {
    color: #3C444E;
}

.formButton {
    width: 100%;
    display: flex;
    margin-top: 70px;
}

.formButton button {
    width: 300px;
}

.formDescription {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 300;
    line-height: 27px;
    text-align: left;
    margin-top: 60px;
}

.form-check {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    color: #94A3A8;
}

input#gridCheck {
    border-color: #94A3A8;
}

.form-check-input:checked {
    background-color: #94A3A8;
}

.form-check-input:focus{
    box-shadow: 0 0 0 .25rem rgb(253 213 52 / 28%);
}

.uploadFile{
    position: relative;
}

.uploadFile span{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    pointer-events: none;
    background: #B2BCC0;
    border-radius: 4px;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    text-align: left;
    color: white;
    gap: 10px;
    transition: all .3s ease;
    padding: 0 30px;
}

.uploadFile:hover span{
    background: #737e83;
}

.uploadFile input[type=file]{
    opacity: 0;
}

.careerBanner{
    background: #F5FAFD;
    margin-bottom: 80px;
}

.formBottomBanner{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Manrope;
    font-size: 28px;
    font-weight: 500;
    line-height: 47px;
    text-align: left;
    color: #3C444E;
    position: relative;
    height: 200px;
}
.formBottomBanner img{
    display: flex;
    margin-top: 0;
    position: absolute;
    bottom: 0;
    right: 0;
}

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

.categoryInfoTop {
    display: flex;
}

.categoryInfoTop h2 {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    line-height: 22px;
}

.categoryInfoTop h2 span {
    color: #94A3A8;
}

.sortByWrapper .form-select {
    min-width: 270px;
    padding-top: 20px;
}

.sortByWrapper {
    display: flex;
    position: relative;
}

.sortByWrapper span{
    position: absolute;
    left: 30px;
    top: 9px;
    z-index: 99;
    font-family: Manrope;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    color: #94A3A8;
}

.footerTopRight {}

.footerTopRight span {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 500;
    line-height: 27px;
    text-align: left;
    color: #3C444E;
}

.footerTopRight p {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 300;
    line-height: 19px;
    text-align: left;
    color: #849298;
}
.horizantalSearch, .partfinders {
    transition: all 0.3s ease;
}

.horizantalSearch.active, .partfinders.active {
    /* Define the final state when active */
    opacity: 1; /* Any effect you want */
}
.page-link{
    font-family: Manrope;
    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
    text-align: left;
    color: #94A3A8;
}
.nacs{
        display: flex;
    width: 100%;
    justify-content: center;
    align-content: center;
    align-items: center;
}