@import url('/assets/css/partials/header.css');
@import url('/assets/css/partials/fly-out-menu.css');
@import url('/assets/css/partials/footer.css');

body *,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Poppins", sans-serif;
}

.title-div h1 {
    font-size: 2em;
    font-weight: 300;
    margin: 0;
    color: #0072ce;
}

.colorfull-lines {
    display: flex;
}

.colorfull-lines span {
    display: block;

    width: 25px;
    height: 4px;

    margin: 2px 0 36px;
}

.colorfull-lines .yellow {
    background-color: #FFC600;
}

.colorfull-lines .orange {
    background-color: #FF6A14;
}

.colorfull-lines .green {
    background-color: #97D700;
}

.colorfull-lines .dark-blue {
    background-color: #054E72;
}



/* Contact Section */
#contact-section {
    margin-top: 4rem;

    padding: 6rem 2rem;
}

.contact-section {
    max-width: 1400px;
    margin: auto;
}

#contact-section hr {
    width: 90px;
    height: 2px;
    background-color: #0072CE;
    border: none;
    margin: 5px 0 10px;
}


.contact-content {
    display: flex;

    gap: 24px;
}

.contact-form {
    width: 70%;
}

.contact-form-group {
    display: flex;
    column-gap: 20px;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 24px;
    background-color: #f8f8f8;
    border: 2px solid #e4e4e4cb;
    margin: 5px 0;
}

#contact-form input:focus,
#contact-form textarea:focus {
    background-color: #FFFFFF;
    outline: none;
    border-bottom: 2px solid #0072ce;
}

#contact-form button{
    border: 2px solid #0072CE;

    background-color: #FFFFFF;
    color: #0072CE;

    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem;

    border-radius: 24px;

    cursor: pointer;
    width: 100%;

    transition: 0.3s;
}

#contact-form button:hover{
    background-color: #0072CE;
    color: white;
}

.contact-information{
    width: 30%;
}

.contact-information h2{
    font-weight: 300;
    color: #0072CE;
}

@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
    }

    .contact-form{
        width: 100%;
    }

    .contact-form-group {
        flex-direction: column;
    }
    
    .contact-information{
        width: 100%;
    }

}