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

html, body {
    height: 100%;
}

body {

	font-family: 'Poppins', sans-serif;

	text-rendering: optimizeLegibility;
	letter-spacing: .01em;

	/*sections.png*/
	/*background: url(../imgs/dirk-lach.jpg),linear-gradient(to top right,#2490d9,#00d685);*/
	/*background-repeat: no-repeat;*/

/*	background:
			radial-gradient(circle at 20% 30%, #00d685, transparent 40%),
			radial-gradient(circle at 80% 60%, #2490d9, transparent 45%),
			radial-gradient(circle at 80% 70%, #1368ad, transparent 70%),
			radial-gradient(circle at 50% 50%, #1cb5e0, transparent 60%), !* azul mais claro *!
			radial-gradient(circle at 70% 20%, #00ffa2, transparent 40%),  !* verde fluorescente *!
			radial-gradient(circle at 30% 80%, #3ddad7, transparent 50%);  !* azul esverdeado *!
	background-color: #0a0f1a; !* fundo escuro profundo *!
	background-blend-mode: screen;*/
/**/
	background:
			/*radial-gradient(circle at 30% 20%, #00d685 0%, transparent 50%),*/
			radial-gradient(circle at 70% 20%, #0098ff 0%, transparent 50%),
			radial-gradient(circle at 70% 80%, #075ed0 0%, transparent 100%), /*4096cb*/
			radial-gradient(circle at 50% 70%, #03424e 0%, transparent 60%), /*03424e*/ /* verde escuro*/
			radial-gradient(circle at 80% 10%, #00398f 0%, transparent 40%),
			radial-gradient(
					farthest-corner at 40px 40px,
					#045abd 0%,
					#43e 100%
			),
			radial-gradient(circle at 30% 20%, #00d685 0%, transparent 50%);
	background-color: #0559af;
	background-blend-mode: lighten;

}
/* 0098ff*/


/*body::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../imgs/dirk-lach.jpg),linear-gradient(to top right,#2490d9,#00d685);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: scaleY(-1) scaleX(-1);
	z-index: -1; !* put behind content *!
}*/

.gradient1 {

	
	/*min-height: 415px;*/
}

/********************************************************************************************************/
/*** HEADER ***/
/********************************************************************************************************/

header {
	
	border-top: 1px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 1);

	background-color: rgba(0, 105, 255, 0.2);

    color: rgba(255, 255, 255, 1);
    
    min-height: 50px;
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 10px 40px;
}

#app header {
	background: url(../imgs/sections.png),linear-gradient(to top right,#2490d9,#00d685);
}

.logo {
	height: 50px;
	line-height: 50px;

	font-size: 24px;
	font-weight: 700;
	letter-spacing: 1px;
	color: white;
	text-decoration: none;
	transition: all 0.3s ease;
	text-shadow: 0 0 2px #000;
}

.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-links {
	display: flex;
	gap: 40px;
}

.nav-links a:hover {
	opacity: 1;
}

.nav-links a {
	color: white;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	position: relative;
	padding-bottom: 5px;
	transition: all 0.3s ease;
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 0;
	width: 0;
	height: 1px;
	background-color: white;
	transition: width 0.3s ease;
}

.nav-links a:hover::after {
	width: 100%;
}

.container {
	margin: 0 auto;
	max-width: 80.0rem;
	padding: 0 2.0rem;
	position: relative;
	width: 100%;
}

/********************************************************************************************************/
/*** [FIM] HEADER [FIM] ***/
/********************************************************************************************************/

/********************************************************************************************************/
/*** HERO ***/
/********************************************************************************************************/

.hero {
	/*background: linear-gradient(135deg, #26c9c3 0%, #26c9a0 50%, #1e88c3 100%);*/
	padding: 80px 0;
	text-align: center;
	color: white;
}

.hero h1.frase-1 {
	font-size: 58px;
	margin-bottom: 20px;
	background: linear-gradient(0deg, #FFF 0%, #cecece 50%, #efefef 100%);
	background-clip: text;
	color: transparent;
	font-weight: bold;
	text-transform: uppercase;
	position: relative;
	z-index: 20;
}

.hero h1.frase-1-shadow {
	color: transparent;
	font-size: 58px;
	text-shadow: 0 0 4px #393939;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	font-weight: bold;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 10;
}

.hero p.frase-2 {
	max-width: 800px;
	margin: 0 auto 40px;
	font-weight: 200;
	color: #000;
	font-size: 40px;
}


.hero-buttons {
	display: flex;
	gap: 20px;
	justify-content: center;
}

.register-cta-incentive {
	font-size: 14px;
	color: #494949;
	margin-top: 15px;
}

.btn {
	padding: 12px 30px;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
	border: none;
}

.btn-primary {
	background-color: #0056b3;
	color: white;
}

.btn-primary:hover {
	background-color: #004494;
}

.btn-secondary {
	background-color: #17a2b8;
	color: white;
}

.btn-secondary:hover {
	background-color: #138496;
}


/*****/


.btn-white-1 {
	font-family: 'Poppins', sans-serif;
	background: linear-gradient(to bottom, #ffffff 0%,#d6d6d6 100%);
	appearance: none;
	border-radius: 8px;
	border-style: none;
	box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
	color: #34434f;
	font-size: 16px;
	font-weight: 500;
	height: 42px;
	letter-spacing: .25px;
	line-height: normal;
	max-width: 100%;
	overflow: visible;
	padding: 2px 24px;
	cursor: pointer;
	transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
	user-select: none;
	touch-action: manipulation;
	width: auto;
	will-change: transform,opacity;
	text-shadow: 1px 1px 0 #FFF;
}

.btn-white-1:hover {
	background: #F6F9FE;
	color: #174ea6;
}

.btn-white-1:active {
	box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
	outline: none;
}

.btn-white-1:focus {
	outline: none;
	border: 2px solid #4285f4;
}

.btn-white-1:not(:disabled) {
	box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.btn-white-1:not(:disabled):hover {
	box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
}

.btn-white-1:not(:disabled):focus {
	box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.btn-white-1:not(:disabled):active {
	box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
}

.btn-write-1:disabled {
	box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.btn-white-3 {
	border: 0.8px solid rgb(211, 217, 223);
	box-shadow: rgba(64, 76, 114, 0.08) 0px 3px 2px -1px,
	0 1px 2px 0 rgba(201, 206, 217, .8), 0 0 0 1px rgba(224, 229, 240, .88), 4px 8px 16px 1px rgba(224, 229, 240, .5);

	color: rgb(91, 105, 115);
	font-weight: 500;
	height: 32px;
	line-height: 24px;
	padding: 2px 24px;
	text-align: center;
	border-radius: 8px;
	text-shadow: 1px 1px 0 #FFF;
}


.btn-one {
	background-color: #0f2b62;
	color: #ffffff;
	padding: 12px 24px;
	border: none;
	border-radius: 6px;
	font-weight: bold;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	transition: background-color 0.2s ease;
}

.btn-one:hover {
	background-color: #163a80;
}

.btn-secondary {
	background-color: #026148;
	color: #ffffff;
	padding: 12px 24px;
	border: none;
	border-radius: 6px;
	font-weight: bold;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	transition: background-color 0.2s ease;
}

.btn-secondary:hover {
	background-color: #038f6d;
}


.btn-white-2 {
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

	border: 0;
	padding: 5px 10px;
	background-color: #ffffff;
	color: #0f1111;
	border-radius: 6px;
}

/****************************************/

.btn-blue-1 {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 500;
	height: 42px;
	letter-spacing: .25px;
	line-height: normal;
	max-width: 100%;
	overflow: visible;
	padding: 2px 24px;
	cursor: pointer;
	color: #fff;
	text-shadow: 0 0 5px #383838;
	border-style: none;
	border-radius: 8px;
	background:
			radial-gradient(circle 70px at 40% 0%, #4091d5 0%, transparent 60%),
			radial-gradient(circle 50px at 60% 100%, #4091d5 0%, transparent 80%),
			linear-gradient(to bottom, #3b679e 0%,#2b88d9 99%,#207cca 67%,#7db9e8 99%);


	border: 1px solid #3247cf;
	background:
			radial-gradient(circle 70px at 40% 0%, #4091d5 0%, transparent 60%),
			radial-gradient(circle 50px at 60% 100%, #4091d5 0%, transparent 80%),
			linear-gradient(180deg, #0a40ce, #4058ff 38%, #40a0ff);
			/*linear-gradient(180deg, #4098ff, #4058ff 62%, #4075ff);*/
	box-shadow:
			inset 0 1px 0px rgba(255, 255, 255, .2),
	inset 0 -1px 0px rgba(0, 0, 0, .2),
	0 1px 2px rgba(0, 0, 0, .2);


}

.btn-blue-1:hover {
	background-image: linear-gradient(180deg, #174cd2, #3f68ff 38%, #5aaaff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: all 1s ease-in-out;
}

.btn-blue-1:active {
	border-color: #192ba1;
}

.btn-blue-1::before,
.btn-blue-1::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: 7px;
	opacity: 0;
	transition-property: opacity;
	transition-duration: .2s;
}

.btn-blue-1::before {
	background-image: linear-gradient(180deg, #40a6ff, #4058ff 62%, #4075ff);
	box-shadow: inset 0 1px 0px rgba(255, 255, 255, .2),
	inset 0 -1px 0px rgba(0, 0, 0, .2);

}
.btn-blue-1::after {
	background-image: linear-gradient(180deg, #0a40ce, #4058ff 38%, #40a0ff);
	box-shadow: inset 0 1px 1px #0b1c95;
}
/********************************************************************************************************/
/*** [FIM] HERO [FIM] ***/
/********************************************************************************************************/

/********************************************************************************************************/
/*** FEATURES ***/
/********************************************************************************************************/

#features {
	background-color: #eee;
	padding: 40px 0;
}

#features h1 {
	font-size: 40px;
	color: #1e2d48;
}

.featureList {
	display: flex;
	justify-content: space-between;

}

.featureBox {
	/*background-color: #fff;*/
	border-radius: 8px;
	/*box-shadow: 0 0px 2px rgba(0,0,0,0.2);*/
	padding: 25px 30px 30px 30px;
	text-align: center;
	width: 390px;
	/*min-height: 300px;*/

	border: 0.5px solid transparent;
	/*border-image: linear-gradient(45deg, #ffffff, #7c7c7c) 1;*/

	/*box-shadow: 0 0 10px rgba(0, 214, 133, 0.4);*/

	/*background:
			!*linear-gradient(0deg, #fcfcfc, #eaeaea, #fcfcfc) padding-box,*!
			linear-gradient(transparent, transparent) padding-box,
			linear-gradient(165deg, #fcfcfc, #2490d9) border-box; !* borda *!

	background-clip: padding-box, border-box;*/


}

.feature-box-header {
	display: flex;
	/*gap: 10px;*/
}

.featureBox svg {
	filter: drop-shadow(1px 1px 1px rgb(255, 255, 255))
			drop-shadow(0px 0px 0.5px rgba(100, 100, 100, .5));
}

.featureBox h2 {
	/*margin-top: 100px;*/
	font-size: 35px;
	text-shadow: 1px 1px 1px rgb(255, 255, 255), 0px 0px 2px rgba(100, 100, 100, .8);
}

.featureBox p {
	margin-top: 10px;
	font-size: 20px;
	text-align: left;
	color: #666;
	color: #375284;
	text-shadow: 0 0 2px #FFF;
}

.featureEasy {
	color: #17d58e;
	color: #20986f;
	color: #eaa80c;
	color: #16789e;
	background:
			/*url("../imgs/easy-100.png") no-repeat bottom 10px center,*/
			/*linear-gradient(0deg, #fcfcfc, #eaeaea, #fcfcfc) padding-box,*/
			linear-gradient(#fcfcfc, #eee) padding-box,
			/*linear-gradient(135deg, #fcfcfc, #2490d9) border-box;*/ /* borda */
			linear-gradient(135deg, #fcfcfc, #ea580c) border-box; /* borda */
	background-origin: /*padding-box, */padding-box, border-box;
	background-clip: /*padding-box, */padding-box, border-box;
}
.featureEasy svg {
	margin-left: -10px;
}
.featureFast {
	color: #20986f;
	color: #16789e;
	background:
			/*url("../imgs/fast-100.png") no-repeat bottom 10px center,*/
				/*linear-gradient(0deg, #fcfcfc, #eaeaea, #fcfcfc) padding-box,*/
			linear-gradient(#fcfcfc, #eee) padding-box,
				/*linear-gradient(135deg, #fcfcfc, #2490d9) border-box;*/ /* borda */
			linear-gradient(135deg, #fcfcfc, #ea580c) border-box; /* borda */
	background-origin: /*padding-box,*/ padding-box, border-box;
	background-clip: /*padding-box,*/ padding-box, border-box;
}
.featureFast svg {
	margin-left: -9px;
}
.featureClear {
	color: #306901;
	color: #20986f;
	color: #16789e;
	background:
			/*url("../imgs/clear-100.png") no-repeat bottom 10px center,*/
				/*linear-gradient(0deg, #fcfcfc, #eaeaea, #fcfcfc) padding-box,*/
			linear-gradient(#fcfcfc, #eee) padding-box,
				/*linear-gradient(135deg, #fcfcfc, #2490d9) border-box;*/ /* borda */
			linear-gradient(135deg, #fcfcfc, #ea580c) border-box; /* borda */
	background-origin: /*padding-box,*/ padding-box, border-box;
	background-clip: /*padding-box,*/ padding-box, border-box;
}
.featureClear h2 {
	margin-left: 5px;
}
.featureClear svg {
	margin-left: -3px;
}

/********************************************************************************************************/
/*** [FIM] FEATURES [FIM] ***/
/********************************************************************************************************/

/********************************************************************************************************/
/*** [FIM] PRICING [FIM] ***/
/********************************************************************************************************/

.pricing-section {
	background-color: #f4f7fa;
	padding: 80px 0;
}

.pricing-title {
	text-align: center;
	font-size: 42px;
	font-weight: 600;
	margin-bottom: 60px;
	color: #1e2d48;
}

.pricing-cards {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.pricing-card {
	background: #e8e8e8;
	border-radius: 12px;
	padding: 40px;
	width: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid transparent;
}

.plan-icon {
	width: 24px;
	height: 24px;
}

.pricing-card.pro {
	width: 360px;
	padding-top: 54px;
	padding-bottom: 44px;
	min-height: 562px;
	border-bottom-color: #125ae3;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.42);
}
/*
UNDER SHINE
background-image: linear-gradient(to top,#3ceaf3 0%,#2554f1 50%,#e62bbe 100%);
  filter: blur(12px);
  border-radius: 147px;

*/

.pricing-block.title h2 {
	font-size: 32px;
	font-weight: 600;
	color: #1e2d48;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.pricing-card.pro .title h2 {
/*	font-size: 35px;
	font-weight: 600;
	color: #125ae3;*/
	margin-bottom: 10px;
}

.pricing-card.free, .pricing-card.enterprise {
	margin-top: 30px;
	min-height: 452px;
}

.pricing-card.free {
	border-top-color: #05bafe;
}

.pricing-card.enterprise {
	border-top-color: #026148;
	min-height: 500px;
}

.pricing-block {
	width: 100%;
	text-align: center;
}

.pricing-block.title {
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pricing-block.subtitle {
	min-height: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/*color: #b38a12;*/ /* good solid gold color*/
	font-weight: bold;
	font-size: 16px;
	letter-spacing: .05em;
	gap: 6px;

	/* gradient gold */
	background: linear-gradient(180deg, #916f03, #e1bf04, #887400);
	/*background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
				radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);*/
	/*background: linear-gradient(to bottom, #d4af37, #ffd700, #d4af37);*/
	background-clip: text;
	color: transparent;
}

.pricing-block.price {
	height: 80px;
	font-weight: 600;
	font-size: 18px;
	color: #0f2b62;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin: auto;
}

.pricing-amount {
	font-size: 24px;
}

.pricing-unit {
	font-size: 15px;
	color: #777;
}

.pricing-block.list {
	min-height: 160px;
	display: flex;
	align-items: center;
}

.feature-list {
	list-style: none;
	padding-left: 0;
	text-align: left;
	color: #666;
	font-size: 15px;
}

.feature-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.check-icon {
	width: 20px;
	height: 20px;
	color: #1cb57a;
	flex-shrink: 0;
}

.pricing-block.cta {
	margin-top: auto;
	display: flex;
	justify-content: center;
}

div.pricing-card.free button, div.pricing-card.pro button, div.pricing-card.enterprise button {
	width: 80%;
}



/********************************************************************************************************/
/*** [FIM] PRICING [FIM] ***/
/********************************************************************************************************/

body#app {
	background-color: #fdfdfd;
}



.hero .title, .hero .subtitle {
	color: rgba(255, 255, 255, .9);
}

.has-text-weight-thin {
	font-weight: 100!important;
}

.buttonsBox {
	width: 400px;
	display: flex;
	justify-content: space-around;
	margin: 50px auto;
}

.btn {
	border-radius: 3px;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
	border: 0;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-size: 17px;
	padding: 6px 24px;
	text-decoration: none;
}

.btn-blue {
	/* box-shadow: 0px 0px 3px 1px #d2d2d2; */
	
	/* background: linear-gradient(to bottom, #33bdef 5%, #019ad2 100%); */
	background-color: #05bafe;

	/* border: 1px solid #057fd0; */

}
/* .btn-blue:hover {
	background: linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
	background-color: #019ad2;
}
.btn-blue:active {
	position: relative;
	top: 1px;
} */

.btn-orange {
	background-color: #ff7043!important;
}

.LoginBox {
	width: 400px;
	margin: 50px auto;
}

.invalidCredentials {
	opacity: 0;
}

#pipelinePanel {
	padding: 10px;
	color: #666;
}

.projectName, .pipelinetName {
	display: inline-block;
	width: 200px;
	
}



/****************************************************************************/
/****************************************************************************/
/****************************************************************************/

#sceneBox {
	width: 700px;
	height: 500px;
	border: 1px solid #CCC;
}

/****************************************************************************/
/****************************************************************************/
/****************************************************************************/

input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="week"]:focus, input:not([type]):focus, textarea:focus, select:focus {
    border-color: #0B64A0;
}

.button-blue {
	background-color: #0B64A0;
	border-color: #0B64A0;
}
.button-blue.button-clear, .button-blue.button-outline {
	background-color: transparent;
	color: #0B64A0;
}

.button-blue.button-clear {
	border-color: transparent;
}

.button-blue:focus, .button-blue:hover {
	background-color: #2ABD0B;
}



h4 {
	color: #0066b8;
	margin-top: 0;
	margin-bottom: 24px;
	font-weight: 500;
}