:root{

--vert-gmk:#2E7D32;

--jaune-gmk:#FBC02D;

--blanc:#ffffff;

--gris:#f5f5f5;

}


body{

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

padding-top:90px;

}



.btn-gmk{

background:var(--jaune-gmk);

color:#000;

border-radius:30px;

padding:12px 25px;

font-weight:600;

}



.footer-gmk{

background:var(--vert-gmk);

color:white;

padding:40px 0;

}

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

.hero-gmk {

    position: relative;

    width: 100%;

    height: 90vh;

    min-height: 600px;

    overflow: hidden;

}


/* =========================================================
   CAROUSEL
========================================================= */

.hero-gmk .carousel,
.hero-gmk .carousel-inner {

    width: 100%;

    height: 100%;

}


.hero-gmk .carousel-item {

    position: relative;

    width: 100%;

    height: 90vh;

    min-height: 600px;

}


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

.hero-gmk .hero-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   OVERLAY
========================================================= */

.hero-gmk .hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(0, 80, 20, .88),
            rgba(0, 0, 0, .30)
        );

}


/* =========================================================
   CONTENU
========================================================= */

.hero-gmk .carousel-item .container {

    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    align-items: center;

}


.hero-gmk .hero-content {

    position: relative;

    width: 100%;

    max-width: 720px;

    color: #FFFFFF;

}


.hero-gmk .hero-content h1 {

    margin: 0;

    font-size: clamp(
        36px,
        5vw,
        58px
    );

    line-height: 1.15;

    font-weight: 800;

}


.hero-gmk .hero-content p {

    max-width: 650px;

    margin:
        25px
        0;

    font-size: 19px;

    line-height: 1.7;

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

}


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

.hero-gmk .hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}


.hero-gmk .hero-buttons a {

    margin-right: 0;

}


.hero-gmk .btn-gmk {

    background: #FBC02D;

    border: 2px solid #FBC02D;

    color: #222;

    font-weight: 700;

    padding:
        14px
        30px;

    border-radius: 40px;

    transition: .3s ease;

}


.hero-gmk .btn-gmk:hover {

    background: #2E7D32;

    border-color: #2E7D32;

    color: #FFFFFF;

    transform: translateY(-3px);

}


.hero-gmk .btn-outline-light {

    border-radius: 40px;

    padding:
        14px
        30px;

}


/* =========================================================
   CONTROLES
========================================================= */

.hero-gmk .carousel-control-prev,
.hero-gmk .carousel-control-next {

    z-index: 5;

    width: 65px;

}


.hero-gmk .carousel-control-prev-icon,
.hero-gmk .carousel-control-next-icon {

    width: 45px;

    height: 45px;

    padding: 10px;

    border-radius: 50%;

    background-color:
        rgba(46,125,50,.85);

    background-size: 50% 50%;

}


.hero-gmk .carousel-control-prev:hover
.carousel-control-prev-icon,
.hero-gmk .carousel-control-next:hover
.carousel-control-next-icon {

    background-color: #FBC02D;

}


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

@media (max-width: 768px) {

    .hero-gmk {

        height: 78vh;

        min-height: 550px;

    }


    .hero-gmk .carousel-item {

        height: 78vh;

        min-height: 550px;

    }


    .hero-gmk .carousel-item .container {

        padding-left: 25px;

        padding-right: 25px;

    }


    .hero-gmk .hero-content {

        max-width: 100%;

    }


    .hero-gmk .hero-content h1 {

        font-size: 35px;

    }


    .hero-gmk .hero-content p {

        font-size: 16px;

        line-height: 1.6;

    }


    .hero-gmk .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .hero-gmk .hero-buttons a {

        width: 100%;

        text-align: center;

    }


    .hero-gmk .carousel-control-prev,
    .hero-gmk .carousel-control-next {

        width: 40px;

    }

}



/* Mobile */


@media(max-width:768px){


.hero-content h1{

font-size:35px;

}


.hero-content p{

font-size:16px;

}


.hero-buttons a{

display:block;

margin:10px 0;

}


}

/* ==========================
   PRESENTATION GMK
========================== */


.presentation-gmk{

background:#ffffff;

}



.section-label{

color:#2E7D32;

font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

}



.presentation-content h2{

font-size:42px;

font-weight:800;

margin:20px 0;

color:#222;

}



.presentation-content p{

color:#666;

line-height:1.8;

}



.presentation-image{

position:relative;

}



.presentation-image img{

width:100%;

border-radius:25px;

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

}



.experience-box{


position:absolute;

bottom:30px;

right:30px;


background:#2E7D32;

color:white;


padding:25px;

border-radius:20px;


text-align:center;

}



.experience-box h2{

font-size:45px;

margin:0;

color:#FBC02D;

}



.value-item{

background:#f7f7f7;

padding:20px;

border-radius:15px;

height:100%;

transition:.3s;

}



.value-item:hover{

transform:translateY(-8px);

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

}



.value-item i{

font-size:35px;

color:#2E7D32;

margin-bottom:15px;

}



.value-item h5{

font-weight:700;

}

/* ==========================
   PRODUITS GMK
========================== */


.produits-gmk{

background:#f8f8f8;

}



.section-title span{

color:#2E7D32;

font-weight:700;

text-transform:uppercase;

}



.section-title h2{

font-size:42px;

font-weight:800;

margin:15px 0;

}



.section-title p{

color:#666;

max-width:700px;

margin:auto;

}



.produit-card{

background:white;

border-radius:30px;

overflow:hidden;

height:100%;

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

transition:.4s;

}



.produit-card:hover{

transform:translateY(-10px);

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

}




.produit-image{

height:350px;

background:linear-gradient(
135deg,
#fbc02d,
#ffffff
);

display:flex;

align-items:center;

justify-content:center;

padding:30px;

}



.produit-image img{

height:100%;

max-width:100%;

object-fit:contain;

transition:.4s;

}



.produit-card:hover img{

transform:scale(1.08);

}



.produit-content{

padding:35px;

}



.produit-content h3{

font-size:30px;

font-weight:800;

color:#2E7D32;

}



.produit-content p{

color:#666;

line-height:1.8;

}



.produit-content ul{

padding:0;

list-style:none;

}



.produit-content li{

margin:12px 0;

}



.produit-content i{

color:#2E7D32;

margin-right:10px;

}


/* ==========================
   FABRICATION GMK
========================== */


.fabrication-gmk{

background:#ffffff;

}




.etape-fabrication{

background:#fff;

border-radius:25px;

overflow:hidden;

position:relative;

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

height:100%;

transition:.4s;

}



.etape-fabrication:hover{

transform:translateY(-10px);

}




.etape-image{

height:220px;

overflow:hidden;

}



.etape-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.etape-fabrication:hover img{

transform:scale(1.1);

}




.etape-numero{

position:absolute;

top:190px;

left:30px;

background:#2E7D32;

color:white;

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

font-weight:800;

border:5px solid white;

}



.etape-content{

padding:45px 30px 30px;

}



.etape-content h4{

color:#2E7D32;

font-size:24px;

font-weight:800;

}



.etape-content p{

color:#666;

line-height:1.7;

}


/* ==========================
   AVANTAGES GMK
========================== */


.avantages-gmk{

background:#f7f7f7;

}




.avantage-card{

background:white;

padding:35px 25px;

border-radius:25px;

height:100%;

text-align:center;

transition:.4s;

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

}



.avantage-card:hover{

transform:translateY(-12px);

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

}




.avantage-icon{

width:80px;

height:80px;

margin:auto;

border-radius:50%;

background:#2E7D32;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

margin-bottom:25px;

}



.avantage-card:hover .avantage-icon{

background:#FBC02D;

color:#222;

}




.avantage-card h4{

font-size:22px;

font-weight:800;

color:#2E7D32;

margin-bottom:15px;

}



.avantage-card p{

color:#666;

line-height:1.7;

}
/* ==========================
   STATISTIQUES GMK
========================== */


.statistiques-gmk{

background:
linear-gradient(
135deg,
#2E7D32,
#1B5E20
);

padding:80px 0;

color:white;

}



.stat-box{

padding:30px;

}



.stat-icon{

width:75px;

height:75px;

margin:auto;

background:#FBC02D;

color:#222;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

margin-bottom:20px;

}



.stat-box h2{

font-size:55px;

font-weight:800;

margin:0;

}



.stat-box p{

font-size:18px;

margin-top:10px;

opacity:.9;

}

/* ==========================
   SUCCURSALES GMK
========================== */


.succursales-gmk{

background:#f8f8f8;

}



.succursale-card{

background:white;

border-radius:25px;

overflow:hidden;

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

transition:.4s;

height:100%;

}



.succursale-card:hover{

transform:translateY(-10px);

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

}



.succursale-image{

height:250px;

overflow:hidden;

}



.succursale-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.succursale-card:hover img{

transform:scale(1.1);

}



.succursale-body{

padding:30px;

}



.succursale-body h4{

font-size:26px;

font-weight:800;

color:#2E7D32;

}



.succursale-body p{

color:#666;

}



.succursale-body i{

color:#FBC02D;

margin-right:10px;

}

/* ==========================
   ACTUALITES GMK
========================== */


.actualites-gmk{

background:white;

}



.article-card{

background:white;

border-radius:25px;

overflow:hidden;

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

transition:.4s;

height:100%;

}



.article-card:hover{

transform:translateY(-10px);

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

}



.article-image{

height:250px;

position:relative;

overflow:hidden;

}



.article-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.article-card:hover img{

transform:scale(1.1);

}



.article-date{

position:absolute;

bottom:20px;

left:20px;

background:#2E7D32;

color:white;

padding:8px 15px;

border-radius:20px;

font-size:14px;

}



.article-body{

padding:30px;

}



.categorie{

color:#2E7D32;

font-weight:700;

font-size:14px;

text-transform:uppercase;

}



.article-body h4{

font-size:22px;

font-weight:800;

margin:15px 0;

}



.article-body p{

color:#666;

line-height:1.7;

}



.lire-plus{

color:#2E7D32;

font-weight:700;

text-decoration:none;

}


/* ==========================
   TEMOIGNAGES GMK
========================== */


.temoignages-gmk{

background:#f7f7f7;

}



.temoignage-card{

background:white;

padding:35px 25px;

border-radius:25px;

text-align:center;

height:100%;

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

transition:.4s;

}



.temoignage-card:hover{

transform:translateY(-10px);

}



.client-photo{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

overflow:hidden;

border:5px solid #FBC02D;

}



.client-photo img{

width:100%;

height:100%;

object-fit:cover;

}



.etoiles{

color:#FBC02D;

margin:20px 0;

}



.temoignage-card p{

color:#666;

font-style:italic;

line-height:1.8;

}



.temoignage-card h5{

color:#2E7D32;

font-weight:800;

margin-bottom:5px;

}



.temoignage-card span{

color:#888;

font-size:14px;

}

/* ==========================
   PARTENAIRES GMK
========================== */


.partenaires-gmk{

background:white;

}



.partenaire-logo{

height:120px;

background:#fff;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

box-shadow:
0 8px 25px rgba(0,0,0,.06);

transition:.4s;

}



.partenaire-logo:hover{

transform:translateY(-8px);

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

}



.partenaire-logo img{

max-width:100%;

max-height:70px;

object-fit:contain;

filter:grayscale(100%);

transition:.3s;

}



.partenaire-logo:hover img{

filter:grayscale(0);

}

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


.contact-gmk{

background:#f7f7f7;

}



.contact-info h2{

font-size:40px;

font-weight:800;

margin:20px 0;

}



.contact-info p{

color:#666;

line-height:1.8;

}



.contact-item{

display:flex;

align-items:center;

gap:20px;

margin:25px 0;

}



.contact-item .icon{

width:55px;

height:55px;

background:#2E7D32;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

}



.contact-item h5{

margin:0;

font-weight:700;

}



.contact-item p{

margin:0;

}




.contact-form{

background:white;

padding:40px;

border-radius:30px;

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

}



.contact-form h3{

font-size:30px;

font-weight:800;

color:#2E7D32;

margin-bottom:30px;

}



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

border-radius:15px;

padding:15px;

border:1px solid #ddd;

}



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

border-color:#2E7D32;

box-shadow:none;

}

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


.footer-gmk{

background:#123d18;

color:white;

padding:70px 0 20px;

}



.footer-logo{

width:120px;

margin-bottom:20px;

}



.footer-block p{

color:#ddd;

line-height:1.8;

}



.footer-block h4{

font-size:22px;

font-weight:800;

margin-bottom:25px;

color:#FBC02D;

}



.footer-block ul{

list-style:none;

padding:0;

}



.footer-block ul li{

margin-bottom:12px;

color:#ddd;

}



.footer-block ul li a{

color:#ddd;

text-decoration:none;

transition:.3s;

}



.footer-block ul li a:hover{

color:#FBC02D;

padding-left:5px;

}



.footer-social{

display:flex;

gap:15px;

margin-top:25px;

}



.footer-social a{

width:40px;

height:40px;

border-radius:50%;

background:#FBC02D;

color:#222;

display:flex;

align-items:center;

justify-content:center;

transition:.3s;

}



.footer-social a:hover{

background:white;

transform:translateY(-5px);

}



.contact-footer i{

color:#FBC02D;

margin-right:10px;

}



.footer-bottom{

text-align:center;

padding-top:20px;

color:#ddd;

}

[data-aos]{

opacity:1 !important;

transform:none !important;

visibility:visible !important;

}

/* ==========================
   CARTE SUCCURSALES GMK
========================== */


.carte-gmk{

background:white;

}



#map-gmk{

height:500px;

border-radius:30px;

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

}



.info-agence{

background:#2E7D32;

color:white;

padding:35px;

border-radius:25px;

height:100%;

}



.info-agence h4{

color:#FBC02D;

font-size:30px;

font-weight:800;

margin-bottom:25px;

}



.info-agence p{

margin:20px 0;

}



.info-agence i{

color:#FBC02D;

margin-right:10px;

}

/* =============================
   LISTE SUCCURSALES
============================= */


.liste-succursales{

background:#f8f9fa;

}



.agence-card{

background:white;

border-radius:25px;

overflow:hidden;

height:100%;

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

transition:.4s;

}



.agence-card:hover{

transform:translateY(-10px);

}



.agence-header{

height:120px;

background:#2E7D32;

display:flex;

align-items:center;

justify-content:center;

color:#FBC02D;

font-size:45px;

}



.agence-body{

padding:30px;

}



.agence-body h4{

font-size:28px;

font-weight:800;

color:#2E7D32;

margin-bottom:25px;

}



.agence-body p{

color:#666;

}



.agence-body i{

color:#2E7D32;

width:25px;

}



.statut{

display:inline-block;

padding:8px 15px;

border-radius:30px;

font-size:14px;

font-weight:600;

margin-top:15px;

}



.ouvert{

background:#e8f5e9;

color:#2E7D32;

}

/*================================
 RESEAU DISTRIBUTEURS
================================*/


.distributeurs-gmk{

background:white;

}



.distributeur-card{

background:#fff;

padding:40px 30px;

border-radius:25px;

text-align:center;

height:100%;

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

transition:.4s;

border-bottom:5px solid transparent;

}



.distributeur-card:hover{

transform:translateY(-10px);

border-bottom-color:#FBC02D;

}



.icon-box{

width:90px;

height:90px;

margin:auto;

background:#2E7D32;

color:#FBC02D;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

margin-bottom:25px;

}



.distributeur-card h4{

font-size:24px;

font-weight:800;

color:#2E7D32;

}



.distributeur-card p{

color:#666;

}



.produits-disponibles span{


display:inline-block;

background:#f1f8e9;

color:#2E7D32;

padding:8px 15px;

border-radius:30px;

margin:5px;

font-size:14px;

font-weight:600;

}

/*=================================
        HORAIRES GMK
=================================*/


.horaires-gmk{

background:#f8f9fa;

}



.horaire-card,
.services-card{

background:white;

padding:40px;

border-radius:25px;

height:100%;

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

}



.horaire-header{

display:flex;

align-items:center;

gap:20px;

margin-bottom:30px;

}



.horaire-header i{

width:65px;

height:65px;

display:flex;

align-items:center;

justify-content:center;

background:#2E7D32;

color:#FBC02D;

border-radius:50%;

font-size:28px;

}



.horaire-header h3{

color:#2E7D32;

font-weight:800;

}



.horaire-card ul{

padding:0;

list-style:none;

}



.horaire-card li{

display:flex;

justify-content:space-between;

padding:18px 0;

border-bottom:1px solid #eee;

}



.horaire-card strong{

color:#2E7D32;

}



.statut-ouverture{

margin-top:25px;

display:inline-flex;

align-items:center;

gap:10px;

background:#e8f5e9;

color:#2E7D32;

padding:10px 20px;

border-radius:30px;

font-weight:700;

}



.statut-ouverture span{

width:12px;

height:12px;

background:#2E7D32;

border-radius:50%;

}



.services-card h3{

color:#2E7D32;

font-weight:800;

margin-bottom:30px;

}



.service-item{

display:flex;

gap:20px;

margin-bottom:25px;

}



.service-item i{

font-size:28px;

color:#FBC02D;

}



.service-item h5{

margin:0;

font-weight:700;

}



.service-item p{

color:#666;

margin:5px 0;

}

/* ==========================
   CONTACT SUCCURSALES GMK
========================== */


.contact-succursales{

background:white;

}



.contact-box-gmk{

background:
linear-gradient(
135deg,
#2E7D32,
#1B5E20
);

padding:70px;

border-radius:35px;

color:white;

}



.contact-box-gmk span{

color:#FBC02D;

font-weight:800;

text-transform:uppercase;

}



.contact-box-gmk h2{

font-size:42px;

font-weight:800;

margin:20px 0;

}



.contact-box-gmk p{

line-height:1.8;

font-size:18px;

color:#eee;

}



.contact-actions{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:30px;

}



.urgence-card{

background:white;

color:#222;

padding:35px;

border-radius:25px;

text-align:center;

}



.urgence-card i{

font-size:45px;

color:#2E7D32;

margin-bottom:20px;

}



.urgence-card h4{

font-weight:800;

color:#2E7D32;

}



.urgence-card h3{

color:#FBC02D;

font-weight:800;

}