/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


.absolute-footer.dark {
    display: none;
}

.text-letter-spacing p {
    letter-spacing: 0.25em;
}

.section-footer .social-icons.follow-icons {
    display: flex;
    gap: 26px;
}

.section-footer .section-bg img {
    width: 450px !important;
    height: auto !important;
    object-fit: contain !important;
    left: auto !important;
    right: 80px !important;
    bottom: 220px !important;
    top: auto !important;
    transform: none !important;


    opacity: 0.6;
}

.section-footer .section-content {
    z-index: 2;
    position: relative;
}

.nav-line-bottom>li>a:before,
.nav-line-grow>li>a:before,
.nav-line>li>a:before {

    content: " ";
    height: 1px;
    left: 50%;
    opacity: 0;
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    transition: all .3s;
    width: 100%;
}

.dark .nav-vertical-fly-out>li>a:hover,
.dark .nav>li.active>a,
.dark .nav>li>a.active,
.dark .nav>li>a:hover,
.nav-dark .nav>li.active>a,
.nav-dark .nav>li.current>a,
.nav-dark .nav>li>a.active,
.nav-dark .nav>li>a:hover,
.nav-dark a.plain:hover,
.nav-dropdown.dark .nav-column>li>a:hover,
.nav-dropdown.dark>li>a:hover {
    color: #B39A7B;
}

ul.header-nav.header-nav-main.nav.nav-right {
    display: flex;
    gap: 20px;
}

.dark .nav-vertical li li.menu-item-has-children>a,
.dark .nav-vertical-fly-out>li>a,
.dark .nav-vertical>li>ul li a,
.dark .nav>li.html,
.dark .nav>li>a,
.nav-dark .is-outline,
.nav-dark .nav>li>a,
.nav-dark .nav>li>button,
.nav-dropdown.dark .nav-column>li>a,
.nav-dropdown.dark>li>a {
    color: #fff;
}

.text-letter-spacing-banner p {
    letter-spacing: 7px;
}

.white.is-outline:hover {
    background-color: unset !important;
    border-color: #b39a7b;
    color: #b39a7b !important;
}



.section-logo .section-bg img {
    display: none !important;
}

.section-logo .section-bg {
    background-image: url('/wp-content/uploads/2026/04/Patroon4.jpg');
    background-repeat: repeat !important;
    background-size: 125px !important;
    background-position: center;
}


.img-box-3 .icon-box-img img {
    transition: transform 0.5s cubic-bezier(.4, 0, .2, 1);
}

.img-box-3:hover {
    cursor: pointer;
}

.img-box-3:hover .icon-box-img img {

    transform: rotate(180deg);

}

.img-box-3 .image-cover .overlay {
    transition: background-color 0.5s ease;
}

.img-box-3:hover .image-cover .overlay {
    background-color: rgba(0, 0, 0, 0.1) !important;

}

.img-box-3 .icon-box-text::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 13l5 5 5-5M12 6v12'/%3E%3C/svg%3E");
    display: block;
    margin: 10px auto 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
}

.img-box-3:hover .icon-box-text::after {
    opacity: 1;
    transform: translateY(0);
}


.btn-brown {
    position: relative;
    overflow: hidden;
    background: #B39A7B;
    color: #fff;
    border: 1px solid #B39A7B;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.btn-brown::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
    z-index: 0;
}

.btn-brown span {
    position: relative;
    z-index: 1;
}

.btn-brown:hover::before {
    transform: scaleY(1);
}

.btn-brown:hover {

    border-color: #fff;
}

.btn-brown:hover span {
    color: #B39A7B !important;
}

.banner-grad-about {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-grad-about .banner-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.banner-grad-about .banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.banner-grad-about .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(24, 43, 59, 0.8) 0%,
            rgba(24, 43, 59, 0.4) 100%);
    z-index: 2;
}



.banner-grad-about .banner-layers {
    position: relative;
    z-index: 10;
    width: 100%;
}

.banner-grad-about::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 3.5vw;
    background-image: url("/wp-content/uploads/2026/05/download.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 5;
    pointer-events: none;
}

.text-box-about {
    margin: 0 auto;
    text-align: center;
}

.banner-title {
    color: #ffffff !important;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}



.text-line h5 strong {
    position: relative;
    padding-left: 15px;
    letter-spacing: 2px;
}

.text-line h5 strong::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 100%;
    background-color: #B39A7B;
    border-radius: 10px;
}

.img-radius img {
    border-radius: 24px;
}

.section-from-small,
.section-ball {
    position: relative;
    background-color: rgb(253, 253, 254) !important;
}

.section-from-small .section-bg,
.section-ball .section-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-blend-mode: normal !important;
    background-image: none !important;
}

.section-from-small .section-bg img,
.section-ball .section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal !important;
    position: relative;
    z-index: 1;
}

.section-from-small .section-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%) !important;
    mix-blend-mode: overlay;
    z-index: 2;
    pointer-events: none;
}

.section-ball .section-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: overlay;
    z-index: 2;
    pointer-events: none;
}

.section-from-small .section-content,
.section-ball .section-content {
    position: relative;
    z-index: 10;
}


.banner-sus {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-sus .banner-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.banner-sus .banner-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #236396 0%, #009af2 100%) !important;
    mix-blend-mode: multiply;
    z-index: 2;
}

.banner-sus::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 3.5vw;
    background-image: url("/wp-content/uploads/2026/05/download.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 5;
    pointer-events: none;
}

.banner-sus .banner-layers {
    position: relative;
    z-index: 10;
}

.header-wrapper.stuck {
    opacity: 1;
    background: #000;
}


.custom-contact-form {
    max-width: 800px;
    margin: 0 auto;
}

.custom-contact-form .row-flex {
    display: flex;
    gap: 20px;
    margin-bottom: 6px;
}

.custom-contact-form .col-field {
    flex: 1;
}

.custom-contact-form .row-full {
    margin-bottom: 20px;
}

.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"],
.custom-contact-form select,
.custom-contact-form textarea {
    width: 100% !important;
    background-color: #E9EDF0 !important;
    border: none !important;
    border-radius: 2px !important;
    padding: 7px 20px !important;
    font-size: 15px !important;
    color: #182B3B !important;
    box-shadow: none !important;
    outline: none !important;
    height: 45px;
}

.custom-contact-form ::placeholder {
    color: #182B3B !important;
    opacity: 1;
}

.custom-contact-form select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="%23666" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.custom-contact-form input:focus,
.custom-contact-form select:focus,
.custom-contact-form textarea:focus {
    background-color: #e0e4e7 !important;
    border-bottom: 2px solid #B39A7B !important;
}

.custom-contact-form .row-submit {
    text-align: right;
    margin-top: 10px;
}

.custom-contact-form input[type="submit"] {
    background-color: #B39A7B !important;
    color: #fff !important;
    border: none !important;
    padding: 6px 40px !important;
    font-weight: bold !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex;
    margin: 0px 0px 0px auto;
    font-size: 16px !important;
}

.custom-contact-form input[type="submit"]:hover {
    background-color: #967f63 !important;
    transform: translateY(-2px);
}

.img-box-radius img {
    border-radius: 12px;
}

span.wpcf7-spinner {
    display: none;
}


.single-product .header-wrapper,
.single-product .header-bg-color,
.single-product .header-main {
    background-color: transparent !important;
}

.single-product .header-wrapper:not(.stuck) {
    position: absolute !important;
    width: 100% !important;
    z-index: 999;

}

.single-product .header-wrapper:not(.stuck) .nav>li>a,
.single-product .header-wrapper:not(.stuck) .nav-top-link,
.single-product .header-wrapper:not(.stuck) .header-top strong,
.single-product .header-wrapper:not(.stuck) .icon-menu {

    color: #ffffff !important;

}

.single-product .header-wrapper.stuck {
    position: fixed !important;
    top: 0;
    width: 100%;

}


.single-product .header-wrapper.stuck .header-bg-color {

    background-color: #000 !important;

}


.single-product .header-wrapper.stuck .nav>li>a,
.single-product .header-wrapper.stuck .nav-top-link,
.single-product .header-wrapper.stuck .icon-menu {

    color: #fff !important;

}

.single-product .product-main {

    padding-top: 0 !important;

}

.single-product .page-title-inner {

    background-color: transparent !important;

}

.banner-grad-about {
    background-image: url('/wp-content/uploads/2026/05/Ocean-Ingredients-header-1920-x-1080.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    overflow: hidden;
}

.banner-grad-about .text-line {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-left: 15px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.single-product .banner-grad-about .text-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 100%;
    background-color: #B39A7B;
    border-radius: 10px;
}

.section-from-small .section-bg {
    background-image: url('/wp-content/uploads/2026/05/BG1.webp') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section-from-small .section-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%) !important;
    mix-blend-mode: overlay;
    z-index: 2;
    pointer-events: none;
}

.entry-content-short h2 {
    color: #182B3B;
    font-weight: 900 !important;
}

.section-ball-right .section-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('/wp-content/uploads/2026/05/BG-Def-1.svg') !important;
    background-repeat: no-repeat !important;
    background-position: 100% center !important;
    background-size: contain !important;
    z-index: 1;
}

.section-ball-right .section-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: overlay;
    z-index: 2;
    pointer-events: none;
}

.section-ball-right .content-relative {
    position: relative;
    z-index: 5;
}

.app-header.text-center .text-line {
    color: #182B3B;
}


.section-packaging-options {
    background-color: #182b3b;
}

.section-bg-packaging {
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2026/05/BG-Producten.svg'),
        linear-gradient(180deg, #182b3b 0%, #0d4768 100%) !important;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.section-packaging-options::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 3.5vw;
    background-image: url("/wp-content/uploads/2026/05/download.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 5;
    pointer-events: none;
}

.section-packaging-options .text-line {
    color: #fff;
}

.section-packaging-options h2,
.section-packaging-options h4,
.section-packaging-options p {
    color: #ffffff;
}

.product-spec-table {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}


.product-small .box-image {
    background-color: #C5D1D6 !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 15px;
}

.product-small .box-image img {
    width: 85% !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.3s ease;
}

.product-small .box:hover .box-image img {
    transform: scale(1.08);
}

.product-small .box-text {
    padding: 15px 0 !important;
    text-align: left;
}

.product-small .product-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #182B3B !important;
    line-height: 1.3 !important;
    margin: 5px 0 0 0 !important;
}

.product-small .product-title a {
    color: #182B3B;
    text-decoration: none !important;
}

.product-small .box:hover a {
    color: #B39A7B;
}


.product-small .product-cat {
    display: none !important;
}

.product-small .box-text-products {
    min-height: 60px;
}

.woocommerce-shop .header-wrapper,
.woocommerce-shop .header-bg-color,
.woocommerce-shop .header-main,
.woocommerce-page .header-wrapper,
.woocommerce-page .header-bg-color,
.woocommerce-page .header-main {
    background-color: transparent !important;
}

.woocommerce-shop .header-wrapper:not(.stuck),
.woocommerce-page .header-wrapper:not(.stuck) {
    position: absolute !important;
    width: 100% !important;
    z-index: 999;
}

.woocommerce-shop .header-wrapper:not(.stuck) .nav>li>a,
.woocommerce-shop .header-wrapper:not(.stuck) .nav-top-link,
.woocommerce-shop .header-wrapper:not(.stuck) .header-top strong,
.woocommerce-shop .header-wrapper:not(.stuck) .icon-menu,
.woocommerce-page .header-wrapper:not(.stuck) .nav>li>a,
.woocommerce-page .header-wrapper:not(.stuck) .nav-top-link,
.woocommerce-page .header-wrapper:not(.stuck) .header-top strong,
.woocommerce-page .header-wrapper:not(.stuck) .icon-menu {
    color: #ffffff !important;
}

.woocommerce-shop .header-wrapper.stuck,
.woocommerce-page .header-wrapper.stuck {
    position: fixed !important;
    top: 0;
    width: 100%;
}

.woocommerce-shop .header-wrapper.stuck .header-bg-color,
.woocommerce-page .header-wrapper.stuck .header-bg-color {
    background-color: #000000 !important;
}

.woocommerce-shop .header-wrapper.stuck .nav>li>a,
.woocommerce-shop .header-wrapper.stuck .nav-top-link,
.woocommerce-shop .header-wrapper.stuck .icon-menu,
.woocommerce-page .header-wrapper.stuck .nav>li>a,
.woocommerce-page .header-wrapper.stuck .nav-top-link,
.woocommerce-page .header-wrapper.stuck .icon-menu {
    color: #ffffff !important;
}

.woocommerce-shop .shop-container,
.woocommerce-page .page-title-inner {
    padding-top: 0 !important;
}

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}