/* START hero */
.hero {
    min-height: 40vh;
    height: auto;
    display: flex;
    align-items: center;
}

.hero .uniformSpacing {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
}

@media screen and (max-width: 700px) {
    .hero {
        height: auto;
        min-height: initial;
    }
}
/* END hero */

/* START contactForm */
.contactForm .uniformSpacing {
    display: flex;
    gap: 4em;
    align-items: center;
}

.contactForm .containerTextContactForm{
    width: 60%;
}

.contactForm form{
    width: 40%;
}

.contactForm .containerTextContactForm {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.contactForm .containerTextContactForm .titleContainer {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.contactForm .contactInfo {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.contactForm .contactInfo > div{
    display: flex;
    gap: 1em;
    align-items: center;
}

.contactForm .containerSvg {
    padding: 1em;
    border-radius: 100px;
    background-color: var(--basicWhite);
}

.contactForm .contactInfo svg, .contactForm .contactInfo span{
    width: 2em;
    height: 2em;
    display: flex;
}

.contactForm form{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.contactForm form input{
    width: calc((100% - 1.5em ) / 2);
    padding: 0 1em;
    border: none;
    background-color: #F8F8F8;
    height: 4em;
    border-radius: 10px;
    font-size: 0.75em;
}

.contactForm form input#inputBesoin{
    width: 100%;
}

.contactForm form textarea{
    width: 100%;
    padding: 1em;
    border: none;
    background-color: #F8F8F8;
    height: 10em;
    border-radius: 10px;
    font-size: 0.75em;
}

.contactForm form .submitContainer button {
    border-radius: var(--smallRadius);
    width: fit-content;
    display: flex;
    gap: .5em;
    padding: 1.3em;
    border: none;
    align-items: center;
    background-color: var(--basicBlack);
}

@media screen and (max-width: 1200px) {
    .contactForm .uniformSpacing{
        flex-direction: column;
        gap: 2em;
    }

    .contactForm .containerTextContactForm, .contactForm form{
        min-width: 100%;
    }
}

@media screen and (max-width: 550px) {
    .contactForm form input{
        width: 100%;
    }

    .contactForm .contactInfo > div{
        flex-direction: column;
    }

    .contactForm .contactInfo > div p{
        text-align: center;
    }
}
/* END contactForm */

/* START agencesListing */

.agencesListing .uniformSpacing {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
}

.agencesListing .uniformSpacing .agences {
    display: flex;
    gap: 5em;
    justify-content: center;
    flex-wrap: wrap;
}

.agencesListing .uniformSpacing .agences .introTitle {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.agencesListing .uniformSpacing .element {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 2.5em;
    width: calc((100% - 5em) / 2);
}

.agencesListing .uniformSpacing .agences .element h3{
    font-size: 1.8em;
}

.agencesListing .uniformSpacing .element p{
    text-align: left;
}

.agencesListing .uniformSpacing .agences .element:nth-child(3n+1) {
    background-color: var(--basicColor3);
}

.agencesListing .uniformSpacing .agences .element:nth-child(3n+2) {
    background-color: #535353;
}

.agencesListing .uniformSpacing .agences .element:nth-child(3n+3) {
    background-color: var(--basicColor1);
}

.agencesListing .uniformSpacing .agences .element:nth-child(3n+2) *,
.agencesListing .uniformSpacing .agences .element:nth-child(3n+3) *{
    color: white;
}

.agencesListing .uniformSpacing .agences .element:nth-child(3n+1) h2,
.agencesListing .uniformSpacing .agences .element:nth-child(3n+2) h2{
    color: var(--basicColor1);
}

.agencesListing .uniformSpacing .agences .element:nth-child(3n+3) h2,
.agencesListing .uniformSpacing .agences .element:nth-child(3n+3) h2 {
    color: var(--basicBlack);
}

@media screen and (max-width: 1000px) {
    .agencesListing .uniformSpacing .agences{
        flex-direction: column;
        gap: 2.5em;
    }

    .agencesListing .uniformSpacing .element{
        width: 100%;
    }
}

/* END agencesListing */


iframe {
    width: 100%;
}