/* Styles for logo */
.logo {
    height: 90px; /* Adjusted to a reasonable size */
    margin-right: 20px;
    margin-bottom: 0;
}

/* Navbar custom styles */
.custom-navbar {
    background-color: #000000; /* Задава черен фон */
    background-size: cover;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.8); /* Усилена сянка */
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 5px; /* Може да се коригира според нуждите */
    padding-bottom: 25px;
    position: fixed; /* Прави лентата фиксирана */
    top: 0; /* Позиционира я в горната част на страницата */
    margin: 0;
    width: 100%; /* Прави я с пълна ширина */
    z-index: 1000; /* Гарантира, че се намира над другото съдържание */
}


/* Styles for navbar links */
.navbar-nav .nav-link {
    font-size: 20px;
    font-weight: bold;
    margin-right: 50px;
    color: #D3D3D3; /* Gray color for all links */
}


.navbar-nav .nav-link:hover,
.dropdown-menu a:hover {
    color: red; /* Change link color to red on hover */
}

/* Specific style for "Home" link in normal state */
.navbar-nav .nav-item .nav-link.home {
    color: #D3D3D3; /* Gray color for the "Home" link */
}

/* Specific style for hover effect on "Home" link */
.navbar-nav .nav-item .nav-link.home:hover {
    color: red; /* Change link color to red on hover */
}
/* Променяме цвета на текста в менюто на сиво */
.menu-text {
    color: #D3D3D3; /* Светло сив цвят за текста */
}

/* Стилове за меню при фокус */
    .navbar-toggler:focus {
    outline: none;
    box-shadow: none !important; /* Премахва сянката при фокус */
    border: 1px solid #D3D3D3 !important; /* Задава дебелината и цвета на рамката при фокус */
}
/* Стилове за да се връща бутона в изходно положение при затваряне на падащото меню */
.navbar-toggler.collapsed {
    background-color: black;
    border: 1px solid #D3D3D3; /* По-тънка рамка с по-светъл цвят */
}

.navbar-toggler {
    border: 1px solid #D3D3D3 !important; /* Светло сива рамка */
    background-color: transparent; /* Прозрачен фон */
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none !important; /* Премахва сянката при фокус */
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%23D3D3D3' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Adjust margin for the last nav item */
.navbar-nav .nav-item:last-child .nav-link {
    margin-right: 0;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;   
    background-image: url("../images/7.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

main {    
    padding-top: 50px; /* Вътрешно разстояние между горната граница на main и съдържанието му */
}

/* Общи стилове за всички параграфи, освен тези с клас mission-text */
.main-content p {
    width: 80%; /* Параграфът ще заема 80% от ширината на контейнера */
    text-align: left; /* Подравняваме текста вляво */
    margin: 0px auto; /* Центрираме самия елемент в контейнера */
    color: #D3D3D3; /* Променяме цвета на текста на #D3D3D3 */
    line-height: 1.8; /* Увеличава разстоянието между редовете */
}

/* Стилове за параграфи в контейнера с клас main-content */
.main-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto; /* Центрираме основния контейнер */
    font-size: 20px; /* Размер на шрифта */
}

/* Общи стилове за всички параграфи (ако са необходими) */
p {
    margin-bottom: 30px; /* Разстояние отдолу между параграфите */
    margin-top: 30px; /* Разстояние отгоре между параграфите */    
}
.main-content p:last-of-type {
    margin-bottom: 50px; /* Увеличете стойността според нуждите си */
}


/* Стилове само за параграфите, които са част от мисията */
.mission-text {
    font-style: italic; /* Наклонен шрифт */
    font-size: 22px !important; /* Размер на шрифта */
    width: 76%; /* Ширина на текста */
    margin: 20px auto; /* Разстояние отгоре и отдолу, центриране на текста */
    text-align: right; /* Подравняване на текста отдясно */
    color: #D3D3D3; /* Светло сив цвят */
    display: block; /* Блоков елемент за ширината */
}

/* Заглавия на страницата */
h2, h3 {
    text-align: center; /* Центрира текста */
    margin: 0 auto; /* Центрира заглавието в контейнера, ако е необходимо */
    padding: 10px 0; /* Добавя отгоре и отдолу малко пространство, ако е необходимо */
    color: #D3D3D3; /* Изберете цвят на текста по желание */
}

h2 {
    font-size: 40px;
}

h3 {
    font-size: 25px;
}

/* CSS стилове за разстоянието между параграфите */

ul {
    margin-bottom: 20px; /* Добавя разстояние след списъци */
    color: #D3D3D3;
    font-size: 20px;
}

/* Основен стил за съдържанието на страницата */
.page-main-text {
    width: 100%; /* Ширина на параграфите */
    margin: 0 auto; /* Центриране на съдържанието */
    padding-left: 0; /* Премахва отстъпването отляво */
}

/* Специален стил за списъците */
.page-main-text ul {
    margin-left: auto; /* Центрира списъка */
    margin-right: auto; /* Центрира списъка */
    padding-left: 0; /* Премахва отстъпването отляво на списъка */
    list-style-position: inside; /* Подравняване на маркерите в рамките на списъка */
    width: 60%; /* Ширина на списъка */
}

.page-main-text li {
    margin-bottom: 10px; /* Разстояние между елементите на списъка */
}
/* Стилове за заглавията на страницата 'Услуги' */
.services-page-title {
    text-align: left !important; /* Подравнява текста вляво */
    margin-left: 10% !important; /* Разстояние отляво, съвпадащо с параграфите */
    padding-left: 0 !important; /* Премахва допълнителни вътрешни отстояния отляво */
    font-weight: bold; /* Болтно заглавие */
    margin-top: 20px; /* Разстояние отгоре */
    margin-bottom: 10px; /* Разстояние отдолу */
    width: 80% !important; /* Ширина на заглавията, за да съвпадат с параграфите */
    box-sizing: border-box; /* Включва падинга и бордера в ширината */
    font-size: 22px !important; 
}
/* Стилове за големите снимки отгоре и отдолу */
.top-image, .bottom-image {
    width: 98%; /* Използвай 98% ширина за големи екрани */
    display: block;
    margin: 0 auto;
    padding-top: 25px;
    padding-bottom: 40px;
    object-fit: cover; /* Включваме object-fit тук също за големи екрани */
}


/* Стилове за autoplay */
.swiper {
  width: 100%; /* Ширината на контейнера на слайдера */
  margin-top: 120px; /* Разстояние между хедера и слайдера */
  margin-bottom: 15px; /* Намалено разстояние между слайдера и следващия елемент */ 
  padding-bottom: 0; /* Намалено разстояние между слайдера и следващия елемент */   
}
.swiper-slide {  
  display: flex;  
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 98%;
  object-fit: cover;
}
swiper-pagination {
  display: none; /* Скрива пагинацията */
}

/* Стилове за втория слайдер */
.mySwiper2 {
    width: 100%;    
    display: block;
    padding-top: 35px !important;
    padding-bottom: 30px !important;
    position: relative; /* Добавяне на relative позиция за контейнера */
}

.mySwiper2 .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 330px; /* Фиксирана ширина за снимките */
    height: 480px; /* Фиксирана височина за снимките */
    margin-right: 40px; /* Добавете разстояние между слайдовете */
}

.mySwiper2 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    
}
.swiper-pagination2 {
    position: relative; /* Промяна на позиционирането на relative */
    bottom: 0; /* Позиционира пагинацията в долната част на слайдера */
    width: 100%;
    text-align: center;
    z-index: 10;
    padding-top: 40px; /* Добавете отстояние от слайда */
    padding-bottom: 25px; /* Увеличете разстоянието между точките и футера */
}

/* Стилизиране на пагинацията за втория слайдер */
.swiper-pagination2 .swiper-pagination-bullet {
    background: red !important;
    opacity: 0.8;
}
.swiper-pagination2 .swiper-pagination-bullet-active {
    background: darkred !important;
    width: 10px; /* Малко по-голяма ширина за активната точка */
    height: 10px; /* Малко по-голяма височина за активната точка */
    opacity: 1;
}

/* Contact form styles */
.contact-image {
    width: 250px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: 10% !important;
    padding-top: 50px !important; /* Използваме padding вместо margin */
}

/* Скрито поле */
.form-group.fields.hidden-field {
    display: none;
}
/* Основни стилове за формата */
.sign-up {
    width: 100% !important; /* Задава ширината на формата на 80% */
    max-width: none !important; /* Премахва ограничението на максималната ширина */
    margin: 30px auto !important; /* Центрира формата хоризонтално и добавя разстояние от заглавието и футера */
    padding-bottom: 30px !important; /* Добавя разстояние от футера */
}

.sign-up .fields {
    margin-bottom: 20px !important; /* Разстояние между полетата */
}

.textarea {
    width: 100% !important;
    height: 150px !important; /* Височината на текстовото поле остава непроменена */
}

/* Стилове за полетата на формата */
.form-control, .textarea {
    width: 100% !important;    
    background-color: #c6c7cc !important; /* Начален цвят на полетата */
    color: #333 !important; /* Цвет на текста */
    border: 1px solid #ccc !important; /* Цвят на рамката */
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1) !important; /* Сянка за дълбочина */
    transition: background-color 0.3s ease-in-out !important;
}

/* Специфични стилове за input полета */
.form-control {
    height: 55px !important; /* Увеличаване на височината на input полето с 5 пиксела */
}

/* Стилове при фокусиране на полето */
.form-control:focus, .textarea:focus {
    background-color: #ffffff !important; /* Цвят на полето при фокус */
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2) !important; /* По-интензивна сянка при фокус */
    outline: none !important; /* Премахва стандартната синя рамка при фокус */
}

/* Стилове за автоматично попълнени полета */
.form-control:-webkit-autofill, 
.textarea:-webkit-autofill {
    background-color: #c6c7cc !important; /* Цвят на полето след автоматично попълване */
    -webkit-box-shadow: 0 0 0px 1000px #c6c7cc inset !important; /* Задава фон зад автоматично попълненото поле */
    box-shadow: 0 0 0px 1000px #c6c7cc inset !important; /* Задава фон зад автоматично попълненото поле */
    color: #333 !important; /* Цвят на текста след автоматично попълване */
}

/* Стилове за втората картинка */
.second-image {
    width: 200px; /* Задава ширината на картинката на 250 пиксела */
    display: block;
    margin: 0 auto; /* Центрира изображението */
    padding: 10px 0; /* Добавя отстояния отгоре и отдолу */
}
/* Стилове за втората картинка */
.second-image {
    width: 200px; /* Задава ширината на картинката на 250 пиксела */
    display: block;
    margin: 0 auto; /* Центрира изображението */
    padding: 10px 0; /* Добавя отстояния отгоре и отдолу */
}

/* Стилове за втората картинка */
.second-image {
    width: 200px; /* Задава ширината на картинката на 250 пиксела */
    display: block;
    margin: 0 auto; /* Центрира изображението */
    padding: 10px 0; /* Добавя отстояния отгоре и отдолу */
}

/* Стилове за бутона */
.custom-button {
    width: 170px !important; /* Задава ширината на бутона на 200 пиксела */
    margin: 0 auto !important; /* Центрира бутона */
    display: block !important; /* Уверява се, че бутона е блок елемент */
    text-align: center !important; /* Центрира текста вътре в бутона */
    background: linear-gradient(to top, #454545 10%, #6a6868 15%, #858383 15%, #f2f0f0 56%, #858383 85%, #6a6868 85%, #454545 90%);
    border: none;
    color: black; 
    box-shadow: 3px 3px 3px rgba(63, 68, 69, 0.7);
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 3px;
    padding: 10px 20px; /* Добавя вътрешни отстояния за по-добър изглед */
    font-size: 22px; /* Увеличава размера на шрифта */
    font-weight: bold; /* Добавя удебеляване на текста */
}

/* Стилове за състояние при задържане на мишката */
.custom-button:hover {
    background: linear-gradient(to top, #3a3a6a 10%, #4d4d80 15%, #6e6e9c 15%, #b3b3d1 56%, #6e6e9c 85%, #4d4d80 90%, #3a3a6a 85%);
    box-shadow: 3px 3px 5px rgba(63, 68, 69, 0.7);
    transform: translateY(-2px); /* Леко повдига бутона */
    color: #ffffff; /* Цветът на текста при задържане */
}


/* Стилове за активирано състояние */
.custom-button:active {
    box-shadow: -3px -3px 1px rgba(63, 68, 69, 0.7);
    transform: translateY(2px); /* Леко сваля бутона */
}

/* Увеличаване на разстоянието отгоре до заглавието за специфични форми */
.custom-form-margin-top {
    margin-top: 50px !important;    
}
/* Увеличаване на разстоянието между полетата */
.form-group.fields {
    margin-bottom: 30px !important; /* Увеличаване на разстоянието между полетата */
}


/* Увеличаване на разстоянието между последното поле и бутона за специфични форми */
.custom-form-margin-bottom .form-group.fields:last-child {
    margin-bottom: 60px !important;
}

/* Центриране на заглавието */
.custom-form-title {
    text-align: center;
    font-size: 28px; /* Увеличаване на размера на шрифта */
    margin-top: 30px !important; /* Добавяне на разстояние отгоре до заглавието */
    margin-bottom: 30px !important; /* Добавяне на разстояние отдолу до заглавието */
}

/* Стилизиране на видеото */

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.iframe-container {
    display: flex;
    flex-direction: column; /* Подрежда видеата едно под друго */
    align-items: center; /* Центрира видеата хоризонтално */
    max-width: 1160px;
    margin: 50px auto 0 auto; /* Увеличава разстоянието от хедера и центрира видеата */
    padding-bottom: 50px; /* Отстояние между последното видео и дъното на страницата */
}

.iframe-container iframe {
    width: 100%;
    max-width: 1000px; /* Увеличава ширината на видеата */
    height: 560px; /* Пропорционална височина */
    border: none;
    margin-bottom: 50px; /* Разстояние между видеата */
}

.iframe-container iframe:first-of-type {
    margin-top: 100px; /* Увеличете стойността, за да получите желаното разстояние над първото видео */
}

.iframe-container iframe:last-child {
    margin-bottom: 0; /* Премахва допълнителното разстояние след последното видео */
}


/* Footer custom styles */
.custom-footer {
    background-color: #000000; /* Задава черен фон вместо изображение */
    text-align: center;
    padding: 20px 0; /* Разстояние отгоре и отдолу за контрол на височината */
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* Същата сянка като на хедера */
    position: relative;
    color: #D3D3D3; /* Уверете се, че текстът е видим на черен фон */
    margin-top: 40px; /* Добавяне на разстояние преди футера */
}

.custom-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.1); /* Shadow effect */
}

.footer-logo img {
    height: 80px;
}

/* Основни стилове за контактите в горната и долната част на футера */
.footer-contact, .contact-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px; /* Разстояние между елементите */
    margin: 30px 0; /* Външен маргин горе и долу */
    margin-top: 30px; /* Разстояние отгоре */

}

/* Допълнителни стилове за иконите и елементите */
.footer-contact .contact-item,
.contact-info .contact-item {
    display: flex;
    align-items: center; /* Вертикално подравняване на иконите и текста */
}

.footer-contact .contact-icon {
    margin-right: 11px; /* Разстояние между иконата и текста */
    vertical-align: middle; /* Вертикално подравняване */
    
}
.contact-info .contact-icon {
    margin-right: 8px; /* Разстояние между иконата и текста */
    display: inline-flex; /* Използване на flex за долните икони */
    align-items: center; /* Центриране на иконите вертикално */
    width: 16px; /* Примерен размер за иконата */
    height: 16px;
}

/* Специфични стилове за долната част на футера */
.contact-info {
    margin-top: 20px; /* Разстояние над контактите */
    font-size: 16px; /* Размер на шрифта за долната част */
    margin-bottom: 50px; 
}

/* Специфични стилове за горната част на футера */
.footer-contact {
    font-size: 20px; /* Размер на шрифта за горната част */
}

/* Защита */
.phone-link, .email-link {
    text-decoration: none; /* Премахва подчертаването */
    color: #D3D3D3; /* Цветът на текста остава черен */
    font-weight: normal; /* Уверява се, че текстът не е удебелен */
}

.phone-link:hover, .email-link:hover {
    color: black; /* Цветът остава черен дори при задържане на курсора */
}


.footer-contact .animated-icon {
    animation: ring 1s infinite;
}

@keyframes ring {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
.custom-footer .footer-nav {
    display: flex;
    justify-content: space-between; /* Равномерно разпределя линковете в контейнера */
    width: 80%; /* Задава ширината на контейнера за линковете */
    margin: 20px auto; /* Центрира контейнера за линковете */
    padding: 0; /* Премахва вътрешните отстояния */
    list-style-type: none; /* Премахва точките за списъците */
}


/* Стилове за основния футер */
.custom-footer {
    text-align: center; /* Центриране на целия футер */
    line-height: 2; /* Увеличаване на разстоянието между редовете */
}

.custom-footer .footer-copy {
    font-size: 16px; /* Увеличаване на размера на шрифта */
    margin-top: 20px;
    margin-bottom: 20px; /* Увеличено разстояние между линковете и "All rights reserved." */
}
.phone-link:hover, .email-link:hover {
    color: red; /* Цвят на линковете при задържане на курсора */
}

/* Стилизиране на анимираната икона за звънене на телефона */
.animated-icon {
    animation: ring 1s infinite;
}
.contact-info .contact-item {
    line-height: 1; /* или подходящата стойност */
}

.footer-nav {
    display: flex;
    justify-content: space-between; /* Adjust to fit 80% of the width */
    width: 80%;
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    color: #D3D3D3; /* Ensure nav links are black */
}

.footer-nav a {
    color: #D3D3D3; /* Ensure nav links are black */
    text-decoration: none; /* Remove underline from links */
}

.footer-nav a:hover {
    color: red; /* Change link color to red on hover */
}

  @media (max-width: 1200px) {
            .navbar-expand-xl .navbar-collapse {
                display: none;
            }        
            .navbar-expand-xl .navbar-toggler {
                display: flex;
                align-items: center;
            }

            .navbar-expand-xl .navbar-toggler .menu-text {
                margin-right: 10px;                
            }
            .navbar-expand-xl .navbar-collapse.collapse.show {
                display: block;
            } 
        }

     @media (max-width: 1000px) { 
         .swiper-slide img {
        height: 380px; /* Задава по-ниска височина за екрани до 768px */
        margin-bottom: 5px; 
    }
    .bottom-image {
        height: 350px;
    }
         .mySwiper2 .swiper-slide {
          width: 280px; /* Фиксирана ширина за снимките */
          height: 400px; /* Фиксирана височина за снимките */
        }  
        .iframe-container iframe {    
    max-width: 800px; /* Увеличава ширината на видеата */
    height: 450px; /* Пропорционална височина */    
}       

    /* Стилове за първата снимка в contact */
    .contact-image {
        width: 210px !important;
        margin-right: 5% !important;
    } 
    
     .footer-contact,
    .contact-info {
        flex-direction: column; /* Пренарежда елементите вертикално */
        gap: 0px; /* Намалява разстоянието между елементите до 5px */
    }

    .contact-info .contact-item {
        margin-bottom: 2px; /* Намалява разстоянието между елементите вертикално до 2px */
        font-size: 16px; /* Намалява размера на шрифта на по-малък размер, например 14px */
    }

    .footer-contact .contact-item,
    .contact-info .contact-item {
        margin-right: 0; /* Премахва хоризонталното разстояние */
        font-size: 16px; /* Намалява размера на шрифта на по-малък размер, например 16px */
    }
}
    

    @media (max-width: 768px) { 
        
.navbar-nav .nav-link {
    font-size: 19px;
}
.main-content {   
    font-size: 19px; /* Размер на шрифта */
}
.mission-text {    
    font-size: 20px !important; /* Размер на шрифта */
    }
    ul {
    
    font-size: 19px;
}
h2 {
    font-size: 35px;
}

h3 {
    font-size: 20px;
}
.swiper-slide img {
        height: 320px; /* Задава по-ниска височина за екрани до 768px */
        margin-bottom: 5px; 
    }
    .bottom-image {
        height: 320px;
    }
.mySwiper2 .swiper-slide {
        width: 245px; /* Фиксирана ширина за снимките */
        height: 350px; /* Фиксирана височина за снимките */
         margin-right: 30px;
    }
    
    .contact-image {
    width: 180px !important; 
    padding-top: 40px !important; 
    margin-right: 2% !important;
   }
.second-image {
    width: 175px !important; /* Задава ширината на картинката на 299 пиксела */    
   }
.custom-button {
    width: 170px !important; /* Задава ширината на бутона на 200 пиксела */
    font-size: 20px;
    }

    .iframe-container iframe {    
    max-width: 600px; /* Увеличава ширината на видеата */
    height: 337px; /* Пропорционална височина */    
}     

.footer-contact {
    font-size: 18px; /* Размер на шрифта за горната част */
  }
    .footer-nav {
        display: flex;
        flex-direction: column; /* Променяме подреждането на вертикално */
        align-items: center; /* Центрираме линковете */
        gap: 10px; /* Примерен отстъп между линковете */
        width: 100%; /* Адаптиране към пълната ширина */
        margin: 0; /* Премахване на авто маржовете */
        font-size: 19px;
    }

    .footer-nav a {
        width: 100%; /* Линковете заемат цялата ширина */
        text-align: center; /* Центриране на текста */
    }
}

@media (max-width: 480px) {
    .navbar-nav .nav-link {
    font-size: 18px;
}
.main-content {
   font-size: 18px; /* Размер на шрифта */
}
.mission-text {
    
    font-size: 19px !important; /* Размер на шрифта */
    
}
ul {
    
    font-size: 18px;
}
h2 {
    font-size: 25px;
}

h3 {
    font-size: 20px;
}
    
  .swiper-slide img {
        height: 250px; /* Задава по-ниска височина за екрани до 768px */
    }
    .bottom-image {
        height: 290px;
    }
    .bottom-image {
    padding-top: 5px;
    padding-bottom: 5px;
    
}
   .swiper {  
  margin-top: 160px; /* Разстояние между хедера и слайдера */  
  margin-bottom: 5px;  
}     

.mySwiper2 .swiper-slide {
        width: 231px; /* Фиксирана ширина за снимките */
        height: 330px; /* Фиксирана височина за снимките */
         margin-right: 20px;
    }

    .contact-image {
    width: 150px !important;
    margin-right: 2% !important;
    }
   .second-image {
    width: 140px !important; /* Задава ширината на картинката на 299 пиксела */    
    }
    .custom-button {
    width: 140px !important; /* Задава ширината на бутона на 200 пиксела */
    font-size: 17px;        
    }

    .iframe-container iframe {    
    max-width: 380px; /* Увеличава ширината на видеата */
    height: 214px; /* Пропорционална височина */ 
    }
    .iframe-container iframe:first-of-type {
    margin-top: 100px; /* Изберете необходимото разстояние */
}

    .footer-contact {
    font-size: 16px; /* Размер на шрифта за горната част */
    }

    .footer-contact span {
        line-height: 1;
        margin: 2px 0;
    }    

    .footer-contact span:nth-child(2),
    .footer-contact span:nth-child(4) {
        
    }

    .footer-nav {
        display: block; /* Промяна на display за единичен ред */
        text-align: center; /* Центриране на текста на линковете */
        margin-top: 18px; /* Увеличаване на разстоянието между имейла и първия ред на линковете */
        font-size: 18px;
    }
    .footer-nav a {
        display: block; /* Показване на линковете като блокове */
        
    }

}
@media (max-width: 350px){
    .main-content {
    font-size: 17px; /* Размер на шрифта */
}
.mission-text {   
    font-size: 18px !important; /* Размер на шрифта */    
}
ul {
    
    font-size: 17px;
}
.mySwiper2{
padding-bottom: 10px !important;
}
    .mySwiper2 .swiper-slide {
        width: 196px; /* Фиксирана ширина за снимките */
        height: 280px; /* Фиксирана височина за снимките */
        margin-right: 15px;
    } 
    .swiper-slide img {
        height: 190px; /* Задава по-ниска височина за екрани до 768px */
    }
    .bottom-image {
        height: 250px;
    }
    .swiper {  
  margin-bottom: 5px; /* Намалено разстояние между слайдера и следващия елемент */ 
   
}
.iframe-container {
    margin: 50px auto 0 auto; /* Увеличава разстоянието от хедера и центрира видеата */
    padding-bottom: 20px; /* Увеличава разстоянието между последното видео и дъното на контейнера */
}

.iframe-container iframe {
    max-width: 300px; /* Увеличава ширината на видеата */
    height: 169px; /* Пропорционална височина */
    margin-bottom: 25px; /* Разстояние между видеата */
}

.iframe-container iframe:last-child {
    margin-bottom: 0; /* Премахва допълнителното разстояние след последното видео */
}

 .footer-nav {       
        font-size: 17px;
    }   

}
@media (max-width: 290px){
    
    .mySwiper2 .swiper-slide {
        width: 147px; /* Фиксирана ширина за снимките */
        height: 210px; /* Фиксирана височина за снимките */
    }
    .iframe-container iframe {    
    max-width: 250px; /* Увеличава ширината на видеата */
    height: 141px; /* Пропорционална височина */    
}   

}

/* Допълнителни стилове за по-големи екрани, за да върнат бутоните в хоризонтална подредба */
@media (min-width: 769px) {
    .footer-nav {
        display: flex; /* Връщане към хоризонтална подредба */
        justify-content: space-between; /* Центриране и разпределение на бутоните */
    }

    .footer-nav a {
        margin: 0 10px; /* Регулиране на разстоянието между бутоните */
    }
}