.form_container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0.25rem 0.5rem;
}

.contact-info {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 1240px;
    /* background-color: antiquewhite; */
}

.contact-info>article {
    width: 100%;
    max-width: 64ch;
    margin-inline: auto;
    padding-block: 2.5rem;
    /* background-color: var(--red-500); */
}

.contact_form {
    position: relative;
    display: flex;
    flex-flow: column;
    gap: 1rem;
    width: fit-content;
    margin-inline: auto;
    margin-block: 0.25em 1em;
    padding: 0.75em;
    /* background-color: var(--lightgreen-color); */
    background-color: var(--navy-900);
    border-radius: 16px;
    overflow: hidden;
    border-top: 2px solid var(--navy-900);
    border-bottom: 2px solid var(--navy-900);

}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;

}

.contact_form::before,
.contact_form::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    height: calc(100% + 1px);
    width: calc(100% + 2px);

    /* background-color: var(--lightgreen-color); */
    background-image: conic-gradient(from var(--angle), transparent, var(--navy-700), 20%, var(--navy-900), transparent);
    border-radius: inherit;
    /* padding: 10px; */
    /* animation: 3s spin infinite; */
}

/* .contact_form::before {
    filter: blur(0.5rem);
    opacity: 0.5;
} */

@keyframes spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }

}

.form_column {

    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 32%;
    width: fit-content;
    /* background-color: var(--lightgreen-color); */
    background-color: transparent;
    border-radius: 1.2rem;
    align-items: center;
    justify-items: baseline;
    padding: 0.75rem 1rem;
    margin-inline: auto;
    text-align: center;
    /* color: var(--lightgreen-color); */
    color: #cdcdcd;

}

.form_column label {
    display: inline-block;
    padding-block: 0.5em 0;
    /* color: var(--lightgreen-color); */
    color: #cdcdcd;
    font-weight: 600;
}

.form_column input,
.form_column textarea,
.form_column select {
    display: inline-block;
    font-family: inherit;
    font-size: 1.05rem;
    padding: 0.25rem 0.75rem;
    /* background-color: hsl(var(--primary-light-hsl), 0.3); */
    border: none;
    border-radius: 0.25rem;
    outline: transparent;
    /* color: white; */
    font-weight: 300;
    margin-block: 1rem;
    width: 100%;
}

.form_column input:focus-visible,
.form_column textarea:focus-visible,
.form_column select:focus-visible {
    outline: 1px solid var(--navy-100);
}

.form_column input::placeholder,
.form_column textarea::placeholder {
    font-weight: 300;
}

.form_column textarea {
    display: block;
    width: 100%;
    /* height: 5em; */
    font-family: inherit;
    resize: none;
    field-sizing: fixed;
    min-height: 14lh;
    max-height: 16lh;
}

.form_column fieldset {
    padding: 0.25em 0.5rem;
    margin-block: 0.5em;
    font-weight: 600;
    border-radius: 8px;
}

.form_column input[type=submit] {
    width: 100%;
    /* background-color: hsl(59, 94%, 50%); */
    background-color: var(--red-700);
    color: var(--red-50);
    padding: 16px 20px;
    margin: auto 0 8px;
    border: none;
    border-radius: 16px;
    outline: transparent;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
}

.form_column [type=submit]:hover {
    background-color: var(--red-500);
    color: var(--red-50);
}

.form_column .location__map {
    margin-block-start: -1.5rem;
    margin-block-end: 1.25em;
}

.contact__social_container {
    position: relative;
    margin-top: auto;
}

.form_column .contact__socials {
    background-color: var(--red-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap;
    row-gap: 1rem;
    column-gap: 1rem;
    padding: 16px;
    margin-block: 16px;
    border-radius: 1.25em;
    aspect-ratio: 1;
}

.info_phone,
.info_location {
    display: flex;
    flex-direction: column;
    /* background-color: red; */
    padding-block: 0 2.5em;
    margin-inline: auto;
    line-height: 1.5;
}

.info_title {
    display: flex;
    place-items: center;
    place-content: center;
    gap: 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.office_hours {
    display: flex;
    flex-direction: column;
    /* width: fit-content; */
    /* max-width: 320px; */
    background-color: transparent;
    border-radius: 5px;
    border: var(--navy-700) solid 1px;
    margin-inline: auto;
    margin-block: 10px;
}

.daily {
    display: inline-flex;
    justify-content: center;
    border-bottom: var(--navy-700) solid 1px;
    width: 100%;
    font-size: 0.75rem;
    color: var(--navy-100);
    /* opacity: 0; */
    /* Link animation to the element's view position */
    animation: slideHours linear forwards;
    animation-timeline: view(block 100% 0%);
    animation-iteration-count: 1;
    /* Trigger the animation as soon as the card enters the viewport */
    /* animation-range: entry -0% cover 0%; */
    animation-delay: calc(15s * sibling-index());
}

.daily:nth-last-child(-n+2) {
    color: var(--navy-700);
}

.day {
    flex: 1;
    text-align: left;
    padding: 8px 16px;
}

.hours {
    flex: 1;
    padding: 8px 16px;
    text-align: right;
    text-wrap: nowrap;
}

.contact__socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 4.5rem;
    aspect-ratio: 1;
    font-size: 1.75em;
    color: var(--red-500);
    border: 2px solid var(--red-500);
    border-radius: 1rem;
    text-decoration: none;
    outline: 1px solid transparent;
    outline-offset: -8px;
    /* background-image: linear-gradient(-135deg,
            transparent var(--fill),
            var(--lightgreen-color) var(--fill));

    background-size: 100% 33.33%;
    transition: 0.4s ease-in-out 0.4s;
    transition-property: --fill, all; */
}

.contact__socials a:hover,
.contact__socials a:focus-visible {
    /* opacity: 0.7; */
    --fill: 0%;
    color: var(--red-500);
    outline-color: currentColor;
    /* background-image: linear-gradient(transparent var(--fill),
            var(--lightgreen-color) var(--fill)); */

    transition-delay: 0s;
}

@media (min-width: 768px) {
    #contactform {
        display: 100%;
        background-color: transparent;
        margin: 0;
        padding-inline: 0.5rem;
    }

    .contact_form {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        gap: 1rem;
        width: fit-content;
        margin-inline: auto;
        margin-block: 0.25em 1em;
        padding: 0.5em 0.75em;
        background-color: var(--navy-900);
        border-radius: 16px;
    }
}