@import url("https://fonts.googleapis.com/css2?family=AR+One+Sans&family=Merriweather:wght@700&family=Old+Standard+TT:wght@700&display=swap");

/* <!-- #a3a3a3 -->
<!-- #52525b -->
<!-- #18181b --> */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Merriweather", serif;
}
body {
	font-family: "AR One Sans", sans-serif;
}
.valueImg {
    background-image: url(/../../app/views/images/jesus.png);
    background-size: cover; /* This will make sure your image covers the entire element */
    background-position: center; /* This centers the image in the element */
    background-repeat: no-repeat; /* This stops the image from repeating */
}
.principleImg {
    background-image: url(/../../app/views/images/america.png);
    background-size: cover; /* This will make sure your image covers the entire element */
    background-position: center; /* This centers the image in the element */
    background-repeat: no-repeat; /* This stops the image from repeating */
}
.characterImg {
    background-image: url(/../../app/views/images/Character.jpg);
    background-size: cover; /* This will make sure your image covers the entire element */
    background-position: center; /* This centers the image in the element */
    background-repeat: no-repeat; /* This stops the image from repeating */
}
.backgroudimg {
	background-image: url(/../../app/views/images/brick-wall-fade.png);
    background-size: cover; /* This will make sure your image covers the entire element */
    background-position: center; /* This centers the image in the element */
    background-repeat: no-repeat; /* This stops the image from repeating */
}
.welcomeimg {
    background-image: url(/../../app/views/images/hope.jpg);
    background-size: cover; /* This will make sure your image covers the entire element */
    background-position: center; /* This centers the image in the element */
    background-repeat: no-repeat; /* This stops the image from repeating */
}
header,
footer {
	background-color: #18181b;
}
.light-gray {
    background-color: #a3a3a3;
}
.medium-gray {
	background-color: #52525b;
}

/* Base styles for the header */
header {
    background-color: #333; /* Adjust the color as needed */
}


/* Styling for the hamburger menu */
#menuBtn {
    font-size: 24px; /* Adjust the size as needed */
    cursor: pointer;
}

/* Styles for the navigation links */
#navLinks a {
    text-decoration: none;
    color: white;
    padding: 8px;
    display: block;
}

/* Responsive styles */
@media (max-width: 768px) {
    .hidden {
        display: none !important;
    }
    /* Full-width header elements when menu is open */
    .header-expanded {
        width: 100%;
    }
}

/* 
.hamburger {
	padding: 15px 15px;
	display: inline-block;
	cursor: pointer;
	transition: all 0.3s;
	user-select: none;
}

.hamburger-box,
.hamburger-inner {
	width: 40px;
	height: 24px;
	display: inline-block;
}

.hamburger-inner {
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 0;
	transition: all 0.3s;
}

.hamburger--squeeze .hamburger-inner:before,
.hamburger--squeeze .hamburger-inner:after {
	content: "";
	display: block;
	background-color: #fff;
}

.hamburger--squeeze .hamburger-inner:before {
	top: 10px;
}

.hamburger--squeeze .hamburger-inner:after {
	bottom: 10px;
}

#menuBtn.active .hamburger-inner {
	transform: rotate(45deg);
}

#menuBtn.active .hamburger-inner:before {
	transform: rotate(90deg);
	top: 0;
}

#menuBtn.active .hamburger-inner:after {
	transform: rotate(90deg);
	bottom: 0;
} */