*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:Arial,Helvetica,sans-serif;

background:#f7f9fc;

color:#333;

line-height:1.7;

}

.container{

width:90%;

max-width:1200px;

margin:auto;

}

header{

background:#ffffff;

box-shadow:0 2px 10px rgba(0,0,0,.08);

position:sticky;

top:0;

z-index:100;

}

.navigation{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

}

.logo{

font-size:32px;

font-weight:bold;

text-decoration:none;

color:#2563eb;

}

.logo span{

color:#ef4444;

}

nav ul{

display:flex;

gap:25px;

list-style:none;

}

nav a{

text-decoration:none;

color:#333;

font-weight:bold;

}

.hero{

background:linear-gradient(135deg,#2563eb,#0f172a);

color:white;

padding:100px 0;

text-align:center;

}

.hero h1{

font-size:52px;

margin-bottom:20px;

}

.hero p{

max-width:700px;

margin:auto;

font-size:20px;

margin-bottom:35px;

}

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:140px;

    min-height:50px;

    white-space:nowrap;

    cursor:pointer;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff !important;

    padding:14px 28px;

    border-radius:50px;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:all .3s ease;

    box-shadow:0 5px 15px rgba(37,99,235,.25);

}

.button:hover{

    background:linear-gradient(135deg,#1d4ed8,#1e40af);

    color:#fff !important;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(37,99,235,.35);

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

margin:50px 0;

}

.card{

background:white;

padding:30px;

border-radius:12px;

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.card h3{

margin-bottom:15px;

}

.card a:not(.button){

    color:#2563eb;

    text-decoration:none;

    font-weight:bold;

}

.info-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin:50px 0;

}

footer{

background:#0f172a;

color:white;

margin-top:80px;

padding:60px 0;

}

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;

}

.footer-grid a{

display:block;

color:#d1d5db;

text-decoration:none;

margin:8px 0;

}

@media(max-width:768px){

.navigation{

flex-direction:column;

gap:20px;

}

nav ul{

flex-direction:column;

align-items:center;

}

.hero h1{

font-size:36px;

}

}

.pagina{

    padding:60px 0;

}

.pagina h1{

    font-size:42px;

    margin-bottom:30px;

    color:#1f2937;

}

.content{

    background:#ffffff;

    padding:40px;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    line-height:1.9;

}

.content h2{

    margin:30px 0 15px;

    color:#2563eb;

}

.content p{

    margin-bottom:20px;

}

.content ul{

    margin:20px 0 20px 25px;

}

.content img{

    max-width:100%;

    border-radius:10px;

}

/* ===============================
RESPONSIVE TABELLEN
=============================== */

.table-responsive{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

    margin-top:30px;

}

table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

    border-radius:12px;

    overflow:hidden;

}

table th{

    background:#2563eb;

    color:#ffffff;

    padding:16px;

    text-align:left;

    white-space:nowrap;

}

table td{

    padding:16px;

    border-bottom:1px solid #e5e7eb;

    vertical-align:middle;

}

table tr:last-child td{

    border-bottom:none;

}

table tr:hover{

    background:#f8fafc;

}

/* ===============================
MOBIEL
=============================== */

@media (max-width:768px){

    .navigation{

        flex-direction:column;

        gap:20px;

    }

    nav ul{

        flex-direction:column;

        align-items:center;

    }

    .hero{

        padding:70px 0;

    }

    .hero h1{

        font-size:36px;

    }

    .hero p{

        font-size:18px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .info-grid{

        grid-template-columns:1fr;

    }

    .content{

        padding:25px;

    }

    .pagina h1{

        font-size:32px;

    }

    table,
    thead,
    tbody,
    th,
    td,
    tr{

        display:block;

        width:100%;

    }

    thead{

        display:none;

    }

    table{

        background:transparent;

        border:none;

    }

    tr{

        background:#ffffff;

        margin-bottom:20px;

        padding:20px;

        border-radius:12px;

        box-shadow:0 5px 15px rgba(0,0,0,.08);

    }

    td{

        border:none;

        padding:10px 0;

        text-align:left;

    }

    td::before{

        display:block;

        font-weight:bold;

        color:#2563eb;

        margin-bottom:5px;

    }

    td:nth-child(1)::before{

        content:"Datingsite";

    }

    td:nth-child(2)::before{

        content:"Beoordeling";

    }

    td:nth-child(3)::before{

        content:"Prijs";

    }

    td:nth-child(4)::before{

        content:"Doelgroep";

    }

    td:nth-child(5)::before{

        content:"Meer informatie";

    }

    td:last-child{

        margin-top:15px;

    }

    td:last-child .button{

        display:flex;

        width:100%;

        justify-content:center;

        align-items:center;

        min-width:100%;

        padding:14px 20px;

    }

}