/* @import url('https://fonts.googleapis.com/css2?family=Six+Caps&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
 
h1, h2, .faq-container h2, .faq-intro h2, .intro-glass h2 {
    font-family: 'Bebas Neue', sans-serif;
}

/* Basic Reset and Font Settings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    width: 100%; /* Ensures it spans the full width of the viewport */
    margin: 0; /* Removes any default margin */
    padding: 0; /* Removes any default padding */
    box-sizing: border-box; /* Ensures padding and border are included in width/height */
}

.glass {
    background: rgba(255, 255, 255, 0.75); /* Translucent white background */
    color: rgba(0, 0, 0, 0.87); /* Mostly black text */
    border: 1px solid rgba(255, 255, 255, 0.25); /* Light white border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    padding: 20px; /* Padding around the content */
    margin: 10px 0; /* Vertical spacing */
    border: 1px solid rgba(255, 255, 255, 0.25); /* Border to enhance glass effect */
    border-radius: 8px; /* Rounded corners */
}

.sticky-header-container {
    position: sticky;
    top: 0;
    z-index: 1000; /* High z-index to ensure it stays on top */
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent white background */
    border: none; /* Removes any border */
    margin-bottom: 10px; /* Adds space below the ribbon */
}

.top-ribbon {
    text-align: center;
    padding: 5px;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.75); /* Dark background for visibility */
    color: rgba(255, 255, 255, 1); /* White text for contrast */
    border: none; /* Ensure no border is visible */
}

.theme-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Right-align the toggle in the ribbon */
    margin-right: 20px; /* Ensures some spacing from the right edge */
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.theme-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(204, 204, 204, 1); /* Light grey slider background */
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: rgba(255, 255, 255, 1); /* White slider knob */
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: rgba(153, 0, 0, 1); /* Dark scarlet when active */
}

input:checked + .slider:before {
    transform: translateX(14px);
}

.fas.fa-sun, .fas.fa-moon {
    color: rgba(255, 255, 255, 1); /* White icons for visibility */
    margin: 0 10px; /* Adds space around icons for clearer separation */
}

body {
  font: 1em/1.618 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  padding: 1.5em;
  background: url('../images/background.webp') center/cover no-repeat fixed;
  justify-content: center;
  align-items: center;
}

h1, h2 {
    text-align: center;
    color: black;
    font-weight: normal; /* Adjust font weight, if the font allows */
    /*opacity: 0.9; */ /* Reduce intensity if they still appear too bold */	
}

h1 {
    font-size: 3rem; /* Ensures h1 is large as originally intended */
    text-align: center; /* Keeps title centered if needed */
    margin-bottom: 0.5em; /* Bottom margin for spacing */
}

h1 a {
	color: black;
	text-decoration: none; 
}

h2 {
    font-size: 2.5em;
    margin: 0.5em 0;
}

header, .site-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px; /* Reduced vertical padding to minimize space */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
	border-radius: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
    height: auto; /* Adjusts height based on content with minimal padding */
	margin-bottom: 20px
}

.site-header .page-title {
    flex-grow: 1;
    text-align: left;
    font-size: 3.0em; /* Adjust font size if necessary */
	margin: auto 0; /* Centers title vertically and removes unnecessary top and bottom margins */
}

/* Menu Navigation and Animations */

nav ul {
    display: flex;
    justify-content: flex-end; /* Aligns menu items to the right */
    padding: 0;
    margin: 0; /* No default margin */
    list-style-type: none; /* No bullets */
}

nav ul li {
    padding: 0 10px; /* Space between items */
    position: relative;
    display: flex;
    align-items: center;
}

nav ul li a {
    text-decoration: none;
    color: #900;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.nav-text {
    transition: max-width 0.2s ease-in, padding 0.2s ease-in, visibility 0.2s linear;
    max-width: 0; /* Initially no width to hide text */
    padding: 0; /* No padding when text is hidden */
    overflow: hidden; /* Prevents content from showing when it's not supposed to */
    visibility: hidden; /* Ensures text is fully invisible when not active */
    white-space: nowrap; /* Prevents wrapping of text */
}

nav ul li:hover .nav-text {
    transition: max-width 0.2s ease-out, padding 0.2s ease-out;
    max-width: 200px; /* Enough width to show text */
    padding: 0 10px; /* Horizontal padding */
    visibility: visible; /* Makes text visible on hover */
}


@media (min-width: 769px) {
    nav ul li:hover .nav-text {
        max-width: 200px; /* Allow enough space for text */
        opacity: 1; /* Fully visible */
    }
}

@media (max-width: 768px) {
    .nav-text {
        max-width: none; /* Allows text to show always */
        padding: 0 10px; /* Adequate padding for visibility */
        visibility: visible; /* Ensures the text is always visible */
        position: static; /* Normal flow, no absolute positioning */
        transform: none; /* No scaling or moving */
        transition: none; /* No animations */
    }

    nav ul li {
        position: static; /* Ensures normal flow, no absolute positioning needed */
    }

    nav ul li a {
        justify-content: flex-start; /* Aligns icons and text to start */
    }
}



/* Other Styles */

a:hover, a:focus {
    color: rgba(192, 0, 0, 1); /* A brighter shade of scarlet on hover/focus */
}


.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	border-radius: 8px; /* Rounded corners */
}

.featured-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns in a row */
    gap: 10px; /* Space between images */
}


.image-container.large {
    width: 100%; /* Ensure it spans the full width of its container */
    height: calc((100vw - 20px) * 1 / 2); /* Adjust height considering horizontal padding if any */
    background: #eaeaea;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box; /* Includes padding and border in the dimension calculation */
    border-radius: 8px;
}

.image-container {
    background: #eaeaea; /* Placeholder background */
    border: 1px solid #ddd; /* Placeholder for images */
    padding: 10px; /* Padding inside image containers */
    height: calc(((100vw / 4) - 40px) * 3 / 4); /* Height maintaining 3:2 aspect ratio */
    box-sizing: border-box; /* Include padding in the width calculation */
}

.image-container img, .image-container.large {
    width: 100%;       /* Make the image fill the full width of its container */
    height: 100%;      /* Make the image fill the full height of its container */
    object-fit: cover; /* Cover the container without losing the aspect ratio */
    display: block;    /* Remove any extra space below the image */
    border-radius: inherit; /* Optional: Makes the image corners follow the container's radius */
}

.image-container .image-description {
	color: black; 
    font-size: 0.8em; /* Smaller font size for more text */
    padding: 10px; /* Adds padding around the text */
    height: 90px; /* Adjusts height to content */
    display: flex; /* Ensures the container is flexible */
    align-items: center; /* Centers the text vertically */
    justify-content: center; /* Centers the text horizontally */
    text-align: center; /* Ensures text is centered within the block */
    overflow: hidden; /* Hides overflow */
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space content and push the button to the bottom */
    height: auto; /* Ensure there is enough space for all content */
}

.button-container {
    align-self: flex-end; /* Center aligns the button horizontally */
    width: 100%; /* Ensures button container uses full width of parent */
    display: flex;
    justify-content: flex-end; /* Center button inside the container */
    margin-top: 10px; /* Additional top spacing from content */
}

input[type="submit"] {
    padding: 10px 20px;
    background-image: linear-gradient(to bottom, #ff8080 0%, #990000 100%);
    border: none;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: background 0.3s ease; /* Smooth transition for hover effects */
}

input[type="submit"]:hover {
    background-image: linear-gradient(to bottom, #ff9999 0%, #cc0000 100%);
}

/* Contact Form Styles */

.contact-form-container {
    padding: 20px;
    max-width: 600px; /* Control the width of the form */
    margin: 10px auto 20px; /* Centering the form with top and bottom margin */
	margin-top: 20px;
    background: rgba(255, 255, 255, 0.75); /* Optional if you want glass effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Consistent shadow with other glass elements */
    border-radius: 8px; /* Rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.contact-form-container h2 {
    text-align: center; /* Center the heading */
    margin-bottom: 10px; /* Space below the heading */
	color: rgba(153, 0, 0, 1)
}

/* Reduce the maximum width of the form for better aesthetics */
.contact-form form {
    max-width: 600px; /* Maximum width of the form */
    margin: auto; /* Center the form horizontally */
}

@media screen and (max-width: 768px) {
    .modal-content {
        max-width: 90%;
    }
}

.glass.full-width {
    margin: 0; /* Ensure no default margin */
    padding: 20px; /* Uniform padding */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding in width */
}

.message-success {
    text-align: center;
    padding: 50px;
}

.hidden {
    display: none; /* Ensures the honeypot field is not visible */
}

.submit-container-right {
    text-align: right; /* Aligns the button to the right */
    padding-top: 10px; /* Optional: Adds some space above the button */
}

/* Modal Styles */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* Centering the modal */
    padding: 40px; /* Increased padding around the content */
    border: 1px solid #888;
    width: auto; /* Auto width based on content */
    max-width: 80%; /* Limits the maximum width */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 15px; /* Rounded corners for the modal */
    position: relative; /* Allows absolute positioning inside */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.close {
    color: #aaa;
    position: absolute; /* Absolute position within the modal-content */
    top: 5px; /* 5px from the top */
    right: 10px; /* 10px from the right */
    font-size: 28px;
    font-weight: bold;
}

#modal-image {
    height: auto;  /* Adjusts height to maintain aspect ratio */
    width: auto;   /* Adjusts width to maintain aspect ratio */
    max-height: 65vh;  /* Maximum height constraint */
    max-width: 100%;  /* Maximum width to fit within the modal */
    object-fit: contain;  /* Ensures the content is sized to maintain its aspect ratio while fitting within the element’s content box */
}

#intro-image {
    width: auto;   /* Adjusts width to maintain aspect ratio */
    height: auto;  /* Adjusts height to maintain aspect ratio */
    max-height: 65vh;  /* Maximum height constraint */
    max-width: 100%;  /* Maximum width to fit within the modal */
    object-fit: contain;  /* Ensures the content is sized to maintain its aspect ratio while fitting within the element’s content box */
}

#modal-description {
    margin-top: 20px; /* Space between the image and text */
    font-size: 1.3em; /* Adjusted font size for the description */
    text-align: center; /* Centering the text */
    max-width: 90%; /* Restricting the text width */
}

#intro-modal-description {
    margin-top: 20px; /* Space between the image and text */
    font-size: 1.3em; /* Adjusted font size for the description */
    text-align: center; /* Centering the text */
    max-width: 90%; /* Restricting the text width */
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .modal-content {
        width: 95%; /* Takes a little more space */
    }
	
	#modal-image {
    width: 100%;  /* This will make the image responsive to the container width */
    height: auto;  /* Keeps the image's height proportional to its width */
    max-height: 65vh;  /* Limits the image's height to not exceed 65% of the viewport height */
    object-fit: contain;  /* Ensures the image is scaled correctly to fit within the dimensions without being cropped or distorted */
	}

	.modal-content {
		width: auto;  /* Allows the content's width to adjust based on the inner content */
		max-width: 80%;  /* Ensures the modal doesn't become too wide on larger screens */
		padding: 20px;  /* Ensures there's padding around the content for aesthetics */
		margin: 5% auto;  /* Centers the modal vertically and horizontally with some spacing from the top */
		align-items: center;  /* Centers the items horizontally in flexbox layout */
	}
}

/* Navigation Modal */

.menu-modal {
    display: none; /* Hidden by default */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050; /* Make sure it's above all other content */
    background-color: rgba(255, 255, 255, 0.8); /* Adjust as needed for visibility */
    padding: 10px 40px 5px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none; /* Ignore mouse events */
	width: auto;
}

.menu-modal.active {
    display: flex;
    pointer-events: auto; /* Reactivate pointer events when active */
}

.menu-modal .modal-content {
    background-color: transparent; /* Ensure it’s not creating a nested effect */
    padding: 0;
    border: none; /* Remove any borders */
    font-size: 3em;
    font-family: 'Bebas Neue', sans-serif;
    text-align: center;
    box-shadow: none; /* Remove any box shadows that might create a double effect */
	white-space: nowrap; 
}

body.dark-mode .menu-modal {
    background-color: rgba(45, 45, 45, 0.8); /* Darker background for the modal */
}

body.dark-mode .menu-modal .modal-content {
    color: white; /* Ensures text is visible in dark mode */
    background-color: transparent; /* Keeps the content background consistent with the modal */
}

body.dark-mode .menu-modal.active {
    display: block; /* Ensure it displays when active */
}


@media (max-width: 768px) {
    .menu-modal { display: none; } /* Disable modal on small screens */
}

/* Home Page Styles */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.testimonial-box {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 20px;
}

.testimony-name {
    background-color: #900;
    color: white;
    padding: 5px;
    margin-bottom: 10px;
}

.testimony-text {
    background: #fff;
    padding: 10px;
    border-left: 5px solid black;
    font-size: 1rem;
    color: #333;
}

.btn {
    float: right;
    font-family: Arial, sans-serif;
    padding: 10px 20px;
    background-image: linear-gradient(to bottom, #ff8080 0%, #990000 100%);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px 0;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin: 20px 0; /* Consistent spacing above and below the line */
}

.site-header + hr {
    margin-top: 20px; /* Additional top margin if needed right after the header */
}

.about-me p {
    margin: 0 20px; /* Add horizontal margin */
    text-align: justify; /* Optional: Justify text for better reading */
}

.about-section {
    display: flex;
    justify-content: space-between; /* Ensures spacing between the children */
    align-items: stretch; /* Aligns children's heights */
    margin-bottom: 20px;
}

.content-area {
    flex: 3;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 8px;
}

.about-image-area {
    flex: 2;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.reversed {
    flex-direction: row-reverse; /* Reverses the order for the second section */
}

.about-section .content-area, .about-section .about-image-area {
    padding: 20px;  /* Consistent padding inside each glass area */
    margin: 0px;  /* This adds space around each content and image area */
}

@media (min-width: 768px) {
	
	/* Resets margin for all children */
	.about-section > * {
		margin: 0;  /* Resets all margins to zero */
	}

	/* Adjusts margins for non-reversed and reversed configurations */
	.about-section > :first-child {
		margin-right: 10px; /* Adds spacing between the columns in normal order */
	}

	.about-section.reversed > :first-child {
		margin-right: 0; /* No right margin for the first item in reversed */
		margin-left: 10px; /* Adds spacing between the columns in reversed order */
	}

	.about-section > :last-child {
		margin-right: 0; /* Ensures no margin on the right of the last child in normal order */
	}

	.about-section:not(.reversed) > :first-child {
		margin-left: 0; /* Ensures the first child aligns flush with the left side */
	}


	.about-section.reversed > :last-child {
		margin-left: 0; /* Ensures no margin on the left of the last child in reversed order */
	}
}

/* FAQ Page Styles */
.faq-container {
    margin: 0 auto; /* Centering the container */
    padding: 20px;
    column-count: 3; /* Three columns on desktop */
    column-gap: 20px; /* Space between columns */
}

.faq-item {
    background: rgba(255, 255, 255, 0.75);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    margin-bottom: 20px; /* Vertical spacing between FAQs */
    break-inside: avoid; /* Prevents column breaks inside an item */
    page-break-inside: avoid; /* For older browsers */
    -webkit-column-break-inside: avoid; /* For WebKit browsers */
}

.faq-container h2 {
    font-size: 2em;
	color: rgba(144, 0, 0, 1);
    text-transform: uppercase;
    margin-bottom: 20px;
	font-weight: 300;
	line-height: 1.2;
}

.faq-intro {
    padding: 20px;
    text-align: center;
}

.faq-intro h2 {
    font-size: 2em;
    color: rgba(144, 0, 0, 1); /* Using the deep scarlet here as well */
    text-transform: uppercase;
}

.faq-intro p {
    font-size: 1.2em; /* Adjust size as needed */
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.87); /* Default text color for better readability */
}

.intro-glass {
    background: rgba(255, 255, 255, 0.75); /* Translucent white background */
    color: rgba(0, 0, 0, 0.87); /* Mostly black text */
    border: 1px solid rgba(255, 255, 255, 0.25); /* Light white border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    padding: 20px; /* Padding around the content */
    margin: 10px 0; /* Vertical spacing, centered horizontally */
    margin-bottom: 20px; /* Increase the bottom margin to create more space */
	border-radius: 8px; /* Rounded corners */
    text-align: center;
}

.intro-glass h1 {
    font-size: 2.5em; /* Adjust size as needed */
	line-height: 1;
}

.intro-glass h2 {
    font-size: 2em;
    color: rgba(144, 0, 0, 1); /* Deep scarlet */
    text-transform: uppercase;
    margin-top: 0.5em; /* Adjust space between headings */
	line-height: 1;
}

.intro-glass p {
    font-size: 1.2em; /* Adjust size as needed */
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.87); /* Default text color for better readability */
}

footer {
    width: 100%;
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.75); 
    border-radius: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
	box-sizing: border-box;
	margin-top: 20px;
    color: black; 
	bottom: 0; 
}

footer a {
    text-decoration: none;
    color: black; /* Ensures links are also black */
    margin-right: 15px;
}

:root {
  font-size: 18px;
  box-sizing: inherit;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.page {
  font-family: 'Inter';
  border-radius: 0.5em;
  max-width: 20em;
  color: rgba(183, 18, 52, 0.9); /* Darker scarlet for text */
  border: 1px solid rgba(255, 85, 85, 0.25); /* Lighter scarlet border */
  background: rgba(255, 85, 85, 0.25); /* Light scarlet background */
  box-shadow: 0 0 1em 0.5em rgba(183, 18, 52, 0.45); /* Dark scarlet shadow */
  backdrop-filter: blur(1em);
  overflow: hidden;
}

.page .page {
  background-color: rgba(255, 85, 85, 0.35);
  backdrop-filter: blur(0.5em);
  border-width: 0;
}

.page .page .page {
  background-color: rgba(255, 85, 85, 0.45);
  backdrop-filter: blur(0.25em);
}

.page-box {
  padding: 1.5em;
}

.page h3 {
  color: #6f2a2a; /* Modified to fit scarlet theme */
}

.header-title {
  text-transform: uppercase;
}

.body-text {
  font-size: 0.9em;
}

.footer-text {
  font-size: 0.75em;
}

.content-box {
    background: #fff; /* Solid white background */
    padding: 15px; /* Padding for content */
    border-radius: 5px; /* Optional: rounded corners for the content box */
	margin-bottom: 10px; /* Space above the button */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: slight shadow for depth */
}

.featured-images, .about-me, .testimonials {
    margin-top: 20px; /* Ensures uniform top margin for all sections */
    margin-bottom: 20px; /* Consistent bottom margin */
}

header, footer, .site-header, .image-container, .testimonial-box, .btn, hr {
    border-radius: 8px; /* Uniform rounded corners */
}

.error {
    color: rgba(144, 0, 0, 1);
    margin-left: 4px; /* Space between asterisk and error message */
    font-size: 0.9em; /* Smaller font size for error message */
    white-space: nowrap; /* Prevents breaking error message */
    flex-shrink: 0; /* Prevents error message from shrinking */
}

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers content vertically */
    text-align: center; /* Ensures text within is centered */
    width: 100%; /* Full width to take up the container it's within */
}

.error-image {
    width: 80%; /* 80% of its container's width */
    max-width: 600px; /* Maximum width to avoid being too large on bigger screens */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px; /* Space between the image and the error text */
	border-radius: 8px;
}

.error-description {
    background-color: rgba(255, 255, 255, 0.6); /* Light background for text */
    color: #cc0000; /* Text color, assuming this is your red */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}


body.dark-mode .error-description {
	background-color: rgba(45, 45, 45, 0.75); /* Darker background for better visibility in dark mode */
    color: rgba(255, 204, 204, 1); /* Lighter red for better visibility in dark mode */
}


/* Dark mode styles, now using consistent RGBA formatting for transparency */

/* Dark mode for header */

body.dark-mode header {
    background: rgba(45, 45, 45, 0.75); /* Dark but translucent */
    color: white; /* White text for visibility */
    border-bottom: 1px solid rgba(70, 70, 70, 0.25); /* Subtle border adjustment for dark mode */
}

body.dark-mode .site-header {
    background: rgba(45, 45, 45, 0.75); /* Dark but translucent */
    color: white; /* White text for visibility */
    border-bottom: 1px solid rgba(70, 70, 70, 0.25); /* Subtle border adjustment for dark mode */
}

/* Testimonial boxes in dark mode */
body.dark-mode .testimonial-box {
    background: rgba(50, 50, 50, 0.6); /* Dark with glass effect */
    color: white; /* Ensure text inside is white for contrast */
}

body.dark-mode .content-box {
    background: rgba(50, 50, 50, 0.6); /* Dark with glass effect */
    color: white; /* Ensure text inside is white for contrast */
}

/* Adjusting the testimonial text container specifically */
body.dark-mode .testimony-text {
    background: rgba(60, 60, 60, 0.8); /* Darker for the text container */
    color: white; /* Text color changed to white */
}

/* Enhancing glassmorphism effect under dark mode */
body.dark-mode .glass {
    background: rgba(45, 45, 45, 0.85); /* Slightly more opaque for better visibility */
    border: 1px solid rgba(100, 100, 100, 0.25); /* Darker border for depth perception */
}

body.dark-mode footer,
body.dark-mode .glass {
    background: rgba(45, 45, 45, 0.75); /* Dark background with transparency */
    color: white; /* Ensures text is visible in dark mode */
}

body.dark-mode footer a,
body.dark-mode .testimonial-box {
    background: rgba(55, 55, 55, 0.8); /* Slightly lighter/different shade for contrast */
    color: white; /* Text color for readability */
    border-color: rgba(80, 80, 80, 0.9); /* Border color for inputs and buttons */
}

/* Ensuring h1, h2, etc., are visible in dark mode */
body.dark-mode h1,
body.dark-mode h2 {
    color: white; /* White text for headings */
	font-weight: 300;
}

body.dark-mode h1 a {
	color: white;
}

/* Navigation links in dark mode */
body.dark-mode nav ul li a {
    color: #ffcccc; /* Lighter scarlet from the gradient for visibility */
}

/* On hover, make navigation links even lighter for better interaction feedback */
body.dark-mode nav ul li a:hover {
    color: #ffdada; /* Even lighter version of scarlet */
}


/* Ensure links within footer also turn white in dark mode */
body.dark-mode footer a {
    color: white;
}

/* Testimonial boxes retain glassmorphism with a darker shade */
body.dark-mode .testimonial-box {
    background: rgba(50, 50, 50, 0.6); /* Adjusting opacity for glass effect */
    color: white;
}

body.dark-mode .image-container .image-description {
    color: white; /* Sets the text color to white in dark mode */
}

body.dark-mode a {
    color: rgba(255, 204, 204, 1); /* Lighter red for better visibility in dark mode */
}

body.dark-mode a:hover, body.dark-mode a:focus {
    color: rgba(255, 174, 174, 1); /* Even lighter red on hover/focus for a smooth transition */
}

body.dark-mode .glass {
    background: rgba(45, 45, 45, 0.75); /* Dark mode glass effect */
    border: 1px solid rgba(70, 70, 70, 0.25); /* Adjusting border color for dark mode */
}

body.dark-mode .image-container {
    background: rgba(45, 45, 45, 0.75); /* Dark background in dark mode */
    color: white; /* White text in dark mode */
    border-color: rgba(70, 70, 70, 0.25); /* Adjust border color for dark mode */
}

body.dark-mode .faq-container {
    background: rgba(45, 45, 45, 0.75); /* Darker background if necessary */
    color: white; /* Ensure text color is white in dark mode */
}

body.dark-mode .faq-container h2 {
    color: rgba(255, 204, 204, 1); /* Lighter red for dark mode */
}

body.dark-mode .faq-item {
    background: rgba(45, 45, 45, 0.75); /* Dark mode background for each FAQ item */
    color: white; /* White text for better readability in dark mode */
    border: 1px solid rgba(70, 70, 70, 0.25); /* Slightly darker border to fit dark theme */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: adding a subtle shadow for depth */
}

body.dark-mode .intro-glass {
    background: rgba(45, 45, 45, 0.75); /* Darker background for the glass effect */
    border: 1px solid rgba(70, 70, 70, 0.25); /* Darker border to complement the dark theme */
}

body.dark-mode .intro-glass p {
    color: white 
}

body.dark-mode .faq-intro h2 {
    color: rgba(255, 204, 204, 1); /* Lighter red for dark mode */
}

body.dark-mode .intro-glass h2 {
    color: rgba(255, 204, 204, 1); /* Lighter red for dark mode */
}

body.dark-mode .contact-form-container h2 {
	color: rgba(255, 204, 204, 1);
}

body.dark-mode .error {
	color: rgba(255, 204, 204, 1);
}

body.dark-mode .contact-form h2 {
	color: rgba(192, 0, 0, 1);
}

body.dark-mode .modal-content {
    background-color: #333; /* Darker background for dark mode */
    color: white;
}

body.dark-mode .close:hover,
body.dark-mode .close:focus {
    color: #ccc; /* Lighter color for close button in dark mode */
}

@media (max-width: 768px) {
    .container, .image-container, .image-container.large {
        width: 100%; /* This ensures they take up full width */
        padding: 0 10px; /* Adjust padding as needed, but it's added here for inner spacing */
        margin: 0 auto; /* Centers the container */
        box-sizing: border-box; /* Includes padding in width calculation */
    }
	
	.image-container {
		height: calc((100vw/2 - 30px) * 3 / 4);
	}
	
    .featured-images {
        grid-template-columns: 1fr 1fr; /* Single column layout for smaller screens */
    }

    .testimonials-grid {
        grid-template-columns: 1fr; /* Makes it one column */
    }

    .testimonial-box, .about-me, .page {
        padding: 10px; /* Provides padding to avoid content touching screen edges */
    }
	
	.about-me p {
    margin: 0 20px; /* Add horizontal margin */
    text-align: left; /* Optional: Justify text for better reading */
	}
	
	header, .site-header {
	padding: 5px 10px; /* Reduce padding */
	flex-direction: column; /* Stack title and navigation */
	text-align: center; /* Center align content */
    }
	
	.page-title {
        margin-bottom: 10px; /* Space between title and menu */
    }
	
    .about-section {
        flex-direction: column;
        align-items: center;  /* Ensures that items are centered */
    }

    .content-area, .about-image-area {
        width: 100%;  /* Ensures full width usage */
        box-sizing: border-box;  /* Includes padding and border in the width calculation */
    }

    .content-area {
        padding: 10px;  /* Provides padding inside the text container */
        margin-bottom: 20px;  /* Adds space between the text and the image below */
    }

    .about-image-area {
        padding: 10px;  /* Provides padding inside the image container */
        display: flex;
        justify-content: center;  /* Centers the image within the container */
        align-items: center;
    }
	
    .about-image-area img {
        width: 100%;  /* Image should fill the container */
        height: auto;  /* Maintain aspect ratio */
        max-height: calc(100vw * 3 / 4);  /* Limits height to maintain a 4:3 aspect ratio based on the width */
    }

	.about-section .content-area, .about-section .about-image-area {
        padding: 10px; /* Adjust padding if needed for smaller screens */
        margin-bottom: 10px; /* Half the previous space between text and image */
    }

    /* You might also need to adjust the last child in each section to remove extra bottom margin */
    .about-section .content-area:last-child, .about-section .about-image-area:last-child {
        margin-bottom: 0; /* Removes additional margin at the bottom of each container */
    }
	
    .faq-container {
        column-count: 1; /* One column on mobile */
    }
	
    .faq-item {
        display: block; /* Stack vertically on small screens */
    }
	
	.site-header .page-title {
        font-size: 2.5em; /* Adjust the font size if necessary */
        line-height: 1.0; /* Reduces the space between lines */
        text-align: center; /* Centers the text */
        padding: 10px 0; /* Adds padding to ensure some spacing around the text */
    }
	
	.modal-content {
		margin-top: 10vh;
		width: 95%
	}
	
	textarea {
        width: 100%; /* Makes the textarea responsive */
        max-width: 100%; /* Ensures it doesn't exceed the width of its container */
        box-sizing: border-box; /* Includes padding and border in the element's total width */
    }
}