body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Sora', sans-serif;
}

.navbar {
  background-color: $gray-400;
}

#intro {
  background-image: url("/assets/images/header_image_01.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  height: 100vh;
}

#connecting {
  background-image: url(/assets/images/signup_image_01.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
}

#conversation {
  background-image: url(/assets/images/conversation_image_01.jpg), url(/assets/images/signup_bg_01.png);
  background-size: auto, auto;
  background-position: center top, center bottom;
  background-repeat: no-repeat, no-repeat;
}

.layered-phones {
  position: relative;
  top: 0;
  left: 0;
}

.layered-phones img:first-of-type {
  position: inherit;
  top: 0;
  left: 0;
}

.layered-phones img {
  position: absolute;
  top: 100px;
  left: 0px;
}

.convo {
  display: grid;
  margin-left: -20%;
}

.avatar {
  position: absolute;
  top: 50px;
  left: 20%;
  float: right;
}

.bubble {
  text-align: center;
  position: relative;
  max-width: 200px;
}

.bubble-left {
  border-color: linear-gradient(248.66deg, #AC4CE4 0%, #E46FB1 100%);
}

.bubble-right {
  border-color: #DDD;
}

.convo-left {
  max-width: 20%;
  max-height: min-content;
  margin-bottom: 20px;
}

.convo-left {
  margin-bottom: 20px;
}

.convo-left p {
  color: white;
  background: linear-gradient(248.66deg, #AC4CE4 0%, #E46FB1 100%);
  float: inline-start;
  border-radius: 10px 10px;
}

.convo-right {
  margin-right: 50%;
  padding-right: 100px;
  padding-bottom: 50px;
}

.convo-right {
  background-image: url(/assets/images/avatar-circle.png);
  background-repeat: no-repeat;
  background-position: bottom right;
}

.avatar {
  position: absolute;
  left: 250px;
  top: 10px;
}

.convo-right p {
  float: right;
  color: black;
  background-color: #DDD;
  border-style: solid;
  border-radius: 10px 10px;
}

.convo-left .convo-text:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid #E46FB1;
  border-right: 10px solid transparent;
  border-top: 10px solid #E46FB1;
  border-bottom: 10px solid transparent;
  left: 22px;
  bottom: -20px;
}

.convo-left.convo-text:after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid #000;
  border-right: 10px solid transparent;
  border-top: 10px solid red;
  border-bottom: 10px solid transparent;
  left: 24px;
  bottom: -13px;
}

.convo-right.convo-text::before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid #ff0000;
  border-top: 10px solid #0000ff;
  border-bottom: 10px solid transparent;
  right: -4px;
  bottom: -23px;
}

.convo-right .convo-text::after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid #DDD;
  border-top: 10px solid rgba(255, 0, 0, 0);
  border-bottom: 10px solid transparent;
  right: -3px;
  bottom: -13px;
}


.lgbutton {
  border: 0px;
  background: linear-gradient(90deg, rgba(172, 76, 228, 1) 0%, rgba(228, 111, 177, 1) 100%);
}

.phone-img {
  margin: auto 0px;
  background-image: url(/assets/images/phone_bg_01.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

h1 span.number {
  color: #AC4CE4;
}

.grad-btn {
  background: rgb(172, 76, 228);
  background: linear-gradient(90deg, rgba(172, 76, 228, 1) 0%, rgba(228, 111, 177, 1) 64%, rgba(228, 111, 177, 1) 100%);
  box-shadow: 0px 0px 16px rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  cursor: default;
}

.nav-link {
  color: white;
}
.nav-link .active {
  color: cyan;
}

.card {
  border: 0px;
}

.first-container {
   margin-top: 51px !important;
}



.spotlight-card img {
  border-radius: 20px 20px !important;
  transition: filter 0.75s ease;
  filter:brightness(100%);
}
.spotlight-card:hover img {
     filter: brightness(50%);
}

.spotlight-card .card-body {
    transition: visibility 0.75s ease;
    visibility: collapse;
}
.spotlight-card:hover .card-body {
  transition: visibility 0.75s ease;
  visibility: visible;
  position: relative;
  top: -200px;
}

.spotlight-card:hover .card-body a {
  text-decoration: none;
}
.spotlight-card .card-body a {
  text-decoration: none;
}

.accordion {
  --bs-accordion-active-color: #000;
  --bs-accordion-active-bg: #DA70D6;
}

.accordion-button {

}

.accordion-body {
  background-color: #DA70D6;
  background-blend-mode: lighten;
}

.card {
  border: 1px solid black;
  margin: 10px;
  padding: 5px;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .qr-code {
    visibility: collapse;
  }
  .get-smaller {
    font-size: smaller;
  }
}

@media only screen and (min-width: 768px) {
  .qr-code {
    visibility: visible;
  }
}