.section-topbar { background: linear-gradient(-127deg, #00000000 0%, #00000033 100%), linear-gradient(98deg, #ffffff00 0%, #ffffff33 100%), #6927ff; }
.section-topbar > .wrapper { padding: 38px 15px; display: flex; justify-content: space-between; align-items: center; }
.section-topbar > .wrapper > .left { display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin-right: 100px; }
.section-topbar > .wrapper > .left > a { flex-shrink: 0; text-decoration: none; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 18px 24px; background-color: #f5f5f5; border-radius: 9999px; outline: none; color: #494949; border: 1px solid #f5f5f5; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.section-topbar > .wrapper > .left > a * { fill: #494949; transition: fill 0.3s; }
.section-topbar > .wrapper > .left > a:hover { background-color: #84a113; border-color: #000; color: #000; }
.section-topbar > .wrapper > .left > a:hover * { fill: #000; }
.section-topbar > .wrapper > .left > a.active { background-color: #9fc119; border-color: #000; color: #000; }
.section-topbar > .wrapper > .left > a.active * { fill: #000; }
.section-topbar > .wrapper > .right  { display: flex; align-items: center; gap: 12px; }
.section-topbar > .wrapper > .right > .clear { outline: none; border: none; background-color: transparent; flex-shrink: 0; }
.section-topbar > .wrapper > .right > .clear * { transition: fill 0.1s; fill: #ffffffe6; }
.section-topbar > .wrapper > .right > .clear:hover * { fill: #9fc119; }
.section-topbar > .wrapper > .right > .search-box { width: fit-content; background-color: #fff; border-radius: 9999px; padding: 18px 24px; display: flex; justify-content: center; align-items: center; border: 1px solid #494949; gap: 10px; }
.section-topbar > .wrapper > .right > .search-box > input { outline: none; border: none; width: 100%; max-width: 310px; color: #494949;  }
.section-topbar > .wrapper > .right > .search-box > input::placeholder { color: #494949; }

.section-diets { position: relative; margin-top: 50px; }
.section-diets > .wrapper { display: flex; flex-direction: column; gap: 35px; }
.section-diets > .wrapper > .top { display: flex; justify-content: space-between; }
.section-diets > .wrapper > .top > .left { color: #494949; }
.section-diets > .wrapper > .top > .left > .title { font-weight: 400; }
.section-diets > .wrapper > .top > .left > .title > span { font-weight: 900; }
.section-diets > .wrapper > .top > .left > small { color: #444444 }

.section-top-rated > .decor { position: absolute; left: -300px; top: 100px; }
.section-online-visits > .decor { position: absolute; right: -250px; bottom: -150px; }


.section-how-does-it-work { padding-bottom: 500px; background: radial-gradient(circle at center center, #6b27ff25, #fff 50%); background-size: 800px; background-repeat: no-repeat; background-position-y: -70px; background-position-x: calc(50% - 100px); } 
.section-how-does-it-work > .wrapper { display: flex; flex-direction: column; gap: 30px; }
.section-how-does-it-work > .wrapper > .top { display: flex; flex-direction: column; gap: 10px; }
.section-how-does-it-work > .wrapper > .top > h2 { color: #494949; }
.section-how-does-it-work > .wrapper > .bottom { display: grid; grid-template-columns: 576px 576px 1fr; gap: 24px; }
.section-how-does-it-work > .wrapper > .bottom > .card { min-height: 413px; padding: 50px 32px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.section-how-does-it-work > .wrapper > .bottom > .card:first-child { background-color: #fff; border-radius: 40px; box-shadow: 10px 4px 30px #0000000d }
.section-how-does-it-work > .wrapper > .bottom > .card > .top { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; line-height: 160%; }
.section-how-does-it-work > .wrapper > .bottom > .right { position: relative; }
.section-how-does-it-work > .wrapper > .bottom > .right > picture > img { position: absolute; right: -54px; }


.section-how-to-order-diet { margin-top: -420px; position: relative; margin-bottom: 30px; }
.section-how-to-order-diet > .wrapper { display: flex; flex-direction: column; gap: 40px; }
.section-how-to-order-diet > .wrapper > .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.section-how-to-order-diet > .wrapper > .grid > .column { display: flex; flex-direction: column; align-items: center; }
.section-how-to-order-diet > .wrapper > .grid > .column > .card { width: 100%; min-height: 357px; border-radius: 40px; padding: 32px; box-shadow: 10px 4px 9px 0 #0000000d; background-color: #F5F5F5 }
.section-how-to-order-diet > .wrapper > .grid > .column > .card > h3 { font-weight: 400; }
.section-how-to-order-diet > .wrapper > .grid > .column:nth-child(2) > .picture { margin-top: -70px; margin-bottom: 20px; }
.section-how-to-order-diet > .wrapper > .grid > .column:nth-child(2) > .card { background-color: #efe7ff; }
.section-how-to-order-diet > .wrapper > .grid > .column:nth-child(3) > .card { background-color: #6B27FF; }
.section-how-to-order-diet > .wrapper > .grid > .column > .card > .top { display: flex; justify-content: space-between; align-items: center; font-weight: 900; color: #6B27FF66; margin-bottom: 30px; }
.section-how-to-order-diet > .wrapper > .grid > .column:nth-child(3) > .card > .top { color: #efe7ff66; }
.section-how-to-order-diet > .wrapper > .grid > .column:nth-child(3) > .card > h3 { color: #fff; font-weight: 400; }
.section-how-to-order-diet > .wrapper > .grid > .column > .card > .top > .icon { width: 95px; height: 95px; background-color: #fff; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper { margin-top: 20px; }
.section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper h3 { font-weight: 600; }
.section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper h3 > span { color: #6b27ff; }
.section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper .buttons-box { margin-top: 24px; display: grid; grid-template-columns: repeat(2, max-content); grid-auto-rows: max-content; gap: 24px; }
.section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper .buttons-box .single-btn .btn-icon { display: block; color: #000; text-decoration: none; border: 2px solid #494949; border-radius: 8px; transition: background-color .3s, border-color .3s; }
.section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper .buttons-box .single-btn .btn-icon path[fill="white"] { fill: transparent; }
.section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper .buttons-box .single-btn:hover .btn-icon{ background-color: #6b27ff; border-color: #6b27ff; }
.section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper .buttons-box .single-btn:hover .btn-icon path[fill='black'] {fill: #FFF;}
.section-how-to-order-diet > .decor { position: absolute; right: -90px; top: 40%;}


.section-for-dietitians > .wrapper { display: grid; grid-template-columns: 565px 1fr 142px; margin-top: 130px; background-color: #f5f5f5; border-radius: 40px; box-shadow: 10px 4px 9px 0 #0000000F; }
.section-for-dietitians > .wrapper > .left { margin-top: -115px; }
.section-for-dietitians > .wrapper > .middle { margin-top: 50px; }
.section-for-dietitians > .wrapper > .middle > h2 > div { color: #494949; }
.section-for-dietitians > .wrapper > .middle > h2 > div:first-child { color: #6b27ff; }
.section-for-dietitians > .wrapper > .right { margin-top: -33px; }
.section-for-dietitians > .wrapper > .middle > a { margin-top: 30px; }


.section-links { display: block; padding: 0px 20px; }
.section-links { background-color: #f5f5f5; margin-bottom: -30px; margin-top: 80px; }
.section-links > .wrapper { padding: 32px 0px; }
.section-links > .wrapper > .group { display: grid; grid-template-columns: repeat(4, 1fr); }
.section-links > .wrapper > .group > .column { display: flex; flex-direction: column; gap: 8px; }
.section-links > .wrapper > .group > .column > a { text-decoration: none; color: #494949; width: fit-content; }
.section-links > .wrapper > .group > .column > a:hover { color: #6b27ff; text-decoration: underline; }
.section-links > .wrapper > .group.bottom { margin-top: 40px; }
.section-links > .wrapper > a { display: flex; padding-top: 8px; text-decoration: none; font-weight: 700; color: #6b27ff; justify-content: center; align-items: center; gap: 8px; width: fit-content; transition: color 0.3s; }
.section-links > .wrapper > a > svg * { transition: stroke 0.3s; }
.section-links > .wrapper > a:hover { color: #9fc119; }
.section-links > .wrapper > a:hover > svg * { stroke: #9fc119; }



/* .popup-filters { visibility: hidden; position: fixed; left: 0px; top: 0px; width: 100vw; height: 100vh; background-color: #00000066; display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; transition: opacity 0.6s; z-index: 999999; }
.popup-filters.show { visibility: visible; opacity: 1; } */

.popup-filters { padding: 24px 0px; background-color: #f5f5f5; border-radius: 40px; box-shadow: 0px 1px 8px 0 #2121211f; width: 600px; color: #494949; display: flex; flex-direction: column; gap: 20px; }
.popup-filters > .top { overflow: scroll; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; max-height: calc(100vh - 300px) }
.popup-filters > .top > .title { padding: 0px 24px; display: flex; justify-content: space-between; align-items: center; }
.popup-filters > .top > .title > .btn-close { cursor: pointer; }
.popup-filters > .top > .title > .btn-close > svg * { transition: stroke 0.3s; }
.popup-filters > .top > .title > .btn-close:hover svg * { stroke: #6b27ff; }
.popup-filters > .top > .title > h5 { font-weight: 900; display: flex; align-items: center; gap: 16px; position: relative; }
.popup-filters > .top > .title > h5 > .badge { width: 28px; height: 28px; border-radius: 9999px; background-color: #6b27ff; color: #fff; font-weight: 400; display: flex; justify-content: center; align-items: center; }
.popup-filters > .top > .specializations { padding: 0px 24px; display: flex; justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; overflow: hidden; max-height: 140px; transition: max-height 0.5s ease-in-out; padding-bottom: 20px; flex-shrink: 0; }
.popup-filters > .top > .specializations.full { max-height: 999px; }
.popup-filters > .top > .specializations > label { display: block; padding: 13px 16px; border-radius: 9999px; font-weight: 500; cursor: pointer; background-color: #efe7ff; color: #6b27ff; transition: background-color 0.3s, color 0.3s; }
.popup-filters > .top > .specializations > label:hover { background-color: #6b27ff; color: #f5f5f5; }
.popup-filters > .top > .specializations > label > input { position: absolute; }
.popup-filters > .top > .specializations > label:has(input:checked) { background-color: #6b27ff; color: #f5f5f5; }
.popup-filters > .top > .btn-show-specs { padding: 12px 0px; display: flex; justify-content: center; align-items: center; gap: 12px; font-weight: 500; cursor: pointer; box-shadow: 0px -16px 20px 0px rgba(0, 0, 0, 0.1); margin-top: -20px; border-bottom: 1px solid #49494933; transition: color 0.3s; background-color: #f5f5f5; }
.popup-filters > .top > .btn-show-specs:hover { color: #6b27ff; }
.popup-filters > .top > .btn-show-specs * { transition: fill 0.3s; }
.popup-filters > .top > .btn-show-specs:hover * { fill: #6b27ff; }
.popup-filters > .top .hidden { display: none; }
.popup-filters > .top > .break { height: 1px; background-color: #49494933; }
.popup-filters > .top > .title > h5 > .tooltip:hover::before { content: var(--before-content, ''); display: block; min-width: 200px; background-color: #fff; position: absolute; bottom: 30px; border-radius: 10px; border: 1px solid #494949; padding: 4px 8px; font-size: 12px; font-weight: 400; }
.popup-filters > .top > .types { padding: 0px 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.popup-filters > .top > .types > label { display: block; padding: 13px 16px; border: 1px solid #494949; border-radius: 9999px; font-weight: 500; cursor: pointer; transition: border-color, color 0.3s; }
.popup-filters > .top > .types > label:hover { border-color: #6b27ff; color: #6b27ff; }
.popup-filters > .top > .types > label > input { position: absolute; }
.popup-filters > .top > .types > label:has(input:checked) { border-color: #6b27ff; color: #6b27ff; }
.popup-filters > .top > .ranges { padding: 0px 24px; display: flex; flex-direction: column; gap: 24px; }
.popup-filters > .top > .ranges > .inputs { display: flex; justify-content: space-between; }
.popup-filters > .top > .ranges > .inputs > label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.popup-filters > .top > .ranges > .inputs > label > input { background-color: transparent; border: 1px solid #494949; width: 128px; padding: 15px 0px; text-align: center; color: #494949; border-radius: 999px; -webkit-appearance: none; margin: 0; }
.popup-filters > .top > .ranges .noUi-target { background: #EFE7FF !important; border-radius: 999px !important;  border: none !important; box-shadow: none !important; }
.popup-filters > .top > .ranges .noUi-horizontal { height: 2px !important; }
.popup-filters > .top > .ranges .noUi-connect { background-color: #6B27FF !important; }
.popup-filters > .top > .ranges .noUi-handle { background: #6b27ff !important; border: 4px solid #fff !important; border-radius: 999px !important; box-shadow: none !important; cursor: grab; width: 25px !important; height: 25px !important; top: -11px !important; }
.popup-filters > .top > .ranges .noUi-handle::before,
.popup-filters > .top > .ranges .noUi-handle::after { display: none !important; }
.popup-filters > .top > .ranges .noUi-handle:active { cursor: grabbing; border-color: #6B27FF !important; }
.popup-filters > .top > .box { padding: 0px 24px; }
.popup-filters > .top > .box .ts-dropdown { overflow: hidden; border-radius: 24px; }
.popup-filters > .top > .box .ts-control { border-radius: 999px; border: 1px solid #494949; padding: 16px 24px; }
.popup-filters > .top > .box .ts-control::after { content: ""; display: block; position: absolute; right: 24px; width: 24px; height: 24px; background: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M23.7068 22.2928L16.8818 15.4678C18.2038 13.8349 18.9998 11.7599 18.9998 9.49992C18.9998 4.26197 14.7378 0 9.49988 0C4.26193 0 0 4.26193 0 9.49988C0 14.7378 4.26197 18.9998 9.49992 18.9998C11.7599 18.9998 13.8349 18.2038 15.4678 16.8818L22.2928 23.7068C22.4878 23.9018 22.7438 23.9998 22.9998 23.9998C23.2558 23.9998 23.5118 23.9018 23.7068 23.7068C24.0978 23.3158 24.0978 22.6838 23.7068 22.2928ZM9.49992 16.9998C5.36395 16.9998 2 13.6359 2 9.49988C2 5.3639 5.36395 1.99995 9.49992 1.99995C13.6359 1.99995 16.9998 5.3639 16.9998 9.49988C16.9998 13.6359 13.6359 16.9998 9.49992 16.9998Z' fill='%23494949'/></svg>") no-repeat center / contain; }
.popup-filters > .top > .box .ts-control .item { font-size: 20px; line-height: 120%; }
.popup-filters > .top > .box .ts-control input { font-size: 20px; color: #494949; font-family: 'DM Sans', sans-serif; }
.popup-filters > .top > .box .ts-control input::placeholder { color: #494949; }
.popup-filters > .top > .box .ts-dropdown { border-radius: 24px; border: 1px solid #494949; }
.popup-filters > .top > .box .ts-dropdown-content { max-height: 265px; }
.popup-filters > .top > .box .ts-dropdown-content::-webkit-scrollbar-track { margin: 20px 0px; }
.popup-filters > .top > .box .ts-dropdown-content .option { padding: 10px 14px; font-size: 16px; font-family: 'DM Sans', sans-serif; color: #494949; }
.popup-filters > .top > .box .ts-dropdown-content .option.active { background-color: #efe7ff; }
.popup-filters > .top > .box .ts-dropdown-content .option:hover { background-color: #efe7ff; color: #6b27ff; }
.popup-filters > .clear { text-align: center; text-decoration: none; font-weight: 500; color: #ed7474; padding: 15px 0px 0px 0px; transition: color 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.popup-filters > .clear:hover { color: #a15f5f; }
.popup-filters > .clear * { transition: fill 0.3s; }
.popup-filters > .clear:hover * { fill: #a15f5f; }
.popup-filters > .button { padding: 0px 24px; }
.popup-filters > .button > .global-btn-white { padding: 18px 0px; max-width: 100%; width: 100%; }

@media all and (max-width: 1600px) {
    .section-how-does-it-work > .wrapper > .bottom { display: grid; grid-template-columns: 0.36fr 0.36fr 0.28fr; gap: 20px; }
    .section-how-does-it-work > .wrapper > .bottom > .right > picture > img { position: relative; right: 0px; width: 100%; height: auto; }

    .section-how-to-order-diet > .wrapper > .grid > .column > .card { padding: 24px; }
    .section-how-to-order-diet > .wrapper > .grid > .column > .card > .top > .icon { width: 64px; height: 64px; flex-shrink: 0; }
    .section-how-to-order-diet > .wrapper > .grid > .column > .card > .top > .icon svg { width: 30px; height: 30px; }
}

@media all and (max-width: 1500px) {
    .section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper { width: 100%; }
}

@media all and (max-width: 1400px) {

    .section-how-does-it-work > .wrapper > .bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
    .section-how-does-it-work > .wrapper > .bottom > .right { display: none; }

    .section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper .buttons-box svg { max-width: 140px; height: auto; }
}

@media all and (max-width: 1300px) {
    .section-for-dietitians > .wrapper { grid-template-columns: 1fr 1fr; }
    .section-for-dietitians > .wrapper > .right { display: none; }
}

@media all and (max-width: 1200px) {
    .section-how-to-order-diet > .decor { display: none; }
    .section-how-to-order-diet > .wrapper > .grid > .column > .card { padding: 16px; min-height: 191px; }

}

@media all and (max-width: 1100px) {
    .section-how-to-order-diet > .wrapper > .grid { grid-template-columns: 1fr 1fr; }
    .section-how-to-order-diet > .wrapper > .grid > .column:nth-child(3) { grid-column: 1 / -1; flex-direction: row; gap: 24px; }

    .section-for-dietitians > .wrapper { grid-template-columns: 1fr; padding: 0px 40px 40px 40px; margin-top: 50px; }
    .section-for-dietitians > .wrapper > .left { display: none; }
}

@media all and (max-width: 1000px) {
    .section-for-dietitians > .wrapper { padding: 30px; }
    .section-for-dietitians > .wrapper > .middle { margin-top: 0px; }
    .section-for-dietitians > .wrapper > .middle > a { margin-top: 10px; }

    .section-how-to-order-diet > .wrapper > .grid > .column > .card > .top { margin-bottom: 10px; }
    .section-how-to-order-diet { margin-bottom: 0px; }

    .section-links > .wrapper > .group { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}


@media all and (max-width: 767px) {
    .section-topbar > .wrapper { flex-direction: column; gap: 16px; }
    .section-topbar > .wrapper > .left { flex-direction: column; width: 100%; margin: 0; }
    .section-topbar > .wrapper > .left > a { width: 100%; }
    .section-topbar > .wrapper > .right { width: 100%; }
    .section-topbar > .wrapper > .right > .search-box { width: 100%; }
    .section-topbar > .wrapper > .right > .search-box > input { width: 100%; max-width: 100%; }

    .section-how-does-it-work > .wrapper > .bottom > .card { min-height: 0px; gap: 16px; }
    .section-how-does-it-work > .wrapper > .bottom { grid-template-columns: 1fr; }
    .section-how-does-it-work > .wrapper > .bottom > .card:nth-child(2) { padding-top: 0px; }

    .section-how-to-order-diet > .wrapper > .grid > .column:nth-child(2) > .picture { display: none; }
    .section-how-to-order-diet > .wrapper > .grid { grid-template-columns: 1fr; }
    .section-how-to-order-diet > .wrapper > .grid > .column:nth-child(3) { grid-column: 1; flex-direction: column; }

    .popup-filters > .wrapper { gap: 12px; }
    .popup-filters > .wrapper > .top { gap: 12px; }
    .popup-filters > .wrapper > .top > .diets > label { font-size: 14px; }
    .popup-filters > .wrapper > .top > .title > h5 > .tooltip:hover::before { right: -50%; }
    .popup-filters > .wrapper > .top > .title > .btn-close > svg { width: 30px; height: 30px; }

    .popup-filters > .wrapper > .top > .box .ts-control { padding: 10px 15px; }
    .popup-filters > .wrapper > .top > .box .ts-control .item { font-size: 16px; }
    .popup-filters > .wrapper > .top > .box .ts-control input { font-size: 16px; }
    .popup-filters > .wrapper > .top > .box .ts-control::after { width: 15px; height: 15px; }

    .section-for-dietitians > .wrapper { padding: 24px; }

    .section-diets > .wrapper > .top { flex-direction: column-reverse; gap: 24px; }

}

@media all and (max-width: 680px) {
    .section-discounts > .wrapper > .bottom { grid-template-columns: 1fr; }
    .popup-filters .wrapper { width: 100%; }
}

@media all and (max-width: 450px) {
    .section-how-to-order-diet > .wrapper > .grid > .column > .links-wrapper .buttons-box { gap: 10px; }
}