:root{
    --blue:#0756b8;
    --blue2:#063b82;
    --red:#e5252a;
    --red2:#b9151a;
    --pale:#eef6ff;
    --dark:#14263d;
    --muted:#627286;
    --white:#fff
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0
}
html{
    scroll-behavior:smooth
}
body{
    font-family:Arial,Helvetica,sans-serif;
    color:var(--dark);
    line-height:1.65;
    background:#fff}
a{
    text-decoration:none;
    color:inherit
}
.container{
    width:min(1120px,92%);
    margin:auto
}
.topbar{
    background:var(--blue2);
    color:#fff;
    padding:8px 0;
    font-size:14px
}
.topbar .container{
    display:flex;
    justify-content:space-between;
    gap:15px
}
header{
    position:sticky;
    top:0;z-index:20;
    background:#fff;
    box-shadow:0 2px 14px #0001
}
.nav{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.logo{
    display:flex;
    align-items:center;
    gap:11px;
    font-weight:800;
    color:var(--blue2)}
.logo-mark{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--red);
    display:grid;
    place-items:center;
    color:#fff;
    font-size:20px}
.logo small{
    display:block;
    font-weight:500;
    color:var(--muted);
    font-size:11px
}
nav{
    display:flex;
    align-items:center;
    gap:25px
}
nav a{
    font-weight:700;
    font-size:15px
}
nav a:hover{
    color:var(--blue)
}
.quote{
    background:var(--red);
    padding:11px 18px;
    border-radius:7px;
    color:#fff!important


}
.menu{
    display:none;
    border:0;
    background:none;
    font-size:28px
}
.hero{
    min-height:600px;
    display:grid;
    place-items:center;
    background:linear-gradient(90deg,#063b82e8,#063b8255),url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1800&q=85') center/cover;color:#fff}
.hero-content{
    max-width:760px;
    padding:80px 0;
}
.kicker{
    color:#f2c85b;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:2px
}
h1{
    font-size:clamp(40px,6vw,70px);
    line-height:1.08;margin:15px 0
}
.hero p{
    font-size:19px;
    max-width:680px;
}
.buttons{
    display:flex;
    gap:14px;
    margin-top:30px;
    flex-wrap:wrap;
}
.btn{
    display:inline-block;
    padding:13px 22px;
    border-radius:7px;
    font-weight:800;
    border:2px solid transparent
}
.btn-primary{
    background:var(--red);color:#fff
}
.btn-light{
    border-color:#fff;color:#fff
}
section{
    padding:85px 0
}
.section-head{
    text-align:center;
    max-width:720px;
    margin:0 auto 45px;
}
.section-head h2{
    font-size:38px;
    line-height:1.15;
    margin:8px 0 13px}
.section-head p{
    color:var(--muted)
}
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.card{
    background:#fff;border:1px solid #e7ebe8;
    border-radius:13px;
    padding:28px;
    box-shadow:0 8px 28px #14263d0d;
}
.icon{
    width:50px;height:50px;
    border-radius:10px;
    background:#e8f2ff;
    color:var(--blue);
    display:grid;place-items:center;
    font-size:24px;
    margin-bottom:16px;
}
.card h3{
    margin-bottom:8px;
}
.card p{
    color:var(--muted);
}
.alt{
    background:var(--pale);


    
}



.about{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:55px;
    align-items:center;
}
.about-img{
    height:440px;
    border-radius:18px;
   
}

/* .about{

    display: flex;
    justify-content: space-between;
}
.person-photo img{

} */

/* Container holding everything */
/* .about {
  display: flex;
  flex-direction: row; 
  gap: 40px;          
  align-items: flex-start; 
  padding: 20px;
  font-family: Arial, sans-serif;
}


.person-photo {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  text-align: center;
  flex: 0 0 250px;        
  background: #f9f9f9; 
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}





.vision-mission {
  flex: 1;                
}

.vision-mission h2 {
  margin-top: 0;
  color: #333;
}


.checks {
  list-style: none;       
  padding: 0;
  display: flex;
  flex-direction: column; 
  gap: 8px;               
  margin-top: 20px;
}


.checks li {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .about {
    flex-direction: column; 
    align-items: center;
  }
} */

.checks{
    list-style:none;
    margin-top:20px;
}
.checks li{
    margin:10px 0;
}
.checks li:before{
    content:'✓';
    color:var(--red);
    font-weight:bold;
    margin-right:10px
}
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:35px;
}
.stat{
    text-align:center;
    padding:20px;
    background:#fff;
    border-radius:12px;
}
.stat strong{
    font-size:32px;
    color:var(--blue);
}


.leaders{
    /* background-color: #0756b8; */
}
.leaders article{

    height: 300px;
    width: 300px;
}
.leaders article img{
height: auto;
}
.project{
    overflow:hidden;
    padding:0;
}
.project-img{
    height:220px;
    background-size:cover;
    background-position:center;
}
.project-body{
    padding:22px;
}
.project-body p{
    color:var(--muted);
}
.cta{
    background:var(--blue2);
    color:#fff;
    text-align:center;
}
.cta p{
    max-width:650px;
    margin:10px auto;
    color:#dce9e2;
}
.contact{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:35px;
}
.contact-box{
    padding:30px;
    background:var(--pale);
    border-radius:15px;
}
form{
    display:grid;
    gap:15px;
}
input,textarea,select{
    width:100%;
    padding:14px;
    border:1px solid #ccd7d1;
    border-radius:7px;
    font:inherit;
}
textarea{
    min-height:140px;
    resize:vertical;
}
footer{
    background:#102b21;
    color:#dce9e2;
    padding:50px 0 20px;
}
.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px;
}
.footer-title{
    color:#fff;
    font-weight:800;
    margin-bottom:14px
}
.footer-links{
    list-style:none;
}
.footer-links li{
    margin:8px 0;
}
.copyright{
    border-top:1px solid #ffffff22;
    margin-top:35px;
    padding-top:18px;
    font-size:13px;
    text-align: center;
}

/* media queries */

@media(max-width:800px){
    .topbar .container{
        display:none
    }
    .nav{
        height:68px;
    }
    nav{
        position:absolute;
        top:68px;
        left:0;
        right:0;
        background:#fff;
        display:none;
        flex-direction:column;
        align-items:stretch;
        padding:20px 5%;
        box-shadow:0 10px 20px #0001;
    }
    nav.open{
        display:flex;
    }
    .menu{
        display:block;
    }
    .grid{
        grid-template-columns:1fr 1fr;
    }
    .about,.contact{
        grid-template-columns:1fr;
    }
    .about-img{
        height:300px;
    }
    .stats{
        grid-template-columns:1fr 1fr;
    }
    .footer-grid{
        grid-template-columns:1fr 1fr;
    }}



@media(max-width:520px){
    .grid{
        grid-template-columns:1fr
    }
    .hero{
        min-height:540px
    }
    .hero-content{
        padding:50px 0
    }
    .section-head h2{
        font-size:31px
    }
    .footer-grid{
        grid-template-columns:1fr
    }
}

.logo-mark{
    background:var(--blue)
}
.logo small{
    color:var(--red);
}
.kicker{
    color:var(--red)
}
.btn-primary,.quote{
    background:var(--red);
}
.card{
    box-shadow:0 8px 28px #0756b812;

}
.stat strong{
    color:var(--blue);
}
.cta{
    background:var(--blue2);
}
.footer-title{
    color:#fff;
}
.about-photos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.person-photo{
    height:440px;
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#eaf2ff;
    box-shadow:0 12px 35px #0756b81c;
}
.person-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
}
.person-photo>div{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:45px 15px 15px;
    color:#fff;
    background:linear-gradient(transparent,#063b82ed);
}
.person-photo strong,.person-photo small{
    display:block;
}
.person-photo small{
    font-size:11px;
    color:#e8f2ff;
    margin-top:3px;
}
.leaders{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    max-width:850px;
    margin:auto;
}
.leader-card{
    overflow:hidden;
    background:#fff;
    border-radius:15px;
    border:1px solid #dce8f7;
    box-shadow:0 10px 30px #0756b812;
}
.leader-card img{
    width:100%;
    height:380px;
    object-fit:cover;
    object-position:center top;
    display:block;
}
.leader-card div{
    padding:20px;
}
.leader-card span{
    font-size:13px;
    color:var(--red);
    font-weight:700;
}
.leader-card h3{
    color:var(--blue2);
    margin-top:4px;
}


@media(max-width:800px){
    .about-photos{
        grid-template-columns:1fr 1fr
    }
    .person-photo{
        height:330px
    }
    .leaders{
        grid-template-columns:1fr
    }
}
@media(max-width:520px){
    .about-photos{
        grid-template-columns:1fr
    }
    .person-photo{
        height:390px
    }
}

/* ===== Redeveloped home slideshow ===== */
.hero-slider{
    position:relative;
    min-height:650px;
    overflow:hidden;
    background:#063b82;
    color:#fff;
}
.hero-slider .slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    background-position:center;
    background-size:cover;
    transition:opacity .8s ease, visibility .8s ease;
}
.hero-slider .slide.active{
    opacity:1;
    visibility:visible;
}
.hero-slider .hero-content{
    position:relative;
    z-index:2;
    min-height:650px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:80px 0;
}
.slider-arrow{
    position:absolute;
    z-index:5;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border:1px solid #ffffff66;
    border-radius:50%;
    background:#063b82aa;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    transition:.25s;
}
.slider-arrow:hover{background:var(--red);border-color:var(--red)}
.slider-arrow.prev{left:24px}
.slider-arrow.next{right:24px}
.slider-dots{
    position:absolute;
    z-index:5;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:9px;
}
.dot{
    width:11px;
    height:11px;
    padding:0;
    border:2px solid #fff;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
}
.dot.active{background:var(--red);border-color:var(--red)}

/* ===== Leadership: exactly 3 cards per row on desktop ===== */
#leadership .leaders{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
    max-width:1120px;
    margin:auto;
}
#leadership .leader-card{
    width:auto;
    height:auto;
    min-width:0;
}
#leadership .leader-card img{
    width:100%;
    height:360px;
    object-fit:cover;
    object-position:center top;
}
#leadership .leader-card div{min-height:105px}
@media(max-width:900px){
    #leadership .leaders{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
    .hero-slider,.hero-slider .hero-content{min-height:560px}
    .slider-arrow{width:40px;height:40px;font-size:18px}
    .slider-arrow.prev{left:12px}
    .slider-arrow.next{right:12px}
    #leadership .leaders{grid-template-columns:1fr}
    #leadership .leader-card img{height:340px}
}

/* ===== Contact form feedback ===== */
.form-message{
    display:none;
    padding:12px 15px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
}
.form-message.success,
.form-message.error{
    display:block;
}
.form-message.success{
    background:#eaf8ef;
    color:#176b36;
    border:1px solid #b8e5c6;
}
.form-message.error{
    background:#fff0f0;
    color:#9f1d24;
    border:1px solid #f0b7bb;
}
#submitBtn:disabled{
    opacity:.7;
    cursor:not-allowed;
}
.hp-field{
    position:absolute!important;
    left:-10000px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}