:root{
    --primaryColor--: #00A3FF ; 
    --SecondaryColr: #008DE7;
    --ThirdColor: rgba(145, 206, 255, 0.971);
    --WhiteColor: #FEFEFE;
    --Button--:#0992D6;
    --orange--: #e6c39b;
    --background-initial:rgba(216, 240, 255, 0.80);
    --prmaryColotOpacity: 35%;
   
}
/*SUPPORT FORM CSS*/
.descriptionContacUsPAge{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 3em;
}

.headingContacUsPage{
    text-align: center;
    text-decoration: underline;
}

.contentContactUs{
    border:1px;
    max-width: 60%;
}

@media screen and (max-width: 800px) {
    .supportContainer{
        flex-wrap: wrap;
    }
}

/*MAIN flex container*/
.supportContainer{
    display: flex; 
    align-items: center;
    margin:auto;
    width: 1290px;
    padding: 2em;
    align-self: center;
    
}

/*flex item of main container(picture)*/
.contactPicture{
    border-radius: 1em;
    width: 54%;
}

/* flex item of main flex container*/
/* SECONDARY flex container */
.supportForm{
    display: flex;
    flex-direction: column;
    align-items: center;
    
}





/* flex item of secondary flex container*/
.supportFormHeading{
    text-align: left;
    font-size: 2em;
    
}

/* flex item of secondary flex container*/
/* TERITARY flex container */
.supportFormLowerPart{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color:rgb(233, 176, 111, 0.3);
    border: 1px;
    border-style: solid;
    border-radius: 0.5em;
    padding: 1em;
}

/* flex item of secondary flex container*/
#thankYouMes{
    font-size: 1.5em;
    color: black;
    background-color: rgb(116, 188, 234, 0.6);
    border-radius:1em;
    display: none;
    
}





/* flex item of tertiary flex container*/
.supportFormText{
    font-size: 1.3em;
    text-decoration: underline;
    
}

/* flex item of tertiary flex container*/
.emailBox{
    background-color: rgb(116, 188, 234, 0.6);
    border-radius: 1em;
    border-color: black;
    margin: 0%;
    padding: 0.5em;
    border:1em;
}

/* flex items of tertiary flex container*/
.messageBox{
    padding-right: 6em;
    padding-bottom: 15em;
    padding-left: 1em;
    resize: none;
    background-color: rgb(116, 188, 234, 0.6);
    border-radius: 1em;
    border-color: black;
    border: 1em;
}

#emailWrong, #messageWrong{
    display: none;
    padding: 0%;
    margin: 0%;
    color: red;
    font-size: 1.2em;
    text-decoration: underline;
    
}

textarea{
    resize: none;
    font-family:Arial, Helvetica, sans-serif;
}


/* QUATERNARY flex container */
/* flex item of tertiary flex container*/
.buttonSubmit{
    display: flex;
    justify-content: flex-end;
    align-content:flex-end ;
}

/* flex item of quaternary flex container*/
.supportButton{
    background-color: var(--SecondaryColr);
    border-radius: 12px;
    width:5em;
    font-size: 1.2em;
    border: 1px solid var(--ThirdColor) ;
    padding: 0.80em; 
    
}

.container{
    max-width: 1968px;
    margin: auto;
}