:root {

    --green:#006B3F;
    --yellow:#FCD116;
    --white:#FFFFFF;

    --background:#F8FAFC;
    --text:#14213D;
    --gray:#64748B;

}



* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



body {

    font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

    background:
    var(--background);

    color:
    var(--text);

}



/* ================= SPLASH ================= */


#splash-screen {


    position:fixed;

    inset:0;

    z-index:9999;


    display:flex;

    justify-content:center;

    align-items:center;


    overflow:hidden;


}



.flag-background {


    position:absolute;

    inset:-30px;


    background-image:

    linear-gradient(
        rgba(0,107,63,.65),
        rgba(0,107,63,.45)
    ),

    url("../assets/images/cameroon_flag.jpg");


    background-size:cover;

    background-position:center;


    animation:
    flagAnimation 15s infinite alternate;


}




.splash-content {


    position:relative;

    width:min(600px,90%);


    text-align:center;


    color:white;


    animation:
    fadeAppear 1.5s ease;


}





.splash-main-logo {


    width:190px;


    max-width:60vw;


    margin-bottom:35px;


    animation:
    logoAppear 1.5s ease;


}





.splash-content h1 {


    font-size:
    clamp(1.8rem,4vw,2.7rem);


    font-weight:800;


}



.splash-content h2 {


    margin-top:15px;


    color:
    var(--yellow);


    font-size:
    clamp(1.1rem,2vw,1.5rem);


}



.splash-content p {


    margin:25px auto;


    line-height:1.8;


    font-size:1.05rem;


    opacity:.95;


}





.loading {


    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:35px;

}



.loading span {


    width:10px;

    height:10px;


    background:white;

    border-radius:50%;


    animation:
    bounce 1.2s infinite;


}



.loading span:nth-child(2){

    animation-delay:.2s;

}


.loading span:nth-child(3){

    animation-delay:.4s;

}






/* ================= MAIN ================= */



.hidden {

    display:none;

}



#main-app {


    animation:
    fadeAppear 1s ease;


}




/* HEADER */


.main-header {


    position:relative;

    overflow:hidden;


    background:

    var(--green);


    padding:50px 20px;


    color:white;

    text-align:center;


}



.header-decoration {


    position:absolute;


    width:400px;

    height:400px;


    right:-150px;

    top:-150px;


    background:
    var(--yellow);


    opacity:.15;


    border-radius:50%;


}



.header-content {


    position:relative;

    z-index:2;


}



.brand-zone {


    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;


}




.main-logo {


    width:150px;

    height:auto;


}



.header-content h1 {


    margin-top:30px;

    font-size:2rem;


}



.header-content p {


    margin-top:15px;

    line-height:1.6;


}




/* CONTENT */


.container {


    width:min(950px,90%);

    margin:auto;


    padding:40px 0;


}




.language-selector {


    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:35px;


}



.language-selector button {


    padding:12px 25px;


    border:none;


    border-radius:30px;


    cursor:pointer;


    background:
    var(--green);


    color:white;


    transition:.3s;


}



.language-selector button:hover {


    background:#004d2d;

}





.privacy-card {


    background:white;


    padding:30px;


    margin-bottom:25px;


    border-radius:18px;


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


    animation:
    slideUp .6s ease;


}



.privacy-card h2 {


    color:
    var(--green);


    margin-bottom:15px;


}



.privacy-card p {


    color:
    var(--gray);


    line-height:1.8;

    white-space:pre-line;


}




/* FOOTER */


.footer {


    background:
    var(--green);


    color:white;


    text-align:center;


    padding:35px 20px;


}



.footer img {


    width:80px;

    margin-bottom:15px;


}



.footer-links {


    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:20px;


}



.footer-links a {


    color:white;

    text-decoration:none;

}





/* ANIMATIONS */


@keyframes flagAnimation {


    from {

        transform:
        scale(1)
        translateX(-10px);

    }


    to {

        transform:
        scale(1.08)
        translateX(10px);

    }


}



@keyframes fadeAppear {


    from {

        opacity:0;

        transform:
        translateY(30px);

    }


    to {

        opacity:1;

        transform:none;

    }


}



@keyframes logoAppear {


    from {

        opacity:0;

        transform:
        scale(.7);

    }


    to {

        opacity:1;

        transform:
        scale(1);

    }


}



@keyframes bounce {


    50% {

        transform:
        translateY(-8px);

    }


}



@keyframes slideUp {


    from {

        opacity:0;

        transform:
        translateY(25px);

    }


    to {

        opacity:1;

        transform:none;

    }


}




@media(max-width:600px){


    .main-logo {

        width:110px;

    }


    .brand-zone {

        gap:15px;

    }


    .splash-content p {

        font-size:.95rem;

    }


}