/*Card materias*/

.profile-card {

    max-width: 300px;

    background-color: #FFF;

    border-radius: 25px;

    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);

    overflow: hidden;

    position: relative;

    margin: 10px auto;

    cursor: pointer;

}

.profile-card img {

    transition: all 0.25s linear;

}



.profile-card .profile-content {

    position: relative;

    padding: 15px;

    background-color: #FFF;

}



.profile-card .profile-name {

    font-weight: bold;

    position: relative;

    left: 0px;

    right: 0px;

    top: -5px;

    color: #000;

    font-size: 20px;

}



.profile-card .profile-name p {

    font-weight: 600;

    font-size: 16px;

    letter-spacing: 1.5px;

}



.profile-card .profile-description {

    color: #000;

    font-size: 16px;

    padding: 10px;

    text-align: justify;

}



.profile-card .profile-overview p {

    font-size: 14px !important;

    color: #777;

    padding: 10px;

    text-align: left;

}



.profile-card .profile-overview h4 {

    color: #273751;

    font-weight: bold;

}



.profile-card .profile-content::before {

    content: "";

    position: absolute;

    height: 20px;

    top: -10px;

    left: 0px;

    right: 0px;

    background-color: #FFF;

    z-index: 0;

    transform: skewY(3deg);

}



.profile-card:hover img {

    filter: grayscale(100%);

}



/*Fontes*/

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');



/*Links da navbar*/

a.link-n{

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

	color: #fff;

	font-size: 18px;

	font-weight: 5px;

}

a.link-n:hover{

	transition: 0.4s;

	color: #ad9766;

}



/*banner*/

.banner-image{

	position: relative;

	height: 100vh;

	overflow: hidden;

	background: url(../fotos/working-at-night1.jpg) no-repeat center;

	background-size: cover;

	background-attachment: fixed;

}

.container{

	color: #fff;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	overflow: hidden;

	text-align: center;

}

.banner-image-materias{

	position: relative;

	height: 300px;

	overflow: hidden;

	background: url(../fotos/working-at-night1.jpg) no-repeat center;

	background-size: cover;

	background-attachment: fixed;

}



/*Materias*/

div#materias{

	background-color: #f0f0f0;

	text-align: justify;

}

div#materias h1{

	text-align: center;

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

	color: #030303;

}

div#materias p{

	font-family: "arial";

	font-size: 18px;

}

div#materias hr{

	background-color: #ad9766;

	border-width: 2px;

	width: 60%;

	border-radius: 3px;

}



/*Equipe*/

div#equipe{

	background: url(../fotos/binding_dark.png);

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

	text-align: justify;

}

div#equipe h1{

	text-align: center;

	color: #fff;

}

div#equipe hr{

	background-color: #ad9766;

	border-width: 2px;

	width: 70%;

	border-radius: 3px;

}

div#equipe p{

	font-family: "arial";

	font-size: 18px;

	color: #fff;

}

div#equipe img{

	border-radius: 1em;

}



/*Nossos servicos*/

div#servicos{

	background-color: #f0f0f0;

	text-align: justify;

}

div#servicos h1{

	text-align: center;

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

}

div#servicos hr{

	background-color: #ad9766;

	border-width: 2px;

	width: 50%;

	border-radius: 3px;

}

div#servicos span{

	position: center;

	font-size: 29px;

}



/*Unidades*/

div#unidades{

	background: url(../fotos/binding_dark.png);

	text-align: justify;

}

div#unidades h1{

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

	text-align: center;

	color: #fff;

}

.btn-font{

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

	text-align: center;

	color: #000;

	font-size: 16px;

}

.btn-font:hover{

	text-align: center;

	border-color: #ad9766;

	background-color: #ad9766;

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

	color: #fff;

	font-size: 16px;

}

div#unidades hr{

	background-color: #ad9766;

	border-width: 2px;

	width: 50%;

	border-radius: 3px;

}

.card {

	background-color: #fff;

	max-width: 350px;

	display: flex;

	flex-direction: column;

	overflow: hidden;

	border-radius: 2rem;

	box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5);

  }

  .card .banner {

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	height: 5rem;

	display: flex;

	align-items: flex-end;

	justify-content: center;

	box-sizing: border-box;

  }

  .card .banner svg {

  	position: relative;

	width: 8rem;

	height: 8rem;

	box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);

	border-radius: 50%;

	transform: translateY(50%);

	transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);

  }

  .card .banner svg:hover {

	transform: translateY(50%) scale(1.3);

  }

  .card .menu {

	width: 100%;

	height: 5.5rem;

	padding: 1rem;

	display: flex;

	align-items: flex-start;

	justify-content: flex-end;

	position: relative;

	box-sizing: border-box;

  }

  .card h2.name {

	text-align: center;

	padding: 0 2rem 0.5rem;

	margin: 0;

  }

  .card .title {

	color: #a0a0a0;

	font-size: 0.85rem;

	text-align: center;

	padding: 0 2rem 1.2rem;

  }

  .card .actions {

	padding: 0 2rem 1.2rem;

	display: flex;

	flex-direction: column;

	order: 99;

  }

  .card .actions .follow-btn button {

	color: inherit;

	font: inherit;

	font-weight: bold;

	background-color: #0a1821;

	width: 100%;

	border: none;

	padding: 1rem;

	outline: none;

	box-sizing: border-box;

	border-radius: 1.5rem/50%;

	transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);

  }

  .card .actions .follow-btn button a:link{

	text-decoration: none;

	color: #fff;

  }

  .card .actions .follow-btn button:hover {

	background-color: #04090d;

	transform: scale(1.1);

  }

  .card .actions .follow-btn button:active {

	background-color: #0a1821;

	transform: scale(1);

  }



/*Contato*/

div#sobre{

	background-color: #f0f0f0;

	text-align: justify;

}

div#sobre h1{

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

	text-align: center;

	color: #000;

}

div#sobre hr{

	background-color: #ad9766;

	border-width: 2px;

	width: 40%;

	border-radius: 3px;

}

div#sobre button {

	color: inherit;

	font: inherit;

	font-weight: bold;

	background-color: #0a1821;

	width: 60%;

	border: none;

	padding: 1rem;

	outline: none;

	box-sizing: border-box;

	border-radius: 1.5rem/50%;

	transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);

  }

div#sobre button:hover {

	background-color: #04090d;

	transform: scale(1.1);

}

div#sobre button:active {

	background-color: #0a1821;

	transform: scale(1);

}



/*Sobre*/

div#contato{

	background-color: #04090d;

	text-align: justify;

	font-family: "arial";

	color: #fff;

}

h2.con{

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

	text-align: left;

	color: #fff;

}

h2.loc{

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

	text-align: left;

	color: #ad9766;

}

div#contato hr{

	background-color: #ad9766;

	border-radius: 3px;

}

div#contato img{

	border-radius: 5px;

}



/*Rodape*/

div#rodape{

	background-color: #03070a;

	font-family: "arial";

	font-weight: 5px;

	color: #fff;

}

body, html {scroll-behavior: smooth; background-color: #f0f0f0; font-size: 100%; padding: 0; margin: 0;}