@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&family=Pacifico&display=swap');
:root{
    --main-color: #1b9bff;

    --color-text: #5f5f5f;

    --white: white;
    --white-1: rgba(255, 255, 255, 0.1);
    --white-2: rgba(255, 255, 255, 0.2);
    --white-3: rgba(255, 255, 255, 0.3);
    --white-4: rgba(255, 255, 255, 0.4);
    --white-5: rgba(255, 255, 255, 0.5);
    --white-6: rgba(255, 255, 255, 0.6);
    --white-7: rgba(255, 255, 255, 0.7);
    --white-8: rgba(255, 255, 255, 0.8);
    --white-9: rgba(255, 255, 255, 0.9);

    --dark-1: rgba(0, 0, 0, 0.1);
    --dark-2: rgba(0, 0, 0, 0.2);
    --dark-3: rgba(0, 0, 0, 0.3);
    --dark-4: rgba(0, 0, 0, 0.4);
    --dark-5: rgba(0, 0, 0, 0.5);
    --dark-6: rgba(0, 0, 0, 0.6);
    --dark-7: rgba(0, 0, 0, 0.7);
    --dark-8: rgba(0, 0, 0, 0.8);
    --dark-9: rgba(0, 0, 0, 0.9);


    --bg-lien: rgba(31, 30, 30, 0.5);

    --border: 1px solid #ebebeb;

    --main-border: #ffeded;
    --border-color: #e9e9e9;
    --bottom: #dee2e6;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}
html{
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
}
.container{
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 15px;
}

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a{
    text-decoration: none!important;
}

.max-width{
    max-width: 90%;
    margin: 0 auto;
}
.max-w80{
    max-width: 80%;
    margin: 0 auto;
}

#header{
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100vw;
}
#header .header{
    height: 10vh;
    transition: .5s ease background-color;
}
#header .nav-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}
.brand h1{
    color: white;
    font-size: 2.5rem;
}
.brand h1 span{
    color: #1b9bff;
}
.brand h1 span span{
    color: rgb(255, 142, 37);
}
.brand p{
    color: white;
    font-size: 1.4rem;
}
#header .nav-list ul{
    list-style: none;
    position: absolute;
    background: rgb(31, 30, 30);
    width: 100vw;
    height: 100vh;
    left: 100%;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    overflow-x: hidden;
    transition: .5s ease left;
    margin-bottom: 0!important;
    margin: 0!important;
    padding: 0!important;
}
#header .nav-list ul.active{
    left: 0;
}
#header .nav-list ul li a{
    font-size: 2rem;
    font-weight: 500;
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    margin-left: 5px;
    transition: .5s;
}
#header .nav-list ul li a.active,
#header .nav-list ul li a:hover{
    display: block;
    background: var(--main-color);
    transition: .5s;
    border-radius: 5px;
    color: white;
}
#header .nav-list ul a::after{
    content: attr(data-after);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: rgba(240, 248, 225, 0.021);
    transition: .5s;
    font-size: 10rem;
    letter-spacing: 50px;
    z-index: -1;
}
#header .nav-list ul li:hover a::after{
    transform: translate(-50%, -50%) scale(1);
    letter-spacing: initial;
}
#header .nav-list ul li:hover a{
    color: white;
}

#header .hamburger{
    height: 45px;
    width: 45px;
    display: inline-block;
    border: 3px solid white;
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
    transform: scale(.8);
}
#header .hamburger:after{
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    border-radius: 10px;
    border: 3px solid white;
    animation: hamburger_puls 1s ease infinite;
}
@keyframes hamburger_puls{
    0%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(1.3);
    }
}
#header .hamburger .bar{
    height: 2px;
    width: 30px;
    position: relative;
    background: white;
    z-index: -1;
}
#header .hamburger .bar::after,
#header .hamburger .bar::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    background-color: white;
    transition: .3s;
    transition-property: top, bottom;
}
#header .hamburger .bar::after{
    top: 8px;
}
#header .hamburger .bar::before{
    bottom: 8px;
}
#header .hamburger.active .bar::after{
    top: 0;
}
#header .hamburger.active .bar::before{
    bottom: 0;
}

.header .rightOption{
    display: flex;
    align-items: center;
}

.header .rightOption .modal-btn a{
    display: block;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    /* background: var(--white-3); */
    font-size: 1.5rem;
    color: var(--white);
    text-align: center;
    text-transform: uppercase;
}
.header .rightOption ul{
    display: flex;
    align-items: center;
    margin-bottom: 0!important;
    margin: 0!important;
    padding: 0!important;
}
.header .rightOption ul li{
    list-style: none;
}
.header .rightOption ul li a{
    display: inline-block;
    height: 20px;
    width: 30px;
    text-align: center;
    line-height: 20px;
    border-radius: 3px;
    font-size: 1.5rem;
    color: white;
    border: none;
}
.header .rightOption ul li a.active{
    background: var(--white-3);
}
.header .rightOption select option{
    color: #222222;
}

/* MODAL  START*/

.modal-btn{
    cursor: pointer;
    margin-right: 10px;
}
.modal-bg{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition:0.5s;
    z-index: 999;
}
.bg-active{
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
}
.modal{
    position: relative;
    background-color: #ffffff;
    width: 70%;
    height: auto;
    padding:30px;
    overflow: auto;
    transition:0.5s;
}
.modal-close{
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    line-height: 45px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
    background: var(--main-color);
}
.modal-close i{
    font-size: 2rem;
    text-align: center;
    color: var(--white);
}

.modal-bg .title{
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.modal-bg .title h1{
    color: var(--main-color-1);
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}
.modal-bg .formulaire{
    width: 100%;
    margin-top: 20px;
}
.modal-bg .formulaire .fields{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.modal-bg .formulaire .fields .name,
.modal-bg .formulaire .fields .prenom{
    width: 100%;
}
.modal-bg .formulaire .fields .name{
    margin-right: 8px;
}
.modal-bg .formulaire .fields .prenom{
    margin-left: 8px;
}
.modal-bg .formulaire .fields .name input,
.modal-bg .formulaire .fields .prenom input{
    width: 100%;
    height: 40px;
    border: 1px solid var(--dark-200);
    border-radius: 5px;
    padding-left: 10px;
}


.modal-bg .formulaire .field{
    width: 100%;
}
.modal-bg .formulaire .field select{
    width: 100%;
    height: 40px;
    border: 1px solid var(--dark-200);
    border-radius: 5px;
    margin-bottom: 20px;
}
.modal-bg .formulaire .field select option{
    font-size: 16px;
    color: var(--dark-800);
    padding-bottom: 10px;
}
.modal-bg .formulaire .field .pos{
    height: 80px;
    border: 1px solid black;
    width: 100%;
}
.modal-bg .formulaire .field textarea{
    width: 100%;
    border: 1px solid var(--dark-200);
    padding: 10px;
    resize: vertical;
    margin-bottom: 20px;
}
.modal-bg .formulaire .button button{
    width: 100%;
    height: 40px;
    background: var(--main-color);
    font-size: 20px;
    font-weight: 500;
    color: var(--white);
    border-radius: 5px;
    border: transparent;
    cursor: pointer;
}
.modal-bg .formulaire .button button:hover{
    background: #af4c31;
}

.succes-txt{
    display:none;
    padding: 20px;
    width:100%;
    background: rgb(142, 248, 142, 0.5);
    color: green;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 20px;
}
.error-txt{
    display:none;
    padding: 20px;
    width: 100%;
    border-radius: 5px;
    background: rgb(250, 148, 148, 0.5);
    color: red;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 20px;
}

/*****************************
        SEARCH START
*****************************/

#searchZone{
    padding-top: 50px;
    padding-bottom: 50px;
    background: #f7f7f7;
}
.searchZone title h1{
    font-size: 2rem;
    font-weight: 500;
    padding-bottom: 40px;
}
.searchZone .searchWrite{
    width: 100%;
    margin-bottom: 20px;
    margin-top: 40px;
    padding: 10px;
}
.searchZone .searchWrite input{
    width: 100%;
    height: 40px;
    border: 1px solid var(--bottom);
    padding: 10px;
}
.searchZone form .detail-recherche-header{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding: 10px;
}
.searchZone form .detail-recherche-header select,
.searchZone form .detail-recherche-header input{
    border: 1px solid var(--bottom);
    height: 40px;
    outline: none;
}
.searchZone form .detail-recherche-header input{
    padding: 10px;
}
.searchZone form .detail-recherche-header button{
    background: var(--main-color);
    color: var(--white);
    border: 1px solid var(--main-color);
    text-transform: uppercase;
    cursor: pointer;
}


/******* END SEARCH *********/


/* END MODAL */


/* FIN HEADER NAV */

/* CARROUSEL */

.home{
	height: 100vh;
	overflow: hidden;
    position: relative;
    object-fit: cover;
}
.home .slide{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    object-fit: cover;
	z-index: 1;
	display: none;
	padding: 0 15px;
	animation: slide 2s ease;
}
.home .slide.active{
	display: flex;
}
@keyframes slide{
	0%{
		transform: scale(1.1);
	}
	100%{
		transform: scale(1);
	}
}
.home .container{
	flex-grow: 1;
}
.home .caption{
    max-width: 800px;
    text-align: center;
    margin: auto;
}
.home .caption h1{
	font-size: 3rem;
    color: #ececec;
    font-family: 'Pacifico', cursive;
	margin-bottom: 15px;
}
.home .caption h2{
	font-size: 4.5rem;
    color: #ffffff;
	margin: 0;
    text-transform: uppercase;
    text-align: center;
}
.home .slide.active .caption h1{
	opacity: 0;
	animation: captionText .5s ease forwards;
	animation-delay: 1s;
}
.home .slide.active .caption h2{
	opacity: 0;
	animation: captionText .5s ease forwards;
	animation-delay: 1.4s;
}
.home .caption p{
	font-size: 3.5rem;
	margin-bottom: 15px;
    color: #ececec;
    text-transform: uppercase;
    font-family: sans-serif;
}
.home .slide.active .caption p{
	opacity: 0;
	animation: captionText .5s ease forwards;
	animation-delay: 1.2s;
}
.home .caption .lien{
    margin-top: 2rem;
}
.home .caption a{
	display: inline-block;
    padding: 10px 30px;
    margin-bottom: 10px;
	background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    border: 1px solid white;
    border-radius: 30px;
    font-size: 1.8rem;
	color: #ffffff;
}
.home .caption a:nth-child(2){
    margin-left: 10px;
}
.home .slide.active .caption a{
	opacity: 0;
	animation: captionText .5s ease forwards;
	animation-delay: 1.4s;
}
@keyframes captionText{
	0%{
		opacity: 0;transform: translateX(-100px);
	}
	100%{
		opacity: 1;transform: translateX(0px);
	}
}
.home .controls .prev,
.home .controls .next{
	position: absolute;
	z-index: 2;
    top: 50%;
	cursor: pointer;
}
.home .controls .prev{
	left: 20px;
	transition: .5s;
}
.home .controls .next{
	right: 20px;
	transition: .5s;
}
.home .indicator{
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 1;
	transform: translateX(-50%);
	cursor: pointer;
}
.home .indicator div{
	display: inline-block;
	width: 10px;
	height: 10px;
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 50%;
	text-align: center;
	line-height: 25px;
	margin: 0 3px;
	transition: all 2s;
}
.home .indicator div.active{
	background: #ffffff;
	transition: all 2s;
}
.next .fa, .prev .fa{
    font-size: 6rem;
    margin-top: -40px;
    transition: .5s;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s;
}
.next .fa:hover, .prev .fa:hover{
    color: #ffffff;
}


/* FIN DE LA CARROUSEL */


/* ============ SERVICE ==========*/
#service{
    margin: 0;
    overflow: hidden;
}
.service__div{
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 2rem;
    align-items: center;
}
.service__div .service__left{
    padding-top: 100px;
    padding-bottom: 100px;
}
.service__div .service__left h1{
    font-size: 5rem;
    color: var(--main-color);
    padding-bottom: 10px;
}
.service__div .service__left p{
    font-size: 1.6rem;
    color: var(--color-text);
}
.service__div .service__left .service__left__group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 20px;
}
.service__one{
    display: flex;
    border-radius: 5px;
    border: var(--border);
    padding: 20px;
}
.service__one:nth-child(4){
    height: 100%;
}
.serv__text{
    width: calc(100% - 100px);
    padding-left: 20px;
}
.serv__text h1{
    font-size: 2.5rem!important;
    font-weight: 400;
    color: var(--color-text)!important;
}
.serv__text p{
    font-size: 1.5rem;
    font-weight: 300;
    padding-top: 15px;
    padding-bottom: 10px;
    line-height: 25px;
    text-align: justify;
    color: var(--color-text);
}
.serv__text a{
    color: var(--main-color);
    padding: 5px;
    padding-left: 0;
}
.serv__text a i{
    font-size: 16px;
}
.icon{
    width: 100px!important;
    height: 100px;
}
.icon img{
    opacity: 0.4;
}
#service .faone::before{
    content: "\f1b3";
    font-family: "FontAwesome";
    font-style: normal;
    font-size: 8rem;
}

.service__div .service__right{
    text-align: center;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
}

#affichage_contact{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center;
}
#affichage_contact h2{
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
    padding-top: 20px;
    padding-bottom: 20px;
}
#affichage_contact_text{
    width: 250px;
    height: auto;
    text-align: left;
    margin: 0 auto;
}
#affichage_contact form{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#affichage_contact input,
#affichage_contact textarea{
    margin-bottom: 20px;
}
#affichage_contact input[type="text"], #affichage_contact input[type="email"], #affichage_contact input[type="tel"]{
    background: none;
    border: none;
    -webkit-border: none;
    -o-border: none;
    -moz-border: none;
    border-bottom:1px solid #dbdbdb;
    width:100%;
    height: 50px;
    transition: .5s;
    color: #f8f8f8;
    -webkit-color: #f8f8f8;
    font-size: 18px;
}

#affichage_contact textarea[type="text"] {
    background: none;
    border: none;
    border-bottom:1px solid #dbdbdb;
    width:100%;
    height: 130px;
    resize: vertical;
    color: #f8f8f8;
    transition: .5s;
    font-size: 18px;
}
#affichage_contact input[type="submit"] {
    background: var(--main-color);
    border-radius: 5px;
    border: 1px solid var(--main-color);
    padding: 10px 15px;
    transition: .5s;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    text-transform: uppercase;
}
#affichage_contact input[type="submit"]:hover{
    transition: .5s;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    background: none;
}

/************** SECTION PROJECTS *************/

#projects{
    background: #edf3f7;
}
.projects .section-title{
    font-size: 4rem;
    font-weight: 500;
    color: black;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
}
#projects .projects{
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
}

#projects .projects-header h1{
    margin-bottom: 50px;
}
#projects .all-projects{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#projects .project-item{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 80%;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 10px;
}

#projects .project-info{
    padding: 30px;
    flex-basis: 50%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(60deg, #29323c 0%, #485563 100%);
}
#projects .project-info h1{
    font-size: 4rem;
    font-weight: 500;
    color: white;
}
#projects .project-info h2{
    font-size: 1.8rem;
    font-weight: 500;
    margin-top: 10px;
    color: white;
    padding-bottom: 10px;
}
#projects .project-info p{
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
    font-weight: 100;
    line-height: 22px;
    color: rgb(243, 243, 243);
    text-align: justify;
    padding-bottom: 20px;
}
#projects .project-img{
    width: 100%;
    height: 550px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
    text-align: center;
    z-index: 1;
    overflow: hidden;
    transition: all .5s ease;
}
#projects .project-img::after{
    content: '';
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    opacity: .7;
    z-index: -1;
}
#projects .project-img img{
    z-index: -2;
    transition: .5s ease transform;
}
#projects .project-item:hover .project-img img{
    overflow: hidden;
    transform: scale(1.1);
}
#projects a{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 20px;
    background: #1b9bff;
    border: 1px solid #1b9bff;
    color: #fdfafa;
    font-size: 1.4rem;
    transition: .5s;
}
#projects a:hover{
    background: none;
    color: #1b9bff;
    transition: .5s;
}

/************** FIN PROJECTS *****************/


/********** LES ANNONCES ************/

#lesAnnonces{
    padding-top: 50px;
    padding-bottom: 50px;
    background: #f3f3f3;
}
.lesAnnonces .title{
    text-align: center;
}
.lesAnnonces .title h1{
    font-size: 3.5rem;
    color: var(--main-color-1);
    text-transform: uppercase;
}
.lesAnnonces .title h2{
    font-size: 4.5rem;
    color: var(--main-color);
}
.lesAnnonces .title p{
    width: 380px;
    font-size: 16px;
    color: #747474;
    margin: 10px auto;
}

.lesAnnonces .block{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 40px;
}
.lesAnnonces .block .item{
    width: 340px;
    border-radius: 20px;
    background: white;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0px 10px 16px rgba(133, 133, 133, 0.2);
    transition: all 0.2s linear;
}
.lesAnnonces .block .item:hover{
    box-shadow: 0px 10px 16px rgba(133, 133, 133, 0.2);
    /* box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px; */
}
.lesAnnonces .block .item .img{
    position: relative;
    border-radius: 20px;
    height: 230px;
    overflow: hidden;
}

.lesAnnonces .block .item .img img{
    width: 100%!important;
    height: 100%!important;
}
.lesAnnonces .block .item .img .typeAnnonce{
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px 20px;
    border-radius: 15px;
    background: rgba(255,255,255,0.8);
}
.lesAnnonces .block .item .img .typeAnnonce p{
    color: var(--main-color-1);
}
.lesAnnonces .block .item .img .prix{
    position: absolute;
    width: 100%;
    bottom: 0px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.lesAnnonces .block .item .img .prix h1{
    color: white;
    padding: 10px;
}
.lesAnnonces .block .item .contenu{
    text-align: left;
}
.lesAnnonces .block .item .contenu .title{
    margin-top: 10px;
}
.lesAnnonces .block .item .contenu .title h1{
    text-align: left!important;
    font-size: 18px;
    font-weight: 600;
    color: #3c3c3c;
    font-family: 'EB Garamond', serif!important;
    text-transform: none;
}
.lesAnnonces .block .item .contenu .title p{
    text-align: left;
    color: #747474;
    font-size: 15px;
}
.lesAnnonces .block .item .contenu .anotherItem{
    display: flex;
}
.lesAnnonces .block .item .contenu .anotherItem p{
    color: #747474;
}
.lesAnnonces .block .item .contenu .anotherItem p:nth-child(2){
    margin-left: 10px;
}
.lesAnnonces .block .item .contenu .lien{
    margin-top: 15px;
}
.lesAnnonces .block .item .contenu .lien a{
    font-size: 1rem;
    color: var(--main-color-1);
    font-weight: 600;
}

/*********** END ANNONCE **********/


/******** SECTION DECOUVERT DE NOS BIENS START*********/

#decouvert-bien{
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    padding-bottom: 100px;
    padding-top: 100px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
#decouvert-bien::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #00284B;
    opacity: 0.5;
}
.decouvert-bien{
    position: relative;
    width: 50%;
    margin: auto;
    text-align: center;
    z-index: 1;
}
.decouvert-bien h1{
    color: var(--main-color);
    font-size: 2rem;
    text-align: center;
    padding-bottom: 30px;
    font-weight: 500;
}
.decouvert-bien h2{
    font-size: 4.5rem;
    color: white;
}
.decouvert-bien .liens-div{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.decouvert-bien .liens-div a{
    display: inline-block;
    font-size: 2rem;
    font-weight: 300;
    color: var(--main-color);
    line-height: 50px;
    width: 100%;
    border: 3px solid var(--main-color);
    background: var(--bg-lien);
    text-align: center;
}
.decouvert-bien .liens-div .display-one{
    display: inline-block;
    width: 350px;
    margin-right: 10px;
}
.decouvert-bien .liens-div .display-one li{
    list-style: none;
}
.decouvert-bien .liens-div .display-one li a{

}
/*********** SECTION DECOUVERT DE NOS BIENS END *****/



/***************** DECORATION INTERIEURE ****************/

#decor__interieur{
    margin: 0;
    padding-top: 70px;
    padding-bottom: 50px;
    background: #f7f7f7;
    text-align: center;
}
#decor__interieur .decor__title h1{
    font-size: 4rem;
    letter-spacing: .2rem;
    padding-bottom: 15px;
    color: #071721;
    text-transform: uppercase;
}
.line__under{
    width: 120px;
    height: 5px;
    background: #1b9bff;
    margin: auto;
    margin-bottom: 70px;
}
.decor__grand{
    display: grid;
    grid-template-columns: 45% 25% 25%;
    gap: 2rem;
    justify-content: center;
}

.decor__first__block .decor__img{
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}
.decor__first__block .decor__img img{
    cursor: pointer;
    transition: transform 0.8s;
    object-fit: cover;
}
.decor__first__block .decor__img:hover img{
    transform: scale(1.2);
}
.decor__first__block .decor__text__container{
    position: absolute;
    height: 400px;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.decor__first__block .decor__text__container__one{
    width: 70%;
    height: 70%;
    background: rgba(34, 188, 239, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    color: #f7f7f7;
    padding: 20px;
}
.decor__first__block .decor__text__container__one h1{
    font-size: 3rem;
    font-weight: 300;
    text-transform: uppercase;
}
.decor__first__block .decor__text__container__one p{
    font-size: 2rem;
}
.decor__first__block .decor__text__container__one .decor__etoile .fa{
    font-size: 1.5rem;
    color: #ecf022;
}
.decor__first__block .decor__text__container__one .decor__etoile{
    padding-top: 10px;
    padding-bottom: 10px;
}
.decor__first__block .decor__text__container__one a{
    font-size: 1.5rem;
    background: var(--main-color);
    border: 1px solid var(--main-color);
    padding: 9px 20px;
    transition: all 0.4s;
    color: white;
    border-radius: 3px;
}
.decor__first__block .decor__text__container__one a:hover{
    background: transparent;
    border: 1px solid var(--main-color);
    color: var(--main-color);
}

/************ FIN DECORATION INTERIEURE ***************/


/******** CHIFFRE IMMO **********/

#chiffreImmo{
    padding-bottom: 150px;
}

#chiffreImmo .image{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}
#chiffreImmo .image h2{
    font-size: 5rem;
    color: #071721;
}
#chiffreImmo .image h2 span{
    color: var(--main-color);
}
#chiffreImmo h1{
    font-size: 3.5rem;
    text-align: center;
    color: var(--main-color);
}

/********** SECTION CONTACT ***********/

#contactSect{
    padding-top: 300px;
    padding-bottom: 300px;
    position: relative;
    border-top: 5px solid var(--main-color);
    position: relative;
}

#contactSect::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #00284B;
    opacity: 0.5;
}

#contactSect .bannerContact{
    position: absolute;
    left: 0;
    top: -120px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#contactSect .bannerContact .block{
    background: #071721;
    border: 5px solid var(--main-color);
    width: 80%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 50px;
    padding-bottom: 50px;
}

#contactSect .bannerContact .block .item{
    border-right: 1px solid var(--white-5);
    padding-left: 70px;
    padding-right: 70px;
}
#contactSect .bannerContact .block .item:last-child{
    border-right: none;
}
#contactSect .bannerContact .block h1{
    font-size: 4.5rem;
    color: var(--main-color);
    text-align: center;
    padding-bottom: 20px;
}

#contactSect .bannerContact .block p{
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    color: white;
    text-align: center;
}

.contactSect{
    position: relative;
    z-index: 1;
}

.contactSect .title{
    width: 50%;
    margin: 0 auto;
}

.contactSect .title h1{
    font-size: 4.5rem;
    color: white;
    text-align: justify;
}

.contactSect .title .dis{
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 2rem;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.contactSect .title .dis .line{
    height: 1px;
    width: 100%;
    background-color: white;
}

.contactSect .title h2{
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
}

.contactSect .title .lien a{
    display: block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    text-align: center;
    margin: 20px auto;
    border: 3px solid var(--main-color);
    background: var(--bg-lien);
    color: var(--main-color);
    font-size: 18px;
}


/********* END SECTION CONTACT *********/

/**************** FOOTER ***************/

#container_footer{
    background: #091b27;
    width: 100%;
    height: auto;
    margin-bottom: 0;
    padding-top: 150px;
    text-align: center;
    position: relative;
    border-top: 5px solid var(--main-color);
}
#container_footer .banner{
    position: absolute;
    left: 0;
    top: -100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#container_footer .banner .item{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: center;
    width: 80%;
    background: #071721;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;
    /* border-radius: 10px; */
    /* box-shadow: 0px 10px 16px rgba(133, 133, 133, 0.2); */
    border: 5px solid var(--main-color);
}
#container_footer .banner .item .left{
    text-align: left;
}
#container_footer .banner .item h1{
    font-size: 4.5rem;
    color: var(--main-color);
}
#container_footer .banner .item p{
    color: white;
    font-size: 18px;
}
#container_footer .banner .item .right form{
    display: flex;
}
#container_footer .banner .item form input{
    height: 45px;
    width: 65%;
    background-color: white;
    border: none;
    border-radius: 5px 0px 0px 5px;
    outline: none;
    font-size: 16px;
    padding-left: 10px;
}
#container_footer .banner .item form button{
    height: 45px;
    width: 35%;
    font-size: 18px;
    border: none;
    background-color: var(--main-color);
    color: white;
    border-radius: 0px 5px 5px 0px;
}
.container_footer_block{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}
.container_footer_item h1{
    color: #ffffff;
    font-weight: 700;
    font-size: 3rem;
    text-align: left;
    padding-bottom: 25px;
}
.container_footer_item .line{
    width: 50px;
    height: 5px;
    border-radius: 5px;
    background-color: var(--main-color);
    margin-bottom: 35px;
}
.container_footer_item .text_lien_footer{
    margin-top: 20px;
    text-align: left;
}
.container_footer_item .text_lien_footer a{
    padding: 10px 25px;
    background: var(--main-color);
    border: 1px solid var(--main-color);
    font-size: 1.5rem;
    color: white;
    transition: all 0.3s;
}
.container_footer_item .text_lien_footer a:hover{
    background: transparent;
    color: var(--main-color);
}
.container_footer_item:nth-child(2) h1{
    text-align: center;
}
.container_footer_item:nth-child(2) .line{
    margin: auto;
    margin-bottom: 35px;
}
.container_footer_item p{
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--white-7);
    text-align: justify;
    padding-bottom: 10px;
}
.container_footer_item ul li{
    list-style: none;
    padding-bottom: 15px;
}
.container_footer_item ul li a{
    color: rgb(248, 248, 248);
    font-size: 1.5rem;
    transition: all 0.3s;
}
.container_footer_item ul li a:hover{
    color: var(--main-color);
}


#bouton_apropos_footer_five .fa{
    text-align: center;
    font-size: 1.6rem;
    color: #ffffff;
    line-height: 30px;
}
.container_footer_item #bottom_div_left{
    width: 100%;
    padding-bottom: 20px;
}
.container_footer_item .image_box{
    display: inline-block;
    height: 60px;
    width: 18%;
    vertical-align: top;
    text-align: left;
}
.container_footer_item .text_box p{
    font-size: 1.5rem;
    color: var(--white-7);
    padding: 0;
    margin-top: 10px;
}
.image_box .fa{
    color: #ffffff;
    font-size: 2.8rem;
    text-align: left;
}
.text_box{
    display: inline-block;
    height: auto;
    width: 76%;
    vertical-align: top;
}
.text_box h5{
    font-weight: 400;
    text-align: left;
    font-size: 18px;
    color: #ffffff;
}

.container_footer_item .apropos_footer .bouton_apropos_footer{
    margin-top: 20px;
}
.container_footer_item .apropos_footer .bouton_apropos_footer a{
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    color: white;
    background: var(--main-color);
    font-size: 1.5rem;
    border-radius: 3px;
}

.footer_text{
    background: #071721;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    color: #f0f0f0;
    font-size: 16px;
}
.footer_text p{
    color: white;
    font-size: 1.6rem;
}
.footer_text p a{
    color: var(--main-color);
}
.footer_text p i{
    color: red;
}

/**************** FIN DU FOOTER *****************/



/*========== SCROLL UP ==========*/
.scrollup{
    position: fixed;
    right: 4rem;
    /* bottom: -20%;    */
    background-color: var(--main-color);
    padding: .5rem;
    display: flex;
    z-index: 999;
    transition: .5s;
    border-radius: 3px;
}

.scrollup:hover{
    background-color: #1991ec;
    opacity: 1;
  }

#scroll-up .fa{
    color: white;
    font-size: 1.8rem;
    padding: 7px;
  }

  /* Show scroll */
.show-scroll {
    bottom: 10rem;
  }

/* ====== FIN SCROLL ======*/



/* =============== LES PAGES ============= */

/*********** BANNIERE ***********/

#barniere .barniere{
    background: #071721;
    background-size: cover;
    background-position: center;
    object-fit: cover;
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#barniere .barniere-tete h1{
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #ffffff;
}

#barniere .barniere .lien{
    display: flex;
    margin-top: 0px;
}

#barniere .barniere .lien a{
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 600;
}

#barniere .barniere .lien a.active{
    color: var(--main-color);
}
#barniere .barniere .lien p{
    padding-left: 5px;
    padding-right: 5px;
    color: var(--white);
    font-size: 1.8rem;
}

/*********** FIN BANNIERE *********/



/*********** BANNIERE IMG ***********/

#barniereImg .barniereImg{
    background-size: cover;
    background-position: center;
    object-fit: cover;
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#barniereImg .barniere-tete h1{
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #ffffff;
}

#barniereImg .barniereImg .lien{
    display: flex;
    align-items: center;
    margin-top: 20px;
}

#barniereImg .barniereImg .lien a{
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 400;
}

#barniereImg .barniereImg .lien i{
    font-size: 1rem;
    padding-left: 5px;
    padding-right: 5px;
}

#barniereImg .barniereImg .lien a.active{
    color: var(--main-color);
}
#barniereImg .barniereImg .lien p{
    padding-left: 5px;
    padding-right: 5px;
    color: var(--white);
    font-size: 1.8rem;
}

/*********** FIN BANNIERE IMG *********/





/************ PAGE ANNONCE ************/

.vente-card{
    display: grid;
    grid-template-columns: 70% 1fr;
    gap: 2rem;
    padding-top: 50px;
    padding-bottom: 50px;
}
.vente-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;overflow: hidden;
}

.vente-card-left .vente-card-block{
    display: flex;
    width: 100%;
    height: auto;
    transition: 0.5s;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    margin-bottom: 15px;
    overflow: hidden!important;
}
.vente-card-left .vente-card-block .vente-card-img{
    width: 40%;
    height: 300px;
    overflow: hidden!important;
}
.vente-card-left .vente-card-block .vente-card-img img{
    transition: all 0.3s;
}
.vente-card-block:hover .vente-card-img img{
    transform: scale(1.1);
}
.vente-card-text{
    position: relative;
    width: 60%;
    padding: 10px;
}
.vente-card-text h1{
    font-size: 2.5rem;
    font-weight: 400;
    text-align: justify;
    color: black;
}
.vente-card-text p{
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 1.6rem;
    line-height: 2rem;
    font-weight: 300;
    text-align: justify;
}
.vente-card-autre{
    display: flex;
    width: 100%;
}
.vente-card-autre .vente-card-prix{
    width: 25%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.vente-card-autre .vente-card-prix span{
    font-size: 1.5rem;
    padding-left: 10px;
    color: var(--color-text);
}
.vente-card-autre .vente-card-prix i{
    font-size: 1.5rem;
    color: var(--color-text);
}
.vente-card-text .prix h1{
    color: var(--main-color);
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.vente-card-text .lien a{
    display: block;
    height: 40px;
    width: 200px;
    line-height: 40px;
    border-radius: 3px;
    text-align: center;
    color: var(--white);
    font-size: 1.5rem;
    margin: 0 auto;
    background: var(--main-color);
}

.affichage-rechercher-vente{
    background: rgb(238, 238, 238);
    height: auto;
    width: 100%;
    padding: 40px;
    border-radius: 3px;
}
.affichage-rechercher-vente form input[type="email"],
.affichage-rechercher-vente form input[type="text"] {
    width: 100%;
    height: 40px;
    border-radius: 3px;
    background: var(--white-8);
    border: none;
    outline: none;
    padding-left: 5px;
}
.affichage-rechercher-vente form input[type="submit"]{
    width: 100%;
    height: 40px;
    text-transform: uppercase;
    background: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 3px;
    color: #ffffff;
    cursor: pointer;
}

.recent-post{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    background: rgb(235, 235, 235);
    height: auto;
    border-radius: 3px;
    padding: 20px;
}
.recent-post h1{
    font-weight: 400;
    text-align: left;
    font-size: 1.8rem;
    padding-bottom: 10px;
}
.recent-post-bottom{
    display: flex;
    flex-direction: column;
}
.line-annonce{
    width: 100%;
    height: 1px;
    background: rgb(223, 223, 223);
}
.recent-post-bottom-img{
    width: 30%;
    height: 80px;
}
.recent-post-bottom a{
    margin-top: 20px;
}
.recent-post-bottom-text{
    width: 70%;
    margin-left: 5px;
    text-align: left;
    vertical-align: top;
}
.recent-post-bottom a{
    display: flex;
    text-decoration: none;
}
.recent-post-bottom-text h3{
    font-weight: 400;
    font-size: 1.4rem;
    color: #222222;
}
.recent-post-bottom-text p{
    font-weight: 300;
    font-size: 1.2rem;
    color: #606060;
    text-align: left;
    margin-top: 0;
}

.recent-post .liens ul{
    margin-top: 5px;
}
.recent-post .liens ul li{
    list-style: none;
    padding-top: 15px;
}
.recent-post .liens ul li a{
    font-size: 1.5rem;
    color: var(--color-text);
    transition: all 0.4s linear;
}
.recent-post .liens ul li a:hover{
    color: var(--main-color);
}

/***************** FIN PAGE ANNONCE *************/


/************* PAGE SERVICE **************/

#servicePage{
    margin: 0;
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 50px;
}
.servicePage{
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 2rem;
    align-items: center;
}
.servicePage .serviceleftPage{
    padding-top: 20px;
    padding-bottom: 20px;
}
.servicePage .serviceleftPage h1{
    font-size: 5rem;
    color: var(--main-color);
    padding-bottom: 10px;
}
.servicePage .serviceleftPage p{
    font-size: 1.6rem;
    color: var(--color-text);
}
.servicePage .serviceleftPage .serviceleftgroup{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    flex-direction: column;
    gap: 2rem;
    margin-top: 40px;
}
.serviceone{
    display: flex;
    margin-bottom: 20px;
}
.serviceone:nth-child(4){
    height: 100%;
}
.servtext{
    width: calc(100% - 100px);
    padding-left: 20px;
}
.servtext h1{
    font-size: 2rem!important;
    font-weight: 400;
    color: var(--color-text);
}
.servtext p{
    font-size: 1.5rem;
    font-weight: 300;
    padding-top: 5px;
    padding-bottom: 10px;
    line-height: 25px;
    text-align: justify;
    color: var(--color-text);
}
.icon{
    width: 60px!important;
    height: 60px;
}
.icon img{
    opacity: 0.4;
}

.itemsServicesPage .title h1{
    font-size: 2rem;
    text-transform: uppercase;
}
.itemsServicesPage .formulaire{
    width: 100%;
    margin-top: 20px;
}
.itemsServicesPage .formulaire .fields{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.itemsServicesPage .formulaire .fields .name,
.itemsServicesPage .formulaire .fields .prenom{
    width: 100%;
}
.itemsServicesPage .formulaire .fields .name{
    margin-right: 8px;
}
.itemsServicesPage .formulaire .fields .prenom{
    margin-left: 8px;
}
.itemsServicesPage .formulaire .fields .name input,
.itemsServicesPage .formulaire .fields .prenom input{
    width: 100%;
    height: 40px;
    border: var(--border);
    border-radius: 5px;
    padding-left: 10px;
    outline: none;
}


.itemsServicesPage .formulaire .field{
    width: 100%;
}
.itemsServicesPage .formulaire .field select{
    width: 100%;
    height: 40px;
    border: var(--border);
    border-radius: 5px;
    margin-bottom: 20px;
    outline: none;
}
.itemsServicesPage .formulaire .field select option{
    font-size: 16px;
    color: var(--dark-8);
    padding-bottom: 10px;
}
.itemsServicesPage .formulaire .field .pos{
    height: 80px;
    border: 1px solid black;
    width: 100%;
}
.itemsServicesPage .formulaire .field textarea{
    width: 100%;
    border: var(--border);
    padding: 10px;
    resize: vertical;
    margin-bottom: 20px;
}
.itemsServicesPage .formulaire .button button{
    width: 100%;
    height: 40px;
    background: var(--main-color);
    font-size: 20px;
    font-weight: 500;
    color: var(--white);
    border-radius: 5px;
    border: transparent;
    cursor: pointer;
    transition: 0.3s;
}
.itemsServicesPage .formulaire .button button:hover{
    background: transparent;
    border: 1px solid var(--main-color);
    color: var(--main-color);
}

/************* FIN PAGE SERVICE ************/


/************* PAGE BLOG *****************/

#affichage-actualite{
    padding: 100px 0;
}
#affichage-actualite .affichage-actualite{
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 2rem;
}
.affichage-bottom{
    width: 100%;
    margin-bottom: 30px;
    border: 3px;
    box-shadow:  0px 0px 16px -10px rgba(153, 153, 153, 0.5);
}
.affichage-bottom-img{
    position: relative;
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.affichage-bottom-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.affichage-bottom-date{
    position: absolute;
    left: 20px;
    bottom: -10px;
    padding: 15px 10px;
    background: #1b9bff;
    font-size: 1.8rem;
    font-weight: 600;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
}
.affichage-bottom-text {
    padding: 10px;
}
.affichage-bottom-text h1{
    font-size: 2rem;
    font-weight: 500;
    text-align: left;
    padding-top: 30px;
    text-transform: uppercase;
}
.affichage-bottom-text p{
    font-size: 1.6rem;
    line-height: 2.2rem;
    color: var(--color-text);
    font-weight: 300;
    text-align: left;
    padding-top: 10px;
}
.affichage-rechercher{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    background: #fbf9ff;
    height: auto;
    width: 90%;
    margin: auto;
    text-align: center;
}
.card-information{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.card-information .card-admin{
    display: flex;
    align-items: center;
}
.card-information .card-admin img{
    height: 40px;
    width: 40px;
    border-radius: 50%;
}
.card-information .card-admin p{
    font-size: 1.5rem;
    padding-left: 10px;
    color: var(--color-text);
}
.card-information .card-date{
    display: flex;
}
.card-information .card-date i,
.card-information .card-date p{
    font-size: 1.5rem;
    color: var(--main-color);
    font-weight: 400;
}
.card-information .card-date p{
    padding-left: 10px;
}
/************* FIN PAGE BLOG *************/

/***************** APROPOS ********************/


#pourquoi{
    padding-top: 100px;
    padding-bottom: 100px;
}
.pourquoi{
    width: 900px;
    height: auto;
    margin: 0 auto;
}
.pourquoi .pourquoi_img{
    width: 100%;
    height: 500px;
}
.pourquoi .pourquoi_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pourquoi_text{
    display: flex;
    width: 100%;
}
.pourquoi_text_block_one,
.pourquoi_text_block_two{
    width: 50%;
}
.pourquoi_text_block_one h1{
    font-size: 3rem;
    color: #1b9bff;
    padding-top: 40px;
    padding-bottom: 20px;
}
.pourquoi_text_block_one p{
    font-size: 1.5rem;
    line-height: 25px;
    text-align: justify;
    padding-right: 10px;
}
.pourquoi_text_block_two p{
    font-size: 1.5rem;
    line-height: 25px;
    text-align: justify;
    padding-left: 10px;
    padding-top: 94px;
}


#container_apropos_one{
    width: 100%;
    background: #f7f7f7;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}
#apropos_left{
    width: 550px;
    height: auto;
    display: inline-block;
}
#apropos_left img{
    height: 300px;
    width: 550px;
    object-fit: cover;
}
#apropos_right{
    display: inline-block;
    background: #ffffff;
    width: 500px;
    height: auto;
    margin-top: 70px;
    margin-left: -60px;
    vertical-align: top;
    z-index: 2;
    box-shadow: 0px 5px 30px rgba(153, 153, 153, 0.2);
}
#apropos_right_text{
    width: 450px;
    height: auto;
    margin: auto;
    margin-top: 20px;
}
#apropos_right_text h1{
    font-size: 3rem;
    padding: 5px 0;
    color: #1b9bff;
}
#apropos_right_text p{
    padding: 20px;
    padding-bottom: 20px;
    font-size: 1.4rem;
    line-height: 2.2rem;
    color: #757575;
    text-align: justify;
}
#apropos_second img{
    width: 250px;
    height: 250px;
    object-fit: cover;
}
#apropos_second_text{
    width: 230px;
    margin: auto;
    margin-top: 20px;
}
#apropos_second_text h2{
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
}
#apropos_second_text p{
    text-align: center;
    font-size: 1.6rem;
    padding: 20px 0;
    color: #575757;
}
#bouton_apropos_reseau{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #142c96;
    border-radius: 50%;
}
#bouton_apropos_reseau .fa{
    padding-top: 8px;
    color: #ffffff;
}
#bouton_apropos_reseau_one{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #5776ff;
    border-radius: 50%;
}
#bouton_apropos_reseau_one .fa{
    padding-top: 8px;
    color: #ffffff;
}
#bouton_apropos_reseau_second{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #ff2104;
    border-radius: 50%;
}
#bouton_apropos_reseau_second .fa{
    padding-top: 8px;
    color: #ffffff;
}
#bouton_apropos_reseau_third{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #704433;
    border-radius: 50%;
}
#bouton_apropos_reseau_third .fa{
    padding-top: 8px;
    color: #ffffff;
}

/***************** FIN APROPOS ********************/


/************* CONTACT PAGE *****************/

.contact{
    padding: 100px 0;
}
.contact .contact-content{
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    justify-content: space-between;
}
.contact .contact-content .column{
    width: calc(50% - 30px);
}
.contact .contact-content .text{
    font-size: 3rem;
    font-weight: 600;
    text-align: left;
    margin-bottom: 10px;
}
.contact .contact-content .left p{
    font-size: 1.4rem;
    color: #252525;
    text-align: justify;
    padding-bottom: 20px;
}
.contact .contact-content .left .icons{
    margin: 10px 0;
}
.contact .contact-content .row{
    display: flex;
    height: auto;
    margin-bottom: 50px;
    vertical-align: top;
}
.contact .contact-content .row .info{
    margin-left: 30px;

}
.contact .contact-content .row i{
    font-size: 3.4rem;
    color: #999999;
    vertical-align: top;
}

.contact .contact-content .info .head{
    font-size: 1.8rem;
    font-weight: 400;
    text-align: left;
    color: #333333;
}
.contact .contact-content .info .sub-title{
    color: var(--color-text);
    font-size: 1.5rem;
    font-weight: 300;
}
.contact .contact-content .info .sub-title a{
    color: var(--color-text);
    font-size: 1.5rem;
    font-weight: 300;
}
.contact .right form .fields{
    display: flex;
}
.contact .right form .field,
.contact .right form .fields .field{
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
}
.contact .right form .textarea{
    height: 200px;
}
.contact .right form .name{
    margin-right: 10px;
}
.contact .right form .email{
    margin-left: 10px;
}
.color-select{
    color: #606060;
}
.contact .right form .field input,
.contact .right form .field select,
.contact .right form .textarea textarea{
    height: 100%;
    width: 100%;
    border: 1px solid lightgrey;
    border-radius: 6px;
    outline: none;
    padding: 0 15px;
    font-size: 17px;
}
.contact .right form .textarea textarea{
    padding-top: 10px;
    resize: vertical;
}
.contact .right form .button button{
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-transform: uppercase;
    border: 1px solid #1b9bff;
    background: #1b9bff;
    color: #ffffff;
    font-size:1.8rem;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    transition: .5s ease;
}
.contact .right form .button button:hover{
    background: transparent;
    color: #1b9bff;
    transition: .5s ease;
}

/************* FIN CONTACT PAGE ***************/

/************* BLOG DETAIL *******************/

.affichage-actualite-left form{
    width: 800px;
    margin: 0 auto;
    padding-top: 50px;
}
.affichage-actualite-left form .erreur_commente{
    width: 100%;
    height: 60px;
    background: rgb(255, 122, 122, 0.5);
    line-height: 60px;
    padding-left: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.affichage-actualite-left form .erreur_commente h1{
    font-weight: 300;
    color: rgb(58, 58, 58);
}
.affichage-actualite-left form .msg_commente{
    border: 1px solid rgba(69, 197, 69, 0.5);
    width: 100%;
    height: 60px;
    background: rgba(69, 197, 69, 0.5);
    line-height: 60px;
    padding-left: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.affichage-actualite-left form .msg_commente h1{
    font-weight: 300;
    color: rgb(21, 139, 21);
}
.affichage-actualite-left form .erreur_commente .fa{
    color: black;
    font-size: 1.5rem;
}

.affichage-actualite-left form .comment__field input,
.affichage-actualite-left form .comment__field select,
.affichage-actualite-left form .textarea textarea{
    height: 100%;
    width: 100%;
    border: 1px solid lightgrey;
    border-radius: 6px;
    outline: none;
    padding: 10px;
    font-size: 17px;
    font-family: 'Poppins', sans-serif;
    resize: none;
}
#google_map{
    width: 100%;
    background: #f7f7f7;
    padding-bottom: 100px;
    padding-top: 100px;
}
.google_map{
    width: 1200px;
    height: 500px;
    border: 1px solid black;
    margin: 0 auto;
}
/* blog commentaire */
.commentaire{
    padding-top: 30px;
    width: 800px;
    margin: 0 auto;
    height: auto;
}
#commentaire{
    height: auto;
    width: 100%;
}
.poste_commentaire{
    width: 100%;
    padding: 10px;
    display: flex;
    margin-bottom: 10px;
    background: #fbf9ff;
    border-radius: 5px;
}
.poste_commentaire .poste_commentaire_text{
    padding-left: 10px;
}
.poste_commentaire .poste_commentaire_text h1{
    font-size: 2rem;
    font-weight: 300;
    text-transform: uppercase;
}
.poste_commentaire .poste_commentaire_text h2{
    font-weight: 300;
    color: #999999;
    padding-bottom: 15px;
}
.poste_commentaire .poste_commentaire_text p{
    padding-bottom: 5px;
    color: #3d3d3d;
    font-size: 1.5rem;
}
.poste_commentaire .poste_commentaire_text h3{
    color: #999999;
    font-weight: normal;
}
.affichage-actualite-left form .comment__fields{
    display: flex;
}
.commentaire_jaime{
    width: 800px;
    margin: 0 auto;
    padding-top: 30px;
}
.commentaire_jaime_grand{
    display: flex;
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
    padding-top: 20px;
    padding-bottom: 20px;
}
.commentaire_jaime_jaime{
    display: flex;
    width: 50%;
}
.commentaire_jaime_jaime a{
    display: flex;
}
.commentaire_jaime_jaime .fa{
    font-size: 2rem;
}
.commentaire_jaime_jaime .fa:focus{
    color: #1991ec;
}
.commentaire_jaime_jaime p{
    font-size: 1.5rem;
}
.commentaire_partage{
    width: 50%;
    text-align: right;
}
#facebook{
    color: #2b5bc4;
}
#twitter{
    color: #61bbff;
}
.commentaire_partage .fa{
    font-size: 2rem;
    text-align: right;
    padding-left: 20px;
}
.affichage-actualite-left form .comment__field,
.affichage-actualite-left form .comment__fields .comment__field{
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
}
.affichage-actualite-left form .textarea{
    height: 150px;
}
.affichage-actualite-left form .name{
    margin-right: 10px;
}
.affichage-actualite-left form .email{
    margin-left: 10px;
}
.affichage-actualite-left form .button{
    height: 47px;
    width: 190px;
    cursor: pointer;
}
.affichage-actualite-left form .button input{
    width: 100%;
    height: 100%;
    border: 1px solid #1b9bff;
    background: #1b9bff;
    color: #ffffff;
    font-size:1.8rem;
    font-weight: 500;
    border-radius: 6px;
    transition: .5s ease;
    cursor: pointer;
}
.affichage-actualite-left form .button input:hover{
    background: transparent;
    color: #1b9bff;
    transition: .5s ease;
}

/* PAGINATION */


/* FIN PAGINATION */

/*=========== PAGE AFFICHAGE =========
===================================***/

#projet-detail{
    padding-top: 50px;
    padding-bottom: 200px;
}

.projet-detail .galerie-projet{
    margin-bottom: 1rem;
}

.projet-detail .titre-lien{
    display: flex;
    margin-bottom: 30px;
}

.projet-detail .titre-lien a{
    color: var(--color-text);
    font-size: 2rem;
    font-weight: 500;
    padding-bottom: 20px;
    margin-right: 20px;
    transition: all 0.3s ease;
}

.projet-detail .titre-lien a:hover{
    color: var(--main-color);
    border-bottom: 3px solid var(--main-color);
}

.projet-detail .titre-lien a.active{
    color: var(--main-color);
    border-bottom: 3px solid var(--main-color);
}

.projet-detail .galerie-projet .left{
    position: relative;
    display: grid;
    grid-template-columns: 48% 25% 25%;
    gap: 1rem;
    height: 300px;
}

.projet-detail .galerie-projet .left .plus{
    padding: 7px 20px;
    background: var(--dark-6);
    color: white;
    font-size: 1.4rem;
    font-weight: 400;
    border-radius: 5px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
}

.projet-detail .galerie-projet img{
    border-radius: 10px;
    overflow: hidden;
}


#carouselExampleCaptions .carousel-inner{
    border: 1px solid var(--bottom);
    border-radius: 10px;
    height: 600px;
}

.projet-detail .texte{
    padding-top: 80px;
}

.projet-detail .texte h1{
    color: var(--color-text);
    padding-bottom: 25px;
}

.projet-detail .texte p{
    font-size: 1.6rem;
    padding-bottom: 15px;
}

.projet-detail .localisation{
    height: 400px;
    margin-bottom: 30px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(5, 32, 69, 0.5);
    color: white;
    font-size: 2rem;
}

.carousel-control-prev-icon i{
    vertical-align: middle;
    line-height: 30px;
}

.projet-detail .title-container{
    padding-top: 80px;
    margin-bottom: 10px;
}

.projet-detail .title-container h1{
    color: var(--color-text);
    text-transform: uppercase;
}

.projet-detail .projet-photos{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.projet-detail .projet-photos img{
    border: 1px solid var(--bottom);
    border-radius: 10px;
}

.projet-detail .nos-offices{
    padding-top: 80px;
}

.projet-detail .nos-offices .block-offices{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 30px;
}

.projet-detail .nos-offices .block-offices a{
    transition: all 0.3s ease;
}

.projet-detail .nos-offices .block-offices .offices-div{
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    background: #f7f7f7;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 15% 65% 15%;
    gap: 10px;
    align-items: center;
    color: var(--color-text);
    transition: all 0.3s ease;
}

.projet-detail .nos-offices .block-offices .offices-div:hover{
    background: var(--main-color);
    color: white;
}

.projet-detail .nos-offices .block-offices .offices-div h1{
    font-size: 1.5rem;
    font-weight: 300;
}

.projet-detail .nos-offices .block-offices .offices-div i{
    font-size: 2rem;
}



/***************** FIN PAGE PROJET **************/

/***************** CONFIRMATION *****************/
#confirmation{
    text-align: center;
    padding-top: 70px;
    padding-bottom: 70px;
}
.carre{
    height: auto;
    width: 500px;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgb(116, 115, 115);
    padding-top: 20px;
    padding-bottom: 20px;
}
.txt{
    font-size: 24px;
    font-family: "Roboto", sans-serif;
}
.button-ok a{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    background: #1b9bff;
    color: #f7f7f7;
    border-radius: 5px;
    font-size: 1.5rem;
}
.cerc{
    height: 100px;
    width: 100px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 120px;
    border: 3px solid gray;
    border-radius: 50%;
}
.cerc .fa{
    font-size: 5rem;
    color: #1b9bff;
}
#enreg p{
    font-size: 1.5rem;
}
/*************** FIN CONFIRMATION *******************/

/*************** DECORATION INTERIEUR ***************/

.div_decoration_first{
    position: relative;
    background: url(media/deco/section_bg04.jpg);
    height: 200px;
    width: 100%;
}
.div_decoration_first_about{
    position: absolute;
    height: 380px;
    width: 800px;
    left: 80px;
    top: 40%;
    background: #f7f7f7;
    padding: 100px;
}
.div_decoration_first_about h1{
    font-weight: 300;
    font-size: 1.8rem;
    color: #575757;
    padding-bottom: 20px;
}
.div_decoration_first_about h2{
    font-weight: 600;
    font-size: 3.5rem;
    color: #161515;
    text-align: justify;
    padding-bottom: 30px;
}
.div_decoration_first_about p{
    font-weight: 300;
    font-size: 1.8rem;
    color: #575757;
    padding-bottom: 30px;
}
.div_decoration_service{
    background: #13151b;
    width: 100%;
    height: auto;
    padding-top: 250px;
}
.div_decoration_block_service{
    text-align: center;
}
.decoration_service_title h1{
    color: #7e7e7e;
    font-weight: 300;
    font-size: 1.8rem;
    padding-top: 100px;
    padding-bottom: 15px;
}
.decoration_service_title h2{
    color: #ffffff;
    font-weight: 600;
    font-size: 4rem;
    padding-bottom: 80px;
}
.div_decoration_first_service_card{
    display: inline-block;
    width: 350px;
    margin: 0 10px;
    height: auto;
    vertical-align: top;
    transition: .5s;
    background: #ffffff;
}
.decoration_card-img{
    height: 350px;
}
.decoration_footer{
    display: flex;
    height: 100px;
}
.decoration_line{
    margin-top: 20px;
    margin-left: 5px;
    width: 15%;
    height: 5px;
    background: #1b9bff;
}
.decoration_card-text{
    padding-left: 20px;
}
.decoration_card_text h1{
    text-align: left;
    font-size: 2.5rem;
    font-weight: normal;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
.decoration_card_text p{
    text-align: left;
    font-size: 1.5rem;
    padding-left: 10px;
}

.card_terrain_title h1{
    padding-top: 15px;
}
.card_line{
    height: 5px;
    width: 50px;
    background: #1b9bff;
    margin: 0 auto;
}
.decoration_title{
    width: 100%;
}
.decoration_title h1{
    font-size: 4rem;
    color: #ffffff;
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 10px;
}
.ligne_droite{
    width: 70px;
    height: 5px;
    margin: 0 auto;
    margin-bottom: 50px;
    background: #1b9bff;
}

.contact .right form .message_erreur_commente{
    width: 100%;
    height: 60px;
    background: rgb(255, 122, 122, 0.5);
    line-height: 60px;
    padding-left: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.contact .right form .message_erreur_commente h1{
    font-weight: 300;
    color: rgb(58, 58, 58);
}
.contact .right form .message_msg_commente{
    border: 1px solid rgba(69, 197, 69, 0.5);
    width: 100%;
    height: 60px;
    background: rgba(69, 197, 69, 0.5);
    line-height: 60px;
    padding-left: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: rgb(62, 151, 62, 0.5);
}
.contact .right form .message_msg_commente h1{
    font-weight: 300;
    color: rgb(21, 139, 21);
}


/*=========== PAGE SHOW PROJET =============*/

#showProjet{
    padding-top: 50px;
    padding-bottom: 50px;
}
.showProjet{
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 2rem;
}
.showProjet .showProjetLeftImg{
    height: 400px;
    margin-bottom: 20px;
}
.showProjet .content h1{
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 400;
    padding-bottom: 20px;
}
.showProjet .content p{
    font-size: 1.5rem;
    line-height: 2.2rem;
    color: var(--color-text);
    padding-bottom: 20px;
}
.showProjet .somePictures{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.showProjet .lien a{
    display: block;
    height: 45px;
    width: 200px;
    margin: 40px auto;
    background: var(--main-color);
    border-radius: 3px;
    font-size: 1.5rem;
    color: white;
    text-transform: uppercase;
    text-align: center;
    line-height: 45px;
}


/*=========== END SHOW PROJET ==============*/


/* ========================================
        APROPOS PAGE
==========================================*/


#apropos{
    padding-top: 80px;
    padding-bottom: 80px;
    background: #f7f7f7;
}
.apropos .block{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: center;
}
.apropos .block .left{
    position: relative;
}
.effet-1{
    position: absolute;
    left: -8%;
    top: -5%;
    width: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.effet-1 div{
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background: var(--main-color);
    margin: 0 10px 10px;
}
@keyframes movedelement{
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
    25% {
        -webkit-transform: translate(10px,10px);
        transform: translate(10px,10px);
    }
    50% {
        -webkit-transform: translate(5px,5px);
        transform: translate(5px,5px);
    }
    75% {
        -webkit-transform: translate(10px,-5px);
        transform: translate(10px,-5px);
    }
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}
.apropos .block .left .image-video{
    position: relative;
    /* border-radius: 10px; */
    height: 400px;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0e0e0e;
    border: 8px solid white;
}
.apropos .block .left .image-video::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border: 10px solid var(--main-border);
    border-radius: 10px;
    top: 30px;
    left: -30px;
    z-index: -1;
}
.apropos .block .left .image-video .btnVideo{
    position: relative;
}
.apropos .block .left .image-video .btnVideo .play{
    position: relative;
    width: 80px;
    height: 80px;
    background: var(--white);
    border-radius: 50%;
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: 0 15px 25px gray;
    transform: scale(.8);
}
.apropos .block .left .image-video .btnVideo .play:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid white;
    animation: hamburger_puls 1s ease infinite;
}
@keyframes hamburger_puls{
    0%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(1.4);
    }
}

.apropos .block .left .image-video .btnVideo .play i{
    color: var(--main-color-1);
    font-size: 1.5rem;
}


.apropos .block .left .image-video .video-container .close{
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 2rem;
    cursor: pointer;
    color: white;
}
.apropos .block .left .image-video .video-container video{
    width: 75%;
    /* max-width: 800px; */
    transform: scale(0);
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
    outline: none;
    transition: all 0.3s;
}
.apropos .block .left .image-video .video-container.show{
    pointer-events: all;
    opacity: 1;
}
.apropos .block .left .image-video .video-container.show video{
    transform: scale(1);
}

.apropos .block .right .image{
    width: 200px;
    height: 50px;
}
.apropos .block .right .text h1{
    font-size: 3.5rem;
    color: var(--main-color-1);
    /* font-weight: 600; */
    font-family: 'Syncopate', sans-serif!important;
    padding-top: 25px;
    padding-bottom: 25px;
}
.apropos .block .right .text p{
    font-size: 1.6rem;
    line-height: 2.2rem;
    text-align: justify;
    color: var(--text-color);
}
.apropos .block .right .lien{
    margin-top: 40px;
}
.apropos .block .right .lien a{
    padding: 10px 35px;
    background: transparent;
    border: 2px solid var(--main-color-1);
    font-size: 1.2rem;
    color: var(--main-color-1);
    /* border-radius: 5px; */
    font-weight: 600;
}
.apropos .block .right .lien a:hover{
    color: var(--white);
    background: var(--main-color-1);
}


#notreadn{
    padding-top: 50px;
    padding-bottom: 150px;
    background: var(--f7);
}
.notreadn .title{
    margin-bottom: 40px;
    text-align: center;
}
.notreadn .title h1{
    font-size: 4rem;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    color: var(--main-color);
}
.notreadn .title h1 span{
    font-weight: 600!important;
    text-transform: uppercase;
}
.notreadn .title p{
    font-size: 1.5rem;
    padding-top: 15px;
    color: var(--text-color);
}


.notreadn .block{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 30px;
}
.notreadn .block .item{
    background: var(--white);
    border: 1px solid #f3f3f3;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.09);
}
.notreadn .block .item .tete{
    display: flex;
    align-items: center;
}
.notreadn .block .item .tete i{
    font-size: 1.2rem;
    color: var(--main-color-1);
}
.notreadn .block .item .tete h1{
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--main-color-1);
    padding-left: 20px;
}
.notreadn .block .item .content{
    margin-top: 20px;
}
.notreadn .block .item .content p{
    font-size: 1.4rem;
    color: var(--text-color);
}

/**** END APROPOS ******/

/*==============================
    PAGE CONTACT
===============================*/

#middleMail{
    padding-top: 50px;
    padding-bottom: 50px;
    background: #f7f7f7;
}
.middleMail{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.middleMail .item{
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--white);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.3s linear;
}
.middleMail .item:hover{
    background: var(--main-color);
    border: none;
}
.middleMail .item .icon i{
    font-size: 4rem;
    color: var(--main-color);
}
.middleMail .item:hover i{
    color: var(--white);
}
.middleMail .item .text{
    text-align: center;
    margin-top: 30px;
}
.middleMail .item .text h1{
    font-size: 2rem;
    font-weight: 600;
    color: var(--dark-9);
    text-align: center;
    padding-bottom: 20px;
}
.middleMail .item:hover .text h1{
    color: var(--white-9);
}
.middleMail .item .text p{
    color: #575757;
    font-size: 16px;
    line-height: 22px;
}
.middleMail .item:hover .text p{
    color: var(--white-8);
}
.middleMail .item .text p span{
    font-weight: 500!important;
}
.middleMail .item .text p a{
    color: var(--main-color);
    font-weight: 600!important;
}
.middleMail .item:hover p a{
    text-decoration: underline;
    color: white;
}


#contactPage{
    padding-top: 50px;
    /* padding-bottom: 150px; */
}

#contactPage .mapGoogle{
    height: 500px;
    width: 100%;
}
#contactPage .title{
    padding-bottom: 20px;
    width: 600px;
    margin-bottom: 30px;
}
#contactPage .title h1{
    font-size: 2rem;
    line-height: 2.5rem;
    color: var(--main-color);
    text-align: center;
    text-transform: uppercase;
}
.contactPage .block{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
}
.contactPage .block .blockleft{
    width: 100%;
}
.contactPage .block .blockleft img{
    width: 100%!important;
    object-fit: contain;
}

.contactPage .block .blockright{
    width: 100%;
}
.contactPage .block .field{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.contactPage .block .field p{
    font-size: 23px;
    color: #101010;
    font-weight: 500;
    margin-bottom: 5px;
}
.contactPage .block .field p span{
    color: red;
    padding-left: 3px;
    font-size: 23px;
    font-style: normal!important;
}
.contactPage .block .field span{
    font-style: italic;
    color: var(--dark-7);
    font-size: 14px;
}
.contactPage .block .field input{
    height: 50px;
    border-radius: 3px;
    border: 2px solid #ededed;
    background: #f8f8f8;
    font-size: 18px;
    padding-left: 10px;
    outline: none;
}
.contactPage .block .fields{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr)!important;
    gap: 2rem;
    margin-top: 30px;
    margin-bottom: 30px;
}
.contactPage .block .fields .item{
    display: flex;
    flex-direction: column;
}
.contactPage .block .fields p{
    font-size: 23px;
    color: #101010;
    font-weight: 500;
    margin-bottom: 5px;
}
.contactPage .block .fields p span{
    color: red;
    padding-left: 3px;
    font-size: 23px;
    font-style: normal!important;
}
.contactPage .block .fields span{
    font-style: italic;
    color: var(--dark-7);
    font-size: 14px;
}
.contactPage .block .fields input{
    height: 50px;
    border-radius: 3px;
    border: 2px solid #ededed!important;
    background: #f8f8f8;
    font-size: 18px;
    padding-left: 10px;
    outline: none;
}
.contactPage .block .field textarea{
    border-radius: 3px;
    height: 200px;
    border: 2px solid #ededed;
    background: #f8f8f8;
    font-size: 18px;
    padding: 10px;
    outline: none;
    resize: vertical;
}
.contactPage .block .bouton button{
    background: var(--main-color);
    font-size: 16px;
    color: white;
    padding: 15px 40px;
    border-radius: 3px;
    margin-top: 30px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0px 7px 15px 0px rgba(244, 93, 66, 0.3);
}

/** ===== END PAGE CONTACT ==== */



@media only screen and (min-width: 1200px){
    .max-width{
        max-width: 80%;
        margin: 0 auto;
    }
    #header{
        width: 100%;
    }
    #header .header{
        width: 100%;
    }
    #header .hamburger{
        display: none;
        width: 100%;
    }
    .brand h1{
        font-size: 4rem;
        color: white;
    }
    #header .nav-list ul{
        position: initial;
        display: block;
        height: 100%;
        width: 100%;
        width: fit-content;
        background-color: transparent;
    }
    #header .nav-list ul li{
        display: inline-block;
    }
    #header .nav-list ul li a{
        font-size: 1.6rem;
    }
    #header .nav-list ul a:after{
        display: none;
    }
    #projects .project-item{
        flex-direction: row;
    }
    #projects .project-item{
        height: 550px;
        margin: 0;
        width: 100%;
        border-radius: 10px;
    }
    #projects .project-img{
        width: 50%;
    }
    #projects .all-projects .project-info{
        height: 100%;
    }
    #projects .all-projects .project-img{
        height: 100%;
        color: #101010;
    }
}

@media(max-width : 920px){
    .max-width{
        width: 100%;
    }
    .max-w80{
        max-width: 100%;
    }
    section{
        overflow: hidden!important;
    }

    #header .nav-list ul li{
        margin-bottom: 20px;
    }

    .modal{
        width: 90%;
        z-index: 9999;
    }
    .modal-bg{
        width: 100%;
    }
    #searchZone{
        width: 100%;
    }

    .searchZone form .detail-recherche-header{
        display: flex;
        flex-direction: column;
    }
    .searchZone form .detail-recherche-header button{
        height: 40px;
    }

    #searchZone{
        padding-left: 10px;
        padding-right: 10px;
    }

    /* HOME OU CAROUSEL */

    .home .caption h1{
        font-size: 2rem;
    }
    .home .caption p{
        font-size: 1.5rem;
    }
    .home .caption h2{
        font-size: 3rem;
    }
    .home .controls{
        display: none;
    }

    /* FIN HOME OU CAROUSEL */

    /* SERVICE */

    .service__div{
        grid-template-columns: 1fr;
    }
    .service__div .service__left .service__left__group{
        grid-template-columns: 1fr;
    }

    /* ANNONCES */

    .lesAnnonces .title p{
        width: 100%;
        padding: 10px;
    }

    .lesAnnonces .block{
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    .lesAnnonces .block .item{
        margin-bottom: 20px;
        width: 100%;
    }

    /* FIN ANNONCES */

    /* DECOUVRIR NOS BIENS */

    .decouvert-bien{
        width: 100%;
        padding: 10px;
    }

    /* FIN DECOUVRIR NOS BIENS */

    /* CHIFFRES */

    #chiffreImmo{
        padding-bottom: 20px;
    }

    #contactSect{
        padding-top: 0;
        padding-bottom: 50px;
        border-top: none;
    }

    #contactSect .bannerContact{
        position: relative;
        top: 0;
        flex-direction: column;
    }
    #contactSect .bannerContact .block{
        width: 100%;
        grid-template-columns: 1fr;
        gap: 2rem;
        border: none;
    }
    #contactSect .bannerContact .block .item{
        width: 70%;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 20px;
        border-right: none;
        border-bottom: 1px solid var(--white-2);
    }
    #contactSect .bannerContact .block .item:last-child{
        border-bottom: none;
    }

    .contactSect .title{
        width: 100%;
        padding: 10px;
        padding-top: 50px;
    }

    .contactSect .title h1{
        font-size: 3.5rem;
    }


    /* SECTION DECORATION */

    .decor__grand{
        grid-template-columns: 1fr;
        padding: 10px;
    }

    /* FOOTER */

    #container_footer{
        padding-top: 0;
        border-top: none;
    }

    #container_footer .banner{
        position: relative;
        top: 0;
    }
    #container_footer .banner .item{
        grid-template-columns: 1fr;
        width: 100%;
        border-left: none;
        border-right: none;
        margin-bottom: 50px;
    }

    .container_footer_block{
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .container_footer_item{
        margin-bottom: 15px;
    }
    .container_footer_item:nth-child(2){
        text-align: left;
        margin-top: 10px;
    }
    .container_footer_item:nth-child(2) h1{
        text-align: left;
    }

    .container_footer_item:nth-child(2) .line{
        margin: 0;
    }
    .container_footer_item ul {
        margin-top: 20px;
        padding-left: 0;
    }



    /* FIN FOOTER */

    /* SCROLL UP */
    .scrollup{
        right: 2rem;
    }

    /* PAGE ANNONCE */

    .vente-card{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .vente-card-left{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .vente-card-right{
        width: 100%;
        margin: 0 auto;
    }
    .vente-card-left .vente-card-block{
        flex-direction: column;
    }
    .vente-card-left .vente-card-block .vente-card-img{
        width: 100%;
    }
    .vente-card-text{
        width: 100%;
    }


    #card{
        padding: 10px;
    }

    #card .card{
        width: 100%;
        display: block;
        margin-left: 0;
    }
    .membre{
        width: 100%;
    }
    #affichage-actualite .affichage-actualite{
        display: block;
        flex-direction: column;
        width: 100%;
    }
    .affichage-actualite .affichage-actualite-left{
        width: 100%;
    }
    .affichage-actualite .affichage-actualite-right{
        width: 100%;
    }
    .affichage-actualite-left .affichage-bottom{
        width: 100%;
        margin-left: 0;
    }
    .affichage-bottom .card-information{
        width: 100%;
    }
    .affichage-actualite .affichage-actualite-right .affichage-rechercher{
        width: 90%;
    }
    .affichage-rechercher form input{
        width: 100%;
    }
    img{
        width: 100%;
    }


    /******** PAGE SERVICE **********/

    .servicePage{
        grid-template-columns: repeat(1, 1fr);
    }

    /* PAGE PROJET */

    #projet-detail{
        padding-bottom: 50px;
    }

    #carouselExampleCaptions .carousel-inner{
        height: auto;
    }


    /*********** BLOG ************/
    .commentaire{
        width: 100%;
        padding: 10px;
    }
    .affichage-actualite-left form{
        width: 100%;
        padding: 10px;
    }
    .commentaire_jaime{
        width: 100%;
        padding: 10px;
    }
    .commentaire_jaime_jaime{
        width: 100%;
        padding-bottom: 10px;
    }
    .commentaire_jaime_grand{
        flex-direction: column;
    }

    /* PAGE APROPOS */

    #apropos,
    #notreadn{
        overflow-y: hidden!important;
    }

    .apropos .block{
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    .apropos .block .left{
        display: none;
    }

    .effet-1{
        width: 100px;
    }

    .apropos .block .left .image-video{
        width: 100%;
    }

    .notreadn .block{
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    .notreadn .block .item{
        margin-bottom: 10px;
    }

    .pourquoi{
        width: 100%;
        padding: 10px;
        overflow: hidden;
    }
    .pourquoi .pourquoi_img{
        width: 100%;
        height: 300px;
        padding: 5px;
    }
    .pourquoi_text{
        flex-direction: column;
    }
    .pourquoi_text_block_one,
    .pourquoi_text_block_two{
        width: 100%;
    }
    .pourquoi_text_block_one h1{
        padding-left: 5px;
    }

    .pourquoi_text_block_one p{
        font-size: 1.5rem;
        line-height: 25px;
        text-align: justify;
        padding: 5px;
    }
    .pourquoi_text_block_two p{
        padding: 5px;
        padding-top: 15px;
    }

    #container_apropos_one{
        width: 90%;
        margin: 0 auto;
        background: white;
        overflow: hidden;
    }
    #apropos_left{
        width: 100%;
        padding: 5px;
    }
    #apropos_left img{
        height: 300px;
        width: 100%;
        object-fit: cover;
    }
    #apropos_right{
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-left: 0;
        box-shadow: 0px 5px 30px rgba(153, 153, 153, 0.2);
    }
    #apropos_right_text{
        width: 90%!important;
    }
    #apropos_right_text p{
        padding: 10px;
    }

    .div_decoration_first_service_card{
        margin-bottom: 10px;
    }
    .div_decoration_first_about{
        position: absolute;
        height: auto;
        width: 95%;
        left: 10px;
        top: 40%;
        background: #f7f7f7;
        padding: 50px;
    }
    .div_decoration_first_about h1{
        font-weight: 300;
        font-size: 1.5rem;
        color: #575757;
        padding-bottom: 20px;
    }
    .div_decoration_first_about h2{
        font-weight: 600;
        font-size: 2.5rem;
        color: #161515;
        text-align: justify;
        padding-bottom: 30px;
    }
    .div_decoration_first_about p{
        font-weight: 300;
        font-size: 1.5rem;
        color: #575757;
        padding-bottom: 30px;
    }

    /* SHOW PROJET */
    .showProjet{
        grid-template-columns: 1fr;
    }
    .showProjet .somePictures{
        grid-template-columns: 1fr;
    }

    /* contact */

    .middleMail{
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    .middleMail .item{
        margin-bottom: 20px;
    }

    #contactPage {
        padding: 10px;
    }

    #contactPage .title{
        width: 100%;
        padding-top: 50px;
    }

    .contactPage .block{
        display: flex;
        flex-direction: column;
    }

    .contactPage .block .fields{
        display: flex;
        flex-direction: column;
    }

    #barniereImg .barniere-tete h1{
        font-size: 2rem;
    }

    .projet-detail{
        padding: 10px;
    }
    .projet-detail .texte{
        padding-top: 30px;
    }

    .projet-detail .titre-lien{
        flex-direction: column;
    }

    .projet-detail .titre-lien a{
        padding-top: 20px;
        margin-right: 0;
        padding-bottom: 0;
    }

    .projet-detail .title-container{
        padding-top: 30px;
    }

    .projet-detail .galerie-projet .left{
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .projet-detail .galerie-projet .left .plus{
        display: none;
    }

    .projet-detail .nos-offices{
        padding-top: 30px;
    }

    .projet-detail .nos-offices .block-offices{
        grid-template-columns: 1fr;
    }

}