/* General styles */
html {
    scroll-behavior: smooth;
}

/* Header */
.header {
    overflow: visible; /* Ensure the logo can extend beyond header bounds */
    display: flex;
    align-items: center; /* Vertically center the logo */
    justify-content: left; /* Left-align the logo */
    height: 4rem; /* Fix the height of the header */
    padding: 0 2rem; /* Add horizontal spacing */
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #FBC1A8; /* Example background color */
    z-index: 10;
}

.header .logo {
    margin-top: 15rem; /* Adjust this value to move the logo down */
    position: relative;
    top: 0.75rem; /* Moves the logo down slightly */
    width: 2rm;
}


/* Watermark Styling */
.watermark-logo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Increase watermark size */
    height: 100%; /* Increase height as well */
    background-image: url("watermarklogo.png");
    background-repeat: none;
    background-size: 200%; /* Adjust for higher prominence */
    background-position: center;
    opacity: 0.15; /* Slightly more visible */
    z-index: -1; /* Ensure it stays behind all other content */
    pointer-events: none;
}

/* Intro Section */
.intro-section {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align closer to the top */
    align-items: center;
    height: 100vh;
    padding-top: .5rem; /* Adjust this value to control the spacing from the header */
    margin-top: 0; /* Ensure there's no unintended margin */
}

/* Intro Content */
.intro-content {
    max-width: 800px;
    margin-top: 1rem; /* Adjust this value to control spacing under the title */
}


/* Intro Title Styling */
.intro-section h2 {
    font-size: 3rem; /* Larger title */
    color: #2b6f6e;
    margin-bottom: 1rem;
}

/* Intro Text */
.intro-text {
    font-size: 2.5rem;
    line-height: 1.4;
    margin-bottom: 1.5rem; /* Space below the intro text */
    color: #2b6f6e;
}

/* Button */
.start-button {
    margin-top: 1rem; /* Adjust space above the button */
}

.start-button:hover {
    background-color: #FEEA3D;
}

/* Section Styling */
.section {
    padding: 3rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    background-color: transparent;
    color: #2b6f6e;
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
    display: none;
    z-index: 1;
    animation: fadeInUp 0.8s ease forwards;
}

/* Fade In and Float Up Animation */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Start lower */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at original position */
    }
}

/* Section Titles */
.section h2 {
    color: #4BA7A0;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.section p {
    font-size: 1.05rem; /* 25% smaller than original */
    color: #2b6f6e;
}

/* Navigation Buttons in Sections */
.section-button {
    background-color: #FBC1A8;
    color: white;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
    margin-top: 2rem;
    display: block;
    text-align: center;
    transition: background-color 0.3s;
}

.section-button:hover {
    background-color: #FEEA3D;
}

/* Footer Styling */
.footer {
    position: bottom;
    text-align: center;
    padding: 5rem;
    background-color: #59AE9C;
    color: #ffffff;
    font-size: 1rem;
    border-top: 2px solid #4BA7A0;
}

/* Final positioning of section headlines in the four corners */
.final-top-left h2, .final-top-right h2, .final-bottom-left h2, .final-bottom-right h2 {
    position: fixed;
    transform: scale(0.9); /* Unified scaling */
    opacity: 1;
    transition: all 2.5s ease-in-out;
}

/* Specific positions for each headline */
.final-top-left h2 { top: 5%; left: 5%; }
.final-top-right h2 { top: 5%; right: 5%; }
.final-bottom-left h2 { bottom: 5%; left: 5%; }
.final-bottom-right h2 { bottom: 5%; right: 5%; }

/* Responsive font sizes with clamp */
.intro-text, .section h2, .section p, .footer p {
    font-size: clamp(1.5rem, 2vw + 1rem, 3rem); /* Min, preferred, and max size */
}

/* Buttons with responsive font sizes */
.start-button, .section-button {
    font-size: 1.8vw;
    padding: 1.5vw 3vw; /* Adjust button padding */
}

/* Larger screens (e.g., desktops) */
@media (min-width: 1024px) {
    .intro-text, .section h2, .section p, .footer p {
        font-size: 2rem;
    }
}

/* Smaller screens (e.g., tablets) */
@media (max-width: 768px) {
    .intro-text, .section h2, .section p, .footer p {
        font-size: 1.6rem;
    }

    .start-button, .section-button {
        font-size: 1.4rem;
        padding: 0.8rem 1.6rem;
    }
}

/* Very small screens (e.g., phones) */
@media (max-width: 480px) {
    .intro-text, .section h2, .section p, .footer p {
        font-size: 1.4rem;
    }

    .start-button, .section-button {
        font-size: 1.2rem;
        padding: 0.6rem 1.2rem;
    }
}
/* Ensure the page fills the viewport */
html, body {
    height: 100%; /* Full height */
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Main Content Area */
main {
    flex-grow: 1; /* Pushes the footer to the bottom */
}

/* Footer */
.footer {
    background-color: #59AE9C; /* Example color */
    color: #ffffff;
    text-align: center;
    padding: 1rem;
    border-top: 2px solid #4BA7A0;
}