:root {
    --beige: #fee4c2;
    --light-orange: #f6a72c;
    --med-orange: #f67741;
    --dark-orange: #f15734;
    --dark-teal: #0e5f6e;
    --dark-blue: #103144;
    --white: #fff;
}

body {
    margin:0;
    padding:0;
}

.hero {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
}

.container {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}

.hero .bg,
.hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    object-fit: cover;
    max-width:100%;
}

.hero .bg {
    z-index: 2;
    opacity:1;
}

.hero img.fade-out {
    opacity:0;
    transition:opacity .3s ease-out;
}

.hero-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    gap: 30px;

    img {
        width: 75%;
        max-width:650px;
        margin:0 auto;
    }

    .cta {
        color: #fff;
        font-family: 'Caprasimo', serif;
        font-size: 40px;
        text-decoration: none;

    }

    .cta span {
        background:linear-gradient(180deg, var(--light-orange), var(--dark-orange));
        background-clip: text;
        -webkit-background-clip: text;
        position: relative;

        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    .cta span:before {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        z-index: -1;

        color: transparent;
        -webkit-text-stroke: 6px var(--beige);
    }

    .cta span:after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        z-index: -2;

        color: transparent;
        -webkit-text-stroke: 16px var(--dark-blue);
    }
}

header {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0));
    z-index: 100;
}

header .container {
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: flex-end;
    gap: 30px;
    padding: 15px;
    position: relative;
}

header .container:before {
    content: '';
    background: #fee5c5;
    position: absolute;
    top: 0;
    left:0;
    height:3px;
    width: 100%;
}

.social-icon svg {
    width: 40px;
    height: 40px;
}

.social-icon-svg {
    fill: #fff;
}

.social-icon a:hover .social-icon-svg {
    fill: var(--med-orange);
}

/**
 * 1. Make the dialog container, and its child overlay spread across
 *    the entire window.
 */
.dialog-container,
.dialog-overlay {
    position: fixed;
    /* 1 */
    top: 0;
    /* 1 */
    right: 0;
    /* 1 */
    bottom: 0;
    /* 1 */
    left: 0;
    /* 1 */
    overflow-y: scroll;
}

/**
 * 1. Make sure the dialog container and all its descendants sits on
 *    top of the rest of the page.
 * 2. Make the dialog container a flex container to easily center the
 *    dialog.
 */
.dialog-container {
    z-index: 10000;
    /* 1 */
    display: flex;
    /* 2 */
}

/**
 * 1. Make sure the dialog container and all its descendants are not
 *    visible and not focusable when it is hidden.
 */
.dialog-container[aria-hidden='true'] {
    display: none;
    /* 1 */
}

/**
 * 1. Make the overlay look like an overlay.
 */
.dialog-overlay {
    /*background-color: rgba(0, 0, 0, 0.8);*/
    background-color: rgba(14, 95, 110, 0.95);
    /* 1 */
}

/**
 * 1. Vertically and horizontally center the dialog in the page.
 * 2. Make sure the dialog sits on top of the overlay.
 * 3. Make sure the dialog has an opaque background.
 */
.dialog-content {
    margin: auto;
    /* 1 */
    z-index: 10000;
    /* 2 */
    position: relative;
    /* 2 */
    background-color: white;
    /* 3 */
    animation: modal-fade-in 400ms 200ms both, modal-slide-up 400ms 200ms both;
    width: 90%;
    max-width: 800px;
}

.modal-open {
    overflow: hidden;
}

.modal-content {
    display: block;
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
}

.modal-video-container {
    position: relative;
    padding-bottom: 56.25%;
}

.modal-video-container iframe {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: block;
    border: none;
}

.modal-close-btn {
    background-color: #fff;
    color: #0d3344;
    position: absolute;
    top:-45px;
    right: 0;
    border: none;
    font-size: 24px;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    padding: 0;
}

.modal-close-btn svg {
    position: relative;
    top: 3px;
}

.modal-close-btn:hover {
    cursor: pointer;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 50%);
}

.hidden-modal-content {
    display: none;
    visibility: hidden;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}