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

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

main {
	flex: 1;
}

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

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

.nav-link:hover
{
	color: #000000 !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 all text inside the offcanvas is white */
.offcanvas-start .offcanvas-body,
.offcanvas-start .offcanvas-header,
.offcanvas-start .offcanvas-body h2,
.offcanvas-start .offcanvas-body p,
.offcanvas-start .offcanvas-body a,
.offcanvas-start .nav-link {
	color: #ffffff !important;
}

/* Ensure nav-links remain white on hover, focus, and active */
.offcanvas-start .nav-link:hover,
.offcanvas-start .nav-link:focus,
.offcanvas-start .nav-link:active {
	color: #ffffff !important;
}

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


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

main a {
	color: #000000;        /* black text */
	text-decoration: underline;  /* black underline */
	text-decoration-color: #000000; /* ensures underline is black */
}

main a:hover {
	color: #007bff;        /* Bootstrap blue or any blue you want */
	text-decoration-color: #007bff; /* underline changes to blue on hover */
}

/***************************************************************
*
* FORMS
*
****************************************************************/

/* Apply styles to all input, textarea, and select elements in forms */
form .form-control
{
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #f5f5f5; /* No border */
	padding: 0.75rem 1rem; /* Larger padding */
	font-size: 1.1rem; /* Slightly larger font size */
	border-radius: 0.25rem; /* Optional: Rounded corners */
}

/* Remove focus box-shadow and slightly darker background when focused */
form .form-control:focus
{
	box-shadow: none; /* Remove focus shadow */
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #000000; /* No border */
}

.input-group-text {
	background-color: #f5f5f5; /* Match input background */
	border: 2px solid #f5f5f5; /* Remove border */
}

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

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

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

/***************************************************************
*
* PANELS
*
****************************************************************/

.panel-1 {
	height: 500px;
	background-image: url('/images/bg.avif');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	display: flex;
	align-items: center;
	justify-content: center; /* horizontal centre */
	text-align: center;
}

.panel-2 {
	position: relative;
	background-image: url('/images/carer-patient-1.avif');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 400px;           /* adjust as needed */
	color: #000;                 /* black text on white overlay */
}

/* White overlay */
.panel-2::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7); /* white at 70% opacity */
	z-index: 1;
}

/* Keep text above overlay */
.panel-2 * {
	position: relative;
	z-index: 2;
}

/* Hide background image on mobile */
@media (max-width: 991.98px) {
	.panel-2 {
		background-image: none;
	}
}



/***************************************************************
*
* TESTIMONIAL CARDS
*
****************************************************************/

.testimonial-card {
	min-height: 320px;
	padding: 40px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.testimonial-card h5 {
	margin-top: 20px;
	font-weight: 600;
}

.bg-one   { background: #007bff; }
.bg-two   { background: #28a745; }
.bg-three { background: #dc3545; }
.bg-four  { background: #6f42c1; }
.bg-five  { background: #fd7e14; }
.bg-six   { background: #20c997; }

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

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

footer a
{
	color: #cccccc !important;
}

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