:root{
    --rosa-claro: #F28B8D;
    --amarelo: #FCC085;
	--amarelo-25: #FCC08526;
    --azul-claro: #3AB9C5;
	--azul-claro-25: #3AB9C526;
	--azul-medio: #66A5B2;
    --azul-escuro: #00667C;
    --cinza: #747474;
	--cinza-claro: #F8F8F8;
    --branco: #FFFFFF;
	--aqua-medio: #2D8CA1;
	--aqua-claro: #00667C4D;
	--aqua-escuro: #01333E;
	--aqua-escuro-30: #01333E33;
	--bege: #DED5C6;
	--laranja: #E45A29;

    --padding-x-global: 6.25rem;
	--padding-x-global-mobile: 2rem;
	--section-y-global: 4rem;

	--Source-Sans: "Source Sans 3", sans-serif;

	--h1-fs: 3rem;
	--h1-lh: 1.2em;
	--h2-fs: 2.8rem;
	--h2-lh: 1.2em;
	--h3-fs: 2.6rem;
	--h3-lh: 1.2em;
	--h4-fs: 2.2rem;
	--h4-lh: 1.2em;
	--h5-fs: 1.7em;
	--h5-lh: 1.2em;
	--h6-fs: 1.2rem;
	--h6-lh: 1.2em; 

	--h1-fs-mobile: 2.2rem;
	--h1-lh-mobile: 1.2em;
	--h2-fs-mobile: 2rem;
	--h2-lh-mobile: 1.2em;
	--h3-fs-mobile: 1.8rem;
	--h3-lh-mobile: 1.2em;
	--h4-fs-mobile: 1.6rem;
	--h4-lh-mobile: 1.2em;
	--h5-fs-mobile: 1.3em;
	--h5-lh-mobile: 1.2em;
	--h6-fs-mobile: 1.2rem;
	--h6-lh-mobile: 1.2em; 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--Source-Sans);
	font-size: calc(10px + 0.390625vw);
}

body {
	color: var(--cinza);
	background: var(--azul-claro);
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: inherit;
	text-decoration: none;
}

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

/* input:hover,
select:hover,
textarea:hover {
	border: 1px solid #3151A5;
} */

input:focus,
select:focus,
textarea:focus {
/* 	border: 1px solid #0F458B!important; */
	border-color: var(--branco);
	box-shadow: none!important;
	outline: none!important;
}

input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

.wrapper {
	padding: var(--section-y-global) 0;
	overflow: hidden;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	padding: 0 var(--padding-x-global);
	max-width: 100rem;
}

.h1, h1 {
	font-size: var(--h1-fs);
	line-height: var(--h1-lh);
}

.h2, h2 {
	font-size: var(--h2-fs);
	line-height: var(--h2-lh);
}

.h3, h3 {
	font-size: var(--h3-fs);
	line-height: var(--h3-lh);
}

.h4, h4 {
	font-size: var(--h4-fs);
	line-height: var(--h4-lh);
}

.h5, h5 {
	font-size: var(--h5-fs);
	line-height: var(--h5-lh);
}

.h6, h6 {
	font-size: var(--h6-fs);
	line-height: var(--h6-lh);
}

h4 {
	color: var(--aqua-escuro);
}

.btn.btn-default {
	font-weight: 500;
	color: var(--branco);
	padding: 0.5rem 1rem;
	transition: 0.5s;
	border-radius: 10px;
	border: 1px solid var(--branco);
}

.btn.btn-default:hover {
	background: var(--amarelo-25);
}

.btn.btn-default.btn-azul {
	background: var(--azul-escuro);
	border: 1px solid var(--azul-escuro);
}

.btn.btn-default.btn-azul:hover {
	border: 1px solid var(--azul-claro);
}

.btn.btn-default.btn-amarelo {
	border: 1px solid var(--amarelo);
	background: var(--amarelo);
}

.btn.btn-default.btn-amarelo:hover {
	border: 1px solid var(--azul-escuro);
}

.btn.btn-default.btn-outline-azul {
	border: 1px solid var(--azul-escuro);
	background: transparent;
	color: var(--azul-escuro);
}

.btn.btn-default.btn-outline-azul:hover {
	background: var(--azul-claro-25);
	border: 1px solid var(--azul-claro);
}

.btn.btn-default.btn-outline-amarelo {
	border: 1px solid var(--amarelo);
	background: transparent;
	color: var(--branco);
}

.btn.btn-default.btn-outline-amarelo:hover {
	background: var(--amarelo-25);
}

.btn.btn-default.btn-escuro {
	background: var(--aqua-escuro);
	border: 1px solid var(--aqua-escuro);
	border-radius: 8px;
	padding: 0.75rem 1.5rem;
	margin: 0 0.5rem 1rem 0;
	font-size: 120%;
	font-weight: 400;
}

.btn.btn-default.btn-escuro:hover {
	border: 1px solid var(--branco);
}

.btn.btn-default.btn-outline-branco {
	background: transparent;
	border: 1px solid var(--branco);
	border-radius: 8px;
	padding: 0.75rem 1.5rem;
	margin: 0 0.5rem 1rem 0;
	font-size: 120%;
	font-weight: 400;
}

.btn.btn-default.btn-outline-branco:hover {
	background: var(--aqua-escuro-30);
}

.btn.back-btn {
	color: var(--branco);
	padding: 0;
	margin: 1.5rem 0;
	transition: 0.3s;
}

.btn.back-btn:hover {
	text-shadow: 0px 3px 6px #00000029;
}

.stop-scrolling {
	height: 100%;
	overflow: hidden;
}

header {
	background: transparent;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	transition: 1s;
}

header .navbar {
	padding: 1rem 0;
}

header .navbar-brand img {
	height: 60px;
}

header .ham,
header .socials {
	display: none;
}

header .wrapper-menu {
	display: flex;
	align-items: center;
}

header .navbar #menu-header {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

header .navbar #menu-header li {
	margin: 0 20px;
}

header .fa-chevron-down{
	font-size: 15px;
	color: #011039;
}

header .navbar #menu-header li.current-menu-item a {
	color: var(--amarelo);
	text-shadow: 0px 3px 6px #FCC0858C;
}

header .navbar #menu-header li a {
	font-weight: 500;
	color: var(--branco);
	border-bottom: 1px solid transparent;
	transition: 0.5s;
}

header .navbar #menu-header .btn.btn-default{
	margin-left: 30px;
}

header .navbar #menu-header .btn.btn-default2{
	margin-left: 10px;
}

footer {
	background-color: var(--azul-escuro);
	color: var(--bege);
}

footer i {
	font-size: 125%;
	margin-right: 1rem;
}

footer li {
	margin-bottom: 0.5rem;
}

footer li a,
footer p,
footer span {
	font-size: 90%;
}

footer #logo-footer {
    height: 50px;
}

footer #logo-tuna {
    height: 30px;
}

footer .fa-phone-volume {
    transform: rotate(-45deg);
}

footer .credits-footer {
	border-top: 2px solid rgba(255, 255, 255, 0.2);
	color: var(--amarelo);
	font-weight: 300;
}

footer .credits-footer b {
	font-weight: 700;
}

footer .credits-footer .credits-right {
	text-align: right;
}

#banner-page {
	position: relative;
	height: 70vh;
	min-height: 600px;
}

#banner-page .banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#banner-page .background-video {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; 
}

#banner-page:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(70deg, #F28B8D, #F28B8D66, #62CED866, #00667CBA);
	filter: brightness(0.8) contrast(1.2);
}

#banner-page .content {
	position: absolute;
	z-index: 1;
	display: block;
	color: var(--branco);
	top: 20%;
	max-width: 450px;
}

#faq {
	background: var(--cinza-claro);
}

#faq h6 {
	color: var(--azul-escuro);
}

#faq h5 {
	color: var(--aqua-escuro);
}

#faq .content {
	text-align: right;
	float: right;
	padding-top: 2rem;
}

#faq .accordion-item {
	background-color: transparent;
	color: var(--cinza);
	border-top: 2px solid  #01333E35;
	border-bottom: none;
	border-left: none;
	border-right: none;
}

#faq .accordion-item:first-of-type {
	border-radius: 0;
}

#faq .accordion-button {
	background-color: transparent;
	font-size: inherit;
	font-weight: 700;
	color: var(--aqua-escuro);
	padding: 2rem 2rem 1.5rem;
}

#faq .accordion-button:not(.collapsed) {
	background-color: transparent;
}

#faq .accordion-button:focus {
	box-shadow: none;
	outline: 0;
}

#faq .accordion-button:not(.collapsed), 
#faq .accordion-button:not(.collapsed):focus  {
	box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px;
}

#faq .accordion-button:after {
	background-size: 1.55rem;
	width: 1.5rem;
}

#faq .accordion-body {
	max-width: 70%;
	padding: 0 2rem 2rem;
}

#values {
	background: var(--branco);
}

#values .row {
	padding: 3rem;
}

#values .content {
	padding-right: 2rem;
}

#values .content h4 {
	max-width: 430px;
}

#values img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#convenience {
	background: var(--cinza-claro);
}

#convenience p {
	font-weight: 500;
}

#convenience .swiper-slide {
	height: auto;
}

#convenience .card {
	border: none;
	box-shadow: 0px 3px 6px #00000029;
	border-radius: 19px;
	height: calc(100% - 20px);
	color: var(--cinza);
	transition: 0.3s;
}

#convenience .card:hover {
	background: var(--azul-medio);
	color: var(--branco);
	height: 100%;
}

#convenience .card .card-body {
	padding: 35px 25px 55px;
}

#convenience .card i {
	background: var(--branco);
	color: var(--cinza);
	border-radius: 11px;
	padding: 1rem;
	border: 1px solid var(--azul-escuro);
	font-size: 2rem;
	margin-right: 1rem;
	transition: 0.3s;
}

#convenience .card:hover i {
	color: var(--azul-escuro);
}

#convenience .card .card-title {
	font-weight: 700;
	color: var(--aqua-escuro);
	transition: 0.3s;
}

#convenience .card:hover .card-title {
	font-weight: 700;
	color: var(--branco);
}

#convenience .card .card-text {
	font-size: 90%;
	margin-bottom: 0;
}

#satisfaction {
	background: var(--branco);
}

#satisfaction .content {
	max-width: 550px;
	margin: auto;
}

#satisfaction .dashed-line {
	position: absolute;
	height: 100%;
	width: 1px;
	left: 25px;
	overflow: hidden;
}

#satisfaction .dashed-line:before {
	content: "";
	border: 7px dashed var(--azul-claro);
	position: absolute;
	height: 100%;
}

#satisfaction .content ul.items {
	position: relative;
	max-width: 320px;
	padding-left: 60px;
}

#satisfaction .item {
	position: relative;
	margin-bottom: 2rem;
}

#satisfaction .item i {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	background: var(--branco);
	border: 1px solid var(--azul-escuro);
	border-radius: 50%;
	left: -60px;
	color: var(--azul-escuro);
}

#satisfaction .item h6 {
	color: var(--azul-escuro);
}

#satisfaction .mockup {
	position: relative;
	display: block;
	margin: auto;
	width: 60%;
    height: auto;
    padding-top: 125%;
}

#satisfaction .mobile {
	position: absolute;
	height: 100%;
	width: auto;
	left: 0;
	top: 0;
}

#satisfaction video {
	position: absolute;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    left: 15px;
    border-radius: 40px;
    top: 15px;
    background: transparent;
}

#be-part {
	background: var(--cinza-claro);
}

#be-part .content {
	padding: 3rem;
}

#be-part .content h1 {
	color: var(--azul-escuro);
}

#be-part .content p {
	max-width: 660px;
	font-size: 110%;
	font-weight: 500;
	color: var(--aqua-escuro);
}

#responsability {
	background: var(--branco);
}

#responsability .row {
	padding: 3rem;
}

#responsability .content {
	display: flex;
    flex-direction: column;
	justify-content: center;
	height: 100%;
	padding-left: 2rem;
}

#responsability img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#how-to-works {
	background: var(--aqua-escuro);
	color: var(--branco);
}

#how-to-works .box-img {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 350px;
}

#how-to-works .box-img img {
	position: relative;
	object-fit: contain;
	z-index: 1;
}

#how-to-works .box-img #img1 {
	height: 100%;
	transform: translateX(10px);
}

#how-to-works .box-img #img2 {
	height: 90%;
	transform: translateX(-30px);
	z-index: 2;
}

#how-to-works .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	max-width: 530px;
}

@media(max-width: 1200px) {

	#convenience h4 {
		text-align: center;
	}

	#convenience p {
		text-align: center;
		margin-bottom: 2.5rem;
	}

	#satisfaction video {
		height: calc(100% - 10px);
		width: calc(100% - 10px);
		left: 7px;
		border-radius: 20px;
		top: 10px;
	}
	
	#how-to-works .box-img {
		height: 230px;
	}
	
}

@media(max-width: 1024px) {
	
	* {
		font-size: calc(12px + 0.390625vw);
	}
	
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		padding: 0 var(--padding-x-global-mobile);
	}
	
	header {
		padding: 1rem 0;
		background: var(--azul);
	}

	header .navbar {
		padding: 0;
	}
	
	header .navbar-brand img {
		height: 50px;
	}
	
	header .buttons-header {
		display: none;
	}

	header .ham {
		background-color: transparent;
		border: none;
		cursor: pointer;
		display: flex;
		padding: 0;
	}

	header .line {
		fill: none;
		stroke: var(--branco);
		stroke-width: 6;
		transition: stroke-dasharray 1000ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 1000ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	header .line1 {
		stroke-dasharray: 60 207;
		stroke-width: 6;
		stroke-linecap: round;
	}

	header .line2 {
		stroke-dasharray: 60 60;
		stroke-width: 6;
		stroke-linecap: round;
	}

	header .line3 {
		stroke-dasharray: 60 207;
		stroke-width: 6;
		stroke-linecap: round;
	}

	header .opened .line1 {
		stroke-dasharray: 90 207;
		stroke-dashoffset: -134;
		stroke-width: 6;
		stroke-linecap: round;
	}

	header .opened .line2 {
		stroke-dasharray: 1 60;
		stroke-dashoffset: -30;
		stroke-width: 6;
		stroke-linecap: round;
	}

	header .opened .line3 {
		stroke-dasharray: 90 207;
		stroke-dashoffset: -134;
		stroke-width: 6;
		stroke-linecap: round;
	}

	header .wrapper-menu {
		position: fixed;
		display: flex;
		flex-direction: column;
		justify-content: start;
		width: 100vw;
		top: 83px;
		left: 0;
		padding-top: 4rem;
		max-width: initial;
		background: rgba(0, 102, 124, 0.9);
		overflow: hidden;
		opacity: 0;
		height: 0;
	}

	header .menu-header-container {
		padding-bottom: 5.4rem;
	}

	header #menu-header {
		position: relative;
		justify-content: unset;
		flex-direction: column;
	}

	header #menu-header li {
		padding: 1.25rem 0;
	}

	header #menu-header li a {
		font-size: 1.25rem;
	}

	header .socials {
		display: block;
		text-align: center;
	}

	header .socials h6 {
		font-weight: 700;
		color: var(--branco);
	}

	header .socials ul {
		display: flex;
		justify-content: center;
		padding: 0.8rem 0;
	}

	header .socials ul li {
		padding: 0 0.8rem; 
	}

	header .socials ul li i {
		font-size: 2.7rem;
		color: var(--branco);
	}

}

@media(max-width: 992px) {

	#faq .content {
		text-align: left;
		float: left;
		padding-top: 1rem;
	}

	#values .row {
		padding: 0;
	}

	#values .content {
		padding-right: 0;
		margin-bottom: 2rem;
	}
	
	.swiperConvenience {
		width: 100vw;
		max-width: 100vw;
		margin: 0 calc(-50vw + 50%);
	}

	#convenience .swiper-slide-active .card {
		background: var(--azul-medio);
		color: var(--branco);
		height: 100%;
	}

	#convenience .swiper-slide-active .card i {
		color: var(--azul-escuro);
	}

	#convenience .swiper-slide-active .card .card-title {
		font-weight: 700;
		color: var(--branco);
	}

	#convenience .card:hover {
		background: transparent;
		height: calc(100% - 20px);
		color: var(--cinza);
	}

	#convenience .card:hover i {
		color: var(--cinza);
	}

	#convenience .card:hover .card-title {
		font-weight: 700;
		color: var(--aqua-escuro);
	}

	#responsability .row {
		padding: 0;
	}
	
	#responsability .content {
		padding-left: 0;
	}

	#responsability img {
		margin-bottom: 2rem;
	}

}

@media(max-width: 768px) {

	.h1, h1 {
		font-size: var(--h1-fs-mobile);
		line-height: var(--h1-lh-mobile);
	}

	.h2, h2 {
		font-size: var(--h2-fs-mobile);
		line-height: var(--h2-lh-mobile);
	}

	.h3, h3 {
		font-size: var(--h3-fs-mobile);
		line-height: var(--h3-lh-mobile);
	}

	.h4, h4 {
		font-size: var(--h4-fs-mobile);
		line-height: var(--h4-lh-mobile);
	}

	.h5, h5 {
		font-size: var(--h5-fs-mobile);
		line-height: var(--h5-lh-mobile);
	}

	.h6, h6 {
		font-size: var(--h6-fs-mobile);
		line-height: var(--h6-lh-mobile);
	}
	
	#satisfaction .row {
		flex-direction: column-reverse;
	}

}

@media(max-width: 576px){
	
	footer li a,
	footer p,
	footer span {
		font-size: initial;
	}
	
	footer .credits-left {
		display: flex;
        position: relative;
        flex-direction: column-reverse;
	}
	
	footer .credits-left span:first-child {
		display: flex;
		justify-content: center;
	}
	
	footer .credits-left span:last-child {
		display: flex;
		justify-content: space-between;
	}
	
	footer .credits-left .me-5,
	footer .credits-left .mx-3 {
		margin: .5rem 0 !important;
	}
	
	footer .credits-footer .credits-right {
		padding-top: 1rem;
		text-align: center;
	}
	
	#banner-page {
		height: 80vh;
	}
	
	#banner-page .content {
		max-width: 70%;
	}
	
	#faq .accordion-body {
		max-width: 100%;
		padding: 0 2rem 2rem;
	}

	#convenience .cards {
		display: block;
	}

	#convenience .cards .card {
		margin: 20px 10px;
	}
	
	#be-part .content {
		padding: 0;
	}
	
	#how-to-works .box-img {
		height: 210px;
	}

	#how-to-works .content {
		margin-top: 2rem;
	}
	
	#satisfaction video {
		border-radius: 30px;
	}
	
}

@media(max-height: 576px) {

	header .wrapper-menu {
		flex-direction: row;
		justify-content: space-evenly;
		align-items: flex-start;
	}

}

.preloader {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--azul-claro);
	background: var(--branco);
	z-index: 99999;
	transition: 2s ease-in-out;
}

.preloader .content {
	transition: .7s;
}

.preloader .flip-card {
  position: relative;
  width: 83px;
  height: 50px;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.preloader .flip-card-front,
.preloader .flip-card-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	transition: transform 0.6s;
	display: flex;
	justify-content: center;
	align-items: center;
}

.preloader .flip-card-front {
	color: #fff;
	animation: front 1s ease-in-out 1s infinite;
}

.preloader .flip-card-back {
	color: #fff;
	transform: rotateY(180deg);
	animation: back 1s ease-in-out 1s infinite;
}

@keyframes front {
  0%   {transform: rotateY(0deg);}
  100% {transform: rotateY(-180deg);}
}

@keyframes back {
  0%   {transform: rotateY(180deg);}
  100% {transform: rotateY(0deg);}
}

.preloader .fa-spin {
	margin-top: 20px;
	color: var(--azul-claro);
}