/* Manrope — a slightly heavier, geometric sans that gives the whole site a
   bolder, more confident feel than the old Calibri stack. Falls back to the
   previous stack if the font can't be fetched. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand palette — sampled directly from the ELSF logo (logo.png):
     royal-blue wordmark #104090 and vivid azure circle #00a6f0. */
  --navy:#0a2d6e;          /* deep navy for footer / dark bands */
  --primary:#123f9a;       /* royal blue of the "elsf" wordmark */
  --primary-color:#123f9a;
  --primary-dark:#0a2d6e;
  --sky:#00a6f0;           /* vivid azure of the logo circle / Africa mark */
  --accent:#00a6f0;
  --accent-dark:#0090d8;   /* azure hover / pressed */
  --accent-light:#e6f6fe;  /* pale azure tint for soft backgrounds & hovers */

  --body-text:#26324a;
  --text-muted:#5a6b85;
  --border:#e2e8f2;
  --border-color:#e2e8f2;  /* alias — some rules reference --border-color */
  --white:#ffffff;         /* alias — some rules reference var(--white) */
  --light-bg:#f4f7fb;
  --light-gray:#f4f7fb;

  /* Aliases — older rules reference these names; map them to the tokens above
     so nothing renders with an undefined (transparent/invalid) value. */
  --ink:var(--body-text);
  --text:var(--body-text);
  --text-light:var(--text-muted);
  --line:var(--border);
  --blue:var(--primary);
  --navy-900:var(--navy);
  --radius:var(--radius-md);
  --shadow:var(--shadow-lg);

  /* Neutralise Bootstrap's built-in blue (#0d6efd) on links / primary / focus
     so unstyled <a> and Bootstrap components use the ELSF palette instead. */
  --bs-primary:#123f9a;
  --bs-primary-rgb:18,63,154;
  --bs-link-color:#123f9a;
  --bs-link-color-rgb:18,63,154;
  --bs-link-hover-color:#0090d8;
  --bs-link-hover-color-rgb:0,144,216;

  --shadow-sm:0 2px 10px rgba(11,43,110,0.06);
  --shadow-md:0 10px 30px rgba(11,43,110,0.10);
  --shadow-lg:0 22px 55px rgba(11,43,110,0.16);
  --transition:.3s ease;
  --radius-lg:30px;
  --radius-md:18px;
  --radius-sm:10px;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
    font-family: "Manrope", Calibri, "Segoe UI", Candara, "Trebuchet MS", system-ui, -apple-system, sans-serif;
    box-sizing: border-box;
    /* background-color: white;  */
     background-color: rgb(244, 246, 247);
    margin: 0;
    border-radius: 0;
    width: 100%;
    color: var(--body-text);
    overflow-x: clip;
    font-size: 17px;
    /* A touch bolder across the board per the brand refresh. */
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}
p{
  font-size: 22px;
  font-weight: 500;
}
.card{
  background-color: white;
}
image{
  max-width: 100%;
  display: block;
}
a{
  text-decoration: none;
}
ul{
  list-style: none;
}
header{
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 999;
    gap: 1rem;
    font-size: 15px;
    padding: 8px 0;
    border-bottom: 2px solid var(--primary);
}
.top-bar{
    background-color: var(--primary);
    display: flex;
    justify-content: space-between;
    color: white;
    font-size: 15px;
    padding: 10px 0;
    text-align: center;
}
.top-bar a{
    color: white;
    margin: 20px;
  
}
@media (max-width: 992px) {
  .top-bar{
    font-size: 20px;
    padding: 10px;
    display: block;
    
  }
}
@media (max-width:782px) {
  .top-bar{
  font-size: 12px;
  display: block;
  padding: 8px;
  }
}
.logo{
    height: 20vh;
    width: 15%;
    align-items: center;
    justify-content: space-between;
    margin-left: 70px;   
    position: sticky;
    top: 0;
}
@media (max-width:992px) {
  .logo{
    width: 30%;
    height: auto;
    margin-left: 15px;
  }
}
@media (max-width:782px) {
  .logo{
    width: 20%;
    height: auto;
    margin-left: 8px;
  }
}
.navbar {
  padding: 0;
  position: sticky;
  top: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
  text-decoration: none;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 30px;
  font-size: 30px;
  font-weight: 600;
  color:var(--primary);
  white-space: nowrap;
  transition: 0.3s;
  text-transform: uppercase;
}

.navbar a i,
.navbar a:focus i {
  font-size: 22px;
  line-height: 0;
  margin-left: 3px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: var(--sky);
}
@media (max-width:576px) {
  .navbar a{
    font-size: 18px;
    display: block;
    padding:10px ;
  }
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 30px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  text-decoration: none;
}

.navbar .dropdown ul li {
  min-width: 200px;
  text-decoration: none;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  color: var(--body-text);
}

.navbar .dropdown ul a i {
  font-size: 22px;
  text-decoration: none;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: var(--primary);
  background: var(--accent-light);
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
    
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color:var(--primary);
  font-size: 34px;
  cursor: pointer;
  display: none;
  /* Give the icon a real, comfortable tap target (≈44px) instead of the
     zero-height box that line-height:0 produced. */
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  transition: 0.25s;
}
.mobile-nav-toggle:hover { background: var(--accent-light); }

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: inline-flex;
    font-size: 34px;
    cursor: pointer;
  }

  .navbar ul {
    display: none;
  }
}
@media (max-width:579px) {
  .mobile-nav-toggle{
    font-size: 30px;
  }
  .navbar ul{
    width: 95%;
    padding: 15px;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(10, 25, 25, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: 0.3s;
  z-index: 1200;
}
/* Lock the page behind the open mobile drawer so it doesn't scroll. */
body.nav-open { overflow: hidden; }

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;

}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 22px;
    color:var(--primary);
    font-weight: 600;
    white-space: normal;   /* let long sub-menu items wrap instead of clipping */
}
@media (max-width:576px) {
  .navbar-mobile a{
    font-size: 18px;
    padding: 12px;
  }
  .dropdown-menu {
  display: none;
  width: 100%;
  position: static;
  padding: 10px 0;

}
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: var(--sky);
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

/* On touch devices there is no :hover, so show each dropdown's sub-links as a
   static, indented list that's always reachable inside the mobile drawer. */
.navbar-mobile .dropdown ul {
  position: static;
  display: block;
  margin: 4px 0 8px 18px;
  padding: 4px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  border-left: 2px solid var(--accent-light);
  box-shadow: none;
}
/* The chevron on a parent item is decorative on mobile (sub-links show below). */
.navbar-mobile .dropdown > a i { transform: rotate(0); opacity: .5; }

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

@media (max-width:782px) {
.dropdown-menu li a{
  display: block;
}
}
.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 22px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  background-color: var(--accent-light);
  color: var(--primary);
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}
.overlay{
  width: 100%;
  color: white;
  height: 100%;
  background-image: url(image/img.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(60%);
  background-position: center;
  text-align: center;
  padding: 60px;
  font-weight: 800;
}
.overlay4{
  width: 100%;
  color: white;
  height: 100%;
  background-image: url(image/img2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(60%);
  background-position: center;
  text-align: center;
  padding: 60px;
  font-weight: 800;
}
.overlay2{
  width: 100%;
  color: white;
  height: 100%;
  background-image: url(image/img6.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(70%);
  background-position: center;
  text-align: center;
  padding: 60px;
  font-weight: 800;
}

.overlay3{
  width: 100%;
  color: white;
  height: 100%;
  background-image: url(image/img6.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: brightness(60%);
  text-align: center;
  padding: 60px;
  font-weight: 800;
}
.hero{
  height: 100vh;
  align-items: center;
  width: 100%;
  margin-top: 0;
    border-bottom: 2px solid var(--primary);

}
.hero-container{
    width: 45%;
    padding-left: 40px;
}
.hero-container h1{
    font-size: 57px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--body-text);
}
.hero-container p{
    font-size: 24px;
    color: var(--body-text);

}

.container-infor{
  display: flex;
  border-radius: 20px;
  margin: 20px 10px;
  width: 100%;
  gap: 16px;
}
@media (max-width: 992px) {
 .container-infor {
margin: 30px 20px;
display: block;
  }
.card-infor{
  display: block;
}
}

.container-right{
  margin-top: 10px;
 width: 100%;   
margin: 5px;
color: var(--body-text);
padding: 12px;
font-weight: 500;
font-size: large;
}

.card-infor{
    background-color:rgba(245,246,247,.1);
    padding: 35px;
    color: var(--body-text);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-left: 6px solid var(--primary);
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}
@media (max-width: 786px) {
 .container-infor {
display: block;
margin: 20px 12px;
  }
.container-right{
  margin: 0 0 12px 0;
  padding: 0;
}
.card-infor{
  display: block;
  padding: 22px 18px;
}
.card-infor p{
  font-size: clamp(1rem, 0.95rem + 0.6vw, 1.2rem);
  line-height: 1.7;
}
.card-infor span{
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.3rem);
}
}
.card-infor2{
    background-color:rgb(242, 243, 245);
    padding: 35px 60px;
    color: var(--body-text);
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    height: auto;
    position: relative;
    align-items: center;
    font-weight: 500;
}
.card-infor2 span{
    font-weight: 700;
    font-size: 30px;
}
.card-infor p{
    font-size: 25px;
    /* font-weight: 400; */
    line-height: 1.6;
    margin-bottom: 10px;
}
.card-infor span{
    color: var(--accent);
    font-weight: 700;
    font-size: 28px;
}
/* About */
.banner{
    margin: 0 auto;
    font-weight: 800;
    font-size: larger;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 150px;
    color:white;
    text-align: center;
    filter: brightness(100%);
    background-image: url("image/archive/DSC_0177 (3).jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner h1 h2 p{
    padding-bottom: 60px;
}
.banner h1{
    font-size: 50px;
    font-weight: 800;
}
.banner p{
    position: relative;
    font-size: 30px;
    margin: 20px auto;
    max-width: 800px;
    z-index: 1;
    margin-bottom: 35px;
    animation: fadeInUp 1s ease 0.3s both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
span{
    color: var(--primary);
    font-weight: 700;
}
.small-title {
    text-transform: uppercase;
    font-size: 0.78rem;
    margin-bottom: 1rem;
    font-weight: 700;
}
.section2{
    padding: 60px 0;
    margin-top: 10px;
}
.section2-img{
    width: 100%;
    display: block;
    height: 555px;
    object-fit: cover;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    transition: .4s;
    border-radius: 40px;
}
.section2-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.section2-about h1{
  font-weight: 800;
  font-size: 50px;
  color: var(--navy);
  line-height: 1.2; 
}
.section2-about p{
  font-size: 20px;
  line-height: 1.9;
}
.hero-btn{
  background-color: var(--primary);
  color: #fff;
  padding: 14px 35px;
  border-radius: 50px;
  font-weight: 600;
  display: inline-block;
}
.hero-btn:hover{ background-color: var(--navy); color:#fff; }

.container-fluid{
    width: 100%;
    background-color: rgba(18,63,154,.05);
    color: var(--body-text);
    padding: 20px;
    font-size: 25px;
}
.section-header{
    text-align: center;
    margin-bottom: 50px;
}
.section-header p{
  text-align: center;
  padding: 5px 175px;
}
.split-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.box-card,.card-focus,.card-body2{
    background: linear-gradient(transparent 100%);
    text-align: center;
    border-radius: 24px;
    font-size: 22px;
    height: 100%;
    transition-duration: 0.3s;
    background-color: rgb(255, 255, 255);
    padding: 25px 15px;
    box-shadow: 0 20px 55px rgb(160, 163, 168);
    color: var(--body-text);
}
.box-card h4,.card-body2 h4,
.value-card h4,.table2 h4,.table3 h4,
.values-card h4,.table h4{
  color: var(--navy);
  font-weight: 600;
}
.card-body2{
  padding: 7px;
}
.box-card h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--body-text);
    font-size: 20px;
    font-weight: 600;
}
.box-card:hover,.card-body2:hover{
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
background-color: rgb(74, 190, 240);
}
.card-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.Focus{
    margin-top: 10px;
    background-color: white;
    color:var(--body-text);
    text-align: center;
    font-weight: 500;
         margin-bottom: 20px;
         padding: 15px;
         font-size: 23px;
}
.card{
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(24, 23, 23, 0.1);
  transition: 0,3s;
  margin-bottom: 10px;
  background-color: rgb(237, 240, 246);
}
.card:hover{
  transform: translateY(-8px);
  
}
.focus {
    text-align: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.story-section,.hero-project {
    padding: 80px 0;
    background:white;
}
.story-container{
width: 90%;
margin: auto;
max-width: 1200px;
}
.story-section {
    font-weight: 700;
}
.text-section{
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 10px 10px 0;
}
.text-section p { 
  color: var(--body-text);
  text-align: left;
  padding: 10px;
  font-size: 22px;

}
.story-section img{
width: 100%;
}
.section-subtitle {
    color: var(--body-text);
    font-weight: 700;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 5px;
}

.story-header h2 {
    font-size: 2.5rem;
    color: var(--body-text);
}
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}
.story-body p {
    margin-bottom: 20px;
    color: var(--body-text);
}
.theory-card {
    background: var(--light-bg);
    padding: 40px;
  
    border-radius: 8px;
    border-left: 5px solid var(--primary-color);
}
.theory-card h3 {
    margin-bottom: 20px;
    color: var(--primary-color);
    font-size: 1.4rem;
}
.value-section{
  font-size: 1.05rem;
  font-weight: 400;
text-align: center;
color: var(--body-text);
    margin: 10px;
    margin: 0 20px;
    padding: 60px 20px;
    margin-bottom:20px ;
    align-items: center;
}
.value-section p h3{
  font-size: 20px;
  font-weight: 600;
}
.value-container{
  display: grid;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(300px));
}
.values-card{
  display: grid;
  border-radius: 12px;
  padding: 30px;
  width: 95%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   background: linear-gradient(transparent 100%);
    height: 100%;
    transition-duration: 0.3s;
    background-color: white;
    box-shadow: 0 20px 55px rgb(136, 138, 143);
    margin-bottom: 50px;
    line-height: 1.6;
    transition: 0.4s;
    margin-bottom: 20px;
    
}
.values-card:hover{
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  
  color: white;
}
.values-card:hover,p{
  color: white;
}
.objectives{
  text-align: center;
  font-weight: 400;
  margin-top:25px ;
  margin-bottom:20px;
  border-radius: 24px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.infor-objectives{
    margin: 10px;
    justify-content: space-between;
    text-align: center;
    font-size: 20px;
    padding:10px 80px ;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 15px;
}
.table-container,.priority-container{
   border-radius: 12px;
  padding: 28px;
  width: 95%;
    height: 100%;
    transition-duration: 0.3s;
    align-items: center;
    margin-left: 25px;
    line-height: 1.6;
    transition: 0.4s;
    margin-bottom: 10px;
    margin-top: 0px;
}
.table i{
  color: var(--accent);
}
.table,.table3,.priority{
  display: grid;
  border-radius: 12px;
  padding: 30px;
  width: 95%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   background: linear-gradient(transparent 100%);
    height: 100%;
    transition-duration: 0.3s;
    background-color: white;
    box-shadow: 0px 20px 55px rgb(155, 160, 172);
    margin-bottom: 50px;
    line-height: 1.6;
    transition: 0.4s;
    margin-bottom: 10px;
}
.governance{
  text-align: center;
  font-weight: 600;
  margin-top:30px ;
  margin-bottom: 30px;
  padding:20px;
}
.governance p{
  font-weight: 400;
}
footer{
    background-color: rgb(243, 245, 248);
    padding: 10px 0; 
}
.top-footer {
    padding: 10px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
    gap: 90px;
    background-color: rgb(252, 252, 253);
    color: var(--body-text);
 }

 .brand-info img {
    height: 50px;
    margin-bottom: 15px;
}
.brand-info p {
  font-size: 14px;
  color: var(--text-muted);
 line-height: 1.6;
 margin-bottom: 20px;
}
.brand-info h4 {
  color:var(--primary);
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
}
.footer-column{
  text-align: left;
  padding: 5px;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-bottom: none;
}
@media (max-width:992px) {
  .top-footer{
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-column{
  text-align: left;
  height: auto;
}
.brand-info img{
  margin: auto;
  display: block;
}
.brand-info{
  grid-column: 1/-1;
  display: block;
  text-align: center;
}
}
.footer-column h3 {
    color: var(--primary);
    font-size: 18px;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 5px;
    text-align: left;
    padding:5px 0;
    margin-top: 0;
    position: relative;
}
.footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background-color:var(--primary);
    margin-top: 10px;
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}  
.footer-column ul li{
margin-top: 0;
padding: 0;
margin-bottom: 0;
}      
.footer-column ul li a {
    margin-bottom: 15px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.1px;
    transition: color 0.3s;
    display: inline-block;
}
.footer-column p{
    text-align: left;
    padding-left: 6px;
    padding: 3px 0;
    justify-content: center;

}
.social {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 10px;
}
.social-a {
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 17px;   
}
.social-a a i{
  font-size: 27px;
  margin:10px;
  align-items: flex-start;
  display: inline-flex;
  width: 42px;
}
.touch-bar {
    background-color: var(--navy);
    color: var(--text-muted);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.git-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 220px;
}

.git-left i {
    font-size: 32px;
    color: var(--accent);
}
.git-text h3 {
    font-size: 19px;
    margin-bottom: 4px;
    color: #fff;
}
.git-text p {
    font-size: 12px;
    color: #cbd5e1;
    margin: 0;
}
.git-contacts {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 12px;
    flex: 1 1 180px;
}
.contact-info span {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.85);
}
.contact-info a {
    color: var(--sky);
    font-size: 14px;
    font-weight: 600;
    transition: color .2s;
    display: inline-block;
}
.contact-info a:hover { color: #fff; }
.contact-divider {
    flex: 1 1 220px;
    min-width: 0;
}
.btn-contact {
    padding: 10px 24px;
    border-radius: 25px;
    background-color: white;
    color: var(--body-text);
    text-decoration: none;
    font-size: 14px;
    align-items: center;
    gap: 10px;
    transition: background 0.3s, color 0.3s;
    display: inline-flex;
}
.bottom-footer {
    padding: 10px 10px;
     background-color: rgb(236, 239, 243);
}
.sub-footer {
  display: flex; 
   justify-content: space-between; 
  text-align:  center;
  padding: 20px;
  flex-wrap: wrap;
  gap: 30px;
  font-weight: 700;

  font-size: 15px;
}
@media (max-width:768px){

    .top-footer{
        grid-template-columns:1fr;
        text-align:center;
        gap:20px;
    }

    .footer-column h3{
        text-align:center;
    }

    .footer-column h3::after{
        left:40%;
        transform:translateX(-50%);
    }

    .footer-column ul{
        text-align:center;
    }

    .footer-column p,
    .brand-info p,
    .social{
        text-align:center;
    }

    .social-a{
        justify-content:center;
    }

    .touch-bar{
        padding:20px;
        flex-direction:column;
        align-items:stretch;
        text-align:center;
    }

    .git-left,
    .git-contacts,
    .contact-divider{
        justify-content:center;
        flex: 1 1 100%;
        margin-right:0;
    }

    .git-text h3{
        font-size:21px;
    }

    .git-text p{
        font-size:15px;
    }

    .contact-info a{
        font-size:15px;
    }

    .btn-contact{
        display:inline-flex;
        width:100%;
        max-width:250px;
        justify-content:center;
        margin: 0 auto;
    }

    .sub-footer{
        padding:15px;
    }

    .sub-links{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:10px;
    }

}
.sub-footer p {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
.sub-links a {
    color: var(--text-muted);
    font-size: 13px;
    margin-left: 15px;
}
.sub-links a:hover {
    color: var(--primary);
}
/* ---- Hero image carousel (Swiper) --------------------------------------
   The slider fills the .hero band. Each slide holds one full-bleed <img>
   sized with object-fit:cover, so any photo aspect ratio crops cleanly. */
.mySwiper3 {
  width: 100%;
  height: 100%;
}

.mySwiper3 .swiper-slide {
  overflow: hidden;
}

.mySwiper3 .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop to fill without distortion */
  object-position: center;
}

/* Navigation arrows + pagination dots tinted to the ELSF brand. */
.mySwiper3 .swiper-button-prev,
.mySwiper3 .swiper-button-next {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.mySwiper3 .swiper-pagination-bullet {
  background: #fff;
  opacity: .6;
}

.mySwiper3 .swiper-pagination-bullet-active {
  background: var(--accent, #00a6f0);
  opacity: 1;
}


    .infor-2{
      text-align: center;
      padding: 20px 0;
      margin: 20px;
      align-items: center;
    }
    .infor-2,.small-title{
      font-size: 1.5rem;
      font-weight: 400;
      margin-bottom:10px ;
    }
  
    .table2{
       background: linear-gradient(transparent 100%);
    text-align: center;
    border-radius: 24px;
    font-size: 19px;
    height: 100%;
    transition-duration: 0.3s;
    background-color: white;
    margin: 8px;
    margin-bottom: 5px;
    padding: 10px 20px;
    box-shadow: 0 20px 55px rgb(115, 129, 156);
    color: var(--body-text);
    display: grid;
    }
.table2 p{
  padding:5px;
}
.table2 h3 {
    color: var(--body-text);
    font-size:28px;
    font-weight: 400;
}
.table2:hover{
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transform: translateY(-8px);
}
.row.g-4{
  row-gap: 20px;
}
/* Project page */

.hero-project img{
      width: 100%;
    display: block;
    height: 500px;
    object-fit: cover;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    transition: .4s;
    border-radius: 40px;
    max-width: 669px;
}
/* PPELD */
body{
  background-color: white;
}
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}
.grid-2-col { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 40px; 
  align-items: center; 
}
.grid-3-col { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px; 
}
.content-split-section { 
  background-color: var(--light-gray); 
}
.section-tag { 
  font-weight: 700; 
  color: var(--primary);  
  font-size: 0.85rem; 
}
.centered-card {
    background: var(--light-gray);
    padding: 10px 30px;
    border-radius: 12px;
    text-align: center;
    text-align: left;
    max-width: 800px;
    margin-bottom: 10px;
    margin: 0 auto;
}
.ppeld-section{
    background:#f8fafc;
}
.PPEL-section{
  padding-top: 0;
  padding-bottom: 30px;
  margin-top:0;
}
.card-inf{
    background:#fff;
    padding:25px 20px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.3s;
}

.card-inf:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.card-inf h2{
    color:var(--navy);
}

.card-inf p{
    color:var(--body-text);
    text-align: left;
    font-size:22px;
}

.card-inf hr{
    margin:25px 0;
}
.ppeld-hero {
  color: var(--body-text);
  padding: 5rem 1.25rem;
}

.ppeld-hero-content {
  max-width: 860px;
  margin: auto;
  text-align: center;
  text-align: left;
}

.ppeld-hero-content h1 {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.ppeld-hero p {
  font-size: 28px;
  font-weight: 400;
  color: var(--body-text);
  
}
.section-title span{
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
}
section h4, section h5{
  margin-bottom: 20px;
  text-align: center;
}
.ppeld-card {
  background: white;
  border-radius: 15px;
  padding: 1.6rem;
  box-shadow:0 8px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
}
.ppeld-card h3 {
  color: var(--body-text);
  margin-bottom:15px;
}

.ppeld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit ,minmax(300px,1fr));
  gap: 25px;
}
.content-block {
    max-width: 1250px;
    margin: 0 auto;
    padding: 100px 6%;
    border-bottom: 1px solid var(--border);
}
.section-number {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    display: block;
    margin-bottom: 8px;
}
.content-block h2 {
    font-size: 2.5rem;
    color: var(--primary);
    font-weight: 600;
    line-height: 1.2;
}
.layout-focus{
  margin-top: 0;
  padding: 10px;
  text-align: left;
  padding-top: 20px;
}
.layout-split { 
  display: grid; 
  grid-template-columns: 1fr 1.4fr; 
  gap: 10px;
  padding-top: 30px;
  padding-bottom: 20px;
}
  .block-sticky-sidebar img{
max-width: 1000px;
height: auto;
width: 100%;
  }

.block-sticky-sidebar { 
  position: relative; 
  text-align: left;
  margin-bottom: 0;
}
.block-main-content p { 
  font-size: 1.05rem; 
  /* margin-bottom: 24px;  */
  color: var(--body-text); 
}
.block-main-content p.lead-text { 
  font-size: 1.4rem; 
  line-height: 1.5; 
  font-weight: 500; 
  color: var(--primary); 
}
.layout-objectives{
  padding-top: 20px;
  padding-bottom: 20px;
}
.layout-objectives .objectives-header { 
  max-width: 700px; 
  margin-bottom: 10px; 
}
.layout-objectives .objectives-header p { 
  font-size: 22px; 
  margin-top: 15px; 
  text-align: left;
}
.objectives-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 24px; 
  margin-bottom: 0;
}
.objective-item {
    border-top: 1px solid rgb(177, 175, 175);
    padding-top: 20px;
    display: flex;
    gap: 20px;
}
.objective-item span { 
  font-weight: 700; 
  color: var(--primary); 
  font-size: 18px; 
  margin-top: 4px; 
}
.objective-item p { 
  font-size: 21px; 
  font-weight: 600; 
  color: var(--body-text); 
}
.closing-quote{
  max-width: 800px;
  margin: 80px;
  text-align: center;
}
.focus-intro { 
  max-width: 600px; 
  margin-bottom: 20px; 
}
.focus-intro p { 
  font-size: 22px; 
}
.focus-card {
    background: whitesmoke;
    padding: 30px;
    border-radius: 4px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.card-meta { 
  font-size: 11px; 
  text-transform: uppercase; 
  color: var(--primary); 
  margin-bottom: 15px; 
}
.card-meta span { 
  color: var(--accent); 
  font-weight: 700; 
}
.focus-card h3 { 
  font-size: 1.35rem; 
  color: var(--primary); 
  margin-bottom: 15px; 
  font-weight: 700; 
}
.focus-card p { 
  font-size: 22px;
   line-height: 1.2;
    margin: 0;
   }
.focus-card:hover { background: var(--accent-light);
   transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(48, 79, 126, 0.06); 
  }

@media (max-width: 1024px) {
    .layout-split { grid-template-columns: 1fr; gap: 30px; 
    }
}

@media (max-width: 768px) {
    .content-block { padding: 60px 6%; }
    .content-block h2 { font-size: 2rem; }
}
.priority-container{
    background:white;
}

.priority{
    background:white;
    padding:30px;
    border-radius:15px;
    text-align:center;
    height:100%;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.3s;
}

.priority:hover{
    transform:translateY(-8px);
}

.priority h3{
    color:var(--primary);
}
table{
    width:100%;
    border-collapse:collapse;
    background:white;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

th{
    background:var(--primary);
    color:white;
    padding:18px;
}

td{
    padding:20px;
    vertical-align:top;
}

td ul{
    padding-left:20px;
}
@media(max-width:768px){

.overlay4,.overlay{
    padding:90px 20px;
}

.overlay4 h1,.overlay1 h{
    font-size:36px;
}

section{
    padding:60px 20px;
}

.stat-card{
    margin-bottom:20px;
}

table{
    display:block;
    overflow-x:auto;
}

.ppeld-card{
    margin-bottom:20px;
}

.priority{
    margin-bottom:20px;
}
}
.initiative-card{
  border-radius: 30px;
  align-items: center;
  text-align: center;
  padding: 50px;
  font-size: 24px;
  margin: 10px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.initiative-card h3{
  color: var(--primary);
}
.btn-project{
  text-decoration: none;
  font-weight: 700;
  transition: .3s;
  border-radius: 25px;
  color: var(--body-text);
  padding: 15px 35px;
  background-color: grey;
}
.btn-project:hover{
  background-color: wheat;
}
.neld-section{
  padding: 60px 0;
  width: 100%;
}
.section-n{
  display: flex;
  gap: 30px;

}
.section-titles{
  text-align: center;
  margin-bottom: 20px;
}
.section-titles h5{
  font-weight: 600;
  text-transform: uppercase;
}
.section-titles p{
  max-width: 800px;
  margin: auto;
}
.container-ELSF{
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 0;
  margin-top: 0px;
  gap: 24px;
  padding: 10px;
  flex-wrap: wrap;
}
.text-neld{
  margin-top: 0;
  padding: 10px 0;
  text-align: left;
  max-width: 670px;
  width: min(100%, 560px);
  flex: 1 1 320px;
}
.text-neld p{
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  margin-bottom: 2rem;
}
.text-neld h1{
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2.1vw, 3rem);
  padding: 0;
  margin-bottom: 12px;
}
.container-ELSF img{
  height: auto;
  object-fit: cover;
  width: min(100%, 520px);
  margin: 0 auto;
  position: relative;
  max-width: 100%;
  transform: none;
  margin-bottom: 0;
  border-radius: 16px;
}
.container-right2{
margin: 5px;
color: var(--body-text);
padding: 12px;
font-weight: 400;
font-size:20px;
height: 100%;
flex: 1;
}
.card-infors{
    background-color: white;
    color: var(--body-text);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    height: 70%;
    padding: 20px;
}
.neld-blog-section{
  
    padding:20px 0;
}
.neld2{
  text-align: center;
  align-items: center;
}
.neld2 img{
width: 100%;
height: 500px;
max-width: 890px;
border-radius: 10px;
}
.neld2 p{
padding: 5px 110px;
text-align: left;
}
.blog-card{
    display:flex;
    align-items:center;
    gap:25px;
    padding:40px 0;
    border-top: 1px solid var(--primary);
}
.blog-image{
    flex:0 0 320px;
}
.blog-image img{
    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:6px;
}

.blog-content{
    flex:1;
}
.blog-category{
    color:var(--primary);
    text-transform:uppercase;
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
}
.blog-content h2,
.blog-content h3{
    color:var(--navy);
    font-size:2.2rem;
    font-weight:700;
    margin:12px 0;
    line-height:1.2;
}
.blog-content h3{ font-size:1.7rem; }

.blog-content p{
    color:var(--body-text);
    line-height:1.8;
    margin-bottom:20px;
}
.blog-content a{
    color:var(--primary);
    text-decoration:none;
    font-weight:700;
}

.blog-content a:hover{
    color:var(--accent);
}

.neld-blog-section hr{
    border:0;
    border-top:2px solid rgba(255,255,255,.12);
    margin:0;
}

@media (max-width:768px){

    .blog-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .blog-image{
        width:100%;
        flex:100%;
    }

    .blog-image img{
        height:240px;
    }

    .blog-content h2{
        font-size:1.6rem;
    }

    .container-ELSF{
        padding: 12px;
        gap: 16px;
    }

    .text-neld{
        width: 100%;
        padding: 0 4px;
        text-align: center;
    }

    .text-neld p{
        font-size: 1rem;
    }
}
.edition-img{
  width: 300px;
  flex-shrink: 0;
}
.edition-img img
.card-image{
  overflow: hidden;
  background-color: #eaeaea;
  width: 100%;
  height: 200px;
}
.card-image img{
  width: 100%;
  height: 100%;
  flex-direction: column;
  flex-grow: 1;
}
.edition-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgb(13, 110, 253,.15);
}
.edition-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
}
.edition-year{
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 10px;
}
.them-card{
  padding: 12px;
  border-radius: 20px;
  border-top: 3px solid rgb(130, 126, 126);
  height: 90%;
  transition: all 0.4s ease;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  margin: 20px;
  margin-bottom: 60px;
}
.them-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}
.them-card h4{
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}
.them-card ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.them-card li{
font-size: 22px;
}
.them-card ul li{
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  color: var(--body-text);
  line-height: 1.7;
}
.them-card ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  font-weight: 700;
  font-size: 18px;
}
.stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin: 50px clamp(20px, 4vw, 90px);
    align-items: stretch;
}
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.15);
    transition: var(--transition);
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

.stat-card:hover {
    transform: translateY(-10px);
}

.stat-card h3 {
    font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 8px;
}

.stat-card p {
    color: var(--body-text);
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
    margin: 0;
}
@media (max-width: 991px) {
    .stats-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin: 30px 24px;
    }

    .stat-card {
        padding: 24px 15px;
    }
}

@media (max-width: 576px) {
    .stats-section {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 20px 16px;
    }

    .stat-card {
        padding: 20px 14px;
    }
}
/* contact page */
.contact{
    background:var(--accent-light);
}
.contactA{
  margin-bottom:0;
  margin-top: 60px;
}
.contact-section{
  margin-bottom: 20;
  padding: 20px;
}
.card-container{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 10px 20px 0;
  align-items: stretch;
}
.card-container > [class*="col-"] {
  padding: 0;
  width: 100%;
}
.contact-card{
    background:whitesmoke;
    padding:28px 18px;
    border-radius:15px;
    box-shadow:0 0 20px rgba(0,0,0,.08);
    transition:.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 180px;
    margin: 0;
    width: 100%;
}
.contact-card:hover{
    transform:translateY(-8px);
}
.contact-card i{
    font-size:28px;
    color:var(--primary);
    margin-bottom:10px;
}
.contact-card p{
  width: 100%;
  overflow-wrap: break-word;
}
.contact-card h5{
    font-weight:600;
}

@media (max-width: 991px) {
  .card-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 576px) {
  .card-container {
    grid-template-columns: 1fr;
    margin: 10px 0 0;
    gap: 14px;
  }

  .contact-card {
    padding: 22px 16px;
    min-height: 160px;
  }
}
.form-control{
    padding:12px;
    border-radius:10px;
    height: 100%;
    margin-bottom: 12px;
    background-color: whitesmoke;
}

.btn-primary{
    padding:12px 35px;
    background-color:var(--accent);
}
.reach{
  background-image: url(image/bb.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(60%);
  text-align:center;
  color: white;
  font-weight: 800;
  padding: 20px 350px;
  height: 280px;
}
/* membership */
.membership-card,.value-card{
    box-shadow: 0 20px 45px rgb(129, 159, 221);
    background-color: white;
    font-size: 22px;
}
.section-cards{
  margin-top: 0;
}
.value-card{
  padding: 8px;
  margin: 10px 0;
  gap: 1px;
  transition: .3s;
  justify-content: space-between;
}
.value-card h3{
  font-weight: 500;
}
.hero-card{
  
    padding:10px 250px ;
    color: var(--body-text);
    position: relative;
    text-align: center;
}
.hero-card::before,.hero-card::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    
}
.hero-card::before{
    width: 260px;
    height: 260px;
    right: -90px;
    top: -90px;
}
.hero-card::after{
    width: 180px;
    height: 180px;
    left: -60px;
    bottom: -70px;
}
.eyebrow{
  display:inline-block;
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  color:white;
}
.hero-card h1{
font-weight: 800;
line-height: 1.2;
margin-bottom: 15px;
font-size: 20px;
}
.hero-action{
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
}
ul{
  list-style: none;
}
.why{
  padding: 10px 70px;
  margin: 30px 80px;
  text-align: center;
  border-radius: 30px;
}
.section-cards{
    padding: 32px;
  margin-top: 24px;
  
}
.section-cards h2,.section-cards h3{
    font-weight: 800;
  margin-bottom: 13px;
  color: var(--body-text);
}
.section-card{
  padding: 40px;
  margin-top: 20px;
  font-size: 20px;
  
    box-shadow: 0 20px 45px rgb(166, 188, 233);
}
.section-card h2,.section-card h3{
  font-weight: 800;
  margin-bottom: 13px;
  color: var(--body-text);
}
.value-card{
  height: 100%;
  border-radius: 18px;
  padding: 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid var(--border);
}
.membership-card{
  font-size: 20px;
  border-radius: 18px;
  padding: 30px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid var(--border);
  height: 92%;
  font-weight: 400;
}
.sec{
  display: flex;
  width: 100%;
  height: 100%;
}
.membership-card:hover,.value-card:hover{
transform: translateY(-10px);
box-shadow: 0 22px 45px rgba(134, 163, 225, 0.4);
}
.benefits-container{
  background-color: white;
  padding:20px;
  display: flex;
  width: 50%;
  margin-left: 40px;
  align-items: stretch;
  max-width: 1100px;

}
.benefits-card{
  flex: 1;
  padding: 40px 30px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: .3s ease;
  height: 100%;
  text-align: center;
  position: relative;
}
.feature-item i{
  color:var(--accent);
}
.benefits-card:hover{
  transform: translateY(-10px);
   box-shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
}
.features{
  text-align: left;
  margin: 0;
  list-style: none;
  padding: 0;
}
.benefits span{
  font-size: 28px;
  vertical-align: super;
  margin-right: 4px;
  
}
.badge{
  padding: 8px 18px;
  font-size: 14px;
  display: inline-block;
  border-radius: 20px;
  margin-bottom: 20px;
  font-weight: 600;
}
.benefits-card{
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 30px;
}
.features li {
  padding: 10px 0 10px 30px;
  font-size: 16px;
  position: relative;
  margin-bottom: 4px;
}
.features li ::before{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.display{
  font-weight: 700;
}
.sections-title{
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: .82rem;
  text-align: center;
}
/* neld */
.edition-panel {
    display: grid;
    gap: 1.2rem;
    margin-top: 1.5rem;
    padding: 10px;
}
@media (min-width: 992px) {
    .edition-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.edition-tier-card {
    background: #ffffff;
    border-radius: 28px;
    min-height: 320px;
    padding: 1.8rem;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.edition-tier-card:hover {
    transform: translateY(-6px);
    border-color: var(--border);
    box-shadow: 0 25px 55px rgba(18, 57, 108, 0.16);
}
.edition-tier-header {
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #edf2fb;
    padding-bottom: 1.25rem;
}
.edition-tier-title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--primary);
    text-transform: uppercase;
}
.edition-tier-title span {
    display: inline-flex;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: rgba(18,63,154,.06);
    font-size: 1rem;
}
.edition-tier-badge {
    font-size:16px;
    font-weight: 700;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    color: var(--primary);
}
/* large screens */
@media (max-width:1200px) {
  .hero-container,
  .hero-card{
    padding: 40px;
  }
  .stats-section,
  .card-grid,
  .value-container,
  .edition-panel{
    gap:20px
  }
}
/* tablets */
@media (max-width:992px) {
  .container-infor{
    flex-direction: column;
  }
  .container-infor,
  .container-right,
  .benefits-container{
    width: 100%;
  }
  .card-infor2,
  .card-infor{
    padding: 25px;
  }
  .card-infor2 p,
  .card-infor p{
    font-size: 18px;
  }
  .card-grid{
    grid-template-columns: repeat(2,1fr);
  }
  .hero-container{
    width: 100%;
    text-align: center;
  }
  .hero-container h1{
    font-size: 42px;
  }
  .logo{
    width: 130px;
  }
  .top-footer{
    grid-template-columns: repeat(2,1fr);
  }
}
/* large phones{ */
@media (max-width:768px) {
  .body{
    font-size: 16px;
  }
  h1{
    font-size: 2rem;
  }
  h2{
    font-size: 1.7rem;
  }
  h3{
    font-size: 1.4rem;
  }
  .card-infor2,
  .card-infor{
    padding: 20px;
  }
  .card-infor2 p,
  .card-infor p{
    font-size: 16px;
  }
  .card-infor2 span,
  .card-infor span{
    font-size: 24px;
  }
  .hero{
    min-height: 7ovh;
  }
  .banner{
    padding: 80px 20px;
  }
  .card-grid,
  .stats-section,
  .value-container,
  .edition-panel{
    grid-template-columns: 1fr;
  }
  .section2,.container-ELSF{
    height: auto;
  }
  .hero-card{
    padding: 40px 20px;
  }
}
/* small phones */
@media (max-width:576px) {
  body{
    font-size: 15px;
  }
  .container-text{
display: block;
padding: 60px;
  }
  header{
    padding: 10px 15px;
  }
  .top-bar{
    font-size: 12px;
  }
  .card-infor2 p,
  .card-infor p{
    font-size: 15px;
  }
  .card-infor2 ,
  .card-infor {
    padding: 18px;
  }
  .hero-container{
    padding: 20px;
  }
  .hero-container h1{
    font-size: 30px;
  }
  .hero-container p{
    font-size: 16px;
  }
  .hero-btn,
  .btn-project,
  .btn-primary,
  .btn-contact{
    width: 100%;
    text-align: center;
  }
  .card,
  .membership-card,
  .value-card,
  .contact-box,
  .inf-card{
    padding: 20px;
  }
  .top-footer{
    grid-template-columns: 1fr;
    text-align: center;
  }
  img{
    max-width: 100%;
    height: auto;
  }
}

/* ============================================================= *
 *  ELSF 2026 refresh — brand components (navy + sky palette)
 * ============================================================= */

/* Shared helpers */
.section-heading{ color: var(--navy) !important; }
.text-center{ text-align:center; }

/* Top bar layout */
.top-bar{ align-items:center; padding:10px 40px; }
.top-bar-news span{ color:rgba(255,255,255,.85); font-weight:500; }
.top-bar-links a{ margin:0 12px; font-size:14px; opacity:.9; }
.top-bar-links a:hover{ opacity:1; text-decoration:underline; }
@media (max-width:992px){ .top-bar{ padding:10px 15px; } }

/* Brand buttons */
.btn-brand{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  border:none;
  padding:12px 28px;
  border-radius:50px;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
}
.btn-brand:hover{ background:var(--navy); color:#fff; box-shadow:var(--shadow-lg); }
.btn-brand-outline{
  display:inline-block;
  border:2px solid var(--primary);
  color:var(--primary);
  background:transparent;
  padding:10px 26px;
  border-radius:50px;
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  transition:var(--transition);
}
.btn-brand-outline:hover{ background:var(--primary); color:#fff; }
.eyebrow-dark{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  font-size:14px;
  color:var(--sky);
  margin-bottom:.5rem;
}

/* Flash messages */
.flash-wrap{ max-width:900px; margin:15px auto 0; padding:0 15px; }
.flash{
  padding:14px 20px;
  border-radius:12px;
  font-size:16px;
  margin-bottom:10px;
  border-left:5px solid;
}
.flash-success{ background:var(--accent-light); color:var(--primary); border-color:var(--accent); }
.flash-error{ background:#eef2f8; color:var(--navy); border-color:var(--text-muted); }

/* Updates */
.updates-section{ padding:40px 20px; }
.updates-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.update-card{
  background:#fff;
  border-radius:18px;
  padding:26px;
  box-shadow:var(--shadow-sm);
  border-left:5px solid var(--sky);
  transition:var(--transition);
}
.update-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.update-card time{ font-size:14px; color:var(--sky); font-weight:700; }
.update-card h4{ color:var(--navy); font-size:20px; font-weight:700; margin:8px 0; }
.update-card p{ font-size:16px; color:var(--body-text); }
.update-card a{ color:var(--primary); font-weight:700; }

/* Adverts */
.adverts-section{ padding:20px 20px 60px; }
.adverts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
}
.ad-card{
  background:linear-gradient(135deg,var(--navy),var(--primary));
  color:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.ad-card img{ width:100%; height:180px; object-fit:cover; }
.ad-card-body{ padding:26px; }
.ad-card-body h4{ font-weight:800; margin-bottom:8px; }
.ad-card-body p{ color:rgba(255,255,255,.82); font-size:16px; margin-bottom:16px; }
.ad-card-body .btn-brand{ background:var(--sky); }
.ad-card-body .btn-brand:hover{ background:#fff; color:var(--navy); }

/* Story article */
.story-article{ padding:50px 20px 60px; }
.story-article .container{ max-width:820px; }
.back-link{ color:var(--primary); font-weight:600; display:block; margin-bottom:16px; }
.story-article h1{ color:var(--navy); font-weight:800; margin:6px 0 4px; }
.story-date{ color:var(--text-muted); font-size:15px; }
.story-hero{ width:100%; border-radius:18px; margin:20px 0; box-shadow:var(--shadow-lg); }
.story-body p{ font-size:19px; line-height:1.8; color:var(--body-text); margin-bottom:18px; }
.not-found{ padding:100px 20px; }
.not-found h1{ font-size:80px; }

/* Section eyebrows / badges — plain text, no highlight box */
.section-badge,
.section-title span,
.sections-title span,
.small-title span{
  background:transparent;
  color:var(--sky);
  padding:0;
  border-radius:0;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ============================================================= *
 *  Admin panel
 * ============================================================= */
.admin-body{ background:#eef2f8; font-size:16px; color:var(--body-text); }
.admin-login{
  max-width:380px;
  margin:8vh auto;
  background:#fff;
  padding:40px 34px;
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.admin-logo{ height:54px; margin-bottom:16px; }
.admin-login h1{ font-size:24px; color:var(--navy); margin-bottom:20px; }
.admin-login input{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:16px;
  margin-bottom:14px;
}
.admin-login .btn-brand{ width:100%; }
.admin-back{ display:block; margin-top:18px; color:var(--text-muted); font-size:14px; }

.admin-header{ background:var(--navy); color:#fff; padding:14px 0; }
.admin-header-inner{
  max-width:1100px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.admin-brand{ display:flex; align-items:center; gap:12px; font-weight:700; }
.admin-brand img{ height:38px; background:#fff; border-radius:8px; padding:3px; }
.admin-link{ color:rgba(255,255,255,.85); margin-left:18px; font-weight:600; }
.admin-link:hover{ color:#fff; }
.admin-main{ max-width:1100px; margin:0 auto; padding:24px 20px 60px; }
.admin-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 24px; }
.admin-tabs a{
  background:#fff; border:1px solid var(--border); color:var(--primary);
  padding:8px 18px; border-radius:50px; font-weight:600; font-size:15px;
}
.admin-tabs a:hover{ background:var(--primary); color:#fff; }
.admin-panel{
  background:#fff; border-radius:18px; padding:26px 24px;
  box-shadow:var(--shadow-sm); margin-bottom:26px;
}
.admin-panel h2{ color:var(--navy); font-size:22px; margin-bottom:4px; }
.admin-panel h2 i{ color:var(--sky); }
.admin-sub{ color:var(--navy); font-size:17px; margin:22px 0 8px; }
.admin-hint{ color:var(--text-muted); font-size:14px; margin-bottom:18px; }
.admin-form{ background:var(--light-bg); border-radius:14px; padding:20px; margin-bottom:20px; }
.admin-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.admin-grid label{ display:flex; flex-direction:column; font-size:14px; font-weight:600; gap:5px; }
.admin-grid label.wide{ grid-column:1 / -1; }
.admin-grid input,.admin-grid textarea,.admin-grid select{
  padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  font-size:15px; font-weight:400; background:#fff;
}
.admin-table{ width:100%; border-collapse:collapse; box-shadow:none; font-size:15px; }
.admin-table th{ background:var(--light-bg); color:var(--navy); text-align:left; padding:10px 12px; }
.admin-table td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.btn-danger{ background:var(--text-muted); color:#fff; border:none; padding:6px 14px; border-radius:8px; cursor:pointer; font-size:14px; }
.btn-ghost{ background:#fff; border:1px solid var(--border); color:var(--primary); padding:6px 14px; border-radius:8px; cursor:pointer; font-size:14px; }
.pill{ padding:3px 12px; border-radius:50px; font-size:13px; font-weight:600; }
.pill-on{ background:var(--accent-light); color:var(--primary); }
.pill-off{ background:#f0f0f0; color:var(--text-muted); }
@media (max-width:768px){ .admin-grid{ grid-template-columns:1fr; } }

/* ---- Demarcated placeholders (forms / empty content areas) ---------- */
.form-placeholder{
  position:relative;
  border:2px dashed var(--sky);
  border-radius:16px;
  padding:28px 24px;
  background:#fff;
}
.form-placeholder-tag{
  position:absolute;
  top:-12px; left:18px;
  background:var(--sky);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:3px 12px;
  border-radius:20px;
}
.newsletter .form-placeholder{ background:transparent; border-color:rgba(255,255,255,.55); }
.newsletter .form-placeholder-tag{ background:#fff; color:var(--navy); }
.placeholder-note{
  color:var(--text-muted);
  font-style:italic;
  text-align:center;
  padding:14px;
  margin:0;
  grid-column:1 / -1;
  width:100%;
}

/* ============================================================= *
 *  Professional refinements — typography, weights, alignment
 *  (kept last so it settles the cascade)
 * ============================================================= */

/* --- Base font (Manrope) + sensible base sizing, a touch bolder --------- */
body{
  font-family: "Manrope", Calibri, "Segoe UI", Candara, "Trebuchet MS", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--body-text);
  -webkit-font-smoothing: antialiased;
}
p{ font-size: 1.05rem; line-height: 1.7; font-weight: 500; }

/* Consistent heading family, colour and weights */
h1,h2,h3,h4,h5,h6{
  font-family: inherit;
  color: var(--navy);
  line-height: 1.25;
}
h1{ font-weight: 700; }
h2{ font-weight: 700; }
h3{ font-weight: 600; }
h4,h5,h6{ font-weight: 600; }

/* Tame the oversized hero / banner weights */
.banner h1,
.overlay h1,.overlay2 h1,.overlay3 h1,.overlay4 h1{ font-weight: 800; }
.overlay,.overlay2,.overlay3,.overlay4,.banner{ font-weight: 500; }

/* --- Navigation --------------------------------------------- */
.navbar a,
.navbar a:focus{ font-size: 15px; font-weight: 600; letter-spacing:.02em; }
.navbar .dropdown ul a{ font-size: 14px; text-transform: none; }
.logo{ height: 62px; width: auto; margin-left: 40px; }
@media (max-width:992px){ .logo{ height: 50px; margin-left: 16px; } }

/* --- Section eyebrow wrappers stay centred, no big type ------ */
.small-title,.sections-title,.section-title{
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.small-title,.section-title,.sections-title{ text-align: center; }
.section-heading{ font-weight: 700; }

/* --- Body copy that was set far too large ------------------- */
.card-infor p{ font-size: 1.1rem; line-height: 1.7; }
.card-infor span{ font-size: 1.15rem; }
.container-right{ font-size: 1.05rem; }
.container-fluid{ font-size: 1.05rem; }
.text-section p{ font-size: 1.05rem; }
.text-neld p{ font-size: 1.05rem; }
.text-neld h1{ font-size: 2.4rem; }
.value-section p,.fs-4{ font-size: 1.1rem !important; }
.ppeld-hero p,.card-inf p,.blog-content p{ font-size: 1.05rem; }
.stat-card h3{ font-size: 2.2rem; }
.eyebrow{ font-size: 1.1rem; letter-spacing: .12em; }

/* --- Alignment / spacing fixes ------------------------------ */
/* stop wide fixed paddings from overflowing on normal screens */
.section-header p{ padding: 5px 0; max-width: 900px; margin-left:auto; margin-right:auto; }
.infor-objectives{ padding: 14px 20px; max-width: 950px; margin: 15px auto 5px; }
.hero-card{ padding: 40px 20px; }
.reach{ padding: 60px 20px; height: auto; }
.why{ padding: 30px 20px; margin: 30px auto; max-width: 1000px; }

/* NELD intro row: align image + text cleanly instead of pushing it */
.container-ELSF{ align-items: center; gap: 30px; flex-wrap: wrap; padding: 20px; }
.text-neld{ padding: 10px; }
.container-ELSF img{
  height: 380px; width: 100%; max-width: 560px;
  margin: 0 auto; transform: none; border-radius: 16px;
}
@media (max-width:992px){ .container-ELSF img{ height: auto; } }

/* Consistent centered section intros */
.section-cards h1,.section-card h3,.Focus h1,.value-section h2{ margin-left:auto; margin-right:auto; }
.value-section{ padding: 50px 20px; }
.governance{ padding: 40px 20px; }

/* Cards: even heights + tidy inner spacing */
.box-card,.values-card,.value-card,.table,.table2,.table3,.membership-card{
  display: flex; flex-direction: column;
}
.box-card p,.values-card p,.value-card p,.table p,.table2 p,.table3 p{ margin-bottom: .6rem; }

/* Buttons: consistent, aligned weight */
.btn-brand,.btn-brand-outline,.btn-contact,.hero-btn,.btn-primary{ font-weight: 600; letter-spacing:.01em; }

/* Footer headings a touch calmer */
.footer-column h3{ font-weight: 700; }
.sub-footer{ font-weight: 500; }

/* Keep text readable on dark / coloured sections
   (the global navy heading colour must not apply here) */
.overlay h1,.overlay2 h1,.overlay3 h1,.overlay4 h1,
.overlay h2,.overlay2 h2,.overlay3 h2,.overlay4 h2,
.overlay h4,.overlay2 h4,.overlay3 h4,.overlay4 h4,
.overlay p,.overlay2 p,.overlay3 p,.overlay4 p,
.banner h1,.banner h2,.banner p,
.newsletter h3,.newsletter p,
.reach h4,.reach p,
.touch-bar h3,.touch-bar p,
.ad-card h4,.ad-card p{
  color:#fff;
}
.newsletter-text p{ color:rgba(255,255,255,.82); }
.ad-card-body p{ color:rgba(255,255,255,.82); }
.git-text p{ color:#cbd5e1; }

/* Darken hero banners via an inset layer instead of filtering the whole
   element — keeps the heading text crisp instead of dimming it too. */
.overlay,.overlay2,.overlay3,.overlay4{
  filter:none;
  box-shadow: inset 0 0 0 2000px rgba(9,24,58,.58);
}
.banner{
  filter:none;
  box-shadow: inset 0 0 0 2000px rgba(9,24,58,.5);
}
.reach{
  filter:none;
  box-shadow: inset 0 0 0 2000px rgba(9,24,58,.62);
}

/* ============================================================= *
 *  Layout / alignment / responsiveness pass
 * ============================================================= */

/* --- Header & navbar: balanced, menu flush-right ------------- */
.header{
  padding: 10px 44px;
  gap: 1.5rem;
}
.brand{ display:inline-flex; align-items:center; }
.logo{ margin-left: 0; }
.navbar{ flex: 0 0 auto; margin-left: auto; }
.navbar > ul{
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 2px;
}
.navbar a,
.navbar a:focus{ padding: 10px 14px; }
/* dropdown panels stay left-aligned under their item */
.navbar .dropdown ul{ left: auto; }

/* --- Logos: consistent sizing / alignment ------------------- */
.brand-info img{ height: 56px; margin-bottom: 15px; }

/* --- Contact page ------------------------------------------- */
.contactA{ margin-top: 50px; margin-bottom: 0; }
.contactA .col-lg-5{ display: flex; }
.contactA iframe{
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: block;
  border-radius: 15px;
}
.card-container{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 20px;
  justify-content: initial;
}
.card-container > div{ width: auto; max-width: none; padding: 0; margin: 0; }
.contact-card{ margin: 0; height: 100%; }

/* --- Responsiveness ----------------------------------------- */
@media (max-width: 1200px){
  .card-container{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px){
  .header{ padding: 10px 16px; gap: .5rem; }
  .top-bar{ flex-direction: column; gap: 6px; text-align: center; }
  .top-bar-links a{ margin: 0 8px; }
  .contactA .col-lg-5{ display: block; }
  .contactA iframe{ min-height: 340px; }
  .newsletter-inner{ flex-direction: column; align-items: flex-start; }
  .touch-bar{ justify-content: center; text-align: center; }
}
@media (max-width: 768px){
  .container-ELSF{ flex-direction: column; }
  .card-container{ grid-template-columns: 1fr; margin: 16px;display: block; }
  .newsletter-form{ width: 100%; }
  .newsletter-form input{ min-width: 0; width: 100%; flex: 1; }
  .reach{ padding: 40px 20px; }
}
@media (max-width: 576px){
  .header{ padding: 8px 12px; }
  .logo{ height: 44px; }
  .banner{ padding: 90px 20px; }
}

/* ============ FORMS (contact + membership) — redesigned ============ *
 * Cards now float on a soft gradient, lead with a branded header strip
 * (icon + title + subtitle), use filled pill-ish inputs with an animated
 * focus ring, and finish with a full-width gradient submit button. */
.form-intro h2{ color:var(--navy); font-weight:800; margin-bottom:8px; }
.form-intro p{ color:var(--text-muted); max-width:620px; }

.form-card{
  max-width:920px;
  margin:34px auto;
  background:#fff;
  border-radius:28px;
  padding:0;                              /* padding now lives on the inner parts */
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 26px 60px rgba(11,43,110,.14);
  position:relative;
}
/* Branded header strip at the top of every form card. */
.form-card-head{
  background:linear-gradient(120deg, var(--navy) 0%, var(--primary) 55%, var(--sky) 130%);
  color:#fff;
  padding:34px 45px 30px;
  text-align:center;
}
.form-card-head .form-card-icon{
  width:60px;height:60px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);
  font-size:26px;color:#fff;
}
.form-card-head h2{ color:#fff; font-weight:800; font-size:1.7rem; margin:0 0 6px; }
.form-card-head p{ color:rgba(255,255,255,.9); font-weight:500; font-size:1rem; margin:0 auto; max-width:520px; }

/* The actual form body sits below the header strip. */
.form-card .brand-form{ padding:38px 45px 44px; }

.brand-form label{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:8px;
}
.form-row { margin-bottom: 20px; }
.form-row label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; color:var(--text-muted); }
.form-row input, .form-row textarea, .form-row select,
.brand-form .form-control, .brand-form select.form-control {
  width:100%; padding:15px 16px;
  border:1.5px solid var(--border); border-radius:14px;
  font:inherit; font-weight:500; font-size:16px; color:var(--body-text);
  background:#f5f8fc;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.form-row input::placeholder, .form-row textarea::placeholder{ color:#9aa7bd; font-weight:500; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus,
.brand-form .form-control:focus{
  outline:none; background:#fff; border-color:var(--sky);
  box-shadow:0 0 0 4px rgba(0,166,240,.16);
}
.form-row textarea { min-height: 140px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-note { font-size: .82rem; font-weight:500; color: var(--text-muted); text-transform:none; letter-spacing:0; }

/* Full-width solid submit inside redesigned form cards. */
.form-card .brand-form .btn-amber{
  display:block; width:100%; margin-top:6px;
  padding:16px 22px; font-size:1.02rem; font-weight:700;
  background:var(--accent);
  box-shadow:0 10px 24px rgba(0,166,240,.24);
}
.form-card .brand-form .btn-amber:hover{
  background:var(--accent-dark);
}

.form-msg { display: none; margin-top: 16px; padding: 14px 18px; border-radius: 12px; font-size: .95rem; font-weight:600; }
.form-msg.ok { display: block; background: var(--accent-light); color: var(--primary); border: 1px solid var(--accent); }
.form-msg.error { display: block; background: #eef2f8; color: var(--navy); border: 1px solid var(--border); }
.nl-ok.error { display: block; color: #ffffff; }

@media (max-width:560px){
  .form-card-head{ padding:28px 24px 24px; }
  .form-card .brand-form{ padding:28px 24px 34px; }
}

/* ============ PDF preview (PPELD programme book) ============ */
.pdf-cta{ text-align:center; margin:6px 0 8px; }
.pdf-preview-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border:none; cursor:pointer;
  border-radius:999px; font-weight:700; font-size:1.02rem; color:#fff;
  background:var(--accent);
  box-shadow:0 10px 24px rgba(0,166,240,.24);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.pdf-preview-btn i{ font-size:1.25rem; }
.pdf-preview-btn:hover{ transform:translateY(-2px); background:var(--accent-dark); }

.pdf-modal[hidden]{ display:none; }
.pdf-modal{ position:fixed; inset:0; z-index:1300; display:flex; flex-direction:column; }
.pdf-modal-backdrop{ position:absolute; inset:0; background:rgba(10,45,110,.72); backdrop-filter:blur(2px); }
.pdf-modal-dialog{
  position:relative; margin:auto; width:min(1000px,94vw); height:min(90vh,900px);
  background:#fff; border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.pdf-modal-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:linear-gradient(120deg, var(--navy), var(--primary)); color:#fff;
}
.pdf-modal-bar strong{ font-weight:700; font-size:1rem; }
.pdf-modal-actions{ display:flex; align-items:center; gap:10px; }
.pdf-modal-actions a{
  color:#fff; text-decoration:none; font-weight:600; font-size:.9rem;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.18);
}
.pdf-modal-actions a:hover{ background:rgba(255,255,255,.32); }
.pdf-modal-close{
  background:none; border:0; color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; padding:0 6px;
}
.pdf-modal iframe{ flex:1; width:100%; border:0; background:#525659; }
.pdf-pages{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; background:#525659;
  padding:8px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.pdf-page{ background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.35); flex:none; }
.pdf-page canvas{ display:block; }
.pdf-loading, .pdf-error{ color:#fff; margin:auto; padding:24px; text-align:center; }
@media (max-width:560px){
  .pdf-modal-dialog{ width:100vw; height:100vh; height:100dvh; border-radius:0; }
  .pdf-modal-bar strong{ font-size:.85rem; }
  .pdf-modal-actions a span{ display:none; }
}

/* Newsletter band */
.newsletter {
  background: linear-gradient(120deg, var(--navy-900), var(--blue));
  color: #fff; border-radius: var(--radius); padding: 44px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center;
}
.newsletter h2 { color: #fff; }
.newsletter p { color: rgba(255,255,255,.82); margin: 0; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1; min-width: 200px; padding: 14px 16px; border: none; border-radius: 50px; font: inherit;
}
.newsletter-form input:focus { outline: 2px solid var(--accent); }
.newsletter .nl-ok { display:none; margin-top:12px; font-size:.9rem; color:#ffffff; }
@media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; padding: 30px; } }

/* Footer newsletter */
.footer-newsletter input { width:100%; padding:12px 14px; border:none; border-radius:8px; margin-bottom:10px; font:inherit; }
.footer-newsletter .btn { width:100%; justify-content:center; }
.footer-newsletter .nl-ok { display:none; color:#ffffff; font-size:.85rem; margin-top:8px; }

/* ============ ADVERTS / SPONSOR RAIL ============ */
.ad-slot .ad-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: var(--text-muted); margin-bottom: 8px; }
.ads-card {
  border-radius: var(--radius); overflow: hidden; color: #fff; position: relative;
  background: linear-gradient(135deg, var(--navy), var(--sky)); padding: 30px 26px;
  box-shadow: var(--shadow);
}
.ads-card .ad-tag { position: absolute; top: 12px; right: 14px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.ads-card h3 { color: #fff; font-size: 1.35rem; }
.ads-card p { color: rgba(255,255,255,.82); font-size: .95rem; }
.ads-rail { display: flex; flex-direction: column; gap: 22px; }

/* ============ LATEST UPDATES LIST ============ */
.update-date {  background-color: #f1f5f9;  color: var(--primary);font-weight: 700; border-radius: 8px;padding: 12px;text-align: center; min-width: 65px;
   }
.date-card { border-radius: 12px; display: flex; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s ease;  gap: 20px; padding: 20px ; background-color: var(--white);   border-bottom: 1px solid var(--border-color); border-radius: 12px; align-items: flex-start; }
.date-day { display: block; font-size: 20px; font-weight: 800; line-height: 1;}
.date-month {display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px;}
.update-text h4 { font-size: 14px; margin-bottom: 2px; }
.update-text p { font-size: 14px; color: var(--text-muted); margin-top: 4px; 
}
.date-card:hover{
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.grid-two-cols { 
    display: grid;
    grid-template-columns: 100%;
    gap: 24px;
}

@media (min-width: 768px) {
    .grid-two-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 768px) {
    .ads-card {
        padding: 48px;
    }
}
.hero-title {
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}
.hero-description {
    color: rgba(255,255,255,.85);
    font-size: 16px;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* UI Elements & Buttons */
.btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

/* Primary CTA button (used for form submits, newsletter subscribe and the
   "Book this space" ad). Solid azure so it reads clearly on both white form
   cards and the dark newsletter band; darkens on hover. */
.btn-amber{
    background-color: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 600;
}

.btn-amber:hover {
    background-color: var(--accent-dark);
    color: #fff;
}
.section-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    
}

.divider-text {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-light);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.divider-line {
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
}

.ad-cards {
    background: linear-gradient(to right, #f1f2f3, #f8fafc, #e2e8f2);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: center;
}

@media (min-width: 768px) {
    .ad-cards {
        flex-direction: row;
        text-align: left;
    }
}

.ad-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
}

.ad-cards p{
    font-size: 14px;
    color: var(--text-light);
    margin-top: 4px;
}

/* Quick Updates Component */
.updates-section {
    margin-bottom: 48px;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
}
.date-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.update-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--body-text);
}
.directory-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ============================================================= *
 *  Final polish — navbar, hero height & brand-consistent accents
 *  (kept last so these intentionally win the cascade)
 * ============================================================= */

/* Hero carousel: full height on desktop, but shorter on smaller screens so
   page content is visible without a full-viewport scroll. */
@media (max-width: 992px){ .hero{ height: 72vh; } }
@media (max-width: 768px){ .hero{ height: 60vh; } }
@media (max-width: 480px){ .hero{ height: 52vh; } }

/* Give the desktop dropdown panels a tidy card look aligned to the brand. */
.navbar .dropdown ul{
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.navbar .dropdown ul a{ transition: background .2s ease, color .2s ease; }

/* Mobile drawer: readable sub-links + comfortable tap spacing. */
.navbar-mobile .dropdown ul a{
  font-size: 16px;
  color: var(--text-muted);
  padding: 9px 20px;
}

/* Top-bar quick links use the brand sky on hover instead of a plain underline. */
.top-bar-links a:hover{ color: #ffffff; }

/* Keep the active nav item visually distinct (weight + brand colour). */
.navbar .active{ font-weight: 700; }

/* ============================================================= *
 *  Alignment consistency — logo-refresh pass
 * ============================================================= */

/* Unify all standard containers to ONE content width so section content lines
   up down the page (Bootstrap's default steps 1140px→1320px; pin to 1200). */
.container{ max-width: 1200px; margin-inline: auto; }

/* Centre every section intro (eyebrow + heading + lead) consistently. */
.section-header,
.section-header p,
.small-title, .section-title, .sections-title,
.section-cards .container > h1,
.section-cards .container > p{ text-align: center; }

/* Keep intro / body copy to a comfortable, consistent reading measure. */
.section-header p,
.section-cards .container > p{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Even, predictable vertical rhythm between the eyebrow, heading and lead. */
.small-title, .section-title, .sections-title{ margin-bottom: 10px; }
.section-header .section-heading, .section-header h1, .section-header h2{ margin-bottom: 14px; }

/* Fix a full-width row that overflowed by its side margins (width:100% +
   horizontal margin) — centre it within the shared content width instead. */
.container-infor{ width: auto; max-width: 1200px; margin: 20px auto; }

/* ============================================================= *
 *  Typography scale — consistent, responsive sizes & weights
 *  Weights normalized to 400 / 500 / 600 / 700 / 800.
 *  Headings use clamp(min, fluid, max) so large display type scales
 *  down smoothly on phones instead of overflowing.
 * ============================================================= */
/* ---- One hierarchy for every heading level (consistent flow) ------ */
h1, h2, h3, h4, h5, h6{ line-height: 1.22; }
h1, .h1{ font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); font-weight: 700; }
h2, .h2{ font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem); font-weight: 700; }
h3, .h3{ font-size: clamp(1.3rem, 1.12rem + .8vw, 1.6rem); font-weight: 600; }
h4, .h4{ font-size: clamp(1.15rem, 1.05rem + .35vw, 1.3rem); font-weight: 600; }
h5, .h5{ font-size: 1.1rem; font-weight: 600; }
h6, .h6{ font-size: .95rem; font-weight: 600; }

/* ---- Body copy: one comfortable measure ---------------------------- */
p{ font-size: 1.0625rem; line-height: 1.7; }
small, .small{ font-size: .875rem; }

/* ---- Display / hero headings + the shared .section-heading, one scale */
.display-4{ font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3rem); line-height: 1.15; font-weight: 800; }
.display-5, .section-heading{ font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); line-height: 1.18; }
.display-6{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; }
.lead{ font-size: clamp(1.08rem, 1rem + .45vw, 1.25rem); line-height: 1.6; font-weight: 400; }

/* ---- Fold Bootstrap's size utilities into the same scale ----------- *
   (Bootstrap's .fs-* use !important, so these must too — this is what
   was making stray paragraphs 28px "too big".) */
.fs-1{ font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem) !important; }
.fs-2{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) !important; }
.fs-3{ font-size: 1.35rem !important; }
.fs-4{ font-size: 1.15rem !important; }
.fs-5{ font-size: 1.05rem !important; }
.fs-6{ font-size: .9rem !important; }

/* ---- Eyebrows / section tags: one small uppercase style ------------ */
.small-title, .section-title, .sections-title, .section-badge, .eyebrow{
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
/* The visible eyebrow text sits in a <span> that sometimes carries fs-4 —
   keep it small regardless. */
.small-title span, .section-title span, .sections-title span{ font-size: .8rem !important; }

/* ---- Hero/display headings share the SAME size as every main heading --- */
.banner h1, .section2-about h1,
.text-neld h1,
.hero-container h1{ font-size: clamp(1.9rem, 1.25rem + 2.2vw, 2.6rem); }
.text-neld h1{ padding-right: 0; }
.not-found h1{ font-size: clamp(2.6rem, 1.8rem + 6vw, 5rem); }

/* ---- Consistent vertical rhythm between headings and text ---------- */
h1, h2, h3{ margin-bottom: .55em; }
h4, h5, h6{ margin-bottom: .4em; }

/* ============================================================= *
 *  Newsletter / subscribe band
 *  The markup is a bare <form class="newsletter-form"> — style it into a
 *  self-contained, centred brand band (was a full-width, unstyled bar).
 * ============================================================= */
.newsletter-form{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: 760px;
  margin: 40px auto;
  padding: 30px clamp(18px, 4vw, 38px);
  background: linear-gradient(120deg, var(--navy), var(--primary));
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
/* CSS heading above the field row (decorative CTA copy). */
.newsletter-form::before{
  content: "Stay in the loop with ELSF";
  flex-basis: 100%;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
  margin-bottom: 2px;
}
.newsletter-form input{
  flex: 1 1 300px;
  min-width: 0;
  padding: 14px 18px;
  border: none;
  border-radius: 50px;
  font: inherit;
  background: #fff;
  color: var(--body-text);
}
.newsletter-form input:focus{ outline: 3px solid rgba(255,255,255,.55); }
.newsletter-form .btn-amber{ flex: 0 0 auto; }
.newsletter-form .nl-ok{
  flex-basis: 100%;
  text-align: center;
  color: #fff;
  font-size: .92rem;
  margin-top: 6px;
}
@media (max-width: 560px){
  .newsletter-form{ margin: 30px 16px; }
  .newsletter-form input{ flex-basis: 100%; }
  .newsletter-form .btn-amber{ width: 100%; }
}

/* ============================================================= *
 *  No horizontal overflow (the "blank space on the right")
 * ============================================================= */
/* Root cause on small phones: long unbreakable emails/URLs (e.g. the footer
   address) pushed the page wider than the screen. Let them wrap. */
.contact-info a, .contact-card p, .touch-bar a, .git-contacts a,
.reach a, .site-footer a[href^="mailto:"]{
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Safety net: clip any stray horizontal overflow so no device shows a blank
   strip on the right (body already had this; html did not). */
html{ overflow-x: hidden; }

/* ============================================================= *
 *  Section & card alignment
 * ============================================================= */
/* Equal-height cards inside a Bootstrap row so tiers / mandate cards line up
   instead of ending at different heights. (They're already flex-column.) */
.membership-card, .value-card, .table, .table2, .table3, .contact-card{ height: 100%; }
/* Bootstrap columns stretch to equal height by default; make sure the card
   fills the column even when its content is shorter. */
.row [class*="col-"] > .membership-card,
.row [class*="col-"] > .value-card,
.row [class*="col-"] > .table2,
.row [class*="col-"] > .table3{ width: 100%; }
/* Keep section intros and their cards centred within the shared content width. */
.section-cards .container, .section-card .container, .governance, .value-section{
  margin-inline: auto;
}

/* ============================================================= *
 *  Uniform typography groups (explicit request)
 *   1) all card information text + paragraphs  → same size + colour
 *   2) all card titles                         → same style
 *   3) all MAIN headings                       → identical styling
 *   4) all SECOND headings (h2)                → identical styling
 *  (Dark advert cards and hero/overlay bands keep their own light text
 *   because those rules are more specific — intentional for readability.)
 * ============================================================= */

/* 1) Body copy + card information — ONE font size and colour everywhere. */
p,
.card-infor p, .card-inf p,
.box-card p,
.value-card p,
.table p, .table2 p, .table3 p,
.contact-card p,
.card-body2 p,
.membership-card li,
.feature-item{
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.7;
  color: var(--body-text);
  font-weight: 400;
}

/* 2) Card titles — ONE size, weight, colour across every information card. */
.box-card h4,
.value-card h4,
.table h4, .table2 h4, .table3 h4,
.contact-card h5,
.card-body2 h4,
.membership-card > span{
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: .5rem;
}
.card-body{
  background-color: white;
}
.card-body2 h5{
  font-size: 24px;
}
/* 3) MAIN headings (page & section titles) — all identical. */
h1,
.section-heading,
.display-4, .display-5, .display-6{
  font-size: clamp(1.9rem, 1.25rem + 2.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--navy);
}

/* 4) SECOND headings — all identical. */
h2{
  font-size: clamp(1.45rem, 1.15rem + 1.3vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}

/* ==========================================================================
 * Content images + Read-more modal + lightbox
 * (updates / adverts / stories — highlight image, gallery, and the modal
 * opened by the Updates "Read more" button)
 * ======================================================================== */

/* --- Update card: highlight image, clamped excerpt, read-more button --- */
.update-card{ display:flex; flex-direction:column; overflow:hidden; }
.update-media{ margin:-26px -26px 16px; }
.update-media img{ width:100%; height:190px; object-fit:cover; display:block; }
.update-excerpt{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.read-more-btn{
  margin-top:auto; align-self:flex-start;
  background:none; border:0; padding:12px 0 0;
  color:var(--primary); font-weight:700; font-size:16px; cursor:pointer;
}
.read-more-btn i{ display:inline-block; transition:transform .2s; }
.read-more-btn:hover i{ transform:translateX(4px); }

/* --- Image gallery (extra images on any item) --- */
.gallery-thumb{
  padding:0; border:0; background:none; cursor:pointer; width:100%;
  border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-md);
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.gallery-thumb:hover img{ transform:scale(1.05); }

/* Single extra image → one large framed thumbnail. */
.content-gallery--single{ margin-top:24px; }
.content-gallery--single .gallery-thumb{ aspect-ratio:16/9; }

/* Two or more images → a big multi-slide carousel. */
.content-gallery-wrap{ margin-top:26px; }
.cm-gallery-swiper{ padding-bottom:40px; }        /* room for the pagination dots */
.cm-gallery-swiper .swiper-slide{ height:auto; }
.cm-gallery-swiper .gallery-thumb{
  height:clamp(230px, 34vh, 360px);
  aspect-ratio:auto;
}
/* Brand the Swiper controls to match the rest of the site. */
.cm-gallery-swiper .swiper-button-prev,
.cm-gallery-swiper .swiper-button-next{
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.95); color:var(--navy);
  box-shadow:var(--shadow-md); top:calc(50% - 20px); margin-top:0;
  transition:background .2s, color .2s, transform .2s;
}
.cm-gallery-swiper .swiper-button-prev:hover,
.cm-gallery-swiper .swiper-button-next:hover{ background:var(--sky); color:#fff; }
.cm-gallery-swiper .swiper-button-prev{ left:10px; }
.cm-gallery-swiper .swiper-button-next{ right:10px; }
.cm-gallery-swiper .swiper-button-prev::after,
.cm-gallery-swiper .swiper-button-next::after{ font-size:16px; font-weight:700; }
.cm-gallery-swiper .swiper-button-disabled{ opacity:0; pointer-events:none; }
.cm-gallery-swiper .swiper-pagination-bullet{ background:var(--primary); opacity:.35; }
.cm-gallery-swiper .swiper-pagination-bullet-active{ background:var(--sky); opacity:1; width:22px; border-radius:6px; }
.ad-card .content-gallery{ margin-bottom:16px; }

/* --- Read-more modal --- */
body.modal-open{ overflow:hidden; }
.content-modal[hidden],
.img-lightbox[hidden]{ display:none; }
.content-modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.content-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(10,45,110,.55); backdrop-filter:blur(2px);
}
.content-modal-dialog{
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:900px; max-height:90vh; overflow:hidden;
  background:#fff; border-radius:22px; box-shadow:var(--shadow-lg);
  animation:cm-in .25s ease;
}
@keyframes cm-in{ from{ transform:translateY(20px); opacity:0; } to{ transform:none; opacity:1; } }
.content-modal-close{
  position:absolute; top:12px; right:14px; z-index:2;
  width:38px; height:38px; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--navy);
  font-size:26px; line-height:1; cursor:pointer; box-shadow:var(--shadow-sm);
}
.content-modal-close:hover{ background:var(--sky); color:#fff; }
.content-modal-scroll{ overflow-y:auto; padding:0 0 30px; }
.content-modal-scroll > :first-child:not(.cm-hero){ margin-top:44px; }
.cm-hero{ width:100%; height:clamp(260px, 40vh, 380px); object-fit:cover; display:block; margin-bottom:18px; }
.content-modal-scroll .blog-category,
.content-modal-scroll .cm-title,
.content-modal-scroll .story-date,
.content-modal-scroll .story-body,
.content-modal-scroll .content-gallery,
.content-modal-scroll .cm-link{ margin-left:32px; margin-right:32px; }
.cm-title{ color:var(--navy); font-weight:800; margin:10px 0 4px; }
.content-modal-scroll .story-body p{ font-size:17px; line-height:1.75; margin-bottom:16px; }
.cm-link{ display:inline-block; margin-top:20px; }

/* --- Full-size image lightbox --- */
.img-lightbox{
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(6,20,50,.9);
}
.img-lightbox img{ max-width:100%; max-height:90vh; border-radius:8px; box-shadow:var(--shadow-lg); }
.img-lightbox-close{
  position:absolute; top:16px; right:24px;
  background:none; border:0; color:#fff; font-size:42px; line-height:1; cursor:pointer;
}

@media (max-width:600px){
  .cm-hero{ height:200px; }
  .content-modal-scroll .blog-category,
  .content-modal-scroll .cm-title,
  .content-modal-scroll .story-date,
  .content-modal-scroll .story-body,
  .content-modal-scroll .content-gallery,
  .content-modal-scroll .cm-link{ margin-left:20px; margin-right:20px; }
}

/* --- Advertisement tiles (home page) — image-only banners, 3 to a row, with
   an optional link. Every tile keeps a fixed banner shape (16:9). --- */
.ad-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.ad-tile{
  display:block;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.ad-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
a.ad-tile:hover img{ transform:scale(1.05); }
@media (max-width:900px){ .ad-tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .ad-tiles{ grid-template-columns:1fr; } }





/* ============================================================= *
 *  UNIFIED BUTTON SYSTEM  (kept last so it settles the cascade)
 *  One consistent shape, size, weight and motion for every CTA on
 *  the site. Three variants share that base:
 *    • primary  — filled brand gradient (form submits, hero CTAs,
 *                 "Join the Foundation", PDF preview, etc.)
 *    • outline  — transparent with a brand border (secondary CTAs)
 *    • contact  — inverse white pill for the dark footer touch-bar
 * ============================================================= */
.btn-amber,
.btn-brand,
.btn-primary,
.hero-btn,
.btn-project,
.pdf-preview-btn,
.btn-brand-outline,
.btn-contact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:fit-content;              /* hug the label even inside grid/flex cards */
  max-width:100%;
  padding:13px 30px;
  border:none;
  border-radius:999px;
  font-size:1rem;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-amber i,
.btn-brand i,
.btn-primary i,
.hero-btn i,
.btn-project i,
.pdf-preview-btn i,
.btn-brand-outline i,
.btn-contact i{ font-size:1.1rem; line-height:1; }

/* Primary — solid brand azure (no gradient), uniform everywhere */
.btn-amber,
.btn-brand,
.btn-primary,
.hero-btn,
.btn-project,
.pdf-preview-btn{
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 24px rgba(0,166,240,.24);
}
.btn-amber:hover,
.btn-brand:hover,
.btn-primary:hover,
.hero-btn:hover,
.btn-project:hover,
.pdf-preview-btn:hover{
  background:var(--accent-dark);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,166,240,.30);
}

/* Secondary — outline */
.btn-brand-outline{
  background:transparent;
  border:2px solid var(--primary);
  color:var(--primary);
  padding:11px 28px;                 /* offset the 2px border → same height */
  box-shadow:none;
}
.btn-brand-outline:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(18,63,154,.24);
}

/* Footer contact — inverse pill that reads clearly on the navy touch-bar */
.btn-contact{
  background:#fff;
  color:var(--primary);
  box-shadow:0 8px 20px rgba(0,0,0,.20);
}
.btn-contact:hover{
  background:var(--sky);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}

/* Newsletter subscribe keeps the shared shape but stays solid azure so it
   pops against the navy→royal subscribe band. */
.newsletter-form .btn-amber{
  background:var(--sky);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.newsletter-form .btn-amber:hover{
  background:var(--accent-dark);
}

/* Full-width form-card submit inherits the unified look but keeps its block
   layout + lift on hover. */
.form-card .brand-form .btn-amber:hover{
  transform:translateY(-2px);
}

/* ============================================================= *
 *  PROFESSIONAL POLISH  (kept last so it settles the cascade)
 *  A light, global refinement pass: a calmer sticky header with an
 *  animated nav indicator, crisp hero bands (gradient scrim instead
 *  of a brightness filter that greyed the text), and subtle card
 *  motion — all using the shared shadow/radius tokens.
 * ============================================================= */

/* --- Header: swap the hard 2px royal rule for a soft, modern lift --- */
.header{
  border-bottom:1px solid rgba(11,43,110,.07);
  box-shadow:0 6px 24px rgba(11,43,110,.06);
  background:#fff;
}
/* The frosted-glass blur is desktop-only: a backdrop-filter creates a
   containing block, which would trap the position:fixed mobile menu inside the
   header instead of covering the viewport. The mobile drawer only exists below
   992px, so restrict the effect to wider screens. */
@media (min-width:992px){
  .header{
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(1.2) blur(8px);
    backdrop-filter:saturate(1.2) blur(8px);
  }
}
/* Animated underline indicator on the top-level nav links (desktop). */
@media (min-width:993px){
  .navbar > ul > li > a{ position:relative; }
  .navbar > ul > li > a::after{
    content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
    background:var(--sky); border-radius:2px;
    transform:scaleX(0); transform-origin:left; transition:transform .26s ease;
  }
  .navbar > ul > li > a:hover::after,
  .navbar > ul > li > a.active::after,
  .navbar > ul > li:hover > a::after{ transform:scaleX(1); }
}

/* --- Interior page hero bands (.overlay*) — crisp white text over a
   gradient scrim rather than a brightness filter that dulled it. --- */
.overlay, .overlay2, .overlay3, .overlay4{
  position:relative;
  filter:none;                       /* was brightness(60%) → greyed the text */
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(260px, 40vh, 440px);
  padding:clamp(48px, 7vw, 96px) 20px;
}
.overlay::before, .overlay2::before, .overlay3::before, .overlay4::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(9,34,84,.55) 0%, rgba(9,34,84,.74) 100%);
}
.overlay > *, .overlay2 > *, .overlay3 > *, .overlay4 > *{ position:relative; z-index:1; }
.overlay p, .overlay2 p, .overlay3 p, .overlay4 p{
  max-width:760px; margin-inline:auto; opacity:.96;
}

/* --- Cards: a consistent, quiet lift on hover for the interactive ones --- */
.membership-card, .value-card, .contact-card, .stat-card{
  transition:transform .28s ease, box-shadow .28s ease;
}
.membership-card:hover, .value-card:hover, .contact-card:hover, .stat-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
/* Project cards get the same treatment. */
.table2, .table3{ transition:transform .28s ease, box-shadow .28s ease; }
.table2:hover, .table3:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }

/* --- Blog / story cards: gentle image zoom on hover --- */
.blog-card .blog-image img{ transition:transform .5s ease; }
.blog-card:hover .blog-image img{ transform:scale(1.04); }

/* --- Smoother global motion for links & icons --- */
a{ transition:color .2s ease; }

/* ============================================================= *
 *  Embedded membership registration form (elsf_membership_form)
 *  The form's markup + JS are unchanged; these are its original
 *  styles, scoped under .elsf-mform and remapped to the ELSF brand
 *  palette + Manrope so it reads as part of the website. Generic
 *  class names (.header/.row/hr) are reset where the site/Bootstrap
 *  would otherwise leak onto the form.
 * ============================================================= */
.elsf-mform-section{ padding:8px 16px 50px; }

.elsf-mform{
  /* Map the form's navy/gold palette onto ELSF brand tokens. */
  --navy: var(--primary);
  --navy-dark: var(--primary-dark);
  --gold: var(--sky);
  --gold-light: var(--accent-light);
  --grey-bg: var(--light-bg);
  --text: var(--body-text);
  --muted: var(--text-muted);
  --border: #e2e8f2;
  --error: #B3261E;
  --success: #1E7B4D;
  color: var(--text);
  line-height: 1.5;
}
.elsf-mform *, .elsf-mform *::before, .elsf-mform *::after{ box-sizing:border-box; }

.elsf-mform .wrapper{ max-width:760px; margin:0 auto; padding:20px 0; }

.elsf-mform .header{
  text-align:center; margin-bottom:28px;
  padding:0; border:0; box-shadow:none; background:transparent; gap:0; position:static;
}
.elsf-mform .header h1{ color:var(--navy); font-size:22px; letter-spacing:.3px; margin:0 0 6px; line-height:1.3; }
.elsf-mform .header .sub{ color:var(--muted); font-size:13px; margin:0; }
.elsf-mform .header hr{ border:none; border-top:3px solid var(--gold); width:80px; margin:14px auto 0; opacity:1; }

.elsf-mform .title{ text-align:center; color:var(--navy); font-size:19px; font-weight:700; margin:22px 0 30px; }

.elsf-mform form{ background:#fff; border-radius:16px; box-shadow:var(--shadow-md); overflow:hidden; border:1px solid var(--border); }

.elsf-mform .section{ padding:26px 28px; border-bottom:1px solid var(--border); }
.elsf-mform .section:last-of-type{ border-bottom:none; }
.elsf-mform .section h2{ font-size:15px; color:var(--navy); text-transform:uppercase; letter-spacing:.4px; margin:0 0 18px; padding-bottom:8px; border-bottom:2px solid var(--gold); line-height:1.3; }

.elsf-mform .field{ margin-bottom:16px; }
.elsf-mform .field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--text); text-transform:none; letter-spacing:normal; }
.elsf-mform .field label .req{ color:var(--error); }
.elsf-mform .field input[type=text],
.elsf-mform .field input[type=email],
.elsf-mform .field input[type=tel],
.elsf-mform .field input[type=date],
.elsf-mform .field select,
.elsf-mform .field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:10px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.elsf-mform .field input:focus,
.elsf-mform .field select:focus,
.elsf-mform .field textarea:focus{ outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(0,166,240,.18); }

.elsf-mform .row{ display:flex; gap:16px; margin:0; }
.elsf-mform .row .field{ flex:1; min-width:0; }
@media (max-width:560px){ .elsf-mform .row{ flex-direction:column; gap:0; } }

.elsf-mform .membership-type{ display:flex; gap:14px; margin-bottom:6px; }
@media (max-width:560px){ .elsf-mform .membership-type{ flex-direction:column; } }
.elsf-mform .type-card{ flex:1; border:2px solid var(--border); border-radius:12px; padding:14px 16px; cursor:pointer; display:flex; align-items:center; gap:10px; transition:border-color .15s, background .15s; }
.elsf-mform .type-card:hover{ border-color:var(--sky); }
.elsf-mform .type-card input{ accent-color:var(--primary); width:18px; height:18px; margin:0; }
.elsf-mform .type-card span{ font-size:14px; font-weight:600; }
.elsf-mform .type-card.selected{ border-color:var(--primary); background:rgba(0,166,240,.07); }

.elsf-mform .conditional{ display:none; }
.elsf-mform .conditional.active{ display:block; animation:elsfMformFade .2s ease; }
@keyframes elsfMformFade{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:translateY(0);} }

.elsf-mform .checkbox-group{ display:flex; flex-direction:column; gap:10px; }
.elsf-mform .checkbox-item{ display:flex; align-items:center; gap:10px; font-size:14px; }
.elsf-mform .checkbox-item input{ width:16px; height:16px; accent-color:var(--primary); }
.elsf-mform .declaration-text{ font-size:13.5px; color:var(--muted); background:var(--grey-bg); border-left:3px solid var(--sky); padding:14px 16px; border-radius:10px; margin-bottom:18px; }
.elsf-mform .checkbox-item.declare{ align-items:flex-start; font-weight:600; }
.elsf-mform .checkbox-item.declare input{ margin-top:3px; }

.elsf-mform .submit-bar{ padding:26px 28px 32px; text-align:center; }
.elsf-mform button[type=submit]{ background:var(--accent); color:#fff; border:none; padding:14px 42px; font-size:15px; font-weight:700; border-radius:999px; cursor:pointer; box-shadow:0 10px 24px rgba(0,166,240,.24); transition:background .15s, transform .2s, box-shadow .2s; }
.elsf-mform button[type=submit]:hover{ background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,166,240,.30); }
.elsf-mform button[type=submit]:disabled{ background:#A9B4BE; cursor:not-allowed; box-shadow:none; transform:none; }
.elsf-mform .note{ font-size:12px; color:var(--muted); margin-top:10px; }

.elsf-mform .status-msg{ text-align:center; padding:40px 28px; }
.elsf-mform .status-msg .icon{ font-size:40px; margin-bottom:12px; }
.elsf-mform .status-msg h3{ color:var(--navy); margin:0 0 8px; }
.elsf-mform .status-msg p{ color:var(--muted); margin:0; font-size:1rem; }
.elsf-mform .error-text{ color:var(--error); font-size:12.5px; margin-top:4px; display:none; }
.elsf-mform .field.invalid input,
.elsf-mform .field.invalid select{ border-color:var(--error); }
.elsf-mform .field.invalid .error-text{ display:block; }

/* ============================================================= *
 *  JUL 2026 UI REFRESH
 *  - distinct, readable per-page hero images
 *  - one unified card treatment (logo-blue shadow + R/B accent border)
 *  - one unified card-header style (icons removed in the HTML)
 *  - navbar dropdown wrapping, aligned social icons,
 *    contact form restyled to echo the membership form
 * ============================================================= */

/* ---- Distinct per-page hero images with a readable dark scrim ---------- */
.overlay, .overlay2, .overlay3, .overlay4{
  filter:none !important;               /* scrim now lives in the gradient, so text stays crisp */
  background-repeat:no-repeat;
  background-position:center 22%;        /* bias toward the top so faces aren't cropped */
  background-size:cover;
}
.overlay h1, .overlay2 h1, .overlay3 h1, .overlay4 h1,
.overlay p,  .overlay2 p,  .overlay3 p,  .overlay4 p{
  color:#fff !important;
  text-shadow:0 2px 16px rgba(0,0,0,.55);   /* identical to the .banner (who-are-we) hero */
}
/* Hero scrims lightened so the photo shows through (user request). The who-we-are
   .banner stays the darker reference; Home is a carousel (no scrim). Brighter photos
   keep a touch more scrim so the white hero text stays readable. */
.hero-membership{ background-image:linear-gradient(rgba(4,16,42,.15),rgba(4,16,42,.27)), url(image/DSC_0760.jpg) !important; background-position:center 40%; }
.hero-story{     background-image:linear-gradient(rgba(4,16,42,.13),rgba(4,16,42,.25)), url(image/DSC_0132.jpg) !important; background-position:center 28%; }
.hero-mandate{   background-image:linear-gradient(rgba(4,16,42,.19),rgba(4,16,42,.31)), url(image/archive/home.jpg) !important; background-position:center 32%; }
.hero-mission{   background-image:linear-gradient(rgba(4,16,42,.11),rgba(4,16,42,.23)), url(image/logistics-air-sea.jpg) !important; background-position:center 45%; }
.hero-projects{  background-image:linear-gradient(rgba(4,16,42,.09),rgba(4,16,42,.23)), url(image/DSC_0115.jpg) !important; background-position:center 40%; }
.hero-contact{   background-image:linear-gradient(rgba(4,16,42,.11),rgba(4,16,42,.23)), url(image/DSC_0140.jpg) !important; background-position:center 30%; }
.hero-neld{      background-image:linear-gradient(rgba(4,16,42,.21),rgba(4,16,42,.33)), url(image/DSC_0126.jpg) !important; background-position:center 25%; }
.hero-ppeld{     background-image:linear-gradient(rgba(4,16,42,.21),rgba(4,16,42,.33)), url(image/DSC_0123.jpg) !important; background-position:center 22%; }

/* About Us banner — the reference scrim/position the other heroes now match. */
.banner{
  filter:none !important;
  background-image:linear-gradient(rgba(4,16,42,.58), rgba(4,16,42,.70)), url(image/DSC_0741.jpg) !important;
  background-position:center 26% !important;   /* show more of the top so every face in the group is visible */
  padding:120px 24px !important;
}
.banner h1, .banner h2, .banner p, .banner .subtitle{
  color:#fff !important;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.banner h2{ font-weight:700; }
.banner .subtitle{ opacity:.96; }
/* ---- "Join Membership" CTA button in the navbar ---------------------- */
.navbar .nav-cta > a,
.navbar .nav-cta > a:focus{
  background:var(--sky);
  color:#fff !important;
  padding:10px 24px !important;
  border-radius:999px;
  font-size:16px !important;
  font-weight:700;
  text-transform:none !important;
  white-space:nowrap;
  margin-left:12px;
  box-shadow:0 8px 20px rgba(0,166,240,.30);
  transition:background .25s ease, transform .2s ease;
}
.navbar .nav-cta > a:hover{ background:var(--accent-dark); color:#fff !important; transform:translateY(-2px); }
/* In the mobile drawer show it as a full, centered button. */
.navbar-mobile .nav-cta > a{
  display:block; text-align:center; margin:12px 16px 6px;
  font-size:18px !important;
}

/* Cropped content images (fixed height + object-fit:cover) — bias the crop
   toward the top so people's faces stay whole rather than being cut off. */
.section2-img{ object-fit:cover; object-position:center 20% !important; }
.blog-image img{ object-position:center 22% !important; }
.neld2 img{ object-fit:cover; object-position:center 20% !important; }
.hero-project img{ object-fit:cover; object-position:center 20%; }

/* ---- Brand card treatment ---------------------------------------------
   Two looks share the same dark logo-blue shadow:
   (A) left-aligned rectangular cards get a right+bottom logo-blue accent border;
   (B) centered / long cards get the shadow ONLY (a border looks unbalanced there). */
.card-body2, .card-infor, .card-infors,
.table, .table2, .table3, .priority,
.values-card, .value-card, .membership-card, .theory-card,   /* (A) border */
.box-card, .contact-card, .focus .card{                       /* (B) shadow only */
  background-color:#fff !important;
  border-radius:16px !important;
  box-shadow:0 16px 38px rgba(11,43,110,.22) !important;       /* dark logo-blue shadow */
  transition:transform .3s ease, box-shadow .3s ease !important;
}
/* (A) accent border only where it reads as intentional.
   NOTE: home (.card-infor), membership 1st section (.membership-card) and
   mandate 1st section (.table2) are intentionally excluded (shadow only). */
.card-body2, .card-infors,
.table, .table3, .priority,
.values-card, .value-card, .theory-card{
  border-top:1px solid #eef1f6 !important;
  border-left:1px solid #eef1f6 !important;
  border-right:3px solid var(--primary) !important;
  border-bottom:3px solid var(--primary) !important;
}
/* (B) shadow-only cards: no colored border, just a faint hairline */
.box-card, .contact-card, .focus .card,
.card-infor, .membership-card, .table2{
  border:1px solid #edf0f5 !important;
}
.card-body2:hover, .card-infor:hover, .card-infors:hover,
.table:hover, .table2:hover, .table3:hover, .priority:hover,
.values-card:hover, .value-card:hover, .membership-card:hover, .theory-card:hover,
.box-card:hover, .contact-card:hover, .focus .card:hover, .blog-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 24px 50px rgba(11,43,110,.30) !important;
  background-color:#fff !important;
  color:var(--body-text) !important;
}
.values-card:hover p, .box-card:hover p, .card-body2:hover p{ color:var(--body-text) !important; }

/* NELD edition "long cards" — clean magazine-style: flush cover image + padded
   copy, dark-blue shadow only, no divider lines. */
.neld-blog-section hr{ display:none !important; }
.blog-card{
  display:flex !important; align-items:stretch !important; gap:0 !important;
  background:#fff !important; border:none !important;
  border-radius:18px !important; overflow:hidden !important;
  box-shadow:0 18px 42px rgba(11,43,110,.20) !important;
  padding:0 !important; margin:0 0 32px !important;
}
.blog-image{ flex:0 0 42% !important; max-width:400px; }
.blog-image img{ width:100% !important; height:100% !important; min-height:280px; object-fit:cover !important; border-radius:0 !important; }
.blog-content{ flex:1; padding:34px 38px !important; display:flex; flex-direction:column; justify-content:center; }
.blog-content .read-more-btn{ align-self:flex-start; margin-top:8px; }
@media (max-width:768px){
  .blog-card{ flex-direction:column !important; }
  .blog-image{ flex:1 1 auto !important; max-width:none; }
  .blog-image img{ min-height:220px; }
  .blog-content{ padding:24px 22px !important; }
}

/* ---- One unified card-header style (after icons removed in the HTML) --- */
.box-card h4, .box-card h2, .card-body2 h5,
.table h4, .table2 h4, .table3 h4, .priority h4,
.values-card h4, .value-card h4, .membership-card > span,
.contact-card h5, .focus .card .card-body h4{
  color:var(--navy) !important;
  font-weight:700 !important;
  font-size:1.18rem !important;
  line-height:1.35 !important;
  margin:0 0 12px !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  display:block;
}
.membership-card > span{ font-size:1.25rem !important; }

/* ---- Navbar dropdown: let the long project/about names wrap cleanly ---- */
.navbar .dropdown ul{ padding:8px 0; }
.navbar .dropdown ul li{ min-width:260px; max-width:330px; }
.navbar .dropdown ul a{
  display:block !important;
  white-space:normal !important;
  line-height:1.35 !important;
  padding:10px 18px !important;
}

/* ---- Footer social icons: evenly aligned round brand buttons ---------- */
.social-a{ gap:12px; justify-content:flex-start; }
.social-a a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--primary); color:#fff;
  transition:background .25s ease, transform .2s ease;
}
.social-a a:hover{ background:var(--sky); transform:translateY(-2px); }
.social-a a i{
  font-size:20px !important; margin:0 !important; width:auto !important;
  display:block !important; line-height:1 !important;
}
@media (max-width:768px){ .social-a{ justify-content:center; } }

/* ---- Contact form restyled to echo the membership form ---------------- */
.form-card{
  max-width:760px !important;
  border-radius:16px !important;
  border:1px solid #e2e8f2 !important;
  box-shadow:0 16px 38px rgba(11,43,110,.14) !important;
}
.form-card-head{
  background:#fff !important;
  color:var(--navy) !important;
  padding:30px 28px 22px !important;
  border-bottom:1px solid #e2e8f2 !important;
}
.form-card-head .form-card-icon{ display:none !important; }
.form-card-head h2{ color:var(--navy) !important; font-size:1.4rem !important; font-weight:800 !important; margin:0; }
.form-card-head h2::after{
  content:""; display:block; width:80px; height:3px;
  background:var(--sky); border-radius:2px; margin:12px auto 0;
}
.form-card-head p{ color:var(--text-muted) !important; margin-top:12px; }
.form-card .brand-form{ padding:26px 28px 32px !important; text-align:center; }
.form-card .brand-form .form-grid,
.form-card .brand-form .form-row{ text-align:left; }
.form-card .form-row label, .form-card .brand-form label{
  text-transform:none !important; font-size:13.5px !important; font-weight:600 !important;
  letter-spacing:normal !important; color:var(--body-text) !important;
}
.form-card .form-row input, .form-card .form-row textarea, .form-card .form-row select{
  padding:11px 13px !important; border:1px solid #e2e8f2 !important; border-radius:10px !important;
  background:#fff !important; font-size:14px !important;
}
.form-card .brand-form .btn-amber{
  display:inline-block !important; width:auto !important; margin:8px auto 0 !important;
  padding:14px 42px !important; border-radius:999px !important; box-shadow:0 10px 24px rgba(0,166,240,.24);
}

/* ---- PPELD signing carousel (replaces the static intro image) ---------- */
.ppeld-swiper{
  width:100%;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(11,43,110,.25);
}
.ppeld-swiper .swiper-slide img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
}
.ppeld-swiper .swiper-button-next,
.ppeld-swiper .swiper-button-prev{
  color:#fff;
  --swiper-navigation-size:28px;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.ppeld-swiper .swiper-pagination-bullet{ background:#fff; opacity:.7; }
.ppeld-swiper .swiper-pagination-bullet-active{ background:var(--sky); opacity:1; }
/* Mid-page gallery variant: multi-slide row, reduced height. */
.ppeld-gallery .ppeld-swiper{ margin:0 auto; }
.ppeld-gallery .ppeld-swiper .swiper-slide img{ aspect-ratio:auto !important; height:210px; object-fit:cover; }
@media (max-width:600px){ .ppeld-gallery .ppeld-swiper .swiper-slide img{ height:190px; } }