@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: #f9f9f9;
}

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;
}

textarea{
    height: 100px;
}

section{
    width: 100%;
}

hr{
    margin: 0px;
}

hr.white{
    color: white;
}
hr.gray{
    color: #d7d7d7;
}

a:hover{
    color: unset;
}

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

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

.header{
    /* background: #B5BFC3; */
    padding: 35px 0 40px 0;
    position: relative;
}

.headerWrapper {
    display: flex;
}

.logoArea {
    display: flex;
}

.logoArea a {
    display: flex;
}

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

.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: #EC670B;
    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;
    position: relative;
}

.copyright:before {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 293px;
    height: 209px;
    background: url('../img/free10.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    left: calc(55% - 150px);
}

.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: #FFFFFF;
}

.isoImage {
    position: absolute;
    right: 0;
}

.isoImage img {
    display: flex;
}

.footerMenuArea {
    width: 100%;
    margin: 74px 0 0px 0;
    position: relative;
    z-index: 99;
}

.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: 100%;
    color: #3C3C3B;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    margin-bottom: 12px;
}

.footerMenuArea span {
    color: #8C8C8C;
    font-family: Manrope;
    font-size: 15px;
    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: 16px;
    font-weight: 500;
    line-height: 22px;
    text-align: left;
    color: #3C3C3B;
}

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

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

.footerMenuArea.pt48{
    padding-top: 48px;
}

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

.socialMedia.flex-end{
    justify-content: flex-end;
}

.socialMedia a {
    display: flex;
}

.socialMedia a img{
    filter: brightness(0) saturate(100%) invert(66%) sepia(0%) saturate(0%) hue-rotate(116deg) brightness(93%) contrast(89%);
}

.socialMedia a:hover img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(32%) saturate(3612%) hue-rotate(6deg) brightness(102%) contrast(91%);
}

.footerBottomArea {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 50px 0 80px 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;
    padding-top: 75px;
    position: relative;
}

.footerLogoArea p {
    width: 100%;
    color: #999999;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 300;
    line-height: 26px;
    text-align: left;
}

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

.footerTop {
    width: 100%;
    position: relative;
    padding: 0px 0 74px 0;
    z-index: 9;
}
.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; */
    margin-top: -220px;
    padding-bottom: 50px;
}

.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: 70px;
    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: 85px;
    display: flex;
    gap: 0;
    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;
    color: #3C3C3B;
    align-items: flex-end;
    font-family: Manrope;
    font-size: 24px;
    font-weight: 600;
    line-height: 39px;
    text-align: left;
}

.themeTitle p {
    color: #999999;
    display: flex;
    justify-content: space-between;
    font-family: Manrope;
    font-size: 20px;
    font-weight: 400;
    line-height: 39px;
    text-align: left;
}

.themeTitle span {}

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

.dot{
    color: #E5BC18;
}

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

.productItemBrand {
    display: flex;
    font-family: Manrope;
    font-size: 13px;
    font-weight: 500;
    line-height: 25px;
    text-align: left;
    color: #99999999;
}

.productItemBrand img {}

.productItemImage {
    display: flex;
    width: 100%;
    background: #f9f9f9;
}

.productItemImage img {}

.productItemDetail {
    width: 100%;
}

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

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

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

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

.productNumber {
    color: #000000;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
}

.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;
}
.frencoSpareParts {
    /* background: #F2F2F2; */
    padding-top: 0px;
    padding-bottom: 65px;
    margin-bottom: 20px;
    position: relative;
}
.sliderWrapper{
    width: 100%;
    left: 40px;
    float: right;
    position: relative;
    z-index: 99;
}

.sliderProducts {
    width: 100%;
}

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

@media screen and (min-width:1921px) {
    .spareItemCard{
        padding: 30px 15px;
    }
    .spareImage a img {
        height: 120px;
    }
    .sliderWrapper.pl85{
        padding-left: 0!important;
    }
    .sliderProducts > span{
        display: block!important;
        margin-top: 35px!important;
    }
}

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

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

.spareImage img {
    width: 100%;
}

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

.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: #B1B1B1;
    text-decoration: underline;
}

.spareLink a:hover {
    color: black;
}

.spareImage a, .productItemImage a{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.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;
}

.spareImage a img{
    width: 100%;
    max-width: max-content;
    margin: 0 auto;
    max-height: 150px;
    object-fit: contain;
}

.spareImage a{
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.productItemImage a img{
    max-height: 295px;
    aspect-ratio: 4 / 4;
    object-fit: contain;
    background: white;
}

.hero{
    width: 100%;
    position: relative;
}
.heroBanner{
    width: 100%;
    display: flex;
    z-index: -1;
    margin-top: -260px;
    position: relative;
}
.heroBanner img{
    width: 100%;
    max-width: 1406px;
}
/*
.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: 0;
}

.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/arrow_back_2.svg');
}

.form-control, .form-select{
    height: 60px;
    margin-bottom: 10px;
    /* backdrop-filter: blur(23.600000381469727px); */
    /* box-shadow: 0px 0px 60px 0px #909DA333; */
    background-color: #fff;
    border: 1px solid #E9E9E9;
    color: #000000;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    border-radius: 0;
}

.form-control::placeholder, .form-select::placeholder{
    color: #000000;
}

body .form-select option{
    backdrop-filter: blur(23.600000381469727px);
    box-shadow: 0px 0px 60px 0px #909DA333;
    background-color: #f3f3f38c;
    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-left: 50px;
}

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

.btn-primary {
    width: 100%;
    background: #3C3C3B;
    border: 0;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    text-align: left;
    height: 60px;
    text-align: center;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background-image: url(../img/linearBtn.png);
    background-repeat: no-repeat;
    background-position: 50% 5px;
    background-size: auto;
    border: 0;
    display: flex;
}

.btn-primary:hover {
    background-color: #000000;
    color: white;
}

.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;
}

.frencoSpareParts .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: 324px;
    backdrop-filter: blur(100px);
    background: #fff;
    display: flex;
    flex-direction: column;
    z-index: -1;
    transition: all .3s ease;
}

.quickMenu > span {
    backdrop-filter: blur(100px);
    width: 100%;
    padding: 16px 44px;
    display: flex;
    color: #B5B5B5;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 300;
    line-height: 35.7px;
    text-align: left;
    border-bottom: 1px solid #FAFAFA;
}

.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 41px;
    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/square.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 30px 41px;
    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: #999999;
    padding: 0;
}

.menuBottom a{
    font-size: 16px;
    color: #3C3C3B;
    margin-top: 2px;
}

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

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

.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;
}

.seoArea{
    margin-bottom: 75px;
}

.seoWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    background: white;
    padding: 80px 60px;
}

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

.seoWrapper p strong{
    font-weight: 500;
}

.horizantalSearch {
    width: 100%;
    /* backdrop-filter: blur(23.600000381469727px); */
    background: transparent;
    /* border: 1px solid #FFFFFF33; */
    /* margin-top: -61px; */
    margin-bottom: 20px;
}

.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 0px 35px 0px;
    width: 100%;
}

.active .inputWrapper{
    display: flex!important;
}

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

.partfinders.active{
    padding-bottom: 80px!important;
}

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

.horizantalSearch .inputWrapper button, .horizantalSearch .inputWrapper button:focus {
    outline: none;
    box-shadow: unset;
    border: 0;
    max-width: 200px;
}

.horizantalSearch #floatingSearch {
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    backdrop-filter: blur(23.600000381469727px);
    /* background-color: #F5FAFD; */
    color: #3C3C3B;
    font-weight: 400;
    border: 1px solid #E9E9E9;
    
    
    
    !importan;
    !importa;
    !import;
    !impor;
    !impo;
    !imp;
    !im;
    !i;
    !;
}

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

.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;
    left: 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;
  }
  
  .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;
  }
  
  .image-thumbnails img:hover, .image-thumbnails img.active {
    border-color: #d1d1d1;
  }
  
  .main-image img {
    width: 100%;
    max-width: 400px;
    height: 400px;
    object-fit: cover;
  }
  
  .image-thumbnails img:last-child {
    /* margin-bottom: 0; */
}

.detailArea {
    background: #f9f9f9;
    position: relative;
    padding-bottom: 72px;
}

.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 {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    position: relative;
}

.detailTop {
    width: 100%;
    display: flex;
    height: 67px;
    align-items: center;
    gap: 20px;
    padding: 0 35px;
    margin-bottom: 33px;
}

.brandLogo {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #F8F8F8;
}

.prodCode {
    font-family: Bai Jamjuree;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    display: flex;
    gap: 5px;
    width: 50%;
    height: 100%;
    align-items: center;
    background: #EEFFE5;
    color: #3E5730;
    justify-content: center;
}

.prodCode span {
    font-weight: 400;
}

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

.detailCenter h2 {
    color: #3C444E;
    margin-bottom: 17px;
    font-family: Manrope;
    font-size: 32px;
    font-weight: 400;
    line-height: 41px;
    text-align: left;
    width: 80%;
    padding-bottom: 27px;
    border-bottom: 1px solid #F8F8F8;
}

.detailCenter h1 {
    color: #3C444E;
    margin-bottom: 17px;
    font-family: Manrope;
    font-size: 32px;
    font-weight: 400;
    line-height: 41px;
    text-align: left;
    width: 80%;
    padding-bottom: 27px;
    border-bottom: 1px solid #F8F8F8;
}

.technicalDetail {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 17px;
    margin-bottom: 0;
    border-bottom: 1px solid #F8F8F8;
}

.brandlDetail {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 17px;
    margin-bottom: 0;
   
}

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

.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;
    max-width: 80%;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

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

.detailBottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    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 53px 35px;
    align-items: flex-start;
}

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

.pageHeadWrapper{
    width: 100%;
    display: flex;
    align-items: flex-start;
    /* border-left: 1px solid #F3F3F3; */
}

.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:last-child a{
    color: #3C3C3B;
}
.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;
}

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

.singleList .categoryList{
    margin-bottom: 0;
}

.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: #000000;
    border-radius: 0;
}

.nav-link {
    background: none;
    padding: 0;
    color: #999999;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    padding: 25px 65px;
    border-radius: 0!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
}

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

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

.detailTabs {
    /* background: white; */
    margin-top: 90px;
    position: relative;
}

.tabDescription{
    width: 100%;
    display: flex;
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
}

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

.tabDescription span{
    font-family: Manrope;
    font-size: 17px;
    font-weight: 500;
    line-height: 33px;
    text-align: left;
}

.tab-content {
    padding: 70px 65px;
    background: white;
}


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 #E2E2E2;
    border-bottom: 0px solid #E2E2E2!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{
    background: #E2E2E24D!important;
}

table tr th:first-child{
    border-top-left-radius: 8px;
}

table tr th:last-child{
    border-top-right-radius: 8px;
}

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%;
}

.prodTechItem a img{
    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;
    height: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.prodTechTopLeft span {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 300;
    line-height: 20px;
    text-align: left;
}
.prodTechBottom{
    width: 100%;
    padding: 68px 65px 45px 65px;
    /* background: #3C444E; */
}
.prodTechBottom p{
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
    text-align: left;
    color: #000000;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    height: 100px;
    overflow: hidden;
}

.pageTitle {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 60px;
    position: relative;
    padding-top: 140px;
}

.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: 42px;
    font-weight: 300;
    line-height: 56px;
    text-align: left;
}

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


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

.innovationSliderWrapper{
    width: 100%;
    position: absolute;
    top: 360px;
}


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

.innovationItem h3 {
    font-family: Manrope;
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    text-align: left;
    height: 30px;
    overflow: hidden;
}

.innovationItem p {
    color: #999;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 300;
    line-height: 23px;
    text-align: left;
    height: 70px;
    overflow: hidden;
}

.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;
}

.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: 0;
    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: 0;
}

.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 #00000062;
}

.videoCard a:after {
    content: "";
    width: 152px;
    height: 152px;
    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: 55%;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 9;
}

.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: 50px;
}

.formButton button {
    width: 200px;
}

.formDescription {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 500;
    line-height: 27px;
    text-align: left;
    margin-top: 35px;
    color: #999999;
}

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

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;
    background: #FFFFFFC2;
    padding: 23px 20px;
}

.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;
}

.loginRegister{
    display: flex;
    align-items: center;
    gap: 0;
}

.loginRegister .dropdown-toggle::after {
    content: "";
    border: 0px;
    background-image: url('../img/arrow_back_2.svg');
    width: 11px;
    height: 10px;
    display: block;
    float: right;
    margin-top: 10px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
    top: 0;
}

.loginRegister .navbar{
    padding: 0;
    margin-right: 25px;
}

.loginRegister .navbar a.nav-link{
    padding: 0;
    background: white;
    color: #BEBEBE;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 40px!important;
    padding: 0 30px 0 10px;
    text-decoration: none;
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    !importan;
    !importa;
    !import;
    !impor;
    !impo;
    !imp;
    !im;
    !i;
    !;
}

.loginRegister span{
    color: #9D9D9C;
    font-weight: 300;
    font-size: 13px;
    margin: 0 5px;
}
.loginRegister a {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    color: #3C3C3B;
}

.loginRegister a:first-child{
    text-decoration: none;
    text-transform: uppercase;
}

.loginRegister a:hover{
    color: #EC670B;
}

.loginRegisterLink {
    width: calc(100% - 135px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.headerRightWrapper{
    width: 100%;
    display: flex;
    gap: 73px;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}

.headerSearchBar{
    width: 100%;
    max-width: 636px;
    float: right;
    display: flex;
    flex-direction: column;
    /* background: #FFFFFFB2; */
    align-items: flex-end;
    position: relative;
}
.headerSearchInput{
    width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid #F3F3F3;
}

.headerSearchInput.active{
    /* border-top: 0px;
    position: absolute;
    right: 0;
    top: 100%; */
}

.newSearchArea{
    display: flex;
    position: relative;
    width: 100%;
}
.headerSearchInput input{
    border: 0;
    height: 67px;
    padding: 0 31px;
    outline: none;
    box-shadow: none;
    width: 100%;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: #3C3C3B;
    background: none;
    background-color: white;
}
.headerSearchInput span{
    font-family: Manrope;
    font-size: 13px;
    font-weight: 400;
    line-height: 67px;
    text-align: left;
    padding: 0 16px;
    border-left: 1px solid #E4E4E4;
    display: flex;
    background-color: white;
}
.detailButton{
    display: flex;
    justify-content: center;
    align-items: center;
}
.detailButton a{
    width: 100%;
    background-color: #3C3C3B;
    color: white;
    background: url('../img/btnborder.png');
    background-repeat: no-repeat;
    background-position: left;
    background-size: auto;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 48px 0 59px;
    background-color: #3C3C3B;
    white-space: nowrap;
}
.searchDescription{
    width: 100%;
    display: flex;
    padding: 20px 32px;
    border-top: 1px solid #E4E4E4;
}
.searchDescription span{
    width: 85%;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    text-align: left;
    color: #737373;
}

.newSearchArea button {
    background: unset;
    padding: 0 28px;
    border: 0;
    border-right: 1px solid #F3F3F3;
    transition: all .3s ease;
    outline: 1px solid #fff0;
    background-color: white;
}

.newSearchArea button:hover{
    background: #f9f9f9;
    outline: 1px solid #e5e5e5;
}

.headerSearchInput form {
    width: 100%;
}

.detailButton a:hover {
    background-color: #cc5200;
}
.headerSearch {position: relative;}

.heroDescriptionWrapper {
    width: 100%;
    position: relative;
}
.heroDescriptionWrapper::before{
    content: "";
    position: absolute;
    right: -55px;
    top: -20px;
    width: 111px;
    height: 84px;
    background-image: url(../img/free1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}
.heroDescriptionWrapper::after{
    content: "";
    position: absolute;
    right: -30px;
    bottom: -100px;
    width: 92px;
    height: 75px;
    background-image: url(../img/free2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}

.heroDescriptionWrapper h1 {
    font-family: Manrope;
    font-size: 60px;
    font-weight: 300;
    line-height: 70px;
    text-align: left;
    margin-bottom: 70px;
}

.heroDescriptionWrapper h1 span {
    color: #EC670B;
}

.heroDescriptionWrapper  p {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    color: #848484;
}

a.linearBtn, .heroButtonArea a.linearBtn{
    background-color: #3C3C3B;
    color: #FFFFFF;
    padding: 18px 53px;
    border-radius: 60px;
    background-image: url('../img/linearBtn.png');
    background-repeat: no-repeat;
    background-position: 50% 5px;
    background-size: auto;
    border: 0;
    display: flex;
}

.heroButtonArea {
    width: 100%;
    margin-top: 125px;
    display: flex;
    align-items: flex-start;
    gap: 42px;
}

a.linearBtn:hover, .heroButtonArea a.linearBtn:hover {
    background-color: #000000;
    color: white;
}

.heroButtonArea a {
    color: #848484;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 300;
    line-height: 19px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all .3s ease;
    height: 67px;
    color: #848484;
}

.heroButtonArea a:hover img {
    margin-top: 20px;
}

.heroButtonArea a img {
    position: relative;
    transition: all .3s ease;
}


.subscribe {
    width: 100%;
    position: relative;
    padding: 74px 0;
}

.subscribeArea{
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.subscribeArea h2{
    font-family: Manrope;
    font-size: 36px;
    font-weight: 400;
    line-height: 57px;
    text-align: left;
    margin-bottom: 32px;
}
.subscribeArea p{
    font-family: Manrope;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
    text-align: left;
    color: #999999;
}
.subscribeArea input{
    border: 0;
    border-bottom: 1px solid #3C3C3B;
    padding: 17px 0;
    background: none;
    width: 100%;
    outline: none;
    color: #3C3C3B;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
    text-align: left;
}
.subscribeArea span{
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    color: #999999;
}
.subscribeArea span a{
    color: #3C3C3B;
}

.newsletterWrapper {
    display: flex;
    width: 100%;
    margin-bottom: 17px;
    gap: 33px;
}

.newsletterWrapper input {}

.newsletterWrapper button {
    border: 1px solid #3C3C3B;
    padding: 17px 43px;
    display: flex;
    background: none;
    transition: all .3s ease;
}

.newsletterWrapper button:hover {
    background: #3C3C3B;
}

.newsletterWrapper button:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(30%) hue-rotate(84deg) brightness(108%) contrast(107%);
}

.subscribeArea span a:hover {
    text-decoration: underline;
}
.ftbg {
    position: absolute;
    top: -35%;
    left: -60px;
    z-index: 0;
}

.ftbg img {
    display: flex;
}

.subbg {
    position: absolute;
    z-index: -1;
    top: -90%;
}

.subbg img {
    display: flex;
}

.subscribeArea input::placeholder{
    color: #3C3C3B;
}

.news{
    background: #3C3C3B;
    padding: 85px 0 113px 0;
}

.promationFilm{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid #515151;
    margin-bottom: 85px;
}
.promationFilm h2{
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: white;
    width: 100%;
}
.promationFilm a{
    display: flex;
    overflow: hidden;
    width: 100%;
    border-radius: 300px;
}
.promationFilm a img{
    transition: all .5s ease;
    border-radius: 300px;
}
.promationFilm a:hover img{
    transform: scale(1.05);
}

#promotionFilm .modal-content{
    background: #f9f9f9;
}

.newsTitle {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 122px;
}

.newsTitle h2 {
    font-family: Manrope;
    font-size: 36px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: white;
}

.newsTitle span {
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    text-align: left;
    color: #999999;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 100px;
}

.newsTitle a {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    /* line-height: 39px; */
    text-align: left;
    color: white;
    text-decoration: underline;
}

.newsWrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    gap: 40px;
}

.newsWrapper > img{
    display: flex;
    position: absolute;
    top: -80px;
    left: 55px;
    max-width: 375px;
}

.newsItem {
    width: 100%;
    display: flex;
    align-items: flex-start;
    position: relative;
}

.newsDate {
    display: flex;
    width: 300px;
}

.newsDate span {
    font-family: Bai Jamjuree;
    font-size: 14px;
    line-height: 40px;
    font-weight: 400;
    text-align: left;
    color: #999999;
    display: flex;
}

.newsDetail {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.newsDetail h3 {
    font-family: Manrope;
    font-size: 36px;
    font-weight: 400;
    line-height: 48px;
    text-align: left;
    color: #FFFFFF;
}

.newsDetail span {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 400;
    line-height: 48px;
    text-align: left;
    color: #FFFFFF;
    margin-bottom: 40px;
    transition: all .3s ease;
}

.newsDetail a {
    color: #EC670B;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 300;
    line-height: 19px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: all .3s ease;
}

.newsDetail a:hover {
    color: white;
    transition: all .3s ease;
}

.newsDetail a:hover img {
    transition: all .3s ease;
    filter: brightness(0) saturate(100%) invert(100%) sepia(10%) saturate(7500%) hue-rotate(215deg) brightness(115%) contrast(102%);
}

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

.banner{
    margin-bottom: 20px;
}

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

.bannerArea > img{
    width: 100%;
    display: flex;
}

.bannerDescription {
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    padding: 50px 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px;
}

.bannerDescription h2 {
    font-family: Manrope;
    font-size: 36px;
    font-weight: 300;
    line-height: 44px;
    text-align: left;
    color: #FFFFFF;
}

.bannerDescription p {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 300;
    line-height: 27px;
    text-align: left;
    color: #7B7B7B;
}

.customerGuarantee {
    display: flex;
    align-items: center;
    padding: 117px 88px;
    background: #FFFFFF;
    position: relative;
}

.customerGuaranteeDescription {
    width: 100%;
    max-width: calc(100% - 210px);
}

.customerGuaranteeDescription p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 500;
    line-height: 36px;
    text-align: left;
}

.customerGuaranteeBg {
    position: absolute;
    right: 24px;
    bottom: -1px;
}

.customerGuaranteeBg img {
    display: flex;
    max-width: 280px;
    width: 100%;
}

.themeButtons {
    width: 100%;
    display: flex;
    margin-top: 80px;
}

.themeButtons {
    width: 100%;
    gap: 20px;
}

.btn-light {
    color: #3C3C3B;
    background-color: #F8F8F8;
    border-color: #F8F8F8;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 36px;
    text-align: left;
    padding: 8px 25px;
}

.btn-dark {
    color: #fff;
    background-color: #3C3C3B;
    border-color: #3C3C3B;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 36px;
    text-align: left;
    padding: 8px 25px;
}

.themeButtons a {
}

.catalogArea {
    padding: 84px 60px;
    background: white;
    position: relative;
    height: 100%;
}

.catalogArea h2 {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    color: #3C3C3B;
    margin-bottom: 21px;
    position: relative;
    z-index: 9;
}

.catalogArea p {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #999999;
    margin-bottom: 35px;
    position: relative;
    z-index: 9;
}

.catalogArea a {
    font-family: Manrope;
    font-size: 13px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 9;
}

.catalogArea a:hover {
    color: #fd680f;
}

.catalogBg {
    position: absolute;
    bottom: -1px;
    z-index: 0;
}

.catalogBg img {
    display: flex;
    max-width: 100%;
}

section.customerCatalog {
    margin-bottom: 20px;
}

.themeTitle p a {
    color: #3C3C3B;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 39px;
    text-align: left;
    text-decoration: underline;
}

.themeTitle p a:hover{
    color: #EC670B;
}

.sliderProducts > span {
    width: 100%;
    max-width: 1295px;
    display: flex;
    margin-top: 64px;
    font-family: Manrope;
    font-size: 20px;
    font-weight: 300;
    line-height: 39px;
    text-align: left;
}

.sliderProducts > span strong {
    margin-right: 5px;
}

.spareLink h2 {
    font-family: Manrope;
    font-size: 22px;
    font-weight: 500;
    line-height: 38px;
    text-align: center;
    height: 38px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

.sliderBg {
    position: relative;
    /* left: 0; */
    /* top: 0; */
    z-index: -1;
    padding-bottom: 15px;
}

.sliderBg img {
    display: flex;
    position: absolute;
}

.themeTitle.plt85{
    padding: 82px 0px 0 87px;
}

.sliderWrapper.pl85{
    padding-left: 87px;
}

@media screen and (min-width:1440px){
    .modal-dialog {
        max-width: 760px;
        margin: 1.75rem auto;
    }
}

.supDesc{
    width: 100%;
    /* padding-left: 82px; */
    padding-top: 87px;
}
.supDesc span{
    font-family: Manrope;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    color: #7B7B7B;
}

.findSearchForProduct {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 68px 72px 40px 72px;
    background: white;
}

.findSearchForProduct h2 {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
}

.findSearchForProduct span {
    width: 100%;
    max-width: 70%;
    font-family: Manrope;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #999999;
}

.filterPage{
    margin: 122px 0 172px 0;
    position: relative;
}
.filterPageContent{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.filterPageContent p{
    font-family: Manrope;
    font-size: 20px;
    font-weight: 300;
    line-height: 33px;
    text-align: center;
    color: #3C3C3B;
}
.lightPage .header{
    background: white;
}

.lightPage .news {
    background: white;
}

.lightPage .promationFilm h2 {
    color: #3C3C3B;
}

.lightPage .newsTitle h2 {
    color: #3C3C3B;
}

.lightPage .newsTitle a {
    color: #3C3C3B;
}

.lightPage .newsDetail h3 {
    color: #3C3C3B;
}

.lightPage .newsDetail span {
    color: #3C3C3B;
}

.lightPage .newsDetail a:hover{
    color: #3c3b3c;
}
.lightPage .newsDetail a:hover img{
    filter: brightness(0) saturate(100%) invert(21%) sepia(6%) saturate(116%) hue-rotate(22deg) brightness(87%) contrast(85%);
}

.lightPage .promationFilm{
    border-color: white;
}

.pageBackground {
    width: 100%;
    margin-bottom: -260px;
    position: relative;
    z-index: -1;
    text-align: center;
}
.pageBackground img{
    max-width: 100%;
}

.notFoundPage {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.notFoundPage h1 {
    /* font-family: Marine; */
    font-size: 140px;
    font-weight: 300;
    text-align: center;
}

.widgetBox {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: center;
    margin: 65px 0;
}

.widgetItem {
    background: white;
    max-width: 207px;
    gap: 13px;
    display: flex;
    flex-direction: column;
    border-radius: 40px;
}

.notFoundPage > p {
    font-family: Manrope;
    font-size: 32px;
    font-weight: 600;
    line-height: 48px;
    text-align: center;
}

.notFoundPage > p small {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 300;
    line-height: 24px;
    text-align: left;
    color: #999999;
}

.widgetItem a {
    width: 100%;
    gap: 13px;
    display: flex;
    flex-direction: column;
    padding: 55px 32px;
    border-radius: 40px;
}

.widgetItem p {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

.widgetItem h2 {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
}

.widgetItem p span{text-decoration: underline;}

.widgetItem a:hover {box-shadow: 1px 1px 20px 12px #85858512;}

.widgetItem a:hover {}

.notFound404 {
    padding-top: 20px;
    padding-bottom: 0px;
}

.pageCircleBg{
    background: url('../img/circleBg.png');
    background-repeat: no-repeat;
    background-position: 100% 0%;
    background-size: auto;
    padding-bottom: 240px;
}

.filterResultPage{
    padding: 55px 0;
    margin-bottom: 50px;
}
.resultWrapper{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.productResultItem{}
.productResultItem a{
    padding: 10px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: 120px;
    width: 100%;
}
.productResultItem h2{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #999999;
}
.productResultItem h2 span{
    font-family: Manrope;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    color: #3C3C3B;
}
.filterResult {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 55px;
}

.filterResult p {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 300;
    line-height: 29px;
    text-align: center;
}

.filterResult p strong {
    font-weight: 500;
}

.productResultItem {display: flex;flex-direction: column;gap: 20px;width: calc(100% * 1/4 - 15px);align-items: center;}

.productResultItem a:hover {
    box-shadow: 1px 1px 20px 10px #00000014;
}

/* The container */
.containerX {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: Manrope;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    color: #000;
    display: flex;
  }

  .containerX.checked{
    color: #EC670B;
  }
  
  /* Hide the browser's default checkbox */
  .containerX input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmarkX {
    position: absolute;
    top: 0;
    left: 0;
    height: 12px;
    width: 12px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 2px;
  }
  
  /* On mouse-over, add a grey background color */
  .containerX:hover span {
    color: #ec670b;
  }

  .containerX:hover .checkmarkX{
    border-color: #ec670b;
  }
  
  /* When the checkbox is checked, add a blue background */
  .containerX input:checked ~ .checkmarkX {
    background-color: white;
    border-color: #EC670B;
  }
  
  /* Create the checkmarkX/indicator (hidden when not checked) */
  .checkmarkX:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmarkX when checked */
  .containerX input:checked ~ .checkmarkX:after {
    display: block;
  }
  
  /* Style the checkmarkX/indicator */
  .containerX .checkmarkX:after {
    left: 2px;
    top: 2px;
    width: 6px;
    height: 6px;
    background: #EC670B;
  }

  .catTitle {
    border-left: 1px solid #999999;
}

.allCategoryWrapper{
    width: 100%;
    padding: 50px;
}

.catTitle span {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 31px;
    text-align: left;
    color: #999999;
    line-height: 64px;
    padding: 0 50px;
    border-top: 1px solid #F8F8F8;
    border-bottom: 1px solid #F8F8F8;
    display: flex;
}

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

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

.catType {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.catType > a {
    color: #3C3C3B;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 35px;
    text-align: left;
    width: 100%;
    display: flex;
}

.categoryTop p {
    color: #999999;
    font-family: Manrope;
    font-size: 12px;
    font-weight: 400;
    line-height: 31px;
    text-align: left;
}

.categoryTop p span {
    color: #3C3C3B;
}

.categorySelect {}

.categorySelect > span {
    font-family: Manrope;
    font-size: 12px;
    font-weight: 300;
    line-height: 31px;
    text-align: left;
    color: #999;
}

.categorySelect select {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 31px;
    text-align: left;
    border: 0;
    appearance: unset;
    moz-appearance: unset;
    background: url('../img/arrow_back_2.svg');
    outline: none;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: auto;
    padding-right: 40px;
    padding-left: 10px;
}

.categorySelect select option {
    backdrop-filter: blur(23.600000381469727px);
    box-shadow: 0px 0px 60px 0px #909DA333;
    background-color: #f3f3f38c;
    border: 1px solid #FFFFFF80;
    font-size: 13px;
}

.subPageTitle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 72px;
}

.subPageTitle h2 {
    font-family: Manrope;
    font-size: 30px;
    font-weight: 400;
    line-height: 39px;
    text-align: left;
}

.subPageTitle a {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 39px;
    text-align: left;
    color: #3C3C3B;
    text-decoration: underline;
}

.detailHiddenTab {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    background-image: url('../img/manageBg.png');
    background-repeat: no-repeat;
    background-position: 80% 12px;
    background-size: auto;
    padding: 18px 50px;
    background-color: white;
    cursor: pointer;
}

.detailHiddenTab img {}

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

.productDetailWrapper .swiper-wrapper{
    width: 100%;
}

.productDetailWrapper .swiper-slide{
    width: 100%;
    text-align: center;
    background: white;
    padding: 20px;
}

.productDetailWrapper2 .swiper-slide{
    width: 100%;
    text-align: center;
    background: white;
    padding: 20px;
}

.productDetailWrapper .swiper-slide img{
    max-width: 100%;
}

.productDetailWrapper2 .swiper-slide.main img {
    max-width: 100%;
    height: 548px;
    aspect-ratio: 4 / 4;
    object-fit: contain;
}

.detailSliderBottom{
    padding: 0 55px;
    box-sizing: border-box;
    margin-top: 20px;
}

.carouselSlider .swiper-slide{
    width: 100%;
    padding: 8px;
    background: #FFFFFF;
}

.carouselSlider .swiper-slide img{
    width: 100%;
}

.swiper-button-next {
    bottom: 30px;
    top: auto;
}

.swiper-button-prev {
    bottom: 30px;
    top: auto;
}

.swiper-button-next:after, .swiper-button-prev:after {
    color: #9D9D9C;
    font-size: 20px!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
}

.swiper-slide.swiper-slide-visible.swiper-slide-thumb-active {
    background: #ffc59c;
}

.catDescription {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 11px;
    gap: 2px;
}

.catDescription span {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #999999;
}

.catDescription a {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #EC670B;
}

.productCode {
    font-family: Manrope;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    color: #EC670B;
     margin-bottom: 12px;
}

.productCode span {
    color: #EC670B;
}

@media screen and (max-width:1540px){
    .sliderBg img {
        width: 100%;
    }
    .themeTitle.plt85{
        padding-right: 20px;
    }
}

.brandLogo a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-image: url(../img/orangeBg.png);
    background-repeat: no-repeat;
    background-position: 50% 17px;
    background-size: auto;
    border: 0;
}

.brandLogo a:hover {
    box-shadow: 1px 1px 11px 9px #00000012;
}
.detailBottom .socialMedia {
    margin-top: 0;
}

.detailBottom .socialMedia a img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(1%) saturate(3612%) hue-rotate(23deg) brightness(104%) contrast(79%);
    display: flex;
    height: 16px;
}

.detailBottom > span {
    color: #999999;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 31px;
    text-align: left;
}

.darkbg {
    position: absolute;
    right: 10%;
    z-index: 0;
}

.darkbg.left{
    right: auto;
    left: 20%;
}

.darkbg img {
    z-index: 0;
    position: relative;
    max-width: 870px;
}

.nav-pills .nav-link{
    background:  #FFFFFF70;
}

.nav-pills .nav-link.active {
    background: white;
    position: relative;
}

.nav-pills .nav-link.active:after{
    content: "";
    height: 1px;
    position: absolute;
    bottom: -2px;
    width: 100%;
    left: 0;
    background: linear-gradient(90deg, #EC670B 0%, #F8F8F8 100%);
    z-index: 99999;
}

.wigdetsWrapper{
    width: 100%;
    display: flex;
    gap: 24px;
}
.widgetCard{
    width: calc(100% * 1/4 - 18px);
    background: linear-gradient(148.96deg, rgba(236, 233, 230, 0.6) 21.67%, rgba(226, 226, 226, 0.6) 83.82%);
    border-radius: 20px;
    padding: 55px 56px;
}

.tableDesc{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 200px;
    margin-top: 80px;
}
.tableDesc p{
    font-family: Manrope;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    text-align: left;
    color: black;
    }
.tableDesc a{
    background: #3C3C3B;
    border-radius: 55px;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    padding: 16px 31px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.tableDesc a:hover{
    background: black;
}

.findSearchLeft{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
}
.findSearchLeft h2, .findSearchLeft span{text-align: left;}

button.searchInput img {
    filter: brightness(0) saturate(100%) invert(49%) sepia(80%) saturate(2987%) hue-rotate(357deg) brightness(95%) contrast(96%);
}

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

.detailTechnicalWrapper > h2 {
    color: #EC670B;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 41px;
    text-align: left;
    padding: 9px 30px;
    border-bottom: 1px solid #F8F8F8;
}

.technicalList {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 34px 38px 94px 38px;
    gap: 0px;
}

.technicalImg {display: flex;border: 1px solid #eaeaea;height: 100%;width: 55px;height: 55px;display: flex;align-items: center;justify-content: center;background: white;}

.technicalImg a {
    width: 59px;
    height: 59px;
    background: #F9F9F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.technicDetail{
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-grow: 1;
}
.technicDetail span{
    font-family: Manrope;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    color: #999999;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.technicDetail p{
    font-family: Manrope;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    color: black;
    line-height: 20px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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

.technicalItem a{
    width: 100%;
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 5px 5px;
    justify-content: space-between;
}

.technicalItem > a:hover{
    background: #dae7e8;
}

.widgetCard h3 {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    text-align: left;
    color: #767372;
    margin-bottom: 11px;
    height: 50px;
    overflow: hidden;
}

.widgetIcon {
    margin-bottom: 33px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.technicalRight {
    width: calc(100% - 139px);
    display: flex;
    flex-direction: column;
}

.technicalBottom {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    border-top: 1px solid #F6F6F6;
    overflow: auto;
    align-items: flex-start;
}

.technicalBottom .technicDetail {
    width: 100%;
    border-right: 1px solid #F6F6F6;
}

.extraDetialTechnicalItem .technicalImg a {
    width: 139px;
    height: 139px;
    background: #F6F6F6;
    display: flex;
    align-items: center;
    justify-content: center;
}



.extraDetialTechnicalItem {
    width: 100%;
    background: #F9F9F9;
    display: none;
    position: absolute;
    left: 100%;
    margin-left: 10px;
    top: 0;
    z-index: 999;
}

.technicalItem:hover .extraDetialTechnicalItem{
    display: flex;
}

.extraDetialTechnicalItem a{
    width: 100%;
    display: flex;
    gap: 0;
}

.extraDetialTechnicalItem .technicalBottom .technicDetail {
    border-bottom: 1px solid #F6F6F6;
    padding: 13.5px 30px;
}

.extraDetialTechnicalItem .technicalImg{
    width: 140px;
    height: 140px;
    background: #F6F6F6;
}

.extraDetialTechnicalItem:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    right: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #dae7e8;
    top: 20%;
}

.technicalRight .technicDetail {
    padding: 5px 30px;
}
.partFeaturesWrapper{
    width: 100%;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}
.featureList{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background: white;
}
.featureItem{
    width: calc(100% * 1/1);
    display: flex;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 500;
    color: #999999;
    line-height: 41px;
    gap: 24px;
    border-right: 1px solid #F8F8F8;
    border-bottom: 1px solid #F8F8F8;
    padding: 9px 30px;
    white-space: nowrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.featureItem span {
    color: black;
    font-family: Bai Jamjuree;
    font-size: 14px;
    font-weight: 600;
    max-width: 80%;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.partFeaturesWrapper .featureList:last-child {
    margin-bottom: 0;
}

.otherFeatureWrapper {
    width: calc(100% * 1/3);
    display: flex;
    flex-direction: column;
}

.otherFeatureList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: white;
}

.otherFeatureTitle {
    border-right: 1px solid #F8F8F8;
    border-bottom: 1px solid #F8F8F8;
    padding: 9px 30px;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 41px;
    text-align: left;
    color: #999999;
    width: 100%;
}

.otherFeatureDesc {
    border-right: 1px solid #F8F8F8;
    padding: 10px 30px;
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 500;
    line-height: 41px;
    text-align: left;
}

.allShowPart {
    width: 100%;
    background: #FFF6F0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.allShowPart a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope;
    font-size: 13px;
    font-weight: 500;
    line-height: 41px;
    text-align: left;
    color: #EC670B;
    gap: 18px;
}

.partAllItems table tr th {
    background: none!important;
    border-bottom: 1px solid #F8F8F8!important;
    border-right: 0;
    text-align: left;
    padding-left: 30px!important;
    color: #999999;
    font-weight: 400;
    line-height: 60px;
}

.partAllItems > h2{
    color: #EC670B;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 41px;
    text-align: left;
    padding: 9px 30px;
    border-bottom: 1px solid #F8F8F8;
    !;
}

.partAllItems .table {
    border-radius: 0!important;
    border: 0!important;
    background: white;
}

.partAllItems .tableWrapper {
    border: 0;
}

.partAllItems {
    max-width: 100%;
    background: white;
    position: relative;
    padding-bottom: 20px;
}

.partAllItems table tr td {
    border-right: 0;
    color: #000000;
    font-size: 13px;
    line-height: 41px;
    font-family: 'Manrope';
    text-align: left;
    padding-left: 30px!important;
}

.discoverOurProducts {
    width: 100%;
    padding: 64px 52px;
    position: relative;
    background: white;
    margin-top: 20px;
}

.discoverDesc {
    width: 100%;
    max-width: 244px;
}

.discoverDesc h2 {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    margin-bottom: 21px;
}

.discoverDesc p {
    font-family: Manrope;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    color: #999999;
    margin-bottom: 58px;
}

.discoverDesc a {
    font-family: Manrope;
    font-size: 13px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    color: #EC670B;
    display: flex;
    align-items: center;
    gap: 10px;
}

.discoverOurProducts > img{
    position: absolute;
    right: 0;
    bottom: 0;
}

.contactMapArea {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 40px;
}

.contactMapArea h2 {
    font-family: Manrope;
    font-size: 22px;
    font-weight: 300;
    line-height: 34px;
    text-align: left;
    color: #999999;
    margin-bottom: 22px;
}

.contactMapArea p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 500;
    line-height: 33px;
    text-align: left;
    color: #3C3C3B;
}

.mapArea {
    width: 100%;
    margin-top: 63px;
}

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

.contactImg {
    width: 100%;
    display: flex;
}

.contactImg img {
    width: 100%;
    display: flex;
}

.contactLeft {
    width: 50%;
    padding: 49px 69px;
    background: #3C3C3B;
    float: left;
}

.contactLeft span {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 33px;
    text-align: left;
    color: #939393;
    margin-bottom: 8px;
    display: flex;
}

.contactLeft p {
    color: white;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
}

.contactRight {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #EC670B;
    padding: 45px 50px;
    float: left;
}

.contactRight span {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 33px;
    text-align: left;
    color: #FFAF77;
    margin-bottom: 13px;
}

.contactRight a {
    font-family: Bai Jamjuree;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: white;
    margin-bottom: 5px;
}

.contactRight a:last-child {
    margin-top: 10px;
}

.contactBottomArea{
    display: flex;
    width: 100%;
    align-items: flex-start;
}


.contactFormWrapper .form-control{
    background-color: unset!important;
    border: 0;
    border-bottom: 1px solid #CECECE;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
    color: #999999;
    font-weight: 300;
}
    

.contactFormWrapper .form-control::placeholder{
    color: #999999;
    font-weight: 300;
}


.contactFormWrapper .form-control:focus, .contactFormWrapper .form-control:focus::placeholder{
    color: #EC670B;
    border-color: #EC670B;
}

 .contactFormWrapper .form-select{
    background-color: unset!important;
    border: 0;
    border-bottom: 1px solid #CECECE;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
    color: #999999;
    font-weight: 300;
 }
 .contactFormWrapper .form-select{
    color: #999999;
    font-weight: 300;
 }

 .contactFormContent {
    width: 100%;
    display: flex;
    align-items: center;
    background: white;
    position: relative;
    padding: 85px;
}

.contactMessage {
    width: 45%;
    padding-right: 6%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    height: 100%;
    z-index: 9;
}

.contactMessage h2 {
    font-family: Manrope;
    font-size: 48px;
    font-weight: 300;
    line-height: 59px;
    text-align: left;
    color: #3C3C3B;
    position: relative;
    z-index: 9;
}

.contactMessage a {}

.contactMessage p {
    position: relative;
    font-family: Manrope;
    font-size: 20px;
    font-weight: 300;
    line-height: 32px;
    color: #999999;
    text-align: left;
    z-index: 9;
}

textarea.form-control{
    min-height: 90px;
}

.contactMessage > img {
    position: absolute;
    z-index: 0;
    max-width: 80%;
    top: -90px;
}

.contactFormContent > img {
    position: absolute;
    bottom: 0;
    left: 20%;
}

.contactArea{
    width: 100%;
    margin-bottom: 90px;
}

.contactForm{
    width: 100%;
    margin-bottom: 90px;
}

.blogArea{
    width: 100%;
    margin-bottom: 90px;
    position: relative;
    z-index: 9;
}


.pageTitle > img {
    position: absolute;
    top: 0;
    z-index: -1;
    max-width: 100%;
}

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

.blogItem {
    width: 100%;
    display: flex;
}

.blogItemDesc {
    background: white;
    width: 100%;
    padding: 96px 106px;
    display: flex;
    flex-direction: column;
    gap: 168px;
}

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

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

.blogItemDescTop h2 {
    font-family: Manrope;
    font-size: 30px;
    font-weight: 500;
    line-height: 40px;
    text-align: left;
}

.blogItemDescTop a {
    display: flex;
}

.blogItemDescBottom span {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 40px;
    text-align: left;
    color: #999;
}

.blogItemDescBottom p {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 300;
    line-height: 25px;
    text-align: left;
    color: black;
    max-width: 654px;
}

.pageWrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}
.pageWrapper span{
    font-family: Manrope;
    font-size: 22px;
    font-weight: 300;
    line-height: 40px;
    text-align: left;
    color: #000000;
}
.pageWrapper p{
    font-family: Manrope;
    font-size: 16px;
    font-weight: 300;
    line-height: 36px;
    text-align: left;
    color: black;
}

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

.postItem{
    width: calc(50% - 10px);
    background-color: white;
    padding: 55px 63px;
    gap: 40px;
    display: flex;
    flex-direction: column;
}

.postItem a{
    transition: all .3s ease;
}

.postItem h2{
    font-family: Manrope;
    font-size: 20px;
    font-weight: 500;
    line-height: 33px;
    text-align: left;
    color: black;
    transition: all .3s ease;
}

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

.postBottom a{
    display: flex;
    transition: all .3s ease;
}

.postItem a:hover h2{
    color: #EC670B;
}

.postBottom span{
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 40px;
    text-align: left;
    color: #999999;
}

.newPostWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ECECEC;
    margin-top: 130px;
}

.newpostItem {
    width: 100%;
    border-bottom: 1px solid #ECECEC;
    display: flex;
    align-items: center;
    padding: 55px 0;
    gap: 60px;
}

.newpostItem h2 {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
    min-width: 260px;
}

.newpostItem p {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 300;
    line-height: 24px;
    text-align: left;
    color: #999999;
}

.newpostLink {
    display: flex;
}

.newpostLink {
    display: flex;
}

.newpostLink a img {
    transform: rotate(-45deg);
    display: flex;
}

.newpostImg {
    display: flex;
}

.newpostImg a {
    display: flex;
    overflow: hidden;
    border-radius: 300px;
}

.newpostImg.notRadius a, .newpostImg.notRadius a img{
    border-radius: 0;
}

.newpostImg a img {
    display: flex;
    transition: all .3s ease;
    border-radius: 300px;
    width: 234px;
    height: 70px;
    object-fit: cover;
}

.newpostImg a:hover img {
    transform: scale(1.05);
}

.newpostLink a:hover img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(73%) saturate(1503%) hue-rotate(0deg) brightness(97%) contrast(93%);
}

.blogDetail .newPostWrapper .newpostItem{
    width: calc(50% - 35px);
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}
.blogDetail .newPostWrapper .newpostItem h2{
    padding-right: 40px;
}
.blogDetail .newPostWrapper .newpostItem p{}
.blogDetail .newPostWrapper .newpostItem .newpostImg{}
.blogDetail .newPostWrapper .newpostItem .newpostLink{
    position: absolute;
    right: 0;
}
.blogDetail .newPostWrapper {
    width: 100%;
    gap: 0 70px;
    border: 0;
    flex-wrap: wrap;
    flex-direction: row;
}

.blogDetailDesc {}

.blogDetailDesc h2 {
    font-family: Manrope;
    font-size: 40px;
    font-weight: 300;
    line-height: 52px;
    text-align: left;
    margin-bottom: 20px;
}

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

.blogDetailImg {
    width: 100%;
    margin-bottom: 35px;
}

.blogDetailImg > img {
    width: 100%;
}

.blogDate {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 400;
    line-height: 40px;
    text-align: left;
    color: #999;
    margin: 35px 0;
    border-bottom: 1px solid #EAEAEA;
    padding-bottom: 35px;
}

.postWrapper{
    flex:1;
}

.newPostWrapper.postBg .newpostItem{
    background: white;
    padding: 0;
    border: 0;
    padding: 20px 70px 0px 70px;
    border-radius: 10px;
}

.newPostWrapper.postBg {
    gap: 20px;
    border: 0;
}

.newPostWrapper.postBg .newpostLink img {
    filter: brightness(0) saturate(100%) invert(22%) sepia(6%) saturate(225%) hue-rotate(22deg) brightness(94%) contrast(91%);
}

.postBottomDesc p {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 300;
    line-height: 41px;
    text-align: left;
}

.postBottomDesc a {
    font-family: Manrope;
    font-size: 18.91px;
    font-weight: 600;
    line-height: 34.91px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.postBottomDesc a img {
    filter: brightness(0) saturate(100%) invert(21%) sepia(0%) saturate(1796%) hue-rotate(139deg) brightness(101%) contrast(92%);
}

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

.blogArea.darkBg{
    background: #3C3C3B;
    padding-bottom: 335px;
    margin-bottom: 0;
}

.blogArea.darkBg .pageTitle p {
    color: white;
}

.blogArea.darkBg .pageTitle h2 {
    color: white;
}


.imageGalleryTabs .nav-pills .nav-link{
    background: #FFFFFF;
    border-radius: 50px!important;
    padding: 16px 62px;
    color: #000000;
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    !importan;
    !importa;
    !import;
    !impor;
    !impo;
    !imp;
    !im;
    !i;
    !;
    
    !imprortant;
    !imprortan;
    !improrta;
    !imprortab;
    !imprortabt;
    !imprortab;
    !imprortabn;
    !imprortab;
    !imprortabt;
    !imprortab;
    !improrta;
    !imprortat;
    !improrta;
    !imprort;
    !impror;
    !impro;
    !impr;
    !imprt;
    !imprtt;
    !imprtta;
    !imprttan;
    !imprttant;
    !imprttan;
    !imprtta;
    !imprtt;
    !imprt;
    !impr;
    !imp;
    !im;
    !i;
    !;
}

.imageGalleryTabs .nav-pills .nav-link.active {
    background: #EC670B;
    position: relative;
    color: #FFFFFF;
    padding: 16px 62px;
}

.imageGalleryTabs .nav-pills .nav-link.active:after{
    display: none;
    content: "";
    height: 1px;
    position: absolute;
    bottom: -2px;
    width: 100%;
    left: 0;
    background: linear-gradient(90deg, #EC670B 0%, #F8F8F8 100%);
    z-index: 99999;
}

.imageGalleryTabs .nav{
    width: 100%;
    display: flex;
    gap: 16px;
}

.imageGalleryTabs .pageTitle{
    padding-top: 50px;
}

.imageGalleryTabs .pageTitle > img{
    top: -85px;
}

.imageGalleryTabs .tab-content{
    padding: 0;
    background: none;
    margin-top: 55px;
}
.imageGalleryTabs .tabDescription{}
.imageGalleryWrapper{}
.imageGalleryWrapper ul{
    width: 100%;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
}
.imageGalleryWrapper ul li{
    width: calc(100% * 1/4 - 15px);
}
.imageGalleryWrapper ul li a{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}
.imageGalleryWrapper ul li a img{}

.imageGalleryWrapper ul li a img {
    transition: all 1s ease;
}

.imageGalleryWrapper ul li a:hover img {transform: scale(1.10);}

.imageGalleryTabs .tabDescription p{
    font-family: Manrope;
    font-size: 32px;
    font-weight: 300;
    line-height: 48px;
    text-align: left;
    color: #3C3C3B;
}

.loginWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.loginWrapper h2 {
    font-family: Manrope;
    font-size: 36px;
    font-weight: 300;
    line-height: 51px;
    text-align: left;
    margin-bottom: 37px;
}

.loginWrapper p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 300;
    line-height: 31px;
    text-align: left;
    color: #999999;
    margin-bottom: 30px;
}

.loginWrapper > img {}

.loginFormWrapper {
    width: 100%;
    margin-top: 45px;
}

.forgotPassword{
    text-align: right;
}
.forgotPassword a{
    text-decoration: none!important;
}

.loginWrapper .formDescription{
    font-size: 14px;
}

.registerWrapper .formDescription{
    font-size: 13px;
}

.registerWrapper {
    width: 100%;
    padding: 50px;
    background: white;
}

.registerWrapper > h2 {
    font-family: Manrope;
    font-size: 36px;
    font-weight: 300;
    line-height: 51px;
    text-align: left;
    color: #3C3C3B;
    margin-bottom: 23px;
}

.registerWrapper p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 300;
    line-height: 31px;
    text-align: left;
    color: #999999;
}
.loginRegisterWrapper{
    width: 100%;
    margin-bottom: 95px;
}
.loginBg {
    position: absolute;
    top: -100px;
    z-index: -1;
}

.aboutContentWrapper{
    width: 100%;
    padding-top: 40px;
}
.aboutContentWrapper > p{
    font-family: Manrope;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    text-align: left;
    color: #3C3C3B;
}
.aboutContentWrapper .heroButtonArea{
    margin-top: 50px;
}

.aboutContentWrapper .imageGalleryWrapper{
    margin-top: 70px;
}
.aboutContentWrapper .imageGalleryWrapper ul li{
    width: calc(100% * 1/3 - 13.333px);
}

.aboutDetail {
    width: 100%;
    display: flex;
    margin-bottom: 128px;
    position: relative;
    padding-bottom: 0;
}

.aboutTitle {
    max-width: 250px;
    width: 100%;
}

.aboutDesc {
    width: calc(100% - 250px);
}

.sweetBg .aboutTitle{
    padding-top: 140px;
}

.sweetBg .aboutDesc{
    background-color: #F3E6DD;
    padding: 176px 106px 626px 106px;
}

.aboutDesc p {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 300;
    line-height: 35px;
    text-align: left;
    color: #999999;
}

.aboutTitle h3 {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 400;
    line-height: 35px;
    text-align: left;
    color: #3C3C3B;
}

.aboutTitle h3 strong{
    font-weight: 500;
}

.mt110{
    margin-top: 110px;
}

.pt110{
    padding-top: 110px;
}

.sweetBg .aboutDesc:after {
    content: "";
    width: 200px;
    height: 100%;
    background: #f3e6dd;
    display: block;
    position: absolute;
    right: -200px;
    top: 0;
}

.innovationSliderWrapper a span {
    color: #EC670B;
    font-family: Manrope;
    font-size: 24px;
    font-weight: 400;
    line-height: 48px;
    text-align: left;
    margin-bottom: 30px;
}

.registerContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 50px;
    background-image: url('../img/modalbg.png');
    background-repeat: no-repeat;
    background-position: 0px 50px;
    position: relative;
}

.registerContent h2 {
    font-family: Manrope;
    font-size: 36px;
    font-weight: 400;
    line-height: 51px;
    text-align: center;
}

.registerContent p {
    font-family: Manrope;
    font-size: 18px;
    font-weight: 300;
    line-height: 31px;
    text-align: center;
}

.registerContent span {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 400;
    line-height: 51px;
    text-align: center;
    margin-bottom: 52px;
}

.registerButtons {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 50px;
    justify-content: center;
    margin-top: 70px;
}

.registerButtons a {
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 51px;
    text-align: center;
}

.modal-body {
    padding: 0;
}

.registerContent:after{
    content: "";
    background-image: url('../img/modalicon.png');
    display: block;
    position: absolute;
    right: 0;
    bottom: 110px;
    width: 31px;
    height: 119px;
}

.registerButtons a:hover {
    color: #ec670b;
}

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

.categoyPagination nav {}

.categoyPagination nav .pagination {
    gap: 10px;
}

.categoyPagination nav .pagination ul {}

.categoyPagination nav .pagination ul li {}

.categoyPagination nav .pagination li {}

.categoyPagination nav .pagination li a {
    border-color: #ededed;
    border-radius: 5px;
    color: #EC670B;
}

.page-item:first-child .page-link {border-radius: 5px;}

.page-item:last-child .page-link {
    border-radius: 5px;
}

.categoyPagination nav .pagination li a.active {
    background: #EC670B;
    color: white;
}

body .dropdown-menu{
    min-width: 4rem;
}

.headBrand{
    left: -20px;
    margin-top:10px;
}

.error{
    color:red;
}

.r-img{
    width: 1296px;
    height: 475px;
    object-fit: cover;
}

@media screen and (min-width:1025px){
    .m-hide{
        display: none!important;
    }
}

@media screen and (min-width:1541px){
    .frencoSpareParts{
        margin-top: 160px!important;
    }
}

@media screen and (max-width:431px){
    .breadCrumpLink ul li a{
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: Manrope;
        font-size: 10px;
        font-weight: 300;
        line-height: 32px;
        text-align: left;
        color: #B2BCC0;
    }
}