@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
/*-----------------------------------*\
  #Mixins
\*-----------------------------------*/
/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/
:root {
  --purple: #6f2a63;
  --dark-red: #c4161c;
}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

input,
button {
  border: none;
  outline: none;
}

ul,
p {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
}

li {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  appearance: textfield;
}
[type="number"]::-webkit-outer-spin-button,
[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="radio"] {
  display: none;
}

.form-check-input {
  cursor: pointer;
  border-color: var(--purple);
}

.form-check-input:checked {
  background-color: var(--purple);
  border-color: var(--purple);
}

.form-check-input:focus {
  -webkit-box-shadow: 0 0 0 0.25rem rgba(111, 42, 99, 0.15);
  box-shadow: 0 0 0 0.25rem rgba(111, 42, 99, 0.15);
  border-color: var(--purple);
}

html {
  overflow-x: hidden;
}

::-webkit-scrollbar {
  height: 5px;
  width: 5px;
  border-radius: 10px;
  background-color: #ebe8e1;
}

::-webkit-scrollbar-thumb {
  background-color: var(--dark);
  border-radius: 10px;
}

body {
  font-family: "Roboto", sans-serif;
}
body.ar,
body[dir="rtl"] {
  font-family: cairo, sans-serif;
}
body.ar *,
body[dir="rtl"] * {
  direction: rtl;
}
body.ar .arrow,
body[dir="rtl"] .arrow {
  -webkit-transform: none;
  transform: none;
}
body.ar .dropdown-toggle::after,
body[dir="rtl"] .dropdown-toggle::after {
  right: auto;
  left: 0;
}
body.ar .whats-icon,
body[dir="rtl"] .whats-icon {
  left: auto;
  right: 40px;
}
body.ar header .left-side .btns button,
body[dir="rtl"] header .left-side .btns button {
  font-size: 14px;
  width: 130px;
  font-weight: bold;
}
body.ar header .right-side .navs li a,
body[dir="rtl"] header .right-side .navs li a {
  font-weight: bold;
}
body.ar .sidebar,
body[dir="rtl"] .sidebar {
  right: -270px;
  left: auto;
}
body.ar .sidebar.show,
body[dir="rtl"] .sidebar.show {
  right: 0;
  left: auto;
}
@media (max-width: 991px) {
  body.ar .dashboard-navs,
  body[dir="rtl"] .dashboard-navs {
    left: auto;
    right: -300px;
  }
}
body.ar .auth-box .show-pw,
body[dir="rtl"] .auth-box .show-pw {
  right: auto !important;
  left: 15px !important;
}
body.ar .cart_step .coupon button,
body[dir="rtl"] .cart_step .coupon button {
  right: auto !important;
  left: 20px !important;
}
body.ar
  .payment_step
  .card-types
  .card-box
  .form-check
  .form-check-input[type="radio"],
body[dir="rtl"]
  .payment_step
  .card-types
  .card-box
  .form-check
  .form-check-input[type="radio"] {
  left: auto !important;
  right: 18px !important;
}
body.ar .countries-modal .search-input .icon,
body[dir="rtl"] .countries-modal .search-input .icon {
  right: 20px;
  left: auto;
}

/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/
#overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dark);
  opacity: 0.85;
  z-index: 1100;
  display: none;
}

.ltr {
  direction: ltr !important;
}

.arrow {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.main-title {
  text-align: center;
  max-width: 750px;
  margin-inline: auto;
  margin-bottom: 2rem;
}
.main-title h2 {
  margin-bottom: 0.75rem;
}
.main-title p {
  font-size: 16px;
  font-weight: 500;
}

.close {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}
.close:hover {
  color: indianred;
  -webkit-transform: rotate(180deg) scale(1.1);
  transform: rotate(180deg) scale(1.1);
}

.iti__selected-flag {
  border-radius: 7px 0 0 7px;
}

.overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.85;
  position: fixed;
  z-index: 1050;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: none;
  cursor: pointer;
}

span.select2-selection.select2-selection--single {
  padding: 6px 16px;
  height: auto;
  border-color: var(--bs-border-color);
  border-radius: 0.5rem;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  -webkit-padding-start: 0;
  padding-inline-start: 0;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 41px;
}

.fa-star {
  color: #dedfe0;
}
.fa-star.full {
  color: #ff9800;
}

.more {
  -webkit-transition: 0.7s;
  transition: 0.7s;
}
.more:hover {
  -webkit-padding-start: 10px;
  padding-inline-start: 10px;
}

.multi-ele {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.justify {
  text-align: justify;
}

.social-links .icon {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.social-links .icon.whats:hover {
  color: #25d366;
}
.social-links .icon.face:hover {
  color: #1877f2;
}
.social-links .icon.twitter:hover {
  color: #000;
}
.social-links .icon.insta:hover {
  color: #833ab4;
}
.social-links .icon.snap:hover {
  color: #fffc00;
}
.social-links .icon.youtube:hover {
  color: #ff0000;
}

@media (min-width: 1400px) {
  .container-fluid {
    max-width: 1650px;
  }
}

.row {
  margin-inline: 0;
}

.dropdown-toggle {
  -webkit-padding-end: 20px !important;
  padding-inline-end: 20px !important;
  -webkit-padding-start: 0px !important;
  padding-inline-start: 0px !important;
  position: relative;
}
.dropdown-toggle::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  border: none !important;
  font-weight: 900;
  position: absolute;
  top: 55%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0px;
  margin: 0;
  font-size: 13px;
}
.dropdown-toggle.show::after {
  content: "\f106";
}

.dropdown-menu {
  min-width: -webkit-max-content !important;
  min-width: -moz-max-content !important;
  min-width: max-content !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.dropdown-menu .dropdown-item {
  cursor: pointer;
  padding: 5px 10px !important;
}
.dropdown-menu .dropdown-item:is(.active, :active) {
  color: white !important;
  background-color: var(--purple) !important;
  border-radius: 5px;
}

[aria-label="breadcrumb"] .back {
  font-weight: 500;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
[aria-label="breadcrumb"] .back .icon {
  font-size: 12px;
  line-height: 5px;
}
[aria-label="breadcrumb"] .back:hover {
  color: var(--purple);
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}
[aria-label="breadcrumb"] .breadcrumb {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  font-weight: 500;
}
[aria-label="breadcrumb"] .breadcrumb > .breadcrumb-item a,
[aria-label="breadcrumb"] .breadcrumb .breadcrumb > .breadcrumb-item:active {
  color: #000;
}
[aria-label="breadcrumb"] .breadcrumb.light > .breadcrumb-item a,
[aria-label="breadcrumb"]
  .breadcrumb.light
  .breadcrumb
  > .breadcrumb-item:active {
  color: #000;
}
[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item:before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  line-height: 24px;
}
[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item:before {
  color: #000;
}
[aria-label="breadcrumb"] .breadcrumb-item.active {
  color: var(--purple);
}

.pagination {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 30px;
}
.pagination .page-item {
  margin-bottom: 0;
}
.pagination .page-item a {
  background: white;
  color: #ada7a7;
  border: 1px solid;
  width: 50px;
  height: 50px;
  display: -ms-grid;
  display: grid;
  place-content: center;
  border-radius: 4px !important;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.pagination .page-item a:is(:active, .active, :hover) {
  color: #000;
}
.pagination .page-item a.nav {
  width: 100px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fafafa;
}
.pagination .page-item a.nav:hover {
  background-color: white;
  color: 0;
}
@media (max-width: 767px) {
  .pagination .page-item a.nav {
    width: 50px;
  }
}
.pagination .page-item a span {
  background-color: transparent;
  color: inherit;
  margin: 0;
  padding: 0 !important;
}

.slick-dotted .slick-dots {
  bottom: -35px;
}
.slick-dotted .slick-dots button {
  width: 14px;
  height: 14px;
  background-color: #f5f8fa;
  border-radius: 50%;
  border: 2px solid #eeeeee;
  position: relative;
  position: relative;
}
.slick-dotted .slick-dots button::before {
  display: none;
}
.slick-dotted .slick-dots .slick-active button {
  border-color: var(--purple) !important;
}
.slick-dotted.light .slick-dots button {
  border-color: black;
}

.slick-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  display: -ms-grid;
  display: grid;
  place-content: center;
  z-index: 10;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1450980392);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1450980392);
}
.slick-arrow:is(:hover, :focus) {
  background-color: white;
}
.slick-arrow::before {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  color: var(--purple);
  font-size: 22px;
}
.slick-arrow.slick-prev {
  left: -45px;
  right: auto;
}
.slick-arrow.slick-prev::before {
  content: "\f104";
}
.slick-arrow.slick-next {
  right: -45px;
}
.slick-arrow.slick-next::before {
  content: "\f105";
}

.purple-btn {
  background-color: var(--purple) !important;
  color: white !important;
  border: 1px solid var(--purple) !important;
  -webkit-transition: 0.3s !important;
  transition: 0.3s !important;
}
.purple-btn path {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.purple-btn:hover {
  background-color: white !important;
  color: var(--purple) !important;
}
.purple-btn:hover path {
  fill: var(--purple) !important;
}

.white-btn {
  background-color: white !important;
  color: var(--purple) !important;
  border: 1px solid white !important;
  -webkit-transition: 0.3s !important;
  transition: 0.3s !important;
}
.white-btn path {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.white-btn:hover {
  background-color: var(--purple) !important;
  color: white !important;
}
.white-btn:hover path {
  fill: white !important;
}

.purple-text {
  color: var(--purple);
}

.red-text {
  color: var(--dark-red);
}

.purple-bg {
  background-color: var(--purple);
}

.purple-border {
  border-color: var(--purple) !important;
}

header {
  background-color: white;
  border-bottom: 1px solid #f0f2f5;
}
@media (max-width: 576px) {
  header .right-side .logo img {
    width: 100px;
  }
}
header .right-side .navs li {
  position: relative;
}
header .right-side .navs li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1.5px;
  background-color: var(--purple);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
header .right-side .navs li:is(:hover, .active)::after {
  width: 50%;
}
header .right-side .navs li a {
  font-size: 17px;
  font-weight: 500;
}
header .left-side .btns button {
  font-size: 16px;
  font-weight: 500;
  width: 100px;
}
header .left-side .options button,
header .left-side .options a {
  font-size: 16px;
}
header .left-side .open-sidebar {
  cursor: pointer;
}
header .dropdown-menu {
  width: 100%;
  padding: 5px !important;
  top: 15px !important;
}

.sidebar {
  background: linear-gradient(45deg, rgb(255, 220, 249), white) 50% 50% / cover
    no-repeat;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -270px;
  z-index: 1500;
  width: 270px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.sidebar.show {
  left: 0;
}
.sidebar .dropdown-menu {
  width: 100%;
  padding: 5px !important;
  top: 15px !important;
}
.sidebar .sidebar-navs li {
  font-weight: 500;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.sidebar .sidebar-navs li a {
  display: block;
}
.sidebar .sidebar-navs li:is(:hover, .active) {
  -webkit-padding-start: 5px;
  padding-inline-start: 5px;
  font-weight: 600;
  color: var(--purple);
}
.sidebar .sidebar-navs li:not(:last-child) {
  margin-bottom: 15px;
}
.sidebar .copyright {
  font-size: 12px;
}

.bottombar {
  position: fixed;
  bottom: 25px;
  background-color: white;
  width: 767px;
  max-width: 90%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 12px 50px;
  border-radius: 100px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.0823529412);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.0823529412);
  z-index: 150;
}
@media (max-width: 576px) {
  .bottombar {
    max-width: 100%;
  }
}
.bottombar .nav-box img {
  width: 25px;
}
.bottombar .nav-box .title h6 {
  font-size: 18px;
}
.bottombar .nav-box.active .title h6 {
  color: var(--purple);
}
@media (max-width: 576px) {
  .bottombar {
    bottom: 0;
    border-radius: 0;
    padding-inline: 15px;
  }
  .bottombar .nav-box img {
    width: 20px;
  }
  .bottombar .nav-box .title h6 {
    font-size: 14px;
  }
}

footer {
  background: url("../imgs/footer-bg.svg") 50% 50% / cover no-repeat;
  color: white;
}
footer .foo-links .title {
  margin-bottom: 10px;
}
footer .foo-links .title h6 {
  font-size: 16px;
  font-weight: 500;
}
footer .foo-links .links li {
  font-size: 15px;
  font-weight: 400;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
footer .foo-links .links li:not(:last-child) {
  margin-bottom: 5px;
}
footer .foo-links .links li:hover {
  font-weight: 600;
}
@media (min-width: 767px) {
  footer .foo-links .links li:hover {
    -webkit-margin-start: 5px;
    margin-inline-start: 5px;
  }
}
footer .copyright {
  font-size: 14px;
}

.how-install {
  max-width: 1100px;
  margin-inline: auto;
  background-color: #fcecf9;
}

#landing main {
  position: relative;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}
#landing main .logo {
  position: absolute;
  top: 35px;
  left: 0;
  background-color: white;
  border-radius: 0 10px 10px 0;
  padding: 20px 30px;
}
#landing main .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#landing main .mask img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
#landing main .download {
  position: absolute;
  bottom: 50px;
  left: 35px;
  color: white;
}
#landing main .download .bold {
  font-weight: 600;
}
#landing main .download a.d-none.d-lg-block {
  display: block;
  padding: 10px 25px;
  border-radius: 10px;
  border: 1px solid;
  background-color: #700c2a;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 24px;
  font-weight: 500;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 991px) {
  #landing main .logo {
    top: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
  }
  #landing main .download {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 95%;
    max-width: 300px;
  }
  #landing main .download .bold {
    display: block;
  }
}

#home::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgb(255, 191, 244);
  background: linear-gradient(
    162deg,
    rgba(255, 211, 247, 1) 0%,
    rgba(255, 255, 255, 1) 30%
  );
  z-index: -1;
  opacity: 0.5;
}

#home main #mainCarousel .carousel-indicators {
  bottom: 3rem;
}
#home main #mainCarousel .carousel-indicators [data-bs-target] {
  background-color: var(--purple);
  width: 50px;
  height: 5px;
  border-radius: 100px;
  border: none;
}
#home main #mainCarousel .carousel-control-next-icon,
#home main #mainCarousel .carousel-control-prev-icon {
  -webkit-filter: invert(1);
  filter: invert(1);
}
#home main #mainCarousel img {
  height: 50vw;
  -o-object-fit: cover;
  object-fit: cover;
  max-height: 450px;
}

#home main .title {
  max-width: 450px;
}
#home main .title p {
  max-width: 325px;
  margin-inline: auto;
}
#home main .search-box {
  border: 1px solid var(--purple);
  border-radius: 7px;
  max-width: 500px;
  margin-inline: auto;
  padding: 10px 25px;
}
#home main .search-box input {
  background-color: transparent;
  font-weight: 500;
  width: 100%;
}
#home main .sim-categories {
  max-width: 1100px;
  margin-inline: auto;
}
#home main .sim-categories .categories-navs {
  background-color: #fcecf9;
  border-radius: 15px;
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
#home main .sim-categories .categories-navs ul {
  overflow: auto;
}
#home main .sim-categories .categories-navs ul::-webkit-scrollbar {
  display: none;
}
#home main .sim-categories .categories-navs ul li a {
  display: block;
  width: 150px;
  padding: 0.5rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-weight: 500;
  text-align: center;
  border-radius: 15px;
  font-size: 16px;
}
#home main .sim-categories .categories-navs ul li a:hover {
  background-color: rgba(111, 42, 99, 0.6235294118);
  color: white;
}
#home main .sim-categories .categories-navs ul li a.active {
  background-color: var(--purple);
  color: white;
}
#home main .sim-categories .category-countries li {
  width: calc((100% - 4rem) / 5);
}
@media (max-width: 1199px) {
  #home main .sim-categories .category-countries li {
    width: calc((100% - 3rem) / 4);
  }
}
@media (max-width: 991px) {
  #home main .sim-categories .category-countries li {
    width: calc((100% - 2rem) / 3);
  }
}
@media (max-width: 767px) {
  #home main .sim-categories .category-countries li {
    width: calc((100% - 1rem) / 2);
  }
}
#home main .sim-categories .category-countries li a {
  display: block;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #f0f2f5;
  background-color: white;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#home main .sim-categories .category-countries li a .name {
  overflow: hidden;
}
#home main .sim-categories .category-countries li a .name h6 {
  font-size: 18px;
  font-weight: 600;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#home main .sim-categories .category-countries li a:hover {
  background: var(--purple);
  color: white;
}
#home main .sim-categories .show-all {
  font-weight: 500;
}
#home main .sim-categories .show-all .icon {
  font-size: 13px;
}
#home .about-banner {
  background: url("../imgs/banner-bg.png") 50% 50% / cover no-repeat;
  margin-top: 4rem;
}
@media (min-width: 1200px) {
  #home .about-banner h2 {
    font-size: 36px !important;
  }
}
#home .about-banner .about-video {
  height: 350px;
  position: relative;
}
@media (min-width: 992px) {
  #home .about-banner .about-video {
    margin-top: -100px;
  }
}
#home .about-banner .about-video .play-video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#home .key-features .faq-links .head p {
  line-height: 1;
  font-weight: 500;
}
#home .key-features .faq-links .faq-list li:not(:last-child) {
  margin-bottom: 15px;
}
#home .key-features .faq-links .faq-list li a {
  display: block;
  padding: 21px 25px;
  border-radius: 15px;
  border: 1px solid #f0f2f5;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#home .key-features .faq-links .faq-list li a .icon {
  width: 28px;
  height: 28px;
  overflow: hidden;
}
#home .key-features .faq-links .faq-list li a .icon img {
  width: 100%;
}
#home .key-features .faq-links .faq-list li a h6 {
  font-weight: 600;
  font-size: 18px;
}
#home .key-features .faq-links .faq-list li a p {
  color: rgba(0, 0, 0, 0.3137254902);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-size: 16px;
  font-weight: 500;
}
#home .key-features .faq-links .faq-list li a .arrow {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--purple);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: -ms-grid;
  display: grid;
  place-content: center;
  background-color: white;
}
#home .key-features .faq-links .faq-list li a:hover {
  background-color: #fcecf9;
  border-color: #fcecf9;
}
#home .key-features .faq-links .faq-list li a:hover p {
  color: var(--purple);
}
#home .key-features .faq-links .faq-list li a:hover .arrow {
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.0823529412);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.0823529412);
}
#home .how-works {
  background: url("../imgs/how-bg.jpg") 50% 50% / cover no-repeat;
}
#home .how-works .step-box h6 {
  font-size: 18px;
}

#country .country-banner {
  background-color: #fcecf9;
}
#country .country-banner .title h2 {
  font-weight: 500;
}
#country .country-banner .desc p {
  font-size: 12px;
  font-weight: 500;
  color: black;
}
#country .more-info ul li {
  width: calc((100% - 2rem) / 3);
}
@media (max-width: 767px) {
  #country .more-info ul li {
    width: calc((100% - 1rem) / 2);
  }
}
@media (max-width: 767px) {
  #country .more-info ul li {
    width: calc((100% - 1rem) / 2);
  }
}
@media (max-width: 576px) {
  #country .more-info ul li {
    width: 100%;
  }
}
#country .activation .activation-box {
  border: 1px solid #2aba28;
  max-width: 750px;
  padding: 10px 15px;
}
@media (max-width: 576px) {
  #country .plans .plans-list .form-group {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}
#country .plans .plans-list label {
  background-color: white;
  border: 1px solid #f0f2f5;
  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.0823529412);
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.0823529412);
  min-width: 150px;
  padding: 25px 15px 20px;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
@media (max-width: 576px) {
  #country .plans .plans-list label {
    width: 100%;
  }
}
#country .plans .plans-list label .tag {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #ff9933;
  padding: 1px 20px;
  font-size: 14px;
  color: white;
  border-radius: 0 0 15px 15px;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.062745098);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.062745098);
}
#country .plans .plans-list label .check {
  width: 20px;
  height: 20px;
  display: -ms-grid;
  display: grid;
  border-radius: 50%;
  place-content: center;
  background-color: #f0f2f5;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: white;
  font-size: 13px;
}
#country .plans .plans-list input:checked + label {
  border-color: var(--purple);
}
#country .plans .plans-list input:checked + label .check {
  background-color: var(--purple);
}
#country .pricebar {
  padding: 12px;
  border: 1px solid #fe8d2a;
}
@media (max-width: 576px) {
  #country .pricebar {
    bottom: 0 !important;
    position: fixed;
    margin-bottom: 0 !important;
    width: 100%;
    left: 0;
    background-color: white;
    border-radius: 0 !important;
  }
}
#country .pricebar .total h5 {
  font-weight: 600;
}
#country .pricebar .checkout button {
  background-color: #fe8d2a;
  border-radius: 10px;
  color: white;
  font-size: 12px;
  padding: 12px 25px;
  border: 1px solid #fe8d2a;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#country .pricebar .checkout button path {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#country .pricebar .checkout button:hover {
  background-color: white;
  color: #fe8d2a;
}
#country .pricebar .checkout button:hover path {
  fill: #fe8d2a;
}
#country .faq-links .title h2 {
  font-weight: 500;
}
#country .faq-links .title p {
  font-weight: 500;
}
#country .faq-links .faq-link a {
  display: block;
  padding: 15px 20px;
  background-color: white;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 10px;
  border: 1px solid #f0f2f5;
}
#country .faq-links .faq-link a .text {
  font-weight: 600;
  font-size: 16px;
}
#country .faq-links .faq-link a .icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--purple);
  background-color: white;
  display: -ms-grid;
  display: grid;
  place-content: center;
}
#country .faq-links .faq-link a:hover {
  background-color: #faebf7;
  border-color: #faebf7;
}
#country .faq-links .faq-link a:hover .icon {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.062745098);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.062745098);
}

.country-box {
  max-width: 675px;
}
.country-box .head h4 {
  font-weight: 500;
}
.country-box .head .coverage {
  font-size: 16px;
  color: #fe8d2a;
}
.country-box .info li .icon {
  margin-bottom: 10px;
  width: 32px;
  height: 32px;
  margin-inline: auto;
}
.country-box .info li .icon img {
  width: 100%;
}
.country-box .info li .text {
  font-weight: 500;
  font-size: 16px;
}

#auth::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgb(255, 191, 244);
  background: linear-gradient(
    162deg,
    rgba(255, 211, 247, 1) 0%,
    rgba(255, 255, 255, 1) 30%
  );
  z-index: -1;
  opacity: 0.5;
}
#auth .auth-box {
  width: 600px;
  max-width: 92%;
  margin-inline: auto;
  background-color: white;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.0823529412);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.0823529412);
  padding: 35px 25px 20px;
  border: 1px solid #f0f2f5;
  border-radius: 10px;
}
#auth .auth-box .logo img {
  width: 210px;
}
#auth .auth-box .box-title {
  max-width: 345px;
  margin-inline: auto;
}
#auth .auth-box .box-title h4 {
  font-weight: 600;
}
#auth .auth-box .box-title p {
  font-size: 16px;
}
#auth .auth-box .forget-pw {
  font-weight: 600;
}
#auth .auth-method .title {
  position: relative;
}
#auth .auth-method .title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.3137254902);
}
#auth .auth-method .title P {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  background-color: white;
  padding-inline: 10px;
  position: relative;
  z-index: 5;
}
#auth .auth-method .methods a {
  display: -ms-grid;
  display: grid;
  place-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid #eee;
  background-color: white;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.0823529412);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.0823529412);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#auth .auth-method .methods a img {
  max-width: 100%;
}
#auth .auth-method .methods a:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}
#auth .code .num-box {
  max-width: calc((100% - 3rem) / 4);
}
#auth .code .num-box input {
  width: 68px;
  height: 63px;
  max-width: 100%;
  border-radius: 12px;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.062745098);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.062745098);
  background-color: white;
  border-bottom: none;
  text-align: center;
  padding: 0;
  font-size: 27px;
}
#auth .code .num-box input.active {
  border: 1px solid var(--purple);
}

#cart .steps {
  position: relative;
  margin-bottom: 4rem;
  width: 650px;
  max-width: 95%;
  margin-inline: auto;
}
#cart .steps::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
  width: 100%;
  height: 1px;
  background-color: #f0f2f5;
}
#cart .steps .step-box {
  background-color: white;
}
#cart .steps .step-box .icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #f0f2f5;
  font-size: 12px;
  display: -ms-grid;
  display: grid;
  place-content: center;
  color: white;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#cart .steps .step-box .icon .order {
  display: none;
}
#cart .steps .step-box .title h6 {
  font-size: 18px;
}
#cart .steps .step-box.active .icon {
  background-color: var(--purple);
  color: white;
}
#cart .steps .step-box.active .icon .order {
  display: block;
}
#cart .steps .step-box.active .icon .check {
  display: none;
}
@media (min-width: 577px) {
  #cart .page-content > .row > div.right-side {
    max-width: 350px;
  }
}
#cart .cart .page-content .cart-table,
#cart .cart .page-content .bill-box {
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
@media (min-width: 768px) {
  #cart .cart .page-content .cart-table ul li.pro {
    width: 400px;
  }
  #cart .cart .page-content .cart-table ul li.quantity {
    width: 115px;
  }
}
#cart .cart .page-content .cart-table ul li.pro .pro-img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 200px;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 576px) {
  #cart .cart .page-content .cart-table ul li.pro .pro-img {
    width: 125px;
  }
}
#cart .cart .page-content .cart-table ul li.pro .pro-img img {
  width: 100%;
}
#cart .cart .page-content .cart-table ul li.pro .pro-info {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
#cart .cart .page-content .cart-table ul li.quantity .counter {
  padding: 7px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#cart .cart .page-content .cart-table ul li.quantity .counter .inc,
#cart .cart .page-content .cart-table ul li.quantity .counter .dec {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  color: #7a7a7a;
  border: 1px solid;
  font-size: 13px;
  display: -ms-grid;
  display: grid;
  place-content: center;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#cart .cart .page-content .cart-table ul li.quantity .counter .inc:hover.inc,
#cart .cart .page-content .cart-table ul li.quantity .counter .dec:hover.inc {
  background-color: #25d366;
  color: white;
}
#cart .cart .page-content .cart-table ul li.quantity .counter .inc:hover.dec,
#cart .cart .page-content .cart-table ul li.quantity .counter .dec:hover.dec {
  background-color: #c4161c;
  color: white;
}
#cart .cart .page-content .cart-table ul li.quantity .counter input {
  width: 30px;
  border: 0;
  text-align: center;
  font-weight: bold;
}
@media (max-width: 767px) {
  #cart .cart .page-content .cart-table ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.5rem !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  #cart .cart .page-content .cart-table ul li.pro {
    width: 100%;
  }
}
#cart .completed .country-box {
  max-width: none;
}

#support::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgb(255, 191, 244);
  background: linear-gradient(
    162deg,
    rgba(255, 211, 247, 1) 0%,
    rgba(255, 255, 255, 1) 30%
  );
  z-index: -1;
  opacity: 0.5;
}
#support main .title {
  max-width: 450px;
  margin-inline: auto;
}
#support main .search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
}
#support main .search form {
  max-width: 90%;
}
#support main .search .form-group {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 500px;
  max-width: 100%;
  margin-inline: center;
  border-radius: 7px;
  overflow: hidden;
}
#support main .search .icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 12px;
}
#support main .search button,
#support main .search input {
  padding: 8px 25px;
}
#support main .search input {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  border: 1px solid var(--purple);
  display: block;
  border-radius: 8px 0 0 8px;
  -webkit-padding-start: 40px;
  padding-inline-start: 40px;
  -webkit-border-end: none;
  border-inline-end: none;
}
#support main .search button {
  border-radius: 0 8px 8px 0;
}
#support main .search-categories ul {
  row-gap: 3.5rem;
}
#support main .search-categories li {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: calc((100% - 2rem) / 3);
}
@media (max-width: 991px) {
  #support main .search-categories li {
    width: calc((100% - 1rem) / 2);
  }
}
@media (max-width: 576px) {
  #support main .search-categories li {
    width: 100%;
  }
}
#support main .search-categories li a {
  display: block;
  padding: 25px;
  background-color: white;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.0823529412);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.0823529412);
  border-radius: 10px;
  border: 1px solid #f0f2f5;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#support main .search-categories li a:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}
#support main .search-categories li a .icon {
  width: 50px;
  height: 50px;
  margin-top: -50px;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--purple);
  display: -ms-grid;
  display: grid;
  place-content: center;
}
#support .recently-viwed-articles ul li a {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#support .recently-viwed-articles ul li a:hover {
  -webkit-padding-start: 25px !important;
  padding-inline-start: 25px !important;
  background-color: var(--purple);
  color: white;
}
#support .about-banner {
  background: url("../imgs/banner-bg.png") 50% 50% / cover no-repeat;
  margin-top: 4rem;
}
@media (min-width: 1200px) {
  #support .about-banner h2 {
    font-size: 36px !important;
  }
}
#support .about-banner .about-video {
  position: relative;
  height: 350px;
  border-radius: 15px;
  overflow: hidden;
}
@media (min-width: 992px) {
  #support .about-banner .about-video {
    margin-bottom: -100px;
  }
}
#support .about-banner .about-video .play-video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: none;
}

#faqs .faqs-list ul li a {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#faqs .faqs-list ul li a:hover {
  -webkit-padding-start: 25px !important;
  padding-inline-start: 25px !important;
  background-color: var(--purple);
  color: white;
}
#faqs .faqs-list .see-all a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

#article .article ol {
  -webkit-padding-start: 15px;
  padding-inline-start: 15px;
}
#article .article ol li {
  list-style: decimal;
}
#article .faqs-list ul li a {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#article .faqs-list ul li a:hover {
  -webkit-padding-start: 25px !important;
  padding-inline-start: 25px !important;
  background-color: var(--purple);
  color: white;
}

@media (max-width: 991px) {
  .usage-box .second {
    border: none !important;
  }
}

#dashboard .main-row > div.left-side {
  max-width: 275px;
}
#dashboard .dashboard .country-box {
  max-width: none;
}
@media (min-width: 500px) {
  #dashboard .dashboard .address-container {
    max-width: 275px;
  }
}
#dashboard .dashboard .address-box .edit a {
  background-color: white;
  color: var(--purple);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid var(--purple);
  font-size: 18px;
  font-weight: 500;
}
#dashboard .dashboard .address-box .edit a:hover {
  background-color: var(--purple);
  color: white;
}
#dashboard .dashboard .info-table .view a {
  background-color: white;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: #f16f21;
  border: 1px solid #f16f21;
  padding: 7px 25px;
  font-size: 14px;
}
#dashboard .dashboard .info-table .view a:hover {
  background-color: #f16f21;
  color: white;
}
#dashboard .dashboard-navs .close-dash-navs {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 20px;
}
#dashboard .dashboard-navs .body ul li a {
  display: block;
  padding: 12px 25px;
  border-radius: 50px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#dashboard .dashboard-navs .body ul li a:is(:hover, .active) {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#fff5fe),
    to(white)
  );
  background: linear-gradient(0deg, #fff5fe, white);
}
#dashboard .dashboard-navs .body ul li.sign-out a {
  background-color: #fce5e8;
  color: red;
  max-width: 80%;
  margin-inline: auto;
}
#dashboard .dashboard-navs .body ul li.sign-out a:hover {
  background: red;
  color: white;
}
@media (max-width: 991px) {
  #dashboard .dashboard-navs {
    width: 300px;
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    z-index: 1500;
    overflow: auto;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  #dashboard .dashboard-navs.show {
    left: 0;
  }
}
#dashboard .my-esim .select2-container .select2-selection--single {
  border-radius: 10px;
  border-color: #dee2e6;
}
#dashboard .my-esim .select2-container--open .select2-selection--single {
  border-radius: 10px 10px 0 0;
}
#dashboard .my-esim .select2-container .select2-selection--single,
#dashboard .my-esim span.select2 {
  width: 110px !important;
}
#dashboard
  .my-esim
  .select2-container
  .select2-selection--single
  .select2-selection__rendered,
#dashboard .my-esim span.select2 .select2-selection__rendered {
  line-height: 35px;
}
#dashboard
  .my-esim
  .select2-container
  .select2-selection--single
  .select2-selection__arrow,
#dashboard .my-esim span.select2 .select2-selection__arrow {
  height: 52px;
}
#dashboard .my-esim .categories-navs {
  background-color: #fcecf9;
  border-radius: 15px;
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
#dashboard .my-esim .categories-navs ul {
  overflow: auto;
}
#dashboard .my-esim .categories-navs ul::-webkit-scrollbar {
  display: none;
}
#dashboard .my-esim .categories-navs ul li a {
  display: block;
  width: 125px;
  padding: 0.5rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-weight: 500;
  text-align: center;
  border-radius: 15px;
  font-size: 16px;
}
#dashboard .my-esim .categories-navs ul li a:hover {
  background-color: rgba(111, 42, 99, 0.6235294118);
  color: white;
}
#dashboard .my-esim .categories-navs ul li a.active {
  background-color: var(--purple);
  color: white;
}
#dashboard .my-esim .content-head .right-side {
  width: 110px;
}
#dashboard .my-esim .country-box {
  max-width: none;
}
#dashboard .my-esim .country-box .percentage {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
@media (min-width: 1200px) {
  #dashboard .my-esim .country-box .percentage {
    -webkit-border-start: 1px solid #ccc;
    border-inline-start: 1px solid #ccc;
    -webkit-padding-start: 20px;
    padding-inline-start: 20px;
  }
}
@media (max-width: 400px) {
  #dashboard .my-esim .country-box .actions {
    margin-top: 20px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
#dashboard .account .info-box {
  position: relative;
}
#dashboard .account .info-box .edit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}
#dashboard .account .info-box ul li .title h6 {
  font-weight: 500;
}
#dashboard .account .info-box ul li .text {
  font-weight: 600;
  font-size: 16px;
}
#dashboard .account .info-box ul li:not(:last-child) {
  margin-bottom: 20px;
}
#dashboard .notifications .notification-box {
  border: 1px solid #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#dashboard .notifications .notification-box .head .text {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#dashboard .notifications .notification-box .date {
  color: #7e7c7c;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#dashboard .notifications .notification-box:hover {
  border-color: var(--purple);
}
#dashboard .notifications .notification-box:hover .head .text,
#dashboard .notifications .notification-box:hover .head .date {
  color: var(--purple);
}
@media (min-width: 991px) {
  #dashboard .help .right-side {
    max-width: calc(100% - 275px);
  }
}
#dashboard .help .create-ticket button {
  background-color: #fff8fe;
  color: var(--purple);
  border: 1px solid var(--purple);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#dashboard .help .create-ticket button:hover {
  background-color: var(--purple);
  color: white;
}
#dashboard .help .help-tabs ul {
  max-width: 100%;
}
#dashboard .help .help-tabs ul li {
  max-width: calc((100% - 3rem) / 4);
}
#dashboard .help .help-tabs ul li a {
  display: block;
  width: 105px;
  max-width: 100%;
  padding: 3px;
  background-color: white;
  color: #91969e;
  border-radius: 50px;
  border: 1px solid;
  text-align: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-size: 14px;
}
#dashboard .help .help-tabs ul li a:is(.active, :hover) {
  border-width: 2px;
  font-weight: bold;
}
#dashboard .help #table {
  width: 100%;
  overflow: auto;
}
#dashboard .help #table::-webkit-scrollbar-thumb {
  background-color: var(--purple);
}
#dashboard .help #table::-webkit-scrollbar-track {
  background-color: #f4f5f6;
}
#dashboard .help .help-table {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
#dashboard .help .help-table .thead {
  padding: 1.25rem;
  padding-bottom: 0.5rem;
  border-radius: 7px 7px 0 0;
  border: 1px solid #f4f5f6;
}
#dashboard .help .help-table .tbody {
  border-radius: 0 0 7px 7px;
  border: 1px solid #f4f5f6;
  border-top: none;
}
#dashboard .help .help-table .trow a {
  display: block;
  padding: 1.25rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#dashboard .help .help-table .trow a:hover {
  background-color: #fff8fe;
}
#dashboard .help .help-table .trow a:not(:last-child) {
  border-bottom: 1px solid #f4f5f6;
}
#dashboard .help .help-table ul li {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
#dashboard .help .help-table ul li.code {
  width: 120px;
}
#dashboard .help .help-table ul li.code span {
  display: block;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#dashboard .help .help-table ul li.title {
  width: 370px;
  overflow: hidden;
}
#dashboard .help .help-table ul li.title h6 {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#dashboard .help .help-table ul li.date {
  width: 130px;
}
#dashboard .help .help-table ul li.status-col {
  width: 110px;
}
#dashboard .help .help-table ul li.status-col .status {
  width: 105px;
  display: block;
  padding: 3px;
  text-align: center;
  border: 1px solid;
  border-radius: 50px;
  color: #f16f21;
  background-color: white;
}
#dashboard .help .help-table ul li.status-col .status.done {
  color: #0f993e;
}
#dashboard .help .help-table ul li.status-col .status.pending {
  color: #fdbd21;
}
#dashboard .help .help-table ul li.actions button {
  width: 39px;
  height: 39px;
  border-radius: 8px;
  border: 1px solid #91969e;
  position: relative;
}
#dashboard .help .help-table ul li.actions button img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 24px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#dashboard .help .help-table ul li.actions button img.colored {
  opacity: 0;
}
#dashboard .help .help-table ul li.actions button::before {
  width: 60px;
  padding: 1px;
  border-radius: 50px;
  background-color: #f16f21;
  position: absolute;
  top: -30px;
  left: 50%;
  font-size: 12px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: white;
}
#dashboard .help .help-table ul li.actions button::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top: 4px solid #f16f21;
}
#dashboard .help .help-table ul li.actions button.details::before {
  content: "Details";
}
#dashboard .help .help-table ul li.actions button.replies::before {
  content: "Replies";
}
#dashboard .help .help-table ul li.actions button::before,
#dashboard .help .help-table ul li.actions button::after {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}
#dashboard .help .help-table ul li.actions button:hover {
  border-color: #fe8d2a;
}
#dashboard .help .help-table ul li.actions button:hover img {
  opacity: 0;
}
#dashboard .help .help-table ul li.actions button:hover img.colored {
  opacity: 1;
}
#dashboard .help .help-table ul li.actions button:hover::before,
#dashboard .help .help-table ul li.actions button:hover::after {
  opacity: 1;
  visibility: visible;
}
#dashboard .help .help-table ul li.actions.opinion button {
  border: none;
}
#dashboard .help .help-table ul li.actions.opinion button img {
  max-width: 35px;
}
#dashboard .help .help-table ul li.actions.opinion button::before {
  width: 125px;
  z-index: 10;
  top: -48px;
}
#dashboard .help .help-table ul li.actions.opinion button.good::before {
  content: "You are satisfied with the service";
}
#dashboard .help .help-table ul li.actions.opinion button.bad::before {
  content: "You are not satisfied with the service";
}
#dashboard .help .help-table ul li.actions.opinion button.active img {
  opacity: 0;
}
#dashboard .help .help-table ul li.actions.opinion button.active img.colored {
  opacity: 1;
}

.select2-dropdown {
  border-color: #dee2e6;
}

@media (min-width: 1199px) {
  #sim-details .sim-details > .container {
    max-width: 1075px !important;
  }
}
#sim-details .country-box {
  max-width: none;
}
#sim-details .country-box .info li .text {
  font-size: 16px;
}
#sim-details .install .install-box {
  display: block;
  padding: 13px 25px;
  border-radius: 15px;
  border: 1px solid #f0f2f5;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#sim-details .install .install-box .icon {
  width: 28px;
  height: 28px;
  overflow: hidden;
}
#sim-details .install .install-box .icon img {
  width: 100%;
}
#sim-details .install .install-box h6 {
  font-weight: 600;
  font-size: 16px;
}
#sim-details .install .install-box p {
  color: rgba(0, 0, 0, 0.3137254902);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-size: 16px;
  font-weight: 500;
}
#sim-details .install .install-box .arrow {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--purple);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: -ms-grid;
  display: grid;
  place-content: center;
  background-color: white;
}
#sim-details .install .install-box:hover {
  background-color: #fcecf9;
  border-color: #fcecf9;
}
#sim-details .install .install-box:hover p {
  color: var(--purple);
}
#sim-details .install .install-box:hover .arrow {
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.0823529412);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.0823529412);
}
#sim-details .data-usage .topup a {
  background-color: #fe8d2a;
  color: white;
  border: 1px solid #fe8d2a;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#sim-details .data-usage .topup a:hover {
  color: #fe8d2a;
  background-color: white;
}
#sim-details .faq-links .title h2 {
  font-weight: 500;
}
#sim-details .faq-links .title p {
  font-weight: 500;
}
#sim-details .faq-links .faq-link a {
  display: block;
  padding: 15px 20px;
  background-color: white;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 10px;
  border: 1px solid #f0f2f5;
}
#sim-details .faq-links .faq-link a .text {
  font-weight: 600;
  font-size: 16px;
}
#sim-details .faq-links .faq-link a .icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--purple);
  background-color: white;
  display: -ms-grid;
  display: grid;
  place-content: center;
}
#sim-details .faq-links .faq-link a:hover {
  background-color: #faebf7;
  border-color: #faebf7;
}
#sim-details .faq-links .faq-link a:hover .icon {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.062745098);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.062745098);
}

.modal-dialog {
  position: fixed;
  width: 100%;
  max-width: 90%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 auto;
}

.countries-modal {
  width: 385px !important;
  max-width: 90% !important;
}
.countries-modal .search-input {
  position: relative;
  width: 100%;
}
.countries-modal .search-input input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding-block: 8px;
  -webkit-padding-start: 55px;
  padding-inline-start: 55px;
  -webkit-padding-end: 20px;
  padding-inline-end: 20px;
}
.countries-modal .search-input .icon {
  position: absolute;
  top: 50%;
  left: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.countries-modal .countries-list {
  max-height: 420px;
  overflow: auto;
}
.countries-modal .countries-list::-webkit-scrollbar-thumb {
  background-color: #f16f21;
}

.create-ticket-modal {
  width: 385px !important;
  max-width: 90% !important;
}
.create-ticket-modal .form-group {
  position: relative;
}
.create-ticket-modal .form-group input,
.create-ticket-modal .form-group textarea {
  width: 100%;
  border: 1px solid #91969e;
  border-radius: 8px;
  padding: 10px 15px;
}
.create-ticket-modal .form-group input:is(:focus, :focus-visible),
.create-ticket-modal .form-group textarea:is(:focus, :focus-visible) {
  border-color: var(--purple);
  outline: none;
}
.create-ticket-modal .form-group label {
  position: absolute;
  top: -7px;
  left: 25px;
  font-size: 14px;
  background-color: white;
  padding-inline: 3px;
  color: #91969e;
  line-height: 1;
}

.help-details-modal {
  max-width: 1100px;
  margin-inline: auto;
}
.help-details-modal .help-box {
  padding: 20px;
  border: 1px solid #f0f2f5;
  border-radius: 10px;
}
.help-details-modal .help-box .avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #f0f2f5;
  overflow: auto;
  display: -ms-grid;
  display: grid;
  place-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.help-details-modal .help-box .avatar img {
  max-width: 95%;
  border-radius: 50%;
}
.help-details-modal .help-box .date,
.help-details-modal .help-box .desc {
  color: #8a90a3;
}

.share-esim-modal {
  width: 500px !important;
  max-width: 90% !important;
}
.share-esim-modal .modal-body {
  max-height: 70vh;
  overflow: auto;
}

.install-esim-modal {
  width: 500px !important;
  max-width: 90% !important;
}
.install-esim-modal .modal-body {
  max-height: 70vh;
  overflow: auto;
}
.install-esim-modal .modal-body .name,
.install-esim-modal .modal-body .share {
  border: 1px solid var(--purple);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.install-esim-modal .modal-body .name p,
.install-esim-modal .modal-body .share p {
  line-height: 1;
}
.install-esim-modal .modal-body .name:hover,
.install-esim-modal .modal-body .share:hover {
  background-color: var(--purple);
  color: white;
}

.setup-guide-modal {
  width: 500px !important;
  max-width: 90% !important;
}
.setup-guide-modal .modal-title .icon {
  font-size: 45px;
}
.setup-guide-modal .modal-body {
  max-height: 70vh;
  overflow: auto;
}
.setup-guide-modal .modal-body .options button {
  border: 1px solid var(--purple);
  background-color: white;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.setup-guide-modal .modal-body .options button:hover {
  background-color: var(--purple);
  color: white;
}

.select-device-modal {
  width: 500px !important;
  max-width: 90% !important;
}
.select-device-modal .modal-title .icon {
  font-size: 55px;
}
.select-device-modal .modal-body {
  max-height: 70vh;
  overflow: auto;
}
.select-device-modal .devices-list .row > div {
  padding-bottom: 0.75rem;
}
@media (min-width: 576px) {
  .select-device-modal .devices-list .row > div:nth-child(odd) {
    -webkit-padding-end: 0.75rem !important;
    padding-inline-end: 0.75rem !important;
  }
}
.select-device-modal .devices-list button {
  border: 1px solid var(--purple);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.select-device-modal .devices-list button:hover {
  background-color: var(--purple);
  color: white;
}

.manual-install-modal {
  width: 500px !important;
  max-width: 90% !important;
}
.manual-install-modal .modal-body {
  max-height: 70vh;
  overflow: auto;
}
.manual-install-modal .open-install-guide button {
  background-color: whtie;
  border: 1px solid var(--purple);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.manual-install-modal .open-install-guide button:hover {
  color: white;
  background-color: var(--purple);
}
.manual-install-modal .manual-installation-details label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5215686275);
}
.manual-install-modal .manual-installation-details .input-box {
  position: relative;
}
.manual-install-modal .manual-installation-details .input-box input {
  padding: 10px;
  border: 1px solid #ccc;
  width: 100%;
  border-radius: 7px;
}
.manual-install-modal .manual-installation-details .input-box .icons {
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.btn-close {
  font-size: 12px;
}

.percentage {
  position: relative;
  height: 100px;
}
@media (max-width: 400px) {
  .percentage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
.percentage .progress {
  background-color: transparent;
  position: relative;
  margin: 4px;
  text-align: center;
  height: 100%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.percentage .barOverflow {
  /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 180px;
  height: 90px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}
.percentage .text {
  position: absolute;
  top: 65%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: 32px;
}
.percentage .bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px; /* full circle! */
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 8px solid #eee; /* half gray, */
  border-bottom-color: #fe8d2a; /* half azure */
  border-right-color: #fe8d2a;
}

.qr-box {
  position: relative;
  text-align: center;
}
.qr-box .qr.blur img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
.qr-box .know-install {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid var(--purple);
  width: 250px;
  max-width: 100%;
  font-size: 13px;
  color: var(--purple);
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.667);
}

.icons .copy {
  cursor: pointer;
}
.icons .hide {
  display: none;
}

.qr-actions .share,
.qr-actions .guide {
  width: 185px;
  max-width: calc(50% - 0.5rem);
}
.qr-actions .share button,
.qr-actions .guide button {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.qr-actions .share button:hover,
.qr-actions .guide button:hover {
  background-color: rgba(152, 87, 141, 0.1843137255);
}

.install-guides a {
  border: 1px solid var(--purple);
  background-color: white;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.install-guides a:hover {
  background-color: var(--purple);
  color: white;
}

.box-details,
.install-guides {
  font-size: 14px;
}

.option-list .option-box {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.option-list .option-box .opt-img {
  width: 115px;
  height: 80px;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 4px;
}
.option-list .option-box .opt-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.option-list .option-box .opt-title {
  font-weight: 500;
}
.option-list .option-box:is(:hover),
.option-list input:checked + label {
  border-color: var(--purple) !important;
}
.option-list .option-box:is(:hover) .opt-title,
.option-list input:checked + label .opt-title {
  color: var(--purple);
}

.agree-terms label {
  font-weight: 600;
}

.not-found {
  min-height: calc(100vh - 300px);
  display: -ms-grid;
  display: grid;
  place-content: center;
}
.not-found img {
  max-width: 85%;
}
.grecaptcha-badge {
  visibility: hidden;
}