/*#region Banner */
nav > div > div > div > div > a,
nav > div > div > div > a,
nav > div > div > div > div > p,
nav .fa-bars {
    color: var(--white);
}



header {
    z-index: 1;
    position: relative;
}
/*#endregion*/




section {
    position: relative;
    display: flex;
    flex-direction: column;
}
/*#endregion*/


/*#region Content*/
.contact-content {
    position: relative;
    display: flex;
    padding: 50px 0;
    justify-content:space-between;
    gap:2rem;
    margin-bottom:50px;
}

    .contact-content > div:first-of-type {
        display: flex;
        flex-direction: column;
    }

        .contact-content > div:first-of-type h2:first-of-type {
            font-weight: 600;
            font-size: 43px;
        }
        .contact-content > div:first-of-type h2:last-of-type {
            position: relative;
            margin-bottom: 1rem;
            font-weight: 400;
            font-size: 28px;
            color: var(--gray);
            padding-bottom: 10px;
        }
        .contact-content > div:first-of-type h2:last-of-type::before {
            content: "";
            width: 60px;
            color: red;
            position: absolute;
            bottom: -3px;
            height: 4px;
            background: red;
            border-radius: 5px;

        }
            .contact-content > div:first-of-type h2:last-of-type::after {
                content: "";
                width: 10px;
                color: red;
                position: absolute;
                bottom: -3px;
                height: 4px;
                background: red;
                border-radius: 5px;
                left: 65px;
            }
        .contact-content > div:first-of-type form {
            width: 500px;
            display:flex;
            flex-direction:column;
        }

            .contact-content > div:first-of-type form div {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

                .contact-content > div:first-of-type form div input {
                    border: var(--border);
                    height: 35px;
                    padding: 5px;
                    border-radius: 5px;
                }

            .contact-content > div:first-of-type form textarea {
                border: var(--border);
                padding: 5px;
                max-width: 500px;
                border-radius: 5px;
                margin: 10px 0;
            }

            .contact-content > div:first-of-type form button {
            }

    .contact-content > div:last-of-type {
        display: flex;
        flex-direction: column;
        width: 350px;
        height: 300px;
        padding: 20px;
        background: var(--red);
        justify-content: center;
    }

        .contact-content > div:last-of-type h5 {
            color: var(--white);
            margin-bottom: 25px;
        }

        .contact-content > div:last-of-type label {
            color: var(--white);
            font-size: 12px;
            margin-bottom: 10px;
        }


            .contact-content > div:last-of-type label i {
                color: var(--white);
                font-size: 12px;
            }

/*#endregion*/

/*#region Contact Map*/

iframe {
    width: 100%;
    height:400px;
    max-height:400px;
    margin-bottom: 100px;
}

/*#endregion*/


@media(max-width:1400px) {
}

@media(max-width:1200px) {
}

@media(max-width:992px) {
    .contact-content > div:first-of-type{
        width:50%;
    }
        .contact-content > div:first-of-type form{
            width:100%;
        }
}

@media(max-width:768px) {
    nav > div > div > div > div > a,
    nav > div > div > div > a,
    nav > div > div > div > div > p {
        color: var(--black);
    }
    .contact-content > div:first-of-type
    {
        width: 100%;
    }
    .contact-content{
        flex-direction:column;
    }
        .contact-content > div:last-of-type {
            width:100%;
            height:max-content;
        }
}

@media(max-width:576px) {
}