@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;800;900&display=swap);



html {
  scroll-behavior: smooth;

}

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

body {
  position: relative;  
  height: 100vh;  
}

/* From Uiverse.io by Nawsome */
.pl {
  display: block;
   position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pl__arrows,
.pl__ring-rotate,
.pl__ring-stroke,
.pl__tick {
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pl__arrows {
  animation-name: arrows42;
  transform: rotate(45deg);
  transform-origin: 16px 52px;
}

.pl__ring-rotate,
.pl__ring-stroke {
  transform-origin: 80px 80px;
}

.pl__ring-rotate {
  animation-name: ringRotate42;
}

.pl__ring-stroke {
  animation-name: ringStroke42;
  transform: rotate(-45deg);
}

.pl__tick {
  animation-name: tick42;
}

.pl__tick:nth-child(2) {
  animation-delay: -1.75s;
}

.pl__tick:nth-child(3) {
  animation-delay: -1.5s;
}

.pl__tick:nth-child(4) {
  animation-delay: -1.25s;
}

.pl__tick:nth-child(5) {
  animation-delay: -1s;
}

.pl__tick:nth-child(6) {
  animation-delay: -0.75s;
}

.pl__tick:nth-child(7) {
  animation-delay: -0.5s;
}

.pl__tick:nth-child(8) {
  animation-delay: -0.25s;
}

/* Animations */
@keyframes arrows42 {
  from {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(405deg);
  }
}

@keyframes ringRotate42 {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(720deg);
  }
}

@keyframes ringStroke42 {

  from,
  to {
    stroke-dashoffset: 452;
    transform: rotate(-45deg);
  }

  50% {
    stroke-dashoffset: 169.5;
    transform: rotate(-180deg);
  }
}

@keyframes tick42 {

  from,
  3%,
  47%,
  to {
    stroke-dashoffset: -12;
  }

  14%,
  36% {
    stroke-dashoffset: 0;
  }
}


.container {
  opacity: 0;
  width: 1200px;
  height: 6000px;
  margin: 0 auto;
  background: #FFFFFF;
  transition: all 2s ease-in-out;
}

.header {
  position: relative;
  height: 84px;
  display: flex;
  justify-content: flex-end;
  gap: 68px;
  align-items: center;
}

.uaButton {
  position: absolute;
  top: -60px;
  left: 120px;
  height: 30px;
  width: 40px;
  background: none;
  border: none;
  cursor: pointer
}

.engButton {
  position: absolute;
  top: -60px;
  left: 270px;
  height: 30px;
  width: 40px;
  background: none;
  border: none;
  cursor: pointer
}

.header-item {
  flex-grow: 0;
  color: #636769;
  text-decoration: none;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 30px;

}

.main-button {
  background: #6157AB;
  width: 158px;
  height: 54px;
  border-radius: 5px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  border: none;
  color: white;
  margin-right: 83px;
}


.main {
  position: relative;
  height: 1200px;
  background: rgb(24, 59, 255);

}

.main-group {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.first {
  width: 1200px;
  height: 1200px;

}

.clock {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 650px;
  top: 70px;
  height: 150px;
  width: 150px;
  background: #ffffff;
  border-radius: 50%;
  border: 7px solid orange;
  box-sizing: content-box;
}

.sec {
  position: absolute;
  height: 40%;
  width: 0.5px;
  background: #000000;
  transform-origin: 50% 100%;
  margin-top: -40%;
}

.min {
  position: absolute;
  height: 32%;
  width: 2px;
  background: #000000;
  transform-origin: 50% 100%;
  margin-top: -32%;
}

.hour {
  position: absolute;
  height: 20%;
  width: 2.5px;
  background: #000000;
  transform-origin: 50% 100%;
  margin-top: -20%;
}

.numbers,
.cline {
  display: flex;
  justify-content: center;
  position: absolute;
  font-size: 18px;
  color: #ff0000;
  text-shadow: 1px 1px 3px #ccc;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

.numbers:nth-child(1) {
  transform: rotate(30deg);
}

.numbers:nth-child(2) {
  transform: rotate(60deg);
}

.numbers:nth-child(3) {
  transform: rotate(90deg);
}

.numbers:nth-child(4) {
  transform: rotate(120deg);
}

.numbers:nth-child(5) {
  transform: rotate(150deg);
}

.numbers:nth-child(6) {
  transform: rotate(180deg);
}

.numbers:nth-child(7) {
  transform: rotate(210deg);
}

.numbers:nth-child(8) {
  transform: rotate(240deg);
}

.numbers:nth-child(9) {
  transform: rotate(270deg);
}

.numbers:nth-child(10) {
  transform: rotate(300deg);
}

.numbers:nth-child(11) {
  transform: rotate(330deg);
}

.clock-line:nth-child(13) {
  transform: rotate(15deg);
}

.cline:nth-child(14) {
  transform: rotate(45deg);
}

.cline:nth-child(15) {
  transform: rotate(75deg);
}

.cline:nth-child(16) {
  transform: rotate(105deg);
}

.cline:nth-child(17) {
  transform: rotate(135deg);
}

.cline:nth-child(18) {
  transform: rotate(165deg);
}

.cline:nth-child(19) {
  transform: rotate(195deg);
}

.cline:nth-child(20) {
  transform: rotate(225deg);
}

.cline:nth-child(21) {
  transform: rotate(255deg);
}

.cline:nth-child(22) {
  transform: rotate(285deg);
}

.cline:nth-child(23) {
  transform: rotate(315deg);
}

.cline:nth-child(24) {
  transform: rotate(345deg);
}

.cline {
  line-height: 15px;
  font-size: 20px;
  font-family: initial;
}

.center {
  position: absolute;
  height: 7.5px;
  width: 7.5px;
  background: #000000;
  border-radius: 50%;
}

.main-img {
  position: absolute;
  top: 0;
  width: 575px;
  height: 743px;
  top: 75px;
  left: 626px;
  opacity: 1;

}

.box {
  background: #000;
  animation: visible 2s ease-out forwards;
  animation-timeline: scroll(root block);
  margin: 0 auto;
}

@keyframes move {
  0% {
    transform: rotate(-5deg);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.main-title {
  width: 616px;
  height: 212px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 64px;
  line-height: 70.4px;
  letter-spacing: 1px;
  background: firebrick;
  margin: 96px 0 0 0;
}

.main-text {
  width: 599px;
  height: 68px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 20px;
  line-height: 34px;
  letter-spacing: 0.05px;
  background: darkcyan;
}

.main-buttons {
  display: flex;
  width: 316px;
}

.main-button {
  width: 158px;
  height: 54px;
  opacity: 1;
  top: 542px;
  left: 60px;
  border-radius: 5px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

.colored {
  border: none;
  background: rgba(97, 87, 171, 1);
  color: white;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

.uncolored {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: none;
  color: rgba(97, 87, 171, 1);
  border: none;
}

.line {
  width: 93px;
  height: 1px;
  background: rgba(97, 87, 171, 1);
}

.button-text {
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0%;
  text-transform: capitalize;
  color: rgba(97, 87, 171, 1);
}

.companies-title {
  width: 100px;
  height: 17px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(150, 151, 154, 1);
  background: white;
}

.companies {
  justify-content: center;
  flex-direction: column;
  gap: 39px;
  margin-top: 119px;
}

.companies-imgs {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 116px;
  width: 582px;
  background: #000;
}

.second-page {
  width: 1200px;
  bottom: 100px;
  background: #2489d1;
}

.second-title {
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 52px;
  line-height: 64.8px;
  letter-spacing: 0.68px;
  text-align: center;
  color: #333333;
  margin: 0 0 0 388px;
}



.second-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-top: 62px;
  height: 60px;
  width: 100%;
  background: #43fd59;
}

.secondt-title {
  width: 367px;
  height: 104px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 40px;
  line-height: 52px;
  letter-spacing: 0%;
  color: #363B3D;
  background: teal;
}

.secondclass {
  display: flex;
  justify-content: center;
}

.button {
  font-family: Roboto;
  height: 60px;
  border-radius: 6.8px;
  border-width: 1px;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 2.32px;
  text-transform: uppercase;
  background: #eed80f;
  color: #6157AB;
  padding: 12.5px 15px;
}

.new-house {
  width: 466px;
  height: 494px;
  background: #9ed433;
  margin: 130px 85px 0px 134px;
}

.agents {
  width: 400px;
  height: 24px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 2.32px;
  text-transform: uppercase;
  background: #269491;
}

.second-title {
  width: 400px;
  height: 104px;
  top: 1437px;
  left: 685px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 40px;
  line-height: 52px;
  letter-spacing: 0%;
  background: #e9329362;
}

.second-text {
  width: 381px;
  height: 120px;
  top: 1573px;
  left: 685px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 21px;
  line-height: 30px;
  letter-spacing: 0%;
  background: #ed4747;
}

.certified {
  width: 223px;
  height: 54px;
  top: 1723px;
  left: 685px;
  border-radius: 5px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.5px;
  background: #6157AB;
  color: white;
}

.mini {
  display: flex;
  justify-content: center;
  align-items: center;
}

.money {
  width: 20px;
  height: 34px;
}

.moneybg1 {
  width: 70px;
  height: 70px;
  top: 1928px;
  left: 211px;
  background: #574D9C;
  padding: 18px 25px;
}

.moneybg2 {
  width: 70px;
  height: 70px;
  top: 1928px;
  left: 211px;
  background: #574D9C;
  padding: 19px 17px;
  margin: 0 284px 0 284px;
}

.pen {
  width: 32px;
  height: 36px;
}

.moneybg3 {
  width: 70px;
  height: 70px;
  top: 1928px;
  left: 211px;
  background: #574D9C;
  padding: 14px 17px;
}

.mhouse {
  width: 36;
  height: 42;
  top: 1942px;
  left: 936px;
}

.keep {
  height: 19px;
  top: 2020px;
  left: 853px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  line-height: 18.9px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  margin: 22px 0 0 0;
}

.write {
  height: 19px;
  top: 2020px;
  left: 853px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  line-height: 18.9px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  margin: 22px 0 0 0;
}

.guaranteed {
  height: 19px;
  top: 2020px;
  left: 853px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  line-height: 18.9px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  margin: 22px 0 0 0;
}


.good-company {
  width: 600px;
  height: 65px;
  top: 2194px;
  left: 321px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 51px;
  line-height: 64.8px;
  letter-spacing: 0.68px;
  text-align: center;
  color: #323A5B;
  margin: 135px 321px 67px 321px;
  background: #d38d53;
}

.third-text {
  width: 436px;
  height: 168px;
  opacity: 1;
  top: 2331px;
  left: 123px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 26px;
  line-height: 42px;
  letter-spacing: 0px;
  text-align: center;
  margin: 0 0 0 123px;
  background: #274dbf;
}

.edgar-photo {
  display: flex;
}

.edgar {
  width: 72px;
  height: 72px;
  top: 2510px;
  left: 233px;
  border-radius: 100px;
}

.gonzalez {
  width: 129px;
  height: 17px;
  top: 2523px;
  left: 319px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #636769;
}

.exp {
  width: 96px;
  height: 30px;
  top: 2539px;
  left: 319px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
  color: #636769;
}

.dog {
  display: flex;
  width: 479px;
  height: 491px;
  top: 2326px;
  left: 600px;
  border-radius: 20px;

}

.third-nd {
  width: 425px;
  height: 60px;
  top: 2673px;
  left: 128px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0%;
  text-align: center;
}

.LearnMore {
  width: 148px;
  height: 56px;
  top: 2761px;
  left: 267px;
  border-radius: 5px;
  border-width: 1px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.5px;
  border: 5px #574D9C;
  align-items: center;
}

.indel {
  display: flex;
  justify-content: center;
}

.sn {
  justify-content: center;
  width: 211px;
  height: 105px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 69px;
  line-height: 104.04px;
  letter-spacing: 0%;
  margin: 0 0 0 113px;
  color: #323A5B;
}

.st {
  justify-content: center;
  width: 167px;
  height: 19px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  line-height: 18.9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 50px 0 130px;
  color: #323A5B;
}

.tn {
  justify-content: center;
  width: 261px;
  height: 105px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 72px;
  line-height: 104.04px;
  letter-spacing: 0%;
  margin: 0 140px;
  color: #323A5B;
}

.tt {
  justify-content: center;
  width: 69px;
  height: 19px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  line-height: 18.9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 240px 0 230px;
  color: #323A5B;
}

.bn {
  justify-content: center;
  width: 180px;
  height: 105px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 70px;
  line-height: 104.04px;
  letter-spacing: 0%;
  color: #323A5B;
}

.bt {
  justify-content: center;
  width: 130px;
  height: 19px;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  line-height: 18.9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 0 30px;
  color: #323A5B;
}



.our-solutions {
  position: absolute;
  width: 1200px;
  height: 1111px;
  top: 3136px;
  background: #F5F4F2;

}

.our-solutions-purple {
  position: absolute;
  width: 1080px;
  height: 1111px;
  left: 60px;
  border-bottom-right-radius: 19px;
  border-bottom-left-radius: 19px;
  background: #574D9C;
}

.our-title {
  position: absolute;
  width: 400px;
  height: 65px;
  top: 72px;
  left: 383px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 51px;
  line-height: 64px;
  text-align: center;
  color: #ffffff;
}

.our-buttons {
  position: absolute;
  top: 176px;
  height: 60px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px 31px;
  border-radius: 6.8px;
}

.our-purple {
  border: 1px solid #ffffff;
  background: #574D9C;
  color: #ffffff;
}

.our-button1 {
  border: 1px solid #6157AB;
  background: #ffffff;
  color: #574D9C;
  left: 61px;
}

.our-button2 {
  left: 428px;
}

.our-button3 {
  left: 723px;
}

.our-field {
  position: absolute;
  width: 752px;
  height: 643px;
  top: 324px;
  left: 164px;
  border-radius: 12px;
  background: #FFFFFF;
}

.our-photo {
  position: absolute;
  top: 32px;
  left: 32px;
}

.circle {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 42px;
  left: 42px;
  border-radius: 100px;
  background: #7569CF;
}

.r {
  position: absolute;
  top: 42px;
  left: 42px;
}

.rectangle {
  position: absolute;
  width: 127px;
  height: 29px;
  top: 178px;
  left: 229px;
  background: #333;
}

.orlando {
  position: absolute;
  width: 94px;
  height: 17px;
  top: 182px;
  left: 247px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 2px;
  color: #ECEAF8;
}

.our-info {
  position: absolute;
  width: 324px;
  height: 397px;
  top: 207px;
  left: 32px;
  background: #E7ECEE45;
}

.our-lines {
  position: absolute;
  width: 80px;
  height: 1px;
  top: 43px;
  background: #C7C1F3;
}

.our-line1 {
  left: 24px;
}

.our-line2 {
  left: 228px;
}

.home {
  position: absolute;
  width: 111;
  height: 30;
  top: 28px;
  left: 110px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 11px;
  line-height: 30px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #363B3D;
}

.r-protection {
  position: absolute;
  top: 84px;
  left: 204px;
}

.our-long-lines {
  position: absolute;
  width: 285px;
  height: 1px;
}

.our-long-line-l {
  top: 175px;
  left: 24px;
  background: #C7C1F3;
}

.arrowl {
  position: absolute;
  top: 334px;
  left: 20px;
}

.arrowr {
  position: absolute;
  top: 334px;
  left: 966px;
}

.dots {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 1007px;
  border-radius: 100px;
  border: 1px solid #ffffff
}

.the {
  position: absolute;
  left: 24px;
  width: 45px;
  height: 60px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 11px;
  line-height: 30px;
  color: #363B3D;
}

.buyer {
  top: 205px;
}

.seller {
  top: 297px;
}

.got {
  position: absolute;
  left: 118px;
  width: 180px;
  height: 44px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #636769;
}

.buy {
  top: 205px;
}

.sell {
  top: 297px;
}

.turn {
  position: absolute;
  width: 266px;
  height: 71px;
  top: 151px;
  left: 404px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 32px;
  line-height: 35px;
  color: #2B2B2B;
}

.turn-txt {
  position: absolute;
  width: 285px;
  height: 90px;
  top: 259px;
  left: 404px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #636769;
}

.turn-button {
  position: absolute;
  width: 135px;
  height: 54px;
  top: 415px;
  left: 404px;
  border-color: #7569CF;
  border-style: solid;
  border-radius: 5px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  background: #7569CF;
}

.our-long-line-r {
  top: 532px;
  left: 404px;
  background: #9AA6AC;
}

.book {
  position: absolute;
  top: 558px;
  left: 404px;
}

.read {
  position: absolute;
  top: 558px;
  left: 439px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #6157AB;
}



.dot1 {
  left: 504px;
  background: #ffffff;
}

.dot2 {
  left: 534px;
  background: none;
}

.dot3 {
  left: 560px;
  background: none;
}