*,
::after,
::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Urbanist", sans-serif;
}

body {
  background: url("/assets/bg.webp");
  background-position: left;
  background-color: #000113;
  background-repeat: no-repeat;
}

p {
  font-size: 14px;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semi-bold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

button:focus,
button:active {
  outline: none;
  border: none;
}

li {
  list-style: none;
}

ul {
  margin-bottom: 0 !important;
}

input:focus {
  outline: #8e91ff !important;
  border: 1px solid #8e91ff;
}

.form-check-input:checked {
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
}

.form-check-input:focus {
  border-color: #4caf50 !important;
  box-shadow: none;
}

.disabled {
  background: rgb(189, 189, 189) !important;
  outline: none;
  color: #fff !important;
  border: none;
}

.disabled-Btn {
  background: rgb(189, 189, 189) !important;
  outline: none;
  color: #fff !important;
  border: none;
}

.bg-yellow {
  background: rgb(197, 197, 6);
}

.hala-top-section {
  position: relative;
  .logo-container {
    margin: 0 auto;
    .logo {
      margin-bottom: -30px;
      width: 150px;
    }
  }
  .voice-chat-room {
    height: 450px;
    width: 450px;
    background: #17082b;
    padding: 90px 0 30px 0 !important;
    .voice-chat-room-content {
      .voice-chat-desc {
        .user {
          position: relative;
          .bg {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid #fba931;
            .user-img-icon-select {
              background: transparent;
              outline: none;
              border: 0;
              width: inherit;
              height: inherit;
              .user-img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                margin-left: -3px;
                margin-top: -1px;
              }
            }
            .dropdown-toggle {
              background: transparent;
              border: none;
              .user-img {
                object-fit: cover;
                width: 101%;
                border-radius: 50%;
              }
            }
            .user-icon {
              position: absolute;
              width: 20px;
              height: 20px;
              top: 0;
              right: 15px;
              z-index: 6;
              background: #fff;
              border-radius: 50%;
            }
          }
          .two-users {
            .bg {
              border: 6px solid #571b98;
              height: 120px;
              width: 120px;
              overflow: visible;
              border-radius: 50%;
              .user-img {
                overflow: hidden;
                object-fit: cover;
                width: 101%;
                border-radius: 50%;
              }
              &:hover {
                border-radius: 50%;
                box-shadow: 0 0 8px 5px #9c2ff1, 0 0 10px 7px #571b98;

                .bg-two {
                  .user-img {
                    overflow: hidden;
                    object-fit: cover;
                    width: 101%;
                    border-radius: 50%;
                  }
                }
                &:last-child {
                  box-shadow: 0 0 8px 5px #d415f9, 0 0 10px 7px #840196;
                }
              }
              &:last-child {
                border: 6px solid #840196;
              }
            }
            .user-one {
              position: relative;
              .flag {
                position: absolute;
                bottom: 0px;
                right: 0;
                width: 28px;
                height: 28px;
                border-radius: 50px !important;
                overflow: hidden;
                .flag-svg {
                  width: 100%;
                  height: 100%;
                }
              }
              .microphone {
                position: absolute;
                color: #fff;
                bottom: 0;
                left: 0;
                font-size: 14px;
                background: #3434348f;
                padding: 5px;
                border-radius: 50px;
              }
            }
            .user-two {
              position: relative;
              .flag {
                position: absolute;
                bottom: 0px;
                right: 0;
                width: 28px;
                height: 28px;
                border-radius: 50px !important;
                overflow: hidden;
                .flag-svg {
                  width: 100%;
                  height: 100%;
                }
              }
              .volume {
                position: absolute;
                color: #fff;
                bottom: 0;
                left: 0;
                font-size: 14px;
                background: #3434348f;
                padding: 5px;
                border-radius: 50px;
              }
            }
          }
          .fa-circle {
            color: #16b501;
            font-size: 12px;
          }
        }
      }
      .form-check-input {
        width: 50px;
        height: 29px;
      }
      .form-check-label {
        width: 100px;
      }
    }
    .msg-icon {
      .fa-regular {
        color: #fff;
        text-align: center;
        font-size: 25px;
        margin-top: 20px;
      }
    }
    .chat-options {
      width: 100%;
      margin-top: 57px;
      .chat-start {
        width: 100% !important;
        .btn {
          width: inherit;
          background: #16b501;
        }
        .bg-yellow {
          background: #ffbf00;
        }
      }
      .chat-stop {
        .btn {
          background: #9f0faf;
          width: 100%;
        }
        .bg-yellow {
          background: #ffbf00;
        }
      }
    }
    .text-green {
      color: #37d926;
    }
  }
  .text-chat {
    .text-chat-room {
      height: 450px;
      width: 450px;
      background: url("/assets/chat-room.webp");
      background-position: top center;
      position: relative;
      .chat-room-container {
        position: absolute;
        bottom: 0;
        width: 100%;
        .chat-input-options {
          background: #000226;
          width: 100%;
          .input {
            .fa {
              color: #fff;
              text-align: center;
              margin-right: 5px;
              cursor: pointer;
            }

            .fa-plus {
              position: relative;
              .media-options {
                position: absolute;
                top: -30px;
                .media-opt {
                  width: 20px !important;
                  height: 20px !important;
                }
              }
            }
            .emoji {
              padding-left: 5px;
            }
            .input-text {
              width: 80%;
              padding-left: 10px !important;
            }
            .fa-paper-plane {
              text-align: right;
              margin-left: 10px;
              margin-right: 0;
            }
          }
        }
      }
      .actual-chat {
        position: absolute;
        bottom: 7%;
        width: 100%;
        padding: 20px !important;
        .left-text {
          left: 0;
        }
        .right-text {
          right: 0;
          .text-whole {
            .text {
              background: #d415f9;
            }
          }
        }
        .text-whole {
          .img {
            height: 25px;
            width: 25px;
            border-radius: 50%;
            margin-right: 5px;
            margin-left: 5px;
            .text-user-img {
              border-radius: 50%;
              width: inherit;
              height: inherit;
            }
          }
          .text {
            max-width: 200px;
            background: #6828a7;
          }
        }
      }
    }
    .hala-chat-options {
      width: 100% !important;
      margin-top: 20px;
      .chat-both {
        width: 50%;
        margin-right: 15px;
        .btn-both {
          width: 100%;
          display: flex !important;
          background: #8e91ff;
          align-items: center;
          justify-content: center;
          .both-icon {
            margin-right: 10px;
          }
        }
      }
      .chat-all {
        width: 50%;
        .btn-all {
          width: 100%;
          background: #8e91ff;
          .all-icon {
            margin-right: 8px;
          }
        }
      }
    }
  }
  .side-bar {
    height: 400px;
    .top-section {
      .img {
        cursor: pointer;
        width: 35px;
        height: 35px;
        overflow: hidden;
        background: #d10084;
        border: 2px solid #e6399e;
        .user-img {
          width: 100%;
          height: 100%;
        }
      }
      .notification {
        position: relative;
        .notification-modal {
          background: transparent;
          outline: none;
          border: 0;
          .fa-bell {
            font-size: 25px;
            color: #fff;
          }
        }
        .modal {
          top: 30% !important;
          .modal-dialog {
            .modal-content {
              background: #00020e;
              .modal-header {
                padding-bottom: 0 !important;
                padding-top: 0 !important;
                .logo-img {
                  width: 100px;
                  height: 100px;
                }
                .close {
                  background: transparent;
                  outline: none;
                  border: 0;
                  .close-icon {
                    font-size: 20px;
                    color: #fff;
                  }
                }
              }
            }
          }
        }
        .notif-red {
          position: absolute;
          top: 0;
          right: 6px;
          height: 8px;
          width: 8px;
          border-radius: 50%;
          background: red;
        }
      }
      .earth {
        width: 35px;
        height: 35px;
        overflow: hidden;
        .dropdown-toggle {
          background: transparent;
          outline: none;
          border: 0;
          .earth-icon {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .bottom-section {
      .dropdown {
        .dropdown-toggle {
          outline: none;
          border: none;
          background: #530988;
          .fa-bars {
            color: #fff;
          }
          &::after {
            display: none !important;
          }
        }
      }
    }
  }
}

.user-img-icon-select {
  background: transparent;
  outline: none;
  border: 0;
}

.avatar-model {
  top: 15% !important;
  .modal-dialog {
    margin: 0 auto;
    width: 300px !important;
    .avatar-container {
      background: #fff;
      .container {
        padding-left: 0 !important ;
        padding-right: 0 !important;
        .row {
          .col {
            padding: 0;
            .avatar-img {
              cursor: pointer;
              border-radius: 50%;
              width: 40px;
            }
            .cat-img {
              width: 30px;
              cursor: pointer;
            }
            .next-avatar {
              width: 40px;
              cursor: pointer;
            }
          }
          .btn-avatar {
            background: #8e91ff;
            color: #fff;
            width: 50%;
            margin: 0 auto;
            margin-top: 10px;
          }
        }
      }
    }
  }
}

/* Menu Bar */
.menu-bar {
  margin-top: 70px !important;
  background: #ffa934;
  .menu-container {
    background: #ffa934;
    max-width: 950px;
    margin: 0 auto;
    .menu-list {
      display: flex;
      .menu-list-items {
        font-size: 18px;
        padding: 15px;
        padding-right: 20px;
        padding-left: 0;
        cursor: pointer;
      }
    }
    .dropdown {
      .dropdown-toggle {
        outline: none;
        border: none;
        background: #530988;
        .fa-bars {
          color: #fff;
        }
        &::after {
          display: none !important;
        }
      }
    }
  }
}

/* Global Voice Chat */
.hala-global {
  .hala-global-container {
    display: flex;
    max-width: 800px;
    margin: 0 auto;
    .hala-global-content {
      .header {
        text-align: center;
      }
      .hala-global-desc {
        .global-vid {
          width: 390px;
          height: 350px;
          margin-right: 20px;
          position: relative;
          .video {
            width: inherit;
            height: inherit;
          }
          .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 40px;
            color: #fff;
          }
        }
        .global-text {
          font-size: 18px;
        }
      }
    }
  }
}

/* Voice Chat Features */
.voice-chat-features {
  .voice-chat-container {
    max-width: 780px;
    margin: 0 auto;
    .voice-chat-content {
      .header {
        text-align: center;
      }
      .cards {
        .card-container {
          width: 250px;
          height: 460px;
          background: #ffa934;
          color: #23005e;
          .card-content {
            margin-top: 20px;
            .card-img {
              margin: 0 auto;
              width: 100px;
            }
            .card-desc {
              .desc {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
}

/* Languages options */
.lang-opt {
  max-width: 850px;
  margin: 0 auto;
  .lang-opt-container {
    .lang-opt-content {
      text-align: center;
      .tag {
        display: inline-block;
        margin: 10px 3px;
        padding: 4px 15px;
        background: #9f0eaf;
      }
      .fa-plus-circle,
      .fa-minus-circle {
        color: #fff;
        margin-left: 5px;
        cursor: pointer;
      }
    }
  }
}

/* Wave image */
.wave-final {
  overflow: hidden;
  .wave-final-img {
    object-fit: contain;
    width: 100%;
  }
}

/* Free Chat */
.free-chat {
  .free-chat-container {
    max-width: 780px;
    margin: 0 auto;
    .btn-free-chat {
      margin: 0 auto;
      text-align: center;
      width: 220px;
      height: 58px;
      background: #fff;
      padding: 0 5px;
      .bg-orange {
        font-size: 24px;
        width: 220px;
        height: 50px;
        text-align: center;
        padding-top: 5px;
        margin: 0 auto;
        background: #ffa934;
      }
    }
  }
}

.footer {
  background: #ffa934;
  .footer-container {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px 10px;
    .social-links {
      .social-icons {
        width: 30px;
        cursor: pointer;
        padding-right: 5px;
      }
    }
    .copyrights {
      margin: 0 auto;
      white-space: break-spaces;
      width: 100%;
      text-align: center !important;
      transform: translateX(-50px);
    }
  }
}

@media screen and (max-width: 1000px) {
  .voice-chat-room {
    height: auto !important;
  }
}

@media screen and (max-width: 998px) {
  .menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 90px !important;
  }
  .hala-top-section {
    .select-avatar {
      bottom: 0;
    }
  }
  .logo-container {
    background: #17082b;
    display: flex !important;
    align-items: end !important;
  }
  .top-section {
    display: flex !important;
    align-items: flex-end !important;
    margin-right: 20px;
    .img {
      cursor: pointer;
      width: 35px;
      height: 35px;
      overflow: hidden;
      background: #d10084;
      border: 2px solid #e6399e;
      .user-img {
        width: 100%;
        height: 100%;
      }
    }
    .notification {
      position: relative;
      .notification-model {
        background: transparent;
        outline: none;
        border: 0;
        .fa-bell {
          font-size: 25px;
          color: #fff;
        }
      }
      .modal {
        top: 20% !important;
        .modal-dialog {
          .modal-content {
            background: #00020e;
            .modal-header {
              padding-bottom: 0 !important;
              padding-top: 0 !important;
              .logo-img {
                width: 100px;
                height: 100px;
              }
              .close {
                background: transparent;
                outline: none;
                border: 0;
                .close-icon {
                  font-size: 20px;
                  color: #fff;
                }
              }
            }
          }
        }
      }
      .notif-red {
        position: absolute;
        top: 0;
        right: 0;
        height: 8px;
        width: 8px;
        border-radius: 50%;
        background: red;
      }
    }
    .earth {
      width: 35px;
      height: 35px;
      overflow: hidden;
      .dropdown-toggle {
        background: transparent;
        outline: none;
        border: 0;
        .earth-icon {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  /* Voice Chat Features */
  .voice-chat-features {
    .voice-chat-container {
      .voice-chat-content {
        .cards {
          .card-container {
            width: 390px;
            height: auto;
          }
        }
      }
    }
  }
  .hala-global {
    .hala-global-container {
      .hala-global-content {
        width: 100%;
        .header {
          .text-uppercase {
            white-space: breakspace;
          }
        }
        .hala-global-desc {
          .global-vid {
            width: 250px;
            height: auto;
            margin-right: 0;
          }
          .global-text {
            padding: 0 77px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 540px) {
  .hala-top-section {
    .logo-container {
      margin: 0;
      width: 100vw;
    }
    .voice-chat-room {
      height: 450px !important;
      width: auto;
      padding: 20px !important;
      .voice-chat-room-content {
        .start-text {
          padding: 0 6px;
          text-align: center;
        }
      }
      .form-check {
        margin-top: 0 !important;
      }
      .chat-options {
        width: 80%;
        margin: 30px auto 0 auto;
        .chat-start {
          width: 100% !important;
        }
        .chat-stop {
          width: 50% !important;
        }
      }
    }
    .text-chat {
      width: 100%;
      .text-chat-room {
        height: 420px;
        width: 100%;
        .chat-room-container {
          .chat-input-options {
            .input {
              .input-text {
                width: 74%;
              }
            }
          }
        }
      }
      .hala-chat-options {
        display: none !important;
      }
    }
  }
  .menu-container {
    margin: 0 !important;
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    .menu-list {
      .menu-list-items {
        font-size: 14px !important;
      }
    }
    .dropdown {
      .btn-secondary {
        font-size: 6px;
        .fa-bars {
          font-size: 12px;
        }
      }
    }
  }

  .hala-global {
    .hala-global-container {
      .hala-global-content {
        .header {
          .text-uppercase {
            font-size: 20px;
          }
        }
        .global-text {
          font-size: 14px !important;
          padding: 0 !important;
          margin-top: 30px;
        }
      }
    }
  }

  .voice-chat-features {
    .voice-chat-container {
      .voice-chat-content {
        .header {
          .text-white {
            font-size: 24px;
          }
        }
        .cards {
          .card-container {
            width: 300px;
            height: auto;
            .card-content {
              .card-desc {
                .card-heading {
                  font-size: 20px;
                }
                .desc {
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
  }

  .lang-opt {
    .lang-opt-container {
      .lang-opt-content {
        .tag {
          font-size: 11px;
        }
      }
    }
  }

  /* .avatar-model {
    .modal-dialog {
      width: 250px !important;
    }
  } */
  .wave-final {
    .wave-final-img {
      margin-top: 27px;
      transform: scale(1.5);
    }
  }

  .free-chat {
    .free-chat-container {
      .text-white {
        font-size: 12px;
      }
      .btn-free-chat {
        width: 180px;
        height: 48px;
        .bg-orange {
          width: 180px;
          height: 40px;
          font-size: 18px;
        }
      }
    }
  }

  .footer {
    .social-links {
      padding: 5px !important;
    }
    .copyrights {
      transform: translateX(0) !important;
      .copyright-text {
        font-size: 14px;
      }
    }
  }
}