/* Feature List Styles */
.feature-item { display: flex; align-items: center; margin-bottom: 2rem; }
.feature-item img { max-width: 100%; border-radius: 8px; }
.feature-item .text-content { padding: 1.5rem; }

/* Center and stretch mobile images in "Create Interactive Flipbooks and More" */
@media (max-width: 767px) {
    .feature-item .mobile-img {
        display: block;
        width: 100% !important; /* Растягиваем на всю ширину окна */
        height: auto; /* Сохраняем пропорции */
        object-fit: contain; /* Предотвращаем искажение */
        margin: 0; /* Убираем отступы для единообразия */
    }

    .feature-item img {
        max-width: 100%; /* Убеждаемся, что изображения не выходят за пределы */
    }
}

/* Responsive Images */
.desktop-img { display: block; }
.mobile-img { display: none; }
@media (max-width: 991px) {
    .desktop-img { display: none; }
    .mobile-img { display: block; }
}

/* Единообразие с героическим блоком (например, тень и скругление) */
.feature-item .mobile-img {
    border-radius: 3px; /* Соответствует скруглению в hero-video-container */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Тень, как у основного скриншота */
}


/* Базовые стили */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

h1, h2, h3, .display-5 {
    font-weight: 700;
}

/* Навигация */
.navbar {
    padding: 0.5rem 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
}

.navbar-brand img {
    height: 40px;
}

.navbar-nav .nav-item {
    border-bottom: 1px solid #dee2e6;
    width: 100%;
}

.navbar-nav .nav-item:last-child {
    border-bottom: none;
}

.navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    width: 100%;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    opacity: 1;
    visibility: visible;
}

.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.dropdown-item .bi {
    margin-right: 0.75rem;
    font-size: 1.2rem;
    width: 24px;
}

@media (max-width: 991px) {
    .navbar-collapse {
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        box-shadow: none;
        border: none;
        background-color: #f8f9fa;
        padding-left: 1rem;
    }

    .dropdown-toggle::after {
        float: right;
        margin-top: 0.5rem;
    }

    .navbar-nav .dropdown .dropdown-menu .nav-link {
        padding-left: 2rem;
    }
}

/* Кнопки */
.btn-primary {
    background-color: #ff5733;
    border-color: #ff5733;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #e64a19;
    border-color: #e64a19;
}

.btn-outline-primary {
    color: #0d6efd;
    border-color: #0d6efd;
}

.btn-outline-primary:hover {
    background-color: #0d6efd;
    color: #fff;
}

.btn-outline-light {
    color: #000000;
    border-color: #ffffff;
}

.btn-outline-light:hover {
    background-color: #ffffff;
    color: #ff5733;
}

/* Футер */
footer {
    background-color: #343a40;
    color: #fff;
}

footer a {
    color: #fff;
}

footer a:hover {
    color: #dee2e6;
}

footer .text-white-50 {
    color: rgba(255, 255, 255, 0.5);
}

.footer-links a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-links a:hover {
    color: #0d6efd;
}

.footer-socials {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.footer-socials a {
    color: #adb5bd;
    font-size: 1.5rem;
}

.footer-socials a:hover {
    color: #0d6efd;
}

hr {
    border-color: rgba(255,255,255,0.2);
}

/* Адаптивность */
.language-flag {
    width: 30px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@media (max-width: 576px) {
    .language-flag {
        width: 20px;
    }
}

@media (max-width: 767px) {
    .navbar-brand img {
        height: 28px;
    }
}

/* Общие анимации */
[data-anim-section] {
    opacity: 0;
    transition: opacity 0.5s ease;
}

[data-anim-section].visible {
    opacity: 1;
}

[data-anim-item] {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-anim-section].visible [data-anim-item] {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Section Background */
.hero-section { 
    position: relative; 
    overflow: hidden; 
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
	/* padding-top:80px !important; */
}
.hero-section .container { position: relative; z-index: 2; }

/* Hero Text and Buttons */
.hero-section .text-primary { color: #ffffff !important; }
.hero-section .display-5 { color: #000000 !important; }
.hero-section .text-white-50 { color: #333333 !important; }
.hero-section .btn-primary { background-color: #ff5733 !important; border-color: #ff5733 !important; color: #ffffff !important; }
.hero-section .btn-primary:hover { background-color: #e64a19 !important; border-color: #e64a19 !important; }
.hero-section .btn-outline-light { color: #000000 !important; border-color: #ffffff !important; }
.hero-section .btn-outline-light:hover { background-color: #ffffff !important; color: #ff5733 !important; }


/* Добавление в /css/2025/features.css */


  /* 1. Стили для разделителя-точки */
  .breadcrumb-item + .breadcrumb-item::before {
    float: none;
    font-family: 'bootstrap-icons';
    content: '\f289'; 
    vertical-align: middle;
    font-size: 0.4rem;
    color: #6c757d; 
    padding: 0 0.25rem; 
  }

  /* 2. Стили для активного элемента (чтобы "Pricing" был черным) */
  .breadcrumb-item.active {
    color: #ff5733;
  }

  /* 
    3. НОВОЕ: Стилизуем ссылку "Home", чтобы она не выглядела "обычной".
       Убираем стандартный синий цвет и подчеркивание.
  */
  .breadcrumb-item a {
   /* color: var(--bs-body-color);  Делаем цвет таким же, как у основного текста */
    text-decoration: none;      /* Убираем подчеркивание */
  }


  .breadcrumb-item a:hover {
   /* color: var(--bs-primary);    При наведении цвет меняется на основной синий (как у кнопок) */
    text-decoration: underline;/*  И появляется подчеркивание */
  }
  
.btn-no-wrap {
  white-space: nowrap;
}
header.sticky-top {
  z-index: 1030; /* Bootstrap's default is 1020. This value is higher than the table's z-index. */
}