html {
    scroll-behavior: smooth !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
ul {
    margin: 0;
}

button,
input,
select {
    border: none;
    background: none;
    outline: none;
}

body {
    font-family: museo, serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    color: #4A4B4D;
}

.f-indigo {
    color: #00476A;
}

.f-calendonBlue {
    color: #336680;
}

.f-eggplant {
    color: #673C4F;
}

.f-eggplant80 {
    color: #856372;
}

.f-crayola {
    color: #FFE18C;
}

.navbar {
    align-items: end;
    padding: 24px 15%;
}

.navbar .navbar-toggler-icon {
    background-image: url(../images/nav.svg);
}

.nav-link {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 110%;
    color: #00476A !important;
}

.language-toggle {
    display: flex;
    justify-content: end;
    gap: 4px;
}

.language-toggle>a {
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    color: #673C4F;
}

.language-toggle>.active {
    font-weight: 600;
    color: #00476A;
}

.login-section {
    gap: 10px;
    margin-top: 8px;
}

.login-section>h3 {
    font-size: 14px;
    line-height: 16px;
    color: #00476A;
    text-align: right;
}

.login-section>button {
    padding: 8px 20px;
    height: 32px;
    background: #00476A;
    border-radius: 37px;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #FFE18C;
}

.login-section>a {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    color: #673C4F;
}

.collapseInner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 72px;
    gap: 24px;
    background: #00476A;
}

.fieldWrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.loginTitle {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.loginTitle>button {
    border: none;
    background: none;
    color: #FFFFFF;
}

.loginTitle>p {
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
}

.loginForm {
    display: flex;
    gap: 20px;
    align-items: center;
}

.formField {
    display: flex;
    gap: 4px;
    align-items: center;
}

.formField>label {
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

.formField>input,
.formField>select {
    height: 32px;
    background: linear-gradient(0deg, rgba(211, 228, 237, 0.3), rgba(211, 228, 237, 0.3)), #FFFFFF;
    border-radius: 4px;
}

.loginButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    gap: 10px;
    background: #FECD47;
    border-radius: 37px;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #00476A;
}

.carousel-control {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    background-color: #fff;
    border: 1px solid #D3E4ED;
    border-radius: 20px;
    transition: opacity .15s ease;
}

.carousel-control>button {
    width: 145px;
    background-color: white;
    border-radius: 20px !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #00476A !important;
    border: none;
    outline: none;
    box-shadow: none !important;
}

.carousel-control>.active {
    background: #D3E4ED;
}

.carousel-item-inner {
    padding: 70px 72px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 39%;
    min-width: 432px;
}

.carousel-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.carousel-content>h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 100%;
    color: #00476A;
}

.carousel-content>h3 {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #00476A;
}

.carousel-content>h4 {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    color: #00476A;
}

.carousel-item-inner>.story-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 16px 4px 8px;
    gap: 8px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #D3E4ED;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #00476A;
}

.story-btn>.down,
.story-btn>.up {
    display: none;
}

.story-btn.down>.down {
    display: block;
}

.story-btn.up>.up {
    display: block;
}

.carousel-item-inner>p {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 14px;
    /* Davy's Grey */
    color: #4A4B4D;
}

.carousel-bg-wrapper {
    position: relative;
}

.carouselCollapseInner {
    padding: 36px 72px;
    gap: 32px;
    display: flex;
    flex-direction: row;
}

.subCarousel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.subCarousel>h3 {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #4A4B4D;
}

.subCarousel>p {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    color: #4A4B4D;
}

.pageTitle {
    background: #F4F1E8;
    padding: 64px 72px;
    border-bottom: 2px solid #673C4F;
}

.pageTitle>h1 {
    font-weight: 600;
    font-size: 32px;
    line-height: 100%;
    text-align: center;
    color: #00476A;
}

.mainContent {
    padding: 36px 72px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.subContent {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

h2 {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #4A4B4D;
}

.patientFlash {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 72px;
    gap: 24px;
    background: #673C4F;
}

.patientFlash>h2 {
    font-style: italic;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #FFFBB3;
}

.patientDownload {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px;
    gap: 24px;
    background: linear-gradient(0deg, rgba(244, 241, 232, 0.75), rgba(244, 241, 232, 0.75)), #FFFFFF;
}

.patientDownload>h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    color: #4A4B4D;
}

.patientDownload>h3 {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #4A4B4D;
}

.patientDownload>a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    gap: 10px;
    background: #FECD47;
    border-radius: 37px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #00476A;
}

.hcpBar {
    position: sticky;
    top: 0;
    z-index: 200;
}

.hcpBar>img {
    width: 100%;
}

.hcpTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 72px;
    gap: 36px;
    background: #FFFFFF;
}

.titleSection {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.titleSection>h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 100%;
}

.titleSection>h3 {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
}

.videoSection {
    display: flex;
    position: relative;
    padding: 72px;
    gap: 24px;
    flex-direction: column;
    background: linear-gradient(90deg, #00476A 2.19%, rgba(0, 71, 106, 0) 67.54%), url("../images/video-image.svg") no-repeat top right, #3A6D87;
    background-size: contain;
    background-color: #00476A;
}

.videoSection h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 100%;
    color: #FFFFFF
}

.videoSection h4 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
}

.videoSection>button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    gap: 10px;
    position: absolute;
    right: 73px;
    bottom: 46px;
    background: #FECD47;
    border-radius: 37px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #00476A;
}

.videoCollapseInner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 24px 72px 36px;
    gap: 10px;
    background: #FFFFFF;
}

.videoCollapseInner>video {
    width: 100%;
}

.contentSection {
    display: flex;
    flex-direction: column;
    padding: 72px;
    gap: 32px;
}

.contentSection>h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 38px;
    color: #4A4B4D;
}

.contentSection>h4 {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    color: #4A4B4D;
}

.contentSection>p {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    color: #4A4B4D;
}

.contentSection>img {
    width: 100%;
}

.evaluate {
    background: linear-gradient(0deg, rgba(244, 241, 232, 0.75), rgba(244, 241, 232, 0.75)), #FFFFFF;
}

.evaluate img {
    width: 100%;
    margin-bottom: 16px;
}

.gradientBar {
    padding: 8px;
    background: linear-gradient(90.01deg, #673C4F 0.01%, #00476A 90%);
}

.gradientBar>p {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #FFFFFF;
}

.disease-section {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.disease-section>h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
}

.identifyCharts {
    display: flex;
    gap: 80px;
}

.subCharts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.subCharts>h5 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    color: #4A4B4D;
}

.circleDiv {
    display: flex;
    justify-content: center;
}

.accelerate {
    background: linear-gradient(0deg, rgba(167, 202, 219, 0.2), rgba(167, 202, 219, 0.2)), #FFFFFF;
}

.hcpFlash {
    padding: 72px;
    background: #00476A;
}

.hcpFlash>h2 {
    font-style: italic;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    color: #FECD47;
}

.subFooter {
    display: flex;
    flex-direction: row;
    padding: 36px 72px;
    gap: 32px;
    background: #FFFFFF;
}

.contact {
    display: flex;
    gap: 24px;
    flex-direction: column;
    flex: 1;
}

.contact>h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    color: #00476A;
}

.contact>h4 {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    color: #00476A;
}

.contact>div>a {
    padding: 8px 20px;
    background: #FECD47;
    border-radius: 37px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #00476A;
    text-decoration: none !important;
}

.reference {
    display: flex;
    gap: 8px;
    flex-direction: column;
    flex: 1;
}

.reference>h3 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4A4B4D;
}

.reference>ol {
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;
    color: #4A4B4D;
    padding-left: 18px;
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 72px;
    background: #00476A;
    gap: 20px;
}

.footer-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 12px;
    color: #FFFFFF;
}

.footer-links>a {
    font-family: 'Roboto';
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    text-decoration-line: underline;
    color: #FFFFFF;
}

.footer-notes {
    font-family: 'Roboto';
    font-size: 10px;
    line-height: 100%;
    color: #FFFFFF;
    max-width: 576px;
}

@media(min-width: 768px) {
    .michelle .inner-bg {
        background: linear-gradient(90deg, #ffffff 22%, rgba(255, 255, 255, 0) 67.54%), url(../images/bannerImage1.jpg) no-repeat no-repeat 160% 0%/87%;
        /* background-size: 100%; */
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        Max-height: 433px
    }
    .lucy .inner-bg {
        background: linear-gradient(90deg, #ffffff 22%, rgba(255, 255, 255, 0) 67.54%), url(../images/bannerImage2.jpg) no-repeat no-repeat 160% 0%/87%;
        /* background-size: 100%; */
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        Max-height: 433px
    }
    .carousel-item-inner {
        padding: 70px 72px 20px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 50%;
        min-width: 432px;
    }
}

@media(min-width: 1260px) {
    .navbar {
        align-items: end;
        padding: 24px 10%;
    }
    .michelle .inner-bg {
        background: linear-gradient(90deg, #ffffff 35%, rgba(255, 255, 255, 0) 67.54%), url(../images/bannerImage1.jpg) no-repeat no-repeat 100% 0%/65%;
        /* background-size: 100%; */
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        max-height: 433px;
    }
    .lucy .inner-bg {
        background: linear-gradient(90deg, #ffffff 35%, rgba(255, 255, 255, 0) 67.54%), url(../images/bannerImage2.jpg) no-repeat no-repeat 100% 0%/65%;
        /* background-size: 100%; */
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        max-height: 433px;
    }
    .carousel-item-inner {
        padding: 70px 72px 20px 10%;
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 50%;
        min-width: 432px;
    }
    .patientFlash {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 10%;
        gap: 24px;
        background: #673C4F;
    }
    .patientDownload {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 72px 10%;
        gap: 24px;
        background: linear-gradient(0deg, rgba(244, 241, 232, 0.75), rgba(244, 241, 232, 0.75)), #FFFFFF;
    }
    .footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 10%;
        background: #00476A;
        gap: 20px;
    }
    .carouselCollapseInner {
        padding: 36px 10%;
        gap: 32px;
        display: flex;
        flex-direction: row;
    }
}

@media(min-width: 1600px) {
    .michelle .inner-bg {
        background: linear-gradient(90deg, #ffffff 40%, rgba(255, 255, 255, 0) 67.54%), url(../images/bannerImage1.jpg) no-repeat no-repeat 100% 0%/60%;
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        max-height: 432px;
    }
    .lucy .inner-bg {
        background: linear-gradient(90deg, #ffffff 40%, rgba(255, 255, 255, 0) 67.54%), url(../images/bannerImage2.jpg) no-repeat no-repeat 100% 0%/60%;
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        max-height: 432px;
    }
    .carousel-item-inner {
        padding: 70px 72px 20px 15%;
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 50%;
        min-width: 432px;
    }
    .patientFlash {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 10%;
        gap: 24px;
        background: #673C4F;
    }
    .patientDownload {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 72px 15%;
        gap: 24px;
        background: linear-gradient(0deg, rgba(244, 241, 232, 0.75), rgba(244, 241, 232, 0.75)), #FFFFFF;
    }
    .footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 15%;
        background: #00476A;
        gap: 20px;
    }
    .carouselCollapseInner {
        padding: 36px 15%;
        gap: 32px;
        display: flex;
        flex-direction: row;
    }
}

@media(max-width: 1023px) {
    .collapseInner {
        align-items: start;
    }
    .loginTitle {
        align-items: flex-start;
        flex-shrink: 8;
        max-width: 264px;
    }
    .loginForm {
        flex-shrink: 1;
        flex-grow: 1;
    }
    .formField>input,
    .formField>select {
        flex-grow: 1;
    }
    .formField>label {
        width: 75px;
    }
    .fieldWrapper {
        flex-direction: column;
        flex-grow: 1;
        align-items: stretch;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 14px;
        line-height: 17px;
    }
    h2 {
        font-size: 16px;
        line-height: 19px;
    }
    .navbar {
        padding: 12px 20px;
    }
    .navbar-brand {
        order: 1;
    }
    .navbar-button {
        order: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .navbar-toggler {
        order: 3;
    }
    .navbar-collapse {
        order: 4;
    }
    .mobile-login {
        padding: 8px 20px;
        background-color: #00476A;
        align-items: center;
        justify-content: space-between;
    }
    .mobile-login>h3 {
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        color: #FFFFFF;
    }
    .mobile-login>button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 4px 12px;
        gap: 10px;
        background: #FECD47;
        border-radius: 37px;
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        text-align: center;
        color: #00476A;
    }
    .collapseInner {
        padding: 20px;
        gap: 16px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .loginTitle {
        justify-self: start;
    }
    .loginTitle>p {
        font-size: 12px;
        line-height: 14px;
    }
    .loginForm {
        flex-direction: column;
        gap: 16px;
        align-items: initial;
        width: 100%;
    }
    .formField {
        flex-direction: column;
        align-items: start;
    }
    .formField>input,
    .formField>select {
        width: 100%;
    }
    .loginButton {
        width: 126px;
        font-size: 12px;
        padding: 4px 12px;
        align-self: center;
    }
    .hcpTitle {
        flex-direction: column;
        align-items: initial;
        padding: 44px 20px;
        gap: 32px;
    }
    .titleSection>h1 {
        font-size: 24px;
    }
    .titleSection>h3 {
        font-size: 20px;
    }
    .videoSection {
        padding: calc(56vw + 22px) 20px 22px 20px;
        gap: 24px;
    }
    .videoSection h2 {
        font-size: 20px;
    }
    .videoSection h4 {
        font-size: 14px;
        line-height: 17px;
    }
    .videoSection>button {
        position: initial;
        width: 155px;
        height: 32px;
        align-self: center;
    }
    .videoCollapseInner {
        padding: 16px 20px 24px;
    }
    .contentSection {
        padding: 44px 20px;
        gap: 20px;
    }
    .contentSection>h2 {
        font-size: 24px;
        line-height: 29px;
    }
    .contentSection>h4 {
        font-size: 20px;
        line-height: 24px;
    }
    .contentSection>p {
        font-size: 12px;
        line-height: 14px;
    }
    .identifyCharts {
        gap: 38px;
        flex-direction: column;
    }
    .subCharts>h5 {
        font-size: 16px;
    }
    .circleDiv>img {
        width: 100%;
    }
    .mobile-disease {
        gap: 10px;
    }
    .disease-section {
        flex-direction: row;
        gap: 0px;
        justify-content: space-between;
    }
    .disease-section>h3 {
        font-size: 16px;
        line-height: 19px;
    }
    .hcpFlash {
        padding: 44px 20px;
    }
    .hcpFlash>h2 {
        font-size: 20px;
        line-height: 24px;
    }
    .subFooter {
        flex-direction: column;
        padding: 44px 20px;
        gap: 20px;
    }
    .contact>h2 {
        font-size: 20px;
        line-height: 24px;
    }
    .contact>h4 {
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 14px;
        text-transform: uppercase;
        color: #00476A;
    }
    .contact a {
        align-self: center;
    }
    .reference {
        display: flex;
        gap: 8px;
        flex-direction: column;
    }
    .reference>ol {
        font-size: 12px;
        line-height: 14px;
    }
    .carousel-item-inner {
        padding: calc(50vw + 24px) 20px 18px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }
    .carousel-control>button {
        font-size: 14px;
        line-height: 100%;
    }
    .carousel-content>h2 {
        font-size: 20px;
    }
    .carousel-content>h3 {
        font-size: 16px;
        line-height: 19px;
    }
    .carousel-content>h4 {
        font-size: 12px;
        line-height: 14px;
    }
    .carousel-item-inner>.story-btn {
        font-size: 14px;
        line-height: 100%;
    }
    .carousel-item-inner>p {
        font-size: 10px;
        line-height: 12px;
    }
    .carouselCollapseInner {
        padding: 36px 20px;
        flex-direction: column;
    }
    .subCarousel>h3 {
        font-size: 16px;
        line-height: 19px;
    }
    .subCarousel>p {
        font-size: 14px;
        line-height: 17px;
    }
    .patientFlash {
        padding: 20px;
    }
    .patientFlash>h2 {
        font-size: 16px;
        line-height: 19px;
    }
    .patientDownload {
        padding: 20px;
        gap: 16px;
    }
    .patientDownload>h2 {
        font-size: 20px;
        line-height: 24px;
    }
    .patientDownload>h3 {
        font-size: 16px;
        line-height: 19px;
    }
    .patientDownload>a {
        font-size: 12px;
        line-height: 100%;
    }
    .pageTitle {
        padding: 20px;
    }
    .pageTitle>h1 {
        font-size: 28px;
    }
    .footer-links>a {
        font-size: 14px;
    }
    .michelle .inner-bg {
        background: url(../images/bannerImage1.jpg) no-repeat;
        Background-size: 100%;
        position: absolute;
        height: 288px;
        width: 100%;
    }
    .lucy .inner-bg {
        background: url(../images/bannerImage2.jpg) no-repeat;
        Background-size: 100%;
        position: absolute;
        height: 288px;
        width: 100%;
    }
    .carousel-item-inner {
        padding: 276px 20px 18px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        min-width: 320px;
    }
    .footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 20px;
        background: #00476A;
        gap: 20px;
    }
    .videoSection {
        display: flex;
        position: relative;
        padding: calc(56vw + 22px) 20px 22px 20px;
        gap: 24px;
        flex-direction: column;
        background: url(../images/video-image.svg) no-repeat center top;
        background-size: contain;
        background-color: #00476A;
        min-height: 400px;
    }
}

@media(max-width: 499px) {
    .michelle .inner-bg {
        Background-size: 100%;
        position: absolute;
        height: 215px;
        width: 100%;
    }
    .lucy .inner-bg {
        Background-size: 100%;
        position: absolute;
        height: 215px;
        width: 100%;
    }
    .carousel-item-inner {
        padding: 200px 20px 18px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        min-width: 320px;
    }
}

@media(min-width: 768px) {
    .navbar {
        align-items: end;
        padding: 24px 7%;
    }
    .hcpTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 72px 7%;
        gap: 36px;
        background: #FFFFFF;
    }
    .contentSection {
        display: flex;
        flex-direction: column;
        padding: 72px 7%;
        gap: 32px;
    }
    .subFooter {
        display: flex;
        flex-direction: row;
        padding: 36px 7%;
        gap: 32px;
        background: #FFFFFF;
    }
    .footer {
        padding: 36px 7%;
    }
    .videoSection {
        display: flex;
        position: relative;
        padding: 72px calc(7% - 15px);
        gap: 24px;
        flex-direction: column;
        background: linear-gradient(90deg, #00476A 0%, rgba(0, 71, 106, 0) 50%), url(../images/video-image.svg) no-repeat -25% top;
        background-size: cover;
        background-color: #005B8F;
        min-height: 400px;
    }
    .videoSection>button {
        right: 7%;
    }
}

@media(min-width: 830px) {
    .videoSection {
        display: flex;
        position: relative;
        padding: 72px calc(7% - 15px);
        gap: 24px;
        flex-direction: column;
        background: linear-gradient(90deg, #00476A 30%, rgba(0, 71, 106, 0) 50%), url(../images/video-image.svg) no-repeat 125% top;
        background-size: contain;
        background-color: #005B8F;
        min-height: 400px;
    }
}

@media(min-width: 1024px) {
    .videoSection {
        display: flex;
        position: relative;
        padding: 72px calc(7% - 15px);
        gap: 24px;
        flex-direction: column;
        background: linear-gradient(90deg, #00476A 40%, rgba(0, 71, 106, 0) 61%), url(../images/video-image.svg) no-repeat 100% top;
        background-size: contain;
        background-color: #005B8F;
        min-height: 400px;
    }
}

@media(min-width: 1260px) {
    .videoSection {
        display: flex;
        position: relative;
        padding: 72px calc(7% - 15px);
        gap: 24px;
        flex-direction: column;
        background: linear-gradient(90deg, #00476A 45%, rgba(0, 71, 106, 0) 61%), url(../images/video-image.svg) no-repeat 88% top;
        background-size: contain;
        background-color: #005B8F;
        min-height: 400px;
    }
}

@media(min-width: 1600px) {
    .videoSection {
        display: flex;
        position: relative;
        padding: 72px calc(15% - 15px);
        gap: 24px;
        flex-direction: column;
        background: linear-gradient(90deg, #00476A 50%, rgba(0, 71, 106, 0) 67%), url(../images/video-image.svg) no-repeat 80% top;
        background-size: contain;
        background-color: #005B8F;
        min-height: 400px;
    }
    .videoSection>button {
        right: 15%;
    }
    .navbar {
        align-items: end;
        padding: 24px 15%;
    }
    .hcpTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 72px 15%;
        gap: 36px;
        background: #FFFFFF;
    }
    .contentSection {
        display: flex;
        flex-direction: column;
        padding: 72px 15%;
        gap: 32px;
    }
    .subFooter {
        display: flex;
        flex-direction: row;
        padding: 36px 15%;
        gap: 32px;
        background: #FFFFFF;
    }
    .footer {
        padding: 36px 15%;
    }
}