html{height:100%;margin:0;padding:0;scroll-behavior: smooth;}
body{height:100%;color:#000;margin:0px;padding:0px;width: 100%;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;
vertical-align: baseline;background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
:focus {outline: 0;}ins {text-decoration: none;}
del{text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}

/* ���� ��� ��������� (�������� iOS) */
body.lock-scroll {
  position: fixed;
  width: 100%;
}

/* ===== ��������� ===== */
:root {
  --start-size: 0px;
}

body,p,h1,h2,h3,h4,h5,h6,a{font-size: clamp(19px, 3vw, 26px);font-weight: 400;}


/* Thin */
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-thinitalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

/* ExtraLight */
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-extralight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-extralightitalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

/* Light */
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-lightitalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

/* Regular */
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* Medium */
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-mediumitalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

/* SemiBold */
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-semibolditalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-bolditalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* ExtraBold */
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-extrabold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-extrabolditalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

/* Black */
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Ysabeau Infant';
  src: url('/fonts/ysabeau_infant/ysabeauinfant-blackitalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}
body {
    font-display: swap;
  font-family: 'Ysabeau Infant', sans-serif;
}


h1 {
  font-weight: 900; /* Black */
}

h2 {
  font-weight: 800; /* ExtraBold */
}

h3 {
  font-weight: 700; /* Bold */
}

p {
  font-weight: 400; /* Regular */
}

.light-text {
  font-weight: 300; /* Light */
}

/* ******************************************************************************************* **/










.preloader{z-index: 1000;}
/* ===== ��������� ===== */
#preloader {
  position: fixed;
  inset: 0;
  background: #7c7a7b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease;
}

/* ===== ����� ===== */
.blob-wrap {
  position: relative;
  width: var(--start-size);
  height: var(--start-size);

  /* ? ������� ���� */
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1),
              height 1.5s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: width, height;
}

.blob {
  position: absolute;
  inset: 0;

  transform-origin: center;

  opacity: 0.9;
  mix-blend-mode: screen;

  will-change: transform, border-radius;
  backface-visibility: hidden;
}

/* ===== ������� ����� ===== */
@keyframes morphBase {
  0%,100% { border-radius: 48% 52% 55% 45% / 45% 50% 55% 50%; }
  50%     { border-radius: 55% 45% 45% 55% / 55% 45% 50% 45%; }
}

/* ===== LAYER 1 ===== */
.layer1 {
  z-index: 2;
}

/* ��������� ��������������� */
.scale-layer {
  width: 100%;
  height: 100%;
  transform-origin: center;
}

/* ���������� �������� */
.layer1-inner {
  width: 100%;
  height: 100%;
  background: #BBC2BD;
  opacity: 1;
  filter: blur(1px);

  animation:
    morphBase 6s ease-in-out infinite,
    floatSoft1 8s ease-in-out infinite;
}

/* ===== LAYER 2 ===== */
.layer2 {
  z-index: 1;
  filter: blur(2px);
  opacity: 0.7;

  background: #fff;
  transform: scale(1.05);

  animation:
    morphBase 9s ease-in-out infinite,
    floatSoft2 8.5s ease-in-out infinite;
}

/* ===== LAYER 3 ===== */
.layer3 {
  z-index: 1;
  filter: blur(3px);
  opacity: 0.8;

  background: #fff;
  transform: scale(0.95);

  animation:
    morphBase 5.8s ease-in-out infinite,
    floatSoft3 7.8s ease-in-out infinite;
}

/* ===== �������� ===== */
@keyframes floatSoft1 {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(4px, -6px); }
}

@keyframes floatSoft2 {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(-6px, 2px); }
}

@keyframes floatSoft3 {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(2px, 9px); }
}

/* ===== ����� ���������� ===== */
.expand {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ���������� �� �������� ������� */
.expand .blob-wrap {
  width: 150px;
  height: 150px;
}

/* ===== FULLSCREEN (������ layer1) ===== */
.expand.fullscreen .layer1 .scale-layer {
  transform: scale(20);
  transition: transform 2.5s ease;
}

/* ��������� ���� �������� */
.layer2,
.layer3 {
  z-index: 1;
}

/* ===== ������������ ===== */
.fade {
  opacity: 0;
}

/* ===== ���� ===== */
.logo {
  position: fixed;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
  transform-origin: center;

  width: 180px;
  height: 180px;

  pointer-events: none;
  z-index: 10;
}

.logo img{width: 100%; 
  opacity: 0;
  transition: opacity 0.6s ease;
  width: 180px;
  height: 180px;
}
.logo svg {
  width: 100%;
  height: 100%;
}


.logo_2{position: absolute;
  z-index: 12;}
 


.logo_cont_s1{margin-bottom: 15px;}
.logo_cont_s1 img{
  transition: opacity 0.6s ease;
  width: 100px;
  height: 100px;
}

.logo_footer_s1{margin-bottom: 15px;margin-left: 7px;}
.logo_footer_s1 img {
  transition: opacity 0.6s ease;
  width: 90px;
  height: 90px;
}

.expand.fullscreen .logo {
  transform: translate(-50%, -50%) scale(1) !important;
}

.logo path {
  fill: none;
  stroke-width: 11;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  will-change: stroke-dashoffset;
}

svg {
  shape-rendering: geometricPrecision;
}

/* ===== �������� ===== */
#progress {
  position: absolute;
  bottom: 40px;
  font-size: 20px;
  color: #ccc;
  /* font-family: Arial, sans-serif; */
  opacity: 0.5;
}
 

/* ===== ������� ===== */
.test-images img {
  width: 100%;
}


.footer_loading {
  position: absolute;
  bottom: 16px;
  font-size: 15px;
  color: #ccc;
  /*  */
}
.footer_loading b {}
.footer_loading i{}
.footer_loading div{}
.footer_loading a{}


.error {
  border: 2px solid #d00 !important;
}