{% extends 'base.html' %}
{% load static %}

{% block title %}Иванов Иван Иванович | VITA-DENT+{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/doctordetail.css' %}">
{% endblock %}

{% block content %}

                                                        
              
                                                        

:root {
    --doctor-black: #171717;
    --doctor-gray: #6f6f6f;
    --doctor-light: #f2f2f0;
    --doctor-white: #ffffff;
    --doctor-border: #dededb;
    --doctor-accent: #f47b20;
    --doctor-page-padding: 5rem;
    --next-section-overlap: 4rem;                                         
}


                                                        
        
                                                        

.doctor-page {
    width: 100%;
                                                                              
                                                                            
    overflow-x: clip;
    overflow-y: visible;
    background: var(--doctor-white);
    color: var(--doctor-black);
}

.doctor-page *,
.doctor-page *::before,
.doctor-page *::after {
    box-sizing: border-box;
}

.doctor-page button {
    font: inherit;
}


                                                        
        
                                    
                                                        

.doctor-intro {
      
                                         
                                        
       
    --doctor-intro-height: calc(100dvh + var(--next-section-overlap));

    height: var(--doctor-intro-height);

      
                                                
       
    min-height: calc(70rem + var(--next-section-overlap));

      
                                            
                                                
       
    max-height: calc(90rem + var(--next-section-overlap));

    position: relative;
    background: #eeeeec;
    overflow: hidden;
    isolation: isolate;
}


                                                        
                 
                          
                                                        

@media (min-aspect-ratio: 11/5) {
    .doctor-intro {
        --doctor-intro-height: calc(76rem + var(--next-section-overlap));
        max-height: calc(76rem + var(--next-section-overlap));
    }
}


                                                        
                 
                                      
                                                        

@media (min-aspect-ratio: 5/2) {
    .doctor-intro {
        --doctor-intro-height: calc(78rem + var(--next-section-overlap));
        max-height: calc(78rem + var(--next-section-overlap));
    }
}


                                                        
                 
                              
                                                        

@media (max-aspect-ratio: 1/2) {
    .doctor-intro {
        --doctor-intro-height: calc(74rem + var(--next-section-overlap));
        max-height: calc(74rem + var(--next-section-overlap));
    }
}


                                                        
          
                                                        

@media (min-width: 560px) and (max-width: 768px) {
    .doctor-intro {
        --doctor-intro-height: calc(74rem + var(--next-section-overlap));
        max-height: calc(74rem + var(--next-section-overlap));
    }
}


                                                        
            
                                                        

.doctor-intro-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 75% 50%,
        rgba(255, 255, 255, .8),
        transparent 35%
    );
    pointer-events: none;
}

@media (min-width: 769px) and (max-width: 1440px) and (max-height: 900px) {
    .doctor-intro {
        --doctor-intro-height: calc(80rem + var(--next-section-overlap));
        max-height: calc(80rem + var(--next-section-overlap));
    }
}

@media (min-width: 769px) and (max-width: 1280px) and (max-height: 800px) {
    .doctor-intro {
        --doctor-intro-height: calc(76rem + var(--next-section-overlap));
        max-height: calc(76rem + var(--next-section-overlap));
    }
}

@media (min-width: 769px) and (max-width: 1024px) and (max-height: 768px) {
    .doctor-intro {
        --doctor-intro-height: calc(72rem + var(--next-section-overlap));
        max-height: calc(72rem + var(--next-section-overlap));
    }
}

                                                        
                
                                                        

.doctor-intro-content {
    position: relative;
    z-index: 2;
      
                                     
                                    
       
    height: min(calc(100% - var(--next-section-overlap)), 80rem);
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    padding: 12rem var(--doctor-page-padding) 8rem;
}


                                                        
         
                                                        

.doctor-navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: transparent;
}

.doctor-breadcrumbs {
    position: absolute;
    top: 9.5rem;
    left: var(--doctor-page-padding);
    right: var(--doctor-page-padding);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    white-space: nowrap;
    user-select: none;
}

.doctor-breadcrumbs > a,
.doctor-breadcrumbs > span:not(.doctor-breadcrumbs-current) {
    flex: 0 0 auto;
}

.doctor-breadcrumbs a {
    color: #999;
    text-decoration: none;
    transition: color .3s ease;
}

.doctor-breadcrumbs a:hover {
    color: #666;
}

.doctor-breadcrumbs > span:not(.doctor-breadcrumbs-current) {
    color: #ccc;
}

.doctor-breadcrumbs-current {
    min-width: 0;
    overflow: hidden;
    color: var(--doctor-black);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}


                                                        
       
                                                        

.doctor-navbar .logo {
    text-decoration: none;
    color: var(--doctor-black);
    display: flex;
    flex-direction: column;
}

.doctor-navbar .logo-main {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.doctor-navbar .logo-main span {
    color: var(--doctor-accent);
}

.doctor-navbar .logo-sub {
    margin-top: .4rem;
    font-size: .9rem;
    letter-spacing: .08rem;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .55);
}


                                                        
            
                                                        

.doctor-navbar .nav-links a {
    color: var(--doctor-black);
}


                                                        
                  
                                                        

.doctor-navbar .doctor-nav-book {
    border: none;
    padding: 1.2rem 2.2rem;
    border-radius: 5rem;
    background: var(--doctor-black);
    color: white;
    cursor: pointer;
    transition: transform .3s ease, background .3s ease;
}

.doctor-navbar .doctor-nav-book:hover {
    transform: translateY(-.2rem);
    background: var(--doctor-accent);
}


                                                        
                
                                                        

.doctor-intro-content {
    position: relative;
    z-index: 2;
      
                                                 
       
    height: calc(100% - var(--next-section-overlap));
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    padding: 12rem var(--doctor-page-padding) 8rem;
}


                                                        
             
                                                        

.doctor-intro-info {
    max-width: 60rem;
    min-width: 0;
    padding-top: -2rem;
    position: relative;
    z-index: 1;
}

.doctor-intro-label {
    display: inline-flex;
    margin-bottom: 3rem;
    padding: .8rem 1.5rem;
    border: .1rem solid rgba(0, 0, 0, .2);
    border-radius: 5rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .08rem;
    color: rgba(0, 0, 0, .65);
}


                                                        
              
                                                        

.doctor-name {
    margin: 0;
    font-size: clamp(5rem, 7vw, 10rem);
    line-height: .92;
    letter-spacing: -.5rem;
    font-weight: 600;
}

@media (min-width: 769px) {
    .doctor-intro-info {
        width: 145%;
        max-width: none;
        overflow: visible;
        z-index: 2;
    }

    .doctor-name {
        max-width: none;
        overflow: visible;
        white-space: nowrap;
    }
}


                                                        
             
                                                        

.doctor-intro-meta {
    display: flex;
    gap: 7rem;
    margin-top: 4rem;
}

.doctor-specialties .meta-value span:not(:last-child)::after {
    content: ' ·';
}

.doctor-meta-item {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.meta-label {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: var(--doctor-gray);
}

.meta-value {
    max-width: 25rem;
    font-size: 1.5rem;
    line-height: 1.4;
}


                                                        
             
                                                        

.doctor-intro-directions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 3rem;
}

.doctor-intro-directions span {
    padding: .8rem 1.4rem;
    background: rgba(255, 255, 255, .6);
    border-radius: 5rem;
    font-size: 1.2rem;
}


                                                        
                  
                                                        

.doctor-profile-details {
    display: none;
    padding: 0 var(--doctor-page-padding) 5rem;
    background: #eeeeec;
}

.doctor-profile-details-card {
    display: grid;
    gap: 0;
    max-width: 110rem;
    margin: 0 auto;
    padding: 2rem 4rem;
    border-radius: 3rem;
    background: #f4f4f6;
}

.doctor-profile-detail-row {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 4rem;
    padding: 2.5rem 0;
}

.doctor-profile-detail-row + .doctor-profile-detail-row {
    border-top: .1rem solid #d8d8dd;
}

.doctor-profile-detail-label {
    color: var(--doctor-gray);
    font-size: 1.8rem;
    line-height: 1.35;
}

.doctor-profile-detail-value {
    color: #202134;
    font-size: 2rem;
    line-height: 1.45;
}


                                                        
              
                                                        

.doctor-intro-photo {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.doctor-photo-placeholder {
    position: relative;
    width: min(38rem, 75%);
    height: min(78%, 62rem);
    min-height: 45rem;
    border-radius: 20rem 20rem 0 0;
    background: #d6d6d3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 3rem;
}

.doctor-photo-with-image {
    padding-bottom: 0;
}

.doctor-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: translate(
        var(--profile-desktop-offset-x, 0),
        var(--profile-desktop-offset-y, 0)
    ) scale(var(--profile-desktop-scale, 1));
    transform-origin: center top;
}

@media (min-width: 769px) and (max-width: 1440px) {
    .doctor-profile-image {
        transform: translate(
            var(--profile-laptop-offset-x, var(--profile-desktop-offset-x, 0)),
            var(--profile-laptop-offset-y, var(--profile-desktop-offset-y, 0))
        ) scale(var(--profile-laptop-scale, var(--profile-desktop-scale, 1)));
    }
}

@media (max-width: 768px) {
    .doctor-profile-image {
        transform: translate(
            var(--profile-mobile-offset-x, var(--profile-desktop-offset-x, 0)),
            var(--profile-mobile-offset-y, var(--profile-desktop-offset-y, 0))
        ) scale(var(--profile-mobile-scale, var(--profile-desktop-scale, 1)));
    }
}

                                                                             
.doctor-before-after .before-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 2.4rem;
    background: #fff;
}

.doctor-before-after .doctor-carousel-track {
    align-items: flex-start;
}

.doctor-before-after .before-card .before-after-comparison {
    flex: 0 0 auto;
    aspect-ratio: 2 / 1;
    border-radius: 0;
}

.doctor-before-after .before-info {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: .8rem;
    padding: 1.8rem 2.4rem;
    background: #f5f5f5;
}

.doctor-before-after .before-tag {
    align-self: flex-start;
    padding: .6rem 1rem;
    border-radius: 2rem;
    background: #fff;
    color: var(--doctor-black);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.3;
}

.doctor-before-after .before-info p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--doctor-gray);
    font-size: 1.5rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.doctor-before-after .before-after-handle svg {
    width: 2rem;
    height: 2rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

@media (max-width: 768px) {
    .doctor-before-after .before-card .before-after-comparison { aspect-ratio: 1.5 / 1; }

    .doctor-before-after .before-info {
        padding: 1.6rem 2rem;
    }

    .doctor-before-after .before-tag { font-size: 1.3rem; }
    .doctor-before-after .before-info p { font-size: 1.4rem; }
    .doctor-before-after .before-after-handle svg { width: 1.7rem; height: 1.7rem; }
}


                                                        
                    
                                                        

.doctor-photo-placeholder span {
    position: relative;
    z-index: 2;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: rgba(0, 0, 0, .4);
}


                                                        
              
                                                        

.placeholder-head {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translateX(-50%);
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: #b8b8b5;
}

.placeholder-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28rem;
    height: 55%;
    border-radius: 15rem 15rem 0 0;
    background: #b8b8b5;
}


                                                        
              
                                                        

.doctor-scroll-hint {
    position: absolute;
    bottom: calc(3rem + var(--next-section-overlap));
    left: var(--doctor-page-padding);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: rgba(0, 0, 0, .45);
}

.doctor-scroll-line {
    width: 5rem;
    height: .1rem;
    background: rgba(0, 0, 0, .3);
}

                                                        
               
                                                        

.doctor-content {

    position: relative;

    z-index: 10;

      
                                    
                    
       
    margin-top: -4rem;

    background: white;

    border-radius:
        5rem
        5rem
        0
        0;

    padding:
        10rem
        var(--doctor-page-padding)
        12rem;
}


.doctor-content-inner {

    display: grid;

    grid-template-columns:
        30rem
        minmax(0, 1fr);

    gap: 10rem;

    max-width: 180rem;

    margin: 0 auto;
}


                                                        
                 
                                                        

.doctor-booking-column {

    position: relative;
}


                                                        
          
                                                        

.doctor-booking {

                                                                            
    position: sticky;

    top: 10rem;

    padding: 3rem;

    background: #f2f2f0;

    border-radius: 2.5rem;

    font-family: 'Inter', sans-serif;
}

.booking-label {

    display: block;

    margin-bottom: 1.8rem;

    font-size: 1.1rem;

    text-transform: uppercase;

    letter-spacing: .12em;

    font-weight: 600;

    color: var(--doctor-accent);
}


.doctor-booking h2 {

    margin: 0;

    font-size: 2.8rem;

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -.06em;
    overflow-wrap: anywhere;
}


.doctor-booking > p {

    margin: 1.8rem 0 0;

    font-size: 1.3rem;

    line-height: 1.5;

    font-weight: 400;

    color: var(--doctor-gray);
}


.booking-button {

    width: 100%;

    margin-top: 2rem;

    padding: 1.6rem;

    border: none;

    border-radius: 5rem;

    background: #f47b20;

    color: #fff;

    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;

    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.01em;

    transition:
        transform .3s ease,
        background .3s ease;
}


.booking-button:hover,
.booking-button:focus-visible {

    transform: translateY(-.2rem);

    background: #ff963f;
}

.booking-button.is-disabled {

    cursor: not-allowed;

    opacity: .55;

    pointer-events: none;
}


                                                        
                
                                                        

.doctor-info-column {

    min-width: 0;
}


                                                        
          
                                                        

.doctor-section {

    position: relative;

    padding: 9rem 0;

    opacity: 0;

    transform: translateY(4rem);

    transition:
        opacity .8s ease,
        transform .8s
        cubic-bezier(.25, .46, .45, .94);
}


.doctor-section.section-visible {

    opacity: 1;

    transform: translateY(0);
}


.doctor-section:first-child {

    padding-top: 2rem;
}


.doctor-section-number {
    display: none;
}


.doctor-section-content {
    padding-left: 0;
}


.doctor-section h2 {

    margin: 0 0 5rem;

    font-size: 5rem;

    font-weight: 500;

    line-height: 1;

    letter-spacing: -.2rem;
}


                                                        
        
                                                        

.doctor-about-grid {

    display: grid;

    grid-template-columns:
        1.1fr
        1fr;

    gap: 8rem;
}


.doctor-large-text {

    margin: 0;

    font-size: 3rem;

    line-height: 1.2;

    letter-spacing: -.1rem;

    color: var(--doctor-black);
}


.doctor-text {

    color: var(--doctor-gray);

    font-size: 1.5rem;

    line-height: 1.7;
}


.doctor-text p {

    margin: 0 0 2rem;
}


                                                        
            
                                                        

.education-list {

    border-top:
        .1rem solid
        var(--doctor-border);
}


.education-item {

    display: grid;

    grid-template-columns:
        8rem
        1fr;

    gap: 4rem;

    padding: 3rem 0;

    border-bottom:
        .1rem solid
        var(--doctor-border);
}


.education-year {

    font-size: 1.2rem;

    color: var(--doctor-gray);
}


.education-item h3 {

    margin: 0 0 1rem;

    font-size: 1.8rem;

    font-weight: 500;

    line-height: 1.3;
}


.education-item p {

    margin: 0;

    font-size: 1.3rem;

    color: var(--doctor-gray);
}


                                                      
.doctor-education .education-list {

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-top: none;
}


.doctor-education .education-item {

    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 3.5rem 4rem;
    border: none;
    border-radius: 2.5rem;
    background: #f2f2f0;
    transition: transform .3s ease, box-shadow .3s ease;
}


.doctor-education .education-item:nth-child(even) {

    background: #fcb753;
}


.doctor-education .education-item:hover {

    transform: translateX(1rem);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .1);
}


.doctor-education .education-year {

    min-width: 3rem;
    font-size: 1.2rem;
    color: var(--doctor-gray);
}


.doctor-education .education-item > div {

    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: .8rem;
    flex: 1;
}


.doctor-education .education-item h3 {

    min-width: 0;
    margin: 0;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--doctor-black);
}


.doctor-education .education-item p {

    flex: none;
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--doctor-gray);
}


.doctor-education .education-item:nth-child(even) .education-year,
.doctor-education .education-item:nth-child(even) p {

    color: rgba(0, 0, 0, .7);
}


@media (max-width: 768px) {

    .doctor-education .education-item {

        align-items: flex-start;
        gap: 1.5rem;
        padding: 2rem;
    }


    .doctor-education .education-item > div {

        align-items: flex-start;
        flex-direction: column;
        gap: .8rem;
    }


    .doctor-education .education-item h3 {

        min-width: 0;
        font-size: 1.8rem;
    }
}


                                                        
                  
                                                        

.section-heading-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 5rem;
}


.section-heading-row h2 {

    margin-bottom: 0;
}


                                                        
                    
                                                        

.carousel-controls {

    display: flex;

    align-items: center;

    gap: 1rem;
}


.carousel-counter {

    margin-right: 1rem;

    font-size: 1.2rem;

    color: var(--doctor-gray);
}


.carousel-button {

    width: 4.5rem;

    height: 4.5rem;

    border:
        .1rem solid
        var(--doctor-border);

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease;
}


.carousel-button:hover {

    background: var(--doctor-black);

    color: white;
}


.carousel-button:disabled {

    opacity: .35;

    cursor: default;
}


.carousel-button:disabled:hover {

    background: transparent;

    color: inherit;
}


                                                        
           
                                                        

.doctor-carousel {

    width: 100%;

    overflow: hidden;

    touch-action: pan-y;
}


.doctor-carousel-track {

    display: flex;

    gap: 2rem;

    transition:
        transform .65s
        cubic-bezier(.76, 0, .24, 1);

    will-change: transform;
}


                                                        
                 
                                                        

.before-card {

    flex:
        0 0
        calc(50% - 1rem);

    min-width: 0;
}


.before-images {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: .5rem;

    aspect-ratio: 1.25 / 1;

    overflow: hidden;

    border-radius: 2rem;
}


.before-image,
.after-image {

    position: relative;

    display: flex;

    align-items: flex-end;

    padding: 1.5rem;

    background: #dededb;
}


.after-image {

    background: #c6c6c2;
}


.before-image span,
.after-image span {

    padding: .5rem 1rem;

    border-radius: 5rem;

    background: rgba(255, 255, 255, .8);

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: .08rem;
}

.before-image img,
.after-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.before-image span,
.after-image span {
    position: relative;
    z-index: 1;
}


.before-info {

    padding-top: 1.5rem;

    font-size: 1.4rem;
}


                                                        
               
                                                        

.competencies-grid {
    display: flex;
    flex-direction: column;                            
    gap: 1.5rem;
    border-top: none;
}

.competency {
    width: 100%;                                 
    padding: 3.5rem 4rem;
    border: none;
    border-radius: 2.5rem;
    background: #f2f2f0;                              
    transition: transform .3s ease, box-shadow .3s ease;

                                          
    display: flex;
    align-items: center;
    gap: 3rem;
}

                        
.competency:nth-child(even) {
    background: #fcb753;                      
}

                            
.competency:hover {
    transform: translateX(1rem);                                 
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
}

.competency span {
    font-size: 1.2rem;
    color: var(--doctor-gray);
    flex-shrink: 0;                         
    min-width: 3rem;
}

                                             
.competency:nth-child(even) span {
    color: rgba(0, 0, 0, 0.6);
}

.competency h3 {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--doctor-black);
    flex-shrink: 0;                             
    min-width: 25rem;                                       
}

.competency p {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--doctor-gray);
    flex: 1;                                         
}

                                               
.competency:nth-child(even) p {
    color: rgba(0, 0, 0, 0.7);
}


                                                        
               
                                                        

.certificate-card {

    flex:
        0 0
        calc(33.333% - 1.35rem);
}


.certificate-placeholder {

    aspect-ratio: .75;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 1.5rem;

    background: #e8e8e5;

    font-size: 1.2rem;

    color: #999;
}


.certificate-card > span {

    display: block;

    margin-top: 1.5rem;

    font-size: 1.3rem;
}


                                                        
                                                    
                                                        

.doctor-certificates .carousel-controls,
.doctor-before-after .carousel-controls {

    gap: 1.6rem;
}


.doctor-certificates .carousel-counter,
.doctor-before-after .carousel-counter {

    margin-right: 0;
    font-family: 'Inter', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--doctor-gray);
    letter-spacing: .05rem;
    white-space: nowrap;
    user-select: none;
}


.doctor-certificates .carousel-counter #certificateCurrent,
.doctor-before-after .carousel-counter #beforeCurrent {

    color: var(--doctor-black);
    font-weight: 700;
}


.doctor-certificates .carousel-button,
.doctor-before-after .carousel-button {

    width: 5rem;
    height: 5rem;
    border: none;
    border-radius: 50%;
    background: #f0f0f0;
    color: var(--doctor-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    transition: all .2s;
}


.doctor-certificates .carousel-button:hover,
.doctor-before-after .carousel-button:hover {

    background: #d0d0d0;
    color: var(--doctor-black);
}

.doctor-certificates .carousel-button svg,
.doctor-before-after .carousel-button svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}


.doctor-certificates .carousel-button:disabled,
.doctor-before-after .carousel-button:disabled {

    opacity: 1;
    background: #f0f0f0;
    color: #ccc;
    cursor: default;
    pointer-events: none;
}


.doctor-certificates .certificate-card {

    position: relative;
}


.doctor-certificates .certificate-placeholder {

                                              
    aspect-ratio: 1.15;

    position: relative;

    padding: 2rem;
}


.doctor-certificates .certificate-placeholder::before {

    content: 'Сертификат об обучении';
    position: absolute;
    top: 2rem;
    left: 2rem;
    right: 2rem;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--doctor-black);
}


.doctor-certificates .certificate-placeholder::after {

                                                               
    content: '';
    display: block;
    height: 100%;
}

.doctor-certificates .certificate-image {
    padding: 0;
}

.doctor-certificates .certificate-image::before,
.doctor-certificates .certificate-image::after {
    display: none;
}

.doctor-certificates .certificate-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}


.doctor-certificates .certificate-card > span {

    position: absolute;
    right: 2rem;
    bottom: 2rem;
    left: 2rem;
    z-index: 1;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--doctor-black);
}


                                                        
          
                                                        

.doctor-reviews .doctor-section-content {

    max-width: 138rem;
}


.reviews-heading {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}


.reviews-heading h2 {

    margin: 0;
    font-size: clamp(3.6rem, 4.2vw, 5.8rem);
    font-weight: 500;
    letter-spacing: -.35rem;
    line-height: 1;
}


.review-rating {

    white-space: nowrap;
    font-weight: 500;
}


.review-rating span {

    color: #e07b27;
    font-size: .7em;
    vertical-align: .12em;
}


.prodoctor-link {

    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
    color: var(--doctor-black);
    text-decoration: none;
}


.prodoctor-icon-wrap {

    width: 8rem;
    height: 8rem;
    display: grid;
    place-items: center;
    border-radius: 2.5rem;
    background: #f5f6fa;
}


.prodoctor-icon-wrap img {

    display: block;
    width: 4.2rem;
    height: 4.2rem;
    object-fit: contain;
}


.prodoctor-link strong,
.prodoctor-link small {

    display: block;
}


.prodoctor-link strong {

    font-size: 2.3rem;
    font-weight: 500;
    line-height: 1.15;
}


.prodoctor-link small {

    margin-top: .5rem;
    font-size: 1.6rem;
    color: #7395b9;
}


.doctor-reviews .reviews-list {

    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}


.doctor-reviews .review-card {

    padding: 3rem;
    border: none;
    border-radius: 3rem;
    background: #f2f2f0;
}


.doctor-reviews .review-card-top {

    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
}


.review-quote {

    width: 9rem;
    height: 9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--doctor-white);
    font-family: Georgia, serif;
    font-size: 7rem;
    font-weight: 700;
    line-height: 1.7;
    color: #282a43;
    transform: translateY(.6rem);
}


.review-author strong,
.review-author span {

    display: block;
}


.review-author strong {

    font-size: 2.3rem;
    font-weight: 500;
    line-height: 1.2;
}


.review-author span,
.review-body > span {

    color: #7395b9;
}


.review-author span {

    margin-top: .6rem;
    font-size: 1.6rem;
}


.doctor-reviews .review-stars {

    margin: 0;
    color: #e07b27;
    font-size: 2.6rem;
    letter-spacing: .2rem;
    line-height: 1;
    white-space: nowrap;
}


.review-body {

    margin-top: 3rem;
    padding: 3rem;
    border-radius: 2.5rem;
    background: var(--doctor-white);
}


.review-body > span {

    display: block;
    margin-bottom: 1.4rem;
    font-size: 1.6rem;
}


.doctor-reviews .review-card p {

    margin: 0;
    font-size: clamp(1.7rem, 1.8vw, 2.3rem);
    font-weight: 400;
    line-height: 1.5;
    color: #465a70;
}


@media (max-width: 768px) {

    .reviews-heading {

        align-items: flex-start;
        flex-direction: column;
        gap: 2.5rem;
        margin-bottom: 3rem;
    }


    .reviews-heading h2 {

        font-size: 3.8rem;
        letter-spacing: -.2rem;
    }


    .prodoctor-icon-wrap {

        width: 6.5rem;
        height: 6.5rem;
        border-radius: 2rem;
    }


    .prodoctor-icon-wrap img {

        width: 3.4rem;
        height: 3.4rem;
    }


    .prodoctor-link strong {

        font-size: 2rem;
    }


    .prodoctor-link small {

        margin-top: .4rem;
        font-size: 1.5rem;
    }


    .doctor-reviews .reviews-list {

        display: grid;
        gap: 1.5rem;
        margin-right: 0;
        padding-right: 0;
        overflow: visible;
    }


    .doctor-reviews .review-card {

        padding: 2rem;
        border-radius: 2.5rem;
    }


    .doctor-reviews .review-card-top {

        grid-template-columns: 6rem minmax(0, 1fr);
        gap: 1.5rem;
    }


    .review-quote {

        width: 6rem;
        height: 6rem;
        font-size: 5rem;
    }


    .review-author strong {

        font-size: 1.7rem;
    }


    .review-author span,
    .review-body > span {

        font-size: 1.4rem;
    }


    .doctor-reviews .review-stars {

        grid-column: 2;
        font-size: 2.2rem;
    }


    .review-body {

        margin-top: 2.5rem;
        padding: 2.5rem 2rem;
        border-radius: 2rem;
    }


    .review-body > span {

        margin-bottom: 1.2rem;
    }


    .doctor-reviews .review-card p {

        font-size: 1.7rem;
    }
}


                                                        
         
                                                        

.doctor-footer {

    padding:
        8rem
        var(--doctor-page-padding)
        3rem;

    background: var(--doctor-black);

    color: white;
}


.doctor-footer-top {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    align-items: center;

    padding-bottom: 8rem;
}


.footer-logo {

    font-size: 3rem;

    font-weight: 700;
}


.footer-logo span {

    color: var(--doctor-accent);
}


.footer-text {

    font-size: 1.4rem;

    line-height: 1.5;

    color: rgba(255, 255, 255, .6);
}


.footer-book-button {

    justify-self: end;

    padding: 1.5rem 2.5rem;

    border: none;

    border-radius: 5rem;

    background: white;

    color: var(--doctor-black);

    cursor: pointer;
}


.doctor-footer-bottom {

    display: flex;

    justify-content: space-between;

    padding-top: 2rem;

    border-top:
        .1rem solid
        rgba(255, 255, 255, .15);

    font-size: 1rem;

    color: rgba(255, 255, 255, .4);
}


                                                        
                   
                                                        


  
                      
   

.doctor-intro-info > * {

    opacity: 0;
}


.doctor-intro-info {

    clip-path:
        inset(
            0
            100%
            0
            0
        );
}


.doctor-photo-placeholder {

    opacity: 0;

    transform:
        translateY(10rem)
        scale(.92);
}


                                                        
         
                                                        

.doctor-intro-info.animate-reveal {

    animation:
        doctorReveal
        .9s
        cubic-bezier(.25, .46, .45, .94)
        forwards;
}


.doctor-photo-placeholder.animate-popup {

    animation:
        doctorPopup
        .8s
        cubic-bezier(.34, 1.56, .64, 1)
        forwards;
}


.doctor-intro-label.animate-item,
.doctor-name.animate-item,
.doctor-intro-meta.animate-item,
.doctor-intro-directions.animate-item {

    animation:
        doctorFadeUp
        .7s
        cubic-bezier(.25, .46, .45, .94)
        forwards;
}


@keyframes doctorReveal {

    from {

        opacity: 0;

        clip-path:
            inset(
                0
                100%
                0
                0
            );
    }

    to {

        opacity: 1;

        clip-path:
            inset(
                0
                0
                0
                0
            );
    }
}


@keyframes doctorPopup {

    from {

        opacity: 0;

        transform:
            translateY(10rem)
            scale(.92);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes doctorFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(2rem);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


                                                        
         
                                                        

@media (max-width: 768px) {

    :root {

        --doctor-page-padding: 2rem;
    }


                                                       
            
                                                       

    .doctor-intro {

          
                                    
                                    
           
        height: auto;

        min-height: 0;

        border-radius: 0;

        background: #eeeeec;
    }


    .doctor-intro-content {

        height: auto;

        min-height: 0;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        gap: 3rem;

        padding:
            11rem
            2rem
            6rem;
    }


                                                       
                 
                                                       

    .doctor-intro-info {

        width: 100%;
        min-width: 0;
        padding: 0;

        order: 0;

        max-width: none;
        margin: 0;
        align-self: stretch;
        text-align: left;
    }


    .doctor-intro-label {

        margin-bottom: 1.8rem;

        font-size: 1rem;
    }


    .doctor-name {

        font-size:
            clamp(
                4.2rem,
                12vw,
                7rem
            );

        letter-spacing:
            -.3rem;

        margin-left: 0;
        text-align: left;
    }


    .doctor-intro-meta {

        gap: 2rem;

        margin-top: 3rem;
    }


    .meta-value {

        font-size: 1.2rem;
    }


    .doctor-intro-directions {

        margin-top: 2rem;
    }


    .doctor-intro-directions span {

        font-size: 1rem;

        padding:
            .7rem
            1.1rem;
    }


                                                       
            
                                                       
    .doctor-intro-meta {
        display: block;
        width: 100%;
        margin-top: 1.6rem;
        margin-left: 0;
        text-align: left;
    }

    .doctor-specialties .meta-label {
        display: none;
    }

    .doctor-specialties .meta-value {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: .7rem;
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .doctor-specialties .meta-value span {
        padding: .9rem 1.3rem;
        border-radius: 5rem;
        background: var(--doctor-white);
    }

    .doctor-specialties .meta-value span::after {
        content: none;
    }

    .doctor-intro-photo {

        position: relative;

        inset: auto;

        width: 100%;

        height: 28rem;

        order: 1;
    }


    .doctor-photo-placeholder {

        width: min(20rem, 65%);

        height: 100%;

        min-height: 0;

        border-radius:
            20rem
            20rem
            0
            0;
    }


    .placeholder-head {

        width: 7rem;

        height: 7rem;
    }


    .placeholder-body {

        width: 17rem;

        height: 55%;
    }


    .doctor-scroll-hint {

        display: none;
    }


    .doctor-profile-details {

        display: block;

        padding: 0 0 4rem;

        background: transparent;
    }


    .doctor-desktop-experience,
    .doctor-desktop-directions {

        display: none;
    }


    .doctor-profile-details-card {

        padding: 1.8rem 2rem;

        border-radius: 2.8rem;
    }


    .doctor-profile-detail-row {

        grid-template-columns: minmax(10rem, .8fr) minmax(0, 1.45fr);

        gap: 1.8rem;

        padding: 2.1rem 0;
    }


    .doctor-profile-detail-label {

        font-size: 1.5rem;
    }


    .doctor-profile-detail-value {

        font-size: 1.7rem;
    }


                                                       
              
                                                       

    .doctor-content {

        margin-top: -2rem;

        border-radius:
            3rem
            3rem
            0
            0;

        padding:
            3rem
            2rem
            7rem;
    }


    .doctor-content-inner {

        display: flex;

        flex-direction: column;
    }


                                                       
              
                                                       

    .doctor-booking-column {

        order: 2;

        margin: 4rem 0 0;
    }


    .doctor-info-column {

        order: 1;
    }


    .doctor-booking {

        position: relative;

        top: auto;

        padding: 2.2rem;

        border-radius: 2rem;
    }


    .doctor-booking h2 {

        font-size: 3rem;
    }


                                                       
               
                                                       

    .doctor-section {

        padding: 6rem 0;
    }


    .doctor-section:first-child {

        padding-top: 2rem;
    }


    .doctor-section-number {
        display: none;
    }


    .doctor-section-content {

        padding-left: 0;
    }


    .doctor-section h2 {

        margin-bottom: 3rem;

        font-size: 3.5rem;
    }


                                                       
            
                                                       

    .doctor-about-grid {

        display: block;
    }


    .doctor-large-text {

        margin-bottom: 3rem;

        font-size: 2.2rem;
    }


    .doctor-text {

        font-size: 1.3rem;
    }


                                                       
                
                                                       

    .education-item {

        grid-template-columns:
            5rem
            1fr;

        gap: 1.5rem;

        padding: 2rem 0;
    }


    .education-item h3 {

        font-size: 1.5rem;
    }


                                                       
               
                                                       

    .section-heading-row {

        align-items: flex-end;

        gap: 1rem;

        margin-bottom: 3rem;
    }


    .carousel-controls {

        flex-shrink: 0;
    }


    .carousel-counter {

        display: none;
    }


    .carousel-button {

        width: 4rem;

        height: 4rem;
    }


                                                       
                     
                                                       

    .before-card {

        flex:
            0 0 100%;
    }


                                                       
                   
                                                       

    .competencies-grid {

        display: flex;

        flex-direction: column;

        gap: 1.5rem;
    }


    .competency {

        display: grid;

        grid-template-columns: 3rem minmax(0, 1fr);

        align-items: flex-start;

        gap: 1.5rem;

        padding: 2rem;

        border: none !important;

        border-radius: 2rem;
    }


    .competency span {

        grid-row: 1 / span 2;

        grid-column: 1;
    }


    .competency h3 {

        grid-column: 2;

        min-width: 0;

        margin: 0;

        font-size: 1.8rem;
    }


    .competency p {

        grid-column: 2;

        margin: 0;

        font-size: 1.3rem;

        flex: none;
    }


                                                       
                   
                                                       

    .certificate-card {

        flex:
            0 0 100%;
    }


                                                        
                                                           
    .doctor-before-after .doctor-section-content,
    .doctor-certificates .doctor-section-content {

        display: flex;

        flex-direction: column;
    }


    .doctor-before-after .section-heading-row,
    .doctor-certificates .section-heading-row {

        display: contents;
    }


    .doctor-before-after .section-heading-row h2,
    .doctor-certificates .section-heading-row h2 {

        order: 0;

        margin-bottom: 3rem;
    }


    .doctor-before-after .doctor-carousel,
    .doctor-certificates .doctor-carousel {

        order: 1;
    }


    .doctor-before-after .carousel-controls,
    .doctor-certificates .carousel-controls {

        display: flex;

        order: 2;

        width: 100%;

        margin-top: 2rem;
    }


    .doctor-before-after .carousel-counter,
    .doctor-certificates .carousel-counter {

        display: block;

        margin-right: auto;
    }


                                                       
              
                                                       

    .reviews-list {

        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        gap: 1rem;

        margin-right: -2rem;

        padding-right: 2rem;

        scrollbar-width: none;
    }


    .reviews-list::-webkit-scrollbar {

        display: none;
    }


    .review-card {

        flex:
            0 0 85%;

        scroll-snap-align: start;
    }


                                                       
             
                                                       

    .doctor-footer {

        padding:
            6rem
            2rem
            2rem;
    }


    .doctor-footer-top {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 3rem;

        padding-bottom: 5rem;
    }


    .footer-book-button {

        align-self: stretch;
    }


    .doctor-footer-bottom {

        flex-direction: column;

        gap: 1rem;
    }

}


                                                        
               
                                                        

@media (max-width: 559px) {

    .doctor-intro {

        --doctor-intro-height: 100svh;

        min-height: 0;
    }


    .doctor-intro-content {

        height: auto;

        min-height: 0;
    }

}


                                                        
                            
                                                        

@media (max-width: 559px) and (max-aspect-ratio: 1/2) {

    .doctor-intro {

          
                                          
                                               
           
        height: auto;
    }

}


                                                        
                 
                                                        

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}


                                                                   
                                             
                                                                      

                  
@media (min-width: 769px) {
  body.doctors-page-body .navbar .logo-main,
  body.doctors-page-body .navbar .logo-main span {
    color: #1a1a1a !important;
  }

  body.doctors-page-body .navbar .logo-sub {
    color: #666666 !important;
  }

  body.doctors-page-body .navbar .nav-links a {
    color: #1a1a1a !important;
  }

  body.doctors-page-body .navbar .nav-links a:hover {
    color: #000000 !important;
  }

  body.doctors-page-body .navbar .nav-phone-btn {
    border-color: transparent !important;
    background: rgba(0, 0, 0, .08) !important;
  }

  body.doctors-page-body .navbar .nav-phone-btn svg {
    stroke: #1a1a1a !important;
  }

  body.doctors-page-body .navbar .nav-phone-btn:hover {
    border-color: #1a1a1a !important;
    background: rgba(0, 0, 0, 0.05) !important;
  }

  body.doctors-page-body .navbar .btn-booking {
    background: linear-gradient(135deg, #f06b08 0%, #fb8318 35%, #ff9a2e 64%, #f3730b 100%) !important;
    color: #ffffff !important;
    border: none !important;
  }

  body.doctors-page-body .navbar .btn-booking:hover {
    background: linear-gradient(135deg, #f06b08 0%, #fb8318 35%, #ff9a2e 64%, #f3730b 100%) !important;
  }

                   
  body.doctors-page-body .navbar.scrolled {
    background: transparent !important;
    box-shadow: none !important;
  }

  body.doctors-page-body .navbar.scrolled .logo-main,
  body.doctors-page-body .navbar.scrolled .logo-main span,
  body.doctors-page-body .navbar.scrolled .nav-links a {
    color: #1a1a1a !important;
  }

  body.doctors-page-body .navbar.scrolled .logo-sub {
    color: #666666 !important;
  }

  body.doctors-page-body .navbar.scrolled .nav-phone-btn {
    border-color: transparent !important;
  }

  body.doctors-page-body .navbar.scrolled .nav-phone-btn svg {
    stroke: #1a1a1a !important;
  }

  body.doctors-page-body .navbar.scrolled .btn-booking {
    background: linear-gradient(135deg, #f06b08 0%, #fb8318 35%, #ff9a2e 64%, #f3730b 100%) !important;
    color: #ffffff !important;
  }
}

                   
@media (max-width: 768px) {
  body.doctors-page-body .navbar .logo-main,
  body.doctors-page-body .navbar .logo-main span {
    color: #1a1a1a !important;
  }

  body.doctors-page-body .navbar .logo-sub {
    color: #666666 !important;
  }

  body.doctors-page-body .navbar .mobile-phone-btn,
  body.doctors-page-body .navbar .burger-btn {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  body.doctors-page-body .navbar .mobile-phone-btn svg,
  body.doctors-page-body .navbar .burger-btn svg {
    stroke: #1a1a1a !important;
  }

                   
  body.doctors-page-body .navbar.scrolled {
    background: transparent !important;
  }

  body.doctors-page-body .navbar.scrolled .logo-main,
  body.doctors-page-body .navbar.scrolled .logo-main span {
    color: #1a1a1a !important;
  }

  body.doctors-page-body .navbar.scrolled .logo-sub {
    color: #666666 !important;
  }

  body.doctors-page-body .navbar.scrolled .burger-btn,
  body.doctors-page-body .navbar.scrolled .mobile-phone-btn {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  body.doctors-page-body .navbar.scrolled .burger-btn svg,
  body.doctors-page-body .navbar.scrolled .mobile-phone-btn svg {
    stroke: #1a1a1a !important;
  }

                     
  body.doctors-page-body .navbar.menu-open {
    background: transparent !important;
  }

  body.doctors-page-body .navbar.menu-open .logo-main,
  body.doctors-page-body .navbar.menu-open .logo-main span {
    color: #1a1a1a !important;
  }

  body.doctors-page-body .navbar.menu-open .logo-sub {
    color: #666666 !important;
  }

  body.doctors-page-body .navbar.menu-open .burger-btn,
  body.doctors-page-body .navbar.menu-open .mobile-phone-btn {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  body.doctors-page-body .navbar.menu-open .burger-btn svg,
  body.doctors-page-body .navbar.menu-open .mobile-phone-btn svg {
    stroke: #1a1a1a !important;
  }
}

@media (max-width: 768px) {
  .breadcrumbs {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  .doctor-breadcrumbs {
    top: 7.5rem;
    left: 2rem;
    right: 2rem;
    gap: .7rem;
    font-size: 1.2rem;
    flex-wrap: nowrap;
  }
}

                                                                 
body:has(.doctor-page) .navbar .btn-booking,
body:has(.doctor-page) .navbar .btn-booking:hover {
  background: linear-gradient(135deg, #f06b08 0%, #fb8318 35%, #ff9a2e 64%, #f3730b 100%) !important;
  color: #ffffff !important;
}

                                         
.before-after-comparison {
    --comparison-position: 50%;
    position: relative;
    aspect-ratio: 1.25 / 1;
    overflow: hidden;
    border-radius: 2rem;
    background: #dededb;
}

.before-after-comparison .before-after-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: translate(var(--photo-offset-x, 0), var(--photo-offset-y, 0)) scale(var(--photo-scale, 1));
    transform-origin: center;
}

.before-after-comparison > .before-after-image {
    position: absolute;
    inset: 0;
}

.before-after-after {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--comparison-position));
}

.before-after-label {
    position: absolute;
    bottom: 1.5rem;
    z-index: 2;
    padding: .5rem 1rem;
    border-radius: 5rem;
    background: rgba(255, 255, 255, .85);
    color: var(--doctor-black);
    font-size: 1rem;
    letter-spacing: .08rem;
    pointer-events: none;
    text-transform: uppercase;
}

.before-after-label-before { left: 1.5rem; }
.before-after-label-after { right: 1.5rem; }

.before-after-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--comparison-position);
    z-index: 3;
    width: .2rem;
    background: #fff;
    pointer-events: none;
    transform: translateX(-50%);
}

.before-after-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: .2rem solid #fff;
    border-radius: 50%;
    background: var(--doctor-black);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.before-after-range {
    position: absolute;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: ew-resize;
    opacity: 0;
}

                                                         
.doctor-certificates .certificate-card {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1.5rem;
    background: #e8e8e5;
    color: var(--doctor-black);
    cursor: pointer;
    text-align: left;
}

.doctor-certificates .certificate-card:hover,
.doctor-certificates .certificate-card:focus-visible {
    outline: 0;
    background: #dededb;
}

.doctor-certificates .certificate-placeholder {
    display: grid;
    min-height: 27rem;
    padding: 2rem;
    place-items: center;
}

.doctor-certificates .certificate-placeholder::before,
.doctor-certificates .certificate-placeholder::after {
    display: none;
}

.certificate-icon {
    width: 5.2rem;
    height: 5.2rem;
    fill: none;
    stroke: var(--doctor-gray);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.certificate-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(92vw, 90rem);
    max-width: none;
    max-height: 92vh;
    margin: 0;
    padding: 2rem;
    overflow: auto;
    border: 0;
    border-radius: 1.6rem;
    background: #fff;
    color: var(--doctor-black);
    transform: translate(-50%, -50%);
}

.certificate-dialog::backdrop { background: rgba(0, 0, 0, .65); }

.certificate-dialog img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(92vh - 10rem);
    margin: 0 auto;
}

.certificate-dialog p {
    margin: 1.5rem 5rem 0 0;
    font-size: 1.5rem;
}

.certificate-dialog-close {
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    display: grid;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--doctor-black);
    color: #fff;
    cursor: pointer;
    font-size: 2.6rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .doctor-certificates .certificate-placeholder { min-height: 22rem; }
    .before-after-handle { width: 3.4rem; height: 3.4rem; font-size: 1.5rem; }
}

                                                                         
.doctor-photo-placeholder.doctor-photo-with-image {
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

.doctor-photo-placeholder.doctor-photo-with-image img {
    display: block;
    border-radius: 0;
    object-fit: contain;
}

                     
.doctor-faq .doctor-section-content {
    max-width: 118rem;
}

.doctor-faq h2 {
    margin-bottom: 3.5rem;
}

.faq-list {
    display: grid;
    gap: 1.2rem;
}

.faq-item {
    overflow: hidden;
    border-radius: 2.5rem;
    background: #f2f2f0;
    transition: background .25s ease, box-shadow .25s ease;
}

.faq-item.is-open {
    background: #fff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .06);
}

.faq-question {
    display: flex;
    width: 100%;
    padding: 2.6rem 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border: 0;
    background: transparent;
    color: var(--doctor-black);
    cursor: pointer;
    font: inherit;
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
}

.faq-toggle {
    position: relative;
    display: grid;
    width: 4.2rem;
    height: 4.2rem;
    flex: 0 0 4.2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--doctor-black);
    color: #fff;
    font-size: 0;
    line-height: 1;
    transition: background .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.faq-toggle::before,
.faq-toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.7rem;
    height: .2rem;
    border-radius: 1rem;
    background: currentColor;
    content: '';
    transform: translate(-50%, -50%);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-toggle {
    background: var(--doctor-accent);
    transform: rotate(180deg);
}

.faq-item.is-open .faq-toggle::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.faq-item.is-open .faq-toggle::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.25, .46, .45, .94);
}

.faq-answer-inner {
    padding: 0 9rem 3rem 3rem;
    color: var(--doctor-gray);
    font-size: 1.8rem;
    line-height: 1.55;
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity .25s ease .1s, padding .45s cubic-bezier(.25, .46, .45, .94), transform .35s ease;
}

.faq-item.is-open .faq-answer {
    max-height: 60rem;
}

.faq-item.is-open .faq-answer-inner {
    opacity: 1;
    transform: translateY(0);
}

.faq-question:focus-visible {
    outline: .25rem solid var(--doctor-accent);
    outline-offset: -.25rem;
}

@media (max-width: 768px) {
    .doctor-faq h2 { margin-bottom: 2.5rem; }
    .faq-item { border-radius: 2rem; }
    .faq-question { padding: 2rem; font-size: 1.8rem; }
    .faq-toggle { width: 3.6rem; height: 3.6rem; flex-basis: 3.6rem; }
    .faq-answer-inner { padding-right: 2rem; padding-bottom: 2.5rem; padding-left: 2rem; font-size: 1.6rem; }
    .faq-item.is-open .faq-answer-inner { opacity: 1; }
}

                                                                      
.doctor-certificates .certificate-card {
    display: flex;
    aspect-ratio: 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.4rem;
    border: 0;
    border-radius: 2.5rem;
    background: #f2f2f0;
    color: var(--doctor-black);
    text-align: left;
    will-change: transform;
    transition: transform .25s ease;
}

.doctor-certificates .certificate-card:hover {
    transform: translateY(-.4rem);
}

.doctor-certificates .certificate-card:focus-visible {
    outline: .3rem solid #f06b08;
    outline-offset: .3rem;
    background: #e5e5e2;
}

.doctor-certificates .certificate-card-icon {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: #f06b08;
}

.doctor-certificates .certificate-card-icon .certificate-icon {
    width: 4.8rem;
    height: 4.8rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.doctor-certificates .certificate-card-icon > span {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.doctor-certificates .certificate-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.2rem;
    margin: 0;
}

                                                                                 
.doctor-certificates .certificate-card > .certificate-card-footer {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
}

.doctor-certificates .certificate-card-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: clamp(1.7rem, 1.8vw, 2.2rem);
    font-weight: 500;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.doctor-certificates .certificate-card-arrow {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform .25s ease;
}

.doctor-certificates .certificate-card:hover .certificate-card-arrow {
    transform: translateX(.4rem);
}

                                                                                     
.doctor-certificates .certificate-carousel {
    margin-top: -.5rem;
    padding-top: .5rem;
}

@media (max-width: 768px) {
    .doctor-certificates .certificate-card {
        padding: 1.8rem;
        border-radius: 2rem;
    }

    .doctor-certificates .certificate-card:hover { transform: none; }
    .doctor-certificates .certificate-card-icon .certificate-icon { width: 3.8rem; height: 3.8rem; }
    .doctor-certificates .certificate-card-title { font-size: 1.6rem; }
}