::selection {
background-color:#002AD8;
}
a {
	text-decoration: none;
}
.astroid-component-section {
padding:0;
flex-grow:1;
}
.astroid-header-section header.astroid-stacked-divided-header:not(.astroid-header-sticky) .as-megamenu-section {
background:black;
}
#astroid-header .astroid-nav {
justify-content:space-evenly;
}
#mod-custom113 {
	width: 100%;
}
.banner-1 {
background-image:url(/images/banners/banner-back1.webp);
background-repeat:no-repeat;
background-size:contain;
background-position-y:bottom;
min-height:540px;
    display: flex;
    flex-direction: column;
background-color: #2D2D2D;
justify-content: center;
}
.banner-2 {
	background-image:url(/images/banners/banner-back2.webp);
background-repeat:no-repeat;
background-size:cover;
min-height:540px;
    display: flex;
    flex-direction: column;
    justify-content: end;
  background-position-x: center;
    background-position-y: center;
}
.banner-text {
    color: white;
    display: flex;
flex-direction:column;
    width: fit-content;
    padding: 16px;    
    font-weight: 800;
    margin: 0 auto;
    border-radius: 8px;
margin-bottom:35px;
text-align:center;
max-width:95%;
text-transform:uppercase;
}
.banner-text h1 {
 border-radius: 8px;
padding: 16px;
background: #C4C4C433;
width:fit-content;
margin:auto;
font-size: clamp(28px,5vw,36px);
text-transform:uppercase;
}
.banner-text span {
margin-top:25px;
font-size: clamp(24px,5vw,32px);
line-height:100%;
}
.banner-text-back {
border-radius: 8px;
padding: 16px;
background: #C4C4C433;
font-size: clamp(28px,5vw,36px);
font-weight: 800;
}
.banner-buttons {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 35px;
    max-width: 435px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
}
.white-btn {
    background: white;
    border: 0;
    border-radius: 10px;
    width: fit-content;
    padding: 15px 40px;
    transition:0.3s;
}
.blue-btn {
    background: #002AD8;
    border: 0;
    border-radius: 10px;
    width: fit-content;
    padding: 15px 40px;
    color:white;
    transition:0.3s;
}
.main-btn {
    background: #002AD8;
    border: 0;
    border-radius: 20px;
    width: fit-content;
    padding: 15px 25px;
    color:white;
    font-weight:800;
    transition:0.3s;
    display: flex;
    justify-content: center;
    text-align: center;
}
.main-btn:hover, .blue-btn:hover {
box-shadow:0 0 10px #002AD8;
}
.white-btn:hover {
box-shadow:0 0 10px white;
}
.max-btn {
  background: linear-gradient(90deg, #4facfe 0%, #7367f0 50%, #9b30ff 100%);
  background-size: 200% auto; /* Нужно для плавной анимации ховера */
  
  /* Форма и размеры */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 40px;
  border: none;
  border-radius: 20px; /* Полное скругление краев */
  
  /* Текст */
  color: white;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0.5px;
  
  cursor: pointer;
  transition: 0.4s ease;
  box-shadow: 0 4px 15px rgba(115, 103, 240, 0.3);
}

/* Ховер-эффект: градиент начинает "переливаться" или кнопка подсвечивается */
.max-btn:hover {
  background-position: right center; /* Сдвигаем градиент */
  box-shadow: 0 6px 25px rgba(155, 48, 255, 0.4);
  transform: scale(1.03); /* Легкое увеличение */
}

.max-btn:active {
  transform: scale(0.98);
}

.vk-btn {
  /* Глубокий, дорогой градиент */
  background: linear-gradient(180deg, #0084FF 0%, #0077FF 100%);
  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px 10px 16px;
  gap: 12px;
  
  border: none;
  border-radius: 14px; /* Тот самый мягкий угол */
  
  color: #FFFFFF;
  font-weight: bold;
  font-size: 18px;
  
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Тень, которая дает "вес" кнопке */
  box-shadow: 
    0 4px 15px rgba(0, 132, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Ховер эффект: кнопка становится "плотнее" и чуть приподнимается */
.vk-btn:hover {
  background-position: right center; /* Сдвигаем градиент */
  box-shadow: 0 6px 25px rgba(0, 132, 255, 0.4);
  transform: scale(1.03); /* Легкое увеличение */
}

.vk-btn:active {
  transform: scale(0.98);
}
.phone-btn {
  /* Глубокий, дорогой градиент */
  background: #0ba243;
  
  width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  padding: 10px 24px 10px 16px;
  gap: 12px;
  
  border: none;
  border-radius: 14px; /* Тот самый мягкий угол */
  
  color: #FFFFFF;
  font-weight: bold;
  font-size: 18px;
  
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Тень, которая дает "вес" кнопке */
  box-shadow: 
    0 4px 15px rgba(11, 162, 67, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Ховер эффект: кнопка становится "плотнее" и чуть приподнимается */
.phone-btn:hover {
  background-position: right center; /* Сдвигаем градиент */
  box-shadow: 0 6px 25px rgba(11, 162, 67, 0.4);
  transform: scale(1.03); /* Легкое увеличение */
}

.phone-btn:active {
  transform: scale(0.98);
}

.why-we {
background-image:url(/images/materials/why-me-back.webp);
background-repeat:no-repeat;
}
.why-we span strong {
font-size:clamp(15px,5vw,24px);
font-weight:700;
}
.why-we span y {
font-size:clamp(10px,5vw,15px);
}
.vospolsovatsa {
background-color:#002AD82B;
min-height:249px;
background-image:url(/images/materials/vospol.webp);
background-repeat:no-repeat;
background-position-y: bottom;
padding:33px;
}
.vospolsovatsa .main-btn {
margin: 10px auto;
display:flex;
}
.uslugi-list img {
padding:14px 28px;
transition:0.3s;
aspect-ratio: 333 / 268;
border-radius: 20px;
object-fit: cover;
}
.uslugi-list .price {
color:#002AD8;
font-size:18px;
font-weight:400;
}
.uslugi-list h5 {
font-size:22px;
font-weight:600;
color:black;
transition:0.3s;
}
.uslugi-list h5:hover {
color:#002AD8;
}
.uslugi-list .card-text {
color:#4B4B4B;
font-size:14px;
}
.main-forma {
min-height:371px;
background-image:url(/images/materials/remont-back.webp);
background-repeat:no-repeat;
background-size:cover;
padding:33px;
margin-top:100px;
margin-bottom:50px;
display:flex;
flex-direction:column;
}
.main-forma h2 {
color:white;
text-align:center;
}
.main-forma form {
max-width:1000px;
margin:30px auto;
flex-grow:1;
display:flex;
flex-wrap:wrap;
}
.main-forma form input[type="text"] {
width:100%;
border-radius:20px;
border:0;
background:white;
height:48px;
outline:0;
padding-left: 15px;
}
.main-forma form input[type="text"]::placeholder {
font-size:12px;
color:#8A8A8A;
font-weight:800;
}
.novinki img {
max-height:272px;
object-fit:contain;
}
.novinki .blue-btn {
padding:10px;
}
.novinka {
border: 5px solid #002AD8;
border-radius:10px;
}
.novinka .novinka-body {
 padding: 26px 46px;
padding-top:10px;
}
.novinka span {
font-size:16px;
font-weight:500;
}
.novinka .text-success {
color:#002AD8!important;
}
.voprosi {
background-image:url(/images/materials/voprosi-back.webp);
background-repeat:no-repeat;
background-size:contain;
background-position-x: right;
background-position-y: bottom;
}
.voprosi form {
display:flex;
flex-wrap:wrap;
gap:30px;
}
.voprosi input[type="text"], .voprosi textarea {
background: #002AD826;
border:0;
border-radius:8px;
outline:0;
padding-left:8px;
}
.voprosi input[type="text"] {
height:46px;
}
.y-map {
height:548px;
}
.map {
position:relative;
}
.map-contacts {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 50px;
display: flex;
flex-direction: column;
background: #002AD8F2;
padding: 28px 50px;
border-radius: 20px;
gap:8px;
}
.map-contacts * {
color:white;
}
.devices-tabs.nav-tabs>li img {
   opacity: .3;
}
.nav-tabs>li.active img, .nav-tabs>li>a:hover img {
    opacity: 1;
}
.devices-tabs li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.devices-tabs {
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.prices-tabs {
	display: flex;
	flex-wrap: wrap;
	gap:5px;
	padding: 20px 10px;
}
.prices-tabs li {
	border-radius: 6px;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid transparent;
}
.prices-tabs li.active {
	border: 1px solid #111;
}

.podbanner {
min-height:579px;
    display: flex;
    flex-direction: column;
    justify-content: end;
background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(/images/materials/banner.webp);
background-repeat:no-repeat;
background-size:cover;
}
.podbanner-text {
    color: white;
    display: flex;
flex-direction:column;
    width: fit-content;
    padding: 16px;    
    font-weight: 800;
    margin: 0 auto;
    border-radius: 8px;
margin-bottom:105px;
text-align:center;
max-width:95%;
text-transform:uppercase;
background: #C4C4C433;
font-size: clamp(24px,5vw,32px);
}
.podabout{
padding: 20px;
display: flex;
flex-direction: column;
background-image: url(/images/materials/why-me-back.webp);
background-repeat: no-repeat;
}
.podab {
background: #F2F2F2;
box-shadow: 4px 0px 8px 0px #0000001A, 14px 0px 14px 0px #00000017, 32px 0px 19px 0px #0000000D, 56px 0px 22px 0px #00000003, 88px 0px 25px 0px #00000000;
border-radius:30px;
padding:18px;
height:100%;
}
.podab span {
font-size:16px;
font-weight:800;
text-transform:uppercase;
}
.podsteps strong {
font-size:clamp(28px,5vw,40px);
font-weight:800;
text-transform:uppercase;
color:black;
text-align:center;
line-height:100%;
}
.podsteps img {
width:100%;
max-width:100%;
border-radius:10px;
}
.podsteps ul {
text-align:left!important;
font-size:clamp(24px,5vw,36px);
font-weight:700;
color:black;
line-height:100%;
}
.podsteps ul li::marker {
color:#002AD8;
}
.podsteps li {
margin-bottom:50px;
}
.podsteps span {
font-size:clamp(24px,5vw,36px);
font-weight:700;
color:black;
line-height:100%;
}

.gallery a {
max-width:300px;
}
.gallery img {
max-width:100%;
width:100%;
height:300px;
object-fit:cover;
border-radius:6px;
}
.maingallery.swiper {
  width: 100%;
  padding-bottom: 40px; /* место для точек пагинации снизу */
}

/* 2. Растягиваем ссылку и картинку на всю высоту слайда */
.maingallery .swiper-slide {
  height: 400px; /* Высота для ПК */
}

.maingallery .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.maingallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Это самое важное: картинка заполнит блок без искажений */
  border-radius: 10px; /* Скругление углов, если нужно */
}
#promoModal .btn-close {
        position: absolute;
    right: 4px;
    top: 4px;
    z-index: 999;
}

.agit {  
}
.agit > .col-lg-7 {
  display: flex;
  flex-direction: column;
  gap:44px;
  padding: 36px 0;
}

.agit h3 {
  font-size: clamp(20px, 5vw, 32px);
  font-weight: 600;
  line-height: 35px;
  color: black;
}

.custom-list {
  list-style: none; /* Убираем стандартные точки */
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap:12px;
}

.custom-list li {
  position: relative;
  padding-left: 35px; /* Отступ слева, чтобы текст не налезал на иконку */
  line-height: 31px; /* Межстрочный интервал для удобства чтения */
  font-size: clamp(12px, 5vw, 24px);
}

.custom-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px; /* Регулируйте этот параметр, чтобы выровнять галочку по высоте текста */
  
  /* Размеры иконки */
  width: 28px; 
  height: 28px;
  
  /* Путь к вашей картинке */
  background-image: url('/images/materials/galka.webp'); 
  background-size: contain; /* Картинка впишется в размеры width/height */
  background-repeat: no-repeat;
  background-position: center;
}




@media(max-width: 1200px) {
  .agit h3 {
    font-size: 20px;
  }
  .agit > .col-lg-7 {
  gap:22px;
}
  .custom-list li {
    font-size: 18px;
  }
}


@media (min-width:992px) {
.vospolsovatsa .main-btn {
margin-left:52%;
}
.voprosi .main-btn {
margin-left:auto;
}
}
@media (max-width:991px){
.vospolsovatsa .main-btn {
margin-bottom:150px;
}
.main-forma form {
flex-direction:column;
}
.voprosi {
background-size:40%;
}
.voprosi .main-btn {
margin:auto;
}
.voprosi input[type="text"] {
width:100%;
}
.map-contacts {
position: unset;
transform: unset;
width: fit-content;
margin: 25px auto;
}
}
@media (max-width: 991px) {
  .agit {
    padding:20px 0 0;

  }
  .devices-tabs {
    justify-content: center;
    gap:35px;
  }
}
@media (min-width: 768px) {
    .gallery.swiper .swiper-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content:center;
    }

    .gallery.swiper .swiper-slide {
      width: auto !important;
      flex: 0 0 auto;
    }
  }
@media (max-width:767px) {
.vospolsovatsa {
background-size: contain;
}
.vospolsovatsa .main-btn {
margin-bottom:125px;
}
  .banner-1, .banner-2 {
    min-height:473px;
  }
  .banner-2 {
    background-image:url(/images/banners/banner2mobile.webp);
  }
  .podbanner {
    background-image:url(/images/banners/backdopmobile.webp);
    min-height: 474px;
    background-position: center;
  }
.gallery.swiper {
      overflow: hidden;
}
.gallery img {
height:auto;
}
.maingallery .swiper-slide {
    height: 250px; /* Меньшая высота для телефонов */
  }

}
@media (max-width:568px) {
.vospolsovatsa .main-btn {
margin-bottom:100px;
}
.vospolsovatsa h2 {
  font-size: 16px;
}
  .map-contacts{
    padding: 10px 12px;
  }
  .swiper-button-next, .swiper-button-prev {
    top:var(--swiper-navigation-top-offset,28%)!important;
  }
  .agit h3 {
    font-size: 20px;
  }
  .custom-list li {
    font-size: 13px;
  }
}

