:root {
    --blue: #005998;
    --blue2: #A9BBC2;
    --blue3: #4B7784;
    --blue4: #8FBCC7;
    --blue5: #BAD9E1;
    --blue6: #253b46;
    --blue7: #476972;
    --bluesoft: #EDF4F8;
    --orange: #EA821A;
    --orangesoft: #FEF8F1;
    --green: #617371;
    --green2: #4B7784;
    --green3: #BAD0A5;
    --green4: #79A89D;
    --green5: #678052;
    --green6: #435A57;
    --green7: #688052;
    --coffee: #BF8859;
    --coffee2: #FED5B0;
    --coffee3: #ACA08D;
    --coffee4: #7B6C54;
    --coffee5: #C1B3AE;
    --coffee6: #91776E;
    --coffee7: #C0A383;
    --coffee8: #D59357;
    --coffee9: #FDD5B0;
    --coffeesoft: #FBF9F3;
    --coffeesoft2: #FDF8F2;
    --beige: #F2BA81;
    --beigesoft: #FCF9F4;
    --beige2: #F3C8B8;
    --beige3: #B9735B;
    --beige4: #D2775C;
    --beige5: #A2472D;
    --pink: #F39474;
    --pink2: #E3A3A5;
    --pink3: #AD6151;
    --pink4: #E6ACA0;
    --pink5: #E3A2A5;
    --pink6: #B46366;
    --pinksoft: #FDEFEF;
    --gray: #56717E;
    --gray2: #A9BAC2;
    --gray3: #56707F;
    --gray4: #C2C1BF;
    --gray5: #969696;
    --gray6: #454545;
    --gray7: #808080;
    --black: #070707;
    --black2: #38383C;
    --lilac: #585E84;
    --lilac2: #B1BDDC;
    --lilacsoft: #EEF2F8;
    --white: #F7F7F7;
}

.site-margin {
    max-width: 1640px;
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

.navbar {
    position: fixed;
    width: 100%;
    height: 120px;
    z-index: 3;
    top: 0;
    background: #ffffff;
    transition: 0.5s ease-in-out;
    padding: 0;
}

.navbar .container-fluid {
    height: 100%;
}

.navbar-brand {
    padding: 0;
}

.nav-header-menu li {
    margin-left: 50px;
    display: inline-flex;
    align-items: center;
}

.nav-header-menu li a {
    color: var(--blue);
    font-weight: 500;
    font-size: 16px;
}

.nav-header-menu .active {
    font-weight: 700;
    color: var(--blue);
}

/*.nav-header-menu li a:hover {
    color: var(--blue);
}*/
.nav-header-menu-2 {
    padding: 0;
    display: inline-flex;
    justify-content: end;
    align-items: center;
    width: 100%;
}

.nav-header-menu-2 li {
    display: inline-flex;
    height: 32px;
    align-items: center;
    justify-content: end;
}

.nav-header-menu-2 li .menu-2-item {
    color: var(--blue);
    font-size: 14px;
    padding-left: 8px;
    padding-right: 8px;
}

.border-l {
    border-left: solid 1px var(--blue);
    height: 25px !important;
}

.logo {
    height: 63px;
}

.header-navbar-button {
    display: none;
}

.lang-box {
    position: relative;
    height: 32px;
    width: 32px;
}

.lang {
    background: #e7e7e7;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    padding: 3px;
    border-radius: 32px;
}

.lang ul {
    padding: 0px;
    margin-top: 10px;
}

.lang ul li {
    margin-bottom: 5px;
}

.lang img {
    width: 25px;
}

.lang:hover {
    height: 150px;
}

.list-lang ul li {
    margin-left: 0px !important;
}

.search-button {
    border: none;
    border-bottom: solid 1px transparent;
    background-color: transparent;
    transition: 0.3s ease-in-out;
}

.search-button:hover {
    border-bottom: solid 1px var(--orange);
}

.search-button i {
    transition: 0.3s ease-in-out;
    color: var(--blue);
}

.search-bar {
    position: absolute;
    top: 120px;
    left: 0px;
    width: 100%;
    height: 400px;
    background-color: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease-in-out;
}

.search-bar .container-fluid {
    max-width: 1100px;
    height: 100%;
    padding-top: 25px;
}

.search-bar-active {
    opacity: 1;
    visibility: visible;
}

.search-form {
    height: 100%;
}

.search-form label {
    color: var(--black2);
}

.search-form input {
    background-color: transparent;
    border-radius: 0;
    color: var(--coffee6);
    font-size: 16px;
    outline: none !important;
    width: 100%;
    height: 50px;
    padding-left: 20px;
    background-color: var(--coffee5);
    font-weight: 400;
    border: none;
    transition: 0.5s ease-in-out;
}

.search-form input::placeholder {
    color: var(--coffee6);
    font-weight: 400;
}

.search-form input:focus {
    background-color: #d6ccc8;
}

.search-form .search-btn {
    width: 100px;
    height: 55px;
    background-color: var(--coffee5);
    color: var(--coffee6);
    padding: 0;
    font-weight: 400;
    font-family: "IBM Plex Sans", sans-serif;
    transition: 0.5s ease-in-out;
}

.search-form .search-btn:hover {
    background-color: #d6ccc8;
}

.search-form .search-btn:focus {
    background-color: #d6ccc8;
}

.sub-menu {
    position: absolute;
    top: 120px;
    left: 0px;
    width: 100%;
    height: 530px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in-out;
}

.menu-sub:hover .sub-menu {
    opacity: 1;
    visibility: visible;
}


.sub-menu .row .col-md-6 {
    padding-top: 70px;
    padding-bottom: 70px;
}

.sub-menu .row {
    height: 100%;
}

.sub-menu-title-box {
    margin-left: 75px;
}

.sub-menu-title-box p {
    margin: 0;
    margin-top: 15px;
}

.sub-menu-left {
    background-color: var(--coffeesoft2);
    position: relative;
    display: inline-flex;
}

.sub-menu-left ul {
    padding: 0;
    margin-top: 40px;
}

.sub-menu ul li {
    display: block;
    margin-bottom: 35px;
    margin-left: 0;
}

.sub-menu-left ul li a {
    color: var(--coffee7);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
}

.sub-menu img {
    width: 60px;
}

.sub-menu-left:after {
    content: "";
    display: block;
    position: absolute;
    right: 100%;
    width: 100vw;
    height: 100%;
    background-color: var(--coffeesoft2);
    top: 0;
    z-index: 0;
}

.sub-menu-right {
    background-color: var(--pink2);
    position: relative;
    padding-left: 150px;
    display: inline-flex;
}

.sub-menu-right ul {
    padding: 0;
    margin-top: 40px;
}

.sub-menu-right ul li a {
    color: var(--white);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
}

.sub-menu-right:after {
    content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: 100%;
    background-color: var(--pink2);
    top: 0;
    z-index: 0;
    left: 100%;
}

.home-slider {
    position: relative;
    margin-top: 120px;
}

.home-slider .owl-carousel .item {
    height: 850px;
    width: 100vw;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.slider-information-box {
    position: absolute;
    display: inline-flex;
    z-index: 1;
    top: 20%;
    left: 0;
    right: 0;
}

.home-slider .slider-content {
    width: 460px;
    height: 550px;
    background-color: var(--green);
    border-radius: 0 0 0 95px;
    transition: 0.5s ease-in-out;
    padding: 55px;
    display: grid;
}

.home-slider .slider-content p {
    margin-bottom: 0;
}

.slider-control-box {
    display: inline-flex;
    justify-content: start;
    align-items: center;
}

.home-counter-text {
    display: inline-flex;
    align-items: center;
}

.home-counter-text p {
    margin: 0;
    margin-left: 16px;
    transition: 0.3s ease-in-out;
}

.home-slider-button {
    display: inline-flex;
    align-items: center;
    transition: 0.5s ease-in-out;
}

.home-slider-button:hover {
    color: #ffffff !important;
}

.home-slider-button:hover span {
    width: 30px;
    background-color: #ffffff !important;
}

.home-slider-button-border {
    width: 20px;
    height: 1px;
    margin-right: 15px;
    transition: 0.5s ease-in-out;
}

.home-slider .social-media {
    margin-left: auto;
    width: min-content;
    display: inline-flex;
    align-items: center;
}

.home-slider .social-media a {
    color: #ffffff;
    font-size: 22px;
    display: block;
    margin-bottom: 20px;
}

.custom-owl-nav-home {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.home-slider .custom-owl-nav-home button {
    height: 60px;
    width: 60px;
    margin: 0 !important;
    border-radius: 60px;
    transition: 0.4s ease-in-out;
}

#customNextBtnhome {
    margin-left: 16px !important;
}

.home-slider .custom-owl-nav-home button svg path,
.home-slider .custom-owl-nav-home button svg line {
    transition: 0.4s ease-in-out;
}

.button-green {
    border: solid 1px var(--green6);
    background-color: transparent;
}

.button-green:hover {
    background-color: var(--green6);
    border: solid 1px var(--green6);
}

.button-beige {
    border: solid 1px var(--beige5);
    background-color: transparent;
}

.button-beige:hover {
    border: solid 1px var(--beige5);
    background-color: var(--beige5);
}

.button-lilac {
    border: solid 1px var(--lilac);
    background-color: transparent;
}

.button-lilac:hover {
    border: solid 1px var(--lilac);
    background-color: var(--lilac);
}

.button-gray {
    border: solid 1px var(--gray6);
    background-color: transparent;
}

.button-gray:hover {
    background-color: var(--gray5);
    border: solid 1px var(--gray5);
}

.button-pink {
    border: solid 1px var(--pink6);
    background-color: transparent;
}

.button-pink:hover {
    border: solid 1px var(--pink6);
    background-color: var(--pink6);
}

.home-slider .custom-owl-nav-home button svg {
    width: 20px;
    transition: 0.4s ease-in-out;
}

.button-gray:hover svg path,
.button-gray:hover svg line {
    stroke: var(--gray6) !important;
}

.button-green:hover svg path,
.button-green:hover svg line {
    stroke: var(--green) !important;
}

.button-beige:hover svg path,
.button-beige:hover svg line {
    stroke: var(--beige4) !important;
}

.button-pink:hover svg path,
.button-pink:hover svg line {
    stroke: #ffffff !important;
}

.button-lilac:hover svg path,
.button-lilac:hover svg line {
    stroke: #ffffff !important;
}

.b-1-left {
    position: relative;
}

.b-1-title-box {
    display: inline-flex;
    height: 95px;
    margin-top: 140px;
    margin-bottom: 140px;
}

.b-1-t-b-left {
    background-color: var(--beige);
    width: 500px;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    padding-left: 33px;
}

.b-1-left a {
    margin-top: 140px;
}

.b-1-t-b-right {
    background-color: var(--blue3);
    width: 95px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.b-1-center {
    background-color: var(--beigesoft);
    border-radius: 0 0 0 68px;
    padding: 300px 95px 240px 95px;
}

.b-1-right {
    padding-left: 0px;
}

.b-1-r-box {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
}

.banner-2 {
    margin-top: 80px;
    overflow-x: clip;
}

.b-2-logo {
    height: 60px;
}

.banner-2 .col-md-4 {
    position: relative;
    height: 750px;
}

.b-2-box {
    height: 750px;
    width: 100%;
    top: 0;
    transition: 0.3s;
    position: absolute;
    display: grid;
    align-items: center;
    padding: 90px 70px;
}

.b-2-left {
    display: inline-flex;
    justify-content: start;
    align-items: start;
    padding-top: 70px;
}

.b-2-l-box {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.b-2-left p {
    margin-bottom: 0;
    margin-left: 20px;
}

.tik-box {
    height: 30px;
    width: 30px;
    border-radius: 30px;
    border: solid 1px var(--pink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.b-2-l-border {
    background-color: var(--pink);
    height: 1px;
    width: 100%;
}

.b-2-box p {
    margin-bottom: 0;
}

.b-2-center-1 {
    background-color: var(--pink);
    border-radius: 0 0 0 50px;
    right: calc(var(--bs-gutter-x)* .5);
    justify-content: end;
}

.b-2-center-1 .b-2-product-img {
    height: 80%;
    position: absolute;
    left: -270px;
    bottom: 0px;
}

.b-2-center-1:hover {
    width: 105%;
}

.b-2-center-2 {
    background-color: var(--pink2);
    border-radius: 0 50px 0 0;
    left: calc(var(--bs-gutter-x)* .5);
    justify-content: start;
}

.b-2-center-2 .b-2-product-img {
    height: 80%;
    position: absolute;
    right: -270px;
    bottom: 0px;

}

.b-2-center-2:hover {
    width: 105%;
}

.b-2-right {
    padding-top: 70px;
}

.b-2-r-box {
    width: 100%;
}

.b-2-r-border {
    width: 95%;
    height: 140px;
    border-top: solid 1px var(--pink2);
    border-right: solid 1px var(--pink2);
    border-bottom: none;
    border-left: none;
    border-radius: 0 20px 0 0;
}

.b-2-r-box p {
    margin-bottom: 0px;
    writing-mode: vertical-lr;
    margin-left: auto;
    margin-right: 0;
    margin-top: 20px;
}

.banner-3 {
    margin-top: 50px;
    overflow-x: clip;
}

.banner-3 .row {
    height: 100%;
}

#homeProducts {
    list-style: none;
    display: grid;
}

.b-3-box {
    position: sticky;
    top: 120px;
    height: 90vh;
    transition: 0.5s ease-in-out;
}
.banner-3 .col-md-9{

    height: 100%;
    border-radius: 0px 0px 0px 95px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 290px;
    padding-right: 290px;
}
#b-3-box-1 {
    --index: 1;
    background-color: var(--green3);
}

.b-3-box-1-left {
    background-color: var(--green3);
    height: 100%;
}

.b-3-box-1-left:after {
    content: "";
    display: block;
    position: absolute;
    right: 100%;
    width: 100vw;
    height: 100%;
    background-color: var(--green3);
    top: 0;
    z-index: 0;
}

.b-3-box-1-right {
    background-color: var(--green4);
}

.b-3-box-1-right .b-3-content-icons p {
    color: var(--green6);
}

.b-3-box-1-right:after {
    content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: 100%;
    background-color: var(--green4);
    top: 0;
    z-index: 0;
    left: 100%;
}

#b-3-box-2 {
    --index: 2;
    background-color: var(--beige2);
}

.b-3-box-2-left {
    background-color: var(--beige2);
    height: 100%;
}

.b-3-box-2-left:after {
    content: "";
    display: block;
    position: absolute;
    right: 100%;
    width: 100vw;
    height: 100%;
    background-color: var(--beige2);
    top: 0;
    z-index: 0;
}

.b-3-box-2-right {
    background-color: var(--beige3);
}

.b-3-box-2-right .b-3-content-icons p {
    color: var(--beige5);
}

.b-3-box-2-right:after {
    content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: 100%;
    background-color: var(--beige3);
    top: 0;
    z-index: 0;
    left: 100%;
}

#b-3-box-3 {
    --index: 3;
    background-color: var(--blue2);
}

.b-3-box-3-left {
    background-color: var(--blue2);
    height: 100%;
}

.b-3-box-3-left:after {
    content: "";
    display: block;
    position: absolute;
    right: 100%;
    width: 100vw;
    height: 100%;
    background-color: var(--blue2);
    top: 0;
    z-index: 0;
}

.b-3-box-3-right {
    background-color: var(--blue3);
}

.b-3-box-3-right .b-3-content-icons p {
    color: var(--blue6);
}

.b-3-box-3-right:after {
    content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: 100%;
    background-color: var(--blue3);
    top: 0;
    z-index: 0;
    left: 100%;
}

@supports (animation-timeline: works) {

    @scroll-timeline cards-element-scrolls-in-body {
        source: selector(body);
        scroll-offsets:
            selector(#cards) start 1,
            selector(#cards) start 0;
        start: selector(#cards) start 1;
        end: selector(#cards) start 0;
        time-range: 4s;
    }

    .b-3-box {
        --index0: calc(var(--index) - 1);
        --reverse-index: calc(4 - var(--index0));
        --reverse-index0: calc(var(--reverse-index) - 1);
    }

    .b-3-box .row {
        transform-origin: 50% 0%;
        will-change: transform;

        --duration: calc(var(--reverse-index0) * 1s);
        --delay: calc(var(--index0) * 1s);

        animation: var(--duration) linear scale var(--delay) forwards;
        animation-timeline: cards-element-scrolls-in-body;
    }

    @keyframes scale {
        to {
            transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index))));
            opacity: 0;
        }
    }
}



.b-3-img {
    position: absolute;
    height: 700px;
    left: 0%;
    z-index: 0;
}

.b-3-content-icons {
    display: inline-flex;
    align-items: center;
}

.banner-3 a {
    margin-top: 50px;
    margin-bottom: 50px;
}

.b-3-content-icons span {
    margin-left: 20px;
    margin-right: 50px;
    display: flex;
}

.b-3-content-icons span p{
    margin: 0;
    margin-left: 20px;
}
.b-3-box-to-box{
    position: relative;
}
.banner-4{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}
@supports (-webkit-touch-callout: none) {
    .banner-4 {
        background-attachment: scroll;
        position: relative;
    }
}
.banner-4 .row{
    height: 900px;
}
.banner-4 .col-md-12{
    display: inline-flex;
    align-items: center;
    justify-content: right;
}
.b-4-r-box{
    width: 520px;
    height: 450px;
    position: relative;
    padding: 40px 60px;
    text-align: right;
}
.b-4-r-box p{
    position: relative;
    z-index: 1;
    text-align: right;
}
.b-4-r-box a{
    position: relative;
    z-index: 1;
}
.overlay-4{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 0 0 54px;
    background-color: var(--green);
    mix-blend-mode: multiply;
    z-index: 0;
}

.banner-5{
    background-color: var(--blue5);
    margin-top: 100px;
}
.banner-5 .row{
    height: 250px;
}
.b-5-right{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.b-5-right img{
    position: absolute;
}
.b-5-left{
    padding: 40px 70px;
}
.b-5-left input{
    height: 48px;
    width: 500px;
    background-color: var(--blue4);
    padding-left: 34px;
    color: #ffffff;
    outline: none;
    border: none !important;
    transition: 0.4s ease-in-out;
    margin-right: 20px
}

.b-5-left input::placeholder {
    color: #ffffff;
    font-family: "IBM Plex Sans", sans-serif;
}

.b-5-left input:focus {
    background-color: #7db5c3;
}
.banner-6{
    margin-top: 100px;
}
.b-6-box{
    height: 468px;
    width: 398px;
    position: relative;
    padding: 80px 45px;
}
.b-6-icon-box{
    position: absolute;
    left: 45px;
    top: -20px;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.b-6-box-1{
    background-color: var(--green3);
}
.b-6-box-1 .catalog{
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    right: 0;
}
.b-6-icon-1{
    background-color: var(--green5);
}

.b-6-box-2{
    background-color: var(--coffee2);
}
.b-6-icon-2{
    background-color: var(--coffee8);
}
.logo-set{
    margin-top: 100px;
    display: inline-flex;
}
.logo-set a{
    margin-right: 30px;
}

.b-6-box-3{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.b-6-box-3 p,
.b-6-box-3 a{
    position: relative;
    z-index: 1;
}
.b-6-icon-3{
    background-color: var(--gray);
    z-index: 1;
}
.overlay-b-6{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: var(--blue2);
    opacity: 0.92;
    z-index: 0;
}

.b-6-box-4{
    background-color: var(--pink4);
}
.b-6-icon-4{
    background-color: var(--pink3);
}
.phone-set{
    margin-top: 100px;
}
.footer{
    margin-top: 100px;
}
.f-left{
    display: inline-flex;
    align-items: center;
    justify-content: start;
}
.f-right{
    display: inline-flex;
    align-items: center;
    justify-content: end;
}
.footer-social-media{
    margin-right: 60px;
}
.footer-social-media a{
    font-size: 19px;
    color: #cacaca;
    margin-left: 30px;
}
.page-up{
    /*width: 215px;
    height: 84px;*/
    background-color: var(--coffee3);
    border-radius: 0 0 0 27px;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    padding: 29px 32px;
    color: var(--coffee4);
    cursor: pointer;
}
.page-up span{
    border-radius: 38px;
    height: 38px;
    width: 38px;
    border: solid 1px var(--coffee4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.footer-center{
    padding-top: 50px;
    padding-bottom: 50px;
    border-bottom: solid 1px #DEDEDE;
}
.footer-menu{
    padding: 0px;
    margin-top: 50px;
}
.footer-menu-title{
    font-size: 16px;
    font-weight: 500;
    color: var(--black2);
    border-bottom: solid 1px #DEDEDE;
    padding-bottom: 20px;
    margin-bottom: 0px;
}
.footer-menu li{
    margin-bottom: 40px;
}
.footer-menu li a{
    color: var(--black2);
    font-size: 16px;
}
.footer-categories{
    padding-left: 100px;
    padding-right: 100px;    
}
.footer-productcategories{
    display: inline-flex;
    width: 100%;
}
.footer-productcategories .f-2{
    margin-left: auto;
}

.footer-bottom {
    margin-top: 50px;
}

.f-b-left {
    display: inline-flex;
    align-items: center;
    justify-content: start;
}

.f-b-left p {
    margin-bottom: 0px;
    font-size: 13px;
}

.f-b-right {
    display: inline-flex;
    align-items: end;
    justify-content: end;
}

.banner-7{
    margin-top: 120px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px;
}
.banner-7 .row{
    height: 850px;
}
.banner-7 .col-md-4{
    display: inline-flex;
    align-items: end;
    justify-content: start;
}

.about-banner-box{
    width: 100%;
}
.b-7-title-box {
    display: inline-flex;
    height: 95px;
    width: 100%;
    position: relative;
}

.b-7-t-b-left {
    background-color: var(--beige);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    padding-left: 33px;
    padding-right: 95px;
}
.b-7-t-b-right {
    background-color: var(--blue3);
    width: 95px;
    height: 95px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
}

.b-7-content-box{
    width: 100%;
    height: 380px;
    background-color: var(--beigesoft);
    padding: 50px 70px;
}
.b-7-content-box p{
    line-height: 77px;
}
.banner-8{
    margin-top: 50px;
}
.b-20-left img{
    width: 100%;
    object-fit: cover;
}
.b-20-right{
    padding-left: 120px;
    padding-top: 50px;
}
.b-8-box{
    height: 335px;
    width: 100%;
    padding: 33px;
}
.b-8-box img{
    margin-bottom: 85px;
}
.b-8-box-green{
    background-color: var(--green3);
    border-radius: 0 0 0 28px;
}
.b-8-box-coffee{
    background-color: var(--coffee9);
}
.b-8-box-gray{
    background-color: var(--gray2);
}
.b-8-box-pink{
    background-color: var(--pink4);
    border-radius: 0 28px 0 0;
}
.banner-9{
    margin-top: 100px;
}
.b-9-left{
    display: inline-flex;
    align-items: center;
    justify-content: start;
}
.b-9-right{
    padding-left: 120px;
    display: inline-flex;
    align-items: center;
}
.banner-9 .owl-carousel .owl-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.banner-10{
    margin-top: 120px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px;
}
.banner-10 .row{
    height: 850px;
}
.banner-10 .col-md-4{
    display: inline-flex;
    align-items: end;
    justify-content: start;
}

.about-banner-box{
    width: 100%;
}
.b-10-title-box {
    display: inline-flex;
    height: 95px;
    width: 100%;
    position: relative ;
}

.b-10-t-b-left {
    background-color: var(--lilac2);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    padding-left: 33px;
    padding-right: 95px;
}
.b-10-t-b-right {
    background-color: var(--lilac);
    width: 95px;
    height: 95px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
}

.b-10-content-box{
    width: 100%;
    height: 380px;
    background-color: var(--lilac2);
    padding: 50px 70px;
}
.b-10-content-box p{
    line-height: 77px;
}
.banner-11{
    overflow-x: clip;
}
.banner-11 .row{
    margin: 0 auto;
}
.b-11-right{
    position: relative;
    background-color: var(--lilacsoft);
    padding-left: 100px;
    padding-top: 135px;
    padding-bottom: 135px;
    border-radius: 0 0 0 56px;
}
.b-11-right:after {
    content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: 100%;
    background: var(--lilacsoft);
    top: 0;
    z-index: 0;
    left: 100%;
}
.b-11-left{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.banner-12{
    margin-top: 50px;
    margin-bottom: 50px;
}
.banner-12 img{
    width: 100%;
    height: 475px;
    object-fit: cover;
    margin-bottom: 25px;
}
.b-13-left{
    position: relative;
    background-color: var(--coffeesoft);
    padding-right: 100px;
    padding-top: 135px;
    padding-bottom: 135px;
    border-radius: 0 0 56px 0;
}
.b-13-left:after {
    content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: 100%;
    background: var(--coffeesoft);
    top: 0;
    z-index: 0;
    right: 100%;
}
.b-13-right{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.b-13-right-2{
    display: none;
}

.products-banner-2{
    margin-top: 180px;
}

.banner-14{
    margin-top: 180px;
}
.b-14-l-box{
    width: 100%;
    padding: 20px 0px 20px 30px;
    position: relative;
}
.banner-14-pink .b-14-l-box{
    background-color: var(--pinksoft);
}
.banner-14-blue .b-14-l-box{
    background-color: var(--bluesoft);
}
.categories-menu li{
    margin-bottom: 20px;
}
.categories-menu li a{
    font-size: 18px;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-radius: 0 0 0 18px;
    transition: 0.3s ease-in-out;
}
.banner-14-pink .categories-menu li a{
    color: var(--pink5);
}
.banner-14-blue .categories-menu li a{
    color: var(--blue);
}
.banner-14-pink .categories-menu li a.active{
    background-color: var(--pink5);
    color: #ffffff;
}
.banner-14-blue .categories-menu li a.active{
    background-color: var(--blue);
    color: #ffffff;
}
.banner-14-pink .categories-menu li a:hover{
    background-color: var(--pink5);
    color: #ffffff;
}
.banner-14-blue .categories-menu li a:hover{
    background-color: var(--blue);
    color: #ffffff;
}
.alt-categories-menu{
    padding: 60px;
    position: absolute;
    left: 100%;
    top: 0px;
    width: 400px;
    height: auto;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease-in-out;
}
.banner-14-pink .alt-categories-menu{
    background-color: var(--pink5);
}
.banner-14-blue .alt-categories-menu{
    background-color: var(--blue);
}
.banner-14-pink .alt-categories-menu li a{
    color: #ffffff;
    font-size: 18px;
}
.banner-14-blue .alt-categories-menu li a{
    color: #ffffff;
    font-size: 18px;
}
.banner-14-pink .category-title{
    font-size: 30px;
    color: var(--pink5);
    font-weight: 500;
}
.banner-14-blue .category-title{
    font-size: 30px;
    color: var(--blue);
    font-weight: 500;
}
.categories-menu li:hover .alt-categories-menu{
    opacity: 1;
    visibility: visible;
    z-index: 1;
}
.b-14-r-top{
    width: 100%;
    height: 54px;
    display: inline-flex;
    align-items: center;
    padding-left: 20px;
}
.banner-14-pink .b-14-r-top{
    background-color: var(--pinksoft);
}
.banner-14-blue .b-14-r-top{
    background-color: var(--bluesoft);
}
.b-14-r-top p{
    font-size: 16px;
    margin: 0px;
}
.banner-14-pink .b-14-r-top{
    color: var(--pink5);
}
.banner-14-blue .b-14-r-top{
    color: var(--blue);
    z-index: 1;
}
.b-14-r-bottom{
    margin-top: 25px;
}
.product-list-box{
    height: 548px;
    width: 100%;
    border: solid 1px #dbdbdb3f;
    text-align: center;
    transition: 0.3s ease-in-out;
    margin-bottom: 25px;
    padding: 15px;
}
.banner-14-pink .product-list-box:hover{
    border: solid 1px var(--pink5);
}
.banner-14-blue .product-list-box:hover{
    border: solid 1px var(--blue);
}
.product-list-box:hover img{
    transform: scale(1.1)
}
.product-list-box img{
    height: 350px;
    margin-top: 30px;
    transition: 0.3s ease-in-out;
    z-index: 0;
    position: relative;
}
.product-list-box p{
    margin-bottom: 0px;
    margin-top: 30px;
    font-weight: 500;
    font-size: 22px;
}

.banner-14-pink .product-list-box p{
    color: var(--pink5);
}
.banner-14-blue .product-list-box p{
    color: var(--blue);
}
.product-list-box a{
    margin-top: 20px;
}
.product-category-menu{
    display: none;
}

.banner-15{
    margin-top: 150px;
}
.b-15-sitemap{
    font-size: 16px;
}
.banner-15-blue .b-15-sitemap{
    color: var(--blue);
}
.banner-15-pink .b-15-sitemap{
    color: var(--pink3);
}
.banner-15-blue .b-15-sitemap a{
    color: var(--blue);
}
.banner-15-pink .b-15-sitemap a{
    color: var(--pink3);
}
.product-title{
    font-size: 32px;
    font-weight: 500;
}
.banner-15-blue .product-title{
    color: var(--blue);
}
.banner-15-pink .product-title{
    color: var(--pink3);
}
.b-15-img-box{
    width: 100%;
    border: solid 1px #EBF4F7;
}

#productdetailcarousel img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
}

#productdetailcarousel {
    max-width: 100%;
    margin: 0 auto;
}

#productdetailcarousel .f-carousel__slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.f-carousel {
    --f-button-width: 38px;
    --f-button-height: 38px;

    --f-button-svg-width: 16px;
    --f-button-svg-height: 16px;
    --f-button-svg-stroke-width: 2.5;

    --f-button-color: rgb(71 85 105);
    --f-button-border-radius: 50%;
    --f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0 0 / 30%);

    --f-button-bg: #fff;
    --f-button-hover-bg: #f9f9f9;
    --f-button-active-bg: #f0f0f0;
}

.features-title{
    font-size: 24px;
    font-weight: 500;
}
.banner-15-blue .features-title{
    color: var(--blue);
}
.banner-15-pink .features-title{
    color: var(--pink3);
}

.features-box{
    width: 100%;
}
.feature-box{
    width: 48%;
    height: 64px;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    padding-left: 34px;
    margin-left: auto;
    margin-right: auto;
}

.features-box table {
    width: 100% !important;
}

.features-box table tr {
    height: auto !important;
}
.banner-15-blue .features-box table tr {
    background-color: var(--bluesoft);
}
.banner-15-pink .features-box table tr {
    background-color: var(--pinksoft);
}
.features-box table tr td {
    font-size: 16px;
    height: auto !important;
    border: solid 5px #ffffff;
    padding: 15px;
    height: 64px;
}
.banner-15-blue .features-box table tr td {
    background-color: var(--bluesoft);
    color: var(--blue);
}
.banner-15-pink .features-box table tr td {
    background-color: var(--pinksoft);
    color: var(--pink3);
}
.banner-15-blue .feature-box{
    background-color: var(--bluesoft);
}
.banner-15-pink .feature-box{
    background-color: var(--pinksoft);
}
.feature-box p{
    margin: 0px;
}
.banner-15-pink .feature-box p{
    color: var(--pink3);
}

.areas-use-box{
    width: 100%;
}
.area-box{
    width: 100%;
    height: 64px;
    padding-left: 34px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
}
.area-box p{
    margin: 0px;
}
.banner-15-blue .area-box{
    background-color: var(--bluesoft);
    color: var(--blue);
}
.banner-15-pink .area-box{
    background-color: var(--pinksoft);
    color: var(--pink3);
}
.product-video{
    width: 48%;
    height: 64px;
    padding-left: 34px;
    padding-right: 34px;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
}
.product-video p{
    margin: 0px;
}
.banner-15-blue .product-video{
    background-color: var(--blue7);
}
.banner-15-pink .product-video{
    background-color: var(--pink6);
}
.product-video img{
    margin-left: auto;
}
.product-document{
    width: 48%;
    height: 64px;
    padding-left: 34px;
    padding-right: 34px;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    margin-left: auto;
}
.product-document p{
    margin: 0px;
}
.banner-15-blue .product-document{
    background-color: var(--blue);
}
.banner-15-pink .product-document{
    background-color: var(--pink3);
}
.product-document img{
    margin-left: auto;
}
.banner-16{
    margin-top: 50px;
}
.technical-feature-title{
    margin: 0px;
    font-size: 24px;
    font-weight: 500;
}
.banner-16-blue .technical-feature-title{
    color: var(--blue);
}

.banner-16-pink .technical-feature-title{
    color: var(--pink3);
}

.technic-box{
    position: relative;
    height: 260px;
    width: 100%;
    text-align: center;
    padding: 30px 0px;
    margin-bottom: 16px;
}
.technic-box img{
    position: absolute;
    top: 30px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    height: 50px;
}
.banner-16-blue .technic-box{
    background-color: var(--bluesoft);
    color: var(--blue);
}
.banner-16-pink .technic-box{
    background-color: var(--pinksoft);
    color: var(--pink3);
}
.t-b-title{
    margin-top: 100px;
}
.t-b-title-2{
    font-size: 24px;
    font-weight: 500;
}


.media-1 {
    margin-top: 150px;
}

.media-1 img {
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    aspect-ratio: 16 / 10;
}

.media-2 {
    margin-top: 50px;
}

.media-2 img {
    height: 400px;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.media-3 {
    margin-top: 50px;
}

.media-3 img {
    height: 400px;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.news-detail {
    margin-top: 180px;
}
.banner-17{
    margin-top: 50px;
    background-color: var(--orange);
}
.banner-17 .row{
    height: 250px;
}
.b-17-left{
    display: inline-flex;
    align-items: center;
    justify-content: start;
    padding-left: 70px;
}
.b-17-right{
    display: inline-flex;
    align-items: center;
    justify-content: end;
    padding-right: 70px;
}


.banner-18 {
    margin-top: 180px
}

.banner-18 .col-md-3 {
    margin-bottom: 25px;
}

.b-18-box {
    width: 100%;
    height: 285px;
    background-color: var(--orangesoft);
    display: grid;
    justify-content: center;
    padding: 50px;
    transition: 0.4s ease-in-out;
    text-align: center;
}

.b-18-box:hover p {
    color: var(--orange);
    transition: 0.4s ease-in-out;
}

.b-18-box:hover {
    background-color: var(--orange);
    color: #ffffff;
}
.b-18-box:hover p{
    color: #ffffff;
}
.b-18-box:hover a {
    color: #ffffff;
}
.b-18-box:hover a span{
    background-color: #ffffff;
}

.banner-19 {
    margin-top: 150px;
}

.contact-form input {
    background-color: transparent;
    border-radius: 0;
    color: var(--blue);
    font-size: 16px;
    outline: none;
    width: 100%;
    height: 50px;
    padding-left: 20px;
    border: solid 1px var(--blue);
    margin-bottom: 20px;
}

.contact-form input::placeholder {
    color: var(--blue);
}

.contact-form input:focus {
    background-color: transparent;
}

.contact-form textarea {
    background-color: transparent;
    color: var(--blue);
    outline: none;
    width: 100%;
    padding-left: 20px;
    border: solid 1px var(--blue);
    margin-bottom: 20px;
    padding-top: 20px;
    font-size: 16px;
}

.contact-form textarea::placeholder {
    color: var(--blue);
}

.contact-form textarea:focus {
    background-color: transparent;
}

.contact-form .btn-green {
    border: none;
    width: 120px;
    color: #ffffff;
    padding: 0;
}

.contact-right {
    padding-left: 50px;
}

.contact-right p i {
    margin-right: 20px;
}

.contact-right .t-blue-24 {
    margin-top: 50px;
}

.google-map {
    margin-top: 50px;
}

.google-map iframe {
    height: 450px;
    width: 100% !important;
}

.banner-21 {
    margin-top: 180px;
}