/* 1. Основни настройки за цялата страница */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
}
.site-header {
    text-align: center; /* Центрира съдържанието хоризонтално */
    padding: 15px 0;    /* Добавя малко разстояние отгоре и отдолу */
    width: 100%;
}
.site-header {
    display: flex;
    justify-content: center; /* Центрира логото хоризонтално */
    width: 100%;
    padding: 15px 0;
}

#logo {
    width: 100px;
    height: auto;
}
/* Настройки за самото лого */
#logo {
    width: 100px;       /* Желаната ширина */
    height: auto;       /* Запазва пропорциите */
    display: inline-block; /* Позволява центрирането с text-align */
    margin: 0 auto;     /* Допълнителна гаранция за центриране */
}
/* 2. Настройки за Header (Шапката) */
.site-header {
    background-color: #ffffff;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}

/* 3. Настройки за Логото (Гарантира, че снимката ще се появи правилно) */
.logo-link {
    display: inline-block;
    text-decoration: none;
}

#logo {
    display: block;
    max-width: 180px;  /* Максимална ширина на логото */
    height: auto;      /* Автоматично запазва пропорциите */
    object-fit: contain;
}
.route-image {
    width: 140px;        /* Ширина на правоъгълника */
    height: 105px;       /* Височина на правоъгълника */
    flex-shrink: 0;      /* Забранява смачкване на снимката */
    border-radius: 8px;  /* Заоблени ъгли */
    overflow: hidden;
}

/* Настройки за самата снимка вътре */
.route-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Вписва и изрязва снимката перфектно, без да я разтяга */
    display: block;
}

/* Адаптация за мобилни устройства */
@media (max-width: 650px) {
    .route-image {
        width: 100%;     /* На телефон снимката заема цялата ширина */
        height: 180px;   /* По-висока снимка за по-добър изглед */
    }
}
.winter-route-card {
    display: flex;
    align-items: center;
    gap: 20px;            /* Разстояние между снимката, текста и бутона */
    position: relative;   /* Нулира грешни абсолютни позиционирания */
}

/* Настройка за снимката */
.route-image {
    width: 140px;         /* Фиксирана ширина */
    height: 105px;        /* Фиксирана височина */
    flex-shrink: 0;       /* Задължително: не позволява на текста да избутва снимката */
    position: relative;   /* Започва нормално подреждане в flexbox */
}

.route-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}