/*==================================================
DIAMOND AREA CDC
ABOUT PAGE
PART 1
==================================================*/



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

.about-hero{

padding:90px 0 70px;

background:linear-gradient(180deg,#F7FCF8,#EDF8EF);

position:relative;

overflow:hidden;

}



/* Ogun State Watermark */

.about-hero::before{

content:"";

position:absolute;

left:6%;

top:50%;

transform:translateY(-50%);

width:420px;

height:420px;

background:url("../images/maps/ogun-map.png") center/contain no-repeat;

opacity:.035;

pointer-events:none;

}



/* Decorative Glow */

.about-hero::after{

content:"";

position:absolute;

right:-200px;

top:-150px;

width:650px;

height:650px;

border-radius:50%;

background:radial-gradient(circle,

rgba(217,181,74,.18),

transparent 70%);

}



.about-hero .container{

position:relative;

z-index:2;

}



.about-hero-grid{

display:grid;

grid-template-columns:58% 42%;

align-items:center;

gap:30px;

}



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

.about-left{

padding-right:40px;

}



.section-tag{

display:inline-block;

padding-bottom:10px;

font-size:13px;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

color:#0B6E3E;

border-bottom:2px solid #D9B54A;

margin-bottom:25px;

}



.about-left h1{

font-size:64px;

font-weight:800;

line-height:1.08;

letter-spacing:-2px;

color:#0B6E3E;

margin-bottom:30px;

}



.about-left p{

font-size:18px;

line-height:1.95;

color:#555;

max-width:650px;

}



/*==================================================
RIGHT HERO IMAGE
==================================================*/

.about-right{

display:flex;

justify-content:flex-end;

position:relative;

}



.hero-circle{

position:relative;

margin-right:-70px;

}



.hero-ring{

width:520px;

height:520px;

padding:8px;

border-radius:50%;

background:linear-gradient(135deg,

#0B6E3E,

#D9B54A);

box-shadow:

0 25px 60px rgba(0,0,0,.12);

}



.hero-ring img{

width:100%;

height:100%;

object-fit:cover;

border-radius:50%;

border:8px solid #ffffff;

transition:.35s;

}



.hero-ring img:hover{

transform:scale(1.03);

}



/* Decorative Dots */

.hero-dots{

position:absolute;

left:-45px;

bottom:40px;

width:110px;

height:110px;

background-image:radial-gradient(

#D9B54A 2px,

transparent 2px);

background-size:18px 18px;

opacity:.45;

}



/*==================================================
OUR STORY
==================================================*/

.our-story{

padding:90px 0;

background:#ffffff;

}



.story-header{

text-align:center;

max-width:850px;

margin:auto;

}



.story-header h2{

font-size:52px;

font-weight:800;

line-height:1.25;

color:#0B6E3E;

margin:25px 0;

}



.gold-line{

width:90px;

height:4px;

background:#D9B54A;

margin:35px auto 50px;

border-radius:30px;

}



.story-content{

max-width:950px;

margin:auto;

}



.story-text{

column-count:2;

column-gap:60px;

}



.story-text p{

font-size:18px;

line-height:2;

color:#555;

margin-bottom:22px;

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

.who-we-are{

padding:120px 0;

background:#EEF8F0;

position:relative;

overflow:hidden;

}

.who-we-are::before{

content:"";

position:absolute;

right:-220px;

bottom:-180px;

width:550px;

height:550px;

background:radial-gradient(circle,

rgba(11,110,62,.06),

transparent 70%);

border-radius:50%;

}



.who-grid{

display:grid;

grid-template-columns:460px 1fr;

align-items:center;

gap:0;

position:relative;

z-index:2;

}



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

.who-image{

position:relative;

}

.who-image img{

width:100%;

height:560px;

object-fit:cover;

border-radius:24px;

border:8px solid #ffffff;

box-shadow:

0 22px 55px rgba(0,0,0,.10);

}



/*=========================
TEXT CARD
=========================*/

.who-card{

background:#ffffff;

padding:70px;

margin-left:-70px;

border-radius:24px;

box-shadow:

0 18px 45px rgba(0,0,0,.08);

position:relative;

z-index:3;

}



.who-card h2{

font-size:50px;

font-weight:800;

line-height:1.2;

color:#0B6E3E;

margin:22px 0 28px;

}



.who-card p{

font-size:17px;

line-height:1.95;

color:#555;

margin-bottom:22px;

}



/*==================================================
MISSION SECTION
==================================================*/

.mission-section{

padding:120px 0;

background:#ffffff;

}



.section-heading{

text-align:center;

margin-bottom:60px;

}



.section-heading h2{

font-size:50px;

font-weight:800;

color:#0B6E3E;

margin-top:22px;

}



.mission-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:45px;

}



/*=========================
CARDS
=========================*/

.mission-card{

background:#F8FCF8;

padding:55px;

border-radius:24px;

border-top:6px solid #0B6E3E;

box-shadow:

0 18px 40px rgba(0,0,0,.06);

transition:.35s;

}



.mission-card.vision{

border-top:6px solid #D9B54A;

}



.mission-card:hover{

transform:translateY(-8px);

}



.card-icon{

width:90px;

height:90px;

border-radius:50%;

background:#0B6E3E;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#ffffff;

margin-bottom:30px;

}



.mission-card.vision .card-icon{

background:#D9B54A;

color:#0B6E3E;

}



.mission-card h3{

font-size:30px;

font-weight:700;

color:#0B6E3E;

margin-bottom:22px;

}



.mission-card p{

font-size:17px;

line-height:1.95;

color:#555;

}
/*==================================================
COMMUNITY SECTION
==================================================*/

.community-section{

padding:120px 0;

background:linear-gradient(
180deg,
#F7FCF8,
#EEF8F0);

position:relative;

overflow:hidden;

}

.community-section::before{

content:"";

position:absolute;

left:-220px;

bottom:-220px;

width:600px;

height:600px;

border-radius:50%;

background:radial-gradient(circle,
rgba(217,181,74,.15),
transparent 70%);

}

.community-grid{

display:grid;

grid-template-columns:380px 1fr;

align-items:center;

gap:90px;

position:relative;

z-index:2;

}



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

.community-circle{

position:relative;

display:flex;

justify-content:center;

}

.community-ring{

width:330px;

height:330px;

padding:8px;

border-radius:50%;

background:linear-gradient(
135deg,
#0B6E3E,
#D9B54A);

box-shadow:

0 25px 60px rgba(0,0,0,.12);

}

.community-ring img{

width:100%;

height:100%;

object-fit:cover;

border-radius:50%;

border:8px solid #ffffff;

transition:.35s;

}

.community-ring img:hover{

transform:scale(1.03);

}



/*=========================
DECORATIVE DOTS
=========================*/

.community-dots{

position:absolute;

right:-20px;

top:35px;

width:110px;

height:110px;

background-image:

radial-gradient(#0B6E3E 2px,transparent 2px);

background-size:18px 18px;

opacity:.30;

}



/*=========================
TEXT
=========================*/

.community-text h2{

font-size:52px;

font-weight:800;

line-height:1.15;

color:#0B6E3E;

margin:20px 0 30px;

}

.community-text p{

font-size:17px;

line-height:2;

color:#555;

margin-bottom:22px;

}



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

.about-footer{

background:#F7FAF8;

border-top:4px solid #D9B54A;

padding:70px 0 30px;

}

.about-footer .footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:70px;

margin-bottom:40px;

}

.about-footer .footer-logo{

width:90px;

margin-bottom:20px;

}

.about-footer h3{

font-size:30px;

color:#0B6E3E;

margin-bottom:15px;

}

.about-footer h4{

font-size:18px;

color:#0B6E3E;

margin-bottom:20px;

}

.about-footer p{

line-height:1.9;

color:#555;

}

.about-footer ul{

list-style:none;

padding:0;

margin:0;

}

.about-footer li{

margin-bottom:12px;

}

.about-footer a{

color:#555;

text-decoration:none;

transition:.3s;

}

.about-footer a:hover{

color:#0B6E3E;

padding-left:6px;

}

.about-footer hr{

margin:40px 0 20px;

border:none;

height:1px;

background:#DCE8DE;

}

.copyright{

text-align:center;

font-size:14px;

color:#777;

}



/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1100px){

.about-hero-grid,

.who-grid,

.community-grid{

grid-template-columns:1fr;

gap:50px;

}

.hero-circle{

margin-right:0;

justify-content:center;

}

.who-card{

margin-left:0;

margin-top:-40px;

}

.community-circle{

margin-bottom:20px;

}

.about-footer .footer-grid{

grid-template-columns:1fr;

text-align:center;

}

}



@media(max-width:768px){

.about-left h1,

.story-header h2,

.who-card h2,

.section-heading h2,

.community-text h2{

font-size:38px;

}

.hero-ring{

width:360px;

height:360px;

}

.community-ring{

width:260px;

height:260px;

}

.story-text{

column-count:1;

}

.mission-grid{

grid-template-columns:1fr;

}

.mission-card{

padding:35px;

}

}



@media(max-width:480px){

.about-left h1{

font-size:32px;

}

.story-header h2,

.who-card h2,

.community-text h2{

font-size:30px;

}

.about-left p,

.story-text p,

.who-card p,

.community-text p,

.mission-card p{

font-size:16px;

}

.hero-ring{

width:280px;

height:280px;

}

.community-ring{

width:220px;

height:220px;

}

}



/*==================================================
FINAL POLISH
==================================================*/

html{

scroll-behavior:smooth;

}

.hero-ring img,

.community-ring img,

.who-image img,

.mission-card{

transition:all .35s ease;

}

.who-image img:hover,

.hero-ring img:hover,

.community-ring img:hover{

transform:translateY(-6px);

}

.mission-card:hover{

transform:translateY(-8px);

}

::selection{

background:#0B6E3E;

color:#ffffff;

}
/*=========================================
HERO IMAGE POSITION FIX
=========================================*/

.about-hero-grid{

    grid-template-columns:55% 45%;

    gap:0;

}

.about-right{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-left:-120px;

}

.hero-circle{

    margin-right:0 !important;

}

.hero-ring{

    width:500px;

    height:500px;

}

.about-left{

    padding-right:20px;

}
/*==================================================
ABOUT PAGE PREMIUM EFFECTS
==================================================*/

/* Elegant page fade */

body{

    animation:aboutFade .8s ease;

}

@keyframes aboutFade{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* Premium section spacing */

.about-hero,
.our-story,
.who-we-are,
.mission-section,
.community-section{

    position:relative;

    overflow:hidden;

}

/* Soft divider */

.our-story::after,
.who-we-are::after,
.mission-section::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:180px;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(217,181,74,.85),

        transparent

    );

    opacity:.45;

}

/* Better headings */

.about-left h1,
.story-header h2,
.who-card h2,
.section-heading h2,
.community-text h2{

    text-shadow:

        0 10px 20px rgba(11,110,62,.06);

}

/* Better paragraph rhythm */

.about-left p,
.story-text p,
.who-card p,
.community-text p,
.mission-card p{

    text-wrap:pretty;

}
/*==================================================
IMAGE LUXURY
==================================================*/

.hero-ring,
.community-ring{

    transition:.45s ease;

}

.hero-ring:hover,
.community-ring:hover{

    transform:translateY(-10px);

}

.hero-ring img,
.community-ring img,
.who-image img{

    transition:.55s ease;

}

.hero-ring:hover img,
.community-ring:hover img,
.who-image:hover img{

    transform:scale(1.04);

}

/* Better shadows */

.hero-ring,
.community-ring,
.who-image img{

    box-shadow:

        0 25px 60px rgba(0,0,0,.12),

        0 10px 30px rgba(11,110,62,.08);

}
/*==================================================
MISSION CARDS
==================================================*/

.mission-card{

    transition:.4s ease;

    cursor:default;

}

.mission-card:hover{

    transform:

        translateY(-12px);

    box-shadow:

        0 28px 60px rgba(0,0,0,.12);

}

.card-icon{

    transition:.4s;

}

.mission-card:hover .card-icon{

    transform:

        rotate(10deg)

        scale(1.08);

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

.who-card{

    transition:.45s;

}

.who-card:hover{

    transform:translateY(-8px);

}

.who-card::before{

    content:"";

    position:absolute;

    left:0;

    top:35px;

    width:6px;

    height:70px;

    border-radius:20px;

    background:#D9B54A;

}
/*==================================================
MICRO INTERACTIONS
==================================================*/

.section-tag{

    transition:.35s;

}

.section-tag:hover{

    letter-spacing:4px;

}

.gold-line{

    transition:.4s;

}

.story-header:hover .gold-line{

    width:140px;

}

img{

    transition:.45s ease;

}

button,
a{

    transition:.35s ease;

}
.who-image{

    overflow:hidden;

    border-radius:28px;

}

.who-image img{

    width:100%;

    height:auto !important;

    display:block;

    object-fit:unset !important;

}
/* =========================================================
   ABOUT PAGE — HERO ABOVE THE FOLD
   Compact premium positioning
========================================================= */

.about-hero {
    padding: 48px 0 65px !important;
}


/* Keep the hero balanced */

.about-hero-grid {
    align-items: center !important;
    gap: 10px !important;
}


/* ---------------------------------------------------------
   LEFT CONTENT
--------------------------------------------------------- */

.about-left {
    padding-right: 25px !important;
}


.about-left .section-tag {
    margin-bottom: 16px !important;
    padding-bottom: 7px !important;
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
}


.about-left h1 {
    font-size: 54px !important;
    line-height: 1.06 !important;
    letter-spacing: -1.8px !important;
    margin-bottom: 20px !important;
}


.about-left p {
    font-size: 15px !important;
    line-height: 1.72 !important;
    max-width: 590px !important;
}


/* ---------------------------------------------------------
   RIGHT IMAGE
--------------------------------------------------------- */

.about-right {
    margin-left: -70px !important;
    margin-right: 0 !important;

    justify-content: center !important;
    align-items: center !important;
}


.hero-circle {
    margin-right: 0 !important;
}


.hero-ring {
    width: 450px !important;
    height: 450px !important;
}


/* ---------------------------------------------------------
   DECORATIVE DOTS
--------------------------------------------------------- */

.hero-dots {
    left: -30px !important;
    bottom: 25px !important;

    width: 85px !important;
    height: 85px !important;

    opacity: .35 !important;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .about-hero {
        padding-top: 42px !important;
        padding-bottom: 60px !important;
    }

    .about-left h1 {
        font-size: 56px !important;
    }

    .about-left p {
        font-size: 15px !important;
    }

    .hero-ring {
        width: 460px !important;
        height: 460px !important;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

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

    .about-hero {
        padding-top: 38px !important;
        padding-bottom: 55px !important;
    }

    .about-left h1 {
        font-size: 48px !important;
    }

    .about-left p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .about-right {
        margin-left: -35px !important;
    }

    .hero-ring {
        width: 400px !important;
        height: 400px !important;
    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 768px) {

    .about-hero {
        padding: 42px 0 60px !important;
    }

    .about-hero-grid {
        gap: 30px !important;
    }

    .about-left {
        padding-right: 0 !important;
    }

    .about-left h1 {
        font-size: 36px !important;
        line-height: 1.12 !important;
        margin-bottom: 18px !important;
    }

    .about-left p {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .about-right {
        margin-left: 0 !important;
    }

    .hero-circle {
        margin: 0 auto !important;
    }

    .hero-ring {
        width: 320px !important;
        height: 320px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .about-hero {
        padding: 35px 0 55px !important;
    }

    .about-left h1 {
        font-size: 32px !important;
    }

    .hero-ring {
        width: 280px !important;
        height: 280px !important;
    }

}