html, body { margin: 0px; padding: 0px; width: 100%; scroll-snap-type: none; overflow-x: hidden; overflow-y: auto; font-family: Raleway, Arial, sans-serif; }
        .section { padding: 60px 20px; text-align: center; }
	:root {
    	    --color-main: #62008d;
            --color-main-400: #8262a8;
            --color-main-300: #c7b9d8;
            --color-main-200: #e5dfed;
            --color-main-100: #f9f8fb;
            --color-text: #333;
	    --color-gray: #666;
            --color-white: #fff;
            --color-black: #000;  
            --color-red: #de0016;
            --color-light-yellow: #ffcc00;
            --color-dark-violette: #4a2a66; /* темно-бузковий заголовок */
            --color-light-violette-transparent: rgba(200, 162, 200, 0.2); /* світло-бузковий з прозорістю 50% */
            --color-main-rgb: 143,127,102; /* RGB без # */
            --color-main-transparent: rgba(var(--color-main-rgb), 0.2); /* 50% прозорості */
            --pds-spacing-xxs: 4px;
            --pds-spacing-xs: 8px;
            --pds-font-size-default: 0.875rem;
        }
      @font-face {
         font-family: 'RubikDirt'; 
         src: url('fonts/RubikDirt-Regular.ttf') format('truetype');
         font-weight: normal;
         font-style: normal;
      }

      @font-face {
         font-family: 'Montserrat-Black';
         src: url('fonts/MontserratAlternates-Black.ttf') format('truetype');
         font-weight: normal;
         font-style: normal;
      }

      @font-face {
         font-family: 'Montserrat-Thin';
         src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
         font-weight: normal;
         font-style: normal;
      }

    /* стилі для свайпера */
    .swiper { 
        width: 100%; 
        position: relative;
        height: 50vh;
        overflow: hidden;
     }

    #reviews .swiper { 
        width: 100%; 
        position: relative;
        height: 30vh;
        overflow: hidden;
     }

    .swiper-slide { 
        display:flex; 
        align-items:center; 
        justify-content:center; 
        background:var(--color-white); 
     }
    .swiper-slide img, .swiper-slide video { 
        width:100%; 
        height:100%; 
        object-fit:cover; 
        border-radius:0px; 
     }


        .overlay-gif {
            position: absolute;
            top: 30%; /* Центруємо по вертикалі */
            left: 50%; /* Центруємо по горизонталі */
            transform: translate(-50%, -50%); /* Переміщаємо на центр */
            z-index: 1; /* Забезпечуємо, що GIF з'являється поверх відео */
            width: 200px; /* Можна налаштувати розмір GIF */
            height: auto;
        }

        .white-bg {
            background: white;
            color: var(--color-black);
            flex-direction: column; /* Вирівнюємо елементи вертикально */
            justify-content: center; /* Вирівнюємо контент по вертикалі */
            text-align: center; /* Вирівнювання тексту по центру */
            display: block;
            max-width: 800px;
            padding: 8px 20px; /* Відступи */
            margin: 0 auto;
        }

       .white-bg h1, h2 {
            font-family: 'Raleway', sans-serif; /* Тип шрифту для заголовків */
            font-size: 1.4rem; /* Розмір шрифту */
            font-weight: 950;
            color: var(--color-main); /* Колір для заголовків */
            margin-top: 0px; /* Відступ знизу */
            margin-bottom: 8px; /* Відступ знизу */
        }
.white-bg h3, h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.6rem;
    font-weight: 650;
    color: var(--color-main);
    margin-top: 0px;
    margin-bottom: 0px;
}
        #h1_font_size {
            font-size: 1.6rem;
            color: var(--color-main);
        }
        .white-bg h1.text-size {
            font-size: 1.6rem;
            color: var(--color-main);
        }
        .white-bg h2.text-size {
            font-size: 1.6rem;
            color: var(--color-main);
        }
        .white-bg h2.text_position,
        .white-bg h4.text_position {
            text-align: center;
            color: var(--color-main);
            margin: 15px 30px;
        }

.white-bg h3.text_position {
    text-align: left;
    color: var(--color-red);
    padding: 0px 0px;
}
        .white-bg h3.font_size {
            font-size: 1.1rem;
            color: var(--color-main);
        }

       .white-bg ul {
            padding: 0;
            text-align: center; /* Вирівнювання тексту по центру */
	    display: inline-block;
	    width: 100%;
        }

        .white-bg li {
            font-family: 'Raleway', sans-serif; /* Тип шрифту для елементів списку */
            font-size: 1.2rem; /* Розмір шрифту */
            color: var(--color-main-400); /* Колір для елементів списку */
            line-height: 1; /* Відстань між рядками */
            margin: 0 auto; /* Центруємо абзац */
            margin-bottom: 10px;
            text-align: left; /* Вирівнювання тексту по горизонталі */

        }

       .white-bg p {
            color: var(--color-black); /* Колір для абзаців */
            margin: 0 auto; /* Центруємо абзац */
            text-align: center; /* Вирівнювання тексту по горизонталі */

        }
       .white-bg p[data-align="justify"]{
            text-align: justify; /* Вирівнювання тексту вліво */
            color: var(--color-main-400);
            font-weight: 800;
        }
       .white-bg p[data-align="mid"]{
            text-align: justify; /* Вирівнювання тексту вліво */
            color: var(--color-main-400);
            font-weight: 800;
            margin-top: 0px;
            margin-bottom: 0px;
        }
       .white-bg p[data-align="left"] {
            font-family: 'Raleway', sans-serif; /* Тип шрифту для елементів списку */
            font-size: 1.2rem; /* Розмір шрифту */
            color: var(--color-main-400); /* Колір для елементів списку */
            line-height: normal; /* Відстань між рядками */
            margin: 0 auto; /* Центруємо абзац */
            margin-bottom: 10px;
            text-align: left; /* Вирівнювання тексту по горизонталі */

        }

       .white-bg a {
            display: inline-block;
            padding: 0px 0px;
            background-color: var(--color-main-400);
            color: var(--color-main-100); /* Текст кнопки */
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
        }

      .white-bg a:not(.no-style) {
            margin-top: 20px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            height: 40px;
            padding: 8px 40px;
            background-color: var(--color-main);
            color: var(--color-white);
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
        }


	/* Стилі для звичайних посилань */
        .white-bg a.no-style {
            color: var(--color-main);  /* Змінює тільки колір тексту */
            text-decoration: none;  /* Підкреслення */
            background: none;  /* Важливо: прибираємо фон */
            padding: 0;  /* Прибираємо відступи */
            margin: 0;  /* Прибираємо відступи */
            border-radius: 0;  /* Без заокруглених кутів */
            font-weight: 950;
        }
       .white-bg a.no-style[data-color="alternative"] {
            display: block;
            color: var(--color-white);
           }
        .white-bg a.no-style[data-color="main300"] {
            color: var(--color-main-300);
            font-weight: 550;
            font-family: 'Raleway', sans-serif;
           }
        .white-bg a.no-style:hover {
            text-decoration: none;
        }



.note-block {
  background-color: var(--color-light-violette-transparent);
  padding: 35px;          /* відступи всередині */
  border-radius: 20px;    /* закруглені кути */
}

   .note-block h3 {
      margin-top: 0;          /* прибрати зайві відступи */
      color: var(--color-main-400);
      font-size: 1rem;
      font-weight: 450;
      text-align: left;
      padding: 0px 25px;
   }

   .note-block ul {
      padding-left: 20px;     /* щоб маркери не злипались */
   }

   .note-block li {
      margin-bottom: 8px;     /* відстань між пунктами */
      padding-right: 20px;
   }
   .note-block p[note-block-data-align="left"]{
      padding: 10px 25px; /* Центруємо абзац */
      text-align: left; /* Вирівнювання тексту по горизонталі */
    }



.image-section {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  min-height: 100vh;      
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-direction: column;
  text-align: justify;
}

       .image-section h1 {
            max-width: 90%;
            margin: 20px auto;
            word-wrap: break-word; /* Дозволяє переносити довгі слова */
            font-family: 'Arial', sans-serif; /* Тип шрифту для заголовків */
            font-size: 3rem  !important; /* Розмір шрифту */
            line-height: 1.4; /* Покращує відстань між рядками */
            padding: 0 20px; /* Відступи з боків */
        }
        .image-section p {
            max-width: 90%;
            margin: 20px auto;
            word-wrap: break-word; /* Дозволяє переносити довгі слова */
            font-family: 'Arial', sans-serif; /* Тип шрифту для заголовків */
            font-size: 1.2rem; /* Розмір шрифту */
            line-height: 1; /* Покращує відстань між рядками */
            padding: 0 20px; /* Відступи з боків */
        }

       .image-section a {
            position: absolute;
            bottom: 120px; /* Відстань від нижнього краю */
            right: 300px;  /* Відстань від правого краю */
            display: inline-block;
            padding: 15px 25px;
            background-color: var(--color-main-400);
            color: var(--color-main-100);
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

       .image-section a:hover {
           background-color: var(--color-main-300);
        }


.image-section.half-screen {
  position: relative;
  width: 100%;
  height: 50vh; /* половина екрану */
  min-height: 300px; /* мінімальна висота */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Відео у середніх секціях */
.image-section.half-screen video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Лінк поверх секції */
.image-section.half-screen a {
  position: unset;
  z-index: 2;
  text-indent: 0; /* показуємо текст */
  padding: 8px 18px;
  background-color: var(--color-main-400);
  color: var(--color-main-100);
  border-radius: 5px;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
}

.small-image {
  max-width: 50px;
  width: 100%;       /* щоб адаптувалось на мобільних */
  height: auto;      /* зберігає пропорції */
  display: block;    /* щоб можна було центрувати */
  margin: 20px auto; /* відступи і центрування */
  border-radius: 2px; /* робить зображення більш "миленьким" */
}

.social-links {
  display: flex;           /* важливо */
  justify-content: flex-start; /* центрує рядок по горизонталі */
  gap: 10px;               /* відстань між іконками */
  width: max-content;     /* контейнер точно за шириною іконок */
  margin: 0 auto;         /* центруємо весь контейнер по сторінці */
}

.foot-image {
  width: 40px;  /* або твій розмір */
  height: auto;
}

.top-image {
  width: 120px;  /* або твій розмір */
  height: auto;
  margin: 15px auto;
}

.video-desktop { display: block; }
.video-mobile { display: none; }


@media (max-width: 768px) {
  .video-desktop { display: none; }
  .video-mobile { display: block; }

  .image-section a {
     position: unset;
     font-size: 16px; /* Розмір тексту */
     background-color: var(--color-main-400); /* Фон кнопки */
     color: white; /* Колір тексту */
     text-decoration: none; /* Видаляє підкреслення */
     border-radius: 5px; /* Округлені кути */
     display: flex; /* Додає можливість вирівнювання */
     align-items: center; /* Центрує текст вертикально */
     justify-content: center; /* Центрує текст горизонтально */
     width: fit-content; /* Автоматична ширина за контентом */
     min-width: 100px; /* Мінімальна ширина кнопки */
     height: 40px; /* Фіксована висота кнопки */
     text-align: center;
   }
}
        .image-section a.no-style[data-color="alternative"] {
                position: inherit;
                margin-top: 20px;  /* Відстань від нижнього краю */
                color: var(--color-main-100); /* Світліший колір */
                display: flex;
                padding: 10px; /* Додаємо відступи для комфортного кліку */
                text-decoration: none; /* Прибираємо підкреслення */
                text-align: center; /* Центрування тексту */
          }

        .image-section p::before {
            content: "";
            color: white; /* Колір зірочки */
            font-size: 1.4rem;
            margin-right: 0px;
        }
        /* Фон для всього текстового блоку */
        .text-container {
	    color: var(--color-main-100);
            background-color: var(--color-main-transparent);
	    backdrop-filter: blur(10px);
            padding: 20px; /* Відступи всередині */
            border-radius: 15px; /* Округлені кути */
            max-width: 80%; /* Щоб блок не займав всю ширину */
        }
.header {
    position: initial;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.header-secondary {
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}


.footer {
    padding: 0 10px 20px;
    display: block;
    unicode-bidi: isolate;
}
.container-fluid {
    padding-right: 5%;
    padding-left: 5%;
    max-width: 1920px;
}

.footer .row {
    display: flex;
    flex-wrap: wrap;
}

.col-md-3, .col-md-4 {
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .footer-col {
        width: 30%;
        text-align: center;
    }
   
   .footer-two-col .footer-col {
    width: 50%;
  }
}

/* Мобільні */
@media (max-width: 767px) {
    .footer-col {
        width: 100%;
        text-align: center;
    }
}

.svg-fill { 
      fill: royalblue;
      stroke: royalblue;
      stroke-width: 2px;
}

.aXZVR {
    margin-right: var(--pds-spacing-xs);
}
.XXdUM {
    font-weight: 400;
    font-size: var(--pds-font-size-default);
    color: var(--color-gray);
    margin-right: 12px;
    text-decoration: line-through;
}

.PcK91 {
    display: block;
    font-weight: 400;
    font-size: var(--pds-font-size-default);
    color: var(--color-gray);
    text-align: left;
}

#reviews .PcK91 {
  padding: 0px 25px;
}
.AYAsy {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    flex-shrink: 0;
/*    aspect-ratio: 120 / 24;
    margin-top: 15px;*/
}

#reviews .AYAsy {
    display: inline-grid;
    padding: 8px 25px;
    text-align: left;
}




._25gdX {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.FF3m3 { 
  color: #ccc;
  cursor: pointer;
}

.FF3m3.active {
  color: var(--color-main-400);
}

.BVdm9 {
    display: block;
    border-radius: var(--pds-round-m);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font: inherit;
    line-height: calc(var(--pds-line-height) + 2px);
    padding: var(--pds-spacing-xs) var(--pds-spacing-m);
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    transition: 100ms ease-in-out;
    transition-property: color, background-color, border-color;
    background: 0 0;
    box-shadow: none;
    border: 1px transparent solid;
    color: inherit;
    font-size: inherit;
}

.form-input {
    width: 100%;
    margin-bottom: 20px;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    background-color: transparent;
    color: var(--color-main);
    font-size: 1rem;
    line-height: 1.125;
    font-family: Raleway, Arial, sans-serif !important;
    padding: 2em 0.75rem .625rem 0.75rem;
}

.btn-submit {
    min-height: 47px;
    margin: 15px 20px;
    padding: 8px 40px;
    border: none;
    border-radius: 5px;
    background: var(--color-main);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: background-position 2s ease;
}

.form-success {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-main);
  border: 1px solid var(--color-main);
  border-radius: 12px;
}