.about {
	padding-top: $bt-navbar-height;

	.about-our-team {
		text-align: center;

		p {
			color: $bt-light-text;
			line-height: 1.75;
			width: 500px;

			@include mobile {
				width: 300px;
			}
		}
	}

	.group {
		display: flex;
		justify-content: center;
		width: 100%;
		position: relative;
		overflow: hidden;
		.about-carousel {
			/* Make the width of the flexbox equal the sum of the width of its items */
			display: inline-flex;
			flex-direction: row;
			justify-content: center;

			&.about-carousel-slide-left {
				transition: transform 1s ease;
				transform: translateX(-20%);
			}
			&.about-carousel-slide-right {
				transition: transform 1s ease;
				transform: translateX(20%);
			}

			.about-carousel-item {
				display: none;
				transition: filter 1s ease, transform 1s ease;

				&.about-carousel-active {
					display: block;
					transform: translateX(0) scale(0.9);
					filter: brightness(0.35);
				}
				&.about-carousel-active-prev {
					@extend .about-carousel-active;
					order: 0;
				}
				&.about-carousel-active-first {
					@extend .about-carousel-active;
					order: 1;
				}
				&.about-carousel-active-second {
					@extend .about-carousel-active;
					order: 2;
					transform: scale(1);
					filter: brightness(1);
				}
				&.about-carousel-active-third {
					@extend .about-carousel-active;
					order: 3;
				}
				&.about-carousel-active-next {
					@extend .about-carousel-active;
					order: 4;
				}
				&.focus-in {
					transform: scale(1);
					filter: brightness(1);
				}
				&.focus-out {
					transform: scale(0.9);
					filter: brightness(0.35);
				}

				> img {
					border-radius: 3px;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				@include desktop {
					height: 400px;
					width: 711px;
				}

				@include sm-md {
					height: 300px;
					width: 533px;
				}

				@include xs {
					height: 200px;
					width: 356px;
				}
			}

			// remove scroll bar
			-ms-overflow-style: none; /* Internet Explorer 10+ */
			scrollbar-width: none; /* Firefox */
		}

		.about-carousel-arrow {
			position: absolute;

			top: calc(50% - 24px);

			display: grid;
      place-items: center;

      height: 48px;
      width: 48px;

      border: none;

      border-radius: 50%;

      background-color: rgba(white, 0.75);

      transition: background-color 0.15s ease-in-out;

      color: #383838;

      &:hover {
        background-color: white;
      }
		}

		.about-carousel-next {
			@extend .about-carousel-arrow;

			right: calc(15% - 48px);
		}

		.about-carousel-prev {
			@extend .about-carousel-arrow;

			left: calc(15% - 48px);
		}
	}

	// remove scroll bar
	.group::-webkit-scrollbar {
		/* Safari and Chrome */
		display: none;
	}

	.values {
		margin-bottom: 80px;

		@include desktop {
			width: 900px;
		}

		@include mobile {
			width: 300px;
		}

		> h5 {
			margin-bottom: 40px;
			text-align: center;

			font-weight: bold;
			font-size: 24px;
			@include mobile {
				font-size: 20px;
			}
		}

		.value-col {
			margin-bottom: 20px;

			.value {
				height: 100%;
				padding: 0 20px;

				.value-content {
					height: 100%;
					border-radius: 4px;
					border: solid 2px #6d6a7238;
					padding: 20px 10px;

					display: flex;
					flex-direction: column;
					align-items: center;

					> h6 {
						font-size: 18px;
						font-weight: bold;
						margin: 20px 0 10px;
					}

					> p {
						text-align: center;
						width: 95%;
						line-height: 1.75;
						color: #8a8a8a;
					}
				}
			}
		}
	}

	// should move somewhere else???
	.releases-heading-button {
		justify-content: center;
		margin-top: 20px;
		margin-bottom: 64px;

		input {
			overflow: visible;
			margin-right: 10px;
			border: solid 1px #cfcfcf;
			text-indent: 10px;
			color: $bt-base-text;
			border-radius: 4px;
			width: 280px;

			&::placeholder {
				color: $bt-light-grey;
			}
		}
	}

	.join-pic {
		width: 800px;
		margin-bottom: 28px;
		@include mobile {
			width: 95%;
		}
	}

	.nav-link {
		background-color: #e1e1e16b;
	}

	display: flex;
	flex-direction: column;
	align-items: center;

	.title {
		font-weight: bold;
		color: $bt-base-text;
		font-size: 24px;

		@include mobile {
			font-size: 30px;
		}
	}
}
