* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

html {
  width: 100vw;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100vw;
  height: 100%;
  margin: 0;
  background-color: white;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

span {
  word-break: break-word;
}

.scroll-container {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.main-frame {
  width: 1920px;
  height: 6480px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 1);
}

.hero-section {
  width: 1920px;
  height: 1094px;
  position: absolute;
  left: -11px;
  top: -7px;
}

.hero-background {
  width: 1942px;
  height: 1080px;
  position: absolute;
  left: 0px;
  top: 7px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(image/d9a41f358220b3a3ab1c5d54936a7c184a090395.png);
}

.hero-overlay {
  width: 1947px;
  height: 1094px;
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: rgba(2.6970930099487305, 2.487030029296875, 2.487030029296875, 0.5699999928474426);
}

.nav {
  position: fixed;
  /* Меню теперь фиксированное */
  top: 20px;
  /* Отступ сверху, можно подогнать */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  /* Подгоняем ширину под старое меню */
  max-width: 1200px;
  /* Чтобы не растягивалось на больших экранах */
  padding: 12px 25px;
  display: flex;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav {
  text-decoration: none;
  color: #222;
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.nav a:hover {
  background: rgba(255, 255, 255, 0.35);
  color: #ff6f00;
}

.nav-container {
  position: fixed;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 960px;
  height: 77px;
  border-radius: 248px;
  overflow: hidden;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.1);




  backdrop-filter: blur(5px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.15),
    0 10px 40px rgba(0, 0, 0, 0.35);
}

.nav-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0.05));
  opacity: 0.3;
  pointer-events: none;
}

.nav-highlight {
  width: 136px;
  height: 71px;
  overflow: hidden;
  position: absolute;
  left: 4px;
  top: 3px;
  border-radius: 104px 104px 104px 104px;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25) inset;
  background-color: rgba(255, 255, 255, 0.07999999821186066);
}

.nav-menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 900px;
}

.nav-item {

  font-size: 22px;
  font-family: "Abyssinica SIL", sans-serif;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: all 0.4s ease;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

.nav-item:hover {
  color: #aef6ff;
  text-shadow:
    0 0 10px rgba(174, 246, 255, 0.9),
    0 0 20px rgba(100, 220, 255, 0.5);
  transform: scale(1.05);
}

.nav-item.active {
  color: #ffffff;
  text-shadow:
    0 0 15px rgba(0, 200, 255, 0.8),
    0 0 25px rgba(0, 255, 255, 0.4);
}

.nav-home {
  left: 0;
}

.nav-projects {
  left: 200px;
}

.nav-about {
  left: 400px;
}

.nav-why {
  left: 600px;
}

.nav-contact {
  left: 800px;
}

.hero-title {
  font-size: 180px;
  font-family: Bona Nova SC;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  line-height: 84.28199887275696%;
  color: rgba(255, 255, 255, 1);
  width: 1058px;
  height: 303px;
  position: absolute;
  left: 47px;
  top: 349px;
}

.stats-card {
  width: 295px;
  height: 251px;
  overflow: hidden;
  position: absolute;
  border-radius: 51px 51px 51px 51px;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25) inset;
  background-color: rgba(255, 255, 255, 0.10000000149011612);
}

.stats-houses {
  left: 983px;
  top: 773px;
}

.stats-number {
  font-size: 64px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 116px;
  height: 77px;
  position: absolute;
  left: 45px;
  top: 71px;
}

.stats-unit {
  font-size: 36px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 161px;
  top: 97px;
  white-space: pre;
  flex-grow: 0;
}

.stats-description {
  font-size: 20px;
  font-family: Aleo;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 171px;
  height: auto;
  position: absolute;
  left: 43px;
  top: 147px;
}

.icon-circle {
  width: 57px;
  height: 58px;
  background-image: url(./image/Ellipse_78_102.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 1103px;
  top: 744px;
}

.icon-image {
  width: 53px;
  height: 54px;
  position: absolute;
  left: 1105px;
  top: 746px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./image/3dc0da50185374e94acc4b0518b87b73fe236a59.png);
}

.stats-warranty {
  left: 1298px;
  top: 778px;
}

.warranty-number {
  font-size: 64px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 76px;
  height: 39px;
  position: absolute;
  left: 72px;
  top: 85px;
}

.warranty-unit {
  font-size: 36px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 148px;
  top: 93px;
  white-space: pre;
  flex-grow: 0;
}

.warranty-description {
  font-size: 20px;
  font-family: Aleo;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 217px;
  height: auto;
  position: absolute;
  left: 39px;
  top: 144px;
}

.star-icon {
  width: 64px;
  height: 64px;
  background-image: url(./image/Ellipse_78_108.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 1415px;
  top: 746px;
}

.star-group {
  width: 68.33642578125px;
  height: 68.33642578125px;
  position: absolute;
  left: 1412.7265625px;
  top: 744.1015625px;
}

.star-shape {
  width: 50.025733947753906px;
  height: 50.025733947753906px;
  background-image: url(./image/Star_78_110.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: -34.168059437543086px;
  top: 34.1681566916215px;
}

.star-dot {
  width: 4.002058506011963px;
  height: 4.002058506011963px;
  background-image: url(./image/Vector_78_111.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
}

.star-dot-1 {
  left: 26.6643009185791px;
  top: 26.164026260375977px;
}

.star-dot-2 {
  background-image: url(./image/Vector_78_112.png);
  left: 39.170753479003906px;
  top: 37.169647216796875px;
}

.star-core {
  width: 16.50849151611328px;
  height: 13.506948471069336px;
  background-image: url(./image/Vector_78_113.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 26.60306618322141px;
  top: 27.70825013555855px;
}

.consultation-button {
  width: 375px;
  height: 78px;
  position: absolute;
  left: 1543px;
  top: 34px;
  border-radius: 39px 39px 39px 39px;
  background-color: rgba(217, 217, 217, 1);
}

.button-circle {
  width: 70.03602600097656px;
  height: 70.03602600097656px;
  position: absolute;
  left: 1843.9482421875px;
  top: 37.73809814453125px;
}

.circle-group {
  width: 70.03602600097656px;
  height: 70.03602600097656px;
  position: absolute;
  left: 0.00014648586511611938px;
  top: -0.000013738870620727539px;
}

.circle-bg {
  width: 70.03602600097656px;
  height: 70.03602600097656px;
  background-image: url(./image/Ellipse_78_118.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0px;
  top: 0px;
}

.consultation-text {
  font-size: 22px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 288px;
  height: 33px;
  position: absolute;
  left: 1555px;
  top: 56px;
}

.arrow-icon {
  width: 28px;
  height: 27px;
  background-image: url(./image/Vector_78_120.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 1864px;
  top: 59px;
  transition: all 1s;
}

.arrow-icon:hover {
  transform: rotate(360deg);
  transition: all 1s;
}

.stats-mortgage {
  left: 1614px;
  top: 778px;
}

.mortgage-rate {
  font-size: 64px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 116px;
  height: 77px;
  position: absolute;
  left: 90px;
  top: 67px;
}

.mortgage-description {
  font-size: 22px;
  font-family: Aleo;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 251px;
  height: 103px;
  position: absolute;
  left: 22px;
  top: 125px;
}

.mortgage-icon {
  width: 65px;
  height: 64px;
  background-image: url(./image/Ellipse_78_124.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 1729px;
  top: 746px;
}

.mortgage-symbol {
  width: 36px;
  height: 29px;
  background-image: url(./image/Vector_78_125.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 1743px;
  top: 765px;
}

.fixed-price {
  font-size: 22px;
  font-family: Aleo;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 289px;
  height: 108px;
  position: absolute;
  left: 44px;
  top: 949px;
}

.scroll-indicator {
  width: 15px;
  height: 29px;
  background-image: url(./image/Vector_78_127.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 966px;
  top: 1053px;
}

.projects-section {
  width: 1776px;
  height: 985px;
  position: absolute;
  left: 75px;
  top: 1144px;
}

.project-image {
  width: 519px;
  height: 376px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 19px 19px 19px 19px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./image/e0a329dd7c56843ea5e784241e8804439c211077.png);
}

.project-1 {
  transform: translateX(calc(-50% + -628.5px)) translateY(calc(-50% + -71.5px));
}

.project-2 {
  transform: translateX(calc(-50% + -0.5px)) translateY(calc(-50% + -71.5px));
}

.project-3 {
  transform: translateX(calc(-50% + 628.5px)) translateY(calc(-50% + -71.5px));
}

.price-button {
  width: 251px;
  height: 64px;
  background-image: url(./image/Vector_78_132.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(calc(-50% + 494.5px)) translateY(calc(-50% + 173.5px));
}

.price-text {
  font-size: 0;
  font-family: Bona Nova SC;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  flex-grow: 0;
}

.price-3 {
  transform: translateX(calc(-50% + 775.5px)) translateY(calc(-50% + 192.5px));
}

.price-span {
  position: relative;
  flex-shrink: 0;
}

.price-small {
  font-size: 15px;
  font-family: Bona Nova SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

.price-medium {
  font-size: 32px;
  font-family: Bona Nova SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

.price-large {
  font-size: 40px;
  font-family: Bona Nova SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

.rating-stars {
  width: 171px;
  height: 21px;
  background-image: url(./image/Vector_78_134.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(calc(-50% + 802.5px)) translateY(calc(-50% + 152px));
}

.empty-rectangle {
  width: 824px;
  height: 86px;
  position: absolute;
  left: 496px;
  top: 899px;
  border-radius: 95px 95px 95px 95px;
  background-color: rgba(217, 217, 217, 0);
}

.calc-button {
  width: 519px;
  height: 66px;
  position: absolute;
  border-radius: 20px 20px 20px 20px;
  border-width: 1px 1px 1px 1px;
  box-sizing: border-box;
  border-style: solid;
  border-color: rgba(0, 0, 0, 1);
  background-color: rgba(217, 217, 217, 0);
}

.calc-3 {
  left: 1257px;
  top: 722px;
}

.calc-text {
  font-size: 24px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 435px;
  height: auto;
  position: absolute;
  left: 1299px;
  top: 741px;
}

.price-button-2 {
  background-image: url(./image/Vector_78_139.png);
  transform: translateX(calc(-50% + -148.5px)) translateY(calc(-50% + 173.5px));
}

.price-button-1 {
  background-image: url(./image/Vector_78_140.png);
  transform: translateX(calc(-50% + -762.5px)) translateY(calc(-50% + 173.5px));
}

.price-2 {
  transform: translateX(calc(-50% + 132.5px)) translateY(calc(-50% + 192.5px));
}

.price-1 {
  transform: translateX(calc(-50% + -481.5px)) translateY(calc(-50% + 192.5px));
}

.rating-2 {
  background-image: url(./image/Vector_78_143.png);
  transform: translateX(calc(-50% + 159.5px)) translateY(calc(-50% + 152px));
}

.rating-1 {
  background-image: url(./image/Vector_78_144.png);
  transform: translateX(calc(-50% + -454.5px)) translateY(calc(-50% + 152px));
}

.calc-2 {
  left: 614px;
  top: 722px;
}

.calc-1 {
  left: 0px;
  top: 722px;
}

.calc-text-2 {
  left: 656px;
  top: 741px;
}

.calc-text-1 {
  left: 42px;
  top: 741px;
}

.section-title {
  font-size: 96px;
  font-family: Aleo;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  top: 0px;
  transform: translateX(calc(-50% + 0px));
  white-space: pre;
  flex-grow: 0;
}

.benefits-section {
  width: 1876px;
  height: 1030px;
  position: absolute;
  left: 25px;
  top: 2236px;
}

.benefits-title {
  font-size: 96px;
  font-family: Aleo;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 1222px;
  height: auto;
  position: absolute;
  left: 50%;
  top: 0px;
  transform: translateX(calc(-50% + -3px));
}

.mortgage-visual {
  width: 926px;
  height: 756px;
  background-image: url(./image/Rectangle_78_152.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0px;
  top: 274px;
}

.info-card {
  width: 925px;
  height: 251px;
  position: absolute;
  left: 951px;
  top: 274px;
  border-radius: 31px 31px 31px 31px;
  background-color: rgba(255, 255, 255, 1);
}

.payment-visual {
  width: 925px;
  height: 480px;
  position: absolute;
  left: 951px;
  top: 550px;
  border-radius: 31px 31px 31px 31px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./image/Rectangle_78_154.png);
}

.mortgage-title {
  font-size: 85px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 601px;
  height: 104px;
  position: absolute;
  left: 20px;
  top: 380px;
}

.calc-button-group {
  width: 323.9670715332031px;
  height: 80.59918975830078px;
  position: absolute;
  left: 20px;
  top: 928.99609375px;
}

.calc-button-bg {
  width: 323.9670715332031px;
  height: 80.59918975830078px;
  position: absolute;
  left: 0px;
  top: 0.00010180752724409103px;
  border-radius: 341px 341px 341px 341px;
  background-color: rgba(0, 0, 0, 1);
  cursor: pointer;
}

.calc-button-text {
  cursor: pointer;
  font-size: 24px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 224.06106567382812px;
  height: 29.58704376220703px;
  position: absolute;
  left: 50.43798828125px;
  top: 25.506174087524414px;
}

.calc-button-rect {
  border-radius: 42px 42px 42px 42px;
}

.payment-title {
  font-size: 48px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 505px;
  height: 119px;
  position: absolute;
  left: 1001px;
  top: 340px;
}

.payment-subtitle {
  font-size: 26px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(89.49519348144531, 89.49519348144531, 89.49519348144531, 1);
  width: 320px;
  height: 104px;
  position: absolute;
  left: 1506px;
  top: 355px;
}

.installment-title {
  font-size: 48px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 322px;
  height: 122px;
  position: absolute;
  left: 996px;
  top: 627px;
}

.installment-card {
  width: 469px;
  height: 380px;
  position: absolute;
  left: 1382px;
  top: 600px;
  border-radius: 35px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
  /* прозрачность для стеклянного эффекта */
  border: 1px solid rgba(255, 255, 255, 0.25);
  /* слегка видимая граница */
  box-shadow: 0px 4px 38px rgba(0, 0, 0, 0.25) inset;
  backdrop-filter: blur(15px) saturate(150%);
  /* эффект размытия и насыщенности */
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  /* кроссбраузерность */
}

/* Текст */
.installment-text {
  font-size: 20px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 0.9);
  /* Контрастный цвет текста */
  width: 381px;
  position: absolute;
  left: 48px;
  top: 110px;
}

/* Плейсхолдер */
.placeholder-frame {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 173px;
  top: 100px;
}

/* Кнопка расчета */
.payment-button {
  cursor: pointer;
  width: 336px;
  height: 72px;
  position: absolute;
  left: 50%;
  top: 250px;
  transform: translateX(-50%);
  border-radius: 73px;
  background-color: rgba(0, 0, 0, 0.9);
  /* темная кнопка */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  /* лёгкая тень для объема */
  backdrop-filter: blur(5px);
  /* размытие фона внутри кнопки */
  display: flex;
}

/* Текст на кнопке */
.payment-button-text {
  cursor: pointer;
  font-size: 24px;
  font-family: Aleo;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  position: absolute;
  left: 124px;
  top: 270px;
}

/* Иконка */
.button-icon {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 394px;
  top: 5px;
  cursor: pointer;
}

.icon-circle-bg {
  width: 70px;
  height: 70px;
  background-image: url(./image/Ellipse_78_171.png);
  /* твой фон */
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 0;
}


.icon-arrow {
  width: 29px;
  height: 28px;
  background-image: url(./image/Vector_78_172.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 21px;
  top: 21px;
}

.benefits-description {
  font-size: 36px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(97.83175659179688, 85.32059478759766, 85.32059478759766, 1);
  width: 1240px;
  height: 165px;
  position: absolute;
  left: 50%;
  top: 143px;
  transform: translateX(calc(-50% + -3px));
}

.mortgage-description-long {
  font-size: 24px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 500px;
  height: 118px;
  position: absolute;
  left: 20px;
  top: 482px;
}

.examples-section {
  width: 1821px;
  height: 955px;
  position: absolute;
  left: 52px;
  top: 3323px;
}

.examples-title {
  transform: translateX(calc(-50% + -15.5px));
}

.house-showcase {
  width: 884px;
  height: 497px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(calc(-50% + -468.5px)) translateY(calc(-50% + -60px));
  border-radius: 12px 12px 12px 12px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./image/Rectangle_78_177.png);
}

.house-image {
  position: absolute;
  border-radius: 13px 13px 13px 13px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.house-3 {
  width: 384px;
  height: 271px;
  left: 500px;
  top: 684px;
  background-image: url(./image/40aeab66f67822fceb04a5bb1f96a4fe647d31c2.png);
}

.house-1 {
  width: 222px;
  height: 271px;
  left: 0px;
  top: 684px;
  border-radius: 12px 12px 12px 12px;
  background-image: url(./image/8182b9fe99a439ee4ec5d98b2f913027d2cd4d5d.png);
}

.house-2 {
  width: 225px;
  height: 271px;
  left: 248px;
  top: 684px;
  border-radius: 12px 12px 12px 12px;
  background-image: url(./image/b4d390c0f12a4b54437841a29085c40c28e2bd44.png);
}

.specs-group {
  position: absolute;
}

.specs-size {
  width: 100px;
  height: 72px;
  left: 914px;
  top: 345px;
}

.specs-label {
  font-size: 20px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(71.84135437011719, 71.84135437011719, 71.84135437011719, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  white-space: pre;
  flex-grow: 0;
}

.specs-value {
  font-size: 40px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 0px;
  top: 24px;
  white-space: pre;
  flex-grow: 0;
}

.specs-payment {
  width: 194px;
  height: 72px;
  left: 1595px;
  top: 345px;
}

.house-price {
  font-size: 64px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 1357px;
  top: 762px;
  white-space: pre;
  flex-grow: 0;
}

.house-name {
  font-size: 60px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 914px;
  top: 169px;
  white-space: pre;
  flex-grow: 0;
}

.house-description {
  font-size: 24px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(97.83175659179688, 85.32059478759766, 85.32059478759766, 1);
  width: 907px;
  height: auto;
  position: absolute;
  left: 914px;
  top: 241px;
}

.specs-area {
  width: 115px;
  height: 72px;
  left: 1104px;
  top: 346px;
}

.specs-duration {
  width: 196px;
  height: 72px;
  left: 1309px;
  top: 346px;
}

.duration-value {
  left: 41px;
}

.more-examples {
  cursor: pointer;
  width: 824px;
  height: 86px;
  position: absolute;
  left: 968px;
  top: 853px;
  border-radius: 95px 95px 95px 95px;
  border-width: 2px 2px 2px 2px;
  box-sizing: border-box;
  border-style: solid;
  border-color: rgba(0, 0, 0, 1);
  background-color: rgba(217, 217, 217, 0);
}

.more-examples-text {
  cursor: pointer;
  font-size: 36px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 662px;
  height: auto;
  position: absolute;
  left: 1049px;
  top: 870px;
}

.trust-section {
  width: 1872px;
  height: 1029px;
  position: absolute;
  left: 27px;
  top: 4335px;
}

.trust-visual {
  width: 926px;
  height: 503px;
  background-image: url(./image/Rectangle_78_198.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 3.0799866998555934e-14px;
  top: 0px;
}

.feature-card {
  width: 453px;
  height: 503px;
  position: absolute;
  border-radius: 29px 29px 29px 29px;
  background-color: rgba(232.68751525878906, 232.68751525878906, 232.68751525878906, 1);
}

.feature-1 {
  left: 0px;
  top: 526px;
}

.feature-2 {
  left: 946px;
  top: 0px;
}

.feature-3 {
  left: 473px;
  top: 526px;
}

.feature-4 {
  left: 1419px;
  top: 0px;
}

.trust-visual-2 {
  width: 925px;
  height: 503px;
  background-image: url(./image/Rectangle_78_203.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 945px;
  top: 526px;
}

.feature-icon {
  width: 71px;
  height: 71px;
  background-image: url(./image/Ellipse_78_204.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;

}

.icon-1 {
  left: 958px;
  top: 46px;
}

.icon-2 {
  background-image: url(./image/Ellipse_78_205.png);
  left: 12px;
  top: 571px;
}

.icon-3 {
  background-image: url(./image/Ellipse_78_206.png);
  left: 485px;
  top: 571px;
}

.feature-title {
  font-size: 32px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  position: absolute;
}

.feature-1-title {
  width: 291px;
  height: 58px;
  left: 1041px;
  top: 43px;
}

.feature-description {
  font-size: 24px;
  font-family: Aleo;
  font-weight: 200;
  letter-spacing: 0em;
  color: rgba(94.39904022216797, 94.39904022216797, 94.39904022216797, 1);
  position: absolute;
}

.feature-1-desc {
  width: 355px;
  height: 96px;
  left: 20px;
  top: 891px;
}

.feature-2-desc {
  width: 348px;
  height: 98px;
  left: 966px;
  top: 365px;
}

.feature-3-desc {
  width: 355px;
  height: 96px;
  left: 493px;
  top: 891px;
}

.feature-2-title {
  width: 347px;
  height: 74px;
  left: 95px;
  top: 568px;
}

.icon-4 {
  background-image: url(./image/Ellipse_78_212.png);
  left: 1431px;
  top: 46px;
}

.feature-4-title {
  width: 347px;
  height: 58px;
  left: 1514px;
  top: 43px;
}

.feature-3-title {
  width: 347px;
  height: auto;
  left: 568px;
  top: 568px;
}

.feature-4-desc {
  width: 348px;
  height: 98px;
  left: 1439px;
  top: 365px;
}

.feature-icon-small {
  width: 44.27427673339844px;
  height: 44.27427673339844px;
  background-image: url(./image/Group_78_216.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 1444px;
  top: 59px;
}

.trust-quote {
  font-size: 96px;
  font-family: Aleo;
  font-weight: 400;
  text-align: right;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 719px;
  height: 487px;
  position: absolute;
  left: 1131px;
  top: 534px;
}

.feature-icon-2 {
  width: 44px;
  height: 44px;
  background-image: url(./image/Group_78_220.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 26px;
  top: 585px;
}

.feature-icon-3 {
  width: 44px;
  height: 44px;
  background-image: url(./image/Group_78_223.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 499px;
  top: 585px;
  z-index: 9999;
}

.feature-icon-4 {
  width: 47.319602966308594px;
  height: 47.319602966308594px;
  background-image: url(./image/Group_78_226.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 970px;
  top: 58px;
}

.trust-title {
  font-size: 96px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 596px;
  height: 256px;
  position: absolute;
  left: 20px;
  top: 47px;
}

.footer-section {
  width: 1920px;
  height: 1060px;
  position: absolute;
  left: 3px;
  top: 5421px;
}

.footer-bg {
  width: 100%;
  height: 540px;
  position: absolute;
  left: -5px;
  top: 520px;
  background-color: rgba(0, 0, 0, 0.9900000095367432);
}

.contract-title {
  font-size: 64px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 1522px;
  height: auto;
  position: absolute;
  left: 50%;
  top: 0px;
  transform: translateX(calc(-50% + -48px));
}

.contract-button {
  width: 718.0328979492188px;
  height: 123.22410583496094px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(calc(-50% + -67.98355102539062px)) translateY(calc(-50% + -197.38794708251953px));
  display: flex;
}

.contract-button-bg {
  width: 718px;
  height: 123px;
  cursor: pointer;


  border-radius: 118px 118px 118px 118px;
  background-color: rgba(0, 0, 0, 1);
}

.contract-button-text {
  cursor: pointer;
  font-size: 36px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 180px;
  top: 35px;
  white-space: pre;
  flex-grow: 0;
}

.footer-icon {
  width: 106px;
  height: 106px;
  background-image: url(./image/Ellipse_78_235.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 1135px;
  top: 280px;
}

.footer-arrow {
  width: 44px;
  height: 42px;
  background-image: url(./image/Vector_78_236.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 1167px;
  top: 312px;
}

.company-name {
  font-size: 190px;
  font-family: Bona Nova SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  width: 739px;
  height: 218px;
  position: absolute;
  left: 70px;
  top: 500px;
  text-shadow: -1px -1px 0 rgba(255, 255, 255, 1),
    1px -1px 0 rgba(255, 255, 255, 1),
    -1px 1px 0 rgba(255, 255, 255, 1),
    1px 1px 0 rgba(255, 255, 255, 1);
}

.company-subtitle {
  padding-top: 1%;
  font-size: 53px;
  font-family: Bona Nova SC;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 738px;
  height: 120px;
  position: absolute;
  left: 60px;
  top: 680px;
}

.footer-link {
  font-size: 24px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  position: absolute;
}

.privacy-policy {
  width: 379px;
  height: auto;
  left: 70px;
  top: 979px;
}

.public-offer {
  width: auto;
  height: auto;
  left: 501px;
  top: 1011px;
  white-space: pre;
  flex-grow: 0;
}

.divider {
  width: 379px;
  height: 0px;
  background-image: url(./image/Line_78_241.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 70px;
  top: 1035.5px;
}

.divider-short {
  width: 222px;
  height: 0px;
  background-image: url(./image/Line_78_242.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 501px;
  top: 1035.5px;
}

.footer-nav-title {
  font-size: 24px;
  font-family: Aleo;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 1251px;
  top: 590px;
  white-space: pre;
  flex-grow: 0;
}

.footer-nav-item {
  font-size: 24px;
  font-family: Aleo;
  font-weight: 400;
  text-align: right;
  letter-spacing: 0em;
  color: rgba(160.60096740722656, 160.60096740722656, 160.60096740722656, 1);
  width: auto;
  height: auto;
  position: absolute;


}

.nav-portfolio {
  left: 1289px;
  top: 629px;
}

.nav-examples {
  left: 1229px;
  top: 668px;
}

.nav-calc {
  left: 1215px;
  top: 707px;
}

.nav-works {
  left: 1261px;
  top: 746px;
}

.nav-guarantees {
  left: 1244px;
  top: 785px;
}

.nav-contract {
  left: 1324px;
  top: 824px;
}

.contact-title {
  font-size: 32px;
  font-family: Aleo;
  font-weight: 400;
  text-align: right;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 337px;
  height: auto;
  position: absolute;
  left: 1558px;
  top: 587px;
}

.contact-subtitle {
  font-size: 15px;
  font-family: Aleo;
  font-weight: 400;
  text-align: right;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: 307px;
  height: auto;
  position: absolute;
  left: 1586px;
  top: 628px;
}

.social-icon {
  width: 44px;
  height: 44px;
  background-image: url(./image/Group_78_252.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 1850px;
  top: 666px;
  cursor: pointer;
}

.social-icon-2 {
  background-image: url(./image/Group_78_255.png);
  left: 1786px;
  top: 666px;
}

.copyright {
  font-size: 20px;
  font-family: Aleo;
  font-weight: 400;
  text-align: right;
  letter-spacing: 0em;
  color: rgba(255, 255, 255, 1);
  width: auto;
  height: auto;
  position: absolute;
  left: 1778px;
  top: 1018px;
  white-space: pre;
  flex-grow: 0;
}

.hidden-rectangle {
  width: 464px;
  height: 70px;
  position: absolute;
  left: 50%;
  top: 2106px;
  transform: translateX(calc(-50% + 0px));
  display: none;
  border-radius: 40px 40px 40px 40px;
  background-color: rgba(240.0432891845703, 237.0427703857422, 237.0427703857422, 1);
}

.more-button {
  width: 554px;
  height: 81px;
  transition: all 0.4s ease;
  position: absolute;
  left: 36%;
  top: 2100px;


  height: 70px;
  border-radius: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;

  /* Liquid Glass основа */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 4px rgba(255, 255, 255, 0.3),
    0 6px 30px rgba(0, 0, 0, 0.35);



}

.more-button::before {
  transition: all 0.4s ease;

  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      rgba(255, 255, 255, 0.25) 100%);
  background-size: 200% 200%;
  animation: shimmer 6s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.4;
}




/* активное нажатие */
.more-button:active {
  transition: all 0.4s ease;
  transform: translateX(-50%) scale(0.97);
}

/* анимации */
@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}



.more-button-text {

  font-size: 36px;
  font-family: Aleo;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 1);
  width: 662px;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(calc(-50% + 0px)) translateY(calc(-50% + 0px));
}

.container {
  width: 100%;
  height: 100%;
}

.container>* {
  width: 100%;
  height: 100%;
}

@media (max-width: 500px) {
  .nav-container {
    display: none;
  }

  .consultation-text {
    font-size: 22px;
    font-family: Aleo;
    font-weight: 400;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    letter-spacing: 0em;
    color: rgba(0, 0, 0, 1);
    width: 288px;
    height: 33px;
    position: absolute;
    left: 1555px;
    top: 56px;
    position: fixed;
    z-index: 9999;
  }
}