/*==================================================
  UMUEZE FAMILY UNION
  Preserving Yesterday. Connecting Tomorrow.
  Powered by LegitDrops
==================================================*/

/*==================================================
  RESET
==================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:var(--font-body);
    background:var(--body);
    color:var(--text);
    font-size:16px;
    line-height:1.7;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

/*==================================================
  ELEMENTS
==================================================*/

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
    transition:var(--transition);
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
    border:none;
    background:none;
}

ul,
ol{
    list-style:none;
}

/*==================================================
  TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:var(--font-heading);
    color:var(--heading);
    font-weight:700;
    line-height:1.2;
}

h1{
    font-size:clamp(2.8rem,6vw,5rem);
}

h2{
    font-size:clamp(2rem,4vw,3rem);
}

h3{
    font-size:1.5rem;
}

p{
    color:var(--text);
    margin-bottom:1rem;
}

/*==================================================
  LAYOUT
==================================================*/

.container{
    width:min(var(--container),92%);
    margin-inline:auto;
}

section{
    padding:6rem 0;
}

/*==================================================
  UTILITIES
==================================================*/

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

.text-white{
    color:#fff;
}

.text-primary{
    color:var(--primary);
}

.bg-primary{
    background:var(--primary);
}

.bg-white{
    background:#fff;
}

.rounded{
    border-radius:var(--radius);
}

.shadow{
    box-shadow:var(--shadow);
}

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:14px 30px;
    border-radius:12px;
    font-weight:600;
    transition:all .35s ease;
    user-select:none;
}

.btn-primary{
    background:var(--primary);
    color:#fff;
    box-shadow:0 10px 30px rgba(15,93,70,.25);
}

.btn-primary:hover{
    background:var(--primary-dark);
    transform:translateY(-3px);
}

.btn-outline{
    border:2px solid var(--primary);
    color:var(--primary);
    background:#fff;
}

.btn-outline:hover{
    background:var(--primary);
    color:#fff;
}

.btn-light{
    background:#fff;
    color:var(--primary);
}

.btn-light:hover{
    transform:translateY(-3px);
}

/*==================================================
  SECTION TITLES
==================================================*/

.section-title{
    max-width:720px;
    margin:0 auto 4rem;
    text-align:center;
}

.section-title span{
    display:inline-block;
    color:var(--secondary-dark);
    text-transform:uppercase;
    letter-spacing:3px;
    font-weight:700;
    margin-bottom:1rem;
}

.section-title h2{
    margin-bottom:1.5rem;
}

.section-title p{
    color:var(--text-light);
    font-size:1.1rem;
}

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

.card{
    background:#fff;
    border-radius:20px;
    padding:2rem;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.35s ease;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:.35s ease;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

}

.header .container{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

}

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

.logo{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.logo h2{

    color:var(--primary);

    font-size:1.9rem;

    font-weight:800;

    letter-spacing:-1px;

    margin:0;

}

.logo span{

    color:var(--text-light);

    font-size:.85rem;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-top:2px;

}

/*==================================================
  NAVIGATION
==================================================*/

.navigation{

    flex:1;

    display:flex;

    justify-content:center;

}

.navigation ul{

    display:flex;

    align-items:center;

    gap:2.5rem;

}

.navigation li{

    position:relative;

}

.navigation a{

    position:relative;

    font-weight:600;

    color:var(--heading);

    transition:.35s;

}

.navigation a:hover{

    color:var(--primary);

}

.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    border-radius:50px;

    background:var(--secondary);

    transition:.35s;

}

.navigation a:hover::after{

    width:100%;

}

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

.header-buttons{

    display:flex;

    align-items:center;

    gap:1rem;

}

.header-buttons .btn{

    padding:12px 24px;

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        rgba(15,93,70,.95),
        rgba(11,71,54,.90)
    );

    padding-top:120px;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,
        rgba(201,162,39,.18),
        transparent 35%),

        radial-gradient(circle at bottom left,
        rgba(255,255,255,.05),
        transparent 40%);

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero-content{

    max-width:760px;

}

.hero small{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-weight:600;

    margin-bottom:2rem;

}

.hero h1{

    color:#fff;

    line-height:1.05;

    margin-bottom:1.5rem;

}

.hero h3{

    color:var(--secondary-light);

    font-weight:500;

    font-size:2rem;

    margin-bottom:2rem;

}

.hero p{

    color:rgba(255,255,255,.90);

    font-size:1.15rem;

    max-width:650px;

    margin-bottom:2.5rem;

}

.hero-buttons{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

/*==================================================
  FLOATING GLOW
==================================================*/

.hero::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-120px;

    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:radial-gradient(

        rgba(201,162,39,.18),

        transparent 70%

    );

    filter:blur(20px);

}

/*==================================================
  SCROLL EFFECT
==================================================*/

.header.scrolled{

    background:rgba(255,255,255,.97);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}


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

.statistics{

    position:relative;

    background:var(--body);

    padding:7rem 0;

}

.stat-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:2rem;

}

.stat-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:24px;

    padding:3rem 2rem;

    text-align:center;

    transition:.4s ease;

    border:1px solid rgba(15,93,70,.08);

    box-shadow:0 20px 45px rgba(0,0,0,.05);

}

.stat-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

.stat-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(15,93,70,.04);

    right:-90px;

    top:-90px;

}

.stat-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.stat-card h2{

    font-size:3.5rem;

    font-family:var(--font-heading);

    color:var(--primary);

    margin-bottom:.8rem;

    line-height:1;

}

.stat-card p{

    margin:0;

    color:var(--text-light);

    font-size:1rem;

    font-weight:500;

}

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

.about{

    position:relative;

    background:#fff;

    padding:8rem 0;

}

.about .container{

    max-width:900px;

}

.about h2{

    text-align:center;

    margin-bottom:2rem;

    color:var(--heading);

}

.about p{

    text-align:center;

    color:var(--text-light);

    font-size:1.12rem;

    line-height:2;

}

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

.mission{

    background:linear-gradient(
        to bottom,
        #ffffff,
        #f8fafc
    );

    padding:8rem 0;

}

.mission .container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:2rem;

}

.mission .card{

    position:relative;

    overflow:hidden;

    border:none;

}

.mission .card::before{

    content:"";

    position:absolute;

    width:80px;

    height:80px;

    border-radius:50%;

    background:rgba(201,162,39,.12);

    right:-20px;

    top:-20px;

}

.mission .card h3{

    color:var(--primary);

    margin-bottom:1.5rem;

}

.mission .card p{

    color:var(--text-light);

}

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

.cta{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    text-align:center;

    padding:8rem 0;

}

.cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,
        rgba(255,255,255,.08),
        transparent 30%),

        radial-gradient(circle at bottom left,
        rgba(201,162,39,.12),
        transparent 35%);

}

.cta .container{

    position:relative;

    z-index:2;

}

.cta h2{

    color:#fff;

    margin-bottom:1.5rem;

}

.cta p{

    color:rgba(255,255,255,.90);

    max-width:700px;

    margin:0 auto 2.5rem;

    font-size:1.15rem;

}

.cta .btn{

    font-size:1.05rem;

    padding:16px 36px;

}

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

footer{

    background:#0c1622;

    color:#fff;

    padding:5rem 0 3rem;

    text-align:center;

}

footer h3{

    color:#fff;

    margin-bottom:1rem;

}

footer p{

    color:rgba(255,255,255,.75);

}

footer small{

    display:block;

    margin-top:2rem;

    color:rgba(255,255,255,.55);

}

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

@media (max-width:992px){

    .hero{

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

}

@media (max-width:768px){

    section{

        padding:5rem 0;

    }

    .header .container{

        height:auto;

        padding:1rem 0;

        flex-direction:column;

    }

    .navigation ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:1.25rem;

    }

    .header-buttons{

        width:100%;

        justify-content:center;

    }

    .btn{

        width:100%;

    }

    .hero{

        min-height:auto;

        padding:9rem 0 6rem;

    }

    .hero h3{

        font-size:1.4rem;

    }

    .stat-card{

        padding:2.2rem;

    }

}