@media (prefers-reduced-motion: reduce) {
    .animated {
        animation: none !important;
    }
}

html {
    background-color: #cad8bb;
}

body {
    font-size: larger;
}

body,
html,
p,
ul,
ol,
li {
    margin: 0;
    padding: 0;
    font-synthesis: none;
    font-kerning: none;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "calt" 0, "liga" 0, "clig" 0, "dlig" 0, "hlig" 0;
    font-family: AvenirNext;
    font-weight: bold;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricprecision;
    white-space: normal;
    text-align: center;
    text-align: -webkit-center;
    color: #FDFDFC;
    font-size: 1.2rem;
}

li {
    text-align: unset;
}

a {
    text-decoration: none;
    color: inherit;
    width: auto;
    /* display: contents; */
}

@font-face {
    font-family: "AvenirNext";
    src: 
        url("./fonts/AvenirNextLTPro-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "AvenirNext";
    src: 
        url("./fonts/AvenirNextLTPro-Bold.otf") format("opentype"),
        url("./fonts/AvenirNextLTPro-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "AvenirNext";
    src: 
        url("./fonts/avenirnextltpro-it-webfont.woff") format("woff"),
        url("./fonts/AvenirNextLTPro-It.otf") format("opentype"),
        url("./fonts/AvenirNextLTPro-It.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

video {
    max-width: 100%;
    height: 80vh;
    object-fit: cover;
    margin: auto;
    width: 100%;
    /* display: block; */
    position: absolute;
    z-index: -10;
    left: 0;
}

.video-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    background-color: rgb(0 0 0 / 34%);
    /* animation: pulse 2s infinite; */
}


img {
    max-width: 75%;
    pointer-events: none; 
}


section {
    align-items: center;
    text-align: center;
    position: relative;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

section span {
    margin-bottom: 45px;
    font-weight: bold;
    font-size: xxx-large;
    z-index: 20;
    color: #4EA9AF;
}


div.flex-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    max-width: 80%;
    justify-content: space-evenly;
}

a .orange-dot {
    background-color: #FB7916;
    height: 80px;
    width: 80px;
    border-radius: 40px;
    position: absolute;
    /* left: calc(15% - 80px); */
    left: calc(-5% - 20px);
    top: 120px;
}

section#mobile-header {
    max-width: 100%;
    display: block;
}

#mobile-header-bar {
    z-index: 90;
    top: 10px;
    width: 100%;

    /* background-color: #FDFDFC; */
    position: fixed;

    text-align: end;
}

section#mobile-header div#mobile-nav-menu {
    position: fixed;
    background-color: #FDFDFC;

    height: 100%;
    width: 60%;
    z-index: 85;
    top: 0;
    right: -100vw;

    display: flex;
    flex-direction: column;

    /* gap: 40px; */
    text-align: left;
    /* margin-top: 20px; */
    margin-left: 10px;

    transition-property: right;
    transition-duration: .5s;
}

section#mobile-header div#mobile-nav-menu a {
    /* span { */
    background-color: #cad8bb;
    color: #51A7A6;
    margin-top: 15px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: x-large;
    padding: 20px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    width: 80%;
    position: relative;
    align-self: end;
    /* } */
}

div.spacer {
    height: 15vh;
}

div.spacer-short {
    height: 7.5vh;
}

div.spacer-tiny {
    height: 4.0vh;
}

section#mobile-header div#mobile-nav-menu.display-visible {
    right: 0;
}

/* div.logos a {
    flex: 1 1 20%; /* Adjust the flex-basis to a suitable percentage */
    /* min-width: 150px; //Adjust based on your design requirements 
} */

section#header {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

section#header div#header-bar {
    margin-bottom: 40px;
    border-radius: 40px;
    background-color: #FDFDFC;
    height: 50px;
    width: 70%;

    align-items: center;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    animation: pan-right 877ms 100ms both ease-out, linear_fade 400ms linear both;
}

section#header span {
    color: #51A7A6;
    text-transform: uppercase;
    font-weight: bold;
    font-size: x-large;
    margin-bottom: unset;
}

div.logos a {
    display:inline-block;
    text-decoration: none;
    flex: 1 1 35%;
    min-width: 200px;
}

div.logos a img {
    /* width: auto;
    height: 200px; */
    pointer-events: none; 
    /* min-inline-size: -webkit-fill-available; */
}

section#purpose div.flex-row img,
section#faq div.flex-row img {
    object-fit: contain;
    flex: 1;
    width: 30%;
}

section#purpose div.logos {
    margin-top: 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    background: #cad8bb;
    width: 80%;
    min-width: 450px;
}

section#purpose div p {
    padding-top: 60px;
}

section#location img {
    margin-bottom: 20px;
}

section#get-baptized div#contact-list ul {
    list-style-type: none; /* Removes the default list bullet. */
    padding: 0; /* Removes default padding. */
    column-count: 2; /* Splits the list into two columns. */
    column-gap: 30px; /* Adjust the gap between columns. */
    max-width: 770px; /* Adjust the width as needed. */
    margin: 0 auto; /* Centers the list in the page. */
  }

  section#get-baptized div#contact-list li {
    margin-bottom: 10px; /* Space between the items. */
  }

  section#get-baptized div#contact-list a {
    text-decoration: none;
    color: #FB7916;
  }

  /* Optional: Responsive design for smaller screens. */
  @media (max-width: 768px) {
    section#get-baptized div#contact-list ul {
      column-count: 1;
    }
  }

section#get-baptized .container {
    position: relative;
    /* width: fit-content; */
    transform: scalex(-1);
    margin: auto;
}

section#get-baptized .sun {
    width: 350px; /* adjust as needed */
    height: 350px; /* adjust as needed */
    background-color: #FB7916;
    border-radius: 50%; /* makes the div circular */
}

section#get-baptized .birds {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-25%, -50%);
    min-width: 220%; 
    pointer-events: none; 
}

section#get-baptized .container .birds-left {
    position: absolute;
    max-width: 400px;
    transform: translate(23vw, -40%);
    min-width: 120%; 
    pointer-events: none; 
}

.menu-wrapper {
    display: inline-block;
    cursor: pointer;
    margin-right: 20px;
    z-index: 90;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}

span.body-text {
    font-size: larger;
}

span.body-text a {
    color: #537330;
    font-style: italic;
}

section#faq div p span {
    font-weight: bold;
    font-size: xx-large;
}

section#faq div p {
    padding-bottom: 60px;
}

section#giving iframe {
    border-radius: 20px;
}

@media (min-width: 1024.05px) {
    section#mobile-header,  
    #mobile-header-bar, 
    .menu-wrapper {
        display: none;
    }
}

@media (max-width: 1024px) {
    section#header div#header-bar {
        display: none;
    }

    .video-filter{
        padding-top: 60px;
    }
}

@media (min-width: 768.05px) and (max-width: 1024px) {
    div#header-bar,
    div#mobile-nav-menu span {
        font-size: x-large;
        /* width: 90%; */
    }
}

@media (max-width: 768px) {
    div#mobile-nav-menu span {
        font-size: x-large;
    }

    div.logos {
        flex-direction: row;
        flex-wrap: wrap;
    }

    video {
        height: 50vh;
    }

    .video-filter {
        height: 50vh;
    }

    section span {
        font-size: xx-large;
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    p {
        font-size: x-large;
    }

    div#mobile-nav-menu span {
        font-size: x-large;
    }

    div.flex-row {
        max-width: 100%;
    }

    /* div.logos img {
        height: 90px;
    } */
}

@keyframes pulse {
    0% {
        background-color: rgba(226, 226, 226, 0.05);
    }

    50% {
        background-color: rgba(226, 226, 226, 0.1);
    }

    100% {
        background-color: rgba(226, 226, 226, 0.05);
    }
}

@keyframes pan-right {
    0% {
        transform: translate(-80px, 0px);
        animation-timing-function: cubic-bezier(0.4, 0.8, 0.74, 1.0);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes linear_fade {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}