@charset "utf-8";

/* ####################################################################################### */

/* General styles */
body {
    font-family: Garamond, serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: black; /* Default text color */
}

/* ####################################################################################### */

/* Text color variations */
.text-black {
    color: black;
}

.text-white {
    color: white;
}

.text-green {
    color: #80b27b;
}

/* ####################################################################################### */

/* Heading 1 */
h1 {
    font-size: 36pt;
	font-family: Garamond, serif;
    color: white; /* Default heading color */
}

/* Heading 2 */
h2 {
    font-size: 18pt;
	font-family: Garamond, serif;
    color: black;
}

h3 {
    font-size: 16pt;
    font-family: Garamond, serif;
    color: black;
}

/* ####################################################################################### */

/* Button text */
.button {
    font-family: Garamond, serif;
    font-size: 16pt;
    font-style: italic;
    text-decoration: none;
    color: black; /* Default button text color */
}

/* Button color variations */
.button.black {
    color: black;
}

.button.white {
    color: white;
}

.button.green {
    color: #80b27b;
}

/* ####################################################################################### */

/* Remove max-width from container */
.container {
    width: 100%;
    /* max-width: 1200px; */ /* Remove maximum width */
    margin: 0 auto; /* Center the container */
    padding: 0; /* Add some padding on the sides */
}

/* Flexible images */
img {
    max-width: 100%; /* Make images responsive */
    height: auto;
}

/* ####################################################################################### */

/* Header and Navigation Bar */
header {
    width: 100%;
    background-color: #b28a8a; /* Change the background color to #565656 */
    position: fixed; /* Make the header fixed */
    top: 0; /* Stick it to the top */
    left: 0; /* Align to the left edge */
    z-index: 1000; /* Ensure it stays on top of other content */
    overflow: hidden; /* Hide the slide-in menu when it's off-screen */
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px; /* Set height to 80 pixels */
    padding: 5PX 50px; /* 50 pixels padding on left and right */
}


/* Logo */
.logo {
    display: flex;
    align-items: center;
    height: 100%; /* Ensure vertical centering */
}

.logo img {
    height: 80px; /* Adjust as needed */
}

/* Menu */
.menu {
    list-style: none;
    display: flex;
    align-items: center;
    height: 100%; /* Ensure vertical centering */
    margin: 0;
    padding: 0;
}

.menu li {
    margin-left: 30px; /* Adjust spacing between menu items */
}

.menu a {
    text-decoration: none;
    color: white;
    font-size: 21pt;
    font-family: Garamond, serif;
}

.menu a:hover {
    color: #80b27b; /* Light green hover color */
}

/* Menu Toggle Button (for mobile) */
.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    display: none; /* Hide on larger screens */
}


/* Slide-in Menu (for mobile) */
.slide-in-menu {
    position: fixed;
    top: 0;
    right: -350px; /* Increased off-screen distance */
    width: 300px;
    height: 100%;
    background-color: #333;
    color: white;
    padding: 20px;
    transition: right 0.3s ease;
    z-index: 1000;
}

.slide-in-menu.open {
    right: 0; /* Slide in when open class is added */
}

.slide-in-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.slide-in-menu li {
    margin-bottom: 20px;
}

.slide-in-menu a {
    text-decoration: none;
    color: white;
    font-size: 21pt;
    font-family: Garamond, serif;
}

.slide-in-menu a:hover {
    color: #80b27b; /* Light green hover color */
}


/* Close Button (for mobile) */
.close-button {
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}


/* Media Query for Mobile Screens */
@media (max-width: 768px) {
    .menu {
        display: none; /* Hide the main menu on mobile */
    }

    .menu-toggle {
        display: block; /* Show the menu toggle button */
    }
}


/* ####################################################################################### */

/* Hero Section */
.hero {
    width: 100%;
    height: 600px; /* Adjust as needed */
    background-image: url('images/top.jpg'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Fixed background */
    position: relative;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 20%; /* Inset from the left */
    transform: translateY(-50%);
    color: white;
    text-align: left;
	 max-width: 600px; /* Add max-width to content */
}

.hero-title {
    font-size: 36pt;
    margin-bottom: 20px;
}

.hero-text {
    font-size: 16pt;
    font-family: Garamond, serif;
    margin-bottom: 20px; /* Add space between text and buttons */
}

.hero-buttons {
    display: flex; /* Use flexbox to align buttons horizontally */
    align-items: center; /* Vertically align buttons with text */
}

.hero-buttons a {
    margin-right: 10px; /* Add a gap between the buttons */
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    .hero-content {
        left: 20px; /* Reduce inset on smaller screens */
    }
}

/* ####################################################################################### */

/* Base button styles */
.button {
    display: inline-block;
    height: 35px;
    padding: 0 20px; /* Adjust padding for width */
    font-family: Garamond, serif;
    font-size: 16pt;
    font-style: italic;
    text-decoration: none;
    line-height: 35px; /* Vertically center text */
    border-radius: 5px;
    text-align: center;
}

/* Button type 1: White border, transparent background, white text (for dark backgrounds) */
.button.white-border {
    background-color: rgba(255, 255, 255, 0); /* 0% alpha white */
    border: 1px solid white;
    color: white;
}

/* Button type 2: White background, black border, black text (for any background) */
.button.black-border {
    background-color: white;
    border: 1px solid black;
    color: black;
}

/* Button type 3: #d3e5d1 background, #80b27b border and text (for light backgrounds) */
.button.green-bg {
    background-color: #d3e5d1;
    border: 1px solid #80b27b;
    color: #80b27b;
}

/* ####################################################################################### */

/* Content Section */
.content-section {
    width: 100%;
    max-width: 900px; /* Maximum width of 600 pixels */
    min-width: 320px; /* Minimum width for phone screens */
    background-color: white;
    padding: 20px 20px 70px 20px;
    box-sizing: border-box; /* Include padding in height */
    margin: 0 auto; /* Center the section */
	
}

.section-text p {
    font-size: 16pt; /* Adjust the font size as needed */
    line-height: 1.6; /* Adjust the line height as needed */
    font-family: Garamond, serif;
    text-align: left; /* Left-justify the text */
}

.section-text {
    text-align: left; /* Left-justify the text */
}

.text-center {
    text-align: center;
}

/* ####################################################################################### */


/* Section 2 */
/* Section 2 */
/* Section 2 */
/* Section 2 */
.section-2 {
    width: 100%;
    background-image: url('images/mid.jpg'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 50px 0;
}

.columns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
}

.column {
    flex-basis: calc(33.33% - 40px); /* Three columns with margin */
    max-width: 380px; /* Maximum width remains the same */
    min-width: 200px; /* Minimum width to prevent content overflow */
    height: 400px;
    border: 2px solid #80b27b; /* Green border */
    background-color: rgba(255, 255, 255, 0.7); /* White background with 70% alpha */
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .column {
        flex-basis: 100%; /* Full width on smaller screens */
        max-width: none; /* Remove max-width */
        min-width: auto; /* Reset min-width */
    }
}

.column p {
    font-size: 16pt;
    line-height: 1.5;
    font-family: Garamond, serif;
}




/* ####################################################################################### */

/* Testimonials Section */
.testimonials-section {
    width: 100%;
    height: 350px;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    background-image: url('images/base.jpg'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.testimonials-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.testimonials-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.testimonials-container {
    display: flex;
    height: 100%;
}

.testimonial {
    width: 230px;
    height: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid #80b27b; /* Green border */
    margin-right: 10px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8); /* White background with 80% alpha */
}

.testimonial h2 {
    font-size: 18pt;
    margin-bottom: 10px;
    font-family: Garamond, serif;
}

.testimonial p {
    font-size: 16pt;
    line-height: 1.5;
    font-family: Garamond, serif;
}

.scroll-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.scroll-left {
    left: 10px;
}

.scroll-right {
    right: 10px;
}

/* ####################################################################################### */

/* Pink Band */
.pink-band {
    width: 100%;
    height: 30px;
    background-color: #b28a8a; /* Or any pink color you prefer */
}


/* ####################################################################################### */


/* Call to Action Section */
.cta-section {
    width: 100%;
    background-color: #80b27b; /* Green background */
    padding: 25px 50px 75px 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cta-content {
    width: 60%;
}

.cta-content h1 {
    font-size: 36pt;
    color: white;
    margin-bottom: 10px;
}

.cta-content p {
    font-size: 16pt;
    color: white;
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    .cta-section {
        flex-direction: column; /* Stack content vertically */
        align-items: flex-start; /* Align content to the left */
    }

    .cta-content {
        width: 100%; /* Full width on smaller screens */
        margin-bottom: 20px; /* Add space below content */
    }
}


/* ####################################################################################### */

/* Contact Section */
.contact-section {
    width: 100%;
    background-color: #565656; /* Same grey as navigation */
    color: white;
    padding: 25px 50px 75px 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-details {
    width: 60%;
}

.contact-details h2 {
    font-size: 24pt;
    margin-bottom: 10px;
}

.contact-details p {
    font-size: 16pt;
    font-family: Garamond, serif;
    line-height: 1.5;
}

.contact-details a {
    color: white;
    text-decoration: none;
}

.social-media {
    display: flex;
    align-items: center;
}

.social-media a {
    margin-left: 10px;
}

.social-media img {
    height: 30px; /* Adjust as needed */
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    .contact-section {
        flex-direction: column; /* Stack content vertically */
        align-items: flex-start; /* Align content to the left */
    }

    .contact-details {
        width: 100%; /* Full width on smaller screens */
        margin-bottom: 20px; /* Add space below content */
    }

    .social-media {
        margin-top: 20px; /* Add space above social media icons */
    }
}