@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap");
*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Rubik';
  font-size: 16px;
  outline: none;
}

body {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
  padding-bottom: 2em;
  margin-bottom: 1em;
  left: 0;
  color: #a39daa;
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #f5f3f7;
}

a {
  text-decoration: none;
}

@media (min-width: 960px) {
  body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    overflow-x: hidden;
  }
}

.first-section::before {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(-12%, #8838ff), color-stop(155%, #e942ff));
  background-image: linear-gradient(to top, #8838ff -12%, #e942ff 155%);
  width: 100%;
  max-width: 50%;
  height: 55%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 0 0 200px 0;
  z-index: -1;
  top: 0;
  left: 0;
}

@media (min-width: 960px) {
  .first-section::before {
    max-width: 30%;
    height: 90vh;
    border-bottom-left-radius: 200px;
    left: -3em;
  }
}

@media (min-width: 960px) {
  .first-section {
    margin: auto;
    max-width: 50%;
    width: 100%;
  }
}

.phone-frame {
  background-color: #f5f3f7;
  position: relative;
  width: 100%;
  max-width: 250px;
  height: auto;
  margin: 3em auto;
  margin-top: 16%;
  border-radius: 25px;
  border: white solid 10px;
  -webkit-box-shadow: 4px 34px 59px #cfcfcf;
          box-shadow: 4px 34px 59px #cfcfcf;
}

@media (min-width: 960px) {
  .phone-frame {
    margin: auto;
    margin: auto;
    margin-right: 7em;
    margin-top: 5em;
  }
}

.phone-frame .header {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(-10%, #8838ff), color-stop(115%, #e942ff));
  background-image: linear-gradient(to right, #8838ff -10%, #e942ff 115%);
  border-radius: 16px 16px 7px 7px;
  padding-bottom: 0.7em;
  border-color: white;
  border-style: none;
  outline: none;
}

.phone-frame .header .white-block {
  width: 120px;
  height: 20px;
  background: white;
  border-style: none;
  border-radius: 0 0 15px 15px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: auto;
  border-color: white;
}

.phone-frame .header .contact {
  padding: 0 7px;
  margin-top: 0.8em;
  margin-left: 0;
  margin-right: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.phone-frame .header .contact .contact-details {
  margin: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.phone-frame .header .contact .contact-details .svg {
  color: white;
  margin: auto;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  cursor: pointer;
}

.phone-frame .header .contact .contact-details .svg path {
  stroke-width: 30px;
}

.phone-frame .header .contact .contact-details .contact-image-box {
  padding: 0 5px;
}

.phone-frame .header .contact .contact-details .contact-image {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: white solid 2px;
}

.phone-frame .header .contact .contact-details .contact-description {
  line-height: 1em;
  margin: auto;
  padding: 0 3px;
}

.phone-frame .header .contact .contact-details .contact-description .sub-heading {
  font-size: 12px;
  color: white;
}

.phone-frame .header .contact .contact-details .contact-description p {
  font-size: 8px;
  color: #d89eff;
}

.phone-frame .header .contact .menu-icon {
  color: white;
  cursor: pointer;
}

.phone-frame .text-box-left {
  padding: 7px;
  background-color: #c6cacd;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 57%;
  margin: 10px;
  border-radius: 8px;
}

.phone-frame .text-box-left p {
  color: #9241c8;
  font-size: 8px;
  padding: 3px 3px;
}

.phone-frame .text-attachment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  max-width: 57%;
  margin: 0 0 0 auto;
}

.phone-frame .text-attachment img {
  width: 40px;
  height: auto;
  border-radius: 10px;
  margin: 4.5px;
}

.phone-frame .text-box-right {
  padding: 5px 2px;
  background-color: white;
  width: 50%;
  max-width: 57%;
  margin: 0 5px 10px auto;
  border-radius: 5px;
  -webkit-box-shadow: 5px 40px 100px #cfcfcf;
          box-shadow: 5px 40px 100px #cfcfcf;
}

.phone-frame .text-box-right p {
  color: #6e5d7e;
  font-size: 8px;
  padding: 3px 7px;
}

.phone-frame .radio-btn {
  max-width: 63%;
  height: auto;
  width: auto;
  margin: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, #e570ff), to(#3e2753));
  background: linear-gradient(90deg, #e570ff 20%, #3e2753);
  padding: 10px 13px;
  color: white;
  font-weight: 300;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-radius: 12px 12px 12px 5px;
}

.phone-frame .radio-btn .radio-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
}

.phone-frame .radio-btn .radio-info p {
  font-size: 8px;
  font-weight: 300;
  padding: 0 3px;
  opacity: 0.7;
}

.phone-frame .radio-btn .p::after {
  content: "$29";
  font-weight: 500;
}

.phone-frame .radio-btn .hourly-fee::after {
  content: "$49";
  font-weight: 500;
}

.phone-frame .radio-btn svg {
  opacity: 0.18;
}

.phone-frame .search-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 10px;
  position: relative;
}

.phone-frame .search-bar input {
  width: 100%;
  padding: 1.2em 1.5em;
  font-size: 8px;
  border-radius: 24px;
  border: none;
  outline: none;
  background: white;
}

.phone-frame .search-bar button {
  position: absolute;
  border-radius: 50%;
  padding: 4px;
  outline: none;
  border: none;
  background: #3e2753;
  color: white;
  width: 25px;
  height: 25px;
  cursor: pointer;
  margin: 3px;
}

.phone-frame .search-bar button svg {
  stroke-width: 100px;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}

.second-section::before {
  content: "";
  position: absolute;
  background: #8838ff;
  width: 100%;
  max-width: 50%;
  height: 40%;
  background-size: cover;
  background-repeat: no-repeat;
  right: 0;
  bottom: 0;
  border-radius: 200px 0 0 0;
  z-index: -1;
  opacity: 0.05;
}

@media (min-width: 960px) {
  .second-section::before {
    max-width: 30%;
    right: -7em;
    height: 100vh;
    top: 20vh;
    bottom: auto;
    border-top-right-radius: 200px;
  }
}

@media (min-width: 960px) {
  .second-section {
    margin: auto;
    max-width: 50%;
    width: 100%;
  }
}

.content {
  width: 100%;
  max-width: 300px;
  margin: auto;
  text-align: center;
}

@media (min-width: 960px) {
  .content {
    text-align: left;
    margin: 0;
    padding: 0;
    max-width: 450px;
  }
}

.content h1 {
  font-size: 36.8px;
  margin: 1em auto;
  color: #3e2753;
}

.content p {
  line-height: 1.8em;
}
/*# sourceMappingURL=Index.css.map */