/*==================================================
    PORTAL.CSS
    DEEL 1
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Segoe UI',Arial,sans-serif;
    background:#ffffff;
    color:#222;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

/*==================================================
    HERO
==================================================*/

.hero{

    max-width:1400px;

    margin:40px auto 60px;

    text-align:center;

    padding:0 20px;

}

.hero-logo{

    width:170px;

    margin:0 auto 25px;

}

.hero h1{

    font-size:4.5rem;

    font-weight:800;

    margin-bottom:15px;

    line-height:1.1;

}

.hero .blauw{

    color:#0A4FB8;

}

.hero .geel{

    color:#FFC800;

}

.lijn{

    width:90px;

    height:5px;

    background:#FFC800;

    border-radius:20px;

    margin:20px auto;

}

.hero p{

    color:#555;

    font-size:1.35rem;

}

/*==================================================
    GRID
==================================================*/

.activiteiten{

    max-width:1400px;

    margin:auto;

    padding:20px;

}

.cards{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}

/*==================================================
    CARD
==================================================*/

.card{

    position:relative;

    height:205px;

    overflow:hidden;

    border-radius:22px;

    transition:.35s;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);

}

.card img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    transition:.5s;

}

.card:hover img{

    transform:scale(1.06);

}

.card:hover{

    transform:translateY(-6px);

}

.contact-card img{

    object-position:center 20%;

}
/*==================================================
    GELE / BLAUWE RAND
==================================================*/

.card.geel{

    border:4px solid #FFC800;

}

.card.blauw{

    border:4px solid #1565C0;

}

/*==================================================
    OVERLAY
==================================================*/

.overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:14px;

    background:

    linear-gradient(

    rgba(0,0,0,.10),

    rgba(0,0,0,.82)

    );

}

/*==================================================
    ICON
==================================================*/

.icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    color:#fff;

}

.icon.geel{

    background:#FFC800;

    color:#222;

}

.icon.blauw{

    background:#1565C0;

}

/*==================================================
    TEKST
==================================================*/

.tekst h2{

    color:#FFC800;

    font-size:1.05rem;

    font-weight:700;

    margin-bottom:6px;

}

.tekst p{

    color:#fff;

    font-size:.88rem;

    line-height:1.4;

}

.arrow{

    margin-top:10px;

    display:inline-block;

    color:#FFC800;

    font-size:20px;

    transition:.3s;

}

.card:hover .arrow{

    transform:translateX(6px);

}

/*==================================================
    HOVER GLOW
==================================================*/

.card.geel:hover{

    box-shadow:
    0 0 25px rgba(255,200,0,.45);

}

.card.blauw:hover{

    box-shadow:
    0 0 25px rgba(21,101,192,.40);

}
/*==================================================
    CONTACTBALK
==================================================*/

.contact-strip{

    max-width:1400px;

    margin:70px auto 40px;

    padding:0 20px;

}

.contact-info{

    background:#0A3D91;

    border-radius:20px;

    padding:28px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    box-shadow:
    0 12px 30px rgba(0,0,0,.15);

}

.contact-left{

    display:flex;

    align-items:center;

    gap:20px;

    color:#fff;

}

.contact-left i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#FFC800;

    color:#0A3D91;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

}

.contact-left h2{

    font-size:1.8rem;

    margin-bottom:5px;

}

.contact-left p{

    opacity:.95;

}

/*==================================================
    KNOPPEN
==================================================*/

.contact-buttons{

    display:flex;

    gap:18px;

}

.btn-geel{

    background:#FFC800;

    color:#222;

    padding:16px 28px;

    border-radius:10px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.3s;

}

.btn-geel:hover{

    background:#FFD94D;

    transform:translateY(-3px);

}

.btn-blauw{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.7);

    padding:16px 28px;

    border-radius:10px;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.3s;

}

.btn-blauw:hover{

    background:#1565C0;

    border-color:#1565C0;

    transform:translateY(-3px);

}

/*==================================================
    FOOTER
==================================================*/

footer{

    background:#0A3D91;

    color:#fff;

    margin-top:50px;

}

.footer-container{

    max-width:1400px;

    margin:auto;

    padding:35px 20px;

    display:grid;

    grid-template-columns:2fr 2fr 1fr;

    gap:40px;

    align-items:center;

}

.footer-logo img{

    width:220px;

}

.footer-contact p{

    margin-bottom:8px;

}

.footer-contact i{

    color:#FFC800;

    width:24px;

}

.footer-social{

    display:flex;

    justify-content:flex-end;

    gap:15px;

}

.footer-social a{

    width:48px;

    height:48px;

    border:2px solid rgba(255,255,255,.5);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    transition:.3s;

}

.footer-social a:hover{

    background:#FFC800;

    color:#0A3D91;

    border-color:#FFC800;

}

.copyright{

    text-align:center;

    padding:18px;

    border-top:1px solid rgba(255,255,255,.15);

    font-size:.9rem;

}

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

@media(max-width:1200px){

.cards{

    grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:900px){

.hero h1{

    font-size:3rem;

}

.cards{

    grid-template-columns:repeat(2,1fr);

}

.contact-info{

    flex-direction:column;

    text-align:center;

}

.contact-left{

    flex-direction:column;

}

.contact-buttons{

    width:100%;

    flex-direction:column;

}

.footer-container{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-social{

    justify-content:center;

}

}

@media(max-width:650px){

.cards{

    grid-template-columns:1fr;

}

.hero h1{

    font-size:2.3rem;

}

.hero-logo{

    width:130px;

}

.card{

    height:220px;

}

.contact-left h2{

    font-size:1.4rem;

}

}