@import url('https://fonts.googleapis.com/css2?family=KoHo:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');



* {
	box-sizing: border-box;
}

html,
body {
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
	/* user-select: none;  */
}

/* desativar scroll quando adicionada a classe disableScroll ao HTML */
html.disableScroll {
	overflow-y: hidden;
}

img {
	max-width: 100%;
}

/********* Alterar o scroll bar **********/
html {
	scrollbar-width: thin; /* Adjust the width of the scrollbar */
	scrollbar-color: #888 transparent; /* Adjust the color of the scrollbar */
}

/* Define the style for the scrollbar track */
html::-webkit-scrollbar {
	width: 4px; /* Adjust the width of the scrollbar */
}

/* Define the style for the scrollbar thumb */
html::-webkit-scrollbar-thumb {
	background-color: #888; /* Adjust the color of the scrollbar thumb */
	border-radius: 4px; /* Adjust the border radius of the scrollbar thumb */
}

/* Style for scrollbar track (background) */
html::-webkit-scrollbar-track {
	background-color: var(--white); /* Background color of the scrollbar track */
}
/********* FIM DE Alterar o scroll bar **********/

/* Reset comportamento de links */
a,
a:hover,
a:focus,
a:active {
	text-decoration: none;
	color: var(--black);
	cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
input {
	margin: 0px;
	/* para que as fonts fiquem com linha mais fina */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a,
span {
	/* para que as fonts fiquem com linha mais fina */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a {
	overflow-wrap: anywhere;
}

/**************** COMPONENTES DE FORMULARIOS **************/
/* Colocar os placeholders dos inputs com cor normal, remover o cinzento */
input::placeholder {
	color: var(--white);
	opacity: 1; /* Firefox */
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px var(--black) inset !important;
	-webkit-text-fill-color: var(--white) !important;
}

/* Change the white to any color */
.white input:-webkit-autofill,
.white input:-webkit-autofill:hover,
.white input:-webkit-autofill:focus,
.white input:-webkit-autofill:active,
.white select:-webkit-autofill,
.white select:-webkit-autofill:hover,
.white select:-webkit-autofill:focus,
.white select:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px var(--white) inset !important;
	-webkit-text-fill-color: var(--black) !important;
}

input:focus,
select:focus {
	outline: none !important;
}

/* Remover incremento de número - Chrome, Safari, Edge, Opera  */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* remover espaçamentos */
.wpb_button,
.wpb_content_element,
ul.wpb_thumbnails-fluid > li,
.vc_btn3-container {
	margin-bottom: 0px !important;
}

ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

/* Variáveis p/ reutilizar */
:root {
	/* Cores */
	--black: #000000;
	--white: #ffffff;
	--grey: #222222;
	--header-height: 50px;
	--page-margin: 25px;
	--border-radius: 4px;
	--page-top-space: 180px;
	--page-bottom-margin: 128px;
}

/* Remover paddings */
.noPadding {
	padding-left: 0px;
	padding-right: 0px;
}

/* REGRAS PARA PROJETO */
body {
	/* margin:0px */
	overflow-x: hidden;
}










/* =====================================================
   RESET
===================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    font-family:
        "KoHo",sans-serif,
        Arial,
        Helvetica,
        sans-serif;
}



/* =====================================================
   PAGE
===================================================== */

.coming-soon {
    min-height: 100vh;

    overflow: hidden;

}

/* =====================================================
   HEADER
===================================================== */
.site-header {
    position: relative;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 100px;

    padding: 12px 30px;

    background: #ffffff;
}

/* Onda branca por baixo do header */
.site-header::after {
    content: "";

    position: absolute;
    left: -5%;
    bottom: -28px;

    width: 110%;
    height: 50px;

    background: #ffffff;

    border-radius:
        0 0 50% 50% /
        0 0 100% 100%;

    z-index: 1;

    pointer-events: none;
}

.site-logo {
    position: relative;
    z-index: 2;
    display: block;
    width: 202px;
    padding: 37.5px 0;
}


.site-logo img {
    display: block;

    width: 100%;
    height: auto;
}

/* =====================================================
   HERO
===================================================== */

.hero {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    height:calc(100vh - 248px);

    min-height: 425px;

    background-image: url("img/Back.png");

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;
}

/* =====================================================
   TEXTO HERO
===================================================== */

.hero__content {
    position: relative;

    z-index: 2;

    color: #ffffff;

    text-align: center;

}


.hero__content h1 {
font-weight: 600;
font-size: clamp(32px, 3.5vw, 50px);
line-height: 100%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
}


.hero__content p {
font-weight: 500;
font-size: clamp(24px, 2.2vw, 32px);
line-height: 160%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;

}


/* =====================================================
   BOTÃO
===================================================== */

.hero__button-wrap {
    position: absolute;

    left: 50%;
    bottom: 40px;

    z-index: 4;

    transform:
        translateX(-50%);
}


.hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
width: clamp(220px, 19.8vw, 285px);
    height: 42px;
    border-radius: 999px;

    background: #003B4A;

    color: #ffffff;

font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 500;
    line-height: 160%;
    letter-spacing: 0%;
    white-space: nowrap;
}


/* =====================================================
   CONTACT BAR
===================================================== */

.contact-bar {
    position: relative;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 74px;

    margin-top: -1px;

    background: #1ECAD3;
}


/*
 * Cria a curva no topo
 * semelhante à referência.
 */

.contact-bar__curve {
    position: absolute;

    left: -10%;
    top: -27px;

    width: 120%;
    height: 48px;

    background: #1ECAD3;

    border-radius:
        50%
        50%
        0
        0 /
        100%
        100%
        0
        0;

    pointer-events: none;
}


/* =====================================================
   CONTACT INNER
===================================================== */

.contact-bar__inner {
    position: relative;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 29px;

    width: 100%;

    padding:
        55px 0 64px;

    color: #004557;
}


/* =====================================================
   LABEL
===================================================== */

.contact-bar__label {
font-weight: 500;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;

}


/* =====================================================
   CONTACT ITEM
===================================================== */

.contact-item {
    display: flex;
    align-items: center;

    gap: 15px;

    color: #003B4A;

    text-decoration: none;

    transition:
        opacity .2s ease;
}

.contact-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    flex: 0 0 22px;
}


.contact-item__icon svg {
    display: block;

    width: 22px;
    height: 22px;
}


/* =====================================================
   DIVIDER
===================================================== */

.contact-item__divider {
    width: 1px;
    height: 23px;

    background:
       #FFFFFF;
}


/* =====================================================
   CONTACT TEXT
===================================================== */

.contact-item__text {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.contact-item__text strong {
font-weight: 500;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
color: #003B4A;
}


.contact-item__text small {
font-weight: 400;
font-size: 10px;
line-height: 100%;
letter-spacing: 0%;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .hero {
        background-position:
            center center;
    }


    .hero__content h1 {
        font-size:
            clamp(
                24px,
                4vw,
                31px
            );
    }


    .contact-bar__inner {
        gap: 20px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .site-header {
        height: 68px;
    }


    .site-logo {
        width: 96px;
    }


    .hero {
        height:
            calc(100vh - 68px);

        min-height:
            570px;

        background-position:
            58% center;
    }


    .hero__content {
        width:
            calc(100% - 40px);

        margin-top:
            -60px;
    }


    .hero__content h1 {
        font-size:
            27px;

        line-height:
            1.08;
    }


    .hero__content p {
        margin-top: 8px;

        font-size: 14px;
    }


    .hero__button-wrap {
        bottom: 70px;
    }


    .contact-bar {
        min-height: auto;

        padding:
            32px
            20px
            28px;
    }


    .contact-bar__curve {
        top: -21px;

        height: 38px;
    }


    .contact-bar__inner {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;

        width: fit-content;

        padding: 0;
    }


    .contact-bar__label {
        margin-bottom: 2px;

        font-size: 10px;
    }


    .contact-item__text strong {
        font-size: 11px;
    }


    .contact-item__text small {
        font-size: 7px;
    }

}

/****************************** MEDIA QUERIES ************************************/
/* Intermédio 1 */
@media only screen and (max-width: 1750px) {
}
/* Intermédio 2 */
@media only screen and (max-width: 1650px) {
}
/* HD READY - Resolução Base Desenvolvimento */
@media only screen and (max-width: 1440px) {
}

/* Media query para menu hamburguer */
@media print, screen and (max-width: 1250px) {
}

/* Media query para menu hamburguer */
@media print, screen and (max-width: 1200px) {
}

/*tablet landscape or old laptop */
@media print, screen and (max-width: 1024px) {
}

/* Size considerado para Tablet */
@media only screen and (max-width: 991px) {
}
/* Size considerado para Tablet modo portrait*/
@media only screen and (max-width: 767.5px) {
}

@media only screen and (max-width: 600px) {
}
/* Size considerado Mobile - 430px*/
@media only screen and (max-width: 430px) {
}
/* smartphones plus */
@media only screen and (max-width: 414px) {
}
/* smartphones normais  */
@media only screen and (max-width: 378px) {
}
/* iphone 5 <=  */
@media only screen and (max-width: 320px) {
}