/* =========================================================
   0) DESIGN TOKENS / BASE
   ========================================================= */

:root{
  --primary-50:#eff6ff; --primary-100:#dbeafe;
  --primary-700:#1d4ed8; --primary-800:#1e40af;
  --primary-900:#0b2a6f; --primary-950:#071b47;
  --accent:#2ec4b6;            /* hero CTA accent */
  --surface:#f6f8fb;           /* page background */
  --text:#0b1220;              /* body text */
  --muted:#6b7280;             /* secondary text */

   --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* About / play button */
  --about-bg:#F4F4F4;
  --about-title:#003E5A;
  --play-size:110px;           /* play button diameter */
  --ring-w:8px;                /* play ring thickness */
  --ring-alpha:.78;            /* play ring opacity */

  --nav-h:72px;                /* header height (if needed) */
}
@font-face {
  font-family: "BPG Glaho";
  src: url("/static/fonts/bpg_glaho.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html,body{height:100%; overflow-x: hidden;}
body{
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--surface);
}

html[lang^="ka"]{
  --font-ui: "BPG Glaho", "Noto Sans Georgian",
             system-ui, -apple-system, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =========================================================
   1) UTILITIES / HELPERS
   ========================================================= */
.bg-primary-900{background:var(--primary-900)!important}
.bg-primary-950{background:var(--primary-950)!important}
.border-primary-700{border-color:var(--primary-700)!important}
.text-white-75{color:rgba(255,255,255,.85)}
.fw-800{font-weight:800}

/* Section headline with optional left bar (off by default) */
.section-title{font-weight:800; position:relative; padding-left:.75rem}
.section-title::before{
  content:""; position:absolute; left:0; top:.4em;
  width:.35rem; height:1.2em; background:var(--primary-900); border-radius:.25rem;
}

/* =========================================================
   2) BUTTONS
   ========================================================= */
.btn-accent{background:var(--accent); color:#fff; border:0}
.btn-accent:hover{filter:brightness(.95); color:#fff}

.btn-unik{
  background:#007CB2; color:#fff; border:0;
  padding:.78rem 1.45rem; font-weight:800; border-radius:10px;
}
.btn-unik:hover{filter:brightness(.96); color:#fff}


.btn-unik2 {
  background: #0b2a6f;
  color: #fff;
  font-weight: 600;
  border-radius: 999px; /* pill shape */
  padding: 0.35rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.2;
  border: none;
  transition: background .2s ease;
}
.btn-unik2:hover {
  background: #09306a;
  color: #fff;
}

/* =========================================================
   3) NAVBAR
   ========================================================= */
.navbar-dark .navbar-nav .nav-link{color:#e9efff}
.navbar-dark .nav-link:hover{color:#fff}


/* =========================================================
   4) HERO (straight corners, overlay, CTA)
   ========================================================= */
.hero .hero-slide{
  min-height:64vh;
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;           /* square edges */
}
.hero .hero-slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35) 45%,rgba(0,0,0,.10));
}
.hero .hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.40) 42%, rgba(0,0,0,.12) 100%),
    radial-gradient(1200px 520px at 24% 42%, rgba(0,0,0,.40), rgba(0,0,0,0) 62%);
}
.hero .hero-copy{position:relative; z-index:2; max-width:780px; padding:12vh 0 9vh}
@media (max-width: 992px){ .hero .hero-copy{ padding:7vh 0 6vh; max-width:92vw } }

.hero-title{
  color:#fff; font-weight:900; letter-spacing:-.015em; line-height:1.08;
  font-size:clamp(2.1rem, 4.9vw, 3.8rem);
  text-shadow:0 8px 30px rgba(0,0,0,.35); margin-bottom:.75rem;
}
.hero-subtitle{
  color:rgba(255,255,255,.92); font-weight:600;
  font-size:clamp(1rem, 1.3vw + .1rem, 1.25rem); margin-bottom:1.25rem;
}
.btn-hero{
  background:var(--accent); color:#fff; border:0;
  padding:.9rem 1.55rem; font-weight:800; border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.btn-hero:hover{filter:brightness(.96); color:#fff}
.carousel-control-prev,.carousel-control-next{width:5rem}
.carousel-control-prev-icon,.carousel-control-next-icon{filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}

/* =========================================================
   5) ABOUT (Figma-accurate)
   ========================================================= */
.about-section{background:var(--about-bg); padding:48px 0}
@media (min-width:992px){ .about-section{padding:64px 0} }

/* Square media with dark overlay */
.about-media{position:relative; aspect-ratio:1/1; width:80%}
.about-media>img{width:100%; height:100%; object-fit:cover; display:block}
.about-media::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.42); pointer-events:none;
}

/* Figma play button (outlined circle + hover) */
.play-button{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:var(--play-size); height:var(--play-size); border-radius:50%;
  background:transparent;
  border:var(--ring-w) solid rgba(255,255,255,var(--ring-alpha));
  display:flex; align-items:center; justify-content:center;
  padding:0; cursor:pointer; z-index:3;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.play-button:hover{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 22px rgba(255,255,255,.5);
  border-color:rgba(255,255,255,1);
}
.play-icon{width:calc(var(--play-size)*.40); height:auto; display:block}

/* About text */
.about-title{
  margin:0 0 12px 0; font-weight:900; letter-spacing:-.01em; line-height:1.15;
  font-size:clamp(28px, 2.2vw + 8px, 43px); /* you had 43px start; kept high cap */
  color:var(--about-title); padding-left:0;  /* no left bar */
}
.about-title::before{content:none!important}
.about-text{
  color:#676767; font-weight:500; font-size:clamp(15.5px, .7vw + 11px, 17px);
  line-height:1.85; margin-bottom:18px; max-width:68ch;
}

/* =========================================================
   6) COURSES (header + card grid)
   ========================================================= */
/* --- COURSES: Figma exact (image tile + text) --- */

/* wipe old card rules if they exist */
.course-card, .course-card .card-body, .course-card .card-footer { all: unset; }
.course-card { display: contents; } /* ensure no leftover layout */

.courses-header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

/* Edge blocks that touch the page edges exactly */
.courses-header::before,
.courses-header::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;   /* was 28px → bigger */
  height: 60px;  /* was 42px → taller */
  background: #003B65;
  pointer-events: none;
  z-index: 0;
}

/* Left edge: move from container to viewport edge */
.courses-header::before{
  left: calc(50% - 50vw);   /* pushes to exact left edge */
}

/* Right edge */
.courses-header::after{
  right: calc(50% - 50vw);  /* pushes to exact right edge */
}

/* Keep title/button above blocks + spaced from them */
.courses-title{ 
  position: relative; z-index:1;
  margin:0 0 0 32px;       /* space from left block */
  font-size:1.4rem; font-weight:600; color:#555;
}
.courses-link{
  position: relative; z-index:1;
  margin-right:32px;       /* space from right block */
  display:flex; align-items:center;
  color:#017DB9; text-decoration:none; font-weight:600;
}
.courses-link .arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:#017DB9; color:#fff;
  font-size:.9rem; margin-left:8px;
}


.btn-wrap {
  background: #0b2a6f;
  padding: 4px 10px;
  border-radius: 6px;
}
.btn-wrap .btn-unik {
  background: #fff;
  color: #0b2a6f;
  border-radius: 0; /* square inside */
}

.tile-img {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(17,24,39,.12);
  margin-bottom: 18px;
  line-height: 0;
}

.tile-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* overlay */
.tile-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* adjust alpha to match Figma */
}


/* TITLE + BODY under image */
.tile-title{
  margin:0 0 10px 0;
  font-weight:800;
  font-size:clamp(1.15rem, .7vw + .95rem, 1.5rem);  /* bold like Figma */
  color:#555555;
  margin-left: 12px;
}
.tile-desc{
  margin:0;
  color:#8B8B8B;
  font-size:0.8rem;
  line-height:1.65;
  max-width:64ch;
  margin-left: 12px;
}


.course-tile a {
  text-decoration: none;   /* removes underline */
  color: inherit;          /* inherit text color instead of blue */
}

.course-tile a:hover {
  color: inherit;          /* no color change on hover */
}

/* =========================================================
   7) GALLERY (if used)
   ========================================================= */
   .gallery-section {
  background: #F4F4F4; /* pick any color you like */
  padding: 64px 0;     /* space top/bottom so it breathes */
}
/* Header with edge blocks */
.gallery-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.gallery-header::before,
.gallery-header::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;   /* adjust to Figma */
  height: 60px;  /* adjust to Figma */
  background: #003B65;
  pointer-events: none;
  z-index: 0;
}

.gallery-header::before {
  left: calc(50% - 50vw);   /* flush to left edge */
}
.gallery-header::after {
  right: calc(50% - 50vw);  /* flush to right edge */
}



.gallery-title {
  position: relative;
  z-index: 1;
  margin-left: 32px;
  font-size: 1.6rem;
  font-weight: 600;
  color: #6D6D6D;
}

.gallery-link {
  position: relative;
  z-index: 1;
  margin-right: 32px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #0A6DFF;
  text-decoration: none;
}

.gallery-link .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0A6DFF;
  color: #fff;
  font-size: 0.9rem;
  margin-left: 8px;
}

/* Tiles */
.gallery-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.1);
}

.gallery-tile img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}

/* Dark overlay */
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* Caption text */
.gallery-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  z-index: 1;
  text-align: center; /* good if text goes multiline */
}



/* =========================================================
   8) NewsLetter
   ========================================================= */
  /* ===== Subscribe CTA – Figma match (image button over input) ===== */
:root{
  --cta-h: 64px;         /* height of input & button */
  --overlap: 34px;       /* how much button overlaps input */
}

.cta-subscribe{
  background: linear-gradient(90deg,#0F7FB0 0%, #073B59 100%);
  color:#fff;
  padding: 42px 0;
}

.cta-title{
  margin:0 0 6px 0;
  font-weight:800;
  letter-spacing:-.01em;
  font-size: clamp(1.25rem, 1.1vw + 1rem, 1.8rem);
}

.cta-sub{
  margin:0;
  color: rgba(255,255,255,.85);
  font-weight:500;
}

/* --- Form with fused input + button --- */
.cta-form{
  display:flex;
  align-items:center;
  max-width:980px;
  margin-left:auto;   /* aligns right like Figma */
  gap:0;
}

.cta-form input{
  flex:1 1 auto;
  height:var(--cta-h);
  border:0; outline:0;
  background:#fff;
  color:#111827;
  padding:0 18px;
  font-size:1.05rem;

  /* square right edge so button can overlap */
  border-radius:32px 0 0 32px;
  box-shadow:none;
}

.cta-form input::placeholder{ color:#9AA3AF; }

.cta-form .img-btn{
  height:var(--cta-h);
  width:var(--cta-h);
  border:0; padding:0;
  background: center/110% no-repeat;
  cursor:pointer;

  /* overlap input edge so they fuse visually */
  margin-left: calc(-1 * var(--overlap));
  border-radius:0 32px 32px 0; /* optional, if PNG doesn’t have edge */
}

.cta-form .img-btn:hover{
  transform: translateY(-1px);
}

/* mobile */
@media (max-width: 991.98px){
  .cta-form{ margin-left:0; }
}


   
.cta-news{background:linear-gradient(90deg,var(--primary-900),var(--primary-800))}



/* ########################################################
    News
    ######################################################## */


    /* ===== News section — Figma match ===== */
:root{
  --news-edge: #083B58;   /* dark blocks color on edges */
  --news-r: 36px;         /* corner radius for images */
}

  .news-tile {
  width: 90%;
  margin: 0 auto; /* centers it in the column */
}
/* Section wrapper */
.news-sec{ position:relative; }

/* Header with edge blocks flush to viewport edges */
.news-header{ position:relative; }
.news-header::before,
.news-header::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  background:var(--news-edge);
  pointer-events:none;
  z-index:0;
}
/* push pseudo blocks to the true page edges */
.news-header::before{ left:calc(50% - 50vw); }
.news-header::after{ right:calc(50% - 50vw); }

.news-title{
  position:relative; z-index:1;
  margin-left:28px;
  font-weight:800;
  font-size:clamp(1.25rem, .6vw + 1rem, 1.7rem);
  color:#2A2A2A;
}

.news-all{
  position:relative; z-index:1;
  margin-right:28px;
  display:flex; align-items:center; gap:.5rem;
  color:#017DB9; text-decoration:none; font-weight:700;
}
.news-all .arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:#017DB9; color:#fff; line-height:1; font-size:16px;
}



/* Image: square, only TR & BL rounded (TL & BR sharp) */
.news-thumb{
  display:block;
  overflow:hidden;
  border-radius: 0 var(--news-r) 0 var(--news-r); /* TL TR BR BL */
  line-height:0;
}
.news-thumb img{
  width:100%;
  aspect-ratio:1/1;         /* square */
  object-fit:cover;
  display:block;
  box-shadow:none;
}

/* Text */
.news-name{
  margin:14px 0 8px;
  font-weight:800;
  font-size:clamp(1rem, .45vw + .9rem, 1.25rem);
  line-height:1.25;
  color:#5A5A5A;
}
.news-excerpt{
  margin:0 0 16px;
  color:#7C7C7C;
  font-size:clamp(.92rem, .3vw + .82rem, 1rem);
  line-height:1.7;
  max-width:64ch;
}

/* Wider pill button */
.news-btn{
  display:inline-block;
  background:#0B6FB2;
  color:#fff; text-decoration:none;
  padding:.78rem 2.1rem;      /* wider */
  border-radius:999px;
  font-weight:800;
}
.news-btn:hover{ filter:brightness(1.06); color:#fff; }

/* Optional: if the edge blocks ever create a horizontal scrollbar on some browsers
body { overflow-x:hidden; }
*/




/* ########################################################
    Stats
    ####################################################### */


    /* ===========================
   STATS (Figma-accurate)
   =========================== */

/* colors: adjust if you use different tokens */
:root{
  --stats-edge:#083B58;       /* dark blocks on the edges */
  --stats-num:#0B4271;        /* big number color */
  --stats-cap:#0B4271;        /* caption color */
  --stats-title:#6B6B6B;      /* section title color */
}

/* section wrapper */
.stats-sec{
  position: relative;
  padding: 56px 0 64px;                 /* generous vertical rhythm */
  background: #fff;                     /* same as page background */
}

/* header row (title + optional button) */
.stats-header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  z-index: 1;                           /* above pseudo edge blocks */
}

/* left/right dark edge blocks – flush to viewport edges */
.stats-header::before,
.stats-header::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  background:var(--stats-edge);
  pointer-events:none;
  z-index:0;
}
.stats-header::before{ left:calc(50% - 50vw); }   /* true left edge */
.stats-header::after{ right:calc(50% - 50vw); }   /* true right edge */

/* title */
.stats-title{
  position: relative;                    /* above the edge block */
  z-index:1;
  margin:0 0 0 28px;                     /* breathing room from left block */
  font-weight:800;
  color:var(--stats-title);
  letter-spacing:.01em;
  font-size: clamp(0.92rem, 0.56vw + 0.8rem, 1.36rem);
}

/* the 3-count row */
.stats-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  column-gap: clamp(56px, 12vw, 220px); /* big responsive gaps */
  row-gap: 28px;                         /* for wrap on smaller screens */
}

/* each stat tile */
.stat-item{
  text-align:center;
  flex: 1 1 260px;                       /* grow but never too small */
  max-width: 520px;                      /* prevents over-stretch */
}

/* big number */
.stat-num{
  margin: 12px 0 18px;                   /* number → caption gap */
  font-weight: 900;
  color: var(--stats-num);
  letter-spacing: .01em;
  line-height: 1.08;
  font-size: clamp(2.2rem, 3.8vw, 4.1rem); /* responsive size like Figma */
}

/* caption (with optional leading icon in your markup) */
.stat-cap{
  margin: 0;
  color: var(--stats-cap);
  font-weight: 700;
  line-height: 1.45;
  font-size: clamp(.95rem, .5vw + .8rem, 1.15rem);
}

/* tweak spacing on very large and small screens */
@media (min-width: 1600px){
  .stats-sec{ padding: 64px 0 72px; }
  .stats-header{ margin-bottom: 36px; }
}
@media (max-width: 991.98px){
  .stats-grid{
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 48px;
    row-gap: 24px;
  }
  .stats-title{ margin-left: 20px; }
}
@media (max-width: 575.98px){
  .stats-header::before,
  .stats-header::after{ width:44px; height:44px; }
  .stats-title{ margin-left: 16px; }
}


/* =========================================================
   9) FOOTER
   ========================================================= */
.footer-link{color:#fff; text-decoration:none; opacity:.85}
.footer-link:hover{opacity:1; text-decoration:underline}
.footer-icon{color:#fff; opacity:.85}
.footer-icon:hover{opacity:1}

















/* =========================================================
   10) POPUP (UNIKO) – wide & tall centered modal
   ========================================================= */

/* Overlay */
#site-popup.sp-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  background: rgba(0,0,0,.35);
}
#site-popup.sp-overlay.is-open { display: block; }

/* Modal box (centered, big) */
#site-popup .sp-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(1280px, 96vw) !important;   /* wider */
  height: min(72vh, 720px) !important;   /* taller */
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0,0,0,.45);
}

/* Background image fills the box */
#site-popup .sp-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-height: none !important;
}

/* Dark gradient layer */
#site-popup .sp-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 45%, rgba(0,0,0,.35));
  pointer-events: none;
}

/* Content area */
#site-popup .sp-content {
  position: absolute !important;
  inset: clamp(18px, 3vw, 44px) !important;   /* responsive inner padding */
  display: flex; flex-direction: column;
  color: #fff;
  overflow: auto;                              /* scroll if text is long */
}

/* Typography */
#site-popup .sp-title {
  margin: 0 0 .6rem 0;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(1.6rem, 2.8vw, 3rem);
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}

#site-popup .sp-body {
  margin: 0;
  max-width: 80ch;
  font-size: clamp(1rem, 1.1vw, 1.25rem);
  font-weight: 500;
  line-height: 1.7;
  color: rgba(255,255,255,.92);
}

/* CTA */
#site-popup .sp-cta {
  align-self: flex-start;
  margin-top: 1.2rem;
  background: #0B6FB2;
  color: #fff; text-decoration: none;
  padding: .85rem 1.4rem;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
#site-popup .sp-cta:hover { filter: brightness(1.03); color: #fff; }

/* Close button */
#site-popup .sp-close {
  position: absolute; right: 18px; top: 12px;
  width: 42px; height: 42px; border-radius: 999px;
  border: 0; background: rgba(0,0,0,.55); color:#fff;
  font-size: 24px; line-height: 42px; cursor: pointer;
  z-index: 2;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  #site-popup .sp-modal {
    width: 94vw !important;
    height: auto !important;
    max-height: 92vh !important;
  }
  #site-popup .sp-content { inset: 16px !important; }
}









/* =========================================================
   11) ABOUT PAGE (if used)
   ========================================================= */

   /* ===== ABOUT (AU) ===== */

/* hero */
.au-hero{position:relative;height:340px;margin-bottom:28px}
.au-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.au-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2))}
.au-hero-inner {
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;   /* 👈 centers horizontally */
  text-align:center;        /* centers multi-line text */
}
.au-hero-title{color:#fff;font-weight:800;font-size:clamp(28px,3.8vw,48px);text-shadow:0 12px 36px rgba(0,0,0,.35)}

/* about block */
.au-about{padding:8px 0 24px}
.au-sec-title{font-weight:800;color:#0E4973;font-size:clamp(20px,2.6vw,28px);margin-bottom:14px}
.au-text{color:#3a4a57;line-height:1.85;font-size:16px}
.au-text p{margin-bottom:1rem}

/* video card */
.au-video{position:relative;border-radius:16px;overflow:hidden}
.au-video-thumb{width:100%;height:auto;display:block}
.au-video-play {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);  /* 👈 true center */
  width:64px;
  height:64px;
  border-radius:50%;
  border:2px solid #fff;
  background:#fff;
  color:#0E4973;
  display:grid;
  place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.au-video-play i{font-size:20px;margin-left:2px}
.au-caption{color:#637384;font-size:14px}

/* teachers grid */
.au-teachers{padding:8px 0 60px}
/* Remove rounding from parent container */
.au-teacher {
  background:#fff;
  border-radius:18px;   /* keep card rounded */
  overflow:visible;     /* let image control its own radius */
  box-shadow:0 10px 30px rgba(0,0,0,.04);
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Image itself controls the shape */
.au-teacher-photo img {
  width:100%;
  aspect-ratio:1 / 1;   /* 👈 square format */
  object-fit:cover;
  display:block;

  /* asymmetrical rounding */
  border-top-left-radius:28px;
  border-bottom-right-radius:28px;
  border-top-right-radius:0;
  border-bottom-left-radius:0;
}

.au-teacher-body{padding:16px 16px 20px}
.au-teacher-name{margin:0 0 4px;font-weight:800;color:#0E4973;font-size:18px}
.au-teacher-role{color:#1492CF;font-weight:700;font-size:14px;margin-bottom:8px}
.au-teacher-bio{color:#4d5a68;font-size:14px;margin:0}

@media (max-width: 576px){
  .au-hero{height:240px}
  .au-teacher-photo img{height:200px}
}








/* =========================================================
   12) News (if used)
   ========================================================= */

/* Detail hero image */
.news-hero-box{
  width:100%;
  aspect-ratio: 16 / 9;   /* 16:9 crop; change if you want */
  border-radius:16px;
  border-top-left-radius:28px;
  border-bottom-right-radius:28px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.08);
}

.news-hero-box > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  /* if absolute doesn't take, add: position:relative to .news-hero-box */
}


/* Video block */
.news-video-embed { border-radius:16px; overflow:hidden; }
.news-video-cover{
  position:relative; display:block; overflow:hidden; border-radius:18px;
}
.news-video-cover img{ width:100%; height:auto; display:block; }
.news-video-cover .play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.25);
}
.news-video-cover .play i{
  font-size:48px; color:#fff; padding:18px 22px;
  background:rgba(0,0,0,.45); border-radius:999px;
}

/* More news mini-cards */

.news-mini-thumb{
  border-radius:14px; overflow:hidden;
  border-top-left-radius:22px;
  border-bottom-right-radius:22px;
  box-shadow:0 12px 30px rgba(0,0,0,.07);
}
.news-mini-thumb img{
  width:100%; height:160px; object-fit:cover; display:block;
}