/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/ /* Examples (uncomment to use):*/ /* Expand site width */ /* body .wrapper { max-width: 1400px !important; } */ /* Set site background image */ /* body { background: url(image_source) top no-repeat; } /* Hide compare button */ /* a.compare_item { display: none !important; }*/ .services-list__item:not(.services-list__item--has-additional-text) .services-list__item-preview { max-height: 70px !important; } .banners-big--normal .banners-big__depend-height { height: 700px !important; } body.menu_lowercase_n .header-menu__title { font-size: 17px; }.logo { max-width: 250px !important; height: 70px !important;} h2.head-accord { font-size: 1.05em !important; line-height: initial !important; margin: -3px 0 0px !important; } h3.head-accord { font-size: 1.05em !important; line-height: initial !important; margin: -3px 0 0px !important; } .styled-block { font-size: 30px !important; } body.menu_lowercase_n .menu-side-column__item>.menu-side-column__item-link { text-transform: uppercase; font-size: 17px; line-height: 19px; font-weight: bold; } a.phones__phone-link.phones__phone-first.dark_link { font-weight: 800 !important; font-size: 105% !important; } .marketing-item h3 { margin-top: 25px !important; } .tab-content a { color: #007d24; } .tab-content a:hover { color: #f01119; } h4.switcher-title { margin-bottom: 0px !important;}

 
.services-list__item-title {font-size: 1.4em !important; font-weight: 300 !important; }
.services-list__item-additional-text-wrapper {
    left: 24px !important;
    right: 24px !important;

}

.services-list__item-image-wrapper--TOP.services-list__item-image-wrapper--PICTURE .services-list__item-link, .services-list__item-image-wrapper--TOP.services-list__item-image-wrapper--PICTURE>span {
    width: 100% !important;
height: 200px !important;
max-width: 400px;
}

.services-list__item:not(.services-list__item--has-additional-text) .services-list__item-preview {
    max-height: 120px !important;
}

.rounded {
    border: 1.5px solid #59d3aa;
}

.rounded {
    border: 1.5px solid #59d3aa;
}

/* ========== Общая обёртка ========== */
.compare{
  --w:50%;                   /* стартовое положение лезвия */
  position:relative;
  max-width:820px;
  margin:2rem auto;
  font-family:sans-serif;
  cursor:pointer;
}

/* ========== Слой «до»  ========== */
.compare img{display:block;width:100%;height:auto;user-select:none;}

/* ========== Слой «после» ========== */
.compare .after{
  position:absolute;top:0;left:0;
  width:var(--w);
  overflow:hidden;
}

/* ========== Вертикальный разделитель ========== */
.compare .handle{
  position:absolute;top:0;bottom:0;
  left:var(--w);
  width:4px;background:#fff;border-radius:2px;
  box-shadow:0 0 0 1px #0003;
  pointer-events:none;       /* пропускаем клики ниже */
}
.compare .handle::before{
  content:"⇆";
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font:14px/1 sans-serif;font-weight:bold;color:#000a;
}

  .comparison-container {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border-radius: 8px;
        }

        .image-wrapper {
            position: relative;
            height: 0;
            padding-bottom: 75%; /* Соотношение сторон 4:3 (подстройте под свои изображения) */
        }

        .comparison-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .img-before {
            width: 100%;
        }

        .img-after {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            overflow: hidden;
            resize: horizontal;
            min-width: 5%;
            max-width: 100%;
            border-right: 3px solid #fff;
            box-sizing: border-box;
            box-shadow: 3px 0 5px rgba(0,0,0,0.2);
        }

        .img-after img {
            filter: brightness(1.05); /* Легкое выделение "нового" варианта */
        }

        .slider-handle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: #fff;
            border: 3px solid #4a6cf7;
            border-radius: 50%;
            cursor: ew-resize;
            z-index: 10;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #4a6cf7;
        }

        .slider-handle::before,
        .slider-handle::after {
            content: "";
            position: absolute;
            height: 100vh;
            width: 2px;
            background: #4a6cf7;
            left: 50%;
            transform: translateX(-50%);
        }

        .slider-handle::before {
            top: -100vh;
        }

        .slider-handle::after {
            bottom: -100vh;
        }

        .labels {
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom: 15px;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .label {
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }