/* Базовые настройки */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    background: #000; 
    color: #FFF; 
    font-family: Tahoma, sans-serif; 
    line-height: 1.5; 
}

img { max-width: 100%; height: auto; display: block; }

a { color: #10a2c6; text-decoration: none; transition: 0.3s; }
a:hover { text-decoration:none; color: #8be4fb; }

/* Шапка */
.main-header {
    background: #111 url(../gfx/header_tile.png) repeat-x;
    padding: 0px 0;
    border-bottom: 1px solid #333;
	min-height: 235px; /* Можно добавить минимальную высоту, если шапка кажется узкой */
}



.header-container {
   background:url(../gfx/header_background.png) no-repeat left top;
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
	min-height: 235px; 
	position: relative; 
}
.logo {
    margin-top: 165px; /* Это останется для мобильной версии */
    z-index: 10;
}
.header-info b { font-size: 1em; color: #ddffff; top: 170px; left: 200px;}


.phone-link { 
    color: #ddffff !important; 
    text-decoration: none !important; /* Убирает подчеркивание сразу */
}

/* Состояние номера телефона при наведении */
.phone-link:hover {
    color: #8be4fb !important;      /* Меняем цвет на ваш */
    text-decoration: none !important; /* Гарантируем отсутствие подчеркивания */
}




/* Сетка сайта */
.main-wrapper {
    display: flex;
    flex-wrap: wrap; /* Позволяет колонкам перепрыгивать вниз */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 10px;
}

/* Контентная часть */
.data {
    flex: 1; 
    min-width: 320px;
    padding: 0 15px;
    order: 1; /* На мобильных контент будет ПЕРВЫМ */
}

/* Меню (левое и правое) */
.side-menu {
    width: 230px;
    padding: 15px;
    order: 2; /* На мобильных меню уйдет вниз */
}

.side-menu h3 {
    font-size: 16px;
    color: #8be4fb;
    margin-bottom: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.side-menu ul { list-style: none; }
.side-menu li { margin-bottom: 6px; }
.side-menu a {
    color: #8be4fb;
    font-size: 13px;
    display: block;
    padding: 2px 4px;
}
.side-menu a:hover {
    color: #000;
    background: #F9C;
    text-decoration: none;
}

/* Стили текстов */
h1 { font-size: 24px; color: #8be4fb; margin-bottom: 20px; }
h2 { font-size: 20px; color: #8be4fb; margin-bottom: 20px; }
h3 { font-size: 16px; color: #8be4fb; margin-bottom: 20px; }
p { text-align: justify; margin-bottom: 15px; }
.box { 
    border: 1px solid #FFF; 
    padding: 2px; 
    background: #222; 
    margin: 0 auto 5px; 
    transition: 0.3s;
}
.box:hover { border-color: #10a2c6; }

/* Адаптация ТАБЛИЦ с фотографиями */
table { width: 100% !important; border-collapse: collapse; margin-bottom: 20px; }
td { padding: 10px; text-align: center; vertical-align: top; font-size: 13px; }

/* МОБИЛЬНАЯ АДАПТАЦИЯ */
@media (max-width: 800px) {
    .data { padding: 0; }
    .side-menu { width: 100%; border-top: 1px solid #333; margin-top: 20px; }
    
    /* Делаем таблицы вертикальными */
    table, tr, td {
        display: block;
        width: 100% !important;
    }
    td { margin-bottom: 30px; }
}

/* ДЕСКТОП: Возвращаем 3 колонки (МенюЛ - Контент - МенюП) */
/* ДЕСКТОП: Точное позиционирование элементов */
@media (min-width: 1024px) {
    /* 1. Логотип: слева и ниже на 165px */
    .logo {
        position: absolute;
        left: 40px;  /* отступ слева */
        top: 165px;  
        margin-top: 0; 
    }

    /* 2. Номер телефона: посередине и ниже на 200px */
    .header-info {
        position: absolute;
        top: 210px;  /* от верха 200px */
        left: 50%;   /* ставим в центр по горизонтали */
        transform: translateX(-50%); /* идеальное центрирование */
        width: auto;
    }

    /* 3. Остальная сетка сайта (3 колонки) */
    .data { order: 2; }
    .side-menu.left-nav { order: 1; }
    .side-menu.right-nav { order: 3; }
    
    /* Отменяем флекс-центровку для контейнера на десктопе, чтобы абсолюты работали корректно */
    .header-container {
        display: block; 
    }
}

/* Футер */
.main-footer {
    background: #111;
    padding: 30px 20px;
    border-top: 1px solid #333;
    text-align: center;
    clear: both;
}