@font-face {
    font-family: ChocoBold;
    src: url(../font/ChocoBold-Regular.ttf);
}

@font-face {
    font-family: EvelethClean;
    src: url(../font/EvelethClean.otf);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - .4rem));
    }
}

@keyframes partner-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50%));
    }
}


*,
html {
    scroll-behavior: smooth;
}

body {
    font-family: ChocoBold;
    background-color: black;
    margin: 0;
    padding: 0;
    color: white;

    a {
        text-decoration: none;
        color: white;
    }

    .main_container {

        .nav_bar {
            width: 90%;
            margin: auto;
            display: flex;
            align-items: center;


            .nav_logo {
                width: 10%;

                img {
                    width: 100%;
                }
            }

            .nav_content {
                flex-grow: 3;

                ul {

                    color: white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0;


                    li {
                        margin: 20px;
                        list-style-type: none;
                        font-size: 1.5rem;

                    }
                }
            }

            .nav_media {
                display: flex;
                align-items: center;
                gap: 30px;

                p {
                    color: white;
                    font-family: EvelethClean;
                    font-size: .7rem;
                }

                .instagram,
                .youtube {
                    width: 30px;

                    img {
                        width: 100%;
                    }
                }


            }
        }

        .banner {
            width: 100%;

            video {
                width: 100%;
                height: 100dvh;
                object-fit: cover;
            }
        }

        .discription {
            width: 70%;
            margin: auto;
            text-align: center;

            h1 {
                color: white;
                font-size: clamp(3.5rem, 3vw, 5rem);
                padding-top: 70px;
                font-weight: normal;
            }

            p {
                color: white;
                font-size: 1rem;
                font-family: EvelethClean;
                font-size: clamp(1rem, 3vw, 1.3rem);
                line-height: 2.5rem;
                text-align: center;

            }
        }

        .bandit_banner {
            width: 90%;
            margin: auto;
            display: flex;
            align-items: center;
            padding-top: 80px;
            gap: 20px;



            .bandit1 {
                width: 70%;

                h1 {
                    display: none;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .bandit2 {
                width: 31.5%;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

            }
        }

        .ticket_banner {
            width: 90%;
            margin: auto;
            padding-top: 20px;

            img {
                width: 100%;
            }
        }

        .merch_div {
            text-align: center;
            width: 90%;
            margin: auto;

            :nth-child(4) {
                padding-top: 30px;
            }

            h1 {
                color: white;
                font-size: clamp(5rem, 4vw, 3rem);
                padding-top: 30px;
                font-weight: normal;
            }

            p {
                color: rgb(255, 196, 0);
                text-align: left;
                font-size: clamp(1rem, 2vw, 2rem);
                font-family: EvelethClean;

            }

            .apparel_image {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                position: relative;


                img {
                    width: 100%;
                }

                :nth-child(5) {
                    padding-top: 100px;
                }

                :nth-child(4) {
                    padding-top: 100px;
                }

                p {
                    position: absolute;
                    left: 0;
                    top: 45%;
                }

            }







        }

        .promo-videos {
            text-align: center;
            margin-top: 100px;

            header {
                h1 {
                    font-weight: normal;
                    font-size: clamp(1.5rem, 5vw, 5rem);
                }
            }

            .videos-container {
                .video-thumb {
                    display: inline-block;
                    margin: 10px;
                    text-align: center;
                    width: 300px;
                    max-width: 100%;
                    vertical-align: top;
                    cursor: pointer;
                    position: relative;

                    .yt-play {
                        position: absolute;
                        top: 40%;
                        left: 50%;
                        transform: translate(-50%, -40%);
                        width: 64px;
                        height: 64px;
                        pointer-events: none;
                        z-index: 2;
                        opacity: 0.92;
                    }

                    img {
                        width: 100%;
                        border-radius: 10px;
                        display: block;
                        /* box-shadow:0 2px 8px rgba(0,0,0,0.15); */
                    }

                    p {
                        font-family: EvelethClean;
                    }
                }
            }
        }

        .map {
            width: 100%;
            margin-top: 100px;

            iframe {
                width: 100%;
                pointer-events: none;
            }
        }

        .contact_container {
            display: grid;
            place-items: center;
            width: 50%;
            margin: auto;
            margin-top: 40px;

            h1 {
                color: white;
                font-size: clamp(4rem, 3vw, 3rem);
                font-weight: normal;
            }

            input {
                width: 100%;
                background-color: black;
                border: 1px solid rgb(139, 129, 129);
                border-radius: 10px;
                padding: 25px;
                margin: 15px;
                box-sizing: border-box;
            }

            textarea {
                width: 100%;
                background-color: black;
                color: white;
                height: 30dvh;
                border-radius: 10px;
                box-sizing: border-box;
                padding: 25px;
                margin-top: 15px;
            }



            ::placeholder {
                font-family: EvelethClean;


            }

        }

        .footer_content {
            margin: 100px 0 80px 0;

            .footer {
                width: 85%;
                margin: auto;
                display: flex;
                justify-content: space-between;


                img {
                    width: 150px;
                    object-fit: contain;
                }

                .website {
                    h1 {
                        color: #F4CA17;
                        font-size: clamp(1.5rem, 2vw, 2rem);
                        font-weight: normal;
                        margin-top: 0;
                    }

                    p {
                        color: white;
                        font-size: clamp(.7rem, 1vw, .3rem);
                        font-family: EvelethClean;
                        line-height: 1.5rem;
                    }
                }

                .content_detail {
                    h1 {
                        color: #F4CA17;
                        font-size: clamp(1.5rem, 2vw, 2rem);
                        font-weight: normal;
                        margin-top: 0;
                    }

                    ul {

                        color: white;

                        padding: 0;


                        li {
                            margin: 5px;
                            list-style-type: none;
                            font-size: 1.2rem;

                        }
                    }
                }

                .social_media {
                    h1 {
                        color: #F4CA17;
                        font-size: clamp(1.5rem, 2vw, 2rem);
                        font-weight: normal;
                        margin-top: 0;
                    }

                    .tiktok_div {
                        display: flex;
                        align-items: center;
                        gap: 30px;


                        .instagram,
                        .youtube {
                            width: 30px;

                            img {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }

    }


    /* Theo's codes here... */

    /* leads branch styling codes begin here... */
    .lineup-container {
        color: white;
        margin-top: 80px;

        header {
            width: 100%;
            text-align: center;

            h1 {
                font-weight: normal;
                font-size: clamp(1rem, 5vw, 5rem);
            }
        }

        .infinit-scroll-container {
            overflow: hidden;
            position: relative;

            .holder {
                display: flex;
                width: max-content;
                animation: scroll 30s linear infinite;
                gap: 1rem;

                img {
                    width: 350px;
                }
            }
        }
    }

    .festival-schedule-container {
        color: white;
        margin-top: 100px;

        header {
            h1 {
                font-weight: normal;
                font-size: clamp(2.9rem, 5vw, 5rem);
                text-align: center;
                margin: 0;
            }

            .date-container {
                display: grid;
                place-items: center;
                margin-top: 20px;

                div {
                    cursor: pointer;
                    display: flex;
                    align-items: center;

                    &:first-child {
                        display: flex;
                        gap: 1rem;
                    }

                    h2 {
                        font-size: clamp(2rem, 4vw, 4rem);
                        font-weight: normal;
                        margin: 0;
                        line-height: 1;
                    }

                }
            }
        }
    }

    .date-schedule-container {
        display: flex;
        justify-content: center;
        margin-top: 60px;

        img {
            width: 30%;
        }
    }

    .partners_container {
        width: 60%;
        margin: auto;
        margin-top: 150px;

        header {
            text-align: center;
            font-size: clamp(1.3rem, 3vw, 3rem);
        }

        .partner-logos {
            overflow: hidden;
            position: relative;

            .holder {
                display: flex;
                width: max-content;
                animation: partner-scroll 20s linear infinite;
                gap: 2rem;

                a  {

                    img{
                        width: 180px;
                    }
                    
                }
            }
        }


    }

    .copyright {
        text-align: right;

        font-family: EvelethClean;
        font-size: .7rem;
        border-top: 1px solid rgb(65, 65, 65);

        p {
            width: 90%;
            margin: auto;
            padding-top: 20px;
        }
    }


}