body {
    background-color: #fcfaf4;
}

h1 {
    color: white;
    font-family: "Quicksand";
    font-size: 60px;
}

h5 {
    color: white;
    font-family: "Lato";
    font-size: 18px;
}   

.white-heading {
    color: white;
    font-family: "Quicksand";
    font-size: 17px;
    line-height: 100%;
    margin-bottom: 25px;
}

.white-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    background-color: white;
    color: #006837;
    padding: 12px 22px;
    border-radius: 90px;
    cursor: pointer;
}

.orange-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    background-color: #E2B23C;
    color: white;
    padding: 12px 22px;
    border-radius: 90px;
    cursor: pointer;
}

.hmp-header {
    position: relative;
    width: 100%;
    min-height: 800px;
    /* background-color: #006837; */
    overflow: hidden;
    display: flex;
}

.hmp-header h1 {
    line-height:100%;
    margin-bottom:25px;
}

.hmp-header p {
    color:white!important;
}

/* ::before to apply background image */
.hmp-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-image: var(--header-bg-image);
    background-size: cover; /* maintain aspect ratio and crop */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* ::after for radial gradient */
.hmp-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
    url('https://tour.nvmoudenbosch.nl/wp-content/themes/NVMOTour/assets/content/images/nvmo-pattern.png'),
    radial-gradient(
        circle farthest-side at right center,
        transparent 50%,
        #006837 50%
    );
    background-size: cover, auto; /* Gradient covers, pattern scales as needed */
    background-repeat: no-repeat, repeat; /* Gradient doesn't repeat, pattern repeats */
    background-position: center, center; /* Center both gradient and pattern */
    -webkit-mask-image: radial-gradient(
        circle farthest-side at right center,
        transparent 50%,
        black 50%
    );
    -webkit-mask-composite: destination-in;
    mask-image: radial-gradient(
        circle farthest-side at right center,
        transparent 50%,
        black 50%
    );
    mask-composite: intersect;
    z-index: 2;
}

/* Content layered above */
.hmp-header__content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    height: 100%;
    gap: 20px;
    width: 80%;
    max-width: 1600px;
    padding: 0 20px;
    margin: auto;
    z-index: 3; /* on top of ::before and ::after */
    position: relative;
}

.heading-content-container_2 {
    grid-column: span 5;
}

.heading-content-container_3 h5{
    line-height: 1.6em;
}

.btn-container-heading {
    margin-top:20px;
    display: flex;
    gap: 15px;
}

/* ↓ Contact page ↓ */

.teamleden-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 55px;
    column-gap: 22px;
}

.teamleden-row-content {
    margin-top: 10px;
}

.teamleden-title {
    font-family: "Quicksand";
    font-size: 24px;
    color: #009C53;
    font-weight: 400;
}

.teamleden-function {
    font-family: "Lato";
    font-size: 14px;
    color: #35322B;
}

/* ↑ Contact page ↑ */

/* ↓ Nieuwsoverzicht page ↓ */

.container_category_btn {
    display: flex;
}

.category_btn {
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 15px;
    cursor: pointer;
    color: white;
    border: unset;
    border: 2px solid white;
    background-color: transparent;
    margin-right: 25px;
    transition: all 0.25s ease;
}

.category_btn:hover {
    color: #fff;
    background-color: #E2B23C;
    border: 2px solid #E2B23C;
}

.category_btn.active {
    color: #FFFFFF;
    background-color: #E2B23C;
    border: 2px solid #E2B23C;
}

.article-container, .horizontalscroll-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 55px;
    column-gap: 22px;
}

.horizontalscroll-column:hover img {
    transform: scale(1.05);
}

.horizontalscroll-column h3 {
    transition: color 0.25s ease;
    font-size: 18px!important;
}

.horizontalscroll-column:hover h3 {
    color: #009C53!important;
}

.article-row-img {
    overflow: hidden;
    border-radius: 6px;
    height: 280px;
}

.article-row-img img {
    height: 280px;
    
    width: 100%;
    object-fit: cover;

    transition: all 0.25s ease;
}

.article-row-content {
    margin-top: 5px;
}

.article-row1 {
    display: flex;
    font-size: 14px;
    color: #35322b7e;
}

.article-row1 img {
    margin: 0 10px;
}

.article-row2 {
    font-family: "Quicksand";
    font-size: 18px;
    color: #35322B;
    font-weight: 600;
    line-height: 1.4em !important;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #009C53;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 

/* ↑ Nieuwsoverzicht page ↑ */

@media only screen and (max-width: 600px) {
    .container_category_btn {
        display: grid;
        gap: 15px;
    }

    #mobile_menu2 {
        background-image: url('https://tour.nvmoudenbosch.nl/wp-content/themes/NVMOTour/assets/content/images/nvmo-pattern.png')
    }

    .article-row-content {
        padding: 0px 0px 10px 12px;
    }

    .article-column {
        margin-bottom: 25px;
    }

    .article-container {
        display: grid;
        grid-template-columns: unset;
        row-gap: unset;
        column-gap: unset;
    }

    .teamleden-container {
        display: grid;
        grid-template-columns: unset;
    }

    .horizontalscroll-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        grid-template-columns: unset;
        row-gap: 3em;
        column-gap: unset;
        gap: 16px;
        padding: 16px;
    }

    .horizontalscroll-column {
        flex: 0 0 auto; 
        scroll-snap-align: start; 
        width: 80%; 
        max-width: 300px; 
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
        border-radius: 8px; 
        background-color: #fff; 
    }

    .horizontalscroll-container::-webkit-scrollbar {
        height: 8px;
    }
    
    .horizontalscroll-container::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }
    
    .horizontalscroll-container::-webkit-scrollbar-track {
        background-color: #f4f4f4;
    }
  }

/* Background video styles for homepage header */
.hmp-header--video::before {
    display: none; /* hide image pseudo-element when video is used */
}

.hmp-header__video {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 50%; /* match the right-side width used by the background image */
    height: 100%;
    object-fit: cover;
    object-position: right center;
    z-index: 1; /* sits below the overlay (::after) and content */
    pointer-events: none; /* allow interactions with content */
}

/* ensure overlay and content keep their stacking order */
.hmp-header::after {
    z-index: 2;
}

.hmp-header__content {
    z-index: 3;
    position: relative;
}

/* === Mobile header using top-anchored radial-gradient mask === */
@media (max-width: 768px) {
    #et-main-area {
        margin-top: -110px;
    }    

  .hmp-header {
    --mobile-media-height: 400px;                  /* height of the top image/video */
    --mobile-cap-radius: calc( var(--mobile-media-height) + 300px);        /* curve size; tweak as needed */
    display: block;
    min-height: unset;
    padding-top: var(--mobile-media-height);
    margin-top:-110px;
  }

  /* image on top */
  .hmp-header::before {
    left: 0;
    right: auto;
    width: 100%;
    height: var(--mobile-media-height);
    background-position: center top;
    background-size: cover;
    z-index: 1;
  }

  /* video variant */
  .hmp-header--video::before { display: none; }
  .hmp-header__video {
    left: 0;
    right: auto;
    width: 100%;
    height: var(--mobile-media-height);
    object-fit: cover;
    object-position: center top;
    z-index: 1;
    pointer-events: none;
  }

  /* green/pattern overlay with radial gradient "cutout" at the top */
  .hmp-header::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      url('https://tour.nvmoudenbosch.nl/wp-content/themes/NVMOTour/assets/content/images/nvmo-pattern.png'),
      radial-gradient(circle var(--mobile-cap-radius) at center top, transparent 50%, #006837 50%);
    background-size: auto, cover;         /* pattern repeats, gradient covers */
    background-repeat: repeat, no-repeat;
    background-position: center, center;

    /* same trick as desktop, but anchored at the top */
    -webkit-mask-image: radial-gradient(circle var(--mobile-cap-radius) at center top, transparent 50%, black 50%);
    -webkit-mask-composite: destination-in;
    mask-image: radial-gradient(circle var(--mobile-cap-radius) at center top, transparent 50%, black 50%);
    mask-composite: intersect;

    z-index: 2;
  }

  /* content below the image */
  .hmp-header__content {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    gap: 16px;
    padding: 24px 20px 36px;
    margin: 0;
    position: relative;
    z-index: 3;
  }

  .heading-content-container_2 { grid-column: 1 / -1; }
}

/*change hamburger icon to x when mobile menu is open*/

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}


/*adjust the new toggle element which is added via jQuery*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}


/*some code to keep everyting positioned properly*/

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}


/*remove default background color from menu items that have children*/

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*hide the submenu by default*/

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}


/*show the submenu when toggled open*/

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}


/*adjust the toggle icon position and transparency*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}


/*submenu toggle icon when closed*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: #006837;
	background: #f0f3f6;
	border-radius: 50%;
	padding: 3px;
}


/*submenu toggle icon when open*/

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}


/*add point on top of the menu submenu dropdown*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}


/*adjust the position of the hamburger menu*/

.mobile_menu_bar {
	position: relative;
	display: block;
	bottom: 10px;
	line-height: 0;
}


/*force the background color and add a rounded border*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px;
}