@charset "utf-8";
@font-face {
  font-family: "BPG Nino Mtavruli";
  src: url("../fonts/bpg-nino-mtavruli.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* CSS Document */

/* =========================
   BRAND OVERRIDES
   ========================= */

:root {
  --color-primary: #9A1D21; /* Bordeaux brand color */
}

/* READ MORE hover color */
.recent-blog-posts .post-item .readmore:hover,
.recent-blog-posts .post-item:hover .readmore {
  color: #9A1D21; /* Bordeaux */
}
.recent-blog-posts .post-item .readmore:hover i,
.recent-blog-posts .post-item:hover .readmore i {
  color: #9A1D21;
}
.recent-blog-posts .post-item:hover .readmore {
  color: #9A1D21 !important;
}

/* Scroll-to-top hover (Bordeaux) */
.scroll-top:hover {
  background: #9A1D21 !important;
}

:root {
  --color-primary: #9A1D21;
  --color-primary-soft: rgba(154, 29, 33, 0.25);
}

a:hover {
  color: rgba(154, 29, 33, 0.85);
}
/* Scroll-to-top arrow icon color */
.scroll-top i {
  color: #fff !important;
}

/* Ensure icon stays white on hover */
.scroll-top:hover i {
  color: #fff !important;
}

.scroll-top {
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.scroll-top:hover {
  transform: translateY(-2px);
}

/* READ MORE — calm hover behavior */
.recent-blog-posts .post-item .readmore {
  transition: transform 0.25s ease;
}

.recent-blog-posts .post-item:hover .readmore {
  transform: translateY(-2px);
}

/* READ MORE — calm hover behavior (matches your HTML) */
.projects .post-item .readmore{
  display: inline-flex;              /* safe */
  transition: transform 0.25s ease;
}

.projects .post-item:hover .readmore,
.projects .post-item .readmore:hover{
  transform: translateY(-2px);
}

/* Optional: arrow nudge */
.projects .post-item .readmore i{
  transition: transform 0.25s ease;
}

.projects .post-item:hover .readmore i,
.projects .post-item .readmore:hover i{
  transform: translateX(4px);
}

/* =========================
   FOOTER REBUILD (CLEAN)
   ========================= */

/* Footer logo size (no stretching) */
#footer .footer-logo img{
  max-width: 180px;   /* adjust */
  max-height: 80px;   /* adjust */
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Organisation name */
#footer .footer-org-name{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 14px 0;
  color: #fff;
}

/* Contact list layout */
#footer .footer-contact li{
  display: flex;
  align-items: flex-start;
  gap: 10px;                 /* <<< SPACE between icon & text */
  margin-bottom: 10px;
  color: rgba(255,255,255,0.75);
}

/* Icons */
#footer .footer-contact i{
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-primary);
  margin-top: 2px;           /* aligns icon with first line */
  flex: 0 0 18px;            /* keeps icons aligned vertically */
}

/* Links inside contact */
#footer .footer-contact a{
  color: rgba(255,255,255,0.75);
  transition: 0.3s;
}
#footer .footer-contact a:hover{
  color: #fff;
}

/* Footer links hover uses Bordeaux */
#footer .footer-links ul a:hover{
  color: #fff;
}

/* Partners list inherits same style as links */
#footer .footer-partners-list a{
  color: rgba(255,255,255,0.6);
}
#footer .footer-partners-list a:hover{
  color: #fff;
}

/* Mobile: center the left block nicely */
@media (max-width: 991px){
  #footer .footer-info{
    text-align: center;
  }
  #footer .footer-logo img{
    margin-left: auto;
    margin-right: auto;
  }
  #footer .footer-contact{
    display: inline-block; /* so it centers as a block */
    text-align: left;      /* but rows stay aligned */
  }
}

/* Footer logo sizing */
#footer .footer-logo img{
  max-width: 180px;
  height: auto;
  display: block;
}

/* Organisation name smaller */
#footer .footer-org-name{
  font-size: 14px;     /* tweak */
  line-height: 1.35;
  color: rgba(255,255,255,0.9);
  font-family: var(--font-primary);
}

/* Nice icon spacing + alignment */
#footer .footer-contact i{
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
  color: rgba(255,255,255,0.85);
}

#footer .footer-contact span,
#footer .footer-contact a{
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}

#footer .footer-contact a:hover{
  color: #fff;
}

/* ===== FOOTER: ORGANISATION NAME (FINAL) ===== */
#footer .footer-org-name{
  font-size: 13px !important;   /* ← smaller */
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.8) !important;
  font-family: var(--font-primary) !important;
}
#footer .footer-org-name{
  font-size: 12px !important;
  color: rgba(255,255,255,0.7) !important;
}

/* ===== FOOTER LOGO SIZE ===== */
#footer .footer-logo img{
  max-width: 250px;     /* ← width control */
  max-height: 80px;     /* ← height control */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ===== FOOTER CONTACT TEXT ===== */
#footer .footer-contact li,
#footer .footer-contact span,
#footer .footer-contact a{
  font-size: 13px;        /* ← main control */
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
}

/* =========================
   FOOTER — CALMER COLOURS
   ========================= */

/* Organisation name */
#footer .footer-org-name{
  color: rgba(255,255,255,0.78);   /* soft white */
}

/* Address / phone / email text */
#footer .footer-contact li,
#footer .footer-contact span,
#footer .footer-contact a{
  color: rgba(255,255,255,0.55);   /* calm grey */
}

/* Icons next to contact info */
#footer .footer-contact i{
  color: rgba(255,255,255,0.65);   /* slightly stronger than text */
}

/* Email link hover (brand accent) */
#footer .footer-contact a:hover{
  color: var(--color-primary);
  text-decoration: none;
}

/* =========================
   FOOTER — MODERN CLEAN LAYOUT
   ========================= */

#footer.footer{
  font-size: 14px;
}

/* Make text calmer (not pure white) */
#footer .footer-info,
#footer .footer-links ul a,
#footer .footer-contact span,
#footer .footer-contact a{
  color: rgba(255,255,255,0.68);
}

/* Headings */
#footer .footer-links h4{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: none; /* keep modern, not shouting */
  margin-bottom: 14px;
  color: rgba(255,255,255,0.92);
}

/* LEFT: logo size */
#footer .footer-logo img{
  max-width: 260px;     /* control logo width */
  max-height: 70px;     /* control logo height */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Org name (smaller + nicer spacing) */
#footer .footer-org-name{
  font-size: 13.5px;      /* slightly smaller */
  font-weight: 500;
  line-height: 1.45;
  max-width: 320px;       /* avoids too-wide lines */
  color: rgba(255,255,255,0.82);
}

/* Contact list typography */
#footer .footer-contact{
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: 12px;
}

/* Icons: consistent size + spacing */
#footer .footer-contact i{
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;                 /* vertical alignment */
  color: rgba(255,255,255,0.70);
  min-width: 18px;                 /* keeps text aligned */
}

#footer .footer-contact .me-2{
  margin-right: 10px !important;   /* more space between icon and text */
}

/* Links */
#footer .footer-links ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .footer-links ul li{
  padding: 7px 0;
}
#footer .footer-links ul a{
  transition: 0.25s;
}
#footer .footer-links ul a:hover{
  color: rgba(255,255,255,0.95);
  text-decoration: none;
}

/* RIGHT: make Quick Links + Partners a tidy two-column block */
#footer .footer-right{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;                  /* distance between Quick Links and Partners */
  justify-content: end;
  max-width: 520px;           /* keeps it from floating too far left */
  margin-left: auto;          /* anchors it to the right side nicely */
}

/* Partners: keep left aligned (NOT right-aligned) */
#footer .footer-partners-list{
  text-align: left;
}

/* Copyright line: subtle + centered */
#footer .footer-legal .copyright{
  color: rgba(255,255,255,0.45) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  padding-top: 18px !important;
  margin-top: 34px;
  font-size: 13px;
}

/* =========================
   RESPONSIVE (MOBILE)
   ========================= */
@media (max-width: 991px){

  /* left column becomes centered naturally */
  #footer .footer-info{
    text-align: center;
  }

  #footer .footer-org-name{
    margin-left: auto;
    margin-right: auto;
  }

  /* contact lines centered, but still readable */
  #footer .footer-contact li{
    justify-content: center;
  }

  /* right block stacks nicely */
  #footer .footer-right{
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: 100%;
    margin: 30px auto 0 auto;
    text-align: center;
  }

  #footer .footer-links ul{
    display: inline-block;  /* makes list look centered */
    text-align: left;       /* BUT the items are aligned nicely */
  }
}

/* =========================
   FOOTER — MOBILE LOGO SIZE
   ========================= */
@media (max-width: 768px) {

  footer#footer .footer-logo img {
    max-width: 240px;   /* ← change this */
    max-height: 100px;   /* ← and/or this */
    width: auto;
    height: auto;
    margin: 0 auto 12px auto;
    display: block;
  }

}

/* =========================
   FOOTER  MOBILE PARTNERS ALIGN (CLEAN)
   ========================= */
@media (max-width: 768px) {

  footer#footer .footer-partners,
  footer#footer .footer-links {
    text-align: center;
  }

  footer#footer .footer-partners-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
    margin: 0;
  }

  footer#footer .footer-partners-list li {
    list-style: none;
    padding: 6px 0;
    text-align: center;
  }

  /* Improve spacing for wrapped partner names (mobile) */
  footer#footer .footer-partners-list li a {
    line-height: 1.5;
    display: inline-block;
    max-width: 90%;
    white-space: normal;
  }
}

/* =========================
   FOOTER — MOBILE PARTNERS CENTERED STACK
   ========================= */
@media (max-width: 768px) {

  footer#footer .footer-partners {
    text-align: center;
  }

  footer#footer .footer-partners-list {
    display: flex;
    flex-direction: column;
    align-items: center;   /* THIS is the key */
    padding-left: 0;
    margin: 0;
  }

  footer#footer .footer-partners-list li {
    list-style: none;
    padding: 6px 0;
    text-align: center;
  }

}

/* Improve spacing for wrapped partner names (mobile) */
@media (max-width: 768px) {
  footer#footer .footer-partners-list li a {
    line-height: 1.5;      /* space BETWEEN wrapped lines */
    display: inline-block;
    max-width: 90%;        /* prevents edge-hugging on small screens */
  }
}

/* =========================
   FOOTER — CENTER QUICK LINKS & PARTNERS (ALL SIZES)
   ========================= */

#footer .footer-links {
  text-align: center;
}

#footer .footer-links h4 {
  margin-bottom: 12px;
}

#footer .footer-links ul {
  display: inline-block;   /* key: centers list as a block */
  padding: 0;
  margin: 0;
}

#footer .footer-links ul li {
  list-style: none;
  padding: 6px 0;
}

/* Partners spacing for long names */
#footer .footer-partners-list li {
  line-height: 1.5;
}

/* =========================
   FOOTER — CENTERED LINKS (DESKTOP + MOBILE)
   ========================= */

#footer .footer-links{
  text-align: center !important;
}

/* Make the lists truly centered relative to each other */
#footer .footer-links ul,
#footer .footer-partners-list{
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: center;     /* centers each item as a block */
  gap: 10px;               /* vertical space between items */
}

/* Remove template padding that can fight centering */
#footer .footer-links ul li{
  padding: 0 !important;
}

/* Fix the “wrapped line too close” problem */
#footer .footer-links ul a,
#footer .footer-partners-list a{
  display: block;          /* gives each link its own block */
  text-align: center;
  line-height: 1.55;       /* <<< increases space between wrapped lines */
  max-width: 320px;        /* keeps long partner names from becoming too wide */
  white-space: normal;     /* allow wrapping */
}

/* Optional: slightly calmer color for link text */
#footer .footer-links ul a,
#footer .footer-partners-list a{
  color: rgba(255,255,255,0.65);
}
#footer .footer-links ul a:hover,
#footer .footer-partners-list a:hover{
  color: #fff;
}

#preloader:before{
  border-color: #9A1D21 transparent #9A1D21 transparent !important;
}

/* =========================
   FOOTER — PARTNERS LOGO GRID
   ========================= */

#footer .footer-partners h4{
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  color: rgba(255,255,255,0.92);
}

/* Grid that automatically fills space (no empty gaps) */
#footer .footer-partners-logos{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 18px;
  align-items: center;
}

/* Center each logo tile */
#footer .footer-partners-logos li{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo sizing + clean hover */
#footer .footer-partners-logos img{
  max-width: 130px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#footer .footer-partners-logos a:hover img{
  opacity: 1;
  transform: translateY(-2px);
}

/* Mobile: nicer layout */
@media (max-width: 768px){
  #footer .footer-partners{
    text-align: center;
  }

  #footer .footer-partners-logos{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
   FOOTER — PARTNER DESCRIPTION
   ========================= */

#footer .partner-desc{
  margin-top: 6px;
  margin-bottom: 0;

  font-size: 12.5px;
  line-height: 1.45;

  color: rgba(255,255,255,0.55);   /* subtle */
  text-align: center;

  max-width: 180px;
}

/* Keep description visually tied to logo */
#footer .footer-partners-logos li{
  flex-direction: column;
}

/* Slight emphasis on hover, still calm */
#footer .footer-partners-logos li:hover .partner-desc{
  color: rgba(255,255,255,0.75);
}

/* FOOTER — Partners heading alignment */
#footer .footer-partners h4{
  text-align: center;
}

/* FOOTER — Partners heading tone */
#footer .footer-partners h4{
  font-size: 13px;                 /* slightly smaller */
  font-weight: 500;                /* lighter than default */
  letter-spacing: 0.3px;

  color: rgba(255,255,255,0.70);   /* NOT pure white */
  margin-bottom: 18px;             /* space before logos */
}

/* =========================
   FOOTER — separator between left & right blocks
   ========================= */

/* Make sure the partners wrapper is NOT using the old 2-col grid */
#footer .footer-right.footer-partners{
  display: block !important;
  max-width: none !important;
}

/* Desktop: vertical subtle line */
@media (min-width: 992px){
  #footer .footer-left{
    position: relative;
    padding-right: 36px; /* spacing before the line */
  }

  #footer .footer-left::after{
    content: "";
    position: absolute;
    top: 6px;
    right: 0;
    height: calc(100% - 12px);
    width: 1px;
    background: rgba(255,255,255,0.14); /* slightly stronger so you can actually see it */
  }

  /* Add a little left padding to the right side so it doesn't stick to the line */
  #footer .footer-partners{
    padding-left: 36px;
  }
}

/* Mobile/tablet: since columns stack, use a horizontal divider above partners */
@media (max-width: 991px){
  #footer .footer-partners{
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
}

/* MOBILE: make the last partner centered if grid has an odd count */
@media (max-width: 768px){
  #footer .footer-partners-logos{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    align-items: start;
  }

  /* If the last item is alone, span both columns and center it */
  #footer .footer-partners-logos li:last-child{
    grid-column: 1 / -1;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* MOBILE: unify logo look (helps when some logos have white backgrounds) */
@media (max-width: 768px){
  #footer .footer-partners-logos a{
    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
  }

  #footer .footer-partners-logos img{
    max-height: 54px;
    opacity: 0.92;
  }
}
@media (max-width: 768px){
  #footer .partner-desc{
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255,255,255,0.68);
    max-width: 220px;
  }
}
@media (max-width: 991px){
  #footer .footer-partners{
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
}/* MOBILE — adjust separator position for visual consistency */
@media (max-width: 991px){
  #footer .footer-partners{
    margin-top: 4px;      /* was ~22–26px → tighter */
    padding-top: 40px;     /* brings separator UP */
    border-top: 1px solid rgba(255,255,255,0.12);
  }
}

/* =========================
   FOOTER — MOBILE: 3 PARTNERS IN ONE ROW
   ========================= */

@media (max-width: 768px){

  /* Force 3 columns */
  #footer .footer-partners-logos{
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* tighter gap */
  }

  /* Make logos smaller so they fit comfortably */
  #footer .footer-partners-logos img{
    max-width: 80px;
    max-height: 44px;
  }

  /* Remove centering override for last item (no longer needed) */
  #footer .footer-partners-logos li:last-child{
    grid-column: auto;
    max-width: none;
    margin: 0;
  }

  /* Captions: slightly smaller to match scale */
  #footer .partner-desc{
    font-size: 11.5px;
    line-height: 1.3;
    max-width: 120px;
  }
}
/* TEMP: disable desktop vertical separator */
@media (min-width: 992px){
  #footer .footer-left::after{
    display: none !important;
  }

  /* remove extra spacing added for the separator */
  #footer .footer-left{
    padding-right: 0 !important;
  }

  #footer .footer-partners{
    padding-left: 0 !important;
  }
}

/* =========================
   FOOTER — Desktop: align left & right blocks to same top line
   ========================= */

@media (min-width: 992px){

  /* Ensure the row aligns columns at the top */
  #footer .footer-row{
    align-items: flex-start;
  }

  /* Make both column wrappers behave consistently */
  #footer .footer-info,
  #footer .footer-right.footer-partners{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Remove any default heading top spacing that can push the right down */
  #footer .footer-partners h4{
    margin-top: 0 !important;
  }
}
/* =========================
   FOOTER — tighten icon ↔ text spacing
   ========================= */

#footer .footer-contact li{
  gap: 6px;              /* was 10px → tighter */
}

/* Neutralise Bootstrap spacing */
#footer .footer-contact i{
  margin-right: 0 !important;
}

/* Override Bootstrap's .me-2 specifically */
#footer .footer-contact .me-2{
  margin-right: 0 !important;
}

/* =========================
   HERO — mobile title size adjustment
   ========================= */

@media (max-width: 768px){

  #hero h2{
    font-size: 16px;       /* smaller, readable */
    line-height: 1.25;     /* tighter, cleaner */
  }

  #hero h2 span{
    font-size: inherit;   /* ensure no span override */
  }
}

/* Footer: space between logo and contact details */
#footer .footer-logo{
  margin-bottom: 20px !important;  /* ← safest place */
}
#hero .info *,
#hero .carousel-caption *{
  box-shadow: none !important;
}

#hero hr{
  display: none !important;
}

/* HERO — reliable spacing between title and button */
#hero .hero-cta{
  margin-top: 20px;
}

/* HERO — soften (dim) the main title */
#hero h2,
#hero h2 span{
  color: rgba(255, 255, 255, 0.78) !important;
}
/* HERO — dim CTA text only (keep outline unchanged) */
#hero .btn-get-started{
  color: rgba(255, 255, 255, 0.75) !important;
}

/* HERO — move title + CTA slightly down */
#hero .info .col-lg-6{
  padding-top: 100px;
}

/* Prevent content jump */
body.header-offset {
  padding-top: 90px; /* adjust if header height changes */
}

/* =========================
   FLOATING HEADER — VISIBLE BY DEFAULT
   ========================= */

/* Prevent content jump */
body.header-offset {
  padding-top: 90px;
}

/* Slide animation */
@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Slide-down animation */
@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Slide-down animation */
@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* =====================================================
   HEADER — FLOAT & SLIDE (FINAL, TEMPLATE-SAFE)
   ===================================================== */

/* default state: original header */
#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 9999;
}

/* animation */
@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* floating state (we control this class) */
#header.is-floating {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  background: #FBF7F7; /* Snow */
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);

  animation: headerSlideDown 0.4s ease forwards;
}

/* dropdown background */
#header.is-floating .dropdown ul {
  background: #FBF7F7 !important;
}

/* =========================
   HEADER — SMOOTH SLIDE + FADE (SAFE)
   ========================= */

/* Default state (page load) */
#header {
  position: absolute;
  background: transparent;
  transition: background-color 0.4s ease,
              box-shadow 0.4s ease;
}

/* Keyframes ONLY for sticky appearance */
@keyframes headerSlideFade {
  from {
    transform: translateY(-12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Sticky state (added by main.js) */
#header.sticked {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  background: #FBF7F7;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);

  animation: headerSlideFade 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Text color only when sticky */
#header.sticked .navbar a,
#header.sticked .navbar a:focus,
#header.sticked .mobile-nav-toggle {
  color: #000 !important;
}

/* Dropdown background */
#header.sticked .dropdown ul {
  background: #FBF7F7;
}

/* =========================
   HEADER — LOGO VISIBILITY ON STICKY
   ========================= */

/* Default: keep logo untouched (white) */
#header .logo img {
  filter: none;
  transition: filter 0.35s ease;
}

/* When header becomes sticky → turn logo dark */
#header.sticked .logo img {
  filter: brightness(0) saturate(100%);
}

/* =========================
   HEADER LOGO — ALWAYS VISIBLE WHEN FLOATING
   Works for BOTH .sticked and .is-floating
   ========================= */

#header .logo img{
  filter: none !important;
  transition: filter 0.35s ease;
}

/* When header is floating/sticky: make logo dark */
#header.sticked .logo img,
#header.is-floating .logo img{
  filter: brightness(0) saturate(100%) !important;
}

/* =====================================================
   DROPDOWN: remove grey "pill" + underline from 1st letter
   (HIGH specificity + !important)
   ===================================================== */

/* kill the oval/grey hover background */
#header #navbar.navbar .dropdown ul a,
#header #navbar.navbar .dropdown ul a:hover,
#header #navbar.navbar .dropdown ul li:hover > a {
  background-color: transparent !important; /* <-- IMPORTANT */
  border-radius: 0 !important;
}
/* make link shrink to text width and remove left/right padding */
#header #navbar.navbar .dropdown ul a {
  display: inline-block !important;   /* text-width */
  padding: 6px 0 !important;          /* NO left/right padding */
  position: relative !important;
  
}

/* IMPORTANT: stop the <li> from forcing weird padding */
#header #navbar.navbar .dropdown ul li {
  padding: 0 !important;
}

/* give the dropdown some left padding so the whole list is aligned nicely */
#header #navbar.navbar .dropdown ul {
  padding: 10px 18px !important;      /* controls dropdown left indent */
}

/* underline that starts at first letter */
#header #navbar.navbar .dropdown ul a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;                 /* first letter */
  bottom: 0 !important;
  height: 2px !important;
  width: 0 !important;
  background: #9A1D21 !important;     /* Bordeaux */
  transition: width 0.25s ease !important;
}

/* prevent "double underline" from template */
#header #navbar.navbar .dropdown ul a{
  border: 0 !important;
  text-decoration: none !important;
}

/* keep underline thickness consistent */
#header #navbar.navbar .dropdown ul a::after{
  height: 2px !important;   /* adjust to 1.5px if you want thinner */
}

/* =====================================
   DROPDOWN LINK COLOR — TOP vs STICKY
   ===================================== */

/* Top of page (header NOT sticky) */
#header:not(.sticked) #navbar.navbar .dropdown ul a{
  color: rgba(255,255,255,0.75) !important;
}

#header:not(.sticked) #navbar.navbar .dropdown ul a:hover{
  color: #fff !important;
}

/* Sticky/floating header */
#header.sticked #navbar.navbar .dropdown ul a{
  color: #000 !important;
}

#header.sticked #navbar.navbar .dropdown ul a:hover{
  color: #9A1D21 !important; /* Bordeaux */
}
/* ==================================================
   DROPDOWN COLORS — FINAL, STATE-SAFE
   ================================================== */

/* DEFAULT (page load, transparent header) */
#header:not(.sticked) #navbar.navbar .dropdown ul a{
  color: rgba(255,255,255,0.75) !important;
}

#header:not(.sticked) #navbar.navbar .dropdown ul a:hover{
  color: #ffffff !important;
}

/* FLOATING HEADER (light background) */
#header.sticked #navbar.navbar .dropdown ul a{
  color: #000000 !important;
}

#header.sticked #navbar.navbar .dropdown ul a:hover{
  color: #9A1D21 !important;
}
/* ==================================================
   MAIN NAV COLORS — STATE-SAFE
   ================================================== */

/* TOP (page load, transparent header): dim white */
#header:not(.sticked) #navbar.navbar > ul > li > a{
  color: rgba(255,255,255,0.75) !important;
}

#header:not(.sticked) #navbar.navbar > ul > li > a:hover{
  color: #ffffff !important;
}

/* FLOATING (sticked): black on light background */
#header.sticked #navbar.navbar > ul > li > a{
  color: #000000 !important;
}

#header.sticked #navbar.navbar > ul > li > a:hover{
  color: #9A1D21 !important;
}

/* ==================================================
   NAV + DROPDOWN COLORS — BULLETPROOF (sticked / is-floating / header-scrolled)
   Put this at the VERY END of custom.css
   ================================================== */

/* ===== TOP OF PAGE (transparent header) ===== */
#header:not(.sticked):not(.is-floating):not(.header-scrolled) #navbar.navbar > ul > li > a{
  color: rgba(255,255,255,0.75) !important;
}
#header:not(.sticked):not(.is-floating):not(.header-scrolled) #navbar.navbar > ul > li > a:hover{
  color: #fff !important;
}

/* Dropdown items when header is transparent (menu opened) */
#header:not(.sticked):not(.is-floating):not(.header-scrolled) #navbar.navbar .dropdown ul a{
  color: rgba(255,255,255,0.75) !important;
}
#header:not(.sticked):not(.is-floating):not(.header-scrolled) #navbar.navbar .dropdown ul a:hover{
  color: #fff !important;
}

/* ===== FLOATING HEADER (light background) ===== */
/* Main menu bar items */
#header.sticked #navbar.navbar > ul > li > a,
#header.is-floating #navbar.navbar > ul > li > a,
#header.header-scrolled #navbar.navbar > ul > li > a{
  color: #000 !important;
}

#header.sticked #navbar.navbar > ul > li > a:hover,
#header.is-floating #navbar.navbar > ul > li > a:hover,
#header.header-scrolled #navbar.navbar > ul > li > a:hover{
  color: #9A1D21 !important;
}

/* Dropdown items inside the floating header */
#header.sticked #navbar.navbar .dropdown ul a,
#header.is-floating #navbar.navbar .dropdown ul a,
#header.header-scrolled #navbar.navbar .dropdown ul a{
  color: #000 !important;
}

#header.sticked #navbar.navbar .dropdown ul a:hover,
#header.is-floating #navbar.navbar .dropdown ul a:hover,
#header.header-scrolled #navbar.navbar .dropdown ul a:hover{
  color: #9A1D21 !important;
}

/* =========================================
   DROPDOWN — SINGLE, CONSISTENT UNDERLINE
   (NO thickness bugs, EVER)
   ========================================= */

#header #navbar.navbar .dropdown ul a{
  display: inline-block;
  padding: 6px 0;
  background-image: linear-gradient(#9A1D21, #9A1D21);
  background-repeat: no-repeat;
  background-size: 0% 2px;       /* underline thickness */
  background-position: 0 100%;   /* from first letter */
  transition: background-size 0.25s ease;
}

/* Hover underline */
#header #navbar.navbar .dropdown ul a:hover{
  background-size: 100% 2px;
}

/* Active item underline */
#header #navbar.navbar .dropdown ul li.active > a,
#header #navbar.navbar .dropdown ul a.active{
  background-size: 100% 2px;
}
/* ================================
   DROPDOWN UNDERLINE — BULLETPROOF
   Put at END of custom.css
   ================================ */

/* remove pill background without killing underline */
#header #navbar.navbar .dropdown ul a,
#header #navbar.navbar .dropdown ul a:hover,
#header #navbar.navbar .dropdown ul li:hover > a{
  background-color: transparent !important;
  border-radius: 0 !important;
}

/* underline */
#header #navbar.navbar .dropdown ul a{
  display: inline-block !important;
  padding: 6px 0 !important;

  background-image: linear-gradient(#9A1D21, #9A1D21) !important;
  background-repeat: no-repeat !important;
  background-size: 0% 2px !important;      /* thickness */
  background-position: 0 100% !important;  /* from first letter */
  transition: background-size 0.25s ease !important;
}

/* show underline on hover (both patterns) */
#header #navbar.navbar .dropdown ul a:hover,
#header #navbar.navbar .dropdown ul li:hover > a{
  background-size: 100% 2px !important;
}

/* show underline on active item */
#header #navbar.navbar .dropdown ul li.active > a,
#header #navbar.navbar .dropdown ul a.active{
  background-size: 100% 2px !important;
}
/* =========================================
   FIX: first dropdown item thicker underline
   (kill any template underline / pseudo lines)
   ========================================= */

/* remove any extra underline sources that might stack */
#header #navbar.navbar .dropdown ul a{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* if the template adds underline via pseudo-elements, disable them */
#header #navbar.navbar .dropdown ul a::before,
#header #navbar.navbar .dropdown ul a::after{
  content: none !important;
  display: none !important;
}

/* keep YOUR underline method only */
#header #navbar.navbar .dropdown ul a{
  background-image: linear-gradient(#9A1D21, #9A1D21) !important;
  background-repeat: no-repeat !important;
  background-size: 0% 2px !important;
  background-position: 0 100% !important;
}

/* hover + active underline */
#header #navbar.navbar .dropdown ul a:hover,
#header #navbar.navbar .dropdown ul li:hover > a,
#header #navbar.navbar .dropdown ul li.active > a,
#header #navbar.navbar .dropdown ul a.active{
  background-size: 100% 2px !important;
}

/* MENU — tune BPG Glaho to look closer to the reference */
#header .navbar > ul > li > a,
#header .navbar .dropdown ul a{
  font-family: "BPG Glaho", sans-serif !important;

  font-size: 16px;            /* adjust: 15–17 */
  font-weight: 400 !important;
  letter-spacing: 0.12em;     /* key for that “even” look */
  
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ===== NAV FONT (Georgian) — BPG Glaho ===== */
#header #navbar > ul > li > a,
#header #navbar .dropdown ul a {
  font-family: "BPG Glaho", "Noto Sans Georgian", "Roboto", sans-serif !important;

  font-size: 18px;          /* increase if needed */
  font-weight: 400;         /* only one weight exists in this package */
  letter-spacing: 0 !important;  /* Georgian looks worse with spacing */

  opacity: 1 !important;    /* kills the grey/washed look */
  text-shadow: none !important;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Top of page (transparent header) — make it crisp white */
#header:not(.sticked):not(.is-floating):not(.header-scrolled) #navbar > ul > li > a{
  color: rgba(255,255,255,0.95) !important;
}

/* Floating header (light bg) */
#header.sticked #navbar > ul > li > a,
#header.is-floating #navbar > ul > li > a,
#header.header-scrolled #navbar > ul > li > a{
  color: #000 !important;
}
/* MENU — BPG NINO MTAVRULI (UNICASE GEORGIAN) */
#header #navbar > ul > li > a,
#header #navbar .dropdown ul a{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0;
}

/* HERO TITLE — slightly dimmed */
#hero h2,
#hero h2 span{
  color: rgba(255, 255, 255, 0.78) !important;
}
/* HERO CTA — dim text, keep button visible */
#hero .btn-get-started{
  color: rgba(255, 255, 255, 0.75) !important;
}
/* Force "წმ. გიორგი" to stay together */
#hero h2 .no-break{
  white-space: nowrap !important;
  display: inline !important;
}

/* =========================================
   DROPDOWN — DARK TRANSPARENT BG (TOP ONLY)
   Prevents overlap with hero text
   ========================================= */

/* When page is at the TOP (hero visible) */
#header:not(.sticked):not(.is-floating):not(.header-scrolled)
#navbar.navbar .dropdown ul{

  background: rgba(0, 0, 0, 0.45) !important;
/* translucent dark */
  backdrop-filter: blur(6px);                  /* modern, optional */
  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* Dropdown text color on dark bg */
#header:not(.sticked):not(.is-floating):not(.header-scrolled)
#navbar.navbar .dropdown ul a{
  color: rgba(255,255,255,0.9) !important;
}

/* Hover state on dark bg */
#header:not(.sticked):not(.is-floating):not(.header-scrolled)
#navbar.navbar .dropdown ul a:hover{
  color: #ffffff !important;
}

/* FOOTER — tighten contact details spacing */
.footer-contact li{
  margin-bottom: 4px !important;   /* default is ~8–12px */
  line-height: 1.3;
}

.footer-contact li:last-child{
  margin-bottom: 0 !important;
}

/* =========================================
   HERO TITLE — MOBILE ONLY (FIXED)
   ========================================= */
@media (max-width: 768px){

  #hero h2{
    font-size: 20px;        /* was ~16 → slightly bigger */
    line-height: 1.60;      /* more breathing room between lines */
    margin-top: -24px;      /* moves title upward */
    margin-bottom: 24px;   /* keeps distance from CTA */
  }

  #hero h2 span{
    display: block;         /* ensures clean line wrapping */
    line-height: inherit;
  }

  /* Optional: slightly reduce opacity loss on mobile */
  #hero h2,
  #hero h2 span{
    color: rgba(255,255,255,0.82) !important;
  }
}
/* =========================================
   HERO — MOBILE: DIM TITLE + CTA
   ========================================= */
@media (max-width: 768px){

  /* Main title */
  #hero h2,
  #hero h2 span{
    color: rgba(255,255,255,0.72) !important; /* slightly dim */
  }

  /* CTA text only (button stays visible) */
  #hero .btn-get-started{
    color: rgba(255,255,255,0.70) !important;
  }
}

/* =========================================
   HERO — MOBILE: MOVE TITLE + BUTTON UP (GUARANTEED)
   ========================================= */
@media (max-width: 768px){

  /* This is the exact wrapper around your h2 + button */
  #hero .info .col-lg-6{
    transform: translateY(-50px) !important;  /* more negative = higher */
  }

  /* Bigger + more breathing room */
  #hero h2{
    font-size: 20px !important;
    line-height: 1.6 !important;
    margin-bottom: 22px !important;
  }

  /* Dim title + CTA text */
  #hero h2,
  #hero h2 span{
    color: rgba(255,255,255,0.72) !important;
  }

  #hero .btn-get-started{
    color: rgba(255,255,255,0.70) !important;
  }
}

/* Top of page: hamburger stays white */
#header:not(.sticked):not(.is-floating):not(.header-scrolled) .mobile-nav-show{
  color: #fff !important;
}
/* =========================================================
   DESKTOP DROPDOWN — TRUE GLASS (LIGHTER)
   ========================================================= */
@media (min-width: 1280px){

  #header:not(.sticked):not(.is-floating):not(.header-scrolled)
  #navbar.navbar .dropdown ul{
    background: rgba(0,0,0,0.06) !important;   /* <<< lighter */
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;

    box-shadow: 0 10px 28px rgba(0,0,0,0.25) !important;
  }

  #header:not(.sticked):not(.is-floating):not(.header-scrolled)
  #navbar.navbar .dropdown ul a{
    color: rgba(255,255,255,0.92) !important;
  }

  #header:not(.sticked):not(.is-floating):not(.header-scrolled)
  #navbar.navbar .dropdown ul a:hover{
    color: #ffffff !important;
  }
}
/* TEMP: if site "doesn't load", it's often the preloader stuck because JS crashed */
#preloader { display: none !important; }

/* Remove partner logo frames (ALL sizes) */
#footer .footer-partners-logos a{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#footer::before,
#footer .footer-content::before{
  background: rgba(0, 0, 0, 0.55) !important;
}
/* =========================================================
   MOBILE + FLOATING HEADER: dropdown submenu text NEVER red
   (keep underline red)
   Put at VERY END of custom.css
   ========================================================= */
@media (max-width: 1279px){

  /* Force submenu link text WHITE in floating header states */
  body.mobile-nav-active #header.sticked  #navbar .dropdown ul a,
  body.mobile-nav-active #header.is-floating #navbar .dropdown ul a,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown ul a,

  body.mobile-nav-active #header.sticked  #navbar .dropdown ul a:hover,
  body.mobile-nav-active #header.is-floating #navbar .dropdown ul a:hover,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown ul a:hover,

  body.mobile-nav-active #header.sticked  #navbar .dropdown ul a:focus,
  body.mobile-nav-active #header.is-floating #navbar .dropdown ul a:focus,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown ul a:focus,

  body.mobile-nav-active #header.sticked  #navbar .dropdown ul li:hover > a,
  body.mobile-nav-active #header.is-floating #navbar .dropdown ul li:hover > a,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown ul li:hover > a,

  body.mobile-nav-active #header.sticked  #navbar .dropdown ul li.active > a,
  body.mobile-nav-active #header.is-floating #navbar .dropdown ul li.active > a,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown ul li.active > a{
    color: rgba(255,255,255,0.95) !important;
  }

  /* Keep ONLY the underline red (your underline method) */
  body.mobile-nav-active #header.sticked  #navbar .dropdown ul a:hover,
  body.mobile-nav-active #header.is-floating #navbar .dropdown ul a:hover,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown ul a:hover,
  body.mobile-nav-active #header.sticked  #navbar .dropdown ul li.active > a,
  body.mobile-nav-active #header.is-floating #navbar .dropdown ul li.active > a,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown ul li.active > a{
    background-size: 100% 2px !important; /* red underline ON */
  }
}
/* =========================================================
   DESKTOP: dropdown submenu text NEVER red (keep underline)
   Put at VERY END of custom.css
   ========================================================= */
@media (min-width: 1280px){

  /* Floating/sticky header: keep submenu text black */
  #header.sticked #navbar.navbar .dropdown ul a,
  #header.is-floating #navbar.navbar .dropdown ul a,
  #header.header-scrolled #navbar.navbar .dropdown ul a{
    color: #000 !important;
  }

  /* Prevent red on hover/focus/active states */
  #header.sticked #navbar.navbar .dropdown ul a:hover,
  #header.is-floating #navbar.navbar .dropdown ul a:hover,
  #header.header-scrolled #navbar.navbar .dropdown ul a:hover,
  #header.sticked #navbar.navbar .dropdown ul a:focus,
  #header.is-floating #navbar.navbar .dropdown ul a:focus,
  #header.header-scrolled #navbar.navbar .dropdown ul a:focus,
  #header.sticked #navbar.navbar .dropdown ul li:hover > a,
  #header.is-floating #navbar.navbar .dropdown ul li:hover > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li:hover > a,
  #header.sticked #navbar.navbar .dropdown ul li.active > a,
  #header.is-floating #navbar.navbar .dropdown ul li.active > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li.active > a{
    color: #000 !important; /* stays black */
  }

  /* Keep your underline effect red */
  #header.sticked #navbar.navbar .dropdown ul a:hover,
  #header.is-floating #navbar.navbar .dropdown ul a:hover,
  #header.header-scrolled #navbar.navbar .dropdown ul a:hover,
  #header.sticked #navbar.navbar .dropdown ul li.active > a,
  #header.is-floating #navbar.navbar .dropdown ul li.active > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li.active > a{
    background-size: 100% 2px !important;
  }
}


/* CONTACT PAGE — make the 3 info cards equal + aligned */
#contact .row.gy-4{
  justify-content: center;              /* center the whole group */
}

/* Force equal widths on large screens */
@media (min-width: 992px){
  #contact .row.gy-4 > div{
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
}

/* Make all info cards same height and nicer */
#contact .info-item{
  height: 100% !important;
  min-height: 190px;                    /* adjust if you want taller/shorter */
  width: 100%;
  text-align: center;
  padding: 28px 20px !important;
  border-radius: 12px;                  /* optional */
}

/* Keep icon + text aligned consistently */
#contact .info-item i{
  margin-bottom: 12px;
}

#contact .info-item p{
  margin: 0 !important;
}


/* Contact cards */
#contact .info-item{
  background: #ffffff;             /* clean contrast */
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Icons */
#contact .info-item i{
  font-size: 32px;                 /* more authority */
  color: var(--color-primary);     /* Bordeaux */
  margin-bottom: 14px;
}

/* Text inside cards */
#contact .info-item p{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif;
  font-size: 16px;
  font-weight: 500;                /* IMPORTANT: kills the “pale” look */
  color: rgba(0,0,0,0.85);          /* strong but not pitch black */
  letter-spacing: 0.01em;
}

/* Email link (if you later wrap it in <a>) */
#contact .info-item a{
  color: rgba(0,0,0,0.85);
  text-decoration: none;
}
#contact .info-item a:hover{
  color: var(--color-primary);
}

/* =========================================
   FOOTER — GEORGIAN FONT (FULL COVERAGE)
   ========================================= */

/* Contact details */
#footer .footer-contact span,
#footer .footer-contact li{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Partner descriptions */
#footer .partner-desc{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Partners heading (if present) */
#footer .footer-partners h4{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-weight: 500;
  letter-spacing: 0;
}

/* ✅ COPYRIGHT */
#footer .footer-legal,
#footer .footer-legal .copyright{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;          /* tiny polish */
  color: rgba(255,255,255,0.55);  /* calm, not shouting */
}
/* =========================================
   FOOTER — COPYRIGHT FONT SIZE (FINAL)
   ========================================= */

#footer .footer-legal .copyright{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-size: 11.5px !important;   /* ← change this value */
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  line-height: 1.5;
}


/* =========================================
   HERO — GEORGIAN FONT OVERRIDE (HOME ONLY)
   ========================================= */

/* Main title */
body.home #hero h2,
body.home #hero h2 span{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-weight: normal;
  letter-spacing: 0;
}

/* CTA button text */
body.home #hero .btn-get-started{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-weight: normal;
  letter-spacing: 0;
}

/* =========================================
   ABOUT PAGE — MAKE TEXT WIDER + IMAGE SMALLER (RIGHT)
   ========================================= */

/* Ensure the template doesn't "absolute-position" the image and hide it */
#about .about-img-right{
  position: relative !important;
  width: 100%;
  min-height: 420px;              /* adjust */
  border-radius: 12px;            /* optional */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

/* Paragraph spacing (real line breaks) */
#about .our-story p{
  margin: 0 0 14px 0;
  line-height: 1.75;
}

/* Real bullets */
#about .about-bullets{
  margin: 12px 0 0 0;
  padding-left: 1.2rem;           /* controls bullet indent */
}
#about .about-bullets li{
  margin: 0px 0;
  line-height: 1.7;
}

/* Mobile: stack nicely */
@media (max-width: 991px){
  #about .about-img-right{
    min-height: 260px;
    margin-bottom: 10px;
  }
}
/* =========================================
   ABOUT — REMOVE DEAD SPACE BETWEEN TEXT & IMAGE
   ========================================= */

/* Allow about section to use full container width */
#about .container{
  max-width: 100% !important;
}

/* Reduce horizontal gutter ONLY for this section */
#about .about-split{
  --bs-gutter-x: 1.5rem;   /* default is ~3rem */
}

/* Let text breathe to the right */
#about .our-story{
  max-width: none;
  padding-right: 10px;    /* fine-tune text → image distance */
}

/* Pull image slightly left to eat white space */
#about .about-img-right{
  margin-left: -20px;     /* key line */
}
/* =========================================
   ABOUT — REMOVE EMPTY SPACE BETWEEN TEXT & IMAGE
   ========================================= */

/* Reduce the horizontal gap (Bootstrap g-5 is huge) */
#about .about-split{
  --bs-gutter-x: 1.25rem;  /* try 1rem–1.5rem */
}

/* Make text column use all available width */
#about .our-story{
  max-width: none !important;
}

/* Pull the image column a bit LEFT to eat the white space */
#about .about-img-right{
  margin-left: -24px;      /* try -12px to -40px */
  min-height: 420px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}

/* Mobile: don’t pull left (avoids weird edges) */
@media (max-width: 991px){
  #about .about-img-right{
    margin-left: 0;
    min-height: 260px;
  }
}
/* =========================================
   ABOUT — TYPO REFINEMENT + IMAGE ALIGNMENT
   ========================================= */

/* Slightly smaller, calmer body text */
#about .our-story p,
#about .about-bullets li{
  font-size: 14px;     /* was ~16–17 */
  line-height: 1.75;
}

/* Reduce paragraph heaviness */
#about .our-story p{
  margin-bottom: 13px;
}

/* Bullet list spacing */
#about .about-bullets{
  margin-top: 8px;
}

/* Move image DOWN to align with text block */
#about .about-img-right{
  margin-top: 18px;      /* key line */
}

/* Mobile: reset image offset */
@media (max-width: 991px){
  #about .about-img-right{
    margin-top: 0;
  }
}
/* ABOUT — move image slightly down to align with text */
#about .about-img-right{
  margin-top: 0px;   /* ← increase/decrease this number */
}
/* ABOUT — bullets: no extra spacing between items */
#about .about-bullets{
  margin-top: 0 !important;
}

#about .about-bullets li{
  margin: 0 !important;        /* kills gaps between bullets */
  padding: 0 !important;
  line-height: 1.35 !important; /* tighter lines */
}
/* ABOUT — final text width control */
#about .our-story{
  padding-right: 10px !important;
}
/* ABOUT — remove grey background from text */
#about .our-story{
  background: transparent !important;
}
/* =========================================
   ABOUT — REMOVE TOP GAP, ALIGN TEXT & IMAGE
   ========================================= */

/* Reduce section top padding */
#about{
  padding-top: 60px !important;   /* try 30px if still too much */
}

/* Remove artificial top space from text block */
#about .our-story{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Remove top margin from first paragraph */
#about .our-story p:first-child{
  margin-top: 0 !important;
}

/* Align image with text top */
#about .about-img-right{
  margin-top: 0 !important;
}

.watch-video-link{
  width: fit-content;
  text-decoration: none;
}

/* =========================
   ABOUT — MOBILE WIDTH FIX
   ========================= */
@media (max-width: 991px){

  /* Reduce container side padding only for About */
  #about .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Kill extra row gutter on mobile */
  #about .about-split{
    --bs-gutter-x: 0 !important;
  }

  /* Make text breathe horizontally */
  #about .our-story{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}
/* ABOUT — subtle spacing between bullet items */
#about .about-bullets li{
  margin-bottom: 6px !important;   /* ← small line break */
}

/* remove extra space after the last bullet */
#about .about-bullets li:last-child{
  margin-bottom: 0 !important;
}
/* =========================
   ABOUT — reduce bottom space before footer (mobile)
   ========================= */
@media (max-width: 991px){

  #about{
    padding-bottom: 40px !important;  /* was ~80px */
  }

}
/* =========================================
   ABOUT — FORCE BULLETS TO APPEAR (FINAL)
   ========================================= */

#about ul.about-bullets{
  list-style-type: disc !important;     /* bullet dots */
  list-style-position: outside !important;
  padding-left: 1.2rem !important;      /* bullet indent */
  margin-left: 0 !important;
}

#about ul.about-bullets > li{
  display: list-item !important;        /* kills flex overrides */
  list-style: disc !important;          /* double-force */
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* REMOVE footer dark overlay completely */
#footer::before,
#footer .footer-content::before{
  display: none !important;
}

/* FOOTER — move horizontal separator UP */
#footer .footer-legal .copyright{
  margin-top: 8px !important;     /* moves the line UP */
  padding-top: 10px !important;    /* space between line and text */
}
/* Move the footer separator + copyright block UP */
.footer .footer-legal{
  margin-top: 12px !important;   /* reduce until it looks right */
}

/* Optional: also tighten space between the line and the text */
.footer .footer-legal .copyright{
  padding-top: 14px !important;  /* was 18/24 in your overrides */
}
/* FOOTER — increase space between separator line and copyright text */
#footer .footer-legal .copyright{
  padding-top: 18px !important;   /* increase this value */
}

#footer .footer-email{
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
}

#footer .footer-email:hover,
#footer .footer-email:focus{
  color: rgba(255,255,255,0.65) !important; /* 🔒 lock color */
  text-decoration: underline !important;    /* underline only */
}
/* ================================
   Footer phone: desktop vs mobile
   ================================ */

/* Desktop default */
#footer .footer-tel-mobile{
  display: none !important;
}

#footer .footer-tel-desktop{
  display: inline !important;
}

/* Mobile only */
@media (max-width: 991px){
  #footer .footer-tel-mobile{
    display: inline !important;
  }

  #footer .footer-tel-desktop{
    display: none !important;
  }
}

/* =====================================
   Footer phone link – NO red on tap
   ===================================== */

#footer .footer-tel-mobile,
#footer .footer-tel-mobile:hover,
#footer .footer-tel-mobile:focus,
#footer .footer-tel-mobile:active,
#footer .footer-tel-mobile:visited{
  color: rgba(255,255,255,0.55) !important; /* locked */
  text-decoration: none !important;
}

/* underline only (optional, very subtle) */
#footer .footer-tel-mobile:hover,
#footer .footer-tel-mobile:active{
  text-decoration: underline !important;
}

/* LATIN (English/email/numbers) — force non-Georgian font */
#footer .latin-text,
#footer .latin-text *{
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
}

/* Force Latin font for footer copyright */
#footer .footer-legal .copyright{
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
}

/* =========================================
   CONTACT PAGE — email + phone behavior
   ========================================= */

/* Make email/phone NOT turn red (lock color) */
#contact .contact-email,
#contact .contact-email:visited,
#contact .contact-email:hover,
#contact .contact-email:focus,
#contact .contact-email:active,
#contact .contact-tel-mobile,
#contact .contact-tel-mobile:visited,
#contact .contact-tel-mobile:hover,
#contact .contact-tel-mobile:focus,
#contact .contact-tel-mobile:active{
  color: rgba(0,0,0,0.85) !important;  /* matches your contact card text */
  text-decoration: none !important;
}

/* Underline ONLY on hover/tap */
#contact .contact-email:hover,
#contact .contact-email:active,
#contact .contact-tel-mobile:hover,
#contact .contact-tel-mobile:active{
  text-decoration: underline !important;
}

/* Phone: desktop vs mobile */
#contact .contact-tel-mobile{ display: none !important; }
#contact .contact-tel-desktop{ display: inline !important; }

@media (max-width: 991px){
  #contact .contact-tel-mobile{ display: inline !important; }
  #contact .contact-tel-desktop{ display: none !important; }
}

/* Keep link size consistent with the <p> text */
#contact .info-item p a{
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* HERO text smaller on mobile */
@media (max-width: 768px){

  /* Main title */
  #hero h2{
    font-size: 18px !important;   /* try 14–18 */
    line-height: 1.35 !important;
    margin-bottom: 14px !important;
  }

  /* If title has spans (your template often does) */
  #hero h2 span{
    font-size: inherit !important;
    line-height: inherit !important;
  }

  /* Button text */
  #hero .btn-get-started{
    font-size: 13px !important;   /* try 12–14 */
    padding: 10px 18px !important;
  }

  /* Optional: small paragraph text if you have it in hero */
  #hero p{
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

/* “სიახლეები” title font */
.section-header h2.geo-h2{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
}

/* FIX logo/menu overlap on mid desktop resolutions */
.header .logo {
  max-width: 60%;
  flex: 0 1 auto;
}

.header .logo img {
  max-width: 100%;
  height: auto;
}

/* Prevent navbar from being pushed off */
.navbar {
  flex-shrink: 0;
}

/* Mid desktop safety zone (e.g. 1680x1050) */
@media (max-width: 1700px) {
  .navbar > ul > li {
    padding-left: 20px;
  }
}

/* MOBILE HEADER BAR  increase transparency */
@media (max-width: 1279px) {

  #header.sticked,
  #header.is-floating {
    background: rgba(251, 247, 247, 0.7) !important; /* tweak this */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

}


/* DESKTOP  floating header glass effect */
@media (min-width: 1280px){

  #header.sticked,
  #header.is-floating {
    background: rgba(251, 247, 247, 0.75) !important; /* tweak */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

}

/* =========================================
   404 + contact latin bits  FORCE ARIAL ONLY
   (does NOT affect Georgian text)
   ========================================= */

.latin-text,
.latin-text * {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Optional: keep 404 headline from being huge (breadcrumbs h2 is big by default) */
.breadcrumbs h2.latin-text{
  font-size: 28px !important;      /* tweak */
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,0.75) !important;  /* dimmed on dark bg */
}

/* Optional: make email/tel match the other contact text size */
#contact .info-item p.latin-text,
#contact .info-item p.latin-text a{
  font-size: 16px !important;      /* tweak */
  font-weight: 500 !important;
  color: rgba(0,0,0,0.75) !important;         /* slightly dim */
}

/* =========================================
   LATIN ONLY (404 + email + tel)  FORCE ARIAL
   ========================================= */
.latin-text,
.latin-text *{
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
}

/* =========================================
   MOBILE ONLY  force Arial for specific bits
   ========================================= */
@media (max-width: 991px){

  /* 1) Email link */
  a.contact-email.latin-text{
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0 !important;
  }

  /* 2) Phone (desktop span) */
  #contact .contact-tel-desktop{
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0 !important;
  }

  /* 3) 404 headline */
  .breadcrumbs h2.latin-text,
  h2.latin-text[lang="en"]{
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0 !important;
  }
}
/* =========================================================
   CONTACT (MOBILE ONLY)  force Arial + remove bold-ish look
   Paste at the VERY END of custom.css
   ========================================================= */
@media (max-width: 991px){

  /* Email link inside the email card */
  #contact .info-item p a.contact-email{
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
  }

  /* Phone card: the <p class="latin-text"> itself is bold-ish due to p{font-weight:500} */
  #contact .info-item p.latin-text{
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
  }

  /* Mobile phone link (this is the one you actually SEE on mobile) */
  #contact .info-item p.latin-text a.contact-tel-mobile{
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 300 !important;
  }

  /* (Optional) if desktop span ever shows, keep it consistent */
  #contact .info-item p.latin-text span.contact-tel-desktop{
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 300 !important;
  }
}

/* =========================================
   LATIN TEXT  Arial everywhere (desktop + mobile)
   ========================================= */
.latin-text{
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

/* =========================================================
   CONTACT (DESKTOP)  force lighter Latin email/tel
   ========================================================= */
@media (min-width: 992px){

  /* reduce the base card text weight */
  #contact .info-item p{
    font-weight: 300 !important;
  }

  /* specifically email + phone (Latin bits) */
  #contact .info-item p.latin-text,
  #contact .info-item p.latin-text a,
  #contact .info-item a.contact-email,
  #contact .info-item .contact-tel-desktop{
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    color: rgba(0,0,0,0.55) !important;
  }
}

/* 404 bilingual title control */
.error-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* controls vertical space between Georgian & English */
}

.error-title .geo-text{
  font-size: 28px; /* smaller Georgian */
}

.error-title .eng-text{
  font-size: 30px; /* English slightly smaller */
  font-weight: 400;
}
@media (max-width: 768px){

  .breadcrumbs h2.error-title{
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .breadcrumbs h2.error-title .eng-text{
    margin-top: 4px !important; /* tighter gap */
  }

}

/* =========================
   404 BREADCRUMBS TITLE (GE + EN)  FINAL
   ========================= */

.breadcrumbs h2.error-title{
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  /* both languages same size */
  font-size: 18px !important;     /* <-- change this freely */
  line-height: 1.75 !important;

  /* reduce vertical gap between GE and EN */
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;            /* <-- smaller gap */
}

.breadcrumbs h2.error-title .geo-text,
.breadcrumbs h2.error-title .eng-text{
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Optional: a touch smaller on very small phones */
@media (max-width: 480px){
  .breadcrumbs h2.error-title{
    font-size: 22px !important;
    gap: 3px !important;
  }
}

/* 404 heading: make it larger + lighter */
.breadcrumbs h2.error-title{
  font-weight: 300 !important; /* lighter overall */
  font-size: 36px !important;  /* keep it big */
}

/* English line: Arial + same size + light */
.breadcrumbs h2.error-title .eng-text{
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  font-weight: 300 !important;
  font-size: 26px !important;
}
/* Move 404 title down */
.breadcrumbs h2.error-title{
  margin-top: 60px !important;
}

@media (max-width: 575.98px){

  .breadcrumbs h2.error-title{
    margin-top: 10px !important;  /* reduce overall top space */
  }

  .breadcrumbs h2.error-title .geo-text{
    font-size: 22px !important;
  }

}
/* 404 mobile  remove vertical centering */
@media (max-width: 575.98px){

  .breadcrumbs{
    display: block !important;
    padding-top: 120px !important;   /* adjust this number */
    padding-bottom: 60px !important;
  }

}





/* Chairperson caption */
/* Caption under the chairperson image  same font as breadcrumbs title */
/* Optional: if you want the whole figure slightly lower */
/* Move chairperson section slightly to the right */
#about .about-split {
  padding-left: 20px;
}

/* =========================================
   CHAIRPERSON  MOBILE: FIX IMAGE NOT CENTERED
   ========================================= */
@media (max-width: 991px){

  /* Remove the left-only push that offsets the image */
  #about .about-split{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Force the figure to center its content */
/* Center the image block itself */
  #about .about-img-right{
    margin-left: auto !important;
    margin-right: auto !important;
    background-position: center center !important;
  }
}

@media (max-width: 991px){
}
/* ======================================
   FORCE TEAM PHOTOS TO BE SQUARE
   ====================================== */

#team .member .member-img img {
  border-radius: 0 !important;
}

#team .member .member-img {
  border-radius: 0 !important;
  overflow: hidden;
}

/* ====================================
   BOARD MEMBERS  CENTERED SQUARE IMAGES
   ==================================== */

/* Make image container square and centered */
#team .member .member-img {
  width: 85%;              /* smaller than full column */
  aspect-ratio: 1 / 1;     
  overflow: hidden;
  margin: 0 auto;          /* THIS centers it */
}

/* Make image fill square */
#team .member .member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
}
/* Board member names = same font as "???????????" */
#team.team .member .member-info h4{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
}

/* ====================================
   BOARD MEMBER MODAL  BLACK GLASS STYLE
   ==================================== */

/* Modal background box */
.member-modal {
  background: rgba(0, 0, 0, 0.85);  /* black transparent */
  color: #fff;
  border-radius: 16px;
  padding: 30px;
  border: none;
}

/* Remove default white Bootstrap styling */
.member-modal .modal-body {
  background: transparent;
}

/* Heading */
.member-modal h4 {
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif;
  color: #ffffff;
  margin-bottom: 15px;
}

/* Paragraph text */
.member-modal p {
  color: rgba(255,255,255,0.85);
}

/* Close button white */
.member-modal .btn-close {
  filter: invert(1);
}

/* Darker overlay behind modal */
.modal-backdrop.show {
  opacity: 0.75;
}

.member-modal {
  background: rgba(0, 0, 0, 0.3);   /* softer transparency */
  backdrop-filter: blur(6px);       /* OPTIONAL nice glass effect */
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 16px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,0.15);
}

.member-modal h4 {
  font-family: 'Noto Sans Georgian', sans-serif;
  font-size: 18px;           /* smaller title */
  font-weight: 500;          /* less heavy */
  margin-bottom: 15px;
  text-align: left;          /* left aligned */
}

.member-modal p {
  font-size: 13px;           /* smaller body text */
  font-weight: 400;          /* lighter weight */
  line-height: 1.6;
  text-align: left;          /* LEFT JUSTIFIED */
  margin-bottom: 10px;
}

/* Board Member Modal Georgian Font */

.member-modal {
  font-family: 'Noto Sans Georgian', sans-serif !important;
}

.member-modal h4 {
  font-family: 'Noto Sans Georgian', sans-serif !important;
  font-weight: 600;
}

.member-modal p {
  font-family: 'Noto Sans Georgian', sans-serif !important;
  font-weight: 400;
}

/* Smooth board member names */

#team .member-info h4 {
  font-family: 'Noto Sans Georgian', sans-serif !important;
  font-weight: 500;            /* lighter than bold */
  font-size: 16px;             /* slightly smaller */
  letter-spacing: 0.3px;       /* adds breathing room */
  color: #2f2f2f;              /* softer than pure black */
  margin-top: 12px;
  margin-bottom: 6px;
}

/* =========================
   DESKTOP DROPDOWN TRANSPARENCY
   ========================= */

@media (min-width: 1280px){

  #header .navbar .dropdown ul{
    background: rgba(251, 247, 247, 0.85) !important; /* soft transparent */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

}

/* Numbers in Arial only */
.digits {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Dropdown digits styling */
.navbar .dropdown ul .digits {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.65) !important;

  letter-spacing: 0.5px;
}

/* =========================================
   MOBILE FIX: modal must be above mobile header/menu
   ========================================= */

/* Bootstrap modal always on top */
.modal { 
  z-index: 20000 !important;
}
.modal-backdrop {
  z-index: 19990 !important;
}

/* Kill any header/mobile menu overlay that sits above */
#header,
.header,
.navbar,
.navbar-mobile,
.mobile-nav-toggle,
.mobile-nav-show,
.mobile-nav-hide {
  z-index: 1000 !important;
}

/* If your template uses a class when mobile menu is open */
.mobile-nav-active #header,
.mobile-nav-active .header,
.mobile-nav-active .navbar,
.mobile-nav-active .navbar-mobile {
  z-index: 1000 !important;
}

/* If the close (X) is being hidden under the notch/status bar */
.modal-dialog {
  margin-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
}

.member-modal h4 {
  font-family: var(--heading-font) !important;
}

.member-modal h4 {
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-weight: 400 !important;
}

/* Dim popup text */
.member-modal .modal-body p {
  color: rgba(255, 255, 255, 0.65); /* softer white */
}
.navbar .dropdown ul {
  border-radius: 6px !important;
  overflow: hidden; /* keeps corners clean */
}
/* Desktop: underline only under the word, not under the dropdown arrow */
@media (min-width: 1280px) {

  /* Move the underline end point a bit left for dropdown items only */
  .navbar .dropdown > a:before {
    width: 0 !important;              /* keep default hidden state */
  }

  .navbar .dropdown:hover > a:before,
  .navbar .dropdown > a.active:before {
    width: calc(100% - 22px) !important;  /* <-- tweak 22px if needed */
  }
}

/* ================================
   CHAIRPERSON — FINAL CLEAN FIX
   (keeps full photo, no cropping, caption tight under visible image)
   ================================ */

#about figure.chairperson-figure{
  margin: 0 !important;
}

#about figure.chairperson-figure .about-img-right{
  /* background-image is set inline in HTML */
  width: 100%;
  height: 0;                 /* important: div is empty, so create height via padding */
  padding-top: 75%;          /* 4:3 ratio. Try 66.66% (3:2) or 56.25% (16:9) if needed */
  min-height: 0 !important;

  background-size: contain !important;
  background-position: top center !important;  /* top aligned with text */
  background-repeat: no-repeat !important;
  background-color: transparent !important;

  border-radius: 12px;       /* matches your existing style */
  overflow: hidden;
}

#about figure.chairperson-figure .chairperson-caption{
  margin-top: 2px !important;   /* set to 0px if you want it even tighter */
  text-align: center;
  line-height: 1.45;
}

/* Mobile fine-tune (optional) */
@media (max-width: 991px){
  #about figure.chairperson-figure .chairperson-caption{
    margin-top: 2px !important;
  }
}
/* =========================
   CHAIRPERSON � FINAL FIX
   ========================= */

/* remove any extra push-down */
#about .chairperson-figure{
  margin: 8px 0 0 0 !important;
}

/* IMPORTANT: remove the tall fixed box that creates blank space */
#about .about-img-right{
  min-height: 0 !important;
  height: 0 !important;                 /* so padding creates the height */
  padding-top: 66.6667% !important;     /* 3:2 ratio (adjust below) */

  background-size: contain !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

/* caption tight under the visible image */
#about .chairperson-caption{
  margin-top: 2px !important;           /* set 0 if you want touching */
  padding-top: 0 !important;
  text-align: center;
}


/* =========================================
   CHAIRPERSON CAPTION � FORCE BPG NINO MTAVRULI
   ========================================= */

#about .chairperson-caption{
  font-family: "BPG Nino Mtavruli" !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;

  transform: none !important;   /* safety */
  margin-top: 8px !important;   /* adjust freely */
  text-align: center;
}

/* ===== CHAIRPERSON CAPTION: spacing fix (guaranteed) ===== */
#about figure.chairperson-figure{
  display: flex !important;
  flex-direction: column !important;
}

#about figure.chairperson-figure .about-img-right{
  margin-bottom: 0 !important; /* ensure no hidden bottom margin */
}

/* Put the spacing on padding (never collapses), not margin */
#about figure.chairperson-figure .chairperson-caption{
  display: block !important;
  padding-top: 12px !important;   /* <<< change this (8 / 10 / 12 / 14) */
  margin-top: 0 !important;       /* avoid margin-collapsing weirdness */
  text-align: center;
  line-height: 1.45;
}
/* =========================================
   CHAIRPERSON CAPTION � SIZE CONTROL
   ========================================= */

#about .chairperson-caption{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-size: 14px !important;     /* ? change this number */
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

/* =========================================
   CHAIRPERSON CAPTION � MOBILE SIZE ONLY
   ========================================= */

@media (max-width: 991px){

  #about .chairperson-caption{
    font-size: 12.5px !important;   /* adjust: 11px�13px */
    line-height: 1.35 !important;
  }

}
/* Move ONLY the image column down/up by a few pixels */
#about .about-split > .col-lg-4{
  margin-top: 56px !important;   /* try 1px / 2px / -1px */
}

/* Make board member images feel clickable */
#team .member .member-img{
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#team .member:hover .member-img{
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}
/* === CLICK CUE OVERLAY (FIXED) === */

/* The image wrapper must be the positioning context */
#team .member .member-img{
  position: relative !important;
  overflow: hidden !important;
}

/* Ensure the actual <img> sits BELOW the overlay */
#team .member .member-img img{
  position: relative;
  z-index: 1;
  display: block;
}

/* Overlay layer sits ABOVE the img */
#team .member .member-img::after{
  content: "\10D8\10EE\10D8\10DA\10D4\10D7  \10D1\10D8\10DD\10D2\10E0\10D0\10E4\10D8\10D0";
 /* or "View Bio" */
  position: absolute;
  inset: 0;
  z-index: 2;

  background: rgba(0,0,0,0.45);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;

  opacity: 0;
  transition: opacity 0.25s ease;

  pointer-events: none; /* overlay won't block clicking */
}

/* Show overlay on hover */
#team .member:hover .member-img::after{
  opacity: 1;
}

#team .member .member-img::after{
  word-spacing: 2.5px;   /* try 8px�20px */
}

/* =========================================
   BOARD MEMBER OVERLAY � MOBILE FIX
   ========================================= */
@media (max-width: 768px){

  #team .member .member-img::after{
    font-size: 11px !important;     /* reduce size */
    word-spacing: 4px !important;   /* reduce gap */
    padding: 0 8px;                 /* prevent edge overflow */
    text-align: center;
  }

}

/* =========================================================
   FLOATING HEADER dropdown underline thickness (FINAL OVERRIDE)
   ========================================================= */
@media (min-width: 1280px){

  /* Only when header is floating/sticky/scrolled */
  #header.sticked #navbar.navbar .dropdown ul a,
  #header.is-floating #navbar.navbar .dropdown ul a,
  #header.header-scrolled #navbar.navbar .dropdown ul a{
    background-image: linear-gradient(#9A1D21, #9A1D21) !important;
    background-repeat: no-repeat !important;
    background-position: 0 100% !important;
    background-size: 0% 2px !important;   /* <<< thickness here */
  }

  #header.sticked #navbar.navbar .dropdown ul a:hover,
  #header.is-floating #navbar.navbar .dropdown ul a:hover,
  #header.header-scrolled #navbar.navbar .dropdown ul a:hover,
  #header.sticked #navbar.navbar .dropdown ul li:hover > a,
  #header.is-floating #navbar.navbar .dropdown ul li:hover > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li:hover > a,
  #header.sticked #navbar.navbar .dropdown ul li.active > a,
  #header.is-floating #navbar.navbar .dropdown ul li.active > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li.active > a{
    background-size: 100% 1px !important; /* <<< thickness here */
  }
}
/* =========================================
   STATIC HEADER dropdown underline = 1px
   ========================================= */
@media (min-width: 1280px){

  /* Only when header is NOT floating/sticky */
  #header:not(.sticked):not(.is-floating):not(.header-scrolled)
  #navbar.navbar .dropdown ul a{
    background-size: 0% 1px !important;  /* thickness */
  }

  #header:not(.sticked):not(.is-floating):not(.header-scrolled)
  #navbar.navbar .dropdown ul a:hover,
  #header:not(.sticked):not(.is-floating):not(.header-scrolled)
  #navbar.navbar .dropdown ul li:hover > a,
  #header:not(.sticked):not(.is-floating):not(.header-scrolled)
  #navbar.navbar .dropdown ul li.active > a{
    background-size: 100% 1px !important; /* thickness */
  }
}
/* ===== FOOTER PARTNER LOGOS � ALWAYS HORIZONTAL ===== */
#footer .footer-partners-logos{
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 30px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#footer .footer-partners-logos > li{
  flex: 0 1 180px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  min-width: 0 !important;
}

#footer .footer-partners-logos img{
  display: block !important;
  height: 70px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 auto 10px !important;
}

#footer .footer-partners-logos .partner-desc{
  margin: 0 !important;
  line-height: 1.35 !important;
}

@media (max-width: 991px){
  #footer .footer-partners-logos{
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }

  #footer .footer-partners-logos > li{
    flex: 1 1 0 !important;
  }

  #footer .footer-partners-logos img{
    height: 50px !important;
  }

  #footer .footer-partners-logos .partner-desc{
    font-size: 12px !important;
  }
}
/* =========================================
   DROPDOWN � FIXED WIDTH (STABLE MENU)
   ========================================= */

#header #navbar.navbar .dropdown ul{
  min-width: 240px !important;   /* controls dropdown width */
  width: 240px !important;
}

/* allow long items to wrap nicely */
#header #navbar.navbar .dropdown ul a{
  white-space: normal !important;
  line-height: 1.45;
}


/* ABOUT PAGE � balanced mobile text margins */
@media (max-width: 991px){

  #about .container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #about .our-story{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

}
/* ABOUT PAGE � reduce top and bottom text spacing */
@media (max-width: 991px){

  /* Reduce space above and below the section */
  #about{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* Remove extra space inside the text block */
  #about .our-story{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Tighten paragraph spacing */
  #about .our-story p{
    margin-bottom: 14px !important;
  }

}

/* CHAIRPERSON PAGE � reduce gap between caption and text on mobile */
@media (max-width: 991px){
  #about .about-split{
    --bs-gutter-y: 22px !important;
  }
}


/* CHAIRPERSON PAGE � mobile: tiny gap below breadcrumbs */
@media (max-width: 991px){

  /* only affects the page that has the chairperson figure */
  #about .chairperson-figure{
    margin-top: 8px !important;   /* try 6px or 10px */
  }
}

/* CHAIRPERSON PAGE � mobile: add a small gap below breadcrumbs */
@media (max-width: 991px){

  body.chairperson-page #about{
    padding-top: 52px !important;   /* try 10px�14px */
  }

  body.chairperson-page #about .about-split > .col-lg-4{
    margin-top: 0 !important;
  }

  body.chairperson-page #about .chairperson-figure{
    margin-top: 0 !important;
  }

}

/* =========================================================
   MOBILE MENU — ARCHIVAL / INSTITUTIONAL REDESIGN
   Put this at the VERY END of custom.css
   ========================================================= */
@media (max-width: 1279px) {

  :root{
    --menu-bg: #131110;
    --menu-panel-top: rgba(28, 24, 22, 0.96);
    --menu-panel-bottom: rgba(18, 15, 14, 0.98);
    --menu-text: rgba(255, 248, 240, 0.92);
    --menu-text-soft: rgba(255, 248, 240, 0.72);
    --menu-line: rgba(255, 248, 240, 0.12);
    --menu-accent: #9A1D21;
    --menu-accent-soft: rgba(154, 29, 33, 0.18);
  }

  #header{
    z-index: 10020 !important;
  }

  body:not(.mobile-nav-active) .mobile-nav-show{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
  }

  body:not(.mobile-nav-active) #header.sticked .mobile-nav-show,
  body:not(.mobile-nav-active) #header.is-floating .mobile-nav-show,
  body:not(.mobile-nav-active) #header.header-scrolled .mobile-nav-show{
    color: #000 !important;
  }

  body.mobile-nav-active .navbar{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10000 !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.40) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  body.mobile-nav-active #navbar > ul{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(88vw, 380px) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 104px 22px 34px 22px !important;
    list-style: none !important;
    background: linear-gradient(180deg, var(--menu-panel-top), var(--menu-panel-bottom)) !important;
    box-shadow: -18px 0 40px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
  }

  body.mobile-nav-active #navbar ul,
  body.mobile-nav-active #navbar li,
  body.mobile-nav-active #navbar .dropdown ul{
    list-style: none !important;
    background-image: none !important;
    padding-left: 0 !important;
  }

  body.mobile-nav-active #navbar > ul > li{
    margin: 0 !important;
    border-bottom: 1px solid var(--menu-line) !important;
  }

  body.mobile-nav-active #navbar > ul > li > a,
  body.mobile-nav-active #navbar > ul > li > a:focus{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 18px 2px !important;
    margin: 0 !important;
    color: var(--menu-text) !important;
    background: transparent !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  body.mobile-nav-active #navbar > ul > li > a::before,
  body.mobile-nav-active #navbar > ul > li > a::after,
  body.mobile-nav-active #navbar .dropdown ul a::before,
  body.mobile-nav-active #navbar .dropdown ul a::after{
    content: none !important;
    display: none !important;
  }

  body.mobile-nav-active #navbar a{
    background-image: none !important;
    text-shadow: none !important;
  }

  body.mobile-nav-active #navbar .dropdown > a span{
    color: inherit !important;
  }

  body.mobile-nav-active #navbar .dropdown > a .dropdown-indicator{
    flex: 0 0 auto !important;
    font-size: 15px !important;
    color: rgba(255,248,240,0.70) !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
  }

  body.mobile-nav-active #navbar > ul > li > a.active,
  body.mobile-nav-active #navbar > ul > li:hover > a,
  body.mobile-nav-active #navbar > ul > li:has(> ul.dropdown-active) > a{
    color: #ffffff !important;
  }

  body.mobile-nav-active #navbar > ul > li:has(> ul.dropdown-active) > a .dropdown-indicator{
    transform: rotate(180deg) !important;
    color: rgba(255,255,255,0.90) !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul{
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 6px 0 6px 14px !important;
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-left: 2px solid rgba(154, 29, 33, 0.65) !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul.dropdown-active{
    display: block !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul > li{
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul > li:last-child{
    border-bottom: 0 !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul > li > a,
  body.mobile-nav-active #navbar .dropdown > ul > li > a:focus{
    display: block !important;
    width: 100% !important;
    padding: 12px 12px 12px 10px !important;
    margin: 0 !important;
    color: var(--menu-text-soft) !important;
    background: transparent !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: "Noto Sans Georgian", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul > li > a:hover,
  body.mobile-nav-active #navbar .dropdown > ul > li:hover > a{
    color: #fff !important;
    background: rgba(255,255,255,0.04) !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul > li > a.active,
  body.mobile-nav-active #navbar .dropdown > ul > li.active > a{
    color: #fff !important;
    background: rgba(154, 29, 33, 0.12) !important;
  }

  body.mobile-nav-active .mobile-nav-hide{
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    right: 18px !important;
    z-index: 10030 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    font-size: 26px !important;
    line-height: 1 !important;
  }

  body.mobile-nav-active .mobile-nav-hide i{
    color: #fff !important;
  }

  body.mobile-nav-active .mobile-nav-show{
    display: none !important;
  }

  body.mobile-nav-active #navbar > ul > li:first-child{
    border-top: 1px solid var(--menu-line) !important;
  }

  @media (max-width: 420px){
    body.mobile-nav-active #navbar > ul{
      width: 90vw !important;
      padding: 98px 18px 28px 18px !important;
    }

    body.mobile-nav-active #navbar > ul > li > a{
      font-size: 17px !important;
      padding: 17px 2px !important;
    }

    body.mobile-nav-active #navbar .dropdown > ul > li > a{
      font-size: 14px !important;
    }
  }
}
/* =========================================================
   MOBILE MENU — FINAL UNIFIED FIX
   Same look in normal header + floating header
   Put this at the VERY END of custom.css
   ========================================================= */
@media (max-width: 1279px){

  /* 1) Header stays above page content but below the open-panel controls */
  #header{
    z-index: 10020 !important;
  }

  /* 2) Closed state: hamburger behaves normally */
  body:not(.mobile-nav-active) .mobile-nav-show{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
  }

  /* 3) Closed state: hamburger black on light floating header */
  body:not(.mobile-nav-active) #header.sticked .mobile-nav-show,
  body:not(.mobile-nav-active) #header.is-floating .mobile-nav-show,
  body:not(.mobile-nav-active) #header.header-scrolled .mobile-nav-show{
    color: #000 !important;
  }

  /* 4) OPEN MENU: force the FULL overlay to be dark in ALL header states */
  body.mobile-nav-active #navbar.navbar{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 10000 !important;

    background: rgba(0, 0, 0, 0.46) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  body.mobile-nav-active #header.sticked #navbar.navbar,
  body.mobile-nav-active #header.is-floating #navbar.navbar,
  body.mobile-nav-active #header.header-scrolled #navbar.navbar{
    background: rgba(0, 0, 0, 0.46) !important;
  }

  /* kill any pseudo-overlay differences */
  body.mobile-nav-active #navbar.navbar::before,
  body.mobile-nav-active #navbar.navbar::after{
    content: none !important;
    display: none !important;
  }

  /* 5) RIGHT-SIDE PANEL: identical in all states */
  body.mobile-nav-active #navbar > ul{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;

    width: min(88vw, 380px) !important;
    height: 100vh !important;
    overflow-y: auto !important;

    margin: 0 !important;
    padding: 104px 22px 34px 22px !important;
    list-style: none !important;

    background: linear-gradient(
      180deg,
      rgba(28, 24, 22, 0.97) 0%,
      rgba(18, 15, 14, 0.98) 100%
    ) !important;

    border-left: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow:
      -18px 0 40px rgba(0,0,0,0.34),
      0 0 0 1px rgba(255,255,255,0.04) inset !important;
  }

  body.mobile-nav-active #header.sticked #navbar > ul,
  body.mobile-nav-active #header.is-floating #navbar > ul,
  body.mobile-nav-active #header.header-scrolled #navbar > ul{
    background: linear-gradient(
      180deg,
      rgba(28, 24, 22, 0.97) 0%,
      rgba(18, 15, 14, 0.98) 100%
    ) !important;
  }

  /* 6) Remove bullets / template mobile leftovers */
  body.mobile-nav-active #navbar ul,
  body.mobile-nav-active #navbar li,
  body.mobile-nav-active #navbar .dropdown ul{
    list-style: none !important;
    background-image: none !important;
    padding-left: 0 !important;
  }

  /* 7) Top-level items */
  body.mobile-nav-active #navbar > ul > li{
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,248,240,0.12) !important;
  }

  body.mobile-nav-active #navbar > ul > li:first-child{
    border-top: 1px solid rgba(255,248,240,0.12) !important;
  }

  /* 8) Top-level links: ALWAYS same colour, never red */
  body.mobile-nav-active #navbar > ul > li > a,
  body.mobile-nav-active #navbar > ul > li > a:focus,
  body.mobile-nav-active #header.sticked #navbar > ul > li > a,
  body.mobile-nav-active #header.is-floating #navbar > ul > li > a,
  body.mobile-nav-active #header.header-scrolled #navbar > ul > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;

    width: 100% !important;
    padding: 18px 2px !important;
    margin: 0 !important;

    color: rgba(255,248,240,0.92) !important;
    background: transparent !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;

    font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  /* 9) Kill desktop underline / red hover logic inside mobile panel */
  body.mobile-nav-active #navbar a::before,
  body.mobile-nav-active #navbar a::after,
  body.mobile-nav-active #navbar .dropdown ul a::before,
  body.mobile-nav-active #navbar .dropdown ul a::after{
    content: none !important;
    display: none !important;
  }

  body.mobile-nav-active #navbar a,
  body.mobile-nav-active #navbar a:hover,
  body.mobile-nav-active #navbar a:focus,
  body.mobile-nav-active #navbar a:active,
  body.mobile-nav-active #navbar .active,
  body.mobile-nav-active #navbar .active:focus,
  body.mobile-nav-active #navbar li:hover > a,
  body.mobile-nav-active #header.sticked #navbar a,
  body.mobile-nav-active #header.sticked #navbar a:hover,
  body.mobile-nav-active #header.is-floating #navbar a,
  body.mobile-nav-active #header.is-floating #navbar a:hover,
  body.mobile-nav-active #header.header-scrolled #navbar a,
  body.mobile-nav-active #header.header-scrolled #navbar a:hover{
    color: rgba(255,248,240,0.92) !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /* 10) Chevron */
  body.mobile-nav-active #navbar .dropdown > a .dropdown-indicator{
    flex: 0 0 auto !important;
    font-size: 15px !important;
    color: rgba(255,248,240,0.72) !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
  }

  body.mobile-nav-active #navbar .dropdown:has(> ul.dropdown-active) > a .dropdown-indicator{
    transform: rotate(180deg) !important;
    color: rgba(255,255,255,0.92) !important;
  }

  /* 11) Submenu wrapper */
  body.mobile-nav-active #navbar .dropdown > ul{
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 14px 0 !important;
    padding: 6px 0 6px 14px !important;

    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-left: 2px solid rgba(154, 29, 33, 0.65) !important;
    border-radius: 0 14px 14px 0 !important;

    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul.dropdown-active{
    display: block !important;
  }

  /* 12) Submenu items */
  body.mobile-nav-active #navbar .dropdown > ul > li{
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul > li:last-child{
    border-bottom: 0 !important;
  }

  /* 13) Submenu links: ALWAYS same colour, never red */
  body.mobile-nav-active #navbar .dropdown > ul > li > a,
  body.mobile-nav-active #navbar .dropdown > ul > li > a:focus,
  body.mobile-nav-active #header.sticked #navbar .dropdown > ul > li > a,
  body.mobile-nav-active #header.is-floating #navbar .dropdown > ul > li > a,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown > ul > li > a{
    display: block !important;
    width: 100% !important;

    padding: 12px 12px 12px 10px !important;
    margin: 0 !important;

    color: rgba(255,248,240,0.74) !important;
    background: transparent !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: "Noto Sans Georgian", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul > li > a:hover,

  body.mobile-nav-active #navbar .dropdown > ul > li:hover > a,
  body.mobile-nav-active #header.sticked #navbar .dropdown > ul > li > a:hover,
  body.mobile-nav-active #header.is-floating #navbar .dropdown > ul > li > a:hover,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown > ul > li > a:hover{
    color: #fff !important;
    background: rgba(255,255,255,0.04) !important;
  }

  /* active submenu item — subtle background, not red text */
  body.mobile-nav-active #navbar .dropdown > ul > li.active > a,
  body.mobile-nav-active #navbar .dropdown > ul > li > a.active{
    color: #fff !important;
    background: rgba(154, 29, 33, 0.12) !important;
  }

  /* 14) Close button */
  body.mobile-nav-active .mobile-nav-hide{
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    right: 18px !important;
    z-index: 10030 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;

    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;

    font-size: 26px !important;
    line-height: 1 !important;
  }

  body.mobile-nav-active .mobile-nav-hide i{
    color: #fff !important;
  }

  body.mobile-nav-active .mobile-nav-show{
    display: none !important;
  }

  /* 15) Small screens */
  @media (max-width: 420px){
    body.mobile-nav-active #navbar > ul{
      width: 90vw !important;
      padding: 98px 18px 28px 18px !important;
    }

    body.mobile-nav-active #navbar > ul > li > a{
      font-size: 17px !important;
      padding: 17px 2px !important;
    }

    body.mobile-nav-active #navbar .dropdown > ul > li > a{
      font-size: 14px !important;
    }
  }
}
/* =========================================================
   MOBILE MENU — open parent item stays WHITE in floating header
   Put this at the VERY END of custom.css
   ========================================================= */
@media (max-width: 1279px){

  /* top-level parent item when its submenu is open */
  body.mobile-nav-active #navbar .dropdown:has(> ul.dropdown-active) > a,
  body.mobile-nav-active #navbar .dropdown:has(> ul.dropdown-active) > a:focus,
  body.mobile-nav-active #header.sticked #navbar .dropdown:has(> ul.dropdown-active) > a,
  body.mobile-nav-active #header.is-floating #navbar .dropdown:has(> ul.dropdown-active) > a,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown:has(> ul.dropdown-active) > a,
  body.mobile-nav-active #header.sticked #navbar .dropdown:has(> ul.dropdown-active) > a:hover,
  body.mobile-nav-active #header.is-floating #navbar .dropdown:has(> ul.dropdown-active) > a:hover,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown:has(> ul.dropdown-active) > a:hover{
    color: #ffffff !important;
    background: transparent !important;
    background-image: none !important;
  }

  /* optional: keep all pressed/active top-level items white in mobile menu */
  body.mobile-nav-active #navbar > ul > li > a:hover,
  body.mobile-nav-active #navbar > ul > li > a:focus,
  body.mobile-nav-active #navbar > ul > li > a:active,
  body.mobile-nav-active #navbar > ul > li.active > a,
  body.mobile-nav-active #header.sticked #navbar > ul > li > a:hover,
  body.mobile-nav-active #header.is-floating #navbar > ul > li > a:hover,
  body.mobile-nav-active #header.header-scrolled #navbar > ul > li > a:hover,
  body.mobile-nav-active #header.sticked #navbar > ul > li > a:focus,
  body.mobile-nav-active #header.is-floating #navbar > ul > li > a:focus,
  body.mobile-nav-active #header.header-scrolled #navbar > ul > li > a:focus{
    color: rgba(255,248,240,0.92) !important;
  }
}
/* =========================================================
   MOBILE MENU — same transparency in static and floating header
   ========================================================= */
@media (max-width: 1279px){

  /* dark overlay behind the panel */
  body.mobile-nav-active #navbar.navbar,
  body.mobile-nav-active #header.sticked #navbar.navbar,
  body.mobile-nav-active #header.is-floating #navbar.navbar,
  body.mobile-nav-active #header.header-scrolled #navbar.navbar{
    background: rgba(0,0,0,0.46) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  /* right-side menu panel */
  body.mobile-nav-active #navbar > ul,
  body.mobile-nav-active #header.sticked #navbar > ul,
  body.mobile-nav-active #header.is-floating #navbar > ul,
  body.mobile-nav-active #header.header-scrolled #navbar > ul{
    background: linear-gradient(
      180deg,
      rgba(28,24,22,0.97),
      rgba(18,15,14,0.98)
    ) !important;
  }

}
/* =====================================================
   HERO SLIDESHOW TEXT — BRIGHTER ON MOBILE (FINAL FIX)
   ===================================================== */
@media (max-width: 768px){

  #hero h2,
  #hero h2 span{
    color: #ffffff !important;
    text-shadow:
      0 3px 10px rgba(0,0,0,0.75),
      0 0 25px rgba(0,0,0,0.45) !important;
  }

  #hero .btn-get-started{
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.65) !important;
  }

}


/* ==========================================
   GLOBAL BUTTON HOVER EFFECT
   left → right colour fill
   ========================================== */

.btn,
.btn-get-started,
.read-more,
button{
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color .35s ease;
}

/* sliding background */
.btn::before,
.btn-get-started::before,
.read-more::before,
button::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:0%;
  height:100%;
  background:#9A1D21; /* main accent colour */
  z-index:-1;
  transition: width .35s ease;
}

/* hover animation */
.btn:hover::before,
.btn-get-started:hover::before,
.read-more:hover::before,
button:hover::before{
  width:100%;
}

/* text colour after fill */
.btn:hover,
.btn-get-started:hover,
.read-more:hover,
button:hover{
  color:#fff !important;
}
/* =====================================================
   FOOTER — fix unequal left/right visual spacing
   ===================================================== */

/* cancel old "centered/fixed-width" behavior on the partners wrapper */
#footer .footer-right.footer-partners{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* make the partner logos spread naturally across the right column */
#footer .footer-partners-logos{
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* each logo block */
#footer .footer-partners-logos > li{
  flex: 1 1 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* keep logo + text centered inside each item */
#footer .footer-partners-logos > li,
#footer .footer-partners-logos .partner-desc{
  text-align: center !important;
}

/* optional: make footer row align more evenly */
#footer .footer-row{
  align-items: flex-start !important;
}
/* FOOTER — desktop: tiny right nudge only */
@media (min-width: 992px){
  #footer .footer-partners{
    position: relative;
    left: 40px;   /* try 16px / 20px / 24px / 28px */
  }
}
@media (max-width: 1279px){
  body.mobile-nav-active #navbar .dropdown > ul > li > a,
  body.mobile-nav-active #navbar .dropdown > ul > li > a:focus,
  body.mobile-nav-active #header.sticked #navbar .dropdown > ul > li > a,
  body.mobile-nav-active #header.is-floating #navbar .dropdown > ul > li > a,
  body.mobile-nav-active #header.header-scrolled #navbar .dropdown > ul > li > a{
    font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
  }
}
/* =========================================
   DROPDOWN — keep submenu items on one line
   ========================================= */
#header #navbar.navbar .dropdown ul{
  width: auto !important;
  min-width: 280px !important;   /* increase from 240 */
}

#header #navbar.navbar .dropdown ul a{
  white-space: nowrap !important; /* prevent line break */
  line-height: 1.35 !important;
}
/* =========================================
   DROPDOWN FONT SIZE — keep same in floating header
   ========================================= */

#header #navbar.navbar .dropdown ul a,
#header.is-floating #navbar.navbar .dropdown ul a,
#header.sticked #navbar.navbar .dropdown ul a,
#header.header-scrolled #navbar.navbar .dropdown ul a{
  font-size: 14px !important;
  line-height: 1.35 !important;
}
/* =========================================
   DROPDOWN BACKGROUND — keep same in floating header
   ========================================= */

#header #navbar.navbar .dropdown ul,
#header.is-floating #navbar.navbar .dropdown ul,
#header.sticked #navbar.navbar .dropdown ul,
#header.header-scrolled #navbar.navbar .dropdown ul{
  background: #000 !important;   /* same black as static menu */
}
/* =========================================
   DROPDOWN TEXT COLOR — keep same in floating header
   ========================================= */

#header #navbar.navbar .dropdown ul a,
#header.is-floating #navbar.navbar .dropdown ul a,
#header.sticked #navbar.navbar .dropdown ul a,
#header.header-scrolled #navbar.navbar .dropdown ul a{
  color: #ffffff !important;   /* same white as static submenu */
}
/* Fix: larger top-level menu font in mobile when header is NOT floating/sticky */
@media (max-width: 1279px) {
  #header:not(.sticked):not(.is-floating):not(.header-scrolled) #navbar > ul > li > a {
    font-size: 18px !important;
  }
}




/* =========================================
   REMOVE DROPDOWN UNDERLINE ON HOVER (FINAL)
   ========================================= */

/* Kill underline completely */
#header #navbar.navbar .dropdown ul a,
#header #navbar.navbar .dropdown ul a:hover,
#header #navbar.navbar .dropdown ul li:hover > a,
#header #navbar.navbar .dropdown ul li.active > a {
  
  background-image: none !important;
  background-size: 0 !important;
  text-decoration: none !important;
}
/* =========================================
   DESKTOP FLOATING HEADER:
   submenu hover = brighter white (NOT black)
   ========================================= */
@media (min-width: 1280px){

  /* default submenu text (slightly dim) */
  #header.sticked #navbar.navbar .dropdown ul a,
  #header.is-floating #navbar.navbar .dropdown ul a,
  #header.header-scrolled #navbar.navbar .dropdown ul a{
    color: rgba(255,255,255,0.78) !important;
  }

  /* hover = brighter white */
  #header.sticked #navbar.navbar .dropdown ul a:hover,
  #header.is-floating #navbar.navbar .dropdown ul a:hover,
  #header.header-scrolled #navbar.navbar .dropdown ul a:hover,
  #header.sticked #navbar.navbar .dropdown ul li:hover > a,
  #header.is-floating #navbar.navbar .dropdown ul li:hover > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li:hover > a{
    color: rgba(255,255,255,0.96) !important;
  }
}
/* =========================================
   DESKTOP DROPDOWN FLICKER FIX
   ========================================= */
@media (min-width: 1280px){

  /* keep dropdown attached to parent */
  #header #navbar.navbar .dropdown{
    position: relative !important;
  }

  /* make submenu stable */
  #header #navbar.navbar .dropdown ul{
    margin-top: 0 !important;
    top: 100% !important;
    transform: none !important;
  }
}

  #header.sticked #navbar.navbar .dropdown ul,
  #header.is-floating #navbar.navbar .dropdown ul,
  #header.header-scrolled #navbar.navbar .dropdown ul{

    background: rgba(0, 0, 0, 0.75) !important; /* ← control transparency */

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* =========================================
   DESKTOP FLOATING SUBMENU — NO RED UNDERLINE EVER
   ========================================= */
@media (min-width: 1280px){

  /* kill every underline source */
  #header.sticked #navbar.navbar .dropdown ul a,
  #header.is-floating #navbar.navbar .dropdown ul a,
  #header.header-scrolled #navbar.navbar .dropdown ul a,
  #header.sticked #navbar.navbar .dropdown ul a:hover,
  #header.is-floating #navbar.navbar .dropdown ul a:hover,
  #header.header-scrolled #navbar.navbar .dropdown ul a:hover,
  #header.sticked #navbar.navbar .dropdown ul li:hover > a,
  #header.is-floating #navbar.navbar .dropdown ul li:hover > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li:hover > a,
  #header.sticked #navbar.navbar .dropdown ul li.active > a,
  #header.is-floating #navbar.navbar .dropdown ul li.active > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li.active > a{
    background-image: none !important;
    background-size: 0 !important;
    transition: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
  }

  /* kill pseudo-element underline too */
  #header.sticked #navbar.navbar .dropdown ul a::before,
  #header.is-floating #navbar.navbar .dropdown ul a::before,
  #header.header-scrolled #navbar.navbar .dropdown ul a::before,
  #header.sticked #navbar.navbar .dropdown ul a::after,
  #header.is-floating #navbar.navbar .dropdown ul a::after,
  #header.header-scrolled #navbar.navbar .dropdown ul a::after{
    content: none !important;
    display: none !important;
  }

  /* keep text behaviour only */
  #header.sticked #navbar.navbar .dropdown ul a,
  #header.is-floating #navbar.navbar .dropdown ul a,
  #header.header-scrolled #navbar.navbar .dropdown ul a{
    color: rgba(255,255,255,0.78) !important;
  }

  #header.sticked #navbar.navbar .dropdown ul a:hover,
  #header.is-floating #navbar.navbar .dropdown ul a:hover,
  #header.header-scrolled #navbar.navbar .dropdown ul a:hover,
  #header.sticked #navbar.navbar .dropdown ul li:hover > a,
  #header.is-floating #navbar.navbar .dropdown ul li:hover > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li:hover > a{
    color: rgba(255,255,255,0.96) !important;
  }
}

/* =========================================
   DESKTOP FLOATING HEADER — WHITE DROPDOWN
   ========================================= */
@media (min-width: 1280px){

  #header.sticked #navbar.navbar .dropdown ul,
  #header.is-floating #navbar.navbar .dropdown ul,
  #header.header-scrolled #navbar.navbar .dropdown ul{
    background: rgba(255, 255, 255, 0.96) !important; /* tweak opacity here */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* submenu text for white background */
  #header.sticked #navbar.navbar .dropdown ul a,
  #header.is-floating #navbar.navbar .dropdown ul a,
  #header.header-scrolled #navbar.navbar .dropdown ul a{
    color: rgba(0,0,0,0.78) !important;
  }

  /* hover text slightly darker */
  #header.sticked #navbar.navbar .dropdown ul a:hover,
  #header.is-floating #navbar.navbar .dropdown ul a:hover,
  #header.header-scrolled #navbar.navbar .dropdown ul a:hover,
  #header.sticked #navbar.navbar .dropdown ul li:hover > a,
  #header.is-floating #navbar.navbar .dropdown ul li:hover > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li:hover > a{
    color: #000 !important;
  }
}

/* =========================================
   DESKTOP NAV — MODERN NO-UNDERLINE STYLE
   ========================================= */
@media (min-width: 1280px){

  /* top-level links */
  #header #navbar.navbar > ul > li > a{
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;

    padding: 10px 14px !important;
    border-radius: 10px !important;

    text-decoration: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;

    transition:
      color 0.22s ease,
      background-color 0.22s ease,
      transform 0.22s ease !important;
  }

  /* kill underline sources */
  #header #navbar.navbar > ul > li > a::before,
  #header #navbar.navbar > ul > li > a::after,
  #header #navbar.navbar .dropdown ul a::before,
  #header #navbar.navbar .dropdown ul a::after{
    content: none !important;
    display: none !important;
  }

  /* floating/sticky header top-level links */
  #header.sticked #navbar.navbar > ul > li > a,
  #header.is-floating #navbar.navbar > ul > li > a,
  #header.header-scrolled #navbar.navbar > ul > li > a{
    color: rgba(0,0,0,0.78) !important;
  }

  /* hover */
  #header.sticked #navbar.navbar > ul > li > a:hover,
  #header.is-floating #navbar.navbar > ul > li > a:hover,
  #header.header-scrolled #navbar.navbar > ul > li > a:hover{
    color: #000 !important;
    background: rgba(0,0,0,0.06) !important;
    transform: translateY(-1px);
  }

  /* active/current */
  #header.sticked #navbar.navbar > ul > li > a.active,
  #header.is-floating #navbar.navbar > ul > li > a.active,
  #header.header-scrolled #navbar.navbar > ul > li > a.active{
    color: #000 !important;
    background: rgba(0,0,0,0.08) !important;
  }

  /* dropdown submenu links */
  #header #navbar.navbar .dropdown ul a{
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;

    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;

    transition:
      color 0.2s ease,
      background-color 0.2s ease !important;
  }

  /* submenu hover */
  #header.sticked #navbar.navbar .dropdown ul a:hover,
  #header.is-floating #navbar.navbar .dropdown ul a:hover,
  #header.header-scrolled #navbar.navbar .dropdown ul a:hover,
  #header.sticked #navbar.navbar .dropdown ul li:hover > a,
  #header.is-floating #navbar.navbar .dropdown ul li:hover > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li:hover > a{
    color: #000 !important;
    background: rgba(0,0,0,0.05) !important;
  }

  /* submenu active */
  #header.sticked #navbar.navbar .dropdown ul li.active > a,
  #header.is-floating #navbar.navbar .dropdown ul li.active > a,
  #header.header-scrolled #navbar.navbar .dropdown ul li.active > a{
    color: #000 !important;
    background: rgba(0,0,0,0.07) !important;
  }
}
/* =========================================
   DESKTOP TOP HEADER — ACTIVE LINK VISIBLE
   ========================================= */
@media (min-width: 1280px){

  /* top of page / non-floating header */
  #header:not(.sticked):not(.is-floating):not(.header-scrolled) #navbar.navbar > ul > li > a{
    color: rgba(255,255,255,0.78) !important;
  }

  /* active link */
  #header:not(.sticked):not(.is-floating):not(.header-scrolled) #navbar.navbar > ul > li > a.active{
    color: #ffffff !important;
    background: rgba(255,255,255,0.10) !important; /* subtle visible pill */
    border-radius: 10px !important;
  }

  /* hover */
  #header:not(.sticked):not(.is-floating):not(.header-scrolled) #navbar.navbar > ul > li > a:hover{
    color: #ffffff !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 10px !important;
  }
}

/* remove extra bottom space from common last elements */
section p:last-child,
section ul:last-child,
section ol:last-child,
section .row:last-child,
section .container:last-child{
  margin-bottom: 0 !important;
}

/* ===== FIX: remove excessive space under chairperson text ===== */
body.chairperson-page #about{
  padding-bottom: 20px !important;
}

/* Optional: if still too much, lower to 10px */
/* body.chairperson-page #about{ padding-bottom: 10px !important; } */

/* ===== CHAIRPERSON PAGE — MOVE CONTENT UP ===== */
body.chairperson-page #about{
  padding-top: 30px !important;   /* was ~60–70px */
}

body.chairperson-page .breadcrumbs{
  margin-bottom: 10px !important; /* reduces gap under title */
}
/* ===== ABOUT PAGE — REDUCE SPACE ABOVE & BELOW HERO ===== */

/* Reduce space between header/breadcrumb and content */
body.about-page #about{
  padding-top: 30px !important;   /* adjust: 20–40px */
  padding-bottom: 30px !important; /* reduce space before footer */
}

/* Reduce gap under breadcrumb (hero-like banner) */
body.about-page .breadcrumbs{
  margin-bottom: 10px !important;
}
/* ===== HERO BUTTON — DESKTOP + MOBILE ===== */
body.home #hero h2{
  margin-bottom: 10px !important;
}

body.home #hero .hero-cta{
  margin-top: 8px !important;
}

/* =========================================
   HERO BUTTON — CLEAN FINAL
   ========================================= */

#hero .btn-get-started.hero-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 40px;
  padding: 0 14px !important;

  border: 1px solid rgba(154,29,33,0.95);
  border-radius: 6px !important;
  background: transparent;

  font-family: "BPG Nino Mtavruli","Noto Sans Georgian",sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;

  color: rgba(255,255,255,0.92) !important;
  text-decoration: none;
  overflow: hidden;
}

#hero .btn-get-started.hero-btn span{
  line-height: 1 !important;
  transform: none !important;
  position: relative;
  z-index: 2;
}

#hero .btn-get-started.hero-btn::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  background: #9A1D21;
  transition: width .35s ease;
  z-index: 1;
}

#hero .btn-get-started.hero-btn:hover::before{
  width: 100%;
}

#hero .btn-get-started.hero-btn:hover{
  color: #fff !important;
}

@media (max-width: 768px){
  #hero .btn-get-started.hero-btn{
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
}

/* =========================================
   MOBILE SPACING — SAFE VERSION
   does NOT affect header height
   ========================================= */
@media (max-width: 768px){

  /* Only tighten breadcrumb content a little */
  .breadcrumbs h2{
    margin-top: 8px !important;
    margin-bottom: 6px !important;
  }

  .breadcrumbs .container{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Reduce gap below breadcrumb and above content */
  #team{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  #contact{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

}
/* =========================================
   BREADCRUMBS + MOBILE SPACING — SCOPED FIX
   ========================================= */

/* Keep breadcrumb title centered and sane everywhere */
.breadcrumbs .container{
  text-align: center;
}

.breadcrumbs h2{
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Desktop */
@media (min-width: 992px){
  .breadcrumbs h2{
    font-size: 36px !important;
  }
}

/* Mobile */
@media (max-width: 768px){
  .breadcrumbs h2{
    font-size: 22px !important;
  }
}

/* Only board members page */
@media (max-width: 768px){
  body:has(#team) .breadcrumbs .container{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    justify-content: center !important;
  }

  body:has(#team) #team{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

}

/* Only contact page */
@media (max-width: 768px){
  body:has(#contact) .breadcrumbs .container{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    justify-content: center !important;
  }

  body:has(#contact) #contact{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

}

/* MOBILE ONLY — increase space above footer logo */
@media (max-width: 768px){
  #footer.footer{
    padding-top: 50px !important;
  }
}

@media (max-width: 768px){
  #main > #team.team{
    margin-top: 20px !important;
  }
}

@media (max-width: 768px){

  /* REMOVE extra space above footer */
  #main > #team.team{
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
  }

  /* tighten container spacing */
  #team .container{
    padding-bottom: 0 !important;
  }

  /* kill extra row spacing (Bootstrap gy-5) */
  #team .row{
    margin-bottom: 0 !important;
  }

  /* optional: reduce gap between cards */
  #team .member{
    margin-bottom: 40px !important;
  }
}
/* DESKTOP NAV — same hover movement in BOTH header states */
@media (min-width: 1280px){

  #header #navbar.navbar > ul > li > a{
    transition:
      color 0.22s ease,
      background-color 0.22s ease,
      transform 0.22s ease !important;
  }

  #header #navbar.navbar > ul > li > a:hover{
    transform: translateY(-1px) !important;
  }
}
/* =========================================
   UNIFIED MENU STYLE — floating + non-floating identical
   ========================================= */

#header.menu-unified #navbar > ul > li > a{
  color: #fff !important;
  background: transparent !important;
  transition: color 0.22s ease, background-color 0.22s ease, transform 0.22s ease !important;
}

#header.menu-unified #navbar > ul > li > a:hover,
#header.menu-unified #navbar > ul > li > a.active{
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
  transform: none !important;
}

/* dropdown panel */
#header.menu-unified #navbar .dropdown ul{
  background: rgba(0,0,0,0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* dropdown links */
#header.menu-unified #navbar .dropdown ul a{
  color: rgba(255,255,255,0.88) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}

#header.menu-unified #navbar .dropdown ul a:hover,
#header.menu-unified #navbar .dropdown ul li:hover > a,
#header.menu-unified #navbar .dropdown ul li.active > a{
  color: #fff !important;
  background: rgba(255,255,255,0.05) !important;
}

/* stop menu buttons moving on hover */
#header.menu-unified #navbar > ul > li > a:hover{
  transform: none !important;
}

/* keep logo same if you want */
#header.menu-unified .logo img{
  filter: none !important;
}
#header.is-floating .logo img{
  filter: invert(1) brightness(0) !important;
}
/* =========================================
   CONTACT PAGE / SHORT PAGE FOOTER FIX
   ========================================= */
html, body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main {
  flex: 1 0 auto;
}

#footer {
  flex-shrink: 0;
}
/* =========================================
   GEHA MOBILE MENU — REMOVE EMPTY SPACE UNDER LAST ITEM
   ========================================= */
@media (max-width: 1279px){

  body.mobile-nav-active #navbar > ul,
  body.mobile-nav-active #header.sticked #navbar > ul,
  body.mobile-nav-active #header.is-floating #navbar > ul,
  body.mobile-nav-active #header.header-scrolled #navbar > ul{
    height: auto !important;
    min-height: 0 !important;
    max-height: fit-content !important;
    padding: 104px 22px 8px 22px !important;
    overflow-y: visible !important;
  }

  body.mobile-nav-active #navbar > ul > li:last-child{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  body.mobile-nav-active #navbar .dropdown > ul{
    margin-bottom: 8px !important;
  }
}
/* =========================================
   GEHA mobile menu active item padding fix
   ========================================= */
@media (max-width: 1279px){

  body.mobile-nav-active #navbar > ul > li > a,
  body.mobile-nav-active #navbar > ul > li > a:focus,
  body.mobile-nav-active #navbar > ul > li > a.active,
  body.mobile-nav-active #navbar > ul > li.active > a{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 16px 18px !important;
  }

  body.mobile-nav-active #navbar > ul > li > a.active,
  body.mobile-nav-active #navbar > ul > li.active > a{
    border-radius: 8px !important;
  }
}
@media (max-width: 1279px){

  body.mobile-nav-active nav#navbar.navbar{
    position: fixed !important;
    top: 14px !important;
    right: 0px !important;
    left: auto !important;
    bottom: auto !important;

    width: min(88vw, 380px) !important;
    max-width: 380px !important;
    height: auto !important;
    z-index: 10000 !important;
  }

  body.mobile-nav-active nav#navbar.navbar > ul{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }
}
@media (max-width: 1279px){
  body.mobile-nav-active nav#navbar.navbar{
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.mobile-nav-active nav#navbar.navbar > ul{
    border: none !important;
    box-shadow: none !important;
  }
}
@media (max-width: 1279px){
  body.mobile-nav-active nav#navbar.navbar > ul{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 30px 22px 18px 22px !important;
  }
}

@media (max-width: 1279px){

  /* outer menu */
  body.mobile-nav-active nav#navbar.navbar{
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  /* main list */
  body.mobile-nav-active nav#navbar.navbar > ul{
    border-radius: 8px !important;
  }

  /* dropdowns */
  body.mobile-nav-active #navbar .dropdown ul{
    border-radius: 6px !important;
  }

}
@media (max-width: 1279px){

  /* stop template slide animation on the wrapper */
  nav#navbar.navbar{
    transition: none !important;
  }

  /* keep compact panel geometry even while closing */
  body.mobile-nav-active nav#navbar.navbar,
  nav#navbar.navbar{
    left: auto !important;
    bottom: auto !important;
    max-width: 380px !important;
  }

  /* closed state: hide instantly instead of sliding old panel */
  body:not(.mobile-nav-active) nav#navbar.navbar{
    right: -420px !important;
    top: 14px !important;
    height: auto !important;
  }

  /* open state */
  body.mobile-nav-active nav#navbar.navbar{
    right: 0 !important;
    top: 14px !important;
    height: auto !important;
  }
}
/* =========================================
   BOARD MEMBER MODAL — CLOSE BUTTON: NO HOVER EFFECT
   Put at VERY END of custom.css
   ========================================= */

.member-modal .btn-close,
.member-modal button.btn-close{
  position: static !important;
  overflow: visible !important;
  z-index: auto !important;
  transition: none !important;

  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;

  /* keep the X visible on dark modal */
  filter: invert(1) !important;
}

/* kill the global sliding fill */
.member-modal .btn-close::before,
.member-modal .btn-close::after,
.member-modal button.btn-close::before,
.member-modal button.btn-close::after{
  content: none !important;
  display: none !important;
}

/* no hover / focus / active styling */
.member-modal .btn-close:hover,
.member-modal .btn-close:focus,
.member-modal .btn-close:active,
.member-modal button.btn-close:hover,
.member-modal button.btn-close:focus,
.member-modal button.btn-close:active{
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: invert(1) !important;
}