/*Load local fonts*/
/* Gill Sans */
@font-face {
    font-family : "Gill Sans";
    src         : url("../assets/fonts/Gill Sans.otf");
    font-weight : 400;
    font-style  : normal;
}

@font-face {
    font-family : "Gill Sans";
    src         : url("../assets/fonts/Gill Sans Italic.otf");
    font-weight : 400;
    font-style  : italic;
}

@font-face {
    font-family : "Gill Sans";
    src         : url("../assets/fonts/Gill Sans Bold.otf");
    font-weight : 700;
    font-style  : normal;
}

@font-face {
    font-family : "Gill Sans";
    src         : url("../assets/fonts/Gill Sans Bold Italic.otf");
    font-weight : 700;
    font-style  : italic;
}

@font-face {
    font-family : "Gill Sans";
    src         : url("../assets/fonts/Gill Sans Light.otf");
    font-weight : 300;
    font-style  : normal;
}

@font-face {
    font-family : "Gill Sans";
    src         : url("../assets/fonts/Gill Sans Light Italic.otf");
    font-weight : 300;
    font-style  : italic;
}

@font-face {
    font-family : "Gill Sans";
    src         : url("../assets/fonts/Gill Sans Medium.otf");
    font-weight : 500;
    font-style  : normal;
}

@font-face {
    font-family : "Gill Sans";
    src         : url("../assets/fonts/Gill Sans Medium Italic.otf");
    font-weight : 500;
    font-style  : italic;
}

/* Inter */
@font-face {
    font-family : "Inter";
    src         : url("../assets/fonts/Inter_18pt-Light.ttf");
    font-weight : 300;
    font-style  : normal;
}

@font-face {
    font-family : "Inter";
    src         : url("../assets/fonts/Inter_18pt-LightItalic.ttf");
    font-weight : 300;
    font-style  : italic;
}

@font-face {
    font-family : "Inter";
    src         : url("../assets/fonts/Inter_18pt-Regular.ttf");
    font-weight : 400;
    font-style  : normal;
}

@font-face {
    font-family : "Inter";
    src         : url("../assets/fonts/Inter_18pt-Italic.ttf");
    font-weight : 400;
    font-style  : italic;
}

@font-face {
    font-family : "Inter";
    src         : url("../assets/fonts/Inter_18pt-SemiBold.ttf");
    font-weight : 600;
    font-style  : normal;
}

@font-face {
    font-family : "Inter";
    src         : url("../assets/fonts/Inter_18pt-SemiBoldItalic.ttf");
    font-weight : 600;
    font-style  : italic;
}

@font-face {
    font-family : "Inter";
    src         : url("../assets/fonts/Inter_18pt-Bold.ttf");
    font-weight : 700;
    font-style  : normal;
}

@font-face {
    font-family : "Inter";
    src         : url("../assets/fonts/Inter_18pt-BoldItalic.ttf");
    font-weight : 700;
    font-style  : italic;
}

* {
    box-sizing : border-box;
}

body {
    margin      : 0;
    font-family : Inter, Arial, sans-serif;
}

section {
    width : 100%;
}

.flex-center {
    display         : flex;
    text-align      : center;
    align-items     : center;
    justify-content : center;
}

/* Landing Page */
.landing-page {
    /* Header */

    .header {
        width : 100%;
        background-color: black;

        .logo {
            max-height       : 500px;

            img {
                margin : 0 30px;
            }
        }

        .header-img {
            position   : relative;
            overflow   : hidden;
            background : black;

            .video-desktop {
                display    : block;
                width      : 100%;
                object-fit : cover;
            }

            .image-mobile {
                display : none;
                width   : 100%;
                height  : auto;
            }
        }
    }

    h2 {
        font-family    : "Gill Sans", Arial, sans-serif;
        font-size      : 40px;
        font-weight    : 600;
        margin         : 10px 0;
        color          : #fff;
        text-transform : uppercase;
    }

    .h2-subtitle {
        font-family    : "Gill Sans", Arial, sans-serif;
        font-size      : 30px;
        font-weight    : 400;
        margin         : 10px 0;
        color          : #be8839;
        text-transform : uppercase;
    }

    .big-title {
        font-family    : "Gill Sans", Arial, sans-serif;
        font-size      : 60px;
        font-weight    : 300;
        margin         : 10px 0;
        color          : white;
        text-transform : uppercase;


        span {
            font-weight : 500;
            font-size   : 65px;
        }
    }

    .italic-text {
        font-size  : 20px;
        font-style : italic;
    }

    .text-highlight {
        font-size   : 22px;
        font-weight : bold;
        color       : #be8839;
        margin      : 0;
    }

    .text-light {
        font-size   : 20px;
        font-weight : 300;
        color       : #fff;
        line-height : 1.5;
    }

    .text-top {
        font-weight : bold;

        span {
            font-style : italic;
        }
    }

    ul {
        padding-left : 20px;

        li {
            font-size   : 20px;
            font-weight : 300;
            color       : #fff;
            line-height : 1.5;
            padding     : 2px 0;

            b {
                font-weight : 600;
            }
        }
    }

    /* Buttons */

    .button-left {
        text-align : left;
    }

    .button-block {
        display         : inline-block;
        padding         : 12px 40px;
        font-family     : Inter, Arial, sans-serif;
        font-weight     : 700;
        font-size       : 16px;
        text-decoration : none;
        text-transform  : uppercase;
        border          : 1px solid;
        transition      : all 0.3s;
    }

    .button-orange {
        background-color : #be8839;
        color            : #fff;
        border-color     : #be8839;

        &:hover {
            background-color : #fff;
            color            : #be8839;
        }
    }

    /* Hero Section */

    .intro-section {
        flex-direction   : column;
        padding          : 120px 20px;
        background-color : black;
        color            : #be8839;
        text-align       : center;
    }

    .intro-title {
        font-family    : "Gill Sans", Arial, sans-serif;
        font-size      : 75px;
        font-weight    : 300;
        margin         : 10px 0;
        color          : #be8839;
        text-transform : uppercase;

        span {
            font-weight : 500;
            font-size   : 80px;
        }
    }

    .intro-subtitle {
        font-family    : "Gill Sans", Arial, sans-serif;
        font-size      : 30px;
        line-height    : 1.33;
        font-weight    : 300;
        margin         : 30px 0 15px;
        color          : #fff;
        text-transform : uppercase;
    }

    .intro-text {
        font-size   : 25px;
        color       : #fff;
        font-weight : 300;

        strong {
            font-weight : bold;
        }
    }

    /* Concert Sections */

    .concert-section {
        display          : flex;
        flex-direction   : column;
        align-items      : center;
        padding          : 50px 60px;
        color            : #fff;
        background-color : black;
    }

    .concert-hancock {
        padding : 50px 0 50px 60px;

        .concert-info-intro {
            padding-right : 50px;
        }

        .concert-more-info {
            padding : 30px 50px 0 0;

            p {
                text-align : center;
            }
        }
    }

    .concert-info-intro {
        display         : flex;
        flex-direction  : column;
        justify-content : center;
        align-items     : center;
        text-align      : center;
        padding-bottom  : 50px;
    }

    .concert-content {
        display          : flex;
        flex-direction   : row;
        width            : 100%;
        gap              : 50px;
        background-color : black;

        .col {
            width : 50%;
        }

        .concert-details {
            display        : flex;
            flex-direction : column;
            padding        : 15px 0 50px 0;

            .concert-detail-intro {
                max-width : 650px;
            }

            .text-2 {
                margin-top : 5px;
            }

            .button-left {
                padding-top : 50px;
            }

            .italic-text {
                margin-bottom : 0;
            }
        }
    }

    .second-content {
        padding : 60px 0;

        .col {
            padding : 0 50px;
        }
    }

    .concert-image {
        flex : 1;

        img {
            width      : 100%;
            height     : auto;
            display    : block;
            max-height : 600px;
            object-fit : cover;
        }
    }

    .cast-list {
        list-style : none;
        padding    : 0;
        margin     : 20px 0 0 0;
    }

    .text-top {
        margin-top : 0;
    }

    /* Promo Section */

    .promo-section {
        flex-direction   : column;
        padding          : 60px 20px;
        background-color : #be8839;
        color            : black;
        text-align       : center;

        .promo-content {
            display        : flex;
            flex-direction : column;
            align-items    : center;

            .separator {
                background-color : white;
            }

            .promo-title, .promo-text {
                color : white;
            }

            .promo-title {
                font-size : 100px;
                margin    : 0;
            }

            .promo-text {
                font-size : 45px;
                margin    : 0;
            }

            .text-light {
                color : black;
            }
        }
    }


    /* Info Section */

    .info-section {
        background-color    : black;
        text-align          : center;
        height              : 650px;
        background-image    : url('../assets/paillette-2@3x.png');
        background-position : bottom;
        background-repeat   : no-repeat;
        background-color    : black;

        .info-content {
            display        : flex;
            flex-direction : column;
            align-items    : center;
            padding        : 60px 20px;

            .info-text {
                font-size   : 20px;
                line-height : 1.6;
                font-weight : 600;
                color       : #be8839;
                max-width   : 800px;
            }
        }
    }

    .partners-content {
        display         : flex;
        align-items     : center;
        justify-content : center;
        max-width       : 1200px;
        width           : 100%;
        border-right: 1px solid #f4f4f4;

        .partner-address, .partner-date {
            font-family : Verdana, Arial, sans-serif;
            font-size   : 25px;
            color       : black;
        }

        .partner-date {
            margin-bottom: 0;
        }

        .photo-credit {
            font-size   : 14px;
            margin: 5px 0 25px 0;
        }
    }

    /* Footer */

    .footer {
        display          : flex;
        flex-direction   : column;
        background-color : #fff;

        span {
            color       : black;
            font-family : Verdana, Arial, sans-serif;
            font-size   : 11px;
        }

        .footer-bold-text {
            font-size   : 23px;
            font-weight : bold;
            margin-bottom: 15px;
        }

        .inner-footer {
            padding : 35px 90px 50px;

            .footer-logo {
                display         : flex;
                flex            : 1;
                align-items     : center;
                justify-content : space-between;
                border-bottom   : 1px solid #f4f4f4;
                margin-bottom   : 35px;
                padding-bottom  : 35px;
                text-align      : center;
            }
        }

        .link-footer {
            margin: 0 auto;
        }

        .footer-section a {
            text-decoration : none;
        }

        .social-network {
            padding-top: 15px;
        }

        .social-network a {
            margin : 5px;
        }
    }
}

.separator {
    width            : 5%;
    height           : 1px;
    background-color : #be8839;
    margin           : 40px 0;
}

@media (min-width : 768px) {
    .landing-page {
        /* Header */
        .header {
            .logo {
                display: flex;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
            }
        }
    }
}

/* Responsive Mobile */
@media (max-width : 768px) {
    .landing-page {
        /* Header */
        .header {
            .logo {
                img {
                    height : 190px;
                    margin : 0 15px;
                }
            }

            .header-img {
                .video-desktop {
                    display : none;
                }

                .image-mobile {
                    display : block;
                }
            }
        }

        /* Typography */
        h2 {
            font-size : 28px;
        }

        .h2-subtitle {
            font-size : 18px;
        }

        .big-title {
            font-size : 35px;

            span {
                font-size : 40px;
            }
        }

        .italic-text {
            font-size : 16px;
        }

        .text-highlight {
            font-size : 18px;
        }

        .text-light {
            font-size : 16px;
        }

        ul li {
            font-size : 16px;
        }

        /* Intro Section */
        .intro-section {
            padding : 60px 20px;
        }

        .intro-title {
            font-size : 45px;

            span {
                font-size : 50px;
            }
        }

        .intro-subtitle {
            font-size : 20px;
        }

        .intro-text {
            font-size : 18px;
        }

        /* Concert Section */
        .concert-section {
            padding : 40px 20px;
        }

        .concert-hancock {
            padding : 40px 20px 40px 20px;
        }

        .concert-info-intro {
            padding-bottom : 30px;
        }

        .concert-content {
            flex-direction : column;
            gap            : 30px;

            .col {
                width : 100%;
            }

            .concert-details {
                padding : 0;

                .concert-detail-intro {
                    max-width : 100%;
                }

                .button-left {
                    padding-top : 30px;
                }
            }
        }

        .second-content {
            padding : 40px 0;

            .col {
                padding : 0;
            }
        }

        .concert-image img {
            max-height : 400px;
        }

        .concert-more-info {
            padding : 20px 0 0 0 !important;
        }

        /* Promo Section */
        .promo-section {
            padding : 50px 20px;

            .promo-content {
                .promo-title {
                    font-size : 70px;
                }

                .promo-text {
                    font-size : 30px;
                }
            }
        }

        /* Info Section */
        .info-section {
            height              : auto;
            background-size     : contain;
            background-position : center bottom;

            .info-content {
                padding : 40px 20px;

                .info-text {
                    font-size : 16px;
                }
            }
        }

        /* Footer */
        .footer {
            .inner-footer {
                padding : 30px 20px;

                .footer-logo {
                    flex-direction : column;
                    gap            : 20px;

                    .logo-1, .logo-3 {
                        height: 70px;
                    }

                    .logo-2 {
                        height: 50px;
                    }

                    .logo-4, .logo-5 {
                        height: 80px;
                    }
                }
            }

            .footer-section {
                flex-direction : column;
                gap            : 15px;

                a {
                    margin : 5px;
                }
            }

            .footer-bold-text {
                font-size : 18px;
            }
        }

        .partners-content {
            .partner-address, .partner-date {
                font-size : 16px;
            }
        }
    }
}