/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Components */
.service-card-container {
	gap: 3.2rem;
	position: relative;
	display: grid;
	align-items: stretch;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(100px, auto);
	grid-template-areas:
		"service-card-one service-card-one service-card-two service-card-two"
		"service-card-three service-card-three service-card-four service-card-four";
}

.service-card-wrapper-one {
	grid-area: service-card-one;
}

.service-card-wrapper-two {
	grid-area: service-card-two;
}

.service-card-wrapper-three {
	grid-area: service-card-three;
}

.service-card-wrapper-four {
	grid-area: service-card-four;
}

.service-card {
	height: 100%;
	border-radius: 1.6rem;
	position: relative;
  	border: 1px solid var(--white);
	top: 0px;
    transition: all 0.2s ease-in-out;
}

.service-card__title {
/* 	margin-left: auto;
	margin-right: auto; */
  font-weight: bold !important;
}

.service-card:hover {
    transition: all 0.2s ease-in-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
    border: 1px solid var(--secondary-light);
    background-color: var(--secondary-light);
}

.service-card__img {
	width: 100%;
	border-radius: 1.6rem;
}

@media only screen and (max-width: 1119px){	
	.service-card-wrapper {
		margin-bottom: 1.6rem;
	}
}

@media only screen and (max-width: 767px){
	.service-card-container {
		display: block;
	}
}

.team-card-wrapper {
	padding: 8px !important;
}
.team-card {
	position: relative;
	overflow: hidden;
	border-radius: 2rem;
}
.team-card__copy {
	background: var(--black-trans-60);
	padding: 0.8rem 0.8rem;
	color: var(--white);
	height: 100%;
	display: flex;
	justify-content: flex-start;
	position: absolute;
	bottom: -86%;
	transition: all 0.2s ease-in;
}

.team-card:hover .team-card__copy {
	justify-content: flex-end;
	bottom: 0px;
	transition: all 0.2s ease-in;
}

.team-card__name {
	font-size: 1.8rem;
	font-weight: 500;
}

.team-card__job {
	font-size: 1.4rem;
	margin-bottom: 1.6rem;
}

.team-card__bio {
	font-size: 1.6rem;
	margin-bottom: 1.6rem;
}

@media only screen and (max-width: 1119px){
	.team-card__bio {
		font-size: 1.3rem;
	}
}

@media only screen and (max-width: 991px){
	.team-card__copy {
		bottom: -85% ;
	}
	
	.team-card__name {
		font-size: 1.6rem;
	}
	
	.team-card__job {
		font-size: 1.4rem;
	}
}

@media only screen and (max-width: 767px){
	.team-card__copy {
		bottom: -88% ;
	}
}



/* utilities */
.btn--primary:hover {
  cursor: pointer;
  transform: scale(1.05);
  animation: btn__scale-up 600ms ease;
  box-shadow: 0 5px 20px rgba(252, 203, 10, .2);
  background-color: #fdd53b;
}
.base-img {
  position: relative;
  left: 0px;
  top: 0px;
  transition: all 0.2s ease-in;
}
.base-img:hover {
  transition: all 0.2s ease-in;
  left: 5px;
  top: 5px;
}


.marquee{display: flex; overflow: hidden; gap: 1rem; position: relative; user-select: none;}
.marquee-content{flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%; gap: 1rem;align-items: center;}
.marquee-content div { width: max-content; display: flex; justify-content: center; align-items: center; }
.marquee-content div figure { width: 100%; margin: 0;}
.marquee-content div figure img { width: 100%; width: auto;}

@keyframes scroll {
from{
  transform: translateX(0);
}
to{
  transform: translateX(calc(-100% - 1rem));
}
}

.scroll{animation: scroll 20s linear infinite;}

@keyframes scroll2 {
  from {
    transform: translateX(calc(-100% - 1rem));
  }
  to {
    transform: translateX(0);
  }
}

.scroll2 {
  animation: scroll2 20s linear infinite;
}



/* FORM */
.form-control__input input,
.form-control__input textarea {
	padding: 1.2rem;
	background-color: transparent;
	border: 1px solid transparent;
	border-bottom-color: white;;
  color:#fff;
}
input.piotnetforms-field {
  color: black !important;
}
.form-control__input input:focus,
.form-control__input textarea:focus {
	border-bottom-color: var(--primary);
	color: var(--primary);
}
.form-control__input button.piotnetforms-btn .piotnet-button,.piotnetforms-btn a.piotnet-button,.piotnetforms-button {
	background-color: var(--primary) !important;
}