/* ---------- Design tokens ---------- */
:root {
  

  /*--Primary
  --Secondary:#01c0b7;*/





  --Dark:#252e3a;
  --Grey:#707582;
  --Light:#f0f1f3;
  --White:#ffffff;
  --Success:#04b97d;
  --SuccessTint:#e2f9f0;
  --Warning:#f39c08;
  --WarningTint:#fef2e0;
  --Failed:#f33858;
  --FailedTint:#fde9ec;
  --Radius:14px;
  --Shadow: 0 2px 4px rgba(8,45,88,0.04), 0 10px 24px rgba(8,45,88,0.06);












  --FooterBg:#161616;        /* near-black */
  --FooterBgSoft:#1f1f1f;    /* slightly lighter panel */
  --FooterText:#e6e6e6;
  --FooterTextMuted:#a3a3a3;
  --FooterBorder:rgba(255,255,255,0.1);







  /*Header Section */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f8fa;
  --color-border: #e6e8ec;
  --color-text: #12161c;
  --color-text-secondary: #5c6570;
  --color-accent: #0e7490;
  --color-accent-dark: #0b5568;
  --color-accent-soft: #e3f2f6;
  --radius: 10px;
  --nav-height: 70px;
  --shadow-Panel: 0 10px 30px rgba(18, 22, 28, 0.1), 0 2px 8px rgba(18, 22, 28, 0.06);



}









/*
* {
    box-sizing: border-box;
    outline: none !important;
}
*:not(input):not(textarea) {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 0;
}*/
html,body {
    min-height: 100%;
    width: 100%;max-width: 100%;
    overflow: unset;
    margin: 0;
    padding: 0;


    
    
    color: var(--color-text);
    background: var(--color-bg-alt);
}



body.LightBody{
  background:var(--Light);
  color:var(--Dark);
}



.hidden{
  display: none !important;
}





a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }


.Underline, .Underline:hover {
    text-decoration: underline;
}






.FS10{font-size: 10px;}
.FS11{font-size: 11px;}
.FS12{font-size: 12px;}
.FS13{font-size: 13px;}
.FS14{font-size: 14px;}
.FS15{font-size: 15px;}
.FS16{font-size: 16px;}
.FS17{font-size: 17px;}
.FS18{font-size: 18px;}
.FW400 { font-weight: 400; }
.FW500 { font-weight: 500; }
.FW600 { font-weight: 600; }
.FW700 { font-weight: 700; }
.FW800 { font-weight: 800; }






























/* ---------- Header shell ---------- */
.SiteHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Shared blurred backdrop ----------
   Lives inside .Navbar (same stacking context as the header's own content),
   sitting above the brand/Navlinks/burger but below any open Panel and its
   trigger. That way an open Panel stays sharp and clickable, while the brand,
   nav links, and everything on the page below all blur - clicking any of them
   hits this overlay first and closes the open Panel, rather than navigating
   straight through it. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(18, 22, 28, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Keep the trigger of an open Panel sharp and above the overlay (its Panel
   already sits above it via .MegaPanel/.Panel z-index below). */
.MegaLinkTrigger[aria-expanded="true"],
.ControlBtn[aria-expanded="true"] {
  position: relative;
  z-index: 45;
}

.Navbar {
  height: var(--nav-height);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* ---------- Brand ---------- */
.BrandLogoCont {
  display: flex;
  align-items: center;
  width: 130px;
  height: var(--nav-height);
}
.BrandMark { 
  width: 100%;
  height: 100%;
  -khtml-object-fit: contain;
  -moz-object-fit: contain;
  -webkit-object-fit: contain;
  object-fit: contain;
  
}

/* ---------- Burger (mobile trigger) ---------- */
.burger {
  display: none;
  padding: 8px;
  border-radius: 8px;
  color: var(--color-text);
}
.burger:hover { background: var(--color-bg-alt); }
.burger-line { transition: transform 0.25s ease, opacity 0.2s ease; transform-origin: center; }
.burger.is-open .line-top { transform: translate(-3px,4px) rotate(45deg); }
.burger.is-open .line-mid { opacity: 0; }
.burger.is-open .line-bot { transform: translate(-3px,-3px) rotate(-45deg); }

/* ---------- Menu wrapper (links + Controls) ---------- */
.Menu {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
  justify-content: flex-end;
  height: 100%;
}

/* ---------- Primary links ---------- */
.Navlinks {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  height: 100%;
  margin: 0;
  padding: 0;
}

.Navlinks li,.Navlinks li a{
  height: 100%;
}

.NavLink {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: 8px;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease;

  width: 100%;
  height: 100%;
}
.NavLink:hover { color: var(--color-text); }
.NavLink.Active { color: var(--color-text); }

/* signature: CSS-only accent underline, no JS position tracking */
.NavLink::after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: unset;
  bottom: 0;
  height: 2px;
  
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /*border-bottom: 2px solid var(--color-accent);*/
}
.NavLink:hover::after,
.NavLink:focus-visible::after,
.NavLink.Active::after {
  transform: scaleX(1);
}

.chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.MegaLinkTrigger[aria-expanded="true"] .chevron,
.ControlBtn[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ---------- Mega Menu ---------- */
.HasMegaLink { position: relative; }
.MegaPanel {
  position: absolute;
  /*left: 0;*/
  right: 0;
  top: 100%;
  width: 190px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-Panel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  padding: 8px;
  border-radius: 12px;
  z-index: 50;
}
html[dir="rtl"] .MegaPanel {
  right: unset;
  left: 0;
}
.MegaPanel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.MegaList {
  max-width: 1280px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  /*grid-template-columns: repeat(3, 1fr);*/
  gap: 2px;
}

.MegaLink {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text);
  transition: background 0.15s ease;
}
.MegaLink:hover { background: var(--color-bg-alt); }

/* ---------- Right-side Controls ---------- */
.Controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ---------- Always-visible actions (account icon + burger) ----------
   Sits outside .Menu so the account icon is never hidden behind the
   mobile burger toggle - it's reachable on every breakpoint. */
.NavActions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ControlBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text);
  border: 1px solid transparent;
  background-color: white;
}
.ControlBtn:hover { background: var(--color-bg-alt); }

.flag { display: flex; align-items: center; line-height: 1; }
.FlagIcon { width:20px;display: block; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(18, 22, 28, 0.08); }
.LangCode { font-size: 12.5px;line-height: 28px; letter-spacing: 0.02em; color: var(--color-text-secondary); }


.AccountsNavIcon{
    height: 28px;
    width: 20px;
    padding: 5px 1px;
}
.AccountsNavIcon path,.AccountsNavIcon circle{
  stroke: var(--color-text-secondary);
  stroke-width: 1.5px;
}

.Avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.AvatarLg { width: 40px; height: 40px; font-size: 14px; }

/* ---------- HeaderDropdown Panels (shared) ---------- */
.HeaderDropdown { position: relative; }

.Panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-Panel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 50;
}
html[dir="rtl"] .Panel {
  right: unset;
  left: 0;
}
.Panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Language Panel */
.LangPanel {
  list-style: none;
  margin: 0;
  padding: 6px;
  width: 190px;
}
.LangOption {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text);
  text-align: left;
}
.LangOption:hover { background: var(--color-bg-alt); }
.LangOption .check { margin-left: auto; opacity: 0; color: var(--color-accent); }
.LangOption.is-selected .check { opacity: 1; }
.LangOption.is-selected { color: var(--color-accent-dark); font-weight: 500; }

/* Profile Panel */
.ProfilePanel { width: 260px; max-width: calc(100vw - 32px); padding: 14px; }
.ProfileHeader { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.ProfileName { margin: 0; font-size: 14.5px; font-weight: 500; }
.ProfileEmail { margin: 2px 0 0; font-size: 13px; color: var(--color-text-secondary); }

.ProfileList { list-style: none; margin: 8px 0; padding: 0; }
.ProfileItem {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
}
.ProfileItem:hover { background: var(--color-bg-alt); }
.ProfileItem svg { color: var(--color-text-secondary); flex-shrink: 0; width: 16px;height: 16px;object-fit: contain;}
/*.ProfileItem svg circle, .ProfileItem svg rect, .ProfileItem svg path{
  stroke-width: 1.5px;
}*/
.profile-footer { border-top: 1px solid var(--color-border); padding-top: 8px; }
.sign-out { color: #b3261e; }
.sign-out svg { color: #b3261e; }








/* =====================================================
   Responsive: tablet and mobile
   ===================================================== */
@media (max-width: 900px) {
  .burger { display: inline-flex; order: 3; }

  .Menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 8px 20px 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    visibility: hidden;
  }
  .Menu.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .Navlinks {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
  }

  .Navlinks li, .Navlinks li a {
    height: auto;
  }

  .NavLink {
    height: auto;
    width: 100%;
    padding: 14px 4px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    justify-content: space-between;
  }

  .MegaLinkTrigger { width: 100%; }

  /* mega Panel collapses into an inline accordion on mobile */
  .MegaPanel {
    position: static;
    width: 100%; /* was stuck at the desktop 190px, cramming the accordion into a sliver */
    box-shadow: none;
    border: none;
    padding: 4px 0 8px;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .MegaPanel.is-open { display: block; }
  .MegaList { grid-template-columns: 1fr; }
  .MegaLink { padding: 10px 8px; }

  /* .Controls now only holds the language HeaderDropdown (account moved to
     .NavActions), so this styling - and the accordion overrides below -
     apply to the language control only. */
  .Controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
  }
  .Controls .HeaderDropdown { width: 100%; }
  .Controls .ControlBtn {
    width: 100%;
    justify-content: space-between;
    padding: 12px 10px;
  }
  .Controls .Panel {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    transform: none;
    margin-top: 4px;
    display: none;
  }
  .Controls .Panel.is-open { display: block; }

  /* Account icon in the always-visible bar: keep it a normal floating
     HeaderDropdown (like desktop), just anchored correctly on a narrow screen. */
  .NavActions .AvatarBtn { padding: 6px; }
  .NavActions .AvatarBtn .chevron { display: none; }
  .AccountsNavIcon{
    width: 28px;
  }
}

@media (max-width: 480px) {
  .Navbar { padding: 0 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; }
}























/* ---------- Placeholder page content ---------- */
.MainPageCont {
  width: 100%;
  min-height: calc(100vh - var(--nav-height) );
  margin: 0 auto;
  padding: 0;


}


.MainPageCont section{
  width: 100%;
  display: flex;
}

.MainPageCont section .Container{
  margin-right: auto;
  margin-left: auto;
  width: 100%;;
}
































































































/* Footer *****************************************************************************************/

  .FooterSection{
    background:var(--FooterBg);
    color:var(--FooterText);
  }

  .FooterInner{
    max-width:1200px;
    margin:0 auto;
    padding:56px 24px 32px;
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap:40px;
  }

  /* Brand column */
  .FooterBrand .FooterLogo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
  }

  .FooterLogoMark{
    width:36px;
    height:36px;
    border-radius:10px;
    background:var(--SecondaryBGColor);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#0a0a0a;
    font-size:16px;
    flex-shrink:0;
  }

  .FooterLogoText{
    font-size:20px;
    font-weight:700;
    color:#ffffff;
    letter-spacing:0.2px;
  }

  .FooterAboutText{
    color:var(--FooterTextMuted);
    font-size:14px;
    line-height:1.7;
    max-width:340px;
    margin:0 0 24px;
  }

  .FooterSocialLinks{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    list-style:none;
    padding:0;
    margin:0;
  }

  .FooterSocialLinks a{
    width:38px;
    height:38px;
    flex-shrink: 0;
    border-radius:50%;
    background:var(--FooterBgSoft);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--FooterText);
    text-decoration:none;
    transition:background .2s ease, transform .2s ease;
  }

  .FooterSocialLinks a:hover,
  .FooterSocialLinks a:focus-visible{
    background:var(--SecondaryBGColor);
    color:#0a0a0a;
    transform:translateY(-2px);
  }

  .FooterSocialLinks svg,.FooterSocialLinks img{
    width:18px;
    height:18px;
    fill:currentColor;
  }


  .FooterSocialLinks img{
    -webkit-filter: invert(50%);
    filter: invert(50%);
  }

  .FooterSocialLinks a:hover img,
  .FooterSocialLinks a:focus-visible img{
    -webkit-filter: invert(0%);
    filter: invert(0%);
  }

  /* Link columns */
  .FooterCol h3{
    color:#ffffff;
    font-size:15px;
    font-weight:600;
    margin:0 0 20px;
    letter-spacing:0.3px;
  }

  .FooterCol ul{
    list-style:none;
    margin:0;
    padding:0;
  }

  .FooterCol li{
    margin-bottom:12px;
  }

  .FooterCol a{
    color:var(--FooterTextMuted);
    text-decoration:none;
    font-size:14px;
    transition:color .2s ease;
  }

  .FooterCol a:hover,
  .FooterCol a:focus-visible{
    color:var(--SecondaryBGColor);
  }


  .FooterSocialLinks a:hover svg {
    color: var(--Dark);
  }

  /* Bottom bar */
  .FooterBottom{
    border-top:1px solid var(--FooterBorder);
  }

  .FooterBottomInner{
    max-width:1200px;
    margin:0 auto;
    padding:20px 24px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .FooterBottomInner p{
    margin:0;
    font-size:13px;
    color:var(--FooterTextMuted);
  }

  .FooterLegal{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    list-style:none;
    margin:0;
    padding:0;
  }

  .FooterLegal a{
    color:var(--FooterTextMuted);
    text-decoration:none;
    font-size:13px;
    transition:color .2s ease;
  }

  .FooterLegal a:hover,
  .FooterLegal a:focus-visible{
    color:var(--SecondaryBGColor);
  }



  .FooterSection .BrandLogoCont {
    width: 140px;
    margin-bottom: 10px;
  }




  /* ===== Responsive breakpoints ===== */

  /* Large tablets / small laptops */
  @media (max-width: 1024px){
    .FooterInner{
      gap:32px;
      padding:48px 24px 28px;
    }
  }

  /* Tablets */
  @media (max-width: 900px){
    .FooterInner{
      grid-template-columns: 1fr 1fr;
      row-gap:36px;
    }
    .FooterBrand{
      grid-column: 1 / -1;
    }
  }

  /* Large phones */
  @media (max-width: 640px){
    .FooterInner{
      grid-template-columns: 1fr;
      padding:40px 20px 24px;
      gap:32px;
    }
    .FooterAboutText{
      max-width:100%;
    }
    .FooterBottomInner{
      flex-direction:column;
      align-items:flex-start;
      text-align:left;
    }
    .FooterLegal{
      gap:16px;
    }
  }

  /* Small phones */
  @media (max-width: 380px){
    .FooterInner{
      padding:32px 16px 20px;
    }
    .FooterLogoText{
      font-size:18px;
    }
    .FooterSocialLinks a{
      width:34px;
      height:34px;
    }
    .FooterBottomInner{
      padding:16px 16px;
    }
    .FooterLegal{
      flex-direction:column;
      gap:10px;
    }
  }




















































  /* ---------- Layout helpers ---------- */
  .Section{ padding:88px 0; }
  .SectionTint{ background: var(--PrimaryBGTint); }
  .SectionLight{ background: var(--Light); }
  .SectionWhite{ background: var(--White); }
  .SectionHead{
    display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
    margin-bottom:42px; flex-wrap:wrap;
  }
  .SectionHead h2{ font-size: clamp(26px,3vw,34px); max-width:640px; }
  .SectionHead .ViewAll{ font-size:13px; font-weight:600; color:var(--PrimaryBGColor); display:flex; align-items:center; gap:6px; padding-bottom:6px; border-bottom:1.5px solid var(--SecondaryBGColor); }
  .SectionHead .ViewAll:hover{ color:var(--SecondaryBGColor); }
  .CenterHead{ text-align:center; }
  .CenterHead .SectionHead{ justify-content:center; flex-direction:column; align-items:center; }
  .CenterHead .eyebrow{ justify-content:center; }







  .TitleSubTxt{
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color: var(--SecondaryBGColor);
    display:flex; align-items:center; gap:10px;
    margin-top:8px;
    margin-bottom:15px;
  }
  .TitleSubTxt::before{
    content:"";
    width:22px; height:1.5px;
    background: var(--SecondaryBGColor);
    display:inline-block;
  }





















































































/* ---------- Registration - Login - Forget Password ---------- */
  
/* ============ Background ============ */
.Registeration {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: calc( (var(--vh, 1vh) * 100) - var(--nav-height));
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(135deg, var(--PrimaryBGColor) 0%, var(--PrimaryBGColorHover) 100%);
}

/* Soft glowing teal blobs floating in the background */
.Registeration::before,.Registeration::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.Registeration::before {
    width: 420px;
    height: 420px;
    background: var(--PrimaryBGColorOpac40);
    top: -120px;
    left: -100px;
    animation: floatBlob 10s ease-in-out infinite;
}

.Registeration::after {
    width: 500px;
    height: 500px;
    background: var(--PrimaryBGColorOpac40);
    bottom: -160px;
    right: -140px;
    animation: floatBlob 12s ease-in-out infinite reverse;
}

@keyframes floatBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, 20px) scale(1.08); }
}

/* Subtle dot-grid texture overlay */
.Registeration {
    background-image:
        linear-gradient(135deg, var(--PrimaryBGColor) 0%, var(--PrimaryBGColorHover) 100%),
        radial-gradient(var(--PrimaryBGColorOpac20) 1px, transparent 1px);
    background-size: cover, 22px 22px;
    background-position: center, center;
}

/* ============ Card ============ */
.Registeration .Container {
    position: relative;
    z-index: 1;
    background: var(--White);
    border-radius: var(--Radius);
    box-shadow: var(--Shadow), 0 0 0 1px var(--PrimaryBGColorOpac10);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    flex-direction: column;
    animation: fadeInUp 0.5s ease;
}
.Registeration.Wider .Container {
    max-width: 550px;
}
.Registeration.Wideset .Container {
    max-width: 650px;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ============ Form fields wrapper ============ */
.LoginForm .FieldsContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Heading */
.LoginForm h1,.RegForm h1{
    font-size: 26px;
    font-weight: 700;
    color: var(--PrimaryBGColor);
    margin: 0;
}

/* Forgot password link */
.LoginForm a.OpenForm {
    color: var(--DarkBGColor);
    transition: color 0.2s ease;
}

.LoginForm a.OpenForm:hover {
    color: var(--DarkBGColorHover);
}

.LoginForm .FW500 { font-weight: 500; }
.LoginForm .FW600 { font-weight: 600; }

/* ============ Login button ============ */
.LoginForm .td-btn {
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.LoginForm .td-btn-green {
    background: linear-gradient(135deg, var(--PrimaryBGColor), var(--PrimaryBGColorHover));
    color: var(--SecondaryTextColor);
    box-shadow: 0 6px 16px var(--PrimaryBGColorOpac30);
}

.LoginForm .td-btn-green:hover {
    background: var(--PrimaryBGColorHover);
    box-shadow: 0 8px 20px var(--PrimaryBGColorOpac40);
}

.LoginForm .td-btn-green:active {
    transform: scale(0.98);
}

.LoginForm .FullWidth { width: 100%; }

/* ============ Separator ============ */
.LoginForm .Separator {
    height: 1px;
    background: var(--PrimaryBGColorOpac10);
    margin: 18px 0;
    width: 100%;
}

/* Register prompt row */
.LoginForm p {
    margin: 0;
    color: var(--Grey);
}

.LoginForm p a {
    color: var(--PrimaryBGColor);
}

.LoginForm p a:hover {
    color: var(--PrimaryBGColor);
}





/* ============ Responsive ============ */
@media (max-width: 480px) {
    .Registeration .Container {
        padding: 28px 20px;
    }

    .LoginForm h1 {
        font-size: 22px;
    }

    .Registeration::before,
    .Registeration::after {
        filter: blur(60px);
    }
}











































  /* ---------- Home Page General Styles ---------- */
  h1,h2,h3{ color: var(--PrimaryBGColor); font-weight:600; letter-spacing:-0.01em; }


  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 26px;
    border-radius: var(--Radius);
    font-size:15px; font-weight:600;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn--primary{ background: var(--PrimaryBGColor); color: var(--White); box-shadow: var(--Shadow); }
  .btn--primary:hover{ background:#0a3a6e; transform: translateY(-2px); }
  .btn--secondary{ background: var(--White); color: var(--PrimaryBGColor); border:1.5px solid var(--PrimaryBGColor); }
  .btn--secondary:hover{ background: var(--PrimaryBGTint); transform: translateY(-2px); }
  .btn--teal{ background: var(--SecondaryBGColor); color: var(--White); box-shadow: var(--Shadow); }
  .btn--teal:hover{ background:#00a89f; transform: translateY(-2px); }
  .btn--outline-teal{ background:transparent; color:var(--SecondaryBGColor); border:1.5px solid var(--SecondaryBGColor); }
  .btn--outline-teal:hover{ background: var(--SecondaryBGTint); }
  .btn--ghost{ background: var(--Light); color: var(--Dark); }
  .btn--ghost:hover{ background:#e4e5e8; }
  .btn--sm{ padding:10px 18px; font-size:13.5px; }
  .btn--block{ width:100%; }
  .btn--on-dark{ background: var(--SecondaryBGColor); color:var(--White); }
  .btn--on-dark:hover{ background:#00a89f; }
  .btn--on-dark-outline{ background:transparent; color:var(--White); border:1.5px solid rgba(255,255,255,0.5); }
  .btn--on-dark-outline:hover{ background:rgba(255,255,255,0.1); border-color:var(--White); }


































  /* ---------- Hero Section ---------- */

  .Hero{ position:relative; overflow:hidden; min-height:560px; display:flex; align-items:center;
    min-height: 100vh;
    min-height: calc( (var(--vh, 1vh) * 100) - var(--nav-height));

    }
    .Container{ width:100%; max-width:1220px; margin:0 auto; padding:0 28px; }
  .HeroBgImg{
    position:absolute; inset:0; background-size:cover; background-position:center;
    z-index:0;

    background-image:url('../img/BGs/Hero.webp');
    background-size: cover;
    background-position: center center;


  }
  .HeroOverlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(115deg, rgba(8,45,88,0.92) 0%, rgba(8,45,88,0.82) 42%, rgba(8,45,88,0.45) 75%, rgba(8,45,88,0.25) 100%);
  }
  .HeroContent{ position:relative; z-index:2; max-width:640px; padding:110px 0; }
  .Hero .eyebrow{ color:var(--SecondaryBGColor); }
  .Hero h1{ font-size:clamp(34px,4.4vw,54px); line-height:1.08; margin-bottom:22px; color:var(--White); }
  .Hero h1 em{ font-style:italic; color:var(--SecondaryBGColor); }
  .Hero p{ font-size:13px; color:rgba(255,255,255,0.82); max-width:480px; margin-bottom:34px; }
  .HeroActions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; }

  @media (max-width:900px){
    .HeroContent{ padding:80px 0; max-width:100%; }
  }
  @media (max-width:640px){
    .Hero{ min-height:440px; }
  }









































































.FilterBar{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--White);
  border:1px solid #e4e7ec;
  border-radius:var(--Radius);
  padding:18px 22px;
  box-shadow:var(--Shadow);
  flex-wrap:wrap;
  margin-bottom:28px;
}
.FilterTitle{
  font-size:20px;
  font-weight:800;
  color:var(--PrimaryBGColor);
  letter-spacing:-0.01em;
  margin-right:auto;
  flex-basis:100%;
}
.FlexHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}
.FlexHeader h2{
  font-size:16px;
  font-weight: 500;
}
.FlexHeader h1{
  font-size:24px;
  font-weight: 700;
}
.FlexHeader button{
  margin-left:auto;
}
html[dir="rtl"] .FlexHeader button{
  margin-right:auto;
  margin-left:unset;
}

.FlexHeader.MainFiltersCont{
  display: flex;
  align-items: flex-end;
}
.FiltersCont{
  display:flex;
  gap:10px;
  /*width: 100%;*/
  flex-grow: 1;
}
.FiltersCont .InputGroup{
  width:100%;
  max-width: 164px;max-width: 200px;
  margin: 0 !important;
}
.FiltersCont .InputGroup .DropdownButton{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.FilterBtnsCont{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
html[dir="rtl"] .FilterBtnsCont{
  margin-left: unset;
  margin-right: auto;
}
.FilterAction{
  height: 44px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:5px;
  margin: 0 !important;
  font-weight: 500;
}
.FilterAction.ClearBtn{
  /*background-color: #f3f3f3;
  border-color: #eeeeee;*/
  color: #333;
  text-decoration: none;
}
/*.FilterAction.ClearBtn:hover{
  background-color: #eeeeee;
  border-color: #eeeeee;
}*/
.FilterAction svg{
  stroke: white;
  width: 22px;
  height: 22px;
}
.FilterAction.ClearBtn svg{
  stroke: #333;
}

@media screen and (max-width: 600px) {
  .FiltersCont{
    flex-wrap: wrap;
  }
}







.CardsGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }






  /* ---------- Courses Grid ---------- */
  .CourseGrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:stretch; }
  @media (max-width:1200px){ .CourseGrid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:968px){ .CourseGrid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .CourseGrid{grid-template-columns:1fr;} }

  .CourseGrid > .EmptyState {
      grid-column: 1 / -1;
  }

  .CourseCard{
    position:relative; background:var(--White); border-radius:var(--Radius); overflow:hidden;
    border:1px solid #e9ebee; box-shadow:var(--Shadow); display:flex; flex-direction:column;
    height:100%; transition:transform .18s ease, box-shadow .18s ease;
  }
  .CourseCard:hover{ transform:translateY(-4px); box-shadow:0 6px 10px rgba(8,45,88,0.06), 0 20px 34px rgba(8,45,88,0.1); }

  .StretchedLink{ position:absolute; inset:0; z-index:1;width: 100%;height: 100%; }
  .StretchedLink:focus-visible{ outline:3px solid var(--SecondaryBGColor); outline-offset:-3px; }

  .CourseCard .Thumb{ position:relative; height:150px; overflow:hidden; background:var(--Light); flex-shrink:0; }
  .CourseCard .Thumb img.ThumbImg{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease, filter .25s ease; }
  .CourseCard:hover .ThumbImg{ transform:scale(1.05); filter:brightness(0.85); }
  .CourseCard .Thumb .LevelPill{
    position:absolute; top:14px; right:14px; font-size:11px; font-weight:700; padding:5px 10px 5px 8px;
    border-radius:999px; display:flex;align-items:center;gap:5px; color:var(--White);
  }

  .CourseCard .Thumb .LevelPill.Success{
    background:var(--Success);
  }
  .CourseCard .Thumb .LevelPill.Failed{
    background:var(--Failed);
  }
  .CourseCard .Thumb .LevelPill.Warning{
    background:var(--Warning);
  }

  





  .CourseCard .LevelPill .Dot{ width:6px;height:6px;border-radius:50%; background:var(--White); }

  .CourseCard .PlayButton{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.9);
    width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.92);
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.25);
    opacity:0.95; transition:transform .22s ease, opacity .22s ease, background .22s ease;
  }
  .CourseCard .PlayButton svg{ width:18px; height:18px; fill:var(--PrimaryBGColor); margin-left:3px; }
  .CourseCard:hover .PlayButton{ transform:translate(-50%,-50%) scale(1.08); background:var(--SecondaryBGColor); opacity:1; }
  .CourseCard:hover .PlayButton svg{ fill:var(--White); }

  .CourseCardBody{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px; flex:1; }

  .CategoryRow{ display:flex; flex-wrap:wrap; gap:6px; }
  .CategoryTag{ font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px; }
  .CategoryTag.Tint2{ background:var(--SecondaryBGTint); color:var(--SecondaryBGColor); }
  .CategoryTag.Tint1{ background:var(--PrimaryBGTint); color:var(--PrimaryBGColor); }

  .CourseCardTitle{
    font-size:16.5px; font-weight:700; line-height:1.35; color:var(--Dark);
    /*display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;*/
    overflow:hidden; 
    min-height:calc(1.35em * 2);
  }

  .InfoRow{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; font-size:12px; font-weight:600; color:var(--Grey); margin-top:-4px; }
  .InfoItem{ display:flex; align-items:center; gap:6px; }
  .InfoItem svg{ width:13px;height:13px; fill:none; stroke:var(--Grey); stroke-width:1.8; }

  .PeopleSection{ display:flex; flex-direction:column; gap:8px;padding-top:12px; border-top:1px dashed #e7e9ed;width: 100%;/*margin-top:auto;*/ }
  .PeopleSection .SectionLabel{ font-size:10.5px; font-weight:700; color:var(--Grey); text-transform:uppercase; letter-spacing:.06em; 

  
  
  
  /*display: none !important;*************************************************************************************************************************************/






  }
  .PeopleRows{ display:flex; flex-direction:column; gap:6px; /*height:92px;*/ overflow:hidden; }

  .PersonLink{
    position:relative; z-index:2; display:flex; align-items:center; gap:10px; text-decoration:none;
    color:inherit; border-radius:8px; padding:4px; transition:background .15s ease;
  }
  .PersonLink:hover{ background:var(--Light); }
  .PersonLink:hover .PName{ color:var(--PrimaryBGColor); }
  .PersonLink:focus-visible{ outline:2px solid var(--SecondaryBGColor); }

  .AvatarImg{
    width:40px;height:40px; border-radius:50%; object-fit:cover; flex-shrink:0;
    border:2px solid var(--White); box-shadow:0 0 0 1px #e9ebee;
  }
  .PersonText{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
  .PersonText .PName{ font-size:13px; font-weight:700; color:var(--Dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s ease; }
  .PersonMeta{ display:flex; align-items:center; gap:6px; }
  .PersonMeta .PJob{ font-size:11.5px; color:var(--Grey); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .RoleTag{ align-self: flex-start;font-size:9px; font-weight:800; padding:2px 6px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; flex-shrink:0;margin-bottom: 3px; }
  .RoleTag.Instructor{ background:var(--SecondaryBGTint); color:var(--SecondaryBGColor); }
  .RoleTag.Host{ background:var(--PrimaryBGTint); color:var(--PrimaryBGColor); }
  .RoleTag.Guest{ background:var(--WarningTint); color:var(--Warning); }
  .RoleTag.Speaker{ background:var(--SuccessTint); color:var(--Success); }

  .OverflowBtn{
    position:relative; z-index:2; align-self:flex-start; border:1px dashed #d7dae0; background:var(--White);
    color:var(--PrimaryBGColor); font-weight:700; font-size:12px; font-family:'Inter',sans-serif;
    padding:7px 12px; border-radius:9px; cursor:pointer;
  }
  .OverflowBtn:hover{ background:var(--PrimaryBGTint); }


  







  
  /* ---------- Faculty Modal ---------- */
  .PeopleModalBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }


  .PeopleModalOverlay{
    position:fixed; inset:0; background:rgba(8,45,88,0.45); z-index:1000;
    align-items:center; justify-content:center; padding:24px;
    display: flex;

    backdrop-filter: blur(4px);
  }
  .ModalBox{
    background:var(--White); border-radius:var(--Radius); width:100%; max-width:420px; max-height:76vh;
    display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(8,45,88,0.3);
    position: relative;z-index: 1;
    margin: auto;
    max-height: 100%;
    overflow-y: auto;
  }
  .ModalHeader{ 
    display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #eef0f2;
    gap: 10px;
  }
  .ModalHeader h3{ font-size:15.5px; font-weight:800; color:var(--PrimaryBGColor); }
  .ModalClose{
    border:none; background:var(--Light); color:var(--Grey); width:30px;height:30px; border-radius:50%;
    font-size:16px; cursor:pointer; display:flex;align-items:center;justify-content:center;
    flex-shrink: 0;
  }
  .ModalClose:hover{ background:var(--FailedTint); color:var(--Failed); }
  .PeopleModalList{ padding:10px 14px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
  .PeopleModalList .PersonLink{ padding:10px; margin:0; border-radius:10px; }
  .PeopleModalList .AvatarImg{ width:42px; height:42px; }












  /* SEO source data: real text in the DOM, zero paint/layout cost */
  .SeoData { display: none; }

  dialog#PeopleModal {
      border: none;
      border-radius: 12px;
      padding: 0;
      max-width: 480px;
      width: 90vw;
      max-height: 80vh;
      overflow: hidden;
  }
  dialog#PeopleModal::backdrop {
      background: rgba(0, 0, 0, .5);
  }

  .ModalHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid #eee;
  }
  .ModalHeader h3 {
      margin: 0;
      font-size: 1.05rem;
  }
  .ModalClose {
      border: none;
      background: none;
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
      padding: 4px 8px;
  }

  .ModalList {
      overflow-y: auto;
      max-height: calc(80vh - 60px);
      padding: 8px 0;
      contain: content; /* isolate layout/paint of the scrollable list */
  }
  .ModalList .PersonLink {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 20px;
      text-decoration: none;
      color: inherit;
  }
  .ModalList .PersonLink:hover {
      background: #f7f7f7;
  }
  .ModalList .AvatarImg {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: #eee; /* placeholder color before data-src hydrates */
  }
  .ModalList .PersonText { display: flex; flex-direction: column; gap: 2px; }
  .ModalList .PName { font-weight: 600; }
  .ModalList .PersonMeta { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #666; }




















  /* ---------- About Section ---------- */
  .AboutGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px;text-align:start; }
  .AboutCard{
    background:var(--White); border-radius:var(--Radius); padding:26px 24px; border:1px solid var(--Light);
  }
  .AboutIcon{
    width:44px; height:44px; border-radius:11px; background:var(--PrimaryBGTint);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .AboutIcon svg{ width:22px; height:22px; stroke:var(--PrimaryBGColor); }
  .AboutCard h3{ font-size:16.5px; font-weight:600; color:var(--Dark); margin-bottom:8px; }
  .AboutCard p{ font-size:13.6px; color:var(--Grey); }













  /* ---------- Event Section ---------- */
  .EventCard{ background:var(--White); border-radius:var(--Radius); overflow:hidden; border:1px solid var(--Light); box-shadow:var(--Shadow); }
  .EventBanner{
    height:150px; position:relative; display:flex; align-items:flex-start; justify-content:space-between; padding:16px;
  }
  .EventBanner::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--PrimaryBGColorOpac60);
    z-index: 2;
  }
  .EventBanner img{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;left:0;
    z-index: 1;
    object-fit: cover;
    -moz-object-fit:cover;
  }
  
  .EventDateBadge{
    background:var(--White); border-radius:10px; padding:8px 12px; text-align:center; box-shadow:var(--Shadow);
    position: relative;
    z-index: 3;
  }
  .EventDateBadge .mon{ font-size:10.5px; font-weight:700; color:var(--SecondaryBGColor); text-transform:uppercase; }
  .EventDateBadge .day{ font-size:20px; font-weight:700; color:var(--PrimaryBGColor); line-height:1; }
  .ModePill{ font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:0.05em; }
  .ModePill.online{ background:var(--SuccessTint); color:var(--Success); }
  .ModePill.physical{ background:var(--WarningTint); color:var(--Warning); }
  .EventBody{ padding:20px 22px 22px; }
  .EventBody h3{ font-size:17.5px; margin-bottom:8px; }
  .EventTime{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--Grey); margin-bottom:12px; }
  .EventTime svg{ width:14px; height:14px; stroke:var(--SecondaryBGColor); }
  .EventDesc{ font-size:13.8px; color:var(--Grey); margin-bottom:18px; }










  /* ---------- CTA1 Section ---------- */
  .CTA1{
    position:relative; overflow:hidden; background:var(--PrimaryBGColor); border-radius:28px;
    padding:70px 40px; text-align:center; margin:10px 28px 60px;
  }
  .CTA1 h2{ color:var(--White); font-size:clamp(28px,3.6vw,40px); max-width:640px; margin:0 auto 16px; }
  .CTA1 p{ color:rgba(255,255,255,0.72); max-width:520px; margin:0 auto 32px; font-size:16px; }
  .FinalActions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .cta-ecg{ position:absolute; inset:0; opacity:0.16; }

  @media (max-width:640px){
    .CTA1{ margin:0 14px; padding:50px 22px; }
  }















  /* ---------- Faculty Section ---------- */

  .FacultyGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:26px; }
  .FacultyCard{
    background:var(--White); border:1px solid var(--Light); border-radius:var(--Radius);
    padding:26px 24px; text-align:center; box-shadow:var(--Shadow);
  }
  .FacultyPhoto{
    width:84px; height:84px; border-radius:50%; margin:0 auto 16px;
    object-fit:cover; display:block;
    border:3px solid var(--White); box-shadow:0 0 0 3px var(--SecondaryBGTint);
  }
  .FacultyCard h3{ font-size:17px; margin-bottom:4px; }
  .FacultySpec{ font-size:13px; color:var(--SecondaryBGColor); font-weight:600; margin-bottom:6px; }
  .FacultyInst{ font-size:12.5px; color:var(--Grey); margin-bottom:14px; }
  .FacultyBio{ font-size:13.3px; color:var(--Grey); margin-bottom:18px; }
  .FacultyCard .FacultyBio{
    overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  }
  .FacultyCard .btn {
    width: 100%;
  }



























/* Alerts */
.Alert{
    padding:10px 12px 10px 12px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}



.Alert.AlertSuccess{
    background-color: var(--SuccessBGColor);
    color: var(--SuccessTxtColor);
}
.Alert.AlertFailed{
    background-color: var(--FailedBGColor);
    color: var(--FailedTxtColor);
}
.Alert.AlertWarning{
    background-color: var(--WarningBGColor);
    color: var(--WarningTxtColor);
}


.FieldError .Alert{
    /*margin-top: 10px;*/
}







.ResendEmail{
    cursor: pointer;
    text-decoration: underline;
    padding:2px 0;
    display: block;
}
.ResendEmail.Disabled{
    color: #ffffff85;
    background-color: unset;
}
.ResendEmailTimer{
    font-weight: 500;
}

.SpeakerAgendaPP{
    width:50px;
    height:50px;
    object-fit:cover;
    -webkit-object-fit:cover;
    -moz-object-fit:cover;
}

.PENone{
    pointer-events:none !important;
}