* { box-sizing: border-box; }
body {
    margin: 0; padding: 20px;
    font-family: 'IBM Plex Sans', sans-serif;
    background: linear-gradient(to bottom, #b8e8ff, #dcf4ff);
    min-height: 100vh;
}

.top-nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto 20px; }
.lang-switcher button { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; font-size: 10px; font-weight: bold; margin-left: 5px; background: #0084ff; color: white; }
.lang-switcher button.active { background: white; color: #0084ff; }

.company-card { background: white; max-width: 1200px; width: 100%; margin: 0 auto; border-radius: 50px; padding: 40px; position: relative; }

.card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.header-left { display: flex; align-items: center; }
.main-logo { max-height: 100px; margin-right: 20px; }
h1 { color: #013c71; font-size: 2.5em; margin: 0; }

/* Каспи: 10px от верха */
#kaspi-container { position: absolute; top: 10px; right: 40px; }
.kaspi-link { display: flex; align-items: center; text-decoration: underline; font-weight: bold; color: #013c71; font-size: 18px; }
.kaspi-link:hover { text-decoration: none; }
.kaspi-link img { width: 36px; height: 36px; margin-right: 10px; transition: transform 0.2s; }
.kaspi-link img:hover { transform: scale(1.1); }

.address-row { display: flex; align-items: center; margin: 20px 0; }
.address-row img { height: 28px; width: auto; }
#address-text { color: #013c71; text-decoration: underline; margin-left: 10px; font-size: 16pt; }
#address-text:hover { text-decoration: none; }

.content-grid { display: grid; grid-template-columns: 590px 1fr; gap: 30px; }

/* Слайдер */
.slider-container { width: 590px; height: 340px; position: relative; overflow: hidden; border-radius: 20px; }
.slider-track { display: flex; transition: transform 0.5s ease; height: 100%; cursor: grab; }
.slide { min-width: 590px; height: 340px; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.slider-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.dot { width: 34px; height: 34px; background: rgba(255,255,255,0.4); border-radius: 50%; cursor: pointer; }
.dot.active { border: 2px solid #fff; background: rgba(255,255,255,0.1); }

/* Контакты: 28pt Bold */
.contact-line { display: flex; align-items: left; margin-bottom: 10px; }
.contact-line span { font-size: 22pt; font-weight: bold; color: #013c71; margin-left: 0px; display: flex; align-items: left; }
.contact-line-main { display: flex; align-items: left; margin-top: 10px; }
.contact-line-main a { font-size: 22pt; font-weight: bold; color: #013c71; text-decoration: underline; margin-left: 10px; }
.contact-line-main a:hover { text-decoration: none; }

/* Иконки соцсетей: +10% при ховере */
.social-icons { display: flex; gap: 10px; margin-top: 20px; }
.social-icons img { width: 64px; height: 64px; transition: transform 0.2s; cursor: pointer; }
.social-icons img:hover { transform: scale(1.1); }
.social-mini { height: 28px; margin-left: 8px; margin-top: 3px; transition: transform 0.2s; }
.social-mini:hover { transform: scale(1.1); }

h2 { color: #013c71; font-size: 35pt; text-align: center; margin: 40px 0; }
.html-content { font-size: 18px; line-height: 1.6; color: #013c71; margin-bottom: 40px; }

.map-links { display: flex; gap: 30px; margin: 20px 0; }
.map-links a { display: flex; align-items: center; color: #013c71; font-size: 16pt; text-decoration: underline; }
.map-links a:hover { text-decoration: none; }
.map-links img { width: 28px; height: 28px; margin-right: 8px; transition: transform 0.2s; }
.map-links img:hover { transform: scale(1.1); }

.map-frame { width: 100%; margin: 20px 0; border-radius: 20px; overflow: hidden; }

/* Баблы */
.bubbles-container { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.bubble {
    background: #0085ff; color: #fff; padding: 7px 14px; /* Уменьшены паддинги */
    border-radius: 15px; cursor: pointer; transition: all 0.2s; font-size: 14px;
}
.bubble:hover { background: #dcf4ff; color: #0085ff; }

#page-footer { margin-top: 40px; text-align: center; }

/* Мобильная верстка (экраны до 768px) */
@media screen and (max-width: 768px) {
    body {
        padding: 10px;
    }

    .company-card {
        padding: 20px 15px;
        border-radius: 25px;
        display: flex;
        flex-direction: column;
    }

    /* Логический порядок блоков через flex-direction: column */
    .card-header, .content-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* 1. Каспи */
    #kaspi-container {
        position: static;
        order: 1;
        margin-bottom: 15px;
    }
    .kaspi-link { justify-content: center; }

    /* 2 & 3. Логотип и Название (h1) */
    .header-left {
        display: flex;
        flex-direction: column; /* Логотип сверху, название снизу */
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .main-logo {
        max-height: 80px;
        margin: 0 0 10px 0; /* Убираем правый отступ */
    }

    h1 {
        font-size: 20pt;
        line-height: 1.2;
        margin-bottom: 10px;
        word-break: break-word; /* Предотвращает вылет длинных слов за экран */
    }

    /* 4. Адрес */
    .address-row {
        justify-content: center;
        margin: 10px 0 20px;
    }
    #address-text { 
        font-size: 13pt; 
        text-align: center; 
    }

    /* 5. Слайдер с закруглениями */
    .slider-container {
        width: 100%;
        height: auto;
        aspect-ratio: 590 / 340;
        border-radius: 20px; /* Закругляем контейнер */
        overflow: hidden;
        margin-bottom: 20px;
    }
    
    .slide { 
        min-width: 100%; 
        height: 100%;
        object-fit: cover; /* Сохраняем пропорции картинки */
        border-radius: 20px; /* Закругляем сами изображения */
    }

    .dot {
        width: 24px;
        height: 24px;
    }

    /* Контакты: Выравнивание строго по левому краю */
    .phones-list { 
        display: flex; 
        flex-direction: column; 
        align-items: flex-start; /* Выравнивание списка по левому краю */
        width: 100%;
    }
    
    .contact-line {
        display: flex;
        flex-direction: column; /* Телефон сверху, мессенджеры снизу */
        align-items: flex-start;
        margin-bottom: 15px;
        width: 100%;
    }

    .contact-line span { 
        font-size: 18pt; 
        text-align: left;
        margin-bottom: 5px;
    }

    /* Ватсап и Телеграм одной строкой под номером */
    .contact-line-main {
        display: flex;
        flex-direction: row; /* Иконки строго в одну строку */
        align-items: center;
        justify-content: flex-start;
        margin-top: 5px;
    }

    .contact-line-main a {
        font-size: 16pt;
        margin-left: 0;
        margin-right: 15px; /* Отступ между иконками/ссылками */
    }

    /* Почта и Сайт по левому краю */
    #email-block, #website-block {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin-bottom: 12px;
    }
    
    #email-block a, #website-block a { 
        font-size: 15pt; 
        word-break: break-all;
    }

    /* Соцсети по левому краю */
    .social-icons {
        justify-content: flex-start;
        gap: 12px;
        margin-top: 15px;
        margin-bottom: 20px;
        width: 100%;
    }
    
    .social-icons img {
        width: 44px;
        height: 44px;
    }

    /* H2 и Контент */
    h2 {
        font-size: 18pt;
        margin: 25px 0 15px;
    }

    .html-content {
        font-size: 15px;
        text-align: left;
    }

    /* Карты */
    .map-links {
        justify-content: flex-start;
        gap: 15px;
        flex-wrap: wrap;
    }
    .map-links a { font-size: 12pt; }
    .map-links img { width: 22px; height: 22px; }

    .map-frame {
        height: 250px;
        margin: 15px 0;
    }

    /* Баблы */
    .bubbles-container { 
        justify-content: flex-start; 
    }
}