include 'header.php';
?>


   <style>
        #orderConfirmation {
            display: none;
            position: absolute;
            top: 10%;
            right: 10%;
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border-radius: 5px;
        }
       .col-md-12.text-right {
    text-align: right; /* Sağ tarafa hizalama */
    transform: translateX(-20px); /* 1 cm'ye yakın sola kaydırma */
}

/* Booking form üçün xüsusi stil */
.booking-form-group {
    margin-bottom: 20px;
}

/* Etiketlər */
.booking-label {
    font-size: 14px;
    color: #fff;
    margin-bottom: 8px;
    display: inline-block;
}

/* İstifadəçi daxil etməsi üçün input elementləri */
.booking-input {
    width: 100%;
    padding: 10px;
    border: 2px solid #ffcc00;  /* Qəhrəngli sərhəd */
    border-radius: 8px;  /* Yuvarlaq künclər */
    background-color: #1e1e1e;  /* Qaranlıq fon */
    color: #fff;  /* Yazı ağ rəngdə */
    font-size: 14px;
    margin-bottom: 15px;
}

/* Focus effekti */
.booking-input:focus {
    border-color: #ff6600;  /* Fokusda sərhəd rəngi dəyişir */
    background-color: #333;  /* Fokusda fon rəngi */
    outline: none;
}

/* Göndərmə düyməsi */
.booking-submit-button {
    width: 100%;
    background-color: #ffcc00;
    color: #1e1e1e;
    border: none;
    padding: 15px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover effekti */
.booking-submit-button:hover {
    background-color: #ff6600;
}


.page-list-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    font-size: 20px;
}

.page-list-text {
    display: inline-block;
    vertical-align: middle;
}

.price-info {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}

.price-info strong {
    font-size: 16px;
    color: #000;
}
.mini-icon {
    width: 30px; /* İstədiyiniz ölçüyü bura daxil edin */
    height: 30px;
    object-fit: contain;
}
/* Əsas konteyner */
.exchange-container {
    background: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
    max-width: 1800px; /* Genişlik */
    width: 100%;
    margin: 20px 0; /* Solda sıfır edirəm, yuxarıdan boşluq saxlayıram */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* Sol tərəfə yapışdırır */
    color: white;
}

/* Valyuta sətri */
.currency-row {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start; /* Solda qalması üçün */
    align-items: center;
}

/* Input və Select-lər */
.currency-col {
    flex: 1;
    min-width: 100px;
}

.currency-input, 
.currency-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 4px;
    background: #333;
    color: white;
    font-size: 16px;
}

/* Nəticə bölməsi */
.result-container {
    background: #444;
    padding: 10px;
    border-radius: 4px;
    width: 180px;
    text-align: center;
    font-size: 14px;
}

/* Mobil uyğunlaşma */
@media (max-width: 768px) {
    .exchange-container {
        flex-direction: column;
        align-items: flex-start; /* Mobil üçün də sola yapışdırır */
    }
    .currency-row {
        flex-direction: column;
        width: 100%;
    }
    .result-container {
        width: 100%;
        text-align: left; /* Solda qalsın */
    }
}
/* Şəkillərin görünüşü */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.image-item {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.image-item img {
    max-width: 100%;
    height: 150px;
    object-fit: cover;
    cursor: pointer; /* Şəkil üzərinə tıkladıqda kursoru göstər */
}

/* Modal Tərtibatı */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    position: relative;
}

/* "X" Bağlama Düyməsi */
.close {
    position: absolute;
    top: 25px; /* Şəkilə yaxınlaşdırıldı */
    right: 270px; /* Şəkilə yaxınlaşdırıldı */
    color: white;
    font-size: 40px; /* Ölçü bir az azaldıldı */
    font-weight: bold;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.7); /* Arxa fon yarı şəffaf */
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Daha aydın görünməsi üçün kölgə əlavə edildi */
}

.close:hover,
.close:focus {
    color: #f44336; /* Üstünə gəldikdə rəngi dəyişir */
    text-decoration: none;
    cursor: pointer;
}

/* Mobil Uyğunluq */
@media (max-width: 768px) {
    .modal-content {
        width: 95%; /* Mobil ekranlarda daha uyğun ölçü */
    }

    .close {
        font-size: 20px; /* Kiçik ekranda "X" düyməsinin ölçüsü kiçilir */
        top: -8px; /* Mobil üçün daha yaxınlaşdırıldı */
        right: -8px; /* Mobil üçün daha yaxınlaşdırıldı */
    }
}


    </style>
<div class="col-md-12 text-right">
    <div class="butn-dark mt-15 mb-30">
        <a href="javascript:void(0);" onclick="openBookingForm()" class="btn-booking">
          
          <div class="butn-dark"> <span>
                Забронировать</span> 
            </div>
        </a> <br><br><br><br>
      <div class="page-list-icon" style="font-size: 35px;"> <span class="ti-check"></span> </div>
<span style="font-size: 35px; font-weight: bold;">Цена: <strong style="font-size: 35px; color: greem;"> </strong>AZN</span>

</div><span style="font-size: 15px; font-weight: bold; color: yellow; background-color: black;">Медицинская процедура не включена в стоимость, если забронировать менее чем за неделю.</span>
<br>

<span style="font-size: 15px; font-weight: bold;">Для компаний, скидок и т. д. нажмите "Забронировать"</span>

<div id="bookingForm" style="display:none;">
            <p></p>
    </div>
<script>
// Çox sadə funksiya - artıq tam URL alırıq
function openImageModal(fullImageUrl) {
    var modal = document.getElementById("myModal");
    var modalImg = document.getElementById("modalImage");
    
    // Debug üçün konsola yazırıq
    console.log("Modal şəkil URL: " + fullImageUrl);
    
    modal.style.display = "block";
    modalImg.src = fullImageUrl;
}

function closeModal() {
    var modal = document.getElementById("myModal");
    modal.style.display = "none";
}
</script>
    <div class="exchange-container">
      
       
        <div class="currency-row">
            <div class="currency-col">  
         
                <input type="number" id="amount" class="currency-input" value="1">
              
                <select id="fromCurrency" class="currency-select">
                    <option value="USD">🇺🇸 USD</option>
                    <option value="EUR">🇪🇺 EUR</option>
                    <option value="AZN">🇦🇿 AZN</option>
 <option value="RUB">🇷🇺 RUB</option>
                    <option value="TRY">🇹🇷 TRY</option>
                    <option value="GBP">🇬🇧 GBP</option>
                </select>
          
            <div class="currency-col">
             
                <select id="toCurrency" class="currency-select">
                    <option value="AZN">🇦🇿 AZN</option>
                    <option value="USD">🇺🇸 USD</option>
                    <option value="EUR">🇪🇺 EUR</option>
                     <option value="RUB">🇷🇺 RUB</option>
                    <option value="TRY">🇹🇷 TRY</option>
                    <option value="GBP">🇬🇧 GBP</option>
                </select>
            </div>
        </div>

        <div class="result-container">
            <div class="result-label"></div>
            <div id="resultAmount" class="result-amount">
                1 USD = 1.7 AZN
            </div>
            <div id="rateInfo" class="rate-info">
                1 USD = 1.7000 AZN
            </div>
        </div>
    </div>
</div>     </div>     </div>     </div>     </div>
<script>
    // JavaScript ilə formu açmaq üçün funksiya
    function openBookingForm() {
        document.getElementById('bookingForm').style.display = 'block'; // Formu göstər
    }

    // Rezervasiya formunun uğurla göndərildikdən sonra mesajı göstərmək

</script><script>
    // JavaScript ilə formu açmaq üçün funksiya
    function openBookingForm() {
        document.getElementById('bookingForm').style.display = 'block';
    }

    // Sifariş uğurlu mesajını göstərmək və 3 saniyə sonra gizlətmək
    function showOrderConfirmation() {
        const confirmationMessage = document.getElementById('orderConfirmation');
        confirmationMessage.style.display = 'block'; // Mesajı göstər

        // 3 saniyə sonra gizlət
        setTimeout(() => {
            confirmationMessage.style.display = 'none';
        }, 3000);
    }
</script>
  <!-- Содержание номеров -->
<section class="rooms-page section-padding" data-scroll-index="1">
    <div class="container">
        <!-- содержание проекта -->
        <div class="row">
            <div class="col-md-12">
                <center>
                    <span>
                        <i class="star-rating"></i>
                        <i class="star-rating"></i>
                        <i class="star-rating"></i>
                        <i class="star-rating"></i>
                        <i class="star-rating"></i>
                    </span>
                </center>
                <div class="section-title">
                    <center>Карван Отель Нафталан</center>
                </div>
                <br><br><br>
                <div class="section-subtitle">О КАРВАН ОТЕЛЬ НАФТАЛАН</div>
            </div>
            <div class="col-md-8">
                <p class="mb-30">
                    С 2022 года работающий, этот современный 5‑звёздочный отель расположен на участке площадью 1,65 гектара в прекрасной природе Нафталана. Отель на 161 место включает 68 номеров. Варианты номеров: Эконом, Стандарт, Deluxe, Karvan Lux и Kottec. Каждый номер оборудован с учетом комфорта и потребностей гостей.
                </p>
                <p>
                    Санаторий – Здоровье и лечебные услуги  
                    Отель предлагает в сфере здравоохранения и лечения услуги, оснащенные современным медицинским оборудованием. Гости могут воспользоваться разнообразными лечебными процедурами для восстановления как физического, так и психического здоровья. Эти услуги включают:
                </p>
                <p>Обследования и анализы:</p>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="list-unstyled page-list mb-30">
                            <li>
                                <div class="page-list-icon">
                                    <img src="img/icons/hekim.png" alt="sm" class="mini-icon">
                                </div>
                                <div class="page-list-text">
                                    Обследования терапевта, кардиолога, уролога и гинеколога
                                </div>
                            </li>
                            <li>
                                <div class="page-list-icon">
                                    <img src="img/icons/hekim.png" alt="sm" class="mini-icon">
                                </div>
                                <div class="page-list-text">
                                    Общий анализ крови
                                </div>
                            </li>
                            <li>
                                <div class="page-list-icon">
                                    <img src="img/icons/hekim.png" alt="sm" class="mini-icon">
                                </div>
                                <div class="page-list-text">
                                    Анализ уровня сахара в крови
                                </div>
                            </li> 
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="list-unstyled page-list mb-30">
                            <li>
                                <div class="page-list-icon">
                                    <img src="img/icons/hekim.png" alt="sm" class="mini-icon">
                                </div>
                                <div class="page-list-text">
                                    Анализ мочи
                                </div>
                            </li>
                            <li>
                                <div class="page-list-icon">
                                    <img src="img/icons/hekim.png" alt="sm" class="mini-icon">
                                </div>
                                <div class="page-list-text">
                                    Анализы на гепатит B и C
                                </div>
                            </li>
                            <li>
                                <div class="page-list-icon">
                                    <img src="img/icons/hekim.png" alt="sm" class="mini-icon">
                                </div>
                                <div class="page-list-text">
                                    Определение ревматизма
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-8">
                        <p class="mb-30"></p>
                        <p class="mb-30">
                            <h6>Лечебные процедуры:</h6>
                        </p>
                        <p>• Нафталановые ванны.</p>
                        <p>• Электрофорез и фонопорез.</p>
                        <p>• Амплипульс и дарсонвал.</p>
                        <p>• Солюкс и световая ванна.</p>
                        <p>• Йод-бромовые ванны.</p>
                        <p>• Магнитотерапия.</p>
                        <p>• Массаж с применением мануальной, лимфодренажной и биомассажной техник.</p>
                        <p>• Лазерная терапия.</p>
                    </div>
                    <div class="col-md-12">
                        <h6>Физическая активность и развлечения:</h6>
                        <p>
                            Отель также предлагает широкий спектр возможностей, поддерживающих здоровый образ жизни. Гости могут пользоваться открытыми и закрытыми спортивными залами, плавать в бассейне, а также отдохнуть в кофейне.
                        </p>
                    </div>          
                    <div class="col-md-12">
                        <p>
                            Ванная комната и лечебные кабинеты:  
                            Ванная комната и лечебные кабинеты дополняют лечебную атмосферу отеля и создают условия для релаксации гостей.
                        </p>
                    </div>
                    <div class="col-md-12">
                        <h6>Дополнительные исследования:</h6>
                        <p>
                            • Современные спа и оздоровительные центры известны по всему миру благодаря растущему интересу к натуральным методам лечения. Здесь используются такие методы, как магнитотерапия, лазерная терапия и биомассаж, которые помогают восстановить как физическое, так и психическое здоровье. Физиотерапевтические процедуры, такие как электрофорез и фонопорез, способствуют эффективному проникновению лекарственных средств и лечебных веществ через кожу.
                        </p>
                        <p>
                            Натуральные методы лечения и спа-процедуры пользуются популярностью как среди местных, так и иностранных туристов, поскольку они улучшают общее состояние здоровья и снижают стресс.
                        </p>
                        <p>
                            Кроме того, современные спортивные и развлекательные объекты предлагают гостям широкие возможности для поддержания здорового образа жизни.
                        </p>
                        <p>
                            Услуги и лечебные методы отеля соответствуют самым высоким стандартам комфорта и здоровья.
                        </p>
                        <p>
                            - В течение проживания вы можете пользоваться открытым и закрытым спортзалом.
                        </p>
                        <p>
                            - Для детей предусмотрена открытая игровая площадка.
                        </p>
                        <p>
                            - Не забудьте хранить ценные вещи, документы и деньги в сейфе.
                        </p>
                        <p>
                            - Иностранным гражданам, прибывшим в Азербайджан, рекомендуется обратиться в регистратуру для оформления, если пребывание превышает 10 дней. Гости, не прошедшие регистрацию, могут быть оштрафованы.
                        </p>
                        <p>
                            Время заезда: 14:00
                        </p>
                        <p>
                            Время выезда: 12:00
                        </p>
                        <p>
                            Отмена бронирования:
                        </p>
                        <p>
                            Гости могут отменить бронирование за 24 часа до даты заезда.
                        </p>
                        <p>
                            Режим работы лечебного центра:
                        </p>
                        <p>
                            Понедельник - Суббота
                        </p>
                        <p>
                            08:00 - 17:00
                        </p>
                        <p>
                            Время приема пищи:
                        </p>
                        <p>
                            Завтрак: 08:00 - 09:00
                        </p>
                        <p>
                            Обед: 13:00 - 14:00
                        </p>
                        <p>
                            Ужин: 18:00 - 19:00
                        </p>
                        <p>
                            Проживание с домашними животными:
                        </p>
                        <p>
                            Проживание с домашними животными запрещено.
                        </p>
                        <p>
                            Питание:
                        </p>
                        <p>
                            Стоимость номера включает завтрак (шведский стол), обед (шведский стол) и ужин (шведский стол).
                        </p>
                    </div>
                    <div class="col-md-12">
                        <p>
                            Для эффективного лечения в санатории рекомендуется программа минимум на 14 дней, однако минимальный срок проживания составляет 7 ночей. Предоплата не требуется – оплата производится после регистрации при бронировании.
                        </p>
                    </div>   
                    <div class="col-md-12">
                        <p>
                            Возможности для отдыха и развлечений  
                            В санатории предусмотрены широкие возможности не только для лечения, но и для приятного отдыха:
                        </p>
                        <p>• Спортзал.</p>
                        <p>• Библиотека.</p>
                        <p>• Бильярд и настольные игры.</p>
                        <p>• Комната для компьютерных игр.</p>
                    </div>    
                    <div class="col-md-12">
                        <p>
                            Кроме того, за дополнительную плату организуются экскурсионные туры в близлежащие города и достопримечательности, а также вечерние танцевальные программы.  
                            Согласно исследованиям:
                            Нафталановое масло – уникальное лечебное средство, не имеющее аналогов в мире, используется на протяжении веков для лечения различных заболеваний. Современные исследования показывают, что терапия нафталаном обладает высокой эффективностью при заболеваниях суставов, кожи и нервной системы. Лечебные программы санатория проводятся в соответствии с международными стандартами и направлены на восстановление здоровья пациентов.
                        </p>
                        <p>
                            Свяжитесь с нами для получения дополнительной информации о санатории и бронирования, посетив наш сайт или обратившись напрямую к нам.
                            Möcüzəli Naftalan – натуральный выбор для вашего здоровья!
                        </p>
                    
                </div></div></div>
         <div class="col-md-3 offset-md-1">
    <ul class="list-unstyled page-list mb-30">
        <li>
            <div class="page-list-icon"> <span class="flaticon-group"></span> </div>
            <div class="page-list-text">
                <p>1+ человек</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon"> <span class="flaticon-wifi"></span> </div>
            <div class="page-list-text">
                <p>Wi-Fi</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon"> <span class="flaticon-clock-1"></span> </div>
            <div class="page-list-text">
                <p>35,67 км²</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon"> <span class="flaticon-breakfast"></span> </div>
            <div class="page-list-text">
                <p>Трехразовое питание</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon"> <span class="flaticon-home"></span> </div>
            <div class="page-list-text">
                <p>Просторные номера</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/dush.png" alt="Душ" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Душ</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/elektrik.png" alt="Электрический чайник" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Электрический чайник</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/eyvan.png" alt="Эйван" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Эйван</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/fen.png" alt="Фен" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Фен</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/fizioterapiya.png" alt="Физиотерапия" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Физиотерапия</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/gence.png" alt="Трансфер из Гянджи в санаторий" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Трансфер из Гянджи в санаторий</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/geyim.png" alt="Сушка одежды" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Сушка одежды на вешалке</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/vanna.png" alt="Гейимлер" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Нафталановые ванны</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/kodn.png" alt="Кондиционер, Холодильник" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Кондиционер, Холодильник</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/masaj.png" alt="Массаж" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Массаж</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/parafin.png" alt="Парафин" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Парафин</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/sampun.png" alt="Шампунь" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Шампунь</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/skhaf.png" alt="Шкаф" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Шкаф</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/televizor.png" alt="Телевизор" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Телевизор</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/qan.png" alt="Общий анализ крови и мочи, ЭКГ" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Общий анализ крови и мочи, ЭКГ</p>
            </div>
        </li>
        <li>
            <div class="page-list-icon">
                <img src="img/icons/rozetka.png" alt="Розетка рядом с кроватью" class="mini-icon">
            </div>
            <div class="page-list-text">
                <p>Розетка рядом с кроватью</p>
            </div>
        </li>
    </ul>
</div>

<style>body {
    background-color: #1a1a1a; /* Səhifənin fon rəngi */
    color: white; /* Mətn rəngi ağ */
    font-family: Arial, sans-serif; /* Mətn şrift tipi */
    margin: 0; /* Kənar boşluqların sıfırlanması */
    padding: 20px; /* Ümumi səhifə boşluğu */
}

.room-section {
    border-bottom: 1px solid gold; /* Alt sərhəd xətti qızıl rəng */
    padding: 20px 0; /* Üstdən və altdan boşluq */
    margin-bottom: 20px; /* Alt kənar boşluğu */
}

.room-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}


.capacity-icons {
    margin-left: 15px; /* Soldan boşluq */
}

.capacity-icon {
    width: 20px; /* Genişlik */
    height: 20px; /* Hündürlük */
    margin-right: 5px; /* Sağdan boşluq */
}

.room-title-button {
    background-color: #d97706; /* Narıncı fon rəngi */
    color: white; /* Ağ mətn rəngi */
    font-size: 20px; /* Mətn ölçüsü */
    font-family: Arial, sans-serif; /* Şrift tipi */
    padding: 10px 20px; /* Yuxarı və alt boşluq, sağ və sol boşluq */
    border: none; /* Sərhədin silinməsi */
    border-radius: 8px; /* Künclərin yuvarlanması */
    display: flex; /* Flex düzülüşü */
    align-items: center; /* Mərkəzləşdirmə */
    cursor: pointer; /* Maus göstərən işarə dəyişir */
    transition: background-color 0.3s; /* Fon rəngi keçidi */
}

.room-title-button:hover {
    background-color: #f39c12; /* Hover zamanı fon rənginin dəyişməsi */
}

.capacity-icons {
    margin-left: 15px; /* Sol tərəfdən boşluq */
}

.capacity-icon {
    font-size: 20px; /* Simvol ölçüsü */
}

.room-content {
    display: flex; /* Yan-yana düzülüş */
    justify-content: space-between; /* Elementlər arasında bərabər boşluq */
}

.amenities {
    width: 50%; /* Genişlik (yarım genişlik) */
}

.amenity {
    display: flex; /* İçi dolu elementlər üçün fleks düzülüş */
    align-items: center; /* Şaquli düzləşdirmə */
    margin-bottom: 10px; /* Aşağı boşluq */
}

.check-icon {
    color: gold; /* Simvol rəngi (qızıl) */
    margin-right: 10px; /* Sağdan boşluq */
}

.image-grid {
    width: 100%; /* Grid-in ümumi genişliyi */
    display: grid; /* Şəbəkə düzülüşü */
    grid-template-columns: repeat(3, 1fr); /* 3 sütunlu grid */
    gap: 10px; /* Şəbəkə elementləri arasındakı boşluq */
}

.image-box {
    background-color: white; /* Ağ fon rəngi */
    aspect-ratio: 1; /* Şəkil qutularını kvadrat etmək üçün */
    display: flex; /* İçi dolu elementlər üçün fleks düzülüş */
    align-items: center; /* Şaquli mərkəzləşdirmə */
    justify-content: center; /* Üfüqi mərkəzləşdirmə */
    color: #666; /* Mətn rəngi (tünd boz) */
    cursor: pointer; /* Maus üzərinə gəldikdə göstərici dəyişir */
    transition: opacity 0.3s; /* Şəffaflıq dəyişməsində keçid */
    overflow: hidden; /* Şəkil çərçivədən kənara çıxmasın */
}

.image-box img {
    width: 100%; /* Şəkil qutunun tam genişliyini tutsun */
    height: 100%; /* Şəkil qutunun tam hündürlüyünü tutsun */
    object-fit: cover; /* Şəkilin düzgün ölçüdə göstərilməsi */
}

.image-box:hover {
    opacity: 0.8; /* Hover zamanı şəffaflıq effekti */
}

.footer-section {
    margin-top: 30px; /* Üstdən boşluq */
    padding-top: 20px; /* Yuxarı boşluq (içəridən) */
    border-top: 1px solid gold; /* Üst sərhəd xətti qızıl */
    display: flex; /* Yan-yana düzülüş */
    justify-content: space-between; /* Elementlər arasında boşluq */
    align-items: center; /* Şaquli düzləşdirmə */
}

.comments {
    text-align: center; /* Mətn mərkəzləşdirilməsi */
    margin-top: 30px; /* Üstdən boşluq */
    padding-top: 20px; /* Yuxarı boşluq (içəridən) */
    border-top: 1px solid gold; /* Üst sərhəd xətti */
}

.main-footer {
    text-align: center; /* Mətn mərkəzləşdirilməsi */
    margin-top: 30px; /* Üstdən boşluq */
    padding-top: 20px; /* Yuxarı boşluq (içəridən) */
    border-top: 1px solid gold; /* Üst sərhəd xətti */
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Tam ekran qaranlıq fon */
    display: none; /* Başlanğıcda gizlidir */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    position: relative;
}

.popup-content img {
    max-width: 90%;
    max-height: 90vh;
}

.popup-content .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.carousel-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-top: 2px solid rgba(255, 215, 0, 0.5);
    border-bottom: 2px solid rgba(255, 215, 0, 0.5);
    padding: 10px 0;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    cursor: grab;
    width: 100%;
}

.carousel img {
    width: calc(100% / 3);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.carousel img:hover {
    transform: scale(1.1);
}

.carousell-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-top: 2px solid rgba(255, 215, 0, 0.5);
    border-bottom: 2px solid rgba(255, 215, 0, 0.5);
    padding: 10px 0;
}
.carousell {
    display: flex;
    transition: transform 0.5s ease-in-out;
    cursor: grab;
    width: 100%;
}

.carousell img {
    width: calc(100% / 3);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.carousell img:hover {
    transform: scale(1.1);
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.arrow.left {
    left: 10px;
}

.arrow.right {
    right: 10px;
}

.arrow:focus {
    outline: none;
}

.price-tag {
    background-color: #d97706;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 20px;
}
/* Mobil üçün tərtibat */
@media (max-width: 768px) {
    .image-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
 .price-tag {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .image-box {
        width: calc(50% - 10px); /* Şəkillərin eni 50% */
        height: 200px; /* Şəkillərin hündürlüyü */
    }

    .carousel img {
        width: calc(100% / 2); /* Mobil versiyada şəkillərin eni */
    }

    .carousel {
        display: flex;
        flex-wrap: nowrap;
    }

    .carousel-container {
        padding: 0 10px;
    }

    .room-content {
        display: block; /* Mobil versiyada otaq məlumatları bir-birinin altına düşsün */
    }

    .amenities {
        width: 100%;
    }

    .room-title {
        flex-direction: column;
        gap: 10px;
    }

    .room-title-button {
        font-size: 14px;
        padding: 8px 12px;
        width: 100%;
        justify-content: center;
    }

    .capacity-icons {
        margin-left: 8px;
    }

    .capacity-icon {
        font-size: 14px;
    }

    .price-tag {
        margin-left: 0;
        width: 100%;
        text-align: center;
        font-size: 16px;
        padding: 8px 12px;
    }

    .amenities {
        padding: 0 10px;
    }

    .amenity {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .check-icon {
        margin-right: 8px;
    }

    .image-grid {
        padding: 0 10px;
    }
}

/* Daha kiçik ekranlar üçün əlavə optimizasiya */
@media (max-width: 480px) {
    .room-title-button {
        font-size: 12px;
        padding: 6px 10px;
    }

    .capacity-icon {
        font-size: 12px;
    }

    .price-tag {
        font-size: 14px;
        padding: 6px 10px;
    }

    .amenity {
        font-size: 12px;
    }
}
    .popup-content img {
        width: 100%;
        height: auto;
    }
}

</style>

</head>
<body>

<div class="carousel-container">
    <button id="carousel-left" class="arrow left">&#10094;</button>
    <div class="carousel" id="carousel">
        <img src="img/karvan/12.jpg" alt="2" onclick="zoomImage(this)">
           <img src="img/karvan/13.jpg" alt="2" onclick="zoomImage(this)">
        <img src="img/karvan/1.jpg" alt="K1" onclick="zoomImage(this)">
        <img src="img/karvan/2.jpg" alt="2" onclick="zoomImage(this)">
        <img src="img/karvan/3.jpg" alt="Kez 3" onclick="zoomImage(this)">
        <img src="img/karvan/4.jpg" alt="K1" onclick="zoomImage(this)">
        <img src="img/karvan/5.jpg" alt="2" onclick="zoomImage(this)">
       <img src="img/karvan/6.jpg" alt="2" onclick="zoomImage(this)">
       <img src="img/karvan/7.jpg" alt="2" onclick="zoomImage(this)">
       <img src="img/karvan/8.jpg" alt="2" onclick="zoomImage(this)">
       <img src="img/karvan/9.jpg" alt="2" onclick="zoomImage(this)">
       <img src="img/karvan/10.jpg" alt="2" onclick="zoomImage(this)">
       <img src="img/karvan/11.jpg" alt="2" onclick="zoomImage(this)">
        
    </div>
    <button id="carousel-right" class="arrow right">&#10095;</button>
</div>
<div class="room-section">
    <div class="room-title">
        <button class="room-title-button">
            Экономный номер
            <div class="capacity-icons">
            
            </div>
        </button>
    </div>
    <div class="room-content">
        <div class="amenities">
            <div class="amenity">
                <span class="check-icon">✓</span>
                20 комнат - 20 м²
            </div>
            <div class="amenity">
                <span class="check-icon">✓</span>
                Дети до 11 лет — возможно без отдельного места для сна.
            </div>
        </div>
        <div class="amenities">
            <div class="amenity">
                <span class="check-icon">✓</span>
                Видео/аудио: телевизор, плоский экран, спутниковое телевидение, цифровое ТВ;
                Интернет/телефония: Wi-Fi;
                Электроника: фен, мини-холодильник, международная розетка;
                Ванная комната: душ, мыло, санузел, тапочки, туалетные принадлежности, банные полотенца, унитаз, банные аксессуары, халаты, душевой кабина;
                Вид из окна: вид на сад, горы;
                Кровати: три односпальные кровати;
                Мебель: кресло, вешалки, шкаф для одежды, столики у кровати, стол, зеркало;
                Другие услуги: номера для некурящих, уборка номера, чайный набор.
            </div>
        </div>
        <div class="image-grid">
            <div class="image-box" onclick="openPopup('img/karvan/exe1.jpg')">
                <img src="img/karvan/exe1.jpg" alt="Изображение 1">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/exe2.jpg')">
                <img src="img/karvan/exe2.jpg" alt="Изображение 2">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/ex31.jpg')">
                <img src="img/karvan/exe3.jpg" alt="Изображение 3">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/exe4.jpg')">
                <img src="img/karvan/exe4.jpg" alt="Изображение 4">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/exe5.jpg')">
                <img src="img/karvan/exe5.jpg" alt="Изображение 5">
            </div>
        </div>
    </div>
</div>

<!-- Второй номер -->
<div class="room-section">
    <div class="room-title">
        <button class="room-title-button">
            Стандартный номер с балконом и 3 отдельными кроватями
            <div class="capacity-icons">
            </div>
        </button>
    </div>

    <div class="room-content">
        <div class="amenities">
            <div class="amenity">
                <span class="check-icon">✓</span>
                24 м²
            </div>
            <div class="amenity">
                <span class="check-icon">✓</span>
                Дети до 11 лет — возможно без отдельного места для сна.
            </div>
        </div>
        <div class="amenities">
            <div class="amenity">
                Видео/аудио: телевизор, плоский экран, спутниковое телевидение, цифровое ТВ;
                Интернет/телефония: Wi-Fi;
                Электроника: фен, мини-холодильник, международная розетка;
                Ванная комната: душ, мыло, санузел, тапочки, туалетные принадлежности, банные полотенца, унитаз, банные аксессуары, халаты, душевой кабина;
                Вид из окна: вид на сад, горы;
                Кровати: три односпальные кровати;
                Мебель: кресло, вешалки, шкаф для одежды, столики у кровати, стол, зеркало;
                Другие услуги: номера для некурящих, уборка номера, чайный набор.
            </div>
        </div>
        <div class="image-grid">
            <div class="image-box" onclick="openPopup('img/karvan/jun1.jpg')">
                <img src="img/karvan/jun1.jpg" alt="Изображение 1">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/jun2.jpg')">
                <img src="img/karvan/jun2.jpg" alt="Изображение 2">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/jun3.jpg')">
                <img src="img/karvan/jun3.jpg" alt="Изображение 3">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/jun4.jpg')">
                <img src="img/karvan/jun4.jpg" alt="Изображение 4">
            </div>
        </div>
    </div>
</div>
<!-- 3-й номер -->
<div class="room-section">
    <div class="room-title">
        <button class="room-title-button">Коттедж
            <div class="capacity-icons">
            </div>
        </button>
    </div>

    <div class="room-content">
        <div class="amenities">
            <div class="amenity">
                <span class="check-icon">✓</span>
                25 м²
            </div>
            <div class="amenity">
                <span class="check-icon">✓</span>
                Дети до 11 лет — возможно без отдельного места для сна.
            </div>
        </div>
        <div class="amenities">
            <div class="amenity">
                Видео/аудио: телевизор, плоский экран, спутниковое телевидение, цифровое ТВ;
                Интернет/телефония: Wi-Fi;
                Электроника: фен, мини-холодильник, международная розетка;
                Ванная комната: душ, мыло, санузел, тапочки, туалетные принадлежности, банные полотенца, унитаз, банные аксессуары, халаты, душевой кабина;
                Вид из окна: вид на сад, горы;
                Кровати: три односпальные кровати;
                Мебель: кресло, вешалки, шкаф для одежды, столики у кровати, стол, зеркало;
                Другие услуги: номера для некурящих, уборка номера, чайный набор.
            </div>
        </div>
        <div class="image-grid">
            <div class="image-box" onclick="openPopup('img/karvan/kar1.jpg')">
                <img src="img/karvan/kar1.jpg" alt="Изображение 1">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/kar2.jpg')">
                <img src="img/karvan/kar2.jpg" alt="Изображение 2">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/kar3.jpg')">
                <img src="img/karvan/kar3.jpg" alt="Изображение 3">
            </div>
        </div>
    </div>
</div>

<!-- 4-й номер -->
<div class="room-section">
    <div class="room-title">
        <button class="room-title-button">Делюкс номер с одной большой кроватью и балконом
            <div class="capacity-icons">
            </div>
        </button>
    </div>

    <div class="room-content">
        <div class="amenities">
            <div class="amenity">
                <span class="check-icon">✓</span>
                25 м²
            </div>
            <div class="amenity">
                <span class="check-icon">✓</span>
                Дети до 11 лет — возможно без отдельного места для сна.
            </div>
            <div class="amenity">
                <span class="check-icon">✓</span>
                Кровать размера "king size"
            </div>
        </div>
        <div class="amenities">
            <div class="amenity">
                Видео/аудио: телевизор, плоский экран, спутниковое телевидение, цифровое ТВ;
                Интернет/телефония: Wi-Fi;
                Электроника: фен, мини-холодильник, международная розетка;
                Ванная комната: душ, мыло, санузел, тапочки, туалетные принадлежности, банные полотенца, унитаз, банные аксессуары, халаты, душевой кабина;
                Вид из окна: вид на сад, горы;
                Кровати: три односпальные кровати;
                Мебель: кресло, вешалки, шкаф для одежды, столики у кровати, стол, зеркало;
                Другие услуги: номера для некурящих, уборка номера, чайный набор.
            </div>
        </div>
        <div class="image-grid">
            <div class="image-box" onclick="openPopup('img/karvan/l1.jpg')">
                <img src="img/karvan/l1.jpg" alt="Изображение 1">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/l2.jpg')">
                <img src="img/karvan/l2.jpg" alt="Изображение 2">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/l3.jpg')">
                <img src="img/karvan/l3.jpg" alt="Изображение 3">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/l4.jpg')">
                <img src="img/karvan/l4.jpg" alt="Изображение 4">
            </div>
        </div>
    </div>
</div>

<!-- 5-й номер -->
<div class="room-section">
    <div class="room-title">
        <button class="room-title-button">Люкс с балконом "Карван"
            <div class="capacity-icons">
            </div>
        </button>
    </div>

    <div class="room-content">
        <div class="amenities">
            <div class="amenity">
                <span class="check-icon">✓</span>
                30 м²
            </div>
            <div class="amenity">
                <span class="check-icon">✓</span>
                Дети до 11 лет — возможно без отдельного места для сна.
            </div>
            <div class="amenity">
                <span class="check-icon">✓</span>
                Кровать размера "king size"
            </div>
        </div>
        <div class="amenities">
            <div class="amenity">
                Видео/аудио: телевизор, плоский экран, спутниковое телевидение, цифровое ТВ;
                Интернет/телефония: Wi-Fi;
                Электроника: фен, мини-холодильник, международная розетка;
                Ванная комната: душ, мыло, санузел, тапочки, туалетные принадлежности, банные полотенца, унитаз, банные аксессуары, халаты, душевой кабина;
                Вид из окна: вид на сад, горы;
                Кровати: три односпальные кровати;
                Мебель: кресло, вешалки, шкаф для одежды, столики у кровати, стол, зеркало;
                Другие услуги: номера для некурящих, уборка номера, чайный набор.
            </div>
        </div>
        <div class="image-grid">
            <div class="image-box" onclick="openPopup('img/karvan/o1.jpg')">
                <img src="img/karvan/o1.jpg" alt="Изображение 1">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/o2.jpg')">
                <img src="img/karvan/o2.jpg" alt="Изображение 2">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/o3.jpg')">
                <img src="img/karvan/o3.jpg" alt="Изображение 3">
            </div>
            <div class="image-box" onclick="openPopup('img/karvan/o4.jpg')">
                <img src="img/karvan/o4.jpg" alt="Изображение 4">
            </div>
        </div>
    </div>
</div>

<!-- Popup -->
<div class="popup-overlay" id="popupOverlay">
    <div class="popup-content">
        <span class="close-btn" onclick="closePopup()">X</span>
        <img id="popupImage" src="" alt="Şəkil">
    </div>
</div><center><h5>О медицинских услугах</h5></center>
<div class="carousell-container">

    <button id="carousell-left" class="arrow left">&#10094;</button>
    <div class="carousell" id="carousell">
         <img src="img/karvan/k1.jpg" alt="karvan 1" onclick="zoomImage(this)">
        <img src="img/karvan/k2.jpg" alt="karvan 2" onclick="zoomImage(this)">
          <img src="img/karvan/k3.jpg" alt="karvan 2" onclick="zoomImage(this)">
         <img src="img/karvan/k4.jpg" alt="karvan 1" onclick="zoomImage(this)">
       <img src="img/karvan/k5.jpg" alt="karvan 1" onclick="zoomImage(this)">
        <img src="img/karvan/k6.jpg" alt="karvan 1" onclick="zoomImage(this)">
         <img src="img/karvan/k7.jpg" alt="karvan 1" onclick="zoomImage(this)">
      
    </div>
    <button id="carousell-right" class="arrow right">&#10095;</button>
</div>

    </section>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet">

    <style>
   .section-subtitle {
    font-family: 'Merriweather', serif;
    font-size: 0.75em; /* 25% daha kiçik */
}

/* Bron Et düyməsi üçün yeni stillər */
.item .category {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.item .category a {
    background: rgba(255, 182, 0, 0.85);  /* Qızılı/sarı yarı-şəffaf fon */
    color: #fff;  /* Ağ yazı */
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    display: inline-block;
}

/* Hover effektləri */
.item .category:hover {
    transform: translateY(-3px);
}

.item .category a:hover {
    background: rgba(255, 145, 0, 0.95);  /* Daha tünd və az şəffaf */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    text-decoration: none;
}

/* Aktiv vəziyyət üçün */
.item .category a:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Pulse animasiyası */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 182, 0, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 182, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 182, 0, 0);
    }
}

.item .category a {
    animation: pulse 2s infinite;
}
@media (max-width: 480px) {
  body {
    font-size: 14px; /* Küçük ekranlarda metni küçült */
  }
  img {
    max-width: 100%;
    height: auto; /* Görselleri ekrana sığdır */
  }
}

</style>
<!-- Раздел отелей -->
<section class="rooms1 section-padding bg-darkblack" data-scroll-index="1">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
  <div class="section-title" style="font-size: 30px;">ОТЕЛИ И МЕДИЦИНСКИЕ ЦЕНТРЫ</div>
                <div class="section-subtitle">ПРАВИЛЬНОЕ МЕСТО ДЛЯ ОТДЫХА И ЗДОРОВЬЯ ДЕЛАЕТ ВАШ ОТДЫХ БОЛЕЕ ЭФФЕКТИВНЫМ. ДОВЕРЬТЕ ВЫБОР НАМ! - NAFTAVITA.AZ</div>
            </div>        
        </div>

        <div class"row">
            <div class"col-md-12">
                <div class="owl-carousel owl-theme">
                  
                    <!-- Карабах -->
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/qarabaq.jpg" alt="Карабах" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="карабах">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="карабах">100 AZN/ День</a></h6>
                            <h5><a href="карабах">Карабах Резорт & Спа Нафталан</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="карабах">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                 
                    <!-- Чинар Отель & Спа -->
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/chinar.jpg" alt="Чинар Отель & Спа" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="чинар">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="чинар">60 AZN / День</a></h6>
                            <h5><a href="чинар">Чинар Санаторий Нафталан</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="чинар">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                        
                    <!-- Гашалты Санаторий -->
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/qashalti.jpg" alt="Гашалты Санаторий" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="гашалты">Забронировать</a></span>
                        <div class="con">
                            <h5><a href="гашалты"> Гашалты Санаторий Нафталан</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="гашалты">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                    <!-- Сан Сити Отель & Спа -->                     
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/suncity.jpg" alt="СанСити" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="сан-сити">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="сан-сити">100 AZN / День</a></h6>
                            <h5><a href="сан-сити"> Сан Сити Отель & СПА Нафталан</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="сан-сити">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div>
  
                    <!-- Голд Нафталан -->
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/goldnaftalan.jpg" alt="Голд Нафталан" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="голд-нафталан">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="#голд-нафталан">60 AZN / День</a></h6>
                            <h5><a href="голд-нафталан">Голд Нафталан & СПА Отель</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="голд-нафталан">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                
                    <!-- Нафта Отель -->                     
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/nafta.jpg" alt="Нафта" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="нафта">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="нафта">70 AZN / День</a></h6>
                            <h5><a href="нафта"> Нафта Отель </a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="нафта">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div> 
                
                    <!-- Муров Центральный Санаторий -->                     
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/murov.jpg" alt="Муров" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="муров">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="муров">80 AZN / День</a></h6>
                            <h5><a href="муров"> Муров Нафталан Центральный Санаторий</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="Murov">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div>
                
                    <!-- Карван Отель -->                        
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/karvan.jpg" alt="Карван" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="карван">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="карван">60 AZN / День</a></h6>
                            <h5><a href="карван"> Карван Отель Нафталан </a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="карван">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div>

                    <!-- Нур Нафталан -->                     
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/nurnaftalan.jpg" alt="НурНафталан" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="нур-нафталан">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="нур-нафталан">140 AZN / День</a></h6>
                            <h5><a href="нур-нафталан"> Нур Нафталан Санаторий</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="нур-нафталан">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div>
                          
                    <!-- Кяпез Санаторий -->                     
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/kepez.jpg" alt="Кяпяз" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href=кяпяз">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="кяпяз">100 AZN / День</a></h6>
                            <h5><a href="кяпяз"> Кяпяз Санаторий</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="кяпяз">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div>

                    <!-- Нафталан Санаторий -->                     
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/naftalan.jpg" alt="Нафталан" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="нафталан">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="нафталан">110 AZN / День</a></h6>
                            <h5><a href="нафталан"> Нафталан Санаторий</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="нафталан">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div>
  
                    <!-- Сехирли Нафталан -->                     
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/sehirlinaftalan.jpg" alt="СехирлиНафталан" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="сехирли-нафталан">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="сехирли-нафталан">110 AZN / День</a></h6>
                            <h5><a href="сехирли-нафталан"> Сехирли Нафталан санаторий</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="сехирли-нафталан">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div>
  
                    <!-- Гозель Нафталан -->                     
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/GözəlNaftalan.jpg" alt="ГозельНафталан" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="GözəlNaftalan">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="гёзель-нафталан">110 AZN / День</a></h6>
                            <h5><a href="гёзель-нафталан"> Гозель Нафталан Санаторий</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="гёзель-нафталан">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div>
  
                    <!-- Мöчюзэли Нафталан -->                     
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/MöcüzəliNaftalan.jpg" alt="МöчюзэлиНафталан" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="моджузели-нафталан">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="моджузели-нафталан">110 AZN / День</a></h6>
                            <h5><a href="моджузели-нафталан"> Мочузали Нафталан Санаторий</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="моджузели-нафталан">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div>
                              <!-- Мöчюзэли Нафталан -->                     
                    <div class="item">
                        <div class="position-re o-hidden">
                            <img src="img/otel/parknaftalan.jpg" alt="ПаркНафталанСанаторий" style="width: 100%; height: 300px; object-fit: cover;">
                        </div>
                        <span class="category"><a href="парк-нафталан">Забронировать</a></span>
                        <div class="con">
                            <h6><a href="парк-нафталан">110 AZN / День</a></h6>
                            <h5><a href="парк-нафталан"> Парк Нафталан Санаторий</a></h5>
                            <div class="line"></div>
                            <div class="row facilities">
                                <div class="col col-md-7">
                                    <ul>
                                        <li><i class="flaticon-bed"></i></li>
                                        <li><i class="flaticon-bath"></i></li>
                                        <li><i class="flaticon-breakfast"></i></li>
                                        <li><i class="flaticon-towel"></i></li>
                                    </ul>
                                </div>
                                <div class="col col-md-5 text-end">
                                    <div class="permalink"><a href="парк-нафталан">Подробнее <i class="ti-arrow-right"></i></a></div>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>                   
        </div>
    
<!-- Туры -->
<div class="col-md-12"><div class="section-title" style="font-size: 30px;">ТУРЫ</div>

    <div class="section-subtitle">ПРАВИЛЬНЫЙ ВЫБОР МЕСТА ПУТЕШЕСТВИЯ ДЕЛАЕТ ЕГО БОЛЕЕ ОСОБЕННЫМ И НЕЗАБЫВАЕМЫМ. ДОВЕРЬТЕ НАМ ВЫБОР! – NAFTAVITA.AZ </div>
</div>


      <div class="owl-carousel owl-theme">
    
    <!-- Гянджа -->
    <div class="item">
        <div class="position-re o-hidden">
            <img src="img/gence.jpg" alt="Гянджа" style="width: 100%; height: 300px; object-fit: cover;">
        </div>
        <span class="category"><a href="туры">Сделать тур</a></span>
        <div class="con">
            <h5><a href="#">Гянджа</a></h5>
            <div class="line"></div>
            <div class="row facilities">
                <div class="col col-md-7">
                    <ul>
                        <li><img src="img/icon1.png" alt="bed" style="width: 24px; height: 24px;"></li>
                        <li><img src="img/icon2.png" alt="bath" style="width: 24px; height: 24px;"></li>
                        <li><img src="img/icon3.png" alt="breakfast" style="width: 24px; height: 24px;"></li>
                        <li><img src="img/icon4.png" alt="towel" style="width: 24px; height: 24px;"></li>
                    </ul>
                </div>
                <div class="col col-md-5 text-end">
                    <div class="permalink"><a href="туры">Подробнее <i class="ti-arrow-right"></i></a></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Минджеевир -->
    <div class="item">
        <div class="position-re o-hidden">
            <img src="img/minge.jpg" alt="Мингечевир" style="width: 100%; height: 300px; object-fit: cover;">
        </div>
        <span class="category"><a href="туры">Сделать тур</a></span>
        <div class="con">
            <h5><a href="#">Мингечевир</a></h5>
            <div class="line"></div>
            <div class="row facilities">
                <div class="col col-md-7">
                    <ul>
                        <li><img src="img/icon1.png" alt="bed" style="width: 24px; height: 24px;"></li>
                        <li><img src="img/icon2.png" alt="bath" style="width: 24px; height: 24px;"></li>
                        <li><img src="img/icon3.png" alt="breakfast" style="width: 24px; height: 24px;"></li>
                        <li><img src="img/icon4.png" alt="towel" style="width: 24px; height: 24px;"></li>
                    </ul>
                </div>
                <div class="col col-md-5 text-end">
                    <div class="permalink"><a href="туры">Подробнее <i class="ti-arrow-right"></i></a></div>
                </div>
            </div>
        </div>
    </div><!-- Шеки -->
<div class="item">
    <div class="position-re o-hidden">
        <img src="img/sheki.jpg" alt="Шеки" style="width: 100%; height: 300px; object-fit: cover;">
    </div>
    <span class="category"><a href="туры">Сделать тур</a></span>
    <div class="con">
        <h5><a href="#">Шеки</a></h5>
        <div class="line"></div>
        <div class="row facilities">
            <div class="col col-md-7">
                <ul>
                    <li><img src="img/icon1.png" alt="bed" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon2.png" alt="bath" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon3.png" alt="breakfast" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon4.png" alt="towel" style="width: 24px; height: 24px;"></li>
                </ul>
            </div>
            <div class="col col-md-5 text-end">
                <div class="permalink"><a href="туры">Подробнее <i class="ti-arrow-right"></i></a></div>
            </div>
        </div>
    </div>
</div>

<!-- Габала -->
<div class="item">
    <div class="position-re o-hidden">
        <img src="img/qebele.jpg" alt="Габала" style="width: 100%; height: 300px; object-fit: cover;">
    </div>
    <span class="category"><a href="туры">Сделать тур</a></span>
    <div class="con">
        <h5><a href="#">Габала</a></h5>
        <div class="line"></div>
        <div class="row facilities">
            <div class="col col-md-7">
                <ul>
                    <li><i class="flaticon-bed"></i></li>
                    <li><i class="flaticon-bath"></i></li>
                    <li><i class="flaticon-breakfast"></i></li>
                    <li><i class="flaticon-towel"></i></li>
                </ul>
            </div>
            <div class="col col-md-5 text-end">
                <div class="permalink"><a href="туры">Подробнее <i class="ti-arrow-right"></i></a></div>
            </div>
        </div>
    </div>
</div>

        <!-- İsmayıllı -->
<div class="item">
    <div class="position-re o-hidden">
        <img src="img/ismayilli.jpg" alt="İsmayıllı" style="width: 100%; height: 300px; object-fit: cover;">
    </div>
    <span class="category"><a href="туры">Поездка</a></span>
    <div class="con">
        <h5><a href="#">Исмаиллы</a></h5> <!-- Rayonu rusca yazdım -->
        <div class="line"></div>
        <div class="row facilities">
            <div class="col col-md-7">
                <ul>
                    <li><img src="img/icon1.png" alt="bed" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon2.png" alt="bath" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon3.png" alt="breakfast" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon4.png" alt="towel" style="width: 24px; height: 24px;"></li>
                </ul>
            </div>
            <div class="col col-md-5 text-end">
                <div class="permalink"><a href="туры">Подробнее <i class="ti-arrow-right"></i></a></div>
            </div>
        </div>
    </div>
</div>

<!-- Göygöl -->
<div class="item">
    <div class="position-re o-hidden">
        <img src="img/goygol.jpg" alt="Göygöl" style="width: 100%; height: 300px; object-fit: cover;">
    </div>
    <span class="category"><a href="туры">Поездка</a></span>
    <div class="con">
        <h5><a href="#">Гёйгёль</a></h5> <!-- Rayonu rusca yazdım -->
        <div class="line"></div>
        <div class="row facilities">
            <div class="col col-md-7">
                <ul>
                    <li><img src="img/icon1.png" alt="bed" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon2.png" alt="bath" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon3.png" alt="breakfast" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon4.png" alt="towel" style="width: 24px; height: 24px;"></li>
                </ul>
            </div>
            <div class="col col-md-5 text-end">
                <div class="permalink"><a href="туры">Подробнее <i class="ti-arrow-right"></i></a></div>
            </div>
        </div>
    </div>
</div>

<!-- Hacıkənd -->
<div class="item">
    <div class="position-re o-hidden">
        <img src="img/hacikend.jpg" alt="Hacıkənd" style="width: 100%; height: 300px; object-fit: cover;">
    </div>
    <span class="category"><a href="туры">Поездка</a></span>
    <div class="con">
        <h5><a href="#">Хачыкенд</a></h5> <!-- Rayonu rusca yazdım -->
        <div class="line"></div>
        <div class="row facilities">
            <div class="col col-md-7">
                <ul>
                    <li><img src="img/icon1.png" alt="bed" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon2.png" alt="bath" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon3.png" alt="breakfast" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon4.png" alt="towel" style="width: 24px; height: 24px;"></li>
                </ul>
            </div>
            <div class="col col-md-5 text-end">
                <div class="permalink"><a href="туры">Подробнее <i class="ti-arrow-right"></i></a></div>
            </div>
        </div>
    </div>
</div>

<!-- Qarabağ -->
<div class="item">
    <div class="position-re o-hidden">
        <img src="img/susa.jpg" alt="Qarabağ" style="width: 100%; height: 300px; object-fit: cover;">
    </div>
    <span class="category"><a href="туры">Поездка</a></span>
    <div class="con">
        <h5><a href="#">Карабах</a></h5> <!-- Rayonu rusca yazdım -->
        <div class="line"></div>
        <div class="row facilities">
            <div class="col col-md-7">
                <ul>
                    <li><img src="img/icon1.png" alt="bed" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon2.png" alt="bath" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon3.png" alt="breakfast" style="width: 24px; height: 24px;"></li>
                    <li><img src="img/icon4.png" alt="towel" style="width: 24px; height: 24px;"></li>
                </ul>
            </div>
            <div class="col col-md-5 text-end">
                <div class="permalink"><a href="туры">Подробнее <i class="ti-arrow-right"></i></a></div>
            </div>
        </div>
    </div>
</div>


        </div>
    </div>
</div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</section>

 <!-- Услуги -->
<section class="services section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-6 p-0 animate-box" data-animate-effect="fadeInLeft">
                <div class="img left">
                    <a href="Ширкет"><img src="img/naftas.jpg" alt=""></a>
                </div>
            </div>
            <div class="col-md-6 p-0 bg-darkblack valign animate-box" data-animate-effect="fadeInRight">
                <div class="content">
                    <div class="cont text-left">
                        <div class="info">
                        </div>
                        <h4>О нашей компании.</h4>
                        <p>Наша компания состоит из команды с большим опытом в своей области. Качество — это наш сервис!</p>
                        <div class="butn-dark">
                            <a href="Ширкет"><span>Подробнее</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 bg-darkblack p-0 order2 valign animate-box" data-animate-effect="fadeInLeft">
                <div class="content">
                    <div class="cont text-left">
                        <div class="info">
                        </div>
                        <h4>Медицинское обследование.</h4>
                        <p>Наши врачи с опытом работы предоставят вам услугу обследования и лечения!</p>
                        <div class="butn-dark">
                            <a href="Врачи"><span>Подробнее</span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 p-0 order1 animate-box" data-animate-effect="fadeInRight">
                <div class="img">
                    <a href="Врачи"><img src="img/hekim.jpg" alt=""></a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 p-0 animate-box" data-animate-effect="fadeInLeft">
                <div class="img left">
                    <a href="Страхование"><img src="img/sigorta.jpg" alt=""></a>
                </div>
            </div>
            <div class="col-md-6 p-0 bg-darkblack valign animate-box" data-animate-effect="fadeInRight">
                <div class="content">
                    <div class="cont text-left">
                        <div class="info">
                        </div>
                        <h4>Вы в безопасности!</h4>
                        <p>Ваши вещи и здоровье полностью застрахованы во время отдыха!</p>
                        <div class="butn-dark">
                            <a href="Страхование"><span>Подробнее</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 bg-darkblack p-0 order2 valign animate-box" data-animate-effect="fadeInLeft">
                <div class="content">
                    <div class="cont text-left">
                        <div class="info">
                        </div>
                        <h4>Аренда автомобиля</h4>
                        <p>Мы можем заранее арендовать для вас автомобиль!</p>
                        <div class="butn-dark">
                            <a href="Аренда"><span>Подробнее</span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 p-0 order1 animate-box" data-animate-effect="fadeInRight">
                <div class="img">
                    <a href="Аренда"><img src="img/avto.jpg" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 p-0 animate-box" data-animate-effect="fadeInLeft">
            <div class="img left">
                <a href="Блог"><img src="img/blog.jpg" alt=""></a>
            </div>
        </div>
        <div class="col-md-6 p-0 bg-darkblack valign animate-box" data-animate-effect="fadeInRight">
            <div class="content">
                <div class="cont text-left">
                    <div class="info">
                    </div>
                    <h4>Блоги.</h4>
                    <p>Для более подробной информации наши блоги специально для вас.</p>
                    <div class="butn-dark">
                        <a href="Блог"><span>Подробнее</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
                  
                    <!-- Müştərilər -->

<script>// JavaScript code for handling multiple carousels (carousel and carousell)
const carousels = [
    { id: 'carousel', totalImages: 50, imagesToShow: 3 },
    { id: 'carousell', totalImages: 50, imagesToShow: 3 }
];

carousels.forEach(({ id, totalImages, imagesToShow }) => {
    const carousel = document.getElementById(id);
    if (!carousel) return; // Check if the element exists

    let currentIndex = 0;
    let isDragging = false;
    let startPos = 0;
    let currentTranslate = 0;
    let prevTranslate = 0;

    function moveSlide(direction) {
        const maxIndex = totalImages - imagesToShow;
        currentIndex += direction;

        if (currentIndex < 0) {
            currentIndex = 0;
        } else if (currentIndex > maxIndex) {
            currentIndex = maxIndex;
        }

        const offset = -currentIndex * (100 / imagesToShow);
        carousel.style.transform = `translateX(${offset}%)`;
        currentTranslate = offset;
        prevTranslate = offset;
    }

    // Attach event listeners for buttons
    document.querySelector(`#${id}-left`)?.addEventListener('click', () => moveSlide(-1));
    document.querySelector(`#${id}-right`)?.addEventListener('click', () => moveSlide(1));

    // Touch and mouse drag functionality
    carousel.addEventListener('touchstart', startDrag);
    carousel.addEventListener('mousedown', startDrag);

    carousel.addEventListener('touchmove', drag);
    carousel.addEventListener('mousemove', drag);

    carousel.addEventListener('touchend', endDrag);
    carousel.addEventListener('mouseup', endDrag);
    carousel.addEventListener('mouseleave', endDrag);

    function startDrag(event) {
        isDragging = true;
        startPos = getPositionX(event);
        carousel.style.cursor = 'grabbing';
    }

    function drag(event) {
        if (!isDragging) return;

        const currentPosition = getPositionX(event);
        currentTranslate = prevTranslate + ((currentPosition - startPos) / carousel.offsetWidth) * 100;
        carousel.style.transform = `translateX(${currentTranslate}%)`;
    }

    function endDrag() {
        isDragging = false;
        carousel.style.cursor = 'grab';

        const movedBy = currentTranslate - prevTranslate;
        if (movedBy < -10) moveSlide(1);
        else if (movedBy > 10) moveSlide(-1);
        else carousel.style.transform = `translateX(${prevTranslate}%)`;
    }

    function getPositionX(event) {
        return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
    }
});

// Image zoom functionality
function zoomImage(image) {
    const modal = document.createElement('div');
    modal.style.position = 'fixed';
    modal.style.top = '0';
    modal.style.left = '0';
    modal.style.width = '100%';
    modal.style.height = '100%';
    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    modal.style.display = 'flex';
    modal.style.justifyContent = 'center';
    modal.style.alignItems = 'center';
    modal.style.zIndex = '1000';

    const img = document.createElement('img');
    img.src = image.src;
    img.style.maxWidth = '90%';
    img.style.maxHeight = '90%';

    modal.appendChild(img);
    modal.onclick = () => document.body.removeChild(modal);

    document.body.appendChild(modal);
}


    </script>

    <script>
        // Nümunə məzənnələr (real API-dan əvəz edilməlidir)
        const rates = {
            USD: 1,
            AZN: 1.7,
            EUR: 0.92,
             RUB: 74.32,
            TRY: 31.8,
            GBP: 0.79
        };

        // DOM elementləri
        const amountInput = document.getElementById('amount');
        const fromSelect = document.getElementById('fromCurrency');
        const toSelect = document.getElementById('toCurrency');
        const resultAmount = document.getElementById('resultAmount');
        const rateInfo = document.getElementById('rateInfo');

        // Məzənnə hesablama funksiyası
        function calculateExchange() {
            const amount = parseFloat(amountInput.value);
            const fromCurrency = fromSelect.value;
            const toCurrency = toSelect.value;

            const convertedAmount = (amount * rates[toCurrency]) / rates[fromCurrency];
            const rate = rates[toCurrency] / rates[fromCurrency];

            resultAmount.textContent = `${amount} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;
            rateInfo.textContent = `1 ${fromCurrency} = ${rate.toFixed(4)} ${toCurrency}`;
        }

        // Event listeners
        amountInput.addEventListener('input', calculateExchange);
        fromSelect.addEventListener('change', calculateExchange);
        toSelect.addEventListener('change', calculateExchange);

        // Başlanğıc hesablama
        calculateExchange();

        // Real valyuta məzənnələrini almaq üçün API nümunəsi
        // function fetchRates() {
        //     fetch('https://api.exchangerate-api.com/v4/latest/USD')
        //         .then(res => res.json())
        //         .then(data => {
        //             rates = data.rates;
        //             calculateExchange();
        //         })
        //         .catch(err => console.error('Məzənnələri yükləyərkən xəta:', err));
        // }
        // fetchRates();
    </script>

<script>
function openPopup(imageSrc) {
    const overlay = document.getElementById('popupOverlay');
    const popupImage = document.getElementById('popupImage');
    overlay.style.display = 'flex'; /* Popup-u göstər */
    popupImage.src = imageSrc; /* Şəkili göstər */
}

function closePopup() {
    const overlay = document.getElementById('popupOverlay');
    overlay.style.display = 'none'; /* Popup-u gizlət */
}

</script>
    <!-- Logo Slider Bölməsi -->
<section class="logo-slider">
    <div class="container-fluid"> <!-- container əvəzinə container-fluid istifadə edirik -->
        <div class="slider-wrapper">
            <div class="logo-track">
                <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis1.png" alt="Logo 1"></a>
                </div>
                <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis2.png" alt="Logo 2"></a>
                </div>
                <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis3.png" alt="Logo 3"></a>
                </div>
                <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis4.png" alt="Logo 4"></a>
                </div>
                <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis5.png" alt="Logo 5"></a>
                </div>
                <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis6.png" alt="Logo 6"></a>
                </div>
                <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis7.png" alt="Logo 7"></a>
                </div>
                <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis8.png" alt="Logo 8"></a>
                </div>
                <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis9.png" alt="Logo 9"></a>
                </div>
                <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis10.png" alt="Logo 10"></a>
                </div>
                 <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis11.png" alt="Logo 9"></a>
                </div> <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis12.png" alt="Logo 9"></a>
                </div> <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis13.png" alt="Logo 9"></a>
                </div> <div class="logo-slide">
                    <a href="#"><img src="img/icon/aclis14.png" alt="Logo 9"></a>
                </div>
            </div>
        </div>
    </div>
</section>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet">

<style>
.footer-title, .footer-about-text {
    font-family: 'Merriweather', serif;
}

.logo-slider {
    width: 100vw; /* Tam ekran genişliyi */
    padding: 40px 0;
    background: #fff;
    overflow: hidden;
    margin-left: calc(-50vw + 50%); /* Tam genişlik üçün mərkəzləşdirmə */
    margin-right: calc(-50vw + 50%);
}

.container-fluid {
    width: 100%;
    margin: 0;
    padding: 0;
}

.slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.logo-track {
    display: flex;
    width: fit-content; /* Avtomatik genişlik */
    animation: infiniteScroll 40s linear infinite;
}

.logo-slide {
    width: 200px;
    flex-shrink: 0;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 80px;
    transition: transform 0.3s ease;
}

.logo-slide:hover img {
    transform: scale(1.1);
}

@keyframes infiniteScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Mobil responsivlik */
@media (max-width: 768px) {
    .logo-slide {
        width: 150px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const track = document.querySelector('.logo-track');
    const slides = [...document.querySelectorAll('.logo-slide')];
    
    // Bütün slide-ları kopyalayıb əlavə edirik (sonsuz dövr üçün)
    slides.forEach(slide => {
        const clone = slide.cloneNode(true);
        track.appendChild(clone);
    });
    
    // Hover effektləri
    track.addEventListener('mouseenter', () => {
        track.style.animationPlayState = 'paused';
    });
    
    track.addEventListener('mouseleave', () => {
        track.style.animationPlayState = 'running';
    });
});
</script>
<script>
function openPopup(imageSrc) {
    const overlay = document.getElementById('popupOverlay');
    const popupImage = document.getElementById('popupImage');
    overlay.style.display = 'flex'; /* Popup-u göstər */
    popupImage.src = imageSrc; /* Şəkili göstər */
}

function closePopup() {
    const overlay = document.getElementById('popupOverlay');
    overlay.style.display = 'none'; /* Popup-u gizlət */
}
function openModal(imageUrl) {
    var modal = document.getElementById("myModal");
    var modalImg = document.getElementById("modalImage");

    modal.style.display = "block";
    modalImg.src = "admin/uploads/" + imageUrl;
}

function closeModal() {
    var modal = document.getElementById("myModal");
    modal.style.display = "none";
}

</script>
<style>
    .suleym {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* İkon və mətn arasında boşluq */
    padding: 10px;
}

.service-icon {
    width: 120px; /* İkonun eni artırıldı */
    height: 120px; /* İkonun hündürlüyü artırıldı */
}
.service-text {
    font-size: 2rem; /* Mətn ölçüsü artırıldı */
    font-weight: bold; /* Mətn vurğulandı */
    color: white; /* Mətn ağ rəngə çevrildi */
   
    margin: 0; /* Boşluqlar sıfırlandı */
    line-height: 1; /* Mətnin dik mərkəzləşməsi üçün xətt aralığı düzəldildi */
}


</style>

<div class="suleym">
    <p class="service-text">Мы на связи 24/7</p>
</div>
<!-- Altlıq -->
<footer class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="footer-column footer-about">
                        <h3 class="footer-title">Преимущества санаториев</h3>
                     <p class="footer-about-text">В санаториях Нафталана предлагаются медицинские процедуры, комфортные условия проживания и здоровое питание, что делает их привлекательными для местных и иностранных туристов. Вы будете отдыхать и заботиться о своем здоровье. Naftavita.az - вы в правильном месте!</p>
                    </div>
                </div>
                <div class="col-md-3 offset-md-1">
                    <div class="footer-column footer-explore clearfix">
                        <h3 class="footer-title">Откройте для себя</h3>
                        <ul class="footer-explore-list list-unstyled">
                            <li><a href="">Главная</a></li>
                            <li><a href="аренда">Аренда авто и трансфер</a></li>
                            <li><a href="врачи">Врачи</a></li>
                            <li><a href="туры">Туры</a></li>
                            <li><a href="компания">О компании</a></li>
                            <li><a href="контакты">Контакты</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="footer-column footer-contact">
                        <h3 class="footer-title"Контакты</h3>
                        <p class="footer-contact-text">Город Нафталан<br>Азербайджан</p>
                        <div class="footer-contact-info">
                            <div class="footer-contact-info">
  <div class="footer-contact-info">
    <p class="footer-contact-phone">
        <a href="tel:+994010301046" style="color: #fff; text-decoration: none;">
            <span class="flaticon-call"></span> +994 10 301 00 46
        </a>
    </p>
    <p class="footer-contact-phone">
        <a href="mailto:Office@naftavita.az" style="color: #fff; text-decoration: none;">
            <span class="ti-email"></span> Office@naftavita.az
        </a>
    </p>
</div>
                        </div>
                        <div class="footer-about-social-list">
                            <a href="#"><i class="ti-instagram"></i></a>
                            <a href="#"><i class="ti-twitter"></i></a>
                            <a href="#"><i class="ti-youtube"></i></a>
                            <a href="#"><i class="ti-facebook"></i></a>
                            <a href="#"><i class="ti-pinterest"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="footer-bottom-inner">
                      
                        <p class="footer-bottom-copy-right">©2025 Все права защищены Naftavita
                        <p> </p> <a href="https://www.chiraq.az" target="_blank">WEB SITE by Chiraq Group</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

    <!-- jQuery -->
    <script src="js/jquery-3.6.3.min.js"></script>
    <script src="js/jquery-migrate-3.0.0.min.js"></script>
    <script src="js/modernizr-2.6.2.min.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/jquery.isotope.v3.0.2.js"></script>
    <script src="js/pace.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scrollIt.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.stellar.min.js"></script>
    <script src="js/jquery.magnific-popup.js"></script>
    <script src="js/YouTubePopUp.js"></script>
    <script src="js/select2.js"></script>
    <script src="js/datepicker.js"></script>
    <script src="js/smooth-scroll.min.js"></script>
    <script src="js/custom.js"></script>
</body>
</html>