/* =======================================================
   MBOACOIN DESIGN SYSTEM v1.0
   Auteur : Sylvain FOWO
======================================================= */

:root{

    --mboa-green:#198754;

    --mboa-green-dark:#157347;

    --mboa-yellow:#FFC107;

    --mboa-red:#DC3545;

    --mboa-light:#F8F9FA;

    --mboa-dark:#212529;

    --radius:18px;

}

/* =======================================================
   BODY
======================================================= */

body{

    background:var(--mboa-light);

    color:var(--mboa-dark);

    font-family:Inter,Arial,sans-serif;

}

/* =======================================================
   NAVBAR
======================================================= */

.navbar{

    box-shadow:0 5px 18px rgba(0,0,0,.08);

}

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

.hero{

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

    color:white;

    border-radius:24px;

    padding:60px;

}

/* =======================================================
   BOUTONS
======================================================= */

.btn-mboa{

    background:var(--mboa-green);

    color:white;

    border:none;

}

.btn-mboa:hover{

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

    color:white;

}

.btn-premium{

    background:var(--mboa-yellow);

    border:none;

    color:black;

}

.btn-premium:hover{

    opacity:.9;

}

/* =======================================================
   CARTES
======================================================= */

.card-mboa{

    border:none;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}

.card-mboa:hover{

    transform:translateY(-6px);

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

}

/* =======================================================
   IMAGES
======================================================= */

.listing-image{

    height:240px;

    width:100%;

    object-fit:cover;

}

/* =======================================================
   BADGES
======================================================= */

.badge-premium{

    background:var(--mboa-yellow);

    color:black;

    font-weight:bold;

}

/* =======================================================
   BOUTIQUE
======================================================= */

.shop-logo{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid white;

}

.shop-banner{

    width:100%;

    height:300px;

    object-fit:cover;

}

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

.footer{

    background:#222;

    color:white;

    padding:50px 0;

    margin-top:80px;

}/* =======================================================
   MBOACOIN DESIGN SYSTEM v1.0
   Auteur : Sylvain FOWO
======================================================= */

:root{

    --mboa-green:#198754;

    --mboa-green-dark:#157347;

    --mboa-yellow:#FFC107;

    --mboa-red:#DC3545;

    --mboa-light:#F8F9FA;

    --mboa-dark:#212529;

    --radius:18px;

}

/* =======================================================
   BODY
======================================================= */

body{

    background:var(--mboa-light);

    color:var(--mboa-dark);

    font-family:Inter,Arial,sans-serif;

}

/* =======================================================
   NAVBAR
======================================================= */

.navbar{

    box-shadow:0 5px 18px rgba(0,0,0,.08);

}

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

.hero{

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

    color:white;

    border-radius:24px;

    padding:60px;

}

/* =======================================================
   BOUTONS
======================================================= */

.btn-mboa{

    background:var(--mboa-green);

    color:white;

    border:none;

}

.btn-mboa:hover{

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

    color:white;

}

.btn-premium{

    background:var(--mboa-yellow);

    border:none;

    color:black;

}

.btn-premium:hover{

    opacity:.9;

}

/* =======================================================
   CARTES
======================================================= */

.card-mboa{

    border:none;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}

.card-mboa:hover{

    transform:translateY(-6px);

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

}

/* =======================================================
   IMAGES
======================================================= */

.listing-image{

    height:240px;

    width:100%;

    object-fit:cover;

}

/* =======================================================
   BADGES
======================================================= */

.badge-premium{

    background:var(--mboa-yellow);

    color:black;

    font-weight:bold;

}

/* =======================================================
   BOUTIQUE
======================================================= */

.shop-logo{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid white;

}

.shop-banner{

    width:100%;

    height:300px;

    object-fit:cover;

}

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

.footer{

    background:#222;

    color:white;

    padding:50px 0;

    margin-top:80px;

}

.hero-section{
    padding:70px 0;
}

.hero-section h1{
    font-weight:800;
    line-height:1.2;
}

.hero-section p{
    font-size:1.2rem;
}

.hero-section img{
    border-radius:20px;
    transition:.4s;
}

.hero-section img:hover{
    transform:scale(1.02);
}

.btn-success{
    border-radius:12px;
    padding:12px 24px;
}

.btn-outline-success{
    border-radius:12px;
    padding:12px 24px;
}

/* ==========================
   Listing Card
========================== */

.listing-card{

    transition:.25s ease;

    border-radius:18px;

    overflow:hidden;

}

.listing-card:hover{

    transform:translateY(-6px);

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

}

.listing-image{

    height:230px;

    object-fit:cover;

}

.card-footer{

    font-size:.9rem;

}

/* =====================================
   SEARCH BAR
===================================== */

.search-section .card {

    border-radius: 20px;

}

.search-section input {

    border-radius: 12px;

}

.search-section select {

    border-radius: 12px;

}

.search-section .btn {

    border-radius: 12px;

}