/*==================================================
DIAMOND AREA CDC
RESPONSIVE.CSS
PART 1
HEADER & NAVIGATION
==================================================*/


/*==================================================
TABLETS & MOBILE
==================================================*/

@media screen and (max-width:768px){

/*=====================================
GENERAL
=====================================*/

.container{

width:92%;

}

/*=====================================
TOP BAR
=====================================*/

.top-bar{

padding:10px 15px;

}

.top-bar-content{

font-size:13px;

line-height:1.5;

justify-content:center;

text-align:center;

}

/*=====================================
HEADER
=====================================*/

header{

position:sticky;

top:0;

left:0;

z-index:9999;

}

/*=====================================
NAVBAR
=====================================*/

.navbar{

height:80px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 10px;

}

/*=====================================
LOGO
=====================================*/

.logo{

display:flex;

align-items:center;

gap:10px;

}

.logo-circle{

width:56px;

height:56px;

flex-shrink:0;

}

.logo-circle img{

width:44px;

height:44px;

}

.logo-text h2{

font-size:20px;

line-height:1.1;

margin-bottom:2px;

}

.logo-text p{

font-size:10px;

line-height:1.2;

}

/.menu-toggle{

display:flex !important;

align-items:center;

justify-content:center;

width:60px;

height:60px;

background:#0B6E3E;

color:#ffffff;

border:3px solid #18E472;

border-radius:14px;

cursor:pointer;

box-shadow:
0 0 12px rgba(24,228,114,.8),
0 0 28px rgba(24,228,114,.65),
0 0 55px rgba(24,228,114,.45);

animation:menuGlow 2s ease-in-out infinite;

transition:.3s;

}

.menu-toggle i{

color:#ffffff;

font-size:34px;

}

.menu-toggle:hover{

transform:scale(1.08);

}

@keyframes menuGlow{

0%,100%{

box-shadow:
0 0 12px rgba(24,228,114,.8),
0 0 28px rgba(24,228,114,.65),
0 0 55px rgba(24,228,114,.45);

}

50%{

box-shadow:
0 0 20px rgba(24,228,114,1),
0 0 42px rgba(24,228,114,.9),
0 0 75px rgba(24,228,114,.7);

}

}

/*=====================================
DESKTOP MENU
=====================================*/

nav{

display:none;

}

/*=====================================
MOBILE MENU
=====================================*/

/*=====================================
BETTER MOBILE MENU
=====================================*/

nav.active{

display:block !important;

position:absolute;

top:100%;

left:0;

width:100%;

background:#0B6E3E;

z-index:99999;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

nav.active ul{

display:flex;

flex-direction:column;

padding:12px 0;

}

nav.active li{

width:100%;

}

nav.active a{

display:block;

padding:18px 25px;

font-size:17px;

font-weight:600;

text-align:left;

color:#fff;

border-bottom:1px solid rgba(255,255,255,.10);

transition:.3s;

}

nav.active a:hover{

background:#0F874C;

padding-left:35px;

color:#FFD54F;

}

nav.active a.active{

background:#126E3A;

color:#FFD54F;

border-left:5px solid #FFD54F;

}


/*==================================================
SMALL PHONES
==================================================*/

@media screen and (max-width:480px){

.logo-circle{

width:50px;

height:50px;

}

.logo-circle img{

width:38px;

height:38px;

}

.logo-text h2{

font-size:18px;

}

.logo-text p{

font-size:9px;

}

.menu-toggle{

width:46px;

height:46px;

font-size:30px;

}

}
/*==================================================
PART 2
HERO SECTION
==================================================*/

@media screen and (max-width:768px){

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

.hero{

padding:45px 0 60px;

overflow:hidden;

}

/* Remove Nigeria Map */

.hero-watermark{

display:none;

}

/* Hero Layout */

.hero-grid{

display:flex;

flex-direction:column-reverse;

gap:35px;

align-items:center;

}

/*=====================================
CONTENT
=====================================*/

.hero-content{

max-width:100%;

text-align:center;

}

.hero-subtitle{

font-size:12px;

letter-spacing:2px;

margin-bottom:15px;

}

.hero-content h1{

font-size:42px;

line-height:1.1;

margin-bottom:22px;

}

.hero-content p{

font-size:15px;

line-height:1.8;

margin-bottom:30px;

}

/*=====================================
BUTTONS
=====================================*/

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

align-items:center;

}

.btn-primary,
.btn-secondary{

width:100%;

max-width:260px;

justify-content:center;

}

/*=====================================
IMAGE
=====================================*/

.hero-image{

width:100%;

display:flex;

justify-content:center;

}

.hero-image img{

width:100%;

max-width:420px;

height:260px;

object-fit:cover;

border-radius:18px;

}

}


/*==================================================
SMALL PHONES
==================================================*/

@media screen and (max-width:480px){

.hero{

padding:35px 0 50px;

}

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:14px;

}

.hero-image img{

height:220px;

}

.hero-buttons{

gap:12px;

}

.btn-primary,
.btn-secondary{

max-width:220px;

padding:14px;

font-size:14px;

}

}
/*==================================================
PART 3
ABOUT • CHAIRMAN • FOOTER
==================================================*/

@media screen and (max-width:768px){

/*=====================================
WHO WE ARE
=====================================*/

.about-home{

padding:70px 0;

}

.about-grid{

display:flex;

flex-direction:column;

gap:35px;

}

.about-image{

width:100%;

}

.about-image::before{

display:none;

}

.about-image img{

width:100%;

height:260px;

object-fit:cover;

border-radius:16px;

}

.about-content{

text-align:center;

}

.section-title{

font-size:12px;

letter-spacing:2px;

}

.about-content h2{

font-size:30px;

line-height:1.25;

margin:18px 0;

}

.about-content p{

font-size:15px;

line-height:1.8;

}

.read-more{

justify-content:center;

margin-top:20px;

}


/*=====================================
CHAIRMAN
=====================================*/

.chairman{

padding:70px 0;

}

.chairman-watermark{

display:none;

}

.chairman-grid{

display:flex;

flex-direction:column;

gap:35px;

}

.chairman-image::before{

display:none;

}

.chairman-image img{

width:100%;

height:320px;

object-fit:cover;

border-radius:16px;

}

.quote-icon{

font-size:40px;

margin-bottom:10px;

}

.chairman-content{

text-align:center;

}

.chairman-content h2{

font-size:30px;

line-height:1.25;

}

.chairman-intro{

font-size:18px;

}

.chairman-content p{

font-size:15px;

line-height:1.8;

}

.chairman-signature{

margin-top:25px;

padding-top:20px;

}

.chairman-signature h3{

font-size:22px;

}

.chairman-signature span{

font-size:14px;

}

.chairman .read-more{

justify-content:center;

}


/*=====================================
FOOTER
=====================================*/

footer{

padding:55px 0 25px;

}

.footer-grid{

display:grid;

grid-template-columns:1fr;

gap:35px;

text-align:center;

}

.footer-logo{

justify-content:center;

}

.footer-logo img{

width:60px;

height:60px;

}

.footer-logo h3{

font-size:20px;

}

.footer-logo p{

font-size:12px;

}

.footer-about>p{

font-size:14px;

}

.footer-links h4,
.footer-contact h4{

font-size:18px;

margin-bottom:15px;

}

.footer-links ul{

gap:10px;

}

.footer-links a{

font-size:14px;

}

.footer-contact p{

display:block;

font-size:14px;

margin-bottom:10px;

}

.footer-bottom{

margin-top:30px;

padding-top:20px;

}

.footer-bottom p{

font-size:13px;

}

}


/*==================================================
SMALL PHONES
==================================================*/

@media screen and (max-width:480px){

.about-content h2,
.chairman-content h2{

font-size:26px;

}

.about-content p,
.chairman-content p{

font-size:14px;

}

.footer-logo h3{

font-size:18px;

}

.footer-links h4,
.footer-contact h4{

font-size:16px;

}

.footer-links a,
.footer-contact p,
.footer-about>p{

font-size:13px;

}

}
/*==================================================
PART 4
FINAL RESPONSIVE POLISH
==================================================*/


/*=====================================
TABLETS
=====================================*/

@media screen and (max-width:992px){

.container{

width:94%;

}

.hero-grid,
.about-grid,
.chairman-grid{

gap:50px;

}

.hero-content h1{

font-size:52px;

}

.about-content h2,
.chairman-content h2{

font-size:40px;

}

}


/*=====================================
SMALL PHONES
=====================================*/

@media screen and (max-width:480px){

.container{

width:94%;

}

/* Header */

.top-bar{

padding:8px;

}

.top-bar-content{

font-size:12px;

}

/* Hero */

.hero{

padding:30px 0 45px;

}

.hero-content h1{

font-size:30px;

line-height:1.15;

}

.hero-content p{

font-size:14px;

line-height:1.7;

}

.hero-image img{

height:210px;

}

/* About */

.about-home{

padding:50px 0;

}

.about-content h2{

font-size:24px;

}

.about-content p{

font-size:14px;

}

/* Chairman */

.chairman{

padding:50px 0;

}

.chairman-content h2{

font-size:24px;

}

.chairman-intro{

font-size:16px;

}

.chairman-content p{

font-size:14px;

}

.chairman-image img{

height:260px;

}

/* Buttons */

.btn-primary,
.btn-secondary{

max-width:220px;

padding:14px 18px;

font-size:14px;

}

/* Footer */

footer{

padding:45px 0 20px;

}

.footer-grid{

gap:25px;

}

.footer-logo img{

width:50px;

height:50px;

}

.footer-logo h3{

font-size:17px;

}

.footer-links h4,
.footer-contact h4{

font-size:15px;

}

.footer-links a,
.footer-contact p,
.footer-about p{

font-size:13px;

}

.footer-bottom{

margin-top:20px;

padding-top:15px;

}

.footer-bottom p{

font-size:12px;

}

}


/*=====================================
GENERAL MOBILE FIXES
=====================================*/

@media screen and (max-width:768px){

img{

max-width:100%;

height:auto;

}

section{

overflow:hidden;

}

.hero-image,
.about-image,
.chairman-image{

display:flex;

justify-content:center;

}

.hero-buttons{

align-items:center;

}

html{

overflow-x:hidden;

}

body{

overflow-x:hidden;

}

}
/*==================================================
GLOWING GREEN HAMBURGER
==================================================*/

.menu-toggle{

background:#0B6E3E !important;

color:#ffffff !important;

border:3px solid #14D66F !important;

border-radius:14px;

width:64px;

height:64px;

font-size:40px;

display:flex !important;

align-items:center;

justify-content:center;

cursor:pointer;

z-index:99999;

box-shadow:
0 0 8px rgba(20,214,111,.6),
0 0 18px rgba(20,214,111,.7),
0 0 35px rgba(20,214,111,.8),
0 0 55px rgba(20,214,111,.6);

animation:greenGlow 1.8s infinite ease-in-out;

transition:.3s;

}

.menu-toggle:hover{

transform:scale(1.12);

}

@keyframes greenGlow{

0%{

box-shadow:
0 0 8px rgba(20,214,111,.5),
0 0 18px rgba(20,214,111,.6),
0 0 35px rgba(20,214,111,.5);

}

50%{

box-shadow:
0 0 15px rgba(20,214,111,.9),
0 0 30px rgba(20,214,111,1),
0 0 60px rgba(20,214,111,.9);

}

100%{

box-shadow:
0 0 8px rgba(20,214,111,.5),
0 0 18px rgba(20,214,111,.6),
0 0 35px rgba(20,214,111,.5);

}

}
/*==================================================
SMALLER MOBILE MENU
==================================================*/

@media (max-width:768px){

nav.active a{

padding:12px 20px !important;

font-size:15px !important;

line-height:1.2 !important;

}

nav.active ul{

padding:4px 0 !important;

}

nav.active li{

margin:0 !important;

padding:0 !important;

}

}
/*==================================================
ABOUT PAGE HERO (MOBILE)
==================================================*/

@media (max-width:768px){

.about-hero{

padding:50px 0;

}

.about-hero-grid{

display:flex;

flex-direction:column-reverse;

align-items:center;

gap:30px;

}

.about-hero-content{

text-align:center;

}

.about-hero-content h1{

font-size:34px;

line-height:1.2;

margin-bottom:20px;

}

.about-hero-content p{

font-size:15px;

line-height:1.8;

}

.about-hero-image img{

width:100%;

max-width:340px;

height:auto;

display:block;

margin:auto;

}

}
/*==================================================
ABOUT HERO MOBILE FIX
==================================================*/

@media (max-width:768px){

.about-hero{

padding:50px 0;

}

.about-hero-grid{

display:flex;

flex-direction:column;

align-items:center;

gap:35px;

text-align:center;

}

.about-left{

width:100%;

}

.about-left h1{

font-size:34px;

line-height:1.2;

margin-bottom:20px;

}

.about-left p{

font-size:15px;

line-height:1.8;

}

.about-right{

display:flex;

justify-content:center;

width:100%;

}

.hero-circle{

width:320px;

height:320px;

}

.hero-ring{

width:100%;

height:100%;

}

.hero-ring img{

width:100%;

height:100%;

object-fit:cover;

}

.hero-dots{

display:none;

}

}
/*==================================================
CENTER ABOUT HERO IMAGE
==================================================*/

@media (max-width:768px){

.about-right{

display:flex !important;

justify-content:center !important;

align-items:center !important;

width:100% !important;

margin:0 auto !important;

}

.hero-circle{

margin:0 auto !important;

}

}
/*==================================================
WORKING WITH OUR COMMUNITY (MOBILE)
==================================================*/

@media (max-width:768px){

.community-grid{

display:flex;

flex-direction:column;

align-items:center;

gap:40px;

text-align:center;

}

.community-circle{

width:100%;

display:flex;

justify-content:center;

}

.community-ring{

width:360px;

height:360px;

margin:0 auto;

}

.community-ring img{

width:100%;

height:100%;

object-fit:cover;

border-radius:50%;

}

.community-dots{

display:none;

}

.community-text{

width:100%;

}

.community-text h2{

font-size:32px;

line-height:1.2;

margin-bottom:18px;

}

.community-text p{

font-size:15px;

line-height:1.8;

}

}
/*==================================================
EXECUTIVE HERO (MOBILE)
==================================================*/

@media (max-width:768px){

.executive-hero{

padding:50px 0;

}

.executive-hero-grid{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:35px;

}

.executive-intro{

width:100%;

}

.executive-intro h1{

font-size:34px;

line-height:1.2;

margin-bottom:20px;

}

.executive-intro p{

font-size:15px;

line-height:1.8;

}

.chairman-showcase{

width:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}

.chairman-circle{

width:280px;

height:280px;

margin:0 auto;

}

.chairman-ring{

width:100%;

height:100%;

}

.chairman-ring img{

width:100%;

height:100%;

object-fit:cover;

}

.chairman-card{

width:100%;

max-width:360px;

margin:25px auto 0;

text-align:center;

}

}
/*==================================================
CDA MOBILE HEADER
==================================================*/

@media (max-width:991px){

/*==========================
CDA TOP BAR
==========================*/

.cda-topbar{

    height:auto;

    min-height:34px;

    padding:6px 12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

}

.cda-topbar-content{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    flex-wrap:nowrap;

    text-align:center;

    width:100%;

}

.cda-topbar-content span{

    display:block;

    white-space:normal;

    line-height:1.3;

}

.cda-topbar i{

    font-size:11px;

}
    .cda-navbar{

        height:80px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        position:relative;

    }

    .cda-logo{

        gap:10px;
        max-width:calc(100% - 70px);

    }

    .cda-logo-img{

        width:55px;
        height:55px;
        flex-shrink:0;

    }

    .cda-logo-text h2{

        font-size:20px;

    }

    .cda-logo-text p{

        font-size:11px;

    }

    .cda-menu-toggle{

        display:flex !important;
        align-items:center;
        justify-content:center;
        width:46px;
        height:46px;
        flex-shrink:0;
        cursor:pointer;

    }

    .cda-menu-toggle i{

        font-size:30px;
        color:#ffffff;

    }

    .cda-menu{

        display:none;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#0B6E3E;
        border-top:2px solid #D9B54A;
        z-index:999;

    }

    .cda-menu.active{

        display:block;

    }

    .cda-menu ul{

        display:flex;
        flex-direction:column;
        gap:0;

    }

    .cda-menu li{

        width:100%;

    }

    .cda-menu a{

        display:block;
        padding:16px 24px;
        color:#ffffff;

    }

}
/*==================================================
CDA HERO MOBILE
==================================================*/

@media (max-width:991px){

    .cda-hero{

        padding:60px 0 50px;

    }

    .hero-wrapper{

        display:grid;

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;

    }

    .hero-left{

        order:2;

    }

 .hero-right{

    order:1;

    display:flex;

    justify-content:center;

}

    .hero-left h1{

        font-size:38px;

        line-height:1.2;

        margin:20px 0;

    }

    .hero-left p{

        font-size:16px;

        line-height:1.8;

    }

    .hero-tag{

        padding:12px 22px;

        font-size:12px;

    }

    .hero-btn{

        display:inline-flex;

        justify-content:center;

        align-items:center;

    }

    .hero-card{

        width:100%;

        max-width:380px;

        margin:auto;

    }

}
/*==================================================
CDA HAMBURGER STYLE
==================================================*/

.cda-menu-toggle{

    width:56px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#0B6E3E;

    border:3px solid #19D76E;

    border-radius:14px;

    cursor:pointer;

    transition:.35s;

    animation:cdaGlow 2s ease-in-out infinite;

    box-shadow:
        0 0 10px rgba(25,215,110,.6),
        0 0 22px rgba(25,215,110,.55),
        0 0 40px rgba(25,215,110,.45);

}

.cda-menu-toggle:hover{

    transform:scale(1.08);

}

.cda-menu-toggle i{

    color:#ffffff;

    font-size:32px;

}

@keyframes cdaGlow{

    0%,100%{

        box-shadow:
            0 0 10px rgba(25,215,110,.6),
            0 0 22px rgba(25,215,110,.55),
            0 0 40px rgba(25,215,110,.45);

    }

    50%{

        box-shadow:
            0 0 18px rgba(25,215,110,1),
            0 0 38px rgba(25,215,110,.85),
            0 0 60px rgba(25,215,110,.65);

    }

}
/*==================================================
FOOTER MOBILE
==================================================*/

@media (max-width:991px){

.site-footer{

    text-align:center;

}

.footer-main{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:22px;

    padding:30px 20px;

}

.footer-brand{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:12px;

}
.footer-item{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:12px;

    width:100%;

    max-width:320px;

    margin:0 auto;

    padding:0;

    border:none;

}
.footer-item span{

    flex:1;

    text-align:left;

    line-height:1.6;

    word-break:break-word;

}
.footer-item i{

    width:22px;

    flex-shrink:0;

    text-align:center;

    margin-top:4px;

}

.footer-social{

    border-left:none;

    padding-left:0;

    justify-content:center;

}

.footer-bottom{

    padding:18px;

    font-size:12px;

}

}
@media (max-width:991px){

.hero-circle{

    border:8px solid #0B6E3E;

    overflow:hidden;

}

.hero-circle img{

    border-radius:50%;

    display:block;

}

}
@media (max-width:991px){

    .hero-logo{

        display:none !important;

    }

}
/*==================================================
FIX ABOUT SECTION TEXT ON MOBILE
==================================================*/
@media (max-width:768px){

    .about-content p,
    .about-text p{

        text-align:left !important;
        text-justify:auto;
        word-spacing:normal !important;
        letter-spacing:normal !important;
        line-height:1.9;

    }

}