/*  =================================================================
    0.0 :ROOT ~ overwrites or extras (if needed)
    ================================================================== */
    @font-face {
		font-family: 'charlotte_southesouthernswash';
		src: url('../webfonts/charlotte_southern_swash-webfont.woff2') format('woff2'),
			 url('../webfonts/charlotte_southern_swash-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'charlotte_southesouthernswash';
		src: url('../webfonts/charlotte_southern_swash-webfont.woff2') format('woff2'),
			 url('../webfonts/charlotte_southern_swash-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'charlotte_southernsouthern';
		src: url('../webfonts/charlotte_southern-webfont.woff2') format('woff2'),
			 url('../webfonts/charlotte_southern-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'charlotte_southernsouthern';
		src: url('../webfonts/charlotte_southern-webfont.woff2') format('woff2'),
			 url('../webfonts/charlotte_southern-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	:root {
        /*--primary-color: #d63384;
        --primary-light: #fce4ec;
        --secondary-color: #4a4a4a;
        --accent-color: #6f42c1;
        --bg-light: #f8f9fa;*/
       
        /* --- NIEUWE KLEUREN (Gebaseerd op Logo) --- */    
        /* De donkergroene kleur van de achterste poppetjes: voor knoppen en belangrijke tekst */
        --primary-color: #486E60;         
        /* Het geel uit de cirkel: voor zachte achtergronden en accenten */
        --primary-light: #FCE883;         
        /* Het zwart uit de tekst 'YUNO2': voor de broodtekst */
        --secondary-color: #1C1C1C;         
        /* Een warme terracotta tint: voor speelse details en 'call to actions' */
        --accent-color: #E6A57E;         
        /* Warme crème wit: vervangt het kille grijs voor de pagina achtergrond */
        --bg-light: #FFF8E7;

        --white: #ffffff;
        --border-radius: 12px;
        --transition: all 0.3s ease;
        --shadow: 0 5px 15px rgba(0,0,0,0.05);
		
		--clr-grey_13: #131313;
        --clr-grey_3b: #3b3b3b;
        --clr-grey_5d: #5d5d5d;
        --clr-grey_8a: #8a8a8a;
        --clr-grey_c6: #c6c6c6;
        --clr-grey_dd: #dddddd;
        --clr-grey_ef: #efefef;
        --clr-grey_eb: #ebebeb;
        --clr-grey_f6: #f6f6f6;
        
        --clr-green: #439e47;
        --clr-green_b8: #b8bc89;
        --color-grey-300: #e9ebec;
        --color-grey-600: #878a99;
        --color-green-rgba: rgba(10, 179, 156, 0.18);
        --color-green-rgb: #0ab39c;		
        --color-red-rgba: rgba(240,101,72, 0.18);
        --color-red-rgb: #F06548;
    }


/*  =================================================================
	1.0 BASE
	================================================================== */
    body {
        font-family: 'Open Sans', sans-serif;
        color: var(--secondary-color);
        line-height: 1.6;
        background-color: var(--white);
    }
    body.padded {
        padding-top: 80px;
    }
    body.bg-light {
        background-color: var(--bg-light);
    }

/*  1.1 BASE - fixes
    -------------------------------------------------------------- */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    select {
        position: relative;
        appearance: none;        /* standaard */
        -webkit-appearance: none;
        -moz-appearance: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E") center right 5px no-repeat;
        background-size: 16px;
    }
    select::after {
        content: "▾";
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 12px;
        line-height: 1em;
    }

/*  1.2 BASE - Clearfix
    -------------------------------------------------------------- */
    .clear, .clearall, .clearfix {
        clear: both;
    }

/*  1.3 BASE - Panels
    -------------------------------------------------------------- */	
	.panel {
		width: 100%;
		display: block;
		margin: 0 auto;
		background-color: var(--color-grey-300);
		border: 1px solid var(--color-grey-600);
		padding: 14px;
		padding-bottom: 13px;
		font-size: 16px;
		line-height: 23px;
		margin-bottom: 20px;
		border-radius: 6px;
	}

	.panel a {
		text-decoration: underline;
	}
	.panel.alert, 
	.panel.notice, 
	.panel.success {
		text-align: center;
	}

	.panel.alert {
		border-color: var(--color-red-rgb);
		background-color: var(--color-red-rgba);
		color: var(--color-red-rgb);
	}	
	.panel.notice {
		border-color: #ff9966;
		background-color: #ffcc00;
		color: #ff9966;
	}	
	.panel.success {
		border-color: var(--color-green-rgb);
		background-color: var(--color-green-rgba);
		color: var(--color-green-rgb);
	}
	.panel.success p {
		color: var(--color-green-rgb);
	}

/*  1.3 BASE - Text stylings
    -------------------------------------------------------------- */    
    .text-center { 
        text-align: center; 
    }
	.text-left {
		 text-align: left !important;
	}
    
    h1, h2, h3, h4 {
        font-family: 'Nunito', sans-serif;
        font-weight: 500;
        color: #2c3e50;
        margin-bottom: 1rem;
        text-transform: uppercase;
    }
    h2 { 
        color: #2c3e50; 
        margin-bottom: 30px; 
    }

    a { 
        text-decoration: none; 
        color: inherit; 
    }
    ul { 
        list-style: none; 
    }

/*  1.4 BASE - Button stylings
    -------------------------------------------------------------- */
    .btn {
        display: inline-block;
        padding: 12px 30px;
        background-color: var(--primary-color);
        color: var(--white);
        border-radius: 30px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        border: none;
        transition: var(--transition);
        box-shadow: 0 4px 6px rgba(72, 110, 96, 0.2);
    }
    
    .btn-outline {
        background-color: transparent;
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
    }

    .action-btn {
        display: flex; align-items: center; justify-content: center;
        width: 100%; padding: 12px; margin-bottom: 10px;
        border-radius: 30px; font-weight: 600; cursor: pointer; border: none; transition: 0.3s;
        font-size: 1rem; gap: 10px;
    }
    
    .btn-primary { background-color: var(--primary-color); color: var(--white); }
    
    .btn-secondary { background-color: var(--primary-light); color: var(--primary-color); }


/*  =================================================================
    x.0 HEADER & NAV
    ================================================================== */
    header {
        background-color: var(--white);
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        position: sticky;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 1000;
        height: 80px;
        display: flex;
        align-items: center;
        border-radius: 0;
    }
	
    /*header:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 30%;
        background-image: url(../img/background.jpg);
        background-size: 200%;

    }*/
    header.centered { 
        justify-content: center; 
    }

    /*  x.1 HEADER & NAV - Nav
    -------------------------------------------------------------- */
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .logo {
        position: relative;
        font-size: 2.8rem;
        font-weight: 700;
        color: var(--white);
    }
    .logo::after {
        content: '';
        background-color: var(--accent-color);
        position: absolute;
        right: -20px;
        top: 50%;
        width: 66px;
        height: 66px;
        border-radius: 50%;
        margin-top: -33px;
        z-index:-1;
    }
    .logo.img:after {
        display: none;
    }
    .logo img {
        float: left;
        width: auto;
        height: 66px;
        margin: 7px 0;
    }
    .logo span { 
        color: var(--primary-color);
    }
    .nav-links { 
        display: flex; 
        gap: 30px; 
    }
    .nav-links li {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
	}
	.nav-links a { 
        color: var(--white);
        display: flex;
        align-content: center;
        flex-wrap: wrap;
    }
    .nav-links a.btn {
		font-weight: 400;
        margin-top: 0;
		padding: 10px 20px;
		display: flex;
		align-content: center;
		flex-wrap: wrap;
		align-items: center;
    }

    .mobile-menu-btn { 
        display: none; 
        font-size: 1.5rem; 
        cursor: pointer; 
    }


/*  =================================================================
    x.0 HERO
    ================================================================== */
    #hero {
        /*margin-top: 80px;*/
        height: calc(100dvh - 80px);
        min-height: 600px;
        /*background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 240, 245, 0.9)),
            url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');*/
        /* NIEUWE WARME REGEL: */
        background: linear-gradient(rgba(255, 248, 231, 0.85), rgba(252, 232, 131, 0.7)), 
                url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
		position: relative;
    }
	#hero:after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		/* background: linear-gradient(rgba(255, 248, 231, 0.85), rgba(252, 232, 131, 0.7)); */
		background-color: rgba(0, 0, 0, 0.2);
	}
    /*.hero-content {
        padding: 20px;
    }*/
    /*.hero-content h1 {
        font-size: 3rem;
        margin-bottom: 20px;
        text-transform: none;
    }*/
    /*.hero-content p { 
        font-size: 1.2rem;
        margin-bottom: 30px;
        color: #555;
    }*/
	
	.floated .img {
		order: 1;
	}	
	.floated ._full.text {
		order: 1;
	}
	.floated .middle {
		order: 2;
	}
	.floated .text {
		order: 3;
	}
	.floated .swapped .text {
		order: 1;
	}
	.floated .swapped .img {
		order: 3;
	}
	
	#hero video {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#hero > a.signup {
		position: absolute;
		right: 100px;
		top: 50px;
		z-index: 30;
		background-color: #486e60;
		color: #fff;
		font-size: 18px;
		padding: 0 30px;
		border-radius: 30px;
		display: flex;
		align-items: center;
		box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	}
	.nav-links a.btn span,
	#hero > a.signup span {
		font-family: "Shadows Into Light", cursive;
		font-size: 24px;
		color: #E6A57E;
		margin-right: 10px;
	}
	.nav-links a.btn span {
		margin-left: 6px;
		line-height: 1em;
	}
	
	.hero-content {
		max-width: 900px;
		margin: 0 auto;
		position: relative;
		z-index: 20;
		padding: 20px;
	}

	/* De 'Dating & Community' badge */
	.hero-badge {
		display: inline-block;
		background-color: var(--accent-color); /* Het zachte terracotta */
		color: var(--white);
		padding: 8px 20px;
		border-radius: 30px;
		font-size: 0.9rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 20px;
	}
	.hero-content h1 {
		font-size: 3.5rem;
		color: var(--accent-color);
		margin-bottom: 20px;
		line-height: 1.2;
	}
	.hero-content p {
		font-size: 1.2rem;
		color: #fff;
		margin-bottom: 40px;
		line-height: 1.6;
	}

	/* Knoppen naast elkaar */
	.hero-buttons {
		display: flex;
		gap: 15px;
		justify-content: center;
		margin-bottom: 50px;
	}

	.hero-buttons .btn {
		line-height: 1em;
		padding: 15px 35px;
		border-radius: 30px;
		font-weight: 600;
		font-size: 1.1rem;
		text-decoration: none;
		transition: var(--transition);
	}
	.hero-buttons .btn span {
		font-size: 1.2rem;
		font-weight: 400;
		font-family: "Shadows Into Light", cursive;
		color: /*rgb(91, 196, 228);*/ #E6A57E /*#486e60*/;
	}
	.btn-primary {
		background-color: var(--primary-color);
		color: var(--white);
		border: 2px solid var(--primary-color);
	}

	.btn-primary:hover {
		background-color: transparent;
		color: var(--primary-color);
	}

	.btn-secondary {
		background-color: var(--accent-color);
		color: var(--primary-color);
		border: 2px solid var(--accent-color);
	}

	.btn-secondary:hover {
		background-color: var(--primary-light);
	}

	/* De 3 icoontjes met tekst onderaan de hero */
	.hero-features {
		display: flex;
		justify-content: center;
		gap: 40px;
		border-top: 1px solid rgba(72, 110, 96, 0.2); /* Subtiel groen lijntje */
		padding-top: 30px;
	}

	.feature-item {
		display: flex;
		align-items: center;
		gap: 10px;
		font-weight: 600;
		color: #fff;
		font-size: 1.1rem;
	}

	.feature-item i {
		color: var(--accent-color); /* Terracotta icoontjes */
		font-size: 1.3rem;
	}
	

    /*  x.1 HERO - Search
    -------------------------------------------------------------- */
    .search-box {
        background: var(--white);
        padding: 20px;
        border-radius: var(--border-radius);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        display: inline-flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }
    .search-select {
        padding: 10px 20px 10px 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 1rem;
        background-color: #fff;
    }

    /*  x.1 HERO - Subpage header
    -------------------------------------------------------------- */
    .page-header {
        background: linear-gradient(135deg, var(--primary-light), #e3f2fd);
        padding: 60px 0;
        text-align: center;
        border-bottom: 1px solid #eee;
    }
    .page-header h1 {
        margin-bottom: .25rem;
        margin-top: 1rem;
    }
    

/*  =================================================================
    x.0 CONTENT
    ================================================================== */
    .container {
        width:100%; 
        max-width: 1200px; 
        margin: 0 auto; 
        padding: 0 20px; 
    }

    /*  x.1 CONTENT - Sections
    -------------------------------------------------------------- */
    .section-padding { 
        padding: 80px 0; 
    }

    .section-title { 
        text-align: center; 
        margin-bottom: 50px; 
        font-size: 2.2rem; 
    }
    .section-subtitle {
        display: block;
        color: var(--primary-color);
        font-weight: 600;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.9rem;
    }

    /*  x.1 CONTENT - Intro & Missie
    -------------------------------------------------------------- */
    #intro {
        background-color: var(--white);
    }

    .mission-box {
        background-color: var(--primary-light);
        padding: 40px;
        border-radius: var(--border-radius);
        text-align: center;
        /*border-left: 5px solid var(--primary-color);*/
    }

    .mission-text {
        font-size: 1.1rem;
        font-weight: 500;
    }	
	/*.mission-text p:before,
	.mission-text p:after {
		content: '"';
	}
	.mission-text p:before {
		content: '\f0757';
	}
	.mission-text p:after {
		content: '\f027e';
	}*/

    /*  x.1 CONTENT - Video
    -------------------------------------------------------------- */
    .video-wrapper {
        position: relative;
		width: 100%;
		max-width: 640px;
    }

    video {
        width: 100%;
        display: block;
    }

    .play-btn {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,0.7);
        color: white;
        font-size: 32px;
        cursor: pointer;
        transition: opacity 0.4s ease;
    }

    .play-btn.fade-out {
        opacity: 0;
        pointer-events: none;
    }

    /*  x.1 CONTENT - Features
    -------------------------------------------------------------- */
    #features {
        background-color: var(--bg-light);
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }

    .feature-card {
        background: var(--white);
        padding: 30px;
        border-radius: var(--border-radius);
        text-align: center;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transition: var(--transition);
    }

    .feature-icon {
        width: 70px;
        height: 70px;
        background-color: var(--primary-light);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 1.8rem;
        color: var(--primary-color);
    }
	
	.label-text {
		margin-top: 50px; 
		background: white; 
		padding: 20px; 
		border-radius: 8px;
	}

    /*  x.1 CONTENT - USP
    -------------------------------------------------------------- */
    #goals {
        background-color: var(--white);
    }

    .goals-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .goals-text {
        flex: 1;
        min-width: 300px;
        padding-right: 40px;
    }
	
	.goals-text p {
        margin-bottom: 20px;
    }

    .goals-image {
        flex: 1;
        min-width: 300px;
    }
    .goals-image img {
        width: 100%;
        border-radius: var(--border-radius);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

	.goals-text ul li,
    .goal-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
	
	.goals-text ul li:before {
		font-family: "Material Design Icons";
		content: '\f05e0';
        color: var(--primary-color);
        margin-right: 15px;
        font-size: 1.4rem;
	}
	
    .goal-check {
        color: var(--primary-color);
        margin-right: 15px;
        font-size: 1.2rem;
    }

    /*  x.1 CONTENT - Reviews
    -------------------------------------------------------------- */
    #reviews {
        background-color: var(--bg-light); /* Zeer licht roze */
    }

    .review-card {
        background: var(--white);
        padding: 30px;
        border-radius: var(--border-radius);
        margin-bottom: 20px;
        position: relative;
    }
    .review-card::before {
        content: '\201C';
        font-size: 4rem;
        color: var(--primary-light);
        position: absolute;
        top: -10px;
        left: 20px;
        font-family: serif;
    }

    .review-author {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .author-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #ddd;
        margin-right: 15px;
        overflow: hidden;
    }
    .author-avatar img { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
    }

    /*  x.1 CONTENT - Blog
    -------------------------------------------------------------- */
    #blog {
        background-color: var(--white);
    }

    .blog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }

    .blog-card {
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transition: var(--transition);
    }

    .blog-img {
        height: 200px;
        background-color: #eee;
        background-size: cover;
        background-position: center;
    }

    .blog-content {
        padding: 20px;
    }

    .blog-date {
        font-size: 0.8rem;
        color: #888;
        margin-bottom: 5px;
    }

    /*  x.1 CONTENT - FAQ
    -------------------------------------------------------------- */
    #faq {
        background-color: var(--bg-light);
    }

    .faq-item {
        background: var(--white);
        margin-bottom: 10px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        border: 1px solid transparent;
        transition: 0.3s;
    }

    .faq-question {
        padding: 20px;
        cursor: pointer;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #2c3e50;
    }

    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        padding: 0 20px;
        background-color: #fff;
        color: #555;
        line-height: 1.6;
    }

    .faq-toggle { 
        transition: transform 0.3s ease; 
        color: #ccc;
    }
    
    .faq-item.active .faq-answer {
        padding-bottom: 20px;
    }
    .faq-item.active .faq-question { 
        color: var(--primary-color); 
    }
    .faq-item.active .faq-toggle { 
        transform: rotate(180deg); 
        color: var(--primary-color);
    }

    .faq-category { 
        margin-bottom: 40px; 
    }
    .category-title { 
        font-family: 'Poppins', sans-serif; 
        font-size: 1.4rem; 
        color: var(--primary-color); 
        margin-bottom: 20px; 
        border-bottom: 2px solid #eee; 
        padding-bottom: 10px; 
    }

    .help-box {
        background-color: var(--primary-light);
        padding: 30px;
        border-radius: var(--border-radius);
        text-align: center;
        margin: 40px 0 60px;
    }

    /*  x.1 CONTENT - Callback
    -------------------------------------------------------------- */
    #callback {
        background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        color: var(--white);
    }

    .callback-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 40px;
    }

    .callback-text { 
        flex: 1; 
        min-width: 300px; 
    }
    .callback-text h2 { 
        color: var(--white); 
    }

    .callback-form {
        flex: 1;
        min-width: 300px;
        background: var(--white);
        padding: 30px;
        border-radius: var(--border-radius);
        color: var(--secondary-color);
    }

    /*  x.1 CONTENT - (Contact)form
    -------------------------------------------------------------- */
    .form-group { 
        margin-bottom: 15px; 
    }
    .form-group label { 
        display: block; 
        margin-bottom: 5px; 
        font-weight: 600; 
        font-size: 0.9rem; 
        text-align: left;
    }
    
    .form-control {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-family: inherit;
    }

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 50px;
        padding: 60px 0;
    }

    .contact-info-card {
        background: var(--white);
        padding: 30px;
        border-radius: var(--border-radius);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 25px;
    }

    .info-icon {
        width: 40px;
        height: 40px;
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        flex-shrink: 0;
    }

    .contact-form-card {
        background: var(--white);
        padding: 40px;
        border-radius: var(--border-radius);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    /*  x.1 CONTENT - Content wrapper / WYSIWYG
    -------------------------------------------------------------- */
    .content-wrapper {
        margin: 60px auto;
        padding: 0 20px;
    }
    .content-wrapper._w800 {
        max-width: 800px; /* Smalle kolom voor leesbaarheid */
    }

    .content-wrapper p { 
        margin-bottom: 20px; 
        font-size: 1.05rem; 
    }        
    .content-wrapper ul { 
        margin-bottom: 20px; 
        padding-left: 20px; 
    }
    .content-wrapper ul li { 
        margin-bottom: 10px; 
        list-style-type: disc; 
    }

    .highlight-box {
        background-color: var(--primary-light);
        padding: 25px;
        border-radius: var(--border-radius);
        margin: 30px 0;
        /*border-left: 5px solid var(--primary-color);*/
    }
	.highlight-box p {
        margin: 0;
		font-size: 1rem;
    }
	
	.image figure,
	.image img {
		max-width: 100%;
	}
	
	.image figure {
		border-radius: var(--border-radius);
		overflow: hidden;
		font-size: 0;
		line-height: 0;
	}
	
	.image img {
		margin: 0;
	}

    /*  x.1 CONTENT - Login
    -------------------------------------------------------------- */
    .login-wrapper {
		position: relative;
        min-height: calc(100dvh - 80px);
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 240, 245, 0.9)); 
		background-image: url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
        background-size: cover;
        background-position: center;
        padding: 20px;
        padding-top: 80px; /* Ruimte voor header */
    }
	.login-wrapper:after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
        background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 240, 245, 0.9));
    }

    .login-card {
		position: relative;
		z-index: 2;
        background: var(--white);
        width: 100%;
        max-width: 450px;
        padding: 40px;
        border-radius: var(--border-radius);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        text-align: center;
    }

    .links { 
        margin-top: 20px; 
        font-size: 0.9rem; 
    }
    .links a { 
        color: var(--primary-color); 
        text-decoration: none; 
        font-weight: 600; 
    }
    .links a:hover { 
        text-decoration: underline; 
    }

    .divider { 
        margin: 30px 0; 
        border-top: 1px solid #eee; 
        position: relative; 
    }
    .divider span { 
        position: absolute; 
        top: -12px; 
        left: 50%; 
        transform: translateX(-50%); 
        background: #fff; 
        padding: 0 10px; 
        color: #999; 
        font-size: 0.8rem; 
    }


    /*  =================================================================
    FOOTER
    ================================================================== */
    footer {
        background-color: #2c3e50;
        color: #ecf0f1;
        padding: 60px 0 20px;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 40px;
        margin-bottom: 40px;
    }

    .footer-col h4 { 
        color: var(--white); 
        margin-bottom: 20px; 
    }
    .footer-col ul li { 
        margin-bottom: 10px; 
    }
    .footer-col ul li a { 
        color: #bdc3c7; transition: 0.3s; 
    }

    .footer-bottom {
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 20px;
        text-align: center;
        font-size: 0.9rem;
        color: #95a5a6;
    }


    /*  =================================================================
    MEDIA QUERIES
    ================================================================== */     
    @media (max-width: 960px) {
        .profile-grid { 
            grid-template-columns: 1fr; 
        }
        .profile-card { 
            position: static; 
            max-width: 400px; 
            margin: 0 auto; 
        }
        .profile-img-container { 
            height: 300px; 
        }

    }

    @media (max-width: 768px) {

		#hero > a.signup {
			right: 20px;
			top: 25px;
			font-size: 16px;
		}
		#hero > a.signup span {
			font-size: 24px;
		}
		
		.hero-content {
			position: absolute;
			left: 0;
			bottom: 20px;
		}
		
		.hero-content h1 { 
			font-size: 1.4rem; 
		}
		.hero-content p {
			font-size: 1em;
		}
		/*.hero-buttons { 
			flex-direction: column; 
		}*/
		.hero-buttons { 
			justify-content: space-between;
			margin-bottom: 25px;
		}
		.hero-buttons .btn {
			padding: 15px 10px;
			font-size: 0.9rem;
			display: flex;
			align-items: center;
		}
		.hero-buttons .btn span {
			margin: 0 4px;
		}
		.hero-buttons .btn i {
			margin: 0 4px 0 0;
		}

		.hero-features { 
			padding-top: 15px;
			flex-direction: column; 
			gap: 10px; 
			align-items: center; 
		}
		.feature-item {
			font-size: 0.9rem;
		}
        
        .nav-links { 
            display: none; 
			position: absolute;
			left: -20px;
			top: 80px;
			background-color: rgba(255, 255, 255, 0.9);
			width: calc(100% + 40px);
			height: calc(100dvh - 80px);
			padding: 40px 20px;
        }
		.nav-links a:not(.btn) {
			color: var(--primary-color);
			display: block;
			padding: 5px 0;
		}
		.nav-links a.btn {
			margin-top: 20px;
		}
		nav.showed .nav-links {
			display: block;
		}
        
        .mobile-menu-btn { 
            display: block; 
        }

        .goals-text { 
            padding-right: 0; 
            margin-bottom: 30px; 
        }
        
        .contact-grid { 
            grid-template-columns: 1fr; 
        }
    }


/*  =================================================================
    TOUCH DEVICES
    ================================================================== */
    @media (pointer:coarse) { }


/*  =================================================================
    HOVER STATES
    ================================================================== */
    @media (any-hover: hover) {

        .btn:hover { 
            background-color: var(--primary-light); 
            color: var(--primary-color); 
            transform: translateY(-2px); 
        }
        .btn-outline:hover,
        .nav-links a.btn-outline:hover { 
            background-color: var(--primary-color); 
            color: var(--white); 
        }
        .nav-links a.btn-outline:hover { 
            transform: translateY(0); 
        }
        
        .nav-links a:hover { 
            color: var(--primary-color); 
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .blog-card:hover { 
            transform: translateY(-5px); 
        }
    
        .faq-item:hover { 
            border-color: var(--primary-light); 
        }
        .faq-question:hover { 
            background-color: #fcfcfc; 
        }

        .btn-primary:hover { 
            background-color: #b02a6b; 
        }
        .btn-secondary:hover { 
            background-color: #eecddc; 
        }
        .gallery-item:hover img { 
            transform: scale(1.05); 
        }
        
        .footer-col ul li a:hover { 
            color: var(--primary-color); 
        }

    }