#btnTop {
	position: fixed;
	bottom: 30px;
	right: 30px;
	font-size: 18px;
	width: 30px;
	height: 30px;
	background: var(--blanc);
	color: var(--gris-dark);
	box-shadow: 0 5px 10px var(--gris-dark);
	border: none;
	cursor: pointer;
	display: none;
}
#btnTop span{
	position: absolute;
	float: left;
	left: 0; top: 0;
	width: 100%; height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}



#banner {
	height: 400px ;
	border-bottom-right-radius: 0;
}

#banner .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
    height: 100% ;
}

#banner .box-container .box{
    border-radius: 0;
    overflow:hidden;
    background:#fff;
    flex:1 1 30rem;
    height: 100%;
}

#banner .box-container .box .image-container{
    overflow:hidden;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#banner .box-container .box .image-container video {
    margin: 0;
    width: 100vw;
    height: 100%;
    position: absolute;
    object-fit: cover;
    transition: .2s linear;
    z-index: -100;
    display: block;
}
#banner .box-container .box .image-container img {
    margin: 0;
    width: 100vw;
    height: 100%;
    position: absolute;
    object-fit: cover;
    transition: .2s linear;
    z-index: -100;
    display: block;
}

#banner .box-container .box .image-container .texte{
    position: relative;
    bottom:1rem; 
    display: flex;
    align-items: center;
    text-align: center;
    height: 108%;
    z-index: 3;
    line-height: 100%;
}

#banner .box-container .box .image-container .texte h5{
    position: absolute;
    left: 0;
    right: 0;
    font-size: 3rem;
    color:var(--blanc);
    border-radius: 0;
    padding:.5rem 1.5rem;
    margin: 0px auto ;
}




#accueil-banniere{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../image/photos/accueii-nmawlogistics.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	background-origin: content-box;
	background-position: center;
	height: 80vh;
}
.company-name-accueil span{
	font-size: 50px;
	color: var(--bleu-dark);
}
.montra{
	background-color: red;
	display: flex;
	flex-direction: row;
	justify-content: center;
	font-family: var(--texte);
	color: var(--bleu-ligth);
}

#accueil-service,
#accueil-service-disposition{
	padding: 50px 0;
}
.accueil-service{
	padding: 15px 0;
}
.accueil-service span i{
	font-size: 30px;
}

#accueil-service h5.titre-rebrique,
#accueil-service-disposition h5.titre-rebrique,
#accueil-service .ligne,
#accueil-service-disposition .ligne{
	margin-bottom: 30px;
	text-align: center;
	font-size: 20px;
	color: var(--bleu-dark);
}
.titre-service-icon{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
h5.titre-service{
	font-size: 15px;
	color: var(--bleu-ligth);
}

.block-image-livre{
	align-items: stretch;
}
.block-image-livre > div{
	margin-bottom: 25px;
}
.commande-livre{
	text-decoration: none;
}

#nous{
	margin: 0 0;
}
.nous-1{
	background: linear-gradient(to bottom left, rgba(200, 0, 0, 0.5), var(--bleu-dark)), url("../image/photos/nmawlogisitics-accueil.jpg");	
}
.nous-2{
	background: linear-gradient(to bottom left, rgba(0, 200, 0, 0.5), var(--bleu-dark)), url("../image/photos/tous-les-moyens-de-transport.jpg");
}
.nous-3{
	background: linear-gradient(to bottom left, rgba(0, 200, 200, 0.5), var(--bleu-dark)), url("../image/photos/temoignage.jpg");
}
.nous-4{
	background: linear-gradient(to bottom left, rgba(200, 200, 0, 0.5), var(--bleu-dark)), url("../image/photos/nmawlogistics-camion-1.jpg");
}
.nous-1,
.nous-2,
.nous-3,
.nous-4{
	padding-top: 25px;
	padding-bottom: 25px;
	display: flex; 
	flex-direction: column;
	/*justify-content: center;*/
	background-repeat: no-repeat;	
	background-size: cover;
	background-origin: initial;
	min-height: 300px;
}
.nous-pourquoi h5{
	color: var(--gris);
}
.p-liste-puce{
	display: flex;
}
.p-liste-puce > div:last-child{
	width: calc(100% - 10px);
	margin-left: 10px;
}
.p-liste-puce > div{
	color: var(--blanc);
}
.contact-liste-puce .p-liste-puce > div{
	color: var(--noire);
}
.nous-pourquoi p,
.nous-pourquoi ul li{
	list-style-type: none;
	color: var(--gris);
	display: block;
}
.nous-pourquoi:hover{
	transform: scale(1.2);
	transition: .5s;
}
.nous-pourquoi:hover p{
/*	display: block;*/
}

#livre-accueil{
	background-color: var(--gris);
	padding: 50px 0 150px 0;
}
#livre-accueil h5{
	margin-bottom: 25px;
}
#livre-accueil h5,
#livre-accueil h5 .ligne{
	font-size: 20px;
	color: var(--bleu-dark);
	font-size: 20px;
}
.image-livre-vente{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.image-livre-vente h5{
	z-index: 900;
	text-shadow: 0 10px 20px var(--noire);
	font-size: 30px;
	padding: 25px 35px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.image-livre-vente h5 p{
	text-shadow: 0 0 15px rgb(0, 0, 0);
	color: var(--blanc);	
	font-size: 30px;
	font-family: var(--tex);
}
.image-livre-vente div{

}
.image-livre-vente img{
	filter: contrast(130%);
}

#temoignage{
	background: linear-gradient(to left, rgba(0, 19, 52, 0.9), rgba(0, 19, 52, 0.9)), url("../image/photos/dotted-world-map-png.webp");
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 50vh;
	padding: 50px 0;
}
#temoignage h5,
#temoignage h5 .ligne{
	font-size: 20px;
	color: var(--blanc);
	text-align: center;
}
.temoignage-description{
	text-align: center;
}
.temoignage-description p{
	color: var(--gris)
;
}
.image-client-temoignage{
	height: 120px; 
	width: 120px; 
	object-fit: cover; 
	border-radius: 50%;
	border: 6px solid rgba(255, 255, 255, .5);
}

#derniere-actualite{
	padding: 50px 0;
}
#derniere-actualite h5,
#derniere-actualite h5 span{
	font-size: 20px;
	color: var(--bleu-dark);
	text-align: center;
}
#derniere-actualite h5{
	margin-bottom: 25px;
}
#derniere-actualite{
	padding: 50px 0;
}
.block-actualite{
	padding: 10px;
}
.block-actualite-image{
	margin-bottom: 30px;
}
.block-actualite-image img{
	width: 100%;
	height: 250px;
	object-fit: cover;
}
.block-actualite-publisher{
	margin: 10px 0;
}
.block-actualite-publisher p,
.block-actualite-publisher p span{
	font-size: var(--size-small);
	color: grey;
}
.block-actualite-titre{
	margin-bottom: 20px;
}
.block-actualite-titre h5{
	color: var(--bleu-ligth);
	font-size: 15px;
}
.block-actualite-suite{
	margin-top: 15px;
}
.block-actualite-suite span{
	font-size: var(--size-small);
	text-transform: uppercase;
}
.block-actualite-suite span,
.block-actualite-suite span i{
	font-size: var(--size-small);
}

#partenaire{
	padding: 50px 0;
}
#partenaire h5{
	margin-bottom: 25px;
}
#partenaire h5,
#partenaire h5 .ligne{
	font-size: 20px;
	color: var(--bleu-dark);
}
.les_partenaires{
	padding: 25px 0;
}
.les_partenaires .swiper-slide{

}
.les_partenaires .swiper-slide img{
	filter: contrast(120%);
	filter: blur(.3px);
	width: 100%;
}


.image-arriere-nous{
	background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../image/photos/formation-fonea-accueil.jpg");	
	position: relative;
	/*filter: contrast(105%);*/
	/*filter: saturate(50%);*/
}
.image-arriere-service{
	/*background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../image/nmaw-prestation.jpg");*/
	background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../image/blog/douane-1-2-aout-2023.jpg");	
	position: relative;
	/*filter: contrast(105%);*/
	/*filter: saturate(50%);*/
}
.image-arriere-formation{
	background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../image/nmaw-formation.jpg");	
	position: relative;
	/*filter: contrast(105%);*/
	/*filter: saturate(50%);*/
}
.image-arriere-contact{
	background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../image/blog/pexels-jopwell-242.jpg");	
	position: relative;
	/*filter: contrast(105%);*/
	/*filter: saturate(50%);*/
}
.image-arriere-actualite{
	background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../image/rapport.jpg");	
	position: relative;
	/*filter: contrast(105%);*/
	/*filter: saturate(50%);*/
}
.image-arriere{
	height: 300px;
	background-repeat: no-repeat;	
	background-size: cover;
	background-origin: content-box;
	background-position: center;
}
.image-arriere-nous,
.image-arriere-formation,
.image-arriere-service,
.image-arriere-contact
{
	background-position: top;
}
.image-arriere{
	color: var(--gris);
}
.image-arriere h5{
	color: var(--gris);
}
.image-arriere a{
	text-decoration: none;
	color: var(--gris);
}
.image-arriere a span{
	color: var(--gris);
}
.contenu-titre-page{
	position: relative;
	color: var(--gris);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.page-nous-centre-vertical > div{
	text-align: justify;
	align-items: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

#competence{
	padding: 0 0 50px 0;
}
.competence-icon{
	text-align: center;
}
.competence-icon span{

}
.competence-icon span i{
	color: var(--bleu-dark);
	font-size: 50px;
}
.nos-competences{
	text-align: center;
}
.nos-competences h5{
	color: var(--bleu-dark);
}

#contact-nous{
	background: var(--gris);
	padding: 50px 0;
}
.margin-bottom-25{
	margin-bottom: 25px;	
}
.contact-nous{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
}
.contact-nous h5{
	font-size: 15px;
	color: var(--bleu-ligth);
}
.contact-nous-icon{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50px;
	text-align: center;
}
.contact-nous-icon span{
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--blanc)
;
	border-radius: 50%;
	margin-right: 20px;
	height: 50px;
	width: 50px;
}
.contact-nous-icon span i{
	color: var(--gris);
	font-size: 20px;
}

#formulaire-contact{
	padding: 50px 0;
}

#formulaire-moteur-recherche{
	padding: 50px 0;
}

#mot-du-dirigeant{
	padding: 50px 0;
}

#actualite{
	padding: 50px 0;
}
#actualite .div-act {
	border-bottom: 2px solid var(--gris);
	margin-bottom: 25px;
}
#actualite .div-act > div {
	
}
#actualite .img-garde{
	margin-bottom: 25px;
}
#actualite .description-content{

}
#actualite-side{
	padding-left: 25px;
	border-left: 1px solid var(--bleu-ligth);
}

.respiration{
	padding: 30px;
}
.titre-article{
	color: var(--bleu-dark);
}
#photo-article{
	margin: 25px 0;
}


@media (max-width:767px){
	.company-name-accueil span{
		font-size: 40px;
	}
}