/* =====================================================
   BIEN MANGER COMMUNITY
   MAIN STYLE SHEET
===================================================== */


/* =====================================================
   ROOT VARIABLES
===================================================== */

:root {

    --primary-color: #166534;

    --secondary-color: #0f172a;

    --accent-color: #e63946;

    --gold-color: #d4a017;

    --light-green: #dcfce7;

    --white: #ffffff;

    --black: #111827;

    --gray: #64748b;

    --light-gray: #f8fafc;

    --border-color: #e5e7eb;

    --shadow:
        0 15px 40px rgba(0,0,0,0.08);

    --radius: 18px;

    --transition:
        all .35s ease;

}



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


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:
    'Poppins',
    sans-serif;

    color:var(--black);

    background:#fff;

    line-height:1.7;

}



img {

    max-width:100%;

    display:block;

}



a {

    text-decoration:none;

    color:inherit;

}



ul {

    list-style:none;

}



button {

    border:none;

    cursor:pointer;

    font-family:inherit;

}



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


.container {

    width:90%;

    max-width:1200px;

    margin:auto;

}


.section {

    padding:90px 0;

}



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


.btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 32px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}



.btn-primary {

    background:
    var(--primary-color);

    color:white;

}



.btn-primary:hover {

    background:#14532d;

    transform:translateY(-4px);

}



.btn-outline {

    border:2px solid white;

    color:white;

}



.btn-outline:hover {

    background:white;

    color:var(--primary-color);

}



/* =====================================================
   TOP BAR
===================================================== */


.top-red-bar {

    height:6px;

    background:
    var(--accent-color);

}



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


.header {

    width:100%;

    position:relative;

    background:white;

    z-index:1000;

}



.navbar {

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 5%;

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

}



/* LOGO */


.logo {

    font-size:28px;

    font-weight:800;

    letter-spacing:-1px;

}



.logo .green {

    color:var(--primary-color);

}



.logo .dark {

    color:var(--secondary-color);

}



/* MENU BUTTON */


.menu-btn {

    display:none;

    background:none;

    font-size:26px;

    color:var(--primary-color);

}



/* DESKTOP NAV */


.desktop-nav ul {

    display:flex;

    gap:28px;

    align-items:center;

}



.desktop-nav a {

    font-size:14px;

    font-weight:500;

    position:relative;

}



.desktop-nav a::after {

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:
    var(--primary-color);

    transition:.3s;

}



.desktop-nav a:hover::after {

    width:100%;

}



/* HEADER ICONS */


.header-icons {

    display:flex;

    gap:20px;

}



.header-icons a {

    width:42px;

    height:42px;

    border-radius:50%;

    background:
    var(--light-gray);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}



.header-icons a:hover {

    background:
    var(--primary-color);

    color:white;

}



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


.mobile-menu {

    position:fixed;

    top:0;

    left:-100%;

    width:320px;

    height:100vh;

    background:white;

    z-index:2000;

    padding:30px;

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

    transition:.4s;

}



.mobile-menu.active {

    left:0;

}



.mobile-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}



.mobile-header button {

    background:none;

    font-size:24px;

}



.mobile-menu li {

    margin-bottom:20px;

}



.mobile-menu a {

    font-size:16px;

    font-weight:500;

}



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


.hero {

    min-height:650px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:

    linear-gradient(
    90deg,
    rgba(0,0,0,.65),
    rgba(0,0,0,.25)
    ),
    url("images/banner.jpg");

    background-size:cover;

    background-position:center;

}



.hero-content {

    position:relative;

    z-index:2;

    width:90%;

    max-width:1200px;

    margin:auto;

    color:white;

}



.hero-content h1 {

    font-size:60px;

    line-height:1.2;

    font-weight:800;

    max-width:750px;

}



.hero-content h1 span {

    color:#86efac;

}



.hero-content p {

    font-size:20px;

    max-width:650px;

    margin:25px 0 40px;

}



.hero-buttons {

    display:flex;

    gap:20px;

}



/* HERO IMAGE */

.hero-image {

    display:none;

}



/* =====================================================
   QUICK MENU
===================================================== */


.quick-menu {

    margin-top:-60px;

    position:relative;

    z-index:5;

}



.quick-grid {

    display:grid;

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

    gap:25px;

}



.quick-card {

    background:white;

    padding:35px 25px;

    text-align:center;

    border-radius:
    var(--radius);

    box-shadow:
    var(--shadow);

    transition:
    var(--transition);

}



.quick-card i {

    font-size:35px;

    color:
    var(--primary-color);

    margin-bottom:20px;

}



.quick-card h3 {

    margin-bottom:10px;

}



.quick-card:hover {

    transform:
    translateY(-10px);

}