@font-face {
    font-family: 'displayFont';
    src: url('../fonts/NeueHaasGroteskDisplay-55Roman.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'displayFont';
    src: url('../fonts/NeueHaasGroteskDisplay-65Medium.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

body {
    background-color: black;
    font-family: 'displayFont', sans-serif !important;
    letter-spacing: 0.012em;
}

html {
    scroll-padding-top: 50px;
    /* or fixed px value */
}

html,
body {

    overflow-x: hidden;
}

.fw-bold {
    font-weight: 600;

}

.nav-link {
    transition: text-decoration 0.2s ease, text-shadow 0.2s ease, color 0.2s ease;
}

#mainNav.section-dark .nav-link:hover,
#mainNav.section-dark .nav-link:focus,
#mainNav.section-dark .nav-link:active:focus {
    color: white;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.6);
    text-decoration: underline;

}

#mainNav.section-light .nav-link:hover,
#mainNav.section-light .nav-link:active:focus,
#mainNav.section-light .nav-link:focus {
    color: black;
    text-decoration: underline;

}

#mainNav.section-dark .btn.btn-outline-primary:hover,
#mainNav.section-dark .btn.btn-outline-primary:active:focus,
#mainNav.section-dark .btn.btn-outline-primary:focus {
    background-color: white;
    color: black !important;
}

#mainNav.section-light .btn.btn-outline-primary:hover,
#mainNav.section-light .btn.btn-outline-primary:active:focus,
#mainNav.section-dark .btn.btn-outline-primary:focus {
    background-color: black;
    color: white !important;
}

#section1 {
    /* Dark background */
    color: white;
}

#section2 {
    background-color: #f8f9fa;
    /* Light background */
    color: black;
}

#section4 .container {
    padding-top: 75px;
}

#section5

/* Background image styling */
.bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}




/* Specific section backgrounds */


#section1 h1 span {
    font-size: calc(70rem/16);
}

/* Nav links centered */
.navbar-nav.mx-auto {
    text-align: center;
}

.navbar-button {
    margin-left: auto;
}


/* Navbar for dark sections */
#mainNav.section-dark {
    background-color: #232323;
    /* Match your dark section background */
    color: white;
}

#mainNav.section-dark .navbar-brand,
#mainNav.section-dark .nav-link {
    color: white
}

/* Default collapsed state (shows plus icon) */
#mainNav.section-dark .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon {
    background-image: url("../images/plus.svg");
    border: none;
    outline: none;
    box-shadow: none;
}

/* Expanded state (shows minus icon) */
#mainNav.section-dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("../images/minus.svg");
    border: none;
    outline: none;
    box-shadow: none;
}


#navbar {
    backdrop-filter: blur(10px);
}

/* Navbar for light sections */
#mainNav.section-light {
    background-color: #f8f9fa;
    /* Match your light section background */
    color: black;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

#mainNav.section-dark .navbar-toggler-icon {
    background-image: url("../images/plus.svg");
    border: none;
    outline: none;
    box-shadow: none;
}

#mainNav.section-light .navbar-toggler-icon {
    filter: invert(1);
    background-image: url("../images/plus.svg");
    border: none;
    outline: none;
    box-shadow: none;
}

/* Collapsed state: plus icon */
#mainNav.section-light .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon {
    background-image: url("../images/plus.svg");
    filter: invert(1);
    border: none;
    outline: none;
    box-shadow: none;
}

/* Expanded state: minus icon */
#mainNav.section-light .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("../images/minus.svg");
    filter: invert(1);
    border: none;
    outline: none;
    box-shadow: none;
}


/* Active link styles */
#mainNav .nav-link.active {
    font-weight: bold;
}


/* Section backgrounds */
#section1 {
    background-color: black;
    /* Dark background */
    background-image: url('/images/home-hero-baseball.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}

#section7 {
    background-image: url('/images/soccer-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #232323;
    /* Dark background */
}

#section7 p {
    font-size: 1.8rem;
}

#section7 a.btn {
    padding: 0;
}

#section2 {
    background-color: #232323;
    /* Light background */
    color: #fff;
}


/* Navbar for dark backgrounds */
#mainNav.section-dark .navbar-brand,
#mainNav.section-dark .nav-link {
    color: rgba(255, 255, 255, 0.9);
}



/* Button styling for dark sections */
#mainNav.section-dark #nav-button {
    color: white;
    border-color: white;
}

/* Apply invert filter to logo on dark backgrounds */
#mainNav.section-dark #small-logo {
    filter: invert(1) brightness(5);
}

/* Navbar for light backgrounds */
#mainNav.section-light .navbar-brand,
#mainNav.section-light .nav-link {
    color: rgba(0, 0, 0, 0.9);
}


/* Button styling for light sections */
#mainNav.section-light #nav-button {
    color: black;
    border-color: black;
}

/* Active link styles */
#mainNav .nav-link.active {
    font-weight: bold;
}


a.btn {
    width: 12.5em;
    height: 3.125em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.container {
    padding: 0;
}


.btn-light {
    background: #fff;
    color: #1d1d1d;
    border: 0;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active,
.show>.btn-light.dropdown-toggle {
    background: #e0e0e0;
    color: #1d1d1d;
    border-color: #ccc;
}

.btn-success {
    background: #30D158;
    color: #1d1d1d;
    border: 0;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.show>.btn-success.dropdown-toggle {
    background: #28b44c;
    /* Slightly darker green */
    border-color: #28b44c;
    color: #1d1d1d;
}

.btn.btn-black {
    background: #232323;
    color: #fff;
}


/* Testimonial scroll styles */
.testimonial-container {
    overflow: visible;
    position: relative;
}

.testimonial-scroll {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
}

.testimonial-scroll>div {
    flex: 0 0 auto;
    scroll-snap-align: center;
}

/* Show a bit of the next card to indicate more content */
.testimonial-scroll::after {
    content: "";
    flex: 0 0 30px;
}

/* Hide scrollbar but keep functionality */
.testimonial-scroll::-webkit-scrollbar {
    display: none;
}

.testimonial-scroll {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}





.footer-nav ul,
.footer-nav ul li {
    display: inline-block;
    margin-right: 20px;
    margin-left: 0;
    padding-left: 0;

}

.footer-nav ul li a {
    color: #fff;
}


/* The wedge container */

section#section1>*:not(.wedge-container) {
    position: relative;
    z-index: 11;
}

.wedge-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* Allow clicks to pass through */
}

/* The actual clock-like wedge */
.clock-wedge {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 0;
    opacity: 0.8;
}



#section1-subheading {
    margin-bottom: calc(24rem/16) !important;
}

#section1-subheading,
#subhead {
    text-wrap: balance;
}

/* phone */
@media (max-width: 1000px) {
    #subhead {
        margin-bottom: 0;
    }
    h2 {
        margin-bottom: 30px !important;
    }

    h2.accordion-header {
        margin-bottom: 0 !important;
    }

    #trustScroll {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        align-items: stretch;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    #trustScroll .card {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        height: auto;
        /* allow content to determine height */
        min-height: 100%;
        /* ensures it stretches vertically */
    }

    .feature_card h5 {
        font-size: calc(20rem/16);
        margin: 10px 0;
    }

    #section6 p+p {
        margin-top: 20px;
    }

    .feature_card p,
    .trust-card p {
        margin-bottom: 0;
    }

    .trust-card p {
        padding-top: 20px;
    }

    footer .footer-nav {
        padding-bottom: 12px;
    }

    .community-card {
        padding: 20px;
    }

    .community-card p {
        margin: 0;
    }

    .navbar-collapse {
        padding-top: 36px;
    }

    footer {
        margin-bottom: 24px;
    }

    footer p {
        margin-bottom: 0;
    }

    .nav-link {
        padding: 0;
    }

    .nav-item {
        margin: 0;
        padding: 10px 0;
    }

    nav .nav-item {
        padding: 8px 0;
    }

    nav .navbar-button {
        margin-left: 0;
    }

    nav .navbar-button a {
        margin-left: 0;
        margin-top: 8px;
        margin-bottom: 0;
        padding: 10px 20px;
    }

    footer {
        padding: 0 20px;
    }

    #btns {

        margin-top: 40px;
        margin-bottom: 40px;
    }

    #btns a.btn {
        margin-top: 0;
        margin-bottom: 0;
    }

    #section7 #btns {
        margin-bottom: 60px;
        margin-top: 0;
    }

    footer ul {
        margin-bottom: 40px !important;
    }

    #footer-image {
        margin-bottom: 40px;
    }

    #main-logo {
        height: 32px;
    }


    #mainNav {
        padding: calc(24rem / 16) calc(20rem / 16);
    }

    #degree-image-wrapper {
        position: relative;
        margin-top: 40px;
    }

    #section1 p {
        font-size: 1rem;
    }

    #degree-image {
        position: relative;
        width: calc(150rem/16) !important;
    }

    .navbar-toggler-icon {
        height: 25px;
        width: 25px;
    }

    #small-logo {
        height: 32px;
    }



    a.btn {
        width: 11.4em;
        height: 3.125em;
        font-size: .9rem;
        padding: auto;
    }

    #trustScroll .card p {
        font-size: 1.25rem !important;
    }

    #section7 {
        background-image: url('/images/soccer-background-mobile.png');
    }


    #hero-section {
        width: 100%;
    }

    #section1 h1 span {
        font-size: calc(40rem/16);
    }

    #section7 h1 {
        font-size: calc(48rem/16);
    }


    .accordion-button {
        font-size: 16px !important;
        padding: 16px !important;
    }

    .accordion-body {
        font-size: 1em !important;
        padding: 16px !important;
    }





    .section {
        padding: 0 calc(20rem/16);
    }



    #section8 {
        border: 0;
        border: none;
    }

    #section9 {
        border: none;
    }

    .navbar-button .btn {
        font-size: .9em;
    }

    #section4 {
        padding: 0;
        display: flex;
        align-items: evenly;
        background-image: url('../images/how_image.svg');
        background-position: center 45vh;
        background-repeat: no-repeat;
    }

    .degree-text {
        width: calc(276rem/16);
        text-wrap: balance;
    }




    .section-mobile-text {
        padding: 0 20px;
    }

    #section6 .section-mobile-text,
    #section8 .section-mobile-text {
        padding: 0 12px;
    }

    #section6 h2 {
        margin-bottom: 80px;
    }

    #section7-subheading {
        margin: 0 25px;
    }

    #section7 h1,
    #section7 p {
        margin-bottom: calc(60rem/16);
    }





    #section7 .container {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    footer p,
    footer .nav li {
        font-size: .75em;
    }

    footer a.btn {
        padding: 0;

    }


    a.btn {
        margin: 10px;
        padding: 10px 25px;
    }

    #section5 a.btn {
        margin-left: 20px;
        margin-top: 35px;
        margin-bottom: 0;
    }

    #section1 p {

        font-size: 1rem;
    }

    .container .degree-text {
        font-size: 1rem;
    }

    #section1 #subhead {
        text-wrap: wrap;
        font-weight: 600;
        font-size: calc(16rem/16);
        padding-bottom: 10px;
    }

    .trust-card {
        width: 65vw !important;
        height: 100%;
        margin-left: 20px;
    }

    #take-text {
        font-size: 1.5em !important;
    }

    .feature_card {
        width: 65vw !important;
        /* or 100%, or auto — depends on desired behavior */
        height: auto;
    }

    .section .container {
        padding-top: 50px;
    }



    #section2 #mobile-subheading {
        font-size: calc(24rem/16) !important;
    }

    .body-text h3 {
        margin-bottom: calc(20rem/16);
    }

    .body-text p {
        margin-bottom: calc(20rem/16);
    }

    .body-text {
        margin-left: 20px;
    }

    .body-text a.btn {
        margin-top: calc(35rem/16) !important;
    }

    #spacer {
        height: 15vh;
    }

    #spacer2 {
        height: 5vh;
        ;
    }

    #section4 .container {
        flex-grow: 1;
    }

    .accordion-flush .accordion-item {
        margin: 0.75em 0;
        border-radius: 1em !important;
        overflow: hidden;
    }

    #communityScroll .card {
        width: 70vw;
        height: auto;
    }

    h2 {
        font-size: calc(36rem/16) !important;
    }

    #communityScroll {
        margin-right: -20px;
        margin-left: -20px;
        padding-left: 20px;

    }

    #section6 a.btn {
        margin: 0;
    }









}

/* ipad */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* .section {
        min-height: 100vh;
        padding-left: 1em;
        padding-right: 1em;
    } */

    #section3 .container {
        min-height: auto !important;
    }

    #section4 #section4_top-left {
        top: 20%;
        left: -19%;
    }

    #section4 #section4_top-right {
        top: 10%;
        right: -20%;
    }

    #section4 #section4_bottom-left {
        bottom: 20%;
        left: -16%;
    }

    #section4 #section4_bottom-right {
        bottom: 10%;
        right: -20%;
    }

    .navbar .container .nav-link {
        font-size: .8rem;
    }

    #communityScroll {
        margin-left: -20px;

    }

}


/* desktop */
@media (min-width: 1000px) {
    #subhead {
    font-size: calc(20rem/16);
    margin: 0;
}

#section1 #btns {
    margin: 30px 0;
}
#section1-subheading {
    font-size: 1rem;
}

    #section5-wrapper {
    justify-content: center !important;}

    #small-logo {
        height: 38px;
    }

    footer {
        padding: 0 296px;
    }

    .body-text p {
        font-size: calc(20rem/16);
        margin: 40px 0;
    }

    #section2-body {
        justify-content: center !important;
    }

    #section2 h2 {
        margin-bottom: 0;
    }

    #section2 h3 {
        margin-top: 60px;
        margin-bottom: 0;
        font-size: calc(36rem/16);

    }

    .body-text {
        padding-left: 40px;
    }

    p.degree-text {
        font-size: calc(16rem/16);
        margin-top: 0;
    }

    .degree-box {
        margin-bottom: 40px;
    }

    #section2-image {
        padding-left: 50px;
    }

    #section3 .body-text {
        margin-top: 40px;
    }

    #section3 .body-text p {
        margin: 0;
        margin-bottom: 20px;
    }

    #section3 .degree-box {
        padding-top: 20px;
    }

    #section4 .degree-box {
        margin-top: 40px;
    }

    #section5 h2 {
        text-wrap: balance;
    }

    .trust-cards {
        margin: 36px 0;
    }

    .trust-cards .card {
        margin: 0 20px;
        padding: 20px;

    }

    .trust-cards .card p {
        margin: 0;
        padding: 0;
        padding-top: 20px;
    }

    #section5 .degree-box {
        margin-bottom: 36px;
    }

    .community-card p {
        margin: 0;
    }

    .community-card p+p {
        padding-top: 20px;
    }

    #communityScroll {
        margin: 36px 0;
    }

    #section7 #take-text {
        margin-top: 120px;
        margin-bottom: 60px;
        font-size: calc(32rem/16);
    }

    #section7 .container {
        justify-content: center !important;
    }

    #section7-subheading {
        margin-bottom: 60px;
    }



}










@media (min-width: 1200px) {
    .section {
        padding-left: 10rem;
        padding-right: 10rem;
    }

    .accordion-button.collapsed:hover {
        background-color: #e0e0e0;
        transition: background-color 0.4s ease;
    }

}

.feature_card {
    background-color: rgba(255, 255, 255, 0.5);
    width: 258px;
    backdrop-filter: blur(4px);
    transition: background-color 0.3s ease;

}

.feature_card .card-body {
    padding: 20px;
}

.feature_card h5 {
    padding: 10px 0;
}

.feature_card:hover,
.feature_card:active,
.feature_card.active {
    background-color: white;

}

.section4-wrapper {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

#section4-image {
    max-height: 640px;
    display: block;
}


#section4_top-left {
    top: 20%;
    left: -6%;
}

#section4_top-right {
    top: 10%;
    right: -5%;
}

#section4_bottom-left {
    bottom: 15%;
    left: -2%;
}

#section4_bottom-right {
    bottom: 10%;
    right: -5%;
}

a.btn-outline-primary.join-waitlist:hover,
a.btn-outline-primary.join-waitlist:focus {
    color: black !important;
    background-color: white;
    border: 0;
}

.overlay {
    position: absolute;
    z-index: 2;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.card {
    border: 0;
}

#trustScroll .card {
    padding: 20px;
}

.trust-cards .card {
    background-color: #58E079;
    transition: background-color .2s ease, filter .2s ease;
    height: 100%
}

.trust-cards .card:hover,
.trust-cards .card:active {
    background-color: white;
}

.trust-card {
    transition: background-color 0.2s ease;
}

.trust-card:hover,
.trust-card.active {
    background-color: white;
}

.trust-card {
    background-color: #58E079;
}

#trustScroll {
    margin-top: 80px;
    margin-right: -20px;
}



#trustScroll .card p {
    font-size: calc(20rem/16);
}

p {
    font-size: 1.1rem;

}





#mainNav.section-dark #small-logo:hover {
    filter: invert(1);
}



.icons {
    max-height: 40px;
    max-width: 40px;
}

.degree-image {
    max-width: 210px;
    z-index: 0;
}

#degree-image-wrapper {
    position: relative;
    z-index: 1 !important;
    display: inline-block !important;
}

@media (max-width: 768px) {
    .degree-image {
        max-width: 140px;
    }
}

#sub-hero {
    font-size: .8rem;
}

.degree-icon,
.check-icon {
    max-height: 24px;
}

h2 {
    font-size: calc(48rem/16);

}

h1 {
    text-wrap: balance;
}


.degree-text {
    font-size: 0.95rem;

}

.feature_card p {
    font-size: 1rem;

}

.feature_card h5 {
    font-size: 1.2rem;
}

/* Optional: smoother height animation (Bootstrap already does this internally) */
.accordion-collapse {
    transition: height 0.3s ease;
}

.accordion-flush .accordion-item {
    margin: 0.75em 0;
    border-radius: 2.5em;
    overflow: hidden;
}

.accordion-button {
    font-size: calc(20rem/16);
    padding: 1em 1.75em;
}

.accordion-body {
    font-size: 1.1rem;
    padding: 1.75em;
    padding-top: 1.25em;
}

.accordion-button:not(.collapsed) {
    background-color: #30D158;
    font-weight: bold;
    color: black;
}

.accordion-button::after {
    content: none;
}



#section5 .join-waitlist:hover {
    background-color: white;
}

.join-waitlist,
.schedule-demo {
    transition: background-color 0.2s ease;
}

.btn-group {
    height: 3.125em;
    width: 12.5em;
}

.section .container {
    padding: 60px 0;
    padding-top: 75px;
}

#section1 {
    padding-top: 75px;
}



#section6 .d-none .card:hover,
#section6 .d-none .card:active {

    transform: scale(1.02);

}

#section6 .card {
    transition: transform 0.3s ease;

}



#section4 .card {
    width: 280px;
}


#section6 p+p {
    font-weight: 600;
}


#howWorksScroll .card-body {
    padding: 20px;
}

.testimonial-scroll {
    align-items: flex-start !important;
}

#communityScroll .card {
    width: calc(280rem/16);
    height: auto;
}

#section1 {
    position: relative;
    overflow: hidden;
}

#section1::before,
#section1::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 1.5s ease-in-out;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

#section1>* {
    position: relative;
    z-index: 2;
}

#wedgeContainer {
    position: absolute;

    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Content (like h1/p/buttons) should render above wedge */
#section1>.min-vh-100 {
    position: relative;
    z-index: 3;
}

.btn-outline-primary {
    color: black;
    border: 1px solid black;
}

#section2 .btn-outline-primary,
#section4 .btn-outline-primary,
#section6 .btn-outline-primary,
#section8 .w-100>.btn-outline-primary {
    color: white;
    border: 1px solid white;
}


.accordion-button:focus,
.accordion-button:active {
    outline: none;
    box-shadow: none;

}

.schedule-nav:hover {
    background-color: #30D158 !important;
}

.accordion-body .btn.btn-outline-primary.join-waitlist:hover {
    background-color: #30D158 !important;
    color: white !important;
}



.btn-success:active,
.btn-success.active,
.show>.btn-primary.dropdown-toggle {
    background-color: #30D158 !important;
    box-shadow: none important;
    transform: none important;
    border-color: #30D158 important;
    /* Optional: match border to background */
}

footer .nav li:hover,
footer .nav li:focus,
footer .nav li.active,
footer .nav li:active {
    text-decoration: underline;
    color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 1000px) {

    #section6 {
        --section-horizontal-padding: 10rem;
    }

    #section6 .testimonial-scroll {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;

        padding-left: var(--section-horizontal-padding);

        margin-left: -50vw;
        margin-right: -50vw;
    }
}

.scroll-btn img {
    color: white;

}

.scroll-left {
    left: 0;
}

.scroll-right {
    right: 0;
}

.scroll-btn:hover {
    background: rgba(0, 0, 0, 0.6);
}

.row>* {
    padding: 0;
}

.community-card {
    padding: 20px;
    border-radius: 20px;
}

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}


.collapse.show {
  display: block !important;
  height: auto !important;
  transition: none !important;
}