/*
Theme Name: Hestia Child
Theme URI: https://www.themeisle.com/
Description: This is a custom child theme I have created.
Author: ThemeIsle
URI: https://www.themeisle.com/
Template: hestia    
Version: 0.1
*/




/* Members Area */

#membersarea {
	background-color: #e8e8e8;
}

#membersarea .top-bar {
	background-color: #d0171d;
	color: white;
	padding: 15px 0;
}

#membersarea .top-bar .container {
	display: flex;
	align-items: center;
}

#membersarea .top-bar .logo {
	width: 100px;
	height: 50px;
	/* background-color: white; */
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	margin-right: 15px;
}

#membersarea .top-bar h1 {
	font-family: "Roboto", Sans-serif;
	font-weight: 500;
	font-size: 28px;
	margin: 0;
	color: white;
}

#membersarea .nav-bar {
	background-color: #303f9f;
	color: white;
	font-weight: 500;
	font-size: 16px;
}

#membersarea .nav-bar .container {
	padding: 0;
}

#membersarea .nav-bar ul.nav {
	margin: 0;
}

#membersarea .nav-bar ul.nav>li>a {
	color: white;
	padding: 15px 20px;
}

#membersarea .nav-bar ul.nav>li>a:hover {
	background-color: #1a237e;
}

#membersarea .content {
	padding: 40px 0;
}

#membersarea .card {
	background-color: white;
	padding: 30px;
	height: 100%;

	border-top: 4px solid #303f9f;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}



#membersarea .card p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6em;
}


#membersarea h1 {
	margin-top: 0;
	font-size: 38px;
	font-family: "Roboto", Sans-serif;
	font-weight: 500;
}

#membersarea h2 {
	margin-top: 0;
	font-size: 30px;
	font-family: "Roboto", Sans-serif;
	font-weight: 500;
}

#membersarea h3 {
	font-size: 26px;
	font-family: "Roboto", Sans-serif;
	font-weight: 700;
	color: #393939;
}

/* #membersarea .card h2 {
	margin-top: 0;
	font-size: 28px;
	font-weight: 600;
} */

/* #membersarea .highlight-link { */
#membersarea a {
	color: #303f9f;
	font-weight: bold;
	text-decoration: none;
}

/* #membersarea .highlight-link:hover { */
#membersarea a:hover {
	text-decoration: underline;
}

#membersarea ul {
	margin-bottom: 10px;
}

#membersarea ul li {
	font-size: 16px;
	font-weight: 400;
}

#membersarea .summary {
	font-size: 16px;
	font-weight: 400;
}



#membersarea .bulletin-box {
	/* background-image: url('/wp-content/uploads/2021/04/1352015-24286.jpg'); */
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/wp-content/uploads/2021/04/1352015-24286.jpg');
	background-size: cover;
	background-position: center;
	color: white;
	padding: 30px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 5px;
	margin-bottom: 30px;
}

/* #membersarea .bulletin-box h2 {
	font-size: 26px;
	font-weight: bold;
} */

#membersarea .bulletin-box ul {
	list-style: none;
	padding-left: 0;
	line-height: 1.8em;
	margin-top: 15px;
}

#membersarea .bulletin-box .btn {
	margin-right: 15px;
	text-transform: uppercase;
	font-weight: bold;
}


#membersarea .row.equal-height {
	display: flex;
	flex-wrap: wrap;
}

#membersarea .row.equal-height>[class*="col-"] {
	display: flex;
	flex-direction: column;
}


/* -- Full Width Card with image and 3 stacking options -- */
#membersarea .fullwidth-card {
	width: 100%;
	margin-bottom: 30px;
}

#membersarea .fullwidth-card .row.no-gutter {
	margin-left: 0;
	margin-right: 0;
}

#membersarea .fullwidth-card .row.no-gutter>[class*="col-"] {
	padding-left: 0;
	padding-right: 0;
}

#membersarea .fullwidth-card .content-side {
	display: flex;
	align-items: stretch;
}

#membersarea .fullwidth-card .content-side .card {
	border-top: 4px solid #303f9f;
	box-shadow: none;
	height: 100%;
}

#membersarea .fullwidth-card .image-side {
	background-image: none;
	background-size: cover;
	background-position: center;
	min-height: 360px;
	border-radius: 0 5px 5px 0;
	border-top: 4px solid #303f9f;
}

#membersarea .fullwidth-card .card {
	border-radius: 5px 0 0 5px;
	/* Rounded on the left */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	/* Optional */
	margin-bottom: 0;
}


/* --- Option 1: HIDE image on small screens --- */
@media (max-width: 991px) {
	#membersarea .fullwidth-card.hide-image-mobile .image-side {
		display: none;
	}
}

/* --- Option 2: STACK image underneath on small screens --- */
@media (max-width: 991px) {
	#membersarea .fullwidth-card.stack-image-mobile .row.equal-height {
		flex-direction: column;
	}

	#membersarea .fullwidth-card.stack-image-mobile .row.equal-height>.image-side,
	#membersarea .fullwidth-card.stack-image-mobile .row.equal-height>.content-side {
		flex: none;
		width: 100%;
	}

	#membersarea .fullwidth-card.stack-image-mobile .image-side {
		min-height: 360px;
		border-radius: 0 0 5px 5px;
	}

	#membersarea .fullwidth-card.stack-image-mobile .content-side .card {
		border-radius: 5px 5px 0 0;
	}

	#membersarea .fullwidth-card.stack-image-mobile .row.no-gutter>[class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}
}


/* --- Option 3: REVERSE STACK image (above) on small screens --- */
@media (max-width: 991px) {

	#membersarea .fullwidth-card.reverse-stack-mobile .row.equal-height {
		flex-direction: column;
	}

	#membersarea .fullwidth-card.reverse-stack-mobile .image-side {
		order: -1;
		/* Move image above content */
		width: 100%;
		min-height: 300px;
		border-radius: 5px 5px 0 0;
	}

	#membersarea .fullwidth-card.reverse-stack-mobile .content-side {
		width: 100%;
	}

	#membersarea .fullwidth-card.reverse-stack-mobile .content-side .card {
		border-radius: 0 0 5px 5px;
	}

	#membersarea .fullwidth-card.reverse-stack-mobile .row.no-gutter>[class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}
}




/* -- Buttons -- */
#membersarea .btn {
	background-color: transparent;
	border: none;
	box-shadow: none;
	padding: 12px 24px;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 6px;
	font-size: 14px;
	transition: background-color 0.3s ease;
}

#membersarea .btn:hover {
	text-decoration: none;
}

#membersarea .btn.btn-danger {
	background-color: #d32f2f;
	color: white;
	border: none;
}

#membersarea .btn.btn-danger:hover {
	background-color: #b71c1c;
	color: white;
}

#membersarea .btn.btn-default {
	background-color: #3a4ab2;
	color: white;
	border: none;
}

#membersarea .btn.btn-default:hover {
	background-color: #303f9f;
	color: white;
}

#membersarea .btn.btn-gray {
	background-color: #9e9e9e;
	color: white;
	border: none;
}

#membersarea .btn.btn-gray:hover {
	background-color: #757575;
	color: white;
}









/* -- Bulletin Cards -- */

#membersarea .bulletin-card {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}


/* Left-hand image */
#membersarea .bulletin-card .image-col {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 150px;
  flex: 1;
  border-radius: 5px 0 0 5px;
}

/* For the use case of adding the button on top of the image */
#membersarea .bulletin-card .image-col .btn {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}


/* Right-hand content */
#membersarea .bulletin-card .content-col {
  display: flex;
  flex-direction: column;
  padding: 0; /* Remove Bootstrap padding if using no-gutter rows */
}

/* Inner content box */
#membersarea .bulletin-card .card {
  flex: 1;
  border: none;
  border-radius: 0;
  padding: 15px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0;
}

/* Heading */
#membersarea .bulletin-card .card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Button spacing */
#membersarea .bulletin-card .card .btn {
  margin-top: 20px;
  align-self: start;
}