@font-face {
    font-family: 'Freigeist-Medium';
    src: url('font/Freigeist-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Freigeist-Regular';
    src: url('font/Freigeist-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.h1{
    margin: 20px;
    font-size: 40px;
    color: #787571;
    font-family: 'Freigeist-Regular', sans-serif;
}

.doctor {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 20px; /* убрали внешний отступ */
}

.doctor-khan,
.doctor-iveta,
.doctor-olga,
.doctor-pak,
.doctor-shoha {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    margin: 0;          /* убрали лишний margin */
    height: 500px;      /* одинаковая высота */
}

.doctor-khan-img,
.doctor-iveta-img,
.doctor-olga-img,
.doctor-pak-img,
.doctor-shoha-img {
    border-radius: 28px;
    height: 100%;              /* теперь равна высоте родителя */
    background-size: cover;    /* лучше чем contain */
    background-position: center;
    background-repeat: no-repeat;
}

.doctor-khan-img {
    background-image: url('images/doc-khan.png');
}

.doctor-iveta-img{
    background-image: url('images/doc-iveta.png');
}

.doctor-olga-img{
    background-image: url('images/doc-olga.png');
}

.doctor-pak-img{
    background-image: url('images/doc-pak.png');
}

.doctor-shoha-img{
    background-image: url('images/shoha.png');
}

.doctor-khan-text,
.doctor-iveta-text,
.doctor-olga-text,
.doctor-pak-text,
.doctor-shoha-text {
    background: white;
    border: 1px solid #787571;
    border-radius: 28px;
    height: 100%;      /* равная высота */
    margin: 0;         /* убрали зазор */
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.left {
    margin: 20px;
    max-width: 600px;
}

.name {
    font-size: 28px;
    font-family: 'Freigeist-Medium', sans-serif;
    color: #787571;

    margin: 20px;
}

.description {
    font-size: 22px;
    line-height: 1.5;
    color: #AEA39C;
    margin: 20px;
}

.subtext {
    font-size: 18px;
    font-style: italic;
    color: #AEA39C;
    margin: 20px;
}

.right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 20px;
    width: 300px;
}

.right a,
.left a{
    text-decoration: none;
}

.info {
    text-align: right;
}

.label {
    font-size: 16px;
    color: #AEA39C;
    margin: 20px 20px 0 20px;
}

.value {
    font-size: 22px;
    font-weight: 600;
    color: #787571;
    margin: 0 20px 20px 20px;
}

.button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    height: 50px;
    width: auto;
    gap: 20px;
    padding: 7px;
    border-radius: 16px;
    border: none;
    background: #EEEAE7;
    font-size: 20px;
    cursor: pointer;
    transition: 0.3s ease;
    margin: 0;
}

.button span {
    text-align: left;
    color: #AEA39C;
    font-family: 'Freigeist-Regular', sans-serif;
}

.button img {
    width: 14px;
    height: 14px;
}
.mobile{
    display: none;
}

@media (max-width: 1024px) {
    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    .h1{
        font-size: 36px;
        text-align: center;
        font-family: 'Freigeist-Regular', sans-serif;
    }

    .doctor-khan,
    .doctor-iveta,
    .doctor-olga,
    .doctor-pak,
    .doctor-shoha  {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        height: auto;
        width: 100%;
    }


    .doctor-khan-img,
    .doctor-iveta-img,
    .doctor-olga-img,
    .doctor-pak-img,
    .doctor-shoha-img{
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        height: 500px;
        width: 100%;
    }

    .doctor-khan-text,
    .doctor-iveta-text,
    .doctor-olga-text,
    .doctor-pak-text,
    .doctor-shoha-text {
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        max-width: 768px;
        margin-top: -35px;
        border-radius: 0 0 28px 28px;
    }

    .name{
        font-size: 22px;
    }

    .description{
        font-size: 18px;
    }

    .button{
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: 90%;
    }

    .button span {
        bottom: 20px;
        left: 20px;
        right: 20px;
        width: auto;
        text-align: left;
        display: block;
        box-sizing: border-box;
        padding: 12px 16px;
    }

    .left{
        width: auto;
        margin: 30px 0 0 0;
    }

    .info-mob{
        position: absolute;
        top: 10px;
        right: 10px;

        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;

        align-items: flex-end;
    }

    .info{
        border: 1px solid #fff;
        border-radius: 16px;
        display: grid;
        align-items: normal;
        justify-content: flex-end;
        text-align: right;

        padding: 0 20px 0 20px;
        width: fit-content;
    }

    .info2{
        border: 1px solid #fff;
        border-radius: 16px;
        display: inline-block;
        align-items: normal;
        justify-content: flex-end;
        text-align: center;

        padding: 0 20px 0 20px;
        width: fit-content;
    }

    .label{
        color: #fff;
        margin: 0;
        width: auto;
    }

    .value{
        color: #fff;
        font-size: 20px;
        margin: 2px 0 0 0;
        width: auto;
    }

    .doctor-khan-img {
        background-image: url('images/khan-mobile.png');
    }

    .doctor-iveta-img {
        background-image: url('images/iveta-mobile.png');
    }

    .doctor-olga-img {
        background-image: url('images/olga-mobile.png');
    }

    .doctor-pak-img {
        background-image: url('images/pak-mobile.png');
    }

    .doctor-shoha-img {
        background-image: url('images/shoha-mobile.png');
    }
}