:root{
    --nav-color: black;
    --nav-color2: rgb(223,213,213);
    --burgundy: rgb(122,59,59);     /*(86,0,34)*/
    --grey: rgb(230, 223, 223);
    --grey1: rgb(174, 158,158);

}

body{
    margin: 0;
    font-family: 'Roboto', sans-serif;
	font-weight: 400;

}

header{
    background: var(--nav-color);
    position: fixed;
    width: 100%;
    text-align: center;
    z-index: 99;
    height: 80px;

}







.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
    display: block;
    background: white;
    height: 2px;
    width: 2em;
    border-radius: 2px;
    position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after{
    content: '';
    position: absolute;
}

.nav-toggle-label span::before{
    bottom: 7px;
}

.nav-toggle-label span::after{
    top: 7px;
}
.nav-logo-container{
    display: none;
}


.mobile-nav-logo-container{
    width: 100%;
}

.mobile-nav-logo{
    width: auto;
    height: 60px;
    position: relative;
    top: 10px;

}

.nav-logo{
    display: none;

}

nav{
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0;
    background: var(--nav-color);
    width: 100%;
    transform: scale(1,0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li{
    margin-bottom: 1em;
    margin-left: 1em;
}

nav a{
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 100;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

nav a:hover{
    color: var(--burgundy);
}

.nav-toggle{
    display: none;
}

.nav-toggle-label{
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 1em;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-toggle:checked ~ nav{
    transform: scale(1,1);

}

.nav-toggle:checked ~ nav a{
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;

}

.banner {
    all: unset;
    background: rgba(122,59,59,0.5);
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.banner-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;

}

.splash-container{
    position: relative;
    top: 85px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.splash-img{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 125px;
    width: 125px;
}
.banner-h-container {
    position: relative;
    display: flex;
    width: 90%;
    top: 30px;
    margin: 50px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.banner-msg{
    text-align: center;
    padding: 5px;
}


.banner-msg p {
    color: white;
    font-weight: 400;
    margin: 5px;
    margin-bottom: 10px;
    font-size: 24px;
}
.banner-h-container h2 {
    color: white;
    margin:10px;
    font-weight: 400;
    font-size: 45px;
}
h5{
   color: black;
   font-size: 24px;
   font-weight: 400;
   text-align: center;
   margin: 0px;
   margin-bottom: 10px;
   margin-top: 25px;
   padding: 0px;
}
.watch-logos{
    display: block;
    margin-top: 30px;

}

.watch-socials{
    display: flex;
    width: 100%;
    position: relative;
    justify-content: center;
    align-items: center;
}

.watch-logo{
    display: flex;
    width: 50px;
    margin: 10px;
    }

.videoWrapper {
    position: relative;
    margin-bottom: 50px;
    }



.buffer{
            width: 100%;
            height: 25px;
            background: var(--burgundy);
        }









h4{
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.footer-links{
    display: none;
}
.footer-links-mobile{
    display: block;
    margin-top: 30px;
}



.footer-logo-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo{
    width: 20%;

}
h4{
   color: black;
   font-size: 24px;
   font-weight: 400;
   text-align: center;
   margin: 0px;
   margin-top: 50px;
   padding: 0px;
   }

.column p{
    color: black;
    font-size: 14px;
    font-weight: 100;
    text-align: center;
    margin: 0px;
    margin-top: 0px;
    padding: 0px;
}

.socials{
            display: flex;
            width: 100%;
            position: relative;
            justify-content: center;
            align-items: center;
        }

.footer-links-mobile{
        color: black;
        font-weight: 300;
        text-align: center;
}

@media screen and (min-width: 1000px){

        header{
            position: static;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 120px;
        }

        .menu{
            display: flex;
            justify-content: center;

        }

        .nav-toggle-label{
            display: none;
        }

        .mobile-nav-logo-container{
            display: none;
        }

        .mobile-nav-logo{
            display: none;

        }

        .nav-logo-container{
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nav-logo {
            all: unset;
            width: auto;
            height: 100px;
            margin-right: 20px;
            margin-left: 0px;
            margin-top: 12px;

        }




        nav {
            all: unset;
            display: flex;
            align-items: center;

        }

        nav ul{
            display: flex;
            justify-content: center;
        }

        nav li{
            all: unset;
            margin-left: 2em;
            margin-right: 2em;

        }

        nav a{
            opacity: 1;
            position: relative;
            font-size: 16px;

        }

        nav a::before{
            content: '';
            display: block;
            height: 1px;
            background: white;
            position: absolute;
            top: 1.75em;
            left: 0;
            right: 0;
            transform: scale(0,1);
            transition: transform ease-in-out 250ms;
        }



        nav a:hover::before{
            transform: scale(1,1);
        }



        h3{
            color: white;
            font-size: 48px;
            font-weight: 300;
            text-align: center;
            padding-left: 38px;
            padding-right: 38px;
            padding-top: 10px;

        }


        .banner{
            width: 100%;
            height: 400px;
        }

        .splash-container{
            position: relative;
            top: 10px;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

        .splash-img{
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            height: 200px;
            width: 200px;
        }
        .banner-h-container h2 {
            all: unset;
            color: white;
            font-weight: 400;
            font-size: 60px;
            width: 50%;
        }
        .banner-msg p {
            all: unset;
            color: white;
            font-weight: 300;
            margin: 5px;
            margin-top: 10px;
            font-size: 30px;
            width: 75%;
        }
        .banner-h-container {
            all: unset;
            position: relative;
            top: -15px;
            display: flex;
            width: 100%;
            margin: 0;
            text-align: center;
            justify-content: center;
            align-items: center;
        }
        .banner-msg {
            all: unset;
            display: flex;
            width: 100%;
            margin: 0;
            text-align: center;
            justify-content: center;
            align-items: center;
        }


        .buffer{
            width: 100%;
            height: 25px;
            background: var(--burgundy);
        }


    
        .footer-container {
              all: unset;
              display: flex;
              justify-content: center;
              align-items: flex-start;
              background: rgb(47,46,46);
              overflow: hidden; /* Enable vertical scrolling if the content overflows */

            }
        .footer-logo-container{
            all: unset;
            padding: 0px;
            margin: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: auto;
            height: auto;
        }
        .footer-logo{
            all: unset;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0px;
            width: auto;
            height: 110px;
            margin: 25px;
        }

        .column {
              all: unset;
              padding: 20px;
              text-align: center;
              color: white;
              margin-bottom: 75px;
              width: 100%;
            }

        .column p{
            position: relative;
            top: 10px;
            color: white;
            text-align: center;
            margin: 0px;
            padding: 0px;
            font-weight: 100;
        }

        @media screen and (max-width: 1150px){
            .column {
              display: none;

            }
            .footer-divider{
                display: none;
            }
        }
        .footer-divider {
              position: relative;
              top: 25px;
              width: 0px;
              height: 175px;
              background-color: black;
              border: 1px dotted white;

            }

        .socials{
            all: unset;
            display: flex;
            width: 200px;
            position: relative;
            justify-content: center;
            align-items: center;
        }

        .social-logo{
            all: unset;
            display: flex;
            width: 100%;
        }

        .footer-links{
            all: unset;
            margin-left: 100px;
            margin-right: 100px;

        }
        .footer-links p{
            color: white;
            font-size: 12px;
        }

        h4{
            color: white;
            font-size: 24px;
            font-weight: 400;
            text-align: center;
            margin: 0px;
            margin-top: 20px;
            padding: 0px;
        }
        .footer-links-mobile{
            display: none;
        }

}


.mobile header{
    height: 110px;
    position: relative;

}

.mobile .mobile-nav-logo{
    width: auto;
    height: 75px;
    position: relative;
    top: 20px;
}

.mobile .nav-toggle-label span,
.mobile .nav-toggle-label span::before,
.mobile .nav-toggle-label span::after{

    height: 4px;
    width: 40px;
    border-radius: 2px;

}

.mobile .nav-toggle-label span::before{
    bottom: 10px;
}

.mobile .nav-toggle-label span::after{
    top: 10px;
}
.mobile .nav-toggle-label{
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 1em;
    height: 110%;
    display: flex;
    align-items: center;
}

.mobile .nav-toggle:checked ~ nav{
    height: 260px;

}
.mobile nav{
    top: 99%;
}
.mobile nav a{
    font-size: 30px;
}





.mobile .banner{
    top: unset;
    height: 200px;
}

.mobile .banner .splash-container{
    top: unset;
}

.mobile .banner .banner-msg{
    top: unset;
}

.mobile .buffer{
    height: 25px;
}
.mobile .banner-msg p {
    color: white;
    font-weight: 400;
    margin: 5px;
    margin-bottom: 10px;
    font-size: 18px;
}
.mobile .banner-h-container h2 {
    color: white;
    margin: 10px;
    font-weight: 400;
    font-size: 40px;
}
.mobile .banner-h-container {
    top: unset;
    margin: unset;
}