@import "./bootstrap.min.css";
@import "./bootstrap_modified.css";
@import "../fonts/gilroyFont.css";
@import "./fa_all.min.css";
@import "./custom.css";
@import "./responsive.css";

/* main */

.hero_section {
  background: linear-gradient(180deg, rgba(30, 30, 35, 0.45) 0%, rgba(20, 20, 25, 0.55) 100%), url("../images/map.png");
  background-size: 300%;
  background-repeat: repeat;
  background-position: center center;
  padding: 100px 0px 230px 0px !important;
  min-height: calc(100vh - 90px);
  width: 100%;
  position: relative;
  z-index: 99;
}

.hero_section .tiny_users {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ff07e7;
  position: absolute;
  top: 20%;
  left: 20%;
  overflow: hidden;
  border: 4px solid #ffffff;
  opacity: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: opacity 0.5s ease;
}

/* Floating animation for user circles - bobbing up and down continuously */
.hero_section .tiny_users.visible {
  opacity: 1 !important;
}

.hero_section .tiny_users:nth-child(1) {
  animation: floatUpDown1 3s ease-in-out infinite;
}

.hero_section .tiny_users:nth-child(2) {
  animation: floatUpDown2 3.5s ease-in-out infinite;
}

.hero_section .tiny_users:nth-child(3) {
  animation: floatUpDown1 2.8s ease-in-out infinite 0.5s;
}

.hero_section .tiny_users:nth-child(4) {
  animation: floatUpDown2 3.2s ease-in-out infinite 0.3s;
}

.hero_section .tiny_users:nth-child(5) {
  animation: floatUpDown1 3.6s ease-in-out infinite 0.8s;
}

.hero_section .tiny_users:nth-child(6) {
  animation: floatUpDown2 2.9s ease-in-out infinite 0.2s;
}

.hero_section .tiny_users:nth-child(7) {
  animation: floatUpDown1 3.3s ease-in-out infinite 0.6s;
}

.hero_section .tiny_users:nth-child(8) {
  animation: floatUpDown2 3.7s ease-in-out infinite 0.4s;
}

@keyframes floatUpDown1 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}

@keyframes floatUpDown2 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-22px);
  }
}

.hero_section .tiny_users img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.hero_section .tiny_users:nth-child(1) {
  top: 10%;
  left: 50%;
}

.hero_section .tiny_users:nth-child(2) {
  top: 25%;
  right: 20%;
  left: unset;
}

.hero_section .tiny_users:nth-child(3) {
  top: 60%;
  left: 20%;
}

.hero_section .tiny_users:nth-child(4) {
  top: 22%;
  left: 28%;
}

.hero_section .tiny_users:nth-child(5) {
  top: 60%;
  left: 60%;
}

.hero_section .tiny_users:nth-child(6) {
  top: 80%;
  right: 20%;
}

.hero_section .tiny_users:nth-child(7) {
  top: 55%;
  right: 10%;
  left: unset;
}

.hero_section .tiny_users:nth-child(8) {
  top: 12%;
  right: 23%;
  left: unset;
}

.hero_section .text_image_hero_section {
  min-height: 64px;
  position: relative;
}

.hero_section .row.main_animation_row {
  position: relative;
}

.hero_section .row.main_animation_row .animation_helper_col {
  position: relative;
}

.hero_section .text_image_hero_section img {
  position: absolute;
}

/* Hero Brand Animation Styles - Bottom Center of Hero Section */
.hero_brand_animation_section {
  text-align: center;
  margin-top: 60px;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  width: 100%;
}

.hero_brand_title {
  font-size: 4.5rem;
  font-weight: 800;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateX(-100vw);
  letter-spacing: -2px;
  line-height: 1.1;
}

.hero_brand_title .brand_stumble {
  color: #ffffff;
  font-weight: 400;
}

.hero_brand_title .brand_crush {
  color: #FF07E7;
  font-weight: 800;
}

.hero_tagline {
  font-size: 2.2rem;
  font-weight: 700;
  font-style: italic;
  color: #F7F302;
  margin: 0;
  opacity: 0;
  transform: translateX(100vw);
}

/* Animation states */
.hero_brand_title.swoosh-in {
  animation: swooshInLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.hero_tagline.swoosh-in {
  animation: swooshInRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes swooshInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100vw) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translateX(30px) scale(1.05);
  }
  80% {
    transform: translateX(-10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes swooshInRight {
  0% {
    opacity: 0;
    transform: translateX(100vw) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px) scale(1.05);
  }
  80% {
    transform: translateX(10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Responsive styles for hero brand animation */
@media (max-width: 992px) {
  .hero_brand_title {
    font-size: 3.5rem;
  }
  .hero_tagline {
    font-size: 1.8rem;
  }
  .hero_brand_animation_section {
    margin-top: 40px;
    padding-top: 30px;
  }
}

@media (max-width: 768px) {
  .hero_brand_title {
    font-size: 2.8rem;
    letter-spacing: -1px;
  }
  .hero_tagline {
    font-size: 1.4rem;
  }
  .hero_brand_animation_section {
    margin-top: 30px;
    padding-top: 20px;
  }
}

@media (max-width: 480px) {
  .hero_brand_title {
    font-size: 2rem;
  }
  .hero_tagline {
    font-size: 1.1rem;
  }
  .hero_brand_animation_section {
    margin-top: 20px;
    padding-top: 15px;
  }
}

.hero_section .couple_card {
  padding: 14px;
  border-radius: 28px;
}

.hero_section .couple_card .image_wrapper {
  width: 100%;
  height: 250px;
  border-radius: 14px;
  overflow: hidden;
}

.hero_section .couple_card .image_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero_section .left_side_content,
.hero_section .text_image_hero_section {
  display: none;
}

.hero_section .left_side_content .heart_postion_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.swiper_section .couple_cards_wrapper .heart_postion_icon {
  top: 30%;
}

.hero_section .left_side_content .fancy_comments {
  position: absolute;
  top: -60px;
  border: 1px solid #FF07E7;
  border-radius: 24px;
  padding: 6px 18px;
  width: 100%;
  box-shadow: -2.6204111576080322px 3.930617094039917px 19.653085708618164px 0px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.hero_section .left_side_content .fancy_comments.comment_2 {
  top: unset;
  bottom: -60px;
  border-radius: 24px;
  border: 1px solid #00C9FF;
  margin-bottom: 0px !important;
}

.hero_section .left_side_content .fancy_comments .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -12px;
}

.hero_section .left_side_content .fancy_comments.comment_2 .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -12px;
  right: unset;
}

.hero_section .text_content .download_btn {
  background: linear-gradient(159deg, #F7F302 14.12%, #FFD938 85.96%);
  max-width: 320px;
  border: 2px solid #ffffff;
}

.hero_section .text_content .download_btn>div::before {
  content: "";
  background: #ffffff;
  width: 62%;
  height: 3px;
  position: absolute;
  bottom: 3px;
  left: 0px;
}

.hero_section .text_content .download_btn>div::after {
  content: "";
  background: #ffffff;
  width: 40%;
  height: 2px;
  position: absolute;
  bottom: 10px;
  left: 46px;
}

.hero_section .text_content .download_btn h4 {
  font-weight: 700;
  font-size: 22px;
  color: #13182B !important;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0px;
}

.hero_section .text_content .download_btn h4 span {
  margin-top: 1px;
}

.golive_section {
  background-image: url("../images/golive.png");
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.golive_section .golive_cards_wrapper .golive_info_card {
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 2px 10px 0px rgba(158, 165, 190, 0.2);
}

.golive_section .golive_info_card .icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(180deg,
      rgba(254, 174, 150, 0.2) 0%,
      rgba(255, 54, 103, 0.2) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.golive_section .golive_info_card.gradient {
  background: linear-gradient(180deg, #ff8bcb 0%, #ff07e7 100%);
}

.golive_section .golive_info_card.gradient ul {
  margin-top: 60px;
  margin-bottom: 0px;
}

.golive_section .golive_info_card.gradient .gun_image {
  position: absolute;
  top: -100px;
  left: 36px;
}

.golive_section .golive_info_card.gradient .icon {
  background: #ffffff;
}



.golive_section .animation_part {
  width: 80vmin;
  /* Use viewport width instead of fixed pixels */
  height: 80vmin;
  /* Maintain aspect ratio with viewport width */
  max-width: 560px;
  /* Set a maximum width */
  max-height: 560px;
  /* Set a maximum height */
  position: relative;
  border: 1px dashed #9ea5be;
  margin: auto;
  border-radius: 50%;
}

.golive_section .animation_part .image_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.golive_section .animation_part .image_content img {
  max-width: 220px;
}

.golive_section .animation_part .orbit {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  animation: orbit 18s linear infinite;
}

.golive_section .animation_part .orbit .electron {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 30px);
  left: -24px;
  border: 3px solid #7402ff;
  overflow: hidden;
  animation: orbit-electron 18s linear infinite;
}

.golive_section .animation_part .orbit .electron:nth-child(2) {
  width: 36px;
  height: 36px;
  top: 95%;
  right: 60%;
  left: unset;
}

.golive_section .animation_part .orbit .electron:nth-child(3) {
  width: 36px;
  height: 36px;
  top: 30%;
  right: 0px;
  left: unset;
}

.golive_section .animation_part .orbit .electron:nth-child(4) {
  width: 36px;
  height: 36px;
  top: 5%;
  left: 20%;
}

.golive_section .animation_part .orbit .electron:nth-child(5) {
  top: 68%;
  right: 0%;
  left: unset;
}

.golive_section .animation_part .orbit .electron img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.golive_section .animation_part .orbit2 {
  border: 1px dashed #9ea5be;
  border-radius: 100%;
  position: absolute;
  left: 22%;
  right: 22%;
  top: 22%;
  bottom: 22%;
  width: unset;
  height: unset;
  animation: orbit2 18s linear infinite;
}

.golive_section .animation_part .orbit.orbit2 .electron {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 30px);
  left: -24px;
  border: 3px solid #7402ff;
  overflow: hidden;
  animation: orbit-electron2 18s linear infinite;
}

.golive_section .animation_part .orbit.orbit2 .electron:nth-child(2) {
  width: 36px;
  height: 36px;
  top: 95%;
  right: 60%;
  left: unset;
}

.golive_section .animation_part .orbit.orbit2 .electron:nth-child(3) {
  width: 36px;
  height: 36px;
  top: 30%;
  right: 0px;
  left: unset;
}

.golive_section .animation_part .orbit.orbit2 .electron:nth-child(4) {
  width: 36px;
  height: 36px;
  top: 5%;
  left: 20%;
}

.golive_section .animation_part .orbit.orbit2 .electron:nth-child(5) {
  top: 68%;
  right: 0%;
  left: unset;
}

.golive_section .animation_part .orbit .electron img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.golive_section .golive_title span {
  position: relative;
  display: inline-block;
}

.golive_section .golive_title span::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--green-2, linear-gradient(180deg, #00cdac 0%, #02aab0 100%));
  border-radius: 50%;
  top: 11px;
  left: 2px;
}

@keyframes orbit2 {
  0% {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes orbit {
  0% {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes orbit-electron {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes orbit-electron2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.missed_connetction_section {
  background-image: url("../images/commingsoon_background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.missed_connetction_section .goto_app_fancy_card {
  padding: 30px 20px;
  border-radius: 20px;
  border: 1px solid #009dff;
}

.missed_connetction_section .goto_app_fancy_card .download_btn {
  font-size: 14px;
  padding: 8px 20px;
}

.missed_connetction_section .text_content .fancy_heart_shape_absolute {
  position: absolute;
  top: -48px;
  left: -48px;
  z-index: 1;
}

.comming_soon_text_fancy {
  background-image: linear-gradient(180deg,
      rgba(171, 113, 255, 0.3) 0%,
      rgba(116, 2, 255, 0.3) 100%);
  background-clip: text;
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: calc(1em / 16);
  -webkit-background-clip: text;
  color: #ffffff;
}

.missed_connetction_section .image_content {
  position: relative;
}

.missed_connetction_section .image_content .absolute_utters {
  padding: 14px 24px;
  background-color: #ffffff;
  border: 2px solid #FF07E7;
  display: inline-block;
  box-shadow: 12.44444465637207px 13.333333015441895px 16px 0px rgba(158, 165, 190, 0.25);
  border-radius: 18px;
  text-align: center;
  min-width: 188px;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
}

.missed_connetction_section .image_content .absolute_utters.utter_1 {
  top: 13%;
  right: 10%;
  border: 2px solid #7402ff;
  color: #7402ff;
  background-color: #EEE3FF;
  padding: 6px 24px;
}

.missed_connetction_section .image_content .absolute_utters.utter_2 {
  top: 44%;
  left: 0%;
  min-width: 260px;
  font-size: 20px;
  padding: 8px 18px;
  border: 2px solid #ff07e7;
  color: #000000;
  background-color: #FFCDFA;
}

.missed_connetction_section .image_content .absolute_utters.utter_3 {
  bottom: 10%;
  right: 18%;
  border: 2px solid #FC6C3F;
  color: #FC6C3F;
  background-color: #FFEDD2;
}

.swiper_section {
  background-image: url("../images/swipper_section_bg.png");
  background-position: center;
  background-size: cover;
  padding: 100px 0px !important;
  background-attachment: fixed;

}

.swiper_section .couple_cards_wrapper .swiper_heart_icon {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.swiper_section .swiper_typo_image_wrapper {
  overflow: hidden;
}

.its_match_card .image_wrapper {
  text-align: center;
}

.its_match_card .image_wrapper img {
  width: 260px;
  transform: rotate(-15deg);
}

.its_match_card .image_wrapper.image_2 img {
  transform: rotate(12deg);
}

.leaflet-container {
  width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0px;
  left: 0px;
  z-index: -1;
}

.hide-till-animation {
  opacity: 0;
}

.download_section .absolute_funny_cartoon {
  position: absolute;
}

/* policy pages  */
.web_policy_content .main_title {
  margin-bottom: 24px;
  color: #009dff;
}

.web_policy_content .main_title h2 {
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 0px;
}

.web_policy_content h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
}

.web_policy_content p {
  font-size: 16px;
  font-weight: 500;
  color: #9ea5be;
  margin-bottom: 24px;
  line-height: 1.8;
}

.web_policy_content p strong {
  font-weight: 600;
  color: #000000;
}

.web_policy_content .title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 24px;
}

.web_policy_content h5.sub_title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  position: relative;
  padding-left: 20px;
  line-height: 1;
}

.web_policy_content h5.sub_title::before,
.web_policy_content ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  top: 40%;
  left: 0px;
  transform: translateY(-50%);
  background-color: #000000;
}

.web_policy_content ul {
  list-style: none;
}

.web_policy_content ul li {
  font-size: 16px;
  font-weight: 500;
  color: #9ea5be;
  margin-bottom: 14px;
  padding-left: 20px;
  position: relative;
}

.web_policy_content a {
  color: #7402ff;
}

.web_policy_content .contact_box .custom_table table tbody tr td {
  padding: 18px !important;
}

.web_policy_content .contact_box .custom_table table {
  border-color: #000000;
}

.web_policy_content .contact_box .custom_table table tbody tr td,
.web_policy_content .contact_box .custom_table table tbody tr td {
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.item[data-aos="slide-right"] {
  transform: translateX(-150%);
}

.item[data-aos="slide-right"].aos-animate {
  transform: translateX(0%);
}

.tranfrom_extreme_up[data-aos=slide-down] {
  transform: translate3d(0px, -500%, 0px);
}

.tranfrom_extreme_down[data-aos=slide-up] {
  transform: translate3d(0px, 500%, 0px);
}

.about-us-section-banner {
  background: url("../images/swipper_section_bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  padding: 150px 0px;
}

.about-us-section-banner .main_title {
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
}

.about-us-section-banner .sub_title {
  font-size: 28px;
  font-weight: 500;
  color: #ffffff !important;
}

.about-us-section-content.section_gap {
  padding: 60px 0px;
}

.about-us-section-content h4 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
  color: #13182b;
  line-height: 1.5;
}

.about-us-section-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

.about-us-section-content h3 {
  color: #0070FF;
}

.about-us-section-content .img_wrapper {
  position: relative;
  height: 420px;
  width: 40%;
  border-radius: 6px;
  overflow: hidden;
}

.about-us-section-content .img_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.about-us-section-content .img_wrapper .gradiant_backdrop {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(103, 41, 255, 0.2);
}

.contact-us-section .contact-us-form {
  padding: 24px;
  border-radius: 24px;
  min-height: 300px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(158, 165, 190, 0.20);
}

.contact-us-section .contact-us-form .form_group {
  margin-bottom: 12px;
}

.contact-us-section .contact-us-form .form_group .form_control {
  width: 100%;
  padding: 14px 24px;
  border-radius: 30px;
  border: 1px solid #9ea5be;
  outline: none;
  transition: border 0.3s ease;
}

.contact-us-section .contact-us-form .form_group .form_control:focus {
  border: 1px solid #702cff;
}

.contact-us-section .contact-us-form .submit_btn {
  border-radius: 48px;
  background: linear-gradient(180deg, #3ab4ff 0%, #0070ff 100%);
  padding: 14px 24px;
  color: #fff !important;
  border: none;
  outline: none;
  min-width: 240px;
  margin-top: 12px;
}

.contact-us-section .contact-us-section-content .img-wrapper img {
  max-width: 480px;
}

.contact-us-section .contact-us-section-content .cartoon_image img {
  max-width: 100px;
}

.contact-us-section .contact-us-form .form_group .iti {
  width: 100%;
}

.contact-us-section .contact-us-form .form_group .iti .iti__country-list {
  max-width: 316px;
  border-radius: 6px;
}

.contact-us-section .contact-us-form .form_group .iti ul.iti__country-list {
  overflow-x: hidden;
}

.contact-us-section .contact-us-form .form_group .iti ul.iti__country-list li.iti__country.iti__highlight,
.contact-us-section .contact-us-form .form_group .iti ul.iti__country-list li.iti__country.iti__highlight .iti__dial-code .contact-us-section .contact-us-form .form_group .iti ul.iti__country-list li.iti__country.iti__active .iti__dial-code {
  background-color: #7402ff;
  color: #ffffff;
}

.contact-us-section .contact-us-form .form_group .iti ul.iti__country-list::-webkit-scrollbar {
  width: 4px;
  background-color: #ffffff;
}

.contact-us-section .contact-us-form .form_group .iti ul.iti__country-list::-webkit-scrollbar-track {
  width: 4px;
  background-color: #ffffff;
}

.contact-us-section .contact-us-form .form_group .iti ul.iti__country-list::-webkit-scrollbar-thumb {
  background-color: #7402ff;
}

.contact-us-section .contact-us-form .form_group .iti.iti--separate-dial-code .iti__selected-flag {
  background-color: unset !important;
  padding: 0px 0px 0px 24px;
}

.missed-connection-section .missed-connection-box {
  padding: 16px 0px;
  border-bottom: 1px solid #e2f2f2;
}

.missed-connection-section .missed-connection-box a.details {
  position: relative;
}

.missed-connection-section .missed-connection-box a.details::before {
  content: "";
  width: 100%;
  height: 1px;
  background-image: linear-gradient(180deg, #ab71ff 0%, #7402ff 100%);
  position: absolute;
  bottom: 1px;
  left: 0px;
}

.search-bar {
  max-width: 440px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.search-bar button {
  border: none;
  outline: none;
  background-color: #7402ff;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-bar input {
  flex-grow: 1;
  border: none;
  outline: none;
  background-color: #ffffff;
  padding: 10px 16px;
  border: 1px solid #7402ff;
  border-radius: 6px;
  border-right: none;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  font-size: 14px;
  color: #13182b;
}

.search-bar.comment-bar input {
  border-right: 1px solid #7402ff;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.connection-detail-section .connection-box {
  border: 1px solid #7402ff;
  min-height: 440px;
  border-radius: 6px;
  padding: 24px;
}

.connection-detail-section .connection-box .avatar-wrapper {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
}
.connection-detail-section .connection-box .avatar-wrapper img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}
.connection-detail-section .connection-box ul.chat-wrapper li.chat-message{
   padding: 10px 16px;
   font-size: 16px;
   background-color:#13182b;
   color: #ffffff;
}
.connection-detail-section .connection-box ul.comments-wrapper li{
  margin-bottom: 16px;
}
.connection-detail-section .connection-box .comments-wrapper .avatar-wrapper{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.product-overview-section{
   background-color:#13182b;
}
.product-overview-section .app_modules_box{
   padding: 24px;
   border: 1px solid #7402ff;
   border-radius: 16px;
}
.product-overview-section .app_modules_box.module-first{
  max-width: 60%;
  margin: auto;
}
.product-overview-section .heart-icon img{
   max-width: 100px;
   margin-inline: auto;
   animation: 2s ease 0s infinite beat;
}
.product-overview-section .download_app{
    padding: 6px;
    background-color: #ffffff;
    border-radius: 6px;
}
.about-payment-methods-section{
  background: url("../images/download_section_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: relative;
}
.payment_methods_gradient_bg{
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg,
      rgba(58, 180, 255, 0.7) 0%,
      rgba(116, 2, 255, 1) 100%);
  min-height: 100%;
  width: 100%;
  z-index: -1;
}
.about-stumble-badges-wrapper {
  width: 60%;
}
.about-stumble-badges-wrapper .stumble-badge{
   padding: 24px;
   border-radius: 8px;
   background-color:#13182b ;
}
.about-stumble-badges-wrapper .stumble-badge.first::before{
   content: "";
   width: 36px;
   height: 36px;
   position: absolute;
   bottom: -12px;
   right: -12px;
   z-index: 1;
   background-color: #ffffff;
   border-radius: 50%;
}
.about-stumble-badges-wrapper .stumble-badge.second::before{
  content: "";
  width: 36px;
  height: 36px;
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 1;
  background-color: #ffffff;
  border-radius: 50%;
}

@keyframes beat {
  0%, 50%, 100% { transform: scale(1, 1); }
  30%, 80% { transform: scale(0.90, 0.92); }
}


.investors-section .investors-section-video-wrapper{
  max-width: 800px;
  height:450px;
  width: 100%;
  margin: auto;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 60px;
}
.investors-section .investors-section-video-wrapper video{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}