:root {
  --main-color: #1f2732;
  --blue-color: #1769ff;
  --secondary-color: #3b4450;
  --helper-color: #31353b;
  --gray-color: #4d4d4d;
  --white-color: #fff;
  --paragraf-color: #667085;
  --radius-1000: 1000px;
  --radius-8: 8px;
  --main-font-size: 16px;
  --secondary-font-size: 12px;
  --main-font-weight: 400;
  --secondary-font-weight: 700;
  --main-transition-duration: 0.2s;
  --secondary-transition-duration: 0.3s;
}
/* --radius-ff: #111: */

/* Normalizing */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #f9f9f9 !important;
  position: relative;
}

html {
  scroll-behavior: smooth;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
textarea,
button,
input,
select {
  outline: none;
}
textarea:focus,
button:focus,
input:focus,
select:focus {
  outline: none;
}
a {
  text-decoration: none !important;
}
input:focus {
  outline: none;
}
.gap-6 {
  gap: 6px;
}
.gap-8 {
  gap: 6px;
}
.flex-column {
  flex-direction: column;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Start Components */
.my-border {
  border: 1px solid #ebebeb;
}
.my-blue-btn {
  background-color: var(--blue-color);
  color: var(--white-color);
  border: none;
}
.my-white-btn {
  background-color: var(--white-color);
  color: var(--main-color);
  border: 1px solid #e8e8e8;
}
.my-input {
  background-color: var(--white-color);
  color: var(--main-color);
  border: 1px solid #e8e8e8;
}
.my-input::placeholder {
  color: #828282;
  font-weight: 500;
  font-size: 14px;
}
header.title {
  text-align: center;
  margin: 64px 0;
}
header.title .title-content {
  width: 80%;
}
header.title h1 {
  font-family: Satoshi;
  font-size: 40px;
  font-weight: var(--secondary-font-weight);
  line-height: 52px;
  letter-spacing: -0.04em;
  text-align: center;
  margin-bottom: 16px;
}
header.title p {
  /* font-family: Inter; */
  font-size: var(--main-font-size);
  font-weight: var(--main-font-weight);
  line-height: 25.6px;
  text-align: center;
  color: var(--gray-color);
}
@media (max-width: 1200px) {
  header.title {
    margin: 35px 0;
  }
  header.title h1 {
    font-size: 24px;
    line-height: 31.2px;
    letter-spacing: -1px;
  }
  header.title p {
    font-size: var(--secondary-font-size);
    line-height: 19.2px;
  }
}
@media (max-width: 768px) {
  header.title {
    margin: 30px 0;
  }
  header.title h1 {
    font-size: 28px;
    line-height: 36.4px;
    letter-spacing: -1.04px;
  }
  header.title p {
    font-size: var(--main-font-size);
    line-height: 25.6px;
  }
}
.my-header {
  margin: 72px 0;
  display: flex;
  gap: 87px;
  align-items: center;
}
.my-header .image {
  flex-basis: 50%;
}
.my-header img {
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  border-radius: 24px;
  max-width: 100%;
}
.my-header .content {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.my-header .content h2,
.the-ask h2 {
  margin: 0;
  font-family: Satoshi;
  font-size: 40px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -0.04em;
}
.my-header .content p,
.the-ask p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.01em;
}
.my-header .my-blue-btn,
.the-ask .my-blue-btn {
  color: var(--white-color);
  background-color: var(--blue-color);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  text-align: center;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
  width: fit-content;
}
.my-header .my-blue-btn i,
.the-ask .my-blue-btn i {
  margin-left: 16px;
}
@media (max-width: 1200px) and (min-width: 768px) {
  .my-header {
    margin: 55px 0;
    gap: 40px;
  }
  .my-header img {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
  }
  .my-header .content h2 {
    font-size: 28px;
    line-height: 36.4px;
  }
  .the-ask h2 {
    font-size: 24px;
    line-height: 31.2px;
  }
  .my-header .content p,
  .the-ask p {
    font-size: 12px;
    line-height: 18px;
  }
  .my-header .my-blue-btn,
  .the-ask .my-blue-btn {
    font-size: 12px;
    padding: 10px 18px;
  }
  .my-header .my-blue-btn i,
  .the-ask .my-blue-btn {
    margin-left: 8px;
  }
}
@media (max-width: 768px) {
  .my-header {
    flex-direction: column;
    gap: 30px;
    margin: 30px 0 55px 0;
  }
  .my-header .image {
    width: 100%;
  }
  .my-header img {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
  }
  .my-header .content h2,
  .the-ask h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 36.4px;
  }
  .my-header .content p,
  .the-ask p {
    font-size: 15px;
    line-height: 22.5px;
  }
  .my-header .my-blue-btn,
  .the-ask .my-blue-btn {
    width: 100%;
  }
}
/* Cusome my select */
.my-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 16px;
  border: 1px solid #d7d7d7;
  background-color: var(--white-color);
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  position: relative;
  gap: 16px;
  width: fit-content;
  cursor: pointer;
}

.my-select i {
  pointer-events: none;
}
.my-select .selected,
.my-select li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.my-select svg {
  width: 20px;
  height: 20px;
}
.my-select .blue-dot {
  background-color: #3f78e0;
  width: 10px;
  height: 10px;
}
.my-select ul {
  position: absolute;
  width: 100%;
  top: 110%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 0;
  margin: 0;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  overflow: hidden;
  display: none;
  background-color: var(--white-color);
  z-index: 100;
  border: 1px solid #ebebeb;
}
.my-select.active ul {
  display: block;
}
.my-select ul li {
  padding: 8px 12px;
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
  cursor: pointer;
}
.my-select ul li:hover {
  background-color: var(--blue-color);
  color: var(--white-color);
}
/* Cusome my select */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: #00000080;
  z-index: -1;
  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
  -ms-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}
.overlay.show {
  opacity: 1;
  z-index: 1000;
}
.popup {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: var(--white-color);
  padding: 24px;
  gap: 24px;
  box-shadow: 0px 3px 2px 0px #00000026;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  z-index: 10001;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  top: -200%;
}
.popup .popup-header {
  gap: 16px;
}
.popup .popup-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background-color: #1769ff1a;
  color: var(--blue-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup .popup-close {
  cursor: pointer;
}
.popup .popup-header .header-content {
  gap: 5px;
}
.popup .popup-header .header-content .title {
  font-family: Satoshi;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.02em;
}
.popup .popup-header .header-content .desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.01em;
  color: #00000099;
}
@media (max-width: 768px) {
  .popup .popup-header .popup-icon {
    width: 35px;
    height: 35px;
    font-size: 13px;
  }
  .popup .popup-header .popup-close {
    font-size: 13px;
  }
  .popup .popup-header .header-content .title {
    font-size: 16px;
    line-height: 24px;
  }
}
@media (max-width: 576px) {
  .popup {
    padding: 12px;
  }
  .popup .popup-header {
    padding: 12px 12px 0 0;
  }
}

/* End Components */

/* Start Styling */
.tutorial {
  background-color: var(--main-color);
  color: #fff;
  font-size: var(--secondary-font-size);
  font-weight: var(--main-font-weight);
  padding: 12px 50px;
  text-align: center;
}

/* Top Nav */
.top-nav {
  padding: 16px 50px;
  border-bottom: 1px solid #d1d1d1;
  align-items: center;
}
.top-nav ul {
  gap: 16px;
  padding: 0;
  margin-top: 0;
  margin: 0;
}
.top-nav ul li {
  gap: 5px;
  line-height: 14.52px;
  cursor: pointer;
}
.top-nav ul li a {
  font-size: var(--secondary-font-size);
  font-weight: var(--main-font-weight);
  color: black;
}
/* dorpdown styling */
.my-drop {
  border: 0.8px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
  padding: 4px 6px 4px 4px;
  cursor: pointer;
  width: 124px;
}
.selected-item span,
.selected-lang span {
  font-size: var(--secondary-font-size);
  font-weight: var(--main-font-weight);
}
.selected-item + svg,
.selected-lang + svg {
  color: var(--helper-color);
  position: absolute;
  right: 6px;
}
.my-drop .menu-items {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
  top: 107%;
  width: 95%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  display: none;
  z-index: 100;
  overflow: hidden;
  /* width: 100%; */
  padding: 0;
}
.my-drop .menu-items li {
  font-size: var(--secondary-font-size);
  font-weight: var(--main-font-weight);
}
/* .my-drop:hover .menu-items {
  display: block;
} */
.my-drop.active .menu-items {
  display: block;
}
.my-drop .menu-items li {
  width: 100% !important;
  padding: 6px;
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
}
.my-drop.products-links .selected svg {
  right: 12px;
}
.top-nav .my-drop.links {
  display: none;
}
.my-drop .menu-items li:hover {
  background-color: #eee;
}
@media (max-width: 576px) {
  .top-nav {
    padding: 12px 16px;
  }
  .top-nav ul {
    display: none;
  }
  .top-nav .my-drop.links {
    display: flex;
  }
}
/* End Top Nav */
/* Start Main Nav */
.main-nav {
  margin-top: 24px;
  background-color: var(--main-color);
  border-bottom: 1px solid rgba(255, 255, 255);
  padding: 12px 14px 12px 24px;
  -webkit-border-radius: 90px;
  -moz-border-radius: 90px;
  -ms-border-radius: 90px;
  -o-border-radius: 90px;
  border-radius: 90px;
  color: #fff;
}
.main-nav .nav {
  gap: 32px;
}
.main-nav .logo img {
  cursor: pointer;
}
.main-nav .nav li {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  cursor: pointer;
}
.main-nav .nav li a {
  color: white;
}
.sign-up-btn,
.login-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
  font-style: 14px;
  line-height: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}
.sign-up-btn {
  padding: 12px 24px 12px 12px;
  background-color: var(--blue-color);
}
.sign-up-btn svg,
.sign-up-btn span {
  pointer-events: none;
}
.login-btn {
  padding: 12px 24px;
  background-color: var(--secondary-color);
}
@media (min-width: 768px) and (max-width: 990px) {
  .main-nav .nav {
    gap: 24px;
  }
  .main-nav .nav li {
    font-size: var(--secondary-font-size);
  }
  .sign-up-btn,
  .login-btn {
    font-size: 13px;
  }
}
/* Registeration Methods */
.auth .registeration-methods {
  width: 413px;
  height: 232px;
  flex-direction: column;
  position: absolute;
  top: 65px;
  left: -268px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  gap: 8px;
  padding: 8px;
  background-color: #fff;
  display: none !important;
  z-index: 100;
}
.auth .registeration-methods.show {
  display: flex !important;
}
.auth .registeration-methods .polygon {
  width: 22px;
  height: 19px;
  background-color: #fff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  position: absolute;
  top: -19px;
  right: 68px;
}
.auth .registeration-methods > div,
.auth .registeration-methods .register-btn,
.register-menu .registeration-methods > div,
.register-menu .registeration-methods .register-btn {
  background-color: #f8f9fa;
  padding: 12px 8px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  width: 100%;
}
.auth .registeration-methods span {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}
.auth .registeration-methods > div,
.register-menu .registeration-methods > div {
  border: 1px solid #e9e9e9;
  gap: 12px;
  color: var(--main-color);
}
.auth .registeration-methods .register-btn,
.register-menu .registeration-methods .register-btn {
  color: #fff;
  background-color: var(--blue-color);
  border: none;
}

/* Start Menu */
.main-nav .menu {
  background-color: var(--secondary-color);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  width: 42px;
  height: 42px;
  display: none;
  margin-left: 8px;
}
@media (max-width: 768px) {
  .auth .registeration-methods {
    display: none !important;
  }
  .main-nav .menu {
    display: flex;
  }
  .main-nav .nav,
  .main-nav .auth .login-btn {
    display: none;
  }
  .main-nav .logo {
    flex: 1;
  }
}
.main-nav .menu .hidden {
  opacity: 0;
  display: none;
  -webkit-transition: var(--secondary-transition-duration);
  -moz-transition: var(--secondary-transition-duration);
  -ms-transition: var(--secondary-transition-duration);
  -o-transition: var(--secondary-transition-duration);
  transition: var(--secondary-transition-duration);
}
.menu-content,
.register-menu {
  position: absolute;
  top: 200px;
  left: 50%;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  background-color: var(--main-color);
  text-transform: uppercase;
  width: 92%;
  padding: 22px 41px;
  display: none;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 100;
}
.register-menu {
  background-color: #fff;
  display: flex;
  gap: 12px;
  padding: 8px;
  color: var(--main-color);
  text-transform: capitalize;
  z-index: 100;
  display: none !important;
  /* top: 90px; */
}
.register-menu.show {
  display: flex !important;
}
.register-menu header span {
  font-weight: bold;
}
.register-menu .registeration-methods {
  gap: 8px;
}
.register-menu .registeration-methods div div,
.auth .registeration-methods div div {
  gap: 12px;
  font-size: var(--secondary-font-size);
  font-weight: 500;
  line-height: 18px;
  width: 61%;
  justify-content: flex-start;
  align-items: center;
}

.menu-content.active {
  display: block;
}
.menu-content .content {
  flex-direction: column;
  gap: 56px;
  margin-bottom: 20px;
}
.menu-content .content h5 {
  color: #979797;
  letter-spacing: 1.2px;
  font-weight: normal;
}
.menu-content .content .links {
  flex-direction: column;
  gap: 32px;
  width: 100%;
}
.menu-content .content .login-btn {
  width: 100%;
}
.menu-content .copyrights {
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.08px;
  color: #979797;
}
/* End Menu */
/* End Main Nav */

/* Start Slider */
#main-slider {
  margin: 24px 0;
}
#main-slider .owl-item .the-slider {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  overflow: hidden;
}
#main-slider .the-slider > img {
  width: 100%;
  object-fit: cover;
  height: 396px;
}
/* #main-slider .owl-stage,
#main-slider .owl-stage .owl-item {
  width: 100% !important;
} */
#main-slider .owl-nav {
  display: none;
}
#main-slider .owl-dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 230px;
  height: 40px;
  background-color: #f9f9f9;
  border-radius: 12px 12px 0 0;
}
#main-slider .owl-dots::before,
#main-slider .owl-dots::after {
  content: "";
  position: absolute;
}
#main-slider .owl-dots .owl-dot {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  border: none;
  background-color: #d9d9d9;
  width: 50px;
  height: 8px;
}
#main-slider .owl-dots .owl-dot.active {
  background-color: var(--blue-color);
}
/* Start landing */

.landing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.landing-content {
  position: relative;
  top: 56px;
  left: 35px;
  color: #fff;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (max-width: 1300px) {
  .landing-content {
    width: 50%;
  }
}
.landing-content h1 {
  font-size: 40px;
  font-weight: var(--secondary-font-weight);
  line-height: 48px;
  letter-spacing: -1.04px;
  margin-bottom: 16px;
}

.landing-content p {
  font-size: 15px;
  font-weight: var(--main-font-weight);
  line-height: 22.5px;
  letter-spacing: -1.01px;
}
.landing-content .register-btn {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background-color: var(--blue-color);
  color: #fff;
  border: none;
  outline: none;
  width: fit-content;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
}
.landing-content .register-btn span {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
}
.landing-content .register-btn svg {
  width: 24px;
  height: 24px;
}
.landing .image {
  position: relative;
}
#main-slider .landing .image img {
  width: 550.81px;
  -webkit-transform: translate(55px, -10px) rotate(5.19deg);
  -moz-transform: translate(55px, -10px) rotate(5.19deg);
  -ms-transform: translate(55px, -10px) rotate(5.19deg);
  -o-transform: translate(55px, -10px) rotate(5.19deg);
  transform: translate(55px, -10px) rotate(5.19deg);
}
@media (max-width: 1200px) {
  #main-slider .the-slider > img {
    height: 321px;
  }
  .landing-content {
    width: 35%;
  }
  .landing-content h1 {
    font-size: 24px;
    font-weight: var(--secondary-font-weight);
    line-height: 28.8px;
    letter-spacing: -1.04px;
  }
  .landing-content p {
    font-size: var(--secondary-font-size);
    line-height: 18px;
  }
  #main-slider .landing .image img {
    width: 460.81px;
    -webkit-transform: translate(48px, -23px) rotate(5.19deg);
    -moz-transform: translate(48px, -23px) rotate(5.19deg);
    -ms-transform: translate(48px, -23px) rotate(5.19deg);
    -o-transform: translate(48px, -23px) rotate(5.19deg);
    transform: translate(48px, -23px) rotate(5.19deg);
  }
}
@media (max-width: 800px) {
  .landing-content {
    width: 45%;
  }
}
@media (max-width: 768px) {
  #main-slider .the-slider > img {
    height: 100vh;
  }
  .landing {
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
  }
  .landing-content {
    width: 100%;
    top: 0;
    left: 0;
    padding: 30px 16px 0 20px;
  }
  .landing-content .content {
    width: 70%;
  }
  #main-slider .landing .image {
    display: block;
  }
  #main-slider .landing .image img {
    width: 520.81px;
    position: absolute;
    bottom: 27px;
    right: -34px;
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@media (max-width: 580px) {
  #main-slider .owl-dots {
    width: 160px;
    height: 34px;
  }
  #main-slider .owl-dots .owl-dot {
    width: 38px;
    height: 6px;
  }
}
@media (max-width: 500px) {
  .landing-content .content {
    width: 100%;
  }
  .landing-content .register-btn {
    width: 100%;
    justify-content: center;
  }
  #main-slider .landing .image img {
    position: absolute;
    bottom: 43px;
    right: -72px;
    -webkit-transform: rotate(13deg);
    -moz-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    -o-transform: rotate(13deg);
    transform: rotate(13deg);
  }
}
/* End landing */
/* End Slider */
/* Start Some Info */
.informations {
  gap: 24px;
}
.informations .box {
  flex-basis: 25%;
  background-color: #fff;
  padding: 30px 24px;
  border: 1px solid #e1e1e1;
  gap: 16px;
  align-items: center;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  justify-content: flex-start;
}
.informations .box .icon {
  width: 46px;
  height: 46px;
  -webkit-border-radius: 52.57px;
  -moz-border-radius: 52.57px;
  -ms-border-radius: 52.57px;
  -o-border-radius: 52.57px;
  border-radius: 52.57px;
  background-color: #000;
}
.informations .box .title {
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -1.01px;
  text-align: start;
  margin: 0;
}
@media (max-width: 768px) {
  .informations {
    flex-wrap: wrap;
    gap: 12px;
  }
  .informations .box {
    flex-basis: 45%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
  }
  .informations .box .icon {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 45.71px;
    -moz-border-radius: 45.71px;
    -ms-border-radius: 45.71px;
    -o-border-radius: 45.71px;
    border-radius: 45.71px;
  }
  .informations .box .icon svg {
    width: 20.87px;
    height: 20.87px;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .informations .box {
    padding: 10px;
    border: 1px solid #e1e1e1;
    align-items: center;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px;
  }
  .informations .box .icon {
    width: 24px;
    height: 24px;
    -webkit-border-radius: 27.43px;
    -moz-border-radius: 27.43px;
    -ms-border-radius: 27.43px;
    -o-border-radius: 27.43px;
    border-radius: 27.43px;
  }
  .informations .box .icon svg {
    width: 12.52px;
    height: 12.52px;
  }
  .informations .box .title {
    font-size: var(--secondary-font-size);
    line-height: 15.6px;
  }
}
/* Enf Some info */

/* Start what we help you */
.achive-goals {
  margin-top: 72px;
  padding: 0 50px;
  gap: 48px;
  text-align: center;
}
.achive-goals .content {
  padding: 0 50px;
  text-align: center;
}
@media (max-width: 768px) {
  .achive-goals,
  .achive-goals .content {
    padding: 0;
  }
}
@media (min-width: 992px) {
  .achive-goals .content {
    padding: 0 50px;
  }
}
@media (min-width: 1200px) {
  .achive-goals .content {
    padding: 0 80px;
  }
}
.achive-goals .links {
  gap: 10.67px !important;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}
.achive-goals .links li {
  padding: 6.67px 16px 6.67px 6.67px;
  display: flex;
  align-items: center;
  gap: 5.33px;
  border: 0.67px solid #dfdfdf;
  background-color: #fff;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
  cursor: pointer;
  -webkit-transition: var(--secondary-transition-duration);
  -moz-transition: var(--secondary-transition-duration);
  -ms-transition: var(--secondary-transition-duration);
  -o-transition: var(--secondary-transition-duration);
  transition: var(--secondary-transition-duration);
  width: 88px !important;
  height: 32px !important;
}
.achive-goals .links li:hover {
  background-color: var(--blue-color);
  color: #fff;
}
.achive-goals .links li:hover svg path {
  fill: white !important;
}
.achive-goals .links li.all-products {
  width: 106px !important;
  margin-right: 10px;
  white-space: nowrap;
}
.achive-goals .links li.all-products::before {
  content: "";
  position: absolute;
  width: 0;
  height: 16px;
  border: 0.67px solid rgba(0, 0, 0, 0.2);
  top: 5px;
  right: -12px;
  cursor: none !important;
}
.achive-goals ul li.youtube svg path {
  fill: #000;
}
.achive-goals .links li svg {
  width: 16px;
  height: 16px;
}
.achive-goals .links li svg.products {
  width: 13.33px;
  height: 13.33px;
}
.achive-goals .links span {
  font-size: 11px;
  font-weight: 500;
  line-height: 14.3px;
  letter-spacing: -1.01px !important;
}
@media (min-width: 1200px) {
  .achive-goals ul {
    gap: 16px;
  }
  .achive-goals ul li {
    width: 133px;
    padding: 10px 24px 10px 10px;
    gap: 8px;
    border: 1px solid #dfdfdf;
    background-color: #fff;
    -webkit-border-radius: 56px;
    -moz-border-radius: 56px;
    -ms-border-radius: 56px;
    -o-border-radius: 56px;
    border-radius: 56px;
  }
  .achive-goals ul li.all-products {
    width: 160px;
    margin-right: 26px;
  }
  .achive-goals ul svg.products {
    width: 20px;
    height: 20px;
  }
  .achive-goals ul li.all-products::before {
    height: 24px;
    border-width: 1px;
    top: 7px;
    right: -23px;
  }
  .achive-goals ul svg {
    width: 24px;
    height: 24px;
  }

  .achive-goals ul span {
    font-size: 14px;
    font-weight: 500;
    line-height: 18.2px;
    letter-spacing: -1.01px;
  }
}
/* Start my-drop products links */

.achive-goals .products-links {
  margin-top: 32px;
  width: 100%;
  padding: 16px;
}
.achive-goals .products-links ul {
  -webkit-transition: var(--secondary-transition-duration);
  -moz-transition: var(--secondary-transition-duration);
  -ms-transition: var(--secondary-transition-duration);
  -o-transition: var(--secondary-transition-duration);
  transition: var(--secondary-transition-duration);
}
.achive-goals .products-links > ul {
  width: 100%;
  top: 51px;
  right: 0;
}
.achive-goals .products-links > ul li {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
.achive-goals .products-links > ul li svg {
  width: 14px;
  height: 14px;
}
.achive-goals .products-links > ul li span {
  font-size: var(--secondary-font-size);
  font-weight: var(--main-font-weight);
}
.achive-goals .selected-item svg {
  width: 20px;
  height: 20px;
}
.achive-goals .selected-item span {
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -1.01px;
}
@media (min-width: 768px) {
  .achive-goals .products-links {
    display: none;
  }
}
@media (max-width: 768px) {
  .achive-goals .links {
    display: none;
  }
}
/* End links styling */
/* End what we help you */

/* Start Youtube videos */
.youtube-videos {
  margin-top: 72px;
}
.youtube-videos .content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  overflow: hidden;
}
.youtube-videos .box,
.product-details-page .explore-products .box {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  border: 1px solid #e2e2e2;
  overflow: hidden;
  margin-bottom: 16px;
}
.youtube-videos .box .image,
.product-details-page .explore-products .box .image {
  width: 100%;
  background-color: #e6e8ec;
  height: 189px;
  cursor: pointer;
}
.youtube-videos .box .image img,
.product-details-page .explore-products .box img {
  width: 121px;
}
.youtube-videos .box svg,
.product-details-page .explore-products .box svg {
  position: absolute;
  top: 11px;
  right: 11px;
}
.youtube-videos .box .box-content,
.product-details-page .explore-products .box .box-content {
  flex-direction: column;
  width: 100%;
  padding: 16px;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}
.youtube-videos .box .box-content .title,
.product-details-page .explore-products .box .vox-content .title {
  font-size: var(--main-font-size);
  font-weight: var(--secondary-font-weight);
  line-height: 22.4px;
  padding: 0;
  margin: 0;
}
.youtube-videos .box .box-content .sold,
.product-details-page .explore-products .box .sold {
  gap: 28px;
  color: #828282;
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 16.94px;
}
.youtube-videos .box .box-content .sold > span,
.product-details-page .explore-products .box .sold > span {
  position: relative;
}
.youtube-videos .box .box-content .sold > span::before,
.product-details-page .explore-products .box .sold > span::before {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  right: -14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.youtube-videos .box .box-content .rank,
.product-details-page .explore-products .box .rank {
  gap: 5px;
  align-items: center;
}
.youtube-videos .box .box-content .rank i,
.product-details-page .explore-products .box .rank i {
  color: #ff8b36;
}
.youtube-videos .box .box-content .price,
.product-details-page .explore-products .price {
  font-size: 18px;
  font-weight: 600;
  line-height: 21.78px;
  margin-top: 12px;
}
@media (max-width: 768px) {
  .youtube-videos {
    margin-top: 48px;
  }
}
@media (max-width: 1200px) and (min-width: 768px) {
  .youtube-videos .box.hidden {
    display: none;
  }
  .youtube-videos .box .image img {
    width: 60px;
  }
  .youtube-videos .box .image svg {
    width: 24px;
    height: 24px;
  }
  .youtube-videos .box .box-content .title {
    font-size: var(--secondary-font-size);
    font-weight: var(--secondary-font-weight);
    line-height: 16.8px;
    padding: 0;
    margin: 0;
  }
  .youtube-videos .box .box-content .sold {
    gap: 20px;
    color: #828282;
    font-size: 11px;
    font-weight: var(--main-font-weight);
    line-height: 13.31px;
  }
  .youtube-videos .box .box-content .sold > span::before {
    right: -10px;
  }
  .youtube-videos .box .box-content .price {
    font-size: var(--secondary-font-size);
    font-weight: 600;
    line-height: 14.52px;
  }
}
@media (min-width: 768px) {
  .youtube-videos .owl-carousel {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .youtube-videos .content {
    display: none;
  }
}
/* End Youtube videos */
/* Start questions section */
.accordion {
  width: 100%;
}
.accordion h6 {
  margin: 0;
}
.accordion hr {
  background: #0000001a;
  color: #0000001a;
  height: 1.6px;
}
.accordion-item {
  margin-bottom: 15px;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -ms-border-radius: 12px !important;
  -o-border-radius: 12px !important;
  border-radius: 12px !important;
  overflow: hidden;
  border: 1px solid #e8e8e8 !important;
}
.accordion-item:first-of-type .accordion-button {
  -webkit-border-radius: 0 !important ;
  -moz-border-radius: 0 !important ;
  -ms-border-radius: 0 !important ;
  -o-border-radius: 0 !important ;
  border-radius: 0 !important ;
}
.accordion .helpful {
  justify-content: flex-end;
  margin-right: 8px;
  gap: 8px;
  align-items: center;
}
.accordion .accordion-header .helpful > span:first-child {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 22.4px;
  color: var(--helper-color);
}
.accordion .helpful > span:last-child,
.accordion-body .add-like {
  padding: 4px 8px;
  gap: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  background-color: hsla(219, 100%, 55%, 0.051);
}
.accordion-body .answer p,
.accordion-body .still-need-btn span,
.accordion-body .helpful span:first-child {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 22.4px;
}
.accordion-body .answer p {
  color: var(--helper-color);
  max-width: 648px;
}
.accordion-body .answer .still-need-btn {
  max-width: 178.5px;
  border: 1px solid #0000001a;
  padding: 8px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.accordion-body .still-need-btn span {
  color: #000;
}
.accordion-body .still-need-btn button {
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  padding: 7px 10px;
  border: 1px solid #0000001a;
  font-size: var(--secondary-font-size);
  font-weight: var(--main-font-weight);
  line-height: 19.2px;
  background-color: #fff;
  margin-top: 20px;
}
.accordion-body .still-need-btn span,
.accordion-body .still-need-btn button {
  white-space: nowrap;
}
.accordion-body .helpful {
  margin-top: 16px;
  justify-content: space-between;
}
.accordion-body .helpful span:first-child {
  color: var(--helper-color);
}
.accordion-body .add-like {
  width: fit-content;
  cursor: pointer;
}
@media (max-width: 992px) {
  .accordion-body .answer p,
  .accordion-body .still-need-btn span {
    font-size: var(--secondary-font-size);
    font-weight: var(--main-font-weight);
    line-height: 19.2px;
  }
  .accordion-body .answer p {
    max-width: 437px;
  }
  .accordion-body .answer .still-need-btn {
    max-width: 163px;
  }
}
@media (max-width: 992px) and (min-width: 768px) {
  .home-page .accordion {
    display: flex;
    gap: 16px;
  }
  .home-page .accordion .div {
    flex: 1;
  }
  .home-page .accordion-header .helpful span:first-child {
    display: none;
  }
  .home-page .accordion-header .helpful span:last-child {
    font-family: Inter;
    font-size: 8px;
    font-weight: 500;
    line-height: 12.8px;
    text-align: left;
  }
  .home-page .accordion-header .helpful span:last-child svg {
    width: 12px;
    height: 12px;
  }
  .home-page .accordion-header h6 {
    font-size: 10px;
    font-weight: 600;
    line-height: 13px;
  }
  .home-page .accordion-button::after {
    background-size: 16px;
    width: 16px;
    height: 16px;
  }
  .home-page .accordion-body .still-need-btn {
    width: 350px !important;
    height: fit-content;
    margin-left: 10px;
  }
  .home-page .accordion-body p,
  .home-page .accordion-body .still-need-btn span,
  .home-page .accordion-body .still-need-btn button,
  .home-page .accordion-body .helpful span {
    font-size: 10px !important;
    line-height: 15px;
  }
  .home-page .accordion-body .still-need-btn button {
    font-size: 8px !important;
    line-height: 12.8px;
    margin-top: 4px;
  }
  .home-page .accordion-body .add-like {
    font-family: Inter;
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
  }
  .home-page .accordion-body .add-like svg {
    width: 14px;
    height: 14px;
  }
}
@media (min-width: 768px) {
  .accordion .accordion-body .helpful .hidden {
    display: none;
  }
}
@media (max-width: 768px) {
  .accordion .accordion-header .helpful {
    display: none;
  }
  .accordion-body .answer {
    flex-direction: column;
  }
  .accordion-body .answer .still-need-btn {
    max-width: 100%;
  }
  .accordion-body .still-need-btn button {
    margin-top: 12px;
    width: 100%;
  }
  .accordion-body .add-like {
    font-size: 14px;
  }
  .accordion-body .helpful span:last-child {
    font-size: 14px;
  }
}
/* End questions section */

/* Start Social Media Section */
.social-media {
  margin-bottom: 64px;
}
.social-media .content {
  gap: 20px;
}
.social-media .content .box {
  background-color: #fff;
  padding: 12px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  border: 1px solid #e1e1e1;
  align-items: flex-start;
}
.social-media .box .header {
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.social-media .box .header img {
  width: 46px;
  height: 46px;
}

.social-media .box .header .info {
  margin-top: 0;
  gap: 1px;
  align-items: flex-start;
  justify-content: center;
}
.social-media .box .header .info .social-package {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 22.4px;
  color: var(--gray-color);
}
.social-media .box .header .info .price {
  font-family: Satoshi;
  font-size: 18px;
  font-weight: var(--secondary-font-weight);
  line-height: 23.4px;
}
.social-media .box .packages {
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}
.social-media .box .packages img {
  width: 47.5%;
}
@media (max-width: 992px) and (min-width: 768px) {
  .social-media .content {
    gap: 16px;
  }
  .social-media .box .header img {
    width: 32px;
    height: 32px;
  }
  .social-media .box .packages {
    gap: 4px;
  }
  .social-media .box .header .info .social-package {
    font-family: Inter;
    font-size: 11px;
    font-weight: var(--main-font-weight);
    line-height: 17.6px;
  }
  .social-media .box .header .info .price {
    font-family: Satoshi;
    font-size: 11px;
    font-weight: var(--secondary-font-weight);
    line-height: 14.3px;
  }
  .social-media .content .box {
    padding: 8px;
    border: 0.56px 0px 0px 0px;
    opacity: 0px;
    -webkit-border-radius: var(--radius-8);
    -moz-border-radius: var(--radius-8);
    -ms-border-radius: var(--radius-8);
    -o-border-radius: var(--radius-8);
    border-radius: var(--radius-8);
  }
}
@media (max-width: 768px) {
  .social-media .box .header {
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-direction: row;
  }
  .social-media .box .header img {
    width: 46px !important;
    height: 46px;
  }
}
/* Start Owl carousal */
.owl-carousel .owl-item .box {
  width: 100%;
}
@media (max-width: 650px) {
  .social-media .content.show {
    display: none;
  }
}
@media (min-width: 650px) {
  .owl-carousel.content {
    display: none !important;
  }
}
/* End Owl carousal */
/* End Social Media Section */

/* Start Customers Comments */
.customers-comments .box {
  padding: 20px;
  gap: 48px;
  border: 1px 0px 0px 0px;
  opacity: 0px;
  border: 1px solid #0000001a;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  -webkit-transition: var(--secondary-transition-duration);
  -moz-transition: var(--secondary-transition-duration);
  -ms-transition: var(--secondary-transition-duration);
  -o-transition: var(--secondary-transition-duration);
  transition: var(--secondary-transition-duration);
  align-items: flex-start;
}
.customers-comments .box:hover {
  background-color: var(--blue-color);
  color: #fff;
}
.customers-comments .box:hover .name + span,
.customers-comments .box:hover .comment-date {
  color: #ffffff99 !important;
}
.customers-comments .box .header {
  gap: 16px;
}
.customers-comments .box .header img {
  width: 46px;
  height: 46px;
  gap: 0px;
  opacity: 0px;
}
.customers-comments .box .customer-info {
  gap: 3px;
}
.customers-comments .box .customer-info .name {
  font-family: Satoshi;
  font-size: var(--main-font-size);
  font-weight: var(--secondary-font-weight);
  line-height: 20.8px;
  letter-spacing: -0.02em;
  text-align: left;
}
.customers-comments .box .customer-info .name + span {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 22.4px;
  text-align: left;
  color: var(--gray-color);
}
.customers-comments .box .comment {
  font-family: Satoshi;
  font-size: var(--main-font-size);
  font-weight: 500;
  line-height: 22.4px;
  text-align: left;
}
.customers-comments .box .comment-date {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 22.4px;
  text-align: left;
  color: var(--gray-color);
}
@media (max-width: 991px) and (min-width: 768px) {
  .customers-comments .box .header .name,
  .customers-comments .box .comment,
  .customers-comments .box .comment-date {
    font-size: var(--secondary-font-size);
    line-height: 16.8px;
  }
  .customers-comments .box .header .name + span {
    font-size: 10px;
  }
}

/* End Customers Comments */

/* Start Footer */
footer {
  background-color: #141b24;
  padding: 40px 70px 33px 70px;
  margin-top: 40px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  color: #fff;
  margin-bottom: 12px;
}
footer hr {
  background: #ffffff33;
  color: #ffffff33;
  height: 1.6px;
}
/* Start Conternt */
footer .content {
  justify-content: space-between;
  /* gap: 32px; */
}
footer .content .all-links {
  justify-content: space-between;
}
footer .content .logo img {
  margin-bottom: 24px;
  cursor: pointer;
}
footer .logo-content {
  gap: 24px;
}
footer .logo-content .terms {
  gap: 28px;
}
footer .logo-content span:not(:last-child) {
  position: relative;
}
footer .logo-content span:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  right: -14px;
  border: 1px solid #ffffff26;
}
footer .content .logo,
footer .content .all-links {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 19.6px;
  text-align: left;
  color: #ffffffb2;
}
footer .content .active {
  font-family: Satoshi;
  font-size: var(--main-font-size);
  font-weight: var(--secondary-font-weight);
  line-height: 16px;
  text-align: left;
  color: #fff;
  margin-bottom: 24px;
}
footer .content .all-links li:not(:first-child) {
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
}
footer .content .all-links li:not(:first-child):hover {
  padding-left: 10px;
}
footer .contact {
  width: fit-content;
}
footer .contact .title {
  margin: 0;
  margin-bottom: 24px;
}
footer .contact .title i {
  font-size: var(--main-font-size);
  color: var(--blue-color);
  display: none;
}
footer .contact .contact-methods {
  gap: 16px;
  flex-direction: column;
}
footer .contact .contact-methods > div {
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 0.8px solid #ffffff40;
  padding: 8px 12px;
  gap: 8px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
footer .contact .contact-methods > div {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 14px;
  text-align: left;
  width: 100%;
}
footer .contact .contact-methods .whatsapp .warning {
  font-size: var(--secondary-font-size);
  font-weight: var(--main-font-weight);
  line-height: 12px;
  text-align: left;
  color: #78dc94;
}
footer .all-links-small {
  margin: 32px 0;
}
footer .all-links-small .header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  cursor: pointer;
  margin-bottom: 16px;
}
footer .all-links-small .header i.hidden {
  display: none;
}
footer .all-links-small .header .header-title i {
  color: var(--blue-color);
  margin-right: 8px;
}
footer .all-links-small .header .header-title span {
  font-family: Satoshi;
  font-size: var(--main-font-size);
  font-weight: var(--secondary-font-weight);
  line-height: 16px;
}
footer .all-links-small ul {
  display: none;
}
footer .all-links-small ul.show {
  display: block;
}
footer .all-links-small ul li {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 14px;
  text-align: left;
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
}
footer .all-links-small ul li:hover {
  padding-left: 10px;
}

@media (max-width: 1199px) and (min-width: 768px) {
  footer {
    padding: 32px 24px 28px 24px;
  }
  footer .content {
    flex-wrap: wrap;
  }
  footer .content .logo,
  footer .content .contact {
    width: 50% !important;
  }
  footer .content .all-links {
    width: 100% !important;
    margin-top: 72px;
  }
  footer .content .contact .contact-methods {
    flex-direction: row;
    flex-wrap: wrap;
  }
  footer .content .contact .contact-methods > div {
    width: 45%;
    font-size: var(--secondary-font-size);
    line-height: 12px;
  }
  footer .content .contact .contact-methods > div:not(:first-child) {
    padding: 10px 12px !important;
  }
  footer .content .contact .contact-methods .whatsapp .warning {
    font-size: 11px;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  footer .content .all-links li:not(:first-child):hover {
    padding-left: 10px;
  }
}
@media (max-width: 768px) {
  footer {
    padding: 40px 24px 33px 24px;
  }
  footer .content .logo img {
    margin-bottom: 32px;
  }
  footer .content {
    flex-direction: column;
  }
  footer .content > div {
    width: 100% !important;
  }
  footer .content .contact .contact-methods {
    width: 100% !important;
  }
  footer .content .contact .contact-methods > div:not(:first-child) {
    padding: 12px !important;
  }
  footer .content .all-links {
    display: none;
  }
  footer .contact .title i {
    display: inline;
    margin-right: 8px;
  }
}
@media (min-width: 768px) {
  footer .content .all-links-small {
    display: none;
  }
}
@media (min-width: 576px) and (max-width: 992px) {
  footer .content .contact .contact-methods {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }
  footer .content .contact .contact-methods > div {
    width: 45%;
  }
}
/* End Conternt */
/* Start Payment */
footer .payment .supported-by {
  gap: 24px;
}
footer .payment .supported-by span {
  font-family: Satoshi;
  font-size: var(--secondary-font-size);
  font-weight: 500;
  line-height: 14.4px;
  letter-spacing: 0.08em;
  text-align: left;
  color: #979797;
}
footer .payment .payment-methods {
  gap: 8px;
}
footer .payment .ask-section {
  gap: 24px;
}
footer .payment .ask-section > div {
  gap: 16px;
}
footer .payment .ask-section > div span {
  font-family: Inter;
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 14px;
  text-align: left;
}
@media (max-width: 991px) {
  footer .payment .supported-by {
    flex-direction: column;
    align-items: flex-start !important;
  }
  footer .payment {
    flex-direction: column;
    gap: 20px;
    /* align-items: flex-start !important; */
  }
  footer .payment .payment-methods {
    flex-wrap: wrap;
  }
}
/* End Payment */
/* Start end footer */
footer .end-footer .copyrights {
  font-family: Satoshi;
  font-size: var(--secondary-font-size);
  font-weight: 500;
  line-height: 14.4px;
  letter-spacing: 0.08em;
  text-align: left;
  color: #979797;
}
footer .end-footer .socials {
  gap: 12px;
}
footer .end-footer .socials svg {
  cursor: pointer;
}
footer .end-footer .socials svg:hover rect {
  -webkit-transition: var(--secondary-transition-duration);
  -moz-transition: var(--secondary-transition-duration);
  -ms-transition: var(--secondary-transition-duration);
  -o-transition: var(--secondary-transition-duration);
  transition: var(--secondary-transition-duration);
  fill: var(--blue-color) !important;
}
footer .my-drop {
  border: 0.8px solid #ffffff40;
}
footer .my-drop .selected > svg path {
  fill: #fff !important;
}
footer .footer-drop .menu-items {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
  top: -65px;
  width: 95%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  /* display: none !important; */
  z-index: 1;
  overflow: hidden;
}
footer .footer-drop .menu-items li {
  color: #000;
}

/* footer .footer-drop:hover .menu-items {
  display: block !important;
} */
footer .arrows {
  gap: 8px;
}
footer .click-to-top {
  width: 36px;
  height: 36px;
  border: 0.8px solid #ffffff40;
  cursor: pointer;
  -webkit-transition: var(--secondary-transition-duration);
  -moz-transition: var(--secondary-transition-duration);
  -ms-transition: var(--secondary-transition-duration);
  -o-transition: var(--secondary-transition-duration);
  transition: var(--secondary-transition-duration);
}
footer .click-to-top:hover {
  background-color: var(--blue-color);
}
@media (max-width: 768px) {
  footer .end-footer {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start !important;
  }
  footer .end-footer .copyrights {
    margin-top: 32px;
  }
  footer .end-footer > div {
    width: 100%;
    justify-content: space-between;
  }
  footer .end-footer .socials {
    width: 60%;
  }
}
@media (max-width: 576px) {
  footer .end-footer .socials {
    width: 100%;
  }
}
/* Mini footer */
.mini-footer {
  padding: 10px;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  -ms-border-radius: 48px;
  -o-border-radius: 48px;
  background-color: #141b24;
  border-radius: 48px;
  margin: 10px 0 24px 0;
  display: none;
}
.mini-footer > div {
  gap: 3px;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  cursor: pointer;
  flex: 1;
}
.mini-footer > div i {
  color: var(--paragraf-color);
}
.mini-footer > div span {
  color: #9197a4;
}
.mini-footer > div.active i {
  color: var(--blue-color);
}
.mini-footer > div.active span {
  color: var(--white-color);
  font-weight: 500;
}
@media (max-width: 768px) {
  .mini-footer {
    display: flex;
  }
}
/* Mini footer */
/* end end footer */
/* End Footer */

/* Custome Carousel */ /* Start Carousel  */
.customers-comments .owl-carousel .owl-stage-outer {
  margin-bottom: 56px;
}
.owl-carousel .owl-stage {
  padding: 0 !important;
}
.customers-comments .owl-carousel .owl-nav,
.customers-comments .owl-carousel .owl-dots,
.youtube-videos .owl-carousel .owl-nav,
.youtube-videos .owl-carousel .owl-dots,
#testimonials-carousel .owl-nav,
#testimonials-carousel .owl-dots,
#recent-blogs-carousel .owl-nav,
#recent-blogs-carousel .owl-dots,
#reasons-carousel .owl-nav,
#reasons-carousel .owl-dots {
  text-align: end;
  display: block !important;
  /* gap: 8px; */
}
.customers-comments .owl-carousel .owl-nav .owl-next,
.youtube-videos .owl-carousel .owl-nav .owl-next,
#testimonials-carousel .owl-nav .owl-next,
#recent-blogs-carousel .owl-nav .owl-next,
#reasons-carousel .owl-nav .owl-next {
  margin-left: 8px;
}
.customers-comments .owl-carousel .owl-nav .owl-next,
.customers-comments .owl-carousel .owl-nav .owl-prev,
.youtube-videos .owl-carousel .owl-nav .owl-next,
.youtube-videos .owl-carousel .owl-nav .owl-prev,
#testimonials-carousel .owl-nav .owl-next,
#testimonials-carousel .owl-nav .owl-prev,
#recent-blogs-carousel .owl-nav .owl-next,
#recent-blogs-carousel .owl-nav .owl-prev,
#reasons-carousel .owl-nav .owl-next,
#reasons-carousel .owl-nav .owl-prev {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: 1.04px solid #1f273240;
  background-color: transparent;
  line-height: 25px;
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
}
.customers-comments .owl-carousel .owl-nav .owl-next span,
.customers-comments .owl-carousel .owl-nav .owl-prev span,
.youtube-videos .owl-carousel .owl-nav .owl-next span,
.youtube-videos .owl-carousel .owl-nav .owl-prev span,
#testimonials-carousel .owl-nav .owl-next span,
#testimonials-carousel .owl-nav .owl-prev span,
#recent-blogs-carousel .owl-nav .owl-next span,
#recent-blogs-carousel .owl-nav .owl-prev span,
#reasons-carousel .owl-nav .owl-next span,
#reasons-carousel .owl-nav .owl-prev span {
  font-size: 32px;
}
.customers-comments .owl-carousel .owl-nav .owl-next:hover,
.customers-comments .owl-carousel .owl-nav .owl-prev:hover,
.youtube-videos .owl-carousel .owl-nav .owl-next:hover,
.youtube-videos .owl-carousel .owl-nav .owl-prev:hover,
#testimonials-carousel .owl-nav .owl-next:hover,
#testimonials-carousel .owl-nav .owl-prev:hover,
#recent-blogs-carousel .owl-nav .owl-next:hover,
#recent-blogs-carousel .owl-nav .owl-prev:hover,
#reasons-carousel .owl-nav .owl-next:hover,
#reasons-carousel .owl-nav .owl-prev:hover {
  background-color: var(--blue-color);
  color: #fff;
}
.customers-comments .owl-carousel .owl-dots,
.youtube-videos .owl-carousel .owl-dots,
#testimonials-carousel .owl-dots,
#recent-blogs-carousel .owl-dots,
#reasons-carousel .owl-dots {
  text-align: start;
  position: absolute;
  bottom: 15px;
}
.customers-comments .owl-carousel .owl-dots .owl-dot,
.youtube-videos .owl-carousel .owl-dots .owl-dot,
#testimonials-carousel .owl-dots .owl-dot,
#recent-blogs-carousel .owl-dots .owl-dot,
#reasons-carousel .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: #d9d9d9;
  margin-right: 8px;
}
.customers-comments .owl-carousel .owl-dots .owl-dot.active,
.youtube-videos .owl-carousel .owl-dots .owl-dot.active,
#testimonials-carousel .owl-dots .owl-dot.active,
#recent-blogs-carousel .owl-dots .owl-dot.active,
#reasons-carousel .owl-dots .owl-dot.active {
  background-color: var(--main-color);
}
@media (max-width: 768px) {
  .customers-comments .owl-carousel .owl-nav .owl-next,
  .customers-comments .owl-carousel .owl-nav .owl-prev,
  .youtube-videos .owl-carousel .owl-nav .owl-next,
  .youtube-videos .owl-carousel .owl-nav .owl-prev,
  #testimonials-carousel .owl-nav .owl-next,
  #testimonials-carousel .owl-nav .owl-prev,
  #recent-blogs-carousel .owl-nav .owl-next,
  #recent-blogs-carousel .owl-nav .owl-prev,
  #reasons-carousel .owl-nav .owl-next,
  #reasons-carousel .owl-nav .owl-prev {
    width: 40px;
    height: 40px;
  }
}
/* End Carousal Two  */

/* ============================= */
/* ============================= */
/* ============================= */
/* ============================= */
/* ============================= */
/* ============================= */

/* Start products page styling */
.products-page .view-all-btn {
  margin-top: 50px;
}
.products-page .view-all-btn .the-btn {
  width: fit-content;
  padding: 16px 32px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  background-color: var(--blue-color);
  color: var(--white-color);
  cursor: pointer;
}

.products-page .choose-platform {
  margin-bottom: 56px;
}
.products-page .choose-drops {
  gap: 16px;
}
.products-page .choose-drops .selected {
  gap: 24px;
}
.products-page .choose-drops .selected .active {
  gap: 12px;
}
.products-page .choose-drops .platforms-drop,
.products-page .choose-drops .services-drop {
  padding: 16px;
  -webkit-border-radius: 56px;
  -moz-border-radius: 56px;
  -ms-border-radius: 56px;
  -o-border-radius: 56px;
  border-radius: 56px;
  position: relative;
  cursor: pointer;
}
.products-page .choose-drops .platforms-drop {
  background-color: #141b24;
  color: var(--white-color);
}
.products-page .choose-drops .services-drop {
  background-color: var(--white-color);
  color: #828282;
  border: 1px solid #e8e8e8;
}
.products-page .choose-drops .services-drop .selected > i {
  background-color: var(--white-color);
  color: #000;
}
.products-page .choose-drops .platforms-drop ul,
.products-page .choose-drops .services-drop ul {
  position: absolute;
  width: 100%;
  padding: 0;
  bottom: -125px;
  left: 0px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  z-index: 100;
  overflow: hidden;
  display: none;
}
.products-page .choose-drops .platforms-drop ul li,
.products-page .choose-drops .services-drop ul li {
  padding: 8px;
  width: 100%;
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
  cursor: pointer;
}
.products-page .choose-drops .platforms-drop ul li i {
  margin-right: 8px;
}
.products-page .choose-drops .platforms-drop ul {
  background-color: var(--white-color);
  color: #141b24;
}
.products-page .choose-drops .platforms-drop ul li:hover {
  background-color: #141b24;
  color: var(--white-color);
}
.products-page .choose-drops .services-drop ul {
  background-color: #141b24;
  color: var(--white-color);
}
.products-page .choose-drops .services-drop ul li:hover {
  background-color: var(--white-color);
  color: #141b24;
}
@media (max-width: 768px) {
  .products-page .choose-drops {
    font-size: 12px;
  }
  .products-page .choose-drops .platforms-drop ul,
  .products-page .choose-drops .services-drop ul {
    bottom: -108px;
  }
  .products-page .view-all-btn {
    display: none;
  }
}
.products-page .choose-drops .platforms-drop ul.active,
.products-page .choose-drops .services-drop ul.active {
  display: block;
}
@media (max-width: 768px) {
  .products-page .choose-platform {
    flex-direction: column;
    gap: 24px;
  }
  .products-page .choose-platform .choose-drops {
    justify-content: space-between;
    width: 100%;
  }
  .products-page .small-content {
    display: block !important;
  }
}
.products-page .small-content {
  display: none;
}

/* ============================= */
/* ============================= */
/* ============================= */
/* ============================= */
/* ============================= */
/* ============================= */
/* End products page styling */

/* Start Payment page styling */

.payment-page {
  gap: 24px;
  margin: 48px 0;
}
@media (max-width: 991px) {
  .payment-page {
    flex-direction: column;
  }
}
.payment-page hr {
  color: #ccc;
}
.payment-page .header .title {
  margin: 0;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.payment-page .header .desc {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 22.4px;
  color: var(--paragraf-color);
}
.address-and-methods {
  width: 60%;
}
.address-and-methods > div {
  width: 100%;
}
.current-order {
  flex: 1;
}
@media (min-width: 568px) and (max-width: 991px) {
  .payment-page > div {
    width: 100%;
  }
}
.payment-page .address {
  margin-bottom: 32px;
}
.payment-page .address .form,
.payment-page .methods .method {
  padding: 16px;
  border: 1px solid #eaecf0;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  background-color: var(--white-color);
}
.payment-page .address label {
  display: block;
  text-align: left;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.payment-page .address input {
  width: 100%;
  padding: 12px 16px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  margin-bottom: 16px;
}
.payment-page .address input:focus {
  outline: none;
}
.payment-page .address input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.payment-page .address .local-address {
  gap: 12px;
}
.payment-page .methods .method {
  width: 100%;
  margin-bottom: 8px;
  align-items: flex-start;
  padding: 0;
}
.payment-page .methods .method.active {
  border-color: 1px solid var(--blue-color);
  background-color: #eaf2ff !important;
}
/* .payment-page.small .methods .method.active {
  border-color: 1px solid var(--blue-color);
  background-color: #eaf2ff !important;
} */
.payment-page .methods .method label {
  width: 97%;
  padding: 16px;
  pointer-events: none;
}
.payment-page .methods .method label img {
  height: fit-content;
  margin-right: 8px;
}
.payment-page .methods .method label .name,
.payment-page .methods .method label .expiry,
.payment-page .methods .method input .default {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 20px;
}
.payment-page .methods .method label .expiry,
.payment-page .methods .method input .default {
  color: var(--paragraf-color);
}
.payment-page .methods .method input .default {
  font-weight: 500;
  margin-top: 8px;
}
.payment-page .methods .method input[type="checkbox"] {
  margin: 16px 16px 0 0;
  pointer-events: none;
}
/* Current order */
.payment-page .current-order > div:last-child,
.payment-page .current-order .div > div:not(:nth-child(2)) {
  background-color: var(--white-color);
  padding: 16px;
  border: 1px solid #eaecf0;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}
.payment-page .current-order .div > div:nth-child(2) {
  background-color: #f9f9f9;
}
.payment-page .current-order > div,
.payment-page .current-order .div > div {
  margin-bottom: 24px;
}
.payment-page .current-order .current-balance {
  padding: 12px;
  background-image: linear-gradient(to right, #232526, #414345);
  color: var(--white-color);
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.payment-page .current-order .balance i {
  width: 20px;
  height: 20px;
  color: #232526;
  background-color: var(--white-color);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.payment-page .current-order .balance .current,
.payment-page .current-order .balance .money {
  font-size: var(--main-font-size);
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: -0.02em;
}
.payment-page .current-order .remaining-balance .remaining,
.payment-page .current-order .remaining-balance .money {
  font-size: var(--secondary-font-size);
  font-weight: var(--main-font-weight);
  line-height: 14.52px;
  color: #a3a3a3;
}
.payment-page .current-order .info {
  margin-top: 23px;
}
.payment-page .current-order .subtotal {
  font-size: var(--main-font-size);
  font-weight: 500;
}
.payment-page .current-order .info > div {
  margin-bottom: 12px;
}
.payment-page .current-order .info > div span:first-child {
  color: var(--paragraf-color);
}
.payment-page .current-order .info > div span:last-child {
  font-weight: 500;
  color: #212121;
}
.payment-page .current-order .parts {
  gap: 12px;
  margin-top: 12px;
}
.payment-page .current-order .parts .part {
  width: 20%;
  gap: 8px;
}
.payment-page .current-order .parts .part .progress-item {
  width: 100%;
  height: 6px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  background-color: #e2e2e2;
}
.payment-page .current-order .parts .part .date {
  font-size: 14px;
  font-weight: var(--main-font-weight);
  line-height: 16.94px;
  color: var(--paragraf-color);
}
.payment-page .current-order .parts .part .money {
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  color: #212121;
}
.payment-page .current-order .check-out-btn {
  width: 100%;
  background-color: var(--blue-color);
  color: var(--white-color);
  padding: 12px 16px;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
  border: none;
}
.payment-page .current-order .notice {
  font-size: var(--secondary-font-size);
  line-height: 16.8px;
  color: var(--paragraf-color);
}
.payment-page .current-order .notice a {
  font-weight: 500;
}
.payment-page .promo-code-input {
  align-items: flex-end;
  margin-bottom: 12px;
}
.payment-page .promo-code .code {
  width: 80%;
  margin-right: 8px;
  position: relative;
}
.payment-page .promo-code .code label {
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
}
.payment-page .promo-code .check-promo-btn,
.payment-page .promo-code .code input,
.payment-page .promo-code .get-points-btn {
  border: 1px solid var(--main-color) 33;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.payment-page .promo-code .code input {
  padding: 12px;
  background-color: #fafafa;
  width: 100%;
  margin-right: 8px;
  padding-left: 40px;
}
.payment-page .promo-code .code svg {
  position: absolute;
  top: 58%;
  left: 20px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.payment-page .promo-code .check-promo-btn {
  flex: 1;
  padding: 12px 16px;
  background-color: var(--main-color);
  color: var(--white-color);
  margin-top: 12px;
}
.payment-page .promo-code .get-points-btn {
  border: 1px solid var(--blue-color);
  background-color: var(--white-color);
  width: 100%;
  padding: 12px;
  color: var(--paragraf-color);
}
.payment-page .promo-code .get-points-btn span,
.payment-page .promo-code .get-points-btn i {
  font-weight: 600;
  color: var(--blue-color);
}
.payment-page .promo-code .get-points-btn i {
  margin-right: 8px;
}
.payment-page .book .header {
  margin-bottom: 16px;
}
.payment-page .book .header .title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}
.payment-page .book .info {
  width: 100%;
  padding: 14px 0;
  gap: 12px;
}
.payment-page .book .info .name {
  font-weight: 500;
  line-height: 21px;
  color: #212121;
}
.payment-page .book .info .desc {
  color: var(--paragraf-color);
}
.payment-page .book hr {
  margin: 0 !important;
}
@media (max-width: 992px) {
  .payment-page .current-order {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }
  .payment-page .current-order > div:first-child {
    width: 64%;
  }
  .payment-page .current-order > div:last-child {
    flex: 1;
  }
  .payment-page .book .info {
    padding: 10px 0;
  }
}
@media (max-width: 768px) {
  .payment-page .promo-code .code {
    width: 75%;
  }
}
/* End Payment page styling */

/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* Start payment small page */
.payment-page.small {
  border: 1px solid #eaecf0;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  border: 0;
}

.payment-page.small .nav-tabs {
  background-color: #e2e2e2 !important;
  -webkit-border-radius: 8px 8px 0 0;
  -moz-border-radius: 8px 8px 0 0;
  -ms-border-radius: 8px 8px 0 0;
  -o-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  border: 0;
}
.payment-page.small .nav-tabs .nav-item {
  cursor: pointer;
  height: 100%;
}
.payment-page.small .nav-tabs .nav-link {
  color: #21212199 !important;
  padding: 4px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.payment-page.small .nav-tabs .nav-item.active .nav-link {
  color: var(--blue-color) !important;
  font-weight: 600;
  background-color: var(--white-color) !important;
}
.payment-page.small .nav-tabs {
  background-color: #e2e2e2 !important;
}
.payment-page.small .address {
  padding: 16px;
  border: 1px solid #eaecf0;
  -webkit-border-radius: 0 0 8px 8px;
  -moz-border-radius: 0 0 8px 8px;
  -ms-border-radius: 0 0 8px 8px;
  -o-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  background-color: var(--white-color);
  margin-bottom: 0;
  display: none;
}
.payment-page.small .address .form {
  border: none;
}
.payment-page.small .address .form .local-address {
  flex-direction: column;
}
.payment-page.small .address .form .local-address > div {
  flex: 1;
}
.payment-page.small .promo-code-input {
  align-items: center;
}
.payment-page.small .promo-code .code svg {
  top: 47%;
}
.payment-page.small > .methods {
  background-color: var(--white-color);
  padding: 16px;
  display: none;
}
.payment-page.small > .methods .methods {
  margin-bottom: 32px;
}
.payment-page.small .book {
  margin-top: 16px;
}
.payment-page.small .current-order {
  width: 100%;
  display: none;
}
.payment-page.small .current-order .order {
  margin-bottom: 0;
  width: 100%;
  -webkit-border-radius: 0 0 8px 8px;
  -moz-border-radius: 0 0 8px 8px;
  -ms-border-radius: 0 0 8px 8px;
  -o-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
}
.payment-page.small .address.active,
.payment-page.small > .methods.active,
.payment-page.small .current-order.active {
  display: block;
  border-top: 0;
}
.payment-page.small .current-order.active .order {
  border-top: 0;
}
@media (min-width: 768px) {
  .payment-page.small {
    display: none;
  }
}
@media (max-width: 768px) {
  .payment-page.large {
    display: none;
  }
}
/* End payment small page */
/* Start Product details page styling */
.product-details-page {
  margin-top: 24px;
  gap: 65px;
}
.product-details-page .hr {
  border: 1px solid #0000001a;
}
/* Start product details section */
.product-details-page .product-details {
  gap: 24px;
  align-items: flex-start;
}
.product-details-page .product-details > div:first-child {
  width: 47%;
}
.product-details-page .product-details > div:lasr-child {
  flex: 1;
}
.product-details-page .details > div {
  margin-bottom: 24px;
}
.product-details-page .product-image {
  background-color: #e6e8ec;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  border-radius: 24px;
  padding: 80px 20px;
}

.product-details-page .product-image i {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #fd1212;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white-color);
}
.product-details-page .details .details-header {
  gap: 16px;
}
.product-details-page .details-header .category-name {
  padding: 6px 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-color: #05187b1a;
  color: #05117b;
  font-size: 12px;
  width: fit-content;
}
.product-details-page .details-header .plateform-name {
  font-size: 28px;
  font-weight: 600;
}
.product-details-page .details-header .rank-sold {
  gap: 8px;
}
.product-details-page .details-header .rank {
  gap: 6px;
}
.product-details-page .details-header .rank i {
  color: #ff8b36;
}
.product-details-page .details-header .sold {
  color: #828282;
}
.product-details-page .details-header .price {
  font-size: 32px;
  font-weight: 600;
}
.product-details-page .details-btn {
  padding: 8px 16px;
  background-color: var(--white-color);
  border: 1px solid #e6e8ec;
}
.product-details-page .available-services h5 {
  font-size: 12px;
  margin-bottom: 14px;
}
.product-details-page .available-services .services {
  gap: 8px;
}
.product-details-page .available-services .services > button {
  flex-basis: 20%;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  -ms-border-radius: 48px;
  -o-border-radius: 48px;
  border-radius: 48px;
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
  white-space: nowrap;
}
.product-details-page .available-services .services button:hover,
.product-details-page .available-services .services button.active,
.product-details-page .make-number .numbers-list .number:hover,
.product-details-page .make-number .numbers-list .number.active {
  background-color: var(--main-color);
  color: var(--white-color);
}
.product-details-page .followers-increase h5 {
  gap: 8px;
  margin-bottom: 14px;
}
.product-details-page .followers-increase h5 span:first-child {
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.01em;
  color: #00000066;
}
.product-details-page .followers-increase h5 span:last-child {
  border: 1px solid #0000001a;
  flex: 1;
}
.product-details-page .increase-details {
  flex-wrap: wrap;
  gap: 12px;
}
.product-details-page .increase-details > div {
  width: fit-content;
  white-space: nowrap;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  gap: 8px;
  font-weight: 500;
}
.product-details-page .make-number {
  gap: 56px;
}
.product-details-page .make-number .title,
.product-details-page .make-number label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 16px;
}
.product-details-page .make-number .numbers-list {
  padding: 0;
  margin: 0;
  gap: 8px;
}
.product-details-page .make-number .numbers-list .number {
  -webkit-border-radius: 36px;
  -moz-border-radius: 36px;
  -ms-border-radius: 36px;
  -o-border-radius: 36px;
  border-radius: 36px;
  cursor: pointer;
}
.product-details-page .make-number .set-number input,
.product-details-page .account-link input {
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  -moz-appearance: textfield;
  appearance: textfield;
}
.product-details-page .make-number .set-number input::-webkit-inner-spin-button,
.product-details-page
  .make-number
  .set-number
  input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.product-details-page .account-link {
  gap: 16px;
}
.product-details-page .account-link h5 {
  font-size: 15px;
  font-weight: 500;
  /* margin-bottom: 16px; */
}
.product-details-page .buy-now-btn {
  padding: 15px 24px 15px 24px;
  gap: 16px;
  background-color: var(--blue-color);
  color: var(--white-color);
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
  width: 100%;
  border: none;
  margin-top: 40px;
}
.product-details-page .account-link .agree-terms {
  gap: 6px;
}
@media (min-width: 768px) {
  .product-details-page .product-image img {
    height: 174px;
  }
}
@media (min-width: 1200px) {
  .product-details-page .product-image img {
    height: 375px;
  }
}
@media (max-width: 992px) {
  .product-details-page .details-header .rank-sold {
    gap: 8px;
  }
  .product-details-page .details-header .price {
    font-size: 26px;
  }
  .product-details-page .available-services .services {
    flex-wrap: wrap;
  }
  .product-details-page .available-services .services button {
    flex-basis: 47%;
  }
  .product-details-page .increase-details > div {
    font-size: 11px;
  }
  .product-details-page .make-number {
    gap: 16px;
  }
}
@media (max-width: 992px) and (min-width: 768px) {
  .product-details-page .make-number .numbers-list .number.hidden {
    display: none;
  }
}
@media (max-width: 768px) {
  .product-details-page .product-details > div {
    width: 100% !important;
  }
  .product-details-page .product-image img {
    height: 150px;
  }
  .product-details-page .product-details {
    flex-direction: column;
  }
  .product-details-page .make-number {
    gap: 24px;
    flex-direction: column-reverse;
  }
  .product-details-page .make-number > div,
  .product-details-page .make-number input {
    width: 100%;
  }
  .product-details-page .make-number input {
    padding: 10px;
  }
  .product-details-page .services {
    display: none;
  }
  .product-details .available-services .my-select,
  .product-details .followers-increase .my-select {
    display: block;
  }
  .product-details-page .increase-details {
    display: none;
  }
}
@media (max-width: 370px) {
  .product-details-page .make-number .numbers-list .number.hidden:last-child {
    display: none;
  }
}

/* End product details section */
/* Handle product details drops */

.product-details .available-services .my-select,
.product-details .followers-increase .my-select {
  width: 100%;
  padding: 16px;
  -webkit-border-radius: 56px;
  -moz-border-radius: 56px;
  -ms-border-radius: 56px;
  -o-border-radius: 56px;
  border-radius: 56px;
  font-size: 14px;
  line-height: 18.2px;
  font-weight: 500;
  color: var(--main-color);
  display: none;
}
@media (max-width: 768px) {
  .product-details .available-services .my-select,
  .product-details .followers-increase .my-select {
    display: flex;
  }
}
.product-details .available-services .my-select i.fa-chevron-down,
.product-details .followers-increase .my-select i.fa-chevron-down {
  font-size: 11px;
}
.product-details .available-services .my-select i:not(.fa-chevron-down) {
  color: var(--blue-color);
}
.product-details .available-services .my-select ul li:hover i {
  color: var(--white-color);
}
.my-select span {
  display: -webkit-inline-box; /* Flexbox-based display */
  -webkit-box-orient: vertical; /* Sets the orientation to vertical */
  -webkit-line-clamp: 1; /* Limits the text to 3 lines */
  overflow: hidden; /* Hides the overflowing text */
  text-overflow: ellipsis; /* Adds ellipsis */
  line-height: 1.5; /* Set your desired line height */
  max-height: calc(1.5em * 1);
}
/* end handle product details drop */
/* Start overview and testimnoial section fo product details */
.product-details-page .informations {
  gap: 48px;
}
.product-details-page .product-view {
  gap: 52px;
}
@media (max-width: 768px) {
  .product-details-page .informations {
    margin-top: 40px;
  }
  .product-details-page .product-view {
    flex-direction: column;
    gap: 24px;
  }
}
.tabs {
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  overflow: hidden;
}
.tabs .tab label {
  color: #21212199;
  cursor: pointer;
  display: block;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid #00000026;
}
@media (max-width: 992px) {
  .tabs .tab label {
    font-size: 14px;
    white-space: nowrap;
  }
}
.tabs .tab [type="radio"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tabs .tab [type="radio"]:checked + label {
  border-bottom: 2px solid #1769ff;
  color: #212121;
}

.tabs .tab [type="radio"]:checked ~ div {
  opacity: 1;
}
.tabs .tab [type="radio"] ~ div {
  opacity: 0;
  padding: 24px 0;
  width: 90%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tabs .tab {
  width: 50%;
}
.tabs .tab [type="radio"] ~ div {
  width: 200%;
  margin-left: 200%;
}
.tabs .tab [type="radio"]:checked ~ div {
  margin-left: 0;
}
.tabs .tab:last-child [type="radio"] ~ div {
  margin-left: 100%;
}
.tabs .tab:last-child [type="radio"]:checked ~ div {
  margin-left: -100%;
}
.overview-content p {
  color: #212121;
  font-size: 16px;
}
.shipments-details-content {
  gap: 12px;
  flex-wrap: wrap;
}
.shipments-details-content > div {
  width: 48%;
  padding: 8px;
  border: 1px solid #0000001a;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.shipments-details-content > div .content {
  flex: 1;
}
.shipments-details-content > div .title {
  font-size: 12px;
  color: #21212199;
}
.shipments-details-content > div .desc {
  font-weight: 600;
  color: #212121;
}
.shipments-details-content > div:first-child .the-discount {
  align-items: flex-end;
}
.shipments-details-content .the-discount .discount-percent {
  color: #ed0006;
  font-size: 12px;
  font-weight: 500;
}
.shipments-details-content > div:first-child del {
  color: #21212180;
  font-size: 10px;
  letter-spacing: -0.02em;
}
.shipments-details-content .icon {
  width: 38px;
  height: 38px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: #1769ff1a;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-details-page .product-review .title {
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 600;
}
.product-details-page .product-review hr {
  margin: 0;
}
.product-details-page .reviews {
  margin-top: 24px;
  gap: 25px;
}
.review-circle {
  position: relative;
  width: fit-content;
  height: fit-content;
}
.review-circle .circle-bg {
  fill: none;
  stroke: #eee; /* Light gray background */
  stroke-width: 3.8;
}

.review-circle .circle-progress {
  fill: none;
  stroke: #ff8b36; /* Orange color for the progress */
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-dasharray: 0, 100;
  transition: stroke-dasharray 1s;
}

.review-circle .circle-text {
  fill: #000;
  font-family: Arial, sans-serif;
  font-size: 10px;
  text-anchor: middle;
  dominant-baseline: middle;
}
.reviews .review-progress-star {
  gap: 11.4px;
  flex: 1;
}
.reviews .review-progress-star > div {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.reviews .review-stars {
  gap: 4.9px;
}
.reviews i {
  font-size: 13px;
  color: #ff8b36;
}
.reviews i.gray {
  color: #e2e2e2;
}
.reviews .rate {
  display: none;
  font-size: 12px;
  font-weight: 500;
}
.reviews .the-progress {
  width: 200px;
  height: 5.5px;
  background-color: #e2e2e2;
  position: relative;
  margin-right: 26px;
}
.reviews .the-progress span {
  display: block;
  height: 100%;
  background-color: #ff8b36;
  width: 0%;
}
.reviews .the-progress::before {
  content: attr(data-progress);
  position: absolute;
  top: -7px;
  right: -30px;
  color: #828282;
  font-size: 12px;
}
@media (max-width: 768px) {
  .shipments-details-content > div {
    flex-direction: column;
    align-items: flex-start;
  }
  .product-review {
    width: 100%;
  }
  .reviews .the-progress {
    width: 184px;
  }
  .review-circle {
    display: none;
  }
}
@media (max-width: 992px) {
  .shipments-details-content > div {
    gap: 10px;
    padding: 9px 12px;
  }

  .shipments-details-content > div .desc {
    font-size: 12px;
  }
  .shipments-details-content .the-discount {
    display: none;
  }
  .product-details-page .product-review .title {
    font-size: 14px;
  }
  .reviews .the-progress {
    width: 141px;
  }
}
@media (max-width: 1200px) and (min-width: 768px) {
  .product-details-page .product-view {
    gap: 24px;
  }
  .product-details-page .reviews {
    gap: 12px;
  }

  .shipments-details-content .icon {
    width: 34px !important;
    padding: 0 7px;
    height: 34px !important;
  }
  .shipments-details-content .icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  .reviews .review-progress-star > div {
    justify-content: flex-end;
    gap: 7px;
  }
  .reviews i.hidden {
    display: none;
  }
  .reviews .rate {
    display: block;
  }
}
/* Start testimonials */
.testimonials {
  width: 100%;
}
.testimonials .title {
  margin: 0;
}
.testimonials .title + .hr {
  margin: 12px 0 24px 0;
}

.testimonials .owl-nav {
  margin-top: 48px;
}
@media (max-width: 768px) {
  .testimonials .owl-nav {
    margin-top: 24px;
  }
}
.testimonials .testimonial {
  gap: 24px;
}
.testimonials .testimonial .header {
  gap: 16px;
}
.testimonials .testimonial .header img {
  width: 45px !important;
  height: 45px;
}
.testimonials .testimonial .header .header-content {
  gap: 8px;
}
.testimonials .testimonial .header .title {
  font-size: 16px;
  font-weight: 600;
}
.testimonials .testimonial .header .testimonial-stars {
  gap: 5px;
}
.testimonials .testimonial .header .testimonial-stars i {
  color: #ff8b36;
  font-size: 14px;
}
.testimonials .testimonial .content p {
  font-size: 16px;
  line-height: 25.6px;
}
.testimonials .testimonial .likes-and-dislikes {
  gap: 16px;
}
.testimonials .testimonial .likes-and-dislikes > div {
  gap: 8px;
  font-size: 16px;
}
.testimonials .testimonial .likes-and-dislikes .likes .like {
  color: var(--blue-color);
}
.testimonials .testimonial .likes-and-dislikes .likes .likes-count {
  font-weight: 500;
  color: #212121;
}
.testimonials .testimonial .likes-and-dislikes .dislikes {
  color: #212121;
}
.testimonials .testimonial .likes-and-dislikes .dislikes .dislike {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
/* End testimonials */
/* Start overview and testimnoial section fo product details */
/* Start explore products */
.product-details-page .explore-products {
  gap: 40px;
}
.product-details-page .explore-products .header .title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}
.product-details-page .explore-products .see-all-btn {
  padding: 12px 20px 12px 20px;
  background-color: var(--blue-color);
  color: var(--white-color);
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  text-align: center;
}
.product-details-page .explore-products > .see-all-btn {
  display: none;
}
.product-details-page .explore-products .see-all-btn i {
  font-size: 14px;
  margin-left: 10px;
}
.product-details-page .explore-products .some-products {
  gap: 20px;
}
.product-details-page .explore-products .some-products > div {
  flex: 1;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  /* background-color: var(--white-color); */
}
@media (max-width: 992px) {
  .product-details-page .explore-products .some-products > div.hidden {
    display: none;
  }
}
@media (max-width: 768px) {
  .product-details-page .explore-products {
    gap: 24px;
  }
  .product-details-page .explore-products .some-products {
    flex-direction: column;
    align-items: normal;
  }
  .product-details-page .explore-products .header .see-all-btn {
    display: none;
  }
  .product-details-page .explore-products > .see-all-btn {
    display: block;
  }
}
/* End explore products */
/* End product details page styling */
/* Start Blog Page */
#breaking-news-carousel .owl-nav {
  display: none;
}
#breaking-news-carousel .owl-dots {
  text-align: center;
  margin-top: 16px;
}
#breaking-news-carousel .owl-dot {
  width: 50px;
  height: 8px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  background-color: #d9d9d9;
  margin-right: 8px;
}
#breaking-news-carousel .owl-dot.active {
  background-color: var(--blue-color);
}
.blog-page .breaking-news {
  margin: 50px 0;
}
.blog-page .breaking-news header {
  margin-bottom: 24px;
}
.blog-page .breaking-news .news {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.blog-page .breaking-news .news img {
  object-fit: cover;
}
.blog-page .breaking-news .news-info {
  gap: 16px;
  padding: 24px;
  position: absolute;
  bottom: 0;
}
.blog-page .breaking-news .breaking-news-btn {
  width: fit-content;
  padding: 4px 12px;
  border: none;
  background-color: var(--blue-color);
  color: var(--white-color);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
}
.blog-page .breaking-news .news-content {
  color: var(--white-color);
  font-size: 24px;
  font-weight: 600;
  line-height: 28.8px;
}
@media (min-width: 1200px) {
  #breaking-news-carousel .owl-stage-outer {
    padding: 0 300px !important;
  }
}
@media (max-width: 1200px) {
  .blog-page .breaking-news .news-info {
    gap: 8px;
  }
  .blog-page .breaking-news .news-content {
    font-size: 14px;
    font-weight: 600;
    line-height: 16.8px;
  }
  #breaking-news-carousel .owl-stage {
    padding: 0 200px !important;
  }
  #breaking-news-carousel .owl-dot {
    width: 40px;
    height: 4px;
  }
}
@media (max-width: 992px) {
  #breaking-news-carousel .owl-stage {
    padding: 0 120px !important;
  }
}
@media (max-width: 768px) {
  .blog-page .breaking-news .news-info {
    gap: 12px;
  }
  .blog-page .breaking-news .news-content {
    font-size: 13px;
    font-weight: 600;
    line-height: 15.8px;
  }
  #breaking-news-carousel .owl-stage {
    padding: 0 !important;
  }
  #breaking-news-carousel .owl-dot {
    display: none;
  }
}
.blog-page .breaking-news .title {
  margin: 0;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}
.blog-page .breaking-news .desc {
  color: #31353b;
}
.blog-page .blog-content {
  gap: 32px;
}
.blog-page .discovery .title {
  font-size: 22px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .blog-page .discovery .categories.small {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .blog-page .discovery .categories.large {
    display: none;
  }
  .blog-page .discovery .categories.small {
    display: block !important;
  }
}
@media (max-width: 768px) {
  .blog-page .discovery {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .blog-page .discovery .categories {
    width: 100%;
  }
}
.blog-page .categories button {
  background-color: var(--white-color);
  padding: 8px 14px;
  border: 1px solid #dfdfdf;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}
.blog-page .categories.large button {
  margin-right: 8px;
}
.blog-page .categories button.active {
  background-color: var(--blue-color);
  color: var(--white-color);
  border: none;
}
@media (max-width: 768px) {
  .blog-page .categories button {
    background-color: var(--white-color);
    padding: 8px 24px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
  }
}
.blog-page #categories-carousel .owl-stage {
  width: max-content !important;
}
.blog-page #categories-carousel .owl-stage .owl-item {
  width: fit-content !important;
  margin-right: 12px;
}
.blog-page .blogs {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
  gap: 54px;
}
.blog-page .blogs {
  gap: 48px;
}
.blog-page .blogs .blog {
  width: 100%;
  gap: 20px;
  text-transform: uppercase;
}
.blog-page .blogs .blog img {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
}
.blog-page .blog .blog-info {
  height: 100%;
  justify-content: space-between;
  flex: 1;
}
.blog-page .blog .blog-info .header .title {
  font-size: 10px;
  font-weight: 600;
  color: #6461fc;
  margin-bottom: 8px;
}
.blog-page .blog .blog-info .header .desc {
  font-weight: 600;
  line-height: 18px;
  text-transform: capitalize;
}
.blog-page .blog .blog-info .creation {
  font-size: 10px;
  font-weight: 500;
  color: var(--paragraf-color);
  gap: 8px;
  /* white-space: nowrap; */
}
.blog-page .blog .blog-info .creation .creator-info {
  gap: 12px;
}
.blog-page .blog .blog-info .creation .creator-info img {
  width: 24px;
  height: 24px;
}
.blog-page .blog .blog-info .creation .the-blue-dot {
  width: 6px;
  height: 6px;
  background-color: var(--blue-color);
}
.blog-page .load-more-btn {
  padding: 12px 24px;
  border: none;
  background-color: var(--blue-color);
  color: var(--white-color);
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
}
.blog-page .load-more {
  margin-top: 80px;
}
.blog-page .load-more-btn i {
  font: 14px;
  margin-left: 10px;
}
@media (max-width: 1200px) {
  .blog-page .blogs {
    gap: 24px;
  }
  .blog-page .blogs .blog {
    gap: 16px;
  }
  .blog-page .load-more {
    display: none;
  }
}
@media (max-width: 992px) {
  .blog-page .blogs .blog:not(.show) {
    display: none;
  }
  .blog-page .blogs .blog img {
    width: 124px;
    height: 124px;
  }
  .blog-page .blog .blog-info .header .desc {
    font-size: 13px;
    line-height: 17px;
  }
}
@media (max-width: 768px) {
  .blog-page .blogs .blog {
    gap: 16px;
  }
  .blog-page .blogs .blog.hidden {
    display: none;
  }
  .blog-page .blogs .blog img {
    width: 90px;
    height: 100px;
  }
  .blog-page .blog .blog-info .header .title {
    margin-bottom: 5px;
  }
  .blog-page .blog .blog-info .header .desc {
    line-height: 18px;
  }
  .blog-page .blog .blog-info .creation .creator-info img {
    width: 16px;
    height: 16px;
  }
}
/* End Blog Page */
/* Start Blog Details Page */
.blog-details-page .header {
  margin-top: 48px;
}
.blog-details-page .header > img {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  object-fit: cover;
  width: 48%;
}
.blog-details-page .header .header-content {
  width: 48%;
}
.blog-details-page .header .header-content .blog-info {
  gap: 16px;
}
.blog-details-page .header .header-content .blog-name {
  font-size: 10px;
  font-weight: 700;
  color: #6461fc;
  text-transform: uppercase;
}
.blog-details-page .header .header-content .blog-desc {
  font-size: 41px;
  font-weight: 700;
  line-height: 57.4px;
  letter-spacing: -0.04em;
}
.blog-details-page .header .header-content .creation-and-social {
  font-size: 12px;
  font-weight: 600;
  line-height: 14.52px;
  color: var(--main-color);
}
.blog-details-page .header .header-content .creation {
  gap: 16px;
}
.blog-details-page .header .header-content .creator-info {
  text-transform: uppercase;
  gap: 12px;
}
.blog-details-page .header .header-content .creator-image {
  width: 32px;
  height: 32px;
}
.blog-details-page .header .header-content .the-blue-dot {
  width: 6px;
  height: 6px;
  background-color: var(--blue-color);
}
.blog-details-page .header .header-content .social {
  gap: 24px;
}
.blog-details-page .social .share {
  font-size: 12px;
}
.blog-details-page .social .socials {
  gap: 4.5px;
}
.blog-details-page .social .socials i {
  width: 38px;
  height: 38px;
  background-color: var(--white-color);
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.blog-details-page .social .socials i:hover {
  background-color: var(--main-color);
  color: var(--white-color);
}
@media (max-width: 1200px) {
  .blog-details-page .header .header-content .blog-desc {
    font-size: 23px;
    font-weight: 700;
    line-height: 32.2px;
    letter-spacing: -0.04em;
  }
  .blog-details-page .header .header-content {
    gap: 16px;
    justify-content: unset;
  }
  .blog-details-page .header .header-content .creation-and-social {
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 0;
    justify-content: space-between;
    font-family: Inter;
    font-size: 10px;
    font-weight: 600;
    line-height: 12.1px;
    text-align: left;
  }
  .blog-details-page .header .header-content .creation-and-social > div {
    width: 100%;
  }
  .blog-details-page .header .header-content .creation-and-social .social {
    justify-content: space-between;
  }
}
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 32px;
    justify-content: unset;
  }
  .header > img {
    width: 100% !important;
    object-fit: contain;
  }
  .header .header-content {
    width: 100% !important;
    gap: 32px;
  }
  .header .header-content .social {
    display: none;
  }
}
.blog-details-page .the-tips {
  margin-top: 72px;
}
.blog-details-page .the-tips {
  justify-content: space-between;
}
.blog-details-page .the-tips .table-of-contents {
  width: 27%;
  padding: 24px 16px 24px 16px;
  border: 1px 0px 0px 0px;
  background-color: var(--white-color);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  height: fit-content;
}
.blog-details-page .the-tips .table-of-contents .title {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 700;
  line-height: 19.36px;
}
.blog-details-page .the-tips .table-of-contents .item {
  font-weight: 500;
  line-height: 17.5px;
  color: #171616;
}
.blog-details-page .the-tips .table-of-contents .item i {
  display: none;
}
.blog-details-page .the-tips .table-of-contents .item.active {
  color: var(--blue-color);
  font-weight: 700;
}
.blog-details-page .the-tips .table-of-contents .item.active i {
  display: block;
}

.blog-details-page .the-tips .tips {
  width: 70%;
}
.blog-details-page .the-tips .tips {
  gap: 56px;
}
.blog-details-page .the-tips .tips .tip {
  gap: 24px;
}
.blog-details-page .the-tips .tips .tip.head-tip .notice {
  padding: 24px;
  border-width: 0px 0px 0px 3px;
  border-style: solid;
  border-color: var(--blue-color);
  background-color: #ebf2ff;
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px;
}
.blog-details-page .the-tips .tips .tip .tip-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 43.2px;
}
.blog-details-page .the-tips .tips .tip p {
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px;
}
.blog-details-page .the-tips .tips .tip img {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  object-fit: cover;
}
.blog-details-page .the-tips .tips .tip .dots {
  gap: 8px;
  margin-bottom: 32px;
}
.blog-details-page .the-tips .tips .tip .dots .dot {
  width: 6px;
  height: 6px;
  background-color: var(--paragraf-color);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
@media (max-width: 992px) {
  .blog-details-page .the-tips .table-of-contents {
    display: none;
  }
  .blog-details-page .the-tips .tips {
    width: 100% !important;
  }
  .blog-details-page .the-tips .tips .tip p {
    font-size: 12px;
    font-weight: 400;
    line-height: 21.6px;
  }
  .blog-details-page .the-tips .tips .tip .title {
    font-size: 16px;
    font-weight: 700;
    line-height: 28.8px;
  }
}
@media (max-width: 768px) {
  .blog-details-page .the-tips .tips .tip p {
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
  }
  .blog-details-page .the-tips .tips .tip .title {
    font-size: 20px;
    font-weight: 700;
    line-height: 36px;
  }
}
.blog-details-page .recent-blogs .header {
  margin-bottom: 40px;
}
.blog-details-page .recent-blogs .header .title {
  font-size: 32px;
  font-weight: 600;
  line-height: 41.6px;
  letter-spacing: -0.02em;
}
.blog-details-page .recent-blogs .blog {
  background-color: var(--white-color);
  padding: 12px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}
.blog-details-page .recent-blogs .blog img {
  object-fit: cover;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
}
.blog-details-page .recent-blogs .content {
  gap: 12px;
  margin-top: 24px;
}
.blog-details-page .recent-blogs .blog-name {
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.1em;
  color: #6461fc;
}
.blog-details-page .recent-blogs .blog-desc {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.blog-details-page .recent-blogs .blog-summry {
  line-height: 21px;
  color: #31353b;
}
.blog-details-page .recent-blogs .read-more-btn {
  padding: 10px 24px;
  border: 1px solid #dfdfdf;
  background-color: #fbfbfb;
  width: 100%;
  text-align: center;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  margin-top: 32px;
  font-weight: 500;
}
.blog-details-page .recent-blogs .read-more-btn i {
  margin-left: 8px;
}
#recent-blogs-carousel .owl-nav {
  margin-top: 32px;
}
@media (min-width: 768px) {
  #recent-blogs-carousel .owl-dots {
    display: none !important;
  }
  #recent-blogs-carousel .owl-nav {
    position: absolute;
    top: -114px;
    right: 0;
  }
}
@media (min-width: 600px) and (max-width: 992px) {
  .blog-details-page .recent-blogs .blog-desc {
    font-size: 12px;
    line-height: 18px;
  }
  .blog-details-page .recent-blogs .blog-summry {
    font-size: 10px;
    line-height: 15px;
  }
  .blog-details-page .recent-blogs .read-more-btn {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
}
/* End Blog Details Page */

/* Start FAQ page */
.page-content {
  margin: 72px 0 56px 0;
  gap: 56px;
}
header.page-header {
  gap: 16px;
}
header.page-header .title {
  margin: 0;
  font-family: Satoshi;
  font-size: 48px;
  font-weight: 700;
  line-height: 62.4px;
  letter-spacing: -0.01em;
  text-align: center;
}
header.page-header .desc {
  width: 35%;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  text-align: center;
  color: #31353b;
}
.faq-page .content {
  gap: 32px;
}
.faq-page .content-nav {
  gap: 16px;
}
.faq-page .content-nav button {
  background-color: var(--white-color);
  padding: 10px 24px 10px 24px;
  border: 1px solid #dfdfdf;
  -webkit-border-radius: 56px;
  -moz-border-radius: 56px;
  -ms-border-radius: 56px;
  -o-border-radius: 56px;
  border-radius: 56px;
}
.faq-page .content-body {
  gap: 72px;
}
.faq-page .content-body .still-questions {
  gap: 32px;
}
.faq-page .content-body .still-questions .header {
  gap: 12px;
}
.faq-page .content-body .still-questions .header .title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 31.2px;
  letter-spacing: -0.01em;
  text-align: center;
}
.faq-page .content-body .still-questions .header .desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  text-align: center;
  color: #31353b;
}
.faq-page .content-body .still-questions .contact-us-btn {
  background-color: var(--blue-color);
  color: var(--white-color);
  width: fit-content;
  padding: 12px 24px;
  border: none;
  font-size: 14px;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
}
.faq-page .content-body .still-questions .contact-us-btn i {
  margin-left: 16px;
}
@media (max-width: 1200px) {
  header.page-header .desc {
    width: 45%;
  }
}
@media (max-width: 992px) {
  .page-content {
    margin: 56px 0 32px 0;
    gap: 56px;
  }
  header.page-header .title {
    font-size: 24px;
    line-height: 31.2px;
    letter-spacing: -0.01em;
  }
  header.page-header .desc {
    font-size: 12px;
    line-height: 19.2px;
    width: 60%;
  }
  .faq-page .page-content .content {
    gap: 24px;
  }
  .faq-page .content-body {
    gap: 30px;
  }
}
@media (max-width: 768px) {
  .page-content {
    margin: 32px 0 20px 0;
    gap: 56px;
  }
  header.page-header .title {
    font-size: 35px;
    line-height: 42px;
    letter-spacing: -0.04em;
  }
  header.page-header .desc {
    width: 100%;
  }
  .faq-page .page-content .content {
    gap: 24px;
  }
}
@media (max-width: 400px) {
  .faq-page .content-body .still-questions .header .desc br {
    display: none;
  }
}
/* End FAQ page */
/* Start page 404 */
.page-404 .content-404 {
  margin: 200px 0 170px;
}
.page-404 .content-404 .content {
  width: 454px;
  overflow: hidden;
  gap: 32px;
}

@media (max-width: 992px) {
  .page-404 .content-404 {
    margin: 100px 0;
  }
  .page-404 .content-404 .content img {
    width: 335px;
  }
}
@media (max-width: 768px) {
  .page-404 .content-404 {
    margin: 70px 0;
  }
  .page-404 .content-404 .content {
    width: 343px;
  }
  .page-404 .content .content-404 img {
    width: 268px;
  }
}
/* End page 404 */
/* Start terms and conditions page */
.terms-and-conditions-page .page-content,
.support-center-page .page-content {
  gap: 48px;
}
.terms-and-conditions-page header,
.support-center-page header {
  gap: 80px;
}
.terms-and-conditions-page header .top-header-and-categories,
.support-center-page header .top-header-and-categories {
  gap: 48px;
}
.terms-and-conditions-page header .top-header .title,
.support-center-page header .top-header .title {
  margin-bottom: 16px;
}
.terms-and-conditions-page header .top-header .search-input,
.support-center-page header .top-header .search-input {
  margin-top: 24px;
  width: 100%;
}
.terms-and-conditions-page header .top-header input[type="search"],
.support-center-page header .top-header input[type="search"] {
  padding: 20px 20px 20px 45px;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
  position: relative;
  width: 100%;
}
.terms-and-conditions-page header .top-header .search-input::before,
.support-center-page header .top-header .search-input::before {
  content: "\f002";
  font-family: "font awesome 6 free";
  position: absolute;
  font-weight: 900;
  font-size: 14px;
  top: 24px;
  left: 20px;
  z-index: 1;
}
.terms-and-conditions-page .categories,
.support-center-page .categories {
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}
.terms-and-conditions-page .categories button,
.support-center-page .categories button {
  padding: 14px 24px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  text-align: center;
  font-weight: 500;
}
.terms-and-conditions-page .categories button.active,
.support-center-page .categories button.active {
  background-color: var(--blue-color);
  color: var(--white-color);
  border: 1px solid var(--blue-color);
}
.terms-and-conditions-page header .terms-of-us,
.support-center-page header .terms-and-conditions {
  padding: 40px 56px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
  background-color: var(--main-color);
}
.terms-and-conditions-page header .terms-of-us h4,
.support-center-page header .terms-and-conditions h4 {
  margin: 0;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 24px;
  line-height: 31.2px;
  color: var(--white-color);
}
.terms-and-conditions-page header .terms-of-us p,
.support-center-page header .terms-and-conditions p {
  line-height: 22.4px;
  color: #ffffffb2;
}

@media (min-width: 1200px) {
  .terms-and-conditions-page header .top-header .desc,
  .support-center-page header .top-header .desc {
    width: 65%;
  }
  .terms-and-conditions-page header .top-header .search-input,
  .support-center-page header .top-header .search-input {
    width: 60%;
  }
}
@media (max-width: 1200px) {
  .terms-and-conditions-page header .top-header .desc,
  .support-center-page header .top-header .desc {
    width: 75%;
  }
  .terms-and-conditions-page header .top-header .search-input,
  .support-center-page header .top-header .search-input {
    width: 70%;
  }
  .terms-and-conditions-page .categories button,
  .support-center-page .categories button {
    font-size: 12px;
    padding: 10px 18px;
  }
}
@media (max-width: 992px) {
  .terms-and-conditions-page header,
  .support-center-page header {
    gap: 48px;
  }
  .terms-and-conditions-page header .top-header-and-categories,
  .support-center-page header .top-header-and-categories {
    gap: 48px;
  }
  .terms-and-conditions-page header .top-header .desc,
  .support-center-page header .top-header .desc {
    width: 85%;
  }
  .terms-and-conditions-page header .top-header .title,
  .support-center-page header .top-header .title {
    margin-bottom: 8px;
  }
  .terms-and-conditions-page header .top-header .search-input,
  .support-center-page header .top-header .search-input {
    width: 80%;
  }
  .terms-and-conditions-page header .terms-of-us,
  .support-center-page header .terms-and-conditions {
    padding: 24px;
  }
  .terms-and-conditions-page header .terms-of-us h4,
  .support-center-page header .terms-and-conditions h4 {
    font-size: 16px;
    line-height: 20.8px;
  }
  .terms-and-conditions-page header .terms-of-us p,
  .support-center-page header .terms-and-conditions p {
    font-size: 12px;
    font-weight: 400;
    line-height: 19.2px;
  }
}
@media (max-width: 768px) {
  .terms-and-conditions-page header,
  .support-center-page header {
    gap: 48px;
  }
  .terms-and-conditions-page header .top-header-and-categories,
  .support-center-page header .top-header-and-categories {
    gap: 24px;
  }
  .terms-and-conditions-page header .top-header .desc,
  .support-center-page header .top-header .desc {
    width: 100%;
  }
  .terms-and-conditions-page header .top-header .title,
  .support-center-page header .top-header .title {
    margin-bottom: 16px;
  }
  .terms-and-conditions-page header .top-header .search-input,
  .support-center-page header .top-header .search-input {
    width: 100%;
  }
  .terms-and-conditions-page header .terms-of-us,
  .support-center-page header .terms-and-conditions {
    padding: 48px 24px;
  }
  .terms-and-conditions-page header .terms-of-us h4,
  .support-center-page header .terms-and-conditions h4 {
    font-size: 20px;
    line-height: 26px;
  }
  .terms-and-conditions-page header .terms-of-us p,
  .support-center-page header .terms-and-conditions p {
    font-size: 14px;
    line-height: 22.4px;
  }
}
/* Start terms */
.the-terms {
  gap: 16px;
}
.the-terms .term {
  border: 1px solid #e8e8e8;
  background-color: var(--white-color);
  padding: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
  overflow: hidden;
}
.the-terms .term .visible-content .large-screen-content {
  gap: 24px;
}
.the-terms .term .visible-content .term-icon {
  width: 48px;
  height: 48px;
  background-color: #f8f9fa;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.the-terms .term.active .visible-content .term-icon {
  background-color: var(--main-color);
  color: var(--white-color);
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
}
.the-terms .term .visible-content .term-content {
  flex: 1;
  overflow: hidden;
}
.the-terms .term .visible-content .title {
  font-size: 18px;
  font-weight: 600;
  line-height: 23.4px;
  margin-bottom: 8px;
}
.the-terms .term .visible-content .content {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  margin: 0;
  display: -webkit-box; /* Flexbox-based display */
  -webkit-box-orient: vertical; /* Sets the orientation to vertical */
  -webkit-line-clamp: 1; /* Limits the text to 3 lines */
  overflow: hidden; /* Hides the overflowing text */
  text-overflow: ellipsis; /* Adds ellipsis */
  line-height: 1.5; /* Set your desired line height */
  max-height: calc(1.5em * 1);
}
.the-terms .term.active .visible-content .content {
  text-overflow: normal;
  -webkit-line-clamp: 6;
  max-height: calc(1.5em * 6);
}
.the-terms .term .visible-content .term-small-content {
  display: none;
}
.the-terms .term .visible-content .close-icon {
  display: none;
}
.the-terms .term.active .visible-content .close-icon {
  display: block;
}
.the-terms .term.active .visible-content .open-icon {
  display: none;
}
.the-terms .term .hidden-content {
  padding: 0 72px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  margin: 0;
  color: #31353b;
}
.the-terms .term hr {
  margin-left: 72px;
}
.the-terms .term .hidden-content,
.the-terms .term hr {
  display: none;
}
.the-terms .term.active .hidden-content,
.the-terms .term.active hr {
  display: block;
}
@media (max-width: 992px) and (min-width: 768px) {
  .the-terms .term {
    padding: 16px;
  }
  .the-terms .term.active .visible-content .large-screen-content {
    gap: 16px;
    align-items: flex-start !important;
  }
  .the-terms .term .visible-content .term-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .the-terms .term .visible-content .term-content .title {
    font-size: 16px;
    line-height: 20.8px;
    margin-bottom: 4px;
  }
  .the-terms .term .visible-content .term-content .content,
  .the-terms .term .hidden-content {
    font-size: 12px;
    font-weight: 400;
    line-height: 19.2px;
  }
  .the-terms .term .visible-content i {
    font-size: 13px;
  }
  .the-terms .term .hidden-content {
    padding: 0;
    padding-left: 48px;
  }
  .the-terms .term hr {
    margin-left: 0;
  }
}
@media (max-width: 768px) {
  .the-terms .term {
    padding: 16px;
  }
  .the-terms .term.active .visible-content .large-screen-content {
    gap: 16px;
  }
  .the-terms .term .visible-content {
    gap: 24px;
  }
  .the-terms .term .visible-content .large-screen-content {
    justify-content: space-between;
    gap: 24px;
  }
  .the-terms .term .visible-content .large-screen-content .term-content {
    display: none;
  }
  .the-terms .term .visible-content .term-small-content {
    display: block;
  }
  .the-terms .term .hidden-content {
    padding: 0;
  }
  .the-terms .term hr {
    margin-left: 0;
  }
}
/* Start Customize My Pagination */
.my-pagination {
  gap: 5px;
}
.my-pagination .pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.my-pagination .pagination-btn.active {
  background-color: #141b24;
  color: var(--white-color);
}
@media (max-width: 768px) {
  .my-pagination .pagination-btn.hidden {
    display: none;
  }
}
/* End Customize My Pagination */
/* End terms */
/* End terms and conditions page */
/* Start support center page */
.support-center-page header .terms-and-conditions {
  padding: 72px 56px;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  height: 275px;
}
.support-center-page header .terms-and-conditions > div {
  width: 45%;
}
.support-center-page header .terms-and-conditions .white-div {
  min-height: 385px;
  background-color: var(--white-color);
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  overflow: hidden;
}
.white-div .gradient-div {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 139, 54, 0.5) 0%,
    rgba(186, 75, 241, 0.5) 46.37%,
    rgba(18, 194, 233, 0.5) 100.01%
  );
  opacity: 0.2;
}
@media (max-width: 992px) {
  .support-center-page header .terms-and-conditions {
    padding: 24px;
    justify-content: unset;
    flex-direction: column;
    gap: 24px;
  }
  .support-center-page header .terms-and-conditions > div {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .support-center-page header .terms-and-conditions {
    height: 506px;
    padding: 48px 12px;
  }
  .support-center-page header .terms-and-conditions .content-text {
    padding: 0 12px;
  }
}
/* End support center page */
/* Start Contact Our Team Page */
.contact-us-page #contact-us-carousel {
  margin-top: 80px;
}
.contact-us-page .box {
  padding: 24px 16px;
  border: 1px solid #e8e8e8;
  background-color: var(--white-color);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  gap: 61px;
  align-items: flex-start;
  color: #000;
}
.contact-us-page .box i {
  width: 48px;
  height: 48px;
  background-color: #f8f9fa;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-us-page .box .box-content {
  gap: 48px;
}
.contact-us-page .box .box-content .content {
  gap: 12px;
}
.contact-us-page .box .box-content .content .title {
  font-size: 18px;
  font-weight: 600;
  line-height: 23.4px;
}
.contact-us-page .box .box-content .content .desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  color: #31353b;
}
.contact-us-page .box .box-content .box-link {
  color: #000;
  text-decoration: underline !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 18.2px;
}
@media (max-width: 992px) {
  .contact-us-page #contact-us-carousel {
    margin-top: 50px;
  }
  .contact-us-page .box {
    gap: 48px;
  }
  .contact-us-page .box .box-content {
    gap: 32px;
  }
}
@media (max-width: 768px) {
  .contact-us-page #contact-us-carousel {
    margin-top: 40px;
  }
  .contact-us-page .box {
    gap: 24px;
  }
  .contact-us-page .box .box-content {
    gap: 48px;
  }
}
/* End Contact Our Team  Page*/
/* Start Platform Updates Page */
.platform-updates-page hr {
  color: #d2d0d0;
}
.platform-updates-page h1 {
  text-align: center;
  margin: 0;
  margin-bottom: 48px;
}
.platform-updates-page .updates-content {
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
.platform-updates-page .updates-content .browse-categories {
  width: fit-content;
}
.platform-updates-page .updates-content .updates {
  /* width: 69%; */
  flex: 1;
}
.platform-updates-page .updates-content .browse-categories {
  background-color: var(--white-color);
  padding: 40px;
  border: 1px solid #e8e8e8;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}
.platform-updates-page .updates-content .browse-categories hr {
  margin: 0;
}
.platform-updates-page .updates-content .browse-categories .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 20.8px;
  margin-bottom: 12px;
}
.platform-updates-page .updates-content .browse-categories .categories {
  margin-top: 16px;
}
.platform-updates-page .updates-content .browse-categories .category {
  padding: 12px 0;
  display: flex;
  align-items: center;
}
.platform-updates-page .browse-categories .category input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
}
.platform-updates-page .updates-content .browse-categories .category label {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  cursor: pointer;
}
.platform-updates-page .updates {
  gap: 16px;
}
.platform-updates-page .updates .update {
  padding: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  background-color: var(--white-color);
}
.platform-updates-page .updates .update .update-header {
  gap: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}
.platform-updates-page .updates .update .update-header > div {
  gap: 10px;
}
.platform-updates-page .updates .update-body {
  gap: 16px;
}
.platform-updates-page .updates .update-body .title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}
.platform-updates-page .updates .update-body .update-image {
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  background-color: #f1f1f1;
  width: 100%;
}
.platform-updates-page .updates .update-body .desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  color: #31353b;
}
.platform-updates-page .updates .update-footer {
  gap: 16px;
  font-weight: 500;
  font-size: 14px;
}
.platform-updates-page .updates .update-footer i:hover {
  color: var(--blue-color);
}
.platform-updates-page .small-browse-categories {
  width: 100%;
  overflow: hidden;
  display: none;
  overflow: hidden;
}
/* .platform-updates-page .small-browse-categories::before {
  content: "\f078";
  position: absolute;
  font-family: "font awesome 6 free";
  top: 18px;
  right: 16px;
  font-weight: 900;
  font-size: 14px;
  color: #000;
} */
/* .platform-updates-page select {
  width: 100%;
  appearance: none;
  outline: none;
  border: none;
  padding: 16px;
  font-weight: 500;
  color: #828282;
}
.platform-updates-page select option {
  color: #000;
  font-weight: 500;
}
.platform-updates-page select:focus {
  outline: none;
  border: none;
} */
.platform-updates-page .my-select {
  width: 100%;
  -webkit-border-radius: 56px;
  -moz-border-radius: 56px;
  -ms-border-radius: 56px;
  -o-border-radius: 56px;
  border-radius: 56px;
  padding: 16px;
  font-weight: 500;
  color: #828282;
  font-size: 14px;
}
.platform-updates-page .my-select .fa-chevron-down {
  color: #000;
}
.platform-updates-page .my-pagination {
  margin-top: 32px;
}
@media (max-width: 992px) and (min-width: 768px) {
  .platform-updates-page .updates-content {
    gap: 12px;
  }
  .platform-updates-page .updates-content .browse-categories .title {
    font-size: 14px;
    line-height: 18.2px;
  }
  .platform-updates-page .updates-content .browse-categories .category label {
    font-size: 12px;
    line-height: 14.4px;
  }
  .platform-updates-page .updates .update .update-header {
    gap: 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14.4px;
  }
  .platform-updates-page .updates .update-body .title {
    font-size: 16px;
    line-height: 20.8px;
  }
  .platform-updates-page .updates .update-body .desc {
    font-size: 12px;
    font-weight: 400;
    line-height: 19.2px;
  }
  .platform-updates-page .updates .update-footer {
    gap: 16px;
    font-weight: 500;
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .platform-updates-page .updates-content {
    flex-direction: column;
    gap: 32px;
  }
  .platform-updates-page .browse-categories {
    display: none;
  }
  .platform-updates-page .small-browse-categories {
    display: block;
  }
}
/* End platform update page */
/* Start Affiliate Page */
.affiliate-page .many-benefits {
  margin-bottom: 72px;
}
.affiliate-page .many-benefits,
.affiliate-page .faq {
  gap: 60px;
}
.affiliate-page .many-benefits .header,
.affiliate-page .faq .header {
  gap: 16px;
}
.affiliate-page .many-benefits .header .title,
.affiliate-page .faq .header .title {
  font-family: Satoshi;
  font-size: 40px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -0.04em;
  text-align: center;
}
.affiliate-page .many-benefits .header .desc,
.affiliate-page .faq .header .desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  text-align: center;
  color: #4d4d4d;
}
.affiliate-page .many-benefits .benefit {
  padding: 32px 24px;
  gap: 24px;
  border: 1px solid #dfdfdf;
  background-color: var(--white-color);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
}
.affiliate-page .many-benefits .benefit .icon {
  width: 48px;
  height: 48px;
  background-color: var(--blue-color);
}
.affiliate-page .many-benefits .benefit .icon i {
  display: flex;
  width: 24px;
  height: 24px;
  background-color: var(--white-color);
  color: var(--blue-color);
}
.affiliate-page .many-benefits .benefit .benefit-name {
  font-family: Satoshi;
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
  letter-spacing: -0.02em;
  text-align: center;
  color: #31353b;
}
.affiliate-page .many-benefits .benefit .benefit-desc {
  color: #31353b;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
}
@media (max-width: 992px) and (min-width: 768px) {
  .affiliate-page .many-benefits {
    margin-bottom: 48px;
  }
  .affiliate-page .many-benefits,
  .affiliate-page .faq {
    gap: 35px;
  }
  .affiliate-page .many-benefits .header .title,
  .affiliate-page .faq .header .title {
    font-size: 24px;
    line-height: 31.2px;
    letter-spacing: -0.01em;
  }
  .affiliate-page .many-benefits .header .desc,
  .affiliate-page .faq .header .desc {
    font-size: 12px;
    line-height: 19.2px;
  }
  .affiliate-page .many-benefits .benefit .benefit-name {
    font-size: 15px;
    line-height: 24px;
  }
  .affiliate-page .many-benefits .benefit .benefit-desc {
    font-size: 12px;
    line-height: 19.2px;
  }
}
@media (max-width: 768px) {
  .affiliate-page .many-benefits {
    margin-bottom: 40px;
  }
  .affiliate-page .many-benefits,
  .affiliate-page .faq {
    gap: 40px;
  }
  .affiliate-page .many-benefits .header .title,
  .affiliate-page .faq .header .title {
    font-size: 28px;
    line-height: 36.4px;
    letter-spacing: -0.04em;
  }
}
/* End Affiliate Page */
/* Start Affiliate Program Ad */
.affiliate-program-page .my-header .how-it-works {
  gap: 8px;
}
.affiliate-program-page .my-header .how-it-works span {
  font-size: 15px;
  font-weight: 700;
  line-height: 22.5px;
  letter-spacing: -0.01em;
}
.asks-and-answers {
  /* gap: 35px; */
  justify-content: space-between;
  align-items: flex-start;
}
.asks-and-answers .the-ask {
  gap: 32px;
  flex-basis: 35%;
}
.asks-and-answers .the-ask .ask-content {
  gap: 16px;
}
.affiliate-program-page .the-answers {
  gap: 12px;
  flex-basis: 50%;
}
.the-answers .answer {
  padding: 12px;
  gap: 16px;
  background-color: var(--white-color);
  border: 1px solid #dfdfdf;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.the-answers .answer .icon {
  width: 20px;
  height: 20px;
  color: var(--white-color);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3b4450;
  font-size: 12px;
}
.the-answers .answer .answer-content {
  flex: 1;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.01em;
}
.affiliate-program-page .faq {
  margin-top: 72px;
}
.affiliate-program-page .faq .header {
  margin-bottom: 32px;
}
.affiliate-program-page .faq h2 {
  text-align: center;
}
.affiliate-program-page .faq p {
  text-align: center;
}
@media (max-width: 992px) and (min-width: 768px) {
  .asks-and-answers .the-ask {
    gap: 24px;
  }
  .affiliate-program-page .the-answers {
    flex-basis: 55%;
  }
  .the-answers .answer .answer-content {
    font-size: 12px;
    line-height: 16.8px;
  }
  .affiliate-program-page .faq {
    margin-top: 48px;
  }
  .the-answers .answer .answer-content {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    letter-spacing: -0.01em;
  }
}
@media (max-width: 768px) {
  .asks-and-answers {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .asks-and-answers .the-ask h2 {
    text-align: center;
  }
  .asks-and-answers .the-ask p {
    text-align: center;
  }
  .affiliate-program-page .asks-and-answers .the-ask button {
    display: none;
  }
  .affiliate-program-page .faq {
    margin-top: 48px;
  }
  .affiliate-program-page .faq .header {
    gap: 0 !important;
  }
}
/* End Affiliate Program Ad */
/* Start who we are page */

.who-we-are-page .my-header p {
  color: #4d4d4d;
}
.who-we-are-page .the-answers {
  gap: 12px;
  counter-reset: answers-counter;
  flex-basis: 50%;
}
.who-we-are-page .how-we-are .the-answers .answer {
  padding: 32px 24px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  align-items: center !important;
  gap: 24px;
}
.who-we-are-page .how-we-are .the-answers .answer .icon {
  width: 40px;
  height: 40px;
  position: relative;
  counter-increment: answers-counter;
}
.who-we-are-page .how-we-are .the-answers .answer .icon::before {
  content: "0" counter(answers-counter);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-family: 700;
}
.who-we-are-page .how-we-are .the-answers .answer .answer-content {
  color: #31353b;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.who-we-are-page .how-we-are .the-answers .answer .answer-content .title {
  font-family: Satoshi;
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
  letter-spacing: -0.02em;
}
.who-we-are-page .how-we-are .the-answers .answer .answer-content .desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
}
.who-we-are-page .goals,
.reasons-for-stands-out {
  gap: 60px;
  margin-bottom: 72px;
}
.who-we-are-page .goals h2,
.reasons-for-stands-out h2 {
  font-size: 40px;
  font-weight: 600;
  line-height: 52px;
  letter-spacing: -0.01em;
  text-align: center;
}
.who-we-are-page #goals-carousel .owl-stage {
  display: flex;
}
.who-we-are-page #goals-carousel .owl-item {
  display: flex;
  align-items: stretch;
}
.who-we-are-page .goals .goal {
  background-color: var(--white-color);
  border: 1px solid #dfdfdf;
  padding: 32px 24px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  gap: 24px;
  height: 100%;
  width: 100%;
}
.who-we-are-page .goals .goal i {
  width: 48px;
  height: 48px;
  background-color: var(--blue-color);
  color: var(--white-color);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.who-we-are-page .goals .goal .goal-content {
  font-family: Satoshi;
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
  letter-spacing: -0.02em;
  color: #31353b;
}
@media (max-width: 1200px) and (min-width: 768px) {
  .who-we-are-page .my-header .the-answers .answer .answer-content {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    letter-spacing: -0.01em;
  }
}
@media (max-width: 992px) and (min-width: 768px) {
  .who-we-are-page .how-we-are .the-answers .answer {
    padding: 10px 12px;
    gap: 16px;
  }
  .who-we-are-page .how-we-are .the-answers .answer .answer-content {
    gap: 2px;
  }
  .who-we-are-page .how-we-are .the-answers .answer .answer-content .title {
    font-size: 14px;
    line-height: 22.4px;
  }
  .who-we-are-page .how-we-are .the-answers .answer .answer-content .desc {
    font-size: 12px;
    line-height: 19.2px;
  }
  .who-we-are-page .how-we-are .the-answers .answer .icon::before {
    font-size: 13px;
  }
  .who-we-are-page .goals,
  .reasons-for-stands-out {
    gap: 32px;
    margin-bottom: 55px;
  }
  .who-we-are-page .goals h2,
  .reasons-for-stands-out h2 {
    font-size: 24px;
    line-height: 31.2px;
  }
  .who-we-are-page .goals .goal {
    padding: 16px 12px;
    gap: 16px;
  }
  .who-we-are-page .goals .goal i {
    font-size: 12px;
    width: 32px;
    height: 32px;
  }
  .who-we-are-page .goals .goal .goal-content {
    font-size: 14px;
    line-height: 19.6px;
  }
}

@media (max-width: 768px) {
  .who-we-are-page .how-we-are .the-answers .answer {
    padding: 12px;
    align-items: flex-start;
  }
  .who-we-are-page .how-we-are .the-answers .answer .answer-content .title {
    font-size: 16px;
    line-height: 25.6px;
  }
  .who-we-are-page .the-answers {
    width: 100%;
  }
  .who-we-are-page .goals,
  .reasons-for-stands-out {
    gap: 40px;
    margin-bottom: 48px;
  }
  .who-we-are-page .goals h2,
  .reasons-for-stands-out h2 {
    font-size: 28px;
    line-height: 36.4px;
  }
}
/* Start reasons */
.who-we-are-page .reasons-for-stands-out {
  margin-top: 72px;
}
.who-we-are-page .reasons {
  flex-wrap: wrap;
  gap: 21px;
}
.who-we-are-page .reasons > div {
  flex-basis: 23%;
}
.who-we-are-page .reason {
  background-color: var(--white-color);
  border: 1px solid #e8e8e8;
  padding: 20px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  gap: 20px;
}
.who-we-are-page .reason .icons-div {
  width: 100%;
  height: 217px;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.who-we-are-page .reason .icons-div .icon {
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white-color);
  color: var(--blue-color);
  position: relative;
}
.who-we-are-page .reason .icons-div .icon i {
  font-size: 26px;
}
.who-we-are-page .reason.no-bots .icons-div .icon i {
  font-size: 50px;
}
.who-we-are-page .reason.no-bots .icons-div .icon .user-name {
  color: #000;
  background-color: var(--white-color);
  font-size: 7.62px;
  font-weight: 400;
  line-height: 9.91px;
  border: 0.54px solid #dfdfdf;
  padding: 3.35px 6.53px;
  -webkit-border-radius: 53.89px;
  -moz-border-radius: 53.89px;
  -ms-border-radius: 53.89px;
  -o-border-radius: 53.89px;
  border-radius: 53.89px;
  position: absolute;
  bottom: -3.5%;
}
.who-we-are-page .reason.affiliate-program .icon::before,
.who-we-are-page .reason.affiliate-program .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 1.45px;
  background-color: #1769ff87;
}
.who-we-are-page .reason.affiliate-program .icon::before {
  right: -20px;
}
.who-we-are-page .reason.affiliate-program .icon::after {
  left: -20px;
}
.who-we-are-page .reason.affiliate-program .icons-div > i {
  color: var(--blue-color);
  font-size: 36px;
}
.who-we-are-page .reason.wide-range .icons-div .icon {
  width: 68px;
  height: 68px;
  font-size: 24px;
}
.who-we-are-page .reason .icons-div {
  justify-content: space-evenly;
}
.who-we-are-page .reason .icons-div i.rad-circle {
  background-color: var(--blue-color);
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.who-we-are-page .reason .icons-div .icon.dollar i {
  width: 40px;
  height: 40px;
  font-size: 20px;
}
.who-we-are-page .reason .icons-div .icon.rocket i.rad-circle {
  width: 14.5px;
  height: 14.5px;
  border: 2px solid var(--white-color);
  font-size: 8px;
  position: absolute;
  left: 37%;
  bottom: 55%;
}

.who-we-are-page .reason:last-child .icons-div i.rad-circle {
  width: 23.7px;
  height: 23.7px;
  font-size: 11px;
  border: 3px solid #f8f9fa;
  position: absolute;
}
.who-we-are-page .reason:last-child .icon {
  width: 104px;
  height: 104px;
}
.who-we-are-page
  .reasons
  .reason:last-child
  .icons-div
  i.rad-circle:first-of-type {
  bottom: 10%;
  left: -2%;
}
.who-we-are-page
  .reasons
  .reason:last-child
  .icons-div
  i.rad-circle:last-of-type {
  top: 10%;
  right: -2%;
}
.who-we-are-page .reason .reason-content {
  gap: 8px;
}
.who-we-are-page .reason .reason-content .reason-title {
  font-family: Satoshi;
  font-size: 18px;
  font-weight: 700;
  line-height: 23.4px;
  letter-spacing: -0.04em;
}
.who-we-are-page .reason .reason-content .reason-desc {
  font-family: Inter;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.01em;
  text-align: left;
}
.who-we-are-page #reasons-carousel {
  display: none;
}
.who-we-are-page #reasons-carousel .owl-stage {
  display: flex;
  margin-bottom: 48px;
}
.who-we-are-page #reasons-carousel .owl-item {
  display: flex;
  align-items: stretch;
}
@media (max-width: 1200px) and (min-width: 768px) {
  .who-we-are-page .reasons {
    gap: 15px;
  }
  .who-we-are-page .reason {
    border: 0.75px solid #e8e8e8;
    padding: 10px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px;
    gap: 12px;
  }
  .who-we-are-page .reason .icons-div {
    height: 129px;
    background-color: #f8f9fa;
    -webkit-border-radius: var(--radius-8);
    -moz-border-radius: var(--radius-8);
    -ms-border-radius: var(--radius-8);
    -o-border-radius: var(--radius-8);
    border-radius: var(--radius-8);
  }
  .who-we-are-page .reason .icons-div .icon {
    width: 64px;
    height: 64px;
  }
  .who-we-are-page .reason .icons-div .icon i {
    font-size: 20px;
  }
  .who-we-are-page .reason.no-bots .icons-div .icon i {
    font-size: 35px;
  }
  .who-we-are-page .reason.no-bots .icons-div .icon .user-name {
    bottom: -12.5%;
  }
  .who-we-are-page .reason.wide-range .icons-div .icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .who-we-are-page .reason.wide-range .icons-div .icon i {
    font-size: 16px;
  }
  .who-we-are-page .reason.affiliate-program .icons-div > i {
    font-size: 30px;
  }
  .who-we-are-page .reason .icons-div .icon.rocket i.rad-circle {
    width: 10.5px;
    height: 10.5px;
    border: 2px solid var(--white-color);
    font-size: 5px;
    position: absolute;
    left: 37%;
    bottom: 55%;
  }
  .who-we-are-page .reason:last-child .icons-div i.rad-circle {
    width: 14px;
    height: 14px;
    font-size: 7px;
    border: 2px solid #f8f9fa;
  }
  .who-we-are-page .reason.affiliate-program .icon::before,
  .who-we-are-page .reason.affiliate-program .icon::after {
    width: 15px;
  }
  .who-we-are-page .reason.affiliate-program .icon::before {
    right: -15px;
  }
  .who-we-are-page .reason.affiliate-program .icon::after {
    left: -15px;
  }
  .who-we-are-page .reason .reason-content .reason-title {
    font-size: 14px;
    line-height: 18.2px;
  }
  .who-we-are-page .reason .reason-content .reason-desc {
    font-size: 12px;
    line-height: 18.2px;
  }
}
@media (max-width: 992px) {
  .who-we-are-page .reasons-for-stands-out {
    margin-top: 56px;
  }
  .who-we-are-page .reasons {
    display: none;
  }
  .who-we-are-page #reasons-carousel {
    display: block;
  }
}
/* End who we are page */
/* Start Trust and Safety Page */
.trust-and-safety-page .trust-and-security .my-header {
  gap: 16px !important;
  margin: 0;
  margin-bottom: 60px;
}
.trust-and-safety-page .trust-and-security .my-header p {
  color: #4d4d4d;
  width: 60%;
}
.trust-and-safety-page .trust-and-security-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
}
.trust-and-safety-page .trust-and-security-content .box {
  border: 1px solid #dfdfdf;
  gap: 24px;
  padding: 32px 24px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  background-color: var(--white-color);
}

.trust-and-safety-page .trust-and-security-content .box .icon {
  width: 48px;
  height: 48px;
  background-color: var(--blue-color);
}
.trust-and-safety-page .trust-and-security-content .box .icon i {
  width: 24px;
  height: 24px;
  background-color: var(--white-color);
  color: var(--blue-color);
  display: flex;
}
.trust-and-safety-page .trust-and-security-content .box .content {
  align-items: center;
  gap: 6px;
  color: #31353b;
}
.trust-and-safety-page .trust-and-security-content .box .content .title {
  font-family: Satoshi;
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
  letter-spacing: -0.02em;
  text-align: center;
}
.trust-and-safety-page .trust-and-security-content .box .content .desc {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
}
.trust-and-safety-page .my-header.reverse {
  flex-direction: row-reverse;
}
@media (max-width: 992px) and (min-width: 600px) {
  .trust-and-safety-page .trust-and-security .my-header {
    margin-bottom: 32px;
  }
  .trust-and-safety-page .trust-and-security .my-header p {
    width: 80%;
  }
  .trust-and-safety-page .trust-and-security-content .box {
    padding: 20px 16px;
    gap: 16px;
  }
  .trust-and-safety-page .trust-and-security-content .box .icon {
    width: 32px;
    height: 32px;
  }
  .trust-and-safety-page .trust-and-security-content .box .icon i {
    width: 16px;
    height: 16px;
    font-size: 12px;
  }
  .trust-and-safety-page .trust-and-security-content .box .content .title {
    font-size: 14px;
    line-height: 22.4px;
  }
  .trust-and-safety-page .trust-and-security-content .box .content .desc {
    font-size: 12px;
    line-height: 19.2px;
  }
}
@media (max-width: 768px) {
  .trust-and-safety-page .trust-and-security .my-header {
    margin-bottom: 40px;
  }
  .trust-and-safety-page .trust-and-security .my-header p {
    width: 100%;
  }
  .trust-and-safety-page .my-header.reverse {
    flex-direction: column;
  }
}
/* End Trust and Safety Page */
/* ===================================== */
/* ===================================== */
/* ===================================== */
/* ===================================== */
/* ===================================== */
/* ===================================== */
/* ===================================== */
/* ===================================== */
/* ===================================== */
/* Start Dashboard Styling */
.dashboard-page {
  margin-top: 24px;
}
.dashboard-nav {
  padding: 16px;
  background-color: var(--white-color);
  width: 100%;
  display: none;
}
.dashboard-nav i {
  cursor: pointer;
}
.dashboard-nav i.close {
  display: none;
}
.dashboard-nav.active i.close {
  display: block;
}
.dashboard-nav.active i.open {
  display: none;
}
.dashboard-nav .logout-btn {
  color: var(--white-color);
  background-color: #ed1e37;
  padding: 8px 12px;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
  font-size: 12px;
  cursor: pointer;
}
.dashboard-nav .logout-btn i {
  margin-right: 5px;
}
.dashboard-nav + .dashboard-menu {
  padding: 32px 12px 0 12px;
  width: 100%;
  background-color: #f9f9f9;
  color: #979797;
  gap: 306px;
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
  position: absolute;
  z-index: 999;
  left: -100%;
}
.dashboard-nav + .dashboard-menu.active {
  left: 0;
}
.dashboard-nav + .dashboard-menu .content {
  gap: 32px;
}
.dashboard-nav + .dashboard-menu .title {
  font-size: 12px;
}
.dashboard-nav + .dashboard-menu .the-menu {
  padding: 0;
  gap: 0;
}
.dashboard-nav + .dashboard-menu .the-menu li {
  padding: 12px 8px;
  gap: 8px;
  cursor: pointer;
}
.dashboard-nav + .dashboard-menu .the-menu li,
.dashboard-bar li {
  font-size: 14px;
  font-weight: 400;
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
}
.dashboard-nav + .dashboard-menu .the-menu li:hover,
.dashboard-nav + .dashboard-menu .the-menu li.active,
.dashboard-bar li:hover,
.dashboard-bar li.active {
  background-color: var(--main-color);
  color: var(--white-color);
  font-weight: 600;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.dashboard-nav + .dashboard-menu .copyrights {
  font-family: Satoshi;
  font-size: 12px;
  font-weight: 500;
  line-height: 14.4px;
  letter-spacing: 0.08em;
  text-align: center;
}
.dashboard-page .dashboard-header {
  max-height: fit-content;
}
.dashboard-page .dashboard-header .dashboard-landing {
  width: 100%;
  height: 300px;
  overflow: hidden;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
}
.dashboard-header .dashboard-landing i {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 41px;
  height: 41px;
  color: var(--white-color);
  background-color: #ed1e37;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dashboard-header .dashboard-landing svg {
  height: 100%;
  width: fit-content;
}
.dashboard-header .dashboard-landing .circle-1 {
  width: 507px;
  height: 507px;
  position: absolute;
  bottom: -86%;
  left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
}
.dashboard-header .dashboard-landing [class*="circle-"] {
  border: 1px solid #e8e8e8;
  background: #f3f3f3b2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
}
.dashboard-header .dashboard-landing .circle-2 {
  width: 85%;
  height: 85%;
}
.dashboard-header .dashboard-landing .circle-3 {
  width: 70%;
  height: 70%;
}
.dashboard-header .dashboard-landing .circle-4 {
  width: 55%;
  height: 55%;
}
.dashboard-header .dashboard-landing .circle-5 {
  width: 40%;
  height: 40%;
  background-color: #f9f9f9;
}
.dashboard-header .admin-details {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  top: -76px;
}
.dashboard-header .admin-details .admin-avatar {
  position: relative;
  left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
  width: 151px;
  height: 151px;
}
.dashboard-header .admin-details .details {
  gap: 40px;
  position: relative;
}
.dashboard-header .admin-details .admin-name {
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
}
.dashboard-header .admin-details .admin-name span {
  font-weight: 600;
}
.dashboard-header .admin-details .admin-balance {
  gap: 35px;
}
.dashboard-header .admin-details .admin-balance .balances {
  gap: 48px;
}
.dashboard-header .admin-details .admin-balance .balances > div {
  gap: 16px;
}
.dashboard-header .admin-details .admin-balance .balance-name {
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.02em;
  text-align: center;
  color: #6c6c6f;
}
.dashboard-header .admin-details .admin-balance .balance-value {
  font-family: Inter;
  font-size: 32px;
  font-weight: 600;
  line-height: 38.73px;
  letter-spacing: -0.02em;
  text-align: center;
  color: #1e1e1e;
}
.dashboard-header .admin-details .recharge-btn {
  width: 100%;
  padding: 15px 24px;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
}
.dashboard-header .admin-details .recharge-btn i {
  margin-left: 8px;
}
@media (max-width: 992px) {
  .dashboard-header .dashboard-landing {
    height: 177px !important;
  }
  .dashboard-header .dashboard-landing .circle-1 {
    width: 325px;
    height: 300px;
    bottom: -83%;
  }
  .dashboard-header .dashboard-landing i {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 41px;
    height: 41px;
    color: var(--white-color);
    background-color: #ed1e37;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dashboard-header .admin-details {
    gap: 27px;
    top: -55.5px;
  }
  .dashboard-header .admin-details .admin-name {
    font-size: 16px;
  }
  .dashboard-header .admin-details .admin-avatar {
    width: 112.38px;
    height: 112.38px;
  }
  .dashboard-header .admin-details .details {
    gap: 20px;
  }
  .dashboard-header .admin-details .admin-balance {
    gap: 20px;
  }
  .dashboard-header .admin-details .admin-balance .balances > div {
    gap: 8px;
  }
  .dashboard-header .admin-details .admin-balance .balance-name {
    font-size: 12px;
    line-height: 18px;
  }
  .dashboard-header .admin-details .admin-balance .balance-value {
    font-size: 20px;
    line-height: 24.2px;
  }
}
@media (max-width: 576px) {
  .dashboard-header .dashboard-landing {
    height: 130px !important;
  }
  .main-nav.dashbord-main-nav {
    display: none;
  }
  .dashboard-header .dashboard-landing i {
    display: none;
  }
  .dashboard-nav {
    display: flex;
  }
  .dashboard-header .dashboard-landing .circle-1 {
    width: 200px;
    height: 200px;
    bottom: -78%;
  }
  .dashboard-header .dashboard-landing .circle-4 {
    width: 60%;
    height: 60%;
  }
  .dashboard-header .dashboard-landing .circle-5 {
    width: 50%;
    height: 50%;
  }
  .dashboard-header .admin-details {
    gap: 24px;
    top: -40px;
  }
  .dashboard-header .admin-details .admin-avatar {
    width: 82px;
    height: 82px;
  }
  .dashboard-header .admin-details .admin-balance .balances {
    gap: 24px;
    justify-content: space-between;
  }
}
/* End Dashboard Header */
/* Strat Dashboard Bar */
.dashboard-bar {
  padding: 0;
  margin: 0;
  color: #979797;
  background-color: var(--white-color);
  padding: 8px;
  border: 1px solid #e8e8e8;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  margin: 0 0 24px 0;
}
#dashboard-bar-carousel .owl-nav {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
}
.dashboard-bar,
#dashboard-bar-carousel .owl-nav button {
  background-color: var(--white-color);
  border: 1px solid #e8e8e8;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
#dashboard-bar-carousel .owl-stage {
  display: flex;
  align-items: center;
}
#dashboard-bar-carousel .owl-dots {
  display: none;
}
#dashboard-bar-carousel .owl-nav button {
  padding: 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
#dashboard-bar-carousel .owl-nav button span {
  width: 18px;
  height: 18px;
  color: var(--white-color);
  background-color: #979797;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#dashboard-bar-carousel .owl-nav button.owl-previous {
  left: -9px;
}
#dashboard-bar-carousel .owl-nav button.owl-next {
  right: -5px;
}
.dashboard-bar .item {
  padding: 16px;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  cursor: pointer;
}
.dashboard-bar .item:hover,
.dashboard-bar .item.active {
  background-color: var(--main-color);
  color: var(--white-color);
}
@media (max-width: 1200px) {
  .dashboard-bar .item {
    padding: 10px 16px;
    gap: 8px;
    font-size: 12px;
  }
}
@media (max-width: 576px) {
  #dashboard-bar-carousel {
    display: none;
  }
}
/* End Dashboard Bar */
/* Start Sections */
.dashboard-page section {
  display: none;
}
.dashboard-page section.active {
  display: flex;
}
/* Start Dashboard Section */
.dashboard-section {
  flex-wrap: wrap;
  gap: 20px;
}
.dashboard-section .dashboard-box:not(:last-child) {
  flex-basis: 32.1%;
}
.dashboard-section .dashboard-box:last-child {
  flex-basis: 100%;
}
.dashboard-section .dashboard-box {
  padding: 35px 15px 35px 15px;
  gap: 48px;
  background-color: var(--white-color);
  border: 1px solid #ededed;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  /* height: fit-content; */
  justify-content: stretch;
}
.dashboard-section .dashboard-box svg {
  position: absolute;
  bottom: 0;
  opacity: 0.6;
  z-index: 1;
}
.dashboard-section .dashboard-box:first-child .icon i {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.dashboard-section .dashboard-box .icon {
  color: var(--blue-color);
  width: 56px;
  height: 56px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
  border-radius: 14px;
  border: 1.17px solid #d9d9d9;
  background-color: var(--white-color);
  box-shadow: 0px 0px 0px 4.67px #0000000d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.dashboard-section .dashboard-box .content {
  gap: 16px;
}
.dashboard-section .dashboard-box .content .the-number {
  font-size: 32px;
  font-weight: 600;
  line-height: 38.73px;
  letter-spacing: -0.02em;
  color: #1e1e1e;
}
.dashboard-section .dashboard-box .content .the-name {
  padding: 5px 10px 5px 10px;
  gap: 10px;
  background-color: #f5f5f5;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.02em;
  text-align: center;
  color: #6c6c6f;
}
@media (max-width: 1200px) {
  .dashboard-section {
    gap: 16px;
  }
  .dashboard-section .dashboard-box:not(:last-child) {
    flex-basis: 31.8%;
  }
  .dashboard-section .dashboard-box {
    gap: 32px;
  }
  .dashboard-section .dashboard-box .icon {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    border: 0.83px solid #d9d9d9;
    box-shadow: 0px 0px 0px 3.33px #0000000d;
  }
  .dashboard-section .dashboard-box i {
    font-size: 16px;
  }
  .dashboard-section .dashboard-box .content .the-number {
    font-size: 24px;
    line-height: 29.05px;
  }
  .dashboard-section .dashboard-box .content .the-name {
    font-size: 12px;
    line-height: 18px;
  }
}
/* @media (max-width: 992px) {
  .dashboard-section .dashboard-box:not(:last-child) {
    flex-basis: 31.5%;
  }
} */
@media (max-width: 768px) {
  .dashboard-section .dashboard-box:not(:last-child) {
    flex-basis: 31.5%;
  }
}
@media (max-width: 620px) {
  .dashboard-section {
    gap: 15px;
    /* flex-wrap: nowrap; */
  }
  .dashboard-section .dashboard-box {
    gap: 15px;
    flex-basis: 47% !important;
    padding: 24px 15px;
  }
  .dashboard-section .dashboard-box .content .the-number {
    font-size: 20px;
    line-height: 24.2px;
  }
}
/* End Dashboard Section */
/* Start My Requests Section */
.my-requests {
  gap: 21px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(376px, 1fr));
}
@media (max-width: 576px) {
  .my-requests {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}
.my-requests .request-box.hidden {
  display: none;
}
.my-requests .request-box {
  flex-basis: 32%;
}
.my-requests .request-box {
  border: 1px solid #ebebeb;
  background-color: var(--white-color);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.request-box .request-header,
.request-box .request-body {
  padding: 16px;
}
.request-box .request-footer {
  padding: 12px;
}
.request-box .request-header > div {
  gap: 4px;
}
.request-box .request-header > div .name {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--paragraf-color);
}
.request-box .request-header .number-id .value {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.request-box .request-header .status .value {
  padding: 3px 6px 3px 6px;
  background-color: #eefaea;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: #12aa2a;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.request-box .request-body {
  gap: 8px;
}
.request-box .top-body {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  gap: 16px;
  padding: 8px;
  height: 100%;
}
.request-box .top-body .image,
.request-box .bottom-body {
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.request-box .top-body .image {
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 100%; */
}
.request-box .top-body .info {
  gap: 6px;
}

.request-box .top-body .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.request-box .top-body .price,
.request-box .top-body .number-of-followers {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}
.request-box .top-body .number-of-followers span {
  font-weight: 400;
  color: var(--paragraf-color);
}
.request-box .bottom-body {
  padding: 8px;
  gap: 8px;
}
.request-box .bottom-body .info-name {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--paragraf-color);
}
.request-box .bottom-body .the-info .info-value {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}
.request-box .bottom-body .the-info:first-child .info-value {
  font-weight: 500;
  color: var(--blue-color);
}
.request-box .bottom-body .the-info:first-child i {
  margin-right: 5px;
}
.request-box .bottom-body .the-info:last-child .info-value {
  font-weight: 500;
}
.request-box .bottom-body .the-info:last-child .info-value i {
  margin-right: 4px;
  color: var(--paragraf-color);
}
.request-box .request-footer {
  background-color: #f2f2f2;
  border-top: 1px solid #ebebeb;
}
.request-box .request-footer button {
  border: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--white-color);
  padding: 6px 16px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.request-box .request-footer .compensation-and-evaluation {
  gap: 8px;
}
.request-box .request-footer .record-btn {
  background-color: #e2626b;
}
.request-box .request-footer .compensation-btn {
  background-color: #3f78e0;
}
.request-box .request-footer .evaluation-btn {
  background-color: #fb9319;
}
@media (max-width: 1200px) {
  .my-requests {
    gap: 16px;
    flex-wrap: wrap;
  }
  .my-requests .request-box {
    flex-basis: 47%;
  }
  .my-requests .request-box.hidden {
    display: block;
  }
}
@media (max-width: 992px) and (min-width: 768px) {
  .my-requests .request-box .request-header,
  .my-requests .request-box .request-body {
    padding: 12px;
  }
  .my-requests .request-box .request-footer {
    padding: 8px 12px;
  }
  .my-requests .request-box .request-header > div {
    gap: 3px;
  }
  .my-requests .request-box .request-header > div .name,
  .my-requests .request-box .request-header .number-id .value {
    font-size: 12px;
    line-height: 18px;
  }
  .my-requests .request-box .request-header .status .value {
    padding: 2px 6px 2px 6px;
    font-size: 10px;
    line-height: 15px;
  }
  .my-requests .request-box .top-body .info {
    gap: 5px;
  }
  .my-requests .request-box .top-body .title {
    font-size: 14px;
    line-height: 21px;
  }
  .my-requests .request-box .top-body .price,
  .my-requests .request-box .top-body .number-of-followers,
  .my-requests .request-box .top-body .number-of-followers span {
    font-size: 12px;
    line-height: 18px;
  }
  .my-requests .request-box .bottom-body {
    padding: 8px;
    gap: 8px;
  }
  .my-requests .request-box .bottom-body .info-name,
  .my-requests .request-box .bottom-body .the-info .info-value {
    font-size: 12px;
    line-height: 18px;
  }
}
@media (max-width: 576px) {
  .my-requests .request-box .request-header,
  .my-requests .request-box .request-body {
    padding: 12px;
  }
  .my-requests .request-box .request-footer {
    padding: 8px 12px;
  }
  .my-requests .request-box .request-header > div {
    gap: 3px;
  }
  .my-requests .request-box .request-header > div .name,
  .my-requests .request-box .request-header .number-id .value {
    font-size: 12px;
    line-height: 18px;
  }
  .my-requests .request-box .request-header .status .value {
    padding: 2px 6px 2px 6px;
    font-size: 10px;
    line-height: 15px;
  }
  .my-requests .request-box .top-body .info {
    gap: 5px;
  }
  .my-requests .request-box .top-body .title {
    font-size: 14px;
    line-height: 21px;
  }
  .my-requests .request-box .top-body .price,
  .my-requests .request-box .top-body .number-of-followers,
  .my-requests .request-box .top-body .number-of-followers span {
    font-size: 12px;
    line-height: 18px;
  }
  .my-requests .request-box .bottom-body {
    padding: 8px;
    gap: 8px;
  }
  .my-requests .request-box .bottom-body .info-name,
  .my-requests .request-box .bottom-body .the-info .info-value {
    font-size: 12px;
    line-height: 18px;
  }
}
@media (max-width: 768px) {
  .my-requests .request-box {
    flex-basis: 100%;
  }
  .my-requests .request-box .request-footer {
    padding: 8px;
  }
  .my-requests .request-box .request-footer button {
    padding: 6px 10px;
  }
}
.my-pagination-two {
  gap: 6.4px;
  width: 100%;
  margin-top: 32px;
}
.my-pagination-two .pagination-btn {
  padding: 3.2px 6.4px;
  border: 0.8px solid #6c6c6f4d;
  -webkit-border-radius: 3.2px;
  -moz-border-radius: 3.2px;
  -ms-border-radius: 3.2px;
  -o-border-radius: 3.2px;
  border-radius: 3.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  columns: #000;
  font-size: 12px;
  cursor: pointer;
  width: 32px;
  height: 32px;
}
.my-pagination-two .pagination-btn.active {
  background-color: var(--blue-color);
  color: var(--white-color);
}
@media (max-width: 768px) {
  .my-pagination-two .pagination-btn.hidden {
    display: none;
  }
}
/* End My Requests Section */
/* Start requests popups styling */
.requests-section-popups .orders-popup.show,
.request-is-compete-popup.show {
  top: 242px;
  width: 53%;
}
.orders-popup .orders-table {
  border: 1px solid #e8e8e8;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -ms-border-radius: 9px;
  -o-border-radius: 9px;
  border-radius: 9px;
  overflow: hidden;
}
.orders-popup .orders-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--main-color);
}
.orders-popup .orders-table td {
  width: calc(100% / 3);
  padding: 16px;
  text-align: center;
  border: 1px solid #e8e8e8;
}
.orders-popup .orders-table td:not(:first-child) span {
  display: -webkit-box; /* Flexbox-based display */
  -webkit-box-orient: vertical; /* Sets the orientation to vertical */
  -webkit-line-clamp: 1; /* Limits the text to 3 lines */
  overflow: hidden; /* Hides the overflowing text */
  text-overflow: ellipsis; /* Adds ellipsis */
  line-height: 1.5; /* Set your desired line height */
  max-height: calc(1.5em * 1);
}
.orders-popup .orders-table tbody tr:nth-child(odd) {
  background-color: var(--white-color);
}
.orders-popup .orders-table tbody tr:nth-child(even) {
  background-color: #dde4f240;
}
.orders-popup .orders-table .status span {
  padding: 2px 8px 4px 8px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -ms-border-radius: 9px;
  -o-border-radius: 9px;
  border-radius: 9px;
}

.orders-popup .orders-table .purchased span {
  background-color: #fdf5e2;
  color: #f7931a;
}

.orders-popup .orders-table .completed span {
  background-color: #e7fde2;
  color: #0e7a1f;
}
@media (max-width: 992px) {
  .requests-section-popups .orders-popup.show {
    width: 78%;
    top: 261px;
  }
}
@media (max-width: 768px) {
  .requests-section-popups .orders-popup.show {
    width: 94% !important;
    top: 265px !important;
  }
  .orders-popup .orders-table .status {
    font-size: 11px;
    line-height: 16.5px;
  }
  .orders-popup .orders-table table {
    font-size: 12px;
    line-height: 18px;
  }
  .orders-popup .orders-table td {
    padding: 12px;
  }
}
.my-requests-section .request-is-compete-popup .popup-icon {
  color: #1a822b;
  background-color: #ddfbe5;
}
.requests-section-popups .request-is-compete-popup .request-box {
  border: 1px solid #ebebeb;
  /* padding: 20px; */
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 992px) {
  .requests-section-popups .request-is-compete-popup.show {
    width: 78%;
    top: 210px;
  }
}
@media (max-width: 768px) {
  .requests-section-popups .request-is-compete-popup.show {
    width: 94%;
    top: 210px;
  }
}
@media (max-width: 576px) {
  .requests-section-popups .request-is-compete-popup .request-body .top-body {
    flex-direction: column;
    gap: 8px;
  }
  .requests-section-popups
    .request-is-compete-popup
    .request-body
    .top-body
    .image {
    height: 120px;
  }
  .requests-section-popups
    .request-is-compete-popup
    .request-body
    .bottom-body
    .the-info {
    align-items: flex-start;
  }
  .requests-section-popups
    .request-is-compete-popup
    .request-body
    .bottom-body
    .the-info
    .info-value {
    display: flex;
    align-items: center;
  }
  .requests-section-popups .request-is-compete-popup .request-footer {
    flex-direction: column;
    gap: 8px;
  }
  .requests-section-popups
    .request-is-compete-popup
    .request-footer
    .compensation-and-evaluation {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .requests-section-popups .request-is-compete-popup .request-footer button {
    width: 100%;
    padding: 11px 16px;
  }
}
.compensation-popup.show {
  top: 300px;
  width: 53%;
}
.compensation-popup .compensation-content {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.compensation-popup .compensation-body {
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px;
  color: var(--paragraf-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
.compensation-popup .compensation-body .content {
  flex-direction: column;
  gap: 4px;
}
.compensation-popup .compensation-body .content span {
  font-weight: 500;
  margin-left: 4px;
  color: var(--main-color);
}
.compensation-popup .compensation-footer {
  padding: 12px;
  background-color: #f2f2f2;
  border-top: 1px solid #ebebeb;
}
.compensation-popup .compensation-footer .cancle-btn {
  padding: 6px 16px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  color: var(--white-color);
  background-color: #e2626b;
  border: none;
}
@media (max-width: 992px) {
  .compensation-popup.show,
  .request-is-in-complete-popup.show,
  .evaluation-popup.show {
    top: 380px;
    width: 78%;
  }
}
@media (max-width: 768px) {
  .compensation-popup.show,
  .request-is-in-complete-popup.show,
  .evaluation-popup.show {
    top: 350px !important;
    width: 94% !important;
  }
  .compensation-popup .compensation-body {
    flex-direction: column;
    align-items: unset;
    gap: 8px;
    padding: 16px 12px;
  }
  .compensation-popup .compensation-body .content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .compensation-popup .compensation-footer .cancle-btn {
    width: 100%;
  }
}
.request-is-in-complete-popup.show,
.evaluation-popup.show {
  top: 230px;
  width: 53%;
}
.request-is-in-complete-popup .fail-reasons {
  display: flex;
  flex-direction: column;
  gap: 0px;
  font-family: Satoshi;
  font-size: 15px;
  font-weight: 500;
  line-height: 31.5px;
  letter-spacing: -0.02em;
  text-align: left;
  counter-reset: fail-reasons-counter;
}
.request-is-in-complete-popup .title {
  font-weight: 700;
  line-height: 21px;
}
.request-is-in-complete-popup .fail-reasons span {
  position: relative;
  counter-increment: fail-reasons-counter;
  padding-left: 16px;
}
.request-is-in-complete-popup .fail-reasons span::before {
  content: counter(fail-reasons-counter) ". ";
  position: absolute;
  left: 0;
}

.request-is-in-complete-popup .check-notice {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px solid #ebebeb;
  padding-top: 12px;
}
.request-is-in-complete-popup .check-notice input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.request-is-in-complete-popup .check-notice a {
  font-weight: 500;
  color: var(--blue-color);
}
.request-is-in-complete-popup .make-request-btn,
.evaluation-popup .submit-btn {
  width: 100%;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
  border: none;
  padding: 16px 24px;
}
.evaluation-popup .popup-header .header-content .desc {
  text-align: center !important;
}
.evaluation-popup .evaluation-body {
  gap: 24px;
  padding: 12px;
}

.evaluation-popup .evaluation-body,
.evaluation-popup .evaluation-body .description textarea {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.evaluation-popup .evaluation-body .tab-to-rate {
  gap: 8px;
}
.evaluation-popup .evaluation-body .tab-to-rate .title,
.evaluation-popup .evaluation-body .description label {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.01em;
}
.evaluation-popup .tab-to-rate .stars {
  gap: 8px;
}
.evaluation-popup .tab-to-rate .stars i {
  color: #d3d9e5;
}
.evaluation-popup .tab-to-rate .stars i.gold {
  color: #ffc736;
}
.evaluation-popup .evaluation-body .description {
  gap: 12px;
}
.evaluation-popup .evaluation-body .description label span {
  color: var(--paragraf-color);
}
.evaluation-popup .evaluation-body .description textarea {
  padding: 12px 16px;
  border: 1px solid var(--main-color) 33;
  background-color: #fbfbfb;
  width: 100%;
  height: 124px;
  resize: none;
}
.evaluation-popup .evaluation-body .description textarea:focus {
  outline: none;
}
.evaluation-popup .evaluation-body .description textarea::placeholder {
  color: #00000066;
  font-size: 14px;
}
@media (max-width: 992px) {
  .evaluation-popup .evaluation-body {
    gap: 16px;
  }
}
.result-popup {
  padding: 16px 20px 16px 20px;
  gap: 12px;
  border: 1px solid #e8e8e8;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  box-shadow: 0px 4px 4px 0px #0000001a;
}
.result-popup.show {
  width: 35%;
  top: 200px;
}
.result-popup > div {
  gap: 12px;
}
.evaluation-result-popup > div i,
.add-new-ticket-result .popup-icon {
  font-size: 24px;
}
.add-new-ticket-result .popup-icon {
  margin-bottom: 16px;
}
.result-popup div .content {
  gap: 2px;
}
.result-popup div .content .title {
  font-family: Satoshi;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
}
.result-popup div .content .desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--paragraf-color);
}
.evaluation-result-popup .success .success-icon {
  color: #39b54a;
}
.evaluation-result-popup .fail .fail-icon {
  color: #ed1e37;
}
.evaluation-result-popup .fail {
  display: none;
}
@media (max-width: 992px) {
  .result-popup.show {
    width: 50%;
    top: 180px;
  }
  .evaluation-result-popup > div i,
  .add-new-ticket-result .popup-icon {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  result-popup.show {
    width: 75%;
    top: 180px;
  }
}
@media (max-width: 576px) {
  result-popup.show {
    width: 94%;
    top: 180px;
  }
}
.section-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 700px) {
  .section-nav {
    flex-direction: column;
    gap: 12px;
  }
  .section-nav .search-input,
  .section-nav .search-input input[type="search"] {
    width: 100%;
  }
  .select-and-add {
    width: 100%;
    justify-content: space-between;
  }
}
.section-nav .search-input input[type="search"] {
  border: 1px solid #d7d7d7;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.section-nav .search-input input[type="search"] {
  padding: 10px 12px 10px 48px;
}
.section-nav .search-input input[type="search"]::placeholder {
  color: #979797;
  font-size: 14px;
  font-weight: 400;
}
.section-nav .search-input input[type="search"]:focus,
.section-nav .selectors select:focus {
  outline: none;
}
.section-nav .search-input,
.section-nav .selectors > div {
  position: relative;
}
.section-nav .search-input::before {
  content: "\f002";
  font-family: "font awesome 6 free";
  font-weight: 900;
  position: absolute;
  font-size: 14px;
  left: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
  color: #979797;
}
.section-nav .selectors .status-selector::before,
.section-nav .selectors .recent-orders-selector::before {
  content: "\f078";
  font-family: "font awesome 6 free";
  font-weight: 900;
  position: absolute;
  font-size: 12px;
  right: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
}
.section-nav .selectors .status-selector select {
  padding: 14px 48px 14px 16px;
}
.section-nav .selectors .recent-orders-selector select {
  padding: 14px 56px 14px 16px;
}
.section-nav .selectors {
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-nav .selectors > div select {
  appearance: none;
  font-size: 14px;
}
.section-nav .selectors .status-selector select {
  font-weight: 500;
}
.section-nav .selectors .status-selector option {
  position: relative;
}
.section-nav .selectors .status-selector option::before {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #3f78e0;
  position: relative;
  margin-right: 8px;
}
.section-nav .selectors .recent-orders-selector select {
  color: #00000080;
}

.section-nav .selectors .recent-orders-selector option {
  color: #000;
}
.section-nav .select-and-add {
  gap: 10px;
}
.section-nav .blue-button {
  background-color: var(--blue-color);
  color: var(--white-color);
  padding: 12px 12px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
/* End requests popups styling */
/* Start Balnaces Section */
.my-balances-section {
  gap: 24px;
}
.my-balances-section .my-balances-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my-balances-section .my-balances-nav .recharger-btn {
  padding: 14px 24px 14px 24px;
  gap: 10px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  background-color: var(--blue-color);
  color: var(--white-color);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  border: none;
  justify-content: center;
}
.my-balances-nav .balances-filtering,
.my-balances-nav .balances-filtering .selectors {
  gap: 12px;
}
.my-balances-section .my-balances-nav .input-search-balance {
  position: relative;
  height: fit-content;
}
.my-balances-section .my-balances-nav .input-search-balance::before {
  content: "\f002";
  font-family: "font awesome 6 free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 14px;
  color: var(--paragraf-color);
}
.my-balances-section
  .my-balances-nav
  .input-search-balance
  input[type="search"] {
  padding: 14px 16px 14px 46px;
  border: 1px solid #d7d7d7;
  background-color: var(--white-color);
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
@media (max-width: 992px) {
  .my-balances-section .my-balances-nav .recharger-btn,
  .my-balances-section
    .my-balances-nav
    .input-search-balance
    input[type="search"],
  .my-balances-section .my-balances-nav .my-select {
    padding: 10px 12px;
  }
  .my-balances-section .my-balances-nav .input-search-balance::before {
    left: 12px;
  }
  .my-balances-section
    .my-balances-nav
    .input-search-balance
    input[type="search"] {
    padding-left: 38px;
  }
  .my-balances-section .my-balances-nav .recharger-btn,
  .my-balances-section .my-balances-nav .input-search-balance,
  .my-balances-section
    .my-balances-nav
    .input-search-balance
    input[type="search"]::placeholder {
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .my-balances-section .my-balances-nav {
    flex-direction: column-reverse;
    justify-content: unset;
    gap: 12px;
  }
  .my-balances-section .my-balances-nav .recharger-btn {
    width: 100%;
  }
  .my-balances-nav .balances-filtering {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }
  .my-balances-section .my-balances-nav .input-search-balance,
  .my-balances-section
    .my-balances-nav
    .input-search-balance
    input[type="search"] {
    width: 100%;
  }
  .my-balances-nav .balances-filtering .selectors {
    justify-content: space-between;
    width: 100%;
  }
}
.my-balances-section .my-balances-nav .my-select i {
  margin-right: 8px;
  color: var(--paragraf-color);
}
.my-balances-section .balances {
  gap: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
}
.my-balances-section .balance {
  padding: 12px;
  border: 1px solid #ededed;
  background-color: var(--white-color);
}
.my-balances-section .balance,
.my-balances-section .balance .details-btn,
.my-balances-section .balance .download-invoice-btn {
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.my-balances-section .balance .balance-header {
  color: var(--paragraf-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  gap: 12px;
}
.my-balances-section .balance .balance-header span {
  color: #000;
  font-weight: 600;
}
.my-balances-section .balance .balance-header i {
  color: var(--blue-color);
  margin-right: 8px;
}
.my-balances-section .balance .balance-header .shipping {
  padding: 7px 12px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background-color: #eefaea;
  font-size: 12px;
  font-weight: 500;
  line-height: 18;
  color: #12aa2a;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-balances-section .balance .balance-footer .details-btn {
  color: var(--white-color);
  background-color: #f7931a;
  padding: 8px 12px;
  border: none;
}
.my-balances-section .balance .balance-footer .download-invoice-btn {
  padding: 8px;
}
.my-balances-section .balance .balance-footer .download-invoice-btn i {
  margin-right: 8px;
}
.my-balances-section .my-pagination-two {
  margin: 0;
}
@media (max-width: 1200px) {
  .my-balances-section .balances {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}
@media (max-width: 1200px) and (min-width: 768px) {
  .my-balances-section .balance .balance-header {
    font-size: 12px;
    gap: 4px;
  }
  .my-balances-section .balance .details-btn,
  .my-balances-section .balance .download-invoice-btn {
    font-size: 12px;
  }
  .my-balances-section .balance .balance-footer .details-btn {
    padding: 6px 12px;
  }
  .my-balances-section .balance .balance-footer .download-invoice-btn {
    padding: 6px 10px;
  }
}
@media (max-width: 576px) {
  .my-balances-section .balance .balance-header {
    font-size: 12px;
    gap: 4px;
  }
  .my-balances-section .balance .details-btn,
  .my-balances-section .balance .download-invoice-btn {
    font-size: 12px;
  }
  .my-balances-section .balance .balance-footer .details-btn {
    padding: 6px 12px;
  }
  .my-balances-section .balance .balance-footer .download-invoice-btn {
    padding: 6px 10px;
  }
}
/* Start Balnaces Popups */
.search-result-popup input {
  width: 100%;
  border: 1px solid #d7d7d7;
  padding: 14px 16px 14px 40px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.search-result-popup .search-input::before {
  content: "\f002";
  font-family: "font awesome 6 free";
  font-weight: 900;
  font-size: 14px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 16px;
  color: var(--paragraf-color);
}
.search-result-popup .balances {
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.search-result-popup.show {
  width: 65%;
  top: 260px;
}
.control-balance-popup.show,
.payment-details-popup.show,
.invoice-details-popup.show {
  width: 50%;
  top: 260px;
}
.control-balance-popup .nominal {
  gap: 16px;
  border: 1px solid #e8e8e8;
  padding: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}
.control-balance-popup img.popup-image {
  margin-bottom: 16px;
}
.control-balance-popup .nominal .header {
  font-family: Satoshi;
  font-size: 12px;
  line-height: 18px;
  flex-direction: row !important;
  justify-content: space-between !important;
}
.control-balance-popup .nominal .header .title {
  font-weight: 700;
}
.control-balance-popup .nominal .header .price {
  font-weight: 500;
  color: var(--paragraf-color);
}
.control-balance-popup .nominal .nominal-input {
  width: 100%;
  position: relative;
}
.control-balance-popup .nominal .nominal-input input {
  padding: 16px;
  width: 100%;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  -webkit-transition: var(--main-transition-duration);
  -moz-transition: var(--main-transition-duration);
  -ms-transition: var(--main-transition-duration);
  -o-transition: var(--main-transition-duration);
  transition: var(--main-transition-duration);
}
.control-balance-popup .nominal .nominal-input input::placeholder {
  font-size: 12px;
  font-weight: 400;
  color: #888787;
}
.control-balance-popup .nominal .nominal-input input:focus {
  border-color: var(--blue-color);
  box-shadow: 0px 0px 0px 2px #ebf0f9;
}
.control-balance-popup .nominal .my-drop {
  border: 0;
  padding: 0;
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: fit-content;
}
.control-balance-popup .nominal .my-drop:hover ul {
  display: none;
}
.control-balance-popup .nominal .my-drop.active ul {
  display: block;
}
.control-balance-popup .nominal .my-drop img {
  width: 18px;
  height: 18px;
}
.control-balance-popup .nominal .my-drop svg {
  position: unset;
  margin-left: 8px;
}
.control-balance-popup .nominal .prices {
  gap: 10px;
}
.control-balance-popup .nominal .prices .price {
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  width: calc(100% / 5);
  color: #888787;
}
.control-balance-popup .nominal .prices .price.active {
  background-color: var(--main-color);
  color: var(--white-color);
}
.control-balance-popup .nominal .add-saldo-btn {
  padding: 15px 24px;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
}
.payment-details-popup .payment-details-body,
.invoice-details-popup .invoice-details-body {
  gap: 24px;
}
.payment-details-popup .balance-details,
.invoice-details-popup .balance-details {
  gap: 8px;
  padding: 12px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  background: linear-gradient(90deg, #232526 0%, #414345 100%);
}
.payment-details-popup .balance-details .total-balance,
.invoice-details-popup .balance-details .total-balance {
  font-family: Satoshi;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: -0.02em;
  color: var(--white-color);
}
.payment-details-popup .balance-details .total-balance i,
.invoice-details-popup .balance-details .total-balance i {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white-color);
  color: #232526;
  font-size: 14px;
  margin-right: 8px;
}
.payment-details-popup .balance-details .balance-before-filling,
.invoice-details-popup .balance-details .balance-before-filling {
  color: #a3a3a3;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
}
.payment-details-popup .balance-details .hr,
.invoice-details-popup .balance-details .hr {
  border: 1px solid #ffffff29;
}
.payment-details-popup .payment-details-body .payment-details,
.invoice-details-popup .invoice-details-body .invoice-details {
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
}
.payment-details-popup .payment-details-body .payment-details .hr {
  border: 1px solid #e2e2e2;
}
.payment-details-popup .payment-details-body .payment-details .name,
.invoice-details-popup .invoice-details-body .invoice-details .name {
  color: var(--paragraf-color);
}
.payment-details-popup .payment-details-body .payment-details .value,
.invoice-details-popup .invoice-details-body .invoice-details .value {
  font-weight: 500;
  line-height: 19.6px;
  color: #212121;
}
.payment-details-popup
  .payment-details-body
  .payment-details
  .value
  .payment-method-icon {
  background-color: #f8faff;
  border: 1px solid #f2f4f7;
  width: 34.5px;
  height: 24px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  margin-right: 6px;
}
@media (max-width: 992px) {
  .search-result-popup.show {
    width: 80%;
    top: 280px;
  }
  .control-balance-popup.show,
  .payment-details-popup.show,
  .invoice-details-popup.show {
    width: 60%;
    top: 260px;
  }
  .control-balance-popup img.popup-image {
    width: 95px;
    height: 94px;
  }
  .control-balance-popup .nominal .nominal-input input {
    font-size: 13px;
    padding: 12px;
  }
  .control-balance-popup .nominal .prices .price {
    font-size: 12px;
    line-height: 18px;
  }
}
@media (max-width: 768px) {
  .search-result-popup.show,
  .payment-details-popup.show,
  .invoice-details-popup.show {
    width: 94%;
    top: 260px;
  }
  .control-balance-popup.show {
    width: 80%;
    top: 280px;
  }
  .control-balance-popup img.popup-image {
    width: 80px;
    height: 80px;
  }
  .control-balance-popup .nominal .prices .price {
    width: calc(100% / 4);
  }
  .control-balance-popup button.hidden:last-child {
    display: none;
  }
}
@media (max-width: 576px) {
  .control-balance-popup.show,
  .payment-details-popup.show {
    width: 94%;
    top: 280px;
  }
  .control-balance-popup .nominal .nominal-input input {
    padding: 16px 12px;
  }
  .control-balance-popup .nominal .my-drop {
    right: 12px;
  }
  .control-balance-popup .nominal .my-drop svg {
    margin: 0;
  }
  .control-balance-popup .nominal .prices .price {
    padding: 8px 12px;
  }
}
/* End Balnaces Popups */
/* End Balnaces Section */
/* Start Account Setting Section */
.account-setting-section {
  gap: 24px;
}
.account-setting-section .account-setting-header.manage-account-header {
  margin-bottom: 8px;
}
.account-setting-section .account-setting-header {
  gap: 5px;
}
.account-setting-section .account-setting-header .title {
  font-family: Satoshi;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
  text-align: left;
}
.account-setting-section .account-setting-header .desc {
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  letter-spacing: -0.01em;
  color: #00000099;
}
.account-setting-section .personal-info {
  gap: 16px;
}
.account-setting-section .personal-info-header,
.account-setting-section .the-infos,
.account-setting-section .address-box {
  background-color: var(--white-color);
  padding: 12px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  border: 1px solid #e8e8e8;
}
.account-setting-section .personal-info-header .title {
  gap: 10px;
  color: #000000;
  font-family: Inter;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.02em;
}
.account-setting-section .personal-info-header .title i {
  font-size: 24px;
}
.account-setting-section .edit-btn {
  gap: 10px;
  padding: 14px 24px;
  background-color: var(--blue-color);
  color: var(--white-color);
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  justify-content: center;
  border: none;
}
.account-setting-section .the-infos {
  align-items: center;
  justify-content: space-between;
}
.account-setting-section .the-infos .infos {
  width: 65%;
}
.account-setting-section .the-infos .infos .infos-names,
.account-setting-section .the-infos .infos .infos-values {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: -0.01em;
  align-items: flex-start;
  gap: 16px;
}
.account-setting-section .the-infos .infos .infos-names .name {
  color: var(--paragraf-color);
}
.account-setting-section .the-infos .infos .infos-values .value {
  color: #000;
  font-weight: 500;
}
.account-setting-section .the-infos .infos .infos-values .value i {
  margin-left: 11px;
  cursor: pointer;
}
.account-setting-section .the-infos .personal-photo {
  flex: 1;
  text-align: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.account-setting-section .the-infos .personal-photo .photo-container {
  border: 1px solid #0000001a;
  padding: 16px;
  height: 100%;
  gap: 16px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
  width: fit-content;
}
.account-setting-section .the-infos .personal-photo .photo-container img {
  width: 66px;
  height: 66px;
}
.account-setting-section .the-infos .personal-photo .photo-container span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: -0.01em;
  color: var(--paragraf-color);
}
.account-setting-section .manage-address {
  gap: 24px;
}
.account-setting-section .manage-address .manage-address-header {
  margin: 0;
}
.account-setting-section .manage-address .address-box {
  align-items: center;
  justify-content: space-between;
}
.account-setting-section .manage-address .address-box .edit-share {
  gap: 8px;
  flex: 1;
}
.account-setting-section .manage-address .address-box .share-btn {
  background-color: #ed0006;
  height: 48px;
  width: 48px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  color: var(--white-color);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.account-setting-section .manage-address .address-box .current-address {
  gap: 10px;
}
.account-setting-section .manage-address .address-box .current-address .title {
  gap: 4px;
  font-family: Sora;
  font-size: 13.23px;
  font-weight: 800;
  line-height: 10.58px;
  text-transform: uppercase;
  color: #1e293b;
}
.account-setting-section
  .manage-address
  .address-box
  .current-address
  .the-address {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--paragraf-color);
}
@media (max-width: 992px) {
  .account-setting-section {
    gap: 16px;
  }
  .account-setting-section .account-setting-header .title {
    font-size: 16px;
    line-height: 24px;
  }
  .account-setting-section .account-setting-header .desc {
    font-size: 14px;
    line-height: 22.4px;
  }
  .account-setting-section .personal-info {
    gap: 12px;
  }
  .account-setting-section .personal-info-header .title {
    font-size: 14px;
    line-height: 24px;
  }
  .account-setting-section .personal-info-header .title i {
    font-size: 22px;
  }
  .account-setting-section .edit-btn {
    padding: 12px 16px;
    font-size: 12px;
    line-height: 18px;
  }
  .account-setting-section .the-infos .personal-photo .photo-container img {
    width: 48px;
    height: 48px;
  }
  .account-setting-section .manage-address {
    gap: 16px;
  }
  .account-setting-section .manage-address .address-box .share-btn {
    width: 40px;
    height: 40px;
  }
  .account-setting-section .manage-address .address-box .current-address {
    gap: 4px;
  }
  .account-setting-section .manage-address .address-box .edit-btn {
    padding: 11px 16px;
  }
  .account-setting-section
    .manage-address
    .address-box
    .current-address
    .title {
    font-size: 11.91px;
    line-height: 9.53px;
  }
  .account-setting-section
    .manage-address
    .address-box
    .current-address
    .title
    svg {
    width: 18px;
    height: 18px;
  }
  .account-setting-section
    .manage-address
    .address-box
    .current-address
    .the-address {
    font-size: 14px;
    line-height: 21px;
  }
}
@media (max-width: 768px) {
  .account-setting-section .personal-info {
    gap: 12px;
  }
  .account-setting-section .personal-info-header .title {
    gap: 8px;
    font-size: 12px;
    line-height: 18px;
  }
  .account-setting-section .personal-info-header .title i {
    font-size: 20px;
  }
  .account-setting-section .edit-btn {
    padding: 8px 12px;
  }
  .account-setting-section .the-infos {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: unset;
    gap: 16px;
  }
  .account-setting-section .the-infos .infos {
    width: 100%;
  }
  .account-setting-section .the-infos .infos .infos-names,
  .account-setting-section .the-infos .infos .infos-values {
    font-size: 12px;
    line-height: 19.2px;
    align-items: flex-start;
    gap: 8px;
  }
  .account-setting-section .the-infos .infos .infos-values {
    align-items: flex-end;
  }
  .account-setting-section .the-infos .personal-photo {
    width: 100%;
  }
  .account-setting-section .the-infos .personal-photo .photo-container {
    padding: 16px 12px;
    width: 100%;
    align-items: center;
  }
  .account-setting-section .the-infos .personal-photo .photo-container img {
    width: 56px;
    height: 56px;
  }
  .account-setting-section .manage-address .address-box {
    flex-direction: column-reverse;
    gap: 16px;
  }
  .account-setting-section .manage-address .address-box .edit-share {
    width: 100%;
  }
  .account-setting-section .manage-address .address-box .edit-btn {
    padding: 11px 16px;
    flex: 1;
  }
  .account-setting-section .manage-address .address-box .current-address {
    align-items: flex-end;
    width: 100%;
  }
}
/* Satrt account setting section popups */
.edit-profile-popup.show,
.change-number-popup.show {
  width: 34%;
  top: 250px;
}
.verification-code-popup.show {
  width: 30%;
  top: 215px;
}
.edit-profile-popup form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.edit-profile-popup form label,
.change-number-popup .label {
  margin-bottom: 12px;
}
.edit-profile-popup form input,
.change-number-popup input,
.change-number-popup .my-select {
  padding: 12px 16px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background-color: #fafafa;
  border: 1px solid var(--main-color) 33;
  font-size: 14px;
}
.edit-profile-popup form input::placeholder,
.change-number-popup input::placeholder {
  color: #00000066;
  font: 14px;
  font-weight: 400;
  line-height: 21px;
}
.submit-button {
  margin-top: 8px;
  font-size: 14px;
  font-size: 500;
  background-color: var(--blue-color);
  color: var(--white-color);
  border: none;
  width: 100%;
  padding: 15px 24px;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
}
.change-number-popup .form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.change-number-popup .form input {
  width: 80%;
}
.change-number-popup .form .my-select ul li {
  padding: 12px 16px;
}
.change-number-popup .hr {
  border: 1px solid #0000001a;
}
.verification-code-popup .change-number-btn {
  background-color: var(--main-color);
  color: var(--white-color);
  padding: 10px 16px;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  gap: 16px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  border: none;
  width: fit-content;
  margin-top: 8px;
}
@media (max-width: 1200px) {
  .edit-profile-popup.show,
  .change-number-popup.show {
    width: 50%;
    top: 280px;
  }
  .verification-code-popup.show {
    width: 40%;
    top: 240px;
  }
}
@media (max-width: 992px) {
  .edit-profile-popup.show,
  .change-number-popup.show {
    width: 58%;
    top: 280px;
  }
  .verification-code-popup.show {
    width: 45%;
    top: 240px;
  }
}
@media (max-width: 768px) {
  .edit-profile-popup.show,
  .change-number-popup.show {
    width: 66%;
    top: 320px;
  }
  .verification-code-popup.show {
    width: 55%;
    top: 250px;
  }
}
@media (max-width: 576px) {
  .edit-profile-popup.show,
  .change-number-popup.show {
    width: 94%;
    top: 320px;
  }
  .verification-code-popup.show {
    width: 74%;
    top: 260px;
  }
  .edit-profile-popup form label,
  .change-number-popup .label {
    margin-bottom: 8px;
  }
  .submit-button,
  .edit-profile-popup form label,
  .edit-profile-popup form input::placeholder,
  .edit-profile-popup form input,
  .change-number-popup .label,
  .change-number-popup input,
  .change-number-popup input::placeholder,
  .change-number-popup .my-select {
    font-size: 12px;
    line-height: 18px;
  }
  .change-number-popup .form input,
  .change-number-popup .form .my-select ul li {
    padding: 12px;
  }
}
@media (max-width: 450px) {
  .verification-code-popup.show {
    width: 94%;
    top: 270px;
  }
}
/* End account setting section popups */
/* End Account Setting Section */
/* Start Membership Section */
.membership-section .nav-tabs,
.membership-section .nav-tabs .nav-link {
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.membership-section .tab-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.membership-section .nav-tabs {
  width: fit-content;
  background-color: #e2e2e2;
  margin-bottom: 0 !important;
}
.membership-section .nav-tabs .nav-link {
  color: #21212199;
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px;
  width: 200px;
  height: 72px;
  position: relative;
  padding: 4px !important;
}
.membership-section .nav-tabs .nav-link.active {
  color: var(--blue-color);
  font-weight: 600;
}
.membership-section .nav-tabs .nav-link.active::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  bottom: -2px;
  background-color: var(--white-color);
}
.membership-section .tab-content {
  margin-top: 0 !important;
  background-color: var(--white-color) !important;
  -webkit-border-radius: 0 8px 8px 8px;
  -moz-border-radius: 0 8px 8px 8px;
  -ms-border-radius: 0 8px 8px 8px;
  -o-border-radius: 0 8px 8px 8px;
  border-radius: 0 8px 8px 8px;
}
.membership-section .nav-tabs .nav-link .fa-terminal {
  width: 18px;
  height: 18px;
  background-color: #757575;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  color: var(--white-color);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.membership-section .nav-tabs .nav-link.active .fa-terminal {
  background-color: var(--blue-color);
}
.membership-section .nav-tabs .nav-link.active svg path {
  fill: var(--blue-color);
  fill-opacity: 1;
}
.membership-section .membership-tab-header {
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.membership-section .membership-tab-header p {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  padding: 0;
  margin: 0;
  width: 57%;
}
.membership-section .membership-tab-header .money-container {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.membership-section .membership-tab-header .money-box {
  background-color: var(--main-color);
  height: 100%;
  justify-content: space-between;
  padding: 12px;
  color: var(--white-color);
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.membership-section .membership-tab-header .money-box .the-title {
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  align-items: center;
}
.membership-section .membership-tab-header .money-box .the-title i {
  color: #ff8b36;
}
.membership-section .membership-tab-header .money-box .money-process {
  flex-direction: column;
  justify-content: space-between;
}
.membership-section .membership-tab-header .money-box .money {
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}
.membership-section .membership-tab-header .money-box .process {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #a9afbb;
}
.membership-section .points-container,
.membership-section .discount-container {
  gap: 24px;
  border: 1px solid #d6d6d663;
  padding: 16px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.membership-section .points-container .point .name,
.membership-section .points-container .point .value,
.membership-section .discount-container .discount-balance .the-discount,
.membership-section .discount-container .discount-balance .the-spen-balance {
  white-space: nowrap;
  color: var(--main-color);
}
.membership-section .points-container .point .name {
  width: 5%;
}
.membership-section .points-container .point .name,
.membership-section .points-container .point .value,
.membership-section .dashed,
.membership-section .discount-container .discount-balance .the-discount,
.membership-section .discount-container .discount-balance .the-spen-balance {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
}
.membership-section .points-container .point .value,
.membership-section .discount-container .discount-balance .the-spen-balance {
  font-weight: 600;
  width: 10%;
  text-align: end;
}
.membership-section .discount-container .discount-balance .the-discount {
  width: 12%;
}
.membership-section .discount-container .discount-balance .the-spen-balance {
  width: 12%;
}
.membership-section .dashed {
  color: var(--paragraf-color) 66;
}
.membership-section .tab-container .notice {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
}
.membership-section .tab-container .convert-points-btn,
.membership-section .tab-container .get-discount-btn {
  gap: 8px;
  color: var(--white-color);
  background-color: #ff8b36;
  padding: 15px 26px;
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
  border: none;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  width: fit-content;
}
.membership-section .discount-container .discount-balance .expectional-discount,
.membership-section .discount-container .discount-balance .major-customers {
  font-weight: 600;
  color: #1a822b;
}
.membership-section .redeem-container {
  gap: 24px;
}
.membership-section .redeem-container .label {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #000000cc;
  margin-bottom: 16px;
}
.membership-section .redeem-container .code-input svg {
  position: absolute;
  left: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.captcha-input input,
.membership-section .redeem-container .code-input input {
  border: 1px solid var(--main-color) 33;
  background-color: #fafafa;
}
.membership-section .redeem-container .code-input input {
  width: 100%;
  padding: 18px 12px 18px 36px;
}
.membership-section .redeem-container .code-input input::placeholder,
.captcha-input input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--paragraf-color);
}
.captcha-input input::placeholder {
  color: #00000040;
}
.captcha-label {
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.01em;
  text-align: left;
  margin-bottom: 12px;
}
.the-captcha-and-input {
  gap: 12px;
}
.the-captcha {
  width: 108px;
  background-color: var(--main-color);
  color: var(--white-color);
  text-align: center;
  font-size: 14px;
}
.captcha-input input {
  width: 160px;
  background-color: #fafafa;
  border: 1px solid var(--main-color) 33;
}
.captcha-input input,
.the-captcha {
  padding: 16px;
}
.membership-section .redeem-container .code-input input,
.membership-section .redeem-container .redeem-btn,
.captcha-input input,
.the-captcha {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.membership-section .redeem-container .redeem-btn {
  border: none;
  background-color: var(--main-color);
  color: var(--white-color);
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  margin-top: 12px;
  margin-bottom: 250px;
}
@media (max-width: 1300px) {
  .membership-section .dashed .eight {
    display: none;
  }
  .membership-section .points-container .point .name {
    width: 7%;
  }
  .membership-section .discount-container .discount-balance .the-discount {
    width: 14%;
  }
  .membership-section .points-container .point .value {
    width: 12%;
  }
  .membership-section .discount-container .discount-balance .the-spen-balance {
    width: 13%;
  }
}
@media (max-width: 1240px) {
  .membership-section .dashed .seven {
    display: none;
  }
}
@media (max-width: 1120px) {
  .membership-section .dashed .six {
    display: none;
  }
  .membership-section .points-container .point .name {
    width: 10%;
  }
  .membership-section .discount-container .discount-balance .the-discount {
    width: 15%;
  }
  .membership-section .points-container .point .value,
  .membership-section .discount-container .discount-balance .the-spen-balance {
    width: 15%;
  }
}
@media (max-width: 1000px) {
  .membership-section .dashed .five {
    display: none;
  }
  .membership-section .points-container .point .name {
    width: 12%;
  }
  .membership-section .discount-container .discount-balance .the-discount {
    width: 21%;
  }
  .membership-section .points-container .point .value {
    width: 20%;
  }
  .membership-section .discount-container .discount-balance .the-spen-balance {
    width: 15%;
  }
}
@media (max-width: 992px) {
  .membership-section .nav-tabs .nav-link {
    font-size: 12px;
    line-height: 18px;
    width: 140px;
    height: 45px;
  }
  .membership-section .nav-tabs .nav-link .fa-gift {
    font-size: 14px;
  }
  .membership-section .nav-tabs .nav-link .fa-terminal {
    width: 16px;
    height: 16px;
    font-size: 8px;
  }
  .membership-section .nav-tabs .nav-link svg {
    width: 17px;
    height: 16px;
  }
  .membership-section .points-container {
    gap: 16px;
  }
  .membership-section .membership-tab-header p {
    width: 70%;
    font-size: 12px;
    line-height: 19.2px;
  }
  .membership-section .membership-tab-header .money-box .the-title span {
    font-size: 12px;
    line-height: 18px;
  }
  .membership-section .discount-container .discount-balance .the-discount,
  .membership-section .discount-container .discount-balance .the-spen-balance {
    font-size: 12px;
    line-height: 19.2px;
  }
  .membership-section .tab-container .convert-points-btn,
  .membership-section .tab-container .get-discount-btn {
    padding: 10px 22px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
  }
}
@media (max-width: 875px) {
  .membership-section .dashed .four {
    display: none;
  }
  .membership-section .discount-container .discount-balance .the-spen-balance {
    width: 20%;
  }
}
@media (max-width: 768px) {
  .membership-section .nav-tabs {
    width: 100%;
  }
  .membership-section .nav-tabs .nav-link {
    font-size: 12px;
    line-height: 18px;
    width: 32.5%;
    height: 45px;
    gap: 4px;
  }
  .membership-section .nav-tabs .nav-link:last-child {
    width: 35%;
  }
  .membership-section .nav-tabs .nav-link .fa-gift {
    font-size: 14px;
  }
  .membership-section .tab-content {
    -webkit-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -ms-border-radius: 0 0 8px 8px;
    -o-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
  }
  .membership-section .membership-tab-header {
    flex-direction: column-reverse;
    gap: 16px;
    justify-content: unset;
  }
  .membership-section .membership-tab-header p {
    width: 100%;
  }
  .membership-section .membership-tab-header .money-container,
  .membership-section .membership-tab-header .money-box {
    width: 100%;
  }
  .membership-section .membership-tab-header .money-box {
    gap: 16px;
  }
  .membership-section .membership-tab-header .money-box .money-process {
    flex-direction: row;
    align-items: flex-end;
  }
  .membership-section .membership-tab-header .money-box .money {
    font-size: 40px;
  }
  .membership-section .points-container,
  .membership-section .discount-container {
    gap: 8px;
    padding: 12px;
  }
  .membership-section .points-container .point .name,
  .membership-section .points-container .point .value {
    font-size: 12px;
    line-height: 19.2px;
  }
  .membership-section .tab-container .notice {
    font-size: 12px;
    line-height: 19.2px;
  }
}
@media (max-width: 710px) {
  .membership-section .dashed .three {
    display: none;
  }
  .membership-section .points-container .point .name {
    width: 15%;
  }
  .membership-section .discount-container .discount-balance .the-discount {
    width: 27%;
  }
  .membership-section .points-container .point .value,
  .membership-section .discount-container .discount-balance .the-spen-balance {
    width: 25%;
  }
}
@media (max-width: 600px) {
  .membership-section .dashed .two {
    display: none;
  }
  .membership-section .points-container .point .value,
  .membership-section .discount-container .discount-balance .the-spen-balance {
    width: 30%;
  }
  .membership-section .discount-container .discount-balance .the-discount {
    width: 33%;
  }
  .captcha-input {
    flex: 1;
  }
  .captcha-input input {
    width: 100%;
  }
  .captcha-input input,
  .the-captcha {
    padding: 12px;
    font-size: 12px;
  }
  .membership-section .redeem-container .code-input input::placeholder,
  .captcha-input input::placeholder {
    font-size: 12px;
  }
  .membership-section .redeem-container .label {
    font-size: 14px;
    line-height: 18px;
  }
  .captcha-label {
    font-size: 12px;
    line-height: 18px;
  }
  .membership-section .redeem-container .redeem-btn {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 18px;
  }
}
@media (max-width: 500px) {
  .membership-section .dashed .one {
    display: none;
  }
  .membership-section .points-container .point .name {
    width: 24%;
  }
  .membership-section .discount-container .discount-balance .the-discount {
    width: 37%;
  }
  .membership-section .points-container .point .value {
    width: 44%;
  }
  .membership-section .discount-container .discount-balance .the-spen-balance {
    width: 35%;
  }
}
@media (max-width: 420px) {
  .membership-section .dashed .mini {
    display: none;
  }
  .membership-section .discount-container .discount-balance .the-discount {
    width: 42%;
  }
  .membership-section .discount-container .discount-balance .the-spen-balance {
    width: 43%;
  }
}
/* Redeem popup */
.redeem-result-popup {
  overflow: hidden;
}
.redeem-result-popup.show {
  top: 300px;
  width: 30%;
}
.redeem-result-popup svg {
  position: absolute;
  top: 0;
  left: 0;
}
.redeem-result-popup .bottom-header {
  align-items: center;
}
.redeem-result-popup .bottom-header .redeem-number {
  font-family: Satoshi;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 72px !important;
  letter-spacing: -0.02em !important;
}
.redeem-result-popup .bottom-header .submit-btn {
  margin-top: 12px;
}
@media (max-width: 992px) {
  .redeem-result-popup.show {
    top: 280px;
    width: 45%;
  }
  .redeem-result-popup .bottom-header .submit-btn {
    margin-top: 8px;
  }
}
@media (max-width: 768px) {
  .redeem-result-popup.show {
    top: 280px;
    width: 55%;
  }
}
@media (max-width: 576px) {
  .redeem-result-popup.show {
    top: 280px;
    width: 83%;
  }
  .redeem-result-popup .bottom-header .redeem-number {
    font-size: 32px !important;
    line-height: 48px !important;
  }
}
/* Redeem popup */
/* End Membership Section */
/* Start support tickets section */
.support-tickets-section {
  gap: 24px;
}
.support-tickets-section .green-new-ticket {
  padding: 16px 24px;
  border: 1px solid #34a353;
  background-color: #d1fae5;
  color: #34a353;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.data-not-available {
  gap: 24px;
  margin: 150px 0;
  display: none;
}
.data-not-available span {
  font-family: Satoshi;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.02em;
  text-align: center;
}
@media (max-width: 992px) {
  .support-tickets-section .green-new-ticket {
    padding: 10px 24px;
    font-size: 12px;
  }
  .data-not-available span {
    font-size: 14px;
    line-height: 21px;
  }
  .data-not-available {
    gap: 24px;
    margin: 120px 0;
  }
}
@media (max-width: 768px) {
  .support-tickets-section .green-new-ticket {
    padding: 11px 24px;
  }
  .data-not-available {
    gap: 24px;
    margin: 90px 0;
  }
  .data-not-available {
    gap: 16px;
  }
}
/* Start support tickets popups */
.search-table-popup.show {
  width: 55%;
  top: 240px;
}
.add-new-ticket-popup.show {
  top: 190px;
  width: 40%;
}
.add-new-ticket-popup form {
  gap: 16px;
}
.add-new-ticket-popup form input,
.add-new-ticket-popup form textarea,
.add-new-ticket-popup form select {
  background-color: #fafafa;
  border: 1px solid var(--main-color) 33;
  padding: 12px 16px;
}
.add-new-ticket-popup form input::placeholder,
.add-new-ticket-popup form textarea::placeholder,
.add-new-ticket-popup form select {
  color: #00000066;
  font-size: 14px;
  line-height: 21px;
}
.add-new-ticket-popup form label {
  margin-bottom: 12px;
  color: #000000cc;
}
.add-new-ticket-popup form textarea {
  height: 138px;
  resize: none;
}
.add-new-ticket-popup form .topic {
  position: relative;
}
.add-new-ticket-popup form .topic span {
  position: absolute;
  font-size: 10px;
  bottom: 12px;
  right: 16px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: -0.01em;
  color: #00000066;
}
.add-new-ticket-popup .send-btn {
  -webkit-border-radius: var(--radius-1000);
  -moz-border-radius: var(--radius-1000);
  -ms-border-radius: var(--radius-1000);
  -o-border-radius: var(--radius-1000);
  border-radius: var(--radius-1000);
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}
.add-new-ticket-popup .send-btn i {
  margin-left: 8px;
}
.add-new-ticket-popup .notice {
  font-size: 12px;
  color: #00000066;
  text-align: center;
}
.add-new-ticket-popup .section,
.add-new-ticket-popup .description,
.add-new-ticket-popup .priority,
.add-new-ticket-popup .topic input,
.add-new-ticket-popup .notice {
  display: none;
}
@media (max-width: 992px) {
  .add-new-ticket-popup.show {
    width: 60%;
  }
  .add-new-ticket-popup .section,
  .add-new-ticket-popup .description,
  .add-new-ticket-popup .priority,
  .add-new-ticket-popup .topic input {
    display: block;
  }
  .add-new-ticket-popup .type-of-social,
  .add-new-ticket-popup .type-of-services,
  .add-new-ticket-popup .number-order,
  .add-new-ticket-popup .topic textarea,
  .add-new-ticket-popup .topic span {
    display: none;
  }
}
@media (max-width: 768px) {
  .add-new-ticket-popup.show {
    width: 80%;
    top: 220px;
  }
}
@media (max-width: 576px) {
  .add-new-ticket-popup.show {
    width: 94%;
    top: 250px;
  }
  .add-new-ticket-popup form label {
    font-size: 12px;
  }
  .add-new-ticket-popup form input,
  .add-new-ticket-popup form textarea,
  .add-new-ticket-popup form select {
    font-size: 12px;
  }
  .add-new-ticket-popup form input::placeholder,
  .add-new-ticket-popup form textarea::placeholder,
  .add-new-ticket-popup form select option:checked {
    font-size: 12px;
  }
}
.offer-popup.show {
  top: 210px;
  width: 53%;
}
@media (max-width: 992px) {
  .offer-popup.show {
    top: 250px;
    width: 80%;
  }
}
@media (max-width: 768px) {
  .offer-popup.show {
    top: 280px;
    width: 94%;
  }
  .offer-popup .team-respond .header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .offer-popup .replies .button {
    width: 35px;
    height: 35px;
    /* font-size: 12px; */
  }
}
.offer-popup .popup-header,
.offer-popup .team-respond,
.offer-popup textarea,
.offer-popup select {
  border: 1px solid var(--main-color) 33;
  background-color: #fafafa;
}
.offer-popup .popup-header,
.offer-popup textarea,
.offer-popup .replies,
.offer-popup select,
.offer-popup .button {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.offer-popup .popup-header,
.offer-popup .team-respond .warn {
  padding: 8px 16px;
}
.offer-popup textarea,
.offer-popup select {
  padding: 12px 16px;
}
.offer-popup .popup-header .back-to-tickets-btn {
  background-color: var(--main-color);
  color: var(--white-color);
  padding: 5px 10px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}
.offer-popup .popup-header .back-to-tickets-btn i {
  margin-right: 6px;
}
.offer-popup .welcome {
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
}
.offer-popup .welcome .hi {
  color: #00000066;
}
.offer-popup .welcome .customer-name {
  color: #000;
  font-weight: 600;
}
.offer-popup .offer-type .types {
  gap: 8px;
}
.offer-popup .offer-type .types > div {
  padding: 2px 8px 4px 8px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -ms-border-radius: 9px;
  -o-border-radius: 9px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}
.offer-popup .offer-type .types .open {
  color: #1a822b;
  background-color: #e2fde3;
}
.offer-popup .offer-type .types .medium {
  color: #172b85;
  background-color: #e2ebfd;
}
.offer-popup .team-respond {
  background-color: var(--white-color);
  -webkit-border-radius: 10px 10px 16px 16px;
  -moz-border-radius: 10px 10px 16px 16px;
  -ms-border-radius: 10px 10px 16px 16px;
  -o-border-radius: 10px 10px 16px 16px;
  border-radius: 10px 10px 16px 16px;
  overflow: hidden;
}
.offer-popup .team-respond .content {
  padding: 16px 15px;
  gap: 12px;
}
.offer-popup .team-respond .header .title {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.01em;
}
.offer-popup .team-respond .team-images {
  position: relative;
  top: -10px;
}
.offer-popup .team-respond .team-images img {
  width: 24px;
  height: 24px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: 1.03px solid var(--white-color);
  position: absolute;
  right: 0;
}
.offer-popup .team-respond .team-images img:nth-child(1) {
  right: 30px;
  z-index: 1;
}
.offer-popup .team-respond .team-images img:nth-child(2) {
  right: 14px;
  z-index: 2;
}
.offer-popup .team-respond .team-images img:nth-child(3) {
  right: 0;
  z-index: 3;
}
.offer-popup .team-respond .respond-message {
  gap: 8px;
  width: 85%;
}
.offer-popup .team-respond .respond-message span,
.offer-popup .team-respond .warn {
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: -0.01em;
}
.offer-popup .team-respond .respond-message span {
  color: #007aff;
}
.offer-popup .team-respond .respond-message .msg {
  color: var(--main-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.01em;
}
.offer-popup .team-respond .respond-message .msg .trx-support {
  margin-top: 12px;
}
.offer-popup .team-respond .warn {
  padding: 8px 16px;
  background-color: #fafafa;
  color: #ff3b30;
  border-top: 1px solid var(--main-color) 33;
}
.offer-popup .team-respond .warn i {
  margin-right: 6px;
}
.offer-popup .replies {
  gap: 16px;
  padding: 16px;
  border: 1px solid #cacaca;
}
.offer-popup .replies .reply {
  gap: 16px;
}
.offer-popup .replies .reply textarea {
  height: 100px;
  resize: none;
}
.offer-popup .replies .reply-terms {
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.01em;
  color: var(--paragraf-color);
}
.offer-popup .replies .reply-terms .term {
  gap: 8px;
}
.offer-popup .replies .reply-terms .term div {
  flex: 1;
}
.offer-popup .replies .reply-terms i {
  color: #000;
  margin-top: 2px;
}
.offer-popup .replies .reply-terms span {
  font-weight: 500;
}
.offer-popup .replies .priority label {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 400;
}
.offer-popup .replies .mini-form {
  gap: 10px;
}
.offer-popup .replies .button {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.offer-popup .replies .mini-form select {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  color: #00000066;
}
.offer-popup .replies .mini-form .button.share {
  background-color: var(--main-color);
  color: var(--white-color);
}
.offer-popup .replies .mini-form .button.send {
  border: 1px solid var(--main-color) 33;
  color: var(--main-color);
  background-color: var(--white-color);
}
.offer-popup .file-input-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.offer-popup .file-input-wrapper .custom-file-upload {
  flex: 1;
  /* border: 1px dashed rgba(31, 39, 50, 0.502); */
  /* border: 5px solid; */
  /* border-image: repeating-linear-gradient(90deg, black 0, black 10px, transparent 10px, transparent 20px) 30; */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="99.9%" height="99.3%" fill="none" stroke="rgba(31, 39, 50, 0.502)" stroke-width="2.5" stroke-dasharray="10, 5"/></svg>')
    no-repeat;
  padding: 13.5px 16px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  color: #df484c;
  font-size: 14px;
  font-weight: 400;
}
.offer-popup .file-input-wrapper .custom-file-upload input[type="file"] {
  display: none;
}
.offer-popup .file-input-wrapper .download-button {
  background-color: #1a822b;
  color: var(--white-color);
}
.offer-popup .replies .notice-check {
  justify-content: space-between;
  align-items: center;
  color: var(--paragraf-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.01em;
  margin-top: 8px;
}
.offer-popup .replies .notice-check .check {
  gap: 10px;
}
.offer-popup .replies .notice-check .check input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
@media (max-width: 992px) {
  .offer-popup.show {
    top: 250px;
    width: 80%;
  }
}
@media (max-width: 768px) {
  .offer-popup.show {
    top: 280px;
    width: 94%;
  }

  .offer-popup .team-respond .header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .offer-popup .replies .button {
    width: 35px;
    height: 35px;
    font-size: 12px;
  }
  .offer-popup .welcome .customer-name,
  .offer-popup .popup-header .back-to-tickets-btn,
  .offer-popup .replies .reply textarea,
  .offer-popup .replies .reply textarea::placeholder,
  .offer-popup .replies .reply-terms,
  .offer-popup .replies .priority label,
  .offer-popup .replies .mini-form select {
    font-size: 12px;
  }
  .offer-popup .replies .mini-form select {
    padding: 8px 12px;
  }
  .offer-popup .file-input-wrapper .custom-file-upload {
    padding: 8px 12px;
    font-size: 11px;
  }
  .offer-popup .replies .notice-check {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-family: Inter;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: -0.01em;
  }
  .offer-popup .file-input-wrapper .download-button svg {
    width: 14px;
    height: 15px;
  }
}
/* End support tickets popups */
/* Start Invoices section */
.invoices-section {
  gap: 24px;
}

/* Start invoices section popups  */
.invoices-details-popup .invoice-details-body {
  padding: 16px;
  gap: 12px;
  border: 1px solid #eaecf0;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}
.invoices-details-popup .value.services-type {
  gap: 8px;
}
.invoice-details-popup .order-date-number {
  gap: 16px;
}
.invoice-details-popup .order-date-number > div {
  flex: 1;
  gap: 8px;
  border: 1px solid var(--paragraf-color) 26;
  background-color: var(--white-color);
  padding: 8px 10px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
}
.invoice-details-popup .order-date-number > div .title {
  gap: 6px;
  color: var(--paragraf-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
}
.invoice-details-popup .order-date-number > div .title i,
.invoice-details-popup .order-date-number > div .title .hash {
  color: var(--blue-color);
}
.invoice-details-popup .order-date-number > div .the-date,
.invoice-details-popup .order-date-number > div .the-number {
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
  color: #212121;
}
@media (max-width: 992px) {
  .invoices-details-popup .invoice-details-body {
    padding: 16px 12px;
  }
  .invoice-details-popup .order-date-number {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .invoices-details-popup .invoice-details-body {
    padding: 8px;
  }
}
/* End invoices section popups  */
/* End Invoices section */
/* End Sections */
/* End Dashboard Styling */
/* Start Customize Datatable styling */
#support-tickets-table {
  color: var(--paragraf-color) !important;
}
#invoices-table {
  color: var(--main-color) !important;
}
#support-tickets-table .offer-btn,
#invoices-table .detail-btn {
  box-shadow: 0px 2px 1px 0px #0000000d;
  border: 1px solid #d9d9d9;
  background-color: var(--main-color);
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--white-color);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#support-tickets-table .offer-btn span {
  white-space: nowrap;
}
#support-tickets-table .offer-btn,
#support-tickets-table .condition,
#support-tickets-table .priority {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}
#support-tickets-table .condition,
#support-tickets-table .priority {
  padding: 2px 8px 4px 8px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -ms-border-radius: 9px;
  -o-border-radius: 9px;
  border-radius: 9px;
}
#support-tickets-table .condition {
  background-color: #e2fde3;
  color: #1a822b;
}
#support-tickets-table .priority {
  background-color: #e2ecfd;
  color: #1769ff;
}
#support-tickets-table .date span,
#invoices-table .date span {
  white-space: nowrap;
}
#support-tickets-table .date-one,
#invoices-table-table .date-one {
  display: block;
}
#support-tickets-table .date-two,
#invoices-table .date-two {
  display: none;
}
#invoices-table .service {
  gap: 8px;
  justify-content: flex-start;
  padding-left: 24%;
}
#invoices-table .status {
  padding: 2px 8px 4px 8px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -ms-border-radius: 9px;
  -o-border-radius: 9px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}
#invoices-table .status.shipped {
  color: #f7931a;
  background-color: #fdf5e2;
}
#invoices-table .status.delivered {
  color: #1a822b;
  background-color: #e2fde3;
}
div.dt-container {
  width: 100%;
}
div.dt-container div.dt-layout-row {
  margin: 0;
}
div.dt-container div.dt-layout-row div.dt-layout-cell {
  border: 1px solid #e4e4e4;
  -webkit-border-radius: 16px !important;
  -moz-border-radius: 16px !important;
  -ms-border-radius: 16px !important;
  -o-border-radius: 16px !important;
  border-radius: 16px !important;
  overflow: hidden;
}
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  border: 1px solid #e4e4e4;
  border-top: none;
}
table.dataTable.cell-border > tbody > tr > * {
  border: none;
}
table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td {
  padding: 16px;
  font-size: 14px;
  text-align: center !important;
  border: 1px solid #e4e4e4 !important;
  /* color: var(--paragraf-color); */
}
table.dataTable.cell-border > tbody > tr:first-child > * {
  text-align: center !important;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  font-size: 14px;
  font-weight: 500;
  line-height: 19.5px;
  text-align: center;
  /* color: var(--paragraf-color); */
}
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: center;
  border-right: none !important;
  padding: 16px;
}
div.dt-container div.dt-layout-row div.dt-layout-cell:empty {
  display: none;
  border: none;
}
table.dataTable.cell-border > tbody > tr > *:first-child {
  border-left: none !important;
}
table.dataTable > tbody > tr:last-child > * {
  border-bottom: none !important;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
  display: none;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
  justify-content: flex-start !important;
  margin: 0;
  border: none;
}
div.dt-container .dt-search {
  position: relative;
  padding-left: 2.5px;
}
div.dt-container .dt-search::before {
  content: "\f002";
  font-family: "font awesome 6 free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 14.5px;
  color: var(--paragraf-color);
  font-weight: 14px;
}
div.dt-container .dt-search label {
  display: none;
}
div.dt-container .dt-search input {
  background-color: var(--white-color);
  padding: 10px 12px 10px 32px !important;
  border: 1px solid #d7d7d7;
  -webkit-border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  -ms-border-radius: 8px !important;
  -o-border-radius: 8px !important;
  border-radius: 8px !important;
  width: 95%;
}
div.dt-container .dt-search input::placeholder {
  color: var(--paragraf-color);
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
  width: 100%;
  display: none;
}
div.dt-container .dt-paging {
  width: 100% !important;
  text-align: center;
  display: none;
}
div.dt-container .dt-paging .dt-paging-button {
  width: 40px;
  height: 40px;
  padding: 4px 8px;
  background-color: var(--white-color) !important;
  border: 1px solid #6c6c6f4d !important;
  color: #1e1e1e;
  font-weight: 500;
  font-size: 14px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  margin-left: 8px;
}
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
  background-color: var(--blue-color) !important;
  color: var(--white-color) !important;
}
@media (max-width: 1000px) {
  #support-tickets-table .offer-btn,
  #invoices-table .detail-btn,
  #support-tickets-table .condition,
  #support-tickets-table .priority {
    font-size: 12px;
    line-height: 18px;
  }
  table.dataTable > tbody > tr > th,
  table.dataTable > tbody > tr > td {
    font-size: 12px;
    line-height: 18px;
  }
  table.dataTable thead th,
  table.dataTable thead td,
  table.dataTable tfoot th,
  table.dataTable tfoot td {
    font-size: 13px;
    line-height: 18px;
    padding: 16px !important;
  }
  #support-tickets-table .offer-btn,
  #invoices-table .detail-btn {
    padding: 4px 6px;
    gap: 4px;
  }
  #invoices-table .service {
    gap: 8px;
    justify-content: flex-start;
    padding-left: 12px;
  }
  #invoices-table .status {
    font-size: 12px;
    line-height: 18px;
  }
}
@media (max-width: 780px) {
  #support-tickets-table .offer-btn .offer-span,
  #invoices-table .detail-btn .detail-span {
    display: none;
  }
  #invoices-table .service {
    justify-content: center;
    padding: 0;
  }
  #invoices-table .service span {
    justify-content: center;
    display: none;
  }
  #support-tickets-table .offer-btn,
  #invoices-table .detail-btn,
  #support-tickets-table .condition,
  #support-tickets-table .priority {
    font-size: 10px;
    line-height: 15px;
  }
  #support-tickets-table .condition,
  #support-tickets-table .priority {
    padding: 5px 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
  }
  #support-tickets-table .offer-btn,
  #invoices-table .detail-btn {
    padding: 2.5px 6.67px;
    font-size: 10px;
    -webkit-border-radius: 5.83px;
    -moz-border-radius: 5.83px;
    -ms-border-radius: 5.83px;
    -o-border-radius: 5.83px;
    border-radius: 5.83px;
    border-width: 0.83px;
  }
  #support-tickets-table .date-one,
  #invoices-table .date-one {
    display: none;
  }
  #support-tickets-table .date-two,
  #invoices-table .date-two {
    display: block;
  }
  table.dataTable > tbody > tr > th,
  table.dataTable > tbody > tr > td {
    font-size: 10px;
    line-height: 15px;
    padding: 16px 4px;
  }
  table.dataTable thead th,
  table.dataTable thead td,
  table.dataTable tfoot th,
  table.dataTable tfoot td {
    padding: 12px 4px !important;
    font-size: 10px;
    line-height: 15px;
  }
  div.dt-container .dt-search input {
    width: 99%;
  }
}
/* End Customize Datatable styling */
/* Customize OTP verification styling */
.otp-container {
  gap: 12px;
}
.otp-container .label,
.otp-container .notice {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.01em;
}
.otp-container .label {
  font-weight: 500;
  color: #000000cc;
}
.otp-container .notice {
  color: var(--paragraf-color);
}
@media (max-width: 576px) {
  .otp-container .label,
  .otp-container .notice {
    font-size: 12px;
    line-height: 18px;
  }
}
.inputfield {
  display: flex;
  align-items: center;
  gap: 12px;
}
.inputfield input[type="number"] {
  width: calc(100% / 4);
  padding: 12px 16px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid var(--main-color) 33;
  background-color: #fafafa;
  appearance: none;
  text-align: center;
}
.inputfield input[type="number"]:focus {
  border: 1px solid #1769ff;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* ===================================== */
/* ===================================== */
/* ===================================== */
/* ===================================== */
/* Start verfication number page */
.verification-number-container {
  display: flex;
  justify-content: center;
}
.verification-number-container .the-content {
  width: 55%;
  gap: 24px;
  margin-top: 150px;
  margin-bottom: 200px;
}
.verification-number-container .the-content img {
  margin-bottom: 30px;
}
.number-container {
  gap: 8px;
  width: 100%;
}
.verification-number-container .notice-msg {
  width: 100%;
  gap: 8px;
}
.number-container .my-select {
  padding: 16px;
  font-size: 14px;
  font-weight: 400;
}
.number-container .my-select ul {
  height: 189px;
  overflow-y: scroll;
  padding: 8px;
  top: 110%;
}
.my-select.select-country-number .selected > span,
.my-select.select-country .selected > span {
  display: flex;
  gap: 2px;
}
/* Width of the scrollbar */
.number-container .my-select ul::-webkit-scrollbar {
  width: 4px;
}

/* Track */
.number-container .my-select ul::-webkit-scrollbar-track {
  background: var(--white-color); /* Scrollbar track color */
}

/* Handle */
.number-container .my-select ul::-webkit-scrollbar-thumb {
  background: #d9d9d9; /* Scrollbar thumb color */
  border-radius: 10px; /* Rounded scrollbar handle */
}
.number-container .my-select ul,
.number-container .my-select ul li {
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
}
.number-container .my-select ul li {
  padding: 12px;
}
.number-container .my-select ul li.active,
.number-container .my-select ul li:hover {
  background-color: #f6f6f6 !important;
  color: #000;
}
.number-container .my-select ul li > span {
  white-space: nowrap;
  display: inline-flex;
}
.number-container .number-input {
  flex: 1;
}
.number-container .number-input input {
  width: 100%;
  padding: 16px;
  gap: 12px;
  border: 1px solid var(--main-color) 33;
  background-color: var(--white-color);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 400;
}
.number-container .number-input input::placeholder {
  color: #00000066;
  font-size: 14px;
  font-weight: 400;
}
@media (max-width: 992px) {
  .verification-number-container .the-content {
    width: 68%;
  }
  .verification-number-container .the-content img {
    width: 83px;
    height: 80px;
    margin-bottom: 0;
  }
  .verification-number-container .notice-msg {
    font-size: 14px;
    line-height: 21px;
  }
  .number-container .my-select,
  .number-container .number-input input,
  .number-container .number-input input::placeholder {
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .verification-number-container .the-content {
    width: 75%;
  }
}
@media (max-width: 576px) {
  .verification-number-container .the-content {
    width: 100%;
    gap: 12px;
  }
  .verification-number-container .the-content img {
    width: 77px;
    height: 77px;
    margin-bottom: 4px;
  }
  .verification-number-container .notice-msg {
    font-size: 12px;
    line-height: 18px;
  }
  .number-container .my-select {
    padding: 12px;
  }
  .number-container .my-select ul {
    padding: 8px 6px;
  }
  .number-container .my-select ul li {
    padding: 4px 8px;
  }
  .number-container .my-select .country {
    display: none;
  }
  .number-container .number-input input {
    padding: 12px;
  }
}
/* End verfication number page */
/* Start Auth Popups */
.auth-popup.show {
  width: 47%;
  top: 150px;
}
.auth-popup .popup-name {
  font-family: Satoshi;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
}
.auth-popup form {
  gap: 12px;
}
.auth-popup label {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.01em;
  color: #000000cc;
}
.login-popup .the-input {
  position: relative;
}
.login-popup .the-input i {
  font-size: 14px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #141b2433;
}
.login-popup .the-input i.input-icon {
  left: 16px;
}
.login-popup .the-input i:not(.input-icon) {
  right: 16px;
}
.login-popup .the-input .eye-hidden,
.login-popup .the-input .eye-show {
  display: none;
  cursor: pointer;
}
.login-popup .the-input .eye-hidden.show,
.login-popup .the-input .eye-show.show {
  display: block;
}
.auth-popup input,
.auth-popup textarea {
  padding: 12px 16px 12px 42px;
  background-color: #fafafa;
  border: 1px solid var(--main-color) 33;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
}
.auth-popup input::placeholder,
.auth-popup textarea::placeholder {
  color: #00000080;
  font-size: 14px;
}
.login-popup .checkbox-forgot-password .remember-me {
  gap: 8px;
}
.login-popup .checkbox-forgot-password .remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.login-popup .checkbox-forgot-password .remember-me label {
  margin-bottom: 0;
}
.login-popup .checkbox-forgot-password .remember-me span,
.login-popup .checkbox-forgot-password .forgot-password {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: -0.01em;
}
.login-popup .checkbox-forgot-password .remember-me span {
  color: var(--blue-color);
}
.login-popup .checkbox-forgot-password .forgot-password {
  color: var(--main-color);
}
.login-popup .checkbox-forgot-password .forgot-password,
.login-popup .check-if-login button,
.home-page .verification-code-popup .notice .resend-btn,
.congratulation-popup .change-number-btn {
  border: 0;
  background-color: transparent;
  text-decoration: underline;
}
.login-popup .captcha-container {
  margin-top: 8px;
}
.login-popup .captcha-input {
  flex: 1;
}
.login-popup .the-captcha,
.login-popup .captcha-input input {
  padding: 12px 16px;
}

.login-popup .check-if-login {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--paragraf-color);
}
.login-popup .check-if-login button {
  color: #000;
  font-weight: 600;
}
.login-popup .or-sign-with {
  width: 100%;
  gap: 12px;
  color: var(--paragraf-color);
  opacity: 0.6;
  font-size: 14px;
}
.login-popup .or-sign-with .line {
  flex: 1;
  border: 1px solid var(--paragraf-color);
}
.login-popup .another-ways {
  gap: 12px;
}
.login-popup .another-ways .way {
  justify-content: center;
  color: var(--white-color);
  background-color: var(--main-color);
  padding: 12px 8px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  cursor: pointer;
}
.login-popup .another-ways .way .way-content {
  width: 54%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 1060px) {
  .auth-popup.show {
    width: 60%;
    top: 210px;
  }
}
@media (max-width: 992px) {
  .auth-popup .popup-name {
    font-size: 18px;
  }
  .auth-popup label,
  .auth-popup input,
  .auth-popup input::placeholder,
  .login-popup .checkbox-forgot-password .remember-me span,
  .login-popup .checkbox-forgot-password .forgot-password,
  .login-popup .or-sign-with,
  .login-popup .another-ways .way .way-content,
  .login-popup .the-captcha,
  .login-popup .captcha-input input,
  .login-popup .captcha-input input::placeholder,
  .auth-popup textarea,
  .auth-popup textarea::placeholder {
    font-size: 12px;
    line-height: 18px;
  }
}
@media (max-width: 800px) {
  .auth-popup.show {
    width: 75%;
    top: 210px;
  }
}
@media (max-width: 600px) {
  .auth-popup.show {
    width: 94%;
    top: 250px;
  }
  .login-popup .another-ways .way .way-content {
    width: 70%;
  }
}
.home-page .verification-code-popup .otp-container {
  gap: 24px;
}
.home-page .verification-code-popup .notice {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
.home-page .verification-code-popup .notice span {
  color: var(--paragraf-color);
  margin-right: 4px;
  margin-left: 2px;
}
.register-mobile-number-popup.show {
  width: 45%;
  top: 215px;
}
.register-mobile-number-popup .my-select ul {
  height: 130px;
}
.congratulation-popup {
  overflow: hidden;
}
.congratulation-popup.show {
  top: 215px;
  width: 26.7%;
}
.congratulation-popup > svg {
  position: absolute;
  top: 0;
  left: 10px;
  z-index: -1;
}
.congratulation-popup .title,
.congratulation-popup .desc {
  text-align: center;
}
.congratulation-popup .change-number-btn {
  color: var(--paragraf-color);
  font-size: 14px;
  font-weight: 500;
}
.congratulation-popup .desc span.the-mobile-number {
  color: var(--main-color);
  font-weight: 600;
}
.congratulation-popup .bottom-header svg {
  margin-bottom: 12px;
}
@media (max-width: 992px) {
  .register-mobile-number-popup.show {
    width: 55%;
    top: 230px;
    gap: 16px;
  }
}
@media (max-width: 768px) {
  .register-mobile-number-popup.show {
    width: 65%;
    top: 240px;
  }
}
@media (max-width: 576px) {
  .register-mobile-number-popup.show {
    width: 75%;
    top: 250px;
    gap: 12px;
  }
}
@media (max-width: 450px) {
  .register-mobile-number-popup.show {
    width: 94%;
    top: 260px;
  }
}
@media (max-width: 1300px) {
  .congratulation-popup.show {
    width: 35%;
    top: 230px;
    gap: 16px;
  }
}
@media (max-width: 1100px) {
  .congratulation-popup.show {
    width: 40%;
    top: 230px;
  }
}
@media (max-width: 992px) {
  .congratulation-popup.show {
    width: 45%;
    top: 230px;
    gap: 16px;
  }
  .congratulation-popup .change-number-btn {
    font-size: 12px;
  }
}
@media (max-width: 830px) {
  .congratulation-popup.show {
    width: 55%;
    top: 240px;
  }
}
@media (max-width: 740px) {
  .congratulation-popup.show {
    width: 60%;
    top: 240px;
  }
}
@media (max-width: 660px) {
  .congratulation-popup.show {
    width: 67%;
    top: 240px;
  }
}
@media (max-width: 590px) {
  .congratulation-popup.show {
    width: 77%;
    top: 250px;
    gap: 12px;
  }
}
@media (max-width: 500px) {
  .congratulation-popup.show {
    width: 89%;
    top: 250px;
    gap: 12px;
  }
}
@media (max-width: 450px) {
  .congratulation-popup.show {
    width: 94%;
    top: 260px;
  }
}

.login-result-popup.show {
  text-align: center;
  width: fit-content;
  top: 165px;
}
.sign-up-popup .the-name {
  gap: 12px;
  width: 100%;
}
.sign-up-popup .the-name > div {
  flex: 1;
}
.sign-up-popup textarea {
  height: 147px;
  resize: none;
}
.code-verification-two-popup.show {
  width: 40%;
}
.code-verification-two-popup .enter-number-and-send {
  gap: 8px;
}
.code-verification-two-popup .enter-number-and-send input,
.mobile-successfully-verified-popup input {
  padding: 12px 16px;
}
.code-verification-two-popup .enter-number-and-send .send-btn {
  background-color: var(--main-color);
  color: var(--white-color);
  border: none;
  padding: 16.5px 24px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
}
.code-verification-two-popup .notice,
.mobile-successfully-verified-popup .notice {
  margin-top: 8px;
  font-size: 13px !important;
  font-weight: 400;
  line-height: 19.5px !important;
  color: #00000080;
  text-align: start !important;
}
.home-page .code-verification-two-popup .otp-container {
  gap: 12px;
}
.home-page .code-verification-two-popup .otp-container .label i {
  color: #141b2433;
}
@media (max-width: 992px) {
  .code-verification-two-popup.show {
    width: 55%;
  }
  .code-verification-two-popup .notice,
  .mobile-successfully-verified-popup .notice {
    font-size: 12px;
    line-height: 18px;
  }
}
@media (max-width: 768px) {
  .code-verification-two-popup.show {
    width: 65%;
  }
}
@media (max-width: 576px) {
  .code-verification-two-popup.show {
    width: 80%;
  }
}
@media (max-width: 400px) {
  .code-verification-two-popup.show {
    width: 94%;
  }
}
.mobile-successfully-verified-popup.show {
  width: 35%;
}
@media (max-width: 1150px) {
  .mobile-successfully-verified-popup.show {
    width: 45%;
  }
}
@media (max-width: 992px) {
  .mobile-successfully-verified-popup.show {
    width: 55%;
  }
}
@media (max-width: 768px) {
  .mobile-successfully-verified-popup.show {
    width: 65%;
  }
}
@media (max-width: 576px) {
  .mobile-successfully-verified-popup.show {
    width: 80%;
  }
}
@media (max-width: 400px) {
  .mobile-successfully-verified-popup.show {
    width: 94%;
  }
}
/* End Auth Popups */
/* Start  product details page popups */
.balance-insufficient-popup .nominal {
  padding: 0;
  border: none;
}
@media (min-width: 1050px) {
  .balance-insufficient-popup.show,
  .balance-sufficient-popup.show {
    width: 45%;
  }
}
.balance-sufficient-popup .transaction-info {
  width: 100%;
  background-color: var(--main-color);
  color: var(--white-color);
  /* align-items: center; */
  align-items: stretch;
  gap: 16px;
  padding: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}
.balance-sufficient-popup .transaction-info .platform-image {
  background-color: #363f4b;
  -webkit-border-radius: 6.76px;
  -moz-border-radius: 6.76px;
  -ms-border-radius: 6.76px;
  -o-border-radius: 6.76px;
  border-radius: 6.76px;
}
.balance-sufficient-popup .transaction-info .platform-image img {
  margin: 0;
}
.balance-sufficient-popup .transaction-info .the-info {
  gap: 4px;
  flex: 1;
}
.balance-sufficient-popup .transaction-info .product-name {
  font-family: Satoshi;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: -0.02em;
}
.balance-sufficient-popup .transaction-info .total-payment {
  width: 100%;
}
.balance-sufficient-popup .transaction-info .total-payment .title {
  font-size: 15px;
  font-weight: 400;
  line-height: 18.15px;
  color: #999da5;
}
.balance-sufficient-popup .transaction-info .total-payment .the-payment {
  font-family: Satoshi;
  font-size: 18px;
  font-weight: 700;
  line-height: 25.2px;
}
.balance-sufficient-popup .set-quantity .label,
.balance-sufficient-popup .choose-service .label {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.balance-sufficient-popup .the-quantity-input {
  gap: 8px;
}
.balance-sufficient-popup .the-quantity-input i {
  padding: 8px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
}
.balance-sufficient-popup .the-quantity-input input[type="number"] {
  padding: 5.5px 11px;
  width: auto;
  min-width: 3ch;
  max-width: 5ch;
  -webkit-border-radius: var(--radius-8);
  -moz-border-radius: var(--radius-8);
  -ms-border-radius: var(--radius-8);
  -o-border-radius: var(--radius-8);
  border-radius: var(--radius-8);
  text-align: center;
  box-sizing: content-box;
  font-size: 14px;
  font-weight: 500;
}
.balance-sufficient-popup .the-quantity-input i.decrement {
  color: var(--white-color);
  background-color: var(--main-color);
}
.balance-sufficient-popup .the-quantity-input input[type="number"],
.balance-sufficient-popup .the-quantity-input i.increment {
  background-color: var(--white-color);
  border: 1px solid #e6e8ec;
}
.balance-sufficient-popup .choose-service {
  align-items: center;
  justify-content: space-between;
}
.balance-sufficient-popup .choose-service .my-select i:not(.fa-chevron-down) {
  display: none;
  font-size: 12px;
}
.balance-sufficient-popup .choose-service .my-select {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}
.balance-sufficient-popup .check-terms {
  gap: 12px;
}
.balance-sufficient-popup .check-terms input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.balance-sufficient-popup .check-terms label {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.balance-sufficient-popup .check-terms label a {
  color: var(--blue-color);
  font-weight: 500;
}
.congratulation-complete-purchase-popup {
  gap: 40px !important;
}
.congratulation-complete-purchase-popup .purchase-number {
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  text-align: center;
}
.congratulation-complete-purchase-popup .purchase-number span {
  font-weight: 600;
  color: var(--main-color);
}
.congratulation-complete-purchase-popup .buttons {
  gap: 16px;
}
.congratulation-complete-purchase-popup .buttons button {
  margin: 0;
}
.congratulation-complete-purchase-popup .buttons button.go-to-orders-btn {
  background-color: var(--white-color);
  color: #000;
  font-weight: 500;
  border: 1px solid #e8e8e8;
}
@media (max-width: 992px) {
  .balance-sufficient-popup .transaction-info .product-name {
    font-size: 14px;
    line-height: 20px;
  }
  .balance-sufficient-popup .transaction-info .total-payment .title {
    font-size: 13px;
    line-height: 16.15px;
  }
  .balance-sufficient-popup .transaction-info .total-payment .the-payment {
    font-size: 16px;
    line-height: 22.5px;
  }
  .balance-sufficient-popup .set-quantity .label,
  .balance-sufficient-popup .choose-service .label {
    font-size: 14px;
    line-height: 21px;
  }
  .balance-sufficient-popup .the-quantity-input input[type="number"],
  .balance-sufficient-popup .the-quantity-input i.increment {
    border: 0.88px solid #e6e8ec;
    font-size: 12px;
  }
  .balance-sufficient-popup .the-quantity-input i {
    font-size: 12px;
  }
  .congratulation-complete-purchase-popup {
    gap: 32px !important;
  }
  .congratulation-complete-purchase-popup .buttons {
    gap: 12px;
  }
}
@media (max-width: 768px) {
  .balance-sufficient-popup .transaction-info .product-name,
  .balance-sufficient-popup .transaction-info .total-payment .the-payment {
    font-size: 12px;
    line-height: 16.8px;
  }
  .balance-sufficient-popup .transaction-info .total-payment .title {
    font-size: 12px;
    line-height: 14.52px;
  }
}
@media (max-width: 500px) {
  .balance-sufficient-popup .choose-service {
    flex-direction: column;
    justify-content: unset;
    gap: 16px;
    align-items: flex-start;
  }
  .balance-sufficient-popup .choose-service .my-select {
    width: 100%;
  }
  .balance-sufficient-popup .choose-service .my-select i:not(.fa-chevron-down) {
    display: inline;
    margin-right: 8px;
  }
  .balance-sufficient-popup
    .choose-service
    .my-select
    .selected
    i:not(.fa-chevron-down) {
    color: var(--blue-color);
  }
}
.order-details-popup.show {
  top: 210px;
  width: 40%;
}
.order-details-popup .popup-header .bottom-header {
  gap: 12px;
  align-items: center;
  margin-bottom: 40px;
}
.order-details-popup .popup-header .bottom-header .title {
  font-family: Satoshi;
  font-size: 22px;
  font-weight: 700;
  line-height: 33px;
  text-align: center;
}
.order-details-popup .popup-header .bottom-header .order-date {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: #00710f;
}
.order-details-popup .order-informations {
  gap: 16px;
}
.order-details-popup .order-informations .hr {
  border: 1px solid #00000026;
}
.order-details-popup .order-informations .info {
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}
.order-details-popup .order-informations .info .info-name {
  color: var(--paragraf-color);
}
.order-details-popup .order-informations .info .info-value {
  font-weight: 600;
  color: var(--main-color);
}
@media (max-width: 992px) {
  .order-details-popup.show {
    width: 55%;
    top: 230px;
  }
  .order-details-popup .popup-header .bottom-header {
    gap: 8px;
    margin-bottom: 32px;
  }
  .order-details-popup .popup-header .bottom-header .title {
    font-size: 20px;
    line-height: 30px;
  }
  .order-details-popup .order-informations .info {
    font-size: 12px;
    line-height: 12px;
  }
}
@media (max-width: 768px) {
  .order-details-popup.show {
    width: 65%;
    top: 250px;
  }
}
@media (max-width: 576px) {
  .order-details-popup.show {
    width: 80%;
    top: 250px;
  }
}
@media (max-width: 400px) {
  .order-details-popup.show {
    width: 94%;
    top: 250px;
  }
}
/* End product details page popups */
/* Start Payment State pages */
.payment-state {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  margin: 90px 0 80px 0;
  position: relative;
}
.payment-state .congrats {
  position: absolute;
  top: -100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: -1;
}
@media (max-width: 450px) {
  .payment-state .congrats {
    width: 340px;
  }
}
.payment-state .content {
  width: 50%;
  gap: 100px;
}
.payment-state .the-state {
  gap: 32px;
  width: 100%;
}
.payment-state .the-state > div {
  width: 100%;
}
.payment-state .the-state .state-header {
  gap: 32px;
}
.payment-state .the-state .state-header .title-and-desc {
  gap: 8px;
}
.payment-state .the-state .state-header .title {
  font-family: Satoshi;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.03em;
  text-align: center;
  color: #212121;
}
.payment-state .the-state .state-header .desc {
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  text-align: center;
  color: var(--paragraf-color);
}
.payment-state .the-state .state-header .purchase-number {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  text-align: center;
  color: var(--paragraf-color);
}
.payment-state .the-state .state-header .purchase-number span.the-number {
  color: var(--main-color);
  font-weight: 600;
}
.payment-state .the-state .purchase-info {
  border: 1px solid #e2e2e2;
  background-color: var(--white-color);
}
.payment-state .the-state .purchase-info,
.payment-state .the-state .current-remaining-balance {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
  gap: 16px;
  padding: 12px;
}
.payment-state .the-state .current-remaining-balance {
  background: linear-gradient(90deg, #232526 0%, #414345 100%);
}
.payment-state .the-state .current-remaining-balance .hr {
  border: 1px solid #ffffff29;
}
.payment-state .the-state .current-remaining-balance .current-balance {
  font-family: Satoshi;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: -0.02em;
  color: var(--white-color);
}
.payment-state .the-state .current-remaining-balance .current-balance .name {
  gap: 8px;
}
.payment-state .the-state .current-remaining-balance .current-balance .name i {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white-color);
  color: #232526;
  font-size: 13px;
}
.payment-state .the-state .current-remaining-balance .remaining-balance {
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  color: #a3a3a3;
}
.payment-state .the-state .current-remaining-balance .add-and-invoice-btns {
  gap: 8px;
}
.payment-state
  .the-state
  .current-remaining-balance
  .add-and-invoice-btns
  button {
  gap: 8px;
  padding: 4px 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
}
.payment-state .the-state .current-remaining-balance .add-balance-btn {
  color: var(--main-color);
  background-color: #f7f7f7;
}
.payment-state .the-state .current-remaining-balance .add-balance-btn i {
  border: 1px solid var(--main-color);
  padding: 1px;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.payment-state .the-state .infos {
  gap: 8px;
}
.payment-state .the-state .infos .hr {
  border: 0.8px solid #e2e2e2;
}
.payment-state .the-state .infos .info {
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  color: var(--paragraf-color);
}
.payment-state .the-state .infos .info .info-name span {
  color: #000;
  font-weight: 500;
}
.payment-state .the-state .infos .info .info-value span {
  color: #000;
  font-weight: 700;
}
.payment-state
  .the-state
  .infos
  .info.previous-current-balance-info
  .info-value
  span {
  color: var(--blue-color) !important;
  font-weight: 500;
}
.payment-state .the-state .infos .platform-info {
  font-family: Satoshi;
  font-size: 14px;
  font-weight: 700;
  line-height: 19.6px;
  letter-spacing: -0.02em;
  color: #212121;
}
.payment-state .the-state .buttons {
  gap: 12px;
}
.payment-state .the-state .buttons button {
  margin: 0;
  width: 100%;
}
.payment-state .the-state .buttons button.go-to-invoices-btn {
  border: 1px solid #e8e8e8;
  background-color: var(--white-color);
  color: var(--main-color);
}
.payment-state .content .need-any-help-btn {
  border: none;
  background-color: transparent;
  color: var(--paragraf-color);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  text-decoration: underline;
}
@media (max-width: 992px) {
  .payment-state {
    gap: 24px;
    margin: 70px 0 60px 0;
  }
  .payment-state > img {
    width: 132.6px;
    height: 90px;
  }
  .payment-state .content {
    width: 65%;
    gap: 80px;
  }
  .payment-state .the-state,
  .payment-state .the-state .state-header {
    gap: 24px;
  }
  .payment-state .the-state .state-header .title {
    font-size: 18px;
    line-height: 27px;
  }
  .payment-state .the-state .state-header .desc {
    font-size: 14px;
    line-height: 22.4px;
  }
}
@media (max-width: 768px) {
  .payment-state .content {
    width: 84%;
    gap: 80px;
  }
}
@media (max-width: 576px) {
  .payment-state {
    margin: 70px 0 40px 0;
  }
  .payment-state .content {
    width: 100%;
    gap: 100px;
  }
  .payment-state .the-state .state-header .title {
    font-size: 20px;
    line-height: 30px;
  }
}
.faq-popup.show {
  width: 65%;
  top: 200px;
}
.faq-popup .popup-header {
  margin-bottom: 32px;
}
.faq-popup .popup-header .bottom-header .title {
  font-family: Satoshi;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 24px;
}
.faq-popup .popup-header .bottom-header .desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--main-color);
  margin-bottom: 12px;
}
.faq-popup .popup-header .contact-us-methods {
  gap: 8px;
}
.faq-popup .popup-header .contact-us-methods a {
  gap: 8px;
  border: 0.5px solid #66708533;
  padding: 6px 12px 6px 6px;
  background-color: var(--white-color);
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  line-height: 15.73px;
  color: #000;
}
.faq-popup .popup-header .contact-methods {
  gap: 8px;
}
@media (max-width: 1100px) {
  .faq-popup.show {
    width: 75%;
  }
}
@media (max-width: 992px) {
  .faq-popup.show {
    width: 85%;
  }
  .faq-popup .popup-header .bottom-header .title {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 30px;
  }
  .faq-popup .popup-header .bottom-header .desc {
    font-size: 12px;
    line-height: 19.2px;
  }
  .faq-popup .popup-header .contact-us-methods a {
    font-size: 12px;
    line-height: 14.52px;
  }
  .faq-popup .accordion .accordion-header .helpful {
    display: none;
  }
  .faq-popup .accordion .accordion-body .helpful .hidden {
    display: flex;
  }
}
@media (max-width: 768px) {
  .faq-popup.show {
    width: 90%;
  }
  .faq-popup .accordion h6 {
    font-size: 14px;
  }
}
@media (max-width: 600px) {
  .faq-popup.show {
    width: 94%;
  }
}
/* End Payment State pages */
footer .second-content {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 1200px) {
  footer .second-content {
    flex-direction: column-reverse;
    flex: 1;
  }
  footer .second-content .all-links {
    width: 100%;
  }
  footer .second-content .contact {
    width: 50%;
  }
}