/* ==========================================================
   SchoolConnect v2.0
   forms.css
========================================================== */

/* ==========================================
   PAGINA
========================================== */

.forms-page{

    max-width:1100px;

    margin:auto;

    padding:25px;

}


/* ==========================================================
   AVCONNECT STANDAARD HEADER
========================================================== */

.newsHero{

    display:flex;
    align-items:center;
    gap:22px;

    margin-bottom:28px;

    padding:22px 26px;

    background:#FFFFFF;

    border-radius:20px;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

}

.newsBackButton{

    background:#2B92B5;
    color:#FFFFFF;

    border:none;
    border-radius:10px;

    padding:10px 18px;

    font-family:"Comic Neue",sans-serif;
    font-size:14px;
    font-weight:700;

    cursor:pointer;

    flex-shrink:0;

}

.newsBackButton:hover{

    background:#237A98;

}

.heroIcon{

    width:72px;
    height:72px;

    flex-shrink:0;

}

.heroIcon img{

    width:100%;
    height:100%;

    object-fit:contain;

}

.newsHero h1{

    margin:0;

    color:#2B92B5;

    font-size:2rem;

}

.newsHero p{

    margin:6px 0 0;

    color:#666;

}


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

.forms-grid{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}


/* ==========================================
   KAART
========================================== */

.form-card{

    flex:0 0 calc(50% - 10px);

    background:white;

    border-radius:18px;

    padding:25px;

    border-left:6px solid #2B92B5;

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

    transition:.25s;

}

.form-card:hover{

    transform:translateY(-4px);

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

}


/* ==========================================
   HEADER
========================================== */

.form-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:18px;

}


/* ==========================================
   ICOON
========================================== */

.form-icon{

    width:64px;

    height:64px;

    border-radius:14px;

    background:#eef6fb;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

}


/* ==========================================
   TITEL
========================================== */

.form-header h3{

    margin:0;

    color:#2B92B5;

}


/* ==========================================
   KLAS
========================================== */

.form-class{

    margin-top:6px;

    color:#666;

    font-size:14px;

}


/* ==========================================
   OMSCHRIJVING
========================================== */

.form-description{

    margin:18px 0;

    line-height:1.6;

    color:#444;

}


/* ==========================================
   KNOP
========================================== */

.form-button{

    margin-top:15px;

    margin-bottom:0;

}


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

@media (max-width:900px){

    .form-card{

        flex:0 0 100%;

    }

}