/* CORES */
:root {
	--orange: #FF670F;
	--orange2: #ff5e00;
	--light-orange: #fbaf83;
  --conlicita-green: #02A781;
  --conlicita-light-green: #E6F7F3;
	--background: #FBFBFF;
	--background2:rgb(240, 240, 240)F;
}

.orange {
	color: var(--orange);
}

/* GERAL */
* {
	font-family: "Noto Sans";
}

html,
body {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

main {
	background-color: #000000;
	background-image: linear-gradient(315deg, #000000 0%, #414141 74%);
}

section {
	width: 100%;
}

::-webkit-scrollbar {
	width: 8px;
	height: 0;
}

::-webkit-scrollbar, ::-webkit-scrollbar-track {
	background: #fdfdfd;
}

::-webkit-scrollbar-thumb {
	background: #4d4d57;
}


/*
===================
====== HEADER =====
=================== */

a {
	color: var(--orange);
}

header {
	width: 100%;
}

.header-restrainer {
	max-width: 1280px;
}

.link {
	transition: all .5 ease;
}

.link:hover {
  opacity: .8;
	transform: scale(1.02);
}

.header-container {
	max-width: 1280px;
}

.logo-container {
	flex: 1;
}

.ul-container {
	flex: 1;
	background-color: #fff;
}

/*
===================
====== BANNER =====
=================== */

.banner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	height: 100vh;
	flex-basis: 100%;
}

.banner-container {
	padding-top: 40px;
}

.banner-image {
	display: block;
	background-image: url("images/banner_background.jpeg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
}

.dark-gradient {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(to left, transparent 0%, black 90%);
}

.banner-title-container {
	max-width: 1280px;
	top: 120px;
	color: var(--orange);
	text-shadow: 0 0 15px rgb(0 0 0 / 25%);

}

.banner-title {
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.banner-sub-title {
	color: #fff;
}

.banner-button {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	-webkit-transition: .5s ease;
	transition: .5s ease;
	background: var(--orange);
	color: #fff;
}

.scale-button:hover {
	transform: scale(1.1);
	text-decoration: none;
}

/*
===================
= FUNCTIONALITIES =
=================== */

.functionalities-section {
	background-color:#FBFBFF;
}

.functionalities-container {
	max-width: 1280px;
	margin: 0 auto;
}

.decoration::after {
	content: '';
  display: block;
  position: static;
  height: 4px;
  -webkit-transition: .5s ease;
  transition: .5s ease;
  background-color: var(--orange);
}

.functionality {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.functionality-icon {
	background-color: var(--orange);
	border: 4px solid var(--light-orange);
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon {
	font-size: 2.6rem !important;
}

.functionalities-functionality-image {
	max-width: 700px;
}

.functionalities-functionality-title {
	color: var(--orange);
}

.functionalities-functionality-text {
	color: rgb(10, 10, 10);
}

#cloud-image {
	background: #FBFBFF url("images/signatures.png") no-repeat fixed 50% 80%;
}

#settings-image {
	margin-top: 4rem;
	background: #FBFBFF url("images/add_doc.png") no-repeat fixed 50% 80%;
}

#sign-image {
	margin-top: 4rem;
	background: #FBFBFF url("images/sign.png") no-repeat fixed 50% 80%;
}

#control-image {
	margin-top: 4rem;
	background: #FBFBFF url("images/dashboard.png") no-repeat fixed 50% 80%;
}

#cost-image {
	margin-top: 4rem;
	background: #FBFBFF url("images/cost_center.png") no-repeat fixed 50% 80%;
}

/*
===================
====== ABOUT ======
=================== */

.about {
	background-color: var(--background);
	min-height: 100vh;
	height: 100%;
}

.about-container {
	width: 100%;
	margin: auto;
	max-width: 1280px;
}


/* collapse */
.about-collapse-container {
	max-width: 1280px;
}

.collapsible {
	display: flex;
	align-items: center;
	justify-content: space-between;

	background-color: var(--orange);
	color: white;
	cursor: pointer;
	border-radius: .375rem;
	padding: 18px;
	width: 100%;
	border: none;
	transition: background .5s ease;

	text-align: left;
	outline: none;
	font-size: 15px;
	font-weight: bold;
}

.active-coll {
	background-color: var(--orange2);
}

.collapsible:hover {
	opacity: .8;
}

.content {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: #fff;
}

.auth-types-subtitle {
	background-color: var(--extra-light-blue);
	color: #fff;
	padding: 1rem;
	margin-top: 1rem;
}

.auth-types-text-container {
	padding: 0 1rem;
}

/* about-collapse-register-content */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* hide the images by default */
.mySlides {
  display: none;
}

.slide-image {
	width: 100%;
	max-width: 50rem;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
	background-color:var(--orange);
	border-radius: .375rem;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
}

.next {
  right: 0;
}

.prev:hover, .next:hover {
  background-color: var(--light-orange);
}

.text {
  padding: 8px 12px;
  position: absolute;
  bottom: -130px;
  width: 100%;
  text-align: justify;
}

.numbertext {
	color: var(--blue);
  padding: 8px 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: var(--blue-gray);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: var(--blue);
}

.fade {
  animation-name: fade;
  animation-duration: .8s;
}

@keyframes fade {
  from {opacity: .5}
  to {opacity: 1}
}

.tab-image {
	width: 100%;
	max-width: 60rem;
}

/* about-collapse-sending-content */
.cards-container {
	gap: 4rem;
}

.number-card {
	width:calc(100% * 1 / 3.001);
}

.inner-number-card {
	border-radius: 6px;
	min-height: 16rem;
	background-color: #edeff4;
}

.inner-number-card-title {
	min-height: 3.5rem;
}

.large-number {
	font-weight: 900;
	font-size: 9rem;
	line-height: 5.8rem;
	letter-spacing: -.03rem;
	color: var(--light-gray);
}

/*
===================
==== BENEFITS =====
=================== */

.benefits {
	background-color: #000000;
	background-image: linear-gradient(315deg, #000000 0%, #414141 100%);
}

#praticality-text {
	max-width: 100%;;
}

#privacy-text {
	max-width: 55%;;
}

.list-item {
  max-width: 1200px;
	width: 100%;
	height: 14rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.list-item-number {
	color: rgb(156 163 175);
	opacity: .6;
}

.list-item-container {
	color: #fff;
	font-weight: bold;
	cursor: unset;
	margin-left: 1rem;
	padding: 2.5rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.bg-color-transition {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(123, 107, 250, 0.05)), color-stop(90%, #050607));
  background-image: linear-gradient(rgba(123, 107, 250, 0.05) 10%, #050607 90%);
}

.img-project {
  width: 240px;
  height: 160px;
	object-fit: cover;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 35%;
  -webkit-transition: 1s ease;
  transition: 1s ease;
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -50%) translate3d(400px, 0, 0);
          transform: translate(-50%, -50%) translate3d(400px, 0, 0);
}

.bb-gray {
  width: 100%;
  border-bottom: 1px solid #6b6c6d;
}

#talk-team-button {
	color: var(--orange);
	background-color: transparent;
	border: 1px solid var(--orange);
}

#talk-team-link {
	color: #fff;
}

#talk-team-button:hover {
	background-color: var(--orange);
	color: #fff;
}

/*
===================
== SUBSCRIPTIONS ==
=================== */

.subscriptions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-basis: 100%;
}

.subscription-container {
	width: 100%;
	height: 100%;
}

.subscription-image {
	display: block;
	background-image: url("images/subscriptions_background.svg");
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	background-size: cover;
	height: 100%;
	width: 100%;
}

.subscription-card-decoration::after {
	width: 25%;
}

#basic-decoration::after {
	background-color: #464646;
	-webkit-transform: translate(150%, 10%);
          transform: translate(150%, 10%);
}

#pro-decoration::after {
	-webkit-transform: translate(150%, 10%);
          transform: translate(150%, 10%);
}

#custom-decoration::after {
	background-color: #464646;
	-webkit-transform: translate(150%, 10%);
          transform: translate(150%, 10%);
}

.subscription-card-description {
	font-size: .9rem;
	margin: .2rem 0;
	padding: .2rem;
	text-align: left;
}

.subscription-cards-container {
	height: 45%;
	cursor: pointer;
}

.subscription-card:hover {
	transform: scale(1.02);
}

.subscription-card-text {
	height: 24rem;
	color: #464646;
}

.pro-icon {
	color:var(--orange);
}

#basic-subscription-button {
	background-color: #464646;
}

#pro-subscription-button {
	background-color: var(--orange);
}

#custom-subscription-button {
	background-color: #464646;
}

#try-subscription-button {
	background-color: var(--orange);
}

.dark-background {
	background-color: rgba(0,0,0, .4);
}

footer {
	width: 100%;
	background-color: #000000;
	background-image: linear-gradient(185deg, #414141  0%, #000000 70%);
}

.pages-link {
	color: #fff;
}

.pages-link:visited {
	color: #fff;
}

#send-email-link {
	color: #fff;
	cursor: pointer;
}

/*
===================
== COOKIES ALERT ==
=================== */
.cookie-consent-container{
	z-index:999;
	width: 100%;
	min-height:20px;
	box-sizing:border-box;
	padding:30px 30px 30px 30px;
	background:#232323;
	overflow:hidden;
	position:fixed;
	bottom: 0px;
	left: 0px;
	display: none;
}

.cookie-consent-container .cookie-title a{
	color:#fff;
	font-size:22px;
	line-height:20px;
	display:block;
}

.cookie-consent-container .cookie-description p{
	margin:0;
	padding:0;
	color:#fff;
	font-size:13px;
	line-height:20px;
	display:block;
	margin-top:10px;
}

.cookie-consent-container .cookie-description a{
	color:var(--orange);
	text-decoration:underline;
}

.cookie-consent-container .cookie-button a{
	display:inline-block;
	color:#fff;
	font-size:14px;
	font-weight:700;
	margin-top:14px;
	background:var(--orange);
	box-sizing:border-box;
	border-radius: .375rem;
	padding:15px 24px;
	text-align:center;
	transition: opacity .3s;
}

.cookie-consent-container .cookie-button a:hover{
	cursor:pointer;
	opacity: .8;
}

@media (max-width:980px) {
	.cookie-consent-container{
		bottom:0!important;
		left:0!important;
		width:100%!important
	}
}



/*
===================
= RESPONSIVENESS ==
=================== */

@media screen and (max-width: 330px) {
	#first-register-container {
		font-size: 15px;
		bottom: -238%;
	}

	#second-register-container {
		bottom: -105%;
	}

	#third-register-container {
		bottom: -119%;
	}

	#question-sending-button {
		margin-top: .5rem;
	}
}

@media screen and (min-width: 331px) and (max-width: 340px) {
	#first-register-container {
		font-size:15px;
		bottom: -229%;
	}

	#second-register-container {
		bottom: -103%;
	}

	#third-register-container {
		bottom: -117%;
	}
}

@media screen and (min-width: 341px) and (max-width: 355px) {
	#first-register-container {
		font-size:15px;
		bottom: -221%;
	}

	#second-register-container {
		bottom: -103%;
	}

	#third-register-container {
		bottom: -117%;
	}
}

@media screen and (min-width: 356px) and (max-width: 368px) {
	#first-register-container {
		font-size:15px;
		bottom: -210%;
	}

	#second-register-container {
		bottom: -103%;
	}

	#third-register-container {
		bottom: -117%;
	}
}

@media screen and (min-width: 369px) and (max-width: 400px) {
	#second-register-container {
		bottom: -89%;
	}
}

@media screen and (min-width: 401px) and (max-width: 419px) {
	#second-register-container {
		bottom: -77%;
	}
}

@media screen and (min-width: 369px) and (max-width: 380px) {
	#first-register-container {
		font-size: 15px;
		bottom: -184%;
	}

	#third-register-container {
		bottom: -109%;
	}

	#question-sending-button {
		margin-top: 1rem;
	}

	.auth-methods-list, .auth-method-item {
		margin-top: 0;
		margin-bottom: 0;
	}
}

@media screen and (min-width: 381px) and (max-width: 400px) {
	#first-register-container {
		bottom: -201%;
	}

	#third-register-container {
		bottom: -102%;
	}

	#question-sending-button {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.auth-methods-list, .auth-method-item {
		margin-top: 0;
		margin-bottom: 0;
	}
}

@media screen and (min-width: 401px) and (max-width: 419px) {
	#first-register-container {
		bottom: -190%;
	}

	#second-register-container {
		bottom: -87%;
	}

	#third-register-container {
		bottom: -94%;
	}
}


@media screen and (min-width: 420px) and (max-width: 425px) {
	#first-register-container {
		bottom: -182%;
	}

	#second-register-container {
		bottom: -73%;
	}

	#third-register-container {
		bottom: -80%;
	}
}

@media screen and (min-width: 426px) and (max-width: 440px) {
	#first-register-container {
		bottom: -169%;
	}

	#second-register-container {
		bottom: -73%;
	}

	#third-register-container {
		bottom: -80%;
	}
}

@media screen and (min-width: 441px) and (max-width: 470px) {
	#first-register-container {
		bottom: -164%;
	}

	#second-register-container {
		bottom: -66%;
	}

	#third-register-container {
		bottom: -78%;
	}
}

@media screen and (min-width: 471px) and (max-width: 500px) {
	#first-register-container {
		bottom: -154%;
	}

	#second-register-container {
		bottom: -66%;
	}

	#third-register-container {
		bottom: -73%;
	}
}

@media screen and (min-width: 501px) and (max-width: 520px) {
	#first-register-container {
		bottom: -185%;
	}

	#second-register-container {
		bottom: -77%;
	}

	#third-register-container {
		bottom: -90%;
	}
}


@media screen and (min-width: 521px) and (max-width: 542px) {
	#first-register-container {
		bottom: -172%;
	}

	#second-register-container {
		bottom: -75%;
	}

	#third-register-container {
		bottom: -82%;
	}
}

@media screen and (min-width: 543px) and (max-width: 570px) {
	#first-register-container {
		bottom: -163%;
	}

	#second-register-container {
		bottom: -68%;
	}

	#third-register-container {
		bottom: -74%;
	}
}

@media screen and (min-width: 571px) and (max-width: 586px) {
	#first-register-container {
		bottom: -160%;
	}

	#second-register-container {
		bottom: -65%;
	}

	#third-register-container {
		bottom: -71%;
	}
}


@media screen and (min-width: 587px) and (max-width: 600px) {
	#first-register-container {
		bottom: -146%;
	}

	#second-register-container {
		bottom: -65%;
	}

	#third-register-container {
		bottom: -71%;
	}
}

@media screen and (min-width: 601px) and (max-width: 620px) {
	#first-register-container {
		bottom: -139%;
	}

	#second-register-container {
		bottom: -61%;
	}

	#third-register-container {
		bottom: -72%;
	}
}

@media screen and (min-width: 621px) and (max-width: 640px) {
	#first-register-container {
		bottom: -129%;
	}

	#second-register-container {
		bottom: -61%;
	}

	#third-register-container {
		bottom: -67%;
	}
}

@media screen and (min-width: 641px) and (max-width: 655px) {
	#first-register-container {
		bottom: -160%;
	}

	#second-register-container {
		bottom: -69%;
	}

	#third-register-container {
		bottom: -76%;
	}
}

@media screen and (min-width: 656px) and (max-width: 670px) {
	#first-register-container {
		bottom: -155%;
	}

	#second-register-container {
		bottom: -69%;
	}

	#third-register-container {
		bottom: -76%;
	}
}

@media screen and (min-width: 671px) and (max-width: 687px) {
	#first-register-container {
		bottom: -148%;
	}

	#second-register-container {
		bottom: -61%;
	}

	#third-register-container {
		bottom: -68%;
	}
}

@media screen and (min-width: 688px) and (max-width: 700px) {
	#first-register-container {
		bottom: -143%;
	}

	#second-register-container {
		bottom: -61%;
	}

	#third-register-container {
		bottom: -68%;
	}
}

@media screen and (min-width: 701px) and (max-width: 720px) {
	#first-register-container {
		bottom: -132%;
	}

	#second-register-container {
		bottom: -61%;
	}

	#third-register-container {
		bottom: -68%;
	}
}

@media screen and (min-width: 721px) and (max-width: 755px) {
	#first-register-container {
		bottom: -123%;
	}

	#second-register-container {
		bottom: -50%;
	}

	#third-register-container {
		bottom: -62%;
	}
}

@media screen and (min-width: 756px) and (max-width: 800px) {
	#first-register-container {
		bottom: -114%;
	}

	#second-register-container {
		bottom: -49%;
	}

	#third-register-container {
		bottom: -55%;
	}
}

@media screen and (min-width: 801px) and (max-width: 820px) {
	#first-register-container {
		bottom: -103%;
	}

	#second-register-container {
		bottom: -41%;
	}

	#third-register-container {
		bottom: -51%;
	}
}

@media screen and (min-width: 821px) and (max-width: 830px) {
	#first-register-container {
		bottom: -98%;
	}

	#second-register-container {
		bottom: -39%;
	}

	#third-register-container {
		bottom: -50%;
	}

	.talk-to-us-text {
		bottom: 0;
	}
}

@media screen and (min-width: 831px) and (max-width: 869px) {
	#first-register-container {
		bottom: -112%;
	}

	#second-register-container {
		bottom: -39%;
	}

	#third-register-container {
		bottom: -50%;
	}

	.talk-to-us-text {
		bottom: 0;
	}
}

@media screen and (min-width: 870px) and (max-width: 890px) {
	#first-register-container {
		bottom: -100%;
	}

	#second-register-container {
		bottom: -39%;
	}

	#third-register-container {
		bottom: -50%;
	}

	.talk-to-us-text {
		bottom: 0;
	}
}

@media screen and (min-width: 891px) and (max-width: 920px) {
	#first-register-container {
		bottom: -97%;
	}

	#second-register-container {
		bottom: -40%;
	}

	#third-register-container {
		bottom: -50%;
	}

	.talk-to-us-text {
		bottom: -1rem;
	}
}

@media screen and (min-width: 921px) {
	.text {
		column-gap: 1rem;
	}
}

@media screen and (min-width: 921px) and (max-width: 930px) {
	#first-register-container {
		bottom: -90%;
	}

	#second-register-container {
		bottom: -40%;
	}

	#third-register-container {
		bottom: -35%;
	}

	.talk-to-us-text {
		bottom: -1rem;
	}
}

@media screen and (min-width: 931px) and (max-width: 990px) {
	#first-register-container {
		bottom: -83%;
	}

	#second-register-container {
		bottom: -40%;
	}

	#third-register-container {
		bottom: -35%;
	}

	.talk-to-us-text {
		bottom: -1rem;
	}
}

@media screen and (min-width: 991px) and (max-width: 1015px) {
	#first-register-container {
		bottom: -75%;
	}

	#second-register-container {
		bottom: -24%;
	}

	#third-register-container {
		bottom: -28%;
	}

	.talk-to-us-text {
		bottom: 1rem;
	}
}

@media screen and (min-width: 1016px) and (max-width: 1130px) {
	#first-register-container {
		bottom: -70%;
	}

	#second-register-container {
		bottom: -24%;
	}

	#third-register-container {
		bottom: -28%;
	}

	.talk-to-us-text {
		bottom: 1rem;
	}
}

@media screen and (min-width: 1131px) {
	#first-register-container {
		bottom: -65%;
	}

	#second-register-container {
		bottom: -25%;
	}

	#third-register-container {
		bottom: -30%;
	}
}

@media screen and (min-width: 1131px) and (max-width: 1500px) {
	.talk-to-us-text {
		bottom: 0rem;
	}
}

@media screen and (min-width: 1501px) {
	.talk-to-us-text {
		bottom: 1rem;
	}
}

@media screen and (max-width: 420px) {
	.prev, .next {
		padding: 12px;
		font-size: 13px;
	}
}

@media screen and (max-width: 430px) {
	.list-item a {
		padding: .5rem;
	}

	.ul-container {
		width: 60%;
	}

	.functionality-icon {
		width: 3rem;
		height: 3rem;
	}

	.icon {
		font-size: 1.6rem !important;
	}
}

@media screen and (max-width: 440px) {
	.list-item-container {
		margin-left: 0;
		padding: 0;
	}

	.list-item:not(:first-of-type) {
		padding-top: 2rem;
	}

	.list-item-number {
		padding-top: 3rem;
		margin-right: 0;
	}

	#number01 {
		margin-top: 4rem;
	}
}

@media screen and (max-width: 335px) {
	.prev, .next {
		top: 76%;
	}
}

@media screen and (min-width: 336px) and (max-width: 365px) {
	.prev, .next {
		top: 74%;
	}
}

@media screen and (min-width: 366px) and (max-width: 380px) {
	.prev, .next {
		top: 79%;
	}
}

@media screen and (min-width: 381px) and (max-width: 400px) {
	.prev, .next {
		top: 74%;
	}
}

@media screen and (min-width: 401px) and (max-width: 420px) {
	.prev, .next {
		top: 72%;
	}
}

@media screen and (min-width: 521px) and (max-width: 570px) {
	.prev, .next {
		top: 77%;
	}
}

@media screen and (min-width: 521px) and (max-width: 580px) {
	.prev, .next {
		top: 67%;
	}
}

@media screen and (min-width: 581px) and (max-width: 680px) {
	.prev, .next {
		top: 68%;
	}
}

@media screen and (min-width: 681px) and (max-width: 869px) {
	.prev, .next {
		top: 65%;
	}
}

@media screen and (min-width: 870px) {
	.prev, .next {
		top: 65%;
	}
}

@media screen and (min-width: 420px) and (max-width: 520px) {
	.prev, .next {
		top: 72%;
		padding: 12px;
		font-size: 13px;
	}
}

@media screen and (max-width: 500px) {
	header {
		padding: 0;
	}

	.header-container {
		padding: .5rem;
	}

	.list-item {
		align-items: baseline;
		padding: 0;
	}

	.list-item:first-child {
		margin-top: 2rem;
	}

	.list-item-number {
		padding: 1rem 1rem 1rem 0;
	}

	.talk-team-inner-div {
		margin-top: 2rem;
	}

	#number01 {
		margin-top: 4rem;
	}
}

@media screen and (min-width: 431px) and (max-width: 630px) {
	.ul-container {
		width: 50%;
	}
}

@media screen and (min-width: 631px) and (max-width: 830px) {
	.ul-container {
		width: 40%;
	}
}

@media screen and (min-width: 831px) and (max-width: 1023px) {
	.ul-container {
		width: 30%;
	}
}

@media screen and (min-width: 500px) and (max-width: 830px) {

	.banner-title-container {
		padding: 0 6rem;
	}

	.functionalities-title {
		padding: 5rem 6rem 0 6rem;
	}

	.functionalities, .benefits-container {
		padding: 1rem 6rem;
	}

	.about-inner-container {
		padding: 1rem 4rem;
	}

	#how-it-works {
		padding: 1rem 3rem;
	}

	#about-image, .about-text-container {
		padding-left: 0;
		padding-right: 0;
	}

	.functionality {
		padding-left: 0;
		padding-right: 0;
	}

}

@media screen and (min-width: 500px) and (max-width: 640px) {
	.header-container {
		padding: 0 4.5rem 0 4.5rem;
	}
}

@media screen and (min-width: 641px) and (max-width: 830px) {
	.header-container {
		padding: 0 1rem 0 4.5rem;
	}
}

@media screen and (min-width: 831px) and (max-width: 1023px) {
	.header-container {
		padding: 0 4.5rem 0 8.5rem;
	}

	.banner-title-container {
		padding: 0 10rem;
	}

	.functionalities-title {
		padding: 5rem 10rem 0 10rem;
	}

	.functionalities, .benefits-container {
		padding: 1rem 10rem;
	}

	.about-inner-container {
		padding: 1rem 8rem;
	}

	#how-it-works {
		padding: 1rem 5rem;
	}

	.functionality {
		padding-left: 0;
		padding-right: 0;
	}
}

@media screen and (max-width: 1023px) {
	.logo-container {
		width: 31.5%;
	}

	.ul-container {
		right: 0;
		top: 6%;
		gap: 1rem;
	}

	.ul-container li {
		width: 100%;
		height: 50px;
	}

	.ul-container li a {
		width: 100%;
		display: inline-block;
		padding: 1rem 2rem;;
	}

	.ul-container li a:active,
	#btnEntrar a:active,
	#register-button a:active {
		text-decoration: underline;
	}

	#functionalities-link-li {
		margin-top: .5rem;
	}

	.functionalities-functionality-image {
		height: 100%;
		width: 100%;
	}

	.img-project {
		display: none;
	}

	.functionalities-functionality-image {
		margin: 0 auto;
	}

	#security-image {
		margin: 2rem auto 1rem auto;
	}

	#functionalities-decoration::after {
		width: 12%;
		-webkit-transform: translate(370%, 300%);
						transform: translate(370%, 300%);
	}

	#benefits-decoration::after {
		width: 12%;
		-webkit-transform: translate(370%, 300%);
						transform: translate(370%, 300%);
	}

	#subscription-decoration, #about-decoration {
		margin-bottom: 6rem;
		width: 12%;
		-webkit-transform: translate(370%, 300%);
						transform: translate(370%, 300%);
	}

	#privacy-text {
		max-width: 100%;
	}

}

@media screen and (min-width: 1024px) {
	.ul-container {
		height: 100%;
	}

	#btnEntrar {
		background-color: #fff;
		border: 1px solid var(--orange);
		color: var(--orange);
		height: 40px;
		width: 7rem;
		text-align: center;
	}

	#btnEntrar:hover {
		background-color: var(--orange);
		color: #fff;
	}

	#btnEntrar a {
		display: inline-block;
		width: 100%;
		height: 100%;
		padding: .5rem 1rem;
	}

	#btnEntrar a:hover{
		color: #fff;
		transition: all .3s ease;
	}

	#register-button {
		background-color: var(--orange);
		color: #fff;
		height: 40px;
		width: 7rem;
	}

	#register-button a {
		display: inline-block;
		width: 100%;
		height: 100%;
		padding: .5rem 1rem;
		color: #fff;
	}

	#register-button:hover {
		opacity: .8;
	}

	#register-button a:hover {
		color: #fff;
	}

	#benefits-inner-container {
		margin-top: 6rem;
	}

	.functionality-icon-texts {
		margin-left: 1.5rem;
	}

	.functionalities-functionality-image {
		margin: 0 auto;
	}

	#security-image {
		margin: 4rem auto 1rem auto;
	}

	#cost-center-image {
		margin-bottom: 4rem;
	}

	#praticality-text {
		max-width: 60%;;
	}

	#subscriptions {
		height: auto;
	}

	#functionalities-decoration::after {
		width: 10%;
		-webkit-transform: translate(450%, 300%);
						transform: translate(450%, 300%);
	}

	#benefits-decoration::after {
		width: 6%;
		-webkit-transform: translate(780%, 300%);
						transform: translate(780%, 300%);
	}

	#subscription-decoration, #about-decoration {
		margin-bottom: 6rem;
		width: 6%;
		-webkit-transform: translate(784%, 300%);
						transform: translate(784%, 300%);
	}

	#try-subscription-title {
		margin-top: 6rem;
	}

	#try-subscription-button {
		margin-bottom: 4rem;
	}

	.numbertext {
		padding: 8px 12px;
	}
}


@media screen and (min-width: 1024px) and (max-width: 1164px){
	.ul-container {
		height: 100%;
	}

	.ul-container li a {
		font-size: .925rem;
	}

	#btnEntrar a {
		padding: .5rem 2rem;
	}

	#privacy-text, #praticality-text, #convenience-text, #rubric-text, #pricing-text {
		max-width: 70%;
	}

}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	#about-image {
		max-width: 820px;
	}

	.signature-text, .costcenters-text {
		max-width: 97%;
	}
}

@media screen and (min-width: 1280px) {
	.banner-sub-title {
		width: 38%;
	}

	#about-image {
		max-width: 460px;
	}

	.talk-to-us-text {
		bottom: 0;
	}

	.functionalities-functionality-text {
		max-width: 1024px;
	}
}