.hero {
    position: relative;
    overflow: hidden;
}

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

.hero .container {
    position: relative;
    z-index: 10;
}

/* Overlay for light/dark mode */
.hero .bg-black {
    background-color: rgba(0, 0, 0, 0.3);
    /* Default to light mode opacity */
}

@media (prefers-color-scheme: dark) {
    .hero .bg-black {
        background-color: rgba(0, 0, 0, 0.4);
        /* Dark mode with more opacity */
    }
}


.titillium-web-extralight {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.titillium-web-light {
    font-family: "Titillium Web", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.titillium-web-regular {
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.titillium-web-semibold {
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.titillium-web-bold {
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.titillium-web-black {
    font-family: "Titillium Web", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.titillium-web-extralight-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.titillium-web-light-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.titillium-web-regular-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.titillium-web-semibold-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.titillium-web-bold-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-style: italic;
}



.roboto {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.archivo {
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;

}

.dm-serif-text-regular {
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: normal;

}

.dm-serif-text-regular-italic {
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: italic;
}