@import url('fonts.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    
}



:root {
    --index: calc(1vw + 1vh);
    --indexp: calc(1% + 1%);
    --transition: 1.5s cubic-bezier(0.05, 0.5, 0, 1);
    --car-gap: 600px;
}

html { font-size: 16px;
 }

body{
    background-color: rgb(31, 31, 31);
    font-size: .833vw;
    background: #e7eafa;
   
}

h1{
  font-size: max(14px, calc(var(--index) * 2.6));
  font-family: Ppneuemontreal, Arial, sans-serif;
  font-weight: 500;
  line-height: .9;
}

h2{
    color: #ff7b00;
    letter-spacing: -.03em;
    text-transform: uppercase;
    font-family: Ppneuemontreal, Arial, sans-serif;
    font-size: max(16px, 1.25em);
    font-weight: 500;
}

h3{
    font-family: Ppneuemontreal, Arial, sans-serif;
    /* font-size: max(14px, calc(var(--index) * 4.6)); */
    font-size: max(48px, 5em);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 0.8em;
}

h4{
    font-family: Ppneuemontreal, Arial, sans-serif; 
    font-size: max(20px, 2em);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1em;
}

h5{
    font-family: Ppneuemontreal, Arial, sans-serif; 
    font-size: max(14px, 1em);
    font-weight: 200;
    letter-spacing: -0.03em;
    line-height: 1em;
    color: #b3b3b3;
}



p{
    /* color: #747373; */
    font-family: Ppneuemontreal, Arial, sans-serif;
    font-size: max(15px, 1.25em);
    font-weight: 500;
    line-height: 140%;
    text-wrap: pretty;
    
}


.p2{    
    font-family: Ppneuemontreal, Arial, sans-serif;
    font-weight: 500;
    line-height: 1;
    text-wrap: pretty;    
}


@media (max-width: 1100px) {
  :root { --car-gap: 480px; }
}

@media (max-width: 760px) {
  :root { --car-gap: 360px; }
}

@media (min-width: 1600px) {
  :root { --car-gap: 700px; }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #e7eafa;
}


.padding-2{
  padding:  2.5em 6.5em 2.5em 6.5em;
}

.pos_Rel{
  position: relative;
}

.pos_Abs{
  position: absolute;
}

.over_hid{
  overflow: hidden;
}


.flx{
  display: flex;
}

.dir_col{
  flex-direction: column;

}







/* ==========================================================================
   POSITIONING (Позиционирование)
   ========================================================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Быстрое зануление координат для absolute/fixed */
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* ==========================================================================
   DISPLAY & OVERFLOW (Отображение и видимость)
   ========================================================================== */
.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-clip { overflow-x: clip; }

/* ==========================================================================
   FLEXBOX (Гибкая верстка)
   ========================================================================== */
.d-flex       { display: flex; }
.d-inline-flex { display: inline-flex; }

/* Направление осей */
.flex-row    { flex-direction: row; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }

/* Выравнивание по главной оси (ось X по умолчанию) */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

/* Выравнивание по поперечной оси (ось Y по умолчанию) */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }
.align-self-end {align-self: end; }

/* Поведение элементов внутри флекса */
.flex-1 { flex: 1 1 0%; }
.flex-grow   { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }

/* ==========================================================================
   GRID (Сеточные утилиты)
   ========================================================================== */
.d-grid { display: grid; }

/* Быстрые сетки на 2, 3 и 4 колонки */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   GAPS (Отступы между элементами во Flex/Grid)
   ========================================================================== */
.gap-1 { gap: 0.25rem; } /* 4px */
.gap-2 { gap: 0.5rem; }  /* 8px */
.gap-3 { gap: 1rem; }    /* 16px */
.gap-4 { gap: 1.5rem; }  /* 24px */
.gap-5 { gap: 2rem; }    /* 32px */

/* ==========================================================================
   TEXT UTILITIES (Типографика)
   ========================================================================== */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }

/* Быстрое скрытие длинного текста в троеточие */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   SIZES & CONTAINERS (Размеры и обертки)
   ========================================================================== */
.w-full  { width: 100%; }
.h-full  { height: 100%; }

/* Тот самый базовый контейнер из вашего примера */
.container-main {
  width: 100%;
  padding: 2.5em;
}

/* выравнивание */

.margin-center{
  margin: 0 auto;
}


/* .................кнопка+свг......................................................... */

.btn_svg {
 padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  /* Flexbox-сетка */
  display: inline-flex;
  align-items: center;
  
  /* Прозрачный гэп между блоками */
  gap: 4px; 
}

.btn__text{
    /* background-color: #007bff;  */
    color: #a7aeb6;
    padding: 10px 20px;
    border-radius: 8px 0 0 8px;
    font-family: Ppneuemontreal, Arial, sans-serif;
    font-size: 16px;
}


/* Запрещаем иконке деформироваться, если текст кнопки длинный */
.btn__icon-wrapper{
  background-color: #000000; /* Более темный синий фон для иконки */
  color: #ffffff;
  padding: 1em;
  border-radius: 2em 2em 2em 2em; /* Скругление только справа */
  
  /* Центрируем SVG внутри обертки */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* .................animation......................................................... */

/* Анимация вращения свг */
.rotating-icon {
  animation: rotate-animation 10s linear infinite;
  transform-origin: center; /* Вращение строго вокруг центра */
}

@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}



.element {
  transform: scale(0.8);
  opacity: 0;
  transition: transform 1.6s ease-out, opacity 1.6s ease-out;
}

/* Класс, который добавит JavaScript при скролле */
.element.active {
  transform: scale(1.0);
  opacity: 1;
}

/* --- Эффект 2: Появление слева --- */
.anim-slide-left {
  transform: translateX(-2em); /* Смещен влево */
  opacity: 0;
  transition: transform 1.3s ease-out, opacity 1.1s ease-out;
}
.anim-slide-left.active {
  transform: translateX(0); /* Возвращается на место */
  opacity: 1;
}

/* --- Эффект 3: Появление справа --- */
.anim-slide-right {
  transform: translateX(3em); /* Смещен вправо */
  opacity: 0;
  transition: transform 1.3s ease-out, opacity 2.1s ease-out;
}
.anim-slide-right.active {
  transform: translateX(0);
  opacity: 1;
}


/* --- Эффект 3: top --- */
.anim-slide-top {
  transform: translateY(1.5em); /* Смещен вправо */
  opacity: 0;
  transition: transform 1.3s ease-out, opacity 2.5s ease-out;
}
.anim-slide-top.active {
  transform: translateY(0);
  opacity: 1;
}



/* .................BASE......................................................... */
.gradient--text{
  background-image: linear-gradient(45deg, #535251 0%, #4a4848 46%, #2b323b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* для совместимости с современными браузерами */
}

.Bg_color{
  background: #e7eafa;
}


.Gradient_hard{
  background: linear-gradient(359deg, #080605 50%, #fbfbfb 50%);
}

.PosRelative{
  position: relative;
}

.Img--bg{
  background-repeat: no-repeat;  /* Картинка не будет циклично повторяться */
  background-position: center;   /* Центрируем изображение по вертикали и горизонтали */

  /* background-size: contain;   */
 /* картинка вставлется целиком без обрезок */

  background-size: cover;     
  /* картинка заполняет весь контейнер */
}




.mar--bott2{
  margin-bottom: 2em;
}

.ov_hidden{
  overflow: hidden;
}

.pad--1{
  padding: 1em;
}


.img_base{
    position: absolute;
    height: auto;
    object-fit: contain;
    top: 50%;
    left: 50%;
    
}

.img--we_tr{
  transform: translate(-22%, -38%);
  width: 74em;
}

.flex--column{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.Flex--column1{
  display: flex;
  flex-direction: column;

}

.btn {
  background-color: #101111;
  color: #ffffff;
  padding: 1em 2em;
  font-size: 16px;
  font-family: Ppneuemontreal, Arial, sans-serif;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: 12em;
}

.btn:hover {
  background-color: #ec6c17;

}

.btn:active {
  background-color: #ff9137;
}



.FB--rowSB{
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}

.FB--colSA{
  justify-content: space-around;
  flex-direction: column;
}

.flex_row{
  display: flex;
  gap: 13em;
}

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

.flx_btwn{
  display: flex;
  justify-content: space-between;
}


/* ..................Меню..................................... */



/* .................Header01......................................................... */

/* анимация фонового градиента */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.header01{
  
  /* background-color: #e8e8e8; */
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  height: clamp(700px, 100svh, 1180px);
  position: relative;
  overflow: hidden;
 
  container-type: inline-size;

 /* анимация фонового градиента */
  background: linear-gradient(-45deg, #e9ebf8, #dfe0ef, #d9def2, #d8ddee);
  background-size: 400% 400%;


  animation: gradientAnimation 15s ease infinite;
}


.Header_tittle-wrapper{
  height: 59%;
}


.distributor{
    background: #e7eafa;
    padding: 1.5em 31.5em 2.5em 2.5em;
    border-radius: 2em 0em 0em 0em;
    bottom: 0;
    color: #302f2f;
    z-index: 5;
    right: 0;
    
}

.Header_content{
  margin-top: 14em;
}

.H--style{
  margin-left: -0.07em;
  font-size: 13.2cqi;
  margin-top: .5em;
}

.H--style_second{
  margin-left: -0.07em;
  color: #e66b1f;
  font-size: 5.1cqi;
  font-weight: 800;
}

.text--style3{
  width: 16em;
  margin-left: 2em;
}

.bg--style{
  background: linear-gradient(2deg, rgb(255 255 255), rgb(232 232 232), rgb(232 232 232));
}


.flex-imageH{
  position: absolute;
  height: auto;
  object-fit: contain;
  top: 50%;
  left: 50%;


}

.CRYO--img_first{
  width: 66em;
  z-index: 3;
  transform: translate(-22%, -28%);
}

.CRYO--img_second{
  width: 65em;
  transform: translate(-66%, -31%);
}




/* .................CArds 1......................................................... */


.h4--style{
  margin-top: auto;
  margin-bottom: 1em;
}

.gap--style{
  gap: 1em;
}

.cards__content-bg{
   background-color: #e2e2e2;
}

.cards--style01{
  overflow: hidden;
  display: flex;
  padding: 2em;
  width: 64%;
  height: 44em;
  flex-direction: column;
}

.cards--style02{
  display: flex;
  flex-direction: column;
  padding: 2em;
  width: 35%;
  height: 44em;
  /* min-width: 400px; */
  background-image: url('../img/bgclock.jpg');
 
}




.flex-imageCards{
  position: absolute;
  width: calc(var(--indexp) * 35.6);
  height: auto;
  object-fit: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
}

.text--style1{
  width: 56%;
}


.img--we_tr__C{
  transform: translate(-50%, -110%);
  width: 6em;
}


/* .................showcase......................................................... */
.prod__wrapper{
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.product{
  justify-content: space-between;
  background: #eeeeee;
  width: 32.7%;


}

.price{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.buy{
    background: #000000;
    border-radius: 3em;
    width: 3em;
    padding: 0.3em; 
}

/* .................DELIVERY......................................................... */

.delivery_wrapper{
  height: 50em;
}

.p2--order{
  font-size: max(20px, 2em);
  color: #101111;
}

.order--H{
  font-size: 17cqi;
  margin-left: -0.08em;
}

.h4--style2{
 margin-top: 2em;
 margin-bottom: 1em;
}

.img--we_tr__Delivery{
  transform: translate(-43%, -56%);
  width: calc(var(--indexp) * 28.6);

}

/* .................TEXT......................................................... */
.text_content{
  width: 49%;
}

.Text{
 padding: 4.5em 6.5em 2.5em 6.5em;
}

.orange_text{
  color: #e66b1f;
}

.text-wrapper{
  width: 100%;
  margin-top: auto;
}

.text-container {
  overflow: hidden; /* Прячет текст, пока он "под линией" */
  display: inline-block; /* Чтобы контейнер подстраивался под размер текста */
}

.reveal-text {
  margin: 0;
  font-size: 4rem;
  transform: translateY(100%); /* Изначально полностью опущен и невидим */
}


/* .................Item......................................................... */

.item{
  height: 77vh;
  display: flex;
}

.h3--Item{
  font-size: max(31px, 2em);
  margin-bottom: 1em;
}

.text--border{
  border: 1px solid rgb(255 255 255);
  background: #f8fcff;
}

.addition--st{
  border-top: 1px solid rgb(196 195 195 / 69%);
  color: #686464;
}

.text--item{
  border-left: 1px solid rgb(189 189 189);
  width: 61em;
}

.text--item_width{
  width: 18em;
  justify-content: space-between;
}

.p--item{
  border-top: 1px solid rgb(196 195 195 / 69%);
  color: #747373;
}

.pad--1{
  padding: 1em;
}



/* .................STORY......................................................... */

.sticky{
  position: sticky;
  top: 5em;
  height: fit-content;
}


.story{
  padding: 6.5em;
}



/* .................Product........................................................ */



.product_cryo_item{
  background-color: rgb(241 242 255);
  /* background: linear-gradient(-360deg, #000000 43%, #f1f2ff 41%); */
  width: 71%;
  height: 50em;

}

.product-bg{
    position: absolute;
    transform: translate(-50%, -64%);
    top: 50%;
    left: 50%;
    width: 32em;
    object-fit: cover;
    z-index: 1;
}

.btn_product_padding{
 
  padding: 2em 0em 0em 0em;
}



/* .................SERCICES......................................................... */
.Services_item{
    /* background: rgba(231, 237, 244, 1); */
    
    
    background: rgb(34 33 33);
    padding: 2.5em;
    color: #eae9e9;
    width: 40%;
    margin: 0 auto;
    /* border-radius: 2em; */
    height: 22em;
    /* background-image: url(../img/Service.png); */
  
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    /* background-size: contain; */
    /* background-size: cover; */
    /* background-size: 80% auto;  */

}

.st-wrapper{
  position: sticky;
    top: 5em;
}

.img-service-bg{
  transform: translate(-50%, 3%);
    width: 100vw;
}



.s_item--first{
  margin-right: 0;
}

.s_item--second{
  margin-right: 42.4em;
}

.Service_content-text{
  width: 32em;
}

.Service_content-text_nd{
  width: 21em;
}

/* .Services_item{
  position: sticky;
    top: 5em;
    margin-bottom: 5em;
} */

.Services_bg-tittle-wrapper{
 position: sticky;
 top: 5em;
 margin-bottom: 39em;
}

.Services_bg-tittle{
  text-align: start;
    font-size: 13cqi;
    position: absolute;
    margin-top: 0.2em;
}


/* .................tradein......................................................... */
.tradein{
  /* height: 140vh; */
  /* background: #080808; */
  overflow: clip;
  background: linear-gradient(296deg, #c94d2d 27%, #080808 42%);
      border-radius: 74em;
}

.img-trade__in-01{
  /* transform: translate(-119%, -46%); */
  transform: translate(-50%, -58%);
  width: 100vw;
}

.img-trade__in-02{
   /* transform: translate(17%, -50%); */
   transform: translate(-40%, -92%);
    width: 59em;
}

.metod_tittle__wrapper{
  position: sticky;
  top: 16em;
  
}

.mar_number{
  margin-left: -.09em;
}

.z-in6{
  z-index: 6;
}



.tradein_tittle{
    font-size: 18em;
     z-index: 1;
  
   color: aliceblue;
}

.tradein_content-text{
    width: 21.4em;
    text-align: start;

    text-wrap: pretty;
    color: aliceblue;
}

.tradein__sticky-wrapper{
   position: sticky;
   /* top: 50em; */
   top: 78%;
   z-index: 2;
   margin-bottom: 11em;
}

.tradein__icon{
  margin-bottom: 3em;
}

.sticky_mounts{

    margin-bottom: 50%;
}

.neuron_margin{
  margin-top: -11em;
  margin-bottom: 23em;
}

.metod_margin{
  margin-top: -33%;
    margin-bottom: 50%;
}

.scroll_gap_first{
  margin-bottom: 51%;
    margin-top: 42%;
}

.button_metod-wrapper{
  margin-bottom: 6em;
}


.btn--metod{
  padding: 3em 6em;
  border-radius: 7em;
  width: 20%;
}

/* .................text Slider ......................................................... */
.Text_slider{
  padding-top: 12em;
  padding-inline: 6.5em;
}

.Slider_tittle{
  font-size: 6em;
    color: #000000;
    line-height: .8em;
}

.Slider_text_content{
  font-size: max(15px, 3.25em);
    width: 19em;
   
    font-weight: 100;
}

/* .................Slider ResizeObserver......................................................... */

.img-slider-bg{
  transform: translate(-50%, -91%);
    width: 100vw;
    z-index: -1;
}


/* ============================================================
   SLIDER CONTAINER
   ============================================================ */

.slider-container {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}


/* ============================================================
   SLIDER TRACK
   ============================================================ */

.slider-track {
    overflow: hidden;
    width: 100%;

    padding: 6.5em 0.5em 2.5em 6.5em;

    user-select: none;
    cursor: grab;

    /*
       Горизонтальный свайп обрабатывает слайдер.
       Вертикальный свайп остаётся браузеру,
       поэтому страницу можно нормально скроллить.
    */
    touch-action: pan-y;
}

.slider-track:active {
    cursor: grabbing;
}


/* ============================================================
   SLIDER LIST
   ============================================================ */

.slider-list {
    display: flex;
    gap: 3.5em;

    will-change: transform;
}


/*
   Плавное перелистывание
*/
.slider-list.animated {
    transition: transform 0.4s ease-out;
}


/* ============================================================
   CARDS
   ============================================================ */

.card_sl {
    /*
       Именно здесь остаётся твой адаптивный размер.
       20em зависит от body font-size: .833vw
    */
    flex: 0 0 9em;
    height: 21em;
    /* background-color: #3498db; */
    color: #000000;
    display: flex;
    align-items: end;
    justify-content: start;
    font-size: 2em;
    border-radius: 0.5em;

}

.card_sl__tittle{

  font-size: max(20px, .8em);;
}


.card_sl_content-text{
  width: 16.4em;
    text-align: start;
    /* margin-bottom: 2em; */
    text-wrap: pretty;
    font-size: max(15px, .52em);
}


.card_text{
  height: 3em;
}


/* ============================================================
   CONTROLS
   ============================================================ */

.slider-controls {
    margin: 1.5em 6.5em 0em 6.5em;

    
    gap: 1em;
}

button {

    background: #000000;
    border: none;
    padding: 1.1em 1.1em; 
    cursor: pointer;
}

.arrow{
  width: 4em;
  height: 3em;
}




.card_sl-bg{
  position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 8em;
    object-fit: cover;
    z-index: 1;
    

}





/* .................scroll-space......................................................... */

.scroll-space {
  height: 300dvh; 
  view-timeline-name: --section-scroll;
}

/* Фиксируем контейнер на экране во время скролла */
.sticky-box {
 position: sticky;
  /* Центрируем блок по вертикали */
  top: calc(50vh - (42em / 2));
  
  /* Высота контейнера теперь должна быть равна высоте карточки, а не 100vh */
  height: 42em;
  overflow: hidden;
  width: 100%;
}

/* Длинная лента с карточками */
.cards-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  width: max-content; /* Ширина по размеру всех карточек */
  height: 100%;
  align-items: center;
  
  /* Привязываем анимацию к прокрутке родителя */
  animation: move-cards linear both;
  animation-timeline: --section-scroll;
  animation-range: contain 0% contain 100%;
}

.card {
  width: 53em;
    height: 32em;
    background: #e7ebf5;
    border-radius: 2em;

    background-image: url(../img/Service.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% auto;
  
}

/* Анимация: двигаем ленту влево на всю её длину за вычетом ширины экрана */
@keyframes move-cards {
  to {
    transform: translateX(calc(-100% + 100vw));
  }
}



/* ......................................Аккордеон.................. */

.accordion {
    width: 50em;
}


.accordion-item {
    border-bottom: 1px solid #ddd;
}


.accordion-header {
  width: 100%;
    padding: 1.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.2em;
    text-align: left;
    background: #000000;
    color: aliceblue;
}

.Fact{
  width: 58em;
}


.accordion-icon {
    font-size: 1.5em;

    transition:
        transform 0.3s ease;
}


/* ============================================================
   CONTENT
   ============================================================ */

.accordion-content {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.4s ease;
}


.accordion-content-inner {
    overflow: hidden;
}


.accordion-content-inner p {
    margin: 0;
    padding: 1em 2em 3em 2em;
    background: #282727;
    line-height: 2em;
    color: #c8c8c8;
    font-weight: 100;
}


/* ============================================================
   OPEN
   ============================================================ */

.accordion-item.active
.accordion-content {
    grid-template-rows: 1fr;
}


.accordion-item.active
.accordion-icon {
    transform: rotate(45deg);
}






/* .................ABOUT......................................................... */
.h3--style{
  margin-bottom: 1em;
}

.text--style2{
  width: 22em;
}



/* .................TEXt1......................................................... */
.headline{
  width: max(600px, 45%);
  align-self: center;
}

.left_content{
  width: max(400px, 40%);
  align-self: center;
}


/* .................TEXt2......................................................... */
.headline__t2{
  width: max(600px, 45%);

}

.left_content__t2{
  width: max(400px, 40%);

}

.text--style{
  margin-top: 3em;
  width: 30em;
  
}

/* .................STORY STICKY......................................................... */

.Fact{
  display: flex;
  gap: 2em;
}

.sticky{
  width: 25em;
}

.story_wrapper {
  gap: 5em;
}


.h-facts{
  font-size: max(48px, 10em);
}

/* .................Cards......................................................... */

.cards{
padding: 2.5em 2.5em 2.5em 2.5em;
overflow: hidden;
}

.CardsFL{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  
}

.cards__content{
  width: 50%;
  min-width: 400px;
  height: 30em;
  background-color: #e2e2e2;
}

.facts_item {
  width: 48em;
  gap: 5em;
  align-self: end;

  position: sticky;
  top: 10em;
  height: fit-content;
  background: #fbfbfb;
}


/* .................Cards2......................................................... */

.flex-image{
  position: absolute;
    width: calc(var(--indexp) * 38.6);
    height: auto;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* .................HEADER......................................................... */

.container{
  padding: 7.5em 2.5em 2.5em 2.5em;
  /* height: max(700px, 100svh); */
  /* max-height: 1080px; */
  height: clamp(700px, 100svh, 1080px);
  position: relative;
 
  display: flex;

 
  overflow: hidden;

}

.bg--style{
  
    background-color: #d5d5d5;
}

.Cont--flex{
  justify-content: start;
}

.flexrow{
  display: flex;
  justify-content: space-between;
}

.flexrow--margin{
  margin-bottom: 2em;
  margin-top: 5em;
}

.Child__Flex{
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.text__content{
  
  margin-top: 2em;
}





img { user-select: none; -webkit-user-drag: none; }
/* .......................................................................... */
.Sec01 {
    background-color: #e8e8e8;
    flex-flow: column;
    justify-content: space-between;
    width: 100%;
    height: max(700px, 100svh);
    position: relative;
    overflow: hidden;
    padding: 2.5em 2.5em 0 0;
    display: flex;
  }

  .Heading{
    color: #101010;
    letter-spacing: -.02em;
    width: 10em;
    margin-left: .4em;
    font-family: Ppneuemontreal, Arial, sans-serif;
    font-size: 6.25em;
    font-weight: 500;
    line-height: .9;
  }

  .titleH{
    color: #101010;
    text-align: center;
    width: 29.5em;
    margin-left: auto;
    margin-right: auto;
    font-family: Ppneuemontreal, Arial, sans-serif;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1;
    position: absolute;
    inset: auto 0% 2.5em;
  }

  .w__fl__st{
    display: flex;
    gap: 2em;
    background-color: #ffffff;
    width: 25em;
    height: 8em;  
    align-items: center;
    justify-content: space-between;
    padding: 2.5em 2.5em;
  }


  .Scrl__to{
     color: #101010;
    letter-spacing: -.03em;
    text-transform: uppercase;
    font-family: Ppneuemontreal, Arial, sans-serif;
    font-size: 1.25em;
    font-weight: 500;
  }

 


  /* .......................................................................... */

/* ---- Slider shell ---- */
.slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #efefef 0%, #d3d3d3 55%, #d0d1d0 100%);
  font-family: 'Manrope', sans-serif;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.slider.dragging { cursor: grabbing; }

.glow {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 1180px;
  height: 560px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 52% 60% at center, rgba(34,86,170,0.05) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
  z-index: 1;
}

/* ---- Header ---- */
.header {
  position: absolute;
  top: 74px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 80;
}
.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(22,24,28,0.42);
  margin-bottom: 14px;
}
.title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 42px;
  letter-spacing: -1px;
  color: #16181c;
  line-height: 1;
}

/* ---- Counter ---- */
.counter {
  position: absolute;
  top: 84px;
  right: 60px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: rgba(22,24,28,0.32);
  z-index: 80;
  pointer-events: none;
}
.counter-sep { color: rgba(22,24,28,0.18); margin: 0 4px; }

/* ---- Stage / cars ---- */
.stage {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 0;
  height: 0;
  z-index: 10;
}
.car {
  position: absolute;
  left: 0;
  top: 0;
  width: 580px;
  height: 439px;
  will-change: transform, opacity;
}
.car-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.car-frame.active {
  opacity: 1;
}

/* ---- Nav buttons ---- */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(22,24,28,0.1);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 6px 24px rgba(22,24,28,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16181c;
  font-family: inherit;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.nav-btn.prev { left: 52px; }
.nav-btn.next { right: 52px; }
.nav-btn:hover {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 30px rgba(22,24,28,0.12);
  transform: translateY(-50%) scale(1.06);
}

/* ---- Dots ---- */
.dots {
  position: absolute;
  bottom: 54px;
  left: 0;
  right: 0;
  display: flex;
  gap: 9px;
  justify-content: center;
  align-items: center;
  z-index: 80;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(22,24,28,0.16);
  transition: width .35s cubic-bezier(.4,0,.2,1), background .35s ease;
}
.dot.active {
  width: 28px;
  background: #16181c;
}

/* ---- Hint ---- */
.hint {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(22,24,28,0.22);
  z-index: 80;
  pointer-events: none;
}



.head1{
    /* top: 0;
    left: 0; */


    height: 90vh;
    /* height: 90vh; */
    min-height: 650px;
    /* max-height: 2080px; */



    /* min-width: 1000px; */
    /* height: 90vh; */
    background-color: rgb(29, 72, 110);
    overflow: hidden;


}

.Service{
    /* display: flex;
    position: absolute;
    bottom: calc(var(--index) * 3);
    padding: 0px 5%;
    flex-direction: spac;
    justify-content: space-between;
    width: 100%; */
    display: flex;
    position: absolute;
    bottom: calc(var(--index) * 2);
    padding: 67px 4%;
    justify-content: space-between;
    width: 100%;
    /* background-color: #cdcdcd; */
    gap: 0.2vw;
    z-index: 11;
    /* flex-direction: column; */
    align-items: end;
}

.bg__Service{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    min-height: 700px;
    border-radius: 3em;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
}

.tittle70 {
    /* margin-left: 15vw; */
    /* padding-top: 32vh; */
    /* margin-bottom: 2rem; */
   

    color: rgb(255 255 255 / 81%);
    font: calc(var(--index) * 0.6) sans-serif;
    z-index: 6;
    width: 25%;
    background-color: #c7c7c736;
    padding: 2vh 2vw;
    height: 16vh;
    border-radius: 6px;
    border: 1px solid rgb(194 197 196 / 26%);
    backdrop-filter: blur(65px);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.content{
    width: 100%;
    
   
    text-align: center;
    position: absolute;
    z-index: 2;
    
    /* margin-left: 5vw;
    margin-right: 5vw; */
    
    top: 35%;


    @media (max-height: 575px) {
        top: 170px;

    }

    
}

.tittle {
    font-size: 84px;
    
   
   color: aliceblue;
   font: calc(var(--index)*5) sans-serif;
  


    


}

.bg {
    

    /* ----------- Благодаря этим значениям картинка будет заполнять всю высоту и всю ширину------------- */
    width: 100%;
    height: 100%;
    /* ------------------------------------ А благодаря этому значению она будет масштабироваться пропорционально  */
    object-fit: cover;
    
    position: relative;
    z-index: 1;
    
}

.text{
    text-align: center;
    color: aliceblue;
    font-weight: 100;
    padding-top: 5vh;

    
    
    
}

.head2{
  
    /* min-width: 1000px; */
    /* width: 1421px; */
    /* height: 90vh; */
    background-color: #dcdcde;
    overflow: hidden;
    /* min-height: 850px; */
    position: relative;
    height: max(700px, 120vh);
    
    
}

.textblock{
   
    width: 100%;
    background: #dcdcde;
    
}



.bg2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    min-height: 700px;
    opacity: 30%;
    
}

.bg3 {
    width: 152%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    min-height: 700px;
    opacity: 17%;
     transform: translate(-1%, -7%);
    
}

.link-btn{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: rgb(255 255 255 / 81%);
    font: calc(var(--index) * 0.6) sans-serif;
    z-index: 6;
    width: 25%;
    background-color: #c7c7c71a;
    padding: 2vh 2vw;
    height: 16vh;
    border-radius: 6px;
    border: 1px solid rgb(194 197 196 / 12%);
    backdrop-filter: blur(65px);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    transition: background 1.15s ease-in-out;
}

.link-btn:hover {
  /* background: rgba(255, 255, 255, 0.25); */
   /* background: linear-gradient(175deg, rgb(171 192 158), rgb(106 132 92), rgb(75 88 68)); */
   
   
   background: linear-gradient(167deg, rgb(211, 212, 209), rgb(213, 216, 212), rgb(207, 209, 207));
   color: rgba(0, 0, 0, 0.81);
   
   }

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 28%) 35%, rgb(0 0 0 / 51%) 100%);
  z-index: 1;
  border-radius: 3em;
}

.link-btn .arrow {
  width: 22px;
  /* height: 16px; */
  flex-shrink: 0;
  opacity: 40%;
}


.textcont{
   top: 19%;
   left: 10%;
   position: absolute;
}


.tittle3 {
    /* margin-left: 15vw; */
    
    /* padding-top: 32vh; */
    /* margin-bottom: 2rem; */
    position: absolute;
  top: 0%;              /* Смещение по вертикали на 50% */
  left: 0%;             /* Смещение по горизонтали на 50% */
  transform: translate(-50%, -50%); /* Центрирование текста относительно его середины */
   
    color: aliceblue;
    font: calc(var(--index)*2) sans-serif;
    z-index: 2;
    white-space: nowrap;

    /* @media (min-height: 1150px) {
        padding-top: 32%;
        background-color: aqua;

    } */

}

.text3{
    position: absolute;
    /* top: 50%;              Смещение по вертикали на 50%
    left: 50%;             Смещение по горизонтали на 50% */
    top: calc(var(--index)*-3.5);
    left: 14vw;
    transform: translate(-50%, -50%); /* Центрирование текста относительно его середины */
    color: aliceblue;
    font-weight: 100;
    /* padding-top: 5%; */
    padding-left: 16vw;
    max-width: 33vw;
    z-index: 2;
    font: calc(var(--index)*0.5) sans-serif;
}

.text4{
    position: absolute;
    /* top: 50%;              Смещение по вертикали на 50%
    left: 50%;             Смещение по горизонтали на 50% */
    top: calc(var(--index)*-3.5);
    left: 14vw;
    transform: translate(-50%, -50%); /* Центрирование текста относительно его середины */
    color: aliceblue;
    font-weight: 100;
    /* padding-top: 5%; */
    padding-left: 16vw;
    max-width: 33vw;
    z-index: 2;
    font: calc(var(--index)*0.5) sans-serif;
}


.flex{
    display: flex;
    flex-direction: row;
    width: 100%;
    top: calc(var(--index) * 8);
    /* left: calc(var(--index) * 5); */
    /* background-color: blueviolet; */
    /* transform: translate(-50%, -50%); */
    position: absolute;
    z-index: 3;
    justify-content: space-between;
    padding: 0px 5%;
    /* top: 0;*/
   
}

.flex2{
    display: flex;
    flex-direction: row;
    width: 100%;
    top: calc(var(--index) * 8);
    /* left: calc(var(--index) * 5); */
    /* background-color: blueviolet; */
    /* transform: translate(-50%, -50%); */
    position: absolute;
    z-index: 3;
    justify-content: space-between;
    padding: 0px 5%;
    /* top: 0;*/
    align-items: center;
   
}

.tittle4{
       /* margin-left: 15vw; */
    
    /* padding-top: 32vh; */
    /* margin-bottom: 2rem; */
    /* position: absolute; */
    top: 0%;              /* Смещение по вертикали на 50% */
    left: 0%;             /* Смещение по горизонтали на 50% */
    color: #777777;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: calc(var(--index)*1.6) ;
    
    

    z-index: 2;
    white-space: nowrap;
}

.tittle6{
       /* margin-left: 15vw; */
    
    /* padding-top: 32vh; */
    /* margin-bottom: 2rem; */
    /* position: absolute; */
    top: 0%;              /* Смещение по вертикали на 50% */
    left: 0%;             /* Смещение по горизонтали на 50% */
    color: #dadada;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: calc(var(--index)*1.6) ;
    
    

    z-index: 2;
    white-space: nowrap;
}


.text5{
    top: calc(var(--index)*-3.5);
    color: aliceblue;
    font-weight: 100;
    /* padding-top: 5%; */
    padding-left: 3vw;
    max-width: 33vw;
    z-index: 2;
    font-size: calc(var(--index)*0.5);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    mix-blend-mode: difference;
}

.text6{
    top: calc(var(--index)*-3.5);
    color: rgb(58, 58, 58);
    font-weight: 100;
    /* padding-top: 5%; */
    padding-left: 3vw;
    max-width: 33vw;
    z-index: 2;
    font-size: calc(var(--index)*0.55);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    mix-blend-mode: difference;
}

.Button{
  /* background: linear-gradient(45deg, #2d3c29, #6c7d68); */
   
    padding: 2vh 3vw;
    /* width: 100px; */
    /* height: 50px; */
    /* position: relative; */
    z-index: 30;
    left: 5vw;
    display: flex;
    z-index: 65;
    position: absolute;
    bottom: calc(var(--index) * 18);
    padding: 0.4vh 0.2vw;
    background: linear-gradient(359deg, rgb(176 195 181), rgb(169 169 169 / 32%), rgb(222 225 218), rgb(195 177 177 / 64%), rgb(163 187 174));
    opacity: 100%;
    border-radius: 2em;
    box-shadow: 0px 4px 6px 0px rgb(120 128 147 / 54%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:  bottom .25s ease, box-shadow .25s ease, background .15s ease;

  
}



/* Изменяем прозрачность стекла при наведении */
.Button:hover {
  /* background: rgba(255, 255, 255, 0.25); */
   background: linear-gradient(181deg, rgb(170 183 179), rgb(255 255 255 / 32%), rgb(222 225 218), rgb(195 177 177 / 64%), rgb(211, 206, 206));
   bottom: calc(var(--index) * 18.1);
   box-shadow: -1px 12px 20px 0px rgb(147 151 159 / 54%);

}





.Backg{
background: linear-gradient(45deg, #dbd8d1, #b7bec1);
}

.info{
    padding-top: 1vh;
}

.logo{
    height: calc(var(--index)*2.5);
    margin-top: 1vh;
}

.name{
    margin-right: calc(var(--indexp) * 18.6);
}

.infocontent{
    display: flex;
    flex-direction: row;
}

.anim{
    width: 5vw;
}

#rabbit {
  width: 300px;
  height: 300px;
  transition: transform 0.3s;
  position: absolute;
  top: 0;
  z-index: 9;
}

.carRR{
    position: absolute;
    width: calc(var(--index) * 54.6);
    /* height: 90%; */
    /* transform: translate(-118%, 18%); */
    right: 0;
    bottom: 0;
    object-fit: cover;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-42%, -31%);
}

.carRR2{
  position: absolute;
    width: calc(var(--index) * 33.6);
    /* height: 90%; */
    /* transform: translate(-118%, 18%); */
    right: 0;
    bottom: 0;
    object-fit: cover;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-22%, -26%);
}

.ArroIcon{
      position: absolute;
    /* height: 90%; */
    /* transform: translate(-118%, 18%); */
    right: 0;
    bottom: 0;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-38%, -49%);
    z-index: 4;
    width: calc(var(--index) * 20.6);
    opacity: 80%;

}

.ArroIcon2{
      position: absolute;
    /* height: 90%; */
    /* transform: translate(-118%, 18%); */
    right: 0;
    bottom: 0;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-13%, -44%);
    z-index: 4;
    width: calc(var(--index) * 28.6);
    opacity: 80%;

}


/* menu */
.menuwrapper{
  position: fixed;
  z-index: 9999;

    color: rgb(36, 36, 36);
    

}

.col_orange{
  color: #e66b1f;
}

.logoDest{
width: calc(var(--index) * 3.9);
}

.menu{
  display: flex;
  justify-content: space-between;
  width: 100vw;
  padding: 2vh 6.5em;
}



.T2{
    color: #c6e5cd;
    z-index: 40;
    /* bottom: 0; */
    position: static;
    width: auto;
    font: calc(var(--index) * 0.6) sans-serif;
    z-index: 6;
    border-radius: 1.54em;
    padding: 2vh 3vw;
    border: 1px solid rgb(210 228 224 / 83%);
    /* background: linear-gradient(167deg, rgb(171 192 158), rgb(106 132 92), rgb(75 88 68)); */
    background: linear-gradient(143deg, rgb(171 192 158), rgb(106 132 92), rgb(75 88 68));
    box-shadow: inset 0px 0px 6px 1px rgb(26 48 31 / 30%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    transition:  background .15s ease-in-out;
  }

  .T2:hover {
  /* background: rgba(255, 255, 255, 0.25); */
   /* background: linear-gradient(175deg, rgb(171 192 158), rgb(106 132 92), rgb(75 88 68)); */
   
   background: linear-gradient(167deg, rgb(171 192 158), rgb(106 132 92), rgb(75 88 68));
   
   }



.tittle69 {
    /* margin-left: 15vw; */
    /* padding-top: 32vh; */
    /* margin-bottom: 2rem; */
    position: absolute;
    bottom: calc(var(--index) * 9);
    left: calc(var(--index) * 4);
    color: rgb(94 94 94);
    font: calc(var(--index) * 0.6) sans-serif;
    z-index: 6;
    width: 19em;
    
}

.tittle5{
    /* margin-left: 15vw; */
 
 /* padding-top: 32vh; */
 /* margin-bottom: 2rem; */
 position: absolute;
 top: 25%;              /* Смещение по вертикали на 50% */
 left: -13%;             /* Смещение по горизонтали на 50% */
 color:rgb(233 233 233); 
 font: calc(var(--index)*11.6) sans-serif;
 z-index: 2;
 white-space: nowrap;
 opacity: 30%;
}


@media screen and (max-width: 479px) {
  
    /* body{
        font-size: 4.103vw;
    } */

    .text--style{
      
      width: 100%;
  
     }

    .Heading {
    color: #101010;
    letter-spacing: -.02em;
    width: 9em;
    margin-left: .4em;
    
    font-size: 2.37em;
    font-weight: 500;
    line-height: .9;}

    .titleH {
     text-align: center;
        letter-spacing: -0.02em;
        width: 21em;
        font-family: Ppneuemontreal, Arial, sans-serif;
        font-size: 0.875em;
        font-weight: 500;
        line-height: 1.1;
}

.carRR2 {
    
    width: calc(var(--index) * 32.6);
    
    transform: translate(-38%, -38%);
}

}

@media (max-width: 1024px) {
   
    /* -------------------Хедер------------ */
    .Header_tittle-wrapper{
     justify-content: start;
     }

    .H--style_second {
      font-size: 25.1cqi;
     }

    .distributor {
        padding: 3.5em 19.5em 8.5em 2.5em;
    
     }
    







  .H--style{
      margin-top: 0.4em;
     text-align: center;
    }
    
   

    .header01{
    display: flex;
    flex-direction: column;
    height: 140em;
    padding: 9.5em 6.5em 6.5em 6.5em;
    }

    .flex-imageH {
    width: 93em;
    transform: translate(-34%, -35%); 
    }
    .CRYO--img_second{
    width: 85em;
    transform: translate(-80%, -32%);
    }

    .Header_content{
      z-index: 5;
    }

    /* .............showcase................... */
   


    /* .............cards01................... */
    .cards--style01{
    width: 50%;
    height: 70em;
    }

    .cards--style02{
    width: 49%;
    height: 70em;
    min-width: auto;
 
    }

    
    
  }


@media (max-height: 875px) {
  
   
}

  
  /* Планшеты */
  @media (max-width: 768px) {
    
    
    
  }
  

   @media (max-width: 836px) {
    .cards__content {
    width: 100%;
    height: 53em;
    }

    .h3--respons{
      width: 70%;
      font-size: max(14px, 14em);
    }
    
  }

  /* Десктопы */
  @media (min-width: 1200px) {
    
  }

   /* Десктопы */
  @media (max-width: 1024px) {

 




    /* Services */
    .Services_item{
      height: 82em;
      width: 80%;
      background-size: 110% auto;
    }

  }


  @media (max-width: 1010px) {
    .bg2 {
        
        width: 125%;
        height: 90%;
        top: 0vh;
        transform: translate(-10%, -0%);
    }

    .car{
        width: auto;
        height: 66%;
        transform: translate(5%, -133%);
    }
    
  }

  
/* Мобильные устройства */
@media (max-width: 576px) {
   .cards__content {
    height: 102em;
    }

    .h3--respons {
        font-size: max(14px, 19em);
    }

    .CardsFL{
      flex-direction: column;
    }

       .cards--style01 {
        width: 100%;
        height: 119em;
    }

    .cards--style02 {
        width: 100%;
        height: 119em;
        
    }

    .text--style1 {
    width: 90%;
    }

    .text--style2 {
    width: 90%;
    }


    /* Services */
    .Services_item{
      height: 150em;
      width: 98%;
      background-size: 150% auto;
    }

    .btn__text{
      display: none;
    }




  }