.new-landing-body {
    font-family: 'Merriweather', sans-serif;
}

@media (min-width: 320px) {

    /****** LANDING PAGE NAVBAR AND HERO STYLES ******/
    .new-landing-main-content {
        background-image: linear-gradient(rgba(60, 60, 60, 0.6), rgba(60, 60, 60, 0.9)), url('/img/john_surgery_hero_image.JPG');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }


    /****** NAVBAR STYLES ******/

    .new-landing-nav-link {
        color: #ffffff !important;
        margin-left: 20px;
        margin-top: 6px;
    }

    .navbar-brand {
        color: #F28846 !important;
        margin-left: 20px;
    }

    .new-landing-navbar {
        background: transparent;
        box-shadow: none;
    }

    .new-landing-navbar-icon {
        width: 125px;
    }

    .new-landing-navbar-login-button {
        background: transparent;
        color: white;
        padding: 10px 20px;
        width: 100px;
        text-align: center;
        border: 1px solid rgb(210, 210, 210);
        border-radius: 999px;
        font-size: 1rem;
    }

    .new-landing-navbar-enroll-button {
        background-color: #F28846;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 999px;
        font-size: 1rem;
        width: 100px;
        text-align: center;
        margin-top: 10px;
    }

    .new-landing-navbar-toggler-icon {
        color: white;   
        font-size: 2rem;
        display: inline-block;
        position: relative;
    }

    /****** NAVBAR STYLES ******/



    /****** LANDING PAGE HERO SECTION STYLES ******/

    .new-landing-hero-section {
        text-align: center;
        padding: 50px 20px;
    }

    .new-landing-hero-section-header {
        font-size: 4rem;
        font-weight: 900;
        color: #ffffff;
        margin-bottom: 20px;
    }

    .new-landing-hero-section-header-highlight {
        color: #F28846;
        font-weight: 900;
        font-style: italic;
    }

    .new-landing-hero-section-sub-header {
        font-size: 1.25rem;
        font-weight: 200;
        color: #ffffff;
        margin-bottom: 40px;
    }

    .new-landing-hero-section-primary-cta-button {
        background-color: rgb(242, 136, 70);
        color: white;
        padding: 15px 30px;
        border: none;
        border-radius: 999px;
        font-size: 1.25rem;
        margin-bottom: 20px;
    }

    .new-landing-hero-section-primary-cta-button:hover {
        background-color: #D76B3C;
    }

    .new-landing-hero-section-secondary-cta-button {
        text-decoration: none;
        color: #F28846;
    }

    .new-landing-hero-section-secondary-cta-button:hover {
        text-decoration: underline;
        color: #F28846;
    }

    .new-landing-hero-section-image-card-carousel-container {
        display: flex;
        align-items: center;
        max-width: 1500px;
        margin: 0 auto;
        overflow: hidden;
    }

    .new-landing-hero-section-image-card-carousel-track {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 16px 0;
    }

    .new-landing-hero-section-image-card-carousel-item {
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        min-width: 200px;
        width: 300px;
        height: 400px;
        margin-top: 50px;
        display: inline-block;
        flex: 0 0 auto;
    }

    #lectures-carousel-item {
        background-color: #ffb98e;
    }

    #flashcards-carousel-item {
        background-color: #daf0b1;
    }

    #question-bank-carousel-item {
        background-color: #ffe2a3;
    }

    #paper-archive-carousel-item {
        background-color: #b789fd;
    }

    #surgical-video-log-carousel-item {
        background-color: #ffa7d4;
    }

    .new-landing-hero-section-image-card-header {
        font-size: 1.5rem;
        font-weight: 700;
        padding: 20px;
    }

    .new-landing-hero-section-image-card-image {
        width: 100%;
        display: block;
        position: relative;
        left: 20px;
    }

    #flashcards-image {
        width: 100%;
        left: 0;
        position: relative;
        margin-top: 20px;
    }

    .carousel-arrow {
        background: #eee;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        font-size: 20px;
        cursor: pointer;
        margin: 0 8px;
    }
    .carousel-arrow:active {
        background: #ccc;
    }


    /****** LANDING PAGE HERO SECTION STYLES ******/


    /****** NEW LANDING PAGE STATS SECTION ******/

    .new-landing-stats-section {    
        text-align: center;
        background-color: rgba(57, 57, 57, 0.3);
        padding-top: 15px;
        padding-bottom: 20px;
    }

    .new-landing-stats-section-header {
        font-size: 1rem;
        color: #3b3b3b;
    }

    .new-landing-stats-section-logos-container {
        margin-top: 10px;
    }

    .new-landing-stats-section-logos-image {
        width: 50%;
        max-width: 800px;
        display: block;
        margin: 0 auto;
    }


    /****************************/
    /* APP FEATURES SECTION */
    /****************************/

    .app-features-section-mobile {
        display: block;
        text-align: center;
        padding-top: 50px;
    }

    .app-features-section-desktop {
        display: none;
    }

    .app-features-header-mobile {
        font-size: 2.5rem;
        font-weight: 900;
    }

    .app-features-sub-header-mobile {
        font-size: 1.25rem;
        color: #F28846;
        margin-top: 20px;
    }

    .app-features-section-video-mobile {
        width: 90%; 
        height: auto;
        margin-top: 50px;
    }

    .app-feature-section-mobile {
        margin-top: 50px;
    }

    .app-feature-icon-mobile {
        font-size: 30px;
        border: 2px solid #F28846;
        padding: 20px;
        border-radius: 10%;
        color: #4d4d4d;
        width: 90px;
        margin: auto;
    }

    .app-feature-header-mobile {
        font-size: 2rem;
        font-weight: 700;
        margin-top: 15px;
    }

    .app-feature-sub-header-mobile {
        color: #4d4d4d;
        font-size: 1.25rem;
    }

    /****************************/
    /* END APP FEATURES SECTION */
    /****************************/


    /****************************/
    /* NEW LANDING TESTIMONIAL CAROUSEL */
    /****************************/

    /* .new-landing-testimonial-carousel-section {
        text-align: center;
        padding-top: 50px;
        padding-bottom: 100px;
        background-color: #ffb98e;
        margin-top: 50px;
    } */

    .new-landing-testimonial-carousel-section {
        text-align: center;
        padding-top: 50px;
        padding-bottom: 100px;
        margin-top: 50px;
        background-image: linear-gradient( rgba(20, 20, 20, .8),
        rgba(20, 20, 20, 1)), url(../img/sands_surgery_background_image.JPG);
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        text-align: center;
        color: white;
    }

    .new-landing-testimonial-carousel-header {
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 30px;
    }

    .testimonial-text {
        font-size: 1.25rem;
        font-style: italic;
        margin-bottom: 10px;
    }

    .testimonial-author {
        font-size: 1rem;
        color: #F28846;
        font-weight: 700;
    }
    .new-landing-testimonial-carousel-track {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 16px 0;
    }

    .partner-carousel-logo {
        width: 100%;
        max-width: 250px;
        height: auto;
        margin: 0 auto;
    }


    /****************************/
    /* NEW LANDING FAQ SECTION */
    /****************************/

    .new-landing-faq-section {
        text-align: center;
        padding: 50px 20px;
        background-color: #f0f0f0;
    }

    .new-landing-faq-section-header {
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 30px;
    }

    .new-landing-faq-accordion {
        max-width: 800px;
        margin-top: 50px;  
        margin-left: auto;
        margin-right: auto;
    }

    .new-landing-faq-section-item {
        margin-bottom: 25px;
        border: none;
        border-radius: 10px;
    }

    .new-landing-faq-section-question {
        font-weight: 700;
        font-size: 1.25rem;
        color: #333;
    }

    .new-landing-faq-section-answer {
        font-size: 0.9rem;
        color: #555;
    }


    /****************************/
    /* NEW LANDING CALL TO ACTION SECTION */
    /****************************/

    .new-landing-call-to-action-section {
        text-align: center;
        padding: 50px 20px;
        background-color: #E9CDB1;
    }

    .new-landing-call-to-action-header {
        font-size: 2.5rem;
        font-weight: 900;
        margin-top: 20px;
        margin-bottom: 50px;
    }

    .new-landing-call-to-action-sub-header {
        font-size: 1.25rem;
        color: #555;
        margin-bottom: 20px;
    }

    .new-landing-call-to-action-button {
        background-color: white;
        color: #555;
        padding: 15px 30px;
        border: none;
        border-radius: 999px;
        font-size: 1.25rem;
        margin-bottom: 20px;
    }

    .new-landing-call-to-action-button:hover {
        background-color: #F28846;
        color: white;
    }


    /****************************/
    /* NEW LANDING ALL FEATURES SECTION */
    /****************************/

    .new-landing-all-features-section {
        text-align: center;
        padding: 70px 20px;
        background-color: #f0f0f0;
    }

    .new-landing-all-features-header {
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 30px;
    }

    .new-landing-all-features-item {
        margin-bottom: 50px;
    }

    .new-landing-all-features-item-header {
        font-size: 2.5rem;
        font-weight: 700;
        color: #333;
    }

    .new-landing-all-features-item-description {
        font-size: 1.25rem;
        color: #555;
    }

    .new-landing-all-features-image {
        width: 100%;
        max-width: 500px;
        border-radius: 10px;
        margin-top: 20px;
    }

    #flashcards-feature-image {
        width: 100%;
        max-width: 800px;
        border-radius: 10px;
        margin-top: 20px;
    }

    #question-bank-feature-image {
        width: 100%;
        max-width: 800px;
        border-radius: 10px;
        margin-top: 20px;
    }

    #landmark-paper-archive-feature-image {
        width: 100%;
        max-width: 800px;
        border-radius: 10px;
        margin-top: 20px;
    }


    #surgical-video-log-feature-image {
        width: 100%;
        max-width: 800px;
        border-radius: 10px;
        margin-top: 20px;
    }

    #oral-boards-prep-feature-image {
        width: 100%;
        max-width: 800px;
        border-radius: 10px;
        margin-top: 20px;
    }

    .new-landing-all-features-hr {
        border: none;
        border-top: 2px solid #F28846;
        width: 80%;
        margin: auto;
        margin-top: 50px;
        margin-bottom: 50px;
        box-shadow: #F28846 0px 1px 3px 0px, rgba(0, 0, 0, 0.2) 0px 1px 1px -1px, rgba(0, 0, 0, 0.14) 0px 2px 1px -1px;
    }
}

@media (min-width: 768px) {
        /****** LANDING PAGE NAVBAR AND HERO STYLES ******/
    .new-landing-main-content {
        background-image: linear-gradient(rgba(60, 60, 60, 0.6), rgba(60, 60, 60, 0.9)), url('/img/john_surgery_hero_image.JPG');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }


    /****** NAVBAR STYLES ******/

    .new-landing-nav-link {
        color: #ffffff !important;
        margin-left: 20px;
        margin-top: 6px;
    }

    .navbar-brand {
        color: #F28846 !important;
        margin-left: 20px;
    }

    .new-landing-navbar {
        background: transparent;
        box-shadow: none;
    }

    .new-landing-navbar-icon {
        width: 125px;
    }

    .new-landing-navbar-login-button {
        background: transparent;
        color: white;
        padding: 10px 20px;
        width: 100px;
        text-align: center;
        border: 1px solid rgb(210, 210, 210);
        border-radius: 999px;
        font-size: 1rem;
    }

    .new-landing-navbar-enroll-button {
        background-color: #F28846;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 999px;
        font-size: 1rem;
        width: 100px;
        text-align: center;
    }

    .new-landing-navbar-toggler-icon {
        color: white;   
        font-size: 2rem;
        display: inline-block;
        position: relative;
    }

    /****** NAVBAR STYLES ******/



    /****** LANDING PAGE HERO SECTION STYLES ******/

    .new-landing-hero-section {
        text-align: center;
        padding: 150px 20px;
    }

    .new-landing-hero-section-header {
        font-size: 4rem;
        font-weight: 900;
        color: #ffffff;
        margin-bottom: 20px;
    }

    .new-landing-hero-section-header-highlight {
        color: #F28846;
        font-weight: 900;
        font-style: italic;
    }

    .new-landing-hero-section-sub-header {
        font-size: 1.25rem;
        font-weight: 200;
        color: #ffffff;
        margin-bottom: 40px;
    }

    .new-landing-hero-section-primary-cta-button {
        background-color: rgb(242, 136, 70);
        color: white;
        padding: 15px 30px;
        border: none;
        border-radius: 999px;
        font-size: 1.25rem;
        margin-bottom: 20px;
    }

    .new-landing-hero-section-primary-cta-button:hover {
        background-color: #D76B3C;
    }

    .new-landing-hero-section-secondary-cta-button {
        text-decoration: none;
        color: #F28846;
    }

    .new-landing-hero-section-secondary-cta-button:hover {
        text-decoration: underline;
        color: #F28846;
    }

    .new-landing-hero-section-image-card-carousel-container {
        display: flex;
        align-items: center;
        max-width: 1500px;
        margin: 0 auto;
        overflow: hidden;
    }

    .new-landing-hero-section-image-card-carousel-track {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 16px 0;
    }

    .new-landing-hero-section-image-card-carousel-item {
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        min-width: 200px;
        width: 300px;
        height: 400px;
        margin-top: 50px;
        display: inline-block;
        flex: 0 0 auto;
    }

    #lectures-carousel-item {
        background-color: #ffb98e;
    }

    #flashcards-carousel-item {
        background-color: #daf0b1;
    }

    #question-bank-carousel-item {
        background-color: #ffe2a3;
    }

    #paper-archive-carousel-item {
        background-color: #b789fd;
    }

    #surgical-video-log-carousel-item {
        background-color: #ffa7d4;
    }

    .new-landing-hero-section-image-card-header {
        font-size: 1.5rem;
        font-weight: 700;
        padding: 20px;
    }

    .new-landing-hero-section-image-card-image {
        width: 100%;
        display: block;
        position: relative;
        left: 20px;
    }

    #flashcards-image {
        width: 100%;
        left: 0;
        position: relative;
        margin-top: 20px;
    }

    .carousel-arrow {
        background: #eee;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        font-size: 20px;
        cursor: pointer;
        margin: 0 8px;
    }
    .carousel-arrow:active {
        background: #ccc;
    }


    /****** LANDING PAGE HERO SECTION STYLES ******/


    /****** NEW LANDING PAGE STATS SECTION ******/

    .new-landing-stats-section {    
        text-align: center;
        background-color: rgba(57, 57, 57, 0.3);
        padding-top: 15px;
        padding-bottom: 20px;
    }

    .new-landing-stats-section-header {
        font-size: 1rem;
        color: #3b3b3b;
    }

    .new-landing-stats-section-logos-container {
        margin-top: 10px;
    }

    .new-landing-stats-section-logos-image {
        width: 50%;
        max-width: 800px;
        display: block;
        margin: 0 auto;
    }


    /****************************/
    /* APP FEATURES SECTION */
    /****************************/

    .app-features-section-mobile {
        display: none;
    }

    .app-features-section-desktop {
        display: block;
    }

    .app-features-section {
        text-align: center;
        padding-top: 50px;
    }

    .app-features-header {
        font-size: 2.5rem;
        font-weight: 900;
    }

    .app-features-sub-header {
        color: #F28846;
        margin-top: 20px;
    }

    .app-features-sub-header {
        font-size: 20px;
    }

    .app-features-section-video {
        width: 90%; 
        height: auto;
        margin-top: 50px;
    }

    .app-feature-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 50px;
        height: 200px;
    }

    .app-feature-text-section {
        display: flex;
        flex-direction: column;
        text-align: right;
        width: 80%;
        margin-right: 20px;
    }

    #app-feature-text-section-right {
        text-align: left;
        margin-right: 0px;
        margin-left: 20px;
    }

    .app-feature-icon {
        font-size: 30px;
        margin-left: 16px;
        border: 2px solid #F28846;
        padding: 20px;
        border-radius: 10%;
        color: #4d4d4d;
    }

    #icon-left {
        margin-left: 0px;
        margin-right: 16px;
    }

    .app-feature-header {
        font-size: 25px;
        font-weight: 700;
        margin-top: 15px;
    }

    .app-feature-sub-header {
        font-size: 16px;
        color: #4d4d4d;
    }

    /****************************/
    /* END APP FEATURES SECTION */
    /****************************/


    /****************************/
    /* NEW LANDING TESTIMONIAL CAROUSEL */
    /****************************/

    /* .new-landing-testimonial-carousel-section {
        text-align: center;
        padding-top: 50px;
        padding-bottom: 100px;
        background-color: #ffb98e;
        margin-top: 50px;
    } */

    .new-landing-testimonial-carousel-section {
        text-align: center;
        padding-top: 50px;
        padding-bottom: 100px;
        margin-top: 50px;
        background-image: linear-gradient( rgba(20, 20, 20, .8),
        rgba(20, 20, 20, 1)), url(../img/sands_surgery_background_image.JPG);
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        text-align: center;
        color: white;
    }

    .new-landing-testimonial-carousel-header {
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 30px;
    }

    .testimonial-text {
        font-size: 1.25rem;
        font-style: italic;
        margin-bottom: 10px;
    }

    .testimonial-author {
        font-size: 1rem;
        color: #F28846;
        font-weight: 700;
    }
    .new-landing-testimonial-carousel-track {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 16px 0;
    }

    .partner-carousel-logo {
        width: 100%;
        max-width: 350px;
        height: auto;
        margin: 0 auto;
    }


    /****************************/
    /* NEW LANDING FAQ SECTION */
    /****************************/

    .new-landing-faq-section {
        text-align: center;
        padding: 50px 20px;
        background-color: #f0f0f0;
    }

    .new-landing-faq-section-header {
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 30px;
    }

    .new-landing-faq-accordion {
        max-width: 800px;
        margin-top: 50px;  
        margin-left: auto;
        margin-right: auto;
    }

    .new-landing-faq-section-item {
        margin-bottom: 25px;
        border: none;
        border-radius: 10px;
    }

    .new-landing-faq-section-question {
        font-weight: 700;
        font-size: 1.25rem;
        color: #333;
    }

    .new-landing-faq-section-answer {
        font-size: 0.9rem;
        color: #555;
    }


    /****************************/
    /* NEW LANDING CALL TO ACTION SECTION */
    /****************************/

    .new-landing-call-to-action-section {
        text-align: center;
        padding: 50px 20px;
        background-color: #E9CDB1;
    }

    .new-landing-call-to-action-header {
        font-size: 2.5rem;
        font-weight: 900;
        margin-top: 20px;
        margin-bottom: 50px;
    }

    .new-landing-call-to-action-sub-header {
        font-size: 1.25rem;
        color: #555;
        margin-bottom: 20px;
    }

    .new-landing-call-to-action-button {
        background-color: white;
        color: #555;
        padding: 15px 30px;
        border: none;
        border-radius: 999px;
        font-size: 1.25rem;
        margin-bottom: 20px;
    }

    .new-landing-call-to-action-button:hover {
        background-color: #F28846;
        color: white;
    }


    /****************************/
    /* NEW LANDING ALL FEATURES SECTION */
    /****************************/

    .new-landing-all-features-section {
        text-align: center;
        padding: 70px 20px;
        background-color: #f0f0f0;
    }

    .new-landing-all-features-header {
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 30px;
    }

    .new-landing-all-features-item {
        margin-bottom: 50px;
    }

    .new-landing-all-features-item-header {
        font-size: 2.5rem;
        font-weight: 700;
        color: #333;
    }

    .new-landing-all-features-item-description {
        font-size: 1.25rem;
        color: #555;
    }

    .new-landing-all-features-image {
        width: 100%;
        max-width: 500px;
        border-radius: 10px;
        margin-top: 20px;
    }

    #flashcards-feature-image {
        width: 100%;
        max-width: 800px;
        border-radius: 10px;
        margin-top: 20px;
    }

    #question-bank-feature-image {
        width: 100%;
        max-width: 800px;
        border-radius: 10px;
        margin-top: 20px;
    }

    #landmark-paper-archive-feature-image {
        width: 100%;
        max-width: 800px;
        border-radius: 10px;
        margin-top: 20px;
    }


    #surgical-video-log-feature-image {
        width: 100%;
        max-width: 800px;
        border-radius: 10px;
        margin-top: 20px;
    }

    #oral-boards-prep-feature-image {
        width: 100%;
        max-width: 800px;
        border-radius: 10px;
        margin-top: 20px;
    }

    .new-landing-all-features-hr {
        border: none;
        border-top: 2px solid #F28846;
        width: 80%;
        margin: auto;
        margin-top: 50px;
        margin-bottom: 50px;
        box-shadow: #F28846 0px 1px 3px 0px, rgba(0, 0, 0, 0.2) 0px 1px 1px -1px, rgba(0, 0, 0, 0.14) 0px 2px 1px -1px;
    }
}

@media (min-width: 1024px) {

}