/* ===========================
   APEX CITIZENS OF GHANA
=========================== */

:root{

    --primary:#0B6E4F;
    --secondary:#D4AF37;
    --dark:#1F2937;
    --light:#F8F9FA;
    --white:#ffffff;
    --text:#4B5563;

}

/* GENERAL */

body{

    font-family:"Segoe UI",sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.7;

}

a{

    text-decoration:none;
    transition:.3s;

}

img{

    max-width:100%;

}

section{

    padding:90px 0;

}

.section-title{

    font-size:2.3rem;
    font-weight:700;
    color:var(--primary);

}

.section-subtitle{

    color:#777;
    max-width:700px;
    margin:auto;

}

/* BUTTONS */

.btn-primary{

    background:var(--primary);
    border-color:var(--primary);

}

.btn-primary:hover{

    background:#08553d;
    border-color:#08553d;

}

.btn-outline-primary{

    color:var(--primary);
    border-color:var(--primary);

}

.btn-outline-primary:hover{

    background:var(--primary);

}

/* NAVBAR */

.navbar{

    background:#fff;
    box-shadow:0 3px 15px rgba(0,0,0,.08);

}

.navbar-brand{

    font-weight:700;
    color:var(--primary);

}

.nav-link{

    color:#444;
    font-weight:500;
    margin-left:18px;

}

.nav-link:hover{

    color:var(--primary);

}

/* HERO */

/* ==========================
   HERO
========================== */

.heroSwiper {
    width: 100%;
    height: 100vh;
}

.hero-slide {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
}

.hero-content {
    color: #fff;
    max-width: 700px;
}

.hero-content h1 {
    font-weight: 800;
    line-height: 1.15;
}

.hero-content p {
    font-size: 1.25rem;
}

.swiper-button-next,
.swiper-button-prev {
    color: #fff;
}

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

.swiper-pagination-bullet-active {
    background: #D4AF37;
}

@media (max-width:768px){

.heroSwiper,
.hero-slide{
height:80vh;
}

.hero-content{
text-align:center;
}

.hero-content h1{
font-size:2.3rem;
}

.hero-content p{
font-size:1rem;
}

}
/* CARDS */

.card{

    border:none;
    border-radius:18px;
    transition:.3s;
    overflow:hidden;

}

.card:hover{

    transform:translateY(-10px);
    box-shadow:0 15px 40px rgba(0,0,0,.15);

}

/* STATISTICS */

.counter-box{

    background:#fff;
    padding:35px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 25px rgba(0,0,0,.08);

}

.counter-box h2{

    color:var(--primary);
    font-size:3rem;
    font-weight:700;

}

/* CTA */

.cta-section{

    background:linear-gradient(135deg,var(--primary),#0d8d63);
    color:#fff;

}

/* FOOTER */

footer{

    background:#0d1117;
    color:#bbb;

}

footer a{

    color:#ddd;

}

footer a:hover{

    color:var(--secondary);

}

/* BACK TO TOP */

#backToTop{

    position:fixed;
    right:25px;
    bottom:25px;
    display:none;
    width:50px;
    height:50px;
    z-index:999;

}

/* RESPONSIVE */

@media(max-width:992px){

.hero-content h1{

font-size:2.5rem;

}

.hero-slide{

min-height:550px;

}

}

@media(max-width:768px){

section{

padding:70px 0;

}

.hero-content{

text-align:center;

}

.hero-content h1{

font-size:2rem;

}

.section-title{

font-size:1.8rem;

}

}
/* ======================================
   SWIPER HERO FIX
====================================== */

.heroSwiper{
    width:100%;
    height:700px;
}

.heroSwiper .swiper-wrapper{
    width:100%;
    height:100%;
}

.heroSwiper .swiper-slide{
    width:100%;
    height:100%;
    overflow:hidden;
}

.hero-slide{
    width:100%;
    height:700px;

    display:flex;
    align-items:center;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-overlay{

    width:100%;
    height:100%;

    background:rgba(0,0,0,.45);

    display:flex;
    align-items:center;

}

.swiper-button-next,
.swiper-button-prev{

    color:#fff;

}

.swiper-pagination-bullet{

    background:#fff;

}

.swiper-pagination-bullet-active{

    background:#FFD700;

}

/* ==========================
   ABOUT SECTION
========================== */

.about-image img{
    border-radius:20px;
    transition:.4s;
}

.about-image img:hover{
    transform:scale(1.03);
}

.about-content h2{
    color:var(--dark);
}

.about-content p{
    font-size:1.1rem;
    color:#666;
}

/* ==========================================
   STATISTICS SECTION
========================================== */

.statistics-section{

    background:#ffffff;

}

.stat-card{

    background:#fff;
    border-radius:20px;
    padding:40px 25px;
    text-align:center;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:100%;

}

.stat-card:hover{

    transform:translateY(-10px);

}

.stat-icon{

    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;

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

    font-size:2rem;

}

.stat-card h2{

    font-size:3rem;
    color:var(--primary);
    font-weight:700;
    margin-bottom:10px;

}

.stat-card p{

    font-size:1.1rem;
    color:#666;
    margin:0;

}

@media(max-width:768px){

.stat-card{

margin-bottom:20px;

}

}


/* ==========================================
   NEWS SECTION
========================================== */

.news-card{

    border:none;
    border-radius:20px;
    overflow:hidden;
    transition:.35s;

}

.news-card:hover{

    transform:translateY(-10px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.news-card img{

    height:240px;
    object-fit:cover;

}

.news-card .card-title{

    font-weight:700;
    color:var(--dark);

}

.news-card .card-text{

    color:#666;

}

.news-card .btn{

    border-radius:50px;

}


/* ==========================================
   EVENTS
========================================== */

.event-card{

    border:none;
    border-radius:20px;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.event-card:hover{

    transform:translateY(-10px);

}

.event-card img{

    height:240px;
    object-fit:cover;

}

.event-card .card-title{

    font-weight:700;
    color:var(--dark);

}

.event-card .card-text{

    color:#666;

}

.event-card .badge{

    font-size:.85rem;

}

.event-card .btn{

    border-radius:50px;

}

/* ==========================================
   LEADERSHIP SECTION
========================================== */

.leader-card{

    background:#fff;
    border-radius:20px;
    overflow:hidden;
    text-align:center;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:100%;

}

.leader-card:hover{

    transform:translateY(-10px);

}

.leader-image{

    height:320px;
    overflow:hidden;

}

.leader-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;

}

.leader-card:hover img{

    transform:scale(1.05);

}

.leader-body{

    padding:25px;

}

.leader-body h5{

    font-weight:700;
    margin-bottom:5px;

}

.leader-position{

    color:var(--primary);
    font-weight:600;
    margin-bottom:15px;

}

.leader-bio{

    color:#666;
    font-size:.95rem;
    min-height:70px;

}

.leader-social{

    margin-top:20px;

}

.leader-social a{

    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#f5f5f5;
    color:var(--primary);
    border-radius:50%;
    margin:0 5px;
    transition:.3s;

}

.leader-social a:hover{

    background:var(--primary);
    color:#fff;

}

/* ==========================================
   GALLERY
========================================== */

.gallery-card{

    position:relative;
    overflow:hidden;
    border-radius:20px;
    height:280px;
    cursor:pointer;

}

.gallery-card img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;

}

.gallery-card:hover img{

    transform:scale(1.08);

}

.gallery-overlay{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:20px;

    color:#fff;

    opacity:0;

    transition:.35s;

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay h5{

    margin-bottom:5px;
    font-weight:700;

}

.gallery-overlay small{

    color:#ddd;

}


/* ==========================================
   CALL TO ACTION
========================================== */

.cta-section{

    background:linear-gradient(
        135deg,
        var(--primary),
        #0d8d63
    );

    padding:110px 0;

}

.cta-section h2{

    font-weight:800;

}

.cta-section p{

    max-width:700px;
    margin:auto;

}

.cta-section .btn{

    border-radius:50px;
    padding:15px 40px;
    transition:.35s;

}

.cta-section .btn:hover{

    transform:translateY(-3px);

}