/* Define the font */
@font-face {
	font-family: 'poppins';
}

.oooh-baby-regular {
  font-family: "Oooh Baby", serif;
  font-weight: 400;
  font-style: normal;
}


/* Use the font */
body {
	font-family: 'Poppins';
	background-color: white;
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.7rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.2rem;
}

.small {
	font-size: 0.8rem;
}

.bg-brown {
	background-color: #E5E0DA;
}

.bg-grey {
	background-color: #454B50;
}

.bg-black {
	background-color: #000000;
}
.text-brown {
	color: #E5E0DA;
}

.text-red {
	color:  #EC2028;
}

.text-grey {
	color: #9F9F9F;
}

.btn-red {
  color: #fff;
  background-color: #EC2028;
  border-color: #EC2028;
  border-radius: 25px;
  padding: 10px 30px 10px 30px;
}

.btn-red:hover {
  color: #fff;
  background-color: #F37277;
  border-color: #F37277;
  border-radius: 25px;
  padding: 10px 30px 10px 30px;
}

.btn-black {
	color: #fff;
	background-color: #000000;
	border-color: #000000;
	border-radius: 25px;
	padding: 10px 30px 10px 30px;
}

	.btn-black:hover {
		color: #fff;
		background-color: #9F9F9F;
		border-color: #9F9F9F;
		border-radius: 25px;
		padding: 10px 30px 10px 30px;
	}

.btn-white {
  color: #000;
  background-color: #FFF;
  border-color: #FFF;
  border-radius: 25px;
  padding: 10px 30px 10px 30px;
}

.btn-white:hover {
  color: #000;
  background-color: #F4E1E1;
  border-color: #F4E1E1;
  border-radius: 25px;
  padding: 10px 30px 10px 30px;
}

/* font awesome icons */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}
.fa:hover {
  opacity: 0.7;
}
.fa-facebook {
  background: #FFFFFF;
  color: black;
}
.fa-instagram {
  background: #FFFFFF;
  color: black;
}
.fa-youtube {
  background: #FFFFFF;
  color: black;
}

/*Homepage Jumbotron Buttons*/
.button-container-mobile {
	display: none !important;
}

@media (max-width: 768px) {
	/* Hide buttons inside the image */
	.button-container {
		display: none !important;
	}

	/* Show buttons below the image */
	.button-container-mobile {
		display: flex !important;
	}
}


.floating-text {
	position: relative;
	opacity: 0;
	transform: translateY(30px); 
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	top: -25px;
}

.floating-text.visible {
	opacity: 1;
	transform: translateY(0);
}

.gradient-orange {
	background: linear-gradient(to bottom right, #FFA83B, #FFF);
	}

.gradient-rca {
	background: linear-gradient(to bottom right, #F37277, #000);
	}

.card {
		border-radius: 15px;
		overflow: hidden;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
	}

	.image-overlay {
		position: relative;
		overflow: hidden;
	}

	.card-img-top {
		object-fit: cover; 
		height: 300px; 
		transition: opacity 0.3s ease-in-out;
	}

	.image-overlay::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4); /* Darken effect */
		transition: background-color 0.3s ease-in-out;
	}

.card:hover .card-img-top {
	transform: translateY(-5px);
	transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
	opacity: 0.7; 
}
.card-title {
		position: absolute;
		top: 20px;
		left: 20px;
		font-size: 16px; 
		text-transform: uppercase;
		color: white;
		font-weight: bold;
		z-index: 1;
	}

	.card-footer {
		position: absolute;
		bottom: 10px;
		left: 10px;
		font-size: 24px; 
		color: white;
		font-weight: bold;
		z-index: 1;
	}

	.card-footer h3 {
		margin: 0;
	}

@media (max-width: 768px) {
		.card-img-top {
			height: 200px;
		}
	}

.join-us {
	background-image: url("../images/join-us.jpg");
	background-size: cover; 
	background-position: center;
	background-repeat: no-repeat; 
	min-height: 20rem;
	border-radius: 25px;
	margin: 0px; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	text-align: center; 
}

/* About Page */
.banner-container {
	position: relative; 
	height: 40vh; 
	overflow: hidden; 
}

.banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover; 
}

.banner-text {
	position: absolute;
	bottom: 10px; 
	left: 20px; 
	color: white;
	font-size: 2rem;
	font-weight: bold;
	background: rgba(0, 0, 0, 0.5); 
	padding: 5px 10px;
	border-radius: 15px;
}

.accordion-item {
	border: none; 
	margin-bottom: 10px;
}

.accordion-header {
	cursor: pointer;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #ddd; 
	background: none; 
}

	.accordion-header h2 {
		margin: 0;
		color: black; 
		transition: color 0.3s;
	}

		.accordion-header h2:hover,
		.accordion-button:hover {
			color: #EC2028; 
		}

.accordion-button {
	background: none;
	border: none;
	outline: none;
	padding: 0;
	font-size: 1.5rem;
	transition: color 0.3s;
}

.form-control {
	border-radius: 50px;
	padding: 10px 20px;
}

textarea.form-control {
	border-radius: 25px;
}



.flip-card {
	background-color: transparent;
	perspective: 1000px; 
	height: 300px; 
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%; 
	transition: transform 0.6s;
	transform-style: preserve-3d; 
}

.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg); 
}

.flip-card-front,
.flip-card-back {
	position: relative;
	width: 100%;
	height: 100%; 
	backface-visibility: hidden;
}

.flip-card-front {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative; 
}

.flip-card-back {
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f8f9fa;
	color: black; 
	transform: rotateY(180deg); 
	padding: 20px; 
}

.flip-card-title {
	background-color: red; 
	color: white; 
	padding: 10px;
	text-align: center;
	width: 100%;
	position: absolute; 
	bottom: 0; 
	left: 0; 
}

.details {
	border: 1px solid grey;
	border-radius: 25px;
	padding: 30px; /* Optional: Adds some spacing inside the border */
}

a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #EC2028 url("../images/up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

a:hover.back-to-top {
	background-color: #000;
}