@import "fonts.css";
@import "modal.css";
@import "symptoms-table.css";

* {
    box-sizing: inherit; /* Ensures all elements follow box-sizing rule */
}
html {
    max-width: 1920px;
    margin: auto;
}

.w3-top {
    max-width: 1920px;
}

h1,h2,h3,h4,h5,h6 {
    font-family: "Fieldwork Geo", sans-serif !important;
}
p,a,li {
    font-family: "Fieldwork Hum", sans-serif !important;
}
i {
    font-family: "Fieldwork Italic", sans-serif;
}

body, html {
    height: 100%;
    line-height: 1.8;
    min-height: 100%;

}
@media only screen and (max-width: 320px) {
    body.home {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/Pls0wDxxhZK5nfi1qOe2C8SeUKMqOw202TFv9egC.png");
        min-height: 100%;
        background-repeat: no-repeat;
        background-position-y: -180% !important;
    }
    body.about-nph, body.about-stride, body.for-hcps {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ukxvE2ioC1EOjvguFbztw1sVbyHYNwnd9KszdbYG.png");
        min-height: 100%;
        background-repeat: no-repeat;
    }
}
@media only screen and (max-width: 435px) {
    body.home {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/Pls0wDxxhZK5nfi1qOe2C8SeUKMqOw202TFv9egC.png");
        min-height: 100%;
        background-repeat: no-repeat;
        background-position-y: -27%;
    }
    body.about-nph, body.about-stride, body.for-hcps {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ukxvE2ioC1EOjvguFbztw1sVbyHYNwnd9KszdbYG.png");
        min-height: 100%;
        background-repeat: no-repeat;
    }
}
@media only screen and (min-width: 436px) and (max-width: 768px) {
    body.home {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/Pls0wDxxhZK5nfi1qOe2C8SeUKMqOw202TFv9egC.png");
        min-height: 100%;
        background-repeat: no-repeat;
        background-position-y: 50%;
    }
    body.about-nph, body.about-stride, body.for-hcps {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ukxvE2ioC1EOjvguFbztw1sVbyHYNwnd9KszdbYG.png");
        min-height: 100%;
        background-repeat: no-repeat;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1280px) {
    body.home {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/Pls0wDxxhZK5nfi1qOe2C8SeUKMqOw202TFv9egC.png");
        min-height: 100%;
        background-repeat: no-repeat;
        background-position-y: 75%;
    }
    body.about-nph, body.about-stride, body.for-hcps {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ukxvE2ioC1EOjvguFbztw1sVbyHYNwnd9KszdbYG.png");
        min-height: 100%;
        background-repeat: no-repeat;
        background-position-y: 60%;
    }
}

@media only screen and (max-width: 1535px) and (min-width: 1281px) {
    body.home {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ko0nfgnJquOPygRi5oJ0V7D4KW1IfRMHhg0s7ud1.png");
        min-height: 100%;
        background-repeat: no-repeat;
        background-position-y: 5%;
    }
    body.about-nph, body.about-stride, body.for-hcps {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/AZLaJnmbxjo2NsuQ29tMTFRDTqyDdiXhCo6s79PD.png");
        min-height: 100%;
        background-repeat: no-repeat;
    }
}
@media only screen and (max-width: 1599px) and (min-width: 1536px) {
    body.home {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ko0nfgnJquOPygRi5oJ0V7D4KW1IfRMHhg0s7ud1.png");
        min-height: 100%;
        background-repeat: no-repeat;
        background-position-y: 20%;
    }
    body.about-nph, body.about-stride, body.for-hcps {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/AZLaJnmbxjo2NsuQ29tMTFRDTqyDdiXhCo6s79PD.png");
        min-height: 100%;
        background-repeat: no-repeat;
    }
}
@media only screen and (min-width: 1600px) {
    body.home {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ko0nfgnJquOPygRi5oJ0V7D4KW1IfRMHhg0s7ud1.png");
        min-height: 100%;
        background-repeat: no-repeat;
        background-position-y: 40%;
    }
    body.about-nph, body.about-stride, body.for-hcps {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/AZLaJnmbxjo2NsuQ29tMTFRDTqyDdiXhCo6s79PD.png");
        min-height: 100%;
        background-repeat: no-repeat;
    }
}


.link-active {
    color: #5a4e9d !important;
    font-weight: 700;
}

/* Full height image header */
.bgimg-1 {
    min-height: 100%;
}

.w3-bar .w3-button {
    padding: 16px;
}

#home-logo:hover {
    background: none !important;
}

.link-hover:hover {
    color: #36AACC !important;
    background: none !important;
}

.pq-hover:hover {
    color: #000 !important;
    background: #36AACC !important;
}

.hide {
    display: none !important;
}

#home {
    margin-top: 102px;
}

/* Container that centers content and ensures responsive layout */
.container {
    padding: 20px 50px 0 50px;
}

/* Background image container */
@media only screen and (min-width: 426px) {
    .background-box {
        background-image: url(https://s3.amazonaws.com/surveysprod/studies/1178/sGGhX00KqnGMpVVieZm9nMjb3yW23Q47UcOoxBlN.png);
        background-size: 85% 100%;
        background-position: top right;
        background-repeat: no-repeat;
        background-color: #36AACC;
        padding: 40px;
        border-radius: 10px 320px 10px 10px;
    }

    /* Overlay effect for better readability of text */
    .background-box::before {
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0); /* Adjust opacity for readability */
        border-radius: 5px;
        border-top-right-radius: 165px;
        z-index: 1;
    }
}

/* Text content in the box */
.content {
    text-align: left;
}

/* Styling for large text headings */
h1 {
    font-size: 48px;
    margin: 10px 0;
}

h3 {
    font-size: 24px;
    margin: 10px 0;
}

a {
    text-decoration: none;
    color: inherit;
}
@media only screen and (max-width: 344px) {
    .text-center {
        text-align: center !important;
    }
    .desktop {
        display: none !important;
    }
    #myNavbar #mainNavDiv {
        width:100% !important;
    }
    #about .nph-container {
        /*background-size: cover;*/
        /*background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/Pls0wDxxhZK5nfi1qOe2C8SeUKMqOw202TFv9egC.png");*/
        /*background-repeat: no-repeat;*/
        /*background-position-y: -15%;*/
        min-height: 980px;
    }
    .background-box {
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/IbYQImFojFEmRufbXOw71HQdBB4mFO5jrvLvN2bd.png");
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        background-color: #36AACC;
        padding: 20px;
        border-radius: 10px 100px 10px 10px;
        min-height: 1600px;
    }
    /*.background-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 5px;
        border-top-right-radius: 165px;
        z-index: 1;
    }*/
    #home {
        overflow: hidden auto;
    }
    #home .container {
        padding: 10px !important;
    }
    #home #non-hero h2 {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 30px;
        text-transform: uppercase
    }
    #home #non-hero h2.hcp {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 28px;
        text-transform: uppercase
    }

    #home #non-hero #couple-img {
        width: 80%;
        margin-left: 3em;
        margin-top: 20px;
    }
    #home .content h1 {
        margin-left: 0;
        font-size: 45px;
    }
    #home .content h3 {
        margin-left: 0;
        font-size: 25px;
    }
    #home #non-hero-content {
        width: 100% !important;
    }
    .wide-info-box {
        width: 100%;
        padding: 10px;
        min-height: 600px;
    }

    .wide-info-box p {
        margin: 15px 0 !important;
        padding: 0 10px;
        font-size: 22px;
        line-height: 1.5;
    }
    #about .container {
        padding: 0 !important;
        overflow: hidden auto;
    }
    .nph-header {
        margin-left: 5px;
        font-size: 34px;
    }
    .nph-text {
        margin-left: 5px;
        font-size: 16px !important;
    }
    .wide-info-box-nph {
        padding: 20px;
        border-radius: 50px;
        max-width: 1000px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: left;
        margin: 5px auto;
        min-height: 930px;
        backdrop-filter: blur(3px);
    }
    #about .purple-button {
        margin-left:5px !important;
    }
    .text-container h2 {
        line-height: 1.3;
    }
    .transparent-box {
        background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
        padding: 20px 30px;
        border-radius: 20px;
        position: relative;
        min-height: 1520px;
        backdrop-filter: blur(3px);
    }
    #stridect {
        min-height: 100%;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/qr3SH2eywc5jpBdJP05KI9z5yxiUq3uXPTjj99Qa.png");
        background-position-y: 50%;
        overflow: hidden auto;
    }

    .headline-box {
        padding: 10px;
        width: 65%;
        margin: 260px auto 20px 25% !important;
    }

    #mobile-white-pen {
        position: relative;
        bottom: 140px;
        width: 100%;
        margin-bottom: -200px;
        overflow: hidden;
    }

    .headline {
        margin: 0;
        text-align: left;
        color: white;
        font-size: 35px !important;
        line-height: 1.2;
    }

    .white-pen-block {
        position: relative;
        float: left;
        top: 185px;
        left: 25px;
        width: 385px;
    }
    .white-pen-block img {
        width: 100% !important;
    }
    /* About NPH Page */
    .info-box-3 {
        width: 100% !important;
        padding: 20px;
        margin-top: 30px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    /* Image on the left side */
    .info-box-3 img {
        width: 115px;
        height: 115px;
        margin-right: 0 !important;
    }

    /* Text styling */
    .info-box-text {
        color: rgb(90, 78, 157);
        font-weight: 700;
    }

    /* The part of the text that is bold and in color */
    .info-box-text h6 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    #stride .stride-container {
        padding: 0;
    }

    /* Container to hold the content */
    .info-box-container-2 {

    }

    /* The main box with fully transparent background */
    .info-box-2 {
        background-color: rgba(255, 255, 255, 0); /* Fully transparent background */
        border-radius: 15px; /* Rounded corners */
        padding: 20px;
        border: none; /* Remove border if any */
    }

    .info-box-2 .info-box-text {
        font-size: 24px;
        line-height: 1.1;
    }

    .info-box-2 .info-box-text #info-header {
        width: 55%;
        float:left;
        min-height: 240px;
    }
    #thanks {
        background: none !important;
    }
    #thanks .container {
        min-height: 450px;
        padding: 5px;
    }
    #thanks .info-box-2 .info-box-text #info-header {
        width: 55%;
        float:left;
        min-height: 180px;
    }

    #stride, #thanks {
        color: #5a509f; /* Text color */
        margin: 0 -8px;
        overflow: hidden auto;
    }

    #stride #purple-pen {
        width: 45%;
        overflow: hidden;
        float: right;
        min-height: 288px;
        margin-left: -20px;
    }
    #stride #purple-pen img {
        width: 90%;
        padding-top: 50px;
    }

    #thanks #purple-pen {
        width: 45%;
        float: right;
        min-height: 200px;
        position: relative;
        left: -40px;
        margin-left: -20px;
        z-index: -1
    }
    #thanks #purple-pen img {
        height: 200px;
        padding-top: 50px;
        margin-left: 40px;
        overflow: hidden;
    }

    .symptoms-container {
        padding: 5px !important;
        overflow: hidden auto;
    }

    #treatment-table-desktop {
        display: none !important;
    }
    #treatment-table-mobile {

    }

    .info-box-container {
        background: linear-gradient(to right, #48b773 0%, #34b3d0 33%, #36AACC 66%); /* Background gradient */
        padding: 20px;
        display: flex;
        justify-content: center; /* Centers the content horizontally */
    }

    /* The main box with semi-transparent white background */
    .info-box {
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
        border-radius: 50px; /* Rounded corners */
        padding: 20px;
        max-width: 95%; /* Limit the width of the box */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
    }

    /* Text styling */
    .info-box-text {
        margin: 0;
        font-size: 20px;
        color: #333;
    }

    .info-box img {
        display: block;
        margin: auto;
        width: 50%;
        max-width: 400px;
        height: auto;
    }

    .purple-button {
        width: 95% !important;
        padding: 10px !important;
        font-weight: 700;
        font-size: 20px;
        background-color: #5a509f;
        text-transform: uppercase;
        text-align: center;
        color: #FFFFFF;
        float: left;
        border-radius: 35px;
    }
    .white-button {
        width: 350px;
        padding: 7px;
        font-weight: 700;
        font-size: 16px;
        background-color: #FFFFFF;
        text-transform: uppercase;
        text-align: center;
        color: #5a509f;
        float: left;
        border-radius: 35px;
        border: #5a509f 4px solid;
    }
    .boxes .box-content {
        width: 100% !important;
        margin: auto;
    }
    #shunt-table-desktop {
        display: none !important;
    }
    #traditional-shunt-mobile {
    }
    #eshunt-system-mobile {
    }
    h6.mobile-item {
        height: 75px;
        background-color: rgba(242, 242, 242, 0.9);
        border-radius: 50px;
        margin: 0 auto 20px;
        color: #5a509f;
        font-weight: 700;
        padding: 19px;
        font-size: 20px;
        width: 80%;
    }
    .study-design-boxes {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px 40px;
        border-radius: 40px;
        border: 1px solid green;
        position: relative;
        margin-bottom: 15px;
    }
    .box-1, .box-3 {
    }

    .box-2 {
    }
    .nph-about {
        background: linear-gradient(
                0deg,
                rgba(52,179,208,1) 0%,
                rgba(255,255,255,1) 85%,
                rgba(255,255,255,0) 100%) !important;
    }
    .patient-eligibility-container {
        padding: 5px !important;
    }
    .patient-eligibility-container h2 {
        font-size: 30px !important;
        margin-bottom: 0 !important;
    }
    .stride-eligibility-header h3 {
        padding: 0 20px;
    }
    .stride-eligibility-image {
        width: 100px;
        margin-left: 10px;
        float: left;
    }

    .stride-eligibility-image img {
        height: 75px;
    }

    .stride-eligibility-text {
        margin-top: 20px;
    }

    .stride-eligibility-text h6 {
        font-size: 30px !important;
        margin-top: 20px;
    }

    .stride-eligibility-text ul {
        margin-top: 25px;
    }
    #eshunt-content, #breakthrough-content {
        text-align: center;
    }
    .blue-gradient {
        background: linear-gradient(0deg, rgba(52,179,208,1) 0%, rgba(255,255,255,1) 87%, rgba(255,255,255,0) 100%)
    }
}
@media only screen and (min-width: 345px) and (max-width: 409px) {
    .text-center {
        text-align: center !important;
    }
    .desktop {
        display: none !important;
    }
    #myNavbar #mainNavDiv {
        width:100% !important;
    }
    #about .nph-container {
        /*background-size: cover;*/
        /*background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/Pls0wDxxhZK5nfi1qOe2C8SeUKMqOw202TFv9egC.png");*/
        /*background-repeat: no-repeat;*/
        /*background-position-y: -15%;*/
        min-height: 980px;
    }
    .background-box {
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/IbYQImFojFEmRufbXOw71HQdBB4mFO5jrvLvN2bd.png");
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        background-color: #36AACC;
        padding: 20px;
        border-radius: 10px 100px 10px 10px;
        min-height: 1300px;
    }
    /*.background-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 5px;
        border-top-right-radius: 165px;
        z-index: 1;
    }*/
    #home {
        overflow: hidden auto;
    }
    #home .container {
        padding: 10px !important;
    }
    #home #non-hero h2 {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 30px;
        text-transform: uppercase
    }
    #home #non-hero h2.hcp {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 28px;
        text-transform: uppercase
    }

    #home #non-hero #couple-img {
        width: 80%;
        margin-left: 3em;
        margin-top: 20px;
    }
    #home .content h1 {
        margin-left: 0;
        font-size: 45px;
    }
    #home .content h3 {
        margin-left: 0;
        font-size: 25px;
    }
    #home #non-hero-content {
        width: 100% !important;
    }
    .wide-info-box {
        width: 100%;
        padding: 10px;
        min-height: 500px;
    }

    .wide-info-box p {
        margin: 15px 0;
        padding: 0 10px;
        font-size: 22px;
        line-height: 1.5;
    }
    #about .container {
        padding: 0 !important;
        overflow: hidden auto;
    }
    .nph-header {
        margin-left: 5px;
        font-size: 34px;
    }
    .nph-text {
        margin-left: 5px;
        font-size: 16px !important;
    }
    .wide-info-box-nph {
        padding: 20px;
        border-radius: 50px;
        max-width: 1000px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: left;
        margin: 5px auto;
        min-height: 680px;
        backdrop-filter: blur(3px);
    }
    #about .purple-button {
        margin-left:5px !important;
    }
    .text-container h2 {
        line-height: 1.3;
    }
    .transparent-box {
        background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
        padding: 20px 30px;
        border-radius: 20px;
        position: relative;
        min-height: 1180px;
        backdrop-filter: blur(3px);
    }
    #stridect {
        min-height: 100%;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/qr3SH2eywc5jpBdJP05KI9z5yxiUq3uXPTjj99Qa.png");
        background-position-y: 50%;
        overflow: hidden auto;
    }

    .headline-box {
        padding: 10px;
        width: 65%;
        margin: 160px auto 20px 35% !important;
    }

    #mobile-white-pen {
        position: relative;
        bottom: 140px;
        width: 100%;
        margin-bottom: -160px;
        overflow: hidden;
    }

    .headline {
        margin: 0;
        text-align: left;
        color: white;
        font-size: 35px !important;
        line-height: 1.2;
    }

    .white-pen-block {
        position: relative;
        float: left;
        top: 185px;
        left: 25px;
        width: 385px;
    }
    .white-pen-block img {
        width: 100% !important;
    }
    /* About NPH Page */
    .info-box-3 {
        width: 100% !important;
        padding: 20px;
        margin-top: 30px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    /* Image on the left side */
    .info-box-3 img {
        width: 115px;
        height: 115px;
        margin-right: 0 !important;
    }

    /* Text styling */
    .info-box-text {
        color: rgb(90, 78, 157);
        font-weight: 700;
    }

    /* The part of the text that is bold and in color */
    .info-box-text h6 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    #stride .stride-container {
        padding: 0;
    }

    /* Container to hold the content */
    .info-box-container-2 {

    }

    /* The main box with fully transparent background */
    .info-box-2 {
        background-color: rgba(255, 255, 255, 0); /* Fully transparent background */
        border-radius: 15px; /* Rounded corners */
        padding: 20px;
        border: none; /* Remove border if any */
    }

    .info-box-2 .info-box-text {
        font-size: 24px;
        line-height: 1.1;
    }

    .info-box-2 .info-box-text #info-header {
        width: 55%;
        float:left;
        min-height: 240px;
    }
    .info-box-2 .info-box-text .info-disclaimer {
        width: 55%;
        clear: both;
    }
    #thanks {
        background: none !important;
    }
    #thanks .container {
        min-height: 450px;
        padding: 5px;
    }
    #thanks .info-box-2 .info-box-text #info-header {
        width: 55%;
        float:left;
        min-height: 180px;
    }

    #stride, #thanks {
        color: #5a509f; /* Text color */
        margin: 0 -8px;
        overflow: hidden auto;
    }

    #stride #purple-pen {
        width: 45%;
        overflow: hidden;
        float: right;
        min-height: 288px;
        margin-left: -20px;
    }
    #stride #purple-pen img {
        width: 90%;
        padding-top: 50px;
    }

    #thanks #purple-pen {
        width: 45%;
        float: right;
        min-height: 200px;
        position: relative;
        left: -40px;
        margin-left: -20px;
        z-index: -1
    }
    #thanks #purple-pen img {
        height: 250px;
        padding-top: 50px;
        margin-left: 40px;
        overflow: hidden;
    }

    .symptoms-container {
        padding: 5px !important;
        overflow: hidden auto;
    }

    #treatment-table-desktop {
        display: none !important;
    }
    #treatment-table-mobile {

    }

    .info-box-container {
        background: linear-gradient(to right, #48b773 0%, #34b3d0 33%, #36AACC 66%); /* Background gradient */
        padding: 20px;
        display: flex;
        justify-content: center; /* Centers the content horizontally */
    }

    /* The main box with semi-transparent white background */
    .info-box {
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
        border-radius: 50px; /* Rounded corners */
        padding: 20px;
        max-width: 95%; /* Limit the width of the box */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
    }

    /* Text styling */
    .info-box-text {
        margin: 0;
        font-size: 20px;
        color: #333;
    }

    .info-box img {
        display: block;
        margin: auto;
        width: 50%;
        max-width: 400px;
        height: auto;
    }

    .purple-button {
        width: 95% !important;
        padding: 10px !important;
        font-weight: 700;
        font-size: 20px;
        background-color: #5a509f;
        text-transform: uppercase;
        text-align: center;
        color: #FFFFFF;
        float: left;
        border-radius: 35px;
    }
    .white-button {
        width: 350px;
        padding: 7px;
        font-weight: 700;
        font-size: 16px;
        background-color: #FFFFFF;
        text-transform: uppercase;
        text-align: center;
        color: #5a509f;
        float: left;
        border-radius: 35px;
        border: #5a509f 4px solid;
    }
    .boxes .box-content {
        width: 100% !important;
        margin: auto;
    }
    #shunt-table-desktop {
        display: none !important;
    }
    #traditional-shunt-mobile {
    }
    #eshunt-system-mobile {
    }
    h6.mobile-item {
        height: 75px;
        background-color: rgba(242, 242, 242, 0.9);
        border-radius: 50px;
        margin: 0 auto 20px;
        color: #5a509f;
        font-weight: 700;
        padding: 19px;
        font-size: 20px;
        width: 80%;
    }
    .study-design-boxes {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px 40px;
        border-radius: 40px;
        border: 1px solid green;
        position: relative;
        margin-bottom: 15px;
    }
    .box-1, .box-3 {
    }

    .box-2 {
    }
    .nph-about {
        background: linear-gradient(
                0deg,
                rgba(52,179,208,1) 0%,
                rgba(255,255,255,1) 85%,
                rgba(255,255,255,0) 100%) !important;
    }
    .patient-eligibility-container {
        padding: 5px !important;
    }
    .patient-eligibility-container h2 {
        font-size: 30px !important;
        margin-bottom: 0 !important;
    }
    .stride-eligibility-header h3 {
        padding: 0 20px;
    }
    .stride-eligibility-image {
        width: 100px;
        margin-left: 10px;
        float: left;
    }

    .stride-eligibility-image img {
        height: 75px;
    }

    .stride-eligibility-text {
        margin-top: 20px;
    }

    .stride-eligibility-text h6 {
        font-size: 30px !important;
        margin-top: 20px;
    }

    .stride-eligibility-text ul {
        margin-top: 25px;
    }
    #eshunt-content, #breakthrough-content {
        text-align: center;
    }
    .blue-gradient {
        background: linear-gradient(0deg, rgba(52,179,208,1) 0%, rgba(255,255,255,1) 87%, rgba(255,255,255,0) 100%)
    }
}
@media only screen and (min-width: 410px) and (max-width:500px) {
    .text-center {
        text-align: center !important;
    }
    .desktop {
        display: none !important;
    }
    #myNavbar #mainNavDiv {
        width:100% !important;
    }
    #about .nph-container {
        /*background-size: cover;*/
        /*background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/Pls0wDxxhZK5nfi1qOe2C8SeUKMqOw202TFv9egC.png");*/
        /*background-repeat: no-repeat;*/
        /*background-position-y: -15%;*/
        min-height: 980px;
    }
    .background-box {
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/IbYQImFojFEmRufbXOw71HQdBB4mFO5jrvLvN2bd.png");
        background-size: cover;
        background-position: bottom left;
        background-repeat: no-repeat;
        background-color: #36AACC;
        padding: 20px;
        border-radius: 10px 100px 10px 10px;
        min-height: 1200px;
    }
    /*.background-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 5px;
        border-top-right-radius: 165px;
        z-index: 1;
    }*/
    #home {
        overflow: hidden auto;
    }
    #home .container {
        padding: 10px !important;
    }
    #home #non-hero h2 {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 30px;
        text-transform: uppercase
    }
    #home #non-hero h2.hcp {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 28px;
        text-transform: uppercase
    }

    #home #non-hero #couple-img {
        width: 80%;
        margin-left: 3em;
        margin-top: 20px;
    }
    #home .content h1 {
        margin-left: 0;
        font-size: 45px;
    }
    #home .content h3 {
        margin-left: 0;
        font-size: 25px;
    }
    #home #non-hero-content {
        width: 100% !important;
    }
    .wide-info-box {
        width: 100%;
        padding: 20px;
        min-height: 500px;
    }

    .wide-info-box p {
        margin: 15px 0;
        padding: 0 10px;
        font-size: 22px;
        line-height: 1.5;
    }
    #about .container {
        padding: 0 !important;
        overflow: hidden auto;
    }
    .nph-header {
        margin-left: 5px;
        font-size: 34px;
    }
    .nph-text {
        margin-left: 5px;
        font-size: 16px !important;
    }
    .wide-info-box-nph {
        padding: 20px;
        border-radius: 50px;
        max-width: 1000px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: left;
        margin: 5px auto;
        min-height: 680px;
        backdrop-filter: blur(3px);
    }
    #about .purple-button {
        width: 330px !important;
        margin-left:5px !important;
    }
    .text-container h2 {
        line-height: 1.3;
    }
    .transparent-box {
        background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
        padding: 20px 30px;
        border-radius: 20px;
        position: relative;
        min-height: 1010px;
        backdrop-filter: blur(3px);
    }
    #stridect {
        min-height: 100%;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/qr3SH2eywc5jpBdJP05KI9z5yxiUq3uXPTjj99Qa.png");
        background-position-y: 50%;
        overflow: hidden auto;
    }

    .headline-box {
        padding: 10px;
        width: 65%;
        margin: 160px auto 20px 45% !important;
    }

    #mobile-white-pen {
        position: relative;
        bottom: 140px;
        width: 100%;
        margin-bottom: -160px;
        overflow: hidden;
    }

    .headline {
        margin: 0;
        text-align: left;
        color: white;
        font-size: 35px !important;
        line-height: 1.2;
    }

    .white-pen-block {
        position: relative;
        float: left;
        top: 185px;
        left: 25px;
        width: 385px;
    }
    .white-pen-block img {
        width: 100% !important;
    }
    /* About NPH Page */
    .info-box-3 {
        width: 100% !important;
        padding: 20px;
        margin-top: 30px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    /* Image on the left side */
    .info-box-3 img {
        width: 115px;
        height: 115px;
        margin-right: 0 !important;
    }

    /* Text styling */
    .info-box-text {
        color: rgb(90, 78, 157);
        font-weight: 700;
    }

    /* The part of the text that is bold and in color */
    .info-box-text h6 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    #stride .stride-container {
        padding: 0;
    }

    /* Container to hold the content */
    .info-box-container-2 {

    }

    /* The main box with fully transparent background */
    .info-box-2 {
        background-color: rgba(255, 255, 255, 0); /* Fully transparent background */
        border-radius: 15px; /* Rounded corners */
        padding: 20px;
        border: none; /* Remove border if any */
    }

    .info-box-2 .info-box-text {
        font-size: 24px;
        line-height: 1.1;
    }

    .info-box-2 .info-box-text #info-header {
        width: 55%;
        float:left;
        min-height: 240px;
    }
    .info-box-2 .info-box-text .info-disclaimer {
        width: 55%;
        clear: both;
    }
    #thanks {
        background: none !important;
    }
    #thanks .container {
        min-height: 450px;
        padding: 5px;
    }
    #thanks .info-box-2 .info-box-text #info-header {
        width: 55%;
        float:left;
        min-height: 180px;
    }

    #stride, #thanks {
        color: #5a509f; /* Text color */
        margin: 0 -8px;
        overflow: hidden auto;
    }

    #stride #purple-pen {
        width: 45%;
        overflow: hidden;
        float: right;
        min-height: 288px;
        margin-left: -20px;
    }
    #stride #purple-pen img {
        width: 90%;
        padding-top: 50px;
    }

    #thanks #purple-pen {
        width: 45%;
        float: right;
        min-height: 200px;
        position: relative;
        left: -40px;
        margin-left: -20px;
        z-index: -1
    }
    #thanks #purple-pen img {
        height: 250px;
        padding-top: 50px;
        margin-left: 40px;
        overflow: hidden;
    }

    .symptoms-container {
        padding: 5px !important;
        overflow: hidden auto;
    }

    #treatment-table-desktop {
        display: none !important;
    }
    #treatment-table-mobile {

    }

    .info-box-container {
        background: linear-gradient(to right, #48b773 0%, #34b3d0 33%, #36AACC 66%); /* Background gradient */
        padding: 20px;
        display: flex;
        justify-content: center; /* Centers the content horizontally */
    }

    /* The main box with semi-transparent white background */
    .info-box {
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
        border-radius: 50px; /* Rounded corners */
        padding: 20px;
        max-width: 95%; /* Limit the width of the box */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
    }

    /* Text styling */
    .info-box-text {
        margin: 0;
        font-size: 20px;
        color: #333;
    }

    .info-box img {
        display: block;
        margin: auto;
        width: 50%;
        max-width: 400px;
        height: auto;
    }

    .purple-button {
        width: 350px;
        padding: 10px;
        font-weight: 700;
        font-size: 20px;
        background-color: #5a509f;
        text-transform: uppercase;
        text-align: center;
        color: #FFFFFF;
        float: left;
        border-radius: 35px;
    }
    .purple-button.outline {
        background-color: #fff;
        color: #5a509f;
        border: 3px solid #5a509f;
        margin: 0 0 20px;
        padding: 7px 10px;
    }
    .white-button {
        width: 350px;
        padding: 7px;
        font-weight: 700;
        font-size: 16px;
        background-color: #FFFFFF;
        text-transform: uppercase;
        text-align: center;
        color: #5a509f;
        float: left;
        border-radius: 35px;
        border: #5a509f 4px solid;
    }
    .boxes .box-content {
        width: 100% !important;
        margin: auto;
    }
    #shunt-table-desktop {
        display: none !important;
    }
    #traditional-shunt-mobile {
    }
    #eshunt-system-mobile {
    }
    h6.mobile-item {
        height: 75px;
        background-color: rgba(242, 242, 242, 0.9);
        border-radius: 50px;
        margin: 0 auto 20px;
        color: #5a509f;
        font-weight: 700;
        padding: 19px;
        font-size: 20px;
        width: 80%;
    }
    .study-design-boxes {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px 40px;
        border-radius: 40px;
        border: 1px solid green;
        position: relative;
        margin-bottom: 15px;
    }
    .box-1, .box-3 {
    }

    .box-2 {
    }
    .nph-about {
        background: linear-gradient(
                0deg,
                rgba(52,179,208,1) 0%,
                rgba(255,255,255,1) 85%,
                rgba(255,255,255,0) 100%) !important;
    }
    .patient-eligibility-container {
        padding: 5px !important;
    }
    .patient-eligibility-container h2 {
        font-size: 30px !important;
        margin-bottom: 0 !important;
    }
    .stride-eligibility-header h3 {
        padding: 0 20px;
    }
    .stride-eligibility-image {
        width: 100px;
        margin-left: 10px;
        float: left;
    }

    .stride-eligibility-image img {
        height: 75px;
    }

    .stride-eligibility-text {
        margin-top: 20px;
    }

    .stride-eligibility-text h6 {
        font-size: 30px !important;
        margin-top: 20px;
    }

    .stride-eligibility-text ul {
        margin-top: 25px;
    }
    #eshunt-content, #breakthrough-content {
        text-align: center;
    }
    .blue-gradient {
        background: linear-gradient(0deg, rgba(52,179,208,1) 0%, rgba(255,255,255,1) 87%, rgba(255,255,255,0) 100%)
    }
}
@media only screen and (min-width: 501px) and (max-width: 768px) {
    .text-center {
        text-align: center !important;
    }
    .desktop {
        display: none !important;
    }
    #myNavbar #mainNavDiv {
        width:100% !important;
    }
    #about .nph-container {
        /*background-size: cover;*/
        /*background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/Pls0wDxxhZK5nfi1qOe2C8SeUKMqOw202TFv9egC.png");*/
        /*background-repeat: no-repeat;*/
        /*background-position-y: -15%;*/
        min-height: 980px;
    }
    .background-box {
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/IbYQImFojFEmRufbXOw71HQdBB4mFO5jrvLvN2bd.png");
        background-size: cover;
        background-position: bottom left;
        background-repeat: no-repeat;
        background-color: #36AACC;
        padding: 20px;
        border-radius: 10px 100px 10px 10px;
        min-height: 1200px;
    }
    /*.background-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 5px;
        border-top-right-radius: 165px;
        z-index: 1;
    }*/
    #home {
        overflow: hidden auto;
    }
    #home .container {
        padding: 10px !important;
    }
    #home #non-hero h2 {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 30px;
        text-transform: uppercase
    }
    #home #non-hero h2.hcp {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 28px;
        text-transform: uppercase
    }

    #home #non-hero #couple-img {
        width: 80%;
        margin-left: 3em;
        margin-top: 20px;
    }
    #home .content h1 {
        margin-left: 0;
        font-size: 45px;
    }
    #home .content h3 {
        margin-left: 0;
        font-size: 25px;
    }
    #home #non-hero-content {
        width: 100% !important;
    }
    .wide-info-box {
        width: 100%;
        padding: 20px;
        min-height: 330px;
    }

    .wide-info-box p {
        margin: 15px 0;
        padding: 0 10px;
        font-size: 22px;
        line-height: 1.5;
    }
    #about .container {
        padding: 0 !important;
        overflow: hidden auto;
    }
    .nph-header {
        margin-left: 5px;
        font-size: 34px;
    }
    .nph-text {
        margin-left: 5px;
        font-size: 16px !important;
    }
    .wide-info-box-nph {
        padding: 20px;
        border-radius: 50px;
        max-width: 1000px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: left;
        margin: 5px auto;
        min-height: 500px;
        backdrop-filter: blur(3px);
    }
    #about .purple-button {
        width: 330px !important;
        margin-left:5px !important;
    }
    .text-container h2 {
        line-height: 1.3;
    }
    .transparent-box {
        margin-top: 50px;
        background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
        padding: 20px 30px;
        border-radius: 20px;
        position: relative;
        min-height: 650px;
        backdrop-filter: blur(3px);
    }
    #stridect {
        min-height: 100%;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/qr3SH2eywc5jpBdJP05KI9z5yxiUq3uXPTjj99Qa.png");
        background-position-y: 5%;
        overflow: hidden auto;
    }

    .headline-box {
        padding: 10px;
        width: 65%;
        margin: 160px auto 20px 45% !important;
    }

    #mobile-white-pen {
        position: relative;
        bottom: 180px;
        left: 40px;
        width: 100%;
        margin-bottom: -160px;
    }

    /*.headline {
        margin: 0;
        text-align: left;
        color: white;
        font-size: 35px !important;
        line-height: 1.2;
    }*/

    .white-pen-block {
        position: relative;
        float: left;
        top: 270px;
        left: 25px;
        width: 725px;
    }
    .white-pen-block img {
        width: 100% !important;
    }
    /* About NPH Page */
    .info-box-3 {
        width: 100% !important;
        padding: 20px;
        margin-top: 30px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    /* Image on the left side */
    .info-box-3 img {
        width: 115px;
        height: 115px;
    }

    /* Text styling */
    .info-box-text {
        color: rgb(90, 78, 157);
        font-weight: 700;
    }

    /* The part of the text that is bold and in color */
    .info-box-text h6 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    #stride .stride-container {
        padding: 0;
    }

    /* Container to hold the content */
    .info-box-container-2 {

    }

    /* The main box with fully transparent background */
    .info-box-2 {
        background-color: rgba(255, 255, 255, 0); /* Fully transparent background */
        border-radius: 15px; /* Rounded corners */
        padding: 20px;
        border: none; /* Remove border if any */
    }

    .info-box-2 .info-box-text {
        font-size: 24px;
        line-height: 1.1;
    }

    .info-box-2 .info-box-text #info-header {
        width: 55%;
        float:left;
        min-height: 240px;
    }
    .info-box-2 .info-box-text .info-disclaimer {
        width: 55%;
        clear: both;
    }
    #thanks {
        background: none !important;
    }
    #thanks .container {
        min-height: 450px;
        padding: 5px;
    }
    #thanks .info-box-2 .info-box-text #info-header {
        width: 55%;
        float:left;
        min-height: 180px;
    }

    #stride, #thanks {
        color: #5a509f; /* Text color */
        margin: 0 -8px;
        overflow: hidden auto;
    }

    #stride #purple-pen {
        width: 45%;
        overflow: hidden;
        float: right;
        min-height: 288px;
        position: relative;
        left: 85px;
        margin-left: -20px;
    }
    #stride #purple-pen img {
        width: 90%;
        padding-top: 50px;
    }

    #thanks #purple-pen {
        width: 45%;
        overflow: hidden;
        float: right;
        min-height: 200px;
        position: relative;
        left: 120px;
    }
    #thanks #purple-pen img {

    }

    .symptoms-container {
        padding: 5px !important;
        overflow: hidden auto;
    }

    #treatment-table-desktop {
        display: none !important;
    }
    #treatment-table-mobile {

    }

    .info-box-container {
        background: linear-gradient(to right, #48b773 0%, #34b3d0 33%, #36AACC 66%); /* Background gradient */
        padding: 20px;
        display: flex;
        justify-content: center; /* Centers the content horizontally */
    }

    /* The main box with semi-transparent white background */
    .info-box {
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
        border-radius: 50px; /* Rounded corners */
        padding: 20px;
        max-width: 95%; /* Limit the width of the box */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
    }

    /* Text styling */
    .info-box-text {
        margin: 0;
        font-size: 20px;
        color: #333;
    }

    .info-box img {
        display: block;
        margin: auto;
        width: 30%;
        max-width: 400px;
        height: auto;
    }

    .purple-button {
        width: 350px;
        padding: 10px;
        font-weight: 700;
        font-size: 20px;
        background-color: #5a509f;
        text-transform: uppercase;
        text-align: center;
        color: #FFFFFF;
        float: left;
        border-radius: 35px;
    }
    .purple-button.outline {
        background-color: #fff;
        color: #5a509f;
        border: 3px solid #5a509f;
        margin: 0 0 20px;
        padding: 7px 10px;
    }
    .white-button {
        width: 350px;
        padding: 7px;
        font-weight: 700;
        font-size: 16px;
        background-color: #FFFFFF;
        text-transform: uppercase;
        text-align: center;
        color: #5a509f;
        float: left;
        border-radius: 35px;
        border: #5a509f 4px solid;
    }
    .boxes .box-content {
        width: 100% !important;
        margin: auto;
    }
    #shunt-table-desktop {
        display: none !important;
    }
    #traditional-shunt-mobile {
    }
    #eshunt-system-mobile {
    }
    h6.mobile-item {
        height: 75px;
        background-color: rgba(242, 242, 242, 0.9);
        border-radius: 50px;
        margin: 0 auto 20px;
        color: #5a509f;
        font-weight: 700;
        padding: 19px;
        font-size: 20px;
        width: 80%;
    }
    .study-design-boxes {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px 40px;
        border-radius: 40px;
        border: 1px solid green;
        position: relative;
        margin-bottom: 15px;
    }
    .box-1, .box-3 {
    }

    .box-2 {
    }
    .nph-about {
        background: linear-gradient(
                0deg,
                rgba(52,179,208,1) 0%,
                rgba(255,255,255,1) 85%,
                rgba(255,255,255,0) 100%) !important;
    }
    .patient-eligibility-container {
        padding: 5px !important;
    }
    .patient-eligibility-container h2 {
        font-size: 30px !important;
        margin-bottom: 0 !important;
    }
    .stride-eligibility-header h3 {
        padding: 0 20px;
    }
    .stride-eligibility-image {
        width: 100px;
        margin-left: 10px;
        float: left;
    }

    .stride-eligibility-image img {
        height: 75px;
    }

    .stride-eligibility-text {
        margin-top: 20px;
    }

    .stride-eligibility-text h6 {
        font-size: 30px !important;
        margin-top: 20px;
    }

    .stride-eligibility-text ul {
        margin-top: 25px;
    }
    #eshunt-content, #breakthrough-content {
        text-align: center;
    }
    .blue-gradient {
        background: linear-gradient(0deg, rgba(52,179,208,1) 0%, rgba(255,255,255,1) 87%, rgba(255,255,255,0) 100%)
    }
}
@media only screen and (min-width: 769px) and (max-width: 1280px) {
    .text-center {
        text-align: center !important;
    }
    .desktop {
        display: none !important;
    }
    #myNavbar #mainNavDiv {
        width:100% !important;
    }
    #about .nph-container {
        /*background-size: cover;*/
        /*background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/Pls0wDxxhZK5nfi1qOe2C8SeUKMqOw202TFv9egC.png");*/
        /*background-repeat: no-repeat;*/
        /*background-position-y: -15%;*/
        /*min-height: 980px;*/
    }
    .background-box {
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/IbYQImFojFEmRufbXOw71HQdBB4mFO5jrvLvN2bd.png");
        background-size: 100% 120%;
        background-position: bottom right;
        background-repeat: no-repeat;
        background-color: #36AACC;
        padding: 20px;
        border-radius: 10px 100px 10px 10px;
        min-height: 1100px;
    }
    /*.background-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 5px;
        border-top-right-radius: 165px;
        z-index: 1;
    }*/
    #home {
        overflow: hidden auto;
    }
    #home .container {
        padding: 10px !important;
    }
    #home #non-hero h2 {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 30px;
        text-transform: uppercase
    }
    #home #non-hero h2.hcp {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 28px;
        text-transform: uppercase
    }

    #home #non-hero #couple-img {
        width: 80%;
        max-width: 500px;
        margin: 20px auto;
        display: block;
    }
    #home .content h1 {
        margin-left: 0;
        font-size: 45px;
    }
    #home .content h3 {
        margin-left: 0;
        font-size: 25px;
    }
    #home #non-hero-content {
        width: 100% !important;
    }
    .wide-info-box {
        width: 100%;
        padding: 20px;
        min-height: 22em;
    }

    .wide-info-box p {
        margin: 15px 0;
        padding: 0 10px;
        font-size: 22px;
        line-height: 1.5;
    }
    #about .container {
        padding: 0 !important;
        overflow: hidden auto;
    }
    .nph-header {
        margin-left: 5px;
        font-size: 34px;
    }
    .nph-text {
        margin-left: 5px;
        font-size: 16px !important;
    }
    .wide-info-box-nph {
        padding: 20px;
        border-radius: 50px;
        max-width: 1000px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: left;
        margin: 5px auto;
        min-height: 22em;
        backdrop-filter: blur(3px);
    }
    #about .purple-button {
        width: 385px !important;
        margin-left:5px !important;
    }
    .text-container h2 {
        line-height: 1.3;
    }
    .transparent-box {
        background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
        padding: 20px 30px;
        border-radius: 20px;
        position: relative;
        min-height: 540px;
        backdrop-filter: blur(3px);
    }
    #stridect {
        min-height: 100%;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/qr3SH2eywc5jpBdJP05KI9z5yxiUq3uXPTjj99Qa.png");
        background-position-y: 15%;
        overflow: hidden auto;
    }

    .headline-box {
        padding: 10px;
        width: 65%;
        margin: 160px auto 20px 45% !important;
    }

    #mobile-white-pen {
        position: relative;
        bottom: 180px;
        left: 40px;
        width: 100%;
        margin-bottom: -160px;
    }

    .headline {
        margin: 0;
        text-align: left;
        color: white;
        font-size: 55px !important;
        line-height: 1.2;
    }

    .white-pen-block {
        position: relative;
        float: left;
        top: 185px;
        left: 25px;
        width: 385px;
    }
    .white-pen-block img {
        width: 100% !important;
    }
    /* About NPH Page */
    .info-box-3 {
        width: 100% !important;
        max-width: 800px;
        margin: 30px auto 0;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    /* Image on the left side */
    .info-box-3 img {
        width: 115px;
        height: 115px;
        margin-right: 0 !important;
    }

    /* Text styling */
    .info-box-text {
        color: rgb(90, 78, 157);
        font-weight: 700;
    }

    /* The part of the text that is bold and in color */
    .info-box-text h6 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    #stride .stride-container {
        padding: 0;
    }

    /* Container to hold the content */
    .info-box-container-2 {

    }

    /* The main box with fully transparent background */
    .info-box-2 {
        background-color: rgba(255, 255, 255, 0); /* Fully transparent background */
        border-radius: 15px; /* Rounded corners */
        padding: 20px;
        border: none; /* Remove border if any */
    }

    .info-box-2 .info-box-text {
        font-size: 24px;
        line-height: 1.1;
    }

    .info-box-2 .info-box-text #info-header {
        width: 55%;
        float:left;
        min-height: 240px;
    }
    .info-box-2 .info-box-text .info-disclaimer {
        width: 55%;
        clear: both;
    }
    #thanks {
        background: none !important;
    }
    #thanks .container {
        min-height: 400px;
        padding: 5px;
    }
    #thanks .info-box-2 .info-box-text #info-header {
        width: 55%;
        float:left;
        min-height: 180px;
    }

    #stride, #thanks {
        color: #5a509f; /* Text color */
        margin: 0 -8px;
        overflow: hidden auto;
    }

    #stride #purple-pen {
        width: 45%;
        overflow: hidden;
        float: right;
        min-height: 288px;
        position: relative;
        left: 170px;
        margin-left: -20px;
    }
    #stride #purple-pen img {
        padding-top: 50px;
    }

    #thanks #purple-pen {
        width: 45%;
        overflow: hidden;
        float: right;
        position: relative;
        left: 170px;
    }
    #thanks #purple-pen img {
        width: 90%;
    }

    .symptoms-container {
        width: 80%;
        margin: 40px auto 100px;
        padding: 5px !important;
        overflow: hidden auto;
    }

    #treatment-table-desktop {
        display: none !important;
    }
    #treatment-table-mobile {

    }

    .info-box-container {
        background: linear-gradient(to right, #48b773 0%, #34b3d0 33%, #36AACC 66%); /* Background gradient */
        padding: 20px;
        display: flex;
        justify-content: center; /* Centers the content horizontally */
    }

    /* The main box with semi-transparent white background */
    .info-box {
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
        border-radius: 50px; /* Rounded corners */
        padding: 20px;
        max-width: 95%; /* Limit the width of the box */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
    }

    /* Text styling */
    .info-box-text {
        margin: 0;
        font-size: 20px;
        color: #333;
    }

    .info-box img {
        display: block;
        margin: auto;
        width: 20%;
        max-width: 400px;
        height: auto;
    }

    .purple-button {
        width: 375px;
        padding: 10px;
        font-weight: 700;
        font-size: 20px;
        background-color: #5a509f;
        text-transform: uppercase;
        text-align: center;
        color: #FFFFFF;
        float: left;
        border-radius: 35px;
    }
    .purple-button.outline {
        background-color: #fff;
        color: #5a509f;
        border: 3px solid #5a509f;
        margin: 0 0 20px;
        padding: 7px 10px;
    }
    .white-button {
        width: 350px;
        padding: 7px;
        font-weight: 700;
        font-size: 16px;
        background-color: #FFFFFF;
        text-transform: uppercase;
        text-align: center;
        color: #5a509f;
        float: left;
        border-radius: 35px;
        border: #5a509f 4px solid;
    }
    .boxes .box-content {
        width: 100% !important;
        margin: auto;
    }
    #shunt-table-desktop {
        display: none !important;
    }
    #traditional-shunt-mobile {
    }
    #eshunt-system-mobile {
    }
    h6.mobile-item {
        height: 75px;
        background-color: rgba(242, 242, 242, 0.9);
        border-radius: 50px;
        margin: 0 auto 20px;
        color: #5a509f;
        font-weight: 700;
        padding: 19px;
        font-size: 20px;
        width: 80%;
    }
    .study-design-boxes {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px 40px;
        border-radius: 40px;
        border: 1px solid green;
        position: relative;
        margin-bottom: 15px;
    }
    .box-1, .box-3 {
    }

    .box-2 {
    }
    .nph-about {
        background: linear-gradient(
                0deg,
                rgba(52,179,208,1) 0%,
                rgba(255,255,255,1) 85%,
                rgba(255,255,255,0) 100%) !important;
    }
    .patient-eligibility-container {
        padding: 5px !important;
    }
    .patient-eligibility-container h2 {
        font-size: 30px !important;
        margin-bottom: 0 !important;
    }
    .stride-eligibility-header h3 {
        padding: 0 20px;
    }
    .stride-eligibility-image {
        width: 100px;
        margin-left: 10px;
        float: left;
    }

    .stride-eligibility-image img {
        height: 75px;
    }

    .stride-eligibility-text {
        margin-top: 20px;
    }

    .stride-eligibility-text h6 {
        font-size: 30px !important;
        margin-top: 20px;
    }

    .stride-eligibility-text ul {
        margin-top: 25px;
    }
    #eshunt-content, #breakthrough-content {
        text-align: center;
    }
    .blue-gradient {
        background: linear-gradient(0deg, rgba(52,179,208,1) 0%, rgba(255,255,255,1) 87%, rgba(255,255,255,0) 100%)
    }

    #hcp-non-hero-mobile {

    }

    #hcp-non-hero-mobile .info-box-3 {

    }

    #hcp-non-hero-mobile img {
        width: 100%;
        max-width: 500px;
        margin: 20px auto;
        display: block;
    }
}
@media only screen and (max-width: 1440px) and (min-width: 1281px) {
    #myNavbar #mainNavDiv {
        width:100% !important;
    }
    .mobile {
        display: none !important;
    }
    #home #non-hero {
        width: 70%;
        margin: 200px auto auto;
    }
    #home #non-hero h2 {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 50px;
        text-transform: uppercase
    }
    #home #non-hero #couple-img {
        float: right;
        height:400px;
        margin-top: -100px;
        margin-right: -175px;
    }
    #home .content h1 {
        margin-left: 20px;
        font-size: 80px;
    }
    #home .content h3 {
        margin-left: 20px;
        font-size: 30px;
    }
    .wide-info-box {
        width: 45%;
        padding: 25px;
        margin: 20px 0 0 35px;
        min-height: 380px;
    }

    .wide-info-box p {
        margin: 15px 0;
        padding: 0 20px;
        font-size: 18px;
        line-height: 2;
    }

    .nph-container {
        margin: 0 60px;
    }

    #eshunt-system .eshunt-content {
        width: 80%;
        margin: 0 auto auto;
    }

    .eshunt-content .text-container .purple-button {
        width: 40%;
    }

    #stridect {
    }

    #stridect .stridect-text .headline-box .headline {
        width: 200%;
    }

    #stridect .stridect-text {
        width:60%;
        float:right;
        margin-top: 100px;
    }

    #stridct #white-pen-block {

    }

    .transparent-box, .headline-box {
        margin-right: 500px !important;
    }

    .transparent-box {
        min-height: 870px !important;
        margin-bottom: 50px;
    }

    .white-pen-block {
        position: absolute;
        left: 300px;
        top: 3115px;
    }
    .nph-header {
        margin-left: 70px;
        font-size: 40px;
    }
    .nph-text {
        margin-left: 70px;
        font-size: 16px !important;
    }
    .wide-info-box-nph {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 50px;
        max-width: 1000px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        margin: 20px auto 20px 30px;
        min-height: 370px;
        backdrop-filter: blur(3px);
    }
    .transparent-box {
        background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
        padding: 20px 40px;
        border-radius: 20px;
        position: relative;
        min-height: 600px;
        backdrop-filter: blur(3px);
        width: 60%
    }
    /* About NPH Page */
    .info-box-3 {
        width: 85%;
        padding: 20px;
        margin-top: 30px;
        display: flex;
        align-items: flex-start;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* Image on the left side */
    .info-box-3 img {
        width: 115px;
        height: 115px;
        margin-right: 0 !important;
    }

    /* Text styling */
    .info-box-text {
        color: rgb(90, 78, 157);
        font-weight: 700;
    }

    /* The part of the text that is bold and in color */
    .info-box-text h6 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    /* Container to hold the content */
    .info-box-container-2 {
        display: flex; /* Use flexbox for layout */
        justify-content: end; /* Centers the content horizontally */
        align-items: center; /* Centers the content vertically */
        padding: 20px; /* Padding around the container */
        max-height: 22em;
    }

    /* The main box with fully transparent background */
    .info-box-2 {
        background-color: rgba(255, 255, 255, 0); /* Fully transparent background */
        border-radius: 15px; /* Rounded corners */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        padding: 20px;
        max-width: 80%; /* Limit the width of the box */
        border: none; /* Remove border if any */
        max-height: 18em;
    }
    .info-box-2 .info-box-text {
        font-size: 22px;
        line-height: 1.1;
    }

    #stride, #thanks {
        position: relative; /* Position relative for the pseudo-element */
        /*background-image: url('https://s3.amazonaws.com/surveysprod/studies/1178/gRAGiXWCKMO7l2ESAndZz4caqX3PAsAssUc6oyu9.png'); !* Set the background image *!*/
        /*background-size: 70%;*/
        /*background-position: 80% 43%; !* Center the image *!*/
        /*background-repeat: no-repeat;*/
        color: #5a509f; /* Text color */
        margin: 0 -8px;
        padding-top: 40px;
        overflow: hidden;
    }

    .stride-height {
        max-height: 22em;
        margin-top: 30px;
    }

    #thanks {
        padding-top: 70px !important;
    }

    #treatment-table-desktop {

    }
    #treatment-table-mobile {
        display: none !important;
    }

    .purple-button {
        width: 280px;
        padding: 10px;
        font-weight: 700;
        font-size: 18px;
        background-color: #5a509f;
        text-transform: uppercase;
        text-align: center;
        color: #FFFFFF;
        float: left;
        border-radius: 35px;
    }
    .purple-button.outline {
        background-color: #fff;
        color: #5a509f;
        border: 3px solid #5a509f;
        width: 335px;
        margin-left: 5px;
        padding: 7px 10px;
    }
    .white-button {
        width: 350px;
        padding: 7px;
        margin-left: 50px;
        font-weight: 700;
        font-size: 16px;
        background-color: #FFFFFF;
        text-transform: uppercase;
        text-align: center;
        color: #5a509f;
        float: left;
        border-radius: 35px;
        border: #5a509f 4px solid;
    }

    .info-box-container {
        background: linear-gradient(to right, #48b773 0%, #34b3d0 33%, #36AACC 66%); /* Background gradient */
        padding: 20px;
        display: flex;
        justify-content: center; /* Centers the content horizontally */
    }

    /* The main box with semi-transparent white background */
    .info-box {
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
        border-radius: 50px; /* Rounded corners */
        display: flex;
        align-items: center;
        padding: 20px;
        max-width: 65%; /* Limit the width of the box */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
    }

    .info-box img {
        display: block;
        margin: 20px;
        width: 10%;
        max-width: 400px;
        height: auto;
    }

    /* Text styling */
    .info-box-text {
        margin: 0;
        font-size: 20px;
        color: #333;
    }
    .left-box-div {
        float: left;
        width: 48%;
    }
    .right-box-div {
        float: right;
        width: 48%;
    }
    #shunt-table-desktop {
    }
    #traditional-shunt-mobile {
        display: none !important;
    }
    #eshunt-system-mobile {
        display: none !important;
    }
    .study-design-boxes-wrapper {
        display: grid;
        grid-template-columns: 270px 1fr;
        grid-template-rows: 270px 1fr;
        grid-template-areas: 'box1 box3' 'box2 box3';
        grid-gap: 15px;
    }
    .study-design-boxes {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px 40px;
        border-radius: 40px;
        border: 1px solid green;
    }
    .box-1 {
        grid-area: box1;
    }
    .box-2 {
        grid-area: box3;
    }
    .box-3 {
        grid-area: box2;
    }
    .stride-eligibility-image {
        width: 10%;
        margin: 20px;
        float: left;
    }

    .stride-eligibility-image img {
        margin-left: 40px;
        height: 75px;
    }

    .stride-eligibility-text {
        margin: 10px;
        width: 80%;
        float: left;
    }
    .blue-gradient {
        background: linear-gradient(0deg, rgba(52,179,208,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%)
    }
    #stridect {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ONtuZ4hoPRenCeakc51aOJ0zwbfcn4PC2EyiRF1c.png");
        min-height: 100%;
        background-repeat: no-repeat;
    }
    .symptoms-container {
        width: 80%;
        margin: 40px auto 100px;
    }
    #thanks #purple-pen, #stride #purple-pen {
        display: none;
    }
    #hcp-investigational {
        width: 85%;
        padding: 20px;
        margin-top: 70px;
        margin-left: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    #hcp-investigational p {
        width: 75%;
        padding-left: 20px;
    }

    /* Image on the left side */
    #hcp-non-hero img {
        width: 50%;
        height: 50%;
        margin-right: 15px;
        position: relative;
        left: 620px;
        top: -420px;
    }
    #hcp-non-hero {
        max-height: 420px;
    }
    #pencil-button {
        height: 80px;
    }

    #pencil-button img {
        position: relative;
        left: -340px;
        top: -100px;
        width: 180%;
        z-index: -1;
    }

    #pencil-button a {
        position: relative;
        top: -150px;
    }

    .button-pencil {
        position: relative;
        top: -250px;
    }

    .button-pencil-stride {
        position: relative;
        top: -250px;
    }

    .button-pencil-hcp {
        position: relative;
        top: -260px;
    }

    .button-pencil img, .button-pencil-stride img {
        position: relative;
        top: 48px;
        height: 250px !important;
        right: 310px;
        z-index: -1;
    }

    .button-pencil-hcp img {
        position: relative;
        top: 50px;
        height: 300px;
        right: 310px;
        z-index: -1;
    }
    #when {
        margin-bottom: 110px;
    }
    #where {
        margin-bottom: 45px;
    }
}
@media only screen and (max-width: 1535px) and (min-width: 1441px) {
    #myNavbar #mainNavDiv {
        width:100% !important;
    }
    #thanks #purple-pen, #stride #purple-pen {
        display: none;
    }
    .mobile {
        display: none !important;
    }
    #home #non-hero {
        width: 70%;
        margin: 200px auto auto;
    }
    #home #non-hero h2 {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 50px;
    }
    #home #non-hero #couple-img {
        float: right;
        height:500px;
        margin-top: -100px;
        margin-right: -100px;
    }
    #home .content h1 {
        margin-left: 20px;
        font-size: 80px;
    }
    #home .content h3 {
        margin-left: 20px;
        font-size: 30px;
    }
    .wide-info-box {
        width: 45%;
        padding: 25px;
        margin: 20px 0 0 35px;
        min-height: 380px;
    }

    .wide-info-box p {
        margin: 15px 0;
        padding: 0 20px;
        font-size: 18px;
        line-height: 2;
    }

    .nph-container {
        margin: 0 60px;
    }

    #eshunt-system .eshunt-content {
        width: 80%;
        margin: 0 auto auto;
    }

    .eshunt-content .text-container .purple-button {
        width: 40%;
    }

    #stridect {
         padding: 128px 16px;
    }

    #stridect .stridect-text {
        width:50%;
        float:right;
    }

    #stridect .stridect-text .headline-box .headline {
        width: 170%;
    }

    #stridct #white-pen-block {

    }

    .transparent-box, .headline-box {
        margin-right: 500px !important;
    }
    .transparent-box {
        padding: 20px 40px;
        min-height: 650px;
        width: 60%
    }
    .white-pen-block {
        position: absolute;
        right: 290px;
        top: 2700px;
    }
    .nph-header {
        margin-left: 70px;
        font-size: 40px;
    }
    .nph-text {
        margin-left: 70px;
        font-size: 16px !important;
    }
    .wide-info-box-nph {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 50px;
        max-width: 1000px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        margin: 20px auto 20px 30px;
        min-height: 300px;
        backdrop-filter: blur(3px);
    }
    /* About NPH Page */
    .info-box-3 {
        width: 55%;
        padding: 20px;
        margin-top: 30px;
        display: flex;
        align-items: flex-start;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* Image on the left side */
    .info-box-3 img {
        width: 115px;
        height: 115px;
        margin-right: 15px;
    }

    #hcp-investigational {
        width: 85%;
        padding: 20px;
        margin-top: 70px;
        margin-left: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    #hcp-investigational p {
        width: 75%;
        padding-left: 20px;
    }

    /* Image on the left side */
    #hcp-non-hero img {
        width: 35%;
        height: 35%;
        margin-right: 15px;
        position: relative;
        left: 620px;
        top: -420px;
    }
    #hcp-non-hero {
        max-height: 450px;
    }

    /* Text styling */
    .info-box-text {
        color: rgb(90, 78, 157);
        font-weight: 700;
    }

    /* The part of the text that is bold and in color */
    .info-box-text h6 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    /* Container to hold the content */
    .info-box-container-2 {
        display: flex; /* Use flexbox for layout */
        justify-content: end; /* Centers the content horizontally */
        align-items: center; /* Centers the content vertically */
        padding: 20px; /* Padding around the container */
    }

    /* The main box with fully transparent background */
    .info-box-2 {
        background-color: rgba(255, 255, 255, 0); /* Fully transparent background */
        border-radius: 15px; /* Rounded corners */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        padding: 20px;
        max-width: 75%; /* Limit the width of the box */
        border: none; /* Remove border if any */
        max-height: 20em;
    }
    .info-box-2 .info-box-text {
        font-size: 24px;
        margin-bottom: 35px;
    }

    .info-box-2 .info-box-text {
        font-size: 24px ;
    }

    #treatment-table-desktop {

    }
    #treatment-table-mobile {
        display: none !important;
    }

    #stride, #thanks {
        position: relative; /* Position relative for the pseudo-element */
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/gRAGiXWCKMO7l2ESAndZz4caqX3PAsAssUc6oyu9.png"); /* Set the background image */
        background-size: 70%;
        background-position: 80% 43%; /* Center the image */
        background-repeat: no-repeat;
        color: #5a509f; /* Text color */
        margin: 0 -8px;
    }
    #thanks {
        padding-top: 30px !important;
    }

    .purple-button {
        width: 310px;
        padding: 10px;
        font-weight: 700;
        font-size: 20px;
        background-color: #5a509f;
        text-transform: uppercase;
        text-align: center;
        color: #FFFFFF;
        float: left;
        border-radius: 35px;
    }
    .purple-button.outline {
        background-color: #fff;
        color: #5a509f;
        border: 3px solid #5a509f;
        width: 365px;
        margin-left: 5px;
        padding: 7px 10px;
    }
    .white-button {
        width: 350px;
        padding: 7px;
        margin-left: 50px;
        font-weight: 700;
        font-size: 16px;
        background-color: #FFFFFF;
        text-transform: uppercase;
        text-align: center;
        color: #5a509f;
        float: left;
        border-radius: 35px;
        border: #5a509f 4px solid;
    }

    .info-box-container {
        background: linear-gradient(to right, #48b773 0%, #34b3d0 33%, #36AACC 66%);
        padding: 20px;
        display: flex;
        justify-content: center; /* Centers the content horizontally */
    }

    /* The main box with semi-transparent white background */
    .info-box {
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
        border-radius: 50px; /* Rounded corners */
        display: flex;
        align-items: center;
        padding: 20px;
        max-width: 65%; /* Limit the width of the box */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
    }

    /* Text styling */
    .info-box-text {
        margin: 0;
        font-size: 20px;
        color: #333;
    }

    .info-box img {
        display: block;
        margin: 20px;
        width: 10%;
        max-width: 400px;
        height: auto;
    }

    .left-box-div {
        float: left;
        width: 48%;
    }
    .right-box-div {
        float: right;
        width: 48%;
    }
    #shunt-table-desktop {
    }
    #traditional-shunt-mobile {
        display: none !important;
    }
    #eshunt-system-mobile {
        display: none !important;
    }
    .study-design-boxes-wrapper {
        display: grid;
        grid-template-columns: 270px 1fr 270px;
        grid-template-rows: 1fr;
        grid-gap: 15px;
    }
    .study-design-boxes {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px 40px;
        border-radius: 40px;
        border: 1px solid green;
    }
    .stride-eligibility-image {
        width: 10%;
        margin: 20px;
        float: left;
    }

    .stride-eligibility-image img {
        margin-left: 40px;
        height: 75px;
    }

    .stride-eligibility-text {
        margin: 10px;
        width: 80%;
        float: left;
    }
    .blue-gradient {
        background: linear-gradient(0deg, rgba(52,179,208,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%)
    }
    #stridect {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ONtuZ4hoPRenCeakc51aOJ0zwbfcn4PC2EyiRF1c.png");
        min-height: 100%;
        background-repeat: no-repeat;
    }
    .symptoms-container {
        width: 80%;
        margin: 40px auto 100px;
    }
    #thanks #purple-pen {
        display: none;
    }
    #pencil-button {
        height: 60px;
    }

    #pencil-button img {
        position: relative;
        left: -420px;
        top: -120px;
        width: 180%;
        z-index: -1;
    }

    #pencil-button a {
        position: relative;
        top: -170px;
    }

    .button-pencil {
        position: relative;
        top: -330px;
    }

    .button-pencil-stride {
        position: relative;
        top: -220px;
    }
    .button-pencil-hcp {
        position: relative;
        top: -260px;
    }

    .button-pencil img, .button-pencil-stride img {
        position: relative;
        top: 50px;
        height: 270px;
        right: 270px;
        z-index: -1;
    }
    .button-pencil-hcp img {
        position: relative;
        top: 50px;
        height: 300px;
        right: 310px;
        z-index: -1;
    }
    #when {
        margin-bottom: 80px;
    }
    #where {
        margin-bottom: 45px;
    }
}
@media only screen and (min-width: 1536px) and (max-width: 1600px) {
    #myNavbar #mainNavDiv {
        width:100% !important;
    }
    #thanks #purple-pen, #stride #purple-pen {
        display: none;
    }
    .mobile {
        display: none !important;
    }
    #home #non-hero {
        width: 70%;
        margin: 200px auto auto;
    }
    #home #non-hero h2 {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 50px;
    }
    #home #non-hero #couple-img {
        float: right;
        height: 410px;
        margin-right: -110px;
        margin-top: -50px;
    }
    #home .content h1 {
        margin-left: 20px;
        font-size: 80px;
    }
    #home .content h3 {
        margin-left: 20px;
        font-size: 30px;
    }
    .wide-info-box {
        width: 45%;
        padding: 25px;
        margin: 20px 0 0 35px;
        min-height: 350px;
    }

    .wide-info-box p {
        margin: 15px 0;
        padding: 0 20px;
        font-size: 18px;
        line-height: 2;
    }

    .nph-container {
        margin: 0 60px;
    }

    #eshunt-system .eshunt-content {
        width: 80%;
        margin: 0 auto auto;
    }

    .eshunt-content .text-container .purple-button {
        width: 40%;
    }

    #stridect {
        padding: 128px 16px 0;
    }

    #stridect .stridect-text {
        width:50%;
        float:right;
    }

    #stridect .stridect-text .headline-box .headline {
        width: 170%;
    }

    #stridct #white-pen-block {

    }

    .transparent-box, .headline-box {
        margin-right: 500px !important;
    }
    .transparent-box {
        padding: 20px 40px;
        min-height: 650px;
        width: 60%
    }
    .white-pen-block {
        position: absolute;
        right: 290px;
        top: 2700px;
    }
    .nph-header {
        margin-left: 70px;
        font-size: 40px;
    }
    .nph-text {
        margin-left: 70px;
        font-size: 16px !important;
    }
    .wide-info-box-nph {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 50px;
        max-width: 1000px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        margin: 20px auto 20px 30px;
        min-height: 370px;
        backdrop-filter: blur(3px);
    }
    /* About NPH Page */
    .info-box-3 {
        width: 55%;
        padding: 20px;
        margin-top: 30px;
        display: flex;
        align-items: flex-start;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* Image on the left side */
    .info-box-3 img {
        width: 115px;
        height: 115px;
        margin-right: 15px;
    }

    #hcp-investigational {
        width: 85%;
        padding: 20px;
        margin-top: 70px;
        margin-left: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    #hcp-non-hero {
        max-height: 350px;
    }
    #hcp-investigational p {
        width: 75%;
        padding-left: 20px;
    }

    /* Image on the left side */
    #hcp-non-hero img {
        width: 45%;
        height: 35%;
        margin-right: 15px;
        position: relative;
        left: 620px;
        top: -420px;
    }

    /* Text styling */
    .info-box-text {
        color: rgb(90, 78, 157);
        font-weight: 700;
    }

    /* The part of the text that is bold and in color */
    .info-box-text h6 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    /* Container to hold the content */
    .info-box-container-2 {
        display: flex; /* Use flexbox for layout */
        justify-content: end; /* Centers the content horizontally */
        align-items: center; /* Centers the content vertically */
        padding: 20px; /* Padding around the container */
    }

    /* The main box with fully transparent background */
    .info-box-2 {
        background-color: rgba(255, 255, 255, 0); /* Fully transparent background */
        border-radius: 15px; /* Rounded corners */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        padding: 20px;
        max-width: 75%; /* Limit the width of the box */
        border: none; /* Remove border if any */
        max-height: 20em;
    }
    .info-box-2 .info-box-text {
        font-size: 24px;
        margin-bottom: 35px;
    }

    .info-box-2 .info-box-text {
        font-size: 24px ;
    }

    #treatment-table-desktop {

    }
    #treatment-table-mobile {
        display: none !important;
    }

    #stride, #thanks {
        position: relative; /* Position relative for the pseudo-element */
        color: #5a509f; /* Text color */
        margin: 0 -8px;
        max-height: 25em;
        overflow: hidden;
    }
    #thanks {
        padding-top: 20px !important;
        overflow: hidden;
    }
    #thanks.hcp-thanks {
        max-height: 35em !important;
    }

    .purple-button {
        width: 350px;
        padding: 10px;
        font-weight: 700;
        font-size: 20px;
        background-color: #5a509f;
        text-transform: uppercase;
        text-align: center;
        color: #FFFFFF;
        float: left;
        border-radius: 35px;
    }
    .purple-button.outline {
        background-color: #fff;
        color: #5a509f;
        border: 3px solid #5a509f;
        width: 375px;
        margin-left: 20px;
        padding: 7px 10px;
    }
    .white-button {
        width: 350px;
        padding: 7px;
        margin-left: 50px;
        font-weight: 700;
        font-size: 16px;
        background-color: #FFFFFF;
        text-transform: uppercase;
        text-align: center;
        color: #5a509f;
        float: left;
        border-radius: 35px;
        border: #5a509f 4px solid;
    }

    .info-box-container {
        background: linear-gradient(to right, #48b773 0%, #34b3d0 33%, #36AACC 66%);
        padding: 20px;
        display: flex;
        justify-content: center; /* Centers the content horizontally */
    }

    /* The main box with semi-transparent white background */
    .info-box {
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
        border-radius: 50px; /* Rounded corners */
        display: flex;
        align-items: center;
        padding: 20px;
        max-width: 65%; /* Limit the width of the box */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
    }

    /* Text styling */
    .info-box-text {
        margin: 0;
        font-size: 20px;
        color: #333;
    }

    .info-box img {
        display: block;
        margin: 20px;
        width: 10%;
        max-width: 400px;
        height: auto;
    }

    .left-box-div {
        float: left;
        width: 48%;
    }
    .right-box-div {
        float: right;
        width: 48%;
    }
    #shunt-table-desktop {
    }
    #traditional-shunt-mobile {
        display: none !important;
    }
    #eshunt-system-mobile {
        display: none !important;
    }
    .study-design-boxes-wrapper {
        display: grid;
        grid-template-columns: 270px 1fr 270px;
        grid-template-rows: 1fr;
        grid-gap: 15px;
    }
    .study-design-boxes {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px 40px;
        border-radius: 40px;
        border: 1px solid green;
    }
    .stride-eligibility-image {
        width: 10%;
        margin: 20px;
        float: left;
    }

    .stride-eligibility-image img {
        margin-left: 40px;
        height: 75px;
    }

    .stride-eligibility-text {
        margin: 10px;
        width: 80%;
        float: left;
    }
    .blue-gradient {
        background: linear-gradient(0deg, rgba(52,179,208,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%)
    }
    #stridect {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ONtuZ4hoPRenCeakc51aOJ0zwbfcn4PC2EyiRF1c.png");
        min-height: 100%;
        background-repeat: no-repeat;
    }
    .symptoms-container {
        width: 80%;
        margin: 40px auto 100px;
    }
    #thanks #purple-pen {
        display: none;
    }
    #pencil-button {
        height: 80px;
    }

    #pencil-button img {
        position: relative;
        left: -300px;
        top: -100px;
        width: 180%;
        z-index: -1;
    }

    #pencil-button a {
        position: relative;
        top: -150px;
    }

    .button-pencil {
        position: relative;
        top: -330px;
    }

    .button-pencil-stride {
        position: relative;
        top: -220px;
    }

    .button-pencil-hcp {
        position: relative;
        top: -260px;
    }

    .button-pencil img, .button-pencil-stride img {
        position: relative;
        top: 50px;
        height: 270px;
        right: 270px;
        z-index: -1;
    }

    .button-pencil-hcp img {
        position: relative;
        top: 50px;
        height: 300px;
        right: 310px;
        z-index: -1;
    }
    #when {
        margin-bottom: 80px;
    }
    #where {
        margin-bottom: 45px;
    }
}
@media only screen and (min-width: 1601px) {
    #thanks #purple-pen, #stride #purple-pen {
        display: none;
    }
    .mobile {
        display: none !important;
    }
    #home #non-hero {
        width: 79%;
        margin: 130px auto auto;
    }
    #home #non-hero h2 {
        color: #34b3d0;
        margin-top: 0;
        line-height: 1.2;
        font-size: 50px;
    }
    #home #non-hero #couple-img {
        float: right;
        height: 450px;
        margin-top: 140px;
        margin-right: 0;
    }
    #home .content h1 {
        margin-left: 20px;
        font-size: 80px;
    }
    #home .content h3 {
        margin-left: 20px;
        font-size: 30px;
    }
    #nph-text {
        width: 70%;
    }
    .wide-info-box {
        width: 40%;
        padding: 25px;
        margin: 20px 0 0 35px;
        min-height: 350px;
    }

    .wide-info-box p {
        margin: 15px 0;
        padding: 0 20px;
        font-size: 22px;
        line-height: 1.5;
    }

    .nph-container {
        margin: 20px 130px;
    }

    #eshunt-system .eshunt-content {
        width: 77%;
        margin: 150px auto auto;
    }

    .eshunt-content .text-container {
        width: 40%;
        margin-top: 200px;
    }

    .eshunt-content .text-container .purple-button {
        width: 100%;
    }

    #stridect {
        padding: 50px 16px;
    }

    #stridect .stridect-text {
        width:49%;
        float:right;
    }

    #stridect .stridect-text .headline-box {
        margin-top:240px;
    }

    .transparent-box, .headline-box {
        margin-right: 500px;
    }

    .white-pen-block {
        position: absolute;
        left: 705px;
        top: 3290px;
        width: 70%;
    }
    .nph-header {
        margin-left: 70px;
        font-size: 40px;
    }
    .nph-text {
        margin-left: 70px;
        font-size: 16px;
    }
    .wide-info-box-nph {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 50px;
        max-width: 1000px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        margin: 20px auto 20px 30px;
        min-height: 370px;
        backdrop-filter: blur(3px);
    }
    #about .purple-button {
        width: 500px !important;
        margin-left:20px !important;
    }
    .transparent-box {
        padding: 20px 40px;
        min-height: 750px;
        width: 65%
    }
    /* About NPH Page */
    .info-box-3 {
        width: 55%;
        padding: 20px;
        margin-top: 30px;
        display: flex;
        align-items: flex-start;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* Image on the left side */
    .info-box-3 img {
        width: 115px;
        height: 115px;
        margin-right: 15px;
    }

    #hcp-investigational {
        width: 55%;
        padding: 20px;
        margin-top: 70px;
        margin-left: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    #hcp-investigational p {
        width: 75%;
        padding-left: 20px;
    }

    #hcp-non-hero {
        max-height: 500px;
    }

    /* Image on the left side */
    #hcp-non-hero img {
        width: 35%;
        height: 35%;
        margin-right: 15px;
        position: relative;
        left: 620px;
        top: -420px;
    }

    /* Text styling */
    .info-box-text {
        color: rgb(90, 78, 157);
        font-weight: 700;
    }

    /* The part of the text that is bold and in color */
    .info-box-text h6 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }
    /* Container to hold the content */
    .info-box-container-2 {
        display: flex; /* Use flexbox for layout */
        justify-content: end; /* Centers the content horizontally */
        align-items: center; /* Centers the content vertically */
        padding: 20px; /* Padding around the container */
    }

    /* The main box with fully transparent background */
    .info-box-2 {
        background-color: rgba(255, 255, 255, 0); /* Fully transparent background */
        border-radius: 15px; /* Rounded corners */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        padding: 20px;
        max-width: 75%; /* Limit the width of the box */
        border: none; /* Remove border if any */
        max-height: 22em;
    }
    .info-box-2 .info-box-text {
        font-size: 24px;
        margin-bottom: 35px;
    }
    #stride, #thanks {
        position: relative; /* Position relative for the pseudo-element */
        /*background-image: url('../img/ill-pencil-prpl-d.png'); !* Set the background image *!*/
        /*background-position: 0% 113%; !* Center the image *!*/
        /*background-repeat: no-repeat;*/
        color: #5a509f; /* Text color */
        max-height: 32em;
        margin: 0 -8px;
    }

    #thanks .info-box-2 {
        background-color: rgba(255, 255, 255, 0); /* Fully transparent background */
        border-radius: 15px; /* Rounded corners */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        padding: 20px;
        max-width: 70%; /* Limit the width of the box */
        border: none; /* Remove border if any */
        max-height: 20em;
    }
    #thanks .info-box-2 .info-box-text {
        font-size: 24px;
        margin-bottom: 55px;
    }

    #treatment-table-desktop {

    }
    #treatment-table-mobile {
        display: none !important;
    }
    .purple-button {
        width: 350px;
        padding: 10px;
        font-weight: 700;
        font-size: 20px;
        background-color: #5a509f;
        text-transform: uppercase;
        text-align: center;
        color: #FFFFFF;
        float: left;
        border-radius: 35px;
    }
    .purple-button.outline {
        background-color: #fff;
        color: #5a509f;
        border: 3px solid #5a509f;
        width: 375px;
        margin-left: 20px;
        padding: 7px 10px;
    }
    .white-button {
        width: 350px;
        padding: 7px;
        margin-left: 50px;
        font-weight: 700;
        font-size: 16px;
        background-color: #FFFFFF;
        text-transform: uppercase;
        text-align: center;
        color: #5a509f;
        float: left;
        border-radius: 35px;
        border: #5a509f 4px solid;
    }
    #purple-pen {
        display: none;
    }

    .info-box-container {
        background: linear-gradient(to right, #48b773 0%, #34b3d0 33%, #36AACC 66%); /* Background gradient */
        padding: 20px;
        display: flex;
        justify-content: center; /* Centers the content horizontally */
    }

    /* The main box with semi-transparent white background */
    .info-box {
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
        border-radius: 50px; /* Rounded corners */
        display: flex;
        align-items: center;
        padding: 20px;
        max-width: 75%; /* Limit the width of the box */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
    }

    .info-box img {
        display: block;
        margin: 20px;
        width: 10%;
        max-width: 400px;
        height: auto;
    }

    /* Text styling */
    .info-box-text {
        margin: 0;
        font-size: 20px;
        color: #333;
    }

    .left-box-div {
        float: left;
        width: 48%;
    }
    .right-box-div {
        float: right;
        width: 48%;
    }
    #shunt-table-desktop {
    }
    #traditional-shunt-mobile {
        display: none !important;
    }
    #eshunt-system-mobile {
        display: none !important;
    }
    .study-design-boxes-wrapper {
        display: grid;
        grid-template-columns: 270px 1fr 270px;
        grid-template-rows: 1fr;
        grid-gap: 15px;
    }
    .study-design-boxes {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px 40px;
        border-radius: 40px;
        border: 1px solid green;
    }
    .stride-eligibility-image {
        width: 10%;
        margin: 20px;
        float: left;
    }

    .stride-eligibility-image img {
        margin-left: 40px;
        height: 75px;
    }

    .stride-eligibility-text {
        margin: 10px;
        width: 80%;
        float: left;
    }
    .blue-gradient {
        background: linear-gradient(0deg, rgba(52,179,208,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%)
    }
    #stridect {
        background-size: cover;
        background-image: url("https://s3.amazonaws.com/surveysprod/studies/1178/ONtuZ4hoPRenCeakc51aOJ0zwbfcn4PC2EyiRF1c.png");
        min-height: 100%;
        background-repeat: no-repeat;
    }
    .symptoms-container {
        width: 80%;
        padding-bottom: 50px;
        margin: 40px auto 0;
    }

    #thanks #purple-pen {
        display: none;
    }
    #thanks {
        padding-top: 30px !important;
        overflow: hidden;
    }
    #pencil-button {
        height: 60px;
    }

    #pencil-button img {
        position: relative;
        left: -420px;
        top: -170px;
        width: 180%;
        z-index: -1;
    }

    #pencil-button a {
        position: relative;
        top: -220px;
    }

    .button-pencil {
        position: relative;
        top: -270px;
    }

    .button-pencil-stride {
        position: relative;
        top: -220px;
    }

    .button-pencil-hcp {
        position: relative;
        top: -260px;
    }

    .button-pencil img, .button-pencil-stride img {
        position: relative;
        top: 50px;
        height: 270px;
        right: 270px;
        z-index: -1;
    }

    .button-pencil-hcp img {
        position: relative;
        top: 50px;
        height: 300px;
        right: 310px;
        z-index: -1;
    }
    #when {
        margin-bottom: 80px;
    }
    #where {
        margin-bottom: 45px;
    }
}
@media only screen and (max-width: 1700px) {
    #myNavbar #mainNavDiv {
        width:100% !important;
    }
    #mainNavDiv .w3-right {
        right: 30px;
    }
}
@media only screen and (min-width: 1701px) {
    #mainNavDiv .w3-right {
        right: 100px;
    }
}
@media only screen and (max-width: 1439px) {
    .menu-desktop {
        display: none !important;
    }
}
@media only screen and (min-width: 1440px) {
    .menu-mobile {
        display: none !important;
    }
}
#home .content h1 {
    color: white;
    font-weight: 500;
    line-height: 1;
}

#home .content h3 {
    color: white;
    font-weight: 600;
    line-height: 1.2;
}
.wide-info-box {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: black !important;
}

/* Image button */
.wide-info-box img {
    display: block;
    margin: 20px auto;
    width: 100%; /* Responsive button image */
    max-width: 400px; /* Ensures button size doesn't stretch too much */
    height: auto;
}

.eshunt-content .text-container .purple-button {
    margin-left: 5px;
    text-transform: none;
}

.purple-button:hover,
.purple-button.outline:hover {
    border-color: rgb(52,179,208);
    background-color: rgb(52, 179, 208);
    color: black !important;
}

.info-box h2 {
    margin-top: 0;
}

.info-box-2 .info-box-text {
    color: rgb(90, 78, 157);
    font-weight: 600;
}
/*
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

h2 {
    margin-top: 40px;
}

.info-box img {
    display: block;
    margin-top: 20px;
    max-width: 100%;
}
*/

.symptoms-container h2, .patient-eligibility-container h2 {
    color: #34b3d0;
    font-size: 40px;
    font-weight: 700;
}
.nph-header {
    color: white !important;
    line-height: 1.3;
}

.wide-info-box-nph {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    max-width: 1200px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    backdrop-filter: blur(3px);
}

.wide-info-box-nph img {
    display: block;
    margin: 20px 15px;
    width: 100%;
    max-width: 400px;
    height: auto;
}

@media (min-width: 768px) {
    .wide-info-box-nph {
        margin: 20px;
        text-align: left;
    }

    .nph-symptoms-container {
        width: 80%;
        margin: -70px auto auto;
    }

    .nph-header {
        margin-left: 65px;
        font-size: 50px;
    }

    .nph-text {
        margin-left: 65px;
        margin-top: 20px;
        width: 70%;
    }

    .stride-container, .thanks-container, .study-design-container, .patient-eligibility-container {
        width: 80%;
        margin: auto;
    }
    .expectations-container {
        width: 80%;
        margin: -100px auto auto;
    }
    .brain-img {
        float: right;
        height: 300px;
    }
}
@media (min-width: 1200px) {
    .brain-img {
        float: right;
        height: 600px;
    }
}

@media screen and (max-width: 786px) {
    .brain-img {
        float:right;
        height: 150px !important;
    }
}
.text-container {
    padding-left: 20px; /* Adjust the value to your desired left padding */
    padding-right: 20px; /* Adjust the value to your desired right padding */
}
.text-container h2 {
    color: #34b3d0;
    font-size: 42px;
}

.headline-box {
    background-color: rgba(255, 255, 255, 0); /* Transparent background */
    padding: 10px;
    margin: 20px auto;
}

.headline {
    margin: 0;
    text-align: left;
    color: white;
    font-size: 42px;
    line-height: 1.2;
}

/* Style for the final image */
.centered-image {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    display: block;
    position: relative;
}

.transparent-box {
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    border-radius: 20px;
    position: relative;
    backdrop-filter: blur(3px);
}

/* Shrinking the button image responsively */
.transparent-box img {
    width: 90%; /* Ensures the image fills the container */
    margin:auto;
}

.info-box-text .highlight {
    font-weight: bold;
    color: #5a4e9d;
}

.info-box-text .small-text {
    font-size: 10px;
    font-weight: normal;
    color: black;
}

.responsive-image {
    max-width: 100%;
    height: auto;
}

.custom-info-box {
    width: 100%; /* Full width */
    max-width: auto; /* Maximum width of each box */
    margin: 10px 0; /* Add a small margin between each box */
    border-radius: 40px; /* Round the corners */
    overflow: hidden; /* Clip any content that overflows the border */
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    border: 1px solid #00C58E; /* Thin outline around the box */
    background: transparent; /* Ensure the background is transparent to show the border */
}

.info-header {
    display: flex; /* Flexbox to align image and heading side by side */
    align-items: center; /* Vertically center the items */
    padding: 20px; /* Padding for spacing */
    background: linear-gradient(to right,#41b192, #38acc6);
    color: white; /* Make text white for contrast */
    border-top-left-radius: 40px; /* Smooth the top-left corner */
    border-top-right-radius: 40px; /* Smooth the top-right corner */
}

.info-header img {
    width: 40px; /* Adjust image size */
    height: 40px; /* Adjust image size */
    margin-right: 10px; /* Space between image and heading */
}
.info-header h3 {
    font-size: 24px; /* Font size for the heading */
    font-weight: 700;
    margin: 0; /* Remove default margin */
    color: white; /* Default text color for visibility */
}

/* Set a unique background for each info header */
.custom-info-box:nth-child(1) .info-header {
    background: linear-gradient(to right, #41b192, #38acc6); /* Blue gradient for the first box (Balance) */
}

.custom-info-box:nth-child(2) .info-header {
    background: linear-gradient(to right, #38accc, #497db6); /* Gradient for the second box (Brain) */
}

.custom-info-box:nth-child(3) .info-header {
    background: linear-gradient(to right, #3fb09e, #48b773); /* Gradient for the third box (Bladder) */
}

.info-content {
    background-color: white; /* White bottom half */
    padding: 30px; /* Padding for content */
    border-bottom-left-radius: 40px; /* Smooth the bottom-left corner */
    border-bottom-right-radius: 40px; /* Smooth the bottom-right corner */
}

.info-content p {
    margin: 0; /* Remove default margin */
    font-size: 18px; /* Adjust font size */
    font-weight: 500;
    line-height: 1.5; /* Line height for readability */
    /*color: #333; /* Text color */
}

/* Optional: Adjust styles for the entire container */
.info-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between boxes */
}

/* New Custom Info Box Styles */
.info-box-custom {
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    border-radius: 15px; /* Rounded corners */
    display: flex;
    align-items: center;
    padding: 20px;
    max-width: 800px; /* Limit the width of the box */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
    margin: 10px 0; /* Margin between boxes */
}

/* Image within the custom info box */
.info-box-custom img {
    width: 70px; /* Image size */
    height: 70px;
    margin-right: 15px; /* Space between image and text */
}

/* Text styles for the custom info box */
.info-box-custom .info-box-text {
    font-family: "GlacialIndifference", sans-serif !important; /* Use existing font */
    color: #333; /* Text color */
}

/* Specific text styling for highlights */
.info-box-custom .info-box-text .highlight {
    font-weight: bold;
    color: #5a4e9d; /* Slight purple for emphasis */
}
.image-row {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between images */
    margin-top: 20px; /* Space above the images */
}

.image-row img {
    width: 400px; /* Set each image width */
    height: 40px; /* Set each image height */
    border-radius: 10px; /* Optional: Rounded corners for images */
    margin-right: 10px; /* Add space to the right of the first image */
}

/* Remove margin-right from the last image */
.image-row img:last-child {
    margin-right: 0; /* Ensure the last image has no margin */
}
.info-box-3-other {
    display: flex;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    padding: 40px; /* Add padding inside the box */
    width: auto; /* Set width to auto to adjust based on text */
    max-width: 60%; /* Maximum width set to 40% of the parent container */
    margin-left: 0; /* Left justify the box */
    margin-right: 0; /* Ensure it's aligned to the left */
    border-radius: 40px; /* Optional: round the corners */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* Optional: add a subtle shadow */
    font-size: 16px; /* Adjust font size */
    line-height: 1.5; /* Improve readability */
}

/* The part of the text that is bold and in color */
.info-box-text h6 {
    margin: 0;
    font-size: 1em;
    font-weight: normal;
}

.info-box-text .highlight {
    font-weight: bold;
    color: #5a4e9d; /* Slight purple for emphasis */
}
@media only screen and (min-width: 1440px) and (max-width: 1919px) {
    .expectations-container .full-box-div
    {
        display: block;
        min-height: 840px;
    }
}
@media only screen and (min-width: 1920px) {
    .expectations-container .full-box-div
    {
        display: block;
        min-height: 760px;
    }
}

.boxes {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 50px;
    border: 1px solid green;
    margin: 20px auto;
    position: relative;

}
.boxes .box-content {
    width: 80%;
    margin: auto;
}
.boxes h6.header {
    color: rgb(90, 78, 157);
    font-weight: 800;
    font-size: 20px;
}
.boxes ul {
    font-weight: 500;
    font-size: 18px;
}
.boxes ul li {
    margin-bottom: 10px;
}
.boxes h6.links {
    color: rgb(90, 78, 157);
    font-weight: 700;
    font-size: 18px;
}
.study-design-headers {
    position: relative;
    z-index: 0;
    height: 75px;
    background-color: rgba(242, 242, 242, 0.9);
    border-radius: 50px;
    margin-bottom: 50px;
}

.study-design-headers h6.item {
    width: 33%;
    float: left;
    color: #5a509f;
    font-weight: 700;
    margin: 0;
    padding: 21px 10px;
    font-size: clamp(16px,1.2vw,20px);
    height: 75px;
}

.study-design-headers h6.item:hover {
    color: rgb(52, 179, 208) !important;
    cursor: pointer !important;
}

.study-design-headers h6.item:not(:last-child) {
    border-right: #5a509f solid 2px;
}

.study-design-header {
    color: #34b3d0;
    font-weight: 700;
    font-size: 34px;
}

.study-design-content p {
    font-weight: 500;
    font-size: 16px;
}

.study-design-boxes h6 {
    color: #5a509f;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.4;
}

.study-design-boxes p {
    line-height: 1.4;
}

.study-design-boxes-content {
    font-size: 22px;
}

.stride-eligibility-table {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    border: 1px solid green;
}

.stride-eligibility-header {
    border-bottom: 1px solid green;
    text-align: center;
    text-wrap: balance;
}

.stride-eligibility-header h3 {
    font-weight: 600;
}

.stride-eligibility-block {
    border-bottom: 1px solid green;
    min-height: 220px;
}
@media only screen and (max-width:1280px) {
    .stride-eligibility-block {
        min-height: 0;
    }
}

.stride-eligibility-text h6 {
    color: #5a509f;
    font-size: 28px;
    font-weight: 700;
}

.stride-eligibility-text li {
    font-size: 18px;
    font-weight: 500;
}

.stride-eligibility-footer {
    background-color: #5a509f;
    color: #FFFFFF;
    text-align: center;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    padding: 10px 0;
    text-transform: uppercase;
    text-decoration: underline;
}
.stride-eligibility-footer:hover {
    background-color: rgb(52, 179, 208);
    color: black !important;
    cursor: pointer;
}
.stride-eligibility-footer h3 {
    font-size: 20px;
    font-weight: 700;
}
@media only screen and (max-width: 1439px){
    #nurse-patient {
        width: 100%;
        max-width: 500px;
        margin: 20px auto;
        display: block;
    }
}
@media only screen and (min-width: 1440px) and (max-width:1600px) {
    #nurse-patient {
        float: right;
        margin: -250px -100px 50px 0;
        height: 390px;
    }
}
@media only screen and (min-width: 1601px) {
    #nurse-patient {
        float: right;
        margin: -50px -100px 50px 0;
        height: 390px;
    }
}

.privacy-link {
    color: white;
}

.privacy-link:hover {
    color: #5a509f;
}

@media only screen and (width: 1366px) {
    #when {
        margin-bottom: 80px;
    }
    #where {
        margin-bottom: 28px;
    }
}

/* Tooltip Definitions */
/* Tooltip container */
.csf, .parkinsons, .alzheimers, .dementia, .shunt, .ventricles {
    font-weight: 600;
    position: relative;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.csf .csftiptext,
.parkinsons .parkinsonstiptext,
.alzheimers .alzheimerstiptext,
.dementia .dementiatiptext,
.shunt .shunttiptext,
.ventricles .ventriclestiptext {
    visibility: hidden;
    width: 400px;
    background-color: #f2f2f2;
    color: #000;
    text-align: center;
    padding: 15px 25px;
    border-radius: 15px;
    border: 1px solid #bfbfbf;
    box-shadow: 2px 2px 5px #bfbfbf;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -150px; /* Use half of the width (120/2 = 60), to center the tooltip */
    z-index: 1;
}

.csf .csftiptext::after,
.parkinsons .parkinsonstiptext::after,
.alzheimers .alzheimerstiptext::after,
.dementia .dementiatiptext::after,
.shunt .shunttiptext::after,
.ventricles .ventriclestiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #f2f2f2 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.csf:hover .csftiptext,
.parkinsons:hover .parkinsonstiptext,
.alzheimers:hover .alzheimerstiptext,
.dementia:hover .dementiatiptext,
.shunt:hover .shunttiptext,
.ventricles:hover .ventriclestiptext {
    visibility: visible;
}

@media (max-width: 1280px) {
    .purple-button.no-float-mobile {
        float: none;
    }
}

html:has(.about-nph) {
    overflow-x: hidden;
}