/*==================================================
LOGISTIQUE.CSS
Association 2B EVENEMENT
==================================================*/


/*==================================================
BANNIÈRE
==================================================*/

.logistique-banner{

    

    background:
    linear-gradient(rgba(11,60,93,.72),
    rgba(11,60,93,.72)),
    url("../images/sono.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.logistique-hero{

    background:
        linear-gradient(
            rgba(11,60,93,.70),
            rgba(11,60,93,.70)
        ),
        url("../images/sono.jpg");

    background-size:cover;

    background-position:center;

}

.logistique-banner h1{

    font-size:4.8rem;

    font-weight:700;

    letter-spacing:2px;

    margin:20px 0;

}

.logistique-banner p{

    font-size:1.45rem;

    max-width:900px;

    margin:auto;

    line-height:1.9;

}


/*==================================================
BANDEAU
==================================================*/

.intro-logistique{

    background:#0B3C5D;

    color:#fff;

    padding:70px 0;

}

.intro-logistique h2{

    font-size:2.4rem;

    font-weight:700;

    margin-bottom:20px;

}

.intro-logistique p{

    font-size:1.15rem;

    line-height:1.8;

}

.intro-logistique .btn{

    border-radius:50px;

    padding:15px 35px;

}/*==================================================
LOCATION
==================================================*/

.location{

    padding:100px 0;

    background:#ffffff;

}

.section-mini{

    color:#F4B400;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:15px;

}

.location h2{

    color:#0B3C5D;

    font-size:2.8rem;

    font-weight:700;

    margin-bottom:20px;

}

.location p{

    font-size:1.1rem;

    line-height:1.8;

    color:#555;

}

.location img{

    width:100%;

    max-width:560px;

    border-radius:20px;

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

    transition:transform .35s ease,
               box-shadow .35s ease;

}

.location img:hover{

    transform:scale(1.03) rotate(-1deg);

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

}

.location img:hover{

    transform:scale(1.02);

}


/*==================================================
OFFRE PREMIUM
==================================================*/

.offer-card{

    background:#ffffff;

    border-radius:25px;

    padding:40px;

    margin-top:35px;

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

    position:relative;

    transition:.35s;

}

.offer-card:hover{

    transform:translateY(-8px);

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

}

.badge-offre{

    position:absolute;

    top:-15px;

    right:25px;

    background:#F4B400;

    color:#ffffff;

    padding:8px 18px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

}

.offer-card .price{

    font-size:4rem;

    font-weight:700;

    color:#0B3C5D;

    margin-bottom:25px;

    line-height:1;

}

.offer-card .price span{

    display:block;

    font-size:1rem;

    color:#777;

    margin-top:10px;

}

.offer-card ul{

    list-style:none;

    padding:0;

    margin:30px 0;

}

.offer-card li{

    padding:12px 0;

    border-bottom:1px solid #ececec;

    color:#444;

}

.offer-card li:last-child{

    border-bottom:none;

}

.offer-card li i{

    color:#28a745;

    margin-right:12px;

}

.offer-card .btn{

    width:100%;

    margin-top:30px;

    border-radius:50px;

    padding:15px;

    font-weight:600;

}/*==================================================
MATÉRIEL INCLUS
==================================================*/

.materiel{

    padding:100px 0;

    background:#f8f9fb;

}

.materiel .section-title{

    text-align:center;

    margin-bottom:60px;

}

.materiel .section-title h2{

    color:#0B3C5D;

    font-size:2.8rem;

    font-weight:700;

}

.materiel .section-title p{

    max-width:700px;

    margin:20px auto 0;

    color:#666;

}

.card-avantage{

    background:#ffffff;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    height:100%;

    box-shadow:0 15px 35px rgba(11,60,93,.08);

    transition:all .35s ease;

}

.card-avantage:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(11,60,93,.15);

}

.card-avantage i{

    font-size:3rem;

    color:#F4B400;

    margin-bottom:20px;

    transition:.35s;

}

.card-avantage:hover i{

    transform:scale(1.15);

}

.materiel-card i{

    font-size:3.2rem;

    color:#F4B400;

    margin-bottom:20px;

}

.materiel-card h4{

    color:#0B3C5D;

    font-size:1.4rem;

    font-weight:700;

    margin-bottom:15px;

}

.materiel-card p{

    color:#666;

    line-height:1.7;

}



/*==================================================
NOS ENGAGEMENTS
==================================================*/

.advantages{

    padding:100px 0;

    background:#ffffff;

}

.advantages .section-title{

    text-align:center;

    margin-bottom:60px;

}

.card-avantage{

    background:#ffffff;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    height:100%;

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

    transition:.35s;

}

.card-avantage:hover{

    transform:translateY(-10px);

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

}

.card-avantage i{

    font-size:3rem;

    color:#F4B400;

    margin-bottom:20px;

}

.card-avantage h4{

    color:#0B3C5D;

    font-size:1.4rem;

    font-weight:700;

    margin-bottom:15px;

}

.card-avantage p{

    color:#666;

    line-height:1.8;

}