/* ---GLOBAL STYLES--- */

* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', serif;
    box-sizing: border-box;
    word-break: break-word;
    scroll-behavior: smooth;
}

:root {
    --blue: #09a9e3;
    --green: #71ad46;
    --gray: #565756;
}

body {
    background: white;
}

img {
    width: 100%;
    max-width: 100%;
}

a {
    cursor: pointer;
    width: fit-content;
    display: inline-block;
    text-decoration: none;
    transition: .25s;
}

button,
i {
    cursor: pointer;
    transition: .25s;
}

section {
    width: 100%;
}

h1,
h2 {
    line-height: 1;
}

p {
    text-align: left;
}

p,
li {
    color: #3d3d3d;
    font-size: 1vw;
    font-weight: 400;
}

@media (max-width: 996px) {
    p,
    li {
        font-size: 4vw;
        text-align: justify;
    }
}


/* ---HEADER STYLES--- */

header .bar_box {
    display: flex;
    justify-content: space-evenly;
    padding: .7vw 7%;
    background: var(--blue);
}

header .bar_box a {
    color: white;
    font-size: .9vw;
}

header .bar_box a:hover {
    color: var(--gray);
}

header .bar_box a i {
    transition: none;
}

header .networks_box {
    display: flex;
    gap: 1.5vw;
}

header .networks_box i {
    font-size: 1.2vw;
}

header .header_box {
    display: flex;
    justify-content: center;
    padding: 1% 7%;
}

header .logo_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
}

@media (max-width: 996px) {
    header .bar_box {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3vw;
        padding: 4%;
    }
    header .bar_box a {
        font-size: 3.5vw;
    }
    header .logo_box {
        width: 60%;
        padding: 5%;
    }
    header .logo_box img {
        width: 100%;
    }
}


/* ---MAIN BUTTON--- */

.main_button {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5vw;
    color: white;
    font-size: 1vw;
    font-weight: 600;
    text-align: center;
    padding: .7vw 1.5vw;
    border-radius: 1.5vw;
    background: var(--blue);
}

.main_button:hover {
    background: var(--green);
}

.main_button i {
    font-size: 1.5vw;
}

@media (max-width: 996px) {
    .main_button {
        gap: 1vw;
        font-size: 4vw;
        padding: 2vw 5vw;
        border-radius: 5vw;
    }
    .main_button i {
        font-size: 5vw;
    }
}


/* ---MAIN STYLES--- */

main {
    display: flex;
    align-items: center;
    height: 45vw;
    padding: 10% 7%;
    background: url("../media/main_banner.jpg");
    background-size: cover;
}

main .main_box {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

main .title_box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5vw;
}

main .title_box::before {
    content: "";
    position: absolute;
    bottom: -1vw;
    left: 0;
    width: 20vw;
    height: .3vw;
    background: var(--green);
}

main h1 {
    color: var(--green);
    font-size: 1.85vw;
}

main .title_box p {
    width: 55%;
    color: var(--gray);
    font-size: 1.5vw;
    font-weight: 500;
}

main .subtitle_box h2 {
    position: relative;
    color: var(--blue);
    font-size: 4vw;
}

main h2 span {
    color: var(--gray);
    font-size: 3.5vw;
}

@media (max-width: 996px) {
    main {
        position: relative;
        justify-content: center;
        height: 100vw;
        padding: 20% 7%;
        background-position: right -50%;
    }
    main::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000050;
    }
    main .main_box {
        align-items: center;
        gap: 10vw;
    }
    main .title_box {
        gap: 3vw;
    }
    main .title_box::before {
        left: 50%;
        transform: translateX(-50%);
        bottom: -3vw;
        width: 50vw;
        height: .7vw;
        background: white;
    }
    main h1 {
        color: white;
        font-size:5vw;
        text-align: center;
    }
    main .title_box p {
        width: 100%;
        color: white;
        font-size: 4vw;
        text-align: center;
    }
    main .subtitle_box h2 {
        color: white;
        font-size: 8vw;
        text-align: center;
    }
    main h2 span {
        color: white;
        font-size: 7vw;
    }
}


/* ---PROCEDURES STYLES--- */

.procedures_section {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    padding: 10% 7%;
}

.procedures_section .title_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.procedures_section .title_box h2 {
    color: var(--blue);
    font-size: 2.5vw;
    text-align: center;
}

.procedures_section .title_box p {
    width: 80%;
    text-align: center;
}

.procedures_section .procedures_box {
    display: grid;
    grid-template-columns: 40% 60%;
    border-radius: 1vw;
    background: var(--blue);
    overflow: hidden;
}

.procedures_section .filter_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
}

.procedures_section button {
    position: relative;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5vw;
    color: var(--blue);
    font-size: 1vw;
    font-weight: 600;
    text-align: center;
    padding: 1vw;
    border: none;
    border-radius: 1.5vw;
    background: white;
}

.procedures_section .active {
    color: white;
    background: var(--green);
}

.procedures_section button:hover {
    color: white;
    background: var(--green);
}

.procedures_section button i {
    position: absolute;
    top: 50%;
    right: 1vw;
    transform: translateY(-50%);
    font-size: 1.5vw;
    pointer-events: none;
    transition: none;
}

.procedures_section .result_box {
    height: 45vw;
    background: #dbdbdb;
}

.procedures_section .media_box {
    position: relative;
    height: 30vw;
}

.procedures_section .media_box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

.procedures_section .info_box {
    display: flex;
    flex-direction: column;
    gap: .5vw;
    padding: 2vw;
}

.procedures_section .info_box h2 {
    color: var(--blue);
    font-size: 1.5vw;
}

@media (max-width: 996px) {
    .procedures_section {
        gap: 5vw;
        padding: 20% 10%;
    }
    .procedures_section .title_box {
        gap: 3vw;
    }
    .procedures_section .title_box h2 {
        font-size: 6vw;
    }
    .procedures_section .title_box p {
        width: 100%;
        text-align: justify;
    }
    .procedures_section .procedures_box {
        grid-template-columns: 1fr;
        border-radius: 5vw;
        border-radius: 3vw;
    }
    .procedures_section .filter_box {
        gap: 3vw;
        padding: 5vw 0;
    }
    .procedures_section button {
        width: 90%;
        text-align: left;
        align-items: left;
        gap: 2vw;
        font-size: 3.2vw;
        padding: 2vw;
        border-radius: 4vw;
        background: white;
    }
    .procedures_section button i {
        display: none;
    }
    .procedures_section .result_box {
        height: 130vw;
    }
    .procedures_section .media_box {
        height: 50vw;
    }
    .procedures_section .info_box {
        gap: 2vw;
        padding: 5vw;
    }
    .procedures_section .info_box h2 {
        font-size: 4vw;
        text-align: center;
    }
}


/* ---WELCOME STYLES--- */

.welcome_section {
    padding: 5% 7% 10% 7%;
    background: url(../media/welcome_banner.jpg);
    background-size: cover;
}

.welcome_section .welcome_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
}

.welcome_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5vw;
}

.welcome_section h2 {
    color: var(--blue);
    font-size: 2.5vw;
}

.welcome_box .media_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome_box .media_box img {
    width: 90%;
    border: .3vw solid var(--blue);
    border-radius: 1vw;
}

@media (max-width: 996px) {
    .welcome_section {
        padding: 20% 10% 20% 10%;
    }
    .welcome_section .welcome_box {
        grid-template-columns: 1fr;
        gap: 5vw;
    }
    .welcome_section .info_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3vw;
    }
    .welcome_section h2 {
        font-size: 5vw;
        text-align: center;
    }
    .welcome_box .media_box img {
        width: 100%;
        border: 1vw solid var(--blue);
        border-radius: 3vw;
    }
}


/* ---ABOUT STYLES--- */

.about_section .about_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
    padding: 10% 7% 5% 7%;
}

.about_section .title_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about_section h2 {
    color: var(--blue);
    font-size: 2.5vw;
    text-align: center;
}

.about_section .paragraph_box {
    display: flex;
    flex-direction: column;
    gap: .5vw;
}

.about_section p {
    text-align: center;
}

.about_section h2:nth-child(1) {
    color: var(--gray);
    font-size: 2vw;
}

.about_section .banner_box {
    height: 30vw;
    position: relative;
}

.about_section .banner_box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}

@media (max-width: 996px) {
    .about_section .about_box {
        gap: 5vw;
        padding: 20% 10%;
    }
    .about_section .title_box {
        gap: 1vw;
    }
    .about_section h2 {
        font-size: 6vw;
    }
    .about_section .paragraph_box {
        gap: 3vw;
    }
    .about_section h2:nth-child(1) {
        font-size: 5vw;
    }
    .about_section p {
        text-align: justify;
    }
    .about_section .banner_box {
        height: 50vw;
    }
}


/* ---POINTS STYLES--- */

.points_section {
    padding: 10% 7%;
    background: var(--blue);
}

.points_section .points_box {
    display: flex;
    flex-direction: column;
    gap: 5vw;
}

.points_section .points_item {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.points_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5vw;
}

.points_section h2 {
    color: white;
    font-size: 2vw;
}

.points_section p {
    color: white;
}

.points_section .media_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.points_section .points_item:last-child .media_box {
    order: -1;
}

.points_section img {
    width: 70%;
    border: .3vw solid white;
    border-radius: 1vw;
}

@media (max-width: 996px) {
    .points_section {
        padding: 20% 10%;
    }
    .points_section .points_box {
        gap: 20vw;
    }
    .points_section .points_item {
        grid-template-columns: 1fr;
        gap: 5vw;
    }
    .points_section .info_box {
        gap: 3vw;
    }
    .points_section h2 {
        font-size: 6vw;
        text-align: center;
    }
    .points_section p {
        text-align: justify;
    }
    .points_section .points_item:last-child .media_box {
        order: initial;
    }
    .points_section img {
        width: 100%;
        border: 1vw solid white;
        border-radius: 3vw;
    }
}


/* ---INSURANCES STYLES--- */

.insurances_section {
    padding: 5% 0;
}

.insurances_section .title_box {
    display: flex;
    justify-content: center;
    margin-bottom: 2%;
}

.insurances_section h2 {
    color: var(--blue);
    font-size: 2vw;
    text-align: center;
}

.insurances_section img {
    margin: 0 2vw;
}

@media (max-width: 996px) {
    .insurances_section {
        padding: 20% 0;
    }
    .insurances_section .title_box {
        margin-bottom: 5%;
    }
    .insurances_section h2 {
        font-size: 6vw;
    }
    .insurances_section img {
        margin: 0 5vw;
    }
}


/* ---SCHEDULE STYLES--- */

.schedule_section {
    padding: 5% 7%;
    background: url("../media/welcome_banner.jpg");
    background-size: cover;
}

.schedule_section .schedule_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
}

.schedule_section .info_box {
    display: flex;
    flex-direction: column;
    gap: .5vw;
}

.schedule_box h2 {
    color: var(--blue);
    font-size: 2vw;
}

.schedule_section .contact_box {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.schedule_section .form_box {
    display: flex;
    flex-direction: column;
    gap: .7vw;
}

.schedule_section input,
.schedule_section textarea {
    font-size: 1vw;
    padding: .5vw;
    border: none;
    background: white;
}

.schedule_section textarea {
    height: 5vw;
    resize: none;
}

.schedule_section input:focus-visible,
.schedule_section textarea:focus-visible {
    outline: none;
    background: #e5f8ff;
}

.schedule_section button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1vw;
    font-weight: 600;
    text-align: center;
    padding: .7vw 1.5vw;
    border: none;
    background: var(--blue);
}

.schedule_section button:hover {
    background: var(--green);
}

.schedule_box .message_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 2vw;
}

.schedule_section .message_box p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    text-align: center;
}

.schedule_section .success {
    color: #0bb300;
}

.schedule_section .error {
    color: #f31212;
}

@media (max-width: 996px) {
    .schedule_section {
        padding: 20% 10%;
    }
    .schedule_section .schedule_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }
    .schedule_section .info_box {
        gap: 3vw;
    }
    .schedule_box h2 {
        font-size: 6vw;
        text-align: center;
    }
    .schedule_section .contact_box {
        gap: 3vw;
    }
    .schedule_section .form_box {
        gap: 3vw;
    }
    .schedule_section input,
    .schedule_section textarea {
        font-size: 4vw;
        padding: 3vw;
    }
    .schedule_section textarea {
        height: 25vw;
    }
    .schedule_section button {
        font-size: 4vw;
        padding: 2vw 5vw;
    }
    .schedule_box .message_box {
        height: 7vw;
    }
    .schedule_section .message_box p {
        font-size: 3vw;
    }
}


/* ---FOOTER STYLES--- */

footer {
    background: var(--blue);
}

footer .footer_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    padding: 5% 10% 5% 10%;
}

footer .logo_box {
    width: 25%;
}

footer .logo_box a {
    width: 100%;
}

footer .contact_box {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

footer .contact_item {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

footer h2 {
    color: white;
    font-size: 2vw;
}

footer a,
footer p {
    color: white;
    font-size: 1vw;
}

footer a:hover {
    color: var(--gray);
}

footer i {
    transition: none;
}

footer .credits_box {
    display: flex;
    justify-content: center;
    gap: 3vw;
    padding: .5%;
    background: white;
}

footer .credits_box a {
    color: var(--blue);
    font-size: 1vw;
}

footer .credits_box a:hover {
    color: var(--green);
}

footer .credits_box span {
    color: var(--blue);
    font-size: 1vw;
    pointer-events: none;
}

@media (max-width: 996px) {
    footer {
        background: var(--blue);
    }
    footer .footer_box {
        gap: 15vw;
        padding: 20% 10%;
    }
    footer .logo_box {
        width: 70%;
    }
    footer .contact_box {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10vw;
    }
    footer .contact_item {
        align-items: center;
        gap: 3vw;
    }
    footer h2 {
        font-size: 6vw;
        text-align: center;
    }
    footer a,
    footer p {
        font-size: 4vw;
        text-align: center;
    }
    footer .credits_box {
        flex-direction: column;
        gap: 2vw;
        padding: 5% 0;
    }
    footer .credits_box a {
        font-size: 4vw;
        text-align: center;
    }
    footer .credits_box span {
        display: none;
    }
}