/**
Theme Name: Astra Child - WR Exergie
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ===================================================
   WR EXERGIE KLEUREN
   Medium blauw: #004085
   Zeeblauw / teal: #00abc2
   Oranje vervalt volledig, behalve review-sterren
   Grijze cardrand blijft ongewijzigd (#cdd2d7)
=================================================== */

/* Force Light Mode (no weird colors on samsung browser with dark mode) */

:root {
    color-scheme: only light;
}

.site-logo img, header img {
    filter: none !important;
}

/* Body tekst font size */

body p,
body li,
 {
    font-size: 17px !important;
    color: #004085;
}

/* Woordafbreking op h1 opleiding page */

.opleiding-title {
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Headings medium blauw */

h1, h2, h3, h4, h5, h6 {
    color: #004085;
}

/* Witte tekst */

.txt-wht{
	color: #ffffff;
}

.txt-wht a{
	color: #ffffff;
}

/* Main CTA lettergrootte */
.cta-main span {
    font-weight: 600 !important;
}

/* Animated button */

.cta-animated {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 54px;
    border-radius: 15px;
    background: linear-gradient(-45deg, #004085, #00abc2);
    background-size: 600% 600%;
    animation: cta-gradient 8s linear infinite;
    color: white !important;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    cursor: pointer;
}

@keyframes cta-gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Achtergrond met ronde hoek linksboven */
.bg-round-left .upb_row_bg {
    border-radius: 150px 0 0 0 !important;
    overflow: hidden !important;
}

.contact-location {
    border-radius: 150px 0 0 0 !important;
    overflow: hidden !important;
}

/* Achtergrond met ronde hoek rechtsboven */
.bg-round-right .upb_row_bg {
    border-radius: 0 150px 0 0 !important;
    overflow: hidden !important;
	background-color: #ffffff !important;
}

.bg-round-right-blue .upb_row_bg {
    border-radius: 0 150px 0 0 !important;
    overflow: hidden !important;
}

.bg-round-right .upb_row_bg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;

    background-size: cover;
    z-index: 1;
}

/* Achtergrond met ronde hoek linksonder, voor hero secties */
.bg-round-hero-left .upb_row_bg {
    border-radius: 0 0 0 150px !important;
    overflow: hidden !important;
}

/* Opleiding Card */
.opleiding-card {
    border-radius: 16px;
    border: 2px solid #cdd2d7;
    overflow: hidden;
    position: relative;
    transition: border-color 0.3s ease;
    cursor: pointer;
}
.opleiding-card:hover {
    border-color: #00abc2;
}
.opleiding-card img {
    transition: transform 0.6s ease;
}
.opleiding-card:hover img {
    transform: scale(1.08);
}	

.opleiding-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, #004085 30%, transparent 100%);
    border-radius: 0 0 16px 16px;
    pointer-events: none;
    z-index: 1;
}

.opleiding-card .card-title {
    position: absolute;
    bottom: 40px;
    left: 20px;
    right: 50px;
    color: white;
    font-weight: 600;
    font-size: 18px;
    z-index: 3;
}

.opleiding-card .card-arrow {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 4;
    font-size: 14px;
    top: auto;
    transition: border-color 0.3s ease, color 0.3s ease;
}
.opleiding-card:hover .card-arrow {
    border-color: #00abc2;
}

.opleiding-card .wpb_raw_code,
.opleiding-card .wpb_raw_code .wpb_wrapper {
    position: static !important;
}

.opleiding-card.vc_column_container {
    margin: 0 10px 20px 10px !important;
    width: calc(25% - 20px) !important;
    aspect-ratio: 1 / 1 !important;
}

.opleiding-card.vc_column_container:nth-child(4n+1 of .opleiding-card) {
    margin-left: 0 !important;
}
.opleiding-card.vc_column_container:nth-child(4n of .opleiding-card) {
    margin-right: 0 !important;
}


@media (min-width: 769px) and (max-width: 1024px) {
    .opleiding-card.vc_column_container {
        width: calc(50% - 20px) !important;
        margin: 0 10px 20px 10px !important;
    }
    .opleiding-card.vc_column_container:nth-child(odd) {
        margin-left: 0 !important;
    }
    .opleiding-card.vc_column_container:nth-child(even) {
        margin-right: 0 !important;
    }
}

@media (max-width: 768px) {
    .opleiding-card.vc_column_container {
        width: calc(100% - 40px) !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        margin-bottom: 20px !important;
    }
	.opleiding-card .card-title {
  		font-size: 13px !important;
	}
    .opleiding-card img {
        transition: none !important;
    }
    .opleiding-card:hover img {
        transform: none !important;
    }
}

.opleiding-card.vc_column_container:nth-child(4n+1 of .opleiding-card) {
    margin-left: 20px !important;
}

/* USP Card */
.usp-card {
    border-radius: 16px;
    border: 2px solid #cdd2d7;
    overflow: hidden;
    position: relative;
    width: 340px;
    height: 340px;
}

/* Geen hover op usp-card */
.usp-card:hover {
    border-color: #cdd2d7;
}

/* Donkere overlay */
.usp-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 64, 133, 0.55);
    z-index: 1;
    pointer-events: none;
}

/* Achtergrondafbeelding: eerste wpb_single_image */
.usp-card .vc_column-inner > .wpb_wrapper > .wpb_single_image:first-child {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.usp-card .vc_column-inner > .wpb_wrapper > .wpb_single_image:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Icon: tweede wpb_single_image */
.usp-card .vc_column-inner > .wpb_wrapper > .wpb_single_image:nth-child(3) {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
}

.usp-card .vc_column-inner > .wpb_wrapper > .wpb_single_image:nth-child(3) img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* Heading */
.usp-card .card-title {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    transform: translateY(-60%);
    color: white;
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    z-index: 3;
    line-height: 1.2;
}

/* Subtekst: wpb_text_column */
.usp-card .wpb_text_column {
    position: absolute;
    bottom: 40px;
    left: 20px;
    right: 20px;
    color: white;
    font-size: 15px;
    text-align: center;
    z-index: 3;
}

.usp-card .wpb_text_column p {
    margin: 0;
    color: white;
}

/* Empty spaces negeren */
.usp-card .vc_empty_space {
    display: none;
}
.usp-card .vc_column-inner > .wpb_wrapper > .wpb_single_image:nth-child(3) {
    left: 0;
    right: 0;
    transform: none;
    text-align: center;
}


.usp-card.vc_column_container {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: calc(33.33% - 40px) !important;
}

.usp-card.vc_column_container:first-child {
    margin-left: 0 !important;
}

.usp-card.vc_column_container:last-child {
    margin-right: 0 !important;
}


@media (max-width: 768px) {
    .usp-card.vc_column_container {
        width: calc(100% - 40px) !important;
        margin-left: 20 !important;
        margin-right: 20 !important;
        margin-bottom: 20px !important;
    }
}


/* Waarom WR Card */
.waarom-card {
    border-radius: 25px;
    border: 1px solid #00abc2;
    background: white;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
    padding: 24px;
    position: relative;
}

.waarom-card.vc_column_container {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: calc(25% - 40px) !important;
}

.waarom-card.vc_column_container:first-child {
    margin-left: 0 !important;
}

.waarom-card.vc_column_container:last-child {
    margin-right: 0 !important;
}

@media (max-width: 768px) {
    .waarom-card.vc_column_container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
}	
	
	
	
	
/* Testimonial Card */

.testimonial-card.vc_column_container {
    border-radius: 25px !important;
    border: 1px solid #00abc2 !important;
    background: white !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
    padding: 50px !important;
    position: relative !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
	margin-bottom: 50px;
    width: calc(100% - 40px) !important;
}
.testimonial-card.vc_column_container:first-child {
    margin-left: 0 !important;
}
.testimonial-card.vc_column_container:last-child {
    margin-right: 0 !important;
}
.vc_row.vc_inner .testimonial-card.vc_column_container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
@media (max-width: 768px) {
    .testimonial-card.vc_column_container,
    .vc_row.vc_inner .testimonial-card.vc_column_container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
}



/* Review stars - blijft geel/oranje, ongewijzigd */

.review-stars {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars {
    display: flex;
    gap: 2px;
}

.star {
    font-size: 30px;
    color: #fa9116;
    line-height: 1;
}

.review-score {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fa9116;
}



/* Contact Card */


.contact-card {
    border-radius: 25px;
    border: 1px solid #00abc2;
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    padding: 24px;
    position: relative;
}
.contact-card.vc_column_container {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: calc(33.33% - 40px) !important;
}
.contact-card.vc_column_container:first-child {
    margin-left: 0 !important;
}
.contact-card.vc_column_container:last-child {
    margin-right: 0 !important;
}
@media (max-width: 768px) {
    .contact-card.vc_column_container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
}


/*Blauwe gloed afbeelding */

/* Blue gradient image overlay */
.blue-img .wpb_single_image .vc_single_image-wrapper {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
}
.blue-img .wpb_single_image .vc_single_image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 64, 133, 0.0) 40%,
        rgba(0, 64, 133, 0.6) 100%
    );
    border-radius: 16px;
}

/* Foto op contact pagina */

.contact-foto.vc_column_container {
    padding: 0 !important;
    overflow: hidden !important;
    min-height: 400px !important;
}
.contact-foto .wpb_single_image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}
.contact-foto .wpb_single_image,
.contact-foto .wpb_wrapper,
.contact-foto figure,
.contact-foto .vc_single_image-wrapper {
    width: 100% !important;
    height: 100% !important;
}
.contact-foto .vc_single_image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
}


/* Vast logo op leadgen page */

.leadgen-logo {
    position: fixed;
    top: 60px;
    left: 60px;
    z-index: 999;
}

.leadgen-logo img {
    width: 180px;
    height: auto;
}

@media (max-width: 768px) {
    .leadgen-logo {
        position: relative;
        display: block;
		top: auto;
        margin-bottom: 16px;
    }
}

/* Full height row op lead gen page */

.full-height {
    min-height: 100vh !important;
    height: 100vh !important;
}

@media (max-width: 768px) {
    .full-height {
        height: auto !important;
        min-height: unset !important;
    }
}


/* Externe link icon toevoegen aan menu items */

#menu-footer-menu-informatie #menu-item-748 a.menu-link::after {
    content: " ↗";
    font-size: 0.85em;
    color: #fff;
}

/* Maak font size form button kleiner */

.wpforms-form button[type=submit] {
    font-size: 14px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}



/* Stats grid opleiding pagina kleiner op mobiel */

@media (max-width: 768px) {
    .stats-grid {
        gap: 8px !important;
    }
    .stats-grid > div {
        padding: 16px 8px !important;
    }
    .stats-grid > div > div:first-child {
        font-size: 22px !important;
    }
    .stats-grid > div > div:last-child {
        font-size: 11px !important;
    }
}

/* Content op zelfde hoogte beginnen lead gen page */

@media (min-width: 769px) and (max-width: 900px) {
    .leadgen-spc {
        height: 0px !important;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .leadgen-spc {
        height: 80px !important;
    }
}

@media (min-width: 1101px) and (max-width: 1400px) {
    .leadgen-spc {
        height: 100px !important;
    }
}

@media (min-width: 1401px) and (max-width: 1700px) {
    .leadgen-spc {
        height: 150px !important;
    }
}

@media (min-width: 1701px) {
    .leadgen-spc {
        height: 200px !important;
    }
}

/* Achtergrond kleur veelgestelde vraag */

.vc_tta-color-black .vc_tta-panel-heading {
    background-color: #004085 !important;
    border-color: #004085 !important;
}

.vc_tta-color-black .vc_tta-panel-heading:hover {
    background-color: #004085 !important;
}

.vc_tta-color-black .vc_tta-panel-title a {
    color: #ffffff !important;
}


/* Ronde hoeken duo afbeeldingen */

.wr-rounded img {
    border-radius: 35px !important;
}



/* Hero video */

.video-duo {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}
.video-window {
  width: 42%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.video-window video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-window.left video {
  object-position: left center;
}
.video-window.right video {
  object-position: right center;
}


/* Page intro tekst 24px */

.page-intro-txt{
	font-size: 24px !important
}

/* Hero title card */

.hero-title-card {
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    text-align: center;
    padding: 24px;
	z-index: 5;
	margin-bottom: -80px;
}

.hero-title-card > .vc_column-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Examen / certificaat balk */

.cert-bar {
    background: linear-gradient(to right, #004085, #00ABC2);
    border-radius: 16px;
    padding: 16px 24px;
    border: 1px solid #cdd2d7;
}
.cert-bar-title {
    position: relative;
    padding-left: 36px;
    color: #ffffff;
}

.cert-bar-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('https://wrexergie.nl/wp-content/uploads/2026/06/vierkant-blauw.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.cert-bar-desc {
    color: #ffffff;
    font-size: 14px;
}

.cert-bar-nr {
    color: #ffffff;
    font-size: 14px;
    position: relative;
    padding-right: 18px;
}

.cert-bar-nr::after {
    content: '\203A';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #ffffff;
}

.cert-bar-title p,
.cert-bar-desc p,
.cert-bar-nr p {
    margin: 0;
}


.cert-bar {
    position: relative;
	margin-bottom: 16px;
}
.cert-bar-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.cert-bar-title a,
.cert-bar-desc a {
    text-decoration: none !important;
    color: #ffffff !important;
}


/* FOOTER RAND OM MENU */


.site-above-footer-wrap[data-section="section-above-footer-builder"] {
  background: linear-gradient(180deg, #004085 20%, #00ABC2 100%);
}


a.cta-pill:hover {
  transform: translateX(4px);
}


/* Examen hero background */

.hero-wrapper {
    position: relative;
    background-image: url('https://wrexergie.nl/wp-content/uploads/2026/04/bg-blocks-light.png');
    background-repeat: repeat;
    background-size: auto;
	background-color: orange !important;
	overflow: hidden;
}