* {
  box-sizing: border-box;
}

/* .container {
      width: 1500px;
      height: 1200px;
      border: solid 2px red;
    }
    
    .container_2 {
      width: 1500px;
      height: 1200px;
      border-radius: 10%;
      border: solid 2px red;
    } */

@font-face {
  font-family: "Clash Display";
  src: url("clash-display/ClashDisplayRegular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Clash Display";
}

.row {
  /* border: solid 2px blue; */
  width: 1090px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: relative;
  left: 175px;
  top: 40px;
}

.row > div {
  /* border: solid 2px red; */
  border-radius: 5px;
  height: 60px;
}

.col1 {
  flex: 0 0 200px;
}
.col2 {
  flex: 0 2 100px;
}
.col3 {
  flex: 0 1 100px;
}
.col4 {
  flex: 0 1 100px;
}
.col5 {
  flex: 0 1 100px;
}
.col6 {
  flex: 0 2 100px;
}
.col7 {
  flex: 0 0 200px;
  display: flex;
  justify-content: flex-end;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  /* border: solid 2px red; */
  align-content: center;
  width: 180px;
}

.download-button {
  width: 180px;
  height: 60px;
  padding: 10px 20px;
  font-family: "Clash Display", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
  background-color: #000000;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.download-button:hover {
  background-color: #464444;
}

.home,
.abt_us,
.price,
.features {
  font-family: Clash Display, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  transition: transform 0.3s;
}

.home {
  font-weight: 700;
  color: #ff5555;
}

.home:hover,
.abt_us:hover,
.price:hover,
.features:hover {
  transform: scale(1.1);
}

.logo-image {
  transition: transform 0.3s;
}

.logo-image:hover {
  transform: scale(1.1);
}

.content_row {
  /* border: solid 2px blue; */
  width: 1300px;
  display: flex;
  height: 500px;
  flex-direction: row;
  justify-content: center;
  position: relative;
  left: 175px;
  top: 105px;
}

.body_col_1 {
  display: flex;
  flex-direction: column;
  flex: 0 0 650px;
  /* border: solid 2px red; */
  border-radius: 5px;
}

.body_col_2 {
  flex: 0 0 650px;
  flex-direction: column;
  /* border: solid 2px red; */
  border-radius: 5px;
}

.row2_image {
  /* border: solid 2px red; */
  position: relative;
  height: 400px;
  width: 650px;
}

.row2_image img {
  position: relative;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: -60px;
  left: 120px;
}

.row2_heading {
  /* border: solid 2px red; */
  position: relative;
  top: -350px;
}

.body_heading {
  font-family: "Clash Display", sans-serif;
  font-weight: 1000;
  line-height: 64px;
  font-size: 64px;
}

.row2 {
  position: relative;
  /* border: solid 2px rgb(0, 255, 81); */
  top: -400px;
  width: 638px;
  height: 56px;
  gap: 0px;
  opacity: 0.5px;
}

.description {
  position: relative;
  top: 0px;
  width: 562px;
  height: 140px;
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  /* or 156% */
  text-transform: capitalize;

  color: #000000;

  opacity: 0.5;
}

.row3 {
  position: relative;
  top: -400px;
  left: -40px;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}

.get_started {
  width: 190px;
  height: 70px;
}

.get_started,
.watch_video img {
  transition: transform 0.1s ease-in-out;
}

.get_started:hover,
.watch_video:hover {
  transform: scale(1.08);
}

.row3 > * {
  margin: 40px; /* add a 10px gap between flex items */
}

.watch_video {
  position: relative;
  top: 20px;
  width: 140px;
  height: 40px;
}

.row4 {
  position: relative;
  top: -400px;
  left: -40px;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}

/* Star 8 */
.star {
  position: absolute;
  width: 48px;
  height: 48px;
  left: 200px;
  transform: rotate(45deg);
}

.roadmap {
  position: relative;
  top: -70px;
  left: 50px;
}

.base_mobile {
  position: relative;
  top: -600px;
  left: 100px;
}

.back-1 {
  position: relative;
  top: 300px;
}

.phone_2 {
  position: relative;
  top: -1400.6px;
  left: 90px;
}

.phone_1 {
  position: relative;
  top: -2300.6px;
  left: -50px;
}

.page2 {
  position: relative;
  top: 500px;
  display: flex;
  flex-direction: row;
}

.p2col1,
.p2col2 {
  display: flex;
  flex-direction: column;

  width: 750px;
  height: 719px;
  /* border: #000000 solid 2px; */
}

.p2col1 > div {
  flex-grow: 1;
  height: 175px;
  width: 750px;
  /* border: #000000 solid 2px; */
}

.p2col2 > div {
  flex-grow: 1;
  height: 175px;
  width: 750px;
  /* border: #000000 solid 2px; */
}
.star2 {
  position: relative;
  top: -330px;
  left: -600px;
}
.p2r2 img {
  position: relative;
  top: -190px;
  left: 50px;
}

.p2r3 img {
  position: relative;
  width: 249.25px;
  height: 504.32px;
  top: -275px;
  left: 225px;
}

.p2r4 img {
  position: relative;
  width: 222.26px;
  height: 480.96px;
  top: -445px;
  left: 240px;
}

.page3 {
  position: relative;
  top: 500px;
  display: flex;
  flex-direction: row;
}

.p3col1,
.p3col2 {
  display: flex;
  flex-direction: column;

  width: 750px;
  height: 719px;
  /* border: #000000 solid 2px; */
}

.p3col1 > div {
  flex-grow: 1;
  height: 175px;
  width: 750px;
  /* border: #000000 solid 2px; */
}

.p3col2 > div {
  flex-grow: 1;
  height: 175px;
  width: 750px;
  /* border: #000000 solid 2px; */
}
.star3 {
  position: relative;
  top: -400px;
}

.page4 {
  position: relative;
  top: 500px;
  display: flex;
  flex-direction: row;
}

.p4col1,
.p4col2 {
  display: flex;
  flex-direction: column;

  width: 700px;
  height: 719px;
  /* border: #000000 solid 2px; */
  margin-left: -20px;
}

.blur4 {
  filter: blur(10px);
  position: relative;
  right: -300px;
  object-fit: cover;
  top: -150px;
}

.page2h1 {
  font-family: Clash Display;
  font-size: 50px;
  font-weight: 1400;
  line-height: 48px;
  text-align: left;
}

.custom-bullet-points ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-bullet-points li {
  position: relative;
  top: 200px;
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.custom-bullet-points li img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.p3cols {
  display: flex;
  flex-direction: row;
}

.p3cols > div {
  /* border: #000000 solid 2px; */

  height: 178px;
  width: 300px;
}

.div1 {
  display: flex;
  flex-grow: 1;
}
.div2 {
  flex-grow: 45;
}

.p3 {
  font-family: Clash Display;
  font-size: 18px;
  color: #ff5555;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.16em;
  text-align: left;
  margin-left: 100px;
  position: relative;
  top: -150px;
  left: 200px;
}

.heading {
  font-family: Clash Display;
  font-size: 48px;
  letter-spacing: -4px;

  line-height: 0px;
  text-align: left;
  margin-left: 100px;
  position: relative;
  top: -75px;
  left: 200px;
}

.notify {
  width: 48px;
  height: 48px;
  position: relative;
  top: -150px;
  left: 300px;
}

.notify_cont {
  position: relative;
  top: -170px;
  left: 50px;
}

.content3 {
  position: relative;
  top: -190px;
  width: 562px;
  height: 140px;
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  /* or 156% */
  text-transform: capitalize;

  color: #000000;

  opacity: 0.5;
}

.p4r1 {
  display: flex;
  flex-direction: row;
}

.bullet2 {
  position: relative;
  width: 48px;
  height: 48px;
  top: 300px;
}

.heading2 {
  font-family: Clash Display;
  font-size: 48px;
  letter-spacing: -4px;

  line-height: 0px;
  text-align: left;
  margin-left: 100px;
  position: relative;
  top: 290px;
  left: -90px;
}

.p4content > p {
  /* Arcu at dictum sapien, mollis. Vulputate sit id accumsan, ultricies. In ultrices malesuada elit mauris etiam odio. Duis tristique lacus, et blandit viverra nisl velit. Sed mattis rhoncus, diam suspendisse sit nunc, gravida eu. Lectus eget eget ac dolor neque lorem sapien, suspendisse aliquam. */

  position: relative;
  top: 0px;
  width: 562px;
  height: 140px;
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  /* or 156% */
  text-transform: capitalize;

  color: #000000;

  opacity: 0.5;
}

.p4content {
  position: relative;
  top: 300px;
  left: 20px;
}