:root {
    --clr-black: #4D4A4A;

    --ff-open-sans: 'Open Sans', sans-serif;
    --ff-montserrat: 'Montserrat', sans-serif;
}
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  /*
    2. Remove default margin
  */
  * {
    margin: 0;
  }
  /*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /*
    5. Improve media defaults
  */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /*
    6. Remove built-in form typography styles
  */
  input, button, textarea, select {
    font: inherit;
  }
  /*
    7. Avoid text overflows
  */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  /*
    8. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }

html {
    scroll-padding-top: 84px; /* Replace with your fixed navbar height */
}

body {
    /* margin: 44px auto; */
    font-family: var(--ff-open-sans);
    font-size: 16px;
    color: var(--clr-black)
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100vw;
    height: 100vh;
    color: #FFF;
    font-weight: 300;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(images/hero-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* filter: brightness(100%); */
}

h1 {
    color: var(--clr-black);
    padding-block: .5em;
    font-size: 2.75rem;
}

h2 {
    color: var(--clr-black);
}

.hero-content {
    position: relative;
    text-align: center;
}

.hero-btn {
    border-radius: 100px;
    padding: .5em 1em;
    border: none;
    text-transform: uppercase;
    /* font-weight: 300; */
    color: var(--clr-black);
    /* border: 1px solid var(--clr-black); */
    background-color: #F8E3CB;
    font-size: .75rem;
    opacity: .75;
}

.hero-btn > a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.container {
    width: 85%;
    margin: 0 auto;
    max-width: 1128px;
}

.flex {
    display: flex;
    justify-content: center;
    gap: 20px;
}

a {
    text-decoration: none;
    color: var(--clr-black);
    font-weight: bold;
}

p {
    padding-block-start: .5em;
}

.nav {
    font-family: 'Montserrat', sans-serif;
    position: fixed;
    background-color: #FFF;
    color: #000;
    padding-block: 1em;
    width: 100%;
    font-size: 1rem;
    display: flex;
    justify-content: space-around;
}

.nav__logo {
    display: none;
}

.nav__link {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .75rem;
    padding-inline: 1em;
}

.section {
    margin: 2em auto;
    /* padding-block-start: 4em; */
    /* border: 3px solid coral; */
    /* height: 100vh; */
    display: flex;
    flex-direction: column;
}

.section__about {
    padding-inline: 0;
}

.section__live {
    margin: 0 auto;
}

.abt-img-small {
    display: block;
}

.abt-img-large {
    display: none;
}

.section__title {
    padding: .5em;
    font-size: 2rem;
    text-align: center;
}

.section__title--live {
    padding-block-end: .25em;
}

.section__text--live {
    text-align: center;
}

.section__text {
    padding: 2em;
    font-weight: 300;
    margin: auto;
}

.section__text * + * {
    padding-block-start: 2em;
}

.section__text--blurb {
    padding: .5em;
    font-size: 1.25rem;
    text-align: center;
}

.section__text--coming-soon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    flex-direction: column;
    font-weight: bolder;
    /* background-color: var(--clr-black); */
    /* opacity: .5; */
    /* color: #FFF; */
}

.section__text--coming-soon > p {
    font-size: 1rem;
    text-transform: uppercase;
    /* z-index: 10; */
    /* color: #FFF; */
}

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

.section__img--pdf {
    display: flex;
    justify-content: center;
}

.section__film {
    padding-block-end: 1em;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section__film,
.section__mytime {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sec    
.section__live-background {
    background: url(images/sunset-imgheic.jpg);
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-size:cover;
    z-index:1;
    -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

.section__img--live {
    display: flex;
    justify-content: center;
}

.section__history--img-tablet {
    display: none;
}

.section__history--img-desktop {
    display: none;
}

.section__film {
    margin-inline: 2em;
}

.film-img {
    max-width: 59.375rem;
}

.section__title--contact {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100vw;
    /* height: 100vh; */
    color: var(--clr-black);
    font-weight: 300;
}

/* .section__contact--img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(images/sunset-imgheic.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
} */

.section__contact {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    font-family: var(--ff-montserrat);

}

.section__title--contact {
    color: #000;
    /* font-weight: 700; */
    font-size: 2.5rem;
    padding-block: .5rem;
}

.section__text--contact {
    text-align: center;
    padding-block: .5rem 2rem;
}

.contact-info {
    font-weight: 700;
}

.footer {
    text-align: center;
    padding-block: 1em;
    background: #F3F3F3;
    font-weight: 600;
}

@media (min-width: 600px) {
    .section__history--img-mobile {
        display: none;
    }

    .section__history--img-tablet {
        display: block;
    }
}

@media (min-width: 700px) {
    .hero-title {
        font-size: 4rem;
    }

    .section__text {
        width: 75%;
    }

    .hero-btn {
        font-size: 1rem;
    }

    .quote-container {
        display: flex;
    }

    .quote {
        text-align: right;
        font-size: .85rem;
        padding-inline-start: .25em;
        padding-block-start: 0;
    }
}

@media (min-width: 1000px) {
    .section__text {
        width: 40%;
    }

    .nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #F3F3F3;
        padding-block-end: 1em;
    }

    .nav__logo {
        display: flex;
        width: 10%;
    }

    .nav__link {
        padding-inline: 2em;
        font-weight: 600;
        align-items: center;
    }

    .section__img--abt > img{
        height: 25%;
    }

    
    
    
}

@media (min-width: 1500px) {

    .section__history--img-tablet {
        display: none;
    }
    .section__history--img-desktop {
        display: block;
    }
}

@media (min-width: 2339px) {
    .abt-img-small {
        display: none;
    }

    .abt-img-large {
        display: block;
    }
}