.card-body-custom, .card-body-custom-order {
  flex: 1 1 auto;
}

a #url-copyright {
    color: blue;
}

#layoutSidenav_content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  flex-grow: 1;
  min-height: calc(100vh - 3.625rem);
  margin-left: 0rem;
}

.sidenav-toggled #layoutSidenav_content:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1037;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

#layoutSidenav_content {
    margin-left: 0;
    /*transition: margin 0.15s ease-in-out;*/
}

.sidenav-toggled #layoutSidenav_content {
    margin-left: 0;
}
.sidenav-toggled #layoutSidenav_content:before {
    display: none;
}

.nav-fixed #layoutSidenav_content {
    padding-left: 0;
    top: 3.625rem;
}

/*.layout-rtl #layoutSidenav_content {*/
/*    margin-left: 0;*/
/*    margin-right: 0rem;*/
/*}*/


/*.layout-rtl #layoutSidenav_content {*/
/*    margin-right: 0;*/
/*    transition: margin 0.15s ease-in-out;*/
/*}*/


/*.layout-rtl.sidenav-toggled #layoutSidenav_content {*/
/*    margin-right: 0rem;*/
/*}*/

/*.layout-rtl.nav-fixed #layoutSidenav_content {*/
/*    padding-left: 0;*/
/*    padding-right: 0rem;*/
/*}*/

.mt-order {
  margin-top: -12rem !important;
}

.nav-wizard .nav-link .wizard-step-icon-custom {
  /*
  font-weight: 400;
  font-size: 0.875rem;
  */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  margin-right: 1rem;
  border-radius: 0.35rem;
  background-color: #69707a;
  color: white;
}

.nav-wizard .nav-link .wizard-step-text-name-custom {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #69707a;
}

.nav-wizard .nav-link.active .wizard-step-text-name-custom {
  color: #fff;
}

.nav-wizard .nav-link.active .wizard-step-icon-custom {
  background-color: #fff;
  color: #ff5b2a;
}


/* Для карты */
#my-map  {
    width: 100%; /* Занимает всю ширину родительского элемента */
    height: 550px; /* Высота карты, можно изменить по вашему усмотрению */
}
#my-map2  {
    width: 100%; /* Занимает всю ширину родительского элемента */
    height: 450px; /* Высота карты, можно изменить по вашему усмотрению */
    cursor: pointer;
}

	.cluster-icon-image {
	  width: 100%;
	  height: 100%;
	}

	.number {
	  position: absolute;
	  top: 12px;  /* Вы можете настроить это значение, чтобы разместить число, как вам нужно */
	  left: 50%;
	  transform: translateX(-50%);
	  color: #000;  /* Цвет числа */

	  font-size: 11px;  /* Размер шрифта числа */
	}






/* Стили для индикаторов карусели */
.carousel-indicators [data-bs-target] {
    width: 30px; /* Ширина индикатора */
    height: 12px; /* Высота индикатора */
    border-radius: 0; /* Убрать скругление углов */
    margin-right: 2px; /* Расстояние между индикаторами */
    margin-left: 0px;
    opacity: 1;


    border: 1px solid transparent; /* Прозрачная рамка для всех кнопок */

}

.carousel-indicators{

        margin-bottom: 1.6rem;

}

.carousel-indicators button[data-color="#FFFFFF"] {
    background-color: #FFFFFF;
}
.carousel-indicators button[data-color="#005cff"] {
    background-color: #005cff;
}
.carousel-indicators button[data-color="#fa1d22"] {
    background-color: #fa1d22;
}
.carousel-indicators button[data-color="#252525"] {
    background-color: #252525;
}
.carousel-indicators button[data-color="#3a4152"] {
    background-color: #3a4152;
}
.carousel-indicators button[data-color="#969696"] {
    background-color: #969696;
}
.carousel-indicators button[data-color="#969470"] {
    background-color: #969470;
}
.carousel-indicators button[data-color="#969470"] {
    background-color: #969470;
}
.carousel-indicators button[data-color="#2d5031"] {
    background-color: #2d5031;
}
.carousel-indicators button[data-color="#8ee83d"] {
    background-color: #8ee83d;
}
.carousel-indicators button[data-color="#ff5b9d"] {
    background-color: #ff5b9d;
}
.carousel-indicators button[data-color="#fc7c40"] {
    background-color: #fc7c40;
}
.carousel-indicators button[data-color="#ffe119"] {
    background-color: #ffe119;
}


.carousel-indicators button[data-color="#FFFFFF"].active {
        border: 1px solid #000000;
}
.carousel-indicators button[data-color="#005cff"].active {
        border: 1px solid #000000;
}
.carousel-indicators button[data-color="#fa1d22"].active {
        border: 1px solid #000000;
}
.carousel-indicators button[data-color="#252525"].active {
    border: 1px solid #FFFFFF;
}
.carousel-indicators button[data-color="#3a4152"].active {
    border: 1px solid #FFFFFF;
}
.carousel-indicators button[data-color="#969696"].active {
    border: 1px solid #000000;
}
.carousel-indicators button[data-color="#969470"].active {
    border: 1px solid #000000;
}
.carousel-indicators button[data-color="#2d5031"].active {
    border: 1px solid #000000;
}
.carousel-indicators button[data-color="#8ee83d"].active {
    border: 1px solid #000000;
}
.carousel-indicators button[data-color="#ff5b9d"].active {
    border: 1px solid #000000;
}
.carousel-indicators button[data-color="#fc7c40"].active {
    border: 1px solid #000000;
}
.carousel-indicators button[data-color="#ffe119"].active {
    border: 1px solid #000000;
}

.carousel-inner {
    border: 1px solid #ccc; /* Черная рамка шириной 2 пикселя */
     border-radius: 0.7rem; /* Закругление углов */
    /* Другие стили, если нужны */
}



.carousel-control-prev-icon{
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff' stroke='%23000' stroke-width='0.5'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
    background-size: 100% 100%; /* Можно настроить размер */
    width: 30px; /* Ширина иконки */
    height: 30px; /* Высота иконки */
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff' stroke='%23000' stroke-width='0.5'><path d='M4.646 1.646a.5.5 0 0 0 0 .708L10.293 8l-5.647 5.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0z'/></svg>");    background-size: 100% 100%; /* Можно настроить размер */
    width: 30px; /* Ширина иконки */
    height: 30px; /* Высота иконки */
}



@keyframes rollDice {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

.dice-img {
  cursor: pointer; /* Курсор в виде руки для указания на кликабельность */
  width: 30px; /* или ваш размер */
  height: 30px; /* или ваш размер */
}

.dice-img.roll {
  animation: rollDice 0.7s ease-in-out; /* 1s - длительность анимации */
}


.dice-img:hover {
  /* Увеличение яркости или контрастности */
  filter: brightness(110%) contrast(110%);


}



.bg-gradient-primary-to-secondary-orange {
  background-color: #ff5b2a !important;
  background-image: linear-gradient(135deg, #ffa84c 0%, #ff9020 15%, #ff5b2a 100%) !important;

}
/*
.bg-gradient-primary-to-secondary-orange {
  background-color: #ff5b2a;
  background-image: url('/img/qwe.png'), linear-gradient(135deg, #ffa84c 0%, #ff9020 15%, #ff5b2a 100%);
  background-size: 50%, auto;
  background-repeat: repeat;
} */

.bg-gradientttt {
  background-color: #ff5b2a; /* Fallback color */
  background-image: url('/img/dark_background.png'), linear-gradient(135deg, #ffa84c 0%, #ff9020 15%, #ff5b2a 100%);
  background-size: 12%, auto; /* Уменьшает размер изображения в два раза */
  background-repeat: repeat; /* Повторяет изображение по всему элементу */
}

.bg-container-color {
  background-color: #131516; /* Fallback color */
}

.container-background {
  background-color: #282A2B;
}

.footer-background {
  background-color: #0F1111;
}

.header-background {
  background-color: #0F1111;
}


.card:not([class*="bg-"]) .card-header {
    background-color: #272727;
    color: #ff5b2a;
}

.card{
    background-color: #131516;
    box-shadow: none;

}

.card-header{
    background-color: #131516;
    box-shadow: none;


}

.card-header-custom{
    background-color: #282828;
    box-shadow: none;

    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: none;

    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;
}

.card-header-custom-about{
    background-color: #282828;
    box-shadow: none;

    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: none;

    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;
}


.card-body-custom {
    background-color: #131516;
    color: #69707A;
    box-shadow: none;
     border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0 0 0.35rem 0.35rem;
}

.card-body-custom-about {
    flex: 1 1 auto;
    padding: 1.35rem 1.35rem;
    background-color: #131516;
    color: #69707A;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0 0 0.35rem 0.35rem;
}

.card-body-custom-order {
    background-color: #272727;
    color: #69707A;
    box-shadow: none;

    border-radius: 0 0 0.35rem 0.35rem;
}




.btn-primary {
  color: #fff;
  background-color: #ff5b2a;
  border-color: #ff5b2a;
}

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

.carousel-inner {
  border: none;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #ff5b2a;
}


.nav-wizard .nav-link .wizard-step-icon {
  background-color: #fff;
  color: #ff5b2a;
}

.nav-wizard .nav-link .wizard-step-text .wizard-step-text-name{
  color: #ff5b2a;
}

.nav-wizard .nav-link.active .wizard-step-icon {
    color: #ff5b2a;
}

.text-primary-orange{
    color: #ff5b2a;
}
.card-title {
    color: rgba(255, 255, 255, 0.85) !important;
}
hr {
  opacity: 0.65;
}
.form-control:focus, .dataTable-input:focus {
    color: #ececec;
    background-color: #272727;
    box-shadow: 0 0 0 0.25rem rgba(255, 91, 42, 0.25);
}

.form-select:focus, .dataTable-selector:focus {
    background-color: #272727;
    box-shadow: 0 0 0 0.25rem rgba(255, 91, 42, 0.25);
}

.form-control, .dataTable-input {
    background-color: #272727;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.bg-primary-orange {
  background-color: #ff5b2a;
}
.form-select, .dataTable-selector {
    color: #ececec;
    background-color: #272727;
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.form-control::placeholder, .dataTable-input::placeholder {
  color: #69707a;
  opacity: 1;
}
.form-control, .dataTable-input {

  color: #ececec;

}
.form-control:disabled, .dataTable-input:disabled, .form-control[readonly], [readonly].dataTable-input {
  background-color: #272727;
  opacity: 0.4;
}
.nav-link {
  color: #69707A
}
.nav-link:hover, .nav-link:focus {
  color: #ff5b2a;
}

footer a {
    text-decoration: none !important;  /* Убирает подчеркивание у всех ссылок в футере */
}

footer a svg {
    fill: rgba(255, 255, 255, 0.75);
}
footer a svg path {
    fill: rgba(255, 255, 255, 0.75);
}



footer a:hover,
footer a:hover svg,
footer a:hover svg path {
    fill: #ff5b2a; /* Цвет иконок при наведении */
    color: #ff5b2a !important ;
}

.footer-admin .btn-primary-custom {
    color: #FFFFFF !important;
}
.footer-admin .btn-primary-custom:hover {
    color: #000 !important;
}
.footer-admin .btn-primary-custom:focus {
    color: #000 !important;
}

.text-summary {

    color: #fff !important;
    opacity: 0.3 !important;
    margin-bottom: 0.1rem !important;
}
.text-orange-price {
    color: #ff5b2a; !important;
}

.about-svg a {
    text-decoration: none !important;  /* Убирает подчеркивание у всех ссылок в футере */
}

.about-svg a:hover,
.about-svg a:hover svg,
.about-svg a:hover svg path,
.about-svg a:hover div {
    fill: #ff5b2a; /* Цвет иконок при наведении */
    color: #ff5b2a !important;
}


.about-svg a {
    text-decoration: none !important;  /* Убирает подчеркивание у всех ссылок в футере */
}

.about-svg a svg {
    fill: rgba(255, 255, 255, 0.75);
}
.about-svg a svg path {
    fill: rgba(255, 255, 255, 0.75);
}

.element-contacts{

  height: 1.75rem;
  width: 1.75rem;

}

.custom-modal-body {
    max-height: calc(100vh - 210px); /* 100vh - 210px оставляет место для header и footer */
    overflow-y: auto; /* Добавляет скролл к телу модального окна, если контент переполняется */
}

        .price-delivery {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            text-align: center;
            background-color: #f8f9fa;
            margin-top: 10px;
        }



                .delivery-card {
            cursor: pointer;
            transition: transform 0.3s;
        }
        .delivery-card.active {
            transform: scale(1.1);
            border-color: #ff5b2a;
        }
        /*.delivery-logo {*/
        /*    height: 50px;*/
        /*    width: auto;*/
        /*}*/



       /* Стиль для изменения курсора на руку при наведении */
        .leaflet-marker-icon.custom-cursor-marker {
            cursor: grab !important;
        }

        /* Стиль для изменения курсора на символ перетаскивания при захвате */
        .leaflet-marker-icon.custom-cursor-marker:active {
            cursor: grabbing !important;
        }






/*.delivery-price {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 100%;*/
/*}*/

/*.price {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    padding: 3px 12px;*/
/*    border-radius: 5px;*/
/*    font-weight: bold;*/
/*    border: 1px solid #939393;*/
/*    justify-content: center;*/
/*}*/

/*.price-container {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    flex-wrap: wrap;*/
/*    text-align: center;*/
/*}*/

/*.price-value, .devider, .delivery-time {*/
/*    text-align: center;*/
/*}*/

/*.price-value, .devider {*/
/*    white-space: nowrap; !* Запрещаем перенос на новую строку *!*/
/*}*/



/*
#testes {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 650px;
    position: relative;
    width: 100%;
}


#preview_model {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    position: relative;
    width: 100%;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}
*/








/*
.dice-container {
    perspective: 1000px;
}

.dice-img {
    width: 50px;
    height: 50px;
    animation: rollDice 6s infinite ease-in-out;  Увеличиваем продолжительность и добавляем функцию времени
}

@keyframes rollDice {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    25% { transform: rotateX(340deg) rotateY(380deg) rotateZ(360deg); }
    50% { transform: rotateX(700deg) rotateY(740deg) rotateZ(720deg); }
    75% { transform: rotateX(1060deg) rotateY(1100deg) rotateZ(1080deg); }
    100% { transform: rotateX(1420deg) rotateY(1460deg) rotateZ(1440deg); }
}

*/
/* Дополнительные стили для других цветов */

/* Стили для активного индикатора
.carousel-indicators .active {
    background-color: #000;
}*/



    .order-header {
      font-size: 1.7rem;
      font-weight: bold;
      color: #555;
    }
    .order-number {
      font-size: 1.8rem;
      font-weight: bold;
      color: #ff5b2a;
      cursor: pointer;
    }
    .order-number:hover {
      text-decoration: underline;
    }
    .status-text {
      font-size: 1.25rem;
      color: #555;
    }

    .popover {
      position: absolute;
      z-index: 1000;
      padding: 0.5rem 1rem;
      background-color: #343a40;
      color: #fff;
      border-radius: 0.25rem;
      display: none;
    }



/* status page */

#tracking {
    background: #131516;
    margin-bottom: 1rem;
}
.tracking-detail {
    padding: 3rem 0;
}

[class*="tracking-status-"] p {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}
[class*="tracking-status-"] {
    padding: 1.6rem 0;
}

.tracking-list {
    border: 1px solid #e5e5e5;
}

.tracking-item,
.tracking-item-pending {
    border-left: 4px solid #ff5b2a; /* Оранжевая полоска */
    position: relative;
    padding: 2rem 1.5rem 0.5rem 2.5rem;
    font-size: 0.9rem;
    margin-left: 10rem; /* Фиксированное значение для отступа */
    min-height: 5rem;
}
.tracking-item:last-child,
.tracking-item-pending:last-child {
    padding-bottom: 4rem;
}

.tracking-item .tracking-date,
.tracking-item-pending .tracking-date {
    position: absolute;
    left: -10rem;
    width: 7.5rem;
    text-align: right;
    margin-bottom: 0.5rem;
}

.tracking-item .tracking-date span,
.tracking-item-pending .tracking-date span {
    color: #888;
    font-size: 85%;
    padding-left: 0.4rem;
    display: block;
}

.tracking-item .tracking-content,
.tracking-item-pending .tracking-content {
    padding: 0;
    background-color: transparent;
    border-radius: 0.5rem;
}

.tracking-item .tracking-content span,
.tracking-item-pending .tracking-content span {
    display: block;
    color: #767676;
    font-size: 13px;
}

.tracking-item .tracking-content .status-text,
.tracking-item-pending .tracking-content .status-text {
    color: #ff5b2a; /* Оранжевый цвет текста основного статуса */
    font-weight: bold;
    font-size: 17px;
}

.tracking-item .tracking-icon,
.tracking-item-pending .tracking-icon {
    position: absolute;
    left: -0.7rem;
    width: 1.1rem;
    height: 1.1rem;
    text-align: center;
    border-radius: 50%;
    font-size: 1.1rem;
    background-color: #ff5b2a;
    color: #fff;
}

.tracking-item .tracking-icon.status-current,
.tracking-item-pending .tracking-icon.status-current {
    width: 1.9rem;
    height: 1.9rem;
    left: -1.1rem;
    color: #ff5b2a; /* Оранжевый цвет для текущего статуса */
    font-size: 0.6rem;
    margin-top: -2px;
}

.tracking-item .tracking-icon.status-intransit,
.tracking-item-pending .tracking-icon.status-intransit {
    color: #ff5b2a; /* Оранжевый цвет */
    font-size: 0.6rem;
    margin-top: 4px;
}

.tracking-item .tracking-icon.status-current.blinker,
.tracking-item-pending .tracking-icon.status-current.blinker {
    border: 7px solid #424242;
    animation: blink 1s infinite;
}

@keyframes blink {
    50% { border-color: #131516; }
}

@media (max-width: 576px) {
    .tracking-item,
    .tracking-item-pending {
        margin-left: 3rem; /* Для экранов меньше 576px */
    }

    /*.tracking-item .tracking-date,*/
    /*.tracking-item-pending .tracking-date {*/
    /*    left: -8rem; !* Корректировка для даты, чтобы она оставалась в рамках *!*/
    /*}*/
}
/* status page end */


/*error page*/
.error {
  color: #ff5b2a;
  font-size: 7rem;
  position: relative;
  line-height: 1;
  width: 12.5rem;
}

/*error page end*/

#gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.gallery-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.gallery-item {
    display: block;
    overflow: hidden;
}
.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}


#carouselExampleFade .carousel-inner {
    width: 100vw;
    height: calc(100vh - 10.125rem); /* Высота экрана минус высота футера */
    border-radius: 0;

}

#carouselExampleFade  .carousel-cards .card:hover {
    transform: none;
}

#carouselExampleFade .carousel-inner .carousel-item {
    width: 100%;
    height: 100%;
}

#carouselExampleFade .carousel-inner .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Базовые стили для стрелок */
#carouselExampleFade .carousel-control-prev,
#carouselExampleFade .carousel-control-next {
    width: 20%;
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}

#carouselExampleFade .carousel-control-prev:hover,
#carouselExampleFade .carousel-control-next:hover {
    opacity: 0.9;
}

/* SVG-иконки стрелок */
#carouselExampleFade .carousel-control-prev svg {
    margin-right: 3em;
    width: 2rem;
    height: 2rem;
}

#carouselExampleFade .carousel-control-next svg {
    margin-left: 3em;
    width: 2rem;
    height: 2rem;
}

/* Убираем фокус и обводку */
#carouselExampleFade .carousel-control-prev:focus,
#carouselExampleFade .carousel-control-next:focus {
    outline: none;
    box-shadow: none;
    opacity: 0.9;
}


#carouselExampleFade .carousel-control-prev:active,
#carouselExampleFade .carousel-control-next:active {
    outline: none; /* Убираем выделение */
    box-shadow: none; /* Убираем тень */
    opacity: 1; /* Полностью видимая стрелка при нажатии */
}

#carouselExampleFade .carousel-caption {
    user-select: none; /* Запрет выделения текста */
}

#carouselExampleFade .carousel-caption {
    position: absolute;
    top: 10%;
    right: 10%;
    left: 10%;
    text-align: center;
    color: white;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    z-index: 10;
}

#carouselExampleFade .carousel-caption .caption-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5em;
}

#carouselExampleFade .carousel-caption .caption-text {
    font-size: 1.25rem;
    line-height: 1.5;
}

/* Ограничение высоты карусели на мобильных устройствах */
@media (max-width: 768px) {
    #carouselExampleFade .carousel-inner {
        height: 30vh; /* Высота карусели на мобильных устройствах */
        width: 100%;
    }

    #carouselExampleFade .carousel-inner .carousel-item {
        height: 30vh;
    }

    #carouselExampleFade .carousel-inner .carousel-item img {
        height: 30vh;
        object-fit: cover;
    }

    #carouselExampleFade .carousel-caption {
        top: 5%;
    }

    #carouselExampleFade .carousel-caption .caption-title {
        font-size: 1.3rem;
        top: 30%;
    }

    #carouselExampleFade .carousel-caption .caption-text {
        font-size: 0.9rem;
        top: 30%;
    }
}

.custom-button {
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /*color: white;*/
    font-weight: 500;
    /*transition: all 0.3s ease;*/
    border-radius: 0;

}

.custom-button:hover {
    background-color: rgba(255, 255, 255, 0.62);
    color: black;

}

/* Убираем hover на сенсорных устройствах */
@media (hover: none) {
    .custom-button:hover {
        background-color: transparent; /* Убираем эффекты hover */
        color: inherit;
    }

    .custom-button:active {
        background-color: rgba(255, 255, 255, 0.2); /* Добавьте желаемый эффект */
        transform: scale(0.98); /* Лёгкий эффект нажатия */
        transition: transform 0.1s ease;
    }

}

/* Эффект "моргания" при нажатии */

.custom-button:focus {
    outline: none;
    box-shadow: none;
}
/* Меньшие кнопки для маленьких экранов */
@media (max-width: 576px) {
    .custom-button {
          padding: 0.5rem 0.75rem;
          font-size: 0.8rem;
    }
}
#carouselExampleFade  {
    overflow: clip; /* Карточки видны */
}


#carouselExampleFade .carousel-inner {
    overflow: visible; /* Карточки видны */
}
.carousel-cards {
    position: absolute;
    bottom: 10%; /* Расположены внизу слайда */
    left: 0;
    right: 0;
    user-select: none;
    z-index: 10; /* Достаточно высокий, чтобы быть поверх изображений */
}

/* Очень большие экраны (более 1600px) */
@media (min-width: 1600px) {
    .carousel-cards {
        margin-left: 12rem; /* Большие отступы */
        margin-right: 12rem;



    }
}

/* Широкие экраны (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .carousel-cards {
        margin-left: 7rem;
        margin-right: 7rem;
    }
}

/* Средние экраны (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .carousel-cards {
        margin-left: 2rem;
        margin-right: 2rem;
    }
}

/* Маленькие экраны (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .carousel-cards {
        margin-left: 2rem;
        margin-right: 2rem;

    }
}

/* Очень маленькие экраны (до 479px) */
@media (max-width: 479px) {
    .carousel-cards {
        margin-left: 1rem;
        margin-right: 1rem;

    }
}



.carousel-cards .row {
    flex-wrap: nowrap;
    justify-content: center;
    /*gap: 1rem;*/

}



.carousel-cards .card {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease;
}

.carousel-cards .card:hover {
    transform: translateY(-10px);
}

@media (max-width: 768px) {

    #carouselExampleFade .carousel-control-prev,
    #carouselExampleFade .carousel-control-next {
        bottom: 60%;
    }

    .fs-my {
        font-size: 1.6rem !important;
    }

    #carouselExampleFade {

        height: calc(90vh); /* То же самое для мобильных */

    }
/*    #carouselExampleFade .carousel-inner {*/
/*    width: 100vw;*/
/*    height: calc(100vh  10.125rem); !* Высота экрана минус высота футера *!*/
/*    border-radius: 0;*/
/*}*/

    .carousel-cards {
        position: static; /* Карточки опускаются вниз */
        margin-top: 0.5rem;
    }

    .carousel-cards .row {
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .carousel-cards .card {
        /*margin-bottom: 1rem;*/
        width: 100%;
        max-width: none;

        /* Новые стили для уменьшения высоты */
        padding: 0.3rem; /* Уменьшаем внутренние отступы */
        font-size: 0.8rem; /* Уменьшаем шрифт */
    }

    .carousel-cards .card i {
        font-size: 1rem; /* Уменьшаем размер иконки */
    }

    .carousel-cards .card h3 {
        font-size: 0.8rem; /* Уменьшаем размер заголовка */
        /*margin-top: 0.5rem;*/
    }

}