body {
    background: #3b5762;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-title {
    text-align: center;
    margin-bottom: 40px;
    color: #2c3e50;
    padding-top: 20px;
}

.specialists-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.specialist-card {
    background: #729AA9;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    width: 100%;
}

.specialist-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.specialist-card img {
    max-width: 100%; /* Максимальная ширина = ширина родителя */
    height: 100%;    /* Автоматическая высота для сохранения пропорций */
    object-fit: cover;
    object-position: center;
}

.photo-section {
    width: 35%;
    min-width: 300px;
}

.specialist-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    min-height: 250px;
    background: linear-gradient(135deg, #87a8b9, #5a8a9e);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 48px;
    font-weight: bold;
}

.info-section {
    width: 65%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 865 265" preserveAspectRatio="none"><path d="M842.743 1.58984C853.106 1.61745 861.637 9.74634 862.166 20.0957L864.499 65.7744L861.199 131.904L861.198 131.917V244.311C861.198 255.053 852.51 263.772 841.768 263.811L647.098 264.5H216.802L22.7383 263.809C12.1864 263.771 3.57822 255.347 3.31348 244.798L0.5 132.678V66.5352L2.84473 20.1074C3.36747 9.75319 11.9012 1.61732 22.2686 1.58984L433.6 0.5L842.743 1.58984Z" fill="%23729AA9" stroke="none"/><rect x="14.2031" y="11" width="836.593" height="244" rx="20" fill="white"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
    box-sizing: border-box;
}

.info-section.full {
    width: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 865 265" preserveAspectRatio="none"><path d="M842.743 1.58984C853.106 1.61745 861.637 9.74634 862.166 20.0957L864.499 65.7744L861.199 131.904L861.198 131.917V244.311C861.198 255.053 852.51 263.772 841.768 263.811L647.098 264.5H216.802L22.7383 263.809C12.1864 263.771 3.57822 255.347 3.31348 244.798L0.5 132.678V66.5352L2.84473 20.1074C3.36747 9.75319 11.9012 1.61732 22.2686 1.58984L433.6 0.5L842.743 1.58984Z" fill="white" stroke="none"/><rect x="14.2031" y="11" width="836.593" height="244" rx="20" fill="%23729AA9"/></svg>');
    background-size: 100% 100%;
}

.info-flashlight{
    position: absolute;
    bottom: 15px;
    right: 25px;
    height: 200px;
    width: 170px;
    background-size: 100% 100%;
    box-sizing: border-box;
    transition: all 0.5s ease;
}

.info-flashlight.sova {
   background: url('/static/img/customers/sova.png');
}

.info-flashlight.slon {
    left: 15px;
    bottom: -40px;
    background-size: 100% 100%;
    background: url('/static/img/customers/koleso.png') no-repeat;
}

.info-flashlight.keys {
    left: 55%;
    bottom: 0px;
    height: 170px;
    background: url('/static/img/customers/keys.png') no-repeat;
    background-size: 100% 100%;
}


.specialist-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #2c3e50;
}

.specialist-experience {
    font-size: 16px;
    color: #7f8c8d;
    margin-bottom: 20px;
}

.specialist-experience.full {
    color: white;
}

.specialist-description {
    font-size: 16px;
    line-height: 1.6;
    color: #34495e;
    margin-bottom: 20px;
    flex-grow: 1;
}

.specialist-details {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.6;
}

.specialist-details strong {
    color: #2c3e50;
}

.specialist-rating {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.stars-rating {
    color: #ffd700;
    margin-right: 10px;
    font-size: 18px;
}

.rating-value {
    font-size: 16px;
    color: #7f8c8d;
}

/*
.specialist-btn {
    padding: 14px 25px;
    background: linear-gradient(135deg, #87ceeb, #5a8a9e);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.specialist-btn:hover {
    background: linear-gradient(135deg, #5a8a9e, #87ceeb);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
*/



@media (max-width: 950px) {
    .specialist-card img {
        object-position: 20% 30%;
    }
}


@media (max-width: 768px) {
    .specialist-card {
        flex-direction: column;
    }

    .photo-section, .info-section {
        width: 100%;
    }

    .specialist-card img {
        height: 250px;
        width: 100%;
        object-position: 20% 30%;
    }
}

@media (max-width: 550px) {
    .info-flashlight.sova {
        bottom: 5px;
        right: 5px;
        background-size: 100% 100%;
        width: 100px;
        height: 150px;
    }
    .info-flashlight.slon {
        bottom: 5px;
        left: 5px;
        background-size: 100% 100%;
        width: 70px;
        height: 100px;
    }
}