@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;500;600;700;800;900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: 0;
}

:root {
    --azulescuro: #00507f;
    --azulclaro: #51c2be;
    --texto: #494949;
}

html {
    /* a cada 1rem será considera 10px */
    font-size: 62.5%;
    background-color: #f4f4f4;
}

@media screen and (min-width: 960px) {
    html {
        font-size: 66%;
    }
}

body {
    width: 100%;
    font-size: 1.6rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    background-color: var(--corbg);
    color: var(--texto);
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

video {
    max-width: 100%;
}

img {
    max-width: 100%;
}

:hover {
    transition: .4s ease-in-out;
}

.container {
    width: 90%;
    margin: auto;
    max-width: 1200px;
}

.flex {
    display: flex;
    width: 100%;
}

.space-between {
    justify-content: space-between;
}

.column {
    flex-direction: column;
}

.align-center {
    align-items: center;
}

.gap20 {
    gap: 2rem;
}

.gap40 {
    gap: 4rem;
}

.mt10 {
    margin-top: 1rem;
}

.mt20 {
    margin-top: 2rem;
}

.mb10 {
    margin-bottom: 1rem;
}

.upper {
    text-transform: uppercase;
    font-weight: 800;
}

.font-bc {
    color: var(--azulclaro);
}

.font-be {
    color: var(--azulescuro);
}

.font-wt {
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

.titleh1 {
    font-size: 4rem;
    line-height: 4.7rem;
}

.titleh2 {
    font-size: 3.5rem;
    line-height: 4.2rem;
}

.titleh3 {
    font-size: 2rem;
    line-height: 2.6rem;
}

.titleh4 {
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 2.8rem;
}

.paragraph {
    font-size: 1.6rem;
    line-height: 2.6rem;
    font-weight: 400;
}

section,
main{
    padding: 6rem 0;
}

/* botao */
.btn {
    padding: 1.5rem 2rem;
    border: none;
    border-radius: 2.5rem;
    color: #fff;
    font-weight: 600;
    font-size: 1.6rem;
    cursor: pointer;
}

.btn-blue {
    background-color: var(--azulclaro);
}

.btn-blue:hover {
    background-color: var(--azulescuro);
}

/* VIDEO BANNER */
.video-container {
    position: relative;
}

.video-container iframe {
    width: 360px;
}

.video-thumb {
    width: 100%;
    cursor: pointer;
}

@media screen and (min-width: 960px) {
    #header .flex {
        align-items: center;
    }

    #hero .flex {
        flex-wrap: nowrap;
        align-items: center;
        gap: 5rem;
    }

    #hero .column,
    #header .flex,
    #footer .column {
        flex-direction: row;
    }

    #hero .box-column:nth-child(1) {
        max-width: 40%;
    }

    .video-container iframe {
        width: 540px;
    }
}

/*razaos*/
.cards_medical {
    overflow-x: scroll;
    /* Rolagem lateral */
    flex-wrap: nowrap !important;
    flex-direction: row;
    width: 100%;
    padding: 20px 0;
    gap: 2rem;
}

.razoes article {
    /* background-color: rgba(81, 194, 190, .2); */
    padding: 4rem;
    border-radius: 2.5rem;
    position: relative;
    min-width: 70%;
    background-color:#d3eae9;
}

.razoes article img.icon {
    position: absolute;
    top: -20px;
    left: 38px;
    width: 40px;
    background: #fff;
    border-radius: 50%;
}

@media screen and (min-width: 960px) {
    .razoes {
        background-color: transparent;
        background-image: url('../images/marcadagua.png');
        background-size: 40%;
        background-position: bottom right;
        width: 100%;
        background-repeat: no-repeat;
    }

    .cards_medical {
        overflow-x: hidden;
        flex-wrap: wrap !important;
        gap: 4rem;
        flex-direction: row;
        justify-content: center;
    }

    .razoes article {
        background-color:#d3eae9;
        padding: 4rem;
        border-radius: 2.5rem;
        position: relative;
        min-width: 30%;
        max-width: 30%;
    }

    .razoes article img.icon {
        position: absolute;
        top: -20px;
        left: 38px;
        width: 50px;
    }
}


/* topo */
header#header {
    margin: 2rem auto;
    width: 100%;
}

.header .brand, .brand-footer {
    max-width: 200px;
}

/* hhero */
.banner {
    background-color: var(--azulescuro);
}

/* FORM */
.facaparte {
    background-color: #e6e7e7;
    width: 100%;
}

.facaparte .flex {
    max-width: 600px;
}

form {
    position: relative;
}

.form-group {
    position: relative;
    height: 4.5rem;
    margin-bottom: 10px;
}

label {
    position: absolute;
    top: 50%;
    left: 10px;
    /* transform: translateY(-50%); */
    transform: translate(10px, -10px);
    color: #333;
    pointer-events: none;
    z-index: 9;
}

input {
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    border: 2px solid var(--azulescuro);
    border-radius: 40px;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s;
    height: 100%;
    font-size: 1.4rem;
}

input:focus {
    border-color: #ff0000;
}

/* input:focus+label {
    transform: translateY(-100px);
    font-size: 10px;
    color: #ff0000;
    transition: transform 0.3s, font-size 0.3s, color 0.3s;
} */

label.active {
    font-size: .8rem;
    transform: translate(10px, -17px);
    transition: transform 0.3s, font-size 0.3s, color 0.3s;
}

@media screen and (min-width: 960px) {
    .facaparte {
        background-color: #e6e7e7;
        background-image: url('../images/bg_form.png');
        background-size: 50%;
        background-position: right;
        width: 100%;
        background-repeat: no-repeat;
    }
}

/* to top */
.scroll-top-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--azulescuro);
    box-shadow: 5px 0px 10px #2222223d;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: none; 
}

.scroll-top-button.show {
    display: block; 
}

/* footer */
#footer {
    background-image: linear-gradient(45deg, var(--azulescuro), #19699e);
    width: 100%;
    padding: 4rem 0;
}

.brand-footer {
    filter: brightness(0) invert(1);
}

ul.social-icons {
    padding: 0;
    list-style: none;
}

.footer-social-icons {
    width: auto;
    display: block;
}

.social-icon {
    color: #fff;
    width: 50px;
    height: 50px;
}

ul.social-icons {
    margin-top: 10px;
}

.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}

.social-icons a {
    color: #fff;
    text-decoration: none;
}

.uil-facebook-f, .uil-instagram {
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    width: 50px;
    height: 50px;
    font-size: 2rem;
    background-color: transparent;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.uil-facebook-f:hover {
    background-image: linear-gradient(to bottom, #3b5998, #4267B2);
}

.uil-instagram:hover {
    background-image: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d, #f56040, #f77737, #fcaf45, #ffdc80);

}

.developer {
    background-color: var(--azulescuro);
}

.developer p {
    font-size: 1rem;
    padding: 1.6rem;
    color: #fff;
    text-align: center;
}

.developer p a {
    color: #fff;
    font-weight: 600;
}