/* Theme Name: Caxos - Responsive Bootstrap 4 Landing page template
   Author: Coderthemes
   Author e-mail: coderthemes@gmail.com
   Version: 1.0.0
   Created: March 2020
   File Description: Main Scss file of the template */

/* Google font */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Nunito+Sans:wght@400;600&display=swap");

/*******************
    Switch Pl / Ru
*******************/
.lang-btn-min{
  --bg: transparent;
  --fg: #111;              /* цвет текста/бордера для светлой шапки */
  --fg-muted: #666;
  --fg-hover: #0b3d22;     /* тёмно-зелёный текст при hover/focus */
  --bd: rgba(0,0,0,.28);
  --bd-hover: rgba(11,61,34,.6); /* зелёный бордер при hover/focus */
  --bg-hover: rgba(11,61,34,.06);/* очень лёгкая зелёная подложка */

  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 42px;
  height: 30px;
  padding: 0 10px;
  top: 8px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .4px;
  text-decoration: none;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .06s ease;
}

.lang-btn-min:hover{
  color: var(--fg-hover);
  border-color: var(--bd-hover);
  background: var(--bg-hover);
}
.lang-btn-min:active{
  transform: translateY(1px);
}
.lang-btn-min:focus-visible{
  outline: 2px solid rgba(11,61,34,.45);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Вариант для тёмной шапки: оберни контейнером .header-dark */
.header-dark .lang-btn-min{
  --fg: rgba(255,255,255,.92);
  --fg-muted: rgba(255,255,255,.65);
  --fg-hover: #bff6e2;
  --bd: rgba(255,255,255,.33);
  --bd-hover: rgba(191,246,226,.75);
  --bg-hover: rgba(191,246,226,.08);
  color: var(--fg);
  border-color: var(--bd);
}

/* Компакт на очень узких экранах (опционально) */
@media (max-width: 420px){
  .lang-btn-min{ min-width: 36px; height: 28px; padding: 0 8px; font-size: 11px; }
}

/* === FIX: не растягивать RU/PL в мобильном меню === */
/* навбар в любом состоянии */
.navbar .navbar-nav .lang-btn-min{
  display:inline-flex !important;
  width:auto !important;
  padding:0 10px !important;
  margin:6px 12px !important;     /* чтобы не прилипала к краям меню */
  height:30px; min-width:42px;
  border-radius:999px !important;
  box-sizing:border-box;
}

/* если у тебя где-то .nav-link или .dropdown-item дают ширину 100% — перебиваем */
.navbar .navbar-nav .nav-link.lang-btn-min,
.navbar .navbar-nav .dropdown-item.lang-btn-min{
  display:inline-flex !important;
  width:auto !important;
  padding:0 10px !important;
}

/* на очень узких экранах можно ещё компактнее */
@media (max-width: 420px){
  .navbar .navbar-nav .lang-btn-min{
    height:28px; min-width:36px; padding:0 8px !important; margin:6px 10px !important;
  }
}

/*******************
    General
*******************/
body {
  font-size: 15px;
  color: #505458;
  font-family: "Nunito Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

.hero-h1 {
  white-space: nowrap; /* не переносить */
  font-size: clamp(24px, 4vw, 48px);
}

@media (max-width: 768px) {
  .hero-h1 {
    white-space: normal; /* разрешаем перенос */
  }
}

::-moz-selection {
  background: #435966;
  color: #ffffff;
}

::selection {
  background: #435966;
  color: #ffffff;
}

.logo {
  height: 35px;
}

a {
  text-decoration: none !important;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

/*******************
    Helper
*******************/
h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 17px;
}

.font-14 {
  font-size: 14px;
}

.font-16 {
  font-size: 16px;
}

.font-18 {
  font-size: 18px;
}

h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h4,
h5,
h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.center-page {
  float: none;
  margin: 0 auto;
}

.section {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
}
.margin-top {
  margin-top: -35px;
}
.section-0 {
  position: relative;
  padding-bottom: 5px;
}

.section-ss {
  position: relative;
  padding-bottom: 15px;
  padding-top: 45px;
}

.section-s {
  position: relative;
  padding-bottom: 50px;
}

.section-mds {
  position: relative;
  padding-top: 70px;
  padding-bottom: 45px;
}

.section-mdss {
  position: relative;
  padding-top: 15px;
  padding-bottom: 70px;
}

.section-md {
  position: relative;
  padding-top: 70px;
  padding-bottom: 70px;
}

.section-lg {
  position: relative;
  padding-top: 150px;
  padding-bottom: 150px;
}

.section-lg-rozrad {
  position: relative;
  padding-top: 150px;
  padding-bottom: 50px;
} 

.section-map {
  margin-bottom: -6px;
}

.title {
  margin-top: 0px;
  font-size: 26px;
}

.title-alt {
  color: #767D8E;
  line-height: 24px;
  margin: 0px auto 50px auto;
  font-size: 15px;
}

.title-alt-two {
  color: #767D8E;
  line-height: 24px;
  margin: 0px auto 20px auto;
  font-size: 18px;
}

.font-weight-medium {
  font-weight: 500 !important;
}

.avatar-sm {
  height: 16px;
  width: 16px;
}

.avatar-md {
  height: 32px;
  width: 32px;
}

.avatar-lg {
  height: 48px;
  width: 48px;
}

.avatar-xl {
  height: 54px;
  width: 54px;
}

.avatar-xxxl {
  height: 64px;
  width: 64px;
}

.box-shadow {
  -webkit-box-shadow: 0px 8px 35px 0px rgba(67, 89, 102, 0.08);
          box-shadow: 0px 8px 35px 0px rgba(67, 89, 102, 0.08);
}

.avatar-title {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 500;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

.shape {
  position: absolute;
  pointer-events: none;
  right: 0;
  bottom: -2px;
  left: 0;
}

.shape > svg {
  -webkit-transform: scale(2);
          transform: scale(2);
  width: 100%;
  height: auto;
  -webkit-transform-origin: top center;
          transform-origin: top center;
}

.card {
  border: none;
  -webkit-box-shadow: 0px 8px 35px 0px rgba(67, 89, 102, 0.08);
          box-shadow: 0px 8px 35px 0px rgba(67, 89, 102, 0.08);
  border-radius: 7px;
}

/* BUTTONS */
.btn {
  font-size: 12px;
  padding: 12px 20px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

.btn-sm {
  padding: 8px 14px;
}

.bg-primary {
  background-color: #3d62e0 !important;
}

.bg-soft-primary {
  background-color: rgba(61, 98, 224, 0.2) !important;
}

.text-primary {
  color: #428bff !important;
}

.btn-primary {
  color: #ffffff;
  background: #3d62e0;
  border-color: #3d62e0;
  -webkit-box-shadow: 0 3px 10px rgba(61, 98, 224, 0.4);
          box-shadow: 0 3px 10px rgba(61, 98, 224, 0.4);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary .open > .dropdown-toggle.btn-primary {
  background: #2b54dd;
  border-color: #2b54dd;
}

.btn-outline-primary {
  color: #3d62e0;
  border-color: #3d62e0;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.focus, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary .open > .dropdown-toggle.btn-primary {
  background: #2b54dd;
  border-color: #2b54dd;
}

.bg-soft-success {
  background-color: rgba(66, 139, 255, 0.2) !important;
}

.btn-success {
  color: #ffffff;
  background: #3CB371;
  border-color: #3CB371;
  -webkit-box-shadow: 0 3px 10px rgba(60, 179, 113, 0.4);
          box-shadow: 0 3px 10px rgba(60, 179, 113, 0.4);
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.focus, .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success .open > .dropdown-toggle.btn-primary {
  background: #3D80EB;
  border-color: #3D80EB;
}

.btn-outline-success {
  color: #3D80EB;
  border-color: #3D80EB;
}

.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.focus, .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success .open > .dropdown-toggle.btn-primary {
  background: #428bff;
  border-color: #428bff;
}

.bg-info {
  background-color: #17a2b8 !important;
}

.bg-soft-info {
  background-color: rgba(23, 162, 184, 0.2) !important;
}

.text-info {
  color: #17a2b8 !important;
}

.btn-info {
  color: #ffffff;
  background: #17a2b8;
  border-color: #17a2b8;
  -webkit-box-shadow: 0 3px 10px rgba(23, 162, 184, 0.4);
          box-shadow: 0 3px 10px rgba(23, 162, 184, 0.4);
}

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.focus, .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info .open > .dropdown-toggle.btn-primary {
  background: #1592a6;
  border-color: #1592a6;
}

.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.focus, .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled):active:focus,
.btn-outline-info .open > .dropdown-toggle.btn-primary {
  background: #1592a6;
  border-color: #1592a6;
}

.bg-warning {
  background-color: #ffc107 !important;
}

.bg-soft-warning {
  background-color: rgba(255, 193, 7, 0.2) !important;
}

.text-warning {
  color: #ffc107 !important;
}

.btn-warning {
  color: #ffffff;
  background: #ffc107;
  border-color: #ffc107;
  -webkit-box-shadow: 0 3px 10px rgba(255, 193, 7, 0.4);
          box-shadow: 0 3px 10px rgba(255, 193, 7, 0.4);
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.focus, .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning .open > .dropdown-toggle.btn-primary {
  background: #f2b500;
  border-color: #f2b500;
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.focus, .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning .open > .dropdown-toggle.btn-primary {
  background: #f2b500;
  border-color: #f2b500;
}

.bg-danger {
  background-color: #dc3545 !important;
}

.bg-soft-danger {
  background-color: rgba(220, 53, 69, 0.2) !important;
}

.text-danger {
  color: #dc3545 !important;
}

.btn-danger {
  color: #ffffff;
  background: #dc3545;
  border-color: #dc3545;
  -webkit-box-shadow: 0 3px 10px rgba(220, 53, 69, 0.4);
          box-shadow: 0 3px 10px rgba(220, 53, 69, 0.4);
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.focus, .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger .open > .dropdown-toggle.btn-primary {
  background: #d72536;
  border-color: #d72536;
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.focus, .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger .open > .dropdown-toggle.btn-primary {
  background: #d72536;
  border-color: #d72536;
}

.bg-dark {
  background-color: #343a40 !important;
}

.bg-dark-header {
  background-color: #343a40 !important;
  background-image: linear-gradient(130deg, rgba(255, 255, 255, 0.0) 55%, transparent 35%, rgba(255, 255, 255, 0.1) 65%);
  background-size: 100% 100%;
}

.bg-soft-dark {
  background-color: rgba(52, 58, 64, 0.2) !important;
}

.text-dark {
  color: #343a40 !important;
}

.btn-dark {
  color: #ffffff;
  background: #343a40;
  border-color: #343a40;
  -webkit-box-shadow: 0 3px 10px rgba(52, 58, 64, 0.4);
          box-shadow: 0 3px 10px rgba(52, 58, 64, 0.4);
}

.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .btn-dark.focus, .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark .open > .dropdown-toggle.btn-primary {
  background: #2b3035;
  border-color: #2b3035;
}

.btn-outline-dark {
  color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.focus, .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark .open > .dropdown-toggle.btn-primary {
  background: #2b3035;
  border-color: #2b3035;
}

.bg-muted {
  background-color: #98a6ad !important;
}

.bg-soft-muted {
  background-color: rgba(152, 166, 173, 0.2) !important;
}

.text-muted {
  color: #6c757d;
}

.text-muted-gray {
  color: #98a6ad !important;
}

.btn-muted {
  color: #ffffff;
  background: #98a6ad;
  border-color: #98a6ad;
  -webkit-box-shadow: 0 3px 10px rgba(152, 166, 173, 0.4);
          box-shadow: 0 3px 10px rgba(152, 166, 173, 0.4);
}

.btn-muted:hover, .btn-muted:focus, .btn-muted:active, .btn-muted.active, .btn-muted.focus, .btn-muted:not(:disabled):not(.disabled):active, .btn-muted:not(:disabled):not(.disabled):active:focus,
.btn-muted .open > .dropdown-toggle.btn-primary {
  background: #8d9ca4;
  border-color: #8d9ca4;
}

.btn-outline-muted {
  color: #98a6ad;
  border-color: #98a6ad;
}

.btn-outline-muted:hover, .btn-outline-muted:focus, .btn-outline-muted:active, .btn-outline-muted.active, .btn-outline-muted.focus, .btn-outline-muted:not(:disabled):not(.disabled):active, .btn-outline-muted:not(:disabled):not(.disabled):active:focus,
.btn-outline-muted .open > .dropdown-toggle.btn-primary {
  background: #8d9ca4;
  border-color: #8d9ca4;
}

.bg-purple {
  background-color: #9261c6 !important;
}

.bg-soft-purple {
  background-color: rgba(146, 97, 198, 0.2) !important;
}

.text-purple {
  color: #9261c6 !important;
}

.btn-purple {
  color: #ffffff;
  background: #9261c6;
  border-color: #9261c6;
  -webkit-box-shadow: 0 3px 10px rgba(146, 97, 198, 0.4);
          box-shadow: 0 3px 10px rgba(146, 97, 198, 0.4);
}

.btn-purple:hover, .btn-purple:focus, .btn-purple:active, .btn-purple.active, .btn-purple.focus, .btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled):active:focus,
.btn-purple .open > .dropdown-toggle.btn-primary {
  background: #8852c1;
  border-color: #8852c1;
}

.btn-outline-purple {
  color: #9261c6;
  border-color: #9261c6;
}

.btn-outline-purple:hover, .btn-outline-purple:focus, .btn-outline-purple:active, .btn-outline-purple.active, .btn-outline-purple.focus, .btn-outline-purple:not(:disabled):not(.disabled):active, .btn-outline-purple:not(:disabled):not(.disabled):active:focus,
.btn-outline-purple .open > .dropdown-toggle.btn-primary {
  background: #8852c1;
  border-color: #8852c1;
}

.bg-pink {
  background-color: #ff7aa3 !important;
}

.bg-soft-pink {
  background-color: rgba(255, 122, 163, 0.2) !important;
}

.text-pink {
  color: #ff7aa3 !important;
}

.btn-pink {
  color: #ffffff;
  background: #ff7aa3;
  border-color: #ff7aa3;
  -webkit-box-shadow: 0 3px 10px rgba(255, 122, 163, 0.4);
          box-shadow: 0 3px 10px rgba(255, 122, 163, 0.4);
}

.btn-pink:hover, .btn-pink:focus, .btn-pink:active, .btn-pink.active, .btn-pink.focus, .btn-pink:not(:disabled):not(.disabled):active, .btn-pink:not(:disabled):not(.disabled):active:focus,
.btn-pink .open > .dropdown-toggle.btn-primary {
  background: #ff6695;
  border-color: #ff6695;
}

.btn-outline-pink {
  color: #ff7aa3;
  border-color: #ff7aa3;
}

.btn-outline-pink:hover, .btn-outline-pink:focus, .btn-outline-pink:active, .btn-outline-pink.active, .btn-outline-pink.focus, .btn-outline-pink:not(:disabled):not(.disabled):active, .btn-outline-pink:not(:disabled):not(.disabled):active:focus,
.btn-outline-pink .open > .dropdown-toggle.btn-primary {
  background: #ff6695;
  border-color: #ff6695;
}

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

.bg-soft-white {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.text-white {
  color: #ffffff !important;
}

.text-gray {
  color: #f7f9fb !important;
}

.text-black {
  color: #343a40 !important;
}

.text-wblue {
  color: #e9edf3 !important;
}

.text-white-2 {
  color: white;
  transition: opacity 1s ease-in-out;
  font-weight: bold;
   letter-spacing: 0.01em;
  top: 0;
  left: 0;
  width: 100%;
}

.hidden {
  opacity: 0;
}

.btn-white {
  color: #ffffff;
  background: #ffffff;
  border-color: #ffffff;
  -webkit-box-shadow: 0 3px 10px rgba(255, 255, 255, 0.4);
          box-shadow: 0 3px 10px rgba(255, 255, 255, 0.4);
}

.btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .btn-white.focus, .btn-white:not(:disabled):not(.disabled):active, .btn-white:not(:disabled):not(.disabled):active:focus,
.btn-white .open > .dropdown-toggle.btn-primary {
  background: whitesmoke;
  border-color: whitesmoke;
}

.btn-outline-white {
  color: #ffffff;
  border-color: #ffffff;
}

.btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white:active, .btn-outline-white.active, .btn-outline-white.focus, .btn-outline-white:not(:disabled):not(.disabled):active, .btn-outline-white:not(:disabled):not(.disabled):active:focus,
.btn-outline-white .open > .dropdown-toggle.btn-primary {
  background: whitesmoke;
  border-color: whitesmoke;
}

.bg-light {
  background-color: #f8f9fa !important;
}

.bg-soft-light {
  background-color: rgba(248, 249, 250, 0.2) !important;
}

.text-light {
  color: #f8f9fa !important;
}

.btn-light {
  color: #ffffff;
  background: #f8f9fa;
  border-color: #f8f9fa;
  -webkit-box-shadow: 0 3px 10px rgba(248, 249, 250, 0.4);
          box-shadow: 0 3px 10px rgba(248, 249, 250, 0.4);
}

.btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active, .btn-light.focus, .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light .open > .dropdown-toggle.btn-primary {
  background: #eceff2;
  border-color: #eceff2;
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.focus, .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light .open > .dropdown-toggle.btn-primary {
  background: #eceff2;
  border-color: #eceff2;
}

.bg-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(52, 58, 64, 0.7);
}

.bg-overlay-gradient {
  opacity: 0.7;
  background: -webkit-gradient(linear, right top, left top, from(#f1556c), to(#6658dd));
  background: linear-gradient(to left, #f1556c, #6658dd);
}

.video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffffff !important;
  background: linear-gradient(90deg, #ff3b3b 0%, #ff6f00 100%);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 50px;
  border: none;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-decoration: none;
}

.video-btn:hover {
  background: linear-gradient(90deg, #ff6f00 0%, #ff3b3b 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 70, 0, 0.4);
}

/* ИКОНКА В КРУЖКЕ */
.video-btn i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  font-size: 42px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.video-btn:hover i {
  color: #FFFF00;
}

a.video-btn.btn {
  color: #fff !important;
}


.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/******************
    Navbar
*******************/
/* Дополнительные стили для выпадающего меню */
.bkg {
  background-color: #0074E4; /* Kolor tła */
  border-radius: 20px; /* Zaokrąglone rogi */
  padding: 1px 2px; /* Dodatkowy padding dla lepszego wyglądu */
  color: #fff; /* Kolor tekstu */
  text-decoration: none; /* Usunięcie podkreślenia */
}

.dropdown-menu {
    background-color: #fff;
    padding: 10px 0;
    color: #182433 !important;
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
    @media (min-width: 768px){ .dropdown-menu { font-size: 13px; } }
    @media (min-width: 1200px){ .dropdown-menu { font-size: 14px; } }
}

.dropdown-item {
    color: #333;
    padding: 10px 18px;
    display: block;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #428bff;
    color: #fff;
    text-decoration: none;
}

/* Не изменяем стили из вашего кода */
.navbar-default .navbar-nav > li > a {
    position: relative;
    color: #182433 !important;
    letter-spacing: 0.03em;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
}

.navbar-default .navbar-nav > li > a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background:#fff; border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #3d62e0 !important;
}

.navbar-default .navbar-nav > li > a:hover::after,
.navbar-default .navbar-nav > .active > a::after{
  transform:scaleX(1);
}

/* Видимый focus для клавиатуры — а11y */
.navbar-default .navbar-nav > li > a:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(66,139,255,.35);
  border-radius: 6px;
}

.navbar-custom {
    background-color: #f2f6fa;
    border: none;
    padding: 10px 0px;
    margin-bottom: 0px;
    border-radius: 0px;
    z-index: 9999;
    -webkit-transition: background-color 1s ease-in-out, border 1s ease-in-out;
    transition: background-color 1s ease-in-out, border 1s ease-in-out;
}

.navbar-custom .navbar-brand {
    height: auto;
}

.navbar-custom-dark.navbar-default .navbar-nav > li > a {
    color: #ddd !important;
}

.navbar-toggle {
    background-color: transparent !important;
    margin-top: 14px;
    border: none;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #3B3B40;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
    background-color: transparent;
    color: #3d62e0 !important;
}

.nav-alt.navbar-default .navbar-nav > li > a {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 13px;
}

/* Более современный вид дропдауна */
.dropdown-menu{
  border: 0;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  overflow: hidden; /* чтобы hover фон не вылезал */
}

/* Ховер уже есть, чуть сгладим текст */
.dropdown-item{
  border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}

@media (min-width: 992px){
  .navbar-default .navbar-nav > li.dropdown:hover > .dropdown-menu{
    display: block;
    animation: ddIn .14s ease;
  }
  @keyframes ddIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
}

/* Усилим контраст иконки-бургера */
.navbar-toggle .icon-bar{ background-color:#182433; }           /* тёмный */
.is-sticky .navbar-toggle .icon-bar{ background-color:#182433; } /* при залипании тоже */

/* Плавное затемнение шапки при прокрутке (если нужно) */
.navbar-custom{
  transition: background-color .25s ease, box-shadow .25s ease;
}
.is-sticky.navbar-custom{
  background-color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

.bkg{
  background-color:#0074E4;
  border-radius: 999px;
  padding: 2px 8px;
  color:#fff;
}
.bkg:hover, .bkg:focus{
  background-color:#3d62e0;
  color:#fff;
  box-shadow: 0 0 0 3px rgba(61,98,224,.25);
  text-decoration:none;
}


/* STICKY HEADER */
.sticky-wrapper {
  height: 0px !important;
  z-index: 9999;
}

.is-sticky.navbar-custom {
  background-color: #ffffff !important;
  width: 100%;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.is-sticky.navbar-custom::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, blue, yellow, red, lightblue); /* Замените цвета по вашему выбору */
  content: '';
  pointer-events: none; /* Чтобы псевдоэлемент не взаимодействовал с событиями мыши */
}

.logo .logo-white {
  display: inline-block;
}

.logo .logo-dark {
  display: none;
}

.is-sticky .logo .logo-dark {
  display: inline-block;
}

.is-sticky .logo .logo-white {
  display: none;
}

.is-sticky.navbar-custom .navbar-nav li a {
  color: #333 !important;
}

.is-sticky.navbar-custom .navbar-nav > .active > a{
  font-weight: 800;
}

@media (max-width: 360px){
  .navbar-default .navbar-nav > li > a{
    letter-spacing: 0.01em;
    text-transform: none; /* можно вернуть uppercase, если важно */
  }
}

@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* === GÓRNY PASEK KONTAKTOWY === */
.topbar {
  background-color: #343a40; /* фирменный тёмный фон */
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 20px;
  width: 100%;
  line-height: 1.4;
  position: relative;
  z-index: 1000;
}

/* ссылки в topbar */
.topbar a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.topbar a:hover {
  color: #cfe6ff;
  text-decoration: underline;
}

.topbar i {
  margin-right: 6px;
}

/* правая группа элементов */
.topbar-right {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

/* равномерные отступы и одинаковые разделители */
.topbar-right > *:not(:first-child) {
  position: relative;
  margin-left: 18px;
  padding-left: 18px;
}
.topbar-right > *:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%);
  border-radius: 1px;
}

/* лёгкая прозрачность для часов */
.topbar-hours {
  opacity: 0.85;
}

/* Центрируем логотип в topbar */
.topbar .navbar-brand {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
}

.topbar .navbar-brand img {
  display: block;
  height: 32px;   /* можно подогнать под высоту полосы */
  width: auto;
}

/* --- стиль телефонов с подписью --- */
.topbar-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.topbar-phone:hover {
  color: #cfe6ff;
  text-decoration: underline;
}

/* иконка телефона */
.topbar-phone i {
  margin-right: 6px;
  font-size: 12px;
  opacity: 0.85;
}

/* сам номер */
.topbar-phone .phone-number {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* подпись под номером */
.topbar-phone .phone-label {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
  letter-spacing: 0.03em;
  margin-left: 8px; /* визуально выравнивает под номером */
  text-transform: lowercase;
}

/* чтобы подписи не сбивали выравнивание элементов справа */
.topbar-right .topbar-phone {
  margin-bottom: -2px;
}

/* если телефонов два подряд — оставляем между ними разделитель */
.topbar-right > *:not(:first-child) {
  position: relative;
  margin-left: 18px;
  padding-left: 18px;
}
.topbar-right > *:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%);
  border-radius: 1px;
}

/* адаптивность */
@media (max-width: 768px) {
  .topbar-phone .phone-label { display: none; }
}


/* === Скрыть topbar на мобильных === */
@media (max-width: 768px) {
  .topbar {
    display: none !important;
  }
}

/* === STATUS OTWARCIA — С ИНДИКАТОРОМ ВНУТРИ === */
/* Фикс: больше места между разделителем и текстом статуса */
.topbar-status{
  position: relative;
  font-weight: 600;
  color: #00d26a;          /* открыто — зелёный */
  white-space: nowrap;
  padding-left: 36px;      /* было 28px — увеличили карман */
}

/* Точка-индикатор — в кармане между разделителем и текстом */
.topbar-status::after{
  content: "";
  position: absolute;
  left: 7px;              /* было 12px — сдвинули правее */
  top: 50%;
  width: 7px;              /* чуть компактнее, чтобы аккуратно смотрелась */
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  box-shadow: 0 0 6px currentColor;
  animation: topbar-blink 1.6s infinite;
  opacity: .9;
  pointer-events: none;
  z-index: 1;
}

.topbar-status._closed { color: #ff5555; }
.topbar-status._soon   { color: #ffc107; }

@keyframes topbar-blink{
  0%,100%{ opacity:.9; box-shadow:0 0 6px currentColor; }
  50%    { opacity:.3; box-shadow:0 0 2px currentColor; }
}


/* === адаптивность === */
@media (max-width: 768px) {
  .topbar {
    font-size: 12px;
    padding: 5px 10px;
    text-align: center;
  }
  .topbar-right {
    justify-content: center;
    flex-direction: column;
    gap: 4px;
  }
  .topbar-right > *:not(:first-child) {
    margin-left: 0;
    padding-left: 0;
  }
  .topbar-right > *:not(:first-child)::before {
    display: none;
  }
  .topbar-hours {
    display: none; /* можно включить при необходимости */
  }
}

@media (max-width: 360px) {
  .topbar { font-size: 11px; }
}

/* ====== Адаптивность ====== */
@media (max-width: 768px) {
  .topbar { font-size: 12px; padding: 5px 10px; text-align: center; }
  .topbar-right { justify-content: center; margin-top: 4px; }

  /* на планшетах/мобилках убираем разделитель при переносе */
  .topbar-right > * + * {
    padding-left: 10px;
    margin-left: 10px;
  }
  .topbar-right > * + *::before { height: 12px; }

  /* если нужно компактнее — скрыть часы */
  .topbar .topbar-hours { display: none; }
}

@media (max-width: 360px) {
  .topbar { font-size: 11px; }
}

/* ====== Навбар едет вверх вслед за topbar (синхронизируется JS’ом) ====== */
.navbar.fixed-top { top: 32px; transition: none; will-change: top; }
.is-sticky.navbar-custom { box-shadow: 0 6px 14px rgba(0,0,0,.08); }

@media (prefers-reduced-motion: reduce){
  .navbar.fixed-top { transition: none !important; }
}

/* === DYNAMICZNY OFFSET DLA NAVBAR === */
.navbar.fixed-top {
  top: 32px;              /* стартовое смещение — примерная высота topbar */
  transition: none;       /* важно: без перехода, чтобы следовать за скроллом без лагов */
  will-change: top;       /* подсказка браузеру */
}

/* Тень можно оставить при липкости — это дёшево по перфомансу */
.is-sticky.navbar-custom {
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* === Для плавности при включении/отключении sticky === */
.sticky-wrapper {
  height: 0px !important;
  z-index: 9999;
}

/* === Резерв для очень маленьких экранов === */
@media (max-width: 360px) {
  .topbar {
    font-size: 11px;
  }
}

/* === Без анимаций при системной настройке reduce motion === */
@media (prefers-reduced-motion: reduce){
  .navbar.fixed-top { transition: none !important; }
}

/******************
    Time Line Building
*******************/
.b-contacts__time-mask {
  position: absolute;
  width: 42px;
  height: 41px;
  font-size: 0px;
  line-height: 0px;
  left: -56px;
  top: -3px;
  z-index: 2;
}
.b-contacts-bar{
  width: 130px;
  position: absolute;
  margin-left: 80px;
  top: 0px;
}
.b-contacts-bar._night:after,
.b-contacts-bar._night:before{
  opacity: 0.2;
}
.b-contacts-bar:after,
.b-contacts-bar:before{
  content: '\0020';
  display: block;
  width: 19px;
  height: 19px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 41px;
  left: 0;
  background-image: url("../images/fa-sun.png");
}
.b-contacts-bar:after{
  left: auto;
  right: 0;
  background-image: url("../images/fa-moon.png");
}
.b-contacts-bar-progress{
  margin: 0 30px;
  line-height: 0;
  background-color: #8b8b8b;
  overflow: hidden;
}
.b-contacts-bar-progress span{
  display: block;
  height: 4px;
  background-color: #00ff00;
  float: left;
  width: 1%;
}
.b-contacts-bar-title{
  font-weight: normal;
  padding-top: 16px;
  color: #428bff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
}
@media (min-width: 768px) {
  .b-contacts-bar {
    display: none !important;
  }
}

/******************
    Tel
*******************/
.tel a {
  color: #428bff;
  padding-left: 160px;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
  text-decoration:none;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  display:inline-block;
}
.tel a:hover {
  text-decoration:none;
  color: #00CED1;
  z-index:1;
  position:relative;
}
.tel a:hover::after,
.tel a:focus::after {
  background: #000;
  opacity:0.8;
}

/******************
    Top UP
*******************/
.upbtn {
    z-index: 9999;
    width: 48px;
    height: 48px;
    position: fixed;
    bottom: -80px;
    right: 20px;
    cursor: pointer;
    border-radius: 50px;
    transition: all .7s ease-in-out;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #428bff;
    background-size: 20px;
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ0NC44MTkgNDQ0LjgxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgxOSA0NDQuODE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQzMy45NjgsMjc4LjY1N0wyNDguMzg3LDkyLjc5Yy03LjQxOS03LjA0NC0xNi4wOC0xMC41NjYtMjUuOTc3LTEwLjU2NmMtMTAuMDg4LDAtMTguNjUyLDMuNTIxLTI1LjY5NywxMC41NjYgICBMMTAuODQ4LDI3OC42NTdDMy42MTUsMjg1Ljg4NywwLDI5NC41NDksMCwzMDQuNjM3YzAsMTAuMjgsMy42MTksMTguODQzLDEwLjg0OCwyNS42OTNsMjEuNDExLDIxLjQxMyAgIGM2Ljg1NCw3LjIzLDE1LjQyLDEwLjg1MiwyNS42OTcsMTAuODUyYzEwLjI3OCwwLDE4Ljg0Mi0zLjYyMSwyNS42OTctMTAuODUyTDIyMi40MSwyMTMuMjcxTDM2MS4xNjgsMzUxLjc0ICAgYzYuODQ4LDcuMjI4LDE1LjQxMywxMC44NTIsMjUuNywxMC44NTJjMTAuMDgyLDAsMTguNzQ3LTMuNjI0LDI1Ljk3NS0xMC44NTJsMjEuNDA5LTIxLjQxMiAgIGM3LjA0My03LjA0MywxMC41NjctMTUuNjA4LDEwLjU2Ny0yNS42OTNDNDQ0LjgxOSwyOTQuNTQ1LDQ0MS4yMDUsMjg1Ljg4NCw0MzMuOTY4LDI3OC42NTd6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==)
}

/******************
    Coockie
*******************/
.cookie_notice {
  display: none;
  position: fixed;
  z-index: 9999999;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  color: #FFF;
  background: #343a40;
  padding: 10px 20px;
  border-top: 4px solid #428bff;
}
/* Buttons */
.cookie_btn {
  display: inline-block;
  margin: 10px 6px 4px 6px;
  border-radius: .2rem;
  text-decoration: none;
  position: relative;
  font-size: 13px;
  padding: 4px 12px;
  color: #FFF;
  font-weight: bold;
  text-transform: uppercase;
  background: #3d62e0;
  border: 2px solid #428bff;
}
.cookie_btn:hover {
  color: #FFf;
}
.cookie_btn:after,
.cookie_btn:before {
  position: absolute;
  height: 2px;
  left: 50%;
  background: #FFF;
  bottom: -6px;
  content: "";
  transition: all 280ms ease-in-out;
  width: 0;
}
.cookie_btn:before {
  top: -6px;
}
.cookie_btn:hover:after,
.cookie_btn:hover:before {
  width: 100%;
  left: 0;
}

/******************
    Hero section
*******************/
.home {
  background-color: #f2f6fa;
  padding-bottom: 150px;
}

.home-wrapper p {
  font-size: 16px;
  color: #767D8E;
}

.text-tran-box {
  background: #3d62e0;
  background: -webkit-gradient(linear, right top, left top, from(#f1556c), to(#6658dd));
  background: linear-gradient(to left, #f1556c, #6658dd);
}

.decor {
  position: relative;
  top: 25px;
}
.decor ul{
  display:flex;
  text-align: center;
padding: 0;
  margin: 0;
  list-style: none;
}

.decor ul li {
  flex: 0.07 4%;
}

.text-transparent {
  mix-blend-mode: lighten;
  overflow: hidden;
  font-size: 48px;
  margin-bottom: 40px;
  line-height: 54px;
  font-weight: 600;
}

.text-tran-box-dark .text-transparent {
  color: #ffffff;
  background: #343a40;
  mix-blend-mode: darken;
}

.home-alt p {
  color: #eee !important;
}

.home-alt h1 {
  color: #ffffff;
  font-size: 48px;
  margin-bottom: 40px;
  line-height: 54px;
  font-weight: 600;
}

.bg-img {
  background: url("../images/666508377.avif") center;
  position: relative;
  background-size: cover;
}

.bg-img-index {
  background: url("../images/Warsztat-blur.webp") center;
  position: relative;
  background-size: cover;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
}

.bg-img-cennik {
  background: url("../images/cennik.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-promocja {
  background: url("../images/promocja.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-mechanika {
  background: url("../images/Mechanika-II.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-lakiernictwo {
  background: url("../images/Polerka.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-polytika_prywatnosci {
  background: url("../images/prywatnosc.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-gallery {
  background: url("../images/gallery.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-elektronika {
  background: url("../images/elektronika.jpg") top;
  position: relative;
  background-size: cover;
}

.bg-img-diagnostyka-komputerowa {
  background: url("../images/diagnostyka_komputerowa.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-sterownik {
  background: url("../images/sterownik.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-naprawa_zawieszenia {
  background: url("../images/Mechanika-II.avif") center;
  position: relative;
  background-size: cover;
}

.bg-img-naprawa_silnika {
  background: url("../images/naprawa_silnika.jpeg") center;
  position: relative;
  background-size: cover;
}

.bg-img-uklad_hamulcowy {
  background: url("../images/uklad_hamulcowy.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-wymiana_rozradu {
  background: url("../images/wymiana_rozradu.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-404 {
  background: url("../images/404.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-klimatyzacja {
  background: url("../images/klimatyzacja.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-spawanie {
  background: url("../images/spawanie.avif") center;
  position: relative;
  background-size: cover;
}

.bg-img-wulkanizacja {
  background: url("../images/wulkanizacja.avif") center;
  position: relative;
  background-size: cover;
}

.bg-img-obsluga_techniczna {
  background: url("../images/obsluga_techniczna.png") center;
  position: relative;
  background-size: cover;
}

.bg-img-akcja_olej {
  background: url("../images/akcja_olej.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-bus {
  background: url("../images/floty.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-motocykl {
  background: url("../images/Motorcycle.avif") no-repeat center 50%;
  position: relative;
  background-size: cover;
}

.bg-img-geometria {
  background: url("../images/Geometria.avif") no-repeat center 50%;
  position: relative;
  background-size: cover;
}

.bg-img-tesla {
  background: url("../images/Tesla.jpg") center;
  position: relative;
  background-size: cover;
}

.bg-img-kontakt {
  background: url("../images/kontakt.avif") center;
  position: relative;
  background-size: cover;
}

.home-slider {
  padding: 160px 0px;
}

.home-carousel .carousel-item {
  background-position: center !important;
  background-size: cover !important;
}

/*******************
    Oval
*******************/

#section * {
    margin: 0;
    box-sizing: border-box;
}
.oval-row {
    display: flex;
    flex-wrap: wrap;
}
.w50 {
    flex: 0 0 50%;
}
#section {
    overflow: hidden;
    margin: 0px 0;
}
#section .oval-row {
    flex-direction: row-reverse;
}
#section .bannerImage {
    background-size: cover;
    background-position: center center;
    background-color: #337AB7;
}
#section .bannerText {
    background-color: #343a40;
    position: relative;
    z-index: 1;
    padding: 80px 30px;
}
#section .bannerText .oval {
    position: absolute;
    background-color: #343a40;
    top: -50%;
    right: 0;
    box-shadow: 20px 8px 16px rgba(0,0,0,0.2);
    border-radius: 50%;
    z-index: -1;
    content: '';
}
#section .bannerText h2 {
    font-size: 42px;
    line-height: 48px;
    color: #FFF;
    font-family: "Montserrat", sans-serif;
}
#section .bannerText p {
    font-size: 24px;
    line-height: 30px;
    color: #FFF;
    margin-top: 1em;
}
@media screen and (max-width: 767px) {
    #section .oval-row {
        display: block;
    }
    #section .bannerText {
        padding: 0 40px 60px 40px;
    }
}

/*******************
    Modal
*******************/
/* Контейнер для кнопки */
.css-modal-target-container {
  height: 60px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Контейнер, который затемняет страницу */
.css-modal-target {
    display: none;
}
.css-modal-target:target {
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: bg 0.5s ease;
  background: rgba(51, 122, 183, 0.7);
}

/* Модальное окно */
.css-modal-target .cmt {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  padding: 20px;
  width: 80%;
  z-index: 8;
  max-width: 600px;
  max-height: 70%;
  transition: 0.5s;
  border: 3px solid #419cec;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
  text-align: center;
  overflow: auto;
  animation: scale 0.5s ease;
}

/* Кнопка с крестиком закрывающая окно */
.css-modal-close {
  position: relative;
  display: block;
}
.css-modal-close:after {
    content: "";
    width: 50px;
    height: 50px;
    border: 3px solid #BFE2FF;
    border-radius: 50%;
    position: fixed;
    z-index: 10;
    top: 20px;
    right: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
    background-color: #FFF;
    background-size: cover;
    animation: move 0.5s ease;
}
.css-modal-close:before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  content: "";
  cursor: default;
}

/* Анимации */
@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes move {
  0% {
    right: -80px;
  }
  100% {
    right: 20px;
  }
}
@keyframes bg {
  0% {
    background: rgba(51, 122, 183, 0);
  }
  100% {
    background: rgba(51, 122, 183, 0.7);
  }
}
/*******************
    Carousel
*******************/
.slideshow {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  background: #000;
  margin: 20px 0;
}
.slideshow-item {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    animation: slideanim 160s infinite;
}
.slideshow-item:nth-child(1),
.slideshow-item:nth-child(1) img {
    animation-delay: 0;
}
.slideshow-item:nth-child(2),
.slideshow-item:nth-child(2) img {
    animation-delay: 20s;
}
.slideshow-item:nth-child(3),
.slideshow-item:nth-child(3) img {
    animation-delay: 40s;
}
.slideshow-item:nth-child(4),
.slideshow-item:nth-child(4) img {
    animation-delay: 60s;
}
.slideshow-item:nth-child(5),
.slideshow-item:nth-child(5) img {
    animation-delay: 80s;
}
.slideshow-item:nth-child(6),
.slideshow-item:nth-child(6) img {
    animation-delay: 100s;
}
.slideshow-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoom 40s infinite;
}
.slideshow-item-text {
    max-width: 50%;
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    padding: 20px 30px;
  font-family: Verdana, sans-serif;
}
.slideshow-item-text h5 {
    font-size: 22px;
  margin: 0 0 10px 0;
  color: #BFE2FF;
}
.slideshow-item-text p {
    font-size: 15px;
  margin-bottom: 10px;
}
@keyframes slideanim {
    12.5%{
        opacity: 1;
  }
    25%{
        opacity: 1;
  }
    37.5%{
        opacity: 0;
  }
}
@keyframes zoom {
    50%{
        transform: scale(1.3);
  }
}
@media screen and (max-width: 1100px){
    .slideshow-item-text{
        max-width: 75%;
  }
}
@media screen and (max-width: 456px){
    .slideshow-item-text {
      bottom: 0;
    left: 0;
        max-width: 100%;
  }
    .slideshow-item-text h5 {
    font-size: 18px;
  }
    .slideshow-item-text p {
    font-size: 13px;
  }
}

/******************
    Button glass
*******************/
.glass-btn {
    position: relative;
    width: 220px;
    height: 50px;
    margin: 20px;
    float: left;
    display: block;
    text-align: center;
}
.black-btn {
  background: rgba(66, 139, 285, 1.05);
  border-radius: 7px;
  border-width: 0;
}
.white-btn {
  background: rgba(152, 166, 173, 100.05);
  border-radius: 7px;
  border-width: 0;
}
.white-btn a {
  background: rgba(152, 166, 173, 100.05);
  border-radius: 7px;
  border-width: 0;
  color: #000;
}
.glass-btn a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
    border-radius: 7px;
    border-width: 0;
    padding: 0 10px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 16px;
    z-index: 1;
    transition: 0.5s;
    backdrop-filter: blur(15px);
}
.glass-btn:hover a {
    letter-spacing: 3px;
}
.glass-btn a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(45deg) translate(0);
    transition: 0.5s;
    filter: blur(0px);
}
.glass-btn:hover a:before {
    transform: skewX(45deg) translate(200px);
}
.glass-btn a:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    transition: 0.5s;
    border-radius: 7px;
    z-index: -1;
}
.glass-btn:hover a:after {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.glass-btn:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    bottom: -8px;
    width: 50px;
    height: 20px;
    background: #f00;
    border-radius: 10px;
    transition: 0.5s;
    transition-delay: 0.5;
}
.glass-btn:hover:before {
    bottom: 0;
    height: 80%;
    width: 80%;
    border-radius: 30px;
}
.glass-btn.glass-btn-red a:after,
.glass-btn.glass-btn-red:before {
    background: #ff4747;
    box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747;
}
.glass-btn.glass-btn-blue a:after,
.glass-btn.glass-btn-blue:before{
    background: #419cec;
    box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec;
}
.glass-btn.glass-btn-green a:after,
.glass-btn.glass-btn-green:before {
    background: #38ba35;
    box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35;
}

/******************
    Social
*******************/
.social-icons-2 {
    padding: 0;
    list-style: none;
    margin: 10px;
    float: left;
    display: block;
    padding-left: 15px;
    padding-top: 4px;
}
.social-icons-2 li {
    display: inline-block;
    position: relative;
}
.social-icons-2 li a {
    width: 60px;
    height: 60px;
    display: inline-block;
    text-align: center;
    margin: 0 4px;
    border-radius: 50%;
    padding: 6px;
    box-sizing: border-box;
    text-decoration:none;
    box-shadow: 0 8px 12px rgba(0,0,0,0.3);
    background: linear-gradient(0deg, #ddd, #fff);
    transition: .5s;
}
.social-icons-2 li a:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    color: #000;
}
.social-icons-2 li a i {
    display: block;
    background: linear-gradient(0deg, #fff, #ddd);
    border-radius: 50%;
    padding: 12px;
    font-size: 24px;
    color: #38d50d;
    transition: .5s;
    width: 48px;
    height: 48px;
    position: absolute;
    box-sizing: content-box;
}
.social-icons-2 li a:hover i {
    color: #20c997 !important;
}
.social-icons-3 li a:hover i {
    color: #2AABEE !important;
}
.social-icons-2 li a img {
    width: 24px;
    height: 24px;
}

/******************
    Accordion
*******************/
:root{
    --faq-bg:#ffffff;
    --faq-text:#0f172a;        /* slate-900 */
    --faq-muted:#475569;       /* slate-600 */
    --faq-border:#e2e8f0;      /* slate-200 */
    --faq-accent:#0ea5e9;      /* sky-500 */
    --faq-radius:16px;
    --faq-shadow:0 6px 24px rgba(2,6,23,.06);
  }
  .faq-accordion{max-width:900px;margin:48px auto;padding:0 16px;}
  .faq-title{font-size:clamp(22px,3vw,28px);margin-bottom:20px;color:var(--faq-text);}
  .accordion{background:var(--faq-bg);border:1px solid var(--faq-border);border-radius:var(--faq-radius);box-shadow:var(--faq-shadow);}
  .acc-item + .acc-item{border-top:1px solid var(--faq-border);}
  .acc-header{margin:0;}
  .acc-trigger{
    width:100%; text-align:left; background:#fff; color:var(--faq-text);
    padding:18px 56px 18px 20px; font-size:16px; line-height:1.4;
    border:0; display:flex; align-items:center; justify-content:space-between;
    gap:12px; cursor:pointer; position:relative;
  }
  .acc-trigger:focus{outline:2px solid var(--faq-accent); outline-offset:2px; border-radius:10px;}
  .acc-icon{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--faq-muted);}
  .icon-minus{display:none;}
  .acc-panel{padding:15px 15px 0px 20px; color:var(--faq-muted); font-size:15px;}
  .acc-panel[hidden]{display:block; height:0; padding-bottom:0; overflow:hidden; visibility:hidden;}
  /* Expanded state */
  .acc-trigger[aria-expanded="true"]{background:#f8fafc;}
  .acc-trigger[aria-expanded="true"] .icon-plus{display:none;}
  .acc-trigger[aria-expanded="true"] .icon-minus{display:block;}
  /* Small screens tweaks */
  @media (hover:hover){
    .acc-trigger:hover{background:#f8fafc;}
  }

/******************
    Features
*******************/
.bg-fonts-two {
  max-width: 50%;
}
.features-box h3 {
  font-size: 18px;
  padding-top: 4%;
}

.features-box p {
  line-height: 24px;
  margin-left: -23%;
}

.feature-icon i {
  font-size: 36px;
  padding-left: 15px;
  position: relative;
  color: #428bff !important;
}

.feature-icon i:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 12px;
  width: 42px;
  height: 42px;
  margin: 0 auto;
  border-radius: 6px;
  z-index: -2;
  background: rgba(61, 98, 224, 0.1);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-radius: 8px;
}

.feature-position-icon {
  position: absolute;
  top: -16px;
}

/* FUN FACTS / Testimonials Box */
.facts-box {
  margin-top: -52px;
  background: #ffffff;
  -webkit-box-shadow: 0 -3px 31px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
          box-shadow: 0 -3px 31px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
  padding: 0px 20px;
  border-radius: 15px;
}

.facts-box h2 {
  color: #767D8E;
}

.facts-box p {
  margin-bottom: 20px;
}

.features-alt h4 {
  font-style: italic;
  margin-bottom: 0px;
}

.features-alt h3 {
  margin-top: 5px;
  margin-bottom: 20px;
}

.features-alt p {
  font-size: 15px;
  line-height: 24px;
}

.feat-facts {
  display: table;
  width: 100%;
  margin-top: 20px;
}

.feat-facts .feat-facts-box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.feat-facts .feat-facts-box h4 {
  font-weight: 600;
}

.feat-facts .feat-facts-box p {
  font-style: italic;
}

.feat-facts h2 {
  color: #3d62e0;
}

/*******************
    Pricing
*******************/
.pricing-column {
  position: relative;
  margin-bottom: 40px;
}

.pricing-column .inner-box {
  position: relative;
  margin: 20px auto 0px auto;
  max-width: 320px;
  padding: 0px 30px 50px;
  border: 2px solid #767D8E;
  border-radius: 5px;
}

.inner-box p {
  padding: 0px 20px;
  text-align: center;
  font-size: 15px;
  line-height: 26px;
  color: #767D8E;
  margin-bottom: 30px;
}

.inner-box.active {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.pricing-column .plan-header {
  position: relative;
  padding: 30px 20px 25px;
}

.pricing-column .plan-title {
  font-size: 16px;
  margin-bottom: 10px;
  color: #3d62e0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
}

.pricing-column .plan-title::after {
  content: "";
  display: block;
  width: 32px;
  padding-top: 3px;
  border-bottom: 2px solid #428bff;
}

.pricing-column .plan-price {
  font-size: 38px;
  margin-bottom: 10px;
  color: #435966;
}

.pricing-column .plan-duration {
  font-size: 13px;
  padding-top: 5px;
  color: #98a6ad;
}

.pricing-column .plan-duration-small {
  font-size: 10px;
  padding-top: 5px;
  color: #98a6ad;
}

.pricing-column .plan-stats {
  position: relative;
  padding: 20px 0px 15px;
}

.pricing-column .plan-stats li {
  margin-bottom: 10px;
  line-height: 24px;
}

.pricing-column .plan-stats li i {
  font-size: 18px;
  width: 26px;
  vertical-align: middle;
}

/*******************
    Clients
*******************/


/*******************
    Subscribe Form
*******************/
.subscribe-form h3 {
  color: #ffffff;
  margin: 0px 0px 30px 0px;
}

.subscribe-form form {
  position: relative;
  max-width: 600px;
  margin: 0px auto;
}

.subscribe-form input {
  padding: 15px 20px;
  width: 100%;
  font-size: 17px;
  border: none;
  outline: none !important;
  padding-right: 150px;
  padding-left: 30px;
  background-color: rgba(255, 255, 255, 0.19);
  border-radius: 30px;
}

.subscribe-form input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.subscribe-form input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.subscribe-form input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.subscribe-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.subscribe-form button {
  position: absolute;
  top: 4px;
  right: 4px;
  outline: none !important;
  border-radius: 30px;
  border: none;
  color: #ffffff;
  font-size: 17px;
  background: #3d62e0;
  padding: 11px 30px;
}

/*******************
    Testimonial
*******************/
.testi-img {
  height: 60px;
  width: 60px;
}

.testi-text {
  line-height: 30px;
  letter-spacing: 0.02em;
  font-size: 16px;
  font-style: italic;
}

/*******************
    Contact
*******************/
.contact-form .form-control {
  height: 42px;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 2px solid rgba(40, 40, 46, 0.3);
  font-size: 14px;
}

textarea.form-control {
  height: auto !important;
}

.error {
  margin: 8px 0px;
  display: none;
  color: red;
}

#ajaxsuccess {
  font-size: 16px;
  width: 100%;
  display: none;
  clear: both;
  margin: 8px 0px;
}

/*******************
    FAQ
*******************/
.question-box {
  padding: 20px;
}

.question-box p {
  color: #98a6ad;
  line-height: 24px;
}

.question-box h4 {
  font-size: 16px;
}

.question-box span {
  margin-right: 5px;
}

/*******************
    Footer
*******************/
.footer {
  padding: 20px 0px;
  border-top: 1px solid #3B3B40;
}

.copyright {
  color: #98a6ad;
  margin: 0px;
}

.footer-one {
  color: #98a6ad;
  padding-top: 60px;
  padding-bottom: 0px;
}

.footer-one h5 {
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.footer-one .about-text {
  padding-right: 20px;
  line-height: 22px;
  margin-top: 10px;
}

.footer-one a {
  color: #98a6ad;
  line-height: 28px;
}

.footer-one a:hover {
  color: #ffffff;
}

.footer-one ul li {
  margin: 5px 0px;
}

.footer-one-alt {
  margin-top: 40px;
  padding: 20px 0px;
  border-top: 1px solid #3B3B40;
}

.footer-one-alt .copyright {
  line-height: 34px;
}

.footer-social-one {
  font-size: 16px;
  margin-bottom: 0px;
}

.footer-social-one li {
  padding: 0;
  margin: 0 2px !important;
}

.footer-social-one a {
  border-radius: 50%;
  text-align: center;
  background-color: #3d444b;
  width: 34px;
  display: block;
  height: 34px;
  line-height: 34px;
}

.footer-social-one .whatsapp:hover {
  color: #77ff88;
}

.footer-social-one .telegram:hover {
  color: #0088cc;
}

.footer-social-one .messenger:hover {
  color: #0084ff;
}

.footer-social-one .instagram:hover {
  color: #e4405f;
}

.footer-social-one .viber:hover {
  color: #665cac;
}

/*******************
    Home Register
*******************/
.home-register {
  padding-top: 120px;
}

.home-register .home-wrapper h1 {
  color: #ffffff;
}

.home-register .home-wrapper h4 {
  line-height: 24px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 50px;
  font-size: 16px;
  font-weight: normal;
}

.intro-form {
  padding: 30px;
  border-radius: 5px;
  font-family: 'Montserrat', sans-serif;
  border: 1px solid #fff;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 1.4);
}

.intro-form h3 {
  font-size: 17px;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 30px;
  margin-top: 0px;
}

.intro-form input {
  border: 1px solid #eee;
  height: 38px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

i.fa {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  margin-top: 5px;
  margin-right: -30px;
  position: relative;
  z-index: 1;
  color: gray;
  float: left;
}

i.fa + input {
  padding-left: 26px;
}

.check-color {
  color: #fff;
  text-align: left;
}

.checkbox {
  min-height: 20px;
  padding-left: 20px;
}

.checkbox input[type="checkbox"] {
  float: left;
  margin-left: -20px;
  margin-top: -10px;
}

/*******************
    Home Subscribe
*******************/
.home-subscribe {
  padding-top: 70px;
}

/*******************
    Home Showcase
*******************/
.item-list-right.item-list-big li {
  padding: 0 70px 30px 0;
  list-style: none;
}

.item-list-right li {
  padding: 0 60px 20px 0;
  position: relative;
  text-align: right;
}

.item-list-right li .number {
  right: 0;
  top: 0;
}

.item-list-left.item-list-big li {
  padding: 0 0px 30px 70px;
  list-style: none;
}

.item-list-left li .number {
  left: 0;
}

.item-list-big .number {
  height: 42px;
  width: 42px;
  line-height: 32px;
  color: #ffffff;
  background: #3d62e0;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  border: 5px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

/*******************
    Home Showcase
*******************/
.home-showcase {
  padding-top: 60px;
  padding-bottom: 0px;
}

.home-showcase h2 {
  margin-top: 0px;
  margin-bottom: 30px;
}

/*******************
    Responsive
*******************/
@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding: 20px 15px !important;
  }
}

@media screen and (max-width: 768px) {
  .phone-number-2 {
    font-size: 52px; /* Увеличенный размер шрифта для мобильных устройств */
    font-weight: 700 !important; /* Жирный шрифт для мобильных устройств */
    font-family: Montserrat, sans-serif; /* Убедитесь, что используется шрифт с поддержкой жирного начертания */
  }
  .e-mail {
    font-size: 24px; /* Увеличенный размер шрифта для мобильных устройств */
    font-weight: 400 !important; /* Жирный шрифт для мобильных устройств */
    font-family: Montserrat, sans-serif; /* Убедитесь, что используется шрифт с поддержкой жирного начертания */
  }
  .b-block {
  display: none !important;
}
  .img-fluid-2 {
  max-width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: auto;
}
  .font-weight-medium {
  font-weight: 500 !important;
  font-size: 38px !important;
  }
  .tel {
    display: none;
  }
  .logo {
    height: 28px;
  }
  .navbar-custom {
    padding: 10px 0px !important;
    top: -1px;
  }
  .navbar-custom .navbar-brand {
    height: auto;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
  }
  .navbar-nav {
    margin: 7.5px 0px;
  }
  .navbar-toggler {
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 9px 10px;
    margin-right: 15px;
    outline: 0 !important;
  }
  .navbar-light .navbar-toggler {
    color: #3B3B40;
    border-color: transparent;
  }
  .navbar-dark .navbar-toggler {
    color: #ffffff;
    border-color: transparent;
  }
  .nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px !important;
  }
  .navbar-default {
    border-bottom: 1px solid #e7e7e7;
  }
  .navbar-custom-dark .navbar-toggler {
    color: #ffffff;
  }
  .bg-transparent {
    background-color: #ffffff !important;
  }
  .logo-white {
    display: none !important;
  }
  .logo-dark {
    display: block !important;
  }
  .sticky.navbar-custom-dark.navbar-default .navbar-nav > li > a {
    color: #3B3B40 !important;
  }
}

@media screen and (max-width: 767px) {
  .features-box {
    padding: 10px 0px;
  }
  .navbar-custom-dark.navbar-default .navbar-nav > li > a {
    color: #F9F9F9;
  }
  .features-alt {
    margin: 30px 0px;
    text-align: center !important;
  }
  .home-wrapper {
    text-align: center;
    margin-bottom: 40px !important;
  }
  .footer-one h5 {
    margin-top: 30px;
  }
  .footer-one-alt {
    text-align: center !important;
  }
  .footer-one-alt .footer-social-one {
    float: none !important;
    margin-top: 20px;
  }
}

@media screen and (max-width: 1024px) {
  .tel {
    display: none;
  }
}
/*# sourceMappingURL=style.css.map */

/* Стили для модального окна */
.modal {
  display: none;
  position: fixed;
  z-index: 9998;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); /* Затемнение фона на 50% */
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  top: 15%;
  border: 1px solid #888;
  max-width: 400px;
  position: relative;
}

/* Стили для кнопки закрытия крестика */
.closeModal {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

/* Стили для кнопки копирования */
.copyButton {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 0px 4px 4px 0px;
  cursor: pointer;
}

/* Стили для иконки копирования */
.copyButton i {
  margin-right: 5px;
}

/* Стили для строки с промокодом */
.promo-code-input {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

.promo-code-input input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 16px;
}

/* Настройки стилей для блока с презентацией отзыва */
    .testimonial-card {
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      background-color: #f8f9fa;
    }

    .testimonial-card h5 {
      color: #007bff;
    }

    .testimonial-card p {
      font-size: 18px;
    }

    /* Настройки стилей для обратной ссылки */
    .feedback-link {
      margin-top: 20px;
    }

    /* Ваш CSS-код для стилизации звездочек */
.star-rating {
  display: inline-block;
  font-size: 18px; /* Размер звездочек можно настроить подходящим для вашего дизайна */
}

.fa-star {
  color: #ffc107; /* Желтый цвет для звездочек */
  pointer-events: none; /* Запрет кликов на звездочках */
}

.button-prywatnosc {
  display: inline-block;
  background-color: #3366BB;
  color: #FFFFFF;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

.button-prywatnosc:hover {
  background-color: #F5F5F5;
}

.button-drukuj {
  display: inline-block;
  background-color: #3366BB;
  color: #FFFFFF;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

.button-drukuj:hover {
  background-color: #007bff;
}

.monserrat {
  color: #428bff;
  padding-bottom: 10px;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  display: inline-block;
}

.rozmiar-m {
  width: 65px; /* Задайте нужную ширину */
  height: 65px; /* Задайте нужную высоту */
  fill: white; /* Устанавливаем цвет заливки */
}

.text-colored {
  color: #fff;
}

.text-colored svg {
  width: 55px; /* Задайте нужную ширину */
  height: 55px; /* Задайте нужную высоту */
  fill: white; /* Устанавливаем цвет заливки */
}

.text-left {
  text-align: left !important;
}

.text-colored img {
  width: 55px; /* Задайте нужную ширину */
  height: 55px; /* Задайте нужную высоту */
  fill: white; /* Устанавливаем цвет заливки */
}

i.fab.fa-cc-visa {
  font-size: 25px;
}

i.fas.fa-money-bill-alt {
  font-size: 25px;
}

i.fa-cc-mastercard {
  font-size: 25px;
}

i.fab.fa-google-pay {
  font-size: 25px;
}

.text-colored-2 {
  color: #000;
}

.text-colored-tel {
  color: #428bff;
  margin-top: 5px;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 24px;
  font-family: "Montserrat", sans-serif;
  text-decoration:none;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  display:inline-block;
}

/* Отступы кнопок */
.social-buttons-padding {
  margin-top: 20px;
}

/* Общие стили для кнопок */
.social-buttons a {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
  border-radius: 50%; /* Сделаем кнопки круглыми */
  font-size: 20px;
}

/* Стили для значков */
.social-buttons i {
  margin-right: 0;
}

/* Стили для кнопки WhatsApp */
.social-buttons .whatsapp {
  background-color: #25d366;
}

/* Стили для кнопки Telegram */
.social-buttons .telegram {
  background-color: #0088cc;
}

/* Стили для кнопки Facebook Messenger */
.social-buttons .messenger {
  background-color: #0084ff;
}

/* Стили для кнопки Instagram */
.social-buttons .instagram {
  background-color: #e4405f;
}

/* Стили для кнопки Viber */
.social-buttons .viber {
  background-color: #665cac;
}

.custom-tile {
      min-height: 100px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Тень */
      border-radius: 4px; /* Закругление углов */
      padding: 10px; /* Внутренние отступы */
      color: #FFFFFF; /* Цвет текста */
      display: flex; /* Отображаем значок и текст внутри блока в одну строку */
      align-items: center; /* Выравниваем элементы по вертикали */
      background-color: #428BFF; /* Статический светло-голубой фон */
      background-image: linear-gradient(245deg, rgba(255, 255, 255, 0.2) 35%, transparent 65%, rgba(255, 255, 255, 0.2) 65%); /* Градиентный переход */
      background-size: 100% 100%; /* Размерность градиента */
    }

    .custom-tile i {
      font-size: 30px; /* Увеличение размера значка */
      margin-left: 10px;
      margin-right: 15px; /* Отступ между значком и текстом */
    }

    .custom-tile span {
      font-size: 18px; /* Увеличение размера текста */
      text-align: left;
      margin-right: 8px;
    }

    /* Добавим стили для анимации при наведении курсора */
    .custom-tile:hover {
      transform: scale(1.05); /* Увеличение размера при наведении курсора */
      transition: transform 0.2s ease-in-out; /* Плавность анимации */
    }

    /* Медиа-запрос для добавления вертикальных отступов в мобильной версии */
    @media (max-width: 576px) {
      .custom-tile {
        margin-bottom: 10px; /* Вертикальный отступ между блоками */
      }
    }

    /* Добавим стили для версии ПК */
    @media (min-width: 992px) {
      .custom-tile {
        margin-top: 25px; /* Вертикальный отступ между блоками для версии ПК */
      }
    }

    .promocja-block {
      background-color: #428BFF;
      color: #fff;
      text-align: center;
      padding: 20px;
      margin: 5px;
      margin-bottom: 15px;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      transition: background-color 0.3s ease, transform 0.3s ease; /* Добавляем переходы */
      cursor: pointer; /* Добавляем стилизацию курсора при наведении */
    }
    .promocja-block:hover {
      background-color: #007bff; /* Изменяем цвет фона при наведении */
      transform: scale(1.05); /* Немного увеличиваем размер блока при наведении */
    }
    .promocja-block::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.2);
      clip-path: polygon(85% 0, 100% 0, 100% 100%, 50% 100%);
    }
    .promocja-icon {
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translate(-50%, -50%) scale(6);
      padding: 10px;
      opacity: 0.4; /* Добавляем прозрачность для иконок */
    }
    .promocja-icon i {
      color: #fff;
    }
    .promocja-block h2 {
      margin-top: 0;
    }

.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #343a40;
  color: #fff;
  padding: 10px;
  text-align: center;
  z-index: 9999; /* Устанавливаем высокий z-index для выноса на передний план */
}

.cookie-consent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #0056b3; /* Цвет узкой полоски сверху */
}

.cookie-content {
  max-width: 600px;
  margin: 0 auto;
}

.cookie-options label {
  display: block;
  margin-bottom: 5px;
  position: relative; /* Добавляем относительное позиционирование для позиционирования псевдоэлемента */
}

.cookie-options label input[type="checkbox"] {
  position: absolute;
  left: -9999px; /* Перемещаем чекбокс за пределы экрана, чтобы скрыть его визуально */
}

.cookie-options label span {
  padding-left: 30px; /* Добавляем отступ слева для создания пространства для нашей стилизованной замены чекбокса */
  position: relative;
  cursor: pointer;
}

.cookie-options label span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border: 2px solid #428BFF; /* Цвет границы чекбокса */
  border-radius: 5px; /* Закругление углов */
}

/* Стилизуем чекбокс при его активации (выборе) */
.cookie-options label input[type="checkbox"]:checked + span::before {
  background-color: #428BFF; /* Цвет заливки чекбокса при выборе */
}

/* Раскрывающийся список */
.cookie-options details {
  margin-top: 10px;
  border: 2px solid #428BFF; /* Граница для обозначения раскрывающегося списка */
  border-radius: 5px; /* Закругление углов */
  padding: 10px;
}

.cookie-options summary {
  cursor: pointer;
  outline: none;
  font-weight: bold;
}

.cookie-options details[open] {
  background-color: #428BFF1A; /* Цвет фона при открытом раскрывающемся списке */
}

.cookie-buttons {
  margin-top: 20px; /* Вертикальный отступ между кнопками на больших экранах */
}

.cookie-buttons button,
.cookie-buttons a {
  background-color: #428BFF;
  color: #fff;
  margin-top: 20px;
  border: none;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: none;
}

.cookie-buttons button:hover,
.cookie-buttons a:hover {
  background-color: #0056b3;
}

/* Медиазапрос для мобильных устройств */
@media screen and (max-width: 768px) {
  .cookie-buttons {
    margin-top: 10px; /* Вертикальный отступ между кнопками на мобильных устройствах */
  }
}

/* Стили для картинки SVG */
.svg-image {
  width: 10px;
  height: 20px;
  padding-bottom: 5px;
}

.svg-image-glowne {
  color: #fff !important;
  width: 40px;
  height: 50px;
  padding-right: 10px;
  padding-bottom: 10px;
  overflow: hidden;
}

.text-located-glowne {
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 26px;
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  display: inline-block;
}

.text-located {
  text-color: #428bff !important;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  display: inline-block;
}

/* Стили для элемента с вертикальной палочкой */
    .vertical-line {
      position: relative;
      width: 1px;
      height: 20px;
      background-color: white;
    }

    /* Стили для псевдоэлемента ::before */
    .vertical-line::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 100%;
      background-color: gray;
    }

/* GALLERIA Стили для кнопок категорий */

.categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.categories button {
  margin: 5px;
  padding: 8px 16px;
  background-color: #428bff;
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.2s;
}

.categories button:not(:last-child) {
  margin-right: 10px;
}

.categories button:hover {
  background-color: #2980b9;
  transform: scale(1.1);
}

.categories button.active {
  background-color: #2ecc71;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* Отступ между изображениями */
}

.image-gallery img {
  width: 100%;
  height: 200px; /* Устанавливаем желаемую высоту */
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  animation: fadeIn 0.5s ease-in-out; /* Добавляем анимацию появления */
}

/* Медиазапрос для обеспечения резиновости плитки Bootstrap и меньшего количества изображений в ряду на маленьких экранах */
@media (max-width: 768px) {
  .image-gallery {
    grid-template-columns: repeat(1, 1fr);
  }
}

.form-check {
  margin-bottom: 15px;
}

.btn-primary {
  display: block;
  width: 100%;
}

/* Стили для полоски процентов */
.progress {
  height: 20px;
  padding-left: 10px;
  background-color: #f1f1f1;
  border-radius: 5px;
  overflow: hidden;
}

.progress-2 {
  height: 40px;
  background-color: #f1f1f1;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 20px;
  border-radius: 5px;
}

#background-audio {
  display: none;
}

#audio-toggle {
  background-color: transparent;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.custom-card {
  background-color: #428bff;
  margin-bottom: 20px;
  text-align: left;
  background-color: #428BFF;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.2) 30%, transparent 70%, rgba(255, 255, 255, 0.2) 65%);
}

.img-fluid {
  max-width: 200px;
}

.img-fluid-2 {
  max-width: 100%;
  transform: scale(1.3);
  display: flex;
  align-items: center;
  overflow: hidden;
  height: auto;
}

.card-text {
  font-size: 28px;
  font-weight: 600;
}

.media {
  flex-direction: column; /* Изменение порядка на мобильных устройствах */
}

@media screen and (min-width: 768px) {
  .card-body {
      flex-direction: row; /* Горизонтальное расположение на больших экранах */
  }

  .media {
      flex-direction: row; /* Возвращаем горизонтальное расположение на больших экранах */
  }
}

.table {
  color: #fff;
}

.table-text {
  font-size: 18px;
  font-weight: 800;
}

.contact-block p {
  margin-bottom: 0px;
}

.blur {
  filter: blur(5px);
}

.custom-icon {
    margin-left: -10px;
}

.contact-info {
  line-height: 1.5;
  font-weight: 800;
}

.circle {
  list-style-type: none; /* Убираем стандартные маркеры */
  padding-left: 0; /* Убираем отступы слева */
  line-height: 0.9; /* Уменьшаем отступы между строками в два раза */
}
.circle li:before {
  content: "\2022"; /* Код символа кружка (Unicode) */
  color: #007bff; /* Цвет кружка (можно изменить) */
  display: inline-block;
  width: 1em; /* Ширина кружка */
  margin-left: -1em; /* Отступ слева от кружка */
}

.form-check-container {
    display: flex;
    justify-content: space-between; /* Распределяет пространство между элементами */
    gap: 30px; /* Расстояние между столбцами */
}

.weather-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Делаем элементы по краям */
}

.weather-container img#weatherIcon {
    margin-right: 10px;
}

.weather-container div {
    flex: 1;
}

.tire-icon {
    width: 40px; /* Установите нужный размер */
    margin-left: 10px;
}


.thumbnail {
  width: 40px;
  height: 40px;
  float: left;
  margin: 0 10px 0px 0;
}

.marquee-container {
    width: 100%;
    background-color: #343a40; /* Черный фон для контраста */
    padding: 10px 0;
    overflow: hidden; /* Скрываем содержимое, выходящее за пределы контейнера */
}

.marquee {
    display: inline-block;
    white-space: nowrap;
    color: #ffa500; /* Ярко-оранжевый цвет текста */
    font-size: 16px;
    animation: marquee 28s linear infinite; /* Анимация движения строки */
}

.phone-number {
    color: #ffffff; /* Белый цвет для номеров телефонов */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
}

.phone-number:hover {
    text-decoration: underline; /* Добавляем подчеркивание при наведении */
}

@keyframes marquee {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

.highlighted-o {
  background-color: rgba(50, 50, 50, 0.8); /* Полупрозрачный темно-серый */
  padding: 5px;
  border-radius: 5px;
  color: white; /* Цвет текста */
}

/* Karty korzyści */
.feature-card{
  background: #505458; /* тёмный, в духе сайта */
  color: #fff;
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-align: left;
}
.feature-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.12);
}
.feature-card--wide{
  display:flex;
  align-items:center;
  gap:16px;
}
@media (max-width: 576px){
  .feature-card--wide{ flex-direction: column; align-items:flex-start; }
}

/* Иконка в кружке */
.feature-icon-motor{
  width: 52px; height: 52px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #ff6b00, #ff8c3a);
  box-shadow: 0 6px 18px rgba(255,107,0,.35);
  margin-bottom: 10px;
  flex: 0 0 52px;
}
.feature-icon-motor i{ font-size: 22px; color:#fff; }

/* Заголовок и текст */
.feature-card h3{
  font-size: 1.2rem;
  margin: 6px 0 8px;
  color: #fff;
}
.feature-card p{
  margin: 0;
  color: rgba(255,255,255,.9);
  line-height: 1.55;
}

/* SEO services block */
.seo-services .seo-card{
  background:#505458;
  color:#fff;
  border-radius:16px;
  padding:18px 18px 14px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.seo-services .seo-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,.32);
  border-color:rgba(255,255,255,.12);
}
.seo-services .seo-card__head{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.seo-services .seo-card__head i{
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#ff6b00,#ff8c3a); border-radius:50%;
  color:#fff; font-size:20px; box-shadow:0 6px 18px rgba(255,107,0,.35);
}
.seo-services .seo-card__head h3{
  font-size:1.05rem; margin:0; color:#fff;
}
.seo-services .seo-list{
  list-style:none; padding:0; margin:0;
  columns:1; column-gap:16px;
}
.seo-services .seo-list li{
  position:relative; padding-left:22px; break-inside:avoid; margin:6px 0;
  color:rgba(255,255,255,.92);
}
.seo-services .seo-list li::before{
  content:""; position:absolute; left:0; top:8px; width:10px; height:10px;
  border-radius:50%; background:#2ad67b; box-shadow:0 0 0 3px rgba(42,214,123,.18);
}
@media(min-width:1200px){
  .seo-services .seo-list{ columns:2; }
}

/* Stats */
.stats .stat-card{
  background:#428bff; color:#fff; border-radius:16px;
  padding:26px; text-align:center; border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.25); transition:transform .18s ease;
}
.stats .stat-card:hover{ transform: translateY(-3px); }
.stats .stat-value{
  font-size:2.6rem; font-weight:800; line-height:1; letter-spacing:.5px;
  background:linear-gradient(135deg,#fff,#fff); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats .stat-label{ margin-top:8px; color:rgba(255,255,255,.9); }

/* коробки */
.countdown .time-box { 
  background:rgba(255,255,255,.1); 
  padding:20px 24px;   /* увеличиваем отступы */
  border-radius:16px;  /* скругления */
  min-width:100px;     /* ширина */
}

/* цифры */
.countdown .time-box span { 
  display:block; 
  font-size:3rem;      /* 🔥 увеличь до 3–4rem для больших цифр */
  font-weight:900; 
  line-height:1; 
}

/* подписи (d, h, m, s) */
.countdown .time-box small { 
  opacity:.85; 
  font-size:1rem;      /* чуть крупнее */
  text-transform:uppercase; 
  letter-spacing:1px; 
}

.countdown { display:inline-flex; gap:10px; align-items:center; }
.countdown .time-box{ background:rgba(255,255,255,.08); padding:12px 14px; border-radius:12px; min-width:68px; }
.countdown .time-box span{ display:block; font-size:2rem; font-weight:800; line-height:1; }
.countdown .time-box small{ opacity:.75; font-size:.8rem; text-transform:uppercase; }
.countdown.expired { display:inline-block; background:rgba(255,255,255,.08); padding:10px 14px; border-radius:10px; }

/* Stabilne odstępy między kartami - działa w BS4/BS5 */
  .row-cards > [class^="col-"], .row-cards > [class*=" col-"] { margin-bottom: 1.25rem; }
  /* Opcjonalnie слегка усилим kontrast bg-info + czytelność */
  .custom-card.bg-info { background-color: #17a2b8; } /* BS4 fallback */
  .custom-card.text-white .card-title { margin-bottom: .25rem; }
  .custom-card .mb-0 { margin-bottom: 0; }

#cennik .table th, #cennik .table td { vertical-align: middle; }

  #dlaczego-my .why-ico i { opacity: .9; }
  #dlaczego-my .why-card:hover { transform: translateY(-2px); transition: .2s ease; }
  #dlaczego-my .col-lg-3:nth-child(n+5) {
  margin-top: 1.5rem; /* можно 2rem для большей „oddechu” */
}
#dlaczego-my .col-lg-3:nth-child(n+1) {
  margin-top: 1.5rem; /* можно 2rem для большей „oddechu” */
}

#opinie-google .col-md-6:nth-child(n+1) {
  margin-top: 1.5rem; /* albo 2rem dla większego oddechu */
}
#opinie-google .col-md-6:nth-child(n+4) {
  margin-top: 1.5rem; /* albo 2rem dla większego oddechu */
}

@media (max-width: 768px) {
  .contact-box + .contact-box {
    margin-top: 1.5rem;
  }
}

  .fs-5 { font-size: 1.25rem; }
  .fs-4 { font-size: 1.5rem; }
  .rounded-custom { border-radius: 0.5rem; }

.reviews-marquee {position: relative;overflow: hidden;width: 100%;user-select: none;padding: 20px 0;   /* <<< место сверху и снизу для cienia */}
.reviews-track{display:flex;align-items:stretch;gap:16px;will-change:transform}
.review-card{flex:0 0 320px;max-width:85vw;background:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.08);padding:16px}
.review-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.review-author{font-weight:700}
.review-stars{font-size:14px;letter-spacing:2px;color:#f6b300}
.review-text{margin:0 0 8px 0;font-size:14.5px;color:#333}
.review-meta{font-size:12px;color:#7a7a7a}
@media (max-width:360px){.review-card{flex-basis:280px}}

.price-card{
  background:#fff; border-radius:14px; padding:14px 16px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  text-decoration:none; color:#212529; transition:.15s ease;
  border:1px solid rgba(0,0,0,.04);
}
.price-card:hover, .price-card:focus{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.1);
  text-decoration:none; color:#212529;
}
.price-icon{
  width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:#f6f8fb; margin-right:14px; flex:0 0 44px;
}
.price-icon i{ font-size:18px; }
.price-body{ flex:1 1 auto; min-width:0; }
.price-title{ font-weight:700; line-height:1.2; }
.price-sub{ font-size:13px; color:#6c757d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.price-value{
  margin-left:12px; white-space:nowrap; font-size:14px; color:#111;
}
.price-value strong{ font-size:18px; font-weight:800; }
.price-currency{ font-size:.85em; margin-left:2px; }

.gap-2 > * { margin: 4px; }

/* отступы от краёв + читаемость */
.btn-bar { padding: 0 12px; }
.btn-bar .btn { min-width: 180px; }

/* небольшой «зазор» на случай, если родитель сжимает контент */
.btn-bar .btn + .btn { margin-left: 12px; }

/* по умолчанию на очень узких экранах — друг под другом и по центру */
@media (max-width: 576px) {
  .btn-bar { padding: 0; flex-direction: column; align-items: center; }
  .btn-bar .btn { width: 100%; max-width: 320px; margin: 6px 0; }
}

/* компактнее на очень узких экранах */
@media (max-width:360px){
  .price-sub{ display:none; }
}
@media (max-width: 576px) {
  #cennik-title + .d-flex {
    flex-direction: column;
    align-items: center;
  }
  #cennik-title + .d-flex a {
    width: 100%;
    max-width: 260px;
    margin-bottom: 8px;
  }
}

/* ——— Локальные стили только для этой секции ——— */
.about-why-compact .card { border-radius: 14px; }
.about-why-compact .title { letter-spacing: .2px; }

.about-why-compact .feature-stack { display:flex; flex-direction:column; }
.about-why-compact .feature-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
  padding:14px 16px;
  margin-bottom:14px;
}

.about-why-compact .media-body h3,
.about-why-compact .media-body p { color:#212529 !important; }

.about-why-compact .feature-ico{
  width:44px; height:44px;
  border-radius:12px;
  background:linear-gradient(180deg,#e9f2ff, #d9e8ff);
  color:#0d6efd;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 44px;
}
.about-why-compact .feature-ico i{ font-size:18px; line-height:1; }

/* мобильные отступы */
@media (max-width: 575.98px){
  .about-why-compact .feature-card{ padding:12px 14px; }
  .about-why-compact .feature-ico{ width:40px;height:40px; }
}
/* --- FIX: выравнивание иконки и заголовка в один ряд на всех ширинах --- */
.about-why-compact .feature-card.media,
.about-why-compact .feature-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* иконка слева фикс. ширины, не сжимается */
.about-why-compact .feature-ico{
  flex: 0 0 44px;
  width: 44px; height: 44px;
  margin-right: 12px;       /* аккуратный отступ, вместо mr-3 можно так */
}

/* текстовая часть — в одну строку с иконкой, без центровки */
.about-why-compact .feature-card .media-body{
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
/* на очень узких экранах — чуть компактнее */
@media (max-width:360px){
  .about-why-compact .feature-ico{ width:40px; height:40px; margin-right:8px; }
}

.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.chip {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:110px; padding:12px;
  background:linear-gradient(135deg,#fff 0%,#f7f9ff 100%);
  border:1px solid #e9eef7; border-radius:9999px; /* pill */
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  /* по умолчанию на широких — фиксированная плитка */
  width:180px;
  text-align:center;
}
/* На мобиле (≤576px) — две колонки */
@media (max-width:576px){
  .chip { width:calc(50% - 6px); border-radius:14px; } /* чуть менее «пилюля», чтобы плотнее легло */
}
.chip, .custom-tile {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.chip:hover, .custom-tile:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  z-index: 2; /* чтобы выступал над соседями */
}
.chip:hover, .custom-tile:hover {
  box-shadow: 0 4px 12px rgba(66,139,255,0.3);
  border-color: #428BFF;
}

.moto-marquee{position:relative;overflow:hidden}
.moto-track{display:flex;gap:12px;will-change:transform}
.moto-marquee.is-paused .moto-track{animation-play-state:paused}
.moto-card{flex:0 0 auto;width:160px}
.moto-card .card{height:100%}
.moto-logo-box{width:96px;height:72px;margin:0 auto;border-radius:.5rem;background:#f7f7f9}
/* анимация будет добавлена инлайном из JS как: animation: moto-loop Xs linear infinite */
@keyframes moto-loop{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--loop-to),0,0)}}
/* лёгкие маски по краям, чтобы «хвост» красиво исчезал/появлялся */
.moto-marquee:before,.moto-marquee:after{
  content:"";position:absolute;top:0;bottom:0;width:32px;pointer-events:none;
  z-index:1
}
.moto-marquee:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.moto-marquee:after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
@media (prefers-reduced-motion: reduce){.moto-track{animation:none}}

@media (max-width: 576px) {
  .mt-4 .btn {
    display: flex;             /* делаем флекс */
    align-items: center;       /* выравниваем иконку и текст по центру вертикали */
    width: 100% !important;    /* обе кнопки во всю ширину */
    margin-right: 0 !important;/* убираем разный отступ */
  }
  .mt-4 .btn .media {
    flex: 1; /* чтобы текст занимал оставшееся место, и иконка оставалась слева */
  }
}

/* Neoglass card */
.neo-glass{
  position: relative;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.25),          /* мягкая внешняя тень */
    inset 0 1px 0 rgba(255,255,255,0.35),  /* тонкий верхний блик */
    inset 0 -1px 8px rgba(0,0,0,0.15);     /* лёгкая внутренняя глубина */
}

/* Кнопки в стиле neo-glass — не ломают .btn из Bootstrap */
.btn-neo-glass{
  border-radius: 14px;
  padding: 0.65rem 1.15rem;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.18);
  color: #fff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-neo-glass:hover,
.btn-neo-glass:focus{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.26);
  box-shadow: 0 10px 22px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Вариант «outline» (вторичная кнопка) */
.btn-neo-outline{
  background: transparent;
  border-color: rgba(255,255,255,0.55);
}
.btn-neo-outline:hover,
.btn-neo-outline:focus{
  background: rgba(255,255,255,0.14);
}

/* Фолбэк, если backdrop-filter не поддерживается */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .neo-glass{ background: rgba(0,0,0,0.35); }
  .btn-neo-glass{ background: rgba(255,255,255,0.18); }
}

/* Небольшая помощь читаемости внутри подложки */
.neo-glass .lead{ color: rgba(255,255,255,0.92); }
.neo-glass .text-white-50{ color: rgba(255,255,255,0.7) !important; }

/* Telefon w sekcji "Uwaga" – mobilny fix */
.features-alt .phone-number-2,
.phone-number-2{
  display:inline-block;
  font-weight:800;
  line-height:1.1;
  /* плавно подстраиваем размер: min 20px, на моб ~6–7vw, max 36px */
  font-size:clamp(16px, 6.5vw, 16px);
  letter-spacing:0.5px;
  margin: .25rem 0 .5rem;
  white-space:nowrap;       /* оставляем в одну строку */
  max-width:100%;
}

/* если нужно ещё компактнее на очень узких экранах */
@media (max-width: 360px){
  .features-alt .phone-number-2{ font-size: 18px; }
}

/* высота фикс-хедера (скорректируй при желании) */
:root { --headerH: 90px; }

/* плавный скролл и отступ сверху, чтобы блок не уезжал под хедер */
html { scroll-behavior: smooth; scroll-padding-top: var(--headerH); }

/* на всякий случай для конкретных целей-якорей */
#kontakt-flota, #fleetForm { scroll-margin-top: var(--headerH); }

  /* Скоуп — только внутри #faq-cards *//* только внутри секции */
#faq-cards .qbox{
  background:#fff; border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.06);
  padding:16px 18px; border-left:4px solid #0d6efd; margin-bottom:16px;
}

/* шапка: иконка + заголовок в одной линии */
#faq-cards .qbox-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:8px;
}

/* иконка аккуратно по центру строки заголовка */
#faq-cards .qbox-icon{
  width:36px; height:36px; border-radius:8px;
  background:rgba(13,110,253,.1);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 36px;
}
#faq-cards .qbox-icon i{ font-size:16px; color:#0d6efd; }

/* заголовок без лишних отступов */
#faq-cards .qbox h3{ margin:0; font-size:1.05rem; }

/* текст и списки */
#faq-cards .qbox-body p{ margin:0 0 6px; }
#faq-cards .qbox-body .qbox-list{ padding-left:18px; margin:0; }

/* мобилка */
@media (max-width:575.98px){
  #faq-cards .qbox{ border-radius:12px; }
}

/* Scoped do sekcji #porady-spawanie */
#porady-spawanie .knowledge-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(85% - .5rem);
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  touch-action: pan-y; /* nie blokuje pionowego scrolla strony */
}
@media (min-width: 768px){
  #porady-spawanie .knowledge-track{ grid-auto-columns: 33%; }
}
@media (min-width: 1200px){
  #porady-spawanie .knowledge-track{ grid-auto-columns: 25%; }
}

#porady-spawanie .knowledge-card{
  scroll-snap-align: start;
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
  padding: 1rem;
  min-height: 150px;
  display: flex;
  flex-direction: column;
}
#porady-spawanie .knowledge-card h3{ line-height: 1.35; }

#porady-spawanie .knowledge-link{
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(13,110,253,.35); /* kolor BS primary */
}
#porady-spawanie .knowledge-link:hover{ border-bottom-color: currentColor; }

#porady-spawanie .knowledge-wrap{ position: relative; }

/* Delikatne gradienty po bokach: sygnał, że lista jest przewijana */
#porady-spawanie .knowledge-wrap::before,
#porady-spawanie .knowledge-wrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:32px;
  pointer-events:none;
}
#porady-spawanie .knowledge-wrap::before{
  left:0;
  background:linear-gradient(to right, rgba(255,255,255,.92), rgba(255,255,255,0));
}
#porady-spawanie .knowledge-wrap::after{
  right:0;
  background:linear-gradient(to left, rgba(255,255,255,.92), rgba(255,255,255,0));
}

/* Wskaźnik przeciągania */
#porady-spawanie .dragging{ cursor: grabbing; }

.glass-card {
  background: rgba(255, 255, 255, 0.15); /* półprzezroczysty biały */
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.25);
}

.glass-card .small {
  color: #fff !important; /* tekst na jasnym tle */
}

.glass-card i {
  color: #00ffae; /* akcent dla ikon (możesz zmienić na inny) */
  font-size: 1.4rem;
}

.neu-card {
  background: #ffffff; /* ten sam co body */
  border-radius: 1.2rem;
  box-shadow: 9px 9px 18px rgba(0,0,0,0.12),
              -9px -9px 18px rgba(255,255,255,1);
  padding: 2rem;
  transition: all 0.2s ease-in-out;
}

.neu-card:hover {
  box-shadow: 4px 4px 8px rgba(0,0,0,0.08),
              -4px -4px 8px rgba(255,255,255,1);
  transform: translateY(-3px);
}

.neu-card h3,
.neu-card p,
.neu-card li {
  color: #222; /* ciemniejszy tekst, żeby nie zlewał się z białym */
}

/* ============================= */
/* FIX: jasne sekcje (cennik, dlaczego, objawy, interwały) */
/* ============================= */

#cennik-rozrzad-v3,
#dlaczego-rozrzad,
#objawy-rozrzad,
#interwaly-rozrzad {
  color: #1f2937; /* ciemny grafit dla tekstu */
}

#cennik-rozrzad-v3 h1, #cennik-rozrzad-v3 h2, #cennik-rozrzad-v3 h3, #cennik-rozrzad-v3 h4, #cennik-rozrzad-v3 h5, #cennik-rozrzad-v3 h6,
#dlaczego-rozrzad h1, #dlaczego-rozrzad h2, #dlaczego-rozrzad h3, #dlaczego-rozrzad h4, #dlaczego-rozrzad h5, #dlaczego-rozrzad h6,
#objawy-rozrzad h1, #objawy-rozrzad h2, #objawy-rozrzad h3, #objawy-rozrzad h4, #objawy-rozrzad h5, #objawy-rozrzad h6,
#interwaly-rozrzad h1, #interwaly-rozrzad h2, #interwaly-rozrzad h3, #interwaly-rozrzad h4, #interwaly-rozrzad h5, #interwaly-rozrzad h6 {
  color: #0f172a; /* ciemniejszy kolor nagłówków */
}

#cennik-rozrzad-v3 .title-alt,
#dlaczego-rozrzad .title-alt,
#objawy-rozrzad .title-alt,
#interwaly-rozrzad .title-alt,
#cennik-rozrzad-v3 .small,
#dlaczego-rozrzad .small,
#objawy-rozrzad .small,
#interwaly-rozrzad .small {
  color: #1f2937;
}

/* Tabele w sekcji interwałów */
#interwaly-rozrzad .table { color: #1f2937; }
#interwaly-rozrzad .thead-light th {
  color: #1f2937;
  background: #f1f5f9;
}

/* LOGO TICKER */
.logo-ticker { overflow: hidden; position: relative; }
.logo-track { display: flex; width: max-content; }
.logo-list { display: flex; list-style: none; padding: 0; margin: 0; }
.logo-item { display: flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; }
.logo-fig { display: flex; flex-direction: column; align-items: center; margin: 0; }
.logo-cap { margin-top: .5rem; font-size: .75rem; letter-spacing: .06em; }

/* animacja bezszwowa: dwa identyczne pasy przesuwamy w lewo */
.logo-track { animation: tickerScroll 40s linear infinite; }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* bo mamy 2 takie same listy */
}

/* optyczne wyrównanie logo (opcjonalnie) */
.logo-item img {
  width: 100px; height: 100px; object-fit: contain; filter: saturate(0.9) contrast(1.05);
}

/* redukcja ruchu – szacunek dla prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}

/* Neumorphism ramka na jasnym tle (spójność z resztą) */
.neu-card { background:#ffffff; border-radius:1.2rem;
  box-shadow: 9px 9px 18px rgba(0,0,0,0.08), -9px -9px 18px rgba(255,255,255,1); }

/* === GLASS BACKGROUND SEKCJI === */
.glass-section {
  background: linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* === KARTY GLASSMORPHISM === */
.glass-card {
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 8px 24px rgba(16,24,40,0.08);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-radius: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(16,24,40,0.12);
}
.glass-card .card-body { padding: 20px 18px; }
.glass-card h3 { color: #0b63f6; margin-bottom: .25rem; }
.glass-card p { color: #475467; }

/* Fallback без backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card { background: rgba(255,255,255,0.92); }
}

/* === NEO pill-кнопки === */
.neo-pill {
  background: #eef2f7;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  color: #344054;
  box-shadow: 6px 6px 12px #cfd6e1, -6px -6px 12px #ffffff;
  transition: all .15s ease;
}
.neo-pill:hover { transform: translateY(-1px); }
.neo-pill.active {
  color: #0b63f6;
  box-shadow: inset 4px 4px 8px #cfd6e1, inset -4px -4px 8px #ffffff;
}

/* === NEO ссылки быстрого доступа === */
.neo-link {
  background: #eef2f7;
  border-radius: 12px;
  padding: 6px 12px;
  margin: 3px;
  display: inline-block;
  box-shadow: 4px 4px 8px #cfd6e1, -4px -4px 8px #ffffff;
  color: #344054 !important;
  text-decoration: none !important;
}
.neo-link:hover { color: #0b63f6 !important; }

/* Счетчик */
#serviceCount { font-weight: 600; }

.glass-card .mb-2 i {
  font-size: 1.8rem;   /* примерно fa-2x */
  color: #0b63f6;      /* фирменный синий акцент */
  opacity: 1;
}

.glass-card h3 {
  color: #0b63f6;  /* синий заголовок */
  font-weight: 600;
}
.glass-card p {
  color: #333;     /* тёмно-серый для читаемости */
}

#serviceGrid .col-12 {
  padding: 12px;  /* отступы между колонками */
}
.glass-card {
  margin: 0;      /* убираем случайные отступы внутри */
}

.glass-card .card-body {
  padding: 24px 20px;
}

/* --- Kontrast w kartach glass (tylko w sekcji mechanika) --- */
.glass-section .glass-card h3 {
  color: #0b63f6 !important;   /* akcent для заголовков */
  font-weight: 600;
}

.glass-section .glass-card p,
.glass-section .glass-card .small,
.glass-section .glass-card .text-muted {
  color: #334155 !important;   /* тёмно-серый, читаемый на светлом стекле */
}

.glass-section .glass-card .text-primary,
.glass-section .glass-card a .text-primary,
.glass-section .glass-card span.small.text-primary {
  color: #0b63f6 !important;   /* «Czytaj więcej →» остаётся синим */
}

/* если где-то на предке висит .text-white — не даём ему пробиться внутрь карточек */
.glass-section .glass-card, 
.glass-section .glass-card *:not(i) {
  text-shadow: none;
}

/* Иконки — яркие и крупнее */
.glass-card .mb-2 i {
  font-size: 1.8rem;
  color: #0b63f6;
  opacity: 1;
}

/* Больше «воздуха» между карточками */
#serviceGrid > [class*="col-"] { padding: 12px; }
.glass-card .card-body { padding: 24px 20px; }

/* светлое стекло */
.glass-hero {
  background: rgba(255,255,255,0.28);           /* было rgba(0,0,0,0.45) */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.35);
}
/* текст станет тёмным, чтобы читался на светлом стекле */
.glass-hero .text-white,
.glass-hero .text-white-50,
.glass-hero .text-white-75 {
  color: #1f2937 !important; /* тёмно-серый */
}
.glass-hero h1,
.glass-hero .lead { color: #111827 !important; }
.glass-hero .btn.btn-outline-light { 
  color:#111827; 
  border-color: rgba(17,24,39,.2);
}
.glass-hero .btn.btn-primary { box-shadow: 0 6px 18px rgba(11,99,246,.25); }
.glass-hero .btn.btn-outline-light:hover { background: rgba(255,255,255,.2); }

.glass-hero .btn + .btn {
  margin-left: 15px; /* отступ только у второй кнопки */
}

/* --- Mobile-safe для wxline --- */
.wxline{
  display:flex; align-items:center; justify-content:center;
  gap:8px; color:#fff;
  font-size:clamp(.9rem, 2.8vw, 1rem);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  margin-top:12px;
  flex-wrap:wrap;             /* ← позволяем перенос */
}
.wxline > *{ min-width:0; }   /* ← чтобы ellipsis работал */

#wxline-temp{ font-weight:700; letter-spacing:.2px; }
#wxline-desc{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; }
.wxline .dot{ opacity:.6; }

/* Чип/совет: на мобиле переносим на новую строку и не даём вылезти */
.wxline-tip{
  margin-left:10px;
  padding:3px 8px; border-radius:999px;
  font-size:.8rem; font-weight:600; white-space:nowrap;
  background:rgba(255,255,255,.15);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.25);
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}

/* ≤576px: совет на отдельной строке, описание короче */
@media (max-width:576px){
  .wxline-tip{ flex: 1 1 100%; text-align:center; margin-left:0; margin-top:6px; }
  #wxline-desc{ max-width:45vw; }
}

/* ≤380px: ещё компактнее — убираем точку и описание */
@media (max-width:380px){
  .wxline .dot, #wxline-desc{ display:none; }
  .wxline-tip{ flex-basis:auto; }
}

.wxline-tip{
  position: relative;
  overflow: hidden;
  margin-left:10px;
  padding:3px 8px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  background:rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  max-width: 90vw; /* безопасная ширина */
  white-space: nowrap;
}

.wxline-tip span{
  display:inline-block;
  padding-left:100%; /* старт вне видимой области */
  animation: scrollText 12s linear infinite;
}

@keyframes scrollText{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* На совсем узких экранах — ширина фиксированная */
@media (max-width:576px){
  .wxline-tip{ max-width:80vw; }
}

  .section-mds{padding:64px 0;background:#f7f9fb}
  .container-poradniki{max-width:1200px;margin:0 auto;padding:0 16px}
  .title{font-weight:800;margin:0 0 8px}
  .title-alt{color:#5f6b7a;margin:0 0 32px}

  .grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  @media (max-width:992px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:576px){.grid-cards{grid-template-columns:1fr}}

  .p-card{padding:20px;border-radius:18px;background:#fff;box-shadow:0 6px 24px rgba(13,20,46,.06),inset 0 0 0 1px rgba(12,36,97,.06);transition:.2s}
  .p-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(13,20,46,.1),inset 0 0 0 1px rgba(12,36,97,.12)}
  .p-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f7faff,#eef3ff);box-shadow:inset 0 0 0 1px rgba(28,104,255,.15);margin-bottom:10px}
  .p-ico svg{width:22px;height:22px;color:#1d63ff}
  .p-card h3{font-size:18px;margin:6px 0 4px}
  .p-card p{font-size:14px;color:#566074;margin:0 0 14px}

  .p-btn{border:0;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08),inset 0 0 0 1px rgba(29,99,255,.2);color:#1d63ff;cursor:pointer}
  .p-btn:hover{box-shadow:0 3px 12px rgba(0,0,0,.12),inset 0 0 0 1px rgba(29,99,255,.3)}

  .p-backdrop{position:fixed;inset:0;background:rgba(15,21,33,.48);display:none;align-items:center;justify-content:center;padding:16px;z-index:1000}
  .p-backdrop[aria-hidden="false"]{display:flex}
  .p-modal{width:min(880px,100%);max-height:85vh;overflow:auto;border-radius:22px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.28)}
  .p-modal .p-modal-head{position:sticky;top:0;display:flex;align-items:center;gap:12px;justify-content:space-between;background:#fff;padding:18px 22px;border-bottom:1px solid rgba(0,0,0,.06);z-index:2}
  .p-modal h3{margin:0;font-size:20px}
  .p-content{padding:16px 22px 24px}
  .p-content p,.p-content li{color:#394554;line-height:1.6}
  .p-content ol{padding-left:18px}
  .p-icon-btn{width:40px;height:40px;border:0;border-radius:12px;background:#f4f7ff;box-shadow:inset 0 0 0 1px rgba(29,99,255,.15);cursor:pointer}
  .p-icon-btn svg{width:20px;height:20px;color:#1d63ff}
  .p-icon-btn:hover{filter:brightness(.97)}

/* ===== PRINT: печатаем ТОЛЬКО #print-area, возвращаем нативную семантику ===== */
#print-area { display: none; }

/* во время печати показываем только print-area */
body.printing * { display: none !important; }
/* вместо initial используем revert — так браузер вернёт родные стили элементов */
body.printing #print-area,
body.printing #print-area * { display: revert !important; }

@media print {
  @page { size: A4; margin: 14mm; }

  #print-area { display: block !important; }

  /* центрируем колонку контента под A4 */
  .pa-wrap {
    font: 14px/1.6 system-ui, Segoe UI, Roboto, Arial, sans-serif;
    color:#111;
    max-width: 170mm;      /* комфортная ширина текста */
    margin: 0 auto;
  }

  .pa-header {
    display:flex; align-items:center; gap:14px;
    border-bottom:1px solid #DADDE3; padding-bottom:10px; margin-bottom:12px;
  }
  .pa-logo { width:44px; height:44px; border-radius:8px; object-fit:cover; }
  .pa-title { font-size:22px; margin:0 0 6px; }
  .pa-meta { font-size:12px; color:#555; }

  /* структура разделов */
  .pa-content h4 { font-size:16px; margin:14px 0 6px; font-weight:700; }
  .pa-content p  { margin:0 0 8px; }
  .pa-content ul, .pa-content ol { margin:6px 0 10px 20px; }
  .pa-content li { margin: 3px 0; }

  /* инфобоксы */
  .pr-box { border:1px solid #CBD5E1; border-radius:6px; padding:10px 12px; margin:10px 0; }
  .pr-box.note { border-color:#93C5FD; background:#EFF6FF; }
  .pr-box.warn { border-color:#FCA5A5; background:#FEF2F2; }

  /* не разрывать важные элементы */
  h4, img, svg, li, .pr-box, .pa-header { break-inside: avoid; }

  /* повторяющийся футер и номер страницы */
  .pa-footer {
    position: fixed; bottom: 6mm; left: 14mm; right: 14mm;
    border-top: 1px solid #DADDE3; padding-top: 6px;
    font-size: 12px; color:#555; display:flex; justify-content:space-between;
  }
  /* ВАЖНО: счётчик через псевдоэлемент */
  .pa-page::after { content: "Strona " counter(page) " z " counter(pages); }
}

/* улучшенный glass-hero */
.glass-hero.pro {
  position: relative;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.glass-hero.pro::before {
  content: "";
  position: absolute; inset: -1px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* типографика */
.gh-kicker { color: rgba(255,255,255,.8); letter-spacing:.6px; text-transform: uppercase; font-size: .9rem; }
.gh-subtitle { color: rgba(255,255,255,.85); font-size: 1.05rem; max-width: 850px; margin: 0 auto; }

/* чипсы-категории */
.gh-tags { gap: 8px; }
.gh-tag {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.12);
  color:#fff; text-decoration:none; font-size:.95rem;
  transition: transform .15s ease, background .15s ease;
}
.gh-tag:hover { transform: translateY(-1px); background: rgba(255,255,255,.18); }
.gh-tag svg { width:18px; height:18px; }

/* кнопка звонка: чуть ярче на hover */
.btn-call:hover { background: rgba(255,255,255,.16) !important; }

/* мелкая косметика */
html { scroll-behavior: smooth; }
@media (max-width: 576px) {
  .gh-subtitle { font-size: 1rem; }
  .gh-tag { font-size: .9rem; }
}

/* Quick-info pills */
.gh-quick { gap: 10px; }
.ghq-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.ghq-item svg { width: 18px; height: 18px; }
.ghq-item a { color: #fff; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.35); }
.ghq-item a:hover { border-bottom-color: transparent; }

/* Scroll hint */
.gh-scroll {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px; color: rgba(255,255,255,.85); text-decoration: none;
  opacity: .9; transition: opacity .2s ease;
}
.gh-scroll:hover { opacity: 1; }
.gh-scroll svg { width: 18px; height: 18px; animation: gh-bounce 1.6s infinite; }
@keyframes gh-bounce {
  0%,100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(3px); opacity: 1; }
}

/* Блик на кнопке звонка */
.btn-call {
  position: relative; overflow: hidden;
}
.btn-call::after {
  content:""; position:absolute; inset:-2px; transform: translateX(-120%);
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  filter: blur(4px);
}
.btn-call:hover::after {
  animation: btn-shine 900ms ease;
}
@keyframes btn-shine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* лёгкая «зернистость» для глубины (необязательно) */
.glass-hero.pro::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 3px 3px; opacity:.25;
}

/* адаптация на мобилках */
@media (max-width:576px){
  .ghq-item { font-size: .95rem; }
  .gh-scroll span { display:none; } /* оставляем только стрелку на XS */
}

/* точка-индикатор состояния рядом с текстом */
#gh-open::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:6px;
  background:#9ca3af; border-radius:50%; vertical-align:middle;
}
#gh-open[data-open="1"]::after{ background:#34d399; } /* зелёная когда открыто */

/* цветовые состояния таблетки часов */
.ghq-item.state-open  { background: rgba(34,197,94,.18);  box-shadow: inset 0 0 0 1px rgba(34,197,94,.4); }
.ghq-item.state-soon  { background: rgba(245,158,11,.18); box-shadow: inset 0 0 0 1px rgba(245,158,11,.4); }
.ghq-item.state-closed{ background: rgba(148,163,184,.18);box-shadow: inset 0 0 0 1px rgba(148,163,184,.4); }

/* точка-индикатор рядом с текстом */
#gh-open::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:6px;
  border-radius:50%; vertical-align:middle; background:#9ca3af;
}
.ghq-item.state-open  #gh-open::after{ background:#22c55e; }  /* зелёная */
.ghq-item.state-soon  #gh-open::after{ background:#f59e0b; }  /* янтарная */
.ghq-item.state-closed#gh-open::after{ background:#9ca3af; }  /* серая */

/* shape-divider (używa --shape-color) */
.shape-divider{position:absolute;left:0;right:0;bottom:-1px;height:48px;line-height:0;color:var(--shape-color,#fff);pointer-events:none}
.shape-divider svg{width:100%;height:48px;display:block}

/* grids & cards */
.symp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:992px){.symp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.symp-grid{grid-template-columns:1fr}}

.symp-card{background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(13,20,46,.06),inset 0 0 0 1px rgba(12,36,97,.06);padding:16px}
.symp-card header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.symp-card .ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f7faff,#eef3ff);box-shadow:inset 0 0 0 1px rgba(28,104,255,.15)}
.symp-card .ico svg{width:20px;height:20px;color:#1d63ff}
.symp-card h3{font-size:16px;margin:0}

.symp-row{border-radius:12px;padding:10px 12px;margin:8px 0}
.symp-row ul{margin:6px 0 0 18px}
.symp-row.ok{background:rgba(34,197,94,.10);box-shadow:inset 0 0 0 1px rgba(34,197,94,.35)}
.symp-row.watch{background:rgba(245,158,11,.12);box-shadow:inset 0 0 0 1px rgba(245,158,11,.4)}
.symp-row.stop{background:rgba(239,68,68,.12);box-shadow:inset 0 0 0 1px rgba(239,68,68,.4)}

/* steps (timeline) */
.section-steps{background:#f7f9fb;position:relative;padding:64px 0}
.steps-scroller{overflow:auto;padding-bottom:6px}
.steps{display:flex;gap:16px;list-style:none;padding:0;margin:0}
.step{min-width:240px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 6px 24px rgba(13,20,46,.06),inset 0 0 0 1px rgba(12,36,97,.06)}
.step .dot{width:8px;height:8px;border-radius:50%;background:#1d63ff;box-shadow:0 0 0 3px rgba(29,99,255,.15);margin-bottom:8px}
.step h4{font-size:15px;margin:0 0 6px}
.step p{font-size:14px;margin:0}

/* seasonal */
.season-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:768px){.season-grid{grid-template-columns:1fr}}
.season-card{background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(13,20,46,.06),inset 0 0 0 1px rgba(12,36,97,.06);padding:16px}
.season-card .ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f7faff,#eef3ff);box-shadow:inset 0 0 0 1px rgba(28,104,255,.15);margin-bottom:8px}
.season-card .ico svg{width:20px;height:20px;color:#1d63ff}
.season-card h3{font-size:16px;margin:0 0 6px}
.season-card ul{margin:6px 0 10px 18px}

/* sticky CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:14px;z-index:999;background:rgba(16,27,52,.85);backdrop-filter:blur(6px);border-radius:16px;margin:0 auto;max-width:1000px;transform:translateY(140%);transition:transform .25s ease, box-shadow .25s ease;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.sticky-cta.show{transform:translateY(0)}
.sticky-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px}
.st-col{display:flex;align-items:center;gap:8px}
.st-pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(148,163,184,.22);box-shadow:inset 0 0 0 1px rgba(148,163,184,.45);color:#fff;font-size:.95rem}
.sty-open .st-pill{background:rgba(34,197,94,.22);box-shadow:inset 0 0 0 1px rgba(34,197,94,.55)}
.sty-soon .st-pill{background:rgba(245,158,11,.22);box-shadow:inset 0 0 0 1px rgba(245,158,11,.55)}
.st-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600}
.st-call{background:#22c55e;color:#fff}
.st-call:hover{filter:brightness(1.15)}
.st-nav{background:#fff;color:#0b1220}
.st-nav:hover{filter:brightness(.95)}
.st-btn.st-call{
  display:inline-flex; 
  align-items:center; 
  gap:.5rem;          /* отступ между иконкой и номером */
}
.st-btn.st-call i{ line-height:1; font-size:1rem; }
@media(max-width:576px){.sticky-inner{flex-direction:column;align-items:stretch}.st-col{justify-content:space-between}}

@media (max-width: 576px){
  #sticky-cta{ display: none !important; }
}

/* Не менять цвет на hover/focus */
.st-btn.st-call,
.st-btn.st-call:hover,
.st-btn.st-call:focus,
.st-btn.st-call:active{
  color: inherit !important;
  text-decoration: none !important;
}
.st-btn.st-call i{ line-height:1; font-size:1rem; transition: none; }

/* === FORCE WHITE for the green tel button (bottom CTA) === */
.mobile-sticky-cta a.st-call,
.mobile-sticky-cta a.st-call:link,
.mobile-sticky-cta a.st-call:visited,
.mobile-sticky-cta a.st-call:hover,
.mobile-sticky-cta a.st-call:active,
.mobile-sticky-cta a.st-call:focus,
.mobile-sticky-cta a.st-call *,
a.st-call[href^="tel:"],
a.st-call[href^="tel:"] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff; /* Safari edge case */
}

/* Всплывашка сверху */
.call-flyout{
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(-8px);
  z-index: 9999;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.call-flyout.is-visible{ opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

.call-flyout .cf-wrap{
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .9rem; border-radius: 14px;
  background: rgba(28,36,48,.85); /* полупрозрачное тёмное стекло */
  color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.call-flyout .cf-wrap i{ font-size: 1.1rem; opacity: .9; }
.call-flyout .cf-phone{ font-weight: 700; font-size: 1.35rem; line-height: 1; }
@media (min-width: 992px){
  .call-flyout .cf-phone{ font-size: 1.6rem; }
}
.call-flyout .cf-note{ font-size: .9rem; opacity: .85; }
.call-flyout .cf-text{ display:flex; flex-direction:column; }
.call-flyout .cf-close{
  margin-left: .25rem; background: transparent; border: 0; color: #fff;
  font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: .7;
}
.call-flyout .cf-close:hover{ opacity: 1; }
/* статус и ряд чипов внутри тёмного flyout */
.call-flyout .cf-note { font-size: .95rem; opacity: .9; display:flex; align-items:center; gap:.4rem; }
#cf-status-dot { font-size: 1rem; line-height:1; }
#cf-status-dot.open { color:#6fe08a; }   /* зелёная точка */
#cf-status-dot.closed { color:#f16e6e; } /* красная точка */

.call-flyout .cf-actions{
  margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.5rem;
}
.call-flyout .cf-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  border:0; cursor:pointer;
  padding:.35rem .8rem; border-radius:999px; font-size:.95rem;
  background: rgba(255,255,255,.08); color:#fff;
  backdrop-filter: blur(2px);
}
.call-flyout .cf-chip i{ font-size:.95rem; }

/* пастельные оттенки на тёмном фоне */
.call-flyout .cf-chip.wa { background: rgba(37,211,102,.18); }
.call-flyout .cf-chip.tg { background: rgba(0,136,204,.18); }
.call-flyout .cf-chip.vb { background: rgba(115,96,242,.18); }
.call-flyout .cf-chip.mail { background: rgba(79,110,247,.18); }
.call-flyout .cf-chip.sms { background: rgba(255,255,255,.14); }
.call-flyout .cf-chip.copy, .call-flyout .cf-chip.vcf { background: rgba(255,255,255,.12); }

.call-flyout .cf-privacy{ margin-top:.4rem; opacity:.8; }
.call-flyout .cf-privacy a{ color:#fff; text-decoration:underline; }

/* Wyraźna linka do Polityki prywatności w flyoucie */
.call-flyout .cf-privacy a{
  color: #9fd3ff;                 /* pastelowy akcent na ciemnym tle */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
  position: relative;
}
.call-flyout .cf-privacy a::before{
  content: "🔒";
  margin-right: .35rem;
  opacity: .95;
}
.call-flyout .cf-privacy a:hover{
  color: #ffffff;
}
.call-flyout .cf-privacy a:focus-visible{
  outline: 2px solid #9fd3ff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Полосы-разделители во flyout — на всю высоту */
.call-flyout .cf-wrap{
  display:flex;                /* растягиваем дочерние блоки по высоте */
  align-items:stretch;
  gap:.8rem;
}

/* левая полоса: между телефоном и кнопками */
.call-flyout .cf-actions{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .6rem;
  border-left:1px solid rgba(255,255,255,.26);
  padding-left:.9rem;          /* отступ после линии */
  margin-left:.2rem;           /* микро-зазор до линии */
}

/* правая полоса: между кнопками и политикой */
.call-flyout .cf-privacy{
  display:flex; align-items:center;
  border-left:1px solid rgba(255,255,255,.26);
  padding-left:.9rem;
  margin-left:.2rem;
}

/* На узких экранах убираем вертикальные линии и оставляем потоковую верстку */
@media (max-width: 768px){
  .call-flyout .cf-wrap{ flex-direction:column; align-items:stretch; gap:.5rem; }
  .call-flyout .cf-actions,
  .call-flyout .cf-privacy{ border-left:0; padding-left:0; margin-left:0; }
}

/* Ticker (бегущая строка) внутри sticky-CTA */
.st-ticker{ flex:1; min-width:140px; }
.ticker{ position:relative; overflow:hidden; height:22px; }
.ticker-track{
  display:inline-flex; align-items:center; gap:28px; padding:0 8px;
  white-space:nowrap; will-change:transform;
  animation: st-ticker var(--ticker-duration,30s) linear infinite;
}
.ticker span{ color:#fff; opacity:.92; font-size:.95rem; }

/* пауза на hover/focus */
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track{ animation-play-state: paused; }

/* уважение к reduce motion: выключаем анимацию */
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* при очень узком экране (если sticky показывается) можно скрыть тикер */
@media (max-width: 768px){
  .st-ticker{ display:none; }
}

/* ключевые кадры */
@keyframes st-ticker{
  from{ transform: translateX(0); }
  to  { transform: translateX(var(--ticker-shift, -50%)); }
}

.mobile-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; justify-content:space-around; gap:.25rem;
  background:#0d6efd; /* твой info/brand */
  padding:.55rem .4rem; box-shadow:0 -4px 14px rgba(0,0,0,.2);
}
.mobile-sticky-cta a{
  color:#fff; font-weight:600; text-decoration:none;
  display:flex; align-items:center; gap:.4rem;
}

/* если не нужно скрывать до прокрутки — этот блок можно не добавлять */
.mobile-sticky-cta .ms-top{ display:none; }
.mobile-sticky-cta .ms-top.is-visible{ display:inline-flex; }

@media (max-width: 576px){
  .footer-one { padding-bottom: 45px !important; }      /* мобильные */
}

/* === Neumorphism inset dla kart USP === */
.why-card{
  background: #e0e5ec !important;     /* jasny, jednolity kolor tła */
  border-radius: 20px;
  border: none !important;
  box-shadow: inset 8px 8px 16px #a3b1c6,
              inset -8px -8px 16px #ffffff;
  transition: box-shadow .2s ease, transform .2s ease;
}

/* ikona + nagłówek */
.why-card .why-ico i,
.why-card .why-ico svg{
  color:#555;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15));
}

.why-card h3{
  color:#333;
  text-shadow: 1px 1px 2px rgba(255,255,255,.9),
               -1px -1px 2px rgba(0,0,0,.1);
}

/* efekt hover (opcja) */
.why-card:hover{
  transform: translateY(-3px);
  box-shadow: inset 6px 6px 12px #a3b1c6,
              inset -6px -6px 12px #ffffff,
              0 4px 12px rgba(0,0,0,.1);
}

/* utility: тонкие разделители и счётчики */
.muted-divider{border-top:1px solid rgba(0,0,0,.06);}
.num-badge{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:#0d6efd;color:#fff;box-shadow:0 8px 16px rgba(13,110,253,.25);}
.stat-badge{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border-radius:12px;background:#fff;box-shadow:0 .125rem .25rem rgba(0,0,0,.075);}
.check-list{list-style:none;padding:0;margin:0;}
.check-list li{display:flex;gap:.6rem;align-items:flex-start;margin:.45rem 0;}
.check-list .ico{color:#198754;margin-top:.15rem;}
.badge-soft{background:rgba(13,110,253,.07);color:#0d6efd;border-radius:999px;padding:.35rem .65rem;font-weight:600;font-size:.9rem;}

/* Иконки в кружке */
.kz-ico{
  width:40px; height:40px; min-width:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,110,253,.08); /* мягкий синий */
  color:#198754;
  font-size:18px;
}

/* Только левая kolumna w sekcji #korzysci */
#korzysci .col-lg-6:first-child .d-flex .kz-ico {
  margin-top: 2px; /* лёгкое вертикальное выравнивание иконки */
}

#korzysci .col-lg-6:first-child .d-flex div {
  margin-left: 1.15rem; /* зазор текста от иконки */
}

/* мобильные вертикальные отступы между карточками в рядах с g-4 */
@media (max-width: 575.98px){
  .row.g-4,
  .row.gx-4 { gap: 1rem; } /* flex-gap как fallback, если бутстраповские гаттеры где-то перебиты */

  /* гарантированный отступ между stacked-колонками */
  .row.g-4 > [class*="col-"],
  .row.gx-4 > [class*="col-"]{ margin-bottom: 1rem; }
  .row.g-4 > [class*="col-"]:last-child,
  .row.gx-4 > [class*="col-"]:last-child{ margin-bottom: 0; }
}


/* === Neumorph Glow Button === */
:root{
  --neo-bg-light:#e9eef6;         /* фон светлой плиты */
  --neo-shadow-dark:#c8d0e0;      /* тёмная тень для света */
  --neo-shadow-light:#ffffff;     /* светлая тень для света */
  --neo-accent-a:#6c4ef6;         /* фиолетовый ободок */
  --neo-accent-b:#14d1d1;         /* бирюзовый ободок */
}
.btn-neo-glow{
  --size:64px; /* можно 56–72px */
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--size); height:var(--size);
  border-radius:50%;
  background:var(--neo-bg-light);
  color:#0d1b2a; text-decoration:none;
  box-shadow:
    10px 10px 20px var(--neo-shadow-dark),
   -10px -10px 20px var(--neo-shadow-light),
    inset 0 0 0 0 rgba(0,0,0,0); /* чтобы не мигало на мобилках */
  transition:transform .25s ease, box-shadow .25s ease, color .25s ease;
}
.btn-neo-glow i{ font-size:1.1rem; }

/* свечение-ореол */
.btn-neo-glow::before{
  content:"";
  position:absolute; inset:8px;
  border-radius:50%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%)
              ,conic-gradient(from 0deg, var(--neo-accent-a), var(--neo-accent-b), var(--neo-accent-a));
  filter: blur(10px);
  opacity:.35; pointer-events:none;
}

/* тонкое внутреннее кольцо */
.btn-neo-glow::after{
  content:"";
  position:absolute; inset:6px; border-radius:50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), inset 0 0 14px rgba(0,0,0,.08);
  background: radial-gradient(100% 100% at 30% 20%, rgba(255,255,255,.75), rgba(255,255,255,0));
  opacity:.9; pointer-events:none;
}

/* hover/active */
.btn-neo-glow:hover{
  transform: translateY(-2px);
  box-shadow:
    14px 14px 28px var(--neo-shadow-dark),
   -14px -14px 28px var(--neo-shadow-light);
}
.btn-neo-glow:active{
  transform: translateY(0);
  box-shadow:
    inset 6px 6px 12px var(--neo-shadow-dark),
    inset -6px -6px 12px var(--neo-shadow-light);
}

/* Вариант на тёмном блоке (если когда-то понадобится) */
.btn-neo-glow.dark{
  --neo-bg-light:#2b2f36;
  --neo-shadow-dark:#20242a;
  --neo-shadow-light:#3a3f48;
  color:#e9eef6;
}
/* Модификатор: растягиваемая «пилюля» с тем же glow */
.btn-neo-glow--fluid{
  /* размеры по контенту */
  width:auto; height:auto; 
  min-height:48px;                   /* чтобы оставался «вес» даже без текста */
  padding:.7rem 1.4rem;
  border-radius:999px;               /* пилюля */
  gap:.6rem;                         /* отступ между иконкой и текстом */
  font-weight:600;
}

.btn-neo-glow--fluid i{ font-size:1rem; }

/* кольца и свечение остаются, но подгоняем под пилюлю */
.btn-neo-glow.btn-neo-glow--fluid::before{ inset:8px; border-radius:999px; }
.btn-neo-glow.btn-neo-glow--fluid::after{  inset:6px; border-radius:999px; }

/* ещё чуть-чуть воздуха, если текст длинный */
.btn-neo-glow--fluid span{ white-space:nowrap; }

/* тонкие разделители между пунктами сравнения */
.compare-list li + li{ padding-top:.5rem; margin-top:.5rem; border-top:1px dashed rgba(0,0,0,.08); }

/* Метка "Najczęściej wybierany" — нежный зелёный */
.pkg-badge{
  position:absolute; top:12px; right:12px;
  padding:.25rem .6rem; border-radius:999px;
  background:#E8F7F1;      /* нежный мятный */
  color:#0B7A57;           /* тёмная зелень для контраста */
  font-weight:700; font-size:.9rem;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.08);
  border:1px solid rgba(11,122,87,.12);
}

/* Pasek benefitów pod pakietami — отступы и «таблетки» */
.benefit-list{
  column-gap: 1rem;      /* горизонтальный зазор */
  row-gap: .5rem;        /* вертикальный зазор */
}
.benefit-list > li{
  display:flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem;
  border-radius:999px;
  background:#f5f7fb;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.06);
  margin:.25rem .5rem;   /* fallback на случай, если gap где-то перебит */
}
.benefit-list i{ color:#198754; }

@media (max-width: 576px){
  .why-card { padding: 1.25rem; }
  .gh-tag { font-size: 0.8rem; padding: .3rem .65rem; }
}

/* === Pasek benefitów: устойчивый отступ и зелёные ikony === */
.why-card ul li{
  display:flex;
  align-items:center;
}

/* отступ справа от иконки + цвет; работает для любых fa-* */
.why-card ul li > i,
.why-card ul li .fa,
.why-card ul li [class^="fa-"],
.why-card ul li [class*=" fa-"]{
  margin-inline-end: .5rem;   /* вместо gap для текста */
  color:#28a745;              /* зелёный брендовый */
  line-height:1;
  flex-shrink:0;
}

/* ============================================
   SPWANIE ALUMINIUM – CENNIKI (czytelność)
   ============================================ */
#cennik, 
#cennik-inne-aluminium {
  color: #212529 !important;
  font-size: 1rem; /* базовый размер */
  line-height: 1.6;
}

#cennik .neu-card,
#cennik-inne-aluminium .neu-card {
  background: #fff !important;
  color: #212529 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

#cennik .neu-card * ,
#cennik-inne-aluminium .neu-card * {
  color: #212529 !important;
  font-size: 1rem; /* основной текст */
}

#cennik .neu-card h3,
#cennik-inne-aluminium .neu-card h3 {
  font-size: 1.15rem; /* подзаголовки чуть крупнее */
  font-weight: 600;
}

#cennik .table td, 
#cennik .table th,
#cennik-inne-aluminium .table td,
#cennik-inne-aluminium .table th {
  font-size: 0.95rem; /* текст таблиц чуть меньше */
  color: #212529 !important;
}

/* тексты описаний под таблицами */
#cennik .small.text-muted,
#cennik-inne-aluminium .small.text-muted {
  font-size: 0.9rem;
  color: #555 !important;
}

/* Заголовки секций */
#cennik h2, 
#cennik-inne-aluminium h2 {
  color: #111 !important;
  font-size: 1.8rem;
  font-weight: 700;
}

/* На мобильных — немного меньше, чтобы не ломало сетку */
@media (max-width: 767.98px) {
  #cennik, #cennik-inne-aluminium {
    font-size: 0.95rem;
  }
  #cennik h2, #cennik-inne-aluminium h2 {
    font-size: 1.5rem;
  }
}

.card-link-simple {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  padding-bottom: 2px;
}

.card-link-simple:hover {
  color: #ffd500; /* мягкий жёлтый акцент */
  border-bottom-color: #ffd500;
  text-decoration: none;
}

/*******************
    Gallery
*******************/
.gallery-section {
    background: #343a40;
    color: #fff;
}