@import url('https://fonts.cdnfonts.com/css/pt-mono');
 @import url('https://fonts.cdnfonts.com/css/aref-ruqaa');

 * {
     padding: 0;
     margin: 0;
 }

 body {
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: #EDECE4;
     border: 10px solid #CBC6B9;
     gap:116px;
 }

 main {
     display: flex;
     justify-content: space-between;
     width: 1200px;
     /* height: 800px; */
     margin-top: 77px;
 }

 .main-menu {
     width: 389px;
 }

 span {

     display: flex;
     align-items: center;
     gap: 30px;
 }

 .p {
     font-size: 18px;
     color: black;
 }

 .markerGreen {
     width: 12px;
     height: 12px;
     border-radius: 12px;
     background-color: green;
 }

 .time-work {
     width: 318px;
     height: 82px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     border-bottom: 2px solid black;
     border-right: 2px solid black;
 }

 .text-location {
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 318px;
     height: 82px;
     border-right: 2px solid black;
 }

 .textDecoration {
     color: #988C77;
     font-size: 18px;
 }

 .hero-wrapper {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .hero-wrapper>img {
     width: 200px;
     height: 200px;
 }

 .hero-wrapper>h1 {
     font-size: 200px;

 }

 main>img {
     width: 600px;
     height: 700px;

 }

 section {
     display: flex;
     width: 1200px;
     gap: 60px;


 }

 .title-section {
     height: fit-content;
     display: flex;
     align-items: center;
     gap: 51px;
     padding-left: 10px;
 }

 .line {
     width: 285px;
     height: 2px;
     background-color: black;
 }

 .line-contact {
     width: 224px;
 }

 p,
 label,
 button {
     font-size: 18px;
     font-family: 'PT Mono', sans-serif;
     color: black;
     height: 30px;
 }

 ul {
     display: flex;
     flex-direction: column;
     gap: 3px;
 }

 li {
     display: flex;
     align-items: center;
     gap: 10px;
     list-style: none;
     color: #988C77;
     font-family: 'Aref-Ruqaa', sans-serif;
     font-size: 18px;
 }

 .main-menu>h3 {
     font-family: 'Aref-Ruqaa', sans-serif;
     font-size: 24px;
     padding-left: 50px;
     padding-bottom: 26px;
 }

 menu {
     display: flex;
     align-items: flex-start;
     height: 300px;
     gap: 100px;

 }

 menu>img {
     padding-top: 50px;
 }

 img {
     transition: 0.9s;
 }

 img:hover {
     transform: scale(1.1);
 }

 form {
     width: 600px;
     display: flex;
     flex-direction: column;
 }

 form>div {
     width: 100%;
     display: flex;
     justify-content: space-between;
     gap: 20px;
 }

 .column {
     display: flex;
     flex-direction: column;
     width: 280px;
 }

 input {
     height: 40px;
     border: 2px solid #988C77;
     background-color: transparent;
     margin-bottom: 15px;
 }

 textarea {
     border: 2px solid #988C77;
     background: transparent;
     margin-bottom: 15px;

 }

 div>.column {
     display: flex;
     flex-grow: 2;
     /*os elementos crescem igualmente na linha. Para ele funcionar tem que usar o display */
 }

 div>.column:last-child {
     width: 100px;
 }

 button {
     box-shadow: 5px 5px 0 -2px #cbc6b9, 5px 5px 0 0 #988c77;
     background: transparent;
     width: 200px;
     height: 40px;
 }

 iframe {
     width: 600px;
     height: 226px;
     box-shadow: 0px 0px 0px 10px #CBC6B9;
     margin-top: 40px;
 }

 footer {
     display: flex;
     justify-content: space-around;
     align-items: center;
     width: 100%;
     height: 70px;
     background-color: #2a2426;
     box-shadow: 0px 0px 0px 10px #2a2426;
 }

 footer>p {
     color: #EDECE4;

 }

 @media(max-width: 520px) {
     main {
         flex-direction: column;
         justify-content: center;
         align-items: center;
         width: 100%;
         height: auto;
     }

     main>img {
         /* width: 300px;
         height: 400px; */
         display: none;
     }

     .hero-wrapper {
         align-items: center;
     }

     .hero-wrapper:nth-child(4) {
         font-size: 100px;
     }

     section {
         flex-direction: column;
         align-items: center;
         width: 100%;
         height: auto;
     }

     menu>img {
         display: none;
     }

     menu {
         justify-content: center;
         align-items: center;
     }

     body {
         gap: 80px;
     }

     .menu {
         display: flex;
         flex-direction: column;
         gap: 30px;
     }

     form {
         width: 100%;
       

     }
     .contact{
        display: flex;
        flex-direction: column;
        align-items: center;        
     }

     form:nth-child(3) {
         display: flex;
         flex-direction: column;
     }

     iframe{
        width: 80%;
        align-self:center ;
     }

     form>div{

        flex-direction: column;
        /* width: 80%; */
     }

     form>div>.column , div>.column:last-child{
        width: 100%;
}    


map{
    display: flex;
    justify-content: center;
}
.main-menu>h3{
    padding-left: 0px;
    padding-bottom: 0px;
}

.main-menu{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:26px;
}
 }