/*--------------------------------------------------------------
# MarocOffers
# Homepage Hero Premium
# Version 1.0.0
--------------------------------------------------------------*/

.mo-hero{

    position:relative;

    overflow:hidden;

    padding:70px 0;

    background:
linear-gradient(135deg,#0F9D58 0%,#17b663 60%,#22c55e 100%);

}

.mo-hero::before{

    content:"";

    position:absolute;

    inset:0;
    
    width:500px;
    height:500px;

    top:-180px;
    right:-120px;
    
    background:rgba(255,255,255,.08);
    border-radius:50%;

    filter:blur(40px);
    
    pointer-events:none;

}

.mo-container{

    width:min(1280px,92%);

    margin:auto;

    position:relative;

    z-index:2;

}

.mo-hero-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:60px;

}

.mo-hero-left{

    color:#fff;

}

.mo-hero-right{

    position:relative;

    height:420px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*--------------------------------------------------------------
Badge
--------------------------------------------------------------*/

.mo-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:14px;

    font-weight:700;

    margin-bottom:22px;

}

/*--------------------------------------------------------------
Titre
--------------------------------------------------------------*/

.mo-hero h1{

    font-size:56px;

    line-height:1.1;

    font-weight:800;

    margin:0 0 22px;

    max-width:700px;

}

.mo-hero p{

    font-size:20px;

    line-height:1.8;

    opacity:.95;

    max-width:650px;

    margin-bottom:34px;

}

/*--------------------------------------------------------------
# Search
--------------------------------------------------------------*/

.mo-search-form{

    display:flex;

    align-items:center;

    overflow:hidden;

    border-radius:18px;

    background:#fff;

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

    max-width:700px;

    margin-bottom:28px;

}

.mo-search-form input{

    flex:1;

    border:0;

    outline:0;

    background:none;

    padding:20px 24px;

    font-size:16px;

    color:#222;

}

.mo-search-form input::placeholder{

    color:#888;

}

.mo-search-form button{

    border:0;

    cursor:pointer;

    padding:0 34px;

    height:64px;

    background:#111827;

    color:#fff;

    font-size:15px;

    font-weight:700;

    transition:.30s;

}

.mo-search-form button:hover{

    background:#0F9D58;

}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

.mo-hero-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.mo-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 30px;

    border-radius:14px;

    font-weight:700;

    text-decoration:none;

    transition:.30s;

}

.mo-btn-primary{

    background:#fff;

    color:#0F9D58;
    
    position:relative;

    overflow:hidden;
}

.mo-btn-primary::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transition:.6s;

}

.mo-btn-primary:hover::before{

    left:120%;

}

.mo-btn-primary:hover{

    transform:translateY(-3px);

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

}

.mo-btn-light{

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

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.25);

    color:#fff;

}

.mo-btn-light:hover{

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

}

/*--------------------------------------------------------------
# Statistics
--------------------------------------------------------------*/

.mo-hero-stats{

    display:flex;

    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;

}

.mo-stat-card{

    min-width:150px;

    padding:22px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.18);

    transition:.30s;
    
    cursor:default;
    
}

.mo-stat-card:hover{

    transform:translateY(-8px);

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

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

}

.mo-stat-card strong{

    display:block;

    font-size:34px;

    font-weight:800;

    color:#fff;

    margin-bottom:8px;
    
    letter-spacing:-1px;

}

.mo-stat-card span{

    color:#fff;

    opacity:.9;

    font-size:15px;

}

/*--------------------------------------------------------------
# Hero Catalog Premium
--------------------------------------------------------------*/

.mo-hero-right{

position:relative;

height:520px;

display:flex;

align-items:center;

justify-content:center;

}

/* Carte centrale */

.mo-hero-cover{

position:absolute;

width:230px;

border-radius:24px;

overflow:hidden;

box-shadow:0 35px 70px rgba(0,0,0,.30);

transition:.35s;

background:#fff;

}

.mo-hero-cover img{

display:block;

width:100%;

height:auto;

box-shadow:

0 25px 60px rgba(0,0,0,.25);

}

/*=============================
Carte centrale
==============================*/

.mo-hero-cover:nth-child(1){

transform:
translateX(-120px)
rotate(-12deg);

z-index:1;

}

/*=============================
Carte gauche
==============================*/

.mo-hero-cover:nth-child(2){

width:250px;

transform:translateY(-20px);

z-index:3;

}

/*=============================
Carte droite
==============================*/

.mo-hero-cover:nth-child(3){

transform:
translateX(120px)
rotate(12deg);

z-index:2;

}

.mo-hero-cover:hover{

transform:translateY(-10px) scale(1.04);

z-index:10;

}

/* Hover */

.mo-hero-cover:hover{

    transform:translateY(-12px) scale(1.04) !important;

    z-index:10;

}

@media (max-width:992px){

.mo-hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.mo-hero-left{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.mo-hero-right{

    position:relative;

    min-height:480px;

    min-width:520px;

    margin-top:40px;

}

.mo-hero-cover{

    width:170px;

}

.mo-hero-cover:nth-child(2){

    transform:translate(-70px,25px) rotate(-10deg);

}

.mo-hero-cover:nth-child(3){

    transform:translate(70px,25px) rotate(10deg);

}

}

@media (max-width:768px){

.mo-hero{

    padding:55px 0;

}

.mo-hero h1{

    font-size:36px;

}

.mo-search-form{

    flex-direction:column;

    border-radius:18px;

}

.mo-search-form input{

    width:100%;

}

.mo-search-form button{

    width:100%;

}

.mo-hero-buttons{

    width:100%;

}

.mo-btn{

    width:100%;

}

.mo-hero-cover{

    width:140px;

}

}

/*--------------------------------------------------------------
# Hero Animations
--------------------------------------------------------------*/

.mo-hero-left>*{

    opacity:0;

    transform:translateY(35px);

    animation:HeroFade .7s forwards;

}

.mo-hero-badge{

    animation-delay:.05s;

}

.mo-hero h1{

    animation-delay:.15s;

}

.mo-hero p{

    animation-delay:.25s;

}

.mo-search-form{

    animation-delay:.35s;

}

.mo-hero-buttons{

    animation-delay:.45s;

}

.mo-hero-stats{

    animation-delay:.55s;

}

@keyframes HeroFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.mo-hero-cover{

    animation:FloatCatalog 5s ease-in-out infinite;

}

.mo-hero-cover:nth-child(2){

    animation-delay:.6s;

}

.mo-hero-cover:nth-child(3){

    animation-delay:1.2s;

}

.mo-hero-cover:nth-child(1){

    animation:float1 5s ease-in-out infinite;

}

.mo-hero-cover:nth-child(2){

    animation:float2 5s ease-in-out infinite;

}

.mo-hero-cover:nth-child(3){

    animation:float3 5s ease-in-out infinite;

}

@keyframes float1{

0%,100%{

transform:translateX(-50%) translateY(0);

}

50%{

transform:translateX(-50%) translateY(-12px);

}

}

@keyframes float2{

0%,100%{

transform:rotate(-12deg) translateY(0);

}

50%{

transform:rotate(-12deg) translateY(-8px);

}

}

@keyframes float3{

0%,100%{

transform:rotate(12deg) translateY(0);

}

50%{

transform:rotate(12deg) translateY(-8px);

}

}

.mo-hero::after{

    content:"";

    position:absolute;
    
    top:-250px;

    width:350px;
    height:350px;
    
    left:-120px;
    bottom:-150px;

    border-radius:50%;

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

    filter:blur(60px);

}

.mo-hero-features{

display:flex;
flex-wrap:wrap;
gap:14px;

margin-top:28px;

}

.mo-hero-features span{

padding:10px 18px;

border-radius:40px;

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

border:1px solid rgba(255,255,255,.18);

backdrop-filter:blur(10px);

font-size:14px;

font-weight:600;

color:#fff;

transition:.30s;

}

.mo-hero-features span:hover{

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

transform:translateY(-3px);

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.mo-hero-cover{

animation:heroFloat 6s ease-in-out infinite;

}

.mo-hero-cover:nth-child(2){

animation-delay:.8s;

}

.mo-hero-cover:nth-child(3){

animation-delay:1.6s;

}

@keyframes fadeHero{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:none;

}

}

.mo-hero-left>*{

animation:fadeHero .8s ease forwards;

}

.mo-hero-left>*:nth-child(2){

animation-delay:.1s;

}

.mo-hero-left>*:nth-child(3){

animation-delay:.2s;

}

.mo-hero-left>*:nth-child(4){

animation-delay:.3s;

}

.mo-hero-left>*:nth-child(5){

animation-delay:.4s;

}

.mo-hero-left>*:nth-child(6){

animation-delay:.5s;

}