/* Basic Reset & Font Styling */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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

/* Add these lines to the html element for scroll snapping */
html {
    scroll-snap-type: y mandatory; /* Enable vertical snapping, strict */
    overflow-y: scroll; /* Ensure vertical scrolling is enabled */
    -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
}

/* The main container for each section */
.scrolling-section {
    height: 105vh; /* You already have this for slightly taller sections */
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateZ(0); /* Good for performance with fixed backgrounds */
    scroll-snap-align: center; /* <<< This is the key addition for centering snaps */
}

/* The 'viewport' for the text with lots of padding */
.content-box {
    background-color: rgba(26, 26, 26, 0.7);
    color: white;
    padding: 40px 55px;
    max-width: 650px;
    margin: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.content-box h1 {
    margin-top: 0;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.content-box p {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 400;
}

/* --- Mobile Specific Styles --- */
/* --- Mobile Specific Styles --- */
@media (max-width: 768px) {
    .content-box {
        background-color: rgba(26, 26, 26, 0.7);
    }
    .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    .page-navigation {
        padding: 1rem;
    }
}
@media (max-width: 768px) {
    
    .content-box {
        /* This is the main fix: reduce padding and margin for mobile */
        width: 100%;          /* Use 100% of the screen width */
        max-width: 100%;      /* Override */
        margin: 20px auto;    /* 20px top/bottom, auto left/right to center */
        padding: 30px 20px;  /* 30px top/bottom, 20px left/right */
    }

    /* Optional but recommended: Tweak text sizes for mobile */
    .content-box h1 {
        font-size: 2rem;     /* Slightly smaller title */
    }
    
    .content-box p {
        font-size: 0.95rem;  /* Slightly smaller paragraph text */
        line-height: 1.7;
    }


    /* Your existing styles below are fine */
    .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    .page-navigation {
        padding: 1rem;
    }
}
/* These hidden IDs are likely for content toggling, not directly related to scroll snapping */
#hidden1 { display: none; }
#hidden2 { display: none; }
#hidden3 { display: none; }
#hidden4 { display: none; }
#hidden5 { display: none; }
#hidden6 { display: none; }
#hidden7 { display: none; }
#hidden8 { display: none; }
#hidden9 { display: none; }
#hidden10 { display: none; }
#hidden11 { display: none; }
#hidden12 { display: none; }
#hidden13 { display: none; }
#hidden14 { display: none; }
#hidden15 { display: none; }
#hidden16 { display: none; }
#hidden17 { display: none; }
#hidden18 { display: none; }
#hidden19 { display: none; }
#hidden20 { display: none; }

#copyright { text-align: center; }