* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 
 :root {
 --white: #ffffff;
 --black: #000000;
 --yellow: #fec70a;
 --red: #e31e25;
 --gray-dark: #1a1a1a;
 --gray-light: #f5f5f5;
 --gray-medium: #333333;
 --blue: #2a3f93;
 }
 
 body {
 background-color: var(--white);
 color: var(--black);
 line-height: 1.6;
 font-family: 'Inter', sans-serif;
 }
 
 h1, h2, h3, h4, .logo-text, .nav-menu a, .cta-button, .tour-button {
 font-family: 'Montserrat', sans-serif;
 }
 
 
 
 /* Header & Navigation */
 header {
 position: fixed;
 width: 100%;
 top: 0;
 z-index: 1000;
 background-color: rgba(0, 0, 0, 0.97);
 padding: 1rem 2rem;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 backdrop-filter: blur(10px);
 }
 
 .header-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 max-width: 1400px;
 margin: 0 auto;
 }
 
 .logo {
 display: flex;
 align-items: center;
 gap: 12px;
 }
 
 .logo-icon {
 background-color: var(--yellow);
 width: 42px;
 height: 42px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--black);
 font-weight: 800;
 font-size: 1.6rem;
 font-family: 'Montserrat', sans-serif;
 }
 
 .logo-text {
 color: var(--white);
 font-size: 1.9rem;
 font-weight: 800;
 letter-spacing: 0.5px;
 }
 
 .nav-menu {
 display: flex;
 gap: 2.2rem;
 }
 
 .nav-menu a {
 color: var(--white);
 text-decoration: none;
 font-weight: 600;
 font-size: 1.1rem;
 transition: all 0.3s;
 position: relative;
 padding: 0.3rem 0;
 }
 
 .nav-menu a:hover {
 color: var(--yellow);
 }
 
 .nav-menu a::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 2px;
 background-color: var(--red);
 transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 .nav-menu a:hover::after {
 width: 100%;
 }
 
 .mobile-toggle {
 display: none;
 color: var(--white);
 font-size: 1.6rem;
 cursor: pointer;
 transition: transform 0.3s;
 }
 
 .mobile-toggle:hover {
 transform: scale(1.1);
 }
 
 /* Hero Section */
 .hero {
 height: 100vh;
 background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.7)), url('/img/sea1.jpg?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80');
 background-size: cover;
 background-position: center;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: var(--white);
 padding: 0 1rem;
 margin-top: 80px;
 }
 
 .hero-content {
 max-width: 850px;
 animation: fadeInUp 1s ease-out;
 }
 
 @keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(30px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 
 .hero-title {
 font-size: 3.8rem;
 font-weight: 800;
 margin-bottom: 1.2rem;
 line-height: 1.15;
 }
 
 .hero-title span {
 color: var(--yellow);
 }
 
 .hero-subtitle {
 font-size: 1.5rem;
 margin-bottom: 2.5rem;
 font-weight: 300;
 max-width: 700px;
 margin-left: auto;
 margin-right: auto;
 }
 
 .cta-button {
 display: inline-block;
 background-color: var(--red);
 color: var(--white);
 padding: 1.1rem 2.8rem;
 border-radius: 50px;
 text-decoration: none;
 font-weight: 700;
 font-size: 1.2rem;
 transition: all 0.4s;
 box-shadow: 0 6px 20px rgba(227, 30, 37, 0.4);
 border: 2px solid var(--red);
 }
 
 .cta-button:hover {
 background-color: var(--yellow);
 color: var(--black);
 transform: translateY(-5px);
 box-shadow: 0 12px 25px rgba(254, 199, 10, 0.5);
 border-color: var(--yellow);
 }
 
 /* Main Content */
 .container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 2rem 2rem;
 }
 
 .section-title {
 text-align: center;
 font-size: 2.8rem;
 margin-bottom: 3.5rem;
 position: relative;
 font-weight: 800;
 }
 
 .section-title::after {
 content: '';
 display: block;
 width: 120px;
 height: 5px;
 background: var(--yellow) /*linear-gradient(to right, var(--yellow), var(--red))*/;
 margin: 0.8rem auto;
 border-radius: 2px;
 }
 
 .section-title span {
 color: var(--red);
 }
 
 /* Destinations */
 .region-section {
 margin-bottom: 5rem;
 }
 
 .region-title {
 font-size: 2.2rem;
 margin-bottom: 2.2rem;
 padding-bottom: 0.7rem;
 border-bottom: 3px solid var(--yellow);
 display: inline-block;
 font-weight: 700;
 word-break: break-all;
 }
 
 .destinations-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 2.2rem;
 }
 
 .destination-card {
 background-color: var(--white);
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
 transition: all 0.4s;
 height: 100%;
 border: 1px solid rgba(0, 0, 0, 0.05);
 text-decoration:none;
 }
 
 .destination-card:hover {
 transform: translateY(-12px);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }
 
 .destination-img {
 height: 200px;
 width: 100%;
 background-color: var(--gray-light);
 background-size: cover;
 background-position: center;
 transition: transform 0.5s;
 }
 
 .destination-card:hover .destination-img {
 transform: scale(1.05);
 }
 
 .destination-content {
 padding: 1.8rem;
 }
 
 .destination-name {
 font-size: 1.5rem;
 font-weight: 700;
 margin-bottom: 0.7rem;
 color: var(--black);
 font-family: 'Montserrat', sans-serif;
 }
 
 .destination-description {
 color: var(--gray-medium);
 font-size: 0.97rem;
 line-height: 1.7;
 }
 
 /* Новогодние туры */
 .tours-section {
 background-color: var(--gray-light);
 padding: 6rem 2rem;
 }
 
 .tours-container {
 max-width: 1400px;
 margin: 0 auto;
 }
 
 .tours-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 gap: 2.2rem;
 margin-top: 2.5rem;
 }
 
 .tour-card {
 background-color: var(--white);
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
 transition: all 0.4s;
 height: 100%;
 }
 
 .tour-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
 }
 
 .tour-img {
 height: 200px;
 width: 100%;
 background-size: cover;
 background-position: center;
 transition: transform 0.5s;
 }
 
 .tour-card:hover .tour-img {
 transform: scale(1.05);
 }
 
 .tour-content {
 padding: 1.8rem;
 }
 
 .tour-title {
 font-size: 1.4rem;
 font-weight: 700;
 margin-bottom: 0.6rem;
 color: var(--black);
 font-family: 'Montserrat', sans-serif;
 }
 
 .tour-dates {
 color: var(--blue);
 font-weight: 600;
 font-size: 0.95rem;
 margin-bottom: 1.2rem;
 display: inline-block;
 padding: 0.3rem 0.8rem;
 background-color: rgba(42, 63, 147, 0.1) /*rgba(227, 30, 37, 0.1)*/;
 border-radius: 20px;
 }
 
 .tour-button {
 display: inline-block;
 background-color: var(--yellow);
 color: var(--black);
 padding: 0.7rem 1.7rem;
 border-radius: 50px;
 text-decoration: none;
 font-weight: 700;
 font-size: 0.95rem;
 transition: all 0.3s;
 border: 2px solid var(--yellow);
 margin-top: 15px;
 }
 
 .tour-button:hover {
 background-color: var(--red);
 color: var(--white);
 border-color: var(--red);
 }
 
 /* Контакты */
 .contacts-section {
 background-color: var(--gray-dark);
 color: var(--white);
 padding: 6rem 2rem;
 }
 
 .contacts-container {
 max-width: 1400px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 4rem;
 }
 
 .contact-info h3 {
 font-size: 2rem;
 margin-bottom: 2rem;
 color: var(--yellow);
 font-weight: 700;
 }
 
 .contact-item {
 margin-bottom: 2rem;
 display: flex;
 align-items: flex-start;
 gap: 1.2rem;
 }
 
 .contact-icon {
 background-color: var(--red);
 width: 44px;
 height: 44px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 font-size: 1.2rem;
 }
 
 .contact-text {
 font-size: 1.15rem;
 }
 
 .contact-text strong {
 display: block;
 margin-bottom: 0.3rem;
 color: var(--yellow);
 font-weight: 600;
 }
 
 .social-links {
 display: flex;
 gap: 1.2rem;
 margin-top: 2.5rem;
 }
 
 .social-link {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 background-color: var(--yellow);
 color: var(--black);
 font-size: 1.4rem;
 transition: all 0.3s;
 text-decoration: none;
 }
 
 .social-link:hover {
 background-color: var(--red);
 color: var(--white);
 transform: translateY(-5px) scale(1.1);
 }
 
 .map-placeholder {
 background-color: var(--gray-medium);
 height: 320px;
 border-radius: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--white);
 font-weight: 600;
 overflow: hidden;
 position: relative;
 }
 
 .map-placeholder::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(45deg, rgba(254, 199, 10, 0.1), rgba(227, 30, 37, 0.1));
 }
 
 .map-placeholder div {
 z-index: 1;
 text-align: center;
 }
 
 .map-placeholder i {
 font-size: 3.5rem;
 margin-bottom: 1.2rem;
 color: var(--yellow);
 }
 
 /* Footer */
 footer {
 background-color: var(--black);
 color: var(--white);
 padding: 2.5rem 2rem;
 text-align: center;
 }
 
 .footer-content {
 max-width: 1400px;
 margin: 0 auto;
 }
 
 .copyright {
 margin-top: 1.5rem;
 color: #aaa;
 font-size: 0.95rem;
 }
 
 /* Адаптивность */
 @media (max-width: 1100px) {
 .hero-title {
 font-size: 3.2rem;
 }
 
 .section-title {
 font-size: 2.5rem;
 }
 }
 
 @media (max-width: 992px) {
 .hero-title {
 font-size: 2.8rem;
 }
 
 .nav-menu {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.98);
 flex-direction: column;
 padding: 1.5rem 0;
 gap: 1.2rem;
 text-align: center;
 backdrop-filter: blur(10px);
 }
 
 .nav-menu.active {
 display: flex;
 animation: slideDown 0.3s ease-out;
 }
 
 @keyframes slideDown {
 from {
 opacity: 0;
 transform: translateY(-10px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 
 .mobile-toggle {
 display: block;
 }
 
 .destinations-grid {
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }
 }
 
 @media (max-width: 768px) {
 .hero-title {
 font-size: 2.4rem;
 }
 
 .hero-subtitle {
 font-size: 1.2rem;
 }
 
 .section-title {
 font-size: 2.2rem;
 }
 
 .contacts-container {
 grid-template-columns: 1fr;
 gap: 3rem;
 }
 
 .container, .tours-section, .contacts-section {
 padding: 4rem 1.5rem;
 }
 }
 
 @media (max-width: 576px) {
 
 .hero-content br {display:none;}
 
 .header-container {
 padding: 1rem 1.5rem;
 }
 
 .container, .tours-section, .contacts-section {
 padding: 3rem 1rem;
 }
 
 .hero {
 margin-top: 70px;
 }
 
 .destinations-grid, .tours-grid {
 grid-template-columns: 1fr;
 }
 
 .hero-title {
 font-size: 2rem;
 }
 
 .cta-button {
 padding: 1rem 2.2rem;
 font-size: 1.1rem;
 }
 
 .section-title {
 font-size: 1.9rem;
 }
 }


 /* === СТИЛИ ДЛЯ БЛОКА ОТЕЛЕЙ === */
 
 /* Контейнер для отелей */
 .hotels-container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 2rem 1rem;
 }
 
 /* Сетка карточек */
 .hotels-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2rem;
 }
 
 /* Карточка отеля */
 .hotel-card {
 display: block;
 background-color: #ffffff;
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 text-decoration: none;
 color: inherit;
 position: relative;
 border: 1px solid rgba(0, 0, 0, 0.05);
 height: 100%;
 }
 
 .hotel-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
 }
 
 /* Теги на карточке */
 .hotel-card__tags {
 position: absolute;
 top: 1rem;
 left: 1rem;
 z-index: 10;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 }
 
 .hotel-card__tag {
 padding: 0.4rem 1rem;
 border-radius: 20px;
 font-size: 0.85rem;
 font-weight: 600;
 font-family: 'Montserrat', sans-serif;
 white-space: nowrap;
 }
 
 .hotel-card__tag--hit {
 background-color: #e31e25;
 color: #ffffff;
 }
 
 .hotel-card__tag--new {
 background-color: #fec70a;
 color: #000000;
 }
 
 .hotel-card__tag--eco {
 background-color: #4CAF50;
 color: #ffffff;
 }
 
 .hotel-card__tag--luxury {
 background-color: #9C27B0;
 color: #ffffff;
 }
 
 .hotel-card__tag--family {
 background-color: #2196F3;
 color: #ffffff;
 }
 
 .hotel-card__tag--budget {
 background-color: #FF9800;
 color: #ffffff;
 }
 
 /* Изображение отеля */
 .hotel-card__image {
 height: 220px;
 width: 100%;
 overflow: hidden;
 }
 
 .hotel-card__image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.6s ease;
 }
 
 .hotel-card:hover .hotel-card__image img {
 transform: scale(1.05);
 }
 
 /* Контент карточки */
 .hotel-card__content {
 padding: 1.8rem;
 display: flex;
 flex-direction: column;
 height: calc(100% - 220px);
 }
 
 .hotel-card__title {
 font-size: 1.4rem;
 font-weight: 700;
 margin-bottom: 0.5rem;
 color: #000000;
 font-family: 'Montserrat', sans-serif;
 line-height: 1.3;
 flex-shrink: 0;
 }
 
 .hotel-card__location {
 color: #e31e25;
 font-weight: 600;
 font-size: 1rem;
 margin-bottom: 1.2rem;
 display: inline-block;
 padding: 0.3rem 0.8rem;
 background-color: rgba(227, 30, 37, 0.1);
 border-radius: 20px;
 flex-shrink: 0;
 }
 
 /* Особенности отеля */
 .hotel-card__features {
 margin-bottom: 1.5rem;
 flex-grow: 1;
 overflow: hidden;
 }
 
 .hotel-feature {
 display: flex;
 align-items: flex-start;
 gap: 0.7rem;
 margin-bottom: 0.8rem;
 font-size: 0.95rem;
 color: #333333;
 line-height: 1.4;
 }
 
 .hotel-feature i {
 color: #e31e25;
 font-size: 1rem;
 margin-top: 0.2rem;
 flex-shrink: 0;
 width: 18px;
 text-align: center;
 }
 
 .hotel-feature span {
 flex: 1;
 }
 
 /* Кнопка "Подробнее" */
 .hotel-card__button {
 position: relative;
 width: 100%;
 background-color: #e31e25;
 color: #ffffff;
 padding: 0.9rem;
 border-radius: 12px;
 font-weight: 700;
 font-size: 1.1rem;
 font-family: 'Montserrat', sans-serif;
 transition: all 0.3s;
 box-shadow: 0 4px 12px rgba(227, 30, 37, 0.3);
 border: 2px solid #e31e25;
 overflow: hidden;
 z-index: 1;
 cursor: pointer;
 flex-shrink: 0;
 }
 
 .hotel-card__button:hover {
 background-color: #fec70a;
 color: #000000;
 border-color: #fec70a;
 box-shadow: 0 6px 18px rgba(254, 199, 10, 0.4);
 }
 
 .button__animation {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 0;
 height: 0;
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.3);
 transform: translate(-50%, -50%);
 transition: width 0.6s, height 0.6s;
 }
 
 .hotel-card__button:hover .button__animation {
 width: 300px;
 height: 300px;
 }
 
 .button__text {
 position: relative;
 z-index: 2;
 }
 
 /* Адаптивность */
 @media (max-width: 1100px) {
 .hotels-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 1.5rem;
 }
 }
 
 @media (max-width: 768px) {
 .hotels-container {
 padding: 1.5rem 1rem;
 }
 
 .hotels-grid {
 grid-template-columns: 1fr;
 gap: 1.5rem;
 max-width: 500px;
 margin: 0 auto;
 }
 
 .hotel-card__content {
 padding: 1.4rem;
 }
 
 .hotel-card__title {
 font-size: 1.3rem;
 }
 
 .hotel-card__image {
 height: 200px;
 }
 }
 
 @media (max-width: 480px) {
 .hotels-container {
 padding: 1rem;
 }
 
 .hotel-card__content {
 padding: 1.2rem;
 }
 
 .hotel-card__title {
 font-size: 1.2rem;
 }
 
 .hotel-card__image {
 height: 180px;
 }
 
 .hotel-feature {
 font-size: 0.9rem;
 }
 }
 
 
 /* === СТИЛИ ДЛЯ БЛОКА ЗАГОЛОВКА И ФИЛЬТРА === */
 
 /* Контейнер заголовка и фильтра */
 .catalog__top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 3rem;
 padding-bottom: 1.5rem;
 border-bottom: 2px solid #e0e0e0;
 position: relative;
 }
 
 /* Линия под заголовком */
 .catalog__top::after {
 content: '';
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 100px;
 height: 2px;
 background: linear-gradient(90deg, #fec70a, #e31e25);
 }
 
 /* Заголовок */
 .display2 {
 font-size: 2.8rem;
 font-weight: 800;
 font-family: 'Montserrat', sans-serif;
 color: #000000;
 display: flex;
 align-items: center;
 gap: 1rem;
 margin: 0;
 line-height: 1.2;
 }
 
 /* Цветная часть заголовка */
 .display2 span {
 color: #e31e25;
 position: relative;
 display: inline-block;
 }
 
 /* Эффект подчеркивания для заголовка */
 .display2 span::after {
 content: '';
 position: absolute;
 bottom: -5px;
 left: 0;
 width: 100%;
 height: 3px;
 background-color: #fec70a;
 border-radius: 2px;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s ease;
 }
 
 .display2:hover span::after {
 transform: scaleX(1);
 }
 
 /* Кнопка фильтра */
 .catalog__filter {
 position: relative;
 overflow: hidden;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 border: none;
 outline: none;
 padding: 0;
 background: transparent;
 min-width: 140px;
 }
 
 /* Стиль кнопки */
 .btn-red {
 position: relative;
 background-color: #e31e25;
 color: #ffffff;
 padding: 0.9rem 2.2rem;
 border-radius: 50px;
 text-decoration: none;
 font-weight: 700;
 font-size: 1.1rem;
 font-family: 'Montserrat', sans-serif;
 transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 box-shadow: 0 4px 12px rgba(227, 30, 37, 0.3);
 border: 2px solid #e31e25;
 overflow: hidden;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.8rem;
 }
 
 /* Иконка фильтра (добавляется через псевдоэлемент) */
 /*.btn-red::before {
 content: '⇅';
 font-size: 1.2rem;
 font-weight: 700;
 transition: transform 0.3s;
}
 
 .btn-red:hover::before {
 transform: rotate(180deg);
}*/
 
 /* Эффект при наведении */
 .btn-red:hover {
 background-color: #fec70a;
 color: #000000;
 border-color: #fec70a;
 box-shadow: 0 6px 18px rgba(254, 199, 10, 0.4);
 transform: translateY(-2px);
 }
 
 /* Анимационная волна */
 .btn-red__animation {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 0;
 height: 0;
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.3);
 transform: translate(-50%, -50%);
 transition: width 0.6s ease, height 0.6s ease;
 z-index: -1;
 }
 
 .btn-red:hover .btn-red__animation {
 width: 300px;
 height: 300px;
 }
 
 /* Текст кнопки */
 .btn-red__text {
 position: relative;
 z-index: 2;
 transition: transform 0.3s;
 }
 
 .btn-red:hover .btn-red__text {
 transform: translateX(2px);
 }
 
 /* Адаптивность */
 @media (max-width: 1100px) {
 .display2 {
 font-size: 2.4rem;
 }
 }
 
 @media (max-width: 768px) {
 .catalog__top {
 flex-direction: column;
 align-items: flex-start;
 gap: 1.5rem;
 margin-bottom: 2.5rem;
 padding-bottom: 1.2rem;
 }
 
 .display2 {
 font-size: 2rem;
 width: 100%;
 }
 
 .catalog__filter {
 align-self: flex-end;
 }
 
 .btn-red {
 padding: 0.8rem 1.8rem;
 font-size: 1rem;
 }
 }
 
 @media (max-width: 576px) {
 .catalog__top {
 margin-bottom: 2rem;
 padding-bottom: 1rem;
 }
 
 .display2 {
 font-size: 1.8rem;
 }
 
 .display2 span::after {
 height: 2px;
 bottom: -3px;
 }
 
 .btn-red {
 padding: 0.7rem 1.5rem;
 font-size: 0.95rem;
 min-width: 120px;
 }
 
 .btn-red::before {
 font-size: 1rem;
 }
 }
 
 @media (max-width: 400px) {
 .display2 {
 font-size: 1.6rem;
 }
 
 .btn-red {
 width: 100%;
 justify-content: center;
 }
 
 .catalog__top {
 gap: 1.2rem;
 }
 }
 
 
 /* Активное состояние фильтра */
 .btn-red.active {
 background-color: #fec70a;
 color: #000000;
 border-color: #fec70a;
 }
 
 .btn-red.active::before {
 content: '×';
 font-size: 1.4rem;
 }
 
 .btn-red.active:hover {
 background-color: #e31e25;
 color: #ffffff;
 border-color: #e31e25;
 }
 
 


 /* === СТИЛИ ДЛЯ ХЛЕБНЫХ КРОШЕК === */
 
 /* Контейнер хлебных крошек */
 .breadcrumbs {
 margin: 1rem 0 2.5rem;
 padding: 0.8rem 0;
 font-size: 0.95rem;
 color: #666666;
 font-family: 'Inter', sans-serif;
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 0.5rem;
 position: relative;
 
 margin-top: 70px;
 }
 
 /* Линия под крошками */
 .breadcrumbs::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 1px;
 background: linear-gradient(90deg, 
 rgba(254, 199, 10, 0.3) 0%, 
 rgba(227, 30, 37, 0.3) 50%, 
 rgba(254, 199, 10, 0.3) 100%);
 }
 
 /* Ссылки в крошках */
 .breadcrumbs a {
 color: #e31e25;
 text-decoration: none;
 font-weight: 500;
 padding: 0.3rem 0.5rem;
 border-radius: 6px;
 transition: all 0.3s ease;
 position: relative;
 display: inline-flex;
 align-items: center;
 }
 
 /* Эффект подчеркивания для ссылок */
 .breadcrumbs a::after {
 content: '';
 position: absolute;
 bottom: -1px;
 left: 0.5rem;
 right: 0.5rem;
 height: 2px;
 background-color: #fec70a;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s ease;
 border-radius: 1px;
 }
 
 .breadcrumbs a:hover::after {
 transform: scaleX(1);
 }
 
 
 
 /* Разделители */
 .breadcrumbs span {
 color: #cccccc;
 font-weight: 300;
 user-select: none;
 }
 
 /* Последний элемент (текущая страница) */
 .breadcrumbs > span:last-of-type {
 color: #000;
 font-weight: 600;
 padding: 0.3rem 0.5rem;
 }
 
 
 
 
 /* Адаптивность */
 @media (max-width: 768px) {
 .breadcrumbs {
 margin: 0.5rem 0 2rem;
 padding: 0.6rem 0;
 font-size: 0.9rem;
 gap: 0.3rem;
 }
 
 .breadcrumbs a {
 padding: 0.2rem 0.4rem;
 }
 
 .breadcrumbs > span:last-of-type {
 padding: 0.2rem 0.4rem;
 }
 
 .breadcrumbs::after {
 height: 0.5px;
 }
 
 /* Скрываем иконки на мобильных */
 .breadcrumbs a::before {
 display: none;
 }
 }
 
 @media (max-width: 576px) {
 .breadcrumbs {
 font-size: 0.85rem;
 margin: 0.3rem 0 1.5rem;
 margin-top:70px;
 }
 
 .breadcrumbs a {
 max-width: 120px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
 }
 
 @media (max-width: 400px) {
 .breadcrumbs {
 font-size: 0.8rem;
 }
 
 .breadcrumbs a {
 max-width: 100px;
 }
 }
 
 


 .footerLinks {margin-top:40px; }
 .footerLinks a {color:#fff;}