/***************************************************************
*
* BODY / MAIN
*
****************************************************************/

body
{
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Full height of the viewport */
	font-family: 'Poppins', sans-serif !important;
	line-height: 1.8 !important;
}

main {
	flex: 1;
}

/***************************************************************
*
* NAV
*
****************************************************************/

.nav-link
{
	color: #ffffff !important;
}

.nav-link:hover
{
	color: #ff58b3 !important;
}

/***************************************************************
*
* OFF CANVAS NAVIGATION
*
****************************************************************/

/* Dark grey, slightly opaque background for the offcanvas */
.offcanvas-start
{
	background-color: rgba(33, 33, 33, 0.95) !important; /* Dark grey with opacity */
}

/* Ensure the text color inside the offcanvas is white and not opaque */
.offcanvas-start .offcanvas-body, .offcanvas-start .offcanvas-header
{
	color: #ffffff;
}

.offcanvas-body h2
{
	color: #ffffff;
}

/* Apply white color to nav-links only inside the offcanvas */
.offcanvas-start .nav-link
{
	color: #ffffff;
}

/* Optional: Adjust hover or focus states of links inside offcanvas */
.offcanvas-start .nav-link:hover, .offcanvas-start .nav-link:focus
{
	color: #ff269c;
}

.offcanvas {
	background-color: rgba(33, 33, 33, 0.95) !important;
	color: white;
}

/***************************************************************
*
* COLORS
*
****************************************************************/

.pink
{
	color: #ff269c;
}

.bg-pink
{
	background-color: #ff269c;
}

/***************************************************************
*
* MAIN LINKS
*
****************************************************************/

main a
{
	color: #ff269c;
	text-decoration: none;
}

/***************************************************************
*
* BUTTONS
*
****************************************************************/

.btn-primary
{
	background-color: #ff269c !important;
	color: #ffffff !important;
	border: none !important;
}

.btn-primary:hover
{
	background-color: #000000 !important;
	color: #ffffff !important;
	border: none !important;
}


/***************************************************************
*
* ICONS
*
****************************************************************/



/***************************************************************
*
* SLIDESHOW
*
****************************************************************/

	.image-container {
		display: flex;
		overflow-x: auto; /* Allows horizontal scrolling */
		scroll-snap-type: none; /* Disable snapping during automatic scrolling */
		width: 100%; /* Full width of parent container */
	}

	.image-container img {
		height: 500px; /* Adjust as needed */
		width: auto; /* Make sure images are responsive */
		object-fit: cover;
	}

	/* Scrollbar styling */
	.image-container::-webkit-scrollbar {
		height: 8px;
	}

	.image-container::-webkit-scrollbar-thumb {
		background-color: #888;
		border-radius: 10px;
	}

	.image-container::-webkit-scrollbar-thumb:hover {
		background-color: #555;
	}


/***************************************************************
*
* FOOTER
*
****************************************************************/

footer
{
	background-color: #000000 !important;
	color: #dddddd;
}

footer a
{
	color: #dddddd !important;
}

footer a:hover
{
	color: #ffffff !important;
}