:root {
  --yellow-primary: #EECF2F;
  --blue-text: #0F2A71;
  --white: #fff;
  --black: #000;
  --blue-overlay: #0E4088;
  --blue-dark: #012456;
  --yellow-consult: #f7d900;
  --yellow-hover: #ffe600;
  --blue-promo-border: #002c60;
  --blue-hover-text: #001833;
  --beige-text: #fff;
  --brown-card: #c47328;
  --dark-red: #8b0000;
  --link-color: #552026;
  --focus-border: #a51a28;
  --marquee-bg: #111;
  --carousel-button: #2f2f2f;
  --header-bg:#012456;
}
html{
  min-width: 100vw !important;
}
a.nav-link:hover
 {
    /* color: #fdc500 !important; */
        color: var(--yellow-primary) !important;

}

.btn-yellow{
  background-color:var(--yellow-primary);
  color: var(--blue-dark);
  transition-duration: 0.5s;
}
.btn-yellow:hover{
   background-color:var(--blue-dark);
  color: var(--yellow-primary);
}
.nav-width{
  width:49vw;
}
body{
    overflow-x: hidden;
  }
  *{
      /* font-family: "Poppins", sans-serif; */
  font-family: "Montserrat", sans-serif;

    /* font-family: proxima-nova, sans-serif; */

    /* font-family: "proxima-nova", sans-serif; */
    /* font-family: "Inter", sans-serif; */

  }

  /*paddings*/
  section#swiper-slider-me\ {
    padding-top: 9%;
}

/*Modal*/
.modal-body form {
  padding-left: 0 !important;
}

.modal-dialog {
  max-width: 580px;
  margin-right: auto;
  margin-left: auto;
}
.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
  color: var(--blue-dark);
  font-size: 23px;
  font-weight: 600;
}
.modal-btn{
  background-color: var(--blue-dark);
  color: var(--white);
  border: none !important;
}
.modal-btn:hover{
  background-color: var(--yellow-consult);
  color: var(--blue-dark);
}
.modal-content {

  background-color: transparent !important;
}
  /*Header*/
  .header {
    position: sticky;
    top: 0;
    backdrop-filter: blur(30px);
    z-index: 9999;
    background-color: rgb(1 36 86 / 78%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-height: 9vh;
  }
  ul.navbar-nav.ms-auto.w-100.d-flex.flex-column-reverse.align-items-end.flex-wrap {
    position: relative;
    bottom: 10px;
}

  .navbar-nav {
    width: 100%;
  }

  .contact-header {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    margin-top: 10px;
  }
  /* Для открытия меню при ховере */
  .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block;
  }

  /* Прячем меню по умолчанию */
  .navbar-nav .nav-item .dropdown-menu {
    display: none;
  }
/* .contact-header::before {
    content: "";
    position: absolute;
    width: 198%;
    height: 1px;
    background-color: #ffffff;
    bottom: 1px;
    left: -100%;
} */
/* .navbar-nav::before {
    content: "";
    position: absolute;
    width: 98%;
    height: 1px;
    background-color: #ffffff;
    bottom: 40px;
    left: 1%;
} */
  .contact-link {
    font-size: 15px !important;
    text-align: center;
  }

  li.nav-item.nav-contact-item {
    display: flex;
    align-items: center;
  }

  .contact-link-icon svg {
    max-width: 18px;
  }

  .navbar-brand img {
    max-width: 30%;
}

  .main-nav {
    gap: 2vw;
    flex-wrap: wrap;
  }

  .main-nav .nav-link {
    color: var(--white) !important;
    font-size: 1.15rem;
  }

  .main-nav .nav-item:last-child .nav-link {
    margin-right: 0;
  }

  .contact-header .nav-link {
    color: var(--white) !important;
    font-size: 1.12rem;
  }

.txt-blue{
  color: var(--blue-dark);
}
  /*hero*/
  .hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 2rem 0;
    background-color: black;
    position: relative;
    background-image: url(../images/hero.webp);
    background-size:cover ;
    background-attachment: fixed;
    bottom: 9vh;
  }
  .hero-btn {
    color: var(--blue-text) !important;
    background: white !important;
    border: none;
    border-radius: 6px;
    padding: 2.2%;
    font-weight: 500;
    font-size: 1.34rem;
    width: 32%;
    margin-bottom: 1.5vh;
      transform: scale(1) translateZ(0);
    will-change: transform;

  /* Это ключевая строка: */
  transition: transform 0.3s !important;

}
.hero-btn:hover{
    background-color: var(--yellow-primary) !important;
    transform: scale(1.1) !important;
}
.hero-title {
  color: var(--white);
  font-weight: 400 !important;
  font-size: 70px;
}
.hero-subtitle {
  color: var(--white);
     font-size: 1.6rem;
  font-weight: 400 !important;
  margin-top: auto;
  margin-bottom: auto;
  max-width: 82%;
}
.hero-text-col {
  height: 565px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* padding-top: 1rem;
  padding-bottom: 1rem; */
}

h1.display-4.fw-bold.hero-title.aos-init.aos-animate {
    font-size: 3.2rem;
}

.card-form {
  border-radius: 10px;
  background-color: #ffffffb5;
  color: #243C82;
  width: 450px;
  height: 565px;
  border-radius: 20px;
  transition: all 1s 0s;
  vertical-align: middle;
  box-shadow: none;
  display: block;
  border: none;
  z-index: 999;
      padding: 4% 9% !important;
}
.modal-card-form {
  border-radius: 10px;
  background-color: var(--blue-dark);
  color: #243C82;
  width: 450px;
  height: 565px;
  border-radius: 20px;
  transition: all 1s 0s;
  vertical-align: middle;
  box-shadow: none;
  display: block;
  border: none;
  z-index: 999;
      padding: 4% 9% !important;
}

.formtitle {
  position: relative;
  bottom: 2vh;
  color: var(--blue-dark);
}
input, textarea {
  border-radius: 5px;
}
.form_btn {
  font-weight: 500;
}
.myh-70{
  height: 70% !important;
}
  .overflow{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:var(--blue-overlay);
    opacity:0.32;
    z-index: 0;
  }
  .z-row{
    z-index: 1;
  }
.section-title {
    position: relative; /* добавляем позиционирование для родителя */
    text-align: center;
    padding-bottom: 5%;
    font-size: 64px;
    color: var(--blue-dark);
    font-weight: 500 !important;
    text-align: left;
    margin-bottom: 6vh;
}
.pencil-yellow-why::before
 {
    content: "";
    position: absolute;
    left: -9rem;
    bottom: 20%;
    transform: translateX(-51%);
    width: 60%;
    height: 21px;
    background-color: #fdc500;
    border-radius: 10px 0 0 10px;
}
.pencil-yellow-products::before
 {
    content: "";
    position: absolute;
       left: -3.5rem;
    bottom: 6%;
    transform: translateX(-52%);
    width: 77%;
    height: 27px;
    background-color: #fdc500;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}
.pencil-yellow-install::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 26%;
    transform: translateX(-64%);
    width: 77%;
    height: 17px;
    background-color: #fdc500;
    /* clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); */
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}
.pencil-yellow-install
 {
  margin-bottom: 4rem;
}

.pencil-yellow-cert::before
 {
    content: "";
    position: absolute;
    left: 2.5rem;
    bottom: 26%;
    transform: translateX(-64%);
    width: 77%;
    height: 17px;
    background-color: #fdc500;
    /* clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); */
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}
.pencil-yellow-cert
 {
  margin-bottom: -2vh;
    bottom: 6rem !important;
}


  /* video {
  width: 68%;
  height: auto;
  border-radius: 1rem;
  position: absolute;

  transform: translate(-20%, -40%);
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
} */
  .video-visible {
    opacity: 1; /* Видео становится видимым после анимации */
  }

  /*check button*/


.check-btn {
  width: 29%;
  border: none; 
  color:var(--blue-dark);
  padding: 1.3%;
  border-radius: 0.35rem;
  background-color: var(--yellow-primary) !important;
  font-size: 1.05rem;
  font-weight: 600 !important;
  transform: scale(1) translateZ(0);
    will-change: transform;

  /* Это ключевая строка: */
  transition: transform 0.3s;
}
.check-btn:hover {
  transform: scale(1.08);
}
.hover_btn {
  width: 29%;
  border: none; 
  padding: 1.3%;
  border-radius: 0.35rem;
  background-color: var(--yellow-primary) !important;
  font-size: 1.05rem;
  font-weight: 600 !important;
  transform: scale(1) translateZ(0);
    will-change: transform;

  /* Это ключевая строка: */
  transition: transform 0.3s;
}
.hover_btn:hover {
  transform: scale(1.08);
}
.big-check{
  padding: 14px;
  font-size: 19px;
  width: 32%;
}
    a.check-btn {
      text-indent: 0;
    }
    .check-btn i {
      font-size: 1.25em; /* Увеличивает размер иконки */
      padding: 5px; /* Добавляет отступ вокруг иконки */
      position: relative;
      top: 4px; /* Сдвигает иконку вниз на 4px */
    }

    .check-btn i svg {
      width: 100%; /* Убедимся, что иконка занимает всю доступную ширину */
      height: auto;
      stroke-width: 2; /* Увеличивает толщину линий SVG */
    }
  .contact-header.fa-check{
    font-size: 22px;
    position: relative;
    top: 2px;
    left: -14px;
  }
  svg.svg-inline--fa.fa-check {
    position: relative;
    left: -14%;
}
  /**/
.promotion-section {
    background: linear-gradient(to right, rgba(0, 44, 96, 0.8), rgba(0, 44, 96, 0.8)),
                url('img/family1.jpg') no-repeat center center / cover;
    border-top: 10px solid var(--blue-promo-border);
    border-bottom: 10px solid var(--blue-promo-border);
  }

.promotion-sub {
    margin-top: -8vh;
    margin-bottom: -1vh;
}
.promotion_content.p-3.aos-init.aos-animate {
    margin-top: 2vh;
}
.promotion-flex {
    display: flex !important
;
    height: initial;
    justify-content: center;
    align-items: center !important;
    height: 100%;
    position: relative;
    margin-top: 10vh;
}
  .consult-btn {
    background-color: var(--yellow-consult);
    color: var(--blue-promo-border);
    font-weight: bold;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
  }

  .consult-btn:hover {
    background-color: var(--yellow-hover);
    color: var(--blue-hover-text);
  }
  /*Montage*/
  .promotion-section {
    background: linear-gradient(to right, rgba(0, 44, 96, 0.8), rgba(0, 44, 96, 0.8)),
                url('img/family1.jpg') no-repeat center center / cover;
    border-top: none;
    border-bottom: none;
  }

  .consult-btn {
    background-color: var(--yellow-consult);
    color: var(--blue-promo-border);
    font-weight: bold;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
  }

  .consult-btn:hover {
    background-color: var(--yellow-hover);
    color: var(--blue-hover-text);
  }
  /*Marquee*/

:root {
    --marquee-width: 80vw;
    --marquee-height: 29vh;
    /* --marquee-elements: 12; */ /* defined with JavaScript */
    --marquee-elements-displayed: 4;
    --marquee-element-width: calc(
      var(--marquee-width) / var(--marquee-elements-displayed)
    );
    --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
  }


  .marquee {
    width: var(--marquee-width);
    height: var(--marquee-height);
    background-image: url(../images/bg-partners.webp);
    background-size: cover;
    background-position-y: center;
    color: #eee;
    overflow: hidden;
    position: relative;
    width: 100vw;
}
  .marquee:before,
  .marquee:after {
    position: absolute;
    top: 0;
    width: 10rem;
    height: 100%;
    content: "";
    z-index: 1;
  }
  .marquee:before {
    left: 0;
    background: linear-gradient(to right, var(--marquee-bg) 0%, transparent 100%);
  }
  .marquee:after {
    right: 0;
    background: linear-gradient(to left, var(--marquee-bg) 0%, transparent 100%);
  }
  .marquee-content {
    list-style: none;
    height: 100%;
    display: flex;
    animation: scrolling var(--marquee-animation-duration) linear infinite;
  }
  /* .marquee-content:hover {
    animation-play-state: paused;
  } */
  @keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(
        calc(-1 * var(--marquee-element-width) * var(--marquee-elements))
      );
    }
  }
  .marquee-content li {
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    flex-shrink: 0;
    width: var(--marquee-element-width);
    max-height: 100%;
    font-size: calc(var(--marquee-height) * 3 / 4); /* 5rem; */
    white-space: nowrap;
  }

  .marquee-content li img {
    width: 100%;

    max-width: 200px;
}
  

  @media (max-width: 600px) {
    html {
      font-size: 12px;
    }
    :root {
      --marquee-width: 100vw;
      --marquee-height: 16vh;
      --marquee-elements-displayed: 5;
    }
    .marquee:before,
    .marquee:after {
      width: 5rem;
    }
  }
  #certification-section {
    min-height: 80vh;
    display: flex
;
    justify-content: center;
    align-items: center;
    padding-top: 23vh;
    padding-bottom: 23vh;
}
#certification-section .section-title{
position: relative;
bottom: 20vh;
}
  .cert{
    cursor: pointer;
  }
  .cert img:hover{
    filter: hue-rotate(45deg);
  }

  /**/

#carousel {
    perspective: 1000px;
    overflow: hidden;
  }
  #carousel #scene {
    width: 42%;
    margin: 40px auto 0 auto;
    transform-style: preserve-3d;
    transition: transform 0.5s;
  }
  #carousel #scene .carousel_item {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px 0 10px;
    backface-visibility: hidden;
  }
  #carousel #scene .carousel_item:not(:first-of-type) {
    position: absolute;
    left: 0;
    top: 0;
  }
  #carousel #carousel_btn {
    width: 100px;
    margin: 20px auto 0 auto;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  #carousel #carousel_btn .btn {
    width: 45px;
    height: 45px;
    line-height: 40px;
    padding-left: 7px;
    box-sizing: border-box;
    border-radius: 50%;
    float: left;
    border: 2px solid var(--carousel-button);
    color: var(--carousel-button);
    font-family: sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
  }
  #carousel #carousel_btn .btn:hover {
    color: var(--white)fff;
    background-color: var(--carousel-button);
  }
  #carousel #carousel_btn > div:first-child {
    margin-right: 10px;
  }
  /*Contact*/
  section#contact {
    height: 100vh;
    display: flex
;
    justify-content: center;
    align-items: center;
        padding-top: 9%;

}
#c_mail {
  display: flex !important;
  flex-direction: row !important;
}
/* .form_info {
    border-right: 1px solid #01245633;
} */
#cform {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-left: 15%;
  margin-top: 5%;
}
#cform input[type='text'],
#cform input[type='email'] {
  width: 100%;
  margin-bottom: 56px;
  border: none;
  border-bottom: 2px solid var(--blue-dark);
  outline: none;
  font-size: 20px;
  color: var(--blue-dark);
  transition: 0.2s ease-in;
      border-radius: 0 !important;
}
#cform input[type='text']::placeholder,
#cform input[type='email']::placeholder {
  font-size: 16px;
  font-weight: 500;
  color: var(--blue-dark);
  transition: 0.2s ease-in;
  transform: translateY(0);
  opacity: 0.6;
}
#cform input[type='text']:focus,
#cform input[type='email']:focus {
  border-bottom: 2px solid #0b5fd7;
}
#cform input[type='text']:focus::placeholder,
#cform input[type='email']:focus::placeholder {
  left: 20px;
  bottom: 10px;
  transform: translateY(-5px);
}
#cform .submit_container img {
  position: absolute;
  width: 18px;
  transform: translate(18px, 21px);
}
#cform .submit_container #submit {
    width: 37%;
    height: 56px;
    background-color: #fdc500;
    color: #012251;
    font-size: 20px;
    border-radius: 5px;
    transition: .3s ease-in-out;
    border: none;
    font-weight: 500;
}
#cform .submit_container #submit:hover {
  background-color: var(--blue-overlay);
  color: #fff;
}
.c_title {
  padding-top: 60px;
}
.c_title h3 {
  font-size: 48px;
  font-weight: 400;
}
.c_mail {
  font-size: 23px;
  margin-top: -13px;
  margin-bottom: 58px;
}
.c_mail a {
  color: var(--blue-dark);
}
.icon-container img {
  width: 500px;
  height: 500px;
}
.c_container {
  text-align: left;
}
@media (max-width: 768px) {
  .form_info {
    border-right: none;
  }
  .c_title {
    padding-top: 0;
    margin-bottom: 40px;
  }
  .c_mail {
    margin: 40px 0;
  }
  #cform {
    padding-left: 0;
    text-align: center;
  }
  #cform input[type='text'],
  #cform input[type='email'] {
    margin-bottom: 40px;
  }
  #cform .submit_container #submit {
    width: 75%;
  }
}
.soc-contact {
  display: flex
;
  flex-direction: row;
  width: 80%;
  justify-content: start;
}
.soc-contact ul {

    font-size: 28px;
    margin-top: 1vh;
    width: 100%;
    text-align: center;
    color: #fff;
}


/*Why us section*/
.why-title {
    margin-bottom: 3rem;
}
.card-brown{
  background-color: var(--brown-card);
}
.card-blue{
  background-color: var(--blue-dark);

}
.climate-overflow{
  background-color: var(--blue-dark);

}
.card-climate{
  background-image:url(../images/cards/climate.png) ;
  background-size: cover;
  background-repeat: no-repeat;

}
.card-salt{
  background-image:url(../images/cards/salt.png) ;
  background-size: cover;
  background-repeat: no-repeat;

}
.card-feature {
  min-height: 38vh;
    /* padding: 4%; */
  padding: 10% 8%;
  margin-top: -18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative; /* Это нужно для позиционирования дочерних элементов */
  box-shadow: 12px 1rem 17px rgb(0 0 0 / 5%) !important;
}

.climate-overflow {
  background-color: var(--blue-dark);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 0;
  opacity: 0.84;
}

.salt-overflow {
  background-color: var(--blue-dark);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 0;
  opacity: 0.84;
}
.card-energy {
  background-image: url(../images/cards/energy.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.energy-overflow {
  background-color: var(--brown-card);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 0;
  opacity: 0.88;
}

.card-title, .card-feature p, .card-feature a {
  position: relative; /* Устанавливаем позицию для текста */
  z-index: 2; /* Повышаем z-index, чтобы текст был поверх .climate-overflow */
}

.card-title {
    font-size: 2.05rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 6%;
    position: absolute;
    top: 7%;
}
.card-feature p {
  font-size: 1.15rem;
  font-weight: 400;
      position: absolute;
    top: 24%;
    width: 79%;
}
.card-white .card-title{
  color: var(--blue-dark) !important;
}
.card-white p{
  color: var(--blue-dark) !important;
}
.card-blue .card-title{
  color: var(--beige-text) !important;
}
.card-blue p{
  color: var(--beige-text) !important;
}


/* Set the font size of the text to 20px */
.consult-arrow {
  font-size: 18px;
  font-weight: 600 !important;
}
.fa-arrow-right {
  margin-left: 5px;
  position: relative;
  top: 2px;
}
/* Для карточек с классом card-white - текст и стрелочка черные */
.card-white .consult-arrow {
  color: var(--blue-dark) !important;
}

.card-white .consult-arrow i {
  color: var(--blue-dark) !important; /* Стрелочка тоже черная */
}

/* Для карточек с классом card-blue - текст и стрелочка красные */
.card-blue .consult-arrow {
  color: var(--beige-text) !important;
}

.card-blue .consult-arrow i {
  color: var(--beige-text) !important; /* Стрелочка тоже красная */
}

/* Общие стили для всех ссылок consult-arrow */
.consult-arrow i {
  margin-left: 10px; /* Добавляем отступ между текстом и стрелочкой */
}
/*Products*/
.row.g-0 {
  max-height: 46vh;
  overflow: hidden;
}
.card-height{
  max-height: 46vh;
}
img {
  object-fit: cover;
}

.product-fix {
  padding-left: 5%;
}
.header-card {
  position: relative;
  bottom: 9%;
}
h4.productcard-title {
  font-size: 2.8rem;
  font-weight: 300;
}
p.mb-1.productcard-subtitle {
  font-size: 1.6rem;
}
.first-card{
  background-image: url(../images/products/comfort-thumb.png);
  background-size: contain;
  background-repeat: no-repeat;
}
/* .second-card {
  background-image: url(../images/products/advanced.png);
  background-size: contain;
  background-repeat: no-repeat;
} */
.first-card {
  background-image: url(../images/products/comfort-thumb.png);
  background-size: contain;
  background-repeat: no-repeat;
  
}

.third-card {
  background-image: url(../images/products/advanced.png);
  /* background-size: contain; */
  background-repeat: repeat;
}
.fourth-card
 {
    background-image: url(../images/products/premium.png);
    background-repeat: inherit;
    background-size: contain;
}
.custom-check{
  left:0 !important;
  color:var(--yellow-primary);

}
.my-bg {
  background-color: rgba(1, 36, 86, 0.88) !important;
}
.second-card {
  position: relative;
}

.second-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url(../images/products/comfort-thumb.png);
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.88; /* можешь изменить по вкусу */
  z-index: 0;
}

.second-card > * {
  position: relative;
  z-index: 1;
}
ul.list-unstyled li {
  font-size: 1.18rem;
}
ul.list-unstyled li {
  font-size: 1.18rem;
  margin-bottom: 8px;
}






/*Promotion section*/
.promotion-section{
  background-image: url(../images/promo.png);
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 110vh;
}
img.mosquite-img
 {
    width: 100%;
    transform: translate(-8%, 10%);
}


.promotion_content {
  /* text-align: left; */
  display: flex
;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  bottom: -5vh;
  /* left: 5vw; */
  gap: 3vh;
}
.promotion_title{
  color: var(--white);
  font-weight: 400 !important;

}
.promotion_content p {
  font-size: 1.5rem !important;
  width: 70%;
}
/*countdown*/

.countdown-container {
  text-align: center;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.countdown div {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 122px;
  height: 122px;
}

.countdown span {
  font-size: 2rem;
  font-weight: 700;
  display: block;
  color: var(--blue-dark);
}

.countdown p {
  margin: 0;
  font-size: 1.3rem !important;
  color: var(--blue-dark);
  width:100%;
  font-weight: 600;
}
img.free {
    width: 5%;
    position: absolute;
    z-index: 999;
    margin-top: 44px;
    left: 17%;
    margin-top: 63px;
}
/*Install*/
.img_border{
  border: none;
}
.install_btn {
    background-color: var(--yellow-primary) !important;
    color: var(--blue-dark) !important;
    font-weight: 600;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 24px !important;
    font-size: 1.05rem !important;
    transition: transform 0.5s;
}
.install_btn:hover {
    background-color: var(--blue-dark) !important;
    color: #fff !important;
    transform: scale(1.1);  
}
.install_content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  height: 75vh;
}
h4.fw-bold.install_title {
  font-size: 3rem;
  font-weight: 600 !important;
}
.install_text {
  color: var(--blue-dark);
  margin-top: 7%;
  font-size: 1.4rem;
  font-weight: 400;
  width: 83%;
  margin-bottom: 6.95%;
}
.separator {
    width: 100vw;
    background-color: #0124566e;
    height: 0px;
    position: absolute;
    left: 0;
}

/*carousel 3d*/

/*Slider Classes*/
.cascade-slider_container {
  position: relative;
  width: 100%;
  height: 800px;
  margin: 25px auto;
  padding-top: 150px;
  overflow-x: hidden;
}
.cascade-slider_item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(0.3);
  transition: all 1s ease;
  opacity: 0;
  z-index: -1;
  text-align: center;
}
.cascade-slider_item.next {
  left: 50%;
  transform: translateY(-50%) translateX(-135%) scale(0.8);
  filter: brightness(85%);
  opacity: 1;
  z-index: 1;
}
.cascade-slider_item.prev {
  left: 50%;
  transform: translateY(-50%) translateX(35%) scale(0.8);
  filter: brightness(85%);
  opacity: 1;
  z-index: 1;
}
.cascade-slider_item.now {
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(1);
  opacity: 1;
  z-index: 5;
}
.cascade-slider_arrow {
  display: inline-block;
  position: absolute;
  top: 50%;
  cursor: pointer;
  z-index: 5;
}
.cascade-slider_arrow-left {
  left: 20px;
}
.cascade-slider_arrow-right {
  right: 20px;
}
.cascade-slider_arrow-left img {
  height: 40px;
  left: 40px;
}
.cascade-slider_arrow-right img {
  height: 40px;
  left: 40px;
}
.cascade-slider_nav {
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  z-index: 5;
}
.cascade-slider_dot {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 1px solid #4196EF;
  margin: 3px;
  transition: all 0.5s;
  background: none;
  list-style: none;
  cursor: pointer;
  border-radius: 50px;
}
.cascade-slider_dot:hover {
  background: #2c8fab;
}
.cascade-slider_dot.cur {
  background: #2c8fab;
  width: 17px;
  height: 17px;

}

/*Profile card classes*/
.card {
  background-color: transparent;
  color: #243C82;
  width: 450px;
  height: 565px;
  border-radius: 20px;
  transition: all 1s 0s;
  vertical-align: middle;
  box-shadow: none;
  display: block;
  border: none;
}
.photo{
  width:50%;
  vertical-align: middle;
  display:inline;
}
.photo img{
  transform:translateY(-35px) translateX(-10px);

}
.info{
  display:inline-block;
  width:50%;
  height:100%;
  text-align:center;
}
.info h2{
  font-family:'Roboto';
  text-transform:uppercase;
  font-size: 26px;
  color: #4196EF;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.subtitle{
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 98%;
text-align: center;
letter-spacing: 0.055em;
color: #243C82;
}
.content{
  font-family: Roboto;
  font-weight: 300;
}
.button{
  transform:translateX(23px) translateY(15px);
  position:absolute;
  padding:12px 17px;
  border-radius:30px;
  color:#fff;
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
  text-decoration:none;
  background-color:#243C82;
}

@media (min-width: 460px) and (max-width: 680px) {
  .cascade-slider_item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(0.3);
    transition: all 1s ease;
    opacity: 0;
    z-index: -1;
    text-align: center;
  }
  .cascade-slider_item.next {
    left: 50%;
    transform: translateY(-50%) translateX(-90%) scale(0.4);
    filter: brightness(70%);
    opacity: 1;
    z-index: 1;
  }
  .cascade-slider_item.prev {
    left: 50%;
    transform: translateY(-50%) translateX(-10%) scale(0.4);
    filter: brightness(70%);
    opacity: 1;
    z-index: 1;
  }
  .cascade-slider_item.now {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(0.6);
    opacity: 1;
    z-index: 5;
  }
  .cascade-slider_arrow-left img {
    height: 30px;
    left: 30px;
  }
  .cascade-slider_arrow-right img {
    height: 30px;
    left: 30px;
  }
  .cascade-slider_nav {
    display:none;
  }
}
@media (max-width: 460px) {
  .cascade-slider_item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(0.3);
    transition: all 1s ease;
    opacity: 0;
    z-index: -1;
    text-align: center;
  }
  .cascade-slider_item.next {
    left: 50%;
    transform: translateY(-50%) translateX(-80%) scale(0.3);
    filter: brightness(70%);
    opacity: 1;
    z-index: 1;
  }
  .cascade-slider_item.prev {
    left: 50%;
    transform: translateY(-50%) translateX(-20%) scale(0.3);
    filter: brightness(70%);
    opacity: 1;
    z-index: 1;
  }
  .cascade-slider_item.now {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(0.5);
    opacity: 1;
    z-index: 5;
  }
  .cascade-slider_arrow-left img {
    height: 30px;
    left: 30px;
  }
  .cascade-slider_arrow-right img {
    height: 30px;
    left: 30px;
  }
  .cascade-slider_nav {
    display:none;
  }

}
/*Opinion*/
#opinion{
  background-image: url(../images/opinion-bg.jpg);
  background-size: cover;
  height: 87vh;

}
#opinion .overflow{
  max-height: 87vh;
}
/*video bg test*/
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

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

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(1 36 86 / 54%); /* затемнение, если нужно */
  z-index: 1;
}

.hero .container,
.hero .z-row {
  position: relative;
  z-index: 2;
}


/*Mobile*/
.navbar-toggler {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.consult-arrow {
  display: inline-flex;
  align-items: center;
}

.consult-arrow svg {
  transition: transform 0.5s ease;
}

.consult-arrow:hover svg {
  transform: translateX(8px);
}

svg.arrow-svg {
  position: relative;
  top: 2px;
  left: 10px;
  width: 18px;
}
svg.svg-inline--fa.fa-check.custom-check {
    margin-right: 5px;
}
.form-control{

    font-size: 1.05rem !important;

}

/*Swiper*/
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: left; /* Align content to the left */
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}

section#swiper-slider-me {
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10%;
  padding-right: 10%; /* Отступы для контента */
    background-image: url(../images/opinion-bg.jpg) !important;
  background-size: cover;
  height: 87vh;
}

h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  margin-bottom: 20px;
}

a.consult-arrow {
  font-size: 18px;
    font-size: 18px;
    position: absolute;
    bottom: 20%;

}

.opinion-photo img {
    max-width: 100%;
    height: auto;
    margin-top: 13vh;
      position: relative;
    top: -84px;
    right: 56px;
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
}

.swiper-button-next {
  right: 10px;
}

.swiper-button-prev {
  left: 10px;
}

.arrow-svg {
  fill: none;
  stroke: #fff;
}

@media (max-width: 768px) {
  section#swiper-slider-me {
    padding: 0 15px;
  }

  .swiper-slide {
    min-height: 60vh; /* Adjust height for smaller screens */
  }
}
.opinion-content{
  padding-left: 20% !important;
}
.opinion-title {
    font-size: 3rem;
    color: var(--blue-dark);
    margin-bottom: 9vh;
    font-weight: 500;
}
.opinion-subtitle {
    font-size: 1.5rem;
    color: var(--blue-dark);
    margin-bottom: 9vh;
    font-weight: 500;
}
.swiper-button-next,
.swiper-button-prev {
  padding-left: 8%; /* Отступ слева */
  padding-right: 8%; /* Отступ справа */
    color: var(--blue-dark) !important; /* Цвет стрелочек */

}
/*Fixes 5/16*/
.promotion_content.p-3.aos-init.aos-animate {
    margin-top: 4.8vh;
}

.countdown-container.mt-4 {
    margin-top: 1.1vh !important;
}
img.mosquite-img {
    width: 100%;
    transform: translate(-16%, 10%);
}
img.free
 {
    width: 15%;
    position: absolute;
    z-index: 999;
    margin-top: 44px;
    left: 12%;
    margin-top: 48px;
}
.contact-link-icon svg
 {
    max-width: 20px;
    max-height: 40px;
}
.form_info {
    position: relative;
    bottom: 5vh;
}
/*Swiper gallery*/
    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: grey;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .download-cert-btn {
    width: 48%;
    /* padding-top: 13px; */
    display: flex
;
    justify-content: center;
    height: 48px;
    align-items: center;
    color: var(--blue-dark);
    background-color: var(--yellow-primary);
    transition-duration: 0.3s;
}
.download-cert-btn:hover {
        background-color: var(--blue-dark) !important;
    color: var(--yellow-primary) !important;
}
.cert-title{
  font-size: 1.75rem;
}
.cert-subtitle{
  font-size: 1.45rem;
  /* max-width: 80%; */
}
.cert_content {
    /* padding-left: 8%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/*count up*/



/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */

.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

section#count-up {
    background-color: grey;
    display: flex
;
    justify-content: center;
    margin-bottom: 18vh;
}


/*Pravki*/
.pencil-yellow-install::before
 {
    content: "";
    position: absolute;
    left: -1rem -16px;
    bottom: 26%;
    transform: translateX(-64%);
    width: 77%;
    height: 17px;
    background-color: #fdc500;
    /* clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); */
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}
/*contact form - ячейками

#contact{
  background-image: url(../images/contact.jpg);
}
  */
  .card-form_contact
 {
    border-radius: 10px;
    background-image: url(../images/opinion-bg.jpg);
    background-size: cover;
    color: #ffffff;
    width: 450px;
    height: 565px;
    border-radius: 20px;
    transition: all 1s 0s;
    vertical-align: middle;
    box-shadow: none;
    display: block;
    border: none;
    z-index: 999;
    padding: 4% 9% !important;
    position: relative;
    bottom: 23%;
}

/*Footer*/
footer {
    background-color: var(--blue-dark);
    padding: 2%;
    position: relative;
}

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

.logo_bottom {
    order: 1;
}
.logo-footer{
  width: 6vw !important;
}
.menu_bottom {
    order: 2;
    display: flex;
    margin-left: 27%;
    gap: 10%;
    text-align: left;
    list-style: none;
}

.menu_bottom li {
    white-space: nowrap;
    padding: 5px;
}

.menu_bottom ul li {
    transition-duration: 1s;
}

.menu_bottom ul li:hover {
    background: var(--primary-color);
    border-radius: 35px;
    color: #fff;
    font-weight: bold;
}


.ul_title {
    color: var(--yellow-primary);
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 19%;
    text-align: left;
}
.flex_row_bottom {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
}

.bottom-switcher {
    order: 3;
    margin-left: 30%;
    margin-top: 10px;
    margin-bottom: 30px;
}

.powered {
  width: 100%;
  text-align: left;
  padding-top: 12px;
  padding-right: 5%;
}

.powered p{
color: var(--yellow-primary);
font-size: 13px;
}

.powered a {
    color: #fff;
    font-weight: 500;
    transition-duration: .5s;
    text-decoration: none;
}

.powered a:hover {
    color: var(--primary-color);
    font-weight: 600;
}

/* .logo_bottom img {
    width: 247px;
    position: relative;
    right: -14px;
    top: 22%;
} */
 .logo_bottom img {
    width: 14vh;
    position: relative;
    right: -14px;
    top: 0;
}
@media (max-width: 600px) {
    .logo_bottom img {
        max-width: 100%;
    }
}
.bottom_ul{
  list-style: none;
  margin-right: 7.5rem !important;
}
.bottom_ul a {
    color: #fff;
    text-decoration: none !important;
      font-family: "Poppins", sans-serif;
      font-size: 1.1rem;
      text-align: left;
}

/*Window coloring */
.banner-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.6rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  min-height: 100vh;
  padding-top: 5vh;
}

.banner-content {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  justify-content: center;
}

.banner-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.banner-left h2 {
  font-size: 3rem;
  text-transform: uppercase;
  line-height: 1.2;
}

.banner-left span {
  display: block;
  font-size: 4.4rem;
}

.banner-left p {
  margin: 1.6rem 0;
  line-height: 1.7;
}

.banner-left button {
  background: #222;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  padding: 0.65rem 2rem;
  border: 3px solid #222;
  cursor: pointer;
  transition: all 0.5s ease;
}

.banner-left button:hover {
  background: #fff;
  color: #222;
  border-color: #222;
}

.banner-left button:focus {
  outline: 0;
}

.blue-text {
  color: var(--blue-dark) !important;
}



#colors ul.list-unstyled {
  color: var(--blue-dark);
}

.color-content {
  margin-top: 3.2rem;
}

.color-content h3 {
  text-transform: uppercase;
  font-size: 1.6rem;
}

.color-groups {
  padding: 1rem 0;
  display: flex;
}

.color {
  width: 35px;
  height: 35px;
  background: none;
  border-radius: 0%;
  margin-right: 19px;
  cursor: pointer;
  transition: all 0.5s ease;
      border: 1px solid #01245640;
}

.color-black {
  background:url(../images/colors/antracit-struct.png)
}

.color-blue {
  background-color: #085ea0;
}

.color-nut {
  background:url(../images/colors/nut-struct.png)
}

.color-red {
  background-color: #8b0516;
}

.color-white {
  background-color: #ededed;
}

.color:hover,
.active-color {
  transform: scale(1.2);
}

.banner-right {
  position: relative;
  left: 6vw;
}

.banner-right img
 {
    position: relative;
    left: -2vw;
    max-width: 100%;
}
.color.color-custom
 {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--blue-dark);
    border-radius: 8px;
}
/* Адаптив для баннера */
@media screen and (max-width: 992px) {
  .banner-content {
    grid-template-columns: 100%;
    text-align: center;
  }
  .banner-left h2 {
    font-size: 2rem;
  }
  .banner-left span {
    font-size: 2.8rem;
  }
  .color-groups {
    justify-content: center;
  }
  .color:last-child {
    margin-right: 0;
  }
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: #fdc500;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.navbar-nav .nav-item .dropdown-menu {
    display: none;
    background-color: #032353cc;
}

.dropdown-item:hover {
    transform: scale(1.1);
    background-color: transparent;
    transition-duration: 0.3s;
    color: #fdc500;
}
.dropdown-menu {
  width: 50px !important;
}
ul.dropdown-menu {
    border-radius: 0;
}
button#toggleShutters
 {
    font-weight: 500 !important;
    border: none;
}
.coloring_btn{
     font-weight: 500 !important;
    border: none;
}
.hero {
  position: relative;
  height: 100vh;
  overflow-y: hidden !important;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(1 36 86 / 54%);
  z-index: 1;
  pointer-events: none;
}
.banner-right img {
  transition: opacity 0.2s ease;
  opacity: 1;
}

.banner-right img.fade-out {
  opacity: 0;
}
.lang-menu {
  width: 83px !important; /* фиксированная ширина */
  min-width: unset; /* отключаем стандартный min-width */
  padding: 0; /* убираем внутренние отступы */
}



.plashka-yellow {
    background-color:  var(--yellow-light, #FFD700);
    max-height: 79px;
    width: 36vw;
    margin-bottom: 14vh;
    height: 79px;
    position:absolute;
    
}
.p-yellow-text{
    color: var(--blue-dark);
    font-size: 2.8rem;
    text-align: left;
    height: 100%;
    margin-right: 3vw;
    font-weight: 500 !important;
    padding-top: 12px;
        top: 6vh;
}
.plashka-blue {
  background-color: var(--blue-dark); /* замените на нужный оттенок */
  max-height: 79px;
  height: 79px;
  width: 36vw;
  margin-bottom: 14vh;

  right: 0; /* выдвигаем вправо за пределы контейнера */
  z-index: 1;
  position: absolute;
}

.p-blue-text {
    color: #fff;
    font-size: 2.8rem;
        font-weight: 500 !important;

    text-align: right !important;
    z-index: 1;
    padding-top: 11px;
}
/* 
.plashka {
    background-color: var(--blue-dark);
    max-height: 100%;
    width: 36vw;
    margin-bottom: 14vh;
}

.plashka h2 {
    color: #fff;
    font-size: 36px;
    text-align: right;
    height: 100%;
    margin-right: 2vw;
    padding-top: 4%;
    font-weight: 400 !important;
} */


.coloring_buttons{
  display: flex;
  flex-direction: row;
  gap:2%;
}
/* Убираем стандартную стрелку Bootstrap */
.navbar .dropdown-toggle::after {
  display: none !important;
}

/* Добавляем кастомную стрелку ко всем dropdown в navbar */
.navbar .dropdown-toggle {
  position: relative;
  padding-right: 16px;
}

.navbar .dropdown-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -17px;
  width: 23px;
  height: 23px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='red' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.coloring_buttons button
 {
    border-radius: 0;
    width: 200px;
}
.contact-title
 {
 
    padding-bottom: 0%;
   
    margin-bottom: 4vh;
}
.overlay-contact {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #0c3167a6;
    backdrop-filter: blur(8px);
}
.soc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 колонки */
  gap: 10px; /* Расстояние между иконками, можешь изменить */
  list-style: none;
  padding: 0;
  margin: 0;
  justify-items: center; /* Центрирование иконок */
}

.soc-item i {
  font-size: 24px; /* Размер иконок */
}

.soc-grid {
    display: grid
;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-items: center;
    margin-top: 0 !important;
}
.social-contact ul {
    display: flex;
    font-size: 28px;
    list-style-type: none;
    gap: 48px;
    color: var(--blue-dark);
}
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: relative;
    top: 3px;
}span.swiper-pagination-bullet {
    width: 20px;
    border-radius: 2px;
}
.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--blue-dark) !important;
}
.why-plashka-title
 {
    font-size: 2.8rem;
    position: relative;
    top: 0;
}
.card-form {
    border-radius: 10px;
    backdrop-filter: blur(9px);
    background-color: #ffffff7d;
    color: #243C82;
    width: 450px;
    height: 565px;
    border-radius: 20px;
    transition: all 1s 0s;
    vertical-align: middle;
    box-shadow: none;
    display: block;
    border: none;
    z-index: 999;
    padding: 4% 9% !important;
}
.bottom_ul li a:hover {
    color: var(--yellow-primary);
;
}
@media (max-height: 770px) {
    .promotion-section {
        height: 100vh;
    }
}

@media (max-height: 770px) {
    .promotion-section {
        height: 100vh;
    }
}
.brands-padding{
  padding-left: 0 !important;
}
.soc-item a{
    color: var(--blue-dark) !important;

}
.soc-item a:hover{
    color: #1e3ded!important;

}