@font-face {
	font-family: 'Outfit';
	src: url('/fonts/Outfit-VariableFont_wght.ttf') format('woff2');
}
@font-face {
	font-family: 'PlusJakartaSans';
	src: url('/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('woff2');
}
header {
	background: linear-gradient(to right, black, #2e003e);
}
#introduction, #contact {
	display:none;
}
h2 {
	font-family: 'PlusJakartaSans';
}
.portfolio > a {
	display: block;
	text-align: center;
	font-size: 29px;
	padding-bottom: 16px;
	color: gray;
	text-decoration: navajowhite;
	border-bottom: 1px solid gray;
	margin: 0px 30px 30px 20px;
}
.portfolio > img {
	margin: auto;
	text-align: center;
	display: block;
	border: 1px solid gray;
}
.portfolio {
	display:inline-block;
	width:351px;
	margin-bottom:50px;
}

	
.description {
    margin: 20px 0px;
    font-size: 22px;
    background-color: rgba(255, 255, 255, 0.9);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
    padding: 50px;
    border: solid #e8e8e8 1px;
    border-radius: 7px;
    letter-spacing: 1px;
    word-spacing: 7px;
    background-size: 100% 100%;
    background-position: center; 
    background-repeat: no-repeat; /* Prevents the background image from repeating */
	font-weight:100;
}

.description:nth-of-type(1) {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)), url('images/backgrounds/webbackground01.png');
}

.description:nth-of-type(2) {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)), url('images/backgrounds/webbackground02.png');
}

.description:nth-of-type(3) {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)), url('images/backgrounds/webbackground03.png');
}

.description:nth-of-type(4) {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)), url('images/backgrounds/webbackground04.png');
}

.description:nth-of-type(5) {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)), url('images/backgrounds/webbackground05.png');
}

.description:nth-of-type(6) {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)), url('images/backgrounds/webbackground06.png');
}
#headermenu > li > a {
	color:lightgray;
	text-decoration:none;
}
#headermenu > li {
	padding:0px 10px;
	font-family: 'PlusJakartaSans';
	font-size: 23px;
	font-weight: bold;
}
#headermenu, #headermenu > li {
	display:inline-block;
	vertical-align:top;
	float:right;
}
#logo {
	width:100px;
}
#spinnerholder {
	display:none;
}
.farule {
	display:inline-block;
	width:50px;
}
.icon-spinner {
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url('spinner.svg');
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}
body {
	font-family: 'Outfit';
	margin: 0;
	padding: 0;
	background-color: white;
	background-image: url('background.png');
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.content-wrapper {
	margin: 0 auto;
	width: 1100px;
}
.menuholder {
	width:1100px;
	margin:auto;
}
header {
	color: white;
	padding: 20px 0px;
}
h1 {
    color: #2e003e; /* Changed to match the color from the gradient */
    font-size: 3rem; /* Assuming this is the same size as your current h2 */
    line-height: 1.2em; /* Add this line to unify line height */
    font-weight: 700; /* Optional, same weight as h2 */
    padding: 15px 0px 27px 0px; /* Retain padding from the original h2 */
    margin: 0; /* Retain margin from the original h2 */
}
h2 {
    font-family: 'PlusJakartaSans'; /* Keep the font */
    color: #2e003e; /* Changed to match the color from the gradient */
    font-size: 3rem; /* Keep the same size */
    line-height: 1.2em; /* Retain the line height */
    font-weight: 700; /* Match the weight from h1 */
    padding: 15px 0px 27px 0px; /* Apply the same padding from h1 */
    margin: 0; /* Match the margin */
}
#profile-image {
	float: left;
	margin-right: 20px;
	width: 150px;
	height: 150px;
}

#introduction {
	background-color: white;
	padding: 20px;
	margin-bottom: 20px;
}

#services > ul > li > a {
	text-decoration:none;
	color:inherit;
}
#services {
	background-color: white;
}
.mainlist > li {
	border-top: 1px solid gray;
	list-style-type: none !important;
	line-height:48px;
}
.mainlist > li:last-child {
	border-bottom: 1px solid gray;
}
.mainlist {
}
.mainlist > li > a {
    color: #7A7A7A; /* Default text color */
    text-decoration: none; /* No underline initially */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition */
}

.mainlist > li > a:hover {
    color: #2e003e; /* Change to a different color on hover */
    text-decoration: underline; /* Add underline effect on hover */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Optional: add a subtle shadow for effect */
}

ul {
	list-style: none;
	padding: 0px 0px 0px 20px;
	color: #7A7A7A;
	font-size: 1.8em;
	font-weight: 400;
	line-height: 1.2em;
	margin:9px;
}

ul li {
	padding: 5px 0;
}

#contact {
	background-color: white;
	padding: 20px;
	display:none;
}

.form-group {
	    margin-bottom: 20px;
}

label {
	color: #7A7A7A;
	display: block;
	margin-bottom: 5px;
}

input, textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}

button {
	padding: 10px 20px;
	background-color: #007BFF;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

button:hover {
	background-color: #0056b3;
}
.privacy-message {
	font-size: 0.8em;
	color: #666;
}
#profile-image {
	border-radius:6px;
}
p, #location {
	letter-spacing:1px;
}
footer {
	background-color: #282c34;
	color: white;
	padding: 20px 0;
	text-align: center;
}

.footer-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
.footer-menu, .social-media {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-menu li, .social-media li {
	display: inline;
	margin: 0 10px;
}
.footer-menu a, .social-media a {
	color: white;
	text-decoration: none;
}
.footer-menu a:hover, .social-media a:hover {
	text-decoration: underline;
}
#testimonials {
    background-color: #f9f9f9; /* Light background color for contrast */
    padding: 20px; /* Padding for space around the testimonial */
    margin: 20px 0; /* Margin to separate from other sections */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

#testimonials h2 {
    font-size: 1.5em; /* Larger font for the section title */
    margin-bottom: 10px; /* Spacing below the title */
}

#testimonials blockquote {
    quotes: "“" "”" "‘" "’"; /* Quotes styling */
    font-style: italic; /* Italic for styling */
}

#testimonials blockquote p {
    margin: 0; /* Remove margin from paragraph */
    padding: 10px; /* Padding around the text */
    position: relative; /* Position for quote marks */
}

#testimonials blockquote footer {
    text-align: right; /* Align footer text to the right */
    font-size: 0.9em; /* Slightly smaller font for attribution */
    color: #555; /* Darker color for the footer */
}
	.mainlist > li > a > div {
		display:inline-block;
		vertical-align:top;
	}
/* Mobile */
.dropdownmenu {
	display:none;
}
@media only screen and (max-width: 768px) {
	.fa-bars {
		font-size:30px;
	}
	header {
		padding: 20px 20px;
	}
	.dropdownmenu {
		display:inline-block;
		width:50px;
		float:right;
	}
	h1 {
		text-align:center;
	}
	.content-wrapper {
		margin: 0 auto;
		width: 100%;
	}
	.menuholder {
		width:100%;
		position:relative;
		margin:auto;
		
	}
	#headermenu {
		display:none;
		width: 115px;
		margin-top: 39px;
		display: none;
		background: black;
		margin-right: -28px;
	}
	ul {
		padding:0px;
	}
	.mainlist > li {
		line-height:35px;
	}
	.mainlist > li > a > div:nth-child(odd) {
		width:50px;
	}
	.mainlist > li > a > div:nth-child(even) {
		width:300px;
	}
}