:root{--maroon:#7A001A;
      --gold:#FFD700;
      --blue:#1A3E91;
      --ink:#101629;
      --bg:#f7f8fc;
      --surface:#ffffff}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.7;color:var(--ink);background:var(--bg)}
a{color:var(--blue);text-decoration:none}

a:hover{text-decoration:underline}

/*h1,h2,h3{line-height:1.2;margin:.1em 0 .4em}*/

/* Headings use Bebas Neue */
h1, h2, h3, h4, h5, h6{
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;          /* Bebas Neue is naturally bold-looking */
  line-height: 1.1;
  letter-spacing: .5px;
  margin: .1em 0 .4em;
}

h1{font-size:clamp(2rem,3vw+1rem,3rem)}

h2{font-size:clamp(1.5rem,1.6vw+1rem,2.1rem)
}
.container{width:min(1140px,92vw);margin-inline:auto}

.section{padding:84px 0}

.section.alt{background:var(--surface)}

.grid{display:grid;gap:24px}

.two{grid-template-columns:1.1fr .9fr}

.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:920px){.two,.three{grid-template-columns:1fr}}

.hero{position:relative;background:linear-gradient(180deg,#fff,#f1f3fb);border-bottom:1px solid #e7ebf4}

/*.hero .container{padding:46px 0}*/
.hero .container{padding:20px 0}

.kicker{font-weight:800;color:var(--maroon);letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}

.btn{display:inline-block;background:var(--maroon);color:#fff;padding:11px 16px;border-radius:999px;font-weight:800;border:2px solid transparent}

.btn:hover{filter:brightness(.95);text-decoration:none}.btn.outline{background:transparent;border-color:var(--maroon);color:var(--maroon)}

.card{background:#fff;border:1px solid #eef1f6;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.card img{display:block;width:100%;border-radius:12px}

/* Nav */

.site-header{position:sticky;
            top:0;
            background:var(--maroon);
            color:#fff;z-index:10
}
.nav{display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0}
.nav a{color:#fff;margin-left:14px}
.nav a:hover{color: var(--gold);
            font-weight: bold;
            text-decoration:none
}
.nav a.active{
              color: var(--gold);
              font-weight: bold;
              text-decoration:none
}
/*Mobile NAv*/
/* === Mobile nav (hamburger) === */
.nav { position: relative; }

/* Burger button */
.nav-toggle{
  display:none;
  appearance:none;
  background:transparent;
  border:0;
  width:44px;height:44px;
  margin-left:auto;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:22px;height:2px;
  margin:5px auto;
  background:#fff;
  transition:transform .25s ease, opacity .25s ease;
}

/* Mobile layout */
@media (max-width: 1000px){
  .nav-toggle{ display:block; }

  /* hide the horizontal nav, turn it into a dropdown panel */
  .site-header nav{
    position:absolute;
    top:100%; right:0; left:0;
    background:var(--maroon);
    display:none;
    flex-direction:column;
    padding:10px 14px 16px;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  .site-header nav a{
    display:block;
    color:#fff;
    padding:10px 8px;
    margin:0;               /* override your desktop margins */
    border-radius:8px;
  }
  .site-header nav a:hover{
    background:rgba(255,255,255,.08);
    text-decoration:none;
  }

  /* when menu is open */
  .site-header.menu-open nav{ display:flex; }

  /* animate burger to 'X' */
  .site-header.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .site-header.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
/*End Mobile Nav*/

/* Cards grid */
.grid.cards{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(3,1fr)
}

@media(max-width:920px){
  .grid.cards{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:620px){
  .grid.cards{grid-template-columns:1fr}
}

.card-link{position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.08)
}
.card-link img{display:block;
  width:100%;
  height:260px;
  object-fit:cover;
}

.card-title{position:absolute;
  inset:auto 0 0 0;
  padding:14px 16px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
  color:#fff;
  font-weight:800;
  text-align:center;
  letter-spacing:.3px
}

.badge-soon{position:absolute;
  top:10px;
  right:10px;
  background:var(--gold);
  color:#1b1b1b;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:.8rem
}

/* Breadcrumbs & footer */
.breadcrumbs{font-size:.9rem;color:#5b647a}.breadcrumbs a{color:var(--gold)}
footer{background:#0f1526;color:#d9e0ff;margin-top:40px;padding:16px 0}footer a{color:#fff}
/* Forms */
.form{
  display:grid;
  gap:12px;
}
.form input,.form textarea{padding:12px;
                          border-radius:12px;
                          border:1px solid #dfe3ee;
                          font:inherit}
.form button{justify-self:start}
/* Gallery masonry */
.gallery{columns:3 280px;gap:12px}
.gallery a{display:block;break-inside:avoid;margin-bottom:12px;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.06)}


/* Sport detail banner */

.banner-image{width:100%;
  height:50vh;
  object-fit:cover;
  object-position:center;
  display:block;
  border-bottom:1px solid #e7ebf4
}
/*@media (min-width:1100px){
  .banner-image{height:380px}
}*/

 /*Mobile banner image */
.banner-image-mobile{display:none;
  width:100%;
  height:50vh;
  object-fit:cover;
  object-position:center;
  border-bottom:1px solid #e7ebf4
}
@media (max-width:1100px){
  .banner-image-mobile{display:block;}
  .banner-image{display:none;}
}


.section h2.center{text-align:center}
.gallery.center{max-width:980px;margin-inline:auto}
/* ---- Centered Carousel (single image) ---- */
.carousel{
  position:relative;
  max-width:980px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  background:#000;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
}
/*.carousel figure{margin:0}*/
.carousel figure{
  margin:0;
  width:100%;
  height:100%;      /* NEW */
}
.carousel img{
  display:block; 
  width:100%; 
  height:100%; /*auto prev*/
  object-fit:cover;
}
/* new*/
.carousel img.is-portrait{
  object-fit:contain;
  background:#fff;
}
.carousel .nav{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.carousel button{
  pointer-events:auto;
  background:#ffffffcc; border:0; border-radius:999px;
  width:42px; height:42px; display:grid; place-items:center;
  margin:0 10px; cursor:pointer; font-size:1.2rem; font-weight:700;
}
.carousel button:hover{background:#fff}
.carousel .dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:6px; justify-content:center;
}
.carousel .dot{ width:8px; height:8px; border-radius:999px; background:#ffffff7a }
.carousel .dot.active{ background:#fff }

/*kontack ons*/
/* --- Contact page layout ---*/
.contact-hero{width:100%;height:300px;object-fit:cover;object-position:center;display:block;border-bottom:1px solid #e7ebf4}
@media(min-width:1200px){.contact-hero{height:360px}}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
@media(max-width:920px){.contact-grid{grid-template-columns:1fr}}

.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:920px){.info-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.info-cards{grid-template-columns:1fr}}

.info-card{background:#fff;border:1px solid #eef1f6;border-radius:16px;padding:16px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.info-card .icon{width:36px;height:36px;border-radius:10px;background:#f3f5fb;display:grid;place-items:center;flex:0 0 36px}
.info-card h3{margin:.2rem 0 .2rem;font-size:1rem}
.info-card p{margin:0}

.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.social-btn{display:inline-flex;align-items:center;gap:8px;background:#ffffff;border:1px solid #e7eaf3;padding:8px 12px;border-radius:999px;font-weight:700}
.social-btn:hover{text-decoration:none;filter:brightness(.98)}

.map-card iframe{width:100%;height:340px;border:0;border-radius:12px}
@media(min-width:1200px){.map-card iframe{height:400px}}

/* Form polish */
.form .two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.form .two-col{grid-template-columns:1fr}}
.input-error{border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.form .note{color:#5b647a;font-size:.9rem}
.success-banner{background:#e8f7ee;
                color:#166534; 
                border:1px solid #c6ead2;
                padding:12px 14px;
                border-radius:12px;
                margin-bottom:14px;
                display:none}
.error-banner{background:#fdecec;color:#8a1f1f;border:1px solid #f7c7c7;padding:12px 14px;border-radius:12px;margin-bottom:14px;display:none}

/* Flip layout: card left, map right */
.contact-grid{grid-template-columns:.9fr 1.1fr}

/* Contact card – Hugenote light theme */
.contact-card{
  background:#fff;
  
  border-radius:14px;
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.contact-heading{
  margin:0 0 10px;
  font-weight:800;
  font-size:1.15rem;
  color:var(--maroon);
}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{
  display:flex; gap:12px; align-items:flex-start;
  padding:25px 0; border-bottom:1px solid rgba(217,179,62,.35);
}
.contact-list li:last-child{border-bottom:0}
.contact-icon{
  flex:0 0 44px; width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:10px;
  color:var(--maroon);
  background:linear-gradient(180deg,#fff,#f8f5ea);
}
.contact-icon svg{width:22px;height:22px;display:block}
.contact-content .label{display:block;font-weight:800;color:var(--maroon);line-height:1.2}
.contact-content a{color:var(--blue);font-weight:600}

/* Social chips row */
.contact-socials{display:flex;flex-wrap:wrap;gap:10px;border-bottom:0;padding-top:8px}
.contact-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--gold);
  padding:8px 12px;border-radius:999px;font-weight:700;
  color:var(--maroon);background:#fff;
}
.contact-chip:hover{filter:brightness(.98);text-decoration:none}
/* --- Fix contact page responsiveness --- */
@media (max-width: 768px){
  .contact-grid{
    grid-template-columns: 1fr;   /* stack card above map on tablets/phones */
  }
  .map-card iframe{
    height: 320px;                /* shorter map on small screens */
  }
  .contact-card{ margin-bottom: 16px; }
}

/* Social icon buttons inside contact card */
.contact-socials {
  display:flex;
  justify-content:center;   /* center horizontally */
  gap:50px;                 /* spacing between Instagram and Facebook */
  padding-top:14px;
  border-bottom:0;          /* remove divider */
}

.contact-socials a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:600;
  color:var(--maroon);
  transition:color .25s ease;
}

.contact-socials a i {
  font-size:20px;
}

.contact-socials a:hover {
  color:var(--gold);
  text-decoration: none;
}

.form select {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #dfe3ee;
  font: inherit;
  background: #fff;
  color:#5b647a
}

/* ---- End Contact page layout ------------------------------------------------------------------------------ */

/* Academic page layout ---------------------------------------------------------------------------------------*/
/* Vakkeuse lists*/
.vakke-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 18px;
  padding-left: 20px;   /* keep bullet indent */
  margin: 0;
  list-style: disc;     /* restore bullets */
}

.vakke-grid li {
  word-break: normal;
  overflow-wrap: anywhere; /* wraps long words gracefully */
  margin-bottom: 6px;      /* space between items */
}

/* On small screens, stack items in one column */
@media (max-width: 680px) {
  .vakke-grid {
    grid-template-columns: 1fr;
  }
}
.grid.cards.akademie{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(2,1fr)
}
@media(max-width:920px){
  .grid.cards.akademie{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .grid.cards.akademie{grid-template-columns:1fr}
}
/* Vakkeuse — Option 2 (Accordion) */
.vakke-acc{
  border:1px solid #eef1f6; border-radius:12px; background:#fff;
  margin:10px 0; overflow:hidden;
}
.vakke-acc > summary{
  list-style:none; cursor:pointer; padding:14px 16px; font-weight:800; color:var(--maroon); position:relative;
}
.vakke-acc > summary::-webkit-details-marker{ display:none }
.vakke-acc[open] > summary{ border-bottom:1px solid #eef1f6 }
.vakke-acc ul{
  margin:0; padding:12px 22px 16px 38px; list-style:disc; list-style-position:outside;
}
/* Chevron */
.vakke-acc > summary::after{
  content:"›"; position:absolute; right:14px; top:50%;
  transform:translateY(-50%) rotate(90deg); transition:.2s;
}
.vakke-acc[open] > summary::after{ 
  transform:translateY(-50%) rotate(-90deg)
}

/* Banner Images text Responding */
.banner-hero{
  position: relative;
  min-height: 42vh;          /* responsive height */
  display: block;
  align-items: center;       /* vertically center text */
  /*color:#fff;*/
  overflow:hidden;
}
.banner-hero::before{        /* background image */
  content:"";
  position:absolute; inset:0;
  background-size:cover;
  background-position:center; /* keep faces centered */
  filter:saturate(.98);
  z-index:0;
}
.banner-hero::after{         /* subtle left gradient so text is always readable */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 70%);
  z-index:1;
}
.banner-hero .container{ position:relative; z-index:2; }

.banner-title{
  margin:0;
  font-weight:900;
  letter-spacing:.04em;
  /* fluid type: scales between mobile and desktop */
  font-size: clamp(2rem, 6vw, 5rem);
  text-transform:uppercase;
  line-height:1.05;
  color:#fff;
  text-shadow:
    -2px -2px 0 var(--maroon),
     2px -2px 0 var(--maroon),
    -2px  2px 0 var(--maroon),
     2px  2px 0 var(--maroon);
}

/* Page-specific image */
.akademie-hero::before{
  background-image:url("./../assets/akademie-banner.jpg"); /* your image path */
  /* If the subject is on the left, bias the focal point a bit: */
  background-position: 25% center;
}
.sport-hero::before{
  background-image:url("./../assets/sport-banner.jpg"); /* your image path */
  /* If the subject is on the left, bias the focal point a bit: */
  background-position: 25% center;
}
.kultuur-hero::before{
  background-image:url("./../assets/kultuur-banner.jpg"); /* your image path */
  /* If the subject is on the left, bias the focal point a bit: */
  background-position: 25% center;
}
.sosiaal-hero::before{
  background-image:url("./../assets/sosiaal-banner.jpg"); /* your image path */
  /* If the subject is on the left, bias the focal point a bit: */
  background-position: 25% center;
}
.kontak-hero::before{
  background-image:url("./../assets/kontak-banner.jpg"); /* your image path */
  /* If the subject is on the left, bias the focal point a bit: */
  background-position: 25% center;
}

/* Taller on big screens */
@media (min-width: 1200px){
  .banner-hero{ min-height: 54vh; }
}
/* On very small screens, center the title and soften gradient */
@media (max-width: 580px){
  .banner-hero::after{
    background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.2) 50%, rgba(0,0,0,0));
  }
  .banner-title{ text-align:center; }
}
/* ---- End Academic page layout ------------------------------------------------------------------------------ */


/*Tuiste Page layout--------------------------------------------------------------------------------------------*/
/* Hero background video */
.hero-video {
  position: relative;
  height: 80vh;          /* not full screen */
  min-height: 420px;     /* still looks strong */
  max-height: 720px;     /* prevents giant screens */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.hero-video .hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-video .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* dark overlay for readability */
  z-index: 1;
}

.hero-video .hero-content {
  position: relative;
  z-index: 2;
}

.hero-video h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  margin-bottom: .5em;
  color: var(--gold);
}
.hero-video p {
  font-size: 1.2rem;
  margin-bottom: 1.5em;
  color: #fff;
}

/* Default: Hide mobile video */
.mobile-video { display: none; }

/* Mobile view: Swap them */
@media (max-width: 700px) {
  .desktop-video { display: none; }
  .mobile-video { display: block; }
}

.scroll-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0.85;
}

.scroll-hint span {
  display: block;
  width: 22px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: 14px;
  position: relative;
}

.scroll-hint span::after {
  content: "";
  width: 4px;
  height: 6px;
  background: #fff;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
  animation: scrollDot 1.6s infinite;
}

@keyframes scrollDot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}
/*--- End Hero background video ---*/



/* --- Boodskap van die Hoof --- */
.hoof-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr; /* image : text */
  gap:0;
  align-items:stretch;
}

.hoof-photo{margin:0}
.hoof-photo img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:12px 0 0 12px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.hoof-card{
  position:relative;
  background:#fff;
  border:1px solid #eef1f6;
  border-left:6px solid var(--maroon);           /* vertical maroon accent */
  padding:28px 28px 24px;
  border-radius:0 12px 12px 0;
  box-shadow:0 10px 24px rgba(0,0,0,.04);
}

.hoof-name{
  margin:0 0 .2rem;
  font-weight:800;
  color:var(--maroon);
  text-align:right;                               /* like the reference */
}

.hoof-title{
  margin:.1rem 0 .4rem;
  font-size:clamp(1.6rem,1.2vw + 1.2rem,2.2rem);
  color:#111;
  text-align:right;
}

.hoof-rule{
  display:block;
  width:90px; height:3px;
  background:#111; opacity:.8;
  margin:0 0 18px auto;  /* right-aligned underline */
  border-radius:2px;
}

.hoof-text{color:#2b2f3a; line-height:1.8}
.hoof-text p{margin:.6rem 0}
.hoof-sign{
  font-weight:800; color:#111;
  margin-top:18px; text-align:left;
}

/* Responsive: stack on mobile */
@media (max-width: 920px){
  .hoof-grid{ grid-template-columns:1fr; }
  .hoof-photo img{
    border-radius:12px 12px 0 0;
    height:320px;
  }
  .hoof-card{
    border-left:none;
    border-top:6px solid var(--maroon);
    border-radius:0 0 12px 12px;
  }
  .hoof-name,.hoof-title,.hoof-rule,.hoof-sign{ text-align:left; margin-left:0; }
  .hoof-rule{ margin:0 0 18px 0; }
}

/*End Tuiste ---------------------------------------------------------------------------------------------------*/

/*Little Einsteins Cards ----------------------------------------------------------------------------------------------*/
.cards-E{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(5,1fr);   /* 3 across on large screens */
}
@media (max-width:1024px){
  .cards-E{ grid-template-columns:repeat(3,1fr); }  /* 2 across on tablet */
}
@media (max-width:680px){
  .cards-E{ grid-template-columns:1fr; }            /* 1 across on mobile */
}
/*Little Einsteins Cards ----------------------------------------------------------------------------------------------*/
/*Top 20 Cards ----------------------------------------------------------------------------------------------*/
.cards-T2{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(10,1fr);   /* 3 across on large screens */
}
@media (max-width:1024px){
  .cards-T2{ grid-template-columns:repeat(5,1fr); }  /* 2 across on tablet */
}
@media (max-width:680px){
  .cards-T2{ grid-template-columns:1fr; }            /* 1 across on mobile */
}
/* Personeel cards----------------------------------------------------------------------------------------------*/
.cards-2{
  margin-top:24px;
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);   /* 3 across on large screens */
}
@media (max-width:1024px){
  .cards-2{ grid-template-columns:repeat(2,1fr); }  /* 2 across on tablet */
}
@media (max-width:680px){
  .cards-2{ grid-template-columns:1fr; }            /* 1 across on mobile */
}

.cards-2T{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);   /* 3 across on large screens */
}
@media (max-width:1024px){
  .cards-2T{ grid-template-columns:repeat(2,1fr); }  /* 2 across on tablet */
}
@media (max-width:680px){
  .cards-2T{ grid-template-columns:1fr; }            /* 1 across on mobile */
}
/*Personeel onderwyser cards----------------------------------------------------------------------------------------------*/
.cards-P{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(4,1fr);   /* 4 across on large screens */
}
@media (max-width:1024px){
  .cards-P{ grid-template-columns:repeat(3,1fr); }  /* 3 across on tablet */
}
@media (max-width:680px){
  .cards-P{ grid-template-columns:1fr; }            /* 1 across on mobile */
}
/*Personeel onderwyser cards end----------------------------------------------------------------------------------------------*/
.cards-3{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3                                          ,1fr);   /* 3 across on large screens */
}
@media (max-width:1024px){
  .cards-3{ grid-template-columns:repeat(2,1fr); }  /* 2 across on tablet */
}
@media (max-width:680px){
  .cards-3{ grid-template-columns:1fr; }            /* 1 across on mobile */
}

.teacher-card{
  background:#fff;
  border:1px solid #e7ebf4;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.teacher-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}

/* Portrait image that scales nicely */
.teacher-card img{
  width:100%;
  /*aspect-ratio:3 / 4;       consistent portrait ratio */
  object-fit:cover;        /* crop gracefully if needed */
  display:block;
}
.teacher-card1{
  background:#fff;
  border:1px solid #e7ebf4;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}

.teacher-card1:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}
.teacher-card1 img{
  width:100%;
  aspect-ratio:4/ 4;      /* consistent portrait ratio */
  object-fit:cover;        /* crop gracefully if needed */
  display:block;
}


.teacher-info{ padding:16px; }
.teacher-info h3{ margin:0 0 4px; font-size:1.2rem; font-weight:700; }
.teacher-info .role{ color:var(--maroon); font-weight:600; margin-bottom:8px; }
.teacher-info p{ margin:0; color:#444; line-height:1.4; }
/* End Personeel cards------------------------------------------------------------------------- */