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



.base-block {
  padding: 1em;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.base-block-full {
  padding: 10px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.base-block-window {
  width: 100vw;
  margin: 0 auto;
  text-align: center;
  background-color: #94569F;
  padding: 20px 0px;
}

.base-h2 {
  color: #000000;
  font-size: 46px;
  font-weight: 600;
  /* letter-spacing: 5px; */
  padding: 40px 0px;
  /* text-transform: uppercase; */
}

.base-h2-white {
  color: #ffffff;
  font-size: 46px;
  font-weight: 600;
  /* letter-spacing: 5px; */
  padding: 20px 0px;
  width: 70%;
  margin: 0 auto;
  /* text-transform: uppercase; */
}

.base-h3 {
  color: #000000;
  font-size: 30px;
  font-weight: 600;
  text-align: left;
  padding: 15px 0px;
}

.base-h3-white {
  color: #ffffff;
  font-size: 30px;
  font-weight: 600;
  text-align: left;
  padding: 15px 0px;
}

.base-p {
  color: #000000;
  font-size: 16px;
  text-align: left;
}

.base-p-white {
  color: #ffffff;
  font-size: 16px;
  text-align: left;
}

.base-p-white-banner {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  margin: 0 auto;
  width: 70%;
  padding: 5px 0px;
}

.base-spoiler {
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  padding: 10px 0px;
}

@media screen and (width < 480px) {

  .base-h2,
  .base-h2-white {
    font-size: 26px;
    text-align: left;
  }

  .base-h3,
  .base-h3-white{
    font-size: 20px;
  }

  .base-spoiler {
    font-size: 16px;
  }

  .base-p,
  .base-p-white,
  .base-p-white-banner {
    font-size: 14px;
    text-align: left;
  }
}

.base-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
}

@media screen and (width < 480px) {
  .base-content {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.basecard-img {
  text-align: left;
}

.basecard-img img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

@media screen and (width < 480px){
  .basecard-img img {
    width: 40px;
    height: 40px;
  }
}

.base-card2-1 {
  grid-area: A;
}

.base-card2-2 {
  grid-area: B;
}

.base-card2-3 {
  grid-area: C;
}

.base-content2 {
  display: grid;
  grid-gap: 1em;
  height: 400px;
  grid-template-areas:
    "A A A A   A A A A   A A A A"
    "A A A A   A A A A   A A A A"
    "A A A A   A A A A   A A A A"
    "B B B B   B B C C   C C C C"
    "B B B B   B B C C   C C C C"
    "B B B B   B B C C   C C C C"
    "B B B B   B B C C   C C C C";
  /* justify-items : center; */
}

@media screen and (width < 480px) {
  .base-content2 {
    grid-template-areas:
      "A A A A   A A A A   A A A A"
      "A A A A   A A A A   A A A A"
      "A A A A   A A A A   A A A A"
      "B B B B   B B C C   C C C C"
      "B B B B   B B C C   C C C C"
      "B B B B   B B C C   C C C C"
      "B B B B   B B C C   C C C C";
  }
}

.base-content3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1em;
  align-items: center;
}


.base-content4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
}

@media screen and (width < 480px) {
  .base-content4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .base-card4-2,
  .base-card4-4 {
    display: none;
  }

}

.base-content5 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

.base-content6 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

.base-content7 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  align-items: center;
}

@media screen and (width < 480px) {
  .base-content7 {
    display: grid;
    grid-template-columns: 1fr;
  }
}

[class^="base-card-"] {
  background-color: #81d100;
  padding: 1em;
  height: 300px;
  border-radius: 30px;
  background-size: cover;
  /* Адаптивный размер изображения */
  background-position: center;
  /* Центрирование изображения */
  align-items: center;
  position: relative;
}

@media screen and (width < 480px) {
  [class^="base-card-"] {
    height: 200px;
  }
}

.basecard-1-content,
.basecard-2-content,
.basecard-3-content,
.basecard-2-content-example,
.basecard-1-content-example,
.basecard-3-content-example,
.basecard-4-content-example,
.basecard-5-content-example,
.basecard-6-content-example {
  position: absolute;
  bottom: 15px;
  width: 90%;
  padding: 10px;
}

.base-card-1 {
  /* background-image: url('https://duogu.ru/img/1-fon.jpg');  */
  background-color: aliceblue;
}

.base-card-1-example {
  background-image: url('https://duogu.ru/img/index/basecard-1-content-example.jpg');
}

.base-card-2-example {
  background-image: url('https://duogu.ru/img/index/basecard-2-content-example.jpg');
}

.base-card-3-example {
  background-image: url('https://duogu.ru/img/index/basecard-3-content-example.jpg');
}

.base-card-4-example {
  background-image: url('https://duogu.ru/img/index/basecard-4-content-example.jpg');
}

.base-card-5-example {
  background-image: url('https://duogu.ru/img/index/basecard-5-content-example.jpg');
}

.base-card-6-example {
  background-image: url('https://duogu.ru/img/index/basecard-6-content-example.jpg');
}

.base-card-2 {
  /* background-image: url('https://duogu.ru/img/1-fon.jpg');  */
  background-color: aliceblue;
}

.base-card-3 {
  /* background-image: url('https://duogu.ru/img/1-fon.jpg');  */
  background-color: aliceblue;
}

[class^="base-card2-"] {
  background-color: #81d100;
  padding: 1em;
  border-radius: 30px;
  background-size: cover;
  /* Адаптивный размер изображения */
  background-position: center;
  /* Центрирование изображения */
  position: relative;
}

.basecard2-1-content {
  position: absolute;
  bottom: 15px;
  padding: 10px;
}

.base-card2-1 {
  background-image: url('https://duogu.ru/img/index/base-card2-1.jpg');
}

.base-card2-2 {
  background-image: url('https://duogu.ru/img/index/base-card2-2.jpg');
}

.base-card2-3 {
  background-image: url('https://duogu.ru/img/index/base-card2-3.jpg');
}

[class^="base-card3-"] {
  background-color: aliceblue;
  /* padding: 1em; */
  /* margin: 1em 0px; */
  margin: 0 auto;
  width: 100%;
  border-radius: 30px;
  background-size: cover;
  /* Адаптивный размер изображения */
  background-position: center;
  /* Центрирование изображения */
}

.base-card3-1-1,
.base-card3-1-2,
.base-card3-1-3 {
  display: inline-block;
  width: 45%;
  /* height: 200px; */
  vertical-align: middle;
}

.base-card3-1-2 {
  background-image: url('https://duogu.ru/img/index/3-1-2.png');
  height: 200px;
}

@media screen and (width < 480px) {
  .base-card3-1-2 {
    background-image: url('https://duogu.ru/img/index/3-1-2-mob.png');
    height: 200px;
  }
}


.base-card3-2-1,
.base-card3-2-2 {
  display: inline-block;
  width: 45%;
  /* height: 200px; */
  vertical-align: middle;
}

.base-card3-2-1 {
  background-image: url('https://duogu.ru/img/index/3-2-1.png');
  height: 200px;
}

@media screen and (width < 480px) {
  .base-card3-2-1 {
    background-image: url('https://duogu.ru/img/index/3-2-1-mob.png');
    height: 200px;
  }
}

.base-card3-3-1,
.base-card3-3-2 {
  display: inline-block;
  width: 45%;
  /* height: 200px; */
  vertical-align: middle;
}

.base-card3-3-2 {
  background-image: url('https://duogu.ru/img/index/3-3-2.png');
  height: 200px;
}

[class^="base-card4-"] {
  background-color: #000000;
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 30px;
  height: 290px;
  position: relative;
}

.base-card4-1 {
  background-image: url('https://duogu.ru/img/index/2-for-video-1.gif');
}

.base-card4-2 {
  background-image: url('https://duogu.ru/img/index/2-for-video-2.gif');
}

.base-card4-3 {
  background-image: url('https://duogu.ru/img/index/2-for-video-3.gif');
}

.base-card4-4 {
  background-image: url('https://duogu.ru/img/index/2-for-video-4.gif');
}

[class^="base-card5-"] {
  vertical-align: middle;
}

.base-card5-2 {
  position: relative;
}

.base-card5-2-1 {
  padding: 20px 0px;
}



.base-card6-1-1 {
  text-align: right;
}

.base-card6-1-2 {
  text-align: left;
}

[class^="base-card7-"] {
  /* background-color: #f5f5f5; */
  /* padding: 1em; */
  /* margin: 1em 0px; */
  margin: 0 auto;
  width: 100%;
  border-radius: 30px;
  background-size: cover;
  /* Адаптивный размер изображения */
  background-position: center;
  /* Центрирование изображения */
}

.base-card7-2 {
  background-color: aliceblue;
  padding: 0px 30px;
}

/* .base-card7-2-1{
  background-image: url('https://duogu.ru/img/index/0-1.png');
  height: 200px;
  padding-top: 90px;
} */

iframe {
  width: 100%;
  height: 100%;
}

.base-block-spoiler {
  width: 90%;
  margin: 0 auto;
}


/* БАННЕР */

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 400px;
  /* Высота баннера */
  background-image: url('https://duogu.ru/img/index/баннер.jpg');
  background-size: cover;
  /* Адаптивный размер изображения */
  background-position: center;
  /* Центрирование изображения */
  text-align: center;
  color: white;
  font-size: 1.5em;
  /* Размер шрифта кнопки */
  border-radius: 30px;
}

.banner-hello {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 400px;
  /* Высота баннера */
  background-image: url('https://duogu.ru/img/6-hello-banner-2.jpg');
  background-size: cover;
  /* Адаптивный размер изображения */
  background-position: center;
  /* Центрирование изображения */
  text-align: center;
  color: white;
  font-size: 1.5em;
  /* Размер шрифта кнопки */
  border-radius: 30px;
}

.banner-product-care {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 400px;
  /* Высота баннера */
  background-image: url('https://duogu.ru/img/11-1.jpg');
  background-size: cover;
  /* Адаптивный размер изображения */
  background-position: center;
  /* Центрирование изображения */
  text-align: center;
  color: white;
  font-size: 1.5em;
  /* Размер шрифта кнопки */
  border-radius: 30px;
}

@media screen and (width < 480px) {
  .banner {
    background-image: url('https://duogu.ru/img/index/banner-mob.jpg');
  }

  .banner-hello {
    background-image: url('https://duogu.ru/img/6-hello-banner-phone-2.jpg');
  }

  .banner-product-care {
    background-image: url('https://duogu.ru/img/11-2.jpg');
  }
}

@media (max-width: 768px) {
  .banner {
    height: 250px;
    /* Измененная высота баннера для мобильных устройств */
  }
}

.banner-content {
  margin: 0 auto;
}



@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(129, 209, 0, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(129, 209, 0, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(129, 209, 0, 0);
  }
}

.button  {
  text-align: center;
  display: inline-block;
  padding: 10px 25px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  background-color: #81d100;
  font-size: 16px;
  color: #ffffff;
  font-family: "ROBOTO", sans-serif;
  text-decoration: none;
  border: none;
  margin: 15px 0px;

  animation: pulse 2s infinite;
}


.button .base-btn,
.button .base-btn:link,
.button .base-btn:visited,
.button .base-btn:hover,
.button .base-btn:active {
  color: #ffffff;
}

.button-calculator,
.base-card4_0 .base-btn {
  text-align: center;
  display: inline-block;
  padding: 10px 25px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  background-color: #94569F;
  font-size: 16px;
  color: #ffffff;
  font-family: "ROBOTO", sans-serif;
  text-decoration: none;
  border: none;
  margin: 15px 0px;
}

/*.button .base-btn:hover {
  background-color: #94569F;
}*/

.base-card4_0 .base-btn:hover {
  background-color: #81d100;
}

.button-calculator:hover {
  background-color: #81d100;
}

.button-1,
.button-2 {
  display: inline-block;
  padding: 0px 10px;
}

@media screen and (width < 480px) {

  .button .base-btn,
  .button-calculator,
  .base-card4_0 .base-btn {
    font-size: 12px;
  }
}


@media screen and (width < 480px){
  .button .base-btn {
    font-size: 16px;
  }
}

/* калькулятор */

.base-box-calculator {
  text-align: left;
  margin: 20px 0px;
}

@media screen and (width < 480px){
  .duoguru-calculator {
    display: none;
  }
}

@media screen and (width > 480px){
  .duoguru-calculator-phone {
    display: none;
  }
}

input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #81d100;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  margin: 10px 0px;
  outline: 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #94569F;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid white;
  cursor: pointer;
  transition: .3s ease-in-out;
}

​

/* Стили для иконок */
.icon-container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.icon-square {
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5em;
  margin-right: 10px;
  border-radius: 5px;
}

/* Иконки */
.youth-ambition::before {
  content: "🚀";
  /* Ракета символизирует молодость и амбициозность */
}

.mission::before {
  content: "🎯";
  /* Цель символизирует миссию */
}

.custom::before {
  content: "✂️";
  /* Ножницы символизируют изготовление на заказ */
}

.vacuuming::before {
  content: "🧹"; /* Или другой подходящий символ */
}

.blotting::before {
  content: "🧽"; /* Символ губки */
}

.stain-removal::before {
  content: "🧼"; /* Символ мыла */
}