/* ----------------------------------------------- [ Font Families ] --------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* 
font-family: "Inter", sans-serif;
Thin 100 / ExtraLight 200 / Light 300 / Regular 400 / Medium 500 / SemiBold 600 / Bold 700 / ExtraBold 800 / Black 900
*/

/* ------------------------------------------------ [ CSS Variable ] --------------------------------------------------- */

:root {
  /* colors ---------- */
  --black: #000000;
  --white: #ffffff;
  --purple: #8918e1;
  --light-purple: #f3e4ff;
  --light-purple2: #ecd2ff;
  --light-gray: #d3d3d3;
  --cloud-burst: #282e4d;
  --mountain-mist: #90979f;
  --status-indicator-bg: rgba(0, 0, 0, 0.7);
  --status-dot-green: #1bdc29;
  --status-dot-red: #f01727;
  --button-bg-linear-gradient: linear-gradient(
    270deg,
    #8918e1 0%,
    #bb63ff 100%
  );
  --button-hover-bg-linear-gradient: linear-gradient(
    90deg,
    #8918e1 0%,
    #bb63ff 100%
  );
}

/* ------------------------------------------------ [ Global CSS ] ---------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  text-decoration: none;
  /* Disable Text Selection */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
*::-webkit-scrollbar {
  display: none;
}

::before,
::after {
  box-sizing: border-box;
}
* > img {
  user-select: none;
  pointer-events: none;
  display: inline-block;
}
a {
  text-decoration: none;
  display: inline-block;
}
a,
a:focus,
a:active,
button,
button:focus,
button:active,
div,
div:focus,
div:active {
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
li {
  list-style: none;
}
html {
  /* 10px = 1rem */
  font-size: 62.5%;
}
body {
  font-style: normal;
  overflow: hidden;
  scroll-behavior: smooth;
  display: flex;
  justify-content: center;
  background-color: var(--black);
  font-family: "Inter", sans-serif;
}
main {
  width: 100%;
  max-width: 48rem;
  height: 100%;
  min-height: 100vh;
  background-image: url("../assets/main_bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.6rem;
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/*                               [ Screens CSS ]                              */
/* -------------------------------------------------------------------------- */

/* ---------------------------- [ Splash Screen ] --------------------------- */
.splash_screen {
  position: relative;
}
.splash_screen .logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.splash_screen .logo img {
  width: 100%;
  max-width: 20rem;
}
.splash_screen a {
  position: fixed;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
}
.splash_screen a button {
  width: 20rem;
  padding: 1.4rem 2rem;
  font-size: 1.8rem;
  color: var(--white);
  background: var(--button-bg-linear-gradient);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  transition: background 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.splash_screen a button:hover {
  background: var(--button-hover-bg-linear-gradient);
}

/* ----------------------- [ Gender Selection Screen ] ---------------------- */
.gender_selection_screen .head {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 4rem;
}
.gender_selection_screen .gender_cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  margin-bottom: 5rem;
}
.gender_selection_screen .gender_cards .card {
  min-width: 14.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  text-align: center;
  background-color: var(--white);
  border: 0.4rem solid var(--purple);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.gender_selection_screen .gender_cards .card .gender_input {
  display: none;
}
.gender_selection_screen .gender_cards .card .card_label {
  width: 100%;
  cursor: pointer !important;
}
.gender_selection_screen .gender_cards .card p {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--mountain-mist);
  padding: 1.8rem 0 1rem 0;
}
.gender_selection_screen .gender_cards .card img {
  height: 14rem;
  position: relative;
  top: 0.5rem;
}
.gender_input:checked + .card_label {
  background-color: var(--purple);
}
.gender_input:checked + .card_label p {
  color: var(--white);
}
.gender_selection_screen a {
  text-align: center;
}
.gender_selection_screen a button {
  padding: 1.4rem 5rem;
  font-size: 2.2rem;
  color: var(--white);
  background: var(--button-bg-linear-gradient);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.gender_selection_screen a button:hover {
  background: var(--button-hover-bg-linear-gradient);
}

/* ------------------------- [ Select Avatar Screen ] ----------------------- */
.select_avatar_screen .head {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 4rem;
}
.avatars_container {
  margin-bottom: 5rem;
  display: flex;
  gap: 2rem;
}
.avatars_container .ava_card {
  position: relative;
  text-align: center;
}
.avatars_container .ava_card img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 1.4rem;
}
.avatars_container .ava_card p {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 1.3rem;
  font-weight: 600;
  padding: 0.5rem 0;
  color: var(--purple);
  background-color: var(--light-purple2);
  border-radius: 0 0 1.4rem 1.4rem;
}
.avatars_container .ava_card.active p {
  color: var(--light-purple2);
  background-color: var(--purple);
}
.avatars_container .left_cont {
  flex: 2.15;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
.avatars_container .left_cont .selected_avatar img {
  border: 0.3rem solid var(--purple);
  border-radius: 3rem;
}
.avatars_container .left_cont .bottom_itmes {
  display: flex;
  gap: 2rem;
}
.avatars_container .right_cont {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.avatars_container .left_cont div,
.avatars_container .right_cont div {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatars_container img {
  width: 100%;
  cursor: pointer;
}
.select_avatar_screen .select_avatar_next_btn {
  text-align: center;
}
.select_avatar_screen .select_avatar_next_btn button {
  padding: 1.4rem 6rem;
  font-size: 2.2rem;
  color: var(--white);
  background: var(--button-bg-linear-gradient);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.select_avatar_screen .select_avatar_next_btn button:hover {
  background: var(--button-hover-bg-linear-gradient);
}

/* ------------------------ [ Ideal Match Screen ] ------------------------ */
.ideal_match_screen .head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 4rem;
}
.ideal_match_screen .head h1 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--purple);
}
.ideal_match_screen .head p {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--mountain-mist);
}
.ideal_match_cards {
  margin-bottom: 5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
}
.ideal_match_cards section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}
.ideal_match_cards section:nth-child(1) {
  margin-bottom: 2.5rem;
}
.ideal_match_cards section .im_card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  padding: 2.5rem 0;
  border: 0.3rem solid var(--white);
  border-radius: 1.4rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.ideal_match_cards section .im_card p {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--purple);
  margin-top: 1rem;
}
.ideal_match_cards section .im_card.active {
  border: 0.3rem solid var(--purple);
  border-radius: 1.4rem;
}
.ideal_match_cards section div img {
  width: 50%;
}
.ideal_match_screen .ideal_match_next_btn {
  text-align: center;
}
.ideal_match_screen .ideal_match_next_btn button {
  padding: 1.4rem 6rem;
  font-size: 2.2rem;
  color: var(--white);
  background: var(--button-bg-linear-gradient);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.ideal_match_screen .ideal_match_next_btn button:hover {
  background: var(--button-hover-bg-linear-gradient);
}

/* ---------------------- [ Likes & interests Screen ] ---------------------- */
.like_and_interest_screen .head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 4rem;
}
.like_and_interest_screen .head h1 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--purple);
}
.like_and_interest_screen .head p {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--mountain-mist);
}
.like_and_interest_cards {
  margin-bottom: 5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.like_and_interest_cards section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.like_and_interest_cards section:nth-child(1) {
  margin-bottom: 2rem;
}
.like_and_interest_cards section:nth-child(2) {
  margin-bottom: 2rem;
}
.like_and_interest_cards section div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.like_and_interest_cards section div {
  cursor: pointer;
  border-radius: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.like_and_interest_cards section div img {
  width: 100%;
}
.like_and_interest_screen .like_and_interest_start_btn {
  text-align: center;
}
.like_and_interest_screen .like_and_interest_start_btn button {
  padding: 1.4rem 6rem;
  font-size: 2.2rem;
  color: var(--white);
  background: var(--button-bg-linear-gradient);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.like_and_interest_screen .like_and_interest_start_btn button:hover {
  background: var(--button-hover-bg-linear-gradient);
}

/* --------------------- [ Common Screens & Components ] -------------------- */

/* ----- [ Navigation Section ] ----- */
.navbar {
  display: flex;
  align-items: center;
  gap: 4%;
  margin-bottom: 3rem;
  padding: 0 1rem;
}
.navbar img {
  width: 2.4rem;
}
.navbar h1 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--black);
  position: relative;
  top: -2.5px;
}

/* ----- [ Random Connect Screen ] ----- */
.rendom_connect_screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 🔹 Logo centered but NOT fixed */
.rendom_connect_screen .logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo size */
.rendom_connect_screen .logo img {
  width: 26rem;
  max-width: 80%;
}

/* 🔹 Button stays at bottom naturally */
.rendom_connect_screen .connect_button {
  display: flex;
  justify-content: center;
  padding-bottom: 4rem;
}

.rendom_connect_screen .connect_button button {
  padding: 1.6rem 10rem;
  font-size: 1.8rem;
  letter-spacing: 0.2rem;
  color: var(--white);
  background: var(--button-bg-linear-gradient);
  border: none;
  border-radius: 4rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.rendom_connect_screen .connect_button button:hover {
  background: var(--button-hover-bg-linear-gradient);
}

@media (max-width: 480px) {
  .rendom_connect_screen .connect_button button {
    padding: 1.4rem 6rem;
    font-size: 1.6rem;
  }
}

/* ----- [Audio & Video call Waiting Screen] ----- */
.waiting_screen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 6rem 0;
  position: relative;
}
.waiting_screen .top_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.8rem;
}
.waiting_screen .top_container img {
  width: 8rem;
}
.waiting_screen .top_container h1 {
  font-size: 2rem;
}
.waiting_screen .top_container .connecting_text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.waiting_screen .top_container .connecting_text span,
.waiting_screen .top_container .connected_text span {
  font-size: 2rem;
}
.spinner {
  margin: 0 auto;
  width: fit-content;
  align-self: flex-end;
  text-align: start;
}
.spinner > div {
  width: 7px;
  height: 7px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.2s infinite ease-in-out both;
}
.spinner .bounce1 {
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
.waiting_start_btn {
  position: fixed;
  width: 28rem;
  bottom: 4rem; 
  left: 0;
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
  padding: 1.8rem 8rem;
  font-size: 2rem;
  letter-spacing: 0.2rem;
  color: #ffffff;
  background: var(--button-bg-linear-gradient);
  border: none;
  border-radius: 4rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.waiting_start_btn:disabled {
  background: #b9b9b9;
  color: #595757;
  cursor: not-allowed;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0.7;
  transform: scale(0.98);
  background-image: linear-gradient(135deg, #b9b9b9, #454343);
  border-radius: 4rem;
}
.waiting_start_btn:disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  border: 3px solid #ffffff;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
}
@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ----------------------------- [ Home Screen ] ---------------------------- */
.home_screen {
  display: flex;
  flex-direction: column;
}
.home_screen .home_screen_content_cont {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.home_random_videocall_img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.home_random_videocall_img img {
  width: 100%;
}
.home_vid_call_list_sec {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.home_vid_call_list_sec .top_cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home_vid_call_list_sec .top_cont h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--black);
}
.home_vid_call_list_sec .top_cont img {
  width: 2rem;
}
.home_vid_call_list_sec .top_cont .arrow_container {
  display: flex;
}
.home_vid_call_list_sec .top_cont .arrow {
  width: 3.2rem;
  height: 3.2rem;
  opacity: 0;
  animation: none;
}
.home_vid_call_list_sec .top_cont .arrow1 {
  position: relative;
  right: -2rem;
  filter: brightness(0) saturate(100%) invert(58%) sepia(0%) saturate(11%)
    hue-rotate(51deg) brightness(89%) contrast(86%);
  animation: arrowSequence1 1s infinite;
}
@keyframes arrowSequence1 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.home_vid_call_list_sec .top_cont .arrow2 {
  animation: arrowSequence2 1s infinite;
}
@keyframes arrowSequence2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.home_videocall_list_cont {
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: scroll;
}
.home_videocall_list_cont::-webkit-scrollbar {
  display: none;
}
.home_videocall_list_cont {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.home_videocall_list_cont .card {
  min-width: 14.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.2rem;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.home_videocall_list_cont .card .status_indicator {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  background-color: var(--status-indicator-bg);
  color: var(--white);
  font-size: 0.6rem;
  padding: 0.2rem 0.4rem;
  border-radius: 2rem;
}
.home_videocall_list_cont .card .status_indicator p {
  position: relative;
}
.home_videocall_list_cont .card .status_indicator .status_dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}
.home_videocall_list_cont .card .status_indicator .online {
  background-color: var(--status-dot-green);
}
.home_videocall_list_cont .card .status_indicator .offline {
  background-color: var(--status-dot-red);
}
.home_videocall_list_cont .card .profile_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home_videocall_list_cont .card .card_content {
  position: absolute;
  bottom: 1rem;
  left: 0.5rem;
  color: var(--white);
  text-align: left;
  line-height: 1.4;
}
.home_videocall_list_cont .card .card_content h3 {
  font-size: 1.2rem;
  font-weight: 800;
}
.home_videocall_list_cont .card .card_content p {
  font-size: 0.8rem;
  font-weight: 700;
}
.home_videocall_list_cont .card .video_call_icon {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
.home_videocall_list_cont .card .video_call_icon .incomming_call_animation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home_videocall_list_cont .card .video_call_icon .incomming_call_animation img {
  width: 3rem;
  height: 3rem;
  animation: pulsate 1.5s infinite;
}
@keyframes pulsate {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
.home_more_function_sec {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.home_more_function_sec .top_cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home_more_function_sec .top_cont h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--black);
}
.home_more_function_sec .more_function_cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.home_more_function_sec .more_function_cards .card img {
  width: 100%;
}

/* ------------------------- [ Video Call Screens ] ------------------------- */

/* ----- [ VideoCall Random List Screen ] ----- */
.videocall_random_list_screen {
  display: flex;
  flex-direction: column;
}
.videocall_random_list_cont {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.videocall_random_list_cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.videocall_random_list_cont .room_card {
  background-color: var(--white);
  width: 100%;
  border-radius: 2rem;
  border: 0.1rem solid var(--purple);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}
.videocall_random_list_cont .top_cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.videocall_random_list_cont .top_cont .room_no {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 3rem;
  border-radius: 2rem 0 0.8rem 0;
  background-color: var(--light-purple);
}
.videocall_random_list_cont .top_cont .room_no p {
  color: var(--purple);
  font-size: 1.6rem;
  font-weight: 600;
}
.videocall_random_list_cont .top_cont .room_members {
  display: flex;
  justify-content: flex-end;
  padding-right: 1.6rem;
  position: relative;
  height: 100%;
  top: -5px;
}
.videocall_random_list_cont .top_cont .room_members img {
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  border: 0.3rem solid var(--white);
  position: absolute;
}
.videocall_random_list_cont .top_cont .room_members p {
  z-index: 6;
  position: relative;
  top: 1.6rem;
  font-size: 1.4rem;
  font-weight: 600;
}
.videocall_random_list_cont .top_cont .room_members .member_img_one {
  right: 4.1rem;
  z-index: 4;
}
.videocall_random_list_cont .top_cont .room_members .member_img_two {
  right: 7.1rem;
  z-index: 3;
}
.videocall_random_list_cont .top_cont .room_members .member_img_three {
  right: 10.1rem;
  z-index: 2;
}
.videocall_random_list_cont .top_cont .room_members .member_img_four {
  right: 13.1rem;
  z-index: 1;
}
.videocall_random_list_cont .bottom_cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 1.6rem;
  gap: 1rem;
}
.videocall_random_list_cont .bottom_cont .room_details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
}
.videocall_random_list_cont .bottom_cont .room_details h3 {
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--cloud-burst);
}
.videocall_random_list_cont .bottom_cont .room_details p {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 400;
  color: var(--mountain-mist);
}
.videocall_random_list_cont .bottom_cont .room_join_btn {
  align-self: flex-end;
}
.videocall_random_list_cont .bottom_cont .room_join_btn button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.2rem;
  width: 9rem;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  color: var(--white);
  background: var(--button-bg-linear-gradient);
  border: none;
  border-radius: 1.4rem;
  cursor: pointer;
  transition: background 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.videocall_random_list_cont .bottom_cont .room_join_btn button:hover {
  background: var(--button-hover-bg-linear-gradient);
}
.videocall_random_list_cont .bottom_cont .room_join_btn button img {
  width: 1.4rem;
}

/* ----- [ VideoCall List Screen ] ----- */
.video_call_list_cont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}
.video_call_list_cont .card {
  min-width: 14.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  position: relative;
  text-align: center;
}
.video_call_list_cont .card .profile_image {
  width: 100%;
  height: 20rem;
  object-fit: cover;
}
.video_call_list_cont .card .card_content {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: var(--white);
  text-align: left;
  line-height: 1.4;
}
.video_call_list_cont .card .card_content h3 {
  font-size: 1.6rem;
  font-weight: 800;
}
.video_call_list_cont .card .card_content p {
  font-size: 1.2rem;
  font-weight: 600;
}
.video_call_list_cont .card .video_call_icon {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
}
.video_call_list_cont .card .video_call_icon .incomming_call_animation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video_call_list_cont .card .video_call_icon .incomming_call_animation img {
  width: 4rem;
  height: 4rem;
  animation: pulsate 1.5s infinite;
}
@keyframes pulsate {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* ----- [ Video Call Screen ] ----- */
.videocall_screen {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
}
.videocall_screen .videocall_info {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 10;
  margin-bottom: 10px;
}
.videocall_screen .videocall_info .user_id {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  color: var(--white);
}
.videocall_screen .videocall_info .user_id p {
  width: 50%;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.videocall_screen .videocall_info .videocall_timer {
  width: fit-content;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--white);
  border: 0.1rem solid var(--purple);
  background: var(--button-bg-linear-gradient);
  padding: 0.2rem 1rem;
  border-radius: 10rem;
}
.videocall_screen .finding_match_ani {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.videocall_screen .finding_match_ani img {
  width: 120px;
  filter: brightness(0) saturate(100%) invert(19%) sepia(100%) saturate(3227%)
    hue-rotate(269deg) brightness(85%) contrast(111%);
}
.participant1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  z-index: 1;
  overflow: hidden;
}
.participant1 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 10;
}
.participant1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 10;
}
.participant2 {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 14rem;
  height: 18rem;
  z-index: 100;
  border: 0.3rem solid var(--purple);
  background-color: var(--mountain-mist);
  border-radius: 1rem;
  overflow: hidden;
}
.participant2 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.videocall_screen .controllers_container {
  width: 100%;
  max-width: 48rem;
  position: fixed;
  z-index: 100;
  bottom: 0rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1.6rem 0;
  background-color: rgba(0, 0, 0, 0.7);
  border-top: 3px solid var(--purple);
  display: flex;
  justify-content: center;
  align-items: center;
}
.videocall_screen .videocall_control {
  width: 28rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.videocall_screen .videocall_control a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.videocall_screen .videocall_control .end_call_button img {
  width: 8rem;
}
.videocall_screen .videocall_control .volume_button img,
.videocall_screen .videocall_control .microphone_button img {
  width: 2.8rem;
  position: relative;
  top: 1px;
  filter: brightness(0) invert(1);
}

/* ---------------------------- [ Chat Screens ] ---------------------------- */

/* ----- [ Chat List Container ] ----- */
.chat_list_cont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}
.chat_list_cont .card {
  min-width: 14.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  position: relative;
  text-align: center;
}
.chat_list_cont .card .profile_image {
  width: 100%;
  height: 20rem;
  object-fit: cover;
}
.chat_list_cont .card .card_content {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: var(--white);
  text-align: left;
  line-height: 1.4;
}
.chat_list_cont .card .card_content h3 {
  font-size: 1.6rem;
  font-weight: 800;
}
.chat_list_cont .card .card_content p {
  font-size: 1.2rem;
  font-weight: 700;
  visibility: hidden;
}
.chat_list_cont .card .video_call_icon {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
}
.chat_list_cont .card .video_call_icon .incomming_call_animation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chat_list_cont .card .video_call_icon .incomming_call_animation img {
  width: 4rem;
  height: 4rem;
  animation: pulsate 1.5s infinite;
}
@keyframes pulsate {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* ----- [ Chat Screens ] ----- */
.chat_screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.chat_screen .chat_navigation {
  display: flex;
  justify-content: space-between;
  height: 5rem;
  margin-bottom: 2rem;
}
.chat_screen .left_cont {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.chat_screen .left_cont .back_icon img {
  width: 2.4rem;
}
.chat_screen .left_cont .user_info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.chat_screen .left_cont .user_info .user_img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 100%;
  border: 1px solid var(--purple);
}
.chat_screen .left_cont .user_info div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.chat_screen .left_cont .user_info div h4 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--black);
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
  margin-right: 20px;
}
.chat_screen .left_cont .user_info div p {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--status-dot-green);
}
.chat_screen .right_cont {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.chat_screen .right_cont img {
  width: 3.4rem;
}
.chat_interface_container {
  width: 100%;
  height: calc(100vh - 12rem - 8rem);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
}
.chat_interface_container .chat_box {
  flex-grow: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 400px) {
  .chat_interface_container .chat_box {
    margin-bottom: 6.5rem;
  }
}
.chat_interface_container .chat_box::-webkit-scrollbar {
  display: none;
}
.chat_interface_container .chat_box {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.chat_interface_container .chat_box .receiver_msg_cont {
  display: flex;
  justify-content: start;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.chat_interface_container .chat_box .sender_msg_cont {
  display: flex;
  justify-content: end;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.chat_interface_container .chat_box .receiver_msg_cont img,
.chat_interface_container .chat_box .sender_msg_cont img {
  width: 4rem;
  align-self: flex-end;
  border: 1px solid var(--purple);
  border-radius: 1rem;
}
.chat_interface_container .chat_box .sender_msg_cont img {
  padding: 0.5rem;
}
.chat_interface_container .chat_box .message {
  max-width: 75%;
  padding: 1.6rem;
  position: relative;
  font-size: 1.4rem;
}
.chat_interface_container .chat_box .message.received {
  background-color: var(--white);
  color: var(--black);
  align-self: flex-start;
  border-radius: 1rem 1rem 1rem 0;
}
.chat_interface_container .chat_box .message.sent {
  background-color: var(--purple);
  color: var(--white);
  align-self: flex-end;
  border-radius: 1rem 1rem 0 1rem;
}
.chat_interface_container .typing-indicator {
  font-style: italic;
  color: gray;
}
.chat_interface_container .chat_box .message p {
  font-size: 1.4rem;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}
.chat_interface_container .chat_input {
  position: fixed;
  width: 94%;
  max-width: 45rem;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}
.chat_interface_container .chat_input input {
  width: 100%;
  height: 8rem;
  flex-grow: 1;
  padding: 1rem 6rem 1rem 2rem;
  border-radius: 2rem;
  font-size: 1.6rem;
  border: 0.1rem solid var(--purple);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.chat_interface_container .chat_input .chat_send_icon {
  position: absolute;
  right: 2rem;
  top: 52%;
  transform: translateY(-50%);
  cursor: pointer;
}
.chat_interface_container .chat_input .chat_send_icon img {
  width: 4.2rem;
}

/* ------------------------- [ Audio Call Screens ] ------------------------- */

/* ----- [ Audio Call List Screen ] ----- */
.audiocall_list_cont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}
.audiocall_list_cont .card {
  min-width: 14.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 1.8rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  position: relative;
  text-align: center;
  border: 0.1rem solid var(--mountain-mist);
  background-color: var(--white);
}
.audiocall_list_cont .card .user_img .profile_image {
  width: 100%;
  height: 28rem;
  object-fit: cover;
}
.audiocall_list_cont .card .user_details {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
}
.audiocall_list_cont .card .user_details .card_content {
  color: var(--black);
  text-align: left;
  line-height: 1.4;
}
.audiocall_list_cont .card .card_content h3 {
  font-size: 1.8rem;
  font-weight: 500;
}
.audiocall_list_cont .card .card_content p {
  font-size: 1.4rem;
  font-weight: 400;
}
.audiocall_list_cont .card .video_call_icon .incomming_call_animation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.audiocall_list_cont .card .video_call_icon .incomming_call_animation img {
  width: 4rem;
  height: 4rem;
  animation: pulsate 1.5s infinite;
}
@keyframes pulsate {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* ----- [ Audio Call Screen ] ----- */
.audiocall_screen {
  position: relative;
}
.audiocall_screen .audiocall_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}
.audiocall_screen .audiocall_info .user_img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  border: 0.15rem dashed var(--purple);
  padding: 0.5rem;
  border-radius: 50%;
}
.audiocall_screen .audiocall_info .user_img .round-image {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  object-fit: cover;
  border: 0.15rem solid var(--purple);
}
.audiocall_screen .audiocall_info h3 {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 0.6rem;
}
.audiocall_screen .audiocall_info .audiocall_number {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}
.audiocall_screen .audiocall_info .audiocall_timmer {
  width: fit-content;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--white);
  border: 0.1rem solid var(--purple);
  background: var(--button-bg-linear-gradient);
  padding: 0.2rem 1rem;
  border-radius: 10rem;
}
.audiocall_screen .audiocall_control {
  position: fixed;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 28rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.audiocall_screen .audiocall_control a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.audiocall_screen .audiocall_control .end_call_button img {
  width: 8rem;
}
.audiocall_screen .audiocall_control .volume_button img,
.audiocall_screen .audiocall_control .microphone_button img {
  width: 2.8rem;
  position: relative;
  top: 1px;
}

/* -------------------------- [ Responsive Style ] -------------------------- */

@media (max-width: 420px) {
  html {
    font-size: 58%;
  }
}
@media (max-width: 380px) {
  html {
    font-size: 54%;
  }
}