@font-face {

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 400;

    src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');

}



@font-face {

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 500;

    src: url('../fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');

}



@font-face {

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 600;

    src: url('../fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');

}



@font-face {

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 700;

    src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');

}



@font-face {

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 800;

    src: url('../fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');

}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

header {
    /* margin-top: -16px; */
    font-family: 'Inter', sans-serif;
    height: unset;
}

nav.container {
    padding-bottom: 0px;
}

nav .nav-container {
    padding: 0;
    max-height: 60px;
    margin-left: 0px;
    margin-right: 0px;
}

nav .nav-list .nav-item>a,
nav .nav-list .nav-item>span,
nav .nav-list .nav-item>span>a {
    color: #001883;
    font-size: 18px;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
}

nav .nav-list .nav-item:hover>a,
nav .nav-list .nav-item:hover>span {
    color: #000000;
}


nav .nav-list .nav-item .dropdown a.drop-link:hover,
nav .nav-list .nav-item .dropdown span.drop-link:hover {
    color: #001883;
}

nav .nav-list .nav-item {
    margin-left: 0;
    margin-right: 30px;
}

.nav-text-cont {
    /* padding: 20px 0; */
}

.nav-img-cont {
    display: flex;
    align-items: center;
}

nav .nav-list {
    /* margin-bottom: -12px; */
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
    padding-left: 50px;
}

nav .nav-hamb .line {
    height: 3px;
    width: 24px;
    background-color: #001883;
    margin-bottom: 5px;
}

header .container-fluid {
    /* background-color: #C9DFF8; */
    z-index: 10000;
    position: relative;
}

img.header-logo {
    height: 40px;
    width: auto;
}

.text-default {
    color: #001883 !important;
}

.row-brand {
    margin: 16px 0 1px;
}

.sanofi-logo {
    height: auto;
    width: 62px;
    margin-bottom: -13px;
}

.breadcrumbs {
    padding: 30px 54px;
}

.breadcrumbs span {
    font-size: 12px;
}

.breadcrumbs span a {
    color: #001883 !important;
    font-weight: normal;
    text-decoration: underline;
}

.semibold {
    font-weight: 600 !important;
}

.hero-banner {
    padding: 0;
    width: 50vw;
    margin-bottom: 8%;
}

.hero-banner img {
    width: 50vw;
}

.hero-banner-text {
    right: 0;
    top: 16%;
    padding: 0 6%;
    text-align: center;
}

.hero-banner-text > img {
    width: 38%;
    margin-bottom: 50px;
}

.hero-banner-text h2 {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 2rem;
    line-height: 112.5%;
}

.hero-banner-text p {
    font-size: 20px;
    font-weight: 500;
    line-height: 120%;
}

.hero-banner-text p.italic {
    font-size: 16px;
    font-weight: 400;
    line-height: 110.99%;
}

.sticky-nav {
    background-color: #C9DFF8;
}

.hero-banner-text.a2,
.hero-banner-text.b1 {
    display: none;
}

.hero-banner-text.b2 {
    position: relative;
}
.leaf-second {
    display: flex;
    justify-content: flex-end;
}

.leaf-second picture {
    display: flex !important;
    justify-content: flex-end;
    width: 1100px;
}

.leaf-second picture img {
    min-width: 75vw;
    height: auto;
    margin-top: -70px;
    margin-bottom: -200px;
}

.leaf-content {
    top: 0;
    width: 100%;
}

.gradient-pack {
    background-color: #EEF4FE;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 30px 47px;
}

.gradient-pack img {
    margin: 5px 0 30px;
}

.gradient-pack p:nth-of-type(1) {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.gradient-pack p:nth-of-type(2) {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    line-height: 1;
}

.hero-banner-text.b2 {
    position: relative;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.hero-banner-text.b2 h1 {
    font-size: 40px;
    line-height: 1;
    font-weight: 600;
    margin-bottom: -15px;
    margin-top: 110px;
}

.btn-default {
    background-color: #001883;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    max-width: 376px;
    width: 100%;
}

.btn-inverted {
    background-color: transparent !important;
    color: #001883 !important;
    border: 1px solid #001883 !important;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    max-width: 376px;
    width: 100%;
}

#start_scan {
    margin: 60px auto 60px;
    min-width: 222px;
    width: 222px;
}

.foot-sanofi::before,
.foot-sanofi::after {
    content: none;
}

.foot-sanofi {
    background-color: #DAE5F2;
    min-height: 250px;
}

.foot-sanofi .container-foot-sanofi {
    padding: 35px 16px;
}
.foot-sanofi .container-foot-sanofi p.foot-text-small {
    /* padding-right: 80px; */
    padding-left: 0;
}
.foot-sanofi .container-foot-sanofi p {
    padding-left: 80px;
    font-weight: 600;
    margin: 0;
}

.foot-top {
    display: flex;
    align-items: center;
    gap: 105px;
    margin-bottom: 75px !important;
}

.foot-top p {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
}

.foot-copyright .container-copyright, .ft-btm.foot-copyright .container-copyright {
    padding: 30px 16px 30px;
}

.foot-text-small span {
    font-weight: 600;
    font-size: 20px;
}

.foot-sanofi .container-foot-sanofi .foot-text-small {
    font-weight: 500;
    font-size: 16px;
}

.foot-sanofi .container-foot-sanofi .foot-text-large {
    font-size: 16px;
    font-weight: 500 !important;
}
.foot-copyright {
    background-color: #001883;
}

.foot-copyright .container-copyright a {
    font-weight: 500;
    font-size: 16px;
    margin-right: 80px;
}

.small-text {
    font-weight: 400;
    font-size: 14px;
}

.foot-copyright .container-copyright a:active, .foot-copyright .container-copyright a:hover {
    text-decoration: none;
    color: #000;
}

.first-screen > div:first-child {
    z-index: 1;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {  transform: rotate(359deg); }
}
#loading {
    animation: spin 2s infinite steps(8);
}

.scanning {
    padding: 100px 5%;
}

.scanning h1 {
    font-size: 40px;
    font-weight: 800;
    text-align: left;
}

.scanning .loading-1 p {
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    text-align: left;
}

.scanning .loading-2 p {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

.scanning .loading-2 p:first-of-type {
    margin-bottom: -15px;
}

.stress-detector-logo {
    width: 224px;
    height: auto;
    /* margin-left: 73px; */
    margin-bottom: 20px;
}

.leaf-bg {
    background-image: url("../images/loading-bg.svg") !important;
    background-size: 1220px !important;
    background-position: 44vw -115px !important;
    background-repeat: no-repeat !important;
}

.qr-texts {
    color: #001883;
}

.qr-text-title {
    font-size: 28px;
    font-weight: 800;
}

.qr-text-desc {
    font-size: 18px;
    font-weight: 400;
}

.errorBox {
    background-image: url("../images/frame-leaves.webp");
    background-size: cover;
    padding: 0 60px;
}

.qr-code {
    width: 228px;
    height: auto;
}

#errorWrapper {
    padding-bottom: 0;
}

.user-result-bg {
    /* background-color: #fff !important; */
    background-image: url("../images/results.svg");
    background-position: 50% -120px;
    background-repeat: no-repeat;
    background-size: contain;
}
.result-container {
    max-width: 993px;
    padding: 20px 50px !important;
}

.result-right {
    padding: 50px 50px 50px 0;
}
#getResultBtn, #restartBtn {
    font-size: 16px !important;
    font-weight: 700;
}
#downloadBtn, #restartBtn, #getResultBtn {
    border: 2px solid #001883;
    color: #001883;
}
#downloadBtn, #getResultBtn {
    background-color: #001883;
}

.stress-bar {
    background-image: linear-gradient(90deg, #249CD8 -10.71%, #F70601 89.29%);
}
#result_card {
    background: linear-gradient(121deg, rgba(120, 169, 223, 0.25) 18.69%, rgba(66, 130, 223, 0.50) 104.43%);
    border-radius: 14px !important;
}

.result-card {
    box-shadow: none;
    border-radius: 14px !important;
}

.custom-card-headline {
    font-size: 18px;
    font-weight: 600;
}
.custom-card-body {
    font-weight: 500;
    font-size: 14px;
}

.text-left {
    text-align: left !important;
}
.custom-card-body .message-body > span {
    font-size: 12px;
}

@media (min-width: 768px) {
    .custom-card-body .message-body > span {
        font-size: 8px;
    }
}

@media (min-width: 1024px) {
    .custom-card-body .message-body > span {
        font-size: 12px;
    }
}

.dom-title {
    font-size: 28px;
    font-weight: 500;
    color: #001883;
}
.dom-desc {
    font-size: 24px;
    font-weight: 800;
    color: #000;
}
.buy-section {
    background: #EEF4FE;
    border-radius: 10px;
    padding: 35px 45px;
    max-width: 993px;
    justify-content: start;
}
.buy-section .image {
    max-width: 334px;
    width: 334px !important;
}

.result-grid .result, .buy-section .title {
    font-size: 40px !important;
    font-weight: 700;
    line-height: 3rem;
    color: #001883;
}
.buy-section .buttons {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
.desktop-buy-btn {
    font-size: 22px;
    font-weight: 400;
    padding-top: 16px;
    padding-bottom: 16px;
    background: #001883;
    width: 290px;
}
.desktop-benefits-btn,
.desktop-benefits-btn * {
    font-size: 24px;
    font-weight: 600;
    color: #001883 !important;
}
.invisible {
    visibility: hidden;
}

.first-screen {
    margin-top: -12px;
    position: relative;
}

.modal-new {
    position: fixed;
    top: 0;
    z-index: 999999;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,.7);
    display: none;
}

.modal-new-content {
    width: 50%;
    background: #fff;
    padding: 3rem;
    text-align: center;
    position: relative;
}

.modal-new .title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 800;
}

.modal-new button {
    border-radius: 50px;
    padding: .75rem 1.25rem;
    min-width: unset;
    width: auto;
    color: #fff !important;
}

.modal-new .description {
    font-size: 16px;
}

.modal-new .close {
    color: #001883;
    font-size: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.modal-new.open {
    display: flex !important;
}

.results-logo {
    width: 200px;
    margin: 30px;
}

a.unset,
a.unset:hover {
    color: unset;
    text-decoration: none;
}

[data-url] {
    cursor: pointer;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 5px;
    margin-top: -20px;
    margin-bottom: 20px;
}

.categories span {
    background: #576687;
    border-radius: 50px;
    color: #fff;
    padding: 1px 12px;
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }

    nav .row {
        display: flex;
        flex-wrap: nowrap;
    }

    nav .nav-list .nav-item>a .nav__itemLinkBorderHover,
    nav .nav-list .nav-item>span>a .nav__itemLinkBorderHover{
        position: absolute;
        width: 100%;
        height: .25rem;
        bottom: 0;
        left: 0;
        background-color: #001883;
        display: none;
    }

    nav .nav-list .nav-item>a:hover .nav__itemLinkBorderHover,
    nav .nav-list .nav-item>span>a:hover .nav__itemLinkBorderHover{
        display: block;
    }
}

@media (min-width: 992px) {
    #nav-cont {
        padding-top: 0px;
    }
}

@media (min-width: 1458px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1411px;
    }
    .leaf-second picture img {
        margin-bottom: -17vw;
    }
}

@media (max-width: 1400px) {
    nav .nav-list .nav-item>a,
    nav .nav-list .nav-item>span {
        font-size: 16px;
    }
}

@media (max-width: 1350px) {
    #start_scan {
        margin: 30px auto 30px;
    }
    .hero-banner-text > img {
        margin-bottom: 25px;
    }
}

@media (max-width: 1200px) {
    nav .nav-list .nav-item>a,
    nav .nav-list .nav-item>span {
        font-size: 15px;
    }
    nav .nav-list .nav-item {
        margin-right: 15px;
    }
}

@media (max-width: 1250px) {
    .hero-banner-text {
        padding: 0 2%;
    }
    .hero-banner-text h2 {
        font-size: 26px;
        margin-bottom: 2vw;
    }
    .hero-banner-text p {
        font-size: 16px;
    }
    .hero-banner-text p.italic {
        font-size: 12px;
    }
    #start_scan {
        margin: 3vw auto 3vw;
        /* padding: 10px; */
    }
    .hero-banner-text > img {
        margin-bottom: 3vw;
    }
}

@media (max-width: 991px) {
    body {
        /* padding-top: 0 !important; */
    }
    .lg-hidden {
        display: none !important;
    }

    nav.container {
        padding: 6px 0 6px 1rem;
    }

    nav .nav-container>.col-6:nth-child(1) {
        width: 100% !important;
        display: flex;
        justify-content: start;
    }

    nav .nav-container>.col-6:nth-child(3) {
        position: absolute;
        right: 16px;
        top: 20px;
    }
    .sticky-nav {
        padding-top: 0;
        background: #C9DFF8;
    }
    .foot-sanofi .container-foot-sanofi p {
        padding: 0 !important;
    }
    .foot-text-2 {
        margin-top: 30px !important;
    }
    .foot-copyright .container-copyright {
        padding: 50px 18px 20px;
    }
    .foot-copyright .container-copyright a {
        margin: 20px 0px;
        font-size: 14px;
    }
    .foot-copyright .container-copyright .foot-copyright-text {
        margin-top: 0;
    }
    .container-foot-sanofi > .row {
        padding: 0 16px;
    }
    .foot-sanofi .container-foot-sanofi {
        padding: 35px 16px 35px;
    }
    .result-right {
        padding: 50px 50px 50px 50px;
    }
    .foot-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
        margin-bottom: 60px !important;
    }
    .hero-banner img {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .leaf-second picture img {
        margin-bottom: -15%;
    }
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
    .hero-banner {
        margin-left: 0;
        width: 100%;
        padding: 0;
        margin-bottom: 30px;
        position: relative;
    }
    /* header {
        margin-top: -16px !important;
    } */
    .breadcrumbs {
        padding: 21px 22px;
    }
    .hero-banner-text {
        position: relative !important;
        width: 100%;
    }
    .hero-banner-text.a1,
    .hero-banner-text.b2 {
        /* display: none; */
    }
    .hero-banner-text.a1 p.italic {
        display: none;
    }
    .hero-banner-text.a2,
    .hero-banner-text.b1 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* .hero-banner-text.b1 p:nth-child(1) {
        font-size: 32px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 30px;
    } */
    .hero-banner-text.b1 p:nth-child(2) {
        font-size: 18px;
    }
    .hero-banner-text h1 {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    .hero-banner-text h1 + p {
        font-size: 18px;
        margin-bottom: 30px;
    }
    .gradient-pack {
        width: 100%;
        padding: 26px 30px 30px;
    }
    .leaf-content > div > .row {
        margin: 0;
    }
    .gradient-pack p:nth-of-type(2) {
        font-size: 18px;
        line-height: 133.33%;
    }
    .leaf-second picture img {
        position: absolute;
        bottom: 60px;
        margin: 0 !important;
        left: 0;
        width: 100%;
        z-index: 0;
    }
    .leaf-content {
        position: relative;
    }
    .foot-group-1 {
        padding: 0 !important;
    }
    .scanning > div > .row {
        flex-direction: column;
    }
    .scanning {
        padding: 0;
    }
    .scanning .col-6 {
        width: 100%;
    }
    .scanning .col-6:nth-of-type(2) {
        margin-bottom: 60px;
    }
    .scanning .col-6 > div {
        align-items: center;
    }
    .stress-detector-logo {
        width: 100vw;
        margin-left: 0px;
        /* margin-top: 76px; */
    }
    .scanning h1 {
        font-size: 36px;
        font-weight: 600;
        text-align: center;
    }
    .scanning .loading-1 p {
        font-size: 18px;
        font-weight: 500;
        text-align: center;
    }
    .scanning .loading-2 p {
        font-size: 14px;
        font-weight: 500;
    }
    .magnie-logo {
        padding: 0 50px;
        margin-top: 20px;
    }

    .leaf-bg {
        background-image: url("../images/loading-bg-mobile.svg") !important;
        background-size: 100% !important;
        background-position: 50% calc(100% + 100px) !important;
    }
    #userCamera .stress-detector-logo,
    #errorWrapper .stress-detector-logo {
        margin-top: 25px;
        text-align: center;
    }
    #userCamera.leaf-bg {
        background-image: url("../images/loading-bg-mobile2.svg") !important;
        background-position: 0 0 !important;
    }
    #userCamera .camera-text {
        font-size: 16px;
        position: absolute;
        bottom: 110px;
        padding: 0 50px;
        z-index: 999;
        color: #fff !important;
        line-height: 137.5%;
    }
    #restartBtnFromErrorDOM {
        margin-bottom: 50px;
    }
    .user-result-bg {
        background-image: url("../images/results-bg.svg");
        background-position: 50% calc(100% - 250px);
        background-size: 100%;
    }
    .result-grid .result {
        flex-direction: column;
        gap: 20px !important;
    }
    .result-grid .result > div {
        width: 100%;
    }
    .stress-bar-text > .text-xs {
        font-size: 12px;
        font-weight: 500;
        text-shadow: none;
    }
    .stress-bar-text > .text-base {
        font-size: 16px;
        font-weight: 700;
        text-shadow: none;
    }
    .result-right {
        padding: 0px 50px 10px 50px;
    }
    .dom-title {
        font-size: 12px;
    }
    .dom-desc {
        font-size: 16px;
        font-weight: 700;
        color: #001883;
    }
    .dom-desc > span {
        border-bottom: 2px solid #001883;
    }
    .m\:text-center {
        text-align: center !important;
    }
    .result-container {
        padding: 20px 5px !important;
    }
    .custom-card-headline {
        font-size: 18px !important;
        font-weight: 600;
    }
    .custom-card-body {
        font-weight: 500;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    .buttons {
        padding: 30px 0 50px !important;
    }
    .buy-section {
        display: flex !important;
        flex-direction: column;
        padding: 15px 15px;
    }
    .buy-section .title {
        font-size: 24px !important;
        font-weight: 700;
        width: 100%;
    }
    .desktop-buy-btn,
    .desktop-benefits-btn {
        display: block !important;
    }
    .desktop-benefits-btn * {
        font-size: 14px;
        font-weight: 600;
    }
    .desktop-buy-btn {
        font-size: 16px;
        font-weight: 600;
        padding-top: 15px;
        padding-bottom: 15px;
        max-width: 266px;
        margin-bottom: 10px;
    }
    .buy-section .buttons {
        align-items: center !important;
        padding: 15px 0 15px !important;
        gap: 0 !important;
    }

    /* NEW STYLES */
    .hero-banner-text h2 {
        font-size: 36px;
        margin-bottom: 30px;
        line-height: 125%;
    }
    .hero-banner-text p {
        font-size: 16px;
        margin-bottom: 50px;
    }
    .hero-banner-text.b1 p {
        font-size: 18px;
        padding: 0 30px;
        margin-bottom: 60px;
    }
    #start_scan {
        width: 174px;
        min-width: unset;
    }
    .first-screen:after {
        content: "";
        background: url("../images/home-leaf-mobile.webp");
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: contain;
    }
    .modal-new-content {
        width: 100%;
    }
    .navigation-mobile {
        height: 100%;
    }
    #loadingWrapper .stress-detector-logo img {
        width: 100%;
    }
    .stress-detector-logo img {
        width: 50%;
    }
    .hero-banner-text > img {
        width: 50%;
    }
    #downloadBtn, #getResultBtn {
        min-height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .buy-section .title {
        text-align: left !important;
    }
    .categories span {
        font-size: 12px;
    }
}