#contactUsCon,
#contactUsCon #contactFormHolder {
    display: -ms-grid;
    grid-template-columns: repeat(1, 1fr)
}

#contactUsCon #contactFormHolder .inputAndLabelCon input,
select {
    padding-left: 10px;
    outline: 0;
    height: 35px;
    font: 1rem Poppins, sans-serif
}

#contactUsCon #contactFormHolder .inputAndLabelCon input,
#contactUsCon #contactFormHolder .inputAndLabelCon label,
#contactUsCon #ourInfoHolder ul li,
#demandeDevis,
select {
    font: 1rem Poppins, sans-serif
}

#headerImage {
    width: 100%;
    height: 20vw;
    max-height: 463px;
    margin: 130px auto 0;
    background-image: url("./callCenter.webp");
    background-position: center;
    background-size: cover
}

.sectionTitle {
    font: 800 1.4rem Poppins, sans-serif;
    text-align: center;
    margin-top: 17px
}

#contactUsCon {
    margin-top: 17px;
    width: 100%;
    display: grid
}

#contactUsCon #contactFormHolder {
    display: grid;
    row-gap: 10px
}

#contactUsCon #contactFormHolder .inputAndLabelCon {
    width: 80%;
    margin: auto
}

#contactUsCon #contactFormHolder .inputAndLabelCon .necessary {
    color: red
}

#contactUsCon #contactFormHolder .inputAndLabelCon #numberToCalculate {
    display: inline-block;
    width: 100%;
    text-align: center
}

#contactUsCon #contactFormHolder .inputAndLabelCon input {
    width: calc(100% - 10px)
}

select {
    width: 96%
}

select:invalid {
    color: gray
}

option[value=""][disabled] {
    display: none
}

option {
    color: #000
}

#contactUsCon #contactFormHolder .inputAndLabelCon textarea {
    width: calc(100% - 17px);
    padding: 10px;
    outline: 0;
    font: 1rem Poppins, sans-serif;
    resize: vertical
}

#contactUsCon #contactFormHolder #sendMessageBtn {
    display: block;
    margin: auto;
    width: 200px;
    height: 35px;
    border: 3px solid #001b5b;
    background: #9bbf3e;
    color: #001b5b;
    font-weight: 700!important;
    border-radius: 5px;
    font: 1rem Poppins, sans-serif
}

#contactUsCon #ourInfoHolder {
    width: calc(100% - 17px);
    padding-left: 17px;
    padding-top: 10px;
    overflow: hidden
}

#contactUsCon #ourInfoHolder h2 {
    font: 800 1.3rem Poppins, sans-serif
}

#contactUsCon #ourInfoHolder ul {
    list-style: none
}

#contactUsCon #ourInfoHolder ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 10px 0
}

#contactUsCon #ourInfoHolder ul li span {
    color: #4f6fce;
    margin-right: 10px
}

#contactUsCon #ourInfoHolder ul li a {
    color: #000;
    text-decoration: none
}

#locationCon {
    border: 1px solid #000;
    margin-top: 30px
}

#locationCon #location {
    width: 100%;
    height: 60vw;
    max-height: 561px
}

#askForDevisCon {
    position: fixed;
    bottom: 10px;
    right: 10px;
    height: 90px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    z-index: 5;
    -webkit-transition: .5s;
    transition: .5s
}

#askForDevisCon #changeDevisPositionBtn {
    border: none;
    background: 0 0;
    position: absolute;
    top: 5px;
    right: 5px
}

#askForDevisCon #changeDevisPositionBtn span {
    color: #8a8a8a
}

#demandeDevis {
    padding: 5px 17px;
    border-radius: 5px;
    background: #9bbf3e;
    border: none;
    color: #fff
}

#devisImage {
    width: 100%;
    height: 20vw;
    max-height: 463px;
    margin: 130px auto 0;
    background-image: url("./devis-comptabilite.jpg");
    background-position: center;
    background-size: cover
}