*{
    margin: 0;
    padding: 0;
    font-family: "Roboto", serif;
    box-sizing: border-box;
    
    
}

body,html{
    overflow-y: auto;
    overflow-x: hidden;
}


/* menu de navigation */
header{
    background-color: #cc0000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100000000000000000000000000000;
}

header.scrolled {
    background-color: #fff;
    color: black;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 100000000000000000000000000000;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 50px;
    z-index: 100000000000000000000000000000;
}

.logo img {
    height: 80px; 
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    z-index: 100000000000000000000000000000;
}

.nav-links li {
    position: relative;
    z-index: 100000000000000000000000000000;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 24px;
    font-family: "Bebas Neue", serif;
    z-index: 100000000000000000000000000000;
}

header.scrolled .nav-links li a {
  
    color: black;
    z-index: 100000000000000000000000000000;
    
}

.nav-links .active a {
    position: relative;
    z-index: 100000000000000000000000000000;
}

.nav-links .active a::after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #FFD800;
    position: absolute;
    bottom: -5px;
    left: 0;
    border-radius: 10px;
    z-index: 100000000000000000000000000000;
}

.scrolled .nav-links .active a::after {
    
    background-color: #c00;
    z-index: 100000000000000000000000000000;
    
}

.quote-btn a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    padding: 15px 35px;
    border: 2px solid white;
    border-radius: 5px;
    font-family: "Bebas Neue", serif;
}

.quote-btn a:hover {
    background-color: white;
    color: #c00;
}

header.scrolled .quote-btn a{
    border: 1px solid #c00;
    color: #cc0000;
    z-index: 100000000000000000000000000000;
}

header.scrolled #menu-btn{
    color: #C00;
    z-index: 100000000000000000000000000000;
}

#menu-btn{
    display: none;
}

.overlays {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); 
    z-index: 5;
    display: none;
    transition: opacity 0.3s ease-in-out;
}

header.scrolled .overlays {
    top: 120px; 
}


.hover-effect {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-bottom: 2px;
}

.hover-effect::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: yellow;
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

.hover-effect::before {
    content: "";
    position: absolute;
    right: 40%;
    bottom: 0px;
    width: 0;
    height: 3px;
    border-radius: 10px;
    background-color: yellow;
    transition: width 0.3s ease-in-out, right 0.3s ease-in-out;
}

.hover-effect:hover::after {
    width: 40%;
    left: 0;
    border-radius: 10px;
}

.hover-effect:hover::before {
    width: 50%;
    right: 0;
}

.hover-effect.active::after, 
.hover-effect.active::before {
    width: 0;
}

.scrolled .hover-effect:hover::before, .scrolled .hover-effect:hover::after {
    
    background-color: #c00;
    
    
}

/* main content */

/* debut de banière */

main{
    margin-top: 3%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    
}

.banniere{
    background-image:url(../image/background.png);
    position: relative;
}

.contenu-banniere{
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    top: 0;
    left: 0;
    right: 0;
    position: relative;
}

.banniere-content{
    margin-left: 1%;
    margin-top: 7%;
    width: 40%;
    padding: 4.5rem;
    margin-bottom: 1%;

}

.banniere-content h1{
    font-family: "Bebas Neue", serif;
    font-size: 56px;
    color: #FFD800;
}

.banniere-content p{
    color: #fff;
    font-family: "Roboto", serif;
    font-size: 24px;
}

.banniere-image{
    width: 60%;
    right: 10px;
    margin-top: 9%;
    z-index: 1;
}

.banniere-image img{
    max-width: 100%;
}


.stats{
    background-color: #fff;
    width: 60%;
    margin-left: 20%;
    z-index: 2;
    margin-top: -6%;
    position: absolute;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-around;
    padding: 10px;
    height: 125px;
    align-items: center;
    line-height: 1;
}

.stats .stat{
    text-align: center;
    padding: 5px 45px;
    padding-top: 10px;
    border-radius: 5px;
    font-size: 24px;
}

.stats .stat p{
    font-family: "Bebas Neue", serif;
}

.stats .yellow{
    background-color: #FFD800;

}

.stats .red{
    background-color: #c00;
    color: #fff;

}

.stats .black{
    background-color: #000000;
    color: #fff;

}
/* fin de banière */



/* présentation de bien immobilier */


.title{
    padding: 50px 80px;
    display: flex;
    align-items: center;
}
.barre {
    width: 85px; 
    height: 5px; 
    background-color: #c00;
    margin-right: 25px;
    border-radius: 10px;
}

.texte{
    font-family: "Bebas Neue", serif;
    font-size: 30px;
}

.cadres{
    padding: 0 100px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    place-items: center;
    gap: 30px;
    
}

.cadre{
   
    border: 1px solid #d9d9d9;
    border-radius: 5px;
}

.cadre .cadImage{
    width:100%;
    max-height: 250px;
    padding: 20px;
    border-radius: 5px;
}

.cadre .cadImage img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    aspect-ratio: 16/9;

}

.barres {
    width: 100%; 
    height: 0.5px; 
    background-color: #d9d9d9;
    
}

.detail{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    align-items: center;
}

.detail .nom{
    background-color: #FFD800;
    padding: 0 15px;
    line-height: 0;
    padding-top: 15px ;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-family: "Roboto", serif;
    border-radius: 3px;

}

.detail .metre{
    background-color: #C00;
    padding: 0 15px;
    line-height: 0;
    padding-top: 15px ;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-family: "Roboto", serif;
    border-radius: 3px;
    color: #fff;

}

.map{
    display: flex;
    /*justify-content: space-between;*/
    width: 100%;
    padding: 5px 20px;
    gap: 10px;
    font-family: "Roboto", serif;
    align-items:center;
    margin-bottom: 1rem;
}

.map .maptexte{
    text-align: justify;
}

.map .maptexte p{
    margin-bottom: 0rem !important;
}

.map .icone{
    color: #c00;
    /*margin-top: 10px;*/
}

.price{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 5px  20px;
}

/* fin de présentation de bien immobilier */

/* debut caractéristique */
.description{
    background-color: #C00;
    padding: 80px;
    
}

.contenuDescriptive{
    display: flex;
    justify-content: space-between;
    width: 100%;
    
}

.contenuDescriptive  .contenus{
    width: 40%;
    position: relative;
    
}

.contenus .cadImages{
    width:100%;
    height: 350px;
    border-radius: 150px 0px 0px 0px;

}

.contenus .cadImages img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 150px 0px 0px 0px;
    
}


.contenus .cadImage{
    width:100%;
    height: 250px;
    border-radius: 0px 150px 0px 0px;
    background-color: #FFD800;
    z-index: 1;
    position: absolute;
    margin-left: 70px;
    margin-top: -120px;
}

.contenus .cadImage img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px 150px 0px 0px;
    padding: 20px;
}

.contenuDescriptive .textContent{
    width: 50%;
    color: #fff;
    font-family: "Roboto", serif;
}

.value{
    margin-top: 200px;
    padding: 0px 80px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    place-items: center;
    gap: 10px;
    text-align: center;
}

.value .val1 h1{
    font-size: 30px;
    font-family: "Bebas Neue", serif;
    margin-top: 10px;
    color: #fff;
    text-align: center;
}

/* fin caractéristique */

/* debut testimonial */

.testimonials{
    padding: 0px 80px;
    display: flex;
    justify-content: space-around;
   
}

.testimonial{
    width: 35%;
}

.testimonial h1{
    font-family: "Bebas Neue", serif;
    font-size: 30px;
}

.testimonial p{
    /* font-size: 16px; */
    font-family: "Roboto", serif;
    
}


.swiper{
    overflow: hidden;
    /* width: 100%; */
}

.parte{
    width: 60%;
    /* overflow: hidden; */
}

.swiper-wrapper {
    display: flex;
    transition: transform 0.6s ease-in-out;
    
}

.swiper-slide {
    flex: 0 0 auto;
    width: 50%;
    box-sizing: border-box;
    border: 1px solid #CC0000;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}



/*.testimonial-content .image2{*/
/*    margin-left: 150px;*/
   
/*}*/

.testimonial-content .image2{
    position: absolute;
    right: 0;
    bottom: 0;
}

.testimonial-header{
    font-family: "Bebas Neue", serif;
    font-size: 24px;
    text-align: center;
}

/* .testimonial-text{
    text-align: justify;
} */

.testImg{
    margin-top: -200px;
}


/* fin testimonial */

/* debut de localisation map des biens */
.decouvre{
    background-image: url('../image/BackgroundImg.png');
    margin-top: 80px;
}

.localisation-bien{
    padding: 80px;
    display: flex;
    justify-content: space-between;
}

.presentation-endroit{
    width: 45%;
}

.presentation-endroit .title{
    padding: 0;
    margin-bottom: 50px;
}

.maplocalisation{
    width: 50%;
}

#map{
    height: auto;
}

/* fin de localisation map des biens */

/* Actualité */

.cadreActu{
    padding: 0 100px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    place-items: center;
    gap: 30px;
    
}

.cadreActu .cadre1{
    position: relative;
}


.cadre1 .cadImage{
    width:100%;
    max-height: 250px;
    padding: 20px;
    border-radius: 5px;
}

.cadre1 .cadImage img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    aspect-ratio: 16/9;
}

.text-actu{
    padding: 20px;
    text-align: justify;
}

.read{
    padding-left: 20px;
    color: #C00;
}

.read a{
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    color: #C00;
}


.metres{
    right: 20px;
    background-color: rgba(204, 0, 0, 0.8);
    text-align: center;
    width: 60%;
    height: 30px;
    color: #fff;
    border-radius: 0.2rem;
    margin-top: -50px;
    position: absolute;
}

/* fin Actualité */

/* footer */

footer{
    background-image:url('../image/footer.png');
    background-repeat: no-repeat;
    height: 600px;
    width: auto;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.logoF img{
    width: 100px;
    margin-left: 800px;
    margin-top: 275px;
}

.menu{
    margin-left: 600px;
    margin-top: 25px;
}

.nav-link {
    list-style: none;
    display: flex;
    gap: 20px;
    z-index: 10;
}

.nav-link li {
    position: relative;
    z-index: 10;
}

.nav-link a {
    text-decoration: none;
    color: white;
    font-size: 24px;
    font-family: "Bebas Neue", serif;
    z-index: 10;
}

header.scrolled .nav-links li a {
  
    color: black;
    z-index: 100000000000000000000000000000;
    
}

.nav-link .active a {
    position: relative;
    z-index: 10;
}

.nav-link .active a::after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #FFD800;
    position: absolute;
    bottom: -5px;
    left: 0;
    border-radius: 10px;
    z-index: 10;
}

.scrolled .nav-link .active a::after {
    
    background-color: #c00;
    z-index: 10;
    
}

.info1{
    color: white;
    display: flex;
    justify-content: space-between;
    width: 45%;
    white-space: nowrap;
    margin-left: 570px;
    margin-top: 25px;
    font-family: "Roboto", serif;
}

.info1 i{
    margin-bottom: 8px;
    
}

.info1 p{
    font-weight: bold;
}

.info1 .lieu, .info1 .mail, .info1 .phone{
    display: flex;
    align-items: center;
}

.info1 .phone i{
    margin-right: 12px;
}

.end1{
    display: flex;
    color: white;
    justify-content: space-between;
    width: 10%;
    margin-left: 780px;
    margin-top: 25px;
}

.copy{
    color: #fff;
    font-family: "Roboto", serif;
    margin-left: 680px;
    margin-top: 50px;
    font-weight: bold;
    margin-bottom: 0rem !important;
}



/* fin footer */



/* -------------------------
        page about
----------------------------*/

/* banniere */

.banniereab{
    background-image: url("../image/propos.png");
    margin-top: 7%;
    height: 450px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.banniere-contentabout h1 {
    color: #fff;
    text-align: end;
    padding-right: 150px;
    padding-top: 14%;
    font-family: "Bebas Neue", serif;
    font-size: 4rem;
    
}



/* fin banniere */


/* section a propos */

.about-enterprise{
    display: flex;
    justify-content: space-between;
    padding: 0px 80px;
    gap: 30;
}

.dg{
    width: 40%;
    position: relative;
}

.dg-img{
    height: auto;
    padding: 20px;
    border-radius: 5px;
}

.dg-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.dg-exp img{
   max-width:180px;
}

.dg-exp{
    margin-left: 270px;
    margin-top: -125px;
}

.entreprise-decrit{
    width: 55%;
}

.decouvres{
    background-image: url("../image/fond_immo.png");
}

.values{
    padding: 0px 80px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    place-items: center;
    gap: 10px;
}

.values .val1{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.values .val1 h1{
    font-size: 30px;
    font-family: "Bebas Neue", serif;
    margin-top: 10px;
    
}

/* fin section a propos */


/* section équipe */

.barress {
    width: 85px; 
    height: 5px; 
    background-color: #fff;
    margin-right: 25px;
    border-radius: 10px;
}

.textes{
    font-family: "Bebas Neue", serif;
    font-size: 30px;
    color: #fff;
}


.cadreEquipe{
    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    place-items: center;
    gap: 10px;
    
}

.cadreE{
    
    padding-bottom: 0.5rem;
    background-color: #fff;
    border-bottom-right-radius: 80px;
}

.cadreE .cadImageE{
    width:100%;
    height: 250px;
    
}

.cadreE .cadImageE img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom-right-radius: 80px;
    aspect-ratio: 16/9;
}

.infoEquipe{
    padding: 20px;
}

.infoEquipe h6, .infoEquipe p{
    font-family: "Bebas Neue", serif;
    font-size: 24px;
}

.infoEquipe p{
   color: #C00;
}

/* fin section équipe */


/* section presentation des sites avec lien */

.titles{
    padding: 50px 0px;
    display: flex;
    align-items: center;
}

.testimonial ul li{
    font-family: "Roboto",serif;
    color: #C00;
}

.first, .second {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.first-img, .second-img{
    height: 200px;
    border-radius: 5px;
    position: relative; 
    display: inline-block;
}

.first-img img, .second-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;

    
}

.first-img p{
    position: absolute;
    top: 90px;
    text-align: center;
    font-family: "Bebas Neue";
    color: #fff;
    font-size: 28px;
    width: 100%;
    opacity: 0;
    z-index: 5;
}

.second-img p{
    position: absolute;
    top: 90px;
    text-align: center;
    font-family: "Bebas Neue";
    color: #fff;
    font-size: 28px;
    width: 100%;
    opacity: 0;
    z-index: 5;
}


.first-img .overlay, .second-img .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    background-color: rgba(255, 0, 0, 0.7); 
    z-index: 1; 
    display: none;
}

.first-img:hover .overlay {
    display: block; 
}

.first-img:hover p{
    opacity: 1;
}

.second-img:hover .overlay {
    display: block; 
}

.second-img:hover p{
    opacity: 1;
}


/* fin section presentation des sites avec lien */


/* les partenaires */

.patern{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    gap: 30px;
    padding: 0px 80px;
}

.patern .patern-image{
    max-width: 250px;
    max-height: 150px;
    overflow: hidden;
    aspect-ratio: 16/9;
    padding: 1rem;
    background-color:#fff ;
    border: 2px solid #C00;
}

.patern .patern-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* fin des partenaires */


/* -------------------------
        page offre
----------------------------*/

.banniereoffre{
    background-image: url("../image/BANIERE2.jpg");
    margin-top: 7%;
    height: 450px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.teteoffre{
    padding-top: 10% !important;
}



.offre-enterprise{
    display: flex;
    justify-content: space-between;
    padding: 0px 80px;
    gap: 30;
}

.locat, .locats{
    width: 53%;
    
}

.locat a{
    text-decoration: none;
    background-color: #C00;
    color: #fff;
    padding: 10px 55px;
    font-family: "Bebas Neue", serif;
    font-size: 24px;
    border-radius: 5px;
    
}

.loc , .locs{
    width: 45%;
    height: 400px;
    padding: 10px 10px 0px 10px;
    border-radius: 15px;
    /* background-color: #C00; */
}

.loc-img, .locs-img, .locs1-img {
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

.loc-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    border: 5px solid #c00;
}

.locs-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    border: 5px solid #FFD800;
}

.locats a{
    text-decoration: none;
    background-color: #FFD800;;
    color: #000;
    padding: 10px 55px;
    font-family: "Bebas Neue", serif;
    font-size: 24px;
    border-radius: 5px;
    
}

.cadre .cadImaget{
    width:100%;
    height: 250px;
    padding: 20px;
    border-radius: 5px;
}

.cadre .cadImaget img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom-left-radius: 80px;
    aspect-ratio: 16/9;
}

.cadre {
    text-align: center;
}

.cadre a{
    text-decoration: none;
    background-color: #C00;
    color: white;
    padding: 8px 20px;
    border-radius: 5px;
    display: inline-block;
    margin: 10px 0px;
    text-align: center;
}

.detail .metress{
    background-color: #000;
    padding: 0 15px;
    line-height: 0;
    padding-top: 15px ;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-family: "Roboto", serif;
    border-radius: 3px;
    color: #fff;

}


/* -------------------------
        page service
----------------------------*/

.banniereservice{
    
    background-image: url("../image/banière\ SERVICES.png");
    margin-top: 7%;
    height: 450px;
    width: 100%;
    background-size: cover;
    background-position: center;
    
}

.banniereservice .banniere-contentabout h1{
    padding-top: 10%;
}

.titles1{
    padding: 10px 0px 0px 0px;
    display: flex;
    align-items: center;
}

.values1{
    width: 100%;
    /* justify-content: space-between; */
    display: flex;
    gap: 50px;
    text-align: center;
    margin: 50px 0px;
}

.values1 .val1 p{
    font-size: 16px;
    font-weight: bold;
    font-family: "Roboto", serif;
    margin-top: 10px;
    color: #000;
}

.values1 .val1 i{
    font-size: 24px;
    color: #C00;
}

.locs1-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    
}

.loc1{
    width: 45%;
    height: 500px;
    padding: 10px 10px 0px 10px;
    border-radius: 15px;
    /* background-color: #C00; */
}

/* -------------------------
        fin page service
----------------------------*/



/* -------------------------
        page actualité
----------------------------*/

.banniereconseil{
    
    background-image: url("../image/CONSEIL.jpg");
    margin-top: 7%;
    height: 450px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}



.accordion-button {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Bebas Neue", serif;
}

.accordion-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: auto; /* Place à droite */
    background-color: transparent;
    border: none;
    transition: transform 0.3s ease;
}

/* Icône "plus" par défaut */
.accordion-button.collapsed .accordion-icon {
    content: '+';
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-plus" viewBox="0 0 16 16"><path d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5a.5.5 0 0 1 .5-.5z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Icône "croix" quand l'élément est ouvert */
.accordion-collapse.show + .accordion-header .accordion-icon,
.accordion-button:not(.collapsed) .accordion-icon {
    content: '×';
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.accordion-button::after {
    content: none; /* Supprime les chevrons par défaut */
}

.accordion-button {
    background-color: transparent; 
    border: none; 
    box-shadow: none; 
    /* padding: 0;  */
    font-size: 18px; 
    color: inherit;
    /* text-align: left;  */
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;
}

.accordion-button:focus {
    outline: none; 
    box-shadow: none; 
    border: none; 
}

.accordion-item {
    border: none; 
    border-bottom: 1px solid #d9d9d9;
    border-radius: none;
}

.accordion-button:not(.collapsed) {
    background-color: transparent; 
    color: inherit; 
    box-shadow: none; 
    
}
.accordion-collapse {
    border: none;
}

.accordion-body {
    background-color: transparent; 
    padding: 1rem;
    font-weight: 200;
    
}


/* -------------------------
        page fin actualité
----------------------------*/




/* -------------------------
        page contact
----------------------------*/




.bannierecontact{
    background-color: #C00;
    margin-top: 7%;
    height: 270px;
    display: flex;
    gap: 80px;
    position: relative;

}

.banniere-contentcontact{
   margin-top: 6%;
}

.banniere-contentcontact h1 {
    color: #fff;
    text-align: center;
    font-family: "Bebas Neue", serif;
    font-size: 6rem !important;
}

.banniere-contentcontact p{
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-family: "Roboto", serif;
   
}

.image-container {
    width: 20%;
    height: 400px;
    margin-left: 80px;
    overflow: hidden;
    border-radius: 135px 135px 0 0 ;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 135px 135px 0 0;
    margin-top: 7%;

}

.icons{
    display: flex;
    justify-content: space-between;
    width: 60%;
    margin-left: 30%;
    margin-top: 50px;
    text-align: center;
}

.icons .icone i{
    color: #C00;
    margin-bottom: 15px;
    font-size: 24px;
}


.localisationMap{
    padding: 80px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.mapLocat .end{
    font-size: 24px;
    display: flex;
    gap: 30px;
    width: 50%;
    margin: 0 auto;
    margin-top: 30px;
}


.formulaire{
    
    width: 50%;
    background-image: url("../image/backgroundform.png");
    border-radius: 5px;
    height: 450px;
    background-size: cover;
    background-position: center;
}

 .formulaire form {
    display: flex;
    flex-direction: column; 
    align-items: center;
    margin-top: 5%;
    justify-content: center;
}

 .formulaire form .present {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 1%;
}

 .formulaire form .present .div{
    width: 45%;
    margin-bottom: 2%;

}

 .formulaire .present .div  input{
    width: 100%;
    margin-bottom: 2%;
    padding: 0.5rem;
    border: 1px solid #C00;
    border-radius: 3px;
    
    
}

 .formulaire input::placeholder{
    color: #3c3c3c;
    font-weight: 100;
    font-size: 12px;
}

 .formulaire textarea::placeholder {
    color: #3c3c3c;
    font-weight: 100;
    font-size: 12px;
}

.formulaire select::placeholder{
    color: #3c3c3c;
    font-weight: 100;
    font-size: 12px;
}

 .formulaire select{
    width: 91%;
    margin: 2%;
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid #C00;
    border-radius: 3px;
    color: #3c3c3c;
    font-size: 13px;
    
}

 .formulaire select option{
    font-size: 14px;
}

 .formulaire textarea{
    width: 91%;
    margin: 2%;
    height: 180px;
    background-color: #fff;
    border: 1px solid #C00;
    border-radius: 3px;
}

 .formulaire button{
    background-color: #C00;
    color: #fff;
    border: none;
    padding: 0.5rem 3rem;
    border-radius: 3px;
    text-transform: uppercase;
    text-align: center;
    font-family: "Bebas Neue", serif;
}


/* -------------------------
        page fin contact
----------------------------*/



/* -------------------------
        page debut detail offre
----------------------------*/


.locat{
    width: 60%;
}

.photo-site, .photo-sites{
    width: 38%;
}

.photo-sites{
    padding-left: 15px;
}

.loca{
    width: 100%;
    height: 250px;
    padding: 10px 10px 0px 10px;
    border-radius: 5px;
    
}

.loca-img{
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

.loca-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    
}

.details{
    display: flex;
    gap: 30px;
    width: 100%;
    align-items: center;
}

.details .nom{
    background-color: #C00;
    padding: 0 15px;
    line-height: 0;
    padding-top: 15px ;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-family: "Roboto", serif;
    border-radius: 3px;
    color: #fff;

}

.details .metre{
    background-color: #000;
    padding: 0 15px;
    line-height: 0;
    padding-top: 15px ;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-family: "Roboto", serif;
    border-radius: 3px;
    color: #fff;

}

.video-container {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 80px 10px 80px;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    border-radius: 10px; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; 
    height: 80px;
    background-color: rgba(204, 0, 0); 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.play-button img {
    width: 30px; 
    height: auto;
}

.lien{
    padding: 0 100px;
    margin-top: 12px;
}

.lien a{
    text-decoration: none;
    color: #fff;
    background-color: #C00;
    padding: 10px 20px;
    font-family: "Bebas Neue", serif;
    border-radius: 4px;
    display: inline-block;
}


.details .pieces-villa {
    background-color: #FFD800;
    padding: 0 15px;
    line-height: 0;
    padding-top: 15px ;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-family: "Roboto", serif;
    border-radius: 3px;
    color: #000;

}



/* -------------------------
        page fin detail offre 1 et 2
----------------------------*/




/* -------------------------
        page detail actu
----------------------------*/

.actu{
    width: 100%;
    height: 450px;
    padding: 10px  0px ;
    border-radius: 5px;
    
}

.actu-img{
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

.actu-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    
}


.detail-actu{
    display: flex;
    justify-content: space-between;
}

.detail-date{
    display: flex;
    gap: 30px;
}

.detail-date .redacteur, .detail-date .date{
    display: flex;
    gap: 10px;
}

.detail-date i{
    color: #C00;
    margin-top: 4px;
}

.dossier{
    display: flex;
    gap: 10px;
}

.dossier i {
    color: #C00;
    margin-top: 4px;
}


.category{
    background-color: rgb(217, 217, 217, 0.5);
    border-radius: 8px;
    padding: 2rem;
    margin-top: 80px;
}

.category h5{
    margin-bottom: 1rem;
    font-family: 'Bebas Neue', serif;
    font-size: 30px;
}

.category1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 5px;
}

.category1.active{
    background-color: #C00;
    color: #fff;
}

.reads{
    
    color: #C00;
}

.reads a{
    text-decoration: none;
    font-weight: bold;
    color: #C00;
    font-size: 18px;
}


/* -------------------------
        page fin detail actu
----------------------------*/


/* -------------------------
      responsive
----------------------------*/

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

    .banniere-content h1{
        font-size: 48px;
    }

    .banniere-image{
        margin-top: 12%;
    }


    .stats{
        margin-top: -7%;
    }

    .stats .stat{
        padding: 5px 25px;
    }

    .banniere-content{
        margin-top: 10%;
    }

    .banniere-content p{
        font-size: 18px;
    }
    
    .testImg{
        margin-top: 2px;
    }


    .logoF img{
        width: 80px;
        margin-left: 650px;
        margin-top: 300px;
    }
    
    .menu{
        margin-left: 0px;
        margin-top: 25px;
    }
    
    .nav-link {
        margin-left: 500px;
    }
    
    .nav-link li a{
        font-size: 18px;
    }
    
    
    .info1{
        width: 50%;
        margin-left: 450px;
        margin-top: 25px;
       
    }
    
    .info1 p{
        font-size: 14px;
        
    }
    
    .info1 i{
        margin-bottom: 8px;
        
    }
    
    .info1 p{
        margin-top: 5px;
    }
    
    
    .end1{
        
        margin-left: 660px;
     
    }
    
    .copy{
        margin-left: 630px;
        font-size: 14px;
        font-weight: bold;
    }
    
    /*.testimonial-content .image2{*/
    /*    margin-left: 200px;*/
       
    /*}*/
    
    .testimonial-content .image2{
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .banniere-contentabout h1{
        font-size: 3.6rem;
        padding-top: 18%;
    }

    .dg-exp img{
        max-width: 130px;
    }

    .cadreEquipe{
    
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       
    }

    .image-container img{
        margin-top: 15%;
    }

}



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

    p{
        font-size: 16px;
    }
   
    .quote-btn{
        display: none;
    }
    
    #menu-btn{
        display: block;
        /* margin-right: 10%; */
        color: white;
    }
    .nav-links { 
        display: none; 
        flex-direction: column;
        position: absolute; 
        top: 90px; 
        left: 0; 
        background: #C00; 
        width: 100%; 
        padding: 20px 80px; 
        gap: 10px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        
    }
            
    .nav-links li { 
        margin: 10px 0; 
        text-align: center; 
    }
            
    .nav-links a { 
        color: #fff; 
    }
            

    .nav-links.active {
        display: flex; 
        flex-direction: column;
        width: auto !important;
        opacity: 1;
        visibility: visible;
    }

    .nav-links .list{
        flex-direction: column;
        align-items: start;
        padding: 1rem !important;
    }

    .menu .list ul li a:hover{
        color: #CC0000;
    }

    header.scrolled .nav-links {
        top: 110px; 
        background-color: #fff;
    }

    header.scrolled .nav-links li a{
        color: #000;
    }

    .scrolled .nav-links .active a::after {
    
        background-color: #c00;
        z-index: 100000000000000000000000000000;
        
    }

    .banniere-content p{
    font-size: 16px;
    }

    .banniere-content h1{

        font-size: 30px;
    
    }

    .stats{
    
        max-width: 70%;
        gap: 10px;
    }

    .stats .stat{
        font-size: 16px;
    }

    .contenuDescriptive .textContent{
        font-size: 14px;
        padding-left: 15px;
    }

    .value{
        margin-top: 50px;
        
    }

    .testImg{
        margin-top: 0px;
        width: 700px;
    }

    .testImg img{
        width: 100%;
    }

    .testimonial-content .image2{
        margin-left: 300px;
    
    }

    .text-actu{
        font-size: 16px;
    }

    .logoF img{
        width: 80px;
        margin-left: 600px;
        margin-top: 300px;
    }

    .menu{
        margin-left: 0px;
        margin-top: 25px;
    }

    .nav-link {
        margin-left: 420px;
    }

    .nav-link li a{
        font-size: 18px;
    }

    .info1{
        width: 50%;
        margin-left: 400px;
        margin-top: 25px;
    
    }

    .info1 p{
        font-size: 14px;
    }

    .info1 i{
        margin-bottom: 8px;
        
    }

    .info1 p{
        margin-top: 5px;
    }


    .end1{
        
        margin-left: 630px;
    
    }

    .copy{
        margin-left: 580px;
        font-size: 14px;
    }

    .dg-exp{
        margin-left: 170px;
        margin-top: -125px;
    }

    .first-img p , .second-img p{
        font-size: 24px;
    }

    .banniere-contentabout h1{
        padding-top: 25%
    }
    .teteoffre{
        padding-top: 15% !important;
    }

    .banniere-contentabout{
        position: relative;
        z-index: 5;
    }
    
    .banniere-contentabout h1{
        padding-top: 20%;
        z-index: 5;
    }
    
    .overlayss {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }

    .overlays2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }

    .banniereservice{
        position: relative;
    }


    .banniereservice .banniere-contentabout h1{
        padding-top: 20%;
    }


    .image-container img{
        margin-top: 25%;
    }

    .banniere-contentcontact h1 {
        font-size: 5rem !important;
        margin-top: 5%;
    }

    .icons {

        margin-left: 35%;
       
    }

}


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


.banniere-image{
    margin-top: 12%;

}

.banniere-content h1{
    font-size: 24px;
}


.contenuDescriptive .textContent{
    font-size: 14px;
    padding-left: 25px;
}

.value{
    margin-top: 50px;
    padding: 0 50px;
}

.value .val1 h1{
    font-size: 24px;
}

.testImg{
    margin-top: 0px;
    width: 700px;
}

.testImg img{
    width: 100%;
}


.presentation-endroit{
    width: 55%;
}

.maplocalisation{
    width: 45%;
}

.logoF img{
    width: 80px;
    margin-left: 550px;
    margin-top: 300px;
}


.nav-link {
    margin-left: 370px;
}


.info1{
    width: 60%;
    margin-left: 300px;
    margin-top: 25px;

}


.end1{
    
    margin-left: 550px;

}

.copy{
    margin-left: 500px;
    font-size: 14px;
}

.dg-exp{
    margin-left: 140px;
    
}

.banniereab, .banniereconseil, .banniereservice{
    height: 400px;
}

.banniereoffre{
    height: 400px;
    position: relative;
}

.banniere-contentabout{
    position: relative;
    z-index: 5;
}

.banniere-contentabout h1{
    padding-top: 20%;
    z-index: 5;
}

.overlayss {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.overlays2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.texte, .textes{
    font-size: 24px;
}

.values1{
    gap: 30px;
}

.image-container img{
    margin-top: 35%;
}

}


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

.stats{
   
    width: 80%;
    gap: 10px;
    margin-top: -10%;
    margin-left: 15%;
}

.contenuDescriptive{
    display: block;
}

.contenuDescriptive .contenus{
    width: 100%;
}

.contenuDescriptive .textContent{
    margin-top: 150px;
    width: 100%;
}


.contenuDescriptive .textContent{
    font-size: 14px;
    padding-left: 25px;
}

.value{
    margin-top: 50px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    padding: 0 50px;
}

.testImg{
    display: none;
}

.testImg img{
    width: 100%;
}

.testimonials{
    
    display: block;
   
}

.testimonial{
    width: 100%;
}

.parte{
    width: 100%;
}


.testimonial-content .image2{
    margin-left: 220px;
   
}


.cadres{
   
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    
}

.localisation-bien{
    display: block;
}

.presentation-endroit{
    width: 100%;
}

.maplocalisation{
    width: 100%;
}

#map{
    height: 400px;
    width: 100%;
    margin-top: 50px;
}


footer{
    background-image:none;
    background-color: #C00;
    height: 360px;
   
}

.logoF{
    text-align: center;
}

.logoF img{
    width: 80px;
    margin-left: 0px;
    margin-top: 50px;
}


.nav-link {
    justify-content: center;
    margin: 0;
    margin-bottom: 25px;
}


.info1{
    width: 80%;
    margin: 0 auto;
}


.end1{
    
    margin: 0 auto;
    margin-top: 25px;
 
}

.copy{
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    border-top: 1px solid white;
    text-align: center;
}

.about-enterprise{
    display: block;
}

.dg{
    width: 100%;
}

.entreprise-decrit{
    width: 100%;
}
.dg-exp{
    margin-left: 500px;
    margin-top: -100px;
}

.dg-img{
    max-width:100%;
    height: auto;
}

.offre-enterprise{
    display: block;
}

.locat, .locats{
    width: 100%;
}

.loc, .locs, .loc1{
    width: 100%;
    padding: 20px 0px;
}

.photo-site, .photo-sites{
    width: 100%;
    
}

.photo-sites{
    padding-left: 0;
}

.banniereservice .banniere-contentabout h1{
    padding-top: 20%;
}

.banniere-contentcontact h1 {
    font-size: 4rem !important;
    
}

.localisationMap{
    display: block;
}

.localisationMap .mapLocat{
    width: 100%;
    margin-bottom: 100px;
}

.localisationMap .mapLocat .frame iframe{
    width: 100%;
}

.localisationMap .formulaire{
    width: 100%;
    padding: 20px 0 40px 0;
}

.locats.ps-5 {
    padding-left: 0rem !important;
}

.locat.ps-5 {
    padding-left: 0rem !important;
}

}


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

    p{
        font-size: 14px;
    }

    .banniere-content p{
        font-size: 14px;
    }
 
    .cadreActu{
        
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        
        
    }

    .text-actu{
        font-size: 14px;
    }

    .metres{
        font-size: 14px;
        height: 20px;
        margin-top: -40px;
        width: 70%;
    }

    .dg-exp{
        margin-left:450px;
    }
    
    .testimonial ul li{
        font-size: 14px !important;
    }

    .image-container img{
        margin-top: 40%;
    }

    .banniere-contentcontact h1 {
       
        margin-top: 10%;
    }

    .bannierecontact{
        gap: 50px;
    }

}

@media  screen and  (max-width: 682px){
    
    .stats{
        margin-top: -12%;
    }

    .banniere-image{
       margin-top: 19%;
    }
    
    .stats .stat{
        font-size: 14px;
        padding: 25px;
        gap: 10px;
    }

    .banniere-contentabout h1{
        padding-top: 25%;
        padding-right:80px;
    }

    .teteActu{
        padding-top: 35%;
    }
}

@media  screen and  (max-width: 675px){
    .contenu-banniere{
        display: block;
        overflow-x:hidden;
    }

    .banniere-image{
        width: 100%;
        max-width: 100%;
        right: 0;
        margin-top: 0;
    }

    .banniere-content{
        width: 100%;
        margin-bottom: 0;
        margin-top: 10%;
        padding-bottom:0rem;
    }

    .dg-exp{
        margin-left:350px;
    }
    
    .value{
        margin-top: 50px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        padding: 0 30px;
    }

    .image-container img{
        margin-top: 50%;
    }

    .banniere-contentcontact h1 {
        font-size: 3rem !important;
        margin-top: 20%;
    }

}

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

    .stats{
        padding: 0px 10px;
        padding-top: 0px;
    }

    .stats .stat{
        padding: 5px 25px;
    }

    .metres{
        font-size: 14px;
        height: 30px;
        margin-top: -42px;
        width: 40%;
    }

    .dg-exp{
        margin-left:300px;
    }
    
    .values{
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 20px;
    }
    
   .title{
    padding: 50px 50px;
   }

   .patern{
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   }

   .banniereab , .banniereoffre, .banniereconseil, .banniereservice{        
    height: 300px;
   }

   .banniere-contentabout h1{
    font-size: 3rem;
    padding-top: 25%;
    
    }

    .teteoffre{
        padding-top: 20% !important;
    }
    
    .banniereservice .banniere-contentabout h1{
        padding-top: 20%;
    }

    .banniere-contentcontact h1 {
        font-size: 2.5rem !important;
        margin-top: 20%;
    }

    .image-container img{
        margin-top: 60%;
        height: 300px;
    }

    .image-container{
        width: 25%;
        margin-left: 50px;
    }

    .banniere-contentcontact h1 {
        font-size: 2.5rem !important;
        margin-top: 30%;
    }

    

    .icons{
        margin-top: 30px;
    }

    
    .icons .icone i {
    font-size: 14px;
    }

    .icons .icone p {
        font-size: 12px;
    }
}


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

    .barre {
        width: 50px; 
        
    }

    .metres{
        font-size: 14px;
        height: 30px;
        margin-top: -50px;
        width: 50%;
    }

    .stats{
        max-width: 90%;
        padding: 5px 20px;
        margin-left: 10%;
        margin-top: -20%;
    }
    
    .stats .stat{
        padding: 15px 5px 5px 5px;
        
    }

    .info1{
        width: 90%;
        margin: 0 auto;
    }

    .end1{
        width: 20%;
    }


    .value .val1 h1{
        font-size: 24px;
        
    }

    .values .val1 h1{
        font-size: 24px;
        
    }

    .value .val1 img{
        width: 48px;
    }

    .texte,.textes{
        font-size: 24px;
    }

    .testimonial h1{
        font-size: 24px;
    }

    
    .testimonial-content .image2{
        margin-left: 120px;
       
    }

    .dg-exp{
        margin-left:230px;
    }
    
    .values{
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 20px;
    }
    
   .title{
    padding: 50px 50px;
   }

   .patern{
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

    .values .val1 img{
        width: 48px;
    }

    .first-img p, .second-img p{
        font-size: 18px;
    }

    .teteoffre{
        padding-top: 25% !important;
    }

    .loc , .locs, .locs1-img{
        height: 300px;
    }

    .play-button{
        width: 50px;
        height: 50px;
    }

    .play-button img{
        width: 20px;
    }

    .value{
        margin-top: 50px;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        padding: 0 20px;
    }

    .banniere-contentcontact h1 {
        font-size: 2.5rem !important;
        margin-top: 35%;
    }

    .image-container{
        margin-top: 3%;
    }

}

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

    .title{
        padding: 40px 50px;
        
    }

    .titles{
        padding: 10px 0px;
        
    }
    

    p{
        font-size: 12px;
    }


    .cadreActu{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .cadres{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .cadres, .cadreActu{
        padding: 0 50px;
    }


    .text-actu{
        font-size: 12px;
    }

    .read a{
        font-size: 14px;
    }

    .reads a{
        font-size: 14px;
    }

    .category h5{
        font-size: 24px;
    }

    .category h6{
        font-size: 16px;
    }

    .detail-actu i{
        font-size: 12px;
    }

    .metres{
        font-size: 14px;
        height: 25px;
        margin-top: -45px;
        width: 70%;
    }

    .nav-link li a{
        font-size: 16px;
    }

    .nav-link {
        
        gap: 10px;
       
    }
    

    .info1{
        width: 90%;
        margin: 0 auto;
    }

    .info1 i{
        font-size: 12px;
        margin-bottom: 12px;
        
    }

    .info1 p {
        font-size: 12px;
    }

    .info1 .phone i{
        margin-right: 8px;
    }

    .end1{
        width: 20%;
    }

    .value{
        margin-top: 50px;
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        padding: 0px;
    }


    .value .val1 h1{
        font-size: 18px;
        
    }

    .value .val1 img{
        width: 48px;
    }

    .texte,.textes{
        font-size: 18px;
    }

    .testimonial h1{
        font-size: 18px;
    }

    .contenus .cadImages{
        height: 250px;
    
    }

    .banniere-contentabout h1{
        font-size: 2rem;
        padding-top: 35%;
        padding-right: 30px;
    }

    .banniereservice .banniere-contentabout h1{
        padding-top: 30%;
    }

    .dg-exp{
        margin-left:200px;
    }
    
    .values .val1 img{
        width: 48px;
    }

    .values .val1 h1{
        font-size: 18px;
        
    }

    .first-img p, .second-img p{
        font-size: 14px;
        top: 40px;
    }

    .first-img, .second-img{
        height: 100px;
    }

    .teteoffre{
        padding-top: 30% !important;
        font-size: 2rem !important;
    }

    .dg-img{
        padding: 20px 0px;
    }

    .locat h1{
        font-size: 24px;
    }

    .details{
        gap: 10px;
    }

    .actu{
        height: 300px;
    }

    .testimonial ul li{
        font-size: 12px !important;
    }

    .values1{
        gap: 20px;
    }

    .values1 .val1 p{
        font-size: 14px;
    }

    .locat a , .locats a{
        padding: 10px 30px;
        font-size: 16px;
    }

    /* .loc1{
        padding: 30px 0;
    } */

    .values1 .val1 i {
        font-size: 16px;
      
    }
  
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }


    .image-container{
        width: 25%;
        height: 350px;
        margin-left: 30px;
    }

    .image-container img{
        margin-top: 85%;
    }
  
    .icons .icone p {
        font-size: 8px;
    }

    .localisationMap{
        padding: 20px 50px;
    }

    .localisation-texte{
        padding: 0 50px !important;
    }

    .banniere-contentcontact h1 {
        font-size: 2rem !important;
        margin-top: 45%;
    }

    .bannierecontact{
        gap: 20px;
    }

    .banniere-contentcontact p{
        font-size: 10px;
    }

    .offre-enterprise, .about-enterprise, .values, 
.testimonials, .localisation-bien, .patern, .accordion, .video-container, .btp{
    padding: 0px 50px !important;
}

}

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

    .barre {
        width: 50px; 
    }


    .texte, .textes{
        font-size: 16px;
    }

    .value .val1 h1{
        font-size: 16px;
        
    }

    .value .val1 img{
        width: 36px;
    }

    .stats{
       
        margin-top: -25%;
    }

    .banniere-contentabout h1{
        font-size: 3rem;
        padding-top: 35%;
        
    }
   
    .dg-exp img{
        max-width: 100px;
    }

    .dg-exp{
        margin-left:150px;
        margin-top: -80px;
    }

    .values{
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }
    
    .values .val1 img{
        width: 36px;
    }
    
    .values .val1 h1{
        font-size: 16px;
        
    }

    /* .patern{
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    } */

     
      .second{
        display: block;
        
    }

    .second-img{
        width: 100%;
        margin-bottom: 10px;
    }

    .first-img, .second-img{
        height: 100px;
    }

    .second-img p , .first-img p{
        top: 40px;
    }

    .first-img p, .second-img p{
        font-size: 18px;
        top: 40px;
    }

    .teteoffre{
        padding-top: 35% !important;
        
    }

    
   .value{
    margin-top: 50px;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    padding: 0px;
}


.description{
    padding: 80px 50px;
}

.contenus .cadImage{
    margin-left: 40px;
}

.detail-actu p{
    font-size: 8px;
    margin-bottom: 0;
    margin-top: 5px;
}

.image-container{
    width: 25%;
    height: 300px;
    margin-left: 30px;
}

/* .image-container img{
    margin-top: 90%;
} */


.banniere-contentcontact h1 {
    font-size: 2rem !important;
    margin-top: 65%;
}

.bannierecontact{
    gap: 20px;
    height: 250px;
}

.banniere-contentcontact p{
    font-size: 8px;
}

.icons{
    margin-top: 10px;
}

}


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

    .info1{
        width: 90%;
        margin: 0 auto;
    }

    .info1 p{
        font-size: 10px;
    }

    .info1 .phone i{
        margin-right: 5px;
    }

    .nav-link li a{
        font-size: 14px;
    }

    .dg-exp img{
        max-width: 80px;
    }
    
    .banniereab, .banniereconseil, .banniereservice{
        height: 250px;
       }

    .banniere-contentabout h1{
    font-size: 2rem;
    padding-top: 35%;
    padding-right: 30px;
}

.dg-exp{
    margin-left:180px;
}

.loc , .locs, .locs1-img{
    height: 250px;
}


.lien{
    padding: 0 80px;
}


.textContent{
    padding: 0px;
}

.teteActu{
    font-size: 2rem;
    padding-top: 42% !important;
}

.details p{
    font-size: 8px;
}

.accordion-body strong{
    font-size: 12px;
}



.infoEquipe p , .infoEquipe h6{
    font-size: 16px;
}

.values1{
    gap: 10px;
}

   .image-container{
    width: 25%;
    height: 250px;
    margin-left: 30px;
}

.image-container img{
    margin-top: 90%;
}


.banniere-contentcontact h1 {
    font-size: 1rem !important;
    margin-top: 55%;
}

.bannierecontact{
    gap: 20px;
    height: 200px;
}

.banniere-contentcontact p{
    font-size: 8px;
}

.icons{
    margin-top: 10px;
}

}


@media  screen and  (max-width: 334px){
    .barre {
        width: 30px; 
        
    }

    .stats{
       
        margin-top: -30%;
    }

    .texte, .textes{
        font-size: 14px;
    }

    .value .val1 h1{
        font-size: 14px;
        
    }

    .value .val1 img{
        width: 24px;
    }

    .cadres, .cadreActu{
        padding: 0 30px;
    }

    .values{
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    }

    .values .val1 h1{
        font-size: 14px;
        
    }

    .values .val1 img{
        width: 24px;
    }

    .banniere-contentabout h1{
        padding-top: 45%;
    }


    .teteoffre, .teteActu {
        padding-top: 45% !important;
        
    }

    .banniereservice .banniere-contentabout h1{
        padding-top: 35% !important;
        
    }

    
    .values1 .val1 p{
       font-size: 12px;
    }


   .locat h1{
    font-size: 24px;
   }

   


  
}

@media  screen and  (min-width: 1200px){

    .banniereab, .banniereoffre{
        margin-top: 0%;
    }


    .cadres, .cadreActu, .value {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px;
    }

    .cadreEquipe {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 20px;
    }

    .values, .patern {
        display: grid;
        grid-template-columns: repeat(5, 1fr); 
        gap: 20px;
    }

    .parte{
        width: 40%;
    }
}

@media  screen and  (min-width: 1300px){

    .banniereab, .banniereoffre, .banniereconseil , .banniereservice{
        margin-top: 0%;
    }

    .banniere-contentabout h1 {
        padding-top: 15%;   
    }

    .info1{
        width: 35%;
        
    }

    footer{
        height: auto;
    }

    .cadres {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Toujours 3 colonnes */
        gap: 20px;
    }

    .parte{
        width: 30%;
    }
    
    .info1 i, .info1 p{
        margin-bottom: 0;
    }

    .formulaire{
        height: auto;
    }
}

@media  screen and  (min-width: 1500px){

    .banniereab, .banniereoffre, .banniereconseil , .banniereservice, .bannierecontact{
        margin-top: 0%;
    }

    .banniere-contentabout h1 {
        padding-top: 13%;   
    }

    .metres {
        
        margin-top: -48px;
       
    }

    .image-container  {
        margin-top: 5%;
    }

    .bannierecontact{
        height: 350px;
    }

    .banniere-contentcontact{
        margin-top: 10%;
    }
}


@media  screen and  (min-width: 1600px){
    .contenu-banniere, .navbar, .wrap, .banniere-contentabout, .contact-banniere{
        max-width: 1500px;
        margin: 0 auto;
    }

    .wraps{
        max-width: 1300px;
        margin: 0 auto;
    }

    .stats{
        max-width: 800px;
        margin-left: 32%;
        margin-top: -3%;

    }

    p{
        font-size: 20px;
    }

    .icons{
        max-width: 800px;
        margin-left: 40%;
    }
}