@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* Тільки html з overflow-x:hidden: пара html+body з hidden змушує для обох overflow-y:auto → подвійний вертикальний скрол. */
html {
    overflow-x: hidden;
}

body {
    overflow-x: clip;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #FBFBFB;
    font-family: 'Inter', sans-serif;
    color: #000000;
}

.visuallyhidden {
  	position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


.reviews-slider {
    margin: 0 auto;
}

.review-slide {
    padding-bottom: 40px;
}

.reviews-slider .slick-prev:before {
    border-left: 4px solid #000000;
    transform: rotate(-45deg);
    left: 0;
}

.reviews-slider .slick-next:before {
    border-right: 4px solid #000000;
    transform: rotate(45deg);
    right: 0;
}

.reviews-slider .slick-arrow:before {
    content: "";
    border-top: 4px solid #000000;
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
}

.reviews-slider .slick-arrow {
    color: transparent;
    top: 25%;
}

@media screen and (max-width: 999px) {
    .reviews-slider {
        max-width: 70vw;
    }
}

@media screen and (min-width: 1000px) {
    .reviews-slider {
        max-width: 1000px;
    }
}

.btn-primary {
    background-color: #f9b101;
    border-color: #f9b101;
    color: #292929;
}

.btn-primary:hover {
    background-color: #e0a000;
    border-color: #e0a000;
}

.btn-outline-primary {
    color: #f9b101;
    border-color: #f9b101;
}

.btn-outline-primary:hover {
    background-color: #f9b101;
    border-color: #f9b101;
}

.btn-outline-light {
    color: #ffffff;
    border-color: #ffffff;
    background-color: transparent;
}

.btn-outline-light:hover {
    background-color: #ffffff;
    color: #000000;
}

.hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    overflow: hidden;
    background-color: #236C4E !important;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1;
}

.hero-section .container-fluid {
    position: relative;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
}

.hero-section .btn-primary {
    background-color: #f9b101 !important;
    border-color: #f9b101 !important;
    color: #292929 !important;
}

.hero-section .btn-primary:hover {
    background-color: #e0a000 !important;
    border-color: #e0a000 !important;
    color: #292929 !important;
}

@media (min-width: 992px) {
    .hero-section {
        background-image: url('https://images.sugaris.com.ua/NY/hero_holiday_desktop.jpg');
        min-height: 85vh !important;
        height: 85vh !important;
    }
    
    .hero-section .row.min-vh-100 {
        min-height: 85vh !important;
    }
    
    .hero-section .row {
        min-height: 85vh !important;
    }
    
    .hero-section .col-12 {
        justify-content: flex-start !important;
        padding-left: 5rem;
    }
    
    .hero-content {
        width: 50%;
        max-width: 600px;
        text-align: left;
        margin-left: 0;
    }
    
}

@media (max-width: 991px) {
    .hero-section {
        background-image: url('https://images.sugaris.com.ua/NY/hero_holiday_mobile.jpg');
        background-size: cover;
        background-position: center center;
    }
    
    .hero-section .row {
        min-height: 100vh;
        align-items: flex-start !important;
        padding-top: 2rem;
    }
    
    .hero-section .col-12 {
        align-items: flex-start !important;
    }
    
    .hero-content {
        width: 90%;
        max-width: 100%;
        text-align: center;
        padding: 1rem;
        padding-top: 4rem;
    }
}

@media (max-width: 650px) {
    .hero-section {
        background-size: cover;
        background-position: center center;
    }
}

@media (max-width: 450px) {
    .hero-section {
        background-image: url('https://images.sugaris.com.ua/NY/hero_holiday_mobile_small.jpg');
        background-size: cover;
        background-position: center center;
        height: 80vh !important;
        min-height: 70vh !important;
    }
    
    .hero-section .row {
        height: 100% !important;
        min-height: 100% !important;
        padding-top: 1rem;
    }
}

body > section:first-child,
.creators-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

section:not(:first-child) {
    margin-top: 0.5rem;
}


section {
    border-top: none !important;
}

@media (max-width: 768px) {
    section:not(:first-child) {
        margin-top: 0.5rem;
    }
    
    .creators-section .row.min-vh-100,
    .content-section .row.min-vh-100,
    section.bg-white .row.min-vh-100 {
        min-height: 70vh !important;
    }
}

@media (max-width: 991.98px) {
    .creators-section .hero-video-col {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        padding: 0;
        overflow: hidden;
    }
    .creators-section .hero-video-col .hero-video-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0;
    }
    .creators-section .hero-video-col .hero-video {
        width: auto;
        height: 100%;
        min-height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
        border-radius: 0 !important;
    }
    .creators-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }
    .creators-section > * {
        position: relative;
        z-index: 2;
    }
    .creators-section .row.min-vh-100 {
        align-items: stretch;
        min-height: 70vh;
    }
    .creators-section .col-lg-6:first-child {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: 70vh;
    }
    .creators-section .col-lg-6:first-child .hero-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    .creators-section .hero-content > div:last-child {
        margin-top: auto;
        margin-bottom: 0;
        padding-bottom: 2rem;
    }
}

.creators-section p {
    outline: none !important;
    border: none !important;
}

.brand-symbol {
    font-size: 0.75rem;
    color: #777777;
    vertical-align: 0.7em;
}

@media (min-width: 992px) {
    .brand-symbol {
        vertical-align: 1.5em;
    }
}

.creators-section .hero-content h2,
.creators-section .hero-content p {
    color: white;
}

@media (max-width: 991.98px) {
    .creators-section .hero-content h2,
    .creators-section .hero-content p {
        text-shadow: 0 0 12px rgba(0, 0, 0, 0.3),
                     0 0 24px rgba(0, 0, 0, 0.2),
                     0 1px 3px rgba(0, 0, 0, 0.25);
    }
}

@media (min-width: 992px) {
    .creators-section .hero-content h2 {
        color: black !important;
    }
    .creators-section .hero-content p {
        color: #212529 !important;
    }
}

.creators-section,
.content-section,
.methods-section {
    background-color: #f5f5f7;
}

.content-section--smooth-weeks .hero-content {
    padding-top: 0;
    padding-bottom: 2rem;
}
@media (min-width: 992px) {
    .content-section--smooth-weeks .hero-content {
        padding-top: 2rem;
        padding-bottom: 2rem;
        width: 100%;
        max-width: 42rem;
    }
}

.content-section--smooth-weeks .index-smooth-weeks__flow {
    max-width: 28rem;
    padding-top: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

@media (min-width: 992px) {
    .content-section--smooth-weeks .index-smooth-weeks__figure {
        margin-bottom: 1.75rem !important;
    }

    .content-section--smooth-weeks .index-smooth-weeks__flow {
        max-width: 36rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
        font-size: 1rem;
    }
}

.content-section--smooth-weeks .index-smooth-weeks__flow .index-smooth-weeks__flow-arrow {
    display: inline-block;
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.12em;
    margin: 0 0.32em;
    color: #86868b;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@media (min-width: 992px) {
    .content-section--smooth-weeks .index-smooth-weeks__flow .index-smooth-weeks__flow-arrow {
        margin: 0 0.42em;
    }
}

.content-section--smooth-weeks .index-smooth-weeks__flow-cycle--mobile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min-content minmax(0, 1fr);
    grid-template-rows: auto minmax(1.6rem, auto) auto;
    grid-template-areas:
        'prep arrE remove'
        'arrN gap arrS'
        'care arrW finish';
    column-gap: 0.2rem;
    row-gap: 0.2rem;
    max-width: 20.5rem;
    margin-inline: auto;
    padding-inline: 0.1rem;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-wrap: balance;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-cell--prep {
    grid-area: prep;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-cell--remove {
    grid-area: remove;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-cell--care {
    grid-area: care;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-cell--finish {
    grid-area: finish;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-gutter {
    grid-area: gap;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    color: #86868b;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-arrow--east {
    grid-area: arrE;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-arrow--south {
    grid-area: arrS;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-arrow--west {
    grid-area: arrW;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-arrow--north {
    grid-area: arrN;
}

.content-section--smooth-weeks .index-smooth-weeks__cycle-arrow-icon {
    font-size: 1em;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.content-section--smooth-weeks__tagline {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.75rem;
    padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.25rem;
}

@media (min-width: 992px) {
    .content-section--smooth-weeks__tagline {
        font-size: 1.25rem;
        max-width: 36rem;
        margin-top: 3.25rem;
        padding-top: 2.5rem;
    }
}

.content-section--smooth-weeks .index-smooth-weeks__flow + .content-section--smooth-weeks__tagline {
    margin-top: 2.5rem;
    padding-top: 0;
}

@media (min-width: 992px) {
    .content-section--smooth-weeks .index-smooth-weeks__flow + .content-section--smooth-weeks__tagline {
        margin-top: 1.25rem;
    }
}

.content-section--monthly-result .hero-content {
    padding-top: 0;
    padding-bottom: 2rem;
}

@media (min-width: 992px) {
    .content-section--monthly-result .hero-content {
        padding-top: 2rem;
        padding-bottom: 2rem;
        width: 100%;
        max-width: 42rem;
    }
}

.index-monthly-result__intro {
    margin-bottom: 0;
    padding-bottom: 2.75rem;
}

@media (min-width: 992px) {
    .index-monthly-result__intro {
        padding-bottom: 3.5rem;
    }
}

.index-monthly-result__video-wrap {
    margin-top: 1.25rem;
}

@media (min-width: 768px) {
    .index-monthly-result__video-wrap {
        margin-top: 0;
    }
}

.index-monthly-result__after-video {
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .index-monthly-result__after-video {
        margin-top: 1.25rem;
    }
}

.content-section--shoobox-variants {
    background-color: #f5f5f7;
}

.index-shoobox-variant__row {
    align-items: stretch;
}

.index-shoobox-variant__card {
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #e1e1e8;
    border-radius: 1rem;
    padding: 1.5rem 1.25rem 1.5rem;
    box-shadow: 0 4px 24px rgba(15, 15, 20, 0.06);
    min-height: 100%;
}

.index-shoobox-variant__top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    min-height: 0;
}

.index-shoobox-variant__img-wrap {
    margin: 0 0 1rem;
    max-height: 240px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.index-shoobox-variant__img {
    width: auto;
    max-width: 100%;
    max-height: 240px;
    height: auto;
    object-fit: contain;
    align-self: flex-start;
}

.index-shoobox-variant__name {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.index-shoobox-variant__tagline {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    color: #555555;
    margin: 0 0 0.75rem;
    max-width: none;
    min-height: 3.5rem;
}

.index-shoobox-variant__price {
    font-size: 1.125rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.index-shoobox-variant__price-note {
    font-size: 0.75rem;
    font-weight: 500;
    color: #777777;
    margin: 0 0 1rem;
    line-height: 1.3;
    min-height: 1.3rem;
}

.index-shoobox-variant__btn {
    width: 100%;
    max-width: none;
    margin-top: auto;
    margin-bottom: 0;
    align-self: stretch;
}

.index-shoobox-variant__list {
    text-align: left;
    flex-shrink: 0;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid #ececf0;
    min-height: 11.75rem;
    box-sizing: border-box;
}

.index-shoobox-variant__list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.45;
    color: #555555;
    margin-bottom: 0.625rem;
}

.index-shoobox-variant__list-item:last-child {
    margin-bottom: 0;
}

.index-shoobox-variant__check {
    font-size: 1.125rem;
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: 0rem;
    font-variation-settings: 'FILL' 1, 'wght' 500;
    color: #555555;
}

    @media (min-width: 992px) {
    .index-shoobox-variant__img-wrap {
        max-height: 260px;
        margin-bottom: 1.25rem;
    }

    .index-shoobox-variant__img {
        max-height: 260px;
    }

    .index-shoobox-variant__name {
        font-size: 1.375rem;
    }

    .index-shoobox-variant__tagline {
        font-size: 1.0625rem;
        min-height: 3.75rem;
        margin: 0 0 0.5rem;
    }

    .index-shoobox-variant__price {
        font-size: 1.1875rem;
        margin: 0 0 0.5rem;
    }

    .index-shoobox-variant__price-note {
        font-size: 0.8125rem;
    }

    .index-shoobox-variant__list {
        padding-top: 1.5rem;
        margin-top: 1.5rem;
        min-height: 12.25rem;
    }
}

.index-replenish-gallery {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

.index-replenish-gallery__container {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.index-replenish-gallery__container::-webkit-scrollbar {
    display: none;
}

.index-replenish-gallery__track {
    padding-bottom: 1rem;
    padding-right: 1.5rem;
}

@media (max-width: 991.98px) {
    .index-replenish-gallery__track {
        padding-left: 1.5rem;
    }

    .index-replenish-gallery__nav-container {
        padding-right: 1.5rem;
    }
}

.index-replenish-gallery__card {
    width: min(300px, calc(100vw - 3rem));
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 0 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.index-replenish-gallery__card > div {
    padding-bottom: 1.5rem;
}

.index-replenish-gallery__media-wrap {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-top: -1.5rem;
    margin-bottom: 1rem;
}

.index-replenish-gallery__media {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px 12px 0 0;
}

.index-replenish-gallery__title {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #000000;
}

@media (min-width: 992px) {
    .index-replenish-gallery__card {
        width: 320px;
    }

    .index-replenish-gallery__title {
        font-size: 1.375rem;
    }
}

.index-replenish-gallery__nav-container {
    gap: 0.5rem;
}

.index-replenish-gallery__nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.index-replenish-gallery__nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.index-replenish-gallery__nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.index-replenish-gallery__nav .material-symbols-outlined {
    font-size: 24px;
}

.index-ecosystem-gallery {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

.index-ecosystem-gallery__container {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.index-ecosystem-gallery__container::-webkit-scrollbar {
    display: none;
}

.index-ecosystem-gallery__track {
    padding-bottom: 1rem;
    padding-right: 1.5rem;
}

@media (max-width: 991.98px) {
    .index-ecosystem-gallery__track {
        padding-left: 1.5rem;
    }

    .index-ecosystem-gallery__nav-container {
        padding-right: 1.5rem;
    }
}

.index-ecosystem-gallery__card {
    width: min(300px, calc(100vw - 3rem));
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 24px rgba(15, 15, 20, 0.06);
    border: 1px solid #e1e1e8;
    overflow: hidden;
}

.index-ecosystem-gallery__icon {
    font-size: 4rem;
    line-height: 1;
    font-variation-settings: 'wght' 200;
    color: #000000;
    margin-bottom: 1rem;
}

.index-ecosystem-gallery__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #000000;
    margin: 0 0 0.75rem;
}

.index-ecosystem-gallery__text {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    color: #6c757d;
    margin: 0 0 0.75rem;
}

.index-ecosystem-gallery__text:last-child {
    margin-bottom: 0;
}

.index-ecosystem-gallery__link {
    font-size: 0.875rem;
    font-weight: 500;
}

@media (min-width: 992px) {
    .index-ecosystem-gallery__card {
        width: 320px;
    }

    .index-ecosystem-gallery__title {
        font-size: 1.25rem;
    }
}

.index-ecosystem-gallery__nav-container {
    gap: 0.5rem;
}

.index-ecosystem-gallery__nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.index-ecosystem-gallery__nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.index-ecosystem-gallery__nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.index-ecosystem-gallery__nav .material-symbols-outlined {
    font-size: 24px;
}

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 0;
}

.methods-section .card-img-top {
    object-fit: cover;
    border-radius: 0.375rem 0.375rem 0 0;
}

.methods-card-img {
    width: 100%;
    aspect-ratio: 280 / 392;
    object-fit: cover;
}

.methods-card .card {
    cursor: default;
}

.methods-cards-scroll {
    position: relative;
    overflow-x: hidden;
    width: 100%;
}

.methods-cards-track {
    padding-bottom: 1rem;
}

@media (min-width: 992px) {
    .methods-cards-container {
        overflow: visible;
    }
    
    .methods-cards-track {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    
    .methods-card {
        min-width: 0;
    }
}

@media (max-width: 991.98px) {
    .methods-cards-container {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .methods-cards-container::-webkit-scrollbar {
        display: none;
    }
    
    .methods-cards-track {
        display: flex;
        gap: 1rem;
        flex-wrap: nowrap;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .methods-card {
        flex-shrink: 0;
        width: 280px;
    }
    
    .methods-card .card {
        width: 100%;
    }
    
    .methods-cards-nav-container {
        padding-right: 1.5rem;
    }
}

.methods-cards-nav-container {
    gap: 0.5rem;
}

.methods-cards-nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.methods-cards-nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.methods-cards-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.methods-cards-nav .material-symbols-outlined {
    font-size: 24px;
}

.second-block-overlay {
    position: relative;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.second-block-overlay > .container-fluid {
    position: relative;
    z-index: 2;
}

@media (min-width: 992px) {
    .second-block-overlay {
        background-image: url('https://images.sugaris.com.ua/atmosphere/shoobox/shoobox_and_razor_on_the_table_desktop.jpg');
    }
}

@media (max-width: 991.98px) {
    .second-block-overlay {
        background-image: url('https://images.sugaris.com.ua/atmosphere/shoobox/shoobox_and_razor_on_the_table_mobile.jpg');
    }
}

.cta-overlay {
    position: relative;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.cta-overlay > .container-fluid {
    position: relative;
    z-index: 2;
}

@media (min-width: 992px) {
    .cta-overlay {
        background-image: url('https://images.sugaris.com.ua/atmosphere/process/index_page_CTA_desktop.jpg');
    }
}

@media (max-width: 991.98px) {
    .cta-overlay {
        background-image: url('https://images.sugaris.com.ua/atmosphere/process/index_page_CTA_mobile.jpg');
    }
}

.link-hover-no-underline:hover {
    text-decoration: none !important;
}

.creators-section {
    max-height: calc(100vh - 130px);
    overflow: hidden;
}

@media (min-width: 992px) {
    .creators-section {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 130px) !important;
        max-height: calc(100vh - 130px) !important;
    }
    .creators-section .container-fluid {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: 1700px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 991.98px) {
    .btn-outline-mobile-light {
        color: #fff !important;
        border-color: #fff !important;
    }
    .btn-outline-mobile-light:hover {
        color: #000 !important;
        background-color: #fff !important;
    }
}

@media (max-width: 991.98px) {
    .creators-section .btn-outline-mobile-light {
        background: rgb(0 0 0 / 12%) !important;
        border-color: rgb(204 204 204 / 50%) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
    }
    .creators-section .btn-outline-mobile-light:hover {
        background: rgb(0 0 0 / 20%) !important;
        border-color: rgb(204 204 204 / 70%) !important;
    }
}

.card-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.content-section--monthly-result .video-js {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 25px;
    position: relative !important;
    overflow: hidden;
}

.content-section--monthly-result .video-js .vjs-progress-control,
.content-section--monthly-result .video-js .vjs-volume-control,
.content-section--monthly-result .video-js .vjs-fullscreen-control,
.content-section--monthly-result .video-js .vjs-playback-rate,
.content-section--monthly-result .video-js .vjs-remaining-time,
.content-section--monthly-result .video-js .vjs-current-time,
.content-section--monthly-result .video-js .vjs-time-divider,
.content-section--monthly-result .video-js .vjs-time-control {
    display: none !important;
}

.content-section--monthly-result .video-js .vjs-big-play-button {
    display: none !important;
}

.content-section--monthly-result .video-js .vjs-control-bar {
    background-color: transparent !important;
    height: auto !important;
    padding: 0 !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

.content-section--monthly-result .video-js:not(.step-video) .vjs-play-control {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    border: none !important;
    position: absolute !important;
    top: 40px !important;
    right: 40px !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
}

.content-section--monthly-result .video-js:not(.step-video) .vjs-play-control:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
}

.content-section--monthly-result .video-js .vjs-play-control .vjs-icon-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 18px !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.content-section--monthly-result .video-js .vjs-play-control .vjs-icon-placeholder::before {
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.content-section--monthly-result .video-js .vjs-control-bar .vjs-play-control {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.content-section--smooth-weeks .index-smooth-weeks__figure img {
    border-radius: 25px;
}

.index-monthly-result__vs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem 0 1rem;
}

.index-monthly-result__vs-col {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0.5rem 0.35rem;
}

.index-monthly-result__vs-heading {
    margin: 0 0 0.375rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #000000;
}

.index-monthly-result__vs-text {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.2;
    color: #212529;
}

.index-monthly-result__vs-divider {
    flex-shrink: 0;
    width: 1px;
    height: auto;
    min-height: 2.75rem;
    align-self: stretch;
    margin: 0.2rem 0.35rem;
    background-color: rgba(0, 0, 0, 0.12);
}

@media (min-width: 768px) {
    .index-monthly-result__vs {
        padding: 0.75rem 0 1.25rem;
    }

    .index-monthly-result__vs-col {
        padding: 0.5rem 1rem;
    }

    .index-monthly-result__vs-heading {
        font-size: 1.1875rem;
        margin-bottom: 0.5rem;
    }

    .index-monthly-result__vs-text {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.2;
    }

    .index-monthly-result__vs-divider {
        min-height: 3.5rem;
        margin: 0.25rem 0.75rem;
    }
}

@media (max-width: 767.98px) {
    .content-section--monthly-result .index-monthly-result__video-wrap {
        width: 100vw;
        max-width: 100vw;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    #shoobox-vs-razor-video {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    #shoobox-vs-razor-video video {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .content-section--monthly-result .index-monthly-result__after-video {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    .content-section--monthly-result .video-js:not(.step-video) .vjs-play-control {
        top: 25px !important;
        right: 25px !important;
        width: 45px !important;
        height: 45px !important;
    }

    .content-section--monthly-result .video-js .vjs-play-control .vjs-icon-placeholder {
        font-size: 16px !important;
    }
}

.creators-section .hero-video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.creators-section .hero-video-wrapper .hero-video {
    max-width: 100%;
    height: auto;
    border-radius: 25px;
    object-fit: cover;
}

@media (min-width: 992px) {
    .creators-section .row.min-vh-100 {
        min-height: 0 !important;
        flex: 1 1 0 !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .creators-section .hero-video-col {
        align-self: center;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        justify-content: flex-start !important;
    }
    .creators-section .hero-video-wrapper {
        max-height: 80vh;
        height: 80vh;
        min-height: 0;
        width: auto;
        justify-content: flex-start !important;
        align-items: center;
    }
    .creators-section .hero-video-wrapper .hero-video {
        max-height: 100%;
        width: auto;
        height: 100%;
        object-fit: contain;
    }
}

.creators-section .hero-video-play-btn-desktop {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    z-index: 5;
}
.creators-section .hero-video-play-btn-desktop:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}
.creators-section .hero-video-play-btn-desktop .hero-video-play-icon {
    font-size: 24px;
}

.creators-section .hero-video-play-icon.material-symbols {
    font-family: 'Material Symbols', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
}

@media (max-width: 991.98px) {
    .creators-section .hero-video-play-btn-mobile {
        width: 48px;
        height: 48px;
        min-width: 48px;
        flex-shrink: 0;
    }
}