@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.cdnfonts.com/css/avant-que');

:root {
    --mainColor: rgb(23, 22, 29);
    --accentColor: rgb(224, 121, 54);
    --hoverColor: rgb(48, 48, 48);
    --textColor1: rgb(116, 116, 116);
    --snowWhite: rgb(241, 241, 241);
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: 'Montserrat', sans-serif;
}
body {
    width: 100%;
}
.temp-warningmessage {
    background: #fca903;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 10px;
    color: var(--textColor2);
    width: 80%;
}
.Message {
    position: absolute;
    width: 30vw;
    left: 35vw;
    height: 5vh;
    -webkit-box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
    top:6.5vh;
    display: none;
    color: var(--textColor2);
    font-size: 2vh;
    align-items: center;
    justify-content: center;
    z-index: 999;
    text-align: center;
    background: var(--accentColor);
 }
main section:nth-of-type(1) {
    width: 100%;
    height: auto;
    background: var(--mainColor);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
main section:nth-of-type(1) h1 {
    width: 100%;
    color: var(--textColor2);
    font-size: 4em;
    font-family: 'Avant que...', sans-serif;
    font-weight: lighter;
    text-align: center;
    margin-block: 2vh;
}
main section:nth-of-type(1) .wrapper {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
main section:nth-of-type(1) .wrapper .Contact-Map {
    width: 90%;
    margin-block: 5vh;
}
main section:nth-of-type(1) .wrapper .Contact-Map iframe {
    width: 100%;
    height: 30vh;
    border-radius: 25px;
}
main section:nth-of-type(1) .wrapper .data {
    height: 40%;
    width: 100%;
    color: var(--textColor2);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
}
main section:nth-of-type(1) .wrapper .data h2 {font-size: 3vh;}
main section:nth-of-type(2)  {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-block: 2rem;
}
main section:nth-of-type(2) .contactFrame {
    width: 80%;
    height: auto;
    -webkit-box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 15px 0px rgba(136, 130, 130, 0.75);
    background: var(--snowWhite);
    margin-block: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
main section:nth-of-type(2) .contactFrame .left {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    text-align: center;
}
main section:nth-of-type(2) .contactFrame .left img {
    width: 50%;
    height: 20vh;
    margin-block: 2vh;
}
main section:nth-of-type(2) .contactFrame .left h2 {
    color: var(--mainColor);
    font-size: 4vh;
}
main section:nth-of-type(2) .contactFrame .left p {
    width: 70%;
    font-size: 1.5vh;
}

main section:nth-of-type(2) .contactFrame .right {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}
main section:nth-of-type(2) .contactFrame .right h2 {
    width: 100%;
    color: var(--mainColor);
    font-size: 3vh;
    text-align: center;
    margin-block: 2vh;
}
main section:nth-of-type(2) .contactFrame .right .row {
    width: 100%;
    height: 15vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
main section:nth-of-type(2) .contactFrame .right .row form {
    display: flex;
    justify-content: space-evenly;
    height: 100%;
    flex-direction: column;
    width: 90%;
    margin-block: 1vh;
}
main section:nth-of-type(2) .contactFrame .right .row form label {
    font-size: 1.5vh;
}
main section:nth-of-type(2) .contactFrame .right .row input{
    width: 100%;
    height: 80%;
    background: transparent;
    border: none;
    border-bottom: 0.2vh solid var(--mainColor);
    color: var(--mainColor);
}
main section:nth-of-type(2) .contactFrame .right .row input:hover, 
main section:nth-of-type(2) .contactFrame .right .row input:focus {
    border-color: var(--accentColor);
}
main section:nth-of-type(2) .contactFrame .right .row-last {
    width: 90%;
    height: 50%;
    display: flex;
    flex-direction: column;
}
main section:nth-of-type(2) .contactFrame .right .row-last label {
    width: 100%;
    margin: 0;
    font-size: 1.5vh;
}
main section:nth-of-type(2) .contactFrame .right .row-last input[type="text"] {
    width: 100%;
    height: 15%;
    background: transparent;
    border: none;
    border-bottom: 0.2vh solid var(--mainColor);
    color: var(--mainColor);
    margin-block: 1vh;
}
main section:nth-of-type(2) .contactFrame .right .row-last input[type="text"]:hover,
main section:nth-of-type(2) .contactFrame .right .row-last input[type="text"]:focus {
    border-color: var(--accentColor);
}
main section:nth-of-type(2) .contactFrame .right .row-last textarea {
    width: 100%;
    min-height: 20vh;
    background: transparent;
    border: none;
    resize: none;
    border: 1px solid var(--mainColor);
    color: var(--mainColor);
    margin-block: 1vh;
}
main section:nth-of-type(2) .contactFrame .right button {
    width: 30%;
    height: 5vh;
    margin-block: 2vh;
    border: 2px solid  var(--mainColor);
    display: flex;
    align-items: center;
    font-size: 1.75vh;
    font-weight: bold;
    justify-content: center;
    cursor: pointer;
    background: transparent;
}
main section:nth-of-type(2) .contactFrame .right button:hover,
main section:nth-of-type(2) .contactFrame .right button:focus {
    color: var(--accentColor);
    border: 2px solid var(--accentColor);
    transition: 0.5s;
}