header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: var(--primary-border-radius);
    background-color: var(--primary-font);
    justify-content: start;
    align-items: center;
    height: var(--header-height);
    padding: var(--header-padding-top) var(--header-padding-x) 0 var(--header-padding-x);
    position: relative;
    z-index: var(--header-z-index);
    background-size: var(--header-background-size);
    background-repeat: no-repeat;
    background-position: center;
    background-image: var(--header-ground-image);

    #logo {
        height: var(--header-logo-height);
        width: var(--header-logo-width);
    }

    h1 {
        font-family: var(--font-barlow-condensed);
        color: var(--color-white);
        font-style: italic;
        transform: rotate(-3deg);
        margin: var(--header-title-margin-top) 0 0 0;
        text-align: center;
        max-width: var(--header-title-max-width);
        font-weight: 800;
        font-size: var(--header-title-font-size);
        line-height: 95%;
    }

    #button-video {
        background-color: var(--color-orange);
        color: var(--color-yellow);
        margin-top: var(--header-button-video-marging-top);
    }

    #know-more-campaign {
        font-family: var(--font-barlow-condensed);
        font-weight: 800;
        font-style: Italic;
        font-size: 14px;
        text-decoration: underline;
        margin-top: var(--header-know-mire-marging-top);
        color: var(--color-white);

    }

    #header-socials {
        position: absolute;
        top: var(--header-socials-top);
        right: var(--header-socials-right);
        display: flex;
        flex-direction: row;
        gap: var(--header-socials-gap);

        img {
            height: var(--header-socials-icon-size);
            width: var(--header-socials-icon-size);
        }
    }

    #video-dialog {
        width: 90%;
        border: none;
        background-color: transparent;
        padding: 0;
        overflow: visible;
        transition: all 0.4s ease-out;

        iframe {
            width: 100%;
            height: 80vh;
            overflow: hidden;
            border-radius: var(--primary-border-radius);
            margin-top: 16px;
        }

        #video-dialog-close-container {
            display: flex;
            justify-content: end;

            #video-dialog-close {
                cursor: pointer;
                width: var(--header-video-dialog-close-size);
            }
        }

        &::backdrop {
            background-color: rgba(0, 0, 0, 0.8);
        }
    }

    #video-dialog[open] {
        transform: translateY(0);
        opacity: 1;

        @starting-style {
            transform: translateY(100px);
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(100px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}