*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	
}

html, body {
    height: 100%;
}
.container {
	min-height: 100vh;
	width: 100%;
	/* background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(background.jpg); 
	background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(gallaxy.png);
	*/
	background-image: url(background.jpg);
	-background-position: center;
	background-position: 35% 40% !important;
	background-size: cover;
	position: relative;
	display: flex;
  	flex-direction: column;
	z-index: 1000;
}

.upper_band {
	height: 7vh;
	display: flex;
	justify-content: space-between; /*Space between logo and links */
	align-items: center;
	padding: 0 2%;
}

/* Logo link and image */
.logo_link img {
	width: auto; /* Maintain aspect ratio */
	height: 6.8vh;
	display: inline;
    vertical-align: middle;
	margin: 0;
}

/* Important links container */
.important_links {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* Align to the right */
}

/* List within important links*/
.important_links ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*List items within important links */
.important_links ul li {
	margin: 0 8px; /* Space between list items */
	position: relative; /* Required for pseudo-element positioning */
	transition: none; /* Prevent background transition */
}

/* Links inside list items */
.important_links ul li a {
	color: #D8CF82;
	text-decoration: none;
	font-size: 0.7vw;
	display: flex;
	align-items: center;
	padding: 0;
	background: none;
	transition:color 0.3s;
}

/* Hover effect with underline */
.important_links ul li::after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background: #384E2D;
    transition: 0.5s;
    margin: 2px;
}

.important_links ul li:hover::after {
    width: 100%;
}

/* User profile link with avatar */
.important_links ul li a img {
	height: 2.4vh;
	width: 2.5vh;
	border-radius: 50%;
	margin: 0;
	margin-right: 8px; /* Space between avatar and username */
}

/* Burger menu button */
.burger-menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px; /* Space between menu and links */
}


/* Social icons */
.social_links a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}


.social_links a i {
	font-size: 1vw;
}


/* Profile section alignment */
profile {
    display: inline;
    vertical-align: middle;
}



.nav_band {
	display: flex;
	height: 5vh;
	padding: 0.5% 2%;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
}
.nav_links{
	flex: 1;
	text-align: center;
}
.nav_title a{
	color: #D8CF82;
	display: inline-block;
	padding: 8px 12px;
	position: relative;
	text-decoration: none;
	font-size: 1.2vw;
}
.nav_title a italics{
	font-style: italic;
	color: #384E2D;
	-font-size: 11px;
	font-size: 0.9rem;
}
.nav_links ul li{
	list-style: none;
	display: inline-block;
	padding: 8px 12px;
	position: relative;
}
.nav_links ul li a{
	color: #D8CF82;
	text-decoration: none;
	-font-size: 13px;
	font-size: 0.8vw;
}
.nav_links ul li::after{
	content: "";
	width: 0%;
	height: 2px;
	background: #384E2D;
	display: block;
	margin: auto;
	transition: 0.5s;
}
.nav_links ul li:hover::after {
	text-decoration: none;
	width: 100%;
}
nav_messages {
	display: flex;
	justify-content: left;
	align-items: center;
	height: 5vh;
	width: 80%;
	color: white;
}
nav_messages ul {
	margin: 2px 0;
	margin-left: 17.6%;
	-vertical-align: middle;
	display: flex;
	justify-content: center;
	align-items: center;
}

nav_messages ul li{
	font-size: 0.8vw;
	font-family: Arial, Helvetica, sans-serif;
	padding: 6px 30px;
	background-color: #222;
	text-wrap: nowrap;
	border-radius: 4px;
}

.badge {
	padding: 5px;
	background-color: #384E2D;
	border-radius: 50%;
	color: white;
	font-weight: 800;

}

body_part{
	height: 75%;
	justify-content: space-between;
}



footer {
	margin-top: auto; /* Push the footer to the bottom of the container */
	display: flex;
	min-height: 22vh;
	color: #D8CF82;
	background-color:rgba(0, 0, 0, 0.4);
	justify-content: center;
	padding-bottom: 10px;
}

.footer_title {
	color: #384E2D;
	font-weight: 600;
	text-align: center;
}

.footerCol {
	width: 25%;
}

.footerCol ul li {
	list-style: none;
}

.footerlinks ul li {
	padding-left: 15vh; /* Add margin-right instead of padding-bottom */
    
}

.footerCol ul li a {
	color: #D8CF82;
	text-decoration: none;
	font-size: 11px;
}


.footerSocialLinks {
	align-items: center;
}

.footerSocialLinks ul {
	display: flex;
	justify-content: center;
	list-style: none; /* Remove default list styling */
}

.footerSocialLinks ul li {
	display: inline-block; /* Ensure the list items are displayed inline */
	
}

.footerSocialLinks ul li i {
	font-size: 1.5vh;
	padding-top: 2vh;
	padding-left: 1vw;
	padding-right: 1vw;
	-align-items: center;
}
.footerContact {
	display: flex;
	justify-content: left;
	padding-left: 130px;
	font-size: 12px;
}
.footerContact a {
	list-style: none;
	color: #D8CF82;
	text-decoration: none;
	font-size: 11px;
}
.location {
	margin-bottom: 1.8vh;
}

.footerCol p- {
	padding-left: 150px;
	font-size: 10px;
}

/* Contact Us */
.contact_us {
    font-size: 16px; /* Font size */
    width: 100%; /* Full width for mobile */
    text-align: center; /* Center text */
    margin-bottom: 20px; /* Space below contact us */
}


profile {
	color: #384E2D;
}

.burger-menu,
.burger-menu-btn {
	display: none;
}

/* Targeting the search form */
.search_deceased_form {
    margin-left: 2.5vw;
    -background-color: #111;
    padding: 10px; /* Optional: Add padding to the form */
    border-radius: 5px; /* Optional: Add rounded corners */
}

/* Targeting the input field within the form */
.search_deceased_form .search_form input.form-control {
    background-color: #222; /* Input field background color */
    color: #fff; /* Input field text color */
    border: 1px solid #444; /* Border color */
    padding: 5px; /* Padding inside the input field */
    border-radius: 5px; /* Optional: Add rounded corners to the input */
}

/* Optional: Additional styling for the input field on focus */
.search_deceased_form .search_form input.form-control:focus {
    border-color: #555; /* Border color on focus */
    outline: none; /* Remove default outline */
    background-color: #333; /* Background color on focus */
}
.mobile_search_form {
	display: none;
}




/* MOBILE VERSION */
@media only screen and (max-width: 600px) {

	.container {
		min-height: 100vh;
		-background-position: 35% 40% !important; /* Center the background image vertically and horizontally */
        background-size: cover !important; /* Maintain cover size */
	}

	.burger-menu-btn {
		display: block;
		width: 50px;
		height: 40px;
		background-image: url('../images/icons/burger-menu1.png'), url('../images/icons/x-icon.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center, center left 50px;
		margin: 0px 5px;
		cursor: pointer;
		font-size: 0.5vw;
	}

	.burger-menu {
		-display: flex; /* Use flex */
		display: none;
		flex-direction: column;
    	justify-content: center; /* Center horizontally */
    	position: fixed;
		width: 100%;
		height: 100vh;
		z-index: 1001;
		background-color: #111;
		top: 6vh;
		align-items: center;		
	   
	}
	
	.burger-menu ul {
		
		width: 100%;
		height: calc(100vh - 7vh);
		display: flex;
		flex-direction: column;
		justify-content: center; /* Center vertically */
		align-items: center;
	}

	.burger-menu ul li {
		flex-basis: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 2px solid #000;
		-height: 5vh;
		width: 100%;
	} 

		
	.burger-menu ul li:last-child {
		border-bottom: 2px solid #000;
	}

	
	.burger-menu ul li a{
		display: block;
		flex-basis: 100%;
		font-size: 3vw;
		text-align: center;
		color: #D8CF82;
		text-decoration: none;
	}
	

    .upper_band {
        -height: auto;
		height: 8vh;
        padding-top: 0%;
		padding-right: 0%;
		padding-left: 0%;
	}

    .upper_band img {
        width: 65%; /* Adjust the width as needed */
		height: 5vh;
        display: block; /* Ensure it's treated as a block-level element */
		margin: 0px 5px;
    }
	

	.important_links {
		display: flex;
   		align-items: center; /* Center vertically */
    	justify-content: flex-end;
    	text-align: right;
	}


	.important_links ul li {
		list-style: none;
		display: inline-block;
		-padding: 8px 12px;
		position: relative;
	}

	.important_links ul li::after {
		content: "";
		width: 0%;
		height: 2px;
		background: #384E2D;
		display: block;
		margin: auto;
		transition: 0.5s;
	}
	
	.important_links ul li:hover::after {
		width: 100%;
	}

	.important_links ul li a {
		color: #D8CF82;
		text-decoration: none;
		font-size: 0.7vw;
	}

	.important_links ul li a i {
		font-size: 3vw; /* Adjust the size as needed */
	}

	.social_links {
		display: flex;
		align-items: center; /* Center vertically */
		justify-content: center; /* Center horizontally */
		height: 100%;
	}
	
	
    .user_links {
        display: none !important;
    }

    .nav_band {
        display: none;
    }

    nav_messages {
        height: auto;
        text-align: center;
    }

    nav_messages ul li {
        font-size: 2vw;
    }

	nav_messages {
		display: flex;
		justify-content: center;
		align-items: center;
		max-height: 4vh;
		width: 100%;
		color: white;
	}
	nav_messages ul {
		margin: 2px 0;
		-margin-left: 17.6%;
		-vertical-align: middle;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	nav_messages ul li{
		font-size: 3vw;
		font-family: Arial, Helvetica, sans-serif;
		padding: 8px 30px;
		background-color: #222;
		text-wrap: nowrap;
		border-radius: 4px;
	}


    footer {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center-align content in the footer */
        -height: auto;
		min-height: 25vh;
        text-align: center;
        padding-bottom: 0.1vh;
	}
	.footer_title {
		padding-left: 0vh;
		padding-bottom: 0.3vh;
		text-align: center;
		font-size: 3.2vw;
	}

    .footerCol {
        width: 100%;
        text-align: center;
		padding: 5px;
	}

	.footerlinks ul {
		margin: 0;
		padding: 0;
	}

	.footerlinks ul li {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footerlinks ul li:hover {
		color: #fff;
	}

    .footerCol ul li {
        padding-left: 0;
		
    }
	.footerSocialLinks {
		-height: 6.5vh;
		align-items: center;
		
	}
	.footerSocialLinks ul {
		display: flex;
		justify-content: center;
		list-style: none; /* Remove default list styling */
		margin: 0;
	}
	
	.footerSocialLinks ul li {
		margin: 0 1vh; /* Adjust the spacing between social icons */
	}
	

	.footerSocialLinks ul li i {
		text-decoration: none;
		color: #ffffff;
		font-size: 1.5vh;
		padding-top: 0vh;
		padding-left: 1vw;
		padding-right: 1vw;
	}
   
	.location {
        display: none;
	}

	p-, .notMobile {
        display: none;
    }

		
	
	.contact_us {
		
		font-size: 10vw;
		width: 100%;
	
	}

	.footerContact {
		display: flex;
		align-items: center; /* Align vertically */
		justify-content: center; /* Align horizontally */
		padding: 0px;
	}

	.contact i, .contact a {
		padding-top: 0.8vh;
	}




    /*Mobile search form formatting */
	.mobile_search_form {
        display: block;
        width: 100%; /* Make the form container cover 90% of the screen width */
	}
	
	.search_deceased_form {
        width: 100%; /* Make the form take the full width of its container */
        margin: 0 auto; /* Center the container */
        padding: 6px 0; /* Optional: Add padding to the form */
        border-radius: 0px; /* Optional: Add rounded corners */
        -background-color: #111; /* Background color for the form */
    }

    /* Targeting the input field within the form */
    .search_deceased_form .search_form input.form-control {
        background-color: #222; /* Input field background color */
        color: #fff; /* Input field text color */
        border: 1px solid #444; /* Border color */
        padding: 5px; /* Padding inside the input field */
        border-radius: 5px; /* Optional: Add rounded corners to the input */
        width: 90%; /* Make the input field take full width of the form */
        margin: 0 auto; /* Center the input field */
        display: block; /* Make sure the input field is displayed as block */
        box-sizing: border-box; /* Ensure padding and border are included in the width */
    }

    /* Optional: Additional styling for the input field on focus */
    .search_deceased_form .search_form input.form-control:focus {
        border-color: #555; /* Border color on focus */
        outline: none; /* Remove default outline */
        background-color: #333; /* Background color on focus */
    }

   
   
}