/* --- Basic Setup & Google Font --- */
body {
    background-color: #F7F0F0;
    font-family: "Montserrat", sans-serif;
    color: #484349;
    margin: 0;
    /* For the fade transition */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* --- Header & Navigation --- */
/* --- Header & Navigation --- */
.site-header {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 10px 20px;
    /* Add padding for smaller screens */
    box-sizing: border-box;
    /* Ensure padding doesn't affect width */
    position: relative;
    /* For positioning the mobile menu */
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-nav a {
    text-decoration: none;
    color: #484349;
    font-size: 38px;
    padding: 10px;
    transition: color 0.3s;
}

.logo-link img {
    height: 60px;
}

/* Menu Toggle (Hamburger) - Hidden on Desktop */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #484349;
    position: relative;
    transition: background-color 0.3s;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #484349;
    left: 0;
    transition: transform 0.3s;
}

.hamburger::before {
    top: -10px;
}

.hamburger::after {
    top: 10px;
}

/* Nav Links - Desktop */
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 40px;
}

.nav-links a {
    text-decoration: none;
    color: #484349;
    font-size: 24px;
    padding: 10px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #18A999;
}

.nav-links a.active {
    color: #109648;
    border-bottom: 2px solid #109648;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links img {
    height: 30px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.social-links img:hover {
    opacity: 1;
}

/* --- Main Content Layouts --- */
.content-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* Add padding for smaller screens */
    box-sizing: border-box;
}

/* Homepage: Single large image */
.full-width-image img {
    margin: auto;
    height: auto;
    max-width: 100%;
    /* Ensure image doesn't overflow */
    display: block;
}

/* Responsive Grid Layout */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 30px;
    grid-template-areas:
        "image title"
        "image text";
    align-items: start;
}

.grid-image {
    grid-area: image;
}

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

.grid-title {
    grid-area: title;
    font-size: 36px;
    margin-top: 0;
    margin-bottom: 10px;
}

.grid-text {
    grid-area: text;
}

.grid-text p {
    font-size: 20px;
    line-height: 1.6;
    margin-top: 0;
}

/* --- Privacy Policy Page --- */
.policy-content {
    padding: 20px 0;
}

.policy-content h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

.policy-content h2 {
    font-size: 32px;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #109648;
}

.policy-content p,
.policy-content li {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.policy-content ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

/* --- Footer --- */
.site-footer {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    text-align: center;
    box-sizing: border-box;
}

.site-footer a {
    text-decoration: none;
    color: #484349;
    font-size: 16px;
    transition: color 0.3s;
}

.site-footer a:hover {
    color: #109648;
}

.footer-social-links {
    margin-top: 20px;
    display: none;
    /* Hidden by default (Desktop) */
    justify-content: center;
    gap: 20px;
}

.footer-social-links img {
    height: 30px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-social-links img:hover {
    opacity: 1;
}

/* --- Mobile Media Queries --- */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        /* Show hamburger on mobile */
        z-index: 1001;
        /* Ensure it's above the menu */
    }

    .nav-links {
        display: none;
        /* Hide links by default */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #F7F0F0;
        padding: 20px 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        text-align: center;
    }

    .nav-links.active {
        display: flex;
        /* Show when active */
    }

    .social-links {
        display: none;
        /* Hide social links in header on mobile if desired, or move them */
    }

    /* Show social links inside the mobile menu if needed, 
       but for now let's just hide them from the header row to save space 
       or we can add them to the nav-links list via JS or just keep them hidden */

    .responsive-grid {
        display: flex;
        flex-direction: column;
    }

    .grid-title {
        order: 1;
        /* Title first */
        text-align: center;
    }

    .grid-image {
        order: 2;
        /* Image second */
        margin-bottom: 20px;
    }

    .grid-text {
        order: 3;
        /* Text last */
    }

    .main-nav a {
        font-size: 24px;
        /* Smaller logo text */
    }

    .footer-social-links {
        display: flex;
        /* Show on mobile */
    }
}