:where([id]) {
    scroll-margin-top: 90px;
}

:where(.admin-bar [id]) {
    scroll-margin-top: 122px;
}

body {
    margin: 0;
    background-color: #ffffff;

}

.headers {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .05);
}

.admin-bar .headers {
    top: 46px;
}

button.bvi-mode,
button.header-phone {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.header {
    width: calc(100% - 20px);
    background-color: #ffffff;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 0 0 10px;
}

.logo-block {
    width: 140px;
    flex-shrink: 0;
}

.custom-logo-link {
    display: block;
}

.custom-logo-link img {
    width: 100%;
    height: 30px;
    object-fit: cover;
    object-position: top;
}

.custom-logo-link + i {
    transform: translateY(-2px);
    font-size: 8px;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    display: block;
    color: var(--color-blue);
    text-decoration: none;
    letter-spacing: 2px;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.header-button-1 {
    width: 36px;
    height: 36px;
    padding: 10px 15px;
    border-radius: 100px;
    border: 1px solid var(--color-turquoise);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-button-2 {
    width: 40px;
    height: 40px;
    padding: 12px;
    border-radius: 20px;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.burger-button {
    width: 40px;
    height: 40px;
    padding: 12px;
    border-radius: 20px;
    background-color: #F0F7F8;
    border: 1px solid var(--color-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.burger-button:hover {
    background-color: var(--color-orange);
    border-color: #003163;
}

.burger-lines {
    width: 20px;
    height: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
}

.burger-line {
    width: 20px;
    height: 2px;
    background-color: var(--color-orange);
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.burger-button:hover .burger-line {
    background-color: #F0F7F8;
}

.mobile-search, .phone-number {
    display: block;
    height: 30px;
    cursor: pointer;
}

.mobile-burger-button {
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-turquoise);
    border: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mobile-burger-button svg path {
    stroke: var(--color-white);
    transition: stroke 0.3s ease;
}

.mobile-burger-button:hover {
    background-color: var(--color-turquoise-hover);

}

.mobile-burger-button:hover svg path {
    stroke: var(--color-turquoise);
}

.mobile-location-button {
    display: flex;
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
}

.mobile-location-button:hover {
    background-color: var(--color-orange);
    border-color: #003163;
}

.mobile-location-button:hover svg path {
    fill: var(--color-turquoise);
}

.branch-selector {
    position: relative;
}

.branches-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    width: 335px;
    background-color: #ffffff;
    z-index: 10000;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.3s ease, visibility 0s linear 0.4s;
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    gap: 20px;
    left: 50%;
    transform: translate(-50%, -10px);
}

.branches-dropdown:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

.header-buttons .branches-dropdown {
    left: -24px;
}

.header-buttons .branches-dropdown:before {
    left: auto;
    right: 51px;
    transform: none;
}

.branches-dropdown:before {
    content: "";
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #ffffff;
    border-top: 0;
    border-style: solid;
    width: 0;
    height: 0;
    top: -12px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.branches-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.branch-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: default;
}

.clinic-address-line {
    display: block;
    color: var(--color-text);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.clinic-address-line:hover {
    color: var(--color-turquoise);
    text-decoration: underline;
}

.navbar-section {
    background-color: #ffffff;
    margin: 0 auto;
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    width: 100%;
}

.nav-links {
    display: flex;
    gap: 40px;
    height: 100%;
    align-items: center;
}

.nav-link {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}
.nav-link.with-icon:after,
.burger-nav-link.with-icon:after{
    content:"";
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7089 10.8818L17.0243 9.81519C16.9013 9.62381 16.9013 9.37633 17.0243 9.18455L17.7092 8.11748C18.3328 7.14422 17.9108 5.84054 16.8468 5.42826L15.6749 4.97305C15.4642 4.89126 15.3205 4.69087 15.3089 4.46272L15.2444 3.19203C15.186 2.03664 14.0923 1.22952 12.9874 1.52929L11.7756 1.85974C11.5586 1.9189 11.3252 1.84279 11.1839 1.66496L10.3947 0.67526C9.67641 -0.225934 8.32095 -0.224449 7.60487 0.675891L6.81567 1.66503C6.67431 1.8429 6.44135 1.91938 6.22434 1.85982L5.0126 1.52958C3.91068 1.22867 2.81373 2.03523 2.7552 3.19211L2.69071 4.46302C2.67918 4.69113 2.53581 4.89137 2.32517 4.97312L1.15326 5.42797C0.0879007 5.84158 -0.332688 7.14586 0.291149 8.11837L0.975232 9.18418C1.09829 9.37596 1.09829 9.62385 0.975635 9.81522L0.291149 10.8819C-0.332395 11.8522 0.0872419 13.1589 1.15326 13.5719L2.32517 14.0269C2.53581 14.1088 2.67918 14.3091 2.69071 14.5372L2.7552 15.8081C2.81362 16.9633 3.90823 17.7709 5.0126 17.4706L6.22434 17.14C6.44098 17.081 6.67351 17.157 6.81607 17.3354L7.60491 18.3246C8.32175 19.2239 9.67506 19.2262 10.3951 18.325L11.184 17.3354C11.3261 17.157 11.5583 17.0814 11.7753 17.14L12.9882 17.471C14.0881 17.77 15.1859 16.9666 15.2444 15.8081L15.3089 14.5376C15.3204 14.3091 15.4642 14.1088 15.6749 14.0268L16.8468 13.5723C17.9118 13.1588 18.3328 11.8544 17.7089 10.8818ZM6.52615 6.15827C7.20072 6.15827 7.74941 6.71461 7.74941 7.39849C7.74941 8.08241 7.20068 8.63872 6.52615 8.63872C5.85158 8.63872 5.30289 8.08238 5.30289 7.39849C5.30289 6.71461 5.85162 6.15827 6.52615 6.15827ZM11.0115 13.1863C10.3369 13.1863 9.78823 12.6299 9.78823 11.9461C9.78823 11.2621 10.337 10.7058 11.0115 10.7058C11.6861 10.7058 12.2348 11.2622 12.2348 11.9461C12.2348 12.63 11.6861 13.1863 11.0115 13.1863ZM12.0556 7.21685L6.34699 13.0046C6.10805 13.2468 5.72103 13.2468 5.48209 13.0046C5.24319 12.7624 5.24319 12.3699 5.48209 12.1277L11.1907 6.33996C11.4296 6.09775 11.8167 6.09775 12.0556 6.33996C12.2945 6.58217 12.2945 6.9746 12.0556 7.21685Z' fill='%235FB4BB'/%3E%3C/svg%3E%0A");
    width: 18px;
    height: 18px;
    margin-left: 10px;
}
span.nav-link {
    cursor: default;
}

.nav-link.active {
    text-decoration: underline;
}

.nav-actions {
    display: flex;
    gap: 20px;
    align-items: center;
    height: 46px;
}

.nav-action-button {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-action-button:hover {
    text-decoration: underline;
}

.nav-link-wrapper {
    position: relative;
}
.header-schedule{
    color: var(--color-turquoise);
    font-size: 16px;
}

.dropdown {
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 0;
    width: 300px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 5px);
    z-index: 100;
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.dropdown__inner {
    display: grid;
    grid-template-columns: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #ffffff;
}

.dropdown:after {
    content: "";
    display: block;
    background: transparent;
    width: 100%;
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 30px;
}

.nav-link-wrapper.active .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    z-index: 100;
    transition-delay: 0s;
}

.dropdown.dropdown--instant {
    transition: none;
}

.nav-link-wrapper .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #ffffff;
    border-top: none;
    display: block;
    position: absolute;
    top: -11px;
    left: calc(50% - 12px);
}

.dropdown.dropdown--services {
    left: 0;
    width: auto;
    transform: translateY(5px);
}

.dropdown--services .dropdown__inner {
    grid-template-columns: 330px;
}

.dropdown--services.dropdown--has-second .dropdown__inner {
    grid-template-columns: 330px max-content;
}

.nav-link-wrapper.active .dropdown.dropdown--services {
    transform: translateY(0);
}

.nav-link-wrapper .dropdown.dropdown--services:before {
    left: 20px;
}

.dropdown__list.dropdown__list--level-1 {
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
}

.dropdown--services .dropdown__list.dropdown__list--level-1 {
    padding: 25px 30px;
}

.dropdown__item.dropdown__item--level-1 {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
    padding: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: color .3s ease-in-out;
}

.dropdown__item.dropdown__item--level-1:hover,
.dropdown__item.dropdown__item--level-1.active {
    color: var(--color-turquoise);
}

a.dropdown__item.dropdown__item--level-1:hover {
    text-decoration: underline;
}

.dropdown__item.dropdown__item--level-1 svg {
    flex-shrink: 0;
    transition: transform .3s ease-in-out;
}

.dropdown__item.dropdown__item--level-1.active svg {
    transform: rotate(180deg);
}

.dropdown__panel.dropdown__panel--level-2 {
    padding: 25px 30px;
    background: #f8f8f8;
    min-height: 100%;
    display: none;
    position: relative;
    z-index: 11;
}

.dropdown--has-second .dropdown__panel--level-2 {
    display: block;
}

.dropdown__list.dropdown__list--level-2 {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.dropdown__list.dropdown__list--level-2.active {
    display: flex;
}

.dropdown__item.dropdown__item--level-2 {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.15;
    color: #003163;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.dropdown__item.dropdown__item--level-2:hover {
    color: var(--color-turquoise);
    text-decoration: none;
}

.nav-link--dropdown .arrow-icon {
    transition: transform 0.3s ease;
}

.nav-link--dropdown.active .arrow-icon {
    transform: rotate(180deg);
}

.branch-toggle {
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    align-items: center;
    gap: 4px;
    padding: 0;
    padding-left: 18px;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 15px 0;
    gap: 10px;
    justify-content: space-between;
    position: relative;
    z-index: 1111;
}

.left-block {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    flex-wrap: wrap;
    justify-content: center;
    width: 138.118px;
    height: 40px;
}

.logo {
    max-width: 164px;
    max-height: 47px;
    opacity: 1;
    min-width: 164px;
    display: block;
}

.logo + i {
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    font-size: 9px;
    display: block;
    color: var(--color-white);
    text-decoration: none;
    transform: none;
}

.address-block {
    display: none;
    flex-direction: column;
    justify-content: center;
    width: 220px;
    gap: 6px;
    opacity: 1;
    align-items: center;
}

.arrow-icon {
    width: 10px;
    height: 5px;
    margin-top: 2px;
}

.branch-toggle .arrow-icon {
    transition: transform 0.3s ease;
}

.branch-toggle.active .arrow-icon {
    transform: rotate(180deg);
}

.header-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.header-phone-icon {
    width: 18px;
    height: 18px;
}
.header-phone a{
    color: var(--color-text);
    font-weight: 500;
}
.icons-block {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 45px;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: 0;
}

.callback-button button:hover {
    background-color: var(--color-orange);
}

.navbar-wrapper {
    display: none;
    width: 100%;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 999;
    border-top: 1px solid rgba(132, 168, 172, 0.20);
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0,0,0,.05);
}

.header-buttons {
    display: none;
}

.mobile-burger-button, .mobile-location-button {
    display: none;
}

.nav-links {
    gap: 20px;
}

@media (max-width: 600px) {
    .admin-bar .headers {
        top: 0;
    }
}

@media (min-width: 768px){
    .headers {
        position: static;
        box-shadow: none;
    }

    .header {
        gap: 40px;
    }

    .address-block {
        display: flex;
    }

    .navbar-wrapper {
        display: flex;
    }

    .admin-bar .navbar-wrapper {
        top: 46px;
    }

    .navbar-section {
        display: flex;
    }
}

@media (min-width: 783px) {
    .admin-bar .navbar-wrapper {
        top: 32px;
    }
}
@media (min-width: 1200px) {
    .header {
        gap: 40px;
        margin: auto;
        padding: 14px 0 13px 0;
    }

    .nav-links {
        justify-content: space-between;
    }
}

@media (min-width: 1440px) {
    body {
        overflow-x: hidden;
    }

}

@media (min-width: 1920px) {
    .dropdown.dropdown--services {
        left: -90px;
    }

    .nav-link-wrapper .dropdown.dropdown--services:before {
        left: 102px;
    }

}