@import url('https://fonts.googleapis.com/css2?family=Geom:ital,wght@0,300..900;1,300..900&family=Noto+Kufi+Arabic:wght@100..900&display=swap');
 

body {

    background: #303133 url(../images/bg-body.jpg) top center no-repeat fixed;

    font-size: 19px;

    line-height: 22px;

    color:#fff;

    position: relative;
font-family: "Geom", sans-serif;
    background-size: cover;

}
img {
    max-width: 100%;
    height: auto;
}
body:after{

	content: '';

	background: rgba(48, 49, 51, .83);

	position: absolute;

	left: 0;

	top: 0;

	right: 0;

	bottom: 0;

	z-index: -1;

}

article {

    padding: 0 0 100px;

    position: relative;

}

article:before, article:after{

	content: '';

	background: rgba(48, 49, 51, .5);

	position: absolute;

	right: 0;

	width:50%;

	z-index: -1;

}

article:before{top:65px;height:180px;}



article:after{bottom:60px;height:160px;}



a {

    color: #fff;

    text-decoration: underline;

    transition: all .4s;

}

a:active, a:hover, a:focus {

    color: #ef463f;

    text-decoration: none;

}



strong { font-weight: 600;color: #1b1f29;}

.red{color: #ef463f; }

.image-right {

    float: right;

    margin: 0 0 10px 15px;

	padding:2px;

	border:1px solid rgba(0,0,0,0.2);

}

.image-left {

    float: left;

    margin: 0 15px 10px 0;

	padding:2px;

	border:1px solid rgba(0,0,0,0.2);

}

 

h1, h2, h3, h4, h5, h6,

.h1, .h2, .h3, .h4, .h5, .h6 {

    line-height: 1.35em;

    font-weight: 500;

}

h1, h2, h3, h4, h5, h6 {

    color: #ffffff; 

}

h1, .h1{

    color: #ef463f;

    font-size: 40px;

     margin: 50px auto 15px;

    text-transform: uppercase;

    text-align: center;

     

}

h2, .h2{
    font-size: 50px;line-height:1.2;
    margin: 20px auto 10px;

}

h2 span {

    display: block;

    font-size: 16px;

    line-height: 16px;
 

}

h3, .h3{

    font-size: 30px;

}

h4, .h4{

    font-size: 25px;

}

h5{

    font-size: 30px;

   

}



.soon {

    padding: 90px 0px 50px;
 

    text-transform: uppercase;

    font-size: 70px;

    line-height: 70px;

    }

.soon span {
 

    letter-spacing: 4px;

    font-size: 94px;

    }



section.bloc.projet {

    padding: 97px 0 0 50px;

    font-size: 16px;
 

    text-align: left;

}



section.bloc.projet .social {

    text-align: right;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    line-height: 19px;

}



section.bloc.projet .social a {margin-left: 5px;display: table;font-size: 0;text-decoration:none;}

section.bloc.projet .social a:first-child {margin-left: 20px;}

section.bloc.projet .social a.facebook:after, section.bloc.projet .social a.twitter:after,section.bloc.projet .social a.instagram:after{font-family: 'FontAwesome';font-size: 18px;color:#fff;text-decoration:none;line-height: 30px;}

section.bloc.projet .social a.facebook:after{ content:'\f09a'; }

section.bloc.projet .social a.twitter:after{ content:'\f099';}

section.bloc.projet .social a.instagram:after{ content:'\f16d'; }





section.bloc.coordonnes {

    margin: 150px 0 150px;

    text-align: left;

    padding-left: 50px;

}

section.bloc.coordonnes .adresse, section.bloc.coordonnes .tel, section.bloc.coordonnes .email {display: table;margin: 0;position: relative;padding: 5px 0 5px 24px;font-size: 17px;font-weight: normal;max-width: fit-content;}





section.bloc.coordonnes .adresse:before, section.bloc.coordonnes .tel:before, section.bloc.coordonnes .email:before{font-family: 'FontAwesome';font-size: 16px;color:#fff;text-decoration:none;line-height: normal;left:0;position:absolute;top

:0;bottom:0;margin:auto;display: flex;align-items: center;}

section.bloc.coordonnes .adresse:before{ content:'\f041'; }

section.bloc.coordonnes .tel:before{ content:'\f095';}

section.bloc.coordonnes .email:before{ content:'\f0e0'; }



section.bloc.construction {

    padding: 0 0 0 50px;

    font-size: 27px;

 

}

section.bloc.construction span{

    display: table;

    font-size: 74px;

    line-height: 56px;

    color: #f75d56;

}

section.alpha {

    position: relative;

    width: fit-content;

    margin: -85px 0 0;

}

section.alpha a:last-child {
 

    color: #c8c8c8;

    text-decoration: none;

    position: relative;

    display: table;

    font-size:24px;

    letter-spacing: 3px;

    margin: 5px 0 0;

}

section.alpha a:last-child:hover {

    color: #f75d56;

    }



/********************************************************** RESPONSIVE ************************************************************************************/





@media only screen and (max-width :1279px) {



.row {

    margin-right: 0px;

    margin-left: 0;

}

}

@media only screen and (max-width : 991px) {

section.bloc.coordonnes {

    margin: 80px 0;

}	

section.bloc.construction span {

    

    font-size: 60px;

}



}

@media only screen and (max-width : 799px) {





.soon {

    display: none;

}

article:before, article:after {

    width: 90%;

}

section.bloc.projet {

        margin: 62px auto 0;

    text-align: center;

    padding: 20px 0;

    background: rgba(48, 49, 51, .5);

}

section.bloc.coordonnes {

    margin: 50px auto !important;

}

section.bloc.coordonnes .adresse, section.bloc.coordonnes .tel, section.bloc.coordonnes .email {

    

    margin: auto;

    text-align: center;

    padding: 25px 0 5px;

}

section.bloc.coordonnes .adresse:before, section.bloc.coordonnes .tel:before, section.bloc.coordonnes .email:before {

    bottom: inherit;

    height: 30px;

    text-align: center;

    margin: auto;

    left: 50%;

    transform: translateX(-50%);

    

}

section.bloc.projet .social {

    text-align: center;

    justify-content: center;

}

section.bloc.coordonnes {

    max-width: fit-content;

    margin: 80px auto;

    padding: 0;

}

section.bloc.construction {

    padding: 0;

    text-align: center;

}

section.bloc.construction span {

    font-size: 60px;

    margin: auto;

}

section.alpha {

    position: relative;

    width: 100%;

    margin: 80px auto 0;

    background: rgba(48, 49, 51, .5);

    text-align: center;

    padding: 30px 20px;

}

section.alpha a:last-child {

    margin: 5px auto 0;

}

section.alpha img {

    margin: auto;

}

article {

    padding: 0 0 50px;

}

article:before, article:after  {

    content:none

}

}



@media only screen and (max-width : 639px) {

	

	body {    background: #3031338a;

	}

}

@media only screen and (max-width : 479px) {

section.alpha a:last-child {

    font-size: 22px;

    letter-spacing: 2px;

}

}



@media only screen and (max-width : 413px) {

	

section.bloc.construction span {

    font-size: 40px;

    

}

section.alpha a:last-child {font-size: 16px;letter-spacing: 1px;}



}





@media (min-width: 768px){

.container {

    width: 100%;

}  

}

@media (min-width: 1366px){

.container {

    width: 1070px;

}  

}