/* Metric-matched fallback (Arial sized to Poppins) so the async Poppins swap doesn't reflow text → kills the
   font-swap CLS that was pushing the hero down. Use 'Poppins-fallback' right after 'Poppins' everywhere. */
@font-face {
    font-family: 'Poppins-fallback';
    src: local('Arial');
    ascent-override: 92.42%;
    descent-override: 30.81%;
    line-gap-override: 8.80%;
    size-adjust: 112.16%;
}

.topBFBannerSectionWrapper { border-bottom: 1px solid #d9d9d9; }

/*IMAGE SLIDER*/
   .custom-image-slider {
        position: relative;
        width: 100%;
        height: 100%;
        width: auto;
        padding-bottom: 61%; /* Adjust this value according to your image aspect ratio */
      }

      .slider-before,
      .slider-after {
        position: absolute;
        width: 100%;
        display: block;
        top: 0;
        left: 0;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
      }

      .slider-after {
        overflow: hidden;
      }

      .slider-handle {
        position: absolute;
        top: 0;
        left: 50%;
        width: 0px;
        height: 100%;
        background-color: #fff;
        cursor: ew-resize;
      }

    /*.slider-handle::before,
    .slider-handle::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 0;
      height: 0;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      cursor: ew-resize;
      transition: all 0.2s ease-out;*/ /* Add transition property */
    /*}*/

   /* .slider-handle::before {
      left: -24px;
      border-right: 16px solid #fff;
    }

    .slider-handle::after {
      right: -24px;
      border-left: 16px solid #fff;
    }
      .slider-before, .slider-after {
        user-select: none;
      }*/
/*END IMAGE SLIDER*/
body {
    font-family: 'Poppins', 'Poppins-fallback', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
}

.header {
    position: relative;
    background-color: #FDF8F1;
    overflow: hidden;
}

/* Desktop hero now uses a full-bleed video covering the right half (replaces the old background-image) */
.header-video-desktop {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.beigeBg {
    background-color: #FDF8F1;
}
.left-banner  {
    padding: 4rem 0rem;
}
.left-banner .banner-container  {
    width: 600px;
}
.check-circle {
    margin-top:-5px; margin-right:10px;
}
.stock:before {
    display: inline-flex;
    margin: -2px 5px 0 0;
    width: 9px;
    height: 9px;
    background: #95DF89;
    border-radius: 50%;
    content: "";
    animation: 1s ease-in-out infinite fade;
}

@keyframes fade {

    0%,
    100%,
    70% {
        opacity: 100%
    }

    50% {
        opacity: 30%
    }
}

* {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
}

.poppins-thin {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", 'Poppins-fallback', sans-serif;
    font-weight: 900;
    font-style: italic;
}


* {
}

* {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}

*::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.accordion {
    --bs-accordion-bg: none;
}

.accordion-item {
    border-radius: 2px !important;
}

.faq-content .accordion-button.collapsed::after {
    background: url("https://purpleassetscdn-aeedeqfzb5cgc3cp.z01.azurefd.net/web/glokore/calmpods/inter4/expand-icon.svg");
    background-size: contain;
}

.faq-content .accordion-button:not(.collapsed)::after {
    background: url("https://purpleassetscdn-aeedeqfzb5cgc3cp.z01.azurefd.net/web/glokore/calmpods/inter4/collapse-icon.svg");
    background-size: contain;
}

.faq-content .accordion-item {
    border: 1px solid #4F4F4F !important;
}

svg path:first-child {
    fill: #fff;
}

.recommend-section {
    background-color: #FDF8F1;
}

.time-offer-section {
    background-color: #FDF8F1;
}

span {
    color: #000;
}

.headline-number {
    color: #E20004;
    font-weight: bold;
    font-size: 24px;
}

.order-button {
    background-color: #0493ED;
    border: none;
    color: #fff;
    font-size: 18px !important;
    width: 340px;
    height: 70px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 8px;
}

.order-button:hover {
    background-color: #0286D8;
    border-color: #0286D8;
    color: #fff;
    border: 1px solid #0286D8;
}

.right-arrow svg path:first-child {
    fill: #fff;
}

.right-arrow svg path:hover {
    fill: #0493ED;
}

.floating-order-button {
    background-color: #0493ED;
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    padding: 14px 20px;
    transition: all 0.2s linear;
    border: none;
    width: 100%;
}

.floating-order-button:hover {
    color: #fff !important;
}

.floating-order-button span {
    color: #fff;
}

.pulse-button {
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

.accordion-button:not(.collapsed) {
    color: #000;
}


.left-banner .seenOn p,
.bottom .seenOn p {
    font-size: 12px;
    margin-bottom: 5px;
}

.left-banner .seenOn img,
.bottom .seenOn img {
    width: 95%;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.9);
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.95);
    }

    50% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(0.95);
    }
}

.carousel li::marker {
    font-size: 0;
}

.relief-section {
    background-color: #FFF;
    width: 100%;
}

header {
    background-color: #fff;
    padding: 5px 0px;
}

.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
}

.accordion-button:not(.collapsed) {
    background-color: #fff;
}

.mobile {
    display: block !important;
}



.left-banner .banner-headline {
    font-weight: bold;
    font-size: 48px;
    color: #000;
    line-height: 60px;
}

.is-mobile {
    display: none;
}

.is-desktop {
    display: none;
}

.award-section {
    background-color: #f9e079;
    color: #000;
}

.simple-to-use-section {
    background-color: #fff;
}

.section-space {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

footer {
    border-top: 1px solid #EFEFEF;
}

@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.logos {
    overflow: hidden;
    white-space: nowrap;
}

.logos:before,
.logos:after {
    content: "";
    width: 250px;
    height: 100%;
    z-index: 2;
}

.logos:before {
    left: 0;
}

.logos:after {
    right: 0;
}


.logos:hover .logos-slide {
    animation-play-state: paused;
}

.logos-slide {
    display: inline-block;
    animation: 35s slide infinite linear;
}

.logos-slide img {
}

/* ===== Review summary + review cards ===== */
.review-summary {
    display: grid;
    grid-template-columns: 38% 31% 31%;
    align-items: center;
    gap: 0;
    /* Trimming the title's own margin wasn't enough: this block adds its own top padding on top
       of it, so the real gap under the heading was 14 + 38 = 52px. */
    padding-top: 12px;
    padding-bottom: 34px;
}

.review-summary-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.review-summary-images img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.review-summary-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.review-summary-item {
    display: grid;
    grid-template-columns: 50% 45% 5%;
    align-items: center;
    border-bottom: 1px solid #E1E1E1;
    font-size: 15px;
    color: #111827;
    font-weight: 600;
    padding: 2px 0;
    font-family: 'Inter', sans-serif;
}

.review-summary-item span {
    text-align: right;
}

.rating-summary {
    display: block;
}

.rating-summary img {
    height: 32px;
    width: auto;
}

.review-summary-rating {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
}

.review-summary-rating strong {
    font-size: 70px;
    line-height: 1;
    margin-bottom: 5px;
}

.review-summary-rating > div img {
    height: 22px;
    width: auto;
}

.review-summary-rating p {
    font-size: 16px;
    max-width: 220px;
    text-align: center;
    line-height: 20px;
    margin-top: 18px;
}

.testimonial-text {
    font-size: 16px;
    line-height: 28px;
    padding-top: 5px;
    padding-bottom: 7px;
}

.would-recommend-item {
    border: 1px solid #D3D3D3;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
}

/* ── DIVIDER ── */
.divider { border: none; border-top: 0.5px solid #000; margin: 5px 0; }




/* mobile css */

@media (max-width: 1399px) {
.header {
    background-size: auto 100%;
    background-position:100%;
}
}
@media (max-width: 1199px) {
.header {
    background-size: auto 100%;
    background-position:130%;
}
}
@media (max-width: 1024px) {
    .header {
        background-size: auto 100%;
        background-position:170%;
    }
    .banner-desc {
        font-size: 18px!important;
    }
    .banner-checked-line {
        font-size: 17px!important;
        font-weight: 600;
        
    }
    .nav-links {
        display:none!important;
    }
}
@media (max-width: 991px) {
.header {
    background-image: initial;
} 
.left-banner .banner-container  {
    width: auto;
}
}
@media (max-width: 768px) {
    .section-space {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .navbar-nav li {
      border-bottom: 1px solid #000;
      padding: 10px 40px;
    }

    .days-guarantee {
        margin-top: 15px;
    }

    .order-button {
        width: 100%;
        height: 50px;
    }

    header ul li:active {
        background-color: #0493ED;
        color: #fff;
    }

    .relief-section {
        padding-bottom: 0;
    }

    .recommend-section {
        padding-bottom: 25px;
    }

    .would-recommend-item-content {
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: auto;
        aspect-ratio: 742 / 916;
    }

    .review-summary {
        grid-template-columns: 1fr !important;
        gap: 0;
        padding-top: 10px;
        padding-bottom: 25px;
    }

    .review-summary-rating {
        margin-top: 22px;
    }

    .review-summary-item {
        grid-template-columns: 1fr auto auto;
        column-gap: 8px;
    }

    .rating-summary {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .rating-summary img {
        height: 16px;
    }

    .would-recommend-section.section-space {
        padding-bottom: 1rem;
    }

    .offer-alignment {
        text-align: center !important;
    }

    .recommend-title {
        color: #000;
        font-size: 20px;
        font-weight: bold;
        line-height: 39px;
    }

    .section-title {
        font-weight: bold;
        font-size: 28px;
        text-align: center;
        color: #000;
        line-height: 38px;
    }

    

    

    

    .award-section {
        text-align: center;
        padding: 20px 0;
    }

    .is-mobile {
        display: block;
    }

    .mobCtaBtn {
        padding: 15px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
        background-color: #fff;
        border-radius: 0;
        text-align: center;
    }

    header {
        background-color: #fff;
        
    }

    .header {
        padding-bottom: 0 !important;
    }

    .header-section {
        display: block;
    }


    .nav-logo {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .nav-links {
        display: none;
    }

    .nav-links ul {
        list-style-type: none;
        background-color: #fff;
        padding-left: 0;
    }

    .nav-links ul li {
        padding: 10px;
        display: block;
        border-bottom: 1px solid lightgray;
    }

    .nav-links ul li:last-child {
        border-bottom: none;
    }

    .nav-links ul li a {
        text-decoration: none;
        color: #000;
    }

    #mob-nav {
        display: block
    }

    .left-banner {
        padding: 0rem 0rem;
        width: 100%;
        padding-top: 15px;
    }

    .right-banner {
        width: 100%;
    }

    main {
        margin-top: 0px;
        background-color: #fff;
    }

    .banner-stars {
        display: block;
        margin: 0 auto;
    }

    .banner-container {
        text-align: center;
    }

    /* Headline must hold exactly 2 lines at EVERY width under 768px. At a flat 36px
       "Revive Tired-Looking" measures 391px against a 388px box on a 412px phone, so it wrapped
       to 3. Scaling with the viewport fixes that — but the old 26px floor stopped the shrink at
       ~317px, so anything narrower wrapped to 3 again. Floor lowered to 20px, which holds 2 lines
       down past 260px; the vw term still governs on every real phone (8.2vw = 26px at 320px), so
       nothing changes at normal sizes. */
    .banner-headline {
        font-size: clamp(20px, 8.2vw, 36px) !important;
        line-height: 1.17 !important;
    }

    /* Subhead must read as exactly 3 lines on a phone:
           Use advanced Red Light, Near-Infrared
           and EMS Microcurrent Therapy
           for just 10 minutes a day.
       (the third line is the hard <br> in the markup; the first two come from natural wrap).
       It held down to 375px, then the first line overflowed and broke mid-word as "Near-" /
       "Infrared", giving 4 lines. Scale with the viewport so the wrap point stays put.
       NOTE the !important and the 18px cap: the effective size here is NOT the 15px rule further
       up this block — `.banner-desc { font-size: 18px !important }` inside the max-width:1024px
       query wins over both, so the cap has to match 18px and this has to be !important too. */
    .banner-desc {
        font-size: clamp(12px, 4.5vw, 18px) !important;
    }

    .banner-checked-line {
        font-size: 16px;
        font-weight: 600;
        margin-top: -4px;
        text-align: start;
    }

    .left-banner .seenOn img {
      width: 100% !important;
    }

    .left-banner .seenOn p {
      font-size: 14px;
      margin-bottom: 5px;
    }

    .compare-section {
        background-color: #fff;
        padding-top: 0px;
    }

    .compare-guarantee {
        text-align: center;
        background-color: #f9e079;
        border-radius: 8px;
        border: none;
        padding: 20px 0;
        padding-left: 10%;
        padding-right: 10%;
        margin:15px;
    }

    .compare-container {
        margin: 0 10px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .compare-content td {
        border-bottom: 1px dashed #475858;
        vertical-align: middle;
        padding: 10px;
    }

    .compare-content tr:last-child td {
        border-bottom: none;
    }

    .would-recommend-item {
        margin-bottom: 30px;
    }
    .simple-use-item-content {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
    }

    .simple-use-item {
        margin-bottom: 30px;
    }

    .simple-use-item:last-child {
        margin-bottom: 0px;
    }

    .time-offer-section {
        padding-top: 20px;
    }


}


/* desktop css */


@media (min-width: 769px) {

    .nav-a {
        /* review 00:00 — click affordance. NO horizontal margin: the container already sets a
           gap, and the two stacked to ~53px between links, which read as "too much space". */
        padding: 6px 4px;
        margin: 0;
        border-bottom: 2px solid transparent;
        transition: border-color .15s ease;
    }

    .nav-a:hover,
    .nav-a:focus,
    .nav-a.is-active {
        border-bottom-color: #0493ED;
        text-decoration: none;
    }

    .faq-content {
        padding: 0 10%;
    }
    .offer-alignment {
        text-align: left !important;
    }

    .recommend-title {
        color: #000;
        font-size: 32px;
        font-weight: bold;
        line-height: 39px;
    }

    .section-title {
        font-weight: bold;
        font-size: 42px;
        line-height: 50px;
        text-align: center;
        color: #000;
    }



    .banner-checked-line {
        font-size: 20px;
        font-weight: 600;
    }

    .is-desktop {
        display: block;
    }

    .banner-desc {
        font-size: 20px;
        font-weight: 300;
    }

    .mobCtaBtn {
        display: none !important;
    }

    .mobile {
        display: flex !important;
    }


    header {
        background-color: #fff;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .header-section {
        display: flex;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
    }


    .nav-logo {
    }

    .nav-links {
        display: block;
    }

    #mob-nav {
        display: none;
    }

    header .order-button {
        color: #fff;
        font-size: 18px;
        width: 175px;
        height: 40px;
        border-radius: 8px;
    }

    header ul {
        margin-bottom: 0;
        list-style-type: none;
        padding-left: 0;
    }

    header .nav-links {
        display: flex;
        width: 100%;
        gap: 22px;
        /* review 00:00 — sit the links to the RIGHT (toward the Order Now button) rather than
           floating in the middle of the header. The ask was to MOVE them right, not to spread
           them apart, so keep the group tight and let flex-end do the positioning. */
        justify-content: flex-end;
    }

    header .nav-links a {
        text-decoration: none;
        color: #000;
        font-size: 15px;
        font-weight: 400;
    }

    /*
    .left-banner {
        padding-top: 70px;
        padding-bottom: 50px;
        padding-right: 30px;
        padding-left: 0;
    }
    */



    .right-banner {
        width: 50%;
    }


    .header-logo {
        width: 167px;
        height: 35px;
    }

    main .banner {
        background-color: #FDF8F1;
        padding-left: 0;
    }

    .left-recommend {
        width: 100%;
    }

    .recommend-row {
        align-items: center;
    }

    .right-recommend {
        width: 75%;
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .simple-use-item-flex {
        justify-content: space-between;
    }

    .simple-use-item {
        width: 328px;
    }

    .simple-use-item-content {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
    }


    .how-works-flex {
        gap: 50px;
    }

    .how-works-col {
        width: 50%;
    }

    .how-works-col img, .how-works-col video {
        width: 100%;
        height: auto;
        border-radius: 10px;
        aspect-ratio: 1134 / 638;
    }

    .compare-section {
        background-color: #fff;
        padding: 20px 20px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .compare-guarantee {
        justify-content: center;
        align-items: center;
        background-color: #f9e079;
        border-radius: 8px;
        border: none;
        gap: 20px;
        padding: 20px 50px;
    }

    .compare-container{
        width: 900px;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .compare-content td {
        border-bottom: 1px dashed #475858;
        vertical-align: middle;
        padding: 10px;
    }

    .compare-content tr:last-child td {
        border-bottom: none;
    }

    .product-box-section {
        width: 900px;
        display: flex;
        gap: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .product-box-left {
        width: 50%
    }

    .product-box-right {
        width: 50%
    }

    .accordion-flush .accordion-item:last-child {
        border-bottom: .125px solid #C9C9C9;
    }

    .would-recommend-section {
        padding-top: 30px;
        padding-left: 4%;
        padding-right: 4%;
    }

    .would-recommend-flex {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .would-recommend-item {
        flex-basis: 31.5%;
        margin-bottom: 30px;
    }

    .would-recommend-item-content {
        width: 100%;
        object-fit: cover;
        object-position: top;
        border-radius: 10px 10px 0 0;
    }

    .time-offer-section {
        padding: 0px;
        background-color: #FDF8F1;
    }

    .time-offer-left {
        width: 100%;
        position: relative;
    }

    .time-offer-left img {
        width: 100%;
    }

    .time-offer-right {
        width: 100%;
        padding: 30px 50px;
    }

    .faq-section {
        padding-top: 20px;
    }

    .award-section {
        background-color: #f9e079;
        color: #000;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .how-works-section {
        background-color: #fff;
        padding-bottom: 50px;
        padding-left: 35px;
        padding-right: 35px;
    }


    .recommend-section {
        background-color: #FDF8F1;
        padding-left: 0
    }

    .simple-to-use-section {
        background-color: #fff;
        padding-top: 35px;
        padding-left: 5%;
        padding-right: 5%;
    }

    .relief-section .d-md-flex {
        align-items: center;
    }

    

    

    

    .banner-stars {
        margin-top: -2px;
    }
}

/* Review section ("Hear What Others...") star rating: fixed 16px height */
#reviews .mb-1 > img {
    height: 16px;
    width: auto;
}


/* ── Review pass: tighten vertical spacing (inter4 only) ───────────────────────────────
   The reviewer flagged a large empty band above "What's in the box", a loose gap between
   each accordion heading and its content, and the same looseness in the reviews block.
   Selectors target the REAL accordion containers (#accordion1 / #accordion2) — an earlier
   attempt used #accordionFlushExample, which is only a data-bs-parent value and matches
   no element, so it silently did nothing. */

/* close the band between the comparison CTA and the what's-in-the-box block */
.compare-section.section-space {
    padding-bottom: 1.5rem;
}

/* Keep the bottom padding: the technical-specs accordion inside this block expands, and with
   0 here it collides with the "98.4% WOULD RECOMMEND" band below. Only the top is tightened. */
.product-box-section {
    padding-top: 0;
    padding-bottom: 15px;
}

/* headings sit with their content, and a bit larger for hierarchy (review 08:28) */
/* #accordion1 is the What's-in-the-box / Technical-specs box, which the reviewer asked to have
   a slightly bigger heading. #accordion2 is the FAQ and must NOT be included — doing so made
   every FAQ question 20px/700 instead of inheriting the design's own size. */
#accordion1 .accordion-button {
    font-size: 20px;
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 6px;
}

#accordion1 .accordion-body,
#accordion2 .accordion-body {
    padding-top: 0;
    padding-bottom: 12px;
    line-height: 1.55;
}

/* FAQ card gap is set by the .mb-2 utility on the markup — a .mb-4 there carried
   !important and silently beat any rule we wrote here. */

/* reviews block (review "same with reviews") */
.would-recommend-section {
    padding-top: 16px;
}

.would-recommend-section.section-space {
    padding-bottom: 1.5rem;
}

.faq-section {
    padding-top: 8px;
}

/* The right column is vertically centred against the product shot (align-self-center in the
   markup), so it needs no top nudge - that was only for the earlier top-aligned layout. */


/* ── Review pass 2: section rhythm, both breakpoints ───────────────────────────────────
   Reviewer: "tighten these sections up". Desktop was still 4rem/4rem on most sections
   while mobile had already been halved to 2rem by the existing max-768 rule. These bring
   desktop down to 2.5rem and trim the two sections that were still oversized, without
   touching the mobile values he said already felt tight. */
@media (min-width: 769px) {
    .section-space {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    /* beige band and the how-it-works block carried their own larger values */
    .beigeBg {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* "HOW IT WORKS" and "SIMPLE TO USE" read tighter than their neighbours because the 2.0
       carousel section next to them sits at 64px while the tightened rhythm here is 40px.
       Give just these two a bit more headroom (40 -> 56px) without re-inflating the whole page. */
    .how-works-section.section-space {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .steps-section.section-space {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    /* faq bottom was still 4rem — it is the last block before the footer */
    .faq-section.section-space {
        padding-bottom: 2.5rem;
    }
}


/* These four were deliberately tightened above; the generic .section-space rule in the
   min-769 block sits later in the file and was re-inflating their padding-top. Re-assert
   them last so the tightened values win. */
@media (min-width: 769px) {
    .compare-section.section-space {
        padding-top: 1.25rem;
        padding-bottom: 1.5rem;
    }

    /* 2rem, not 1rem: the expanded technical-specs accordion above needs breathing room. */
    .would-recommend-section.section-space {
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }

    .faq-section.section-space {
        padding-top: 0.5rem;
        padding-bottom: 2.5rem;
    }

    .product-box-section {
        padding-top: 0;
        padding-bottom: 15px;
    }
}



/* ── Presell 2.0: centred product hero + 3 feature cards (replaces the old text|product|text row) */
/* 2.0 ships a landscape 600x400 product shot (the old asset was a 1000x1000 square with ~14%
   of built-in top padding, which is what made this block look so empty). Render it at its
   natural size, centred, matching the designer's layout. */
.relief-product {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* FEATURE BOXES UNDER PRODUCT IMAGE */
.feature-box-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.feature-box {
    background: #fff;
    border: 1px solid #EEEEEE;
    border-radius: 14px;
    padding: 24px 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    text-align: left;
}

.feature-box-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}

.feature-box-desc {
    font-size: 16px;
    color: #4B5563;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .feature-box-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Presell 2.0: "Just 10 Minutes a Day" before/after strip (Splide, auto-scroll) */
.af-ten-min {
    background: #FFF;
    padding: 10px 0 10px;
    text-align: center;
    position: relative;
    z-index: 0;
}

.af-eyebrow {
    color: #BD171A;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.af-section-title {
    font-family: 'Poppins', 'Poppins-fallback', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: #000;
    margin: 10px 0 20px;
    line-height: 1;
}

.af-ten-min-carousel {
    margin-top: 4px;
    padding: 4px 0 12px;
}

.af-ba-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.af-ba-card-imgwrap {
    border-radius: 10px;
    overflow: hidden;
    background: #e8e8e8;
    aspect-ratio: 176 / 276;
    width: 50%;
    max-width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.af-ba-card-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.af-ba-caption {
    margin: 12px 0 0;
    width: 100%;
    box-sizing: border-box;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    font-family: 'Poppins', 'Poppins-fallback', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #077fc9;
    text-align: center;
    white-space: normal;
    background: #fff;
    border: 1px solid #d0efff;
    border-radius: 6px;
}

@media (max-width: 991.98px) {
    .af-ten-min { padding: 24px 0 24px; }
}

@media (max-width: 575.98px) {
    .af-ten-min { padding: 24px 0 24px; }
    .af-ten-min .af-section-title { font-size: 28px; line-height: 38px; }
    .af-ten-min .af-eyebrow { line-height: 14px; }
    .af-ba-caption { font-size: 13px; padding: 5px 10px; min-height: 28px; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .af-ten-min-carousel { padding-left: 4px; padding-right: 4px; }
}


/* ── Offer section: make the video sit flush with the box beside it.
   Was pinned to height:700px against a 629px content-height box, so it overhung by 31px and
   left a dead band underneath. Two things were needed: the row had Bootstrap's
   .align-items-center (swapped to -stretch in the markup) so the columns now share a height,
   and the video absolutely fills .time-offer-left, which takes that height via height:100%.
   height:100% on the video alone was not enough - with no definite ancestor height it computes
   to auto and the video falls back to its intrinsic aspect ratio.
   Desktop only; below 992px the columns stack and mobile uses a separate markup block. */
@media (min-width: 992px) {
    .time-offer-left {
        height: 100%;
        width: 100%;
    }
}


/* ── Mobile section rhythm: one uniform 32px top AND bottom for every content section.
   Before this the page ranged from 0 to 40px and several sections were asymmetric
   (relief 32/0, compare 0/24, reviews 16/24, FAQ 8/32), which is why one block read as
   having much more space than its neighbours. !important is required: .beigeBg carries
   Bootstrap's py-4 utility, and several of the old values came from utilities too.
   Structural strips (header, award logo bar, the trust line, the product-box sub-block and
   the mobile offer block) are deliberately left alone - they are not standalone sections. */
@media (max-width: 768px) {
    /* .af-ten-min is deliberately NOT in this list: its slides run edge-to-edge, so the 24px
       rhythm crowded them. It keeps its own 40px mobile padding. */
    .relief-section.section-space,
    .beigeBg,
    .how-works-section.section-space,
    .steps-section.section-space,
    .compare-section.section-space,
    .would-recommend-section.section-space,
    .faq-section.section-space {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* The CTA under the numbered how-it-works list sat 48px (mt-5) below the last item, which
       read as a hole on a phone. */
    .how-works-section .mt-5.text-center {
        margin-top: 24px !important;
    }

    /* "Meet the Power 3-in-1" measured 40px top / 54px bottom despite symmetric padding: the
       eyebrow carries mt-3 (16px) and the card grid a 30px bottom margin. Zero both so the
       section reads 24/24 like its neighbours. */
    .relief-section .mt-3 {
        margin-top: 0 !important;
    }

    .relief-section .feature-box-grid {
        margin-bottom: 0 !important;
    }
}


/* ── Equal top/bottom whitespace in every content section.
   Symmetric PADDING on the section is not enough: several sections carried a trailing margin or
   padding on their last inner element, so the visual gap at the bottom ran 8-30px larger than the
   top. Each rule below neutralises one of those, leaving the section's own padding to define the
   whitespace on both sides. Measured culprits:
     .af-ten-min-carousel   padding-bottom 12px   (splide track)
     .feature-box-grid      margin-bottom  30px
     .compare-container     padding-bottom 20px
     .would-recommend-item  margin-bottom  30px   (last review card)
     .accordion-item        margin-bottom   8px   (last FAQ row)
     .mt-3 eyebrow          margin-top     16px   (top side only) */
.af-ten-min-carousel {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.relief-section .mt-3 {
    margin-top: 0 !important;
}

.relief-section .feature-box-grid {
    margin-bottom: 0;
}

.compare-section .compare-container {
    padding-top: 0;
    padding-bottom: 0;
}

/* .mt-md-5 adds 48px (desktop) / 8px (mobile) above the FAQ list */
.faq-section .mt-md-5 {
    margin-top: 0 !important;
}

/* the mobile offer block padded 20/32 */
.time-offer-section.section-space {
    padding-bottom: 15px;
}

.would-recommend-section .would-recommend-item:last-child {
    margin-bottom: 0;
}

.faq-section .accordion-item:last-child {
    margin-bottom: 0 !important;
}

/* these two had asymmetric padding of their own */
.product-box-section {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* This section's image is full-bleed (w-100) and the section has a beige background, so the
   image is MEANT to sit flush against the top edge. Padding-top here exposes a strip of beige
   above the photo — it must stay 0. The bottom padding separates the text from what follows. */
.recommend-section {
    padding-top: 0;
    padding-bottom: 25px;
}

@media (min-width: 769px) {
    .compare-section.section-space {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .would-recommend-section.section-space {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .faq-section.section-space {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}


/* ── Mobile: even out the how-it-works items 01-05.
   Odd items measured a 17px gap between their media and the "0X" title while even items measured
   8px. Cause: the media in the odd rows is an inline element, so it carried a ~9px baseline gap
   under it; the even rows' media did not. display:block removes it, then one explicit margin
   gives all five items the same spacing. `.how-works-col.px-0` is the media column in both row
   layouts (the text columns use ps-md-5 / order-* and have no px-0). */
@media (max-width: 768px) {
    .how-works-col.px-0 video,
    .how-works-col.px-0 img,
    .how-works-col.px-0 picture {
        display: block;
    }

    .how-works-col.px-0 {
        margin-bottom: 12px !important;
    }
}

/* ── Mobile: FAQ questions ran within ~8px of the expand icon on the wrapping lines.
   The button only reserved 20px on the right while the icon itself is ~20px wide and sits
   inside that padding, so long questions collided with it. */
@media (max-width: 768px) {
    /* The button is display:flex with the +/- icon as the last flex item, so padding-right pushes
       the ICON inward too - raising it to 52px moved the icon 52px off the right edge instead of
       just giving the text room. `gap` puts the clearance between the text and the icon while the
       icon stays pinned at the normal 20px inset. */
    .faq-content .accordion-button {
        padding-right: 20px;
        gap: 18px;
    }

    /* The offer video is meant to run FULL WIDTH on mobile. Its parent is a Bootstrap .container
       with 12px of gutter each side, so cancel that with matching negative margins to reach the
       viewport edges. NB the mobile block is separate markup from the desktop one - it has no
       .time-offer-left, hence the .offer-media-mob hook. */
    .time-offer-section .offer-media-mob {
        margin-left: -12px;
        margin-right: -12px;
    }
}


/* ── Presell 2.0 adds a hairline under the header, separating the nav from the hero.
   It was identified in the bundle diff but missed when the other 2.0 rules were ported. */
header {
    background-color: #FFF;
    border-bottom: 1px solid #878787;
}


/* ── Inter review (Loom, Aug 2026): "make the percentages stand out — 84 large, with the copy
   next to it; it'll read better on mobile." The stat was previously one flat 17px sentence. */
/* Was align-items:baseline, which pins the copy's FIRST line to the number's baseline: the copy
   then hangs low against a 36px number, and on the row that wraps to two lines the number reads as
   top-aligned instead of sitting beside the block. Centre the copy on the number instead. */
.stat-line {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #000;
    margin-bottom: 14px;
}

.stat-line .stat-num {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
    color: #000;
}

.stat-line .stat-copy {
    font-size: 17px;
    line-height: 24px;
}

@media (max-width: 768px) {
    .stat-line {
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-line .stat-num {
        font-size: 34px;
    }

    .stat-line .stat-copy {
        font-size: 16px;
        line-height: 22px;
    }
}


/* ── Inter review round 2 (Loom, Aug 2026) ─────────────────────────────────── */

/* The four rating strips were three different sizes: two carried .rating-text (13px, and
   only inside the 768px query) and two were unstyled spans inheriting the body size.
   One rule for all of them, and 24,863+ is glued to Reviews so the line can't split there. */
.rating-text {
    font-size: 14px;
    line-height: 20px;
}

/* "84 larger with the text next to it" landed, but the number then read as oversized against
   17px copy, and each number is a different width so the copy started at a different x on every
   row. Trim the number and give it a fixed column so the three copy blocks line up. */
.stat-line .stat-num {
    font-size: 36px;
    min-width: 78px;
}

/* "Fix your spacing here, and fix the line height on this piece of text." 28px leading on 14px
   copy (2.0) read as two stranded lines welded to the title with 0 gap. */
.how-works-sub {
    line-height: 22px;
    margin-top: 12px;
}

/* "You're a little bit far away" — the reviews title carried an inline line-height:54px and a
   Bootstrap mb-4. Both were removed from the markup rather than fought with !important: an inline
   style beats every selector, and mb-4 is `margin-bottom:1.5rem !important`. */
.reviews-title {
    line-height: 46px;
    margin-bottom: 14px;
}

@media (max-width: 768px) {
    /* The hard <br> after "…to Say" was cut for mobile: at 390px the first half already wrapped,
       so the break stranded "to Say" alone on line 2. Let the browser even the lines instead. */
    .reviews-title {
        line-height: 32px;
        margin-bottom: 12px;
        text-wrap: balance;
    }

    .review-summary {
        padding-top: 4px;
        padding-bottom: 26px;
    }
}

/* "Instead of stacking it with this large line height… tighten up the spacing a little bit."
   The MD line and the specialism were inheriting the body's leading. */
.doctor-signature {
    line-height: 22px;
    margin-top: 10px !important;
}

/* Desktop section padding is deliberately NOT normalized — owner reviewed the other sections and
   they're fine as the designer left them. Only the seams called out below are trimmed. Mobile
   keeps one rhythm (see the 768px query). */

/* The two section-ending CTAs sat 48px (mt-5) below their copy, with the 44px seam beneath them,
   leaving the button floating in a tall white band. Desktop only — mobile already has its own
   .steps-cta rule at 22px. */
.steps-cta.mt-5,
.compare-container + .mt-md-5,
.compare-guarantee + .mt-md-5 {
    margin-top: 20px !important;
}

@media (max-width: 768px) {
    .section-space.section-space {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    /* "Too big on mobile — pull the line height together, shrink it down." */
    .clinically-badge {
        width: 172px !important;
        padding: 9px 10px !important;
        gap: 8px !important;
    }
    .clinically-badge img { width: 30px !important; height: 38px !important; }
    .clinically-badge > div { font-size: 12px !important; line-height: 16px !important; }

    /* Steps videos sat inside the Bootstrap column's 12px gutters while every other video on the
       page is edge-to-edge. Full-bleed the relative wrapper so the numbered badge travels with it
       and only the caption text stays inset. */
    .step-media {
        width: calc(100% + 24px);
        margin-left: -12px;
        margin-right: -12px;
    }

    /* "This one's smaller, this one's bigger. Reduce the line height between these and it'll make
       this comparison chart a little bit smaller." */
    .compare-content td { font-size: 14px; line-height: 19px; padding: 9px 6px; }
    .compare-content td > div { font-weight: 500; }

    /* CTA was 48px (mt-5) below the copy block; closes the gap the reviewer flagged. */
    .steps-cta.mt-5 { margin-top: 22px !important; }

    /* Re-state after the global 36px above, which otherwise wins by source order in here too. */
    .stat-line .stat-num {
        font-size: 32px;
        min-width: 62px;
    }
}

/* Guarantee card body copy: 16px inline font-size was moved onto this class so the mobile rule
   below can win without !important (an inline style beats every selector). */
.guarantee-copy {
    font-size: 16px;
}

@media (max-width: 768px) {
    /* "This is just bad typesetting." The card carried padding: 0 10% ON TOP of a 15px margin,
       leaving a ~250px measure; centred body copy then wrapped raggedly and broke "hassle-free"
       mid-word. Widen the measure, range the copy left (the heading stays centred), and tighten
       the leading from the body default of 28px. */
    .compare-guarantee {
        padding-left: 18px !important;
        padding-right: 18px !important;
        padding-bottom: 24px !important;
    }

    .guarantee-copy {
        text-align: left;
        font-size: 15px;
        line-height: 23px;
        hyphens: none;
    }

    .compare-guarantee .days-guarantee {
        text-wrap: balance;
    }
}

/* Mini review card under the offer CTA: 13px quote and 11px byline were both inheriting the
   body's 28px leading (2.15 and 2.5 ratios), so the three wrapped lines drifted apart. */
.mini-review-quote {
    line-height: 20px;
}

.mini-review-by {
    line-height: 19px;
    margin-bottom: 4px;
}

/* Adjacent vertical margins collapse, so this row's mb-5 (48px) beat the CTA's 20px margin-top
   and kept the button floating. Trim the row that directly precedes the CTA only — the other
   four feature rows keep their mb-5 separation. */
.last-feature-row.mb-5 {
    margin-bottom: 20px !important;
}

@media (max-width: 768px) {
    .last-feature-row.mb-5 {
        margin-bottom: 14px !important;
    }
}

/* Owner, Aug 2026: these three sections read as having more space than the rest on desktop.
   Match them to the HOW IT WORKS reference (.how-works-section.section-space = 3.5rem).
   Was: af-ten-min 64px, relief-section 40px, results 32px. !important is needed because the
   results section takes its padding from Bootstrap's py-md-5/py-4 utilities.
   Desktop only — the 768px block above already puts every section on 24px for mobile. */
@media (min-width: 769px) {
    .relief-section.section-space,
    section.beigeBg.py-md-5 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
}

/* The results image column carries Bootstrap's py-md-5 (48px) INSIDE a section that already has
   56px padding, so the visible space above/below the image was 104px, not 56px. Drop the column's
   vertical padding on desktop so the image lines up with the section's own 3.5rem. Horizontal
   gutter is kept. !important because py-md-5 is a Bootstrap utility. */
@media (min-width: 769px) {
    section.beigeBg .col-lg-7.py-md-5 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Owner-specified: compare section sits tight under the steps CTA above it. Desktop only. */
@media (min-width: 769px) {
    .compare-section.section-space {
        padding-top: 10px;
    }
}

/* Review cards: the last card rendered 30px TALLER than its row-mates (826 vs 856 at 1440px).
   Cause: every .would-recommend-item carries margin-bottom:30px, but
   `.would-recommend-section .would-recommend-item:last-child { margin-bottom: 0 }` (a
   section-bottom-symmetry fix, and it sits at top level, not inside the 768px query) zeroes it on
   the last one. A flex line's cross-size comes from the tallest OUTER box — content + margin — so
   the line is 856px; cards 4/5 fill it as 826px box + 30px margin, while card 6 has no margin to
   absorb and stretches its BORDER box to the full 856px.
   Fix: on desktop drop the per-item margin entirely and space the rows with row-gap, so no item
   carries margin, every card in a row stretches to the same height, and there is still no
   trailing margin under the last row. Mobile stacks (display:block) and keeps the margins. */
@media (min-width: 769px) {
    .would-recommend-flex {
        row-gap: 30px;
    }

    .would-recommend-flex .would-recommend-item {
        margin-bottom: 0;
    }
}

/* ── CalmPods-only additions from the designer's Inter_newv3 bundle ─────────────
   .hl-mark is the same marker-stroke treatment used on the pre pages: a gradient that is
   transparent above and below so a multi-line highlight reads as separate highlighter
   strokes rather than one filled block. box-decoration-break:clone gives each wrapped
   line its own band. */
.hl-mark {
    background-image: linear-gradient(
        to bottom,
        transparent 18%,
        #f9e079 18%,
        #f9e079 90%,
        transparent 90%
    );
    padding: 0 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.verticalLine {
    border-left: 1px solid #000000;
    margin: 5px;
}

/* Reviewer initials. Previously six reviewer-0X.svg files with the letter as SVG <text> in
   Poppins. An SVG referenced through <img src> renders in its own isolated document and cannot
   reach the parent page's webfonts, so Poppins was never available and the glyph silently fell
   back to Arial — the "it kept changing the font" the owner hit. The letters had also drifted out
   of sync with the names (5 of 6 wrong: J/J/C/B/S/N against Jessica/Robert/Patricia/Susan/Nancy/
   Richard) because only the copy was updated when the page was rebranded.
   Rendering the initial as real page text fixes both: it inherits Poppins, and the letter now
   lives next to the name in the markup so the two cannot drift apart again. */
.reviewer-initial {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', 'Poppins-fallback', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #fff !important;
    user-select: none;
}

/* Step cards 1 and 3 hold a <video>, card 2 an <img>. Bootstrap's reboot gives img
   vertical-align:middle, but a <video> stays inline/baseline, so .step-media gained 9px of
   descender slack under the videos only. The "01"/"03" badges are absolutely positioned from
   that box's bottom and the titles follow it in flow, so both sat 9px lower than the middle
   card. display:block removes the baseline gap so all three boxes are exactly the media height. */
.step-media video,
.step-media img {
    display: block;
}

/* Desktop-only bump for the six body "Claim Yours Now" CTAs. The base .order-button
   sets `font-size: 18px !important` (which beats the 20px declared below it in the same
   block), so overriding needs !important too. Scoped to min-width:769px so the mobile
   size is untouched, and the compact header "Order Now" nav button (175x40) is re-pinned
   to 18px here — without that, the !important above would inflate it and overflow it. */
@media (min-width: 769px) {
    .order-button {
        font-size: 22px !important;
    }

    header .order-button {
        font-size: 18px !important;
    }
}