.no-scroll {
   overflow: hidden;
}

/* Основные цвета */

:root {
   --background: #EAEFF3;
   --background: #fff8f1;
   --red: #ff0000;
   --select: #fff2a8;
   --black: #020D19;
   --white: #fff;
   --yell: #ffd760;
   --lighttone: linear-gradient(0deg, rgb(246 219 188) 0%, rgb(243 223 201) 100%);
   --lighttone: #f6dbbc;
   --minilighttone: #f9e9d6;
   --blue: #006bff;
   --mblue: #2d7fef;
   --green: #00bb3c;
   --orange: #ff6200;
   --maxwidth: 1300px;
   --ff: 'Nunito Sans', sans-serif;
   --input: #adcfe9;
   --inp: #f0f8ff;
   --sizew: 1vw;
   --sizeh: 1vh;
   --otstup: calc(2 * var(--sizew));
   --otstup2: calc(3 * var(--sizew));
   --shadow: 0 4px 44px #cfdde8;
   --shadow: 0 4px 44px #e1dad3;
}

/* Основное  */

::selection {
   background: var(--select);
   color: var(--black);
}

a {
   color: var(--blue);
   text-decoration: none;
}

a:hover {
   color: var(--orange);
}

span,
div,
h1,
h2,
h3,
h4,
p,
p b,
p a,
p strong {
   word-wrap: break-word;
   word-break: break-word;
}

p {
   margin: 0;
}

video,
svg,
svg g,
img {
   margin: 0px;
   padding: 0px;
   line-height: 0px;
   max-width: 100%;
}

a,
img,
.plavn {
   transition: all 0.5s;
}

ul[id*="uStarRating"] a {
   transition: all 0s;
}

* {
   outline: none
}

textarea,
input {
   outline: none;
   resize: none;
   box-sizing: border-box
}

img,
a img {
   border: none;
   outline: none
}

select:focus {
   outline: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--ff);
   font-weight: 900;
}


html,
body {
   margin: 0px;
   padding: 0px;
   height: 100%
}

html {
   font-size: 14px;
}

body {
   font-size: 1rem;
   line-height: 1rem;
}

body {
   background-color: var(--background);
   color: var(--black);
   font-weight: 400;
   font-family: var(--ff);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
   line-height: initial;
   margin-top: 0px;
}

body {
   top: 0px !important;
   overflow-x: hidden;
}

table {
   border-collapse: collapse;
   border-spacing: 0px;
   width: 100%;
}

table td,
table th {
   padding: 0px;
   margin: 0px;
   border: none;
}


@media only screen and (max-width: 1023px) {
   table {
      display: block;
      overflow: scroll;
      width: auto !important;
   }
}

/* Инпут и кнопки */

label {
   line-height: 20px;
   display: inline;
   justify-content: flex-start;
   align-items: center;
   gap: 10px;
}

input[type="checkbox"] {
   display: inline-block;
   width: 20px;
   height: 20px;
   padding: 0px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   vertical-align: middle;
   margin: 0px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: 0px;
   position: relative;
   box-sizing: border-box !important;
   transition: all .5s ease;
   position: relative;
   top: 0px;
   left: 0px;
   float: left;
   overflow: hidden;
}

input[type="checkbox"]:hover {
   border: none;
}

input[type="checkbox"]::before {
   content: "";
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 2;
   background-image: url(/imgcss/tire.webp);
   background-repeat: no-repeat;
   background-size: 50%;
   background-position: center;
   transition: all 0.5s;
}

input[type="checkbox"]::after {
   content: "";
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   left: 0%;
   top: 0px;
   background-color: var(--input);
   z-index: 1;
   transition: all 0.5s;
}

input[type="checkbox"i]:disabled::after {
   background-color: var(--background);
}

input[type="checkbox"i]:hover:disabled::before,
input[type="checkbox"i]:disabled::before {
   background-image: none;
}

input[type="checkbox"]:hover::before {
   background-image: url(/imgcss/okb.webp);
}

input[type="checkbox"i]:checked:disabled::before,
input[type="checkbox"]:checked::before {
   content: "";
   display: block;
   height: 100%;
   width: 100%;
   background-color: var(--green);
   position: absolute;
   left: 0px;
   top: 0px;
   background-image: url(/imgcss/ok.webp);
   background-repeat: no-repeat;
   background-size: 50%;
   background-position: center;
}

input[type="checkbox"]:checked::after {
   background-color: var(--green);
}

textarea,
input {
   outline: none;
   resize: none;
   box-sizing: border-box;
   color: var(--black);
   font-family: var(--ff);
   transition: all 0.5s;
   font-size: 1rem;
}

button {
   outline: none;
   resize: none;
   box-sizing: border-box;
   font-family: var(--ff);
   transition: all 0.5s;
}

textarea {
   overflow: auto;
   border: 1px solid var(--input);
   background-color: var(--white);
   color: var(--black);
   line-height: 1.7rem;
   min-height: 5rem;
   padding: 1rem 1.2rem;
   box-sizing: border-box;
   border-radius: 8px;
}

select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
   color: var(--black) !important;
   font-weight: 400;
}

select::-ms-input-placeholder,
textarea::-ms-input-placeholder,
input:-ms-input-placeholder {
   color: var(--black) !important;
   font-weight: 400;
}

select::placeholder,
textarea::placeholder,
input::placeholder {
   color: var(--black) !important;
   font-weight: 400;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"] {
   border: 1px solid var(--input);
   background-color: var(--white);
   color: var(--black);
   line-height: 20px;
   height: 40px;
   padding: 1rem 1.2rem;
   box-sizing: border-box;
   border-radius: 8px;
}

textarea,
input {
   max-width: 100%;
}

textarea:hover,
input:hover {
   border: 1px solid var(--blue);
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
   border: none;
   color: var(--white);
   height: 40px;
   padding: 0 1.2rem;
   border-radius: 8px;
   cursor: pointer;
   box-sizing: border-box;
   background-color: var(--blue);
   transition: all 0.5s;
   font-weight: 500;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
   background-color: var(--green);
   color: var(--white);
}

textarea:focus,
input[type="number"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus {
   color: var(--black);
   border: 1px solid var(--green) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   /* display: none; <- Crashes Chrome on hover */
   -webkit-appearance: none;
   margin: 0px;
   /* <-- Apparently some margin are still there even though it's hidden */
}

select {
   color: var(--black);
   border: none;
   background-color: var(--white);
   cursor: pointer;
   line-height: 20px;
   height: 40px;
   padding: 0px 44px 0px 20px;
   background-size: auto 16px;
   background-image: url(/imgcss/select.webp);
   background-repeat: no-repeat;
   background-position: right 20px center;
   font-family: var(--ff);
   -ms-appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border-radius: 8px;
   white-space: nowrap;
   text-overflow: ellipsis;
   transition: all 0.5s;
   position: relative;
}

select::-ms-expand {
   display: none;
}

select:hover {
   outline: none;
   background-color: var(--yell);
}

select:focus {
   outline: none;
   background-color: var(--yell);
}

/* Main style */

#full {
   display: block;
   position: relative;
   margin: 0px auto;
   padding: calc(4 * var(--sizew));
   padding-top: calc(calc(2 * var(--sizew)) * 2 + calc(2 * var(--sizew)));
   padding-bottom: 0;
}

.fixedtop {
   flex-flow: row;
   align-items: center;
   display: flex;
   flex-wrap: nowrap;
   gap: calc(1.5 * var(--sizew)) calc(2 * var(--sizew));
   justify-content: space-between;
   position: fixed;
   width: calc(100% - (calc(8 * var(--sizew))));
   z-index: 9999;
   top: calc(1 * var(--sizew));
   left: 0px;
   padding: calc(1 * var(--sizew)) calc(4 * var(--sizew));
   background-color: transparent;
   transition: all 0.5s;
}

.fixedtop.top {
   top: 0;
   background-color: var(--white);
   box-shadow: var(--shadow);
   padding: calc(1* var(--sizew)) calc(4* var(--sizew));
}

.logo-container {
   display: flex;
   flex-wrap: nowrap;
   gap: var(--sizew);
   align-items: center;
}

.logo-container img {
   height: calc(4* var(--sizew));
   width: calc(4* var(--sizew));
   border-radius: 50%;
}

a.brand-text {
   display: table;
   color: var(--black);
}

a.brand-text > div {
   font-size: calc(1.4 * var(--sizew));
   line-height: calc(1.4 * var(--sizew));
   font-weight: 900;
   letter-spacing: calc(0.05 * var(--sizew));
   margin-bottom: calc(var(--sizew) / 4);
}

a.brand-text > span {
   display: block;
   font-size: calc(1.2 * var(--sizew));
   line-height: calc(1.2 * var(--sizew));
   width: 100%;
}

.ft-left,
.ft-right {
   display: flex;
   gap: calc(2 * var(--sizew));
   justify-content: end;
   align-items: center;
}

.ftr-content {
   display: flex;
   flex-wrap: wrap;
   gap: calc(2* var(--sizew));
}

nav.menu {
   display: flex;
   flex-wrap: nowrap;
   gap: calc(2 * var(--sizew));
   align-items: center;
   font-size: calc(1.4 * var(--sizew));
}

nav.menu a {
   position: relative;
   /* Устанавливаем относительное позиционирование для ссылки */
   color: var(--black);
   opacity: 0.7;
   text-decoration: none;
   /* Убираем подчеркивание */
   display: inline-block;
   /* Чтобы полоска занимала ширину ссылки */
   padding: calc(1 * var(--sizew)) 0px;
   /* Добавляем отступ снизу для полоски */
   overflow: hidden;
   /* Скрываем полоску, когда она выходит за границы */
}

nav.menu a:hover {
   opacity: 1;
}

nav.menu a::before {
   content: '';
   /* Псевдоэлемент пустой */
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   height: 2px;
   background-color: var(--lighttone);
   transform: translateX(-100%);
   transition: transform 0.3s ease;
}

nav.menu a.active::before,
nav.menu a:hover::before {
   transform: translateX(0);
   /* Полоска выезжает слева направо */
}

nav.menu a.active::before,
nav.menu a:hover::before {
   animation: slideIn 0.3s forwards;
   /* Анимация при наведении */
}

nav.menu a::before {
   animation: slideOut 0.3s forwards;
   /* Анимация при убирании наведения */
}

@keyframes slideIn {
   from {
      transform: translateX(-100%);
      /* Начальное положение слева */
   }

   to {
      transform: translateX(0);
      /* Конечное положение на всю ширину */
   }
}

@keyframes slideOut {
   from {
      transform: translateX(0);
      /* Начальное положение на всю ширину */
   }

   to {
      transform: translateX(100%);
      /* Конечное положение справа */
   }
}

nav.menu a.active {
   color: var(--black);
   opacity: 1;
}

.contact-button {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   background: var(--lighttone);
   color: var(--black);
   border: none;
   border-radius: calc(1.4 * var(--sizew));
   font-size: calc(1.4 * var(--sizew));
   font-weight: 700;
   padding: 0 calc(1.4 * var(--sizew));
   height: 100%;
   cursor: pointer;
   line-height: calc(4 * var(--sizew));
   gap: 10px;
}

.contact-button:focus {
   outline: none;
}

.contact-button i {
   font-size: calc(1.8* var(--sizew));
}

.contact-button:hover {
   background: var(--lighttone);
   color: var(--black);
}

.contact-button span {}

.text-icon {
   font-size: inherit;
   vertical-align: middle;
   align-items: center;
}

@keyframes flash {

   0%,
   50%,
   to {
      opacity: 1;
   }

   25%,
   75% {
      opacity: 0px;
   }
}

.flash {
   animation-name: flash;
}

.autoflash {
   position: relative;
   overflow: hidden;
}

.flash {
   content: "";
   background-color: rgba(255, 255, 255, 0.31);
   height: 100%;
   width: 3em;
   display: block;
   position: absolute;
   top: 0px;
   left: -4.5em;
   -webkit-transform: skewX(-45deg) translateX(0);
   transform: skewX(-45deg) translateX(0);
   -webkit-transition: none;
   transition: none;
}

.lighting {
   webkit-animation: moving 5s ease-in-out infinite;
   -moz-animation: moving 5s ease-in-out infinite;
   -ms-animation: moving 5s ease-in-out infinite;
   -o-animation: moving 5s ease-in-out infinite;
   animation: moving 5s ease-in-out infinite;

}

@keyframes moving {
   30% {
      webkit-transform: skewX(-45deg) translateX(53.5em);
      transform: skewX(-45deg) translateX(53.5em);

   }

   100% {
      webkit-transform: skewX(-45deg) translateX(53.5em);
      transform: skewX(-45deg) translateX(53.5em);

   }
}

/* */

div#cb-hi {
   padding-bottom: calc(4* var(--sizew));
   padding-top: calc(2* var(--sizew));
}

.grid-container {
   gap: calc(2* var(--sizew));
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: 1fr;
}

.h1bl h1 {
   font-size: var(--otstup2);
   line-height: var(--otstup2);
   margin: 0px;
}

.h1bl h1 b {
   color: var(--orange);
   font-weight: 900;
}

.h1bl p {
   font-size: calc(1.4 * var(--sizew));
   line-height: calc(2 * var(--sizew));
   margin: 0px;
   margin-top: calc(var(--otstup) / 2);
   letter-spacing: calc(0.05* var(--sizew));
   font-weight: 500;
}

.gcbr {
   border-radius: var(--otstup);
   overflow: hidden;
}

.gcbp {
   padding: var(--otstup);
   border-radius: var(--otstup);
}

.color1 {
   background-color: #fff;
}

.h1bl {
   background-image: url(/casepage/buket/img/buket.webp);
   background-repeat: no-repeat;
   background-position: left 142% top 10%;
   background-size: 46%;
   box-shadow: var(--shadow);
   align-self: start;
}

.item1 {
   grid-column: 2 / 5;
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: calc(2* var(--sizew));
   grid-template-rows: auto auto 1fr;
   width: 100%;
}

.item2 {
   grid-column: 1;
   position: relative;
}

.item3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 1fr;
   gap: calc(2* var(--sizew));
   align-self: stretch;
}

.item4 {
   background-color: #262c38;
   background: var(--lighttone);
   border-radius: var(--otstup);
   box-shadow: var(--shadow);
   position: relative;
   overflow: hidden;
   padding: calc(var(--otstup) / 2);
   color: var(--black);
   padding-left: var(--otstup);
   display: flex;
   /* Добавлено */
   flex-direction: column;
   /* Добавлено */
}

.pidpys {
   display: flex;
   flex-wrap: nowrap;
   gap: var(--otstup);
   align-items: center;
}

.pidpys .video {
   position: relative;
   cursor: pointer;
   line-height: 0;
   display: none;
   width: 100%;
   justify-content: center;
   align-items: center;
}

.pidpys .video video {
   width: 100%;
   height: auto;
   border-radius: var(--otstup);
}

.video .move {
   position: absolute;
   z-index: 2;
   width: 100%;
   height: 100%;
   opacity: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.5s;
   background-color: rgb(0 0 0 / 50%);
   color: var(--white);
}

.video .move i {
   font-size: 10rem;
   opacity: 0.9;
}

.pidpys .title {
   font-size: calc(var(--otstup2) * 0.8);
   line-height: calc(var(--otstup2) * 0.8);
   font-weight: 900;
}

.pidpys .line {
   display: block;
   width: 2px;
   height: calc(var(--otstup2) * 0.8);
   background-color: #cbb59d;
   opacity: 0.8;
}

.text {
   font-size: calc(var(--otstup2) / 3);
   line-height: calc(var(--otstup2) / 2.5);
}

.social {
   display: flex;
   gap: calc(var(--otstup) / 4);
   flex-wrap: nowrap;
   background-color: #ffffff66;
   border-radius: var(--otstup);
   padding: calc(var(--otstup) / 4);
   flex-grow: 1;
   color: #262c38;
   justify-content: space-between;
   align-items: center;
}

.social-item {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
   gap: calc(var(--otstup) / 8);
   justify-content: center;
   align-items: center;
   text-align: center;
   height: calc(100% - calc(var(--otstup) / 1));
   padding: calc(var(--otstup) / 1.5) calc(var(--otstup) / 1);
   padding-left: calc(var(--otstup)* 2);
   color: var(--white);
   border-radius: calc(var(--otstup) / 4);
   font-size: calc(var(--otstup2)* 0.4);
   line-height: calc(var(--otstup2)* 0.4);
   font-weight: 900;
   background-size: var(--otstup), auto;
   background-position: center left calc(var(--otstup) / 1.5), center;
   background-repeat: no-repeat;
}

.social-item:first-child {
   border-radius: var(--otstup) calc(var(--otstup) / 4) calc(var(--otstup) / 4) var(--otstup);
}

.social-item .name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
}

.social-item:last-child {
   border-radius: calc(var(--otstup) / 4) var(--otstup) var(--otstup) calc(var(--otstup) / 4);
}

.insta {
   background-image: url(/casepage/buket/img/insta.svg), linear-gradient(166deg, #8f39ce, #d53692);
}

.tiktok {
   background-image: url(/casepage/buket/img/tiktok.svg), linear-gradient(166deg, #514f4f, #000000);
}

.telegram {
   background-image: url(/casepage/buket/img/tg.webp), linear-gradient(166deg, #55acff, #007be5);
}

button.scroll-button {
   position: relative;
   background-color: var(--orange);
   height: calc(4 * var(--sizew));
   border-radius: calc(2 * var(--sizew));
   font-size: calc(1.4 * var(--sizew));
   font-weight: 700;
   padding: 0 calc(2 * var(--sizew));
   z-index: 2;
   background: linear-gradient(0deg, rgb(255 98 0) 0%, rgb(255 160 46) 100%);
}

button.scroll-button i {
   margin-right: 10px;
   font-size: calc(1.8 * var(--sizew));
   margin-top: calc(0px - calc(0.2 * var(--sizew)));
}

.inpulse {
   position: relative;
   display: inline-block;
   line-height: 0px;
   transition: all 0.3s;
}

.h1bl .inpulse {
   margin-top: calc(var(--otstup) / 2);
}

.inpulse::before,
.inpulse::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   /* Делает псевдоэлемент больше кнопки */
   height: 100%;
   /* Делает псевдоэлемент больше кнопки */
   border-radius: calc(2 * var(--sizew));
   /* Используем ваш radius */
   transform: translate(-50%, -50%);
   z-index: 1;
   /* Под кнопкой */
   background-color: #ffa66f;
   /* Основной цвет */
   opacity: 0;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
}

.inpulse::before {
   animation-name: pulseBefore;
}

.inpulse::after {
   animation-name: pulseAfter;
   animation-delay: 1.25s;
   /* Задержка для второго импульса */
   background: #ff690596;
}

@keyframes pulseBefore {
   0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.6;
   }

   50% {
      transform: translate(-50%, -50%) scale(1.1);
      opacity: 0;
   }

   100% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 0;
   }
}

@keyframes pulseAfter {
   0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
   }

   50% {
      transform: translate(-50%, -50%) scale(1.1);
      opacity: 0.6;
   }

   100% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 0;
   }
}

.quest {
   background-color: var(--white);
   padding: var(--otstup);
   border-radius: var(--otstup);
   box-shadow: var(--shadow);
   position: relative;
   overflow: hidden;
}

.quest .title {
   font-size: calc(1.4 * var(--sizew));
   margin-bottom: calc(1 * var(--sizew));
   font-weight: 700;
   position: relative;
   z-index: 2;
}

.quest p {
   font-size: calc(1 * var(--sizew));
   line-height: calc(1.4 * var(--sizew));
   position: relative;
   z-index: 2;
}

.quest::before {
   content: '';
   display: block;
   background-image: url(/casepage/buket/img/dostavka.jpg);
   background-repeat: no-repeat;
   position: absolute;
   top: 0px;
   right: 0px;
   width: 100%;
   height: 100%;
   background-size: auto;
   background-position: right center;
   transform: scaleX(1);
   z-index: 0;
   opacity: 0.2;
}

.quest:nth-child(2)::before {
   background-image: url(/casepage/buket/img/oplata.jpg);
}

.quest:nth-child(3)::before {
   background-image: url(/casepage/buket/img/srok.jpg);
}

.item2 .video {
   position: absolute;
   cursor: pointer;
   line-height: 0;
   display: flex;
   height: 100%;
   width: 100%;
   top: 0px;
   left: 0px;
   justify-content: center;
   align-items: center;
}

.item2 .video video {
   width: auto;
   height: 100%;
   border-radius: var(--otstup);
   max-width: initial;
}

.video .move {
   position: absolute;
   z-index: 2;
   width: 100%;
   height: 100%;
   opacity: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.5s;
   background-color: rgb(0 0 0 / 50%);
   color: var(--white);
}

.video .move i {
   font-size: 10rem;
   opacity: 0.9;
}

.video .move:hover {
   opacity: 1;
}

/* */

#toggleButton {
   display: none;
   border-radius: var(--otstup);
   background: var(--lighttone);
   color: var(--black);
   position: relative;
   padding-left: 54px;
   font-weight: 500;
   font-size: calc(1.4 * var(--sizew));
   height: 44px;
   padding-right: 30px;
}

#toggleButton.active {
   background-color: var(--black);
   color: var(--white);
}

#toggleButton span {
   display: block;
   position: absolute;
   top: calc(50% - 1px);
   width: 14px;
   left: 30px;
   height: 2px;
   border-radius: 4px;
   transition: all 0.5s;
}

#toggleButton b {
   font-weight: 500;
}

#toggleButton span::before,
#toggleButton span::after {
   position: absolute;
   display: block;
   left: 0;
   width: 80%;
   height: 2px;
   content: "";
   border-radius: 4px;
}

#toggleButton span,
#toggleButton span::before,
#toggleButton span::after {
   background-color: var(--black);
}

#toggleButton.active span,
#toggleButton.active span::before,
#toggleButton.active span::after {
   background-color: var(--black);
}

#toggleButton span::before {
   top: -6px;
}

#toggleButton span::after {
   bottom: -6px;
}

#toggleButton span {
   transition: background 0s 0.0s;
}

#toggleButton span::before,
#toggleButton span::after {
   transition-duration: 0.3s, 0.3s;
   transition-delay: 0.3s, 0s;
}

#toggleButton span::before {
   transition-property: top, transform;
}

#toggleButton span::after {
   transition-property: bottom, transform;
}

#toggleButton.active span {
   background: none;
}

#toggleButton.active span::before {
   top: 0;
   transform: rotate(45deg);
   width: 100%;
}

#toggleButton.active span::after {
   bottom: 0;
   transform: rotate(-45deg);
   width: 100%;
}

#toggleButton.active span::before,
#toggleButton.active span::after {
   transition-delay: 0s, 0.3s;
   background-color: var(--white);
}

/* */

@media only screen and (max-width: 1239px) {

   .h1bl {
      background-position: left 130% top 10%;
      background-size: 46%;
   }

   :root {
      --sizew: 12px;
      --otstup: calc(2 * var(--sizew));
      --otstup2: calc(3 * var(--sizew));
   }

   .quest p {
      font-size: calc(1.3 * var(--sizew));
      line-height: calc(2 * var(--sizew));
   }

}

@media only screen and (max-width: 1239px) {

   .quest p b {
      display: none;
   }

   #toggleButton {
      display: block;
   }

   .fixedtop.active {
      background-color: var(--white);
      top: 0;
   }

   .ft-right {
      overflow-y: scroll;
      display: block;
      height: calc(100% - (calc(calc(2 * var(--sizew)) * 2 + calc(2 * var(--sizew)))) - (calc(2* var(--sizew)) * 2));
      position: fixed;
      top: calc(calc(2 * var(--sizew)) * 2 + calc(2 * var(--sizew)));
      background-color: #fff;
      left: 100%;
      padding: calc(2* var(--sizew)) calc(2* var(--sizew));
      width: calc(100% - (calc(2* var(--sizew)) * 2));
      transition: all 0.5s;
   }

   .ft-right .fzc-info {
      width: 100%;
   }

   .ft-right.open {
      left: 0px;
   }

   .ft-right {
      justify-content: center;
      align-items: center;
      display: flex;
      flex-wrap: wrap;
   }

   nav.menu {
      display: flex;
   }

   .contact-button {
      height: auto;
   }

   nav.menu a {
      display: table;
   }

   nav.menu {
      flex-wrap: wrap;
      gap: calc(1* var(--sizew));
      text-align: center;
      width: 100%;
   }

   nav.menu a::before,
   nav.menu a:hover::before,
   nav.menu a.active::before {
      display: none;
   }

   nav.menu a {
      width: calc(33.333% - calc(calc(1.5* var(--sizew)) / 2));
      background: var(--inp);
      border-radius: calc(1.4* var(--sizew));
   }

   nav.menu a.active {
      color: var(--black);
      opacity: 1;
      background: var(--lighttone);
   }

   .ft-right .contact-button {
      width: calc(var(--otstup)* 8.5);
   }

   .grid-container {
      flex-wrap: wrap;
      display: flex;
   }

   .item2 {
      order: 2;
      display: none;
   }

}

@media only screen and (max-width: 1023px) {

   div#cb-hi {
      padding-bottom: calc(2* var(--sizew));
   }

   .fixedtop {
      padding: calc(1* var(--sizew)) calc(2* var(--sizew));
      width: calc(100% - (calc(4* var(--sizew))));
   }

   .fixedtop.top {
      padding: calc(1* var(--sizew)) calc(2* var(--sizew));
   }

   #full {
      padding: calc(2 * var(--sizew));
      padding-top: calc(calc(2 * var(--sizew)) * 2 + calc(2 * var(--sizew)));
      padding-bottom: 0;
   }

   .h1bl {
      background-image: none;
      box-shadow: none;
   }

   .color1 {
      background-color: transparent;
   }

   .gcbp.h1bl {
      padding: 0;
      border-radius: 0;
   }

   .item1 {
      grid-template-rows: auto;
   }

   .item3 {
      flex-wrap: nowrap;
      display: flex;
      text-align: center;
   }

   .quest {
      width: calc(100% - var(--otstup));
      padding: var(--otstup) calc(var(--otstup) / 2);
   }

   .quest::before {
      opacity: 0.1;
   }

   .quest p br {
      display: none;
   }

   .video .move:hover {
      opacity: 0;
   }

   .inpulse {
      margin-left: auto;
      margin-right: auto;
      display: table;
   }

   .h1bl p,
   .h1bl h1 {
      text-align: center;
   }

   .item4 {
      padding-top: calc(var(--otstup) / 1);
   }

   .pidpys {
      flex-wrap: wrap;
      gap: calc(var(--otstup) / 2) var(--otstup);
      justify-content: center;
   }

   .item4 {
      padding-left: calc(var(--otstup) / 2);
   }

   button.scroll-button i {
      margin-top: calc(0px - calc(0.15* var(--sizew)));
   }
}

@media only screen and (max-width: 859px) {

   .text br {
      display: none;
   }
}

@media only screen and (max-width: 799px) {

   .text br {
      display: none;
   }

   .ft-right {
      flex-wrap: wrap;
   }
}

@media only screen and (max-width: 699px) {

   nav.menu a {
      width: calc(50% - calc(calc(1* var(--sizew)) / 2));
   }

   .ft-right .contact-button {
      width: 100%;
   }

   .item4 {
      padding: calc(var(--otstup) / 1);
   }

   .h1bl p br,
   .h1bl h1 br {
      display: none;
   }

   .item3 {
      flex-wrap: wrap;
   }

   .quest {
      padding: var(--otstup) calc(var(--otstup) / 1);
   }

   .pidpys .line {
      display: none;
   }

   .text {
      font-size: calc(var(--otstup2) / 2);
      line-height: calc(var(--otstup2) / 2.0);
      width: 100%;
      text-align: center;
   }

   .social {
      flex-wrap: wrap;
   }

   .social-item {
      flex: calc(100% - calc(var(--otstup) / 1));
      border-radius: calc(var(--otstup) / 1) !important;
   }

   .social {
      gap: calc(var(--otstup) / 4);
      padding: calc(var(--otstup) / 2);
   }

   .pidpys .video {
      display: flex;
      max-height: 360px;
      overflow: hidden;
      border-radius: var(--otstup);
   }

}

@media only screen and (max-width: 369px) {
   :root {
      --otstup2: calc(2.8* var(--sizew));
   }
}

@media only screen and (max-width: 449px) {
   #toggleButton b {
      display: none;
   }

   #toggleButton {
      padding: 0px;
      width: 54px;
      border-radius: calc(var(--otstup) / 2);
   }

   #toggleButton span {
      left: 20px;
   }

   .fixedtop {
      gap: 10px;
   }
}

/* Домашний зефир */

#zefir {
   width: calc(100% +(calc(4* var(--sizew))));
   margin: 0px calc((0px - var(--sizew)) * 4);
   display: block;
   overflow: hidden;
}

#zefir .zefir {
   display: block;
   background-color: #f8f8f8;
   padding: calc((var(--sizew)) * 4);
   border-radius: var(--otstup);
   position: relative;
   overflow: hidden;
}

img.zefirka {
   line-height: 0px;
   position: absolute;
   top: calc(var(--sizew) * 4);
   right: calc(var(--sizew) * 3);
   width: calc(var(--sizew) * 15);
   animation: floatVertical 4s ease-in-out infinite;
   /* Настройка анимации */
}

@keyframes floatVertical {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(10px);
      /* Измените значение для настройки амплитуды движения */
   }
}

#zefir .zefir h2 {
   font-size: var(--otstup2);
   line-height: var(--otstup2);
   margin: 0px;
}

#zefir .zefir h2 b {
   color: var(--orange);
   font-weight: 900;
}

#zefir .zefir p {
   font-size: calc(1.4 * var(--sizew));
   line-height: calc(2 * var(--sizew));
   margin: calc(var(--otstup) / 2) 0px;
   letter-spacing: calc(0.05* var(--sizew));
   font-weight: 500;
}

.zefirplus {
   display: flex;
   flex-wrap: wrap;
   gap: calc(var(--otstup) / 1);
   align-items: center;
   justify-content: space-between;
   font-size: calc(1.4 * var(--sizew));
   font-weight: 700;
}

.zefirplus > div {
   flex: 1;
   /* Это поможет равномерно распределить блоки */
   display: flex;
   align-items: center;
}

.zefirplus > div:first-child,
.zefirplus > div:nth-child(2) {
   justify-content: flex-start;
   /* Размещаем первые два блока в начале */
   margin-right: auto;
}

.zefirplus > div:nth-child(3) {
   flex-grow: 1.5;
   /* Позволяет центральному блоку занимать всю доступную ширину */
   justify-content: center;
}

.zefirplus > div:nth-child(4),
.zefirplus > div:nth-child(5) {
   justify-content: flex-end;
   /* Размещаем последние два блока в конце */
   margin-left: auto;
   text-align: right;
}

.zefirplus > div i {
   margin-right: 10px;
   font-size: calc(1.8 * var(--sizew));
}

.zefirplus > div:nth-child(4) i,
.zefirplus > div:nth-child(5) i {
   margin-right: 0px;
   margin-left: 10px;
   font-size: calc(1.8 * var(--sizew));
   margin-top: calc(0px - calc(0.2 * var(--sizew)));
}



@media only screen and (max-width: 1239px) {


   .zefirplus {
      gap: calc(var(--otstup) / 0.5) calc(var(--otstup) / 2);
      margin-top: calc(var(--otstup) / 0.5);
   }

   .zefirplus > div:first-child,
   .zefirplus > div:nth-child(2),
   .zefirplus > div:nth-child(4),
   .zefirplus > div:nth-child(5) {
      justify-content: center;
      position: relative;
   }

   .zefirplus > div:nth-child(1) i,
   .zefirplus > div:nth-child(2) i,
   .zefirplus > div:nth-child(4) i,
   .zefirplus > div:nth-child(5) i {
      display: flex;
      position: absolute;
      margin: 0px !important;
      top: -30px;
      left: calc(50% - 15px);
      padding: 0px;
      width: 30px;
      height: 30px;
      align-items: center;
      justify-content: center;
   }

   .zefirplus > div:nth-child(3) {
      margin-top: calc(0px - calc(var(--otstup) / 1));
   }

}

@media only screen and (max-width: 1023px) {

   #zefir {
      width: calc(100% +(calc(2* var(--sizew))));
      margin: 0px calc((0px - var(--sizew)) * 2);
   }

   #zefir .zefir {
      padding: calc((var(--sizew)) * 2);
   }

   #zefir .zefir p br {
      display: none;
   }

   img.zefirka {
      top: calc(var(--sizew) * 2);
      right: calc(var(--sizew) * -8);
   }

   .zefirplus > div:nth-child(3) {
      order: 5;
      flex: 0 0 100%;
      max-width: 100%;
   }

}

@media only screen and (max-width: 699px) {

   .zefirplus {
      gap: calc(var(--otstup) / 0.5) calc(var(--otstup) / 2);
      line-height: calc(1.6* var(--sizew));
      align-items: stretch;
      flex-wrap: wrap;
      margin-top: calc(var(--otstup) / 0.5);
   }

   .zefirplus > div {
      flex: calc(50% - calc(0.5* var(--sizew)));
      box-sizing: border-box;
      align-items: center;
      display: flex;
      justify-content: center;
      position: relative;
      text-align: center;
   }

   .zefirplus > div:nth-child(4),
   .zefirplus > div:nth-child(5) {
      text-align: center;
   }

   .zefirplus > div:nth-child(3) {
      order: 3;
      flex: 1 1 100%;
      max-width: 100%;
      background: transparent;
      border-radius: 0;
      padding: 0;
      margin-top: calc(0px - calc(var(--otstup) / 1));
   }

   .zefirplus > div:nth-child(3) i {
      display: inline-block;
   }

   .zefirplus > div:nth-child(3) button {
      width: 100%;
   }

   .carousel-item .video {
      max-height: 500px;
   }

   img.zefirka {
      top: calc(var(--sizew) * 5);
      right: calc(var(--sizew) * -7);
   }
}

/* Слайдер */

.slid-woman,
.slid-man,
.slid-child,
.carousel {
   position: relative;
   width: calc(100% + calc(calc(var(--otstup) / 2) * 2));
   margin: calc(var(--otstup) / 1) calc(0px - calc(var(--otstup) / 2));
}

.carousel-item .video video,
.carousel-item .video .load-photo {
   position: absolute;
}

.vnutr {
   padding: 0 calc(var(--otstup) / 2);
   display: block;
}

.carousel-item {
   margin: 0;
   border-radius: var(--otstup);
   overflow: hidden;
   position: relative;
}

.carousel-item video {
   width: 100%;
   height: auto;
}

.carousel-item .video {
   justify-content: center;
   align-items: center;
   display: flex;
   width: calc(100% - (calc(var(--otstup) / 5) * 2));
   position: relative;
   border-radius: var(--otstup);
   overflow: hidden;
   border: calc(var(--otstup) / 5) solid var(--lighttone);
   max-height: 500px;
}

.carousel-item .video video {
   cursor: pointer;
}

.carousel-item .video .move {
   position: absolute;
   z-index: 2;
   width: 100%;
   height: 100%;
   opacity: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.5s;
   background-color: rgb(0 0 0 / 50%);
   color: var(--white);
}

.carousel-item .video .move.play {
   opacity: 0;
}

.carousel-item .video .move.play:hover {
   opacity: 0;
}

.carousel-item .video .move:hover {
   opacity: 1;
   cursor: pointer;
}

.slick-prev {
   left: calc(0% - calc(var(--otstup) * 0.5));
}

.slick-next {
   right: calc(0% - calc(var(--otstup) * 0.5));
}

button:hover {
   background-color: var(--green);
   color: var(--white);
}

.slick-prev,
.slick-next {
   width: calc(var(--otstup) * 2);
   bottom: calc(50% - calc(var(--otstup) * 1));
   height: calc(var(--otstup) * 2);
   background-color: var(--lighttone);
   border-radius: calc(var(--otstup) / 2);
   background-size: var(--otstup);
   color: var(--black);
}

.slick-prev:hover,
.slick-next:hover {
   background-color: var(--lighttone);
   color: var(--black);
}

.slick-prev:hover {
   background-image: url(/slick/img/l.svg);
}

.slick-next:hover {
   background-image: url(/slick/img/r.svg);
}

@media only screen and (max-width: 1023px) {

   .slick-prev {
      left: calc(0% - calc(var(--otstup) * 0.0));
   }

   .slick-next {
      right: calc(0% - calc(var(--otstup) * 0.0));
   }

}

/* Букеты */

#buket {
   width: calc(100% +(calc(4* var(--sizew))));
   margin: 0px calc((0px - var(--sizew)) * 4);
   display: block;
   overflow: hidden;
}

#buket .buket {
   display: block;
   background-color: #fff3e5;
   padding: calc((var(--sizew)) * 4);
   border-radius: var(--otstup);
   position: relative;
}

img.malina {
   line-height: 0px;
   position: absolute;
   top: calc(0px - calc(var(--sizew) * -1));
   right: calc(0px - calc(var(--sizew) * 10));
   width: calc(var(--sizew) * 30);
   animation: floatVertical 4s ease-in-out infinite;
}

img.orehi {
   line-height: 0px;
   position: absolute;
   top: calc(0px - calc(var(--sizew) * 0));
   left: calc(0px - calc(var(--sizew) * 12));
   width: calc(var(--sizew) * 30);
   animation: floatVertical 4s ease-in-out infinite;
}

#buket .buket .topicon {
   color: var(--orange);
   font-weight: 900;
   font-size: calc(var(--otstup2)* 1);
   display: table;
   margin: 0px auto;
   margin-bottom: calc((var(--sizew))* 1);
}

#buket .buket h2 {
   font-size: calc(var(--otstup2) * 0.8);
   line-height: calc(var(--otstup2) * 0.8);
   margin: 0px;
   text-align: center;
}

#buket .buket h2 b {
   color: var(--orange);
   font-weight: 900;
   font-size: calc(var(--otstup2) * 1);
   line-height: calc(var(--otstup2) * 1);
   display: table;
   margin: calc(var(--otstup2)* 0.2) 0;
   width: 100%;
}

#buket .buket h2 b br {
   display: none;
}

#buket .buket p {
   font-size: calc(1.4 * var(--sizew));
   line-height: calc(2 * var(--sizew));
   margin: calc(var(--otstup) / 2) 0px;
   letter-spacing: calc(0.05* var(--sizew));
   font-weight: 500;
   text-align: center;
}

@media only screen and (max-width: 1023px) {

   #buket {
      width: calc(100% +(calc(2* var(--sizew))));
      margin: 0px calc((0px - var(--sizew)) * 2);
   }

   #buket .buket {
      padding: calc((var(--sizew)) * 2);
   }

   #buket .buket p br {
      display: none;
   }

   img.orehi,
   img.malina {
      top: calc(0px - calc(var(--sizew) * -15));
   }

}

@media only screen and (max-width: 699px) {

   img.orehi,
   img.malina {
      display: none;
   }

   #buket .buket h2 b br {
      display: inline-block;
   }
}

/* Табы */

.betabs {
   display: block;
   text-align: center;
   margin: calc(var(--otstup) / 1) auto;
}

.tabs {
   display: inline-flex;
   padding: 0;
   border-radius: calc(2 * var(--sizew));
   border: 2px solid var(--lighttone);
   font-size: calc(1.4 * var(--sizew));
   overflow: hidden;
   font-weight: 500;
   width: auto;
   justify-content: center;
   align-items: center;
   flex-flow: nowrap;
   margin: 0px;
   position: relative;
   z-index: 2;
   background-color: #fff3e5;
}

.tabs li.active {
   background-color: var(--minilighttone);
   color: var(--white);
}

.tabs li {
   display: block;
   border-right: 2px solid var(--lighttone);
}

.tabs li:last-child {
   border-right: none;
}

.tabs li a {
   display: flex;
   gap: calc(var(--otstup) / 2);
   padding: calc(var(--otstup) / 2);
   margin: 0px;
   position: relative;
   justify-content: center;
   align-items: center;
   font-weight: 500;
}

.tabs li a,
.tabs li a:hover {
   text-align: center;
   color: var(--black);
   position: relative;
}

.tabs li.active a,
.tabs li.active a:hover {
   color: var(--black);
}

.tabs li a span {
   opacity: 0.8;
}

.tabs li.active a span {
   opacity: 1;
}

.tab_container {
   display: block;
   text-align: left;
   margin-top: calc(var(--otstup) / 1);
}

@media only screen and (max-width: 699px) {
   .tabs li a {
      flex-wrap: wrap;
   }
}


/* Клиенты */

#client {
   width: calc(100% +(calc(4* var(--sizew))));
   margin: 0px calc((0px - var(--sizew)) * 4);
   display: block;
   position: relative;
   overflow: hidden;
}

#client .client {
   display: block;
   background-color: #ffece5;
   padding: calc((var(--sizew)) * 4);
   border-radius: var(--otstup);
   position: relative;
   overflow: hidden;
}

#client .client .topicon {
   color: var(--orange);
   font-weight: 900;
   font-size: calc(var(--otstup2)* 1);
   display: table;
   margin: 0px auto;
   margin-bottom: calc((var(--sizew))* 1);
}

#client .client .topicon i {
   animation: heartbeat 2s infinite ease-in-out;
}

@keyframes heartbeat {

   0%,
   100% {
      transform: scale(1);
      /* Начальный и конечный размер иконки */
   }

   20% {
      transform: scale(1.1);
      /* Увеличение иконки */
   }

   40% {
      transform: scale(0.9);
      /* Уменьшение иконки */
   }

   60% {
      transform: scale(1.1);
      /* Увеличение иконки снова */
   }

   80% {
      transform: scale(1);
      /* Увеличение иконки снова */
   }

}


#client .client h2 {
   font-size: calc(var(--otstup2) * 0.8);
   line-height: calc(var(--otstup2) * 0.8);
   margin: 0px;
   text-align: center;
}

#client .client h2 b {
   color: var(--orange);
   font-weight: 900;
   font-size: calc(var(--otstup2) * 1);
   line-height: calc(var(--otstup2) * 1);
   display: table;
   margin: calc(var(--otstup2)* 0.2) 0;
   width: 100%;
}

#client .client h2 b br {
   display: none;
}

#client .oldvidh,
#client .client p {
   font-size: calc(1.4 * var(--sizew));
   line-height: calc(2 * var(--sizew));
   margin: calc(var(--otstup) / 2) 0px;
   letter-spacing: calc(0.05* var(--sizew));
   font-weight: 500;
   text-align: center;
}

#client .oldvidh {
   text-align: center;
   display: table;
   margin: 0px auto !important;
   border: 2px solid var(--lighttone);
   border-radius: calc(1* var(--sizew));
   padding: calc(var(--otstup) / 1);
   padding-bottom: calc(var(--otstup) / 1.2);
}

#client .oldvidh a {
   color: var(--orange);
}

@media only screen and (max-width: 1023px) {

   #client {
      width: calc(100% +(calc(2* var(--sizew))));
      margin: 0px calc((0px - var(--sizew)) * 2);
   }

   #client .client {
      padding: calc((var(--sizew)) * 2);
   }

   #client .client p br {
      display: none;
   }

}

@media only screen and (max-width: 699px) {
   #buket .buket h2 b br {
      display: inline-block;
   }
}

#vidhuk {
   width: 100%;
   padding: 0;
   column-count: 4;
   gap: calc(var(--otstup) / 1);
   column-gap: calc(var(--otstup) / 1);
   margin-top: calc(var(--otstup) / 1);
   display: block;
}

.vidhuk {
   box-sizing: border-box;
   font-size: calc(1* var(--sizew));
   line-height: calc(1.4* var(--sizew));
   display: inline-block;
   width: 100%;
   background-color: var(--white);
   border-radius: calc(1 * var(--sizew));
   padding: calc(var(--otstup) / 1);
   padding-bottom: calc(var(--otstup) / 1.2);
   margin-bottom: calc(var(--otstup) / 1);
   box-shadow: var(--shadow);
}

.vidhuk .txt {
   display: block;
   font-size: calc(1.2* var(--sizew));
   line-height: calc(1.6* var(--sizew));
}

.vidhuk img.smile {
   display: inline-block;
   margin: 0;
   padding: 0;
   margin-bottom: calc(0px - calc(0.2* var(--sizew)));
   height: calc(1.4 * var(--sizew));
   width: auto;
}

.vidhuk .tit {
   display: flex;
   flex-wrap: nowrap;
   gap: calc(var(--otstup) / 2);
   margin-bottom: calc(var(--otstup) / 2);
   align-items: center;
   border-bottom: 2px solid var(--inp);
   padding-bottom: calc(var(--otstup) / 2);
}

.vidhuk .tit .ava {
   display: block;
   line-height: 0;
   border-radius: 50%;
   overflow: hidden;
   width: calc(var(--otstup) / 0.5);
   border: 2px solid var(--lighttone);
}

.vidhuk .tit .ava img {
   border-radius: 50%;
}

.vidhuk .tit .name {
   display: block;
   font-size: calc(1.2* var(--sizew));
   line-height: calc(1.6* var(--sizew));
}

.vidhuk .tit .name a {
   display: table;
   font-size: calc(1* var(--sizew));
   line-height: calc(1.4* var(--sizew));
}

/* Анимация */

.message-container {
   display: inline-block;
   position: absolute;
   z-index: 2;
   opacity: 0;
}

.message-container.aniplav1,
.message-container.aniplav2,
.message-container.aniplav3,
.message-container.aniplav4,
.message-container.aniplav5,
.message-container.aniplav6 {
   opacity: 0;
   animation: stormAnimation 12s infinite;
}

.message-container.aniplav1 {
   animation-delay: 0s;
   z-index: 6;
}

.message-container.aniplav2 {
   animation-delay: 1s;
   z-index: 5;
}

.message-container.aniplav3 {
   animation-delay: 2s;
   z-index: 4;
}

.message-container.aniplav4 {
   animation-delay: 3s;
   z-index: 3;
}

.message-container.aniplav5 {
   animation-delay: 4s;
   z-index: 2;
}

.message-container.aniplav6 {
   animation-delay: 5s;
   z-index: 1;
}


@keyframes stormAnimation {

   0%,
   40% {
      opacity: 0;
   }

   50%,
   90% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

.message-container .new-message {
   font-size: calc(0.7 * var(--sizew));
   color: var(--black);
   margin-bottom: calc(0.3 * var(--sizew));
   padding-left: calc(0.9 * var(--sizew));
   display: block;
}

.message-container .message {
   background-color: var(--white);
   border-radius: calc(1* var(--sizew));
   padding: calc(var(--otstup) / 2.5) calc(var(--otstup) / 2);
   box-shadow: var(--shadow);
   font-size: calc(1* var(--sizew));
   line-height: calc(1.4* var(--sizew));
   display: inline-block;
   position: relative;
}

.message-container .message img.smile {
   display: inline-block;
   margin: 0;
   padding: 0;
   margin-bottom: calc(0px - calc(0.2* var(--sizew)));
   height: calc(1.4 * var(--sizew));
   width: auto;
}

.message-container .message.pr::after,
.message-container .message.pr::before {
   content: "";
   position: absolute;
   left: 100%;
   bottom: .5em;
   width: 1.8em;
   height: 1.8em;
   border: .5em solid #ffece5;
   border-radius: 50%;
   background: #ffece5;
}

.message-container .message.pr::before {
   border-top: none;
   height: .9em;
   border-radius: 0 0 50% 50% / 0 0 100% 100%;
   background: var(--white);
   border-color: var(--white);
   margin-left: -.9em;
}

.message-container .message.pl::after,
.message-container .message.pl::before {
   content: "";
   position: absolute;
   right: 100%;
   bottom: .5em;
   width: 1.8em;
   height: 1.8em;
   border: .5em solid #ffece5;
   border-radius: 50%;
   background: #ffece5;
}

.message-container .message.pl::before {
   border-top: none;
   height: .9em;
   border-radius: 0 0 50% 50% / 0 0 100% 100%;
   background: var(--white);
   border-color: var(--white);
   margin-right: -.9em;
}

.message-container .message.otv.pr::before,
.message-container .message.otv.pl::before {
   background: #ecffe1;
   border-color: #ecffe1;
}

.message-container .time {
   display: block;
   text-align: right;
   font-size: calc(0.7* var(--sizew));
   color: var(--black);
   margin-top: calc(0.3* var(--sizew));
   padding-right: calc(0.9* var(--sizew));
}

.message-container .text-icon {
   font-size: inherit;
   margin-left: 4px;
}


.ptopr-1 {
   top: calc((var(--sizew))* 2.5);
   right: calc((var(--sizew))* 3);
}

.ptopr-2 {
   top: calc((var(--sizew))* 8);
   right: calc((var(--sizew))* 15);
}

.ptopr-3 {
   top: calc((var(--sizew))* 13);
   right: calc((var(--sizew))* 3);
}

.ptopr-4 {
   top: calc((var(--sizew))* 2.5);
   left: calc((var(--sizew))* 3);
}

.ptopr-5 {
   top: calc((var(--sizew))* 9);
   left: calc((var(--sizew))* 9);
}

.ptopr-6 {
   top: calc((var(--sizew))* 13.5);
   left: calc((var(--sizew))* 3);
}

.message-container .message.otv {
   background-color: #ecffe1;
}

/* Адаптация анимации */

@media only screen and (max-width: 1179px) {
   .ptopr-1 {
      top: calc((var(--sizew))* 1.5);
   }

   .ptopr-2 {
      top: calc((var(--sizew))* 8);
   }

   .ptopr-3 {
      top: calc((var(--sizew))* 13);
   }

   .ptopr-1,
   .ptopr-2,
   .ptopr-3 {
      right: calc((var(--sizew))* 1.5);

   }

   .ptopr-4 {
      top: calc((var(--sizew))* 1.5);
   }

   .ptopr-5 {
      top: calc((var(--sizew))* 8.2);
   }

   .ptopr-3 {
      top: calc((var(--sizew))* 13);
   }

   .ptopr-4,
   .ptopr-5,
   .ptopr-6 {
      left: calc((var(--sizew))* 1.5);

   }

}

@media only screen and (max-width: 1023px) {

   .aniplav1,
   .aniplav2,
   .aniplav3,
   .aniplav4,
   .aniplav5,
   .aniplav6 {
      display: none;
   }

}

/* Адаптация блока отзывов */

@media only screen and (max-width: 1239px) {
   #vidhuk {
      column-count: 3;
   }

   .vidhuk .txt {
      font-size: calc(1.3* var(--sizew));
      line-height: calc(2* var(--sizew));
   }

   .vidhuk .tit .name {
      font-size: calc(1.3* var(--sizew));
   }

   .vidhuk .tit .name a {
      font-size: calc(1.2* var(--sizew));
   }

}

@media only screen and (max-width: 1023px) {

   #vidhuk {
      column-count: 2;
   }

}

@media only screen and (max-width: 699px) {

   #vidhuk {
      column-count: 1;
   }

}

/* Форма заказа */

.formzakazb {
   display: none;
   z-index: 99999999;
   background-color: var(--background);
   overflow-y: scroll;
   height: 100%;
   position: fixed;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   top: 0;
   left: 0;
   width: 100%;
}

.formzakaz {
   display: flex;
   z-index: 1;
   background-color: var(--background);
   overflow-y: scroll;
   height: 100%;
   position: fixed;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   top: 0;
   left: 0;
   width: 100%;
}

.fz-content {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   position: relative;
   padding: calc(2* var(--sizew));
   width: calc(100% - calc(4* var(--sizew)));
   gap: calc(2* var(--sizew));
}

.fz-content .formclose {
   width: 100%;
   display: block;
   text-align: center;
}

button.fz-close {
   position: relative;
   height: calc(4* var(--sizew));
   border-radius: calc(2* var(--sizew));
   font-size: calc(1.4* var(--sizew));
   font-weight: 700;
   padding: 0;
   z-index: 2;
   background-color: var(--black);
}

button.fz-close i {
   margin-right: 5px;
   font-size: calc(1.4* var(--sizew));
}

.fzc-info {
   display: flex;
   flex-wrap: wrap;
   width: calc(var(--otstup)* 8.5 * 3 + calc(2* var(--sizew)));
   padding: calc(2* var(--sizew));
   gap: calc(1* var(--sizew));
   border-radius: calc(2* var(--sizew));
   justify-content: center;
   background-color: var(--minilighttone);
}

.formzakaz .title h2 {
   font-size: calc(var(--otstup2) * 0.8);
   line-height: calc(var(--otstup2) * 0.7);
   margin: 0px;
   color: var(--black);
   display: block;
   text-align: center;
   width: 100%;
}

.formzakaz .title h2 b {
   font-size: calc(var(--otstup2) * 0.7);
   line-height: calc(var(--otstup2) * 0.7);
   color: var(--orange);
   font-weight: 900;
}

.formzakaz p {
   font-size: calc(1.4* var(--sizew));
   line-height: calc(2* var(--sizew));
   margin: 0px;
   margin-top: calc(var(--otstup) / 2);
   letter-spacing: calc(0.05* var(--sizew));
   font-weight: 500;
   text-align: center;
}

.formzakaz button {
   width: calc(var(--otstup)* 8.5);
   max-width: 100%;
}

button.fz-phone,
button.fz-phone:hover,
button.fz-viber,
button.fz-viber:hover,
button.fz-whatsapp,
button.fz-whatsapp:hover,
button.fz-telegram,
button.fz-telegram:hover,
button.fz-tiktok,
button.fz-tiktok:hover,
button.fz-insta,
button.fz-insta:hover {
   background-image: url(/casepage/buket/img/insta.svg), linear-gradient(166deg, #8f39ce, #d53692);
   background-size: var(--otstup), auto;
   background-position: center left calc(var(--otstup) / 1.5), center;
   background-repeat: no-repeat;
   color: var(--white);
   padding-left: calc(var(--otstup)* 1);
}

button.fz-tiktok,
button.fz-tiktok:hover {
   background-image: url(/casepage/buket/img/tiktok.svg), linear-gradient(166deg, #514f4f, #000000);
}

button.fz-telegram,
button.fz-telegram:hover {
   background-image: url(/casepage/buket/img/tg.webp), linear-gradient(166deg, #55acff, #007be5);
}

button.fz-whatsapp,
button.fz-whatsapp:hover {
   background-image: url(/casepage/buket/img/whatsapp.svg), linear-gradient(166deg, #33e676, #0fb34c);
}

button.fz-viber,
button.fz-viber:hover {
   background-image: url(/casepage/buket/img/viber.svg), linear-gradient(166deg, #6f54db, #382978);
}

button.fz-phone,
button.fz-phone:hover {
   background-image: url(/casepage/buket/img/vodafone.svg), linear-gradient(166deg, #f6dbbc, #f6d6b0);
   color: var(--black);
   width: calc(var(--otstup)* 11.5);
}

.fs-pidpys {
   display: block;
   width: 100%;
   position: relative;
}

.fs-pidpys::after {
   content: '';
   display: block;
   position: absolute;
   top: calc(50% - 1px);
   left: 0;
   height: 2px;
   background-color: var(--lighttone);
   width: 100%;
}

.fs-pidpys p {
   display: table;
   margin: 0 auto;
   padding: 0 calc(2* var(--sizew));
   background-color: var(--minilighttone);
   z-index: 2;
   position: relative;
}

@media only screen and (max-width: 699px) {

   .formzakaz button {
      width: 100%;
   }

   .formzakaz button.fz-close {
      width: calc(var(--otstup)* 8.5);
   }
}

/* Отключаем готовку */

.pdagotovka {
   display: none;
}

.fullgotovka {
   display: block;
}


@media only screen and (max-width: 1239px) {

   .pdagotovka {
      display: block;
   }

   .fullgotovka {
      display: none;
   }

}

/* Футер */

footer#cb-footer {
   margin-top: calc(4 * var(--sizew));
   display: flex;
   flex-wrap: wrap;
   gap: calc(4 * var(--sizew));
}

@media only screen and (max-width: 1239px) {
   footer#cb-footer {
      margin-top: calc(2 * var(--sizew));
      display: flex;
      flex-wrap: wrap;
      gap: calc(2 * var(--sizew));
   }
}

.seo {
   display: flex;
   gap: calc(1 * var(--sizew)) calc(2 * var(--sizew));
}

.seo > * {
   flex: 1;
}

.seo-text h2 {
   font-size: calc(var(--otstup2)* 0.5);
   line-height: calc(var(--otstup2)* 0.8);
   margin: 0px;
   margin-bottom: calc(var(--otstup) / 3);
}

.seo-text p {
   font-size: calc(1.0 * var(--sizew));
   line-height: calc(1.4* var(--sizew));
   margin: calc(var(--otstup) / 5) 0;
}

.fbottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: calc(var(--otstup) / 1);
   margin-bottom: calc(2 * var(--sizew));
   flex-wrap: wrap;
   font-size: calc(1.3* var(--sizew));
   line-height: calc(1.8* var(--sizew));
   width: 100%;
}

.fbottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: calc(var(--otstup) / 1);
   margin-bottom: calc(2 * var(--sizew));
   flex-wrap: wrap;
   font-size: calc(1.3* var(--sizew));
   line-height: calc(1.8* var(--sizew));
   width: 100%;
}

.poloman {
   font-weight: 700;

}

.poloman a {
   color: var(--black);
   font-weight: 700;
}

.poloman a:last-child {
   font-weight: 900;
   color: var(--orange);
}

.zakon {
   display: block;
   text-align: center;
   border: 2px solid var(--lighttone);
   border-radius: calc(1* var(--sizew));
   padding: calc(var(--otstup) / 1);
   padding-bottom: calc(var(--otstup) / 1.2);
   margin-bottom: calc(var(--otstup) / 1);
}

@media only screen and (max-width: 1599px) {
   .seo-text h2 {
      margin-bottom: calc(var(--otstup) / 2.5);
   }

   .seo-text p {
      font-size: calc(1.2 * var(--sizew));
      line-height: calc(1.8* var(--sizew));
      margin: calc(var(--otstup) / 5) 0;
   }
}

@media only screen and (max-width: 1023px) {
   .seo {
      flex-wrap: wrap;
   }

   .seo > * {
      flex: auto;
   }
}

@media only screen and (max-width: 699px) {
   .seo-text p {
      margin: calc(var(--otstup) / 2) 0;
   }

   .seo-text h2,
   .seo-text p {
      text-align: center;
   }

   .fbottom {
      justify-content: center;
      gap: calc(var(--otstup) / 5);
   }

   .zakon {
      text-align: justify;
   }

   .zakon br {
      display: none;
   }
}

/* Вопросы */

#pitan {
   width: calc(100% +(calc(4* var(--sizew))));
   margin: 0px calc((0px - var(--sizew)) * 4);
   display: block;
   position: relative;
}

#pitan .pitan {
   display: block;
   background-color: #fef4f3;
   padding: calc((var(--sizew)) * 4);
   border-radius: var(--otstup);
   position: relative;
}

#pitan .pitan .topicon {
   color: var(--orange);
   font-weight: 900;
   font-size: calc(var(--otstup2)* 1);
   display: table;
   margin: 0px auto;
   margin-bottom: calc((var(--sizew))* 1);
}

#pitan .pitan h2 {
   font-size: calc(var(--otstup2) * 0.8);
   line-height: calc(var(--otstup2) * 0.8);
   margin: 0px;
   text-align: center;
   margin-bottom: calc(var(--otstup) / 2);

}

#pitan .pitan h2 b {
   color: var(--orange);
   font-weight: 900;
   font-size: calc(var(--otstup2) * 1);
   line-height: calc(var(--otstup2) * 1);
   display: table;
   margin: calc(var(--otstup2)* 0.1) 0;
   width: 100%;
}

#pitan .pitan p br,
#pitan .pitan h2 b br {
   display: none;
}

#pitan .pitan p {
   font-size: calc(1.4 * var(--sizew));
   line-height: calc(2 * var(--sizew));
   margin: 0;
   letter-spacing: calc(0.05* var(--sizew));
   font-weight: 500;
   text-align: center;
}

@media only screen and (max-width: 1023px) {

   #pitan {
      width: calc(100% +(calc(2* var(--sizew))));
      margin: 0px calc((0px - var(--sizew)) * 2);
   }

   #pitan .pitan {
      padding: calc((var(--sizew)) * 2);
   }

}

@media only screen and (max-width: 699px) {

   #pitan .pitan p br {
      display: block;
   }

}

.iphone {
   width: 100%;
   height: auto;
   background-color: var(--black);
   border-radius: calc(2* var(--sizew));
   position: relative;
   padding: calc(var(--otstup) / 4);
       box-shadow: var(--shadow);
}

.iphone::before {
   content: "";
   position: absolute;
   top: calc(var(--otstup) / 2);
   left: 50%;
   width: calc(var(--otstup) * 2);
   height: calc(var(--otstup) / 3);
   background-color: var(--black);
   border-radius: 10px;
   transform: translateX(-50%);
   z-index: 1;
}

.screen {
   width: 100%;
   height: 100%;
   border-radius: calc(1.5 * var(--sizew));
   overflow: hidden;
   position: relative;
}

.screen .fon {
   display: block;
   width: 100%;
   height: 100%;
   background-color: var(--white);
   opacity: 0.1;
   position: absolute;
   z-index: 5;
}

.screen video {
   width: 100%;
   height: auto;
}

.phone1,
.phone2 {
   position: sticky;
   top: calc(calc(2 * var(--sizew)) * 2 + calc(2 * var(--sizew)) + calc((var(--sizew)) * 2));
   width: calc(15 * var(--sizew));
   z-index: 1;
   float: left;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between;
}

.phone2 {
   float: right;
}

.pitancont {
   display: block;
   margin: 0px auto;
   width: calc(100% - calc(34 * var(--sizew)));
}


.topquest {
   margin-top: calc(var(--otstup) / 1);
   border: 2px solid var(--lighttone);
   border-radius: calc(1* var(--sizew));
   padding: calc(var(--otstup) / 1);
   padding-bottom: calc(var(--otstup) / 1.2);
}

.topquest h3 {
   font-size: calc(var(--otstup2) / 2.25);
   line-height: calc(var(--otstup2) / 2);
   margin: 0px;
   text-align: left;
   margin-bottom: calc(var(--otstup) / 3);
   font-weight: 700;
}

#pitan .pitan .topquest p {
   font-size: calc(1.2* var(--sizew));
   line-height: calc(1.75* var(--sizew));
   margin: 0;
   margin-bottom: calc(var(--otstup) / 1);
   letter-spacing: 0;
   font-weight: 500;
   text-align: left;
   border-bottom: 2px solid var(--lighttone);
   padding-bottom: calc(var(--otstup) / 1.2);
}

#pitan .pitan .inpulse {
   margin-left: auto;
   margin-right: auto;
   display: table;
   margin-top: calc(var(--otstup) / 1);
}

#pitan .pitan .topquest p:last-child {
   border-bottom: none;
   padding-bottom: 0;
   margin-bottom: 0px;
}

@media only screen and (max-width: 1023px) {

   .phone1,
   .phone2 {
      width: calc(10 * var(--sizew));
      display: none;
   }

   .pitancont {
      width: calc(100% - calc(24 * var(--sizew)));
      width: 100%;
   }

   .iphone::before {
    width: calc(var(--otstup) * 1.5);
}

   .topquest h3 {
      font-size: calc(var(--otstup2) / 2);
      line-height: calc(var(--otstup2) / 1.75);
   }

   #pitan .pitan .topquest p {
      font-size: calc(1.3* var(--sizew));
      line-height: calc(1.75* var(--sizew));
   }
}

@media only screen and (max-width: 699px) {

   .phone1,
   .phone2 {
      display: none;
   }

   .pitancont {
      display: block;
      margin: 0px auto;
      width: 100%;
   }
}

/* Контакты */

#cb-contact {
    width: calc(100% +(calc(4* var(--sizew))));
    margin: 0px auto;
    padding-top: calc(4* var(--sizew));
    display: block;
    position: relative;
}

#cb-contact .cb-contact {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    gap: calc(2* var(--sizew));
    padding: 0;
    position: relative;
}

#cb-contact .cb-contact .cont-bl {
    flex: 1.5;
}

#cb-contact .cb-contact h2 {
    font-size: calc(var(--otstup2) * 0.8);
    line-height: calc(var(--otstup2) * 0.8);
    margin: 0px;
    margin-bottom: calc(var(--otstup) / 2);
}

#cb-contact .cb-contact p {
    font-size: calc(1.4 * var(--sizew));
    line-height: calc(2 * var(--sizew));
    margin: 0;
    letter-spacing: calc(0.05* var(--sizew));
    font-weight: 500;
    margin-bottom: calc(1.2* var(--sizew));
}

#cb-contact .cb-contact p a {
   color: var(--orange);
}

#cb-contact .cb-contact .fzc-info {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - calc(4* var(--sizew)));
    padding: calc(2* var(--sizew));
    gap: calc(1* var(--sizew));
    border-radius: calc(2* var(--sizew));
    justify-content: center;
    background-color: var(--minilighttone);
}

#cb-contact .cb-contact .fs-pidpys {
    display: block;
    width: 100%;
    position: relative;
}

#cb-contact .cb-contact .fs-pidpys p {
    display: table;
    margin: 0px auto;
}

#cb-contact .cb-contact button.fz-phone,
#cb-contact .cb-contact button.fz-phone:hover,
#cb-contact .cb-contact button.fz-viber,
#cb-contact .cb-contact button.fz-viber:hover,
#cb-contact .cb-contact button.fz-whatsapp,
#cb-contact .cb-contact button.fz-whatsapp:hover,
#cb-contact .cb-contact button.fz-telegram,
#cb-contact .cb-contact button.fz-telegram:hover,
#cb-contact .cb-contact button.fz-tiktok,
#cb-contact .cb-contact button.fz-tiktok:hover,
#cb-contact .cb-contact button.fz-insta,
#cb-contact .cb-contact button.fz-insta:hover {
   background-size: calc(var(--otstup) / 1), auto;
   background-position: center left calc(var(--otstup) / 1), center;
   flex: 1;
}

.cont-map {
    border-radius: calc(2* var(--sizew));
    overflow: hidden;
    display: block;
    position: relative;
    flex: 1;
    border: 2px solid var(--lighttone);
}

.cont-map iframe {
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-left: -2px;
    margin-top: -2px;
    border: none !important;
}

@media only screen and (max-width: 1239px) {
#cb-contact .cb-contact button.fz-phone,
#cb-contact .cb-contact button.fz-phone:hover,
#cb-contact .cb-contact button.fz-viber,
#cb-contact .cb-contact button.fz-viber:hover,
#cb-contact .cb-contact button.fz-whatsapp,
#cb-contact .cb-contact button.fz-whatsapp:hover,
#cb-contact .cb-contact button.fz-telegram,
#cb-contact .cb-contact button.fz-telegram:hover,
#cb-contact .cb-contact button.fz-tiktok,
#cb-contact .cb-contact button.fz-tiktok:hover,
#cb-contact .cb-contact button.fz-insta,
#cb-contact .cb-contact button.fz-insta:hover {
   background-size: calc(var(--otstup) / 1.5), auto;
   background-position: center left calc(var(--otstup) / 1.5), center;
   flex: 1;
}
}

@media only screen and (max-width: 1023px) {

   #cb-contact {
      width: calc(100% +(calc(2* var(--sizew))));
      padding-top: calc(2* var(--sizew));
   }

#cb-contact .cb-contact {
    padding: 0;
}

   #cb-contact .cb-contact button.fz-phone,
#cb-contact .cb-contact button.fz-phone:hover,
#cb-contact .cb-contact button.fz-viber,
#cb-contact .cb-contact button.fz-viber:hover,
#cb-contact .cb-contact button.fz-whatsapp,
#cb-contact .cb-contact button.fz-whatsapp:hover,
#cb-contact .cb-contact button.fz-telegram,
#cb-contact .cb-contact button.fz-telegram:hover,
#cb-contact .cb-contact button.fz-tiktok,
#cb-contact .cb-contact button.fz-tiktok:hover,
#cb-contact .cb-contact button.fz-insta,
#cb-contact .cb-contact button.fz-insta:hover {
   background-size: calc(var(--otstup) / 1), auto;
   background-position: center left calc(var(--otstup) / 1), center;
   flex: 100%;
}
   #cb-contact .cb-contact .cont-bl {
    flex: 1;
}

}

@media only screen and (max-width: 699px) {

   #cb-contact .cb-contact {
          flex-wrap: wrap;
   }

   #cb-contact .cb-contact .cont-bl {
    flex: 100%;
}

   #cb-contact .cb-contact .cont-map {
    height: 300px;
}

}