.connect-header{

    text-align:center;

    font-size:2.6rem;

    margin:15px 0 25px;

    color:#ffffff;

    text-shadow:
        0 0 15px rgba(
            0,
            223,
            255,
            .5
        );

}

.team-intro{

    max-width:1000px;

    margin:0 auto 30px;

    padding:30px;

    text-align:center;

    line-height:1.8;

    color:#eef7ff;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(0,223,255,.18),
            rgba(255,255,255,.10)
        );

    backdrop-filter:blur(14px);

    border:1px solid rgba(
        255,
        255,
        255,
        .18
    );

    box-shadow:
        0 15px 40px rgba(
            0,
            0,
            0,
            .20
        ),
        0 0 25px rgba(
            0,
            223,
            255,
            .15
        );

}

.pastel-card{

    max-width:560px;

    margin:35px auto;

    padding:28px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(0,223,255,.22),
            rgba(255,255,255,.10)
        );

    backdrop-filter:blur(15px);

    border:1px solid rgba(
        255,
        255,
        255,
        .18
    );

    box-shadow:
        0 15px 40px rgba(
            0,
            0,
            0,
            .20
        ),
        0 0 30px rgba(
            0,
            223,
            255,
            .16
        );

    transition:.3s ease;

}

.pastel-card:hover{

    transform:translateY(-4px);

}

.vraag-title{

    text-align:center;

    color:#ffffff;

    font-size:1.5rem;

    margin-bottom:10px;

}

.vraag-info{

    text-align:center;

    margin-bottom:20px;

    color:#dff8ff;

}

.quick-form{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.quick-form input,
.quick-form textarea{

    width:100%;

    box-sizing:border-box;

    border:none;

    border-radius:14px;

    padding:14px;

    font-size:16px;

    color:#fff;

    background:
        rgba(
            20,
            35,
            55,
            .85
        );

    transition:.3s ease;

}

.quick-form input:focus,
.quick-form textarea:focus{

    outline:none;

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

}

.quick-form textarea{

    min-height:90px;

    resize:vertical;

}

.vraag-btn{

    border:none;

    cursor:pointer;

    padding:14px;

    border-radius:14px;

    font-weight:bold;

    font-size:16px;

    background:
        linear-gradient(
            90deg,
            #00dfff,
            #78f5ff
        );

    color:#0b2430;

    transition:.3s ease;

}

.vraag-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 20px rgba(
            0,
            223,
            255,
            .4
        );

}

/* CONTACT CARDS */

.contact-grid{

    max-width:1200px;

    margin:40px auto;

    display:grid;

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

    gap:20px;

}

.contact-card{

    min-height:170px;

    padding:25px;

    border-radius:22px;

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            rgba(0,223,255,.16),
            rgba(255,255,255,.08)
        );

    backdrop-filter:blur(12px);

    border:1px solid rgba(
        255,
        255,
        255,
        .16
    );

    box-shadow:
        0 15px 35px rgba(
            0,
            0,
            0,
            .18
        ),
        0 0 20px rgba(
            0,
            223,
            255,
            .10
        );

    transition:.3s ease;

}

.contact-card:hover{

    transform:translateY(-5px);

}

.contact-card h3{

    color:#00e8ff;

    margin-bottom:15px;

}

.contact-card a{

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    line-height:1.6;

    overflow-wrap:break-word;

}

.contact-card a:hover{

    color:#b0f7ff;

}

/* TOAST */

.success-toast{

    position:fixed;

    top:30px;

    right:30px;

    padding:18px 28px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #00dfff,
            #8fffff
        );

    color:#032330;

    font-weight:bold;

    z-index:9999;

    opacity:0;

    pointer-events:none;

    transform:
        rotateY(90deg)
        translateY(-20px);

    box-shadow:
        0 15px 40px rgba(
            0,
            223,
            255,
            .4
        );

    transition:.6s ease;

}

.success-toast.show{

    opacity:1;

    transform:
        rotateY(0deg)
        translateY(0);

}

/* TABLET */

@media (max-width:992px){

    .team-intro{

        margin:20px;

    }

    .pastel-card{

        margin:25px;

    }

    .contact-grid{

        margin:25px;

    }

}

/* MOBIEL */

@media (max-width:768px){

    .connect-header{

        font-size:1.9rem;

        padding:0 15px;

    }

    .team-intro{

        padding:20px;

        margin:15px;

        font-size:15px;

    }

    .pastel-card{

        margin:15px;

        padding:20px;

    }

    .vraag-title{

        font-size:1.2rem;

    }

    .vraag-btn{

        width:100%;

    }

    .contact-grid{

        margin:15px;

        grid-template-columns:1fr;

    }

    .contact-card{

        min-height:auto;

        padding:20px;

    }

    .success-toast{

        left:15px;

        right:15px;

        top:15px;

        text-align:center;

    }

}

/* KLEINE TELEFOONS */

@media (max-width:480px){

    .connect-header{

        font-size:1.6rem;

    }

    .team-intro{

        font-size:14px;

    }

}