@import url("design-system.css");
@import url("components.css");
@import url("animations.css");
@import url("icons.css");

body{

    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

    color:#111827;

    background:#ffffff;

}

.navbar{

    padding:20px 0;

}

.hero{

    padding:120px 0;

}

.hero-badge{

    display:inline-block;

    background:#eaf8ef;

    color:#16a34a;

    padding:10px 20px;

    border-radius:100px;

    font-weight:600;

    margin-bottom:30px;

}

.hero-title{

    font-size:72px;

    font-weight:800;

    line-height:1.05;

    margin-bottom:30px;

}

.hero-title span{

    color:#16a34a;

}

.hero-description{

    font-size:22px;

    line-height:1.8;

    color:#6b7280;

    margin-bottom:40px;

}

.hero-buttons{

    margin-top:50px;

}

.hero-image{

    width:100%;

    border-radius:30px;

    box-shadow:0 30px 80px rgba(0,0,0,.15);

}

footer{

    margin-top:120px;

    padding:60px 0;

}

@media(max-width:991px){

.hero{

padding:80px 0;

}

.hero-title{

font-size:48px;

}

.hero-description{

font-size:18px;

}

.hero-image{

margin-top:50px;

}

}

.navbar-brand{

font-size:30px;

}

.nav-link{

font-weight:600;

margin-left:15px;

}

.nav-link:hover{

color:#16a34a;

}

#about{

padding-top:120px;

padding-bottom:120px;

}

#about h2{

line-height:1.15;

}

#about .card{

transition:.35s;

}

#about .card:hover{

transform:translateY(-8px);

}

#services{

padding:120px 0;

}

.service-card{

background:#fff;

border-radius:22px;

padding:40px;

box-shadow:0 20px 40px rgba(0,0,0,.06);

transition:.35s;

height:100%;

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 60px rgba(22,163,74,.15);

}

.service-card .icon{

font-size:48px;

margin-bottom:25px;

}

.service-card h4{

font-weight:700;

margin-bottom:18px;

}

.service-card p{

color:#6b7280;

line-height:1.8;

}

#why{

padding:120px 0;

}

.why-card{

background:white;

padding:45px;

border-radius:25px;

text-align:center;

height:100%;

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

transition:.35s;

}

.why-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(22,163,74,.15);

}

.why-card h1{

font-size:58px;

margin-bottom:20px;

}

.why-card h4{

font-weight:700;

margin-bottom:20px;

}

.why-card p{

color:#6b7280;

}

.stats-section{

background:#16a34a;

padding:110px 0;

}

.stat-card{

color:white;

}

.stat-card h2{

font-size:56px;

font-weight:800;

margin-bottom:15px;

}

.stat-card p{

font-size:20px;

opacity:.95;

margin:0;

}

#roadmap{

padding:120px 0;

}

.timeline{

position:relative;

margin-top:70px;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

bottom:0;

width:4px;

background:#16a34a;

transform:translateX(-50%);

}

.timeline-item{

display:flex;

justify-content:space-between;

align-items:center;

margin:70px 0;

position:relative;

}

.timeline-year{

width:140px;

height:140px;

background:#16a34a;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

font-weight:800;

z-index:2;

box-shadow:0 15px 40px rgba(22,163,74,.25);

}

.timeline-content{

width:65%;

background:white;

padding:35px;

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,.06);

}

.timeline-content h4{

font-weight:700;

margin-bottom:20px;

}

.timeline-content ul{

margin:0;

padding-left:20px;

}

.timeline-content li{

margin-bottom:12px;

color:#555;

}

#vision{

padding:130px 0;

background:#f8fafc;

overflow:hidden;

}

.africa-card{

position:relative;

}

.africa-card img{

border-radius:35px;

}

.pulse{

position:absolute;

width:18px;

height:18px;

background:#16a34a;

border-radius:50%;

animation:pulse 2.5s infinite;

}

.pulse::before{

content:"";

position:absolute;

left:-10px;

top:-10px;

width:38px;

height:38px;

border-radius:50%;

border:2px solid #16a34a;

animation:ring 2.5s infinite;

}

.pulse1{

top:22%;

left:42%;

}

.pulse2{

top:35%;

left:58%;

}

.pulse3{

top:55%;

left:48%;

}

.pulse4{

top:72%;

left:60%;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.4);

}

100%{

transform:scale(1);

}

}

@keyframes ring{

0%{

transform:scale(.5);

opacity:1;

}

100%{

transform:scale(2.5);

opacity:0;

}

}

#projects{

padding:130px 0;

background:white;

}

.project-card{

background:white;

border-radius:30px;

padding:45px;

height:100%;

box-shadow:0 15px 45px rgba(0,0,0,.06);

transition:.4s;

}

.project-card:hover{

transform:translateY(-12px);

}

.project-header{

font-size:65px;

margin-bottom:20px;

}

.project-card h3{

font-size:34px;

font-weight:700;

margin-bottom:20px;

}

.project-card p{

font-size:18px;

color:#64748b;

}

.project-card ul{

margin-top:25px;

margin-bottom:30px;

padding-left:18px;

}

.project-card li{

margin-bottom:12px;

}

.coming{

background:#f8fafc;

}

.coming-badge{

display:inline-block;

padding:12px 20px;

background:#16a34a;

color:white;

border-radius:50px;

font-weight:600;

margin-top:20px;

}

#partners{

padding:120px 0;

background:#f8fafc;

}

.partners-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.partner-card{

background:white;

border-radius:24px;

padding:35px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:20px;

transition:.35s;

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

}

.partner-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(22,163,74,.15);

}

.partner-card img{

width:70px;

height:70px;

}

.partner-card span{

font-weight:700;

font-size:20px;

}

@media(max-width:992px){

.partners-grid{

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

}

}

@media(max-width:576px){

.partners-grid{

grid-template-columns:1fr;

}

}

#timeline{

padding:130px 0;

background:#ffffff;

}

.timeline{

position:relative;

margin-top:70px;

}

.timeline::before{

content:"";

position:absolute;

left:110px;

top:0;

bottom:0;

width:4px;

background:#16a34a;

}

.timeline-item{

display:flex;

gap:50px;

margin-bottom:70px;

position:relative;

}

.year{

min-width:90px;

height:90px;

background:#16a34a;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-weight:700;

font-size:22px;

z-index:2;

}

.content{

background:#f8fafc;

padding:35px;

border-radius:24px;

box-shadow:0 12px 35px rgba(0,0,0,.06);

flex:1;

transition:.3s;

}

.content:hover{

transform:translateY(-6px);

}

.content h4{

font-weight:700;

margin-bottom:15px;

}

.content p{

margin:0;

font-size:18px;

color:#64748b;

}

@media(max-width:768px){

.timeline::before{

display:none;

}

.timeline-item{

flex-direction:column;

}

}

/*==========================
TESTIMONIALS
==========================*/

#testimonials{

padding:130px 0;

background:white;

}

.testimonial-card{

background:#fff;

border-radius:25px;

padding:45px;

box-shadow:0 15px 45px rgba(0,0,0,.07);

transition:.35s;

height:100%;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.stars{

font-size:28px;

color:#f59e0b;

margin-bottom:20px;

}

.testimonial-card p{

font-size:18px;

line-height:1.8;

color:#64748b;

margin-bottom:30px;

}

.testimonial-card h5{

font-weight:700;

margin-bottom:5px;

}

.testimonial-card small{

color:#94a3b8;

}

/*==========================
CONTACT
==========================*/

#contact{

padding:130px 0;

background:#f8fafc;

}

.contact-card{

background:#16a34a;

color:white;

padding:50px;

border-radius:30px;

height:100%;

}

.contact-item{

display:flex;

gap:20px;

margin-bottom:35px;

align-items:flex-start;

}

.contact-item .icon{

font-size:30px;

}

.contact-item p{

margin:0;

opacity:.9;

}

.contact-form{

background:white;

padding:50px;

border-radius:30px;

box-shadow:0 15px 45px rgba(0,0,0,.07);

}

.form-control{

padding:18px;

border-radius:15px;

}

textarea{

resize:none;

}

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

.footer{

background:#111827;

color:white;

padding:90px 0 30px;

}

.footer-logo{

font-size:34px;

font-weight:700;

}

.footer-logo span{

color:#16a34a;

}

.footer h5{

margin-bottom:25px;

font-weight:700;

}

.footer ul{

list-style:none;

padding:0;

margin:0;

}

.footer li{

margin-bottom:14px;

}

.footer a{

color:#cbd5e1;

text-decoration:none;

transition:.3s;

}

.footer a:hover{

color:#22c55e;

}

.footer p{

color:#cbd5e1;

}

.footer hr{

border-color:#374151;

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

color:#9ca3af;

}


.contact-item{

margin-bottom:35px;

}

.contact-item h6{

font-weight:700;

margin-bottom:8px;

color:#16a34a;

}

.contact-item p{

margin:0;

font-size:18px;

color:#64748b;

}

.contact-form label{

font-weight:600;

margin-bottom:10px;

}

.contact-form .form-control{

height:58px;

border-radius:15px;

}

.contact-form textarea{

height:180px;

border-radius:18px;

}

.contact-form .form-select{

height:58px;

border-radius:15px;

}

/*=========================
BACK TO TOP
=========================*/

.back-top{

position:fixed;

right:30px;

bottom:30px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:#16a34a;

color:white;

font-size:26px;

cursor:pointer;

display:none;

align-items:center;

justify-content:center;

box-shadow:0 15px 35px rgba(22,163,74,.35);

transition:.3s;

z-index:9999;

}

.back-top:hover{

transform:translateY(-5px);

background:#15803d;

}

/*==========================
BUSINESS CTA
==========================*/

#professional-services{

padding:130px 0;

background:white;

}

.service-offer{

background:white;

padding:45px;

border-radius:28px;

height:100%;

box-shadow:0 15px 45px rgba(0,0,0,.06);

transition:.35s;

}

.service-offer:hover{

transform:translateY(-12px);

box-shadow:0 30px 60px rgba(22,163,74,.15);

}

.offer-icon{

font-size:60px;

margin-bottom:25px;

}

.service-offer h3{

font-weight:700;

margin-bottom:25px;

}

.service-offer ul{

padding-left:20px;

margin-bottom:35px;

}

.service-offer li{

margin-bottom:12px;

color:#64748b;

}

/* ========================================
   CONTACT - SECURITY / VALIDATION
======================================== */

.honeypot-wrapper {

    position: absolute;

    left: -9999px;

    width: 1px;

    height: 1px;

    overflow: hidden;

}


.contact-form .text-danger {

    font-weight: 500;

}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {

    border-color: #16a34a;

    box-shadow: 0 0 0 .25rem rgba(22, 163, 74, .12);

}


#contactSubmit {

    min-width: 210px;

}

/* ========================================
   CONTACT - CARTE VERTE
======================================== */

#contact .contact-card {
    background: #16a34a;
    color: #ffffff;
}

#contact .contact-card h2,
#contact .contact-card h3,
#contact .contact-card h4,
#contact .contact-card h5,
#contact .contact-card h6,
#contact .contact-card p,
#contact .contact-card a,
#contact .contact-card span,
#contact .contact-card strong {
    color: #ffffff !important;
}

#contact .contact-card p {
    opacity: 1;
}

#contact .contact-item {
    color: #ffffff;
}

#contact .contact-item h6 {
    color: #ffffff !important;
    font-weight: 700;
    margin-bottom: 5px;
}

#contact .contact-item p {
    color: #ffffff !important;
    opacity: .95;
}

#contact .contact-card a {
    color: #ffffff !important;
    text-decoration: none;
}

#contact .contact-card a:hover {
    color: #dcfce7 !important;
}

#contact .contact-item .icon {
    color: #ffffff;
}

/* ========================================
   SYLFOW CONTACT — TECH CARD
======================================== */

.contact-tech-card {

    position: relative;

    height: 100%;

    min-height: 650px;

    padding: 42px;

    border-radius: 32px;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(34, 197, 94, .22),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #0b1220 0%,
            #111827 55%,
            #0b1220 100%
        );

    box-shadow:
        0 30px 80px rgba(15, 23, 42, .18);

}


/* lumière décorative */

.contact-tech-card::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    right: -140px;

    top: -140px;

    border-radius: 50%;

    background: rgba(34, 197, 94, .12);

    filter: blur(5px);

}


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

.contact-tech-header {

    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 30px;

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

}


.contact-tech-logo {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 15px;

    background: #16a34a;

    color: #ffffff;

    font-size: 25px;

    font-weight: 800;

    box-shadow:
        0 10px 30px rgba(22, 163, 74, .30);

}


.contact-tech-label {

    display: block;

    color: #22c55e;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.contact-tech-header h3 {

    margin: 2px 0 0;

    color: #ffffff;

    font-size: 24px;

    font-weight: 700;

}


/* ==============================
   INTRO
============================== */

.contact-tech-intro {

    position: relative;

    padding: 35px 0 28px;

}


.contact-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    margin-bottom: 22px;

    border:

        1px solid rgba(34, 197, 94, .25);

    border-radius: 50px;

    background:
        rgba(34, 197, 94, .08);

    color: #bbf7d0;

    font-size: 12px;

    font-weight: 600;

}


.status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 12px rgba(34, 197, 94, .9);

}


.contact-tech-intro h4 {

    max-width: 420px;

    margin-bottom: 16px;

    color: #ffffff;

    font-size: 31px;

    font-weight: 750;

    line-height: 1.15;

}


.contact-tech-intro h4 span {

    color: #22c55e;

}


.contact-tech-intro p {

    max-width: 430px;

    margin: 0;

    color: #94a3b8;

    font-size: 15px;

    line-height: 1.7;

}


/* ==============================
   CONTACT ITEMS
============================== */

.contact-tech-list {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.contact-tech-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px;

    border:

        1px solid rgba(255, 255, 255, .08);

    border-radius: 16px;

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

    color: #ffffff !important;

    text-decoration: none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;

}


.contact-tech-item:hover {

    transform: translateX(5px);

    border-color:
        rgba(34, 197, 94, .35);

    background:
        rgba(34, 197, 94, .08);

}


.contact-tech-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    background:
        rgba(34, 197, 94, .12);

    color: #4ade80;

    font-size: 18px;

    font-weight: 800;

}


.contact-tech-item div:nth-child(2) {

    min-width: 0;

    flex: 1;

}


.contact-tech-item small {

    display: block;

    margin-bottom: 2px;

    color: #64748b;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .7px;

}


.contact-tech-item strong {

    display: block;

    overflow: hidden;

    color: #f8fafc;

    font-size: 14px;

    font-weight: 600;

    text-overflow: ellipsis;

}


.contact-arrow {

    color: #22c55e;

    font-size: 20px;

    transition: transform .25s ease;

}


.contact-tech-item:hover
.contact-arrow {

    transform: translateX(4px);

}


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

.contact-tech-footer {

    position: relative;

    display: grid;

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

    gap: 12px;

    margin-top: 24px;

    padding-top: 24px;

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

}


.contact-tech-footer div {

    padding: 13px;

    border-radius: 14px;

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

}


.contact-tech-footer small {

    display: block;

    margin-bottom: 5px;

    color: #64748b;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .7px;

}


.contact-tech-footer strong {

    color: #e2e8f0;

    font-size: 13px;

}


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

@media (max-width: 991px) {

    .contact-tech-card {

        min-height: auto;

        padding: 32px;

    }

}


@media (max-width: 576px) {

    .contact-tech-card {

        padding: 26px 20px;

        border-radius: 24px;

    }

    .contact-tech-intro h4 {

        font-size: 27px;

    }

    .contact-tech-footer {

        grid-template-columns: 1fr;

    }

}

/* ========================================
   CONTACT — COMPACT LAYOUT
======================================== */

#contact .contact-tech-card {

    min-height: 0;

    height: 100%;

    padding: 32px;

    border-radius: 28px;

}


/* HEADER */

#contact .contact-tech-header {

    padding-bottom: 22px;

}


#contact .contact-tech-logo {

    width: 46px;

    height: 46px;

    border-radius: 13px;

    font-size: 22px;

}


#contact .contact-tech-header h3 {

    font-size: 21px;

}


/* INTRO */

#contact .contact-tech-intro {

    padding: 25px 0 22px;

}


#contact .contact-status {

    margin-bottom: 17px;

    padding: 6px 11px;

}


#contact .contact-tech-intro h4 {

    font-size: 27px;

    margin-bottom: 12px;

}


#contact .contact-tech-intro p {

    font-size: 14px;

    line-height: 1.6;

}


/* CONTACTS */

#contact .contact-tech-list {

    gap: 8px;

}


#contact .contact-tech-item {

    padding: 12px;

    border-radius: 14px;

}


#contact .contact-tech-icon {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    font-size: 16px;

}


#contact .contact-tech-item strong {

    font-size: 13px;

}


/* FOOTER */

#contact .contact-tech-footer {

    gap: 8px;

    margin-top: 18px;

    padding-top: 18px;

}


#contact .contact-tech-footer div {

    padding: 11px;

}


/* FORMULAIRE */

#contact .contact-form {

    padding: 36px;

    border-radius: 28px;

}