html,
body{
    font-family: sans-serif;
    scroll-behavior: smooth;
    margin: 0px;
    padding: 0px;
    letter-spacing: 1px;
    overflow-x: hidden;
    width: 100vw;
}

.logo-nav {
    display: flex;
    height: 85px;
    position: absolute;
    left: 30px;
    top: 15px;
}
.over-dark .logo-nav {
    filter: brightness(100);
    z-index: 1000;
}




.auto-margins{
    margin: auto;
}

.flex img{
    width:auto;
}

.h-max{
    left: -3vw;
    height: 75vh;
    max-height: 1290px;
    transform: scale(1.125);
    position: relative;
}

a{
    text-decoration: none;
}

.t-center{
   text-align: center;
}

.no-dot{
    list-style: none;
}

.span{
    width: 100%;
}

.dark{
    background-color: #07142f;
    color: white;
}

.cap-bld {
    background-image: url(../assets/img/cap-bld.jpg);
    background-size: cover;
    background-position: center;
}

.box-shadow {
        box-shadow: 10px 10px 30px 0px #00000010;
        z-index: -10;
}

.half-bkg {
    height: 200vh;
    width: 60%;
    position: absolute;
    right: -30px;
    top: 0px;
    z-index: -100;
    background-color: rgb(253, 252, 255);
    background-image: url(../assets/img/worn-dots.png);
}

.medium{
    font-size: 1.25em;
}

.large{
    font-size: 2em;
}

.thin {
    font-weight: 100;
}

nav ul {
    list-style: none;
}

.nav-bar {
    position: fixed;
    width: 100%;
    margin: auto;
    transition: .25s ease;
   padding: 0px!important;
   z-index: 99;
}

.navi {
    position: absolute;
    z-index: 100;
    width: 100vw;
    background: #0000000;
    color: black;
}

nav li a {
    text-transform: uppercase;
    color: black;
    margin-right:30px;
}

nav li a:hover {
    color: red;
}

.logo-nav img {
    margin-right: auto;
    z-index: 1000;
}

.ai-center{
    align-items: center;
}

.jc-center{
    justify-content: center;
}

.jc-space{
    justify-content: space-evenly;
}

.flt-right{
    float: right;
    margin-left: auto;
}

.flt-left{
    float: left;
    margin-right: auto;
}

.f-row{
    display: flex;
    flex-flow: row;
}

.f-col{
    display: flex;
    flex-flow: column;
    padding: 30px;
}

.f-col.max{
    width: calc(100vw - 60px);
    max-width: 1920px;
}

.no-pad{
    padding: 0px!important
}

.f-wrap,
.m-f-wrap{
    flex-wrap: wrap;
}

.vw{
    width:100vw;
}

.vh{
    height:100vh;
}

.caps{
    text-transform: uppercase;
}

.shy{
    padding-top: 150px;
    padding-bottom: 150px;
}

.more-shy{
    padding-top: 200px;
}

.header-image {
    background: url("../assets/img/ok-cap.jpeg") no-repeat center center;
    background-size: cover;
    height: 50vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-image h1 {
    color: white;
    padding: 20px;
}

.boxy-list-one li {
    width: 100%;
    max-width: 1080px;
    display: flex;
    background: #203c75;
    text-align: center;
    align-items: center;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: 200;
    margin-bottom: 5px;
    min-height: 100px;
}

.boxy-list-one li div{
padding: 15px;
}

#static-logo{
  width: 15vw;
  max-width: 500px;
}

.fade {
  opacity: 0;
  transform: translateY(-25px);
  transition: opacity 1s, transform 1s;
}

.a-fade {
  opacity: 0;
  transition: opacity 1s;
}


.over-dark.nav-bar{
}

.over-dark a{
    color: white;
}

/* Mobile Styles (default) */

.m-one {
    width: 100%;
}

.m-two {
    width: 50%;
}

.m-three {
    width: 31%;
}

.m-four {
    width: 25%;
}

.m-five {
    width: 20%;
}

.m-six {
    width: 16.67%;
}

.btn{
    padding: 10px 15px;
    color: black;
    border: solid 2px black;
    width: fit-content;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(15px); /* Standard property */
    -webkit-backdrop-filter: blur(15px); /* WebKit-specific property */
    background-color: rgba(255, 255, 255, 0.5); /* Fallback for browsers that don't support backdrop-filter */

}



.menu-toggle {
    position: relative;
    width: 30px;
    height: 24px;
    cursor: pointer;
    top: 50px;
    right: 30px;
}

.menu-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  transition: transform 0.3s, opacity 0.3s;
}


.menu-toggle span:before,
.menu-toggle span:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  transition: transform 0.3s, opacity 0.3s;
}

.over-dark .menu-toggle span,
.over-dark .menu-toggle span:before,
.over-dark .menu-toggle span:after{
    background-color: white;
}

.menu-toggle span:before {
  top: -8px;
}

.menu-toggle span:after {
  bottom: -8px;
}

.menu-toggle.active span {
  transform: rotate(45deg);
}

.menu-toggle.active span:before {
  transform: rotate(90deg);
  top: 0;
}

.menu-toggle.active span:after {
  transform: rotate(90deg);
  bottom: 0;
}

@media screen and (max-width: 601px) {
    
    .dot-logo,
    .half-bkg,
    .h-max {
    display: none;
}

.mobile-only-bkg {
    display: block;
    position: absolute;
    z-index: -1000;
    width: 103vw;
}

.navigation-links {
    background: white;
    height: 100vh;
    width: 100vw;
    display: flex;
    position: absolute;
    top: 0px;
    left: 100vw;
    align-items: center;
    transition: .5s ease;
}

.over-dark .navigation-links {
    background: #18253f;
}

.navigation-links.active {
   left:0vw;
}

.navigation-links ul {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    padding: 0px;
}

.navigation-links li {
    font-size: 1.5em;
    line-height: 4em;
}


.navigation-links a {
    margin-right: 0px;
}

.navigation-links li.blue-btn {
    line-height: 1.5em;
}
}

nav.m-one.navigation-links {
    padding-top: 20px;
}


/* Tablet Styles (601px to 1024px) */

@media screen and (min-width: 601px) {
    
    .mobile-only-bkg{
    display:none!important;
}
    
    .t-one {
        width: 100%;
    }

    .t-two {
        width: 50%;
    }

    .t-three {
        width: 31%;
    }

    .t-four {
        width: 25%;
    }

    .t-five {
        width: 20%;
    }

    .t-six {
        width: 16.67%;
    }
        
    .t-auto {
        width: auto;
    }
    
    .m-f-wrap{
        flex-wrap: nowrap;
    }
    
    .t-f-wrap{
        flex-wrap: wrap;
    }
    
    .menu-toggle{
        display: none;
    }

}
}

/* Desktop Styles (1025px to 1280px) */

@media screen and (min-width: 1025px) {
    .d-one {
        width: 100%;
    }

    .d-two {
        width: 50%;
    }

    .d-three {
        width: 31%;
    }

    .d-four {
        width: 25%;
    }

    .d-five {
        width: 20%;
    }

    .d-six {
        width: 16.67%;
    }
    
    .d-auto {
        width: auto;
    }
    
    .t-f-wrap{
        flex-wrap: nowrap;
    }
}

/* Extra Large Styles (1281px and above) */

@media screen and (min-width: 1281px) {
    .x-one {
        width: 100%;
    }

    .x-two {
        width: 50%;
    }

    .x-three {
        width: 31%;
    }

    .x-four {
        width: 25%;
    }

    .x-five {
        width: 20%;
    }

    .x-six {
        width: 16.67%;
    }
        
    .x-auto {
        width: auto;
    }
}


.no-pad{
    padding:0px!important
    ;
}

.fade-in {
  opacity: 0; /* Set initial opacity to 0 */
  animation: fadeIn 1s ease-in-out forwards; /* Apply the fade-in animation */
}

@keyframes fadeIn {
  0% {
    opacity: 0; /* Start with opacity 0 */
  }
  100% {
    opacity: 1; /* End with opacity 1 */
  }
}

.blue-btn {
    padding: 10px 15px;
    color: white;
    background: #203c75;
    width: fit-content;
    display: flex;
    text-align: center;
}


.blue-btn a{
    color: white;
    margin-right: 0px;
    padding-right: 0px;
}


.blue-btn:hover,
.blue-btn:hover a{
    background: #223761;
    color: white;
}

.photo {
    padding-top: 0px;
}




.static-photo {
    position: fixed;
    display: flex;
    width: 45vw;
    max-width: 720px;
    z-index: -10;
}

.p-one{
    top: 15vh;
}

.p-two{
   bottom: -20vh;
}

.fade-scroll {
  opacity: 1;
  transition: opacity .5s ease;
}


.slow-scroll {
  position: absolute;
  top: 300;
}


.p-fade {
            opacity: 0;
            transition: opacity 0.5s;
        }


html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
   pointer-events: none;
} 

html.lenis {
  height: auto;
}


#the-form {
    display: flex;
    flex-direction: column;
    letter-spacing: initial;
    width: 90vw;
    max-width: 460px;
    background: white;
    padding: 25px;
    border-radius: 8px;
}

.g-recaptcha {
    margin: 19px 0px;
}

#the-form label {
    margin-top: 15px;
}

#join-c-group {
    background: #f9f9f9;
    padding-bottom: 30px;
}
.m