body {
    font-size: 18px;
	margin: 0;
	background-color: #e0e0e0; /* Light grey background */
    color: #555555; /* Charcoal text color */
}

@font-face {
    font-family: 'DidotLPDisplay';
    src: url('FONTS/webFonts/DidotLPDisplay/font.woff2') format('woff2'), url('FONTS/webFonts/DidotLPDisplay/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-size: 36px;
	font-family: 'DidotLPDisplay';
	letter-spacing: 2px;
}

.image-container {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.desktop-image {
	display: block;
	width: 100%;
	height: auto;
}

.mobile-image {
	display: none;
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 768px) {
    .desktop-image {
        display: none; /* Hide desktop image on mobile */
    }

    .mobile-image {
        display: block; /* Show mobile image on mobile */
    }
}	

.title-overlay {
	position: absolute;
    bottom: 10px; /* Distance from the bottom of the image */
    left: 10px; /* Distance from the left side of the image */
    color: #e0e0e0; /* Adjust color to ensure readability */
    font-size: 4em; /* Size of the h1 text */
    margin: 0; /* Remove default margin of h1 */
    padding: 5px; /* Optional padding for better appearance */
	background-color: rgba(0, 0, 0, 0.2); /* Black background with 50% opacity */
    border-radius: 0; /* Optional: rounded corners for the background */
	font-family: 'DidotLPDisplay';
}

@media only screen and (max-width: 768px) {
    .title-overlay {
        font-size: 3em;
		font-family: 'DidotLPDisplay';
        bottom: 15px;
        left: 15px;
    }
}
	
@media only screen and (max-width: 480px) {
    .title-overlay {
        font-size: 3em;
		font-family: 'DidotLPDisplay';
        bottom: 0px;
        left: 15px;
    }	
}
	
.content {
    font-size: 2em; /* Adjust the font size for text below the image */
	font-family: 'DidotLPDisplay';
    margin-left: 20px; /* Align text margin with title overlay */
    margin-right: 20px; /* Optional: adjust as needed */
	text-align: left;
	color: #555555;
	margin-bottom: 20px;
}

@media only screen and (max-width: 768px) {
    .content {
        font-size: 2em;
		font-family: 'DidotLPDisplay';
        bottom: 10px;
        left: 10px;
    }
}
	
@media only screen and (max-width: 480px) {
    .content {
        font-size: 1.9em;
		font-family: 'DidotLPDisplay';
        bottom: 5px;
        left: 3px;
    }	
}

.contact-info {
    display: flex;
    flex-direction: row; /* Default to horizontal layout */
    gap: 10px; /* Space between items */
    flex-wrap: wrap; /* Allow wrapping */
}

.contact-info a {
    text-decoration: none; /* Remove underline from links */
    color: #555555; /* Or your preferred color */
    word-break: break-word; /* Ensure long numbers break properly */
}

@media (max-width: 600px) {
    .contact-info {
        flex-direction: column; /* Stack items vertically on small screens */
        text-align: left; /* Center text if desired */
    }
}