:root {
    ----main-color: #131c26;
    --color-purple: #ee583f;
}
.about-section {
    max-width: 1280px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.about-section__heading {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-section__heading p {
    color: gray;

}

.about-hours-of-operation {
        max-width: 1280px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.about-hours-of-operation__wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-hours-of-operation__wrapper h3 {
    font-size: 1.3rem;
}

.contact-section {
    background-color: var(--color-purple);
   text-align: center;
   padding: 3rem 0;
   display: flex;
   flex-direction: column;
   gap: 2rem
}

.contact-section h2 {
    color: white;
}


.contact-form  {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    gap: 1rem;
}

.contact-form input {
    padding: 10px;
    border: none;
}

textarea {
    display: block;
    padding: 1em;
    width: 100%;
    height: 200px;
    resize: vertical;
    
}

.textarea:focus {
    outline: none;
}

form input:focus {
    outline: none;
}

.submit {
    background-color: var(----main-color);
    color: white;
    align-self: center;
    padding: 10px 20px;
    border-radius: 9999px;

}

.submit:hover {
    background-color: white;
    color: var(----main-color);
    cursor: pointer;
}
@media screen and (min-width: 720px) {
    .about-hours-of-operation__wrapper {
        flex-direction: row;
        justify-content: space-between;
        padding: 3rem 0;
    }
}