* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #d9cab3;
    font-family: Arial, Helvetica, sans-serif;
}

/* top language bar */
.lang {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    text-align: right;
    padding: 10px 16px;
    z-index: 500; /* above .body1 (z-index:0), below .logo (z-index:1000) */
    background-color: #d9cab3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* define a predictable logo height so we can push content below it */
.logo {
    --logo-height: 200px; /* adjust if you change logo sizing */;
    margin-top: 10vh;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 26px;
    width: min(80vw, 640px);
    min-height: var(--logo-height);
    background: #f6e6cf;
    color: #ffcd01;
    border: 1px solid rgba(0,0,0,0.12);
    font-size: clamp(36px, 6.5vw, 80px);
    font-weight: bold;
    text-align: center;
    z-index: 1000;
    border-radius: 100px; /* rectangle with softened corners */
    white-space: normal; /* allow wrapping on small screens */
}


/* keep the "4" red */
.logo .highlight {
    margin: 0 18px;
    color: #bc1823;
    background: transparent;
}

.body1 {
    /* make body1 flow with the document so body2 sits below it */
    position: relative;           /* was fixed */
    width: 100%;
    min-height: 100vh;            /* fill viewport but allow content to grow */
    background-image: url('./bkg1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* optional: keep a parallax-like effect, remove if undesired */
    background-attachment: fixed;
    z-index: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    /* keep header/text below the visually centered logo */
    padding-top: calc(50vh + (var(--logo-height) / 2));
    padding-left: 16px;
    padding-right: 16px;

    overflow: visible; /* allow body2 to follow */
}

.body2 {
    /* ensure body2 starts after body1 and fills the next viewport */
    min-height: 100vh;
    width: 100%;
    background-image: url('./bkg2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.body2 .content {
    display: grid;
    gap: 12px 20px; /* row-gap column-gap */
    grid-template-columns: minmax(0, 1fr) min(45%, 500px);
    width: 100%;
    max-width: 1400px;
    padding: 60px 5%;
    align-items: start;
    grid-auto-rows: auto;
}

/* place header2 and text2 in the left column (stacked) */
.body2 .content .header2 {
    grid-column: 1;
    grid-row: 1;
    place-self: start stretch;
    margin: 0 0 8px 0; /* tighten the bottom margin a bit */
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.body2 .content .text2 {
    grid-column: 1;
    grid-row: 2;
    place-self: start stretch;
    margin: 0;
    width: 100%;
    max-width: 100%;
    text-align: left;
}

/* keep image in the right column and span the two text rows */
.body2 .content .img1 {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    align-self: start;
}


/* responsive: stack on smaller viewports */
@media (max-width: 900px) {
    .body2 .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 5%;
        gap: 24px;
    }
    .body2 .content .header2,
    .body2 .content .text2 {
        width: 100%;
        text-align: center;
    }
    .body2 .content .img1 {
        width: min(80vw, 420px);
        align-self: center;
    }
}

.body3 {
    min-height: 80vh;
    width: 100%;
    background-image: url('./bkg3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;

    /* .body3 now contains .body3-inner; the actual two-column grid is applied to that inner wrapper */
    display: block;
    padding: 6vh 5%;
    box-sizing: border-box;
}

/* new: make the inner wrapper the two-column grid so .left (header+media) is left and .text3 is to the right */
.body3-inner {
    display: grid;
    grid-template-columns: minmax(260px, 40%) 1fr;
    gap: 2.5rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;

    /* fill the visible area (accounting for .body3 padding) so we can align .text3 to the bottom-right */
    min-height: 80vh ;/* 100vh minus .body3's top+bottom padding (6vh + 6vh) */
    grid-auto-rows: 1fr;            /* make the single implicit row stretch to fill min-height */
}

/* container inside left column stacks header above the media row */
.body3 .left {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
    padding-left: 10vw;;
}

/* media row: image and video side-by-side */
.body3 .media {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 0.75rem;
    align-items: start;
}

/* make image and video small squares with height 10vh */
.image3,
.video3 {
    height: 40vh;
    width: 40vh;               /* force square */
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    display: block;
}

/* ensure video fills the square and doesn't show controls on page load */
.video3 {
    background: #000;
}

/* right-side text block */
.text3 {
    /* keep it anchored toward the bottom, but shift it closer to center horizontally */
    align-self: end;
    justify-self: center;        /* center the block in the right grid cell */
    transform: translateX(-8%);  /* nudge slightly left toward the page center; adjust value as needed */
    text-align: left;           /* keep visual alignment on the right side of the block */
    color: #d9cab3;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(16px, 1.8vw, 22px);
    max-width: 360px;            /* narrower width keeps it nearer the center */
    margin: 0;
    padding-bottom: 12vh;
}
/* responsive: stack on smaller viewports, media centered, text3 below */
@media (max-width: 900px) {
    .body3 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .body3 .left { align-items: center; text-align: center; }
    .body3 .media { justify-content: center; }
    .text3 { text-align: center; }
}


.header3 {
    font-size: clamp(80px, 4.5vw, 160px);
    color: #d9cab3;
    margin: 0;
    margin-right: 25vw;
    padding-top: 5vh;
    min-width: 40%;
    max-width: 40%;
    line-height: 1.05;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 700;
    text-align: left;
}

/* layout for body4: header on the top-right, text bottom-left, image bottom-right */
.body4 {
    min-height: 70vh;
    width: 100%;
    background-image: url('./bkg4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;

    /* center inner content area */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh 5%;
    box-sizing: border-box;
}


.body4-inner {
    width: 100%;
    max-width: 1200px;
    display: grid;
    /* increase right column so the image can be slightly bigger */
    grid-template-columns: 1fr minmax(300px, 700px);
    grid-template-rows: auto 1fr;
    gap: 20px 10px;
    align-items: start;
    box-sizing: border-box;
}

/* header on the top-right */
.header4 {
    max-width: 25vw;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    text-align: right;
    margin: 0;
    color: #d9cab3;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 56px);
    line-height: 1.05;
}

/* text on the bottom-left */
.text4 {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: end;
    transform: translateX(8%); /* move closer to center horizontally */
    text-align: left;
    margin: 0;
    color: #d9cab3;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.6vw, 20px);
    max-width: 70%;
}

/* image on the bottom-right — allow a larger max width */
.img4 {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    width: 100%;
    max-width: 800px; /* increased from 420px to 560px */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    object-fit: cover;
}

/* responsive: stack on smaller viewports */
@media (max-width: 900px) {
    .body4-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 16px;
    }
    .header4 { grid-column: 1; grid-row: 1; justify-self: center; text-align: center; }
    .img4    { grid-column: 1; grid-row: 2; justify-self: center; }
    .text4   { grid-column: 1; grid-row: 3; justify-self: center; text-align: center; max-width: 90%; }
}


.body5 {
    min-height: 70vh;
    background-image: url('./bkg5.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;

    display: grid;
    /* narrower left column and constrained right column so whole section sits closer to center */
    grid-template-columns: minmax(180px, 320px) minmax(260px, 560px);
    gap: 24px;
    align-items: end;
    width: 100%;
    max-width: 100%;   /* constrain overall width to pull content toward center */
    margin: 0 auto;      /* center the grid in the viewport */
    padding: 6vh 5%;
    box-sizing: border-box;
    justify-content: center;
}

/* left column: stack images and center them in the column */
.images5 {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center; /* center images horizontally in the left column */
}

.images5 img {
    display: block;
    width: 100%;        /* responsive width */
    max-width: 320px;   /* keep a max width so layout stays consistent */
    height: auto;       /* preserve original aspect ratio */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin: 0;
    object-fit: contain; /* fallback: preserve content without cropping */
}

/* right-side container positioned bottom-right but moved toward the center horizontally */
.right5 {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* push content to bottom of cell */
    align-items: flex-end;     /* keep items right-aligned inside the column */
    justify-self: center;      /* move the entire right column closer to the center */
    padding-bottom: 2vh;
}

/* header5 + text5 stacked and right-aligned inside the right5 container */
.header5 {
    margin: 0 0 8px 40px;
    text-align: left;
    color: #d9cab3;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 3.5vw, 60px);
    max-width: 560px; /* narrower block so it doesn't push to the far right */
}

.text5 {
    margin: 0 0 0 40px;
    text-align: left;
    color: #d9cab3;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.6vw, 20px);
    max-width: 560px;
}

/* responsive: stack everything on small viewports (images first, then the right content) */
@media (max-width: 900px) {
    .body5 {
        grid-template-columns: 1fr;
        padding: 4vh 5%;
        gap: 16px;
        max-width: 100%;
        margin: 0;
    }
    .images5 img {
        max-width: 100%;
        margin-bottom: 12px;
    }
    .right5 {
        grid-column: 1;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 0;
    }
    .header5, .text5 {
        text-align: center;
        max-width: 100%;
    }
}

.body6 {
    min-height: 85vh;
    background-image: url('./bkg6.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;

    width: 100%;
    padding: 6vh 5%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}


.body6-inner {
    width: 100%;
    max-width: 1100px;
    display: grid;
    /* left column for header/text, right column for the video */
    grid-template-columns: 30% 70%;
    gap: 24px;
    align-items: center;
    box-sizing: border-box;
}

/* video styling: scaled-down, preserves aspect ratio and anchored to the right column */
.video6 {
    grid-column: 2;
    width: 100%;
    max-width: 700px;      /* scaled down */
    max-height: 62vh;      /* reduce height relative to viewport */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    object-fit: cover;
    display: block;
    justify-self: end;     /* keep video aligned to the right */
}

/* left column content: header and text on the left */
.header6 {
    grid-column: 1;
    margin: 0 0 12px 0;
    text-align: left;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 3.2vw, 40px);
    color: #d9cab3;
    justify-self: start;
}

.text6 {
    grid-column: 1;
    margin: 0;
    text-align: left;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.6vw, 18px);
    color: #d9cab3;
    max-width: 560px;
    justify-self: start;
}

/* responsive: stack on small screens, video above text and centered */
@media (max-width: 900px) {
    .body6-inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .video6 {
        max-width: 80vw;
        max-height: 40vh;
        margin: 0 auto;
        justify-self: center;
    }
    .header6, .text6 {
        grid-column: 1;
        text-align: center;
    }
}

.body7 {
    min-height: 70vh;
    width: 100%;
    background-image: url('./bkg7.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;

    display: grid;
    grid-template-columns: minmax(220px, 420px) 1fr;
    gap: 0.5rem; /* reduced vertical gap so header7 and text7 sit closer */
    align-items: start;
    padding: 6vh 5%;
    box-sizing: border-box;
    justify-content: center;
}

.image7 {
    grid-column: 1;
    grid-row: 1 / 3; /* span both rows so it stays left beside header+text */
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    justify-self: start;
    margin-top: 15%;
}

.header7 {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 6px 0; /* tighter spacing below header */
    text-align: left;
    font-size: clamp(34px, 4vw, 72px);
    color: #d9cab3;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 700;
    max-width: 100%;
    margin-top: 10%;
}

.text7 {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    margin-top: 4px; /* small positive margin to avoid overlap */
    text-align: left;
    font-size: clamp(14px, 1.6vw, 20px);
    color: #d9cab3;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 600;
    max-width: 85%;
    align-self: start;
}
/* responsive: stack image, header, text on small screens */
@media (max-width: 900px) {
    .body7 {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 1rem;
        padding: 4vh 5%;
    }
    .image7 {
        grid-column: 1;
        grid-row: 1;
        max-width: 80%;
        justify-self: center;
    }
    .header7 {
        grid-column: 1;
        grid-row: 2;
        text-align: center;
    }
    .text7 {
        grid-column: 1;
        grid-row: 3;
        text-align: center;
    }
}

.footer {
    min-height: 80vh;
    width: 100%;
    background-image: url('./footer.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 20px 40px;
    align-items: start;
    padding: 10vh 10%;
    box-sizing: border-box;
}

/* make headerf centered above the two footer columns */
.headerf {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 52%;
    justify-self: center;
    text-align: center;
    margin: 0 0 20px;
    padding-top: 15vh;
    font-size: clamp(40px, 4.5vw, 120px);
    color: #d9cab3;
    line-height: 1.05;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 700;
}

/* bring the two footer texts closer to the center by centering them within each column */
.textfl {
    grid-column: 1;
    grid-row: 2;
    justify-self: center; /* move toward center */
    text-align: left;     /* keep internal left alignment */
    margin: 10px 0 0 0;
    font-size: clamp(20px, 1.5vw, 60px);
    color: #d9cab3;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 400;
    max-width: 220px;     /* narrower width keeps it nearer the center */
}

.textfl a{
    color: #d9cab3;
    text-decoration: none;
}

.textfr {
    grid-column: 2;
    grid-row: 2;
    justify-self: center; /* move toward center */
    text-align: left;    /* keep internal right alignment */
    margin: 10px 0 0 0;
    font-size: clamp(20px, 1.5vw, 60px);
    color: #d9cab3;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 400;
    max-width: 280px;
}


/* stack footer content on small screens and center texts */
@media (max-width: 900px) {
    .footer {
        grid-template-columns: 1fr;
        padding: 40px 5%;
    }
    .headerf { padding-top: 8vh; text-align: center; }
    .textfl, .textfr {
        grid-column: 1;
        justify-self: center;
        text-align: center;
        margin-top: 12px;
    }
}


/* ensure logo is above background */
.logo {
    z-index: 1000;
}

/* header and paragraph — centered blocks that won't overflow */
.header1 {
    font-size: clamp(80px, 4.5vw, 160px);
    color: #d9cab3;
    margin: 0;
    margin-top: 40px;
    margin-right: 25vw;
    min-width: 50%;
    line-height: 1.05;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 700;
    text-align: left;
}

.header2 {
    font-size: clamp(80px, 4.5vw, 160px);
    color: #d9cab3;
    margin: 0;
    margin-right: 25vw;
    padding-top: 5vh;
    min-width: 40%;
    max-width: 40%;
    line-height: 1.05;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 700;
    text-align: left;
}

.text {
    font-size: clamp(14px, 2vw, 20px);
    color: #d9cab3;
    max-width: 80%;
    align-content: left;
    line-height: 1.5;
    margin: 0 auto 30px;
    margin-right: 27vw;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 600;
    text-align: left;
}

.text2 {
    font-size: clamp(14px, 2vw, 20px);
    color: #d9cab3;
    max-width: 80%;
    align-content: left;
    line-height: 1.5;
    margin: 0 auto 30px;
    margin-right: 27vw;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 600;
    text-align: left;
}

.textu {
    font-size: clamp(12px, 2vw, 16px);
    color: #d9cab3;
    max-width: 15%;
    align-content: left;
    line-height: 1.5;
    margin: 10vh auto 30px;
    margin-right: 77.5vw;
    font-family: "Momo Trust Sans", sans-serif;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
}

.img1 {
    width: min(50vw, 500px);
    height: auto;
    margin-bottom: 60px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* optional: if you want a bit more spacing on larger viewports */
@media (min-width: 1200px) {
    .body1 { padding-top: calc(50vh + (var(--logo-height) / 2) + 20px); }
    .header1 { max-width: 35%; }
    .text { max-width: 60%; }
}

@media (max-width: 420px) {
    .logo {
        --logo-height: 120px;
    }
    .header1, .header2, .header3 {
        font-size: 30px;
    }

    /* stack image3 and video3 vertically on small screens */
    .body3 .media {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
        justify-content: center;
    }

    .image3, .video3 {
        height: 30vh;
        width: 30vh;
        border-radius: 8px;
    }

    .body3-inner {
        display: block;
    }

    .text3 {
        transform: translateX(0);  /* remove horizontal nudge */
        justify-self: center;       /* center in viewport */
        text-align: center;        /* center text */
        margin-top: 0px;
    }

    /* make footer columns stack on very small screens */
    .footer {
        grid-template-columns: 1fr;
        padding: 40px 5%;
    }

    /* ensure headerf stays at the top row */
    .headerf {
        font-size: clamp(30px, 4vw, 90px);
        grid-column: 1;
        grid-row: 1;
        padding-top: 16vh;
        text-align: left;
        margin-bottom: 12px;
    }

    /* place textfl and textfr in separate rows so they stack vertically */
    .textfl {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        text-align: center;
        margin-top: 12px;
        max-width: 120px;
    }
    .textfr {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        text-align: center;
        margin-top: 12px;
        max-width: 180px;
    }
}