/* Нулиране на излишните разстояния */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Центриране на целия контейнер на екрана */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* Основен контейнер - заковава всичко по средата хоризонтално */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;      /* Държи децата си в центъра */
    justify-content: center;
    text-align: center;       /* Гарантира центриран текст */
    max-width: 600px;         /* Оптимална ширина за този тип дизайн */
    width: 100%;
}

/* Лого - винаги центрирано */
.logo-area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;      /* Разстояние под логото */
}

.logo-img {
    height: auto;
    max-height: 100px;
    width: 100%;
}

/* Картинка - винаги центрирана */
.illustration {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;      /* Разстояние под картинката */
}

.main-img {
    max-width: 100%;          /* Смалява се автоматично на телефон, без да се чупи */
    height: auto;
    display: block;
}

/* Текстова зона - фиксирана в средата */
.content-area {
    width: 100%;
    text-align: center;       /* Държи редовете текст в средата */
    padding: 0 10px;
}

.main-text {
    font-size: 1.25rem;       /* Размер за компютър */
    color: #555555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.sub-text {
    font-size: 1.05rem;       /* Размер за компютър */
    font-weight: bold;
    color: #222222;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Контролирано и плавно смаляване само за мобилни телефони */
@media (max-width: 480px) {
    .main-text {
        font-size: 1.1rem;    /* Остава напълно четлив, без да става твърде малък */
    }
    
    .sub-text {
        font-size: 0.95rem;
    }
    .container {
        margin-top: -100px;
    }
}