/* =========== RESET =========== */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Josefin Sans', Arial, sans-serif;
    font-weight: 300;
    /* Light */
    color: #18132c;
    background: #fafaff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-title,
.hero-title,
.about-mission-title,
.about-founder-title,
.about-expect-title,
.filmography h2,
.contact-title,
.site-footer-text,
.film-header-title {
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 1.2px;
}

/* === FOOTER BASE === */
.site-footer {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Brand Row */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 15px;
}


/* Social Icons Row */
.footer-social {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.footer-social img {
    width: 28px;   /* adjust icon size */
    height: 28px;
    transition: opacity 0.2s ease;
}

.footer-social img:hover {
    opacity: 0.7;
}

/* Footer Links Row */
.footer-links {
    display: flex;
    gap: 25px;
    font-size: 0.95rem;
}

.footer-links a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-links a:hover {
    opacity: 0.7;
}

.footer-copyright {
    margin-top: 20px;
    font-size: 0.9rem;
    opacity: 0.7;
    text-align: center;
    color: #000;
}

/* === RESPONSIVE MODE === */
@media (max-width: 600px) {

    .footer-links {
        flex-direction: column; /* vertical on small screens */
        gap: 12px;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-brand {
        flex-direction: column;
        gap: 5px;
    }
}

/* =========== NAVBAR =========== */
.navbar {
    /* position: sticky;       /* Changed from fixed to sticky */
    /* top: 0;                /* Always at the top when scrolling */
    position: relative;
    width: 100vw;
    z-index: 999;
    background: rgba(28, 10, 56, 0.30);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7em 2em;
    box-shadow: 0 2px 16px rgba(28, 10, 56, 0.07);
    transition: background 0.3s;
}

.navbar-home {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.navbar:hover {
    background: rgba(28, 10, 56, 0.60);
    /* Slightly less transparent on hover */
}


.navbar-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Needed for the group hover */
    position: relative;
}

.navbar-logo img {
    height: 48px;
}

.navbar-title {
    font-size: 2rem;
    font-weight: bold;
    color: #b085f5;
    letter-spacing: 2px;
    text-decoration: none;
    transition: color 0.2s;
    /* Optional: For precise font */
    font-family: 'Raleway', Arial, sans-serif;
}

/* Only for KAT formatting in navbar */
.navbar-title .kat {
    text-transform: uppercase;
}

/* --- GROUP HOVER: Text turns white when logo (or text) is hovered --- */
/* Use the parent .navbar-logo:hover to style .navbar-title */
.navbar-logo:hover .navbar-title {
    color: #fff;
}

.navbar-title:hover {
    color: #fff;
}

.navbar-links ul {
    display: flex;
    gap: 1.7em;
    list-style: none;
}

.navbar-links a {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 8px;
    transition: background 0.2s;
    background: none;
    /* Or your default background, but keep it consistent */
    margin-bottom: 0;
    /* Ensure no margin at bottom */
    box-shadow: none;
    /* Or set to your liking, but no shadow at bottom edge */

}

.navbar-links a:hover {
    background: #fff;
    color: #5d189d;
}

/* Dropdown menu styling */
.dropdown {
    position: relative;
    z-index: 1000;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    min-width: 50px;
    /* Reduce min-width so it can shrink more */
    max-width: 96vw;
    /* Never exceed the screen width! */
    width: max-content;
    /* Only as wide as the content needs */
    border-radius: 8px;
    left: 0;
    top: 100%;
    z-index: 1000;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    padding: 0;
}


.dropdown-btn {
    /* your existing .navbar-links a styles */
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    padding: 0px 18px;
    border-radius: 8px;
    transition: background 0.2s;
    background: none;
    margin-bottom: 0;
    box-shadow: none;
    cursor: pointer;
}

.dropdown-btn-container:hover .dropdown-content,
.dropdown-content:hover {
    display: block;
}

.dropdown-btn:hover {
    background: #fff;
    color: #5d189d;
}

.dropdown-content a {
    color: #5d189d;
    padding: 7px 20px;
    text-decoration: none;
    display: block;
    border-radius: 2;
}

.dropdown-content a:hover {
    background: #eee;
}

.dropdown:hover .dropdown-content {
    display: block;
}


/* --- Responsive navbar button gap --- */
.navbar-links ul {
    /* Default, for wide screens */
    gap: 1.7em;
}

/* Tablet screens */
@media (max-width: 1100px) {
    .navbar-links ul {
        gap: 1em;
    }
}

/* Smaller tablets and large phones */
@media (max-width: 800px) {
    .navbar-links ul {
        gap: 0.5em;
    }
}

@media (max-width: 600px) {
    .navbar-links ul {
        gap: 5px !important;
        /* never go below 10px */
    }
}

/* Very small screens: never let gap go below 5px */
/*
@media (max-width: 500px) {
    .navbar-links ul {
        gap: 0px;
    }
}
*/



/* =========== HERO BANNER =========== */
.hero-banner {
    position: relative;
    width: 100vw;
    height: 100vh;
    /* Always fill viewport height */
    min-height: 0;
    padding: 0;
    margin: 0;
    background: #000;
    /* fallback if video fails */
    overflow: hidden;
    display: block;
    max-height: 100vh;
}

@media (max-aspect-ratio: 1/1) {
    .hero-banner {
        height: 90vh;
        width: 100vw;
    }
}



.hero-banner iframe,
.hero-banner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    z-index: 0;
}


@media (max-aspect-ratio: 16/9) {
    .hero-banner {
        height: 100vw * 9 / 16;
        /* Not recommended, stick to 100vh! */
        max-height: 100vh;
    }
}

@media (min-aspect-ratio: 16/9) {
    .hero-banner {
        height: 100vh;
    }
}




.hero-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
}

.hero-title {
    color: #fff;
    font-size: 3.5rem;
    letter-spacing: 1.8px;
    margin-bottom: 12px;
    text-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
}

.hero-tagline {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 16px;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Mute Button  */
.mute-btn {
    background: rgba(173, 173, 173, 0.56);
    border: none;
    border-radius: 50%;
    padding: 13px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(30, 20, 50, 0.12);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}

.mute-btn:hover {
    background: rgba(235, 235, 235, 0.9);
    transform: scale(1.12);
}

/* Basic Info Strip */

.teal-strip {
    margin-top: 0;
    /* Remove any extra margin! */
    background: #23b6b9;
    color: #fff;
    padding: 80px 20vw 80px 10vw;
    /* top right bottom left (edit as you like) */
    text-align: center;
    position: relative;
    z-index: 1;
    width: 100vw;
}

.teal-strip-content {
    /*max-width: 850px;             /* Optional: max width for readability */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left-align everything inside */
}

.teal-strip-content p {
    font-size: 1.22rem;
    margin-bottom: 32px;
    /* More space below text before button */
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    /* Ensure text is left-aligned */
}

.learn-more-btn {
    background: #fff;
    color: #23b6b9;
    border: none;
    border-radius: 6px;
    padding: 11px 28px;
    font-size: 1.15rem;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(50, 180, 200, 0.10);
    transition: background 0.2s, color 0.2s, transform 0.14s;
    cursor: pointer;
    text-align: left;
    /* Make button text left-aligned (optional) */
    margin-left: 0;
    /* Make sure button stays left */
}

.learn-more-btn:hover {
    background: #1a979a;
    color: #fff;
    transform: scale(1.06);
}

/* Basic Mission Front Page*/

.mission-collage-section {
    background: #f1f1f1;
    width: 100vw;
    padding: 10% 0 15% 0;
    position: relative;
    overflow: visible;
}


/* ====== MISSION GRID (2x2 Flexible Layout) ====== */
.mission-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0px;
    /* Tweak gap if needed */
    width: 90vw;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 340px;
    position: relative;
    /* Allow overflow for creative positioning */
    overflow: visible;
    background: none;
}

/* Grid cell assignments */

.mission-img-1-mobile {
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    /* Stay in DOM, but invisible and non-interactive */
}

.mission-img-1 {
    grid-column: 1;
    grid-row: 1;
    /* Center horizontally */
    justify-self: center;
    align-self: end;
    width: 85%;
    /* Use a percent of column width for responsive sizing */
    max-width: 100%;
    min-width: 120px;
    margin-bottom: 0px;
    /* Remove extra margin */
    /* Remove position: relative if not doing fancy overlays */
}


.our-mission-desc {
    grid-column: 1;
    grid-row: 2;
    /* Stretch text to fill the whole column width */
    justify-self: stretch;
    align-self: start;
    font-size: 1.21rem;
    color: #25144d;
    font-weight: 500;
    /* Use almost full width of column (leave a little padding for looks) */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 32px;
    padding-left: 0;
    padding-right: 0;
    background: none;
    z-index: 3;
    position: relative;
    text-align: left;
}

.our-mission-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    /* Move to the left edge of its column */
    font-size: 4.5rem;
    /* Make bigger! Try 4.5rem or more */
    font-weight: 900;
    color: #1a979a;
    letter-spacing: 2px;
    z-index: 4;
    text-align: left;
    margin-left: 0;
    margin-bottom: 20px;
    position: relative;
    line-height: 1;
    /* Add a text-shadow for impact if you like: */
    /* text-shadow: 2px 4px 18px rgba(30, 30, 30, 0.09); */
}

.mission-img-2 {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    width: 85%;
    /* or whatever you have */
    max-width: 100%;
    min-width: 120px;
    margin-top: 0px;
    margin-left: 10%;
    /* <-- Adjust this value to control distance from left */
    z-index: 1;
    position: relative;
}

/* ====== ALLOW ITEMS TO OVERLAP GRID CELLS ====== */
.mission-grid-container>* {
    /* Give freedom to be positioned outside grid cells */
    overflow: visible;
    /* You can use transform: translate(), margin, or absolute positioning within .mission-grid-container if needed */
}



/* ====== RESPONSIVE ADJUSTMENTS ====== */
@media (max-width: 900px) {
    .our-mission-title {
        justify-self: center;
        /* Center horizontally in grid cell */
        text-align: center;
        /* Center the text itself */
        margin-left: 0;
        /* Remove any leftover left margin */
        font-size: clamp(1.7rem, 7vw, 2.7rem);
    }
}


/* Only at ≤600px: */
@media (max-width: 600px) {
    .mission-grid-container {
        grid-template-rows: auto 1fr;
        /* already correct */
        height: auto;
        /* Add this */
        min-height: 300px;
        /* Add this (or higher if needed) */
        margin-top: 0;
    }

    .our-mission-title {
        grid-column: 1 / span 2;
        /* Span both columns */
        grid-row: 1;
        justify-self: center;
        align-self: center;
        text-align: center;
        font-size: clamp(1.3rem, 7vw, 2rem);
        margin-bottom: 25px;
    }


    .our-mission-desc {
        grid-column: 1;
        grid-row: 2;

        /* Make it a flex container */
        display: flex;
        flex-direction: column;

        /* Vertically center text */
        justify-content: center;

        /* Left-align horizontally */
        align-items: flex-start;

        /* Provide 5% left margin */
        padding-left: 5%;

        /* Make it fill the full height of its grid cell */
        height: 100%;

        /* Existing settings */
        font-size: 0.95rem;
        width: 100%;
        padding-right: 12px;
        margin: 0;
        text-align: left;
        align-self: stretch;
        justify-self: stretch;
    }


    .mission-img-col {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        height: 100%;
        gap: 0px;
        /* gap no longer needed, handled by space-evenly */
        align-self: start;
        justify-self: stretch;
    }

    /* Hide desktop image, show mobile image */
    .mission-img-1 {
        display: none !important;
    }

    .mission-img-1-mobile,
    .mission-img-2 {
        width: 38vw !important;
        max-width: 98vw !important;
        min-width: 60px !important;
        height: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: block !important;
        margin: 0;
    }

    .mission-img-1-mobile {
        opacity: 1;
        margin-bottom: 13px !important;
    }

    .mission-img-2 {
        margin: 0 !important;
        align-self: center !important;
        /* Ensures it is centered inside the flex column */
        justify-self: unset !important;
        /* Remove any grid alignment */
    }
}






.our-mission-desc p+p {
    margin-top: 1em;
    /* or 20px, or whatever looks good */
}




/* =========================
   PURPLEKAT ABOUT PAGE STYLES
   ========================= */

/* ---- Global Page Background ---- */
.about-page-bg {
    background: #cdc0de;
    min-height: 100vh;
}

/* ===============================
   1. MAIN ABOUT SECTION (TEXT + 3 IMAGES)
   =============================== */

.about-mission-title {
    text-align: center;
    font-size: 3.3rem;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 15px auto 0 auto;
    padding-top: 14px;
    background: none;
}

.about-mission-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #cdc0de;
    padding: 42px 0 56px 0;
    overflow-x: hidden;
}

.about-mission-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: 0;
    position: relative;
    min-height: 420px;
}

.about-mission-text {
    flex-basis: 60%;
    max-width: 700px;
    min-width: 290px;
    padding: 10px 44px 32px 5%;
    position: relative;
    z-index: 2;
    /* Always above gallery images */
    background: none;
    /* ADJUST THIS for your preferred text width! */
}

.about-mission-text p {
    font-size: 1.18rem;
    margin-bottom: 26px;
    color: #1c1330;
    text-align: left;
    font-weight: 500;
    line-height: 1.7;
}

.about-gallery-art {
    flex-basis: 40%;
    min-width: 320px;
    position: relative;
    flex-direction: column;
    /* min-height: 390px;*/
    /*height: 410px;*/
    display: flex;
    align-items: center;
    /* Control area for images */
}

.about-gallery-img {
    width: 30vw;
    /* or px */
    /*max-width: 400px;*/
    min-width: 120px;
    height: auto;
    margin-bottom: -50px;
    /* negative margin for overlap */
    border-radius: 2px;
    box-shadow: 0 8px 40px rgba(32, 17, 3, 0.11), 0 2px 8px rgba(60, 44, 22, 0.09);
    border: 0px solid #fff4e6;
    background: #fff;
    position: relative;
    z-index: 1;
}

/* -- Layering and position: adjust as needed! -- */
.img1 {
    left: 0%;
    top: 0%;
    width: 20vw;
    height: auto;
    /*object-fit: cover;*/
    z-index: 2;
    transform: rotate(0deg);
}

.img2 {
    left: 20%;
    top: 50%;
    width: 15vw;
    height: auto;
    z-index: 1;
    transform: rotate(0deg);
}

.img3 {
    left: 0%;
    top: 100%;
    width: 20vw;
    z-index: 2;
    transform: rotate(0deg);
    margin-top: 30px;
}

/* Overlapping control: ensure text is always above images */
.about-mission-text {
    z-index: 2;
}

.about-gallery-art {
    z-index: 1;
}

/* ==========================
   2. WHAT TO EXPECT SECTION
   ========================== */

.about-expect-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #f1f1f1;
    color: #fff;
    padding: 64px 0 64px 0;
    text-align: center;
}

.about-expect-title {
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-bottom: 48px;
    color: #ff7b00;
}

.about-expect-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
}

.expect-box {
    background: #3bcbce;
    border-radius: 18px;
    padding: 26px 22px 20px 22px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 2px 14px rgba(41, 34, 22, 0.08);
    transition: box-shadow 0.18s;
}

.expect-box:hover {
    box-shadow: 0 6px 28px rgba(53, 44, 23, 0.14);
}

.expect-box-title {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 9px;
    color: #ff7b00;
    text-align: center;
    width: 100%;
    /* Ensure it spans the box */
}

.expect-box p {
    font-size: 1.06rem;
    margin: 0;
    color: #fff;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    width: 100%;
    /* Ensure it spans the box */
}

/* ==========================
   3. FOUNDER SECTION
   ========================== */

.about-founder-section {
    width: 100vw;
    margin-left: 0;
    margin-right: calc(50% - 50vw);
    background: #b5e070c0;
    color: #271b0b;
    padding: 0;
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: stretch;
    overflow-x: hidden;
}

.about-founder-flex {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 410px;
    position: relative;
}

.about-founder-photo {
    /*flex: 0 0 var(--founder-img-width, 340px); /* Control width here! */
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
    /* No margin, flush to left */
    background: #ffe2c2;
    min-width: 180px;
    max-width: 1000px;
    width: 30%;
    height: 100%;
}

.about-founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    min-height: 400px;
    box-shadow: 8px 0 50px rgba(38, 21, 5, 0.09);
    background: #fff4e6;
    display: block;
}

.about-founder-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: var(--founder-content-padding-top, 52px) var(--founder-content-padding-horiz, 52px) 42px var(--founder-content-padding-left, 10vw);
    /* Controls for moving text block! */
    max-width: 820px;
    z-index: 2;
    background: transparent;
}

.about-founder-title {
    font-size: 2.2rem;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: 1.1px;
    text-align: left;
}

.about-founder-content p {
    font-size: 1.13rem;
    margin-bottom: 20px;
    line-height: 1.6;
    color: #321b00;
    text-align: left;
    background: none;
}

/* ==========================
   RESPONSIVE DESIGN
   ========================== */

@media (max-width: 1000px) {
    .about-mission-flex {
        flex-direction: column;
        align-items: center;
    }

    .about-mission-text {
        order: 1;
        width: 100%;
        max-width: 95vw;
        padding: 10px 4vw 18px 4vw;
    }

    .about-gallery-art {
        order: 2;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        justify-items: center;
        align-items: end;
        width: 90vw;
        margin-left: 5vw;
        margin-right: 5vw;
        gap: 12px;
        /* Or whatever you want between images */
        min-width: 0;
        min-height: unset;
        height: auto;
        margin-bottom: 16px;
        background: none;
    }

    .about-gallery-img {
        width: 27vw;
        /* Each image about a third of 90vw, adjust as desired */
        max-width: none;
        /* Remove any max-widths that might override */
        min-width: 0;
        height: auto;
        margin: 0 !important;
        border-radius: 2px;
        box-shadow: 0 2px 10px rgba(32, 17, 3, 0.12);
        transition: none;
        position: relative;
    }

    /* Optional: individual tweaks */
    .about-gallery-img.img1 {
        /* e.g. if you want different widths */
        width: 26vw;
        transform: translateY(-35%) translateX(25%);
    }

    .about-gallery-img.img2 {
        width: 28vw;
        transform: translateY(-60%) translateX(66%) scale(0.8);
    }

    .about-gallery-img.img3 {
        width: 26vw;
        transform: translateY(-275%) translateX(-113%);
    }
}


/*  For the what. to expect section mobile view  */

@media (max-width: 700px) {

    /* <-- Adjust 700px to your breakpoint */
    .about-expect-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        /* Adjust space between boxes */
        padding: 0 4vw;
        /* Reduce side padding for small screens */
    }

    .expect-box {
        width: 100%;
        /* Make each box fill container */
        align-items: center;
        /* Center text and title horizontally */
        padding: 18px 8px;
        /* Tighter padding for mobile */
        min-height: unset;
        /* Allow to shrink as needed */
    }

    .expect-box-title,
    .expect-box p {
        text-align: center;
        width: 100%;
    }

    .about-expect-title {
        padding: 0 4vw;
        /*font-size: 1.4rem;        /* (Optional) Shrink font a bit for mobile */
        box-sizing: border-box;
        /* Ensures padding works as intended */
    }
}

/*  For the founder section mobile view  */

@media (max-width: 800px) {

    /* Or your desired width */
    .about-founder-flex {
        flex-direction: column;
    }

    .about-founder-content {
        order: 1;
        /* Text appears first */
        width: 100%;
        max-width: 100vw;
        padding: 22px 5vw 12px 5vw;
    }

    .about-founder-photo {
        order: 2;
        /* Photo appears below text */
        width: 100%;
        min-width: 100vw;
        max-width: 100vw;
        border-radius: 0;
        background: #ffe2c2;
        /* optional: add margin-top for spacing if you want */
    }

    .about-founder-photo img {
        border-radius: 0;
        min-height: 180px;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}



@media (max-width: 700px) {
    .about-mission-flex {
        flex-direction: column;
        align-items: center;
    }

    .about-gallery-art {
        width: 90vw;
        margin-left: 5vw;
        margin-right: 5vw;
        display: flex !important;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        gap: 10px;
        /* You can increase/decrease gap as desired */
        position: relative;
        min-width: 0;
    }

    .about-gallery-img {
        width: 28vw;
        min-width: 60px;
        max-width: none;
        margin: 0 !important;
        /* Remove transforms that shift image out of place on mobile */
        transform: none !important;
        position: static !important;
        /* If you want stacking/overlap, use margin-left/right only */
    }

    /* Tweak individual images if you want */
    .about-gallery-img.img1 {
        z-index: 2;
    }

    .about-gallery-img.img2 {
        z-index: 1;
    }

    .about-gallery-img.img3 {
        z-index: 2;
    }
}



/* =========== FILMOGRAPHY =========== */

.filmography {
    background: #b0d5fa9c;
    /* Replace with your chosen color */
    padding-bottom: 60px;
    /* Padding to prevent grid from touching footer */
    min-height: 100vh;
    /* Optional: full viewport height */
    /* Add border-radius or box-shadow if you want a card look */

    padding-left: 5px;
    padding-right: 5px;
}

.filmography h2 {
    font-size: clamp(1.3rem, 6vw, 3rem);
    /* Change size (try 2.2rem, 2.5rem, 3rem etc.) */
    color: #2a62d9;
    /* Change color (any hex, rgb, or color name) */
    text-align: center;
    /* center, left, or right */
    font-weight: 900;
    /* 700=bold, 900=extra bold, 400=normal */
    margin-bottom: 36px;
    /* Space below heading */
    padding-top: 36px;
    letter-spacing: 1.8px;
    /* Optional: more space between letters */
    /* Add any other style you want, e.g. text-shadow */
}

/* ====== FILM FILTER BAR ====== */
.film-filter-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(5px, 2vw, 28px);
    /* Always a small gap, even on tiny screens */
    margin-bottom: 10%;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 0 clamp(2px, 3vw, 20px);
    /* Always a sliver of side space */
    overflow-x: auto;
    /* If it absolutely can't fit, allow horizontal scroll as a last resort */
    scrollbar-width: none;
    /* Hide scrollbar on Firefox */
}

.filter-btn {
    background: #c4d6ff;
    color: #2a62d9;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    /*           top/bottom,      left/right   */
    padding: clamp(5px, 1.5vw, 14px) clamp(7px, 2vw, 32px);
    font-size: clamp(0.68em, 3vw, 1.13em);
    line-height: 1.1;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, font-size 0.18s, padding 0.18s;
    box-shadow: 0 2px 10px rgba(100, 60, 160, 0.09);
    outline: none;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100vw;
    white-space: nowrap;
    text-align: center;
}



.filter-btn {
    font-family: 'Raleway', Arial, sans-serif;
    text-align: center;
    /* Ensure text stays centered */
}


.filter-btn.active,
.filter-btn:hover {
    background: #2a62d9;
    color: #fff;
}

/* ====== FILM GRID (3 columns, responsive) ====== */
.film-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 100px;
    column-gap: 20px;
    margin: 0 auto 60px auto;
    max-width: 1100px;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    justify-content: center;
}


/* ====== FILM CARD ====== */


.film-card {
    opacity: 1;
    transition: opacity 0.4s;
}

.film-card.fade-out {
    opacity: 0;
    pointer-events: none;
}

.film-card.show {
    opacity: 1;
}


.film-card {
    width: 100%;
    max-width: 315px;
    /* Never bigger than desktop */
    min-width: 120px;
    /* Never smaller than mobile min */
    aspect-ratio: 7 / 8;
    /* Keep the ratio perfect */
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    position: relative;

}

.film-thumb {
    width: 100%;
    aspect-ratio: 7 / 8;
    /* Force the same ratio as card */
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #ddd;
}

.film-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ========== FILM TILE EXPANSION ========== */
.film-card .film-expand {
    display: none;
    position: absolute;
    top: -50px;
    left: -10px;
    /* make it -ve half of whatever pixels is added to 100% below to keep it centered*/
    width: calc(100% + 20px);
    height: calc(100% + 100px);
    background: #fff;
    border-radius: 0px;
    box-shadow: 0 7px 32px rgba(40, 20, 90, 0.17);
    z-index: 20;
    overflow: hidden;
    flex-direction: column;
    animation: fadeIn 0.23s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scaleY(0.9);
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

.film-card.expanded .film-expand {
    display: flex;
}

.film-card.expanded {
    z-index: 99;
}

/* Expanded title & meta */
.film-expand .expand-title {
    position: absolute;
    top: 28px;
    left: 36px;
    right: 36px;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: column;
    /* Stack children vertically */
    align-items: flex-start;
    /* Left align, use center if you prefer */
    gap: 6px;
}

.expand-type {
    font-size: 1.1rem;
    font-weight: 600;
    background: rgba(232, 222, 247, 0.6);
    /* Slightly see-through, looks good over image */
    color: #5d189d;
    border-radius: 8px;
    padding: 6px 5px;
    margin-left: 0;
    /* No left margin when stacked */
    margin-top: 2px;
    /* Add a little space above if desired */
}

.film-expand .expand-description {
    position: absolute;
    left: 36px;
    right: 36px;
    bottom: 28px;
    font-size: 1.17rem;
    color: #fff;
    background: rgba(32, 17, 54, 0.58);
    /* dark overlay for readability */
    padding: 18px 24px;
    border-radius: 9px;
    z-index: 2;
    font-weight: 500;
    line-height: 1.5;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
    text-align: center;
}

.expand-name {
    font-size: 2rem;
    font-weight: bold;
}

/* Only show description at the bottom */
.film-expand {
    display: none;
    position: relative;
    top: 0;
    left: -50px;
    width: calc(100% + 100px);
    height: 100%;
    background: #000;
    /* For text contrast; tweak as desired */
    border-radius: 17px;
    box-shadow: 0 7px 32px rgba(40, 20, 90, 0.17);
    z-index: 20;
    overflow: hidden;
    flex-direction: column;
    animation: fadeIn 0.23s;
}

.film-expand .expand-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fills, does not warp, can crop */
    border-radius: 0px;
    z-index: 1;
}


/* Clickable overlay for whole tile */
.film-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
}

@media (max-width: 1000px) {
    .film-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }
}

@media (max-width: 700px) {
    .film-grid {
        grid-template-columns: 1fr;
        max-width: 430px;
        /* Just above 315 + gap */
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .film-card {
        max-width: 98vw;
        /* If parent is smaller, shrink further */
    }
}

@media (max-width: 480px) {
    .film-grid {
        display: grid;
        grid-template-columns: 1fr;
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
        row-gap: 36px;
        column-gap: 0;
        width: 100%;
        /* changed from 100vw */
        /* Remove max-width here! */
        margin: 0 auto;
        /* not strictly needed but harmless */
    }

    .film-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
    }
}



@media (max-width: 1000px) {
    .film-grid {
        row-gap: 60px;
        column-gap: 15px;
    }
}

@media (max-width: 700px) {
    .film-grid {
        row-gap: 60px;
        column-gap: 9px;
    }
}



.film-expand .expand-bottom {
    position: absolute;
    left: 36px;
    right: 36px;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 3;
    /* Make sure it's higher than the background image */
}

.film-expand .expand-type {
    font-size: 1.1rem;
    font-weight: 600;
    background: rgba(232, 222, 247, 0.575);
    color: #5d189d;
    border-radius: 8px;
    padding: 6px 22px;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    box-shadow: 0 1px 6px rgba(32, 17, 54, 0.09);
}

.film-expand .expand-description {
    background: rgba(32, 17, 54, 0.65);
    padding: 18px 24px;
    border-radius: 9px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.17rem;
    line-height: 1.5;
    /* Remove position: absolute, let .expand-bottom control it! */
    position: static;
}

/****/
/* ===========================================
   PARAMETRIC DIAGONAL RIBBON (COLLABORATION)
   =========================================== */

.film-card {
    --ribbon-size: 30%;
    /* % of card width where the ribbon crosses the edges */
    --ribbon-color: #ff0000b6;
    --ribbon-padding: 5px;
    /* padding around text */
    --ribbon-font-size: 0.28rem;
}

.film-card .collab-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(var(--ribbon-size) * 2);
    height: calc(var(--ribbon-size) * 2);
    overflow: hidden;
    z-index: 40;
    pointer-events: none;
}

/* Actual diagonal strip */
.film-card .collab-ribbon span {
    position: absolute;
    display: inline-block;
    padding: var(--ribbon-padding);
    background: var(--ribbon-color);
    color: white;
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 700;
    font-size: var(--ribbon-font-size);
    letter-spacing: 1px;
    text-align: center;

    width: calc(var(--ribbon-size) * 3);
    /* Long enough to cross the whole corner */
    transform: rotate(45deg);
    top: calc(var(--ribbon-size) * 0.2);
    right: calc(var(--ribbon-size) * -1.1);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Expanded version overrides */
.film-expand .expanded-ribbon {
    --ribbon-size: 30%;
    --ribbon-font-size: 0.28rem;
    --ribbon-padding: 5px;
}

.film-expand .expanded-ribbon {
    position: absolute !important;
    top: 0;
    right: 0;
    pointer-events: none;
    z-index: 50;
}

.film-card.expanded .collab-ribbon:not(.expanded-ribbon) {
    display: none !important;
}

.film-card {
    --ribbon-size: 30%;
    --collab-ribbon-color: #ff0000b6;      /* Red for collab */
    --comingsoon-ribbon-color: #23b6b9e0;  /* Teal for coming soon */
}

/* Coming Soon Ribbon (Teal) */
.film-card .comingsoon-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--ribbon-size) * 2);
    height: calc(var(--ribbon-size) * 2);
    overflow: hidden;
    z-index: 41; /* Higher than collab ribbon */
    pointer-events: none;
}

.film-card .comingsoon-ribbon span {
    position: absolute;
    display: inline-block;
    padding: var(--ribbon-padding, 5px);
    background: var(--comingsoon-ribbon-color, #23b6b9e0);
    color: white;
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 700;
    font-size: var(--ribbon-font-size, 0.28rem);
    letter-spacing: 1px;
    text-align: center;

    width: calc(var(--ribbon-size) * 3);
    transform: rotate(-45deg); /* Opposite direction from collab */
    top: calc(var(--ribbon-size) * 0.2);
    left: calc(var(--ribbon-size) * -1.1);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.film-expand .expanded-ribbon {
    --ribbon-size: 30%;
    --ribbon-font-size: 0.28rem;
    --ribbon-padding: 5px;
}

.film-expand .expanded-ribbon.comingsoon-ribbon {
    position: absolute !important;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 51;
}

/* --- Default ribbon (regular, outside of expansion) --- */
.film-card .collab-ribbon,
.film-card .comingsoon-ribbon {
    z-index: 40;
    pointer-events: none;
}

/* --- Expanded ribbon appears above --- */
.film-card .collab-ribbon.expanded-ribbon,
.film-card .comingsoon-ribbon.expanded-ribbon {
    z-index: 50; /* Higher than base */
}

/* --- When card is expanded, hide base (non-expanded) ribbon --- */
.film-card.expanded .collab-ribbon:not(.expanded-ribbon),
.film-card.expanded .comingsoon-ribbon:not(.expanded-ribbon) {
    display: none !important;
}




/* ==========================================================
   RESPONSIVE SCALING FOR EXPANDED TILES (below 440px)
   ========================================================== */

@media (max-width: 440px) {

    .film-card.expanded .film-expand {
        transform: scale(0.88);
        /* shrink entire card content */
        transform-origin: top center;
        /* anchor at top so it feels natural */
    }

    /* Optional: tighten spacing around the expanded panel */
    .film-card.expanded {
        padding: 0 !important;
    }
}




/* ======= CONTACT PAGE ======= */

.contact-page-bg {
    background:
        url('assets/paper_plane_drawing.png') no-repeat 7vw 12vh,
        url('assets/paper_plane_drawing_2.png') no-repeat right 10vw top 40vh,
        #e7faea;
    background-size: 320px auto, 320px auto;

}


.contact-page-main {
    max-width: 520px;
    margin: 0 auto;
    padding: 86px 18px 70px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    /* Above absolutely positioned elements with z-index: 0 */

}

.contact-title {
    font-size: 2.6rem;
    color: #18a366;
    font-weight: 800;
    margin-bottom: 36px;
    letter-spacing: 2.3px;
    text-align: center;
}

/* Form layout: label left, input right */
.contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
}

.contact-form label {
    font-size: 1.08rem;
    font-weight: 600;
    color: #217156;
    min-width: 105px;
    text-align: left;
    flex: 1;
    margin-right: 16px;
}

.contact-form input,
.contact-form textarea {
    margin-left: 30px;
    /* guarantees at least 5px gap */
}



.contact-form input,
.contact-form textarea {
    flex: 3;
    min-width: 210px;
    max-width: 295px;
    width: 100%;
    padding: 13px 14px;
    border: 1.6px solid #90cfc2;
    border-radius: 9px;
    font-size: 1.11rem;
    outline: none;
    transition: border 0.15s;
    background: #fff;
    font-family: inherit;
    text-align: left;
}

.contact-form textarea {
    min-height: 95px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border: 1.6px solid #18a366;
}

.contact-form button {
    background: #18a366;
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 13px 0;
    font-size: 1.12rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 6px;
    width: 100%;
}

.contact-form button:hover {
    background: #167c4e;
}

.message-sent {
    margin-top: 13px;
    font-size: 1.21rem;
    color: #25ac61;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fadeInPop 0.38s;
}

@keyframes fadeInPop {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.or-divider {
    font-size: 2.2rem;
    font-weight: 800;
    color: #18a366;
    margin: 44px 0 7px 0;
    letter-spacing: 1.6px;
    text-align: center;
}

.contact-direct-email {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
}

.contact-direct-label {
    font-size: 1.09rem;
    color: #217156;
    font-weight: 500;
    margin-bottom: 3px;
}

.contact-email-link {
    font-size: 1.19rem;
    color: #15735c;
    font-weight: 700;
    text-decoration: underline;
    margin-top: 2px;
    letter-spacing: 1px;
    transition: color 0.14s;
    cursor: pointer;
    margin-bottom: 38px;
    /* INCREASED space below email before footer */
}

.contact-email-link:hover {
    color: #11be88;
}

@media (max-width: 600px) {
    .contact-page-main {
        padding-top: 34px;
    }

    .contact-title {
        font-size: 2rem;
    }

    .or-divider {
        font-size: 1.3rem;
    }

    .contact-email-link {
        font-size: 0.95rem;
    }

    .contact-form-row label {
        min-width: 70px;
        margin-right: 8px;
    }
}

.paper-plane-bg,
.paper-plane-bg-2 {
    position: fixed;
    z-index: 0 !important;
    pointer-events: none;
    user-select: none;
    opacity: 0.14;
    transition: all 0.24s;
}

.paper-plane-bg {
    left: 7vw;
    top: 12vh;
    width: 320px;
    height: auto;
    transform: rotate(-19deg);
}

.paper-plane-bg-2 {
    right: 10vw;
    left: auto;
    top: 30vh;
    width: 320px;
    height: auto;
    transform: rotate(-19deg);
}





/* =========== FOOTER =========== */

.site-footer {
    background: #dfdfdf;
    color: #7d42ce;
    text-align: center;
    padding: 50px 0 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100vw;
}

.site-footer-logo {
    height: 60px;
    margin-right: 22px;
}

.site-footer-text {
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: #7d42ce;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.language-dropdown {
    min-width: 0;
    width: auto;
}

.language-dropdown .dropdown-content a {
    font-size: 1.08em;
    padding: 9px 20px;
    color: #5d189d;
}

.language-dropdown .dropdown-content a:hover {
    background: #eee;
    color: #6525a6;
}

#current-lang {
    font-weight: bold;
    margin-left: 2px;
    letter-spacing: 1px;
}


/* =========== RESPONSIVE =========== */
@media (max-width: 900px) {
    .film-grid {
        flex-direction: column;
        align-items: center;
    }

    .navbar {
        flex-direction: column;
        padding: 0.7em 1em;
    }

    .navbar-links {
        margin-top: 22px;
        width: 100%;
        display: flex;
        justify-content: center;
    }


    .mission,
    .contact {
        padding: 22px 8px;
    }
}

.site-footer-text {
    font-size: clamp(1.1rem, 5vw, 3rem);
}


/* Fix film tile expansion on mobile (<500px) */
@media (max-width: 500px) {
    .film-card {
        margin: 0 !important;
        padding: 0 !important;
        position: relative;
        max-width: 98vw;
        min-width: 0;
        box-sizing: border-box;
        z-index: 1;
    }

    .film-card .film-expand {
        position: absolute;
        left: calc(50% - 45vw);
        /* 60vw = 120vw/2 */
        top: calc(50% - 62vw);
        /* 70vw = 140vw/2 */
        width: 90vw;
        /* larger than card & viewport for popup feel */
        height: 124vw;
        /* increase as needed */
        max-width: 140vw;
        max-height: 180vw;
        /*min-width: 120%;
        min-height: 120%; */
        transform: none !important;
        z-index: 100;
        border-radius: 9px;
        box-shadow: 0 7px 32px rgba(40, 20, 90, 0.22);
        overflow: visible;
        /* Ensure overlay is large and centered */
    }

    .film-grid {
        overflow: visible !important;
        padding-bottom: 120px;
        /* Room for overlay */
        padding-top: 60px;
        /* Room at top */
    }

    html,
    body {
        overflow-x: hidden;
    }
}

/* --- Responsive Navbar Font Size and Padding --- */
.navbar-links a,
.dropdown-btn {
    font-size: clamp(0.8rem, 1.7vw, 1.13rem);
    /* 1.13rem = default, shrinks to 0.85rem on small screens */
    padding: 10px clamp(4px, 1.7vw, 18px);
    /* padding left/right shrinks with screen size */
}

/* Make dropdown menu items also scale */
.dropdown-content a {
    font-size: clamp(0.78rem, 1.65vw, 1.08rem);
    padding: 8px clamp(4px, 1.7vw, 18px);
}

@media (max-width: 900px) {
    .navbar {
        flex-direction: column;
        align-items: center;
        /* <--- This centers all child blocks horizontally */
        justify-content: center;
        /* <--- Ensures vertical alignment if you ever need it */
        padding: 0.7em 0;
        /* <--- Remove side padding for more space */
    }

    .navbar-logo {
        justify-content: center;
        /* <--- Center logo/title block itself */
        width: 100%;
        /* <--- Optionally, ensure full width for nice stacking */
        margin-bottom: 7px;
        /* <--- Add a bit of space under logo if you want */
    }

    .navbar-links {
        width: auto;
        /* <--- Prevent forced full width; allow content to shrink naturally */
        display: flex;
        justify-content: center;
        /* <--- Center the links horizontally */
        align-items: center;
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .dropdown-content {
        min-width: 0;
        /*max-width: 94vw;*/
        width: max-content;
        font-size: 0.95rem;
    }

    .dropdown-content a {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 0.93rem;
        min-width: 0;
        white-space: nowrap;
    }

    .language-dropdown {
        min-width: 0;
        width: auto;
    }
}



/*.   cookie banner stuff.  */

/* COOKIE BANNER */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #11111182;
    color: white;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9999;
   
    text-align: center;
}

.cookie-banner.hidden {
    display: none;
}

.cookie-banner-text {
    max-width: 800px;
    margin-bottom: 12px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.cookie-banner-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.cookie-btn {
    padding: 8px 16px;
    border: none !important;
    box-shadow: none !important;
    
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
}

.cookie-btn.accept {
    background: #3cb371;
    color: white;
}

.cookie-btn.accept:hover {
    opacity: 0.85;
}

.cookie-btn.reject {
    background: #b33c3c;
    color: white;
}

.cookie-btn.reject:hover {
    opacity: 0.85;
}

.cookie-btn.more {
    background: #555;
    color: white;
    border: none;
}

.cookie-btn.more:hover {
    opacity: 0.85;
}