/* ----------- jumbotron-container  -----------------*/
.jumbotron-container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content:flex-start;
	align-items: flex-start;
	width:100%;
	margin-bottom:1rem;
	padding:1rem;
	border-radius: 20px;
	overflow: hidden;
	blend-mode:overlay;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 0%;
}

.jumbotron-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	pointer-events: none; /* Ensure it doesn’t block clicks */
	z-index: 0; /* Place behind content */
}
.jumbotron-container h4 {
    font-size: 1.2rem;
    font-weight: normal;
	text-align: left;
	padding: 10px;
}

.jumbotron-container h6 {
	color:#888;
    font-size: 1.2rem;
    font-weight: normal;
    text-align: left;
    margin-bottom: 20px;
}
/* ----------- jumbotron-header  -----------------*/
.jumbotron-header {
    color: var(--bg0);
    padding: 10px;
    border-radius: 15px 15px 0 0;
    background-color: var(--bg4);
	opacity: 0.8;
}

.jumbotron-header h1 {
    font-size: 2.4rem;
    font-weight: normal;
    text-align: left;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.jumbotron-header h2 {
    font-size: 1.2rem;
    font-weight: normal;
    text-align: left;
    margin-bottom: 20px;
}

.jumbotron-header h3 {
    font-size: 1.2rem;
    font-weight: normal;
	text-align: left;
	padding: 10px;
}

/* ----------- jumbotron-content  -----------------*/
.jumbotron-content {
	position: relative;
	z-index:5; /* Ensure content appears above background */
}
.jumbotron-content {
	display: none;
	position: relative;
	margin-top: 0px;
	padding: 10px;
	width:90%;
	background-color:var(--bg4);
	opacity: 0.9;
	border: 1px solid #ddd;
	border-radius: 0 0 15px 15px;
	transition: all 0.3s ease;
	z-index:5; /* Ensure content appears above background */
}
.jumbotron-content.show {
	display: block;
}
/* Image and content layout */
.jumbotron-content img {
	float: right;
	max-width: 200px;
	padding:5px;
}
.jumbotron-content p {
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 15px;
}
.jumbotron-content small {
	display: block;
	margin-top: 10px;
	color: #888;
}

/* ----------- jumbotron-button  -----------------*/
.jumbotron-button {
	color: white;
	font-size: 16px;
	text-align: left;
	outline: none;
	padding: 10px 20px;
	margin-bottom: 10px;
	background-color:var(--bg1);
	border-radius: 5px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.jumbotron-button:hover {
	background-color:var(--bg2);
}