/* Não copie o código! Entenda e aprenda como programar. Assista aulas no YouTube, existem muitos canais com conteúdo relevante e que vai te ensinar como ser um bom programador. */

/* Section Bottons */

#section-pather-why-us-about {
    width: 800px;
   	padding: 20px;
    border-radius: 8px;
 	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.mother-bottons-why-us-about {
	overflow: hidden;
	width: 750px;
	height: 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; 
}

.separators-why-us-about {
    display: flex;
   	gap: 20px;
}

.separators-second-why-us-about {
 	margin-top: 20px;
}

.separators-trd-why-us-about {
 	margin-top: 20px;
}

.card-tabs-contents {
	margin-top: 10px;
}

.clip-botton-why-us-about {
    width: 180px;
    border: none;
    color: #020617;
    background-color: #EFF2FF;
	border-radius: 8px;
    font-weight: 500;
    padding: 14px;
    cursor: pointer;
    transition: background-color .3s ease;
	box-shadow:  inset 2px 2px 4px rgba(83,84,84,0.60), inset -2px -2px 2px #EFF2FF;
}

.clip-botton-why-us-about.active {
    background-color: #EFF2FF;
	box-shadow:
	   -7px -7px 20px 0px rgba(255,255,255,.9),
	   -4px -4px 5px 0px rgba(255,255,255,.9),
	   7px 7px 20px 0px rgba(0,0,0,.2),
	   4px 4px 5px 0px rgba(0,0,0,.3); 
	color: #000000;
}

.clip-botton-why-us-about:hover {
    background-color: #D2D2D2;
}

/* Cards Tabs Results */

.card-results-why-us-about {
    display: none;
}

.card-results-why-us-about.show {
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 450px;
	height: 458px;
    gap: 14px;
    background-color: #EFF2FF;
	border-radius: 35px;
    padding: 16px;
	box-shadow:
	   -7px -7px 20px 0px rgba(255,255,255,.9),
	   -4px -4px 5px 0px rgba(255,255,255,.9),
	   7px 7px 20px 0px rgba(0,0,0,.2),
	   4px 4px 5px 0px rgba(0,0,0,.3); 
}

.card-results-img-why-us-about {
    width: 50px;
    height: 50px;
    margin-top: 20px;
		margin-bottom: 15px;
}

.content-title-why-us-about {
	font-size: 25px;
	padding: 0 35px 10px 35px;
	font-weight: 800;
	margin-top: -20px;
	border-bottom: 1px dashed rgba(0,0,0,1.00);
}

.container-data-why-us-about {
	padding: 0 30px;
}

.content-description-why-us-about {
	font-size: 16px;
	padding: 20px 30px 30px 30px;
}

/* Media Queries max width 511 */

@media screen and (max-width: 767px) {
	
	#section-pather-why-us-about {
		margin-left: 0%;
		width: 360px;
		overflow-x: hidden;
	}
	
	.separators-why-us-about {
		flex-direction: row;	
	}

	.clip-botton-why-us-about {
		width: 160px;
		font-size: 10px;
	}
	
	.card-results-why-us-about.show {
		width: 360px;
		padding-top: 30px;
		padding-bottom: 40px;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		border: 1px solid lightgray;
	}
	
	.card-results-img-why-us-about {
		margin-top: 40px;
	}
	
	.content-title-why-us-about {
		font-size: 20px;
		padding-top: 10px;
	}
	
}

/* Scroll Reveal */

/* Escoder o Elemento */

.hide-tranquility,
.hide-autonomy,
.hide-strategy, 
.hide-performance,
.hide-proximity,
.hide-agility,
.hide-scroll-img
{
	visibility: hidden;
}
