body {
    background-image: url('/static/img/customers/back-total.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


@media (max-width: 1023px) {
    body {
        background-image: url('/static/img/customers/medium-back-total.png');
    }
}

@media (max-width: 450px) {
    body {
        background-image: url('/static/img/customers/small-back-total.png');
    }
}

.block-main {

}


.content-main {

}

h1, h2, h3, h4, h5, h6 {
    margin: 0; /* Убирает отступы */
    padding: 0; /* Убирает внутренние отступы */
    font-size: inherit; /* Устанавливает размер шрифта, унаследованный от родительского элемента */
    font-weight: inherit; /* Убирает жирность шрифта */
    line-height: inherit; /* Устанавливает нормальную высоту строки */
    color: inherit; /* Убирает цвет, унаследованный от родительского элемента */
}


.top-content-main {
    position: relative;
    z-index: 10;
    padding-top: 70px;
    padding-left: 70px;
    display: flex;
    flex-direction: column;
    margin-bottom: 200px;
}

.top-content-main::before {
    position: absolute;
    content: '';
    top: -100px; /* Положение сверху */
    left: 0px; /* Положение слева */
    right: 0px; /* Положение справа */
    bottom: -100px; /* Положение снизу */
    /* background-image: url('/static/img/customers/bck-top.png');*/
    background-size: cover; /* Масштабирование изображения, чтобы оно заполнило весь блок */
    background-position: center; /* Центрирование изображения */
    background-repeat: no-repeat; /* Запрет повторения изображения */
    z-index: -1;
}

.container-about-block {
    width: 100%;
    display: flex;
    margin-top: 150px;
}


.about-block,
.about-block * {
  box-sizing: border-box;
}

.about-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.container-about-head {
    display: flex;
    flex-direction: column;
    align-items: left;
}

.about-head {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.about-title {
  color: var(--dark-color, #3b5762);
  text-align: center;
  font-family: "Montserrat Alternates";
  font-size: 48px;
  line-height: 48px;
  font-weight: 700;
  text-shadow: 0px 0px 4px #FFFFFF;
  position: relative;
  align-self: stretch;
}

.about-subtitle {
  color: var(--dark-color, #3b5762);
  text-align: center;
  font-family: "Montserrat Alternates";
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
}

.about-head-left {
  flex-shrink: 0;
  width: 383px;
  height: 55px;
  position: relative;
}


.about-bg {
    fill: #729AA9;
    filter: drop-shadow(0px -3px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(255, 255, 255, 0.6));
    transform: matrix(-1, -0.01, 0.02, -1, 0, 0);
}

.about-bg:hover {
  fill: #98C5D6;
  filter: drop-shadow(0px -3px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(255, 255, 255, 0.6));
}

.about-bg:active {
  fill: #597F8D;
  filter: drop-shadow(0px -8px 6.7px rgba(0, 0, 0, 0.25)) drop-shadow(0px -3px 4px rgba(0, 0, 0, 0.25)) drop-shadow( 0px -15px 21.4px #6D909C) drop-shadow(0px 4px 4px rgba(255, 255, 255, 0.6));
}

.about-icons:hover .icon-main {
  transform: scale(1.1); /* Увеличиваем главную иконку */
  transition: transform 0.2s ease;
}


.about-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.about-content {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  width: 73.63%;
  height: 47.27%;
  position: absolute;
  right: 13.05%;
  left: 13.32%;
  bottom: 27.27%;
  top: 25.45%;
  position: relative;
}



.about-text {
  color: #ffffff;
  text-align: center;
  font-family: "MontserratAlternates-SemiBold", sans-serif;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-icons {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  position: relative;
  overflow: hidden;
}
.icon-main {
  width: 100%;
  height: 66.8%;
  position: absolute;
  right: 0.1%;
  left: -0.1%;
  bottom: 16.7%;
  top: 16.5%;
  overflow: visible;
}
.icon-secondary {
  width: 17.36%;
  height: 11.35%;
  position: absolute;
  right: 58.32%;
  left: 24.32%;
  bottom: 56.74%;
  top: 31.92%;
  overflow: visible;
}

.about-layout-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 0;
    overflow: visible;
    transition: max-height 0.5s ease-out, opacity 0.3s ease, visibility 0.3s ease;
    margin: 20px 0;
    opacity: 0;
    visibility: hidden;
    cursor: auto;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    z-index: 100;
}

.about-layout-container.active {
    max-height: 400px;
    opacity: 1;
    visibility: visible;
}


.layout-menu-button:hover {
    transform: translateY(-2px);
}

.layout-menu-button:active {
    transform: translateY(1px);
}

.layouts-menu-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Normal state */
.layout-menu-button .layout-button-bg {
    fill: #CFE5ED;
    transition: fill 0.2s ease;
}

/* Hover state */
.layout-menu-button:hover .layout-button-bg {
    fill: #95C4D6;
}

/* Active state */
.layout-menu-button:active .layout-button-bg {
    fill: #6A99AB;
}

/* Filter effects */
.layout-menu-button .layout-button-shadow {
    filter: url(#layout-normal-shadow);
    transition: filter 0.2s ease;
}

.layout-menu-button:hover .layout-button-shadow {
    filter: url(#layout-hover-shadow);
}

.layout-menu-button:active .layout-button-shadow {
    filter: url(#layout-active-shadow);
}


/* Анимация раскладывания */
.about-layout-container.active .layouts-menu-link {
    animation: slideDown 0.4s ease forwards;
    opacity: 0;
    transform: translateY(-20px);
}

/* Задержки для каждого элемента */
.about-layout-container.active .layouts-menu-link:nth-child(1) { animation-delay: 0.1s; }
.about-layout-container.active .layouts-menu-link:nth-child(2) { animation-delay: 0.2s; }
.about-layout-container.active .layouts-menu-link:nth-child(3) { animation-delay: 0.3s; }
.about-layout-container.active .layouts-menu-link:nth-child(4) { animation-delay: 0.4s; }
.about-layout-container.active .layouts-menu-link:nth-child(5) { animation-delay: 0.5s; }
.about-layout-container.active .layouts-menu-link:nth-child(6) { animation-delay: 0.6s; }

/* Анимация сворачивания */
.about-layout-container:not(.active) .layouts-menu-link {
    animation: slideUp 0.3s ease forwards;
}

/* Задержки при сворачивании (обратный порядок) */
.about-layout-container:not(.active) .layouts-menu-link:nth-child(1) { animation-delay: 0.25s; }
.about-layout-container:not(.active) .layouts-menu-link:nth-child(2) { animation-delay: 0.2s; }
.about-layout-container:not(.active) .layouts-menu-link:nth-child(3) { animation-delay: 0.15s; }
.about-layout-container:not(.active) .layouts-menu-link:nth-child(4) { animation-delay: 0.1s; }
.about-layout-container:not(.active) .layouts-menu-link:nth-child(5) { animation-delay: 0.05s; }
.about-layout-container:not(.active) .layouts-menu-link:nth-child(6) { animation-delay: 0s; }

/* Keyframes для анимаций */
@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Хлебные крошки */
.breadcrumbs-container {
    width: 100%;
    margin-top: 100px;
}

.breadcrumbs,
.breadcrumbs * {
  box-sizing: border-box;
}

.breadcrumbs {
  --dark-color: #3b5762;
  --font-family: "Montserrat Alternates";
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: flex-end;
  margin-right: auto;
}

.breadcrumbs__item {
  color: var(--dark-color);
  text-align: left;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  position: relative;
  transition: color 0.2s ease;
}

.breadcrumbs__item--current {
  color: var(--dark-color);
  opacity: 0.7;
}

.breadcrumbs__chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}

/* Дополнительные hover-эффекты */
.breadcrumbs__item:not(.breadcrumbs__item--current):hover {
  color: #2a4753;
  text-decoration: none;
  cursor: pointer;
}

.breadcrumbs__chevron {
  margin: 0 2px;
}


@media (max-width: 1023px) {
    .top-content-main::before {
        top: -100px; /* Положение сверху */
        left: 0; /* Положение слева */
        right: 0; /* Положение справа */
        bottom: -100px; /* Положение снизу */
        /* background-image: url('/static/img/customers/medium-bck-top.png');*/
        background-size: 200%;
        background-position: center; /* Центрирование изображения */
        background-repeat: no-repeat; /* Запрет повторения изображения */

    }
    .top-content-main{
        padding-left: 0;
        margin-bottom: 0px;
    }
    .container-about-block {
        justify-content: center;
        margin-top: 0px;

    }
    .breadcrumbs-container {
        margin-top: 50px;
        display: flex;
        justify-content: center;
    }
    .breadcrumbs {
        margin: 0;
    }

}

@media (max-width: 450px) {
    .top-content-main::before {
        top: -100px; /* Положение сверху */
        left: 0; /* Положение слева */
        right: 0; /* Положение справа */
        bottom: -100px; /* Положение снизу */
       /* background-image: url('/static/img/customers/small-bck-top.png');*/
        background-size: 300%;
        background-position: center; /* Центрирование изображения */
        background-repeat: no-repeat; /* Запрет повторения изображения */
        overflow: hidden; /* Позволяет изображению выходить за границы блока */
    }
    .container-about-block {
        justify-content: center;
    }
    .about-title {
        font-size: 30px;
    }
    .about-subtitle {
        font-size: 16px;
    }
    .about-head-left {
        width: 300px;
    }
    .about-text {
        font-size: 12px;
    }
    .breadcrumbs-container {
        margin-top: 50px;
        justify-content: left;
    }
    .breadcrumbs {
        margin-right: auto;
    }

}


.next-content-main {

}

.about-pre {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  margin: 0 auto;
  overflow: hidden;
}

.about-pre::before {
    position: absolute;
    content: '';
    top: 0; /* Положение сверху */
    left: 0; /* Положение слева */
    right: 0; /* Положение справа */
    bottom: 0; /* Положение снизу */
    background: linear-gradient(180deg, rgba(154, 194, 209, 1)50%, rgba(29, 94, 118, 1) 100%);
    z-index: -2;
}


.about-pre-content {
  position: relative;
  z-index: 3;
  width: 80%;
  margin: 20px 0 20px 30px;
  padding: 20px 0;
  order: 1;
}

.about-pre-card {
  background: rgba(12, 64, 83, 0.2);
  border-radius: 223px;
  border: 1px solid #ffffff;
  backdrop-filter: blur(12px);
  padding: 30px;
  width: 100%;
  box-sizing: border-box;
  margin-left: 40px;
}

.about-pre-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 24px 0;
}

.about-pre-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #ffffff;
}

.about-pre-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.about-pre-medium {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  text-align: center;
}

.about-pre-bold {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  text-align: center;
}

.about-pre-paragraph {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

.exact {
    text-shadow: 0px 0px 4px #FFFFFF;
}

.about-pre-icons {
    width: 20%;
    position: relative;
    order: 2;
}

/* Иконки */
.about-pre-icon {
  position: relative;
  width: 78px;
  height: 116px;
  z-index: 2;
  order: 2;
  margin: 10px auto;
}

.about-pre-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Расположение иконок на десктопе */
@media (min-width: 1024px) {
  .about-pre {
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 400px;
  }

  .about-pre-content {
    order: 1;
    width: 70%;
    margin: 40px 0;
  }




  .about-pre-icon {
    position: absolute;
    width: 60px;
    height: 90px;
    margin: 0;
  }

  .icon-1 { top: 40%; right: -25%; }
  .icon-2 { top: 45%; right: 60%; }
  .icon-3 { top: 40%; right: 2%; }
  .icon-4 { top: 60%; right: 45%; }
  .icon-5 { top: 25%; right: 40%; }
  .icon-6 { top: 60%; right: 70%;}
}

    /* Анимация покачивания */
    @keyframes swing {
      0% { transform: rotate(0deg); }
      15% { transform: rotate(8deg); }
      30% { transform: rotate(-6deg); }
      45% { transform: rotate(4deg); }
      60% { transform: rotate(-2deg); }
      75% { transform: rotate(1deg); }
      100% { transform: rotate(0deg); }
    }

    /* Применяем анимацию к каждой иконке с разной задержкой */
    .about-pre-icon {
      animation: swing 3s ease-in-out infinite;
      transform-origin: top center; /* Точка вращения - верхний край */
    }

    /* Разные задержки для каждой иконки */
    .about-pre-icon.icon-1 { animation-delay: 0.1s; }
    .about-pre-icon.icon-2 { animation-delay: 0.3s; }
    .about-pre-icon.icon-3 { animation-delay: 0.5s; }
    .about-pre-icon.icon-4 { animation-delay: 0.2s; }
    .about-pre-icon.icon-5 { animation-delay: 0.4s; }
    .about-pre-icon.icon-6 { animation-delay: 0.6s; }

@media (max-width: 1023px) {
    .about-pre {
        height: 500px;
        margin-bottom: 200px;
        overflow: visible;
    }
     .about-pre-card {
        background: none;
        border: none;
        backdrop-filter: none;
    }
    .about-pre-icons {
        width: 100%;
        display: flex;
    }
    .about-pre-icon.icon-1 { top: 40%; right: -25%;}
    .about-pre-icon.icon-2 { top: 55%; right: -13%; }
    .about-pre-icon.icon-3 { top: 140%; right: -3%; }
    .about-pre-icon.icon-4 { top: 80%; right: 8%; }
    .about-pre-icon.icon-5 { top: 25%; right: 30%; }
    .about-pre-icon.icon-6 { top: 40%; right: 35%;}
}

/* Адаптация для планшетов и мобильных */
@media (max-width: 768px) {
  .about-pre {
    margin-bottom: 120px;
  }

  .about-pre-card {
    padding: none;
  }

  .about-pre-content {
    margin: 0 0 0 0;
  }

  .about-pre-title {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .about-pre-medium {
    font-size: 16px;
  }

  .about-pre-bold {
    font-size: 18px;
  }

  .about-pre-paragraph {
    font-size: 16px;
  }

  .about-pre-icon {
    width: 50px;
    height: 75px;
  }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
  .about-pre {
    margin-bottom: 190px;
  }

  .about-pre-line {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .about-pre-card {
    border-radius: 30px;
    padding: 15px;
  }

  .about-pre-icon {
    width: 40px;
    height: 60px;
  }
}

/* Блок озера леса */

.arr-content-main {
    position: relative
}

.arr-content-main::before {
    position: absolute;
    content: '';
    top: -30px; /* Положение сверху */
    left: 0; /* Положение слева */
    right: 0; /* Положение справа */
    bottom: -70px; /* Положение снизу */
    /* background-image: url('/static/img/customers/bck-lake.png'); */
    background-size: cover; /* Масштабирование изображения, чтобы оно заполнило весь блок */
    background-position: center; /* Центрирование изображения */
    background-repeat: no-repeat; /* Запрет повторения изображения */
    position: absolute;
    z-index: -2;
}

.lake-container {
    display: flex;
    flex-direction: column;
}

.lake-content {
    display: flex;
    flex-direction: row;
    justify-content: right;
    padding-right: 50px;
}


.lake-content-card {
    width: 70%;
    margin: 40px 0;
}

.about-lake-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 25px;
}

.more-icons {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  position: relative;
  overflow: hidden;
}

.more-icons:hover .icon-main {
  transform: scale(1.1); /* Увеличиваем главную иконку */
  transition: transform 0.2s ease;
}

.lake-content-up {
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin-top: 25px;
}

.lake-up-list {
    display: flex;
    flex-direction: row;
    height: 100px;
    justify-content: center;
    padding-left: 150px;
    position: relative
}

.no-bullets {
    list-style-type: none;
}

.lake-list-item {
    color: #ffb866;
    text-align: left;
    font-size: 20px;
    font-weight: 700;
    position: absolute;
    top: 95%;
    left: 200%;
    transform-origin: 0 0;
    transform: rotate(-19deg) scale(1.139, 0.838);
    opacity: 0;
    visibility : hidden;
}



.lake-list-item.active {
    opacity: 1;
    visibility : visible;
    animation: moveAndFade 7s ease-in-out infinite;

}

@keyframes moveAndFade {
    0% {
        top: 95%; /* Начальное значение */
        opacity: 0; /* Начальная непрозрачность */
    }
    25% {
        top: 65%; /* Промежуточное значение */
        left: 190%;
        opacity: 0.3; /* Промежуточная непрозрачность */
    }
    50% {
        top: 35%; /* Промежуточное значение */
        left: 180%;
        opacity: 0.7; /* Промежуточная непрозрачность */
    }
    75% {
        top: 5%; /* Промежуточное значение */
        left: 170%;
        opacity: 0.3; /* Промежуточная непрозрачность */
    }
    100% {
        top: -15%; /* Конечное значение */
        left: 160%;
        opacity: 0; /* Конечная непрозрачность */
    }
}


.lake-content-slider {
    display: flex;
    flex-direction: row;
    height: 100px;
    justify-content: left;
}

.lake-slider-arrows {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-left: 50px;
}

.lake-slide-prev {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.lake-slide-next {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.icon-slider:hover {
    opacity: 0.5;
    cursor: pointer;
}

@media (max-width: 1023px) {
    .lake-container {
        margin-bottom: 550px;
    }

    .lake-content {
        justify-content: center;
        padding-right: 0;
    }
    .about-pre-card.lake-card {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .lake-container {
        margin-bottom: 750px;
    }

    .lake-content-up {
        justify-content: left;
        margin-bottom: 50px;
        margin-left: calc(50vw - 160px);
    }
    .lake-up-list {
        padding-left: 0;
    }
    .lake-content-slider {
        justify-content: center;
    }
    .lake-slider-arrows {
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .lake-container {
        margin-bottom: 1100px;
    }
}


/* Текстовый блок после Lake*/
.about-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 70px;
}

.text-container-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 20px 70px;
}

/* Блок Картины*/
.about-whale-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.whale-container-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 70px;
}

.about-whale-title {
    text-align: center;
    font-size: 48px;
}

.whale-content-image {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.whale-content-text {
    margin-bottom: 50px;
}

.about-pre-paragraph.whale-paragraph {
    color: #3B5762;
}

.whale-capture {
    width: 390px;
    height: 400px;
    margin-bottom: 50px;
}

.whale-content-stars {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.content-stars.capture-one {
    position: relative;
    width: 180px;
    height: 73px;
    perspective: 1000px;
}

.content-stars.capture-two {
    position: relative;
    width: 150px;
    height: 73px;
    perspective: 1000px;
}

.content-stars.capture-three {
    position: relative;
    width: 180px;
    height: 73px;
    perspective: 1000px;
}

.capture-one-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/static/img/customers/capture-one-bg.png');
    background-size: 200% 200%;
    clip-path: polygon(23% 0%, 100% 0%, 85% 100%, 0% 100%);
    animation: smoothBackground 25s linear infinite;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease;
}

.capture-two-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/static/img/customers/capture-two-bg.png');
    background-size: 200% 200%;
    clip-path: polygon(20% 0%, 82% 0%, 100% 100%, 0% 100%);
    animation: smoothBackground 30s linear infinite;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease;
}

.capture-three-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/static/img/customers/capture-three-bg.png');
    background-size: 200% 200%;
    clip-path: polygon(0% 0%, 77% 0%, 100% 100%, 15% 100%);
    animation: smoothBackground 25s linear infinite;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease;
}


@keyframes smoothBackground {
  0% {
    background-position: 20% 20%;
  }
  50% {
    background-position: 90% 20%; /* Сдвигаем на полную ширину */
  }
  50.001% {
    background-position: -90% 20; /* Мгновенный (невидимый) сброс */
  }
  100% {
    background-position: 20% 20%; /* Плавное возвращение */
  }
}


@media (max-width: 786px) {
    .arr-content-main {
        padding-top: 100px;
    }
    .about-whale-title {
        font-size: 40px;
        margin-bottom: 70px;
    }
    .whale-capture {
        width: 303px;
        height: 301px;
        padding-right: 70px;
    }
    .whale-content-stars {
        gap: 20px;
    }
    .content-stars.capture-one {
        width: 180px;
        height: 63px;
    }

    .content-stars.capture-two {
        width: 150px;
        height: 63px;
    }

    .content-stars.capture-three {
        width: 180px;
        height: 63px;
    }
}

@media (max-width: 450px) {
    .about-whale-title {
        font-size: 30px;
    }

    .whale-capture {
        width: 303px;
        height: 301px;
        padding-right: 70px;
    }
    .whale-content-stars {
        gap: none;
       justify-content: space-between;
    }
    .content-stars.capture-one {
        width: 150px;
        height: 40px;
    }

    .content-stars.capture-two {
        width: 120px;
        height: 40px;
    }

    .content-stars.capture-three {
        width: 150px;
        height: 40px;
    }
}