.contacte-nous {
    width: 100%;
    height: fit-content;
    margin: 80px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.contacte-nous iframe {
    width: 100%;
    height: 500px;
    margin-bottom: 70px;
}
.contacte-nous h2 {
    font-size: 3rem;
    font-family: 'Nunito', sans-serif;
    padding:0 70px;
    color:#414446;
}
.contacte-nous hr {
    width: 80%;
    padding:0 70px
}
.contacte-nous .contacte-element {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin:0 70px;
}
.contacte-nous .contacte-element .media {
    display: flex;
    flex-direction: column;
}
.contacte-nous .contacte-element .media h3 {
    font-size: 1.5rem;
    font-family: 'Nunito', sans-serif; 
    color:#203774;
}
.contacte-nous .contacte-element .media b {
    font-size: 0.9rem;
    font-family: 'Nunito', sans-serif; 
    margin:3px 0;
    color: rgb(95, 95, 95);
}
.contacte-nous .contacte-element .media a {
    margin:5px 0;
    font-size: 0.9rem;
    font-family: 'Nunito', sans-serif; 
    margin:5px 0;
    color: rgb(95, 95, 95);
}
.contacte-nous .contacte-element .contacte-input {
    margin: 0px auto;
}
.contacte-nous .contacte-element .contacte-input form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200%;
    margin-left:-200px;
}
.contacte-nous .contacte-element .contacte-input form .f-in {
    margin:10px;
    display: flex;
    flex-direction: row;
}


.f-in div {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    margin:1rem 1rem;
}
.f-in div input {
    width:100%;
    padding:2rem 0.5rem 0.5rem 1.3rem;
    border:none;
    outline:none;
    border-bottom:2px solid gray;
    border-radius:5px;
    background-color:rgb(238, 238, 255);
    color:rgb(32, 31, 31);
    font-size:1.1rem;
    font-family: 'Nunito', sans-serif;    
}
.f-in div label {
    height:100%;
    width:100%;
    position:absolute;
    pointer-events:none;
}
.f-in div label::after {
    content:"";
    height:100%;
    width:100%;
    position:absolute;
    bottom:-1.2px;
    left:0;
    border-bottom:3px solid royalblue;
    transform:translateX(-100%);
    transition:transform 650ms ease;
}
.f-in div label span {
    font-size:1.2rem;
    font-weight:400;
    color:#203774;
    position:absolute;
    top:45%;
    left:3%;
    transition:transform 650ms ease;
}

.f-in div input:focus +  label span ,
.f-in div input:valid +  label span  {
    transform:translateY(-100%);
    color:royalblue;
}
.f-in div input:focus +  label::after,
.f-in div input:valid +  label::after {
    transform:translateX(0%);
}



.text-form {
    width:100%;
    height:100%;
    margin:1.5rem 0;
    position:relative;
    overflow:hidden;
}
.text-form #message {
    height:100%;
    width:100%;
    background-color:rgb(238, 238, 255);
    color:rgb(32, 31, 31);
    font-size:1.1rem;
    font-family: 'Nunito', sans-serif;    
    outline:none;
    border:none;
    border-bottom:2px solid gray;
    padding:2.5rem 1rem 1rem 1.3rem;
}

.text-form .label-message {
    height:100%;
    width:100%;
    position:absolute;
    top:0%;
    left:0%;
    pointer-events:none;
}
.text-form .label-message span {
    font-size:1.2rem;
    position:absolute;
    top:15%;
    left:3.5%;
    transition:transform 650ms ease;
}
.label-message::after {
    content:"";
    position:absolute;
    height:100%;
    width:100%;
    bottom:1%;
    left:0;
    border-bottom:3px solid royalblue;
    transform:translateX(-100%);
    transition:transform 650ms ease;
}
#message:focus + .label-message span, 
#message:valid + .label-message span {
    color:royalblue;
    transform:translateY(-140%);
}
#message:focus + .label-message::after ,
#message:valid + .label-message::after {
    transform:translateX(0%);
}


.submit-form {
    width:65%;
    height:100%;
    position:relative;
    text-align: center;
}

.submit-form input {
    height:100%;
    width:fit-content;
    font-size:1.1rem;
    font-weight:900;
    color:rgb(240, 240, 240);
    background-color:#11204b;
    outline:none;
    cursor:pointer;
    border:none;
    border-radius:5px;
    padding:0.8rem 1.5rem;
    transition: background 250ms linear;
}

.submit-form input:hover ,
.submit-form input:active {
    background-color:#334c91;
}




@media (max-width:1000px) {
    .contacte-nous .contacte-element .contacte-input form {
        width: 120%;
        margin-left:-50px;
    }
}
@media (max-width:950px) {
    .contacte-nous .contacte-element .contacte-input form {
        width: 100%;
        margin-left:0px;
    }
}

@media (max-width:890px) {
    .contacte-nous .contacte-element {
        margin: 0 50px;
    }

    .contacte-nous hr {
        width: 60%;
    }
    
.f-in div {
    margin:0.5rem;
}
.f-in div input {
    padding:2rem 0.5rem 0.5rem 1.3rem;   
}
.f-in div label span {
    font-size:1.2rem;
}
.text-form {
    margin:1.5rem 1rem;
}
.text-form #message {
    height:100%;
    width:90%;
    padding:2.5rem 1rem 1rem 1.3rem;
}

.text-form .label-message {
    height:100%;
    width:100%;
    position:absolute;
    top:0%;
    left:0%;
    pointer-events:none;
}
.text-form .label-message span {
    font-size:1.2rem;
    position:absolute;
    top:15%;
    left:5%;
    transition:transform 650ms ease;
}
.label-message::after {
    content:"";
    position:absolute;
    height:100%;
    width:100%;
    bottom:1%;
    left:0;
    border-bottom:3px solid royalblue;
    transform:translateX(-100%);
    transition:transform 650ms ease;
}
#message:focus + .label-message span, 
#message:valid + .label-message span {
    color:royalblue;
    transform:translateY(-140%);
}
#message:focus + .label-message::after ,
#message:valid + .label-message::after {
    transform:translateX(0%);
}
.submit-form input {
    font-size:1rem;
}


    .contacte-nous h2 {
        font-size: 2.5rem;
    }
}
@media (max-width:800px) {
    .contacte-nous .contacte-element {
        width: fit-content;
        display: flex;
        flex-direction: column-reverse;
        margin: 0 auto;
    }
    .text-form #message {
        height:100%;
        width:100%;
        padding:2.5rem 1rem 1rem 1.3rem;
    }
    .contacte-nous .contacte-element .media {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 50px;
        text-align: center;
    }
    .contacte-nous h2 {
        font-size: 3rem;
        font-family: 'Nunito', sans-serif;
        width: fit-content;
        padding:0;
        align-self: center;
        color: #414446;
    }
}



@media (max-width:600px) {
    .contacte-nous .contacte-element .contacte-input form {
        width: 85%;
        margin: 0 auto;
    }
}

@media (max-width:530px) {
    .contacte-nous hr {
        width: 50%;
    }

    .contacte-nous h2 {
        font-size: 2rem;
    }
    .submit-form input {
        font-size:0.9rem;
    }
}

@media (max-width:380px) {
    .contacte-nous .contacte-element .media {
        display: flex;
        flex-direction: column;
    }
    .contacte-nous .contacte-element .media h3 {
        font-size: 1.1rem;
    }
    .contacte-nous .contacte-element .media b {
        font-size: 0.78rem;
        margin:2.2px 0;
    }
    .contacte-nous .contacte-element .media a {
        margin:3px 0;
        font-size: 0.78rem;
    }
    .contacte-nous hr {
        width: 40%;
    }
    .contacte-nous h2 {
        font-size: 1.5rem;
    }
}
@media (max-width:300px) {
    .contacte-nous {
        overflow: hidden;
    }
}