@media (max-width: 575.98px) {
    .logo-header{
        height: 3rem;
    }
    .carousel-control-prev{
        display: none;
    }
    
    .carousel-control-next{
        display: none;
    }
    .service-text{
        font-size: .8rem;
    }
    
    .lead{
        font-size: .9rem;
    }
    
    .banner-sub-h{
        font-size: .97rem;
    }

}

@media (min-width: 576px) {
    .logo-header{
        height: 3.5rem;
    }
    
    .carousel-control-prev{
        display: none;
    }
    
    .carousel-control-next{
        display: none;
    }
    .service-text{
        font-size: 1rem;
    }
    
    .banner-sub-h{
        font-size: 1rem;
    }

}

@media (min-width: 768px){
    .logo-header{
        height: 3.5rem;
    }
        .carousel-control-prev{
        display: none;
    }
    
    .carousel-control-next{
        display: none;
    }
        .banner-sub-h{
        font-size: 1.25rem;
    }
}

@media (min-width: 992px){ 
    .logo-header{
        height: 5rem;
    }
    
    .btn-mainmenu{
        background: url(/p/9c890cb1ac06c03aafdabdcdee12b082dbf2515dcba9ad1e88b9227e0663f5e9.svg);
        background-size: cover;
        height: 8rem;
        min-width: 9rem;
        text-transform: none;
    }
    
    .btn-mainmenu .mainmenu-ic{
            height: 4rem;
            /* -webkit-filter: brightness(0) saturate(100%) invert(48%) sepia(35%) saturate(1599%) hue-rotate(334deg) brightness(87%) contrast(109%); */
            /* filter: brightness(0) saturate(100%) invert(48%) sepia(35%) saturate(1599%) hue-rotate(334deg) brightness(87%) contrast(109%); */
    }
    
    .btn-mainmenu p{
        font-family: 'PT Sans Narrow';
        margin-top: 1.5rem;
        margin-bottom: 0;
        font-size: 1rem;
    }
    .service-text{
        font-size: .69rem;
    }
    
    .lead{
        font-size: .9rem;
        font-weight: 600;
    }
    
        .carousel-control-prev{
        display: flex;
    }
    
    .carousel-control-next{
        display: flex;
    }
    
    .banner-h{
        font-size: 1.5rem;
    }
    
    .banner-sub-h{
        font-size: 1rem;
    }
}

@media (min-width: 1200px){
    .logo-header{
        height: 5rem;
    }
    
    .btn-mainmenu{
        background: url(/p/9c890cb1ac06c03aafdabdcdee12b082dbf2515dcba9ad1e88b9227e0663f5e9.svg);
        background-size: cover;
        height: 7.5rem;
        min-width: 7.5rem;
        text-transform: none;
    }
    
    .btn-mainmenu .mainmenu-ic{
            height: 3.5rem;
            /* -webkit-filter: brightness(0) saturate(100%) invert(48%) sepia(35%) saturate(1599%) hue-rotate(334deg) brightness(87%) contrast(109%); */
            /* filter: brightness(0) saturate(100%) invert(48%) sepia(35%) saturate(1599%) hue-rotate(334deg) brightness(87%) contrast(109%); */
    }
    
    .btn-mainmenu p{
        font-family: 'PT Sans Narrow';
        margin-top: 1.5rem;
        margin-bottom: 0;
        font-size: 0.9rem;
    }
    
    .service-text{
        font-size: .8rem;
    }

    .lead{
        font-size: 1.25rem;
        font-weight: 400;
    }
    
        .carousel-control-prev{
        display: flex;
    }
    
    .carousel-control-next{
        display: flex;
    }
    
    .banner-h{
        font-size: 1.825rem;
    }
    
    .banner-sub-h{
        font-size: 1.25rem;
    }
}

@media (min-width: 1400px) {
    .btn-mainmenu{
        background: url(/p/9c890cb1ac06c03aafdabdcdee12b082dbf2515dcba9ad1e88b9227e0663f5e9.svg);
        background-size: cover;
        height: 8rem;
        min-width: 9rem;
        text-transform: none;
    }
    
    .btn-mainmenu .mainmenu-ic{
            height: 4rem;
            /* -webkit-filter: brightness(0) saturate(100%) invert(48%) sepia(35%) saturate(1599%) hue-rotate(334deg) brightness(87%) contrast(109%); */
            /* filter: brightness(0) saturate(100%) invert(48%) sepia(35%) saturate(1599%) hue-rotate(334deg) brightness(87%) contrast(109%); */
    }
    
    .btn-mainmenu p{
        font-family: 'PT Sans Narrow';
        margin-top: 1.5rem;
        margin-bottom: 0;
        font-size: 1rem;
    }
    
    .service-text{
        font-size: 1rem;
    }
        .carousel-control-prev{
        display: flex;
    }
    
    .carousel-control-next{
        display: flex;
    }
}



.bg-orange{
    background: #e85621 !important;
    color: #ffffff;
}

.text-orange{
    color: #e85621;
}

.btn-orange{
    --bs-btn-bg: #e85621;
    --bs-btn-color: #e85621;
    --bs-btn-border-color: #e85621;
    color: #ffffff;
}

.btn-orange:hover{
    color: #ffffff;
    background: #e85621;
    border-color: #e85621;
}

.btn-orange:active{
    color: #ffffff !important;
    background: #e85621 !important;
    border-color: #e85621 !important;
}

.btn-outline-orange {
    --bs-btn-color: #e85621;
    --bs-btn-border-color: #e85621;
}

.btn-outline-orange:hover {
    color: #e85621;
    border-color: #e85621;
}

.btn-top-service{
    --bs-btn-padding-x: .5rem;  
}



.btn-mainmenu:hover .mainmenu-ic{
    -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.btn-mainmenu:hover{
    background: url(/p/d586ad07892995683c5bc84357024b88000809ab68f57e09b32577f83952dbba.svg);
    background-size: cover;
}

.timeline-content{
    max-width: unset !important;
}

.service-icon{
    height: 4rem;
}

.service-card{
    min-height: 1rem;
        box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.11), 0 2px 4px -1px rgba(0, 0, 0, 0.07);
}

.service-card > .card-body {
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.service-text{
    line-height: 1.3;
    margin-top: .8rem;
}

.overlay-message {
  position: absolute;
  inset: 0; /* top:0;right:0;bottom:0;left:0 */
  background: rgba(255,255,255,0.9);
  display: none; /* скрыто по умолчанию */
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.overlay-content {
  max-width: 90%;
  font-size: 1.25rem;
  border-radius: 0.75rem;
  padding: 1.5rem 2rem;
}

.prazdnik{
    padding-top: 70px !important;
    background-color: transparent;
    background-position: 50% 0px, 100% 0px, 0px 0px, 0px 0px;
    background-size: 1500px, 330px, 330px, 300px;
    background-repeat: repeat-x;
}

.header_new_year{
    background-image: url(/p/abe74996aede21135357e0dbf32640c7022c748c0c9c7702b9cbc6ebe2b80cdb.png);
}

.header_valentines_day{
    background-image: url(/p/0312268b03467cc5880c6df234623e79c81743e97cfb83fbd530be32b29c5b21.png);
}

.header_8march{
    background-image: url(/p/c8025d0fba02e03fc8ef8945c488fa48c5b2af33bf226653882f08c8a2eaee67.png);
}

.header_birthday{
    background-image: url(/p/a359004e22ba51ca6909d739ce4e71cc352988c287682bc57288e475866aaf4c.png);
}

.header_9may{
    background-image: url(/p/df1bf34a76f4da1913ec45d75df7fc97f2248ab1ae703717cb3be25a2ce37c61.png);
}

a:hover{
    color: #e85621;
}

:root{
  --accent: #ff7c19;
}

/* чтобы ссылка не давала подчеркивание и не меняла цвет */
.row a{
  text-decoration: none;
}

/* базовая карточка */
.card.service-card{
  position: relative;
  overflow: hidden;
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* слой заливки (круг из центра) */
.card.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--accent);

  clip-path: circle(0% at 50% 50%);
  transition: clip-path .75s cubic-bezier(.3,.9,.3,1);
  will-change: clip-path;
  z-index:0;

  /* если карточка уже оранжевая (inline style) — не мешаем */
  opacity: 1;
}

/* чтобы контент был поверх заливки */
.card.service-card .card-body{
  position: relative;
  z-index: 1;
}

/* hover по ссылке (как у тебя сейчас) */
.row a:hover .card.service-card{
  transform: scale(1.02); /* как твой .btn:hover */
  box-shadow:
    0 3px 5px -1px rgba(0, 0, 0, 0.09),
    0 2px 3px -1px rgba(0, 0, 0, 0.07);
}

/* анимация круга */
.row a:hover .card.service-card::before{
  clip-path: circle(140% at 50% 50%);
}

/* текст */
.service-text{
  transition: color .45s ease;
}
.row a:hover .service-text{
  color: #fff;
}

/* иконка (и svg и png в <img>) */
.service-icon{
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
}
.row a:hover .service-icon{
  transform: scale(1.06);
  filter: brightness(0) invert(1);
}

/* если у тебя есть цветные PNG и их НЕ надо инвертить — добавь класс no-invert на img */
/*
.row a:hover .service-icon.no-invert{
  filter: none;
  opacity: .95;
}
*/

/* доступность: фокус с клавиатуры тоже красиво */
.row a:focus-visible .card.service-card{
  transform: scale(1.02);
  box-shadow: 0 0 0 .2rem rgba(232,86,33,.25);
  outline: none;
}


/* ДЛЯ КНОПОК */

/* Класс-эффект */
.animate-circle{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* важное: убираем фон с самой кнопки, переносим в ::after */
  background: transparent !important;
}

/* базовый фон кнопки (снизу) */
.animate-circle::after{
  content:"";
  position:absolute;
  inset:0;
  /* background: var(--btn-base-bg, #fff); */ /* по умолчанию белый */
  border-radius: inherit;
  z-index: -2;
}

/* круговая заливка (под текстом, но над фоном) */
.animate-circle::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--accent);
  border-radius: inherit;

  clip-path: circle(0% at 50% 50%);
  transition: clip-path .6s cubic-bezier(.25,.8,.25,1);
  z-index: -1;
}

/* hover */
.animate-circle:hover::before{
  clip-path: circle(140% at 50% 50%);
}

/* белим текст и всё внутри (перебиваем text-dark и т.п.) */
.animate-circle:hover,
.animate-circle:hover *{
  color:#fff !important;
}

/* иконки */
.animate-circle:hover img{
  filter: brightness(0) invert(1);
}


/* АКОРДЕОН */

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #ff7c19 !important;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button{
    color: #344767;
    background-color: #ffffff;
}
.accordion-button:hover{
    color: #ffffff;
    background-color: #ff7c19 !important;
}

.link-head:hover{
    color: #e85621;
}