.notre__agence{
padding: 10px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.agence__description{
width:80%;
& h1{
font-family: 'PoppinsBlack';
padding: 10px 0;
margin: 0;
width: 80%;
color: var(--orange);
font-size: 2.5rem;
}
}
.agence__description__container{
display:flex;
gap:50px;
width:100%;
& img{
width:55%;
height:100%;
object-fit: cover;
}
}
.agence__textes{
display:flex;
flex-direction: column;
gap:20px;
width:40%;
& p{
margin:0;
padding:0;
font-size:1.2rem;
}
& span{
font-family:'PoppinsBold';
}
} .agence__box{
width:80%;
padding:50px 0;
}
.agence__box__container{
display:flex;
gap:30px;
}
.agence__box__item{
position:relative;
width:33%;
padding: 20px 0;
& h3{
font-family: 'PoppinsBlack';
padding: 0;
margin: 0;
width: 80%;
color: var(--orange);
font-size: 2rem;
line-height:0.8;
position: relative;
z-index: 1;
}
& p{
position: relative;
z-index: 1;
& span{
font-family:'PoppinsBold';
}
}
} .famille__elargie{
padding: 20px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.famille__elargie__container{
width:80%;
display: flex;
flex-direction: column;
align-items: center;
& h2{
font-family: 'PoppinsBlack';
padding: 0;
margin: 0;
width:100%;
color: var(--orange);
font-size: 2.5rem;
text-align:left;
}
& p{
font-size:1.2rem;
padding:5px 0;
margin:0;
}
}
.famille__elargie__items{
height:100%;
width:80%;
max-width:750px;
margin:50px 0;
display: flex;
justify-content: center;
align-items: center;
gap:20px;
flex-wrap:wrap;
}
.swiper-slide-famille{
width:235px;
& h3{
line-height:1.2;
margin:0;
color:var(--noir);
font-family:'PoppinsBold';
font-size:1.2rem;
padding: 0 20px;
text-align: center;
}
& h5{
line-height:1.1;
margin:0;
color:var(--noir);
font-size:0.9rem;
padding: 5px 20px;
text-align:center;
}
& a{
text-decoration: none;
}
}
.slide__container{
background-color: var(--blanc);
border-radius:50%;
aspect-ratio:1/1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:5px;
padding:10px;
} .notre__modele{
padding: 10px 0;
display: flex;
flex-direction: column;
align-items: center;
background-color:var(--orange);
}
.modele__container{
width:80%;
display:flex;
justify-content: space-between;
margin:70px 0;
& h2{
font-family: 'PoppinsBlack';
padding:0;
margin: 0;
width: 80%;
color: var(--noir);
font-size: 2.5rem;
}
& p{
margin:0;
font-size:1.2rem;
}
}
.modele__content{
width:60%;
display:flex;
flex-direction: column;
gap:10px;
}
.modele__img{
width:40%;
display: flex;
justify-content: center;
aspect-ratio: 1/1;
align-items: center;
background-color:white;
border-radius:50%;
max-width:280px;
height:100%;
& img{
border-radius:50%;
aspect-ratio: 1/1;
max-width: 250px;
width: 100%;
height:fit-content;
object-fit: cover;
padding:35px;
}
} .nous__rencontrer{
background-color:var(--blanc);
padding: 30px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.rencontrer__container{
width:80%;
& h2{
font-family: 'PoppinsBlack';
padding:5px 0;
margin: 0;
width: 80%;
color: var(--noir);
font-size: 2.5rem;
}
& p{
margin:0;
font-size:1.2rem;
}
}
.rencontrer__content{
display:flex;
margin: 30px 0;
gap:20px;
& .img__box__rencontrer{
display:flex;
gap: 20px;
width:70%;
& img{
width: 47%;
}
}
}
.rencontrer__adress__box{
display: flex;
flex-direction: column;
gap: 30px;
width:30%;
& p{
font-size:1.2rem;
}
& span{
font-family:'PoppinsBold';
}
} @media screen and (max-width:1024px){
.agence__box{
padding: 30px 0 0px 0;
}
.agence__textes{
& p{
font-size:1rem;}
}
.agence__box__item{
& h3{
font-size:1.8rem;}
& p{
font-size:1rem;}
& img{
max-width:150px;
top:10%;}
}
.famille__elargie__container {
& p {
font-size: 1rem;}
}
.famille__elargie__items{
gap:10px;
}
.modele__container{
& p{
font-size:1rem;}
}
.modele__img{
max-width:220px;
}
.nous__rencontrer{
& p{
font-size:1rem ;}
}
.rencontrer__adress__box{
& p{
font-size:1rem;}
}
}
@media screen and (max-width:768px){
.agence__description__container{
flex-direction: column-reverse;
gap:20px;
& img{
width:100%;
}
}
.agence__textes{
width:100%;
}
.agence__box__container{
flex-direction: column;
gap:0;
}
.agence__box__item{
width:100%;
}
.famille__elargie{
& h2{
line-height:1.1;
padding: 10px 0;}
}
.famille__elargie__items{
margin: 30px 0;
}
.swiper-slide-famille{
& h3{
font-size:1.1rem;
}
}
.slide__container{
gap:0;
}
.modele__container{
flex-direction:column;
margin: 30px 0;
align-items: center;
gap:30px;
& h2{
line-height:1.1;
padding: 10px 0;}
}
.modele__content{
width:100%;
}
.modele__img{
width:100%;
}
.publications__container{
& h2{
line-height:1.1;
padding: 10px 0;}
}
.rencontrer__container{
& h2{
line-height:1.1;
padding: 10px 0;}
}
.rencontrer__content{
flex-direction:column;
margin:20px 0;
gap:20px;
& .img__box__rencontrer{
gap:10px;
width:100%
}
& .rencontrer__adress__box{
gap:10px;
width:100%;}
}
}
@media screen and (max-width:480px){
.agence__description{
& h1{
line-height:1;}}
.agence__description__container{
gap: 15px;
margin: 15px 0;
& img{
min-width: auto;}}
.agence__box__container{
gap:0;}
.famille__elargie{
& h2{
width:100%;}
}
.rencontrer__container{
& h2{
line-height:1;
padding: 10px 0;}
}
.rencontrer__container{
& h2{
width:100%;}
}
.rencontrer__content{
& .img__box__rencontrer{
flex-direction: column;
& img{
width:100%;
}
}
}
}