/*******************************************************
  SPORT CLUB (Bitola) – Branded Template CSS (Organized)
  Palette:
  --primary  : Club Blue
  --accent   : EU Yellow (highlights & chips)
  --secondary: Soft blue-tinted background
  --light    : Very light surface
  --dark     : Deep navy for text & overlays
*******************************************************/

/* =====================================================
   0) CSS VARIABLES / THEME TOKENS
===================================================== */
:root{
  --primary:#0B5ED7;
  --accent:#F7C600;
  --secondary:#EAF2FF;
  --light:#F6F8FC;
  --dark:#0A1A2F;

  /* Scroll offset for anchor navigation */
  --scroll-offset:130px;

  /* Header gradients */
  --nav-grad:linear-gradient(90deg,#2f67b3 0%,#235491 50%,#173c6c 100%);
  --nav-grad-soft:linear-gradient(
          90deg,
          color-mix(in srgb,#2f67b3 65%,transparent),
          color-mix(in srgb,#173c6c 70%,transparent)
  );

  /* Footer gradient */
  --footer-grad:linear-gradient(90deg,#235491 0%, #1d467e 50%, #13345c 100%);

  /* Header fade control (0–1) updated by JS */
  --nav-opacity: 0;

  /* Mobile navbar row height (logo + lang + burger) */
  --mobile-nav-h: 76px;
}

/* =====================================================
   1) RESET / BASE
===================================================== */
*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--scroll-offset);
  overscroll-behavior: none;
}
section[id]{scroll-margin-top:var(--scroll-offset);}

/* Optional per-section tuning */
#videos{ scroll-margin-top: -25px; }
#about,
#goals,
#programs,
#president,
#activities,
#join{ scroll-margin-top: 0; }

body{
  color:var(--dark);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  overscroll-behavior: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-family:"Saira","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.2px;
  line-height:1.25;
  font-weight:800;
}

/* Text defaults */
strong,b{font-weight:700;}
p{font-size:1rem;line-height:1.75;margin-bottom:1rem;}
.lead{font-size:1.1rem;line-height:1.7;font-weight:500;}
small,.small{font-size:.875rem;line-height:1.4;}

a{color:color-mix(in srgb,var(--primary) 85%,#000);}
a:hover{color:var(--primary);}

/* Utilities */
.back-to-top{position:fixed;display:none;right:30px;bottom:30px;z-index:99;}

/* Spinner */
#spinner{
  opacity:0;visibility:hidden;
  transition:opacity .5s ease-out,visibility 0s linear .5s;
  z-index:99999;
}
#spinner.show{
  transition:opacity .5s ease-out,visibility 0s linear 0s;
  visibility:visible;opacity:1;
}

/* =====================================================
   2) BUTTONS / CHIPS / BRAND HELPERS
===================================================== */
.btn{
  font-weight:600;
  letter-spacing:.2px;
  transition:.3s ease;
  border-radius:10px;
  font-size:.95rem;
}
.btn:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);
  outline-offset:2px;
}

/* Primary buttons */
.btn.btn-primary,
.btn.btn-outline-primary:hover{
  color:#fff;background-color:var(--primary);border-color:var(--primary);
}
.btn.btn-primary:hover{
  color:var(--primary);
  background:transparent;
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent);
}
.btn.btn-outline-primary{color:var(--primary);border-color:var(--primary);background:transparent;}
.btn.btn-outline-primary:hover{color:#fff;}

/* Square helpers */
.btn-square{width:38px;height:38px;}
.btn-sm-square{width:32px;height:32px;}
.btn-lg-square{width:48px;height:48px;}
.btn-square,.btn-sm-square,.btn-lg-square{
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:normal;
}

/* Inline icon chip inside buttons */
.btn .btn-sm-square{
  background:var(--accent)!important;
  color:var(--dark)!important;
  border:none!important;
}
.btn:hover .btn-sm-square{
  background:var(--primary)!important;
  color:#fff!important;
}

/* Brand helpers */
.text-primary{color:var(--accent)!important;}
.bg-primary{background-color:var(--primary)!important;}
.border-primary{border-color:var(--primary)!important;}

/* Chips (global consistent) */
.badge-accent,
.badge.bg-warning.text-dark,
.badge.bg-primary,
.d-inline-block.rounded-pill.bg-secondary.text-primary,
.goals-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .90rem !important;
  border-radius:999px !important;
  font-weight:800 !important;
  font-size:.85rem !important;
  letter-spacing:.2px;
  line-height:1;
  box-shadow:0 10px 24px rgba(10,26,47,.06);
}

/* Yellow chips */
.badge.bg-warning.text-dark,
.goals-chip{
  background:var(--accent) !important;
  color:#0F1419 !important;
}

/* Blue chips */
.badge.bg-primary{
  background:var(--primary) !important;
  color:#fff !important;
}

/* Join chip */
.d-inline-block.rounded-pill.bg-secondary.text-primary{
  background:var(--accent) !important;
  color:#0F1419 !important;
}

/* =====================================================
   3) HEADER / NAVBAR
===================================================== */
.fixed-top{
  transition:.5s;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1030;
}

/* Gradient layer controlled by JS via --nav-opacity */
.fixed-top::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--nav-grad);
  opacity:var(--nav-opacity);
  transition:opacity .35s ease;
  pointer-events:none;
  z-index:0;
}
.top-bar,.navbar{position:relative;z-index:1;}

.top-bar{
  height:45px;
  border-bottom:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.86);
  font-size:.85rem;
}

.navbar{backdrop-filter:none;-webkit-backdrop-filter:none;}

.navbar .dropdown-toggle::after{
  border:none;
  content:"\f107";
  font-family: "Font Awesome 5 Free", serif;
  font-weight:900;
  vertical-align:middle;
  margin-left:8px;
}

.navbar .navbar-nav .nav-link{
  margin-right:30px;
  padding:25px 0;
  color:rgba(255,255,255,.92);
  font-weight:600;
  font-size:.95rem;
  outline:none;
  transition:color .25s ease;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active{color:var(--accent);}

/* Brand */
.header-logo,.brand-logo{
  width:auto;
  height:70px !important;
  margin-right:12px;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.3));
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  text-transform:uppercase;
  color:#fff;
  font-weight:800;
  letter-spacing:.4px;
}
.brand-line1{font-size:15px;opacity:.98;}
.brand-line2{font-size:15px;opacity:.92;}

@media(min-width:1200px){
  .header-logo,.brand-logo{height:70px !important;}
  .brand-line1,.brand-line2{font-size:16px;}
}

/* Header buttons */
.btn-header{
  height:46px;
  display:inline-flex;
  align-items:center;
  padding:0 16px;
  border-radius:12px;
  font-weight:700;
}

.btn-contact{
  color:#e9f1ff;
  border:1.5px solid rgba(255,255,255,.75);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:saturate(140%) blur(2px);
}
.btn-contact:hover{
  color:#0A1A2F;
  background:var(--accent);
  border-color:var(--accent);
}
.btn-contact .btn-sm-square{background:var(--accent)!important;color:#0A1A2F!important;}

/* Language dropdown (header) */
.btn-flag{
  color:#e9f1ff;
  border:1.5px solid rgba(255,255,255,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:
          background-color .18s ease,
          border-color .18s ease,
          transform .12s ease,
          filter .18s ease,
          color .18s ease;
}

/* ✅ Hover-only accent (no yellow while open) */
.btn-flag:hover{
  color:#0A1A2F !important;
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  transform:translateY(-1px);
}
.btn-flag:active{ transform:translateY(0); filter:brightness(.985); }

/* ✅ Keep "open" state looking like default */
.show > .btn-flag.dropdown-toggle{
  color:#e9f1ff !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important;
  border-color:rgba(255,255,255,.6) !important;
  transform:none !important;
  filter:none !important;
}

.flag-ico{width:22px;height:16px;object-fit:cover;border-radius:2px;margin-right:8px;}

/* Desktop dropdown animation */
@media(min-width:992px){
  .navbar .nav-item .dropdown-menu{
    display:block;
    visibility:hidden;
    top:100%;
    transform:rotateX(-75deg);
    transform-origin:0 0;
    transition:.4s ease;
    opacity:0;
    border:none;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
  }
  .navbar .nav-item:hover .dropdown-menu{
    transform:rotateX(0deg);
    visibility:visible;
    opacity:1;
  }

  .dropdown-menu{background:#fff;}
  .dropdown-item{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--dark);
  }
  .dropdown-item:hover{
    color:var(--primary);
    background:color-mix(in srgb,var(--primary) 10%,transparent);
  }
}

/* Header state + scrolled */
body.at-top .top-bar{border-bottom:0;color:rgba(255,255,255,.88);}
body.at-top .navbar .navbar-nav .nav-link{color:#fff;}
body.at-top .navbar .navbar-nav .nav-link:hover,
body.at-top .navbar .navbar-nav .nav-link.active{color:var(--accent);}

.navbar.scrolled,.top-bar.scrolled{
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Hard override helpers */
.container-fluid.fixed-top.force-solid::before { opacity: 1 !important; }
.container-fluid.fixed-top.force-transparent::before { opacity: 0 !important; }

/* =====================================================
   4) HERO CAROUSEL (Header carousel)
===================================================== */
.carousel-caption{
  top:0;left:0;right:0;bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(0deg,rgba(10,26,47,.85) 0%,rgba(10,26,47,.70) 100%);
  z-index:1;
}
.carousel-control-prev,.carousel-control-next{width:15%;}
.carousel-control-prev-icon,.carousel-control-next-icon{
  width:3rem;height:3rem;
  background-color:#fff;
  border:12px solid #fff;
  border-radius:3rem;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));
  background-size:60% 60%;
}
@media(max-width:768px){
  #header-carousel .carousel-item{position:relative;min-height:450px;}
  #header-carousel .carousel-item img{position:absolute;width:100%;height:100%;object-fit:cover;}
}

/* =====================================================
   5) SECTIONS – GOALS / PRESIDENT / ETC
===================================================== */

/* ---------- Goals layout ---------- */
#goals .container{max-width:1120px;}

#goals .goals-layout{
  display:flex;
  gap:clamp(22px, 4vw, 56px);
  align-items:stretch;
}

#goals .goals-visual{
  flex:0 0 320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

#goals .goals-visual .bi{
  font-size:110px;
  line-height:1;
  color:#000;
  opacity:.95;
}

#goals .goals-visual .goals-visual-title{
  margin-top:14px;
  font-weight:800;
  font-size:1.25rem;
  color:var(--dark);
}
#goals .goals-visual .goals-visual-text{
  margin-top:8px;
  max-width:260px;
  font-size:1rem;
  line-height:1.7;
  color:color-mix(in srgb,var(--dark) 78%,#000);
}

#goals .goals-content{
  flex:1;
  min-width:0;
  max-width:980px;
}
#goals .goals-chip{margin-bottom:10px;}

#goals .goals-list{
  list-style:none;
  padding-left:0;
  margin:18px 0 0 0;
  counter-reset:goals;
  max-width:980px;
}
#goals .goals-list li{
  counter-increment:goals;
  position:relative;
  padding:.55rem 0 .55rem 54px;
  line-height:1.85;
  color:color-mix(in srgb,var(--dark) 92%,#000);
}
#goals .goals-list li::before{
  content:counter(goals);
  position:absolute;
  left:0;
  top:.62rem;
  width:34px;height:34px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:.95rem;
  background:transparent;
  border:2px solid color-mix(in srgb,var(--primary) 55%, #fff);
  color:color-mix(in srgb,var(--primary) 92%, #000);
}

@media (max-width: 991.98px){
  #goals .goals-layout{flex-direction:column;}
  #goals .goals-visual{
    flex:0 0 auto;
    width:100%;
    margin-bottom:10px;
  }
  #goals .goals-visual .bi{font-size:92px;}
  #goals .goals-visual .goals-visual-text{max-width:100%;}
}

/* ---------- Team (President card) ---------- */
.team-item{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
}
.team-item img{
  position: relative;
  top: 0;
  transition: .4s ease;

  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-item:hover img{top:-20px;}

.team-item .team-text{
  position:relative;
  height:110px;
  transition:.4s ease;
  background:var(--secondary);
}
.team-item:hover .team-text{
  margin-top:-50px;
  height:160px;
}

/* Social hidden until hover */
.team-item .team-text .team-social{
  opacity:0;
  transform:translateY(6px);
  transition:.35s ease;
  display:flex;
  justify-content:center;
  gap:12px;
}
.team-item:hover .team-text .team-social{
  opacity:1;
  transform:translateY(0);
}

/* Circle social buttons */
.team-item .team-social .btn,
.footer .btn.btn-square{
  width:46px;height:46px;
  border-radius:999px;
  background:#fff;
  border:1px solid #E6ECF7;
  color:color-mix(in srgb,var(--primary) 92%,#000);
  box-shadow:0 10px 24px rgba(10,26,47,.06);
  transition:.25s ease;
}
.team-item .team-social .btn:hover,
.footer .btn.btn-square:hover{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  transform:translateY(-1px);
}

/* ---------- President bio ---------- */
.president-bio{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  margin:16px auto 0;
  max-width:1040px;
  width:100%;
  text-align:center;
}
.president-bio__badge{ text-align:center; margin-bottom:12px; }
.president-bio p{
  margin:0 auto;
  line-height:1.8;
  font-size:1.08rem;
  max-width:980px;
  color:color-mix(in srgb,var(--dark) 88%,#000);
}

/* Videos section subtitle */
#videos .videos-subtitle{color:var(--dark);}

/* =====================================================
   6) YOUTUBE CAROUSEL (use same < > buttons as Latest)
===================================================== */
.yt-carousel{position:relative;}

.yt-card{
  border-radius:18px;
  background:#fff;
  border:1px solid #E6ECF7;
  box-shadow:0 14px 36px rgba(0,0,0,.06);
  overflow:hidden;
}

.yt-frame{background:#0B0F1A;}

.yt-caption{
  padding:18px 18px 20px 18px;
  text-align:center;
}
.yt-caption h4{margin:0;}
.yt-caption p{
  margin:0;
  color:color-mix(in srgb,var(--dark) 88%,#000);
}

.yt-control{
  width:auto;
  opacity:1;
  top:50%;
  transform:translateY(-50%);
  bottom:auto;
  padding:0;
  z-index:6;
}
.yt-control.carousel-control-prev{ left:10px !important; }
.yt-control.carousel-control-next{ right:10px !important; }

/* Match news-arrow style */
.yt-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:20px;
  font-weight:800;
  line-height:1;
  border:1px solid rgba(255,255,255,.2);
  transition:transform .15s ease, background .2s ease;
}
.yt-control:hover .yt-arrow{
  background:rgba(0,0,0,.7);
  transform:scale(1.06);
}

@media (max-width: 575.98px){
  .yt-control.carousel-control-prev{left:10px;}
  .yt-control.carousel-control-next{right:10px;}
}

/* =====================================================
   7) NEWS / LATEST CAROUSEL
===================================================== */
.news-carousel{ position:relative; }

.news-tile{
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 .75rem 1.5rem rgba(0,0,0,.08);
  text-decoration:none;

  aspect-ratio: 4 / 5;
}

.news-tile > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.news-overlay{
  position:absolute;
  inset:0;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  background:linear-gradient(
          to top,
          rgba(0,0,0,.72) 0%,
          rgba(0,0,0,.28) 55%,
          rgba(0,0,0,0) 100%
  );
}

.news-control{
  width:auto;
  opacity:1;
  top:50%;
  transform:translateY(-50%);
  bottom:auto;
  padding:0;
  z-index:6;
}
.news-control.carousel-control-prev{ left:10px; }
.news-control.carousel-control-next{ right:10px; }

.news-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:20px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.2);
  transition:transform .15s ease, background .2s ease;
}
.news-control:hover .news-arrow{
  background:rgba(0,0,0,.7);
  transform:scale(1.06);
}

.news-dots{ position:static; margin-top:14px; }

@media (max-width: 991.98px){
  .news-tile{ min-height:320px; }
  .news-overlay{ padding:18px; }
}

/* =====================================================
   8) FOOTER
===================================================== */
.footer{
  background:var(--footer-grad);
  color:rgba(255,255,255,.85);
}
.footer a{color:rgba(255,255,255,.85);}
.footer a:hover{color:var(--accent);}

.footer .btn.btn-link{
  display:block;
  margin-bottom:6px;
  padding:0;
  text-align:left;
  color:rgba(255,255,255,0.65);
  font-weight:500;
  text-transform:capitalize;
  transition:.25s ease;
  font-size:.92rem;
}
.footer .btn.btn-link::before{
  position:relative;
  content:"\f105";
  font-family: "Font Awesome 5 Free", serif;
  font-weight:900;
  color:rgba(255,255,255,0.5);
  margin-right:10px;
}
.footer .btn.btn-link:hover{
  color:#fff;
  letter-spacing:.5px;
  box-shadow:none;
}

.footer .copyright{
  padding:24px 0;
  font-size:15px;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer .copyright a{color:var(--accent);text-decoration:underline;}
.footer .copyright a:hover{color:#fff;}

.footer .contact-one-line{
  display:flex;
  align-items:center;
  gap:.75rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:.5rem;
  font-size:.95rem;
}
.footer .contact-one-line i{
  flex:0 0 auto;
  width:18px;
  text-align:center;
  opacity:.9;
}

/* Footer language dropdown */
.btn-flag--footer{
  color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  transition:
          background-color .18s ease,
          border-color .18s ease,
          transform .12s ease,
          filter .18s ease,
          color .18s ease;
}

/* ✅ Hover-only accent in footer too */
.btn-flag--footer:hover{
  color:#0A1A2F !important;
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  transform:translateY(-1px);
}
.btn-flag--footer:active{ transform:translateY(0); filter:brightness(.985); }

/* ✅ Keep open state like default */
.footer .show > .btn-flag--footer.dropdown-toggle{
  color:#fff !important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)) !important;
  border-color:rgba(255,255,255,.55) !important;
  transform:none !important;
  filter:none !important;
}

.footer .dropdown-menu{
  background:#fff;
  border:1px solid rgba(10,26,47,.16);
  border-radius:12px;
  padding:8px 0;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
  min-width:180px;
}
.footer .dropdown-item{
  color:var(--dark) !important;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  font-weight:600;
}
.footer .dropdown-item:hover{
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  color:var(--primary) !important;
}

/* =====================================================
   9) BOOTSTRAP TYPOGRAPHY NORMALIZATION
===================================================== */
p, li{
  font-size:1rem !important;
  line-height:1.75 !important;
}
ol.fs-5, ul.fs-5{
  font-size:1rem !important;
  line-height:1.75 !important;
}
ol.fs-5 li, ul.fs-5 li{
  font-size:1rem !important;
  line-height:1.75 !important;
}

.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
  font-family:"Saira","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  line-height:1.2 !important;
}
.display-5{font-size:2.3rem !important;}
.display-6{font-size:2rem !important;}

.badge{font-size:.8rem !important;font-weight:700 !important;letter-spacing:.2px;}
.text-muted{color:color-mix(in srgb,var(--dark) 55%,#fff) !important;}

/* =====================================================
   10) MOBILE POLISH + DROPDOWN MENU
===================================================== */

.nav-actions{ gap:10px; }

#langMenuMobile.btn-flag{
  height:42px;
  padding:0 12px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.2px;
}
#langMenuMobile .flag-ico{
  width:20px;
  height:14px;
  margin-right:6px;
}

@media (max-width: 991.98px){

  :root{ --scroll-offset:92px; }

  .navbar{
    padding:0 12px !important;
    min-height:var(--mobile-nav-h);
    align-items:stretch;
  }

  .navbar > .navbar-brand,
  .navbar > .nav-actions{
    height:var(--mobile-nav-h);
    display:flex;
    align-items:center;
  }

  .header-logo,.brand-logo{
    height:44px !important;
    margin-right:10px;
  }

  .navbar-brand .brand-text{ display:none !important; }

  #navbarCollapse.navbar-collapse{
    position:static !important;
    inset:auto !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  #navbarCollapse.collapse.show{
    background:var(--nav-grad) !important;

    margin-left:-12px;
    margin-right:-12px;

    padding:12px 22px 18px !important;

    border-radius:0 !important;
    box-shadow:none !important;
  }

  #navbarCollapse.collapse.show::before{
    content:"";
    display:block;
    height:1px;
    background:rgba(255,255,255,.18);
    margin:0 0 22px 0;
  }

  #navbarCollapse.collapse,
  #navbarCollapse.collapsing{
    overflow:hidden;
    transition:height .42s cubic-bezier(.2,.9,.2,1) !important;
  }

  #navbarCollapse .navbar-nav,
  #navbarCollapse .d-lg-none{
    will-change:transform, opacity;
    transition:
            transform .30s cubic-bezier(.2,.9,.2,1),
            opacity   .30s cubic-bezier(.2,.9,.2,1);
  }

  #navbarCollapse.collapse:not(.show) .navbar-nav,
  #navbarCollapse.collapse:not(.show) .d-lg-none{
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
  }

  #navbarCollapse.collapsing .navbar-nav,
  #navbarCollapse.collapsing .d-lg-none{
    opacity:0;
    transform:translateY(-8px);
  }

  #navbarCollapse.collapse.show .navbar-nav,
  #navbarCollapse.collapse.show .d-lg-none{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  #navbarCollapse .navbar-nav{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;

    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:18px;
  }

  #navbarCollapse .nav-link{
    margin:0 !important;
    padding:8px 0 !important;

    font-size:.95rem !important;
    font-weight:600 !important;
    letter-spacing:.2px;

    color:#fff !important;
  }

  #navbarCollapse .nav-link:hover,
  #navbarCollapse .nav-link.active{
    color:var(--accent) !important;
  }

  .btn-header{height:44px;}

  #navbarCollapse .d-lg-none{
    margin-top:10px;
    width:100%;
    display:flex;
    justify-content:center;
  }

  #navbarCollapse .btn-contact{
    width:100% !important;
    max-width:860px;
    margin:0 auto;

    justify-content:center;

    height:46px;
    border-radius:14px;
  }

  .navbar .collapse{
    border-radius:0 !important;
    box-shadow:none !important;
  }

  body.nav-open .fixed-top::before{
    opacity:1 !important;
  }

  body.has-hero.at-top:not(.nav-open) .fixed-top::before{opacity:0 !important;}
  body.has-hero.nav-open .fixed-top::before{opacity:1 !important;}
  body.has-hero:not(.at-top) .fixed-top::before{opacity:1 !important;}

  body.has-hero .navbar,
  body.has-hero .top-bar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

@media (max-width: 575.98px){
  #join .btn.btn-primary{
    width:100%;
    justify-content:center;
  }
}
/* =====================================================
   JOIN SECTION
===================================================== */

#join{
  position:relative;
}

#join .join-copy{
  max-width:560px;
}

#join .join-badge{
  margin-bottom:10px;
}


#join .join-title{
  letter-spacing:.2px;
}

#join .join-text{
  margin:0;
  max-width:520px;
  color:color-mix(in srgb,var(--dark) 86%, #000);
  font-size:1.05rem;
  line-height:1.85;
}

#join .join-note{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:.35rem;
  color:color-mix(in srgb,var(--dark) 65%, #000);
}

#join .join-card{
  border-radius:18px;
  padding:28px;
  box-shadow:0 18px 48px rgba(0,0,0,.08);
  background:linear-gradient(180deg, #ffffff 0%, var(--light) 100%);
}
#join .form-control{
  border-radius:14px;
  border:1px solid rgba(10,26,47,.14);
  box-shadow:none !important;
}

#join .form-control:focus{
  border-color:color-mix(in srgb,var(--primary) 55%, #fff);
  box-shadow:0 0 0 .25rem color-mix(in srgb,var(--primary) 18%, transparent) !important;
}
#join .form-floating > .form-control{
  height:60px;
  padding-top:1.25rem;
  padding-bottom:.5rem;
}
#join .form-floating > label{
  padding:1rem .95rem;
  color:color-mix(in srgb,var(--dark) 55%, #000);
}

#join .join-cta{
  height:52px;
  border-radius:14px;
  font-weight:800;
  letter-spacing:.2px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 12px 28px rgba(11,94,215,.22);
  transition:transform .12s ease, box-shadow .2s ease;
}

#join .join-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 36px rgba(11,94,215,.28);
}

#join .join-cta .btn-sm-square{
  width:40px;
  height:40px;
}

#join .join-success{
  margin-bottom:0;
}
@media (max-width: 991.98px){
  #join .join-copy{max-width:none;}
  #join .join-card{padding:22px;}
  #join .join-cta{width:100%;}
}

/* =====================================================
   11) MOBILE BURGER
===================================================== */
.navbar .navbar-toggler{
  height:42px;
  padding:0 12px;
  border-radius:12px !important;
  border:1.5px solid rgba(255,255,255,.6) !important;

  background:linear-gradient(
          180deg,
          rgba(255,255,255,.05),
          rgba(255,255,255,.015)
  ) !important;

  transition:
          background-color .18s ease,
          border-color .18s ease,
          transform .12s ease,
          filter .18s ease !important;
}

.navbar .navbar-toggler:hover{
  transform:translateY(-1px);
}

.navbar .navbar-toggler:active{
  transform:translateY(0);
  filter:brightness(.985);
}

.navbar .navbar-toggler-icon{
  filter:brightness(0) invert(1);
  opacity:.9;
}

.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:active{
  box-shadow:none !important;
  outline:none !important;
}

.navbar .navbar-toggler[aria-expanded="true"]{
  background:linear-gradient(
          180deg,
          rgba(255,255,255,.05),
          rgba(255,255,255,.015)
  ) !important;

  border:1.5px solid rgba(255,255,255,.6) !important;
}