div{
	/* border: 1px solid red; */
	box-sizing: border-box;
}

.roboto{font-family: 'Roboto';}

.fs-20{font-size: max(1.04vw, 18px);}
.fs-25{font-size: max(1.30vw, 20px);}
.fs-30{font-size: max(1.56vw, 25px);}
.fs-35{font-size: max(1.82vw, 25px);}
.fs-40{font-size: max(2.08vw, 25px);}
.fs-45{font-size: max(2.34vw, 25px);}
.fs-50{font-size: max(2.60vw, 45px);}
.fs-55{font-size: max(2.86vw, 50px);}
.fs-60{font-size: max(3.13vw, 50px);}
.fs-65{font-size: max(3.39vw, 50px);}
.fs-70{font-size: max(3.65vw, 50px);}
.fs-75{font-size: max(3.91vw, 50px);}
.fs-80{font-size: max(4.17vw, 35px);}
.fs-85{font-size: max(4.43vw, 35px);}
.fs-90{font-size: max(4.69vw, 35px);}
.fs-95{font-size: max(4.95vw, 35px);}
.fs-100{font-size: max(5.21vw, 40px);}
.fs-105{font-size: max(5.47vw, 40px);}
.fs-110{font-size: max(5.73vw, 40px);}
.fs-115{font-size: max(5.99vw, 50px);}
.fs-120{font-size: max(6.25vw, 50px);}
.fs-125{font-size: max(6.51vw, 50px);}
.fs-130{font-size: max(6.77vw, 50px);}

.fw-100, .fw-thin {font-weight: 100;}
.fw-200, .fw-extra-light {font-weight: 200;}
.fw-300, .fw-light {font-weight: 300;}
.fw-400, .fw-regular {font-weight: 400;}
.fw-500, .fw-medium {font-weight: 500;}
.fw-600, .fw-semi-bold {font-weight: 600;}
.fw-700, .fw-bold, .bold {font-weight: 700;}
.fw-800, .fw-extra-bold {font-weight: 800;}
.fw-900, .fw-black {font-weight: 900;}

.block{display: block;}
.tac{text-align: center;}
.mb-0{margin-bottom: 0;}
.pr-20{padding-right: 20px;}

html, body{margin: 0; padding: 0;}
*{font-family: 'Roboto';}


.main-container{width: 80vw; margin: 0 auto;}

section{
	padding: 50px 0;
	overflow: hidden;
}

.bg-black{
	background-color: black;
}

.bg-black, .bg-black * {
	color: white;
}

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

a{
	text-decoration: none;
}

/* MENU */
	.menu {background-color: white;}

	menu{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 0 0 0;
		margin: 0;
	}

	@media screen and (max-width: 770px) {
		menu{gap: 40px;}
		.menu div:nth-child(2){
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

	}

	@media screen and (max-width: 700px) {
		menu {
			flex-direction: column;
			gap: 15px 0;
		}
		.menu div:nth-child(2){flex-direction: row;}
	}



	.logo{
		background-image: url(./img/logo/logo_decorbook_preto.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		width: 360px;
		height: 72px;
	}

	@media screen and (max-width: 400px) {
		.logo{
			width: 330px;
			height: 66px;
		}
	}

	.button{
		transition: all ease 0.3s;
		border: 1px solid white;
		border-radius: 5px;
		padding: 12px 24px;
		font-weight: 700;
		font-size: 18px;
		color: black;
		display: inline-block;
	}

	.button-black{
		display: inline-block;
		transition: all ease 0.3s;
		border: 1px solid black;
		background-color: black;
		border-radius: 5px;
		padding: 12px 24px;
		color: white;
		font-weight: 700;
		font-size: 18px;
	}


	.button:hover, .button-black:hover{
		background-color: rgba(127, 127, 127, 0.6);
		border-color: transparent;
		color: white;
		transform: scale(1.02);
	}


	.grid-container-one{
		display: grid;

		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(4, 1fr);
		gap: 5px;

		min-height: 300px;
	}

	.grid-container-one .grid-square-one{
		grid-column: 1 / 7;
		grid-row: 1 / 5;

		display: flex;
		justify-content: center;
		align-items: center;
		text-transform: uppercase;
		flex-direction: column;
	}

	.grid-container-one .grid-square-two{
		grid-column: 7 / 10;
		grid-row: 1 / 3;
		/* background-image: url(./img/b1.jpeg); */
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.grid-container-one .grid-square-three{
		grid-column: 7 / 10;
		grid-row: 3 / 5;
		/* background-image: url(./img/b2.webp); */
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.grid-container-one .grid-square-four{
		grid-column: 10 / 13;
		grid-row: 1 / 5;
		/* background-image: url(./img/b3.webp); */
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	@media screen and (max-width: 1600px) {
		.grid-container-one .grid-square-one{
			align-items: flex-start;
		}
	}

	@media screen and (max-width: 990px) {
		.grid-container-one{
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: repeat(12, 1fr);
		}

		.grid-container-one .grid-square-one{
			grid-column: 1 / 5;
			grid-row: 1 / 5;
			align-items: center;
		}

		.grid-container-one .grid-square-one p{text-align: center;}

		.grid-container-one .grid-square-two{
			grid-column: 1 / 3;
			grid-row: 5 / 9;
		}

		.grid-container-one .grid-square-three{
			grid-column: 1 / 3;
			grid-row: 9 / 13;
		}

		.grid-container-one .grid-square-four{
			grid-column: 3 / 5;
			grid-row: 5 / 13;
		}


	}


/* OBJETIVOS */

	#objetivos .grid-container-two{
		display: grid;

		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(1, 1fr);
	}

	#objetivos .grid-square-one{
		grid-column: 1 / 8;
	}

	#objetivos .grid-square-two{
		grid-column: 8 / 13;
	}

	#objetivos .bg-image{
		/* background-image: url(./img/b1.jpeg); */
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#objetivos ul {
		display: grid;

		grid-template-columns: repeat(24, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 50px 0;
	}

	#objetivos ul li {
		box-sizing: border-box;
		position: relative;
	}

	#objetivos ul li:nth-child(1) {grid-column: 3 / 14; grid-row: 1 / 2;}
	#objetivos ul li:nth-child(3) {grid-column: 3 / 14; grid-row: 2 / 3;}

	#objetivos ul li:nth-child(2) {grid-column: 14 / 25; grid-row: 1 / 2;}
	#objetivos ul li:nth-child(4) {grid-column: 14 / 25; grid-row: 2 / 3;}

	#objetivos ul li .number{
		border-color: transparent;
		background-color: rgba(255,255,255,0.2);
		border-radius: 0;
		display: inline-block;

		position: absolute;
		left: -50px;

		width: 40px;
		height: 40px;
		justify-content: center;
		align-items: center;
		display: flex;
		font-size: 30px;
	}

	#objetivos ul li span{
		display: block;
		width: 75%;
	}

	#objetivos ul li span:nth-child(2){}
	#objetivos ul li span:nth-child(3){margin-top: 20px;}

	@media screen and (max-width: 990px) {
		#objetivos .grid-square-one > p{text-align: center;}
		#objetivos .grid-container-two{
			gap: 20px;
		}
		#objetivos ul {
			grid-template-columns: repeat(24, 1fr);
			grid-template-rows: repeat(4, 1fr);
			gap: 40px 0;
		}

		#objetivos ul li:nth-child(1) {grid-column: 4 / 24; grid-row: 1 / 2;}
		#objetivos ul li:nth-child(2) {grid-column: 4 / 24; grid-row: 2 / 3;}
		
		#objetivos ul li:nth-child(3) {grid-column: 4 / 24; grid-row: 3 / 4;}
		#objetivos ul li:nth-child(4) {grid-column: 4 / 24; grid-row: 4 / 5;}
		
		#objetivos ul li span{width: auto;}
	}


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

	#objetivos .grid-container-two{
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(14, 1fr);
	}

	#objetivos .grid-square-one{
		grid-column: 1 / 13;
		grid-row: 5 / 15;
	}

	#objetivos .grid-square-two{
		grid-column: 1 / 13;
		grid-row: 1 / 5;
	}

	#objetivos .grid-square-two {
		border-top-left-radius: 30px;
		border-bottom-right-radius: 30px;
	}

}


/* RECURSOS */
	#recursos .grid-container-three{
		display: grid;

		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(1, 1fr);
	}

	#recursos .grid-square-one{
		grid-column: 1 / 8;
	}

	#recursos .grid-square-two{
		grid-column: 8 / 13;
	}

	#recursos .bg-image{
		/* background-image: url(./img/b1.jpeg); */
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#recursos ul {
		display: grid;

		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(2, 1fr);

		gap: 50px 0;
	}

	#recursos ul li {
		box-sizing: border-box;
		position: relative;
	}

	#recursos ul li .icon{
		width: 80px;
		height: 80px;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		margin-bottom: 20px;
	}

	#recursos ul li .icon.ic1{background-image: url(./img/icon/icon-cv_white.png);}
	#recursos ul li .icon.ic2{background-image: url(./img/icon/icon-socialpersonalizado_white.png);}
	#recursos ul li .icon.ic3{background-image: url(./img/icon/icon-bibliotecaportifolio_white.png);}
	#recursos ul li .icon.ic4{background-image: url(./img/icon/icon-event_white.png);}

	#recursos ul li:nth-child(1) {grid-column: 2 / 7; grid-row: 1 / 2;}
	#recursos ul li:nth-child(2) {grid-column: 8 / 13; grid-row: 1 / 2;}

	#recursos ul li:nth-child(3) {grid-column: 2 / 7; grid-row: 2 / 3;}
	#recursos ul li:nth-child(4) {grid-column: 8 / 13; grid-row: 2 / 3;}

	#recursos ul li .number{
		border-color: transparent;
		background-color: rgba(255,255,255,0.2);
		border-radius: 0;
		padding: 5px 10px;
		display: inline-block;

		position: absolute;
		left: -50px;
	}

	#recursos ul li span{
		display: block;
		width: 75%;
		width: 100%;
	}

	#recursos ul li span:nth-child(3){margin-top: 20px;}

	@media screen and (max-width: 990px) {
		#recursos .grid-square-one > p{text-align: center;}
		#recursos .grid-container-three{
			gap: 20px;
		}
		#recursos ul {
			grid-template-columns: repeat(24, 1fr);
			grid-template-rows: repeat(4, 1fr);
			gap: 40px 0;
		}

		#recursos ul li:nth-child(1) {grid-column: 4 / 24; grid-row: 1 / 2;}
		#recursos ul li:nth-child(2) {grid-column: 4 / 24; grid-row: 2 / 3;}
		
		#recursos ul li:nth-child(3) {grid-column: 4 / 24; grid-row: 3 / 4;}
		#recursos ul li:nth-child(4) {grid-column: 4 / 24; grid-row: 4 / 5;}
		
		#recursos ul li span{width: auto;}
	}

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

	#recursos .grid-container-three{
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(14, 1fr);
	}

	#recursos .grid-square-one{
		grid-column: 1 / 13;
		grid-row: 5 / 15;
	}

	#recursos .grid-square-two{
		grid-column: 1 / 13;
		grid-row: 1 / 5;
	}


	#recursos .grid-square-two {
		border-top-right-radius: 30px;
		border-bottom-left-radius: 30px;
	}

	#recursos ul li:nth-child(1){
		text-align: center;
	}
	
	#recursos ul li .icon{
		margin: 0 auto 20px;
		display: block;
	}

}

/* BENEFICIOS */
	#beneficios{
		padding-bottom: 120px;
	}

	#beneficios .main-container > span{
		margin-bottom: 80px;
	}

	#beneficios .cards{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	#beneficios .cards .card{
		/* width: calc(100% / 3); */
		width: 400px;
		box-sizing: border-box;
	}

	#beneficios .cards .card span:nth-child(1){
		margin-bottom: 20px;
		display: block;
	}

	#beneficios .cards .card span:nth-child(2){
		display: block;
	}

	@media screen and (max-width: 990px) {
		#beneficios .cards{
			justify-content: center;
			gap: 30px 20px;
		}

		#beneficios .cards .card{
			width: 350px;
		}
	}

/* CONECTE */
	.grid-container-four{
		display: grid;

		grid-template-columns: repeat(24, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 5px;

		min-height: 300px;
	}

	.grid-container-four .grid-square-one{
		grid-column: 1 / 9;
		grid-row: 1 / 3;

	}

	.grid-container-four .grid-square-two{
		grid-column: 10 / 16;
		grid-row: 1 / 3;
		/* background-image: url(./img/b1.jpeg); */
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.grid-container-four .grid-square-three{
		grid-column: 16 / 25;
		grid-row: 1 / 2;
		/* background-image: url(./img/b2.webp); */
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.grid-container-four .grid-square-four{
		grid-column: 16 / 25;
		grid-row: 2 / 3;
		/* background-image: url(./img/b3.webp); */
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	@media screen and (max-width: 990px) {

		.grid-container-four{
			grid-template-columns: repeat(12, 1fr);
			grid-template-rows: repeat(24, 1fr);
			gap: 5px;
		}

		.grid-container-four .grid-square-one{
			grid-column: 1 / 12;
			grid-row: 1 / 6;
			text-align: center;
			margin-bottom: 15px;
		}

		.grid-container-four .grid-square-two{
			grid-column: 1 / 6;
			grid-row: 6 / 15;
		}

		.grid-container-four .grid-square-three{
			grid-column: 1 / 6;
			grid-row: 15 / 24;
		}

		.grid-container-four .grid-square-four{
			grid-column: 6 / 13;
			grid-row: 6 / 24;
		}


	}



/* PUBLICO ALVO */
	
	#publicoalvo .flex-container-five{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;

		gap: 50px;

		min-height: 300px;
		margin-top: 50px;
	}

	#publicoalvo .flex-container-five .flex-square span:nth-child(1){
		display: block;
	}

	#publicoalvo .flex-container-five .flex-square span:nth-child(2){
		display: block;
	}

	#publicoalvo .flex-container-five .flex-square{
		background-color: rgba(255,255,255,0.2);
		padding: 30px;
	}

	#publicoalvo .flex-container-five .flex-square span:nth-child(1){
		margin-bottom: 20px;
	}

	#publicoalvo .flex-container-five .flex-square-one, #publicoalvo .flex-container-five .flex-square-two, #publicoalvo .flex-container-five .flex-square-three, #publicoalvo .flex-container-five .flex-square-four{
		width: 40%;
	}

	@media screen and (max-width: 990px) {
		#publicoalvo .flex-container-five .flex-square-one, #publicoalvo .flex-container-five .flex-square-two, #publicoalvo .flex-container-five .flex-square-three, #publicoalvo .flex-container-five .flex-square-four{
			width: 100%;
			min-width: initial;
		}
	}

/* INGRESSAR */
	#ingressar.grid-container-six{
		display: grid;

		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(1, 1fr);
		gap: 20px;

		min-height: 300px;
	}

	#ingressar.grid-container-six .grid-square span:nth-child(1){
		font-size: 25px;
		font-weight: bold;
		display: block;
	}

	#ingressar.grid-container-six .grid-square span:nth-child(2){
		font-size: 20px;
		display: block;
	}

	#ingressar.grid-container-six .grid-square-one{
		grid-column: 1 / 5;
		grid-row: 1 / 1;

		/* background-image: url(./img/b3.webp); */
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#ingressar.grid-container-six .grid-square-two{
		grid-column: 5 / 13;
		grid-row: 1 / 1;
	}

	#ingressar ul {
		padding-left: 70px;
	}
	#ingressar ul li {
		position: relative;
		margin: 90px 0;
	}
	#ingressar ul li span{
		display: block;
		margin-left: 80px;
	}

	#ingressar ul li .number{
		position: absolute;
		top: 0;
		left: -60px;

		background-color: rgb(70, 70, 70);
		width: 50px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25px;
	}

	#ingressar ul li .number::before, #ingressar ul li .number::after{
		content: '';
		position: absolute;
		z-index: 0;
		
		background-color: rgb(70, 70, 70);
	}

	#ingressar ul li .number::after{
		height: 160px;
		width: 2px;
		top: 0;
	}

	#ingressar ul li .number::before{
		width: 70px;
		height: 2px;
		top: 50%;
		left: 50px;
	}

	#ingressar ul li .number span{
		position: relative;
		z-index: 2;
		margin-left: 0;
	}

	@media screen and (max-width: 990px){
		#ingressar ul li .number::before{
			width: 7.07vw;
		}

		#ingressar ul li span{
			margin-left: 8.08vw;
		}

		#ingressar ul li .number::after{
			height: 400%;
		}
	}

/* ALCANCE */

	#alcance{padding-bottom: 70px;}
	#alcance > span{margin-bottom: 50px;}

	#alcance .table{
		width: 100%;
		border: 1px solid rgba(255,255,255,0.6);
	}

	#alcance table .linha, #alcance table col{
		border-color: transparent;
		border: none;
		box-sizing: border-box;
	}


	#alcance .table .linha{
		width: 100%;
		display: flex;
	}

	#alcance .table .linha .col{
		width: 50%;
		padding: 15px 20px;
	}

	#alcance .table .linha:nth-child(odd) {
		background-color: rgba(255,255,255,0.1);
	}


/* CONTATE */

	#contate .grid-container-seven{
		display: grid;

		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(1, 1fr);
		gap: 20px;

		min-height: 300px;
	}

	#contate .grid-container-seven .grid-square span:nth-child(1){
		font-size: 25px;
		font-weight: bold;
		display: block;
	}

	#contate .grid-container-seven .grid-square span:nth-child(2){
		font-size: 20px;
		display: block;
	}

	#contate .grid-container-seven .grid-square-one{
		grid-column: 1 / 5;
		grid-row: 1 / 1;

		/* background-image: url(./img/b3.webp); */
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#contate .grid-container-seven .grid-square-two{
		grid-column: 5 / 13;
		grid-row: 1 / 1;
	}

	#contate ul{
		padding-left: 70px;
	}

	#contate ul li {
		position: relative;
		margin: 0 0;
	}

	#contate ul li span{
		display: block;
	}

	#contate ul li .card{
		height: 135px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		margin-left: 60px;
	}

	#contate .number{
		position: absolute;
		top: 0;
		left: -60px;

		background-color: rgb(70, 70, 70);
		width: 90px;
		height: 105px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-size: 52px;

		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}

	#contate ul li .number::before, #contate ul li .number::after{
		content: '';
		position: absolute;
		z-index: 0;
		
		width: 0;
		height: 0;
		border-left: 45px solid transparent;
		border-right: 45px solid transparent;
	}

	#contate ul li .number::after{
		top:0;
		border-top: 30px solid black; /* Cor do triângulo */
	}

	#contate ul li .number::before{
		bottom: -29px;
		border-top: 30px solid rgb(70, 70, 70); /* Cor do triângulo */
	}

	#contate ul li .number span{
		position: relative;
		z-index: 2;
		margin-left: 0;
	}


	@media screen and (max-width: 990px) {
		#contate ul li .card{
			margin-left: 6.06vw;
		}
	}

	@media screen and (max-width: 700px) {

		#contate .grid-container-seven{
			max-width: 80vw;
			margin: 0 auto;
		}

		#contate .grid-container-seven .grid-square-one{
			display: none;
		}

		#contate .grid-container-seven .grid-square-two{
			grid-column: 1 / 13;
			grid-row: 1 / 1;
		}

	}
		

	@media screen and (max-width: 600px) {

		#contate .number{
			position: absolute;
			top: 0;
			left: -60px;

			background-color: rgb(70, 70, 70);
			width: 15vw;
			height: 105px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40px;

			border-bottom-left-radius: 3px;
			border-bottom-right-radius: 3px;
		}

		#contate ul li .number::before, #contate ul li .number::after{
			content: '';
			position: absolute;
			z-index: 0;
			
			width: 0;
			height: 0;
			border-left: 7.5vw solid transparent;
			border-right: 7.5vw solid transparent;
		}

		#contate ul li .number::after{
			top:0;
			border-top: 5vw solid black; /* Cor do triângulo */
		}

		#contate ul li .number::before{
			bottom: -4.83vw;
			border-top: 5vw solid rgb(70, 70, 70); /* Cor do triângulo */
		}

		#contate ul li .number span{
			position: relative;
			z-index: 2;
			margin-left: 0;
		}

		#contate ul li .card{
			height: 135px;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			margin-left: calc(7vw + 3px);
		}

	}


	@media screen and (max-width: 450px) {
		#contate ul li .card{
				margin-left: calc(3vw + 3px);
		}
	}

	@media screen and (max-width: 390px) {
		#contate ul li .card{
				margin-left: 3px;
		}
	}





.grid-container-one .grid-square-two,
.grid-container-one .grid-square-three,
.grid-container-one .grid-square-four,
#objetivos .bg-image,
#recursos .bg-image,
.grid-container-four .grid-square-two,
.grid-container-four .grid-square-three,
.grid-container-four .grid-square-four,
#ingressar.grid-container-six .grid-square-one,
#contate .grid-container-seven .grid-square-one {
  position: relative;
  overflow: hidden;
}

.bg-image-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1s ease-in-out;
  opacity: 0;
  z-index: 1;
}

.bg-image-layer.active {
  opacity: 1;
  z-index: 2;
}