/* =========================================================
SPARK A DREAM
OYDC ZAMBIA
========================================================= */

/* =========================================================
FONTS
========================================================= */

@font-face {
font-family: 'World Athletics';


src: url('../Font/WorldAthletics.eot');

src:
    local('World Athletics'),
    local('WorldAthletics'),
    url('../Font/WorldAthletics.eot?#iefix') format('embedded-opentype'),
    url('../Font/WorldAthletics.woff2') format('woff2'),
    url('../Font/WorldAthletics.woff') format('woff'),
    url('../Font/WorldAthletics.ttf') format('truetype');

font-weight: normal;
font-style: normal;
font-display: swap;


}

@font-face {
font-family: 'World Athletics Headline';


src: url('../Font/WorldAthleticsHeadline.eot');

src:
    local('World Athletics Headline'),
    local('WorldAthleticsHeadline'),
    url('../Font/WorldAthleticsHeadline.eot?#iefix') format('embedded-opentype'),
    url('../Font/WorldAthleticsHeadline.ttf') format('truetype');

font-weight: bold;
font-style: normal;
font-display: swap;


}

/* =========================================================
GLOBAL
========================================================= */

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

:root {


--oydc-green: #00843d;

--oydc-dark-green: #006b32;

--oydc-deep-green: #004f27;

--oydc-light-green: #69c993;

--oydc-black: #111111;

--oydc-white: #ffffff;

--oydc-grey: #666666;

--oydc-light: #f5f7f5;

--oydc-border: #e5e9e6;

--container: 1240px;


}

html {
scroll-behavior: smooth;
}

body {


font-family: 'World Athletics', serif;

color: var(--oydc-black);

background: var(--oydc-white);

overflow-x: hidden;


}

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

button,
a {
font-family: inherit;
}

.spark-container {


width: min(var(--container), 90%);

margin: 0 auto;

position: relative;
z-index: 2;


}

/* =========================================================
REVEAL ANIMATIONS
========================================================= */

.reveal-up,
.reveal-left,
.reveal-right {


opacity: 0;

transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.2,.65,.3,1);


}

.reveal-up {
transform: translateY(45px);
}

.reveal-left {
transform: translateX(-55px);
}

.reveal-right {
transform: translateX(55px);
}

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {


opacity: 1;

transform: translate(0, 0);


}

.delay-1 {
transition-delay: .12s;
}

.delay-2 {
transition-delay: .24s;
}

.delay-3 {
transition-delay: .36s;
}

/* =========================================================
SECTION LABEL
========================================================= */

.spark-section-label {


display: flex;

align-items: center;

gap: 12px;

color: var(--oydc-green);

font-size: 12px;

font-weight: bold;

letter-spacing: 2.5px;

margin-bottom: 24px;


}

.spark-section-label span {


width: 35px;

height: 2px;

background: var(--oydc-green);

display: block;

transform-origin: left;

transition: width .8s ease;


}

.spark-section-label:hover span {
width: 65px;
}

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

.spark-primary-btn {


min-height: 56px;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 15px;

padding: 0 30px;

background: var(--oydc-green);

color: var(--oydc-white);

text-decoration: none;

font-size: 15px;

font-weight: bold;

transition:
    background .3s ease,
    transform .3s ease,
    box-shadow .3s ease;


}

.spark-primary-btn i {


transition: transform .3s ease;


}

.spark-primary-btn:hover {


background: var(--oydc-dark-green);

transform: translateY(-3px);

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


}

.spark-primary-btn:hover i {


transform: translateX(5px);


}

.dark-btn {


margin-top: 32px;


}

.spark-outline-btn {


min-height: 56px;

display: inline-flex;

align-items: center;

justify-content: center;

padding: 0 30px;

border: 1px solid rgba(255,255,255,.6);

color: var(--oydc-white);

text-decoration: none;

font-size: 15px;

font-weight: bold;

transition: all .3s ease;


}

.spark-outline-btn:hover {


background: var(--oydc-white);

color: var(--oydc-black);


}

.spark-scroll-btn {


display: inline-flex;

align-items: center;

gap: 12px;

color: var(--oydc-white);

text-decoration: none;

font-size: 14px;

margin-left: 22px;


}

.spark-scroll-btn i {


font-size: 12px;

animation: scrollBounce 1.7s infinite;


}

@keyframes scrollBounce {


0%, 100% {
    transform: translateY(0);
}

50% {
    transform: translateY(5px);
}


}

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

.spark-hero {


position: relative;

min-height: 720px;

display: flex;

align-items: center;

overflow: hidden;

background: #06160e;


}

.spark-hero-image {


position: absolute;

inset: 0;

overflow: hidden;


}

.spark-hero-image img {


width: 100%;

height: 100%;

object-fit: cover;

animation: heroZoom 12s ease-out forwards;


}

@keyframes heroZoom {


from {
    transform: scale(1.08);
}

to {
    transform: scale(1);
}


}

.spark-hero-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.70) 40%,
        rgba(0,0,0,.28) 75%,
        rgba(0,0,0,.08) 100%
    );

z-index: 1;


}

.spark-hero-pattern {


position: absolute;

width: 650px;

height: 650px;

right: -220px;

bottom: -300px;

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

border-radius: 50%;

box-shadow:
    0 0 0 80px rgba(255,255,255,.025),
    0 0 0 160px rgba(255,255,255,.018);

z-index: 1;


}

.spark-hero-content {


position: relative;

z-index: 3;

width: min(var(--container), 90%);

margin: 0 auto;

padding: 110px 0 140px;

color: var(--oydc-white);


}

.spark-hero-label {


display: flex;

align-items: center;

gap: 13px;

font-size: 13px;

font-weight: bold;

letter-spacing: 3px;

margin-bottom: 25px;


}

.spark-hero-label span {


width: 42px;

height: 2px;

background: var(--oydc-green);

display: block;


}

.spark-hero h1 {


max-width: 820px;

font-family:
    'World Athletics Headline',
    'World Athletics',
    sans-serif;

font-size: clamp(58px, 7vw, 96px);

line-height: .94;

letter-spacing: -2px;

margin-bottom: 32px;


}

.spark-hero h1 span {


display: block;

color: var(--oydc-green);


}

.spark-hero-text {


max-width: 650px;

font-size: 19px;

line-height: 1.75;

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

margin-bottom: 38px;


}

.spark-hero-buttons {


display: flex;

align-items: center;

flex-wrap: wrap;

gap: 15px;


}

.spark-hero-bottom {


position: absolute;

z-index: 3;

left: 5%;

right: 5%;

bottom: 35px;

display: flex;

align-items: center;

gap: 15px;

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

font-size: 10px;

letter-spacing: 2px;


}

.hero-line {


width: 60px;

height: 1px;

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


}

.spark-scroll-indicator {


position: absolute;

z-index: 3;

right: 5%;

bottom: 35px;

display: flex;

align-items: center;

gap: 10px;

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

font-size: 10px;

letter-spacing: 2px;


}

.spark-scroll-indicator i {


color: var(--oydc-green);

animation: scrollBounce 1.7s infinite;


}

/* =========================================================
INTRODUCTION
========================================================= */

.spark-dream-section {


padding: 130px 0;

background: var(--oydc-white);


}

.spark-intro-grid {


display: grid;

grid-template-columns: 1fr 1fr;

gap: 100px;

align-items: start;


}

.spark-intro-heading h2 {


font-family:
    'World Athletics Headline',
    'World Athletics',
    sans-serif;

font-size: clamp(46px, 5vw, 70px);

line-height: 1.02;

letter-spacing: -1px;


}

.spark-intro-heading h2 strong {


display: block;

color: var(--oydc-green);


}

.spark-intro-copy {


padding-top: 10px;


}

.spark-intro-copy p {


max-width: 650px;

font-size: 17px;

line-height: 1.85;

color: #5e5e5e;

margin-bottom: 25px;


}

.spark-intro-copy .large-copy {


font-size: 18px;
font-weight: bold;

line-height: 1.7;

color: var(--oydc-black);

margin-bottom: 30px;


}

.spark-intro-copy strong {


color: var(--oydc-black);


}

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

.spark-image-break {


min-height: 620px;

position: relative;

display: flex;

align-items: center;

overflow: hidden;

background: #07170f;


}

.spark-image-break-image {


position: absolute;

inset: 0;


}

.spark-image-break-image img {


width: 100%;

height: 100%;

object-fit: cover;

transition: transform 1.2s ease;


}

.spark-image-break:hover
.spark-image-break-image img {


transform: scale(1.04);


}

.spark-image-break-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(0,67,39,.94),
        rgba(0,67,39,.68),
        rgba(0,0,0,.25)
    );


}

.spark-image-break-content {


max-width: 800px;

color: var(--oydc-white);


}

.spark-quote-mark {


font-family: Georgia, serif;

font-size: 110px;

line-height: .5;

color: var(--oydc-light-green);

opacity: .7;

margin-bottom: 25px;


}

.spark-image-break-content h2 {


font-family:
    'World Athletics Headline',
    'World Athletics',
    sans-serif;

font-size: clamp(45px, 5vw, 70px);

line-height: 1.04;


}

.spark-image-break-content strong {


display: block;

color: var(--oydc-light-green);


}

/* =========================================================
PILLARS
========================================================= */

.spark-pillars {


padding: 130px 0;

background: var(--oydc-light);


}

.spark-heading {


max-width: 850px;

margin-bottom: 65px;


}

.spark-heading h2 {


font-family:
    'World Athletics Headline',
    'World Athletics',
    sans-serif;

font-size: clamp(45px, 5vw, 68px);

line-height: 1.04;


}

.spark-heading h2 strong {


display: block;

color: var(--oydc-green);


}

.spark-heading > p {


max-width: 700px;

font-size: 18px;

line-height: 1.75;

color: #5d5d5d;

margin-top: 25px;


}

.spark-pillar-grid {


display: grid;

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

gap: 18px;


}

.spark-pillar-card {


position: relative;

min-height: 390px;

padding: 38px 30px;

background: var(--oydc-white);

border: 1px solid var(--oydc-border);

overflow: hidden;

transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .4s ease;


}

.spark-pillar-card:hover {


transform: translateY(-10px);

border-color: rgba(0,132,61,.35);

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


}

.pillar-number {


position: absolute;

right: 20px;

top: 15px;

font-family:
    'World Athletics Headline',
    sans-serif;

font-size: 70px;

color: rgba(0,132,61,.055);

line-height: 1;


}

.pillar-icon {


width: 58px;

height: 58px;

display: flex;

align-items: center;

justify-content: center;

background: var(--oydc-green);

color: var(--oydc-white);

font-size: 21px;

margin-bottom: 45px;

position: relative;

z-index: 2;

transition:
    transform .4s ease,
    background .4s ease;


}

.spark-pillar-card:hover
.pillar-icon {


transform: rotate(-5deg) scale(1.08);

background: var(--oydc-dark-green);


}

.spark-pillar-card h3 {


font-family:
    'World Athletics Headline',
    'World Athletics',
    sans-serif;

font-size: 30px;

margin-bottom: 17px;


}

.spark-pillar-card p {


color: #666;

font-size: 15px;

line-height: 1.75;


}

.pillar-line {


position: absolute;

left: 30px;

bottom: 28px;

width: 38px;

height: 2px;

background: var(--oydc-green);

transition: width .4s ease;


}

.spark-pillar-card:hover .pillar-line {


width: 80px;


}

/* =========================================================
JOURNEY
========================================================= */

.spark-journey {


padding: 130px 0;

background: var(--oydc-white);


}

.spark-journey-top {


display: grid;

grid-template-columns: .7fr 1.3fr;

gap: 60px;

margin-bottom: 90px;


}

.spark-journey-top h2 {


font-family:
    'World Athletics Headline',
    'World Athletics',
    sans-serif;

font-size: clamp(44px, 5vw, 68px);

line-height: 1.02;


}

.spark-journey-top h2 strong {


color: var(--oydc-green);


}

/* TIMELINE */

.spark-timeline {


position: relative;

display: grid;

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

gap: 35px;


}

.timeline-line {


position: absolute;

left: 8%;

right: 8%;

top: 31px;

height: 2px;

background: #dfe5e1;

overflow: hidden;


}

.timeline-line span {


display: block;

width: 0;

height: 100%;

background: var(--oydc-green);

transition: width 1.8s ease;


}

.spark-timeline.visible .timeline-line span {


width: 100%;


}

.timeline-item {


position: relative;

z-index: 2;


}

.timeline-dot {


width: 64px;

height: 64px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background: var(--oydc-white);

border: 2px solid var(--oydc-green);

color: var(--oydc-green);

margin-bottom: 30px;

font-size: 20px;

transition: all .4s ease;


}

.timeline-item:hover .timeline-dot {


background: var(--oydc-green);

color: var(--oydc-white);

transform: scale(1.1);


}

.timeline-content span {


color: var(--oydc-green);

font-size: 12px;

font-weight: bold;

letter-spacing: 2px;


}

.timeline-content h3 {


font-family:
    'World Athletics Headline',
    'World Athletics',
    sans-serif;

font-size: 28px;

margin: 12px 0 15px;


}

.timeline-content p {


color: #666;

font-size: 15px;

line-height: 1.75;

max-width: 250px;


}

/* =========================================================
SUPPORT
========================================================= */

.spark-support {


padding: 130px 0;

background: #f5f7f5;


}

.spark-support-grid {


display: grid;

grid-template-columns: 1fr 1fr;

gap: 90px;

align-items: center;


}

.spark-support-image {


height: 650px;

position: relative;

overflow: hidden;


}

.spark-support-image img {


width: 100%;

height: 100%;

object-fit: cover;

transition: transform 1s ease;


}

.spark-support-image:hover img {


transform: scale(1.04);


}

.spark-image-tag {


position: absolute;

left: 25px;

bottom: 25px;

display: flex;

align-items: center;

gap: 12px;

padding: 13px 17px;

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

color: var(--oydc-white);

font-size: 11px;

letter-spacing: 2px;


}

.spark-image-tag span {


width: 25px;

height: 2px;

background: var(--oydc-green);


}

.spark-support-content h2 {


font-family:
    'World Athletics Headline',
    'World Athletics',
    sans-serif;

font-size: clamp(45px, 5vw, 66px);

line-height: 1.02;

margin-bottom: 30px;


}

.spark-support-content h2 strong {


display: block;

color: var(--oydc-green);


}

.spark-support-content > p {


color: #5d5d5d;

font-size: 17px;

line-height: 1.8;

margin-bottom: 22px;


}

.support-list {


display: grid;

gap: 16px;

margin-top: 30px;


}

.support-list div {


display: flex;

align-items: center;

gap: 13px;

font-size: 15px;

font-weight: bold;


}

.support-list i {


width: 24px;

height: 24px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background: var(--oydc-green);

color: var(--oydc-white);

font-size: 10px;


}

/* =========================================================
IMPACT
========================================================= */

.spark-impact {


position: relative;

min-height: 650px;

display: flex;

align-items: center;

overflow: hidden;

background:
    linear-gradient(
        135deg,
        #003c23,
        #006b32
    );

color: var(--oydc-white);


}

.spark-impact-glow {


position: absolute;

width: 650px;

height: 650px;

border-radius: 50%;

right: -200px;

top: -250px;

border: 1px solid rgba(255,255,255,.09);

box-shadow:
    0 0 0 80px rgba(255,255,255,.025),
    0 0 0 160px rgba(255,255,255,.018),
    0 0 0 240px rgba(255,255,255,.012);


}

.spark-impact-content {


max-width: 750px;

position: relative;

z-index: 3;


}

.light-label {


color: var(--oydc-white);


}

.light-label span {


background: var(--oydc-light-green);


}

.spark-impact-content h2 {


font-family:
    'World Athletics Headline',
    'World Athletics',
    sans-serif;

font-size: clamp(48px, 6vw, 78px);

line-height: 1;

margin-bottom: 30px;


}

.spark-impact-content h2 strong {


display: block;

color: var(--oydc-light-green);


}

.spark-impact-content p {


max-width: 680px;

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

font-size: 18px;

line-height: 1.8;

margin-bottom: 18px;


}

.impact-word {


position: absolute;

font-family:
    'World Athletics Headline',
    sans-serif;

font-size: 130px;

font-weight: bold;

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

user-select: none;

pointer-events: none;


}

.impact-word-one {


right: 3%;

top: 18%;


}

.impact-word-two {


right: 9%;

top: 42%;


}

.impact-word-three {


right: 2%;

top: 66%;


}

/* =========================================================
FINAL CTA
========================================================= */

.spark-final-cta {


min-height: 700px;

position: relative;

display: flex;

align-items: center;

overflow: hidden;

color: var(--oydc-white);


}

.spark-final-image {


position: absolute;

inset: 0;


}

.spark-final-image img {


width: 100%;

height: 100%;

object-fit: cover;

transition: transform 8s ease;


}

.spark-final-cta:hover
.spark-final-image img {


transform: scale(1.04);


}

.spark-final-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.88),
        rgba(0,0,0,.67),
        rgba(0,0,0,.25)
    );


}

.spark-final-content {


max-width: 850px;

padding: 110px 0;


}

.final-label {


color: var(--oydc-white);


}

.final-label span {


background: var(--oydc-green);


}

.spark-final-content h2 {


font-family:
    'World Athletics Headline',
    'World Athletics',
    sans-serif;

font-size: clamp(50px, 6vw, 82px);

line-height: .99;

margin-bottom: 30px;


}

.spark-final-content h2 strong {


display: block;

color: var(--oydc-green);


}

.spark-final-content p {


max-width: 680px;

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

font-size: 18px;

line-height: 1.8;

margin-bottom: 35px;


}

.spark-final-buttons {


display: flex;

align-items: center;

flex-wrap: wrap;

gap: 15px;


}

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

@media (max-width: 1100px) {


.spark-pillar-grid {

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

}


.spark-intro-grid,
.spark-support-grid {

    gap: 55px;

}


.spark-journey-top {

    grid-template-columns: 1fr;

    gap: 20px;

}


.spark-timeline {

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

    row-gap: 55px;

}


.timeline-line {

    display: none;

}


}

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

@media (max-width: 700px) {


.spark-container {

    width: 88%;

}


.spark-hero {

    min-height: 700px;

}


.spark-hero-content {

    width: 88%;

    padding: 90px 0 120px;

}


.spark-hero h1 {

    font-size: 52px;

    letter-spacing: -1px;

}


.spark-hero-text {

    font-size: 17px;

    line-height: 1.7;

}


.spark-hero-buttons {

    align-items: stretch;

    flex-direction: column;

}


.spark-primary-btn,
.spark-outline-btn {

    width: 100%;

}


.spark-scroll-btn {

    margin-left: 0;

    margin-top: 8px;

}


.spark-hero-bottom {

    display: none;

}


.spark-scroll-indicator {

    left: 6%;

    right: auto;

    bottom: 28px;

}


.spark-dream-section,
.spark-pillars,
.spark-journey,
.spark-support {

    padding: 85px 0;

}


.spark-intro-grid {

    grid-template-columns: 1fr;

    gap: 40px;

}


.spark-intro-heading h2 {

    font-size: 45px;

}


.spark-intro-copy .large-copy {

    font-size: 20px;

}


.spark-image-break {

    min-height: 600px;

}


.spark-image-break-content h2 {

    font-size: 44px;

}


.spark-pillar-grid {

    grid-template-columns: 1fr;

}


.spark-pillar-card {

    min-height: auto;

    padding-bottom: 60px;

}


.spark-journey-top {

    display: block;

}


.spark-journey-top h2 {

    font-size: 45px;

}


.spark-timeline {

    grid-template-columns: 1fr;

    gap: 45px;

}


.timeline-item {

    display: grid;

    grid-template-columns: 64px 1fr;

    gap: 20px;

    align-items: start;

}


.timeline-dot {

    margin-bottom: 0;

}


.spark-support-grid {

    grid-template-columns: 1fr;

    gap: 55px;

}


.spark-support-image {

    height: 430px;

}


.spark-support-content h2 {

    font-size: 45px;

}


.spark-impact {

    min-height: 650px;

}


.spark-impact-content h2 {

    font-size: 50px;

}


.impact-word {

    font-size: 70px;

}


.spark-final-cta {

    min-height: 700px;

}


.spark-final-content {

    padding: 90px 0;

}


.spark-final-content h2 {

    font-size: 51px;

}


.spark-final-buttons {

    flex-direction: column;

    align-items: stretch;

}


}

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

@media (max-width: 430px) {


.spark-hero h1 {

    font-size: 45px;

}


.spark-intro-heading h2,
.spark-heading h2,
.spark-journey-top h2,
.spark-support-content h2 {

    font-size: 40px;

}


.spark-image-break-content h2 {

    font-size: 38px;

}


.spark-final-content h2 {

    font-size: 43px;

}


.spark-section-label {

    font-size: 10px;

    letter-spacing: 2px;

}


}