/* [project]/app/[locale]/globals.css [app-client] (css) */
:root {
  --main-color: #0d8dce;
  --secondary-color: #000;
  --main-text-color: #4d4d4d;
  --sec-text-color: #6e6e6e;
  --trans: all .3s ease-in-out;
  --btn-rad: 25px;
  --buy-btn-color: #5cb45b;
  --main-warning-color: #ff8d02;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding-x: 1rem;
}

* {
  box-sizing: border-box;
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  color: var(--main-text-color);
  background: #fff;
}

.country-card a, .modules-categs a, .modules-categs .nav-link, .country-card-container a, .country-card a *, .country-card-container a * {
  color: inherit;
  transition: var(--trans);
  text-decoration: none !important;
}

.country-name {
  color: var(--main-text-color);
  text-decoration: none !important;
}

.country-card .country-name, .country-card-container .country-name, .country-card a:hover, .country-card a:focus, .country-card a:active, .country-card a:visited {
  text-decoration: none !important;
}

.country-card a:hover .country-name, .country-card a:focus .country-name, .modules-categs a:hover, .modules-categs a:focus, .modules-categs .nav-link:hover, .modules-categs .nav-link:focus, .modules-categs .nav-link.active {
  color: var(--main-color);
  text-decoration: none !important;
}

.country-card a:visited, .modules-categs a:visited, .modules-categs .nav-link:visited {
  color: inherit;
  text-decoration: none !important;
}

.country-card a:visited .country-name {
  color: var(--main-text-color);
}

.country-card .fw-semibold, .country-card span, .country-name.fw-semibold, a .country-name, a > div > div > div > span.country-name, .col-12.col-sm-6.col-md-4.col-lg-3 a, .col-12.col-sm-6.col-md-4.col-lg-3 a:hover, .col-12.col-sm-6.col-md-4.col-lg-3 a:focus, .col-12.col-sm-6.col-md-4.col-lg-3 a:visited, .col-12.col-sm-6.col-md-4.col-lg-3 a:active, .col-12.col-sm-6.col-md-4.col-lg-3 a * {
  text-decoration: none !important;
}

header {
  z-index: 100;
  position: relative;
}

.open-in-app {
  background: linear-gradient(90deg, #00bffc 0%, #0073f6 100%);
  padding: 10px 0;
}

.open-in-app .box {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.open-in-app a {
  flex: 1;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.open-in-app .info {
  align-items: center;
  gap: 15px;
  display: flex;
}

.open-in-app .icon {
  justify-content: center;
  align-items: center;
  display: flex;
}

.open-in-app .desc {
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

.open-in-app .desc p {
  margin: 0;
  display: inline;
}

.open-in-app .close {
  color: #fff;
  cursor: pointer;
  padding: 0 10px;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  transition: opacity .3s;
}

.open-in-app .close:hover {
  opacity: .8;
}

@media (max-width: 768px) {
  .open-in-app {
    padding: 8px 0;
  }

  .open-in-app .desc {
    font-size: 12px;
  }

  .open-in-app .icon svg {
    width: 20px;
    height: 20px;
  }

  .open-in-app .info {
    gap: 10px;
  }
}

.navbar {
  padding: .5rem 0;
}

.navbar-brand {
  padding: 0 !important;
}

.navbar-brand img {
  width: auto;
  height: auto;
}

.navbar-nav {
  flex-direction: row;
  gap: 1rem;
}

.login-btn {
  cursor: pointer;
  gap: 8px;
  transition: all .3s ease-in-out;
  background-color: var(--main-color) !important;
  color: #fff !important;
  border-radius: var(--btn-rad) !important;
  border: none !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 150px !important;
  padding: 9px 19px !important;
  display: inline-flex !important;
}

.login-btn:hover {
  opacity: .9;
}

.nav-link {
  color: var(--main-text-color);
  cursor: pointer;
}

.site-language {
  z-index: 101;
  justify-content: flex-end;
  display: flex;
  position: relative;
}

.site-language button {
  color: var(--main-text-color);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  padding: .5rem 1rem;
  transition: color .3s ease-in-out;
  display: flex;
}

.site-language button:hover {
  color: var(--main-color);
}

.site-language ul {
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  min-width: 160px;
  margin-top: .25rem;
  margin-left: 0;
  padding: .5rem 0;
  list-style: none;
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  box-shadow: 0 2px 10px #0000001a;
}

.site-language ul li {
  list-style: none;
}

.site-language ul li a {
  color: var(--main-text-color);
  cursor: pointer;
  align-items: center;
  padding: .5rem 1.5rem;
  text-decoration: none;
  transition: all .3s ease-in-out;
  display: flex;
}

.site-language ul li a:hover {
  color: var(--main-color);
  background-color: #f8f9fa;
}

.site-language img {
  margin-right: 10px;
}

.banner {
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0 0 250px 250px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  display: flex;
  position: relative;
  top: -100px;
}

.banner .layer {
  background-color: #7070700d;
  border-radius: 0 0 250px 250px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.banner > * {
  z-index: 2;
  position: relative;
}

.banner-title {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  font-size: 32px;
  font-weight: bold;
}

.all-module-search {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 56px;
  align-items: center;
  width: 90%;
  max-width: 600px;
  padding: 13px 20px;
  display: flex;
  box-shadow: 0 2px 8px #0000001a;
}

.all-module-search svg {
  flex-shrink: 0;
}

.all-module-search .input-field {
  color: #5a5a61;
  background-color: #0000;
  border: none;
  outline: none;
  width: 100%;
  margin-left: 10px;
  font-size: 16px;
}

.all-module-search .input-field::placeholder {
  color: #5a5a61;
}

.modules {
  z-index: 8;
  border-radius: 30px;
  margin: auto auto 0;
  position: relative;
  top: -134px;
}

nav.modules-nav {
  justify-content: center;
  max-width: 955px;
  margin: auto;
}

nav.modules-nav .modules-container {
  background-color: #efefef;
  border-radius: 30px;
  justify-content: space-around;
  align-items: center;
  height: 54px;
  display: flex;
}

nav.modules-nav .modules-container a {
  color: var(--main-text-color);
  transition: var(--trans);
  border-radius: 30px;
  align-items: center;
  padding: 13px 33px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
}

nav.modules-nav .modules-container a.active {
  border: 1px solid var(--main-color);
  background-color: #fff;
  font-weight: bold;
  color: var(--main-color) !important;
}

.modules-categs {
  z-index: 3;
  justify-content: flex-start;
  margin-top: -80px;
  padding-top: 0;
  display: flex;
  position: relative;
}

.mobile-categ {
  gap: 9px;
  display: flex;
}

.modules-categs a {
  text-align: center;
  color: #828282;
  width: fit-content;
  transition: var(--trans);
  background: #fff;
  border: 1px solid #e8f7ff;
  border-radius: 50px;
  margin-inline-end: 9px;
  padding: 15px 40px;
  font-size: 16px;
}

.modules-categs a.active {
  background-color: #e8f7ff;
  font-weight: bold;
  color: var(--main-color) !important;
}

.modules-categs a:not(.active):hover {
  opacity: .8;
  background-color: #e8f7ff;
  color: var(--main-color) !important;
}

.text-color {
  color: var(--main-text-color) !important;
}

.country-card {
  cursor: pointer;
  transition: var(--trans);
  background-color: #f5f5f5;
  border-radius: 15px;
  height: 100%;
  position: relative;
}

.country-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px #0000001a;
}

.country-card-container {
  padding: 17px;
}

.country-card .info {
  align-items: center;
  display: flex;
}

.country-card .info img {
  border-radius: 4px;
  margin-inline-end: 10px;
  width: 35px !important;
  height: 35px !important;
}

.country-name {
  font-size: 18px;
  font-weight: 300;
}

.supports-local-calling {
  inset-inline-end: 16px;
  color: #1cb263;
  text-align: center;
  background-color: #f0faf5;
  border: 4px solid #fff;
  border-radius: 50px;
  width: 140px;
  padding: 2px;
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  top: -16px;
}

.view-more-module-btn {
  text-transform: capitalize;
  width: 270px;
  color: var(--main-text-color);
  transition: var(--trans);
  background: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 30px;
  padding: 15px 25px;
  font-weight: bold;
}

.view-more-module-btn:hover {
  color: #fff;
  background-color: var(--main-color);
}

.main-footer {
  background-color: #f8f9fa;
  border-radius: 150px 150px 0 0;
  margin-top: 100px;
  padding: 60px 0 30px;
}

.footer-nav {
  gap: 15px;
  margin-top: 20px;
  display: flex;
}

.footer-nav a {
  color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: inline-flex;
}

.bottom-menu {
  z-index: 1000;
  background: #fff;
  padding: 10px 0;
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -2px 10px #0000001a;
}

.bottom-menu-link {
  color: var(--sec-text-color);
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  text-decoration: none;
  display: flex;
}

@media (max-width: 992px) {
  header {
    padding: 10px 0 !important;
  }

  .navbar-brand img {
    width: 120px;
    height: auto;
  }

  .navbar-nav {
    gap: .5rem;
  }

  .banner {
    border-radius: 0 0 150px 150px;
    min-height: 300px;
    padding: 60px 0 80px !important;
  }

  .banner .layer {
    border-radius: 0 0 150px 150px;
  }

  .banner-title {
    padding: 0 20px;
    font-size: 24px;
  }

  .all-module-search {
    width: 95%;
  }

  .modules {
    top: -100px;
  }

  nav.modules-nav {
    max-width: 100%;
  }

  nav.modules-nav .modules-container {
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
    padding: 10px;
  }

  nav.modules-nav .modules-container a {
    flex: 45%;
    justify-content: center;
    padding: 10px 15px;
    font-size: 14px;
  }

  .modules-categs {
    margin-top: -60px;
  }

  .modules-categs a {
    padding: 12px 25px;
    font-size: 14px;
  }

  .module-categ-content {
    margin-top: 40px;
  }

  .country-card-container {
    padding: 12px;
  }

  .country-name {
    font-size: 16px;
  }

  .bottom-menu {
    display: block;
  }

  .main-footer {
    padding-bottom: 80px;
  }
}

@media (max-width: 768px) {
  .navbar-brand img {
    width: 100px;
  }

  .login-btn {
    font-size: 14px;
    min-width: 120px !important;
    padding: 7px 15px !important;
  }

  .login-btn svg {
    width: 16px;
    height: 16px;
  }

  .site-language button {
    padding: .25rem .5rem;
    font-size: 14px;
  }

  .site-language button img {
    width: 20px;
    height: 20px;
  }

  .site-language ul {
    min-width: 140px;
    right: -10px;
  }

  .banner {
    border-radius: 0 0 100px 100px;
    min-height: 250px;
    padding: 40px 0 60px !important;
  }

  .banner .layer {
    border-radius: 0 0 100px 100px;
  }

  .banner-title {
    font-size: 20px;
    margin-top: 0 !important;
  }

  .banner p {
    font-size: 14px;
  }

  .all-module-search {
    padding: 10px 15px;
  }

  .all-module-search .input-field {
    font-size: 14px;
  }

  .modules {
    top: -80px;
  }

  nav.modules-nav .modules-container a {
    flex: 48%;
    padding: 8px 12px;
    font-size: 12px;
  }

  nav.modules-nav .modules-container a img {
    width: 20px;
    height: auto;
  }

  .modules-categs {
    margin-top: -40px;
  }

  .mobile-categ {
    justify-content: center;
    width: 100%;
  }

  .modules-categs a {
    flex: 1;
    padding: 10px 20px;
    font-size: 13px;
  }

  .module-categ-content h2 {
    font-size: 18px;
  }

  .country-card .info img {
    width: 30px !important;
    height: 30px !important;
  }

  .country-name {
    font-size: 14px;
  }

  .supports-local-calling {
    width: 120px;
    padding: 1px;
    font-size: 10px;
  }

  .view-more-module-btn {
    width: 100%;
    max-width: 250px;
  }
}

@media (max-width: 576px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .navbar {
    flex-wrap: wrap;
  }

  .navbar-brand {
    flex: 1;
  }

  .navbar-brand img {
    width: 90px;
  }

  .d-flex.flex-grow-1 {
    flex-basis: 100%;
    margin-top: 10px;
  }

  .navbar-nav {
    justify-content: space-between;
    width: 100%;
  }

  .login-btn {
    width: 100%;
    margin-bottom: 10px;
  }

  .site-language {
    width: 100%;
  }

  .site-language button {
    justify-content: center;
    width: 100%;
  }

  .site-language ul {
    width: 100%;
    left: 0;
    right: 0;
  }

  .banner {
    border-radius: 0 0 50px 50px;
    padding: 60px 0 50px !important;
  }

  .banner .layer {
    border-radius: 0 0 50px 50px;
  }

  .banner-title {
    font-size: 18px;
    line-height: 1.4;
  }

  .modules {
    top: -90px;
  }

  nav.modules-nav .modules-container {
    padding: 8px;
  }

  nav.modules-nav .modules-container a {
    flex: 48%;
    padding: 8px 10px;
    font-size: 11px;
  }

  nav.modules-nav .modules-container a img {
    margin: 0;
  }

  .modules-categs {
    margin-top: -30px;
  }

  .modules-categs a {
    padding: 8px 15px;
    font-size: 12px;
  }

  .module-categ-content {
    margin-top: 30px;
  }

  .footer-nav {
    justify-content: center;
  }

  .footer-nav a {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 375px) {
  .banner-title {
    font-size: 16px;
  }

  nav.modules-nav .modules-container a {
    padding: 6px 8px;
    font-size: 10px;
  }

  .modules-categs a {
    padding: 6px 12px;
    font-size: 11px;
  }

  .country-name {
    font-size: 13px;
  }
}

.visually-hidden {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.main-footer {
  background-color: #f8f9fa;
  margin-top: 100px;
  padding: 60px 0 30px;
}

.footer-top {
  margin-bottom: 20px;
}

.footer-item {
  margin-bottom: 30px;
}

.footer-logo {
  display: inline-block;
}

.footer-tagline {
  color: var(--main-text-color);
  margin-top: 1.5rem;
  font-size: 16px;
  line-height: 1.8;
}

.footer-nav {
  align-items: center;
  margin-top: 20px;
  display: flex;
}

.footer-nav a {
  margin-inline-end: 30px;
}

.footer-nav a path, .footer-nav a circle {
  fill: var(--main-color);
}

.social-media-links {
  align-items: center;
  display: flex;
}

.footer-nav .social-icon {
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: transform .3s;
  display: inline-flex;
}

.footer-nav .social-icon:hover {
  transform: scale(1.1);
}

.footer-nav .social-icon svg {
  width: 30px;
  height: 30px;
}

.footer-nav .social-icon svg path, .footer-nav .social-icon svg circle {
  transition: fill .3s;
}

.footer-nav .facebook-ico:hover svg path {
  fill: #1877f2;
}

.footer-nav .instagram-ico:hover svg path, .footer-nav .instagram-ico:hover svg circle {
  fill: #e1306c;
}

.footer-nav .twitter-ico:hover svg path {
  fill: #333446;
}

.footer-nav .youtube-ico:hover svg path {
  fill: red;
}

.footer-nav .linked-ico:hover svg path {
  fill: #0077b5;
}

.footer-links-row {
  margin-top: 0;
}

.footer-list {
  margin-bottom: 30px;
}

.footer-list ul {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.footer-list li:not(:last-child) {
  margin-bottom: 15px;
}

.footer-list li:hover {
  color: var(--main-color);
}

.footer-heading {
  color: var(--main-text-color);
  margin-bottom: 20px;
  font-size: 18px;
}

.footer-link {
  color: var(--main-text-color);
  transition: var(--trans);
  padding: 5px 0;
  text-decoration: none;
  display: inline-block;
}

.footer-link:hover {
  text-decoration: none;
  color: var(--main-color) !important;
}

.footer-list .nav-link:hover {
  color: var(--main-color) !important;
}

.footer-downloads {
  flex-direction: column;
  gap: 15px;
  display: flex;
}

.download {
  transition: var(--trans);
  color: var(--main-text-color);
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 50px;
  align-items: center;
  gap: 0;
  margin-bottom: 15px;
  padding: 13px 25px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 2px 8px #0000000d;
}

.download:hover {
  border-color: var(--main-color);
  background: var(--main-color);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #00000026;
  color: #fff !important;
}

.download:hover .download-desc, .download:hover .download-desc span {
  color: #fff !important;
}

.download:hover .download-icon {
  background: #fff;
}

.download .download-icon {
  width: 50px;
  height: 50px;
  transition: var(--trans);
  background: #f8f8f8;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-inline-end: 15px;
  padding: 12px;
  display: flex;
}

.download .download-icon svg {
  width: 26px;
  height: 26px;
  transition: var(--trans);
}

.download-desc {
  color: var(--main-text-color);
  flex-direction: column;
  line-height: 1.4;
  display: flex;
}

.download-desc span {
  display: block;
}

.download-desc span:first-child {
  color: var(--sec-text-color);
  font-size: 11px;
  font-weight: 400;
}

.download-desc span:last-child {
  color: var(--main-text-color);
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 992px) {
  .main-footer {
    margin-top: 50px;
    padding: 40px 0 80px;
  }

  .footer-item {
    margin-bottom: 20px;
  }

  .footer-heading {
    margin-top: 20px;
    font-size: 18px;
  }

  .footer-links-row {
    margin-top: 30px;
  }
}

@media (max-width: 576px) {
  .main-footer {
    margin-top: 40px;
    padding: 30px 0 80px;
  }

  .footer-heading {
    margin-bottom: 15px;
    font-size: 16px;
  }

  .footer-tagline {
    font-size: 14px;
  }

  .footer-nav .social-link, .footer-nav .social-icon {
    width: 35px;
    height: 35px;
  }

  .download {
    padding: 10px 18px;
  }

  .download .download-icon {
    width: 45px;
    height: 45px;
    padding: 10px;
  }

  .download .download-icon svg {
    width: 22px;
    height: 22px;
  }

  .download-desc span:first-child {
    font-size: 10px;
  }

  .download-desc span:last-child {
    font-size: 13px;
  }

  .footer-list ul {
    margin-top: 0 !important;
  }

  .footer-list ul li {
    margin-bottom: 8px;
  }

  .footer-link {
    font-size: 14px;
  }

  .footer-item {
    margin-bottom: 40px !important;
  }
}

@media (max-width: 350px) {
  .footer-logo img {
    width: 120px;
    height: 16px;
  }

  .footer-heading {
    font-size: 14px;
  }

  .footer-tagline {
    font-size: 13px;
  }

  .download {
    padding: 8px 15px;
  }

  .download .download-icon {
    width: 40px;
    height: 40px;
    padding: 8px;
  }

  .download .download-icon svg {
    width: 20px;
    height: 20px;
  }

  .download-desc span:first-child {
    font-size: 9px;
  }

  .download-desc span:last-child {
    font-size: 12px;
  }
}

.region-card {
  cursor: pointer;
  height: 185px;
  color: inherit;
  background-color: #f5f5f5;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 15px;
  padding: 20px;
  text-decoration: none;
  transition: transform .3s;
  display: block !important;
}

.region-card:hover {
  text-decoration: none;
  transform: scale(1.05);
}

.region-card span {
  color: var(--main-text-color);
  font-size: 18px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .region-card {
    height: 160px;
    padding: 15px;
  }

  .region-card span {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .region-card {
    height: 140px;
    padding: 15px;
  }

  .region-card span {
    font-size: 15px;
  }
}

.virtual-numbers-content {
  padding: 20px 0;
}

.local-calls-country-content {
  margin-top: 40px;
}

.local-calls-country-content .subscription-plans {
  margin-top: 20px;
}

.local-calls-country-content .subscription-plan {
  border: 1px solid #f5f5f5;
  border-radius: 15px 15px 84px;
  padding: 15px;
  position: relative;
}

.local-calls-country-content .subscription-plan .discount {
  color: var(--main-color);
  border: 1px solid var(--main-color);
  background-color: #f3faff;
  border-radius: 30px;
  padding: 5px 17px;
  font-weight: bold;
  position: absolute;
  top: -17px;
  right: 12px;
}

.local-calls-country-content .subscription-plan .country {
  margin-inline-end: 10px;
}

.local-calls-country-content .subscription-plan .info {
  margin-top: 5px;
}

.local-calls-country-content .subscription-plan .info .number {
  color: var(--main-text-color);
  margin-inline-end: 20px;
  font-size: 20px;
  font-weight: bold;
}

.local-calls-country-content .subscription-plan .info .number-container {
  align-items: center;
  display: flex;
}

.local-calls-country-content .subscription-plan .info .change-phone-number {
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  display: inline-flex;
}

.local-calls-country-content .subscription-plan .place {
  color: #707070;
  font-size: 18px;
}

.local-calls-country-content .subscription-plan .services {
  display: inline-block;
}

.local-calls-country-content .subscription-plan .services span:not(:last-child) {
  margin-inline-end: 6px;
}

.local-calls-country-content .subscription-plan button.buy {
  background-color: var(--buy-btn-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 50px;
  width: 250px;
  height: 50px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  transition: all .3s;
  display: block;
}

.local-calls-country-content .subscription-plan button.buy:hover {
  opacity: .9;
}

.local-calls-country-content .subscription-plan button.buy span {
  margin-top: 2px;
  font-size: 14px;
  display: block;
}

.country-tax-usa {
  margin-left: 4px;
}

.country-tax p.main-text-color {
  color: var(--main-color);
}

.country-tax p.text-color {
  color: #707070;
}

.buy-number-container {
  padding: 20px 0;
}

.buy-number-header {
  margin-bottom: 30px;
}

.buy-number-header .back-button {
  color: #4d4d4d;
  font-weight: 500;
  text-decoration: none;
  transition: color .3s;
}

.buy-number-header .back-button:hover {
  color: var(--main-color);
}

.buy-number-header .back-button svg {
  margin-right: 8px;
}

.number-banner {
  background-color: #f5f5f5;
  margin-bottom: 20px;
  padding: 30px;
}

.number-banner .area-info {
  padding: 20px;
}

.number-banner .area-info p {
  color: #4d4d4d;
  margin-bottom: 10px;
  font-size: 18px;
}

.number-banner .info-container {
  margin-bottom: 15px;
}

.number-banner .number {
  color: var(--main-color);
  margin-bottom: 0;
  margin-right: 15px;
  font-size: 28px;
  font-weight: bold;
}

.number-banner .change-phone-number {
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  transition: transform .3s;
  display: inline-flex;
}

.number-banner .change-phone-number:hover {
  transform: scale(1.1);
}

.number-banner .services {
  display: inline-block;
}

.number-banner .services span {
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  display: inline-flex;
}

.number-banner .services span:last-child {
  margin-right: 0;
}

.subscription-plans .plans {
  background-color: #fff;
}

.subscription-plan {
  background-color: #0000;
  border: 1px solid #e6e6e6;
  border-radius: 15px 15px 84px;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  min-width: 200px;
  padding: 30px 40px;
  display: flex;
}

.subscription-plan .plan {
  width: 100%;
}

.subscription-plan .plan-price {
  color: var(--main-color);
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  display: block;
}

.subscription-plan .buy.btn {
  color: #fff;
  cursor: pointer;
  background-color: #28a745;
  border: none;
  border-radius: 25px;
  width: 100%;
  padding: 10px 40px;
  font-weight: 600;
  transition: all .3s;
}

.subscription-plan .buy.btn:hover {
  background-color: #218838;
  transform: translateY(-2px);
}

.country-tax {
  background-color: #0000;
  border-radius: 10px;
}

.country-tax p.main-text-color {
  color: var(--main-color);
  font-weight: 600;
}

.country-tax p.text-color {
  color: #707070;
  font-size: 14px;
}

.number-features {
  margin: 50px 0;
}

.number-features h3 {
  margin-bottom: 40px;
  font-size: 28px;
}

.number-features .feature {
  background-color: #f5f5f5;
  border-radius: 15px;
  padding: 20px;
  transition: all .3s;
}

.number-features .feature:hover {
  background-color: #eee;
  transform: translateY(-5px);
}

.number-features .feature .title {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 18px;
}

.number-features .feature p.text-color {
  color: #707070;
  font-size: 14px;
  line-height: 1.6;
}

.area-card {
  cursor: pointer;
  background-color: #f5f5f5;
  border-radius: 15px;
  padding: 15px 20px;
  text-decoration: none;
  transition: all .3s;
}

.area-card:hover {
  background-color: #eee;
  text-decoration: none;
}

.area-card .area-title {
  color: var(--main-text-color);
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

.area-card .price-plan {
  color: var(--main-color);
  font-size: 18px;
}

.area-card .discount {
  color: #707070;
}

@media (max-width: 422px) {
  .area-card .area-title, .area-card .price-plan {
    font-size: 14px;
  }
}

.local-plan-note {
  margin-top: 1rem;
  margin-bottom: .25rem;
}

.local-plan-note p {
  align-items: center;
  margin: 0;
  display: flex;
}

.local-plan-note img {
  width: 20px;
  height: 20px;
  margin-inline-end: .5rem;
}

.local-plan-note .text-color {
  color: var(--main-text-color);
}

.local-calls-country-content .local-plan-values-container {
  background-color: #f5f5f5;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  height: 67px;
  margin-bottom: 1rem;
  padding: 15px;
  display: flex;
}

.local-calls-country-content .local-plan-values-container > div {
  width: 33%;
}

.local-calls-country-content .local-plan-values-container .separator {
  text-align: center;
  position: relative;
}

.local-calls-country-content .local-plan-values-container .separator .local-line {
  background-color: var(--main-text-color);
  z-index: 1;
  width: 2px;
  height: 29px;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
}

.local-calls-country-content .local-plan-values-container .separator .local-wordwrapper {
  text-align: center;
  z-index: 2;
  height: 12px;
  margin-top: -12px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

.local-calls-country-content .local-plan-values-container .separator .local-wordwrapper .local-word {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--main-text-color);
  background: #f5f5f5;
  padding: 3px;
  font-size: 10px;
  font-weight: bold;
}

.local-calls-country-content .local-plan-values-container .mobile, .local-calls-country-content .local-plan-values-container .landline {
  flex-direction: column;
  display: flex;
}

.local-calls-country-content .local-plan-values-container .mobile span, .local-calls-country-content .local-plan-values-container .landline span {
  color: var(--main-text-color);
  font-size: 15px;
  font-weight: 600;
}

.local-calls-country-content .local-plan-values-container .landline .text-uppercase .main-color, .local-calls-country-content .local-plan-values-container .mobile .text-uppercase .main-color {
  font-size: 18px;
}

@media (max-width: 992px) {
  .local-calls-country-content .local-plan-values-container {
    width: 100%;
  }
}

.esim-category {
  margin-top: 20px;
}

.esim-category .mobile-categ {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  display: flex;
}

.esim-category .nav-item {
  white-space: nowrap;
  text-align: center;
  color: #828282;
  cursor: pointer;
  border: 1px solid #e8f7ff;
  border-radius: 50px;
  width: 269px;
  margin: 6px 9px;
  padding: 15px 13px;
  font-size: 16px;
  text-decoration: none;
  transition: all .3s;
  display: inline-block;
}

.esim-category .nav-item:hover {
  border-color: var(--main-color);
  color: var(--main-color);
  background: #f8f9fa;
  text-decoration: none;
}

.esim-category .nav-item.active {
  border-color: var(--main-color);
  background-color: #e8f7ff;
  font-weight: bold;
  color: var(--main-color) !important;
}

.esim-category .nav-item span {
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .esim-category {
    margin-top: 30px;
  }

  .esim-category .mobile-categ {
    flex-direction: column;
    gap: 8px;
  }

  .esim-category .nav-item {
    text-align: center;
    width: 100%;
    padding: 12px 15px;
  }

  .esim-category .nav-item span {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .esim-category {
    margin-top: 20px;
  }

  .esim-category .nav-item {
    padding: 10px 12px;
  }
}

.offers-header {
  padding: 20px 0;
}

.offers-header .title {
  width: 100%;
}

.margin-top-bottom-40 {
  margin: 40px 0 !important;
}

.trending-title {
  color: var(--main-text-color);
  margin: 0;
  font-size: 20px;
}

.offer-discount {
  color: var(--main-color);
  background-color: #f0f8fc;
  border: 1px solid #c5e4f4;
  border-radius: 19px;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 15px;
  font-weight: bold;
  display: flex;
}

.offer-discount svg {
  flex-shrink: 0;
  width: 25.311px;
  height: 26.361px;
}

.offer-discount span {
  color: var(--main-color);
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 1200px) {
  .trending-title {
    font-size: 18px;
  }

  .offer-discount span {
    font-size: 14px;
  }
}

@media (max-width: 992px) {
  .offers-header {
    display: none !important;
  }
}

.phone-category {
  margin-top: -80px !important;
}

.phone-category .mobile-categ {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  display: flex;
}

.phone-numbers-category {
  color: var(--main-text-color);
  white-space: nowrap;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px 20px;
  text-decoration: none;
  transition: all .3s;
}

.phone-numbers-category.active {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

.phone-numbers-category span {
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .phone-category .mobile-categ {
    flex-direction: column;
    gap: 8px;
  }

  .phone-numbers-category {
    text-align: center;
    width: 100%;
    padding: 12px 15px;
  }

  .phone-numbers-category span {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .phone-numbers-category {
    padding: 10px 12px;
  }
}

.area-card {
  cursor: pointer;
  word-break: break-word;
  background-color: #f5f5f5;
  border-radius: 15px;
  height: 100%;
  transition: all .3s;
  position: relative;
}

.area-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px #0000001a;
}

.area-card-header {
  align-items: center;
  padding: 17px 17px 10px;
  display: flex;
}

.area-card-header .info {
  flex: 1;
  align-items: center;
  display: flex;
}

.area-flag {
  object-fit: cover;
  margin-inline-end: 10px;
  width: 35px !important;
  height: 35px !important;
}

.area-name {
  color: var(--main-text-color);
  text-transform: capitalize;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
}

.discount-badge {
  color: #1cb263;
  text-align: center;
  margin: 0 17px;
  background-color: #f0faf5;
  border-radius: 50px;
  margin-bottom: 10px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
}

.area-info {
  padding: 0 17px 17px;
}

.trending-label {
  color: var(--main-color);
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: bold;
}

.registration-requirements {
  border-top: 1px solid #e0e0e0;
  margin-top: 60px;
  padding: 40px 0;
}

.requirements-card {
  background: #f8f9fa;
  border-radius: 12px;
  margin-top: 20px;
  padding: 30px;
}

.requirement-item {
  background: #fff;
  border-radius: 8px;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
}

.requirement-icon {
  color: var(--main-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.requirement-item p {
  color: var(--main-text-color);
  margin: 0;
  line-height: 1.6;
}

.notes-section {
  border-top: 1px solid #dee2e6;
  padding-top: 20px;
}

.notes-section h5 {
  color: var(--main-text-color);
  margin-bottom: 10px;
  font-size: 16px;
}

.notes-section p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .area-card-header {
    padding: 15px 15px 8px;
  }

  .area-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    overflow: hidden;
  }

  .area-info {
    padding: 0 15px 15px;
  }

  .trending-label {
    font-size: 16px;
  }

  .discount-badge {
    margin: 0 15px 8px;
    padding: 2px 8px;
    font-size: 12px;
  }

  .requirements-card {
    padding: 20px;
  }

  .requirement-item {
    padding: 12px;
  }
}

@media (max-width: 576px) {
  .area-card-header {
    padding: 12px 12px 8px;
  }

  .area-name {
    font-size: 14px;
  }

  .area-info {
    padding: 0 12px 12px;
  }

  .trending-label {
    margin-top: 5px;
    font-size: 14px;
  }

  .discount-badge {
    margin: 0 12px 8px;
    font-size: 11px;
  }

  .registration-requirements {
    margin-top: 40px;
    padding: 30px 0;
  }

  .requirements-card {
    padding: 15px;
  }

  .requirement-item {
    flex-direction: column;
    gap: 10px;
  }
}

.social-categ {
  height: 210px;
  color: inherit;
  background-color: #f5f5f5;
  border-radius: 15px;
  text-decoration: none;
  transition: all .3s;
  display: block;
  position: relative;
}

.social-categ:hover {
  text-decoration: none;
  transform: translateY(-5px);
  box-shadow: 0 5px 15px #0000001a;
}

.social-categ .label {
  top: -11px;
  background-color: var(--main-color);
  color: #fff;
  border-radius: 40px;
  padding: 1px 10px;
  position: absolute;
  inset-inline-end: 0;
}

.social-categ > p {
  font-size: 18px;
}

@media (max-width: 992px) {
  .social-categ > p {
    font-size: 15px;
  }
}

.mobile-numbers-content, .toll-free-numbers-content {
  margin-top: -55px;
}

.all-countries-content {
  margin-top: 30px;
}

.all-countries-content .margin-minus-top-11 {
  margin-top: -11px;
}

.all-countries-content .margin-minus-bottom-13 {
  margin-bottom: -13px;
}

.all-countries-content .countries-cards, .all-countries-content .margin-top-40 {
  margin-top: 40px;
}

.margin-top-25 {
  margin-top: 25px;
}

.margin-top-10 {
  margin-top: 10px;
}

.view-more-module-btn, .view-more-module-btn:active, .view-more-module-btn:focus {
  text-transform: capitalize;
  width: 270px;
  color: var(--main-text-color);
  background-color: #0000;
  border: 1px solid #f2f2f2;
  border-radius: 30px;
  padding: 15px 25px;
  font-weight: bold;
}

@media (min-width: 992px) {
  .view-more-module-btn:hover {
    color: #fff;
    background-color: var(--main-color);
  }
}

.calling-category {
  min-width: 62%;
  max-width: auto;
}

@media (max-width: 1400px) {
  .calling-category {
    width: 72%;
  }
}

@media (max-width: 1200px) {
  .calling-category {
    width: 85%;
  }
}

.indicators {
  display: none;
}

.indicators span {
  cursor: pointer;
  border: 1px solid #a2a2a2;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-inline-end: 10px;
}

.indicators span.active {
  background-color: var(--main-color);
  border: 0;
}

@media (max-width: 992px) {
  .indicators {
    display: flex;
  }

  .modules-categs nav a {
    font-size: 15px;
    line-height: 2.7;
  }
}

.calling-top-up-card {
  text-align: center;
  background-image: url("/images/calling-bg.png");
  background-position: bottom;
  background-repeat: no-repeat;
  border: 2px solid #f5f5f5;
  border-radius: 15px 15px 60px;
  width: 210px;
  height: 185px;
  margin: 12px;
  padding: 4px;
}

.calling-top-up-card p {
  color: var(--main-text-color);
  margin: 20px 0;
  font-size: 30px;
  font-weight: bold;
}

.calling-top-up-card button {
  background-color: var(--buy-btn-color);
  border: 1px solid var(--buy-btn-color);
  color: #fff;
  cursor: pointer;
  border-radius: 32px;
  padding: 7px 50px;
  font-size: 15px;
  font-weight: bold;
  transition: all .3s;
}

.calling-top-up-card button:hover {
  opacity: .9;
}

.calling-top-up-card img {
  width: 70%;
}

@media (max-width: 576px) {
  .calling-top-up-card {
    width: 100%;
    margin: auto;
  }

  .calling-top-up-card button {
    width: 80%;
    padding: 8px 30px;
    font-size: 16px;
  }
}

@media (max-width: 500px) {
  .credit-call {
    padding-left: .5rem !important;
  }
}

@media (max-width: 450px) {
  .calling-top-up-card button {
    padding: 8px 20px;
  }
}

@media (max-width: 390px) {
  .calling-top-up-card button {
    padding: 8px 20px;
    font-size: 14px;
  }
}

.calling-offer-card {
  border: 1px solid #f5f5f5;
  border-radius: 30px 30px 84px;
  padding: 25px;
  position: relative;
}

.calling-offer-card .number {
  align-items: center;
  display: flex;
}

.calling-offer-card .number span {
  color: #48494a;
  padding-inline-start: 10px;
  font-size: 20px;
}

.calling-offer-card .title {
  color: var(--main-text-color);
  font-size: 20px;
  font-weight: bold;
}

.calling-offer-card > p {
  width: 80%;
  margin: 0;
  font-size: 18px;
}

.calling-offer-card .countries {
  display: inline-block;
}

.calling-offer-card .country-flag img {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-inline-end: -5px;
  display: block;
}

.calling-offer-card .call-offer-minutes button, .call-offer-minutes button {
  color: #707070;
  cursor: pointer;
  background-color: #0000;
  border: 1px solid #707070;
  border-radius: 56px;
  margin-inline-start: 15px;
  padding: 4px;
  font-size: 15px;
  font-weight: bold;
  transition: all .3s;
}

.calling-offer-card .call-offer-minutes button:hover, .call-offer-minutes button:hover {
  color: #fff;
  background-color: #707070;
}

.calling-offer-card button.buy {
  background-color: var(--buy-btn-color);
  color: #fff;
  border: 1px solid var(--buy-btn-color);
  cursor: pointer;
  border-radius: 32px;
  justify-content: center;
  align-items: center;
  width: 85%;
  height: 54px;
  padding: 9px 20px;
  font-size: 20px;
  font-weight: bold;
  transition: all .3s;
  display: flex;
}

.calling-offer-card button.buy:hover {
  opacity: .9;
}

.calling-offer-card .discount {
  color: #fff;
  inset-inline-end: 0;
  background-color: #ff8d02;
  border-radius: 15px 15px 0;
  padding: 5px 30px;
  font-size: 16px;
  position: absolute;
  top: 0;
}

.calling-offer-card .discount-offer {
  color: #fff;
  inset-inline-end: 0;
  background-color: #e6b536;
  border-radius: 15px 15px 0;
  padding: 5px 30px;
  font-size: 16px;
  position: absolute;
  top: 0;
}

.AllSupportedCountriesModel.modal {
  z-index: 1050;
  background-color: #00000080;
}

.AllSupportedCountriesModel .modal-dialog {
  max-width: 600px;
}

.AllSupportedCountriesModel .modal-content {
  border-radius: 50px !important;
}

.AllSupportedCountriesModel .modal-header {
  border-bottom: none;
  padding: 25px;
  position: relative;
}

.AllSupportedCountriesModel .modal-title {
  margin: 0 auto;
  font-size: 18px;
  font-weight: bold;
  color: var(--main-color) !important;
}

.AllSupportedCountriesModel .floating-escape-button-container {
  position: relative;
}

.AllSupportedCountriesModel .floating-escape-button {
  opacity: 1;
  background-color: #fff;
  border: 10px solid #414141b3;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-50%, -30%);
}

.AllSupportedCountriesModel .floating-escape-button:hover {
  opacity: 1;
  background-color: #fff;
  border: 10px solid #414141b3;
}

.modal-dialog-scrollable .modal-content {
  overflow: visible !important;
}

@media (max-width: 992px) {
  .AllSupportedCountriesModel .floating-escape-button, .AllSupportedCountriesModel .floating-escape-button:hover {
    border: 7px solid #414141b3;
    width: 20px;
    height: 20px;
    top: 7px;
    transform: translate(-59%, -19%);
  }
}

.AllSupportedCountriesModel .modal-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
  max-height: 60vh;
  padding: 0 25px 25px;
  overflow-y: auto;
}

.AllSupportedCountriesModel .modal-body::-webkit-scrollbar {
  display: none;
}

.AllSupportedCountriesModel .search-fixed {
  z-index: 10;
  background: #fff;
  padding-bottom: 1rem;
  position: sticky;
  top: 0;
}

.AllSupportedCountriesModel .module-search .input-container {
  background-color: #f8f8f8;
  border: 1px solid #e3e3e3;
  border-radius: 47px;
  align-items: center;
  width: 100%;
  height: 54px;
  padding: 17px 20px;
  display: flex;
}

.AllSupportedCountriesModel .module-search svg {
  flex-shrink: 0;
}

.AllSupportedCountriesModel .module-search .input-field {
  color: #5a5a61;
  background-color: #0000;
  border: none;
  outline: none;
  width: 100%;
  margin-inline-start: 15px;
  font-size: 16px;
}

.AllSupportedCountriesModel .module-search .input-field::placeholder {
  color: #5a5a61;
}

.call-offer-minute-cards {
  padding: 0 15px 15px;
}

.call-offer-minute-cards > div:not(:last-child) {
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.call-offer-minute-card {
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  display: flex;
}

.call-offer-minute-card .area-info {
  align-items: center;
  display: flex;
}

.call-offer-minute-card .area-info span {
  color: var(--sec-text-color);
  padding-inline-start: 10px;
  font-size: 18px;
  font-weight: 600;
}

.call-offer-minute-card .minutes {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.supported-country-flag {
  width: 40px;
  height: 40px;
}

.p-15px {
  padding: 15px;
}

.overflow-y-auto {
  overflow-y: auto;
}

@media (max-width: 450px) {
  .call-offer-minute-card .area-info span {
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .call-offer-minute-card .area-info span {
    font-size: 16px;
  }
}

@media (max-width: 380px) {
  .call-offer-minute-card .area-info span {
    font-size: 15px;
  }
}

.accordion.registration .accordion-item {
  border-radius: 15px;
  margin-bottom: 30px;
}

.accordion.registration .accordion-button {
  color: var(--main-text-color);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  font-size: 18px;
  font-weight: bold;
}

.accordion.registration .accordion-button:focus {
  box-shadow: initial;
}

.accordion.registration .accordion-button:not(.collapsed) {
  background-color: unset;
  box-shadow: unset !important;
}

.accordion.registration .accordion-button.collapsed {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.accordion.registration .accordion-item:not(:first-of-type) {
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

.filter_countries_docs_icon {
  cursor: pointer;
  background-color: #efefef;
  border-radius: 15px;
  padding: 15px;
}

.dropdown-menu.show {
  z-index: 1000;
  display: block !important;
}

.dropdown-menu.notification-action-menu {
  border-radius: 10px;
  min-width: 200px;
  margin-top: 10px;
  padding: 10px 0;
  box-shadow: 0 2px 10px #0000001a;
}

.dropdown-menu.notification-action-menu li button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  padding: 10px 20px;
  transition: background-color .2s;
}

.dropdown-menu.notification-action-menu li button:hover {
  background-color: #f5f5f5;
}

.dropdown-menu.notification-action-menu hr {
  border-color: #e0e0e0;
  margin: 5px 0;
}

.question-docs {
  cursor: pointer;
  padding-inline-start: 7px;
  display: inline-block;
}

.question-docs-absolute {
  cursor: pointer;
  z-index: 85;
  padding-inline-start: 7px;
  display: block;
  position: absolute;
  top: 5px;
  left: 280px;
}

@media (max-width: 990px) {
  .question-docs-absolute {
    left: 240px;
  }
}

.question-docs-rtl {
  cursor: pointer;
  padding-inline-start: 7px;
  display: inline-block;
}

.question-docs-rtl-absolute {
  cursor: pointer;
  z-index: 85;
  padding-inline-start: 7px;
  display: block;
  position: absolute;
  top: 5px;
  right: 160px;
}

@media (max-width: 990px) {
  .question-docs-rtl-absolute {
    right: 135px;
  }
}

.country-card .plan {
  color: var(--main-color);
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

@media (max-width: 992px) {
  .country-card .plan {
    font-size: 16px;
  }
}

.padding-start-inline-7 {
  padding-inline-start: 7px;
}

@media (max-width: 992px) {
  .accordion.registration .accordion-button {
    font-size: 16px;
  }
}

.breadcrumb {
  background-color: #0000;
  border-radius: .25rem;
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  list-style: none;
}

.breadcrumb-item a {
  color: var(--main-text-color);
  transition: var(--trans);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--main-color);
}

.breadcrumb-item.active {
  color: var(--sec-text-color);
}

.intro-text {
  font-size: 30px;
  line-height: 1.4;
}

.how-steps .intro-text {
  font-size: 32px;
  font-weight: bold;
}

@media (max-width: 992px) {
  .how-steps .intro-text {
    font-size: 20px;
  }
}

.fw-900 {
  font-weight: 900;
}

.fw-semibold {
  font-weight: 600;
}

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

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

.modules-nav.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.modules-nav .modules-container.how {
  background-color: #fbfbfb;
  border: .5px solid #c9c9c9;
  border-radius: 30px;
  justify-content: center;
  gap: 0;
  padding: 0;
  display: flex;
}

.modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
  color: #646464;
  text-align: center;
  transition: var(--trans);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 30px;
  flex: 1;
  padding: 15px 30px;
  font-weight: 600;
  text-decoration: none;
}

.modules-nav .modules-container.how a.router-link-active, .modules-nav .modules-container.how a.active, .modules-nav .modules-container.how button.router-link-active, .modules-nav .modules-container.how button.active {
  color: var(--main-color);
  border: 1.5px solid var(--main-color);
  background-color: #fff;
}

.modules-nav .modules-container.how a:not(.router-link-active):not(.active), .modules-nav .modules-container.how button:not(.router-link-active):not(.active) {
  color: #646464;
}

.modules-container {
  background-color: #f7f7f7;
  border: .5px solid #c9c9c9 !important;
}

.nav.installation.modules-nav .modules-container {
  background-color: #fbfbfb;
  border: .5px solid #c9c9c9;
  border-radius: 10px;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  display: flex;
  box-shadow: 0 2px 8px #0000000a;
}

.nav.installation.modules-nav .modules-container button {
  color: #646464;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: 10px;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  display: flex;
  position: relative;
}

.nav.installation.modules-nav .modules-container button.active, .nav.installation.modules-nav .modules-container button.router-link-active {
  color: var(--main-color);
  border: 1.5px solid var(--main-color);
  background-color: #fff;
  font-weight: 700;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px #0d8dce26;
}

.nav.installation.modules-nav .modules-container button:not(.router-link-active):not(.active) {
  color: #646464;
}

.nav.installation.modules-nav .modules-container button:hover:not(.active):not(.router-link-active) {
  color: var(--main-color);
  background-color: #0d8dce14;
  transform: translateY(-1px);
}

.nav.installation.modules-nav .modules-container button:active {
  transform: translateY(0);
}

@media (max-width: 1200px) {
  .nav.installation.modules-nav .modules-container button {
    padding: 14px 24px;
    font-size: 15px;
  }
}

@media (max-width: 992px) {
  .nav.installation.modules-nav {
    padding: 0 15px;
  }

  .nav.installation.modules-nav .modules-container {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
  }

  .nav.installation.modules-nav .modules-container button {
    min-height: 46px;
    padding: 13px 20px;
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .nav.installation.modules-nav {
    padding: 0 10px;
  }

  .nav.installation.modules-nav .modules-container {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    gap: 3px;
    width: 100%;
    max-width: 100%;
    padding: 3px;
    overflow-x: auto;
  }

  .nav.installation.modules-nav .modules-container::-webkit-scrollbar {
    display: none;
  }

  .nav.installation.modules-nav .modules-container button {
    border-radius: 8px;
    flex: none;
    min-width: fit-content;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 15px;
  }

  .nav.installation.modules-nav .modules-container.android button {
    flex: 1;
  }
}

@media (max-width: 576px) {
  nav.modules-nav.how {
    max-width: 100%;
    padding: 0 10px;
  }

  .nav.installation.modules-nav {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0 5px;
  }

  .nav.installation.modules-nav + .container h2, h2.main-color.text-center.fw-bold {
    margin-bottom: 20px;
    padding: 0 10px;
    font-size: 22px;
  }

  .nav.installation.modules-nav .modules-container {
    border-radius: 8px;
    flex-wrap: nowrap;
    gap: 2px;
    width: 100%;
    padding: 2px;
  }

  .nav.installation.modules-nav .modules-container button {
    white-space: nowrap;
    text-overflow: clip;
    border-radius: 6px;
    min-height: 42px;
    padding: 10px 14px;
    font-size: 14px;
    overflow: visible;
  }

  .nav.installation.modules-nav .modules-container button span {
    white-space: nowrap;
    display: block;
  }
}

@media (max-width: 480px) {
  .nav.installation.modules-nav {
    padding: 0;
  }

  .nav.installation.modules-nav + .container h2, h2.main-color.text-center.fw-bold {
    margin-bottom: 15px;
    padding: 0 5px;
    font-size: 20px;
  }

  .nav.installation.modules-nav .modules-container {
    border-radius: 6px;
    gap: 2px;
    padding: 2px;
  }

  .nav.installation.modules-nav .modules-container button {
    border-radius: 5px;
    min-height: 40px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .nav.installation.modules-nav .modules-container.android button {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 400px) {
  .nav.installation.modules-nav {
    padding: 0;
  }

  .nav.installation.modules-nav .modules-container {
    border-radius: 6px;
    gap: 1px;
    padding: 2px;
  }

  .nav.installation.modules-nav .modules-container button {
    border-radius: 5px;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .nav.installation.modules-nav .modules-container button span {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .nav.installation.modules-nav .modules-container {
    gap: 1px;
    padding: 1px;
  }

  .nav.installation.modules-nav .modules-container button {
    border-radius: 4px;
    min-height: 36px;
    padding: 8px;
    font-size: 11px;
  }

  .nav.installation.modules-nav .modules-container button span {
    font-size: 11px;
  }
}

@media (max-width: 320px) {
  .nav.installation.modules-nav .modules-container button {
    min-height: 34px;
    padding: 7px 6px;
    font-size: 10px;
  }

  .nav.installation.modules-nav .modules-container button span {
    font-size: 10px;
  }
}

@media (max-width: 992px) {
  .nav.modules-nav a span, .nav.modules-nav button span {
    font-size: 13px;
  }

  .cont {
    padding: 10px;
  }

  .modules-nav .modules-container.how {
    width: auto;
  }

  .modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
    padding: 15px 32px;
  }
}

@media (max-width: 600px) {
  .intro .intro-text {
    font-size: 18px;
  }
}

@media (max-width: 590px) {
  .modules-nav .modules-container.how {
    border-radius: 30px;
    width: 475px;
  }

  .modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
    padding: 15px 39px;
  }
}

@media (max-width: 500px) {
  .modules-nav .modules-container.how {
    justify-content: space-around;
    width: 460px !important;
  }

  .modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
    padding: 15px 37px !important;
  }
}

@media (max-width: 488px) {
  .modules-nav .modules-container.how {
    justify-content: space-around;
    width: 440px !important;
  }

  .modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
    padding: 15px 33px !important;
  }
}

@media (max-width: 472px) {
  .modules-nav .modules-container.how {
    justify-content: space-around;
    width: 401px !important;
  }

  .modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
    padding: 15px 34px !important;
  }
}

@media (max-width: 463px) {
  .modules-nav .modules-container.how {
    justify-content: space-around;
    width: 364px !important;
  }

  .modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
    padding: 15px 19px !important;
  }
}

@media (max-width: 380px) {
  .modules-nav .modules-container.how {
    justify-content: space-around;
    width: 335px !important;
  }

  .modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
    padding: 15px 23px !important;
  }
}

@media (max-width: 360px) {
  .modules-nav .modules-container.how {
    justify-content: space-around;
    width: 345px !important;
  }

  .modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
    padding: 15px 22px !important;
  }
}

@media (max-width: 345px) {
  .modules-nav .modules-container.how {
    justify-content: space-around;
    width: 325px !important;
  }

  .modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
    padding: 15px 13px !important;
  }
}

.intro {
  margin-top: 60px;
  padding: 40px 0;
}

.intro .intro-text {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
}

.intro .intro-text .main-color {
  color: var(--main-color);
  font-weight: 700;
}

.color-text-646464 {
  color: #646464;
}

.devices {
  margin-top: 30px;
}

.devices .row {
  margin: 0;
}

.devices [class*="col-"] {
  padding-left: 7.5px;
  padding-right: 7.5px;
}

.devices .row > [class*="col-"]:first-child {
  padding-left: 0;
}

.devices .row > [class*="col-"]:last-child {
  padding-right: 0;
}

@media (min-width: 576px) {
  .devices .row > [class*="col-"]:first-child {
    padding-left: 0;
    padding-right: 10px;
  }

  .devices .row > [class*="col-"]:last-child {
    padding-left: 10px;
    padding-right: 0;
  }
}

.device-button {
  cursor: pointer;
  width: 100%;
  max-width: 270px;
  color: var(--main-text-color);
  background-color: #f5f5f5;
  border: 2px solid #0000;
  border-radius: 30px;
  justify-content: flex-start;
  align-items: center;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.device-button:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

.device-button:hover:before {
  left: 100%;
}

.device-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0000001a;
}

.device-button.active {
  border-color: var(--main-color);
  background-color: var(--main-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px #0d8dce4d;
}

.device-button.active:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px #0d8dce66;
}

.device-button.active svg path, .device-button.active svg circle {
  fill: #fff !important;
}

.device-button svg {
  flex-shrink: 0;
  transition: transform .3s;
}

.device-button:hover svg {
  transform: scale(1.1);
}

.device-button.active svg {
  transform: scale(1.05);
}

.iframe-container {
  text-align: end;
  cursor: pointer;
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 10px;
  width: 80%;
  height: 380px;
  position: relative;
  overflow: hidden;
}

.intro .iframe-container {
  background-image: url("/assets/images/youtube/calling-plans.png");
}

.intro .iframe-container.full-esim {
  background-image: url("/assets/images/youtube/full-esim.png");
}

@media (max-width: 1400px) {
  .intro .iframe-container.full-esim {
    height: 330px;
  }
}

@media (max-width: 1200px) {
  .intro .iframe-container.full-esim {
    height: 275px;
  }
}

@media (max-width: 992px) {
  .intro .iframe-container.full-esim {
    height: 200px;
  }

  .intro .intro-text {
    line-height: unset;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .intro .iframe-container.full-esim {
    width: 70%;
  }
}

@media (max-width: 550px) {
  .intro .iframe-container.full-esim {
    background-size: cover;
    width: 100%;
    height: 250px;
  }
}

@media (max-width: 400px) {
  .intro .iframe-container.full-esim .play-icon {
    width: 80px !important;
    height: 70px !important;
    font-size: 50px !important;
  }
}

@media (max-width: 370px) {
  .intro .iframe-container.full-esim {
    background-size: cover;
    height: 200px;
  }
}

.iframe-container .overlay {
  width: 100%;
  height: 100%;
  transition: var(--trans);
  background-color: #0000004d;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
}

.iframe-container:hover .overlay {
  background-color: #00000080;
}

.iframe-container .play-icon {
  z-index: 2;
  width: 90px;
  height: 90px;
  transition: var(--trans);
  background-color: #0000;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #fff !important;
}

.iframe-container:hover .play-icon {
  transform: translate(-50%, -50%)scale(1.1);
}

.iframe-container .play-icon i {
  color: #fff;
  margin-left: 5px;
  font-size: 50px;
}

.sec-margin-t {
  margin-top: 100px;
}

.bg-color-f8f8f8 {
  background-color: #f8f8f8;
}

.cont {
  padding: 15px 80px;
}

.border-radius-24 {
  border-radius: 24px;
}

.device {
  margin-bottom: 30px;
  padding-bottom: 20px;
}

.accordion.steps .accordion-item, .accordion.how .accordion-item {
  border: 1px solid #e6e6e6;
  border-radius: 15px;
  margin-bottom: 15px;
}

.accordion.steps .accordion-button, .accordion.how .accordion-button {
  color: var(--main-text-color);
  background-color: #fff;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 600;
}

.accordion.steps .accordion-button:not(.collapsed), .accordion.how .accordion-button:not(.collapsed) {
  color: var(--main-color);
  box-shadow: none;
  background-color: #f8f8f8;
}

.accordion.steps .accordion-button:focus, .accordion.how .accordion-button:focus {
  box-shadow: none;
  border-color: #0000;
}

.accordion.steps .accordion-button:after, .accordion.how .accordion-button:after {
  background-size: 1.25rem;
}

.accordion.steps .accordion-body, .accordion.how .accordion-body {
  padding: 20px;
  line-height: 1.8;
}

.accordion.how.faqs {
  margin-left: auto;
  margin-right: auto;
}

.freq-center {
  text-align: center;
  margin-bottom: 40px;
}

@media (max-width: 500px) {
  .freq-center {
    text-align: center;
  }
}

.how-buy-btn {
  background-color: var(--main-color);
  color: #fff;
  transition: var(--trans);
  border-radius: 50px;
  padding: 15px 50px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
}

.how-buy-btn:hover {
  opacity: .9;
  color: #fff;
  text-decoration: none;
}

.showVideoModal.modal {
  z-index: 2147483647;
  background-color: #000c;
}

.showVideoModal .modal-dialog {
  width: 900px;
  max-width: 90%;
}

.showVideoModal .modal-content {
  background-color: #0000;
  border: none;
}

.showVideoModal .modal-header {
  border: none;
  padding: 0;
  position: relative;
}

.showVideoModal .floating-escape-button {
  z-index: 10;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  position: absolute;
  top: -40px;
  right: -40px;
}

.showVideoModal .modal-body {
  padding: 0;
}

.video-iframe, .android-guid-iframe {
  border: none;
  border-radius: 15px;
  width: 100%;
  height: 500px;
}

.background-color-transparent {
  background-color: #0000 !important;
}

.link-button {
  cursor: pointer;
  border: none;
  padding: 0;
  font-family: inherit;
}

@media (max-width: 1400px) {
  .iframe-container {
    height: 330px;
  }
}

@media (max-width: 1200px) {
  .iframe-container {
    height: 275px;
  }
}

@media (max-width: 992px) {
  .intro {
    margin-top: 40px;
    padding: 30px 0;
  }

  .intro .intro-text {
    line-height: unset;
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: bold;
  }

  .device-button {
    width: 100%;
    max-width: 100%;
  }

  .iframe-container {
    height: 200px;
  }
}

@media (max-width: 768px) {
  .intro {
    margin-top: 30px;
    padding: 25px 0;
  }

  .intro .intro-text {
    margin-bottom: 15px;
    font-size: 22px;
    line-height: 1.4;
  }

  .devices {
    margin-top: 20px;
  }

  .device-button {
    border-radius: 25px;
    width: 100%;
    max-width: 100%;
    padding: 14px 18px;
    font-size: 15px;
  }

  .device-button svg {
    width: 22px;
    height: auto;
  }

  .iframe-container {
    width: 100%;
    max-width: 100%;
    height: 250px;
    margin-top: 30px;
  }

  .cont {
    padding: 20px;
  }

  .accordion.steps .accordion-button, .accordion.how .accordion-button {
    font-size: 16px;
  }

  .how-buy-btn {
    padding: 12px 35px;
    font-size: 16px;
  }

  .video-iframe {
    height: 300px;
  }

  .showVideoModal .floating-escape-button {
    width: 35px;
    height: 35px;
    top: -30px;
    right: -10px;
  }
}

@media (max-width: 767px) {
  .iframe-container {
    width: 70%;
  }
}

@media (max-width: 576px) {
  .intro {
    margin-top: 20px;
    padding: 20px 0;
  }

  .intro .intro-text {
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.3;
  }

  .devices {
    margin-top: 15px;
  }

  .device-button {
    border-radius: 20px;
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    font-size: 14px;
  }

  .device-button svg {
    width: 20px;
    height: auto;
  }

  .device-button span {
    padding-left: 12px !important;
  }

  .devices [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
  }

  .modules-nav .modules-container.how {
    flex-wrap: wrap;
  }

  .modules-nav .modules-container.how a, .modules-nav .modules-container.how button {
    flex: 45%;
    padding: 12px 15px;
    font-size: 14px;
  }
}

@media (max-width: 550px) {
  .iframe-container {
    background-size: cover;
    width: 100%;
    height: 250px;
  }
}

@media (max-width: 400px) {
  .intro {
    margin-top: 15px;
    padding: 15px 0;
  }

  .intro .intro-text {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.3;
  }

  .devices {
    margin-top: 12px;
  }

  .devices [class*="col-"] {
    padding-left: 3px;
    padding-right: 3px;
  }

  .device-button {
    border-radius: 18px;
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
  }

  .device-button svg {
    width: 18px;
    height: auto;
  }

  .device-button span {
    font-size: 13px;
    padding-left: 10px !important;
  }

  .iframe-container {
    height: 220px;
  }

  .iframe-container .play-icon {
    width: 80px !important;
    height: 70px !important;
    font-size: 50px !important;
  }

  .iframe-container .play-icon i {
    font-size: 35px;
  }
}

@media (max-width: 370px) {
  .iframe-container {
    background-size: cover;
    height: 200px;
  }

  .device-button span {
    font-size: 13px;
  }

  .video-iframe {
    height: 250px;
  }
}

.sx-overflow {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

.modules-nav.faqs-calls .modules-container.faqs-calls {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-width: max-content;
  display: flex;
}

.modules-nav.faqs-calls .modules-container.faqs-calls a {
  color: var(--main-text-color);
  white-space: nowrap;
  background-color: #f8f8f8;
  border-radius: 50px;
  padding: 12px 24px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s;
}

.modules-nav.faqs-calls .modules-container.faqs-calls a.router-link-active {
  background-color: var(--main-color);
  color: #fff;
}

.cursor-p {
  cursor: pointer;
}

.how-steps.no-float {
  display: block;
}

.how-steps.no-float .row > div {
  margin-bottom: 30px;
}

.step.calls {
  background: #0d8dce0f;
  border-radius: 24px;
  height: 100%;
  padding: 30px;
  transition: box-shadow .3s;
}

.step.calls:hover {
  box-shadow: 0 4px 12px #0d8dce26;
}

.step.calls.small {
  min-height: 400px;
}

.step.calls img {
  border-radius: 12px;
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.step.calls .long-img {
  max-width: 100%;
}

.feature-section {
  color: var(--sec-text-color);
  font-size: 15px;
  line-height: 1.6;
}

.number-features.how .feature {
  background-color: #fff;
  border-radius: 16px;
  padding: 25px 20px;
  transition: transform .3s, box-shadow .3s;
  overflow: hidden !important;
}

.number-features.how .feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px #0d8dce26;
}

@media (max-width: 991px) {
  .step.calls.small {
    min-height: auto;
    margin-bottom: 20px;
  }

  .modules-nav.faqs-calls .modules-container.faqs-calls a {
    padding: 10px 18px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .step.calls {
    padding: 20px;
  }

  .modules-nav.faqs-calls .modules-container.faqs-calls {
    justify-content: flex-start;
  }
}

.text-fs-30 {
  font-size: 30px;
}

.text-fs-22 {
  font-size: 22px;
}

.contact-intro {
  text-align: center;
}

.contact-container {
  gap: 30px;
  margin-bottom: 80px;
  display: flex;
}

.contact-form {
  background: #fff;
  border-radius: 24px;
  flex: 1;
  padding: 40px;
  box-shadow: 0 2px 10px #0000000d;
}

.contact-form h3 {
  margin-bottom: 30px;
}

.contact-form .form-control {
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  padding: 15px 20px;
  font-size: 15px;
  transition: all .3s;
}

.contact-form .form-control:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 0 .2rem #0d8dce26;
}

.contact-form textarea.form-control {
  resize: vertical;
  min-height: 150px;
}

.btn-sub {
  color: #fff;
  cursor: pointer;
  background: #0d8dce;
  border: none;
  border-radius: 50px;
  width: 100%;
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
}

.btn-sub:hover {
  background: #0b7ab8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0d8dce4d;
}

.get-touch {
  color: #fff;
  text-align: center;
  background: linear-gradient(#0d8dce 0%, #0b7ab8 100%);
  border-radius: 24px;
  flex-direction: column;
  flex: 0 0 350px;
  align-items: center;
  padding: 40px 30px;
  display: flex;
}

.get-touch img {
  object-fit: cover;
  border: 5px solid #ffffff4d;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin-bottom: 15px;
}

.get-touch h2 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
}

.get-touch p {
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
}

.contact-footer {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 80px;
}

.contact-footer > p {
  text-align: center;
  margin-bottom: 40px;
}

.how-contact {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 30px 20px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 2px 10px #0000000d;
}

.how-contact:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px #0000001a;
}

.how-contact svg {
  margin-bottom: 20px;
}

.how-contact p {
  margin-bottom: 10px;
}

.how-contact a {
  text-decoration: none;
  transition: color .3s;
}

.how-contact a:hover {
  text-decoration: underline;
  color: var(--main-color) !important;
}

.how-contact .social-media-links {
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

@media (max-width: 991px) {
  .contact-container {
    flex-direction: column;
    gap: 30px;
  }

  .get-touch {
    flex: 1;
    max-width: 100%;
  }

  .contact-form {
    padding: 30px 20px;
  }
}

@media (max-width: 767px) {
  .text-fs-30 {
    font-size: 24px;
  }

  .text-fs-22 {
    font-size: 18px;
  }

  .contact-form {
    padding: 25px 15px;
  }

  .get-touch {
    padding: 30px 20px;
  }

  .get-touch img {
    width: 100px;
    height: 100px;
  }

  .contact-footer {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .how-contact {
    margin-bottom: 20px;
    padding: 25px 15px;
  }
}

.terms_conditions {
  padding-top: 40px;
  padding-bottom: 80px;
}

.terms_conditions .content {
  margin-top: 40px;
  margin-bottom: 40px;
}

.terms_conditions .p-title {
  color: var(--main-color);
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

.terms_conditions .p-content {
  color: var(--main-text-color);
  font-size: 16px;
  line-height: 1.8;
}

.terms_conditions .p-content p {
  margin-bottom: 15px;
}

.terms_conditions .p-content ul {
  margin-top: 10px;
  margin-bottom: 15px;
  padding-left: 40px;
}

.terms_conditions .p-content ul li {
  margin-bottom: 10px;
  line-height: 1.8;
}

.terms_conditions .p-content ul ul {
  margin-top: 10px;
  padding-left: 30px;
}

.terms_conditions .fw-bold {
  color: var(--main-color);
  font-weight: 600;
}

@media (max-width: 767px) {
  .terms_conditions {
    padding-top: 20px;
    padding-bottom: 40px;
  }

  .terms_conditions .content {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .terms_conditions .p-title {
    font-size: 18px;
  }

  .terms_conditions .p-content {
    font-size: 14px;
  }

  .terms_conditions .p-content ul {
    padding-left: 25px;
  }
}

.modal.authModal {
  z-index: 9998;
  background-color: #00000080;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.modal.authModal .modal-dialog {
  z-index: 9998;
  max-width: 500px;
  margin: 1.75rem auto;
  position: relative;
}

.modal.authModal .modal-content {
  z-index: 9998;
  border: none;
  border-radius: 24px;
  position: relative;
  box-shadow: 0 5px 15px #0000004d;
}

.modal.authModal .modal-header {
  border-bottom: none;
  padding: 25px 25px 15px;
  position: relative;
}

.modal.authModal .modal-header .modal-title {
  color: var(--main-color);
  font-size: 24px;
  font-weight: 700;
}

.modal.authModal .modal-header.floating-escape-button-container {
  position: relative;
}

.modal.authModal .modal-header .floating-escape-button {
  opacity: 1;
  background-color: #fff;
  border: 10px solid #414141b3;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  transition: all .3s;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-50%, -30%);
}

.modal.authModal .modal-header .floating-escape-button:hover {
  opacity: 1;
  background-color: #fff;
  border: 10px solid #414141b3;
}

.modal.authModal .modal-body {
  padding: 15px 25px 25px;
}

.modal.authModal .form-group {
  margin-bottom: 0;
}

.modal.authModal .login-form .row {
  margin-left: 0;
  margin-right: 0;
}

.modal.authModal .login-form .col-md-12 {
  padding-left: 0;
  padding-right: 0;
}

.modal.authModal .login-form .row > .col, .modal.authModal .login-form .row > .col-auto {
  padding-left: 5px;
  padding-right: 5px;
}

.modal.authModal .login-form .input-container {
  background-color: #f8f8f8;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  transition: border-color .3s;
  display: flex;
  position: relative;
}

.modal.authModal .login-form .input-container:focus-within {
  border-color: var(--main-color);
}

.modal.authModal .login-form .input-container .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

.modal.authModal .login-form .input-container .input-field, .modal.authModal .login-form .input-container .input-field-email {
  width: 100%;
  color: var(--main-text-color);
  background: none;
  border: none;
  outline: none;
  height: 24px;
  min-height: 24px;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
}

.modal.authModal .login-form .input-container .input-field::placeholder, .modal.authModal .login-form .input-container .input-field-email::placeholder {
  color: #999;
  opacity: 1;
}

.modal.authModal .login-form .input-container .input-field:focus, .modal.authModal .login-form .input-container .input-field-email:focus {
  outline: none;
}

.modal.authModal .login-form .input-container .eye {
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-left: 12px;
  padding: 0;
  line-height: 0;
  transition: opacity .3s;
  display: flex;
}

.modal.authModal .login-form .input-container .eye:hover {
  opacity: .7;
}

.modal.authModal .login-form .input-container .eye img {
  width: 20px;
  height: 20px;
  display: block;
}

.modal.authModal .check-container {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  margin-bottom: 0;
  padding-left: 28px;
  display: flex;
  position: relative;
}

.modal.authModal .check-container input {
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
  position: absolute;
}

.modal.authModal .check-container .checkmark {
  background-color: #f8f8f8;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  width: 18px;
  height: 18px;
  transition: all .3s;
  position: absolute;
  top: 2px;
  left: 0;
}

.modal.authModal .check-container:hover input ~ .checkmark {
  border-color: var(--main-color);
}

.modal.authModal .check-container input:checked ~ .checkmark {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.modal.authModal .check-container .checkmark:after {
  content: "";
  display: none;
  position: absolute;
}

.modal.authModal .check-container input:checked ~ .checkmark:after {
  display: block;
}

.modal.authModal .check-container .checkmark:after {
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  width: 5px;
  height: 9px;
  top: 2px;
  left: 5px;
  transform: rotate(45deg);
}

.modal.authModal .check-container p {
  color: var(--main-text-color);
  white-space: nowrap;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.modal.authModal .login-link {
  cursor: pointer;
  color: var(--main-color);
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  text-decoration: none;
  transition: opacity .3s;
}

.modal.authModal .login-link:hover {
  opacity: .8;
  text-decoration: none;
}

.modal.authModal .login-link:focus {
  outline: none;
}

.modal.authModal .btn-numero {
  background: var(--main-color);
  color: #fff;
  cursor: pointer;
  text-align: center;
  border: none;
  border-radius: 30px;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  display: block;
}

.modal.authModal .btn-numero:hover {
  background: #0a7ab8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0d8dce4d;
}

.modal.authModal .btn-numero:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0d8dce33;
}

.modal.authModal .btn-numero span {
  display: inline-block;
}

.modal.authModal .modal-footer {
  border-top: none;
  flex-direction: column;
  align-items: center;
  padding: 15px 25px 25px;
  display: flex;
}

.modal.authModal .modal-footer p {
  margin: 0;
  font-size: 14px;
}

.modal.authModal .modal-footer .m-auth-register-need-help {
  color: var(--sec-text-color);
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
}

.modal.registerModal .input-container {
  margin-bottom: 5px;
  padding: 2px;
}

.modal.authModal #recaptcha-container {
  justify-content: center;
  align-items: center;
  min-height: 78px;
  display: flex;
}

.otp-group {
  justify-content: center;
  margin-top: 1rem;
  display: flex;
}

.otp {
  border-radius: 15px;
  width: 60px;
  height: 60px;
  text-align: center !important;
  box-shadow: none !important;
  background-color: #fff !important;
  border: 1px solid #e6e6e6 !important;
  outline: none !important;
  margin-right: 1rem !important;
  font-size: 25px !important;
  font-weight: bold !important;
}

.otp:focus-visible {
  border-color: var(--main-color);
}

.spinner {
  border: 2px solid #0000001a;
  border-left-color: #000;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: 1s linear infinite spin;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

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

.login-invalid-message {
  color: #d9534f;
  font-size: 85%;
  display: block;
}

.password-checker {
  transition: width .3s, background-color .3s;
}

.password-checker .scores {
  justify-content: space-between;
  display: flex;
}

.password-checker .scores .score {
  background-color: #ddd;
  width: 110px;
  height: 6px;
}

@media (max-width: 992px) {
  .modal.authModal .modal-dialog {
    max-width: 90%;
  }
}

@media (max-width: 767px) {
  .modal.authModal .modal-dialog {
    max-width: calc(100% - 2rem);
    margin: 1rem;
  }

  .modal.authModal .modal-header .modal-title {
    font-size: 20px;
  }

  .modal.authModal .modal-content {
    border-radius: 16px;
  }
}

.modal.commercialSuccessModal {
  z-index: 1050;
  background-color: #00000080;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.modal.commercialSuccessModal .modal-dialog {
  max-width: 500px;
  margin: 1.75rem auto;
}

.modal.commercialSuccessModal .modal-content {
  border: none;
  box-shadow: 0 5px 15px #0000004d;
  border-radius: 50px !important;
}

.modal.commercialSuccessModal .modal-header.p-commercial-modal {
  border-bottom: none;
  padding: 10px 25px 0;
  position: relative;
}

.modal.commercialSuccessModal .modal-body {
  padding: 15px 40px 40px;
}

.modal.commercialSuccessModal .modal-body .icon img {
  width: 80px;
  height: 80px;
}

.modal.commercialSuccessModal .text-color-modal {
  color: var(--main-text-color);
  font-size: 18px;
  font-weight: 600;
}

.modal.commercialSuccessModal .mb-20px {
  margin-bottom: 20px;
}

.modal.commercialSuccessModal .modal-confirm-btn {
  background: var(--main-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
}

.modal.commercialSuccessModal .modal-confirm-btn:hover {
  background: #0a7ab8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0d8dce4d;
}

.modal.commercialSuccessModal .modal-cancel-btn {
  color: var(--main-color);
  border: 2px solid var(--main-color);
  cursor: pointer;
  background: none;
  border-radius: 12px;
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
}

.modal.commercialSuccessModal .modal-cancel-btn:hover {
  background: var(--main-color);
  color: #fff;
}

.modal.commercialSuccessModal .logout-alert-btn {
  background: #dc3545;
  border-radius: 30px;
  background-color: #dc3545 !important;
  border: 1px solid #ff4e4e !important;
}

.modal.commercialSuccessModal .logout-alert-btn:hover {
  background: #c82333;
  border-radius: 30px;
  box-shadow: 0 4px 12px #dc35454d;
  background-color: #c82333 !important;
  border: 1px solid #ff4e4e !important;
}

.modal.commercialSuccessModal .cancel-alert-btn {
  color: #4d4d4d;
  background: #fff;
  border-radius: 30px;
  background-color: #fff !important;
  border: 1px solid #4d4d4d !important;
}

.modal.commercialSuccessModal .cancel-alert-btn:hover {
  color: #4d4d4d;
  background: #f5f5f5;
  border-radius: 30px;
  box-shadow: 0 4px 12px #4d4d4d33;
  background-color: #f5f5f5 !important;
  border: 1px solid #4d4d4d !important;
}

.active-plans-container {
  margin-top: 40px;
}

.selected-country .country-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  display: flex;
}

.selected-country .country-header a.cursor-p {
  color: #4d4d4d;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
}

.selected-country .country-header a.cursor-p:hover {
  color: var(--main-color);
}

.selected-country .country-header a.cursor-p svg {
  transition: transform .3s;
}

.selected-country .country-header a.cursor-p:hover svg path {
  fill: var(--main-color);
}

.selected-country .country-element {
  justify-content: center;
  align-items: center;
  display: flex;
}

.selected-country .country-element > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.selected-country .country-element img {
  border-radius: 50%;
}

.selected-country .country-element span {
  color: var(--main-text-color);
  font-size: 18px;
}

.selected-country .just-margin {
  width: 50px;
}

.local-plan-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  transition: all .3s;
  display: flex;
}

.local-plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0000001a;
}

.tab-pane.fade.show.active {
  flex-direction: column;
  display: flex;
}

.tab-pane.fade.show.active .row {
  flex-wrap: wrap;
  display: flex;
}

.tab-pane.fade.show.active .row > [class*="col-"] {
  flex-direction: column;
  display: flex;
}

.local-plan-card .header {
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  margin-top: 5%;
  margin-bottom: 20px;
  padding-bottom: 15px;
  display: flex;
}

.local-plan-card .header img {
  border-radius: 50%;
}

.local-plan-card .header span {
  color: var(--main-text-color);
  font-size: 16px;
  font-weight: 600;
}

.local-plan-card .head {
  color: #888;
  flex-shrink: 0;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.local-plan-card .values {
  color: var(--main-text-color);
  flex-shrink: 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

.local-plan-card .discount-area {
  flex-shrink: 0;
  align-items: center;
  min-height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}

.local-plan-card .discount-percentage {
  color: #28a745;
  font-size: 14px;
  font-weight: 600;
}

.local-plan-card .discount-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
}

.local-plan-card .btn.buy {
  color: #fff;
  text-align: center;
  width: 90%;
  margin-top: auto;
  margin-bottom: inherit;
  background: #28a745;
  border: none;
  border-radius: 30px;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s;
  display: block;
  background-color: #28a745 !important;
}

.local-plan-card .btn.buy:hover {
  background: #218838;
  transform: scale(1.02);
  background-color: #218838 !important;
}

.country-tax {
  border-radius: 12px;
  margin-top: 40px;
}

.country-tax p:first-child {
  font-size: 16px;
}

.country-tax p:last-child {
  opacity: .8;
  font-size: 14px;
}

.border-corners-80 {
  border-radius: 16px;
}

@media (max-width: 768px) {
  .selected-country .country-header {
    flex-direction: column;
    gap: 15px;
  }

  .selected-country .just-margin {
    display: none;
  }

  .local-plan-card {
    margin-bottom: 20px;
  }
}

@media (max-width: 992px) {
  .modal.commercialSuccessModal .modal-dialog {
    max-width: 90%;
  }
}

@media (max-width: 767px) {
  .modal.commercialSuccessModal .modal-dialog {
    max-width: calc(100% - 2rem);
    margin: 1rem;
  }

  .modal.commercialSuccessModal .modal-content {
    border-radius: 16px;
  }

  .modal.commercialSuccessModal .modal-body {
    padding: 15px 25px 30px;
  }

  .modal.commercialSuccessModal .modal-body .icon img {
    width: 60px;
    height: 60px;
  }

  .modal.commercialSuccessModal .text-color-modal {
    font-size: 16px;
  }

  .modal.commercialSuccessModal .modal-confirm-btn, .modal.commercialSuccessModal .modal-cancel-btn {
    padding: 10px 30px;
    font-size: 14px;
  }
}

.numero-money {
  justify-content: center;
  gap: 3px;
  background-color: #fff !important;
  border: 1px solid #b1daef !important;
  border-radius: 50px !important;
  align-items: center !important;
  min-width: 127px !important;
  margin-inline-end: 15px !important;
  padding: 9px 10px !important;
  font-weight: bold !important;
  display: flex !important;
}

.numero-money:hover {
  border-color: #fff;
  background: #0a7ab844 !important;
  text-decoration: none !important;
}

.numero-money span {
  color: var(--main-color) !important;
}

.numero-money img {
  width: 24px;
  height: 24px;
}

.btn-numero {
  cursor: pointer;
  border: none;
  border-radius: 30px;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  transition: all .3s;
  display: flex;
  background: var(--main-color) !important;
  color: #fff !important;
  background-color: #0d8dce !important;
}

.btn-numero:hover {
  color: #fff !important;
  background: #0a7ab8 !important;
}

.dropdown-noafter:after {
  display: none !important;
}

.logout-item {
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}

.logout-item:hover {
  background-color: #f8f9fa;
}

.dropdown-item {
  color: var(--sec-text-color);
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  text-decoration: none;
  transition: background-color .2s;
  display: flex;
}

.dropdown-item:hover {
  color: var(--sec-text-color);
  background-color: #f8f9fa;
  text-decoration: none;
}

.dropdown-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.dropdown-menu.show {
  z-index: 1000;
  top: 100%;
  background: #fff;
  border: 1px solid #00000026;
  border-radius: 20px;
  min-width: 220px;
  margin-top: 8px;
  padding: 8px 0;
  position: absolute;
  inset-inline-end: 0;
  box-shadow: 0 2px 8px #0000001a;
  display: block !important;
}

@media (max-width: 991px) {
  .btn-numero {
    padding: 8px 12px;
    font-size: 12px;
  }

  .numero-money {
    font-size: 14px;
  }
}

.breadcrumb {
  background-color: #0000;
  margin-bottom: 0;
  padding: 0;
}

.breadcrumb-item {
  font-size: 20px;
}

.breadcrumb-item.text-color {
  color: var(--sec-text-color);
}

.breadcrumb-item a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.breadcrumb-item.text-color a {
  color: var(--sec-text-color);
}

.breadcrumb-item a:hover {
  color: var(--main-color);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--text-color);
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item:before, .breadcrumb-item.active:before {
  content: ">";
  color: var(--sec-text-color);
  padding: 0 8px;
}

.profile-sidebar {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 0;
  box-shadow: 0 2px 4px #00000014;
}

.profile-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-sidebar li {
  border-bottom: 1px solid #e8e8e8;
}

.profile-sidebar li:last-child {
  border-bottom: none;
}

.profile-sidebar li.active a, .profile-sidebar li.active button {
  color: var(--main-color);
  background-color: #0d8dce14;
  font-weight: 600;
}

.profile-sidebar li.active svg path {
  fill: var(--main-color) !important;
}

.profile-sidebar .dropdown-item {
  color: var(--sec-text-color);
  border-radius: 0;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-size: 15px;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.profile-sidebar .dropdown-item:hover {
  color: var(--sec-text-color);
  background-color: #0d8dce0d;
}

.profile-sidebar .dropdown-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.profile-sidebar .logout-item {
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  font-size: 15px;
  display: flex;
}

.profile-sidebar .logout-item svg path {
  fill: #6e6e6e;
}

.profile-sidebar .logout-item:hover {
  background-color: #0d8dce0d;
}

.account-information-form {
  background: none;
  padding: 0;
}

.account-information-form .form-label {
  color: var(--text-color);
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

.account-information-form .form-control {
  background-color: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  width: 100%;
  max-width: 500px;
  height: auto;
  padding: 10px 14px;
  font-size: 15px;
  transition: border-color .2s;
}

.account-information-form .form-control.d-inline-block {
  width: 100%;
  max-width: 500px;
  margin-bottom: 10px;
  display: block;
}

.account-information-form .form-control:focus {
  border-color: var(--main-color);
  box-shadow: none;
  outline: none;
}

.account-information-form .form-control:disabled {
  cursor: not-allowed;
  color: #999;
  opacity: 1;
  background-color: #f5f5f5;
}

.account-information-form .update {
  background: var(--main-color);
  color: #fff;
  vertical-align: middle;
  border: none;
  border-radius: 6px;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  transition: all .2s;
}

.account-information-form .update:hover {
  background: #0a7ab8;
}

.form-input-container {
  background-color: #f5f5f5;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  align-items: center;
  width: 100%;
  max-width: 500px;
  padding: 10px 14px;
  display: flex;
  position: relative;
}

.form-input-container input {
  color: #999;
  background: none;
  outline: none;
  flex: 1;
  border: none !important;
  padding: 0 !important;
}

.form-input-container input:focus {
  box-shadow: none !important;
  border: none !important;
}

.form-input-container .cursor-p {
  color: var(--main-color);
  cursor: pointer;
  white-space: nowrap;
  margin-left: 12px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
}

.form-input-container .cursor-p:hover {
  text-decoration: underline;
}

.account-logout {
  cursor: pointer;
  color: var(--sec-text-color);
  background: none;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  align-items: center;
  width: auto;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.account-logout:hover {
  background-color: #f5f5f5;
  border-color: #bbb;
  text-decoration: none;
}

.account-logout img {
  width: 18px;
  height: 18px;
}

.account-logout .ps-3 {
  padding-left: 12px;
}

.text-no-result {
  color: var(--sec-text-color);
  padding: 40px 20px;
  font-size: 18px;
  font-weight: 500;
}

.main-title {
  padding: 0;
}

.super-title {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
}

.text-fs-24 {
  font-size: 24px;
}

.text-fs-18 {
  font-size: 18px;
}

.margin-bottom-24 {
  margin-bottom: 24px;
}

.margin-top-40 {
  margin-top: 40px;
}

.color-text-4d4d4d {
  color: #4d4d4d;
  line-height: 1.8;
}

.color-text-4d4d4d li {
  margin-bottom: 12px;
}

.title {
  color: var(--text-color);
  font-size: 18px;
  font-weight: 600;
}

.app-access-links {
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  display: flex;
}

.download {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 30px;
  align-items: center;
  padding: 12px 24px;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.download:hover {
  background: var(--main-color);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px #0000001a;
  background-color: #0d8dce !important;
}

.download:hover .download-title, .download:hover .download-subtitle {
  color: #fff;
}

.download.apple, .download.android {
  background: #fff;
}

.download-icon {
  align-items: center;
  margin-right: 12px;
  display: flex;
}

.download-icon svg {
  width: 28px;
  height: auto;
}

.download-desc {
  flex-direction: column;
  display: flex;
}

.download-title {
  color: #6e6e6e;
  font-size: 12px;
  line-height: 1.2;
}

.download-subtitle {
  color: #2c2c2c;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.w-space-5 {
  width: 5px;
}

.account-linked {
  color: #4d4d4d;
  margin-top: 24px;
  margin-bottom: 24px;
  font-size: 18px;
  display: block;
}

.manual-code {
  color: #2c2c2c;
  word-break: break-all;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  font-family: monospace;
  font-size: 14px;
  display: flex;
}

.manual-code img {
  cursor: pointer;
  opacity: .7;
  width: 20px;
  height: 20px;
  transition: opacity .2s;
}

.manual-code img:hover {
  opacity: 1;
}

.main-color {
  color: var(--main-color);
}

.custom-postion {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .app-access-links {
    flex-wrap: wrap;
  }

  .download {
    flex: auto;
    min-width: 200px;
  }

  .super-title, .text-fs-24 {
    font-size: 20px;
  }

  .text-fs-18 {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .app-access-links {
    flex-direction: column;
  }

  .download {
    width: 100%;
    max-width: 100%;
  }
}

.link-with-app {
  background: #eff6fc;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.link-with-app .accordion-item {
  background: #eff6fc;
  border: none;
}

.link-with-app .accordion-button {
  color: var(--bs-heading-color);
  box-shadow: none;
  background: #eff6fc;
  border: none;
  padding: 16px 20px;
  font-weight: 600;
}

.link-with-app .accordion-button:not(.collapsed) {
  color: var(--bs-heading-color);
  box-shadow: none;
  background: #eff6fc;
}

.link-with-app .accordion-button:focus {
  box-shadow: none;
  border-color: #0000;
}

.link-with-app .accordion-button:after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.link-with-app .accordion-body {
  padding: 20px;
}

.link-with-app .check-list {
  flex-shrink: 0;
}

.fs-18 {
  font-size: 18px;
}

.first-line {
  margin-bottom: 16px;
}

.link-qr-container {
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  display: flex;
}

.link-qr-container img {
  width: 100%;
  max-width: 250px;
  height: auto;
}

.products-modules {
  margin-bottom: 20px;
}

.products-modules nav.modules-nav .modules-container {
  background-color: #fbfbfb;
  width: 100%;
}

.sx-overflow {
  -webkit-overflow-scrolling: touch;
  overflow: auto hidden;
}

.sx-overflow::-webkit-scrollbar {
  display: none;
}

nav.modules-nav {
  justify-content: center;
  width: 955px;
  margin: auto;
}

.modules-nav {
  border-bottom: none;
  display: flex;
}

.modules-container {
  background-color: #efefef;
  border-radius: 30px;
  justify-content: space-around;
  height: 54px;
  display: flex;
}

.modules-container a {
  color: var(--main-text-color);
  white-space: nowrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 15px 33px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.modules-container a:not(.router-link-active) {
  color: #646464 !important;
}

.modules-container a:hover {
  color: var(--main-color);
}

.modules-container a.router-link-active {
  border-radius: inherit;
  border: 1px solid var(--main-color);
  font-weight: bold;
  color: var(--main-color) !important;
  background-color: #fff !important;
}

.modules-container a span {
  padding-inline-start: 5px;
}

.indicators {
  align-items: center;
  gap: 0;
  display: none;
}

.bullet {
  background: none;
  border: 1px solid #a2a2a2;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-inline-end: 10px;
  transition: all .3s;
}

.bullet.active {
  background-color: var(--main-color);
  border: 0;
}

.products-modules-categs {
  margin: 20px 0;
}

.products-modules-categs .nav {
  padding-bottom: 12px;
}

.products-modules-categs button {
  color: var(--sec-text-color);
  background: none;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 500;
  transition: all .3s;
}

.products-modules-categs button.active {
  color: var(--main-color);
  background: #eff6fc;
  font-weight: 600;
}

.products-modules-categs button:hover:not(.active) {
  background: #f5f5f5;
}

.module-search {
  width: 100%;
  margin-bottom: 20px;
}

.mobile-data-module-search .input-container {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  align-items: center;
  padding: 10px 16px;
  display: flex;
  position: relative;
}

.mobile-data-module-search .input-container svg {
  flex-shrink: 0;
  margin-right: 12px;
}

.mobile-data-module-search .input-field {
  color: var(--text-color);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: 16px;
}

.mobile-data-module-search .input-field::placeholder {
  color: #999;
}

.no-result-buy {
  background: var(--main-color);
  color: #fff;
  border-radius: 30px;
  padding: 12px 32px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s;
  display: inline-block;
}

.no-result-buy:hover {
  color: #fff;
  background: #0b7ab8;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0d8dce4d;
}

.products-module-categ-content {
  padding: 20px 0;
}

.active-numbers-content {
  min-height: 300px;
}

@media (max-width: 992px) {
  .products-modules::-webkit-scrollbar {
    width: 11px;
  }

  .products-modules::-webkit-scrollbar-track {
    background: #fff;
    padding: 10px;
  }

  .products-modules::-webkit-scrollbar-thumb {
    background-color: #fff;
  }

  .products-modules nav.modules-nav {
    width: 660px !important;
  }

  .products-modules nav.modules-nav .modules-container {
    border-radius: 30px;
  }

  .sx-overflow {
    overflow-x: scroll;
  }

  nav.modules-nav .modules-container {
    border-radius: 15px;
    height: auto;
  }

  nav.modules-nav .modules-container a {
    padding: 13px 12px;
  }

  .nav.modules-nav {
    width: auto !important;
  }

  .nav.modules-nav a {
    text-align: center;
  }

  .nav.modules-nav a span {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .indicators {
    display: flex;
  }

  .nav.modules-nav {
    display: block;
  }
}

@media (max-width: 576px) {
  nav.modules-nav .modules-container a {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 6px;
    display: flex;
  }

  .nav.modules-nav a span {
    font-size: 12px;
  }
}

@media (max-width: 500px) {
  nav.modules-nav:not(.installation) .modules-container {
    justify-content: space-between;
    width: 100% !important;
  }

  nav.modules-nav .modules-container a {
    padding: 12px 16px !important;
  }
}

@media (max-width: 410px) {
  nav.modules-nav:not(.installation) .modules-container {
    width: 100% !important;
  }

  nav.modules-nav .modules-container a {
    padding: 12px 0 !important;
  }
}

@media (max-width: 991px) {
  .profile-sidebar {
    margin-bottom: 30px;
  }

  .account-information-form .form-control {
    width: 100%;
    max-width: 100%;
  }

  .account-information-form .form-control.d-inline-block {
    width: 100%;
    max-width: 100%;
    display: block;
  }

  .form-input-container {
    width: 100%;
    max-width: 100%;
  }

  .account-information-form .update {
    width: 100%;
    display: block;
    margin-top: 10px !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 576px) {
  .account-information-form .form-label {
    font-size: 14px;
  }

  .account-information-form .form-control {
    padding: 8px 12px;
    font-size: 14px;
  }

  .account-information-form .update {
    padding: 8px 20px;
    font-size: 14px;
  }

  .account-logout {
    padding: 10px 16px;
    font-size: 14px;
  }
}

.buy-plan-container {
  margin-bottom: 40px;
}

.buy-plan-header {
  margin-bottom: 20px;
}

.back-button {
  color: #4d4d4d;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s;
  display: inline-flex;
}

.back-button:hover {
  color: var(--main-color);
}

.back-button svg {
  transition: transform .3s;
}

.back-button:hover svg path {
  fill: var(--main-color);
}

.plan-banner {
  background: #f8f9fa;
  border-radius: 20px;
  padding: 40px;
}

.buy-plan-background {
  background: #e5f3fab5;
}

.plan-title {
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  display: flex;
}

.buy-package-title {
  margin: 0;
  font-size: 32px;
  font-weight: bold;
}

.margin-top-15 {
  margin-top: 15px;
}

.plan-footer .info {
  min-width: 200px;
}

.plan-footer .info > div {
  min-width: 150px;
}

.plan-footer .buy {
  flex-direction: column;
  align-items: center;
  width: 60%;
  display: flex;
}

.plan-footer .buy .discount-area {
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.plan-footer .buy .discount-percentage {
  color: #28a745;
  font-size: 14px;
  font-weight: 600;
}

.plan-footer .buy .discount-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
}

.buy-button {
  justify-content: center;
  width: 100%;
  display: flex;
}

.buy-btn {
  background: var(--buy-btn-color);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 80%;
  height: 60px;
  padding: 12px 30px;
  font-size: 20px;
  font-weight: 600;
  transition: all .3s;
  background-color: var(--buy-btn-color) !important;
}

.buy-button .btn {
  color: #fff;
  border-radius: 32px;
  width: 80%;
  font-size: 20px;
  font-weight: bold;
}

.buy-btn:hover {
  transition: all .3s;
  transform: scale(1.05);
}

.link-button {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 14px;
}

.link-button:hover {
  opacity: .8;
}

.information .title, .supported .title {
  color: var(--main-text-color);
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}

.additional {
  background-color: #f8f8f8;
  padding: 20px;
}

.additional .activation-policy {
  background-color: #f8f8f8;
  font-size: 16px;
}

.local-supported .country {
  background: #f8f8f8;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 15px;
  display: flex;
}

.local-supported .country span {
  color: var(--main-text-color);
  font-weight: 600;
}

.supported-devices {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  overflow: hidden;
}

.supported-devices .search {
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px;
  position: sticky;
  top: 0;
}

.supported-devices .input-container {
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 25px;
  align-items: center;
  padding: 10px 20px;
  display: flex;
  position: relative;
}

.supported-devices .input-container svg {
  flex-shrink: 0;
  margin-right: 10px;
}

.supported-devices .input-field {
  color: #4d4d4d;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.supported-devices .input-field::placeholder {
  color: #999;
}

.supported-devices .body {
  background: #f8f8f8;
  max-height: 500px;
  padding: 20px;
  overflow-y: auto;
}

.supported-devices .device {
  text-align: center;
  background: #fff;
  border: 1px solid #0000;
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 15px 10px;
  transition: all .3s;
  display: flex;
}

.supported-devices .device:hover {
  border-color: #e0e0e0;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px #00000014;
}

.supported-devices .device .img {
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  display: flex;
}

.supported-devices .device .img img {
  object-fit: contain;
  width: 100px;
  height: 100px;
}

.supported-devices .device span {
  color: #4d4d4d;
  word-break: break-word;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.scroll-content {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}

.region-supported {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  overflow: hidden;
}

.region-supported .search {
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px;
  position: sticky;
  top: 0;
}

.region-supported .input-container {
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 25px;
  align-items: center;
  padding: 10px 20px;
  display: flex;
  position: relative;
}

.region-supported .input-container svg {
  flex-shrink: 0;
  margin-right: 10px;
}

.region-supported .input-field {
  color: #4d4d4d;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.region-supported .input-field::placeholder {
  color: #999;
}

.region-supported .body {
  background: #f8f8f8;
  max-height: 279px;
  padding: 20px;
  overflow-y: auto;
}

.region-supported .country {
  border-bottom: 1px solid #e8e8e8;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  display: flex;
}

.region-supported .country:last-child {
  border-bottom: none;
}

.region-supported .country img {
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  width: 35px;
  height: 24px;
}

.region-supported .country span.sec {
  color: #4d4d4d;
  font-size: 15px;
  font-weight: 500;
}

.buy-region-countries-list .device {
  text-align: center;
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 15px;
  transition: all .3s;
  display: flex;
}

.buy-region-countries-list .device:hover {
  border-color: var(--main-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0d8dce26;
}

.buy-region-countries-list .device .img {
  margin-bottom: 10px;
}

.buy-region-countries-list .device .img img {
  object-fit: contain;
  width: 100px;
  height: 100px;
}

.buy-region-countries-list .device span {
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 500;
}

.suggested-plans {
  margin-top: 60px;
  margin-bottom: 40px;
}

.suggested-plans .title {
  color: var(--main-text-color);
  margin-bottom: 30px;
  font-weight: bold;
}

.discount-area-suggested-plans {
  align-items: center;
  min-height: 24px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}

.discount-area-suggested-plans .discount-percentage {
  color: #28a745;
  font-size: 14px;
  font-weight: 600;
}

.discount-area-suggested-plans .discount-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
}

.promoCodeModal .modal-content {
  border: none;
  border-radius: 20px;
}

.promoCodeModal .modal-header {
  border-bottom: none;
  padding: 25px 30px 10px;
}

.promoCodeModal .modal-title {
  color: var(--main-text-color);
  font-size: 20px;
  font-weight: bold;
}

.promo-code-container {
  padding: 20px;
}

.promo-code-container .input-group {
  border: 1px solid #d4d4d4;
  border-radius: 25px;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.promo-code-container .input-group-text {
  background: #fff;
  border: none;
  align-items: center;
  padding-left: 15px;
  display: flex;
}

.promo-icon {
  align-items: center;
  display: flex;
}

.promo-input {
  padding: 12px 10px;
  font-size: 14px;
  box-shadow: none !important;
  border: none !important;
}

.promo-input:focus {
  box-shadow: none !important;
  outline: none !important;
}

.apply-btn {
  background: var(--main-color);
  color: #fff;
  border: none;
  border-radius: 25px;
  margin-right: 5px;
  padding: 10px 25px;
  font-weight: 600;
  transition: all .3s;
  background-color: var(--main-color) !important;
}

.apply-btn:hover:not(:disabled) {
  background: #0b7bb8;
  transform: scale(1.05);
  background-color: #0b7bb8 !important;
}

.apply-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .plan-banner {
    padding: 25px;
  }

  .buy-package-title {
    font-size: 24px;
  }

  .plan-footer {
    flex-direction: column;
    gap: 20px;
  }

  .plan-footer .info, .plan-footer .buy {
    width: 100%;
  }

  .plan-footer .info {
    order: 1;
  }

  .plan-footer .buy {
    order: 2;
    align-items: center;
  }

  .plan-footer .buy .discount-area, .buy-button {
    justify-content: center;
  }

  .buy-btn {
    width: 100%;
  }

  .information, .supported {
    margin-bottom: 30px;
  }

  .supported-devices .body, .region-supported .body {
    max-height: 300px;
  }

  .buy-region-countries-list .device {
    padding: 10px;
  }

  .buy-region-countries-list .device .img img {
    width: 80px;
    height: 80px;
  }

  .suggested-plans .local-plan-card {
    margin-bottom: 20px;
  }
}

.active-plans-container .country-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  display: flex;
}

.active-plans-container .country-header a.cursor-p {
  color: #4d4d4d;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.active-plans-container .country-header a.cursor-p:hover {
  color: var(--main-color);
}

.active-plans-container .country-header a.cursor-p svg {
  transition: transform .3s;
}

.active-plans-container .country-header a.cursor-p:hover svg path {
  fill: var(--main-color);
}

.active-plans-container .country-header .just-margin {
  width: auto;
}

.regional-plan-card {
  border: 1px solid #f5f5f5;
  border-radius: 15px 15px 84px;
  flex-direction: column;
  height: 100%;
  padding: 25px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 2px 12px #00000014;
}

[dir="rtl"] .regional-plan-card {
  border-radius: 15px 15px 15px 84px;
}

.regional-plan-card:hover {
  border-color: #e0e0e0;
  transform: translateY(-4px);
  box-shadow: 0 6px 20px #0000001f;
}

.regional-plan-card .header {
  border-bottom: none;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 0;
  display: flex;
}

.regional-plan-card .header span {
  color: #1a1a1a;
  letter-spacing: -.2px;
  font-size: 16px;
  font-weight: 600;
}

.regional-plan-card .header .btn {
  color: #707070;
  white-space: nowrap;
  background: none;
  border: 1px solid #707070;
  border-radius: 50px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: bold;
  transition: all .2s;
}

.regional-plan-card .header .btn:hover {
  color: #fff;
  background: #0d8dce;
  border-color: #0d8dce;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #0d8dce33;
}

.regional-plan-card .regoinal-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 12px;
}

.regional-plan-card .regoinal-table thead tr.head th {
  color: #6e6e6e;
  text-transform: uppercase;
  letter-spacing: .3px;
  border: none;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
}

.regional-plan-card .regoinal-table thead tr.head th:first-child {
  text-align: left;
}

.regional-plan-card .regoinal-table .tbody-border-top-14 {
  border-top: 8px solid #0000;
}

.regional-plan-card .regoinal-table tbody tr td {
  color: #1a1a1a;
  border: none;
  padding: 12px 10px;
  font-size: 17px;
  font-weight: 600;
}

.regional-plan-card .regoinal-table tbody tr td.values {
  letter-spacing: -.3px;
  color: #0d8dce;
  font-size: 19px;
}

.regional-plan-card .regoinal-table tbody tr td:first-child {
  text-align: left;
}

.regional-plan-card .discount-area {
  align-items: center;
  min-height: 0;
  margin-bottom: 8px;
  display: flex;
}

.regional-plan-card .discount-area.invisible-placeholder {
  display: none;
}

.regional-plan-card .discount-percentage {
  color: #f57c00;
  letter-spacing: .3px;
  background: #fff8e1;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
}

.regional-plan-card .discount-price {
  color: #9e9e9e;
  font-size: 14px;
  font-weight: 500;
  text-decoration: line-through;
}

.regional-plan-card .btn.buy {
  color: #fff;
  text-align: center;
  letter-spacing: -.2px;
  background: #28a745;
  border: none;
  border-radius: 50px;
  width: 90%;
  margin-top: auto;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s;
  display: block;
  box-shadow: 0 4px 12px #28a74533;
}

.regional-plan-card .btn.buy:hover {
  color: #fff;
  background: #218838;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px #28a74559;
}

.supportedCountriesModal .modal-dialog {
  max-width: 600px;
}

.supportedCountriesModal .modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px #00000026;
}

.supportedCountriesModal .modal-header {
  border-bottom: 1px solid #f0f0f0;
  padding: 24px;
  position: relative;
}

.supportedCountriesModal .modal-header .modal-title {
  color: #2c2c2c;
  font-size: 20px;
  font-weight: 600;
}

.supportedCountriesModal .modal-body {
  max-height: 500px;
  padding: 0 24px 24px;
  overflow-y: auto;
}

.supportedCountriesModal .search-fixed {
  z-index: 10;
  background: #fff;
  padding-top: 16px;
  padding-bottom: 5px;
  position: sticky;
  top: 0;
}

.supportedCountriesModal .module-search .input-container {
  width: 100%;
  position: relative;
}

.supportedCountriesModal .module-search .input-container svg {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}

.supportedCountriesModal .module-search .input-field {
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  width: 100%;
  padding: 12px 16px 12px 48px;
  font-size: 14px;
  transition: all .2s;
}

.supportedCountriesModal .module-search .input-field:focus {
  border-color: #0d8dce;
  outline: none;
  box-shadow: 0 0 0 3px #0d8dce14;
}

.supportedCountriesModal .text-no-result {
  color: #6e6e6e;
  font-size: 14px;
}

.supportedCountriesModal .col-12 {
  border-bottom: 1px solid #f5f5f5;
  padding: 12px 0;
}

.supportedCountriesModal .col-12:last-child {
  border-bottom: none;
}

.supportedCountriesModal .col-12 > div {
  align-items: center;
  display: flex;
}

.supportedCountriesModal .col-12 img {
  border-radius: 4px;
  box-shadow: 0 1px 3px #0000001a;
}

.supportedCountriesModal .col-12 span {
  color: #2c2c2c;
  font-weight: 500;
}

@media (max-width: 768px) {
  .active-plans-container .country-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .regional-plan-card {
    padding: 20px;
  }

  .regional-plan-card .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .regional-plan-card .header .btn {
    text-align: center;
    width: 100%;
  }

  .regional-plan-card .regoinal-table thead tr.head th {
    padding: 8px 4px;
    font-size: 13px;
  }

  .regional-plan-card .regoinal-table tbody tr td {
    padding: 12px 4px;
    font-size: 15px;
  }

  .supportedCountriesModal .modal-dialog {
    max-width: 100%;
    height: 100vh;
    margin: 0;
  }

  .supportedCountriesModal .modal-content {
    border-radius: 0;
    height: 100vh;
  }
}

.checkout-page {
  min-height: calc(100vh - 400px);
  padding-top: 40px;
}

.checkout-page .back-link {
  color: #4d4d4d;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s;
  display: inline-flex;
}

.checkout-page .back-link:hover {
  color: #0d8dce;
}

.checkout-page .back-link:hover svg path {
  fill: #0d8dce;
}

.checkout-page .back-arrow {
  transition: all .3s;
}

.checkout-page .payment-section {
  padding-right: 30px;
}

.checkout-page .email-section {
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  margin-bottom: 24px;
  padding: 30px;
}

.checkout-page .email-section label {
  color: #2c2c2c;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  display: block;
}

.checkout-page .email-section .form-control {
  color: #666;
  background: #f9f9f9;
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  width: 100%;
  height: 50px;
  padding: 12px 16px;
  font-size: 14px;
}

.checkout-page .payment-fields-container {
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 30px;
}

.checkout-page .payment-field-group {
  margin-bottom: 20px;
}

.checkout-page .payment-field-group:last-child {
  margin-bottom: 0;
}

.checkout-page .payment-field-group label {
  color: #30313d;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.checkout-page .payment-input, .checkout-page .payment-select {
  color: #30313d;
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  transition: all .2s;
}

.checkout-page .payment-input:focus, .checkout-page .payment-select:focus {
  border-color: #0d8dce;
  outline: none;
  box-shadow: 0 0 0 3px #0d8dce14;
}

.checkout-page .payment-input.error, .checkout-page .payment-select.error {
  border-color: #dc3545;
}

.checkout-page .payment-input-wrapper {
  position: relative;
}

.checkout-page .payment-input-wrapper .payment-input {
  padding-right: 80px;
}

.checkout-page .payment-input-wrapper .card-icons {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.checkout-page .payment-field-row {
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
}

.checkout-page .payment-field-row .flex-1 {
  flex: 1;
}

.checkout-page .payment-field-row .payment-field-group {
  margin-bottom: 0;
}

.checkout-page .payment-select-wrapper {
  position: relative;
}

.checkout-page .payment-select {
  appearance: none;
  cursor: pointer;
  padding-right: 40px;
}

.checkout-page .payment-select-wrapper .select-arrow {
  pointer-events: none;
  color: #6b7c93;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.checkout-page .payment-select-wrapper .select-arrow svg {
  width: .8em;
  height: .8em;
}

.checkout-page .field-error, .checkout-page .text-danger {
  color: #dc3545;
  margin-top: 6px;
  margin-bottom: 0;
  font-size: 13px;
}

.checkout-page .btn-numero {
  border-radius: 20px;
  height: 50px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
}

.checkout-page .btn-numero:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.checkout-page .order-summary {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  height: fit-content;
  padding: 30px;
  position: sticky;
  top: 100px;
}

.checkout-page .order-checkout-esim {
  color: #2c2c2c;
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: 700;
}

.checkout-page .product-summary {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.checkout-page .product-summary img {
  object-fit: contain;
  border-radius: 4px;
}

.checkout-page .product-summary p {
  color: #666;
  margin: 0;
  font-size: 15px;
}

.checkout-page .product-summary .payment-checkout-esim {
  color: #2c2c2c;
  font-weight: 600;
}

.checkout-page .total-summary {
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  display: flex;
}

.checkout-page .payment-checkout-loading {
  color: #2c2c2c;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.checkout-page .total-summary .payment-checkout-esim {
  color: #0d8dce;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.checkout-page .stripe-placeholder {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}

.checkout-page .card-input-group {
  margin-bottom: 16px;
}

.checkout-page .card-input-group label, .checkout-page .col-6 label {
  color: #30313d;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.checkout-page .card-input {
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  align-items: center;
  min-height: 44px;
  padding: 12px;
  transition: all .2s;
  display: flex;
  position: relative;
}

.checkout-page .card-input:focus-within {
  border-color: #0d8dce;
  box-shadow: 0 0 0 3px #0d8dce14;
}

.checkout-page .placeholder-text {
  color: #8898aa;
  font-size: 14px;
}

.checkout-page .card-icons {
  gap: 4px;
  display: flex;
  position: absolute;
  right: 12px;
}

.checkout-page .card-icons img {
  opacity: .6;
}

.checkout-page .p-CardBrandIcons {
  gap: 6px;
  display: flex;
}

.checkout-page .p-CardBrandIcons-item {
  justify-content: center;
  align-items: center;
  display: flex;
}

.checkout-page .p-CardBrandIcon {
  opacity: .7;
  transition: opacity .2s;
  display: block;
}

.checkout-page .p-CardBrandIcon:hover {
  opacity: 1;
}

.checkout-page .p-BillingAddressForm {
  margin-top: 20px;
  margin-bottom: 20px;
}

.checkout-page .u-mt-grid {
  margin-top: 16px;
}

.checkout-page .p-Grid {
  flex-wrap: wrap;
  margin: 0 -8px;
  display: flex;
}

.checkout-page .p-GridCell {
  padding: 0 8px;
}

.checkout-page .p-GridCell--12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.checkout-page .p-Field {
  margin-bottom: 16px;
}

.checkout-page .p-FieldLabel {
  color: #30313d;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.checkout-page .p-Select {
  display: block;
  position: relative;
}

.checkout-page .p-Select-select {
  color: #30313d;
  appearance: none;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  width: 100%;
  height: 44px;
  padding: 10px 40px 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  transition: all .2s;
}

.checkout-page .p-Select-select:hover {
  border-color: #a0a0a0;
}

.checkout-page .p-Select-select:focus {
  border-color: #0d8dce;
  outline: none;
  box-shadow: 0 0 0 3px #0d8dce14;
}

.checkout-page .p-Select-select.error {
  border-color: #dc3545;
}

.checkout-page .p-Select-select option {
  padding: 8px 12px;
}

.checkout-page .p-InputIcon {
  pointer-events: none;
  color: #6b7c93;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.checkout-page .c-InputPadding {
  padding: 0;
}

.checkout-page .c-InputFontSize {
  font-size: 14px;
}

.checkout-page .c-InputFontColor {
  color: #6b7c93;
}

.checkout-page .c-InputTransparentBorder {
  border: none;
}

.checkout-page .p-Field--error .p-Select-select {
  border-color: #dc3545;
}

@media (max-width: 768px) {
  .checkout-page {
    padding-top: 20px;
  }

  .checkout-page .payment-section {
    padding-left: 15px;
    padding-right: 15px;
  }

  .checkout-page .order-summary {
    margin-bottom: 30px;
    position: relative;
    top: 0;
  }

  .checkout-page .payment-fields-container {
    padding: 20px;
  }

  .checkout-page .payment-field-row {
    flex-direction: column;
    gap: 0;
  }

  .checkout-page .payment-field-row .payment-field-group {
    margin-bottom: 20px;
  }

  .checkout-page .payment-field-row .payment-field-group:last-child {
    margin-bottom: 0;
  }

  .checkout-page .payment-section {
    padding-right: 0;
  }

  .region-supported .body {
    max-height: 250px;
    padding: 15px;
  }

  .supported-devices .body {
    max-height: 350px;
    padding: 15px;
  }

  .supported-devices .device {
    padding: 10px 5px;
  }

  .supported-devices .device .img, .supported-devices .device .img img {
    width: 80px;
    height: 80px;
  }

  .supported-devices .device span {
    font-size: 12px;
  }

  .information .title, .supported .title {
    font-size: 18px;
  }
}

.full-esim-country-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.full-esim-country-page .page-header {
  margin-bottom: 30px;
}

.full-esim-country-page .page-title {
  color: #4d4d4d;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
}

.full-esim-country-page .country-header-section {
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  display: flex;
}

.full-esim-country-page .back-link {
  color: #4d4d4d;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.full-esim-country-page .back-link:hover {
  color: #0d8dce;
}

.full-esim-country-page .back-link:hover svg path {
  fill: #0d8dce;
}

.full-esim-country-page .country-info {
  background: #f8f9fa;
  border-radius: 50px;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  display: flex;
}

.full-esim-country-page .country-info img {
  object-fit: cover;
  border-radius: 50%;
}

.full-esim-country-page .country-info span {
  color: #4d4d4d;
  font-size: 18px;
  font-weight: 600;
}

.full-esim-country-page .plans-grid {
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 30px;
  display: grid;
}

.full-esim-country-page .plan-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 15px;
  padding: 25px;
  transition: all .3s;
  box-shadow: 0 2px 8px #0000000d;
}

.full-esim-country-page .plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #0000001a;
}

.full-esim-country-page .provider-header {
  margin-bottom: 20px;
}

.full-esim-country-page .provider-info {
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  display: flex;
}

.full-esim-country-page .provider-info img {
  object-fit: contain;
  width: 40px;
  height: 40px;
}

.full-esim-country-page .provider-text {
  flex: 1;
}

.full-esim-country-page .provider-name {
  color: #4d4d4d;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.full-esim-country-page .provider-subtitle {
  color: #6e6e6e;
  margin: 4px 0 0;
  font-size: 14px;
}

.full-esim-country-page .supported-countries-badge {
  color: #0d8dce;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all .3s;
  display: flex;
}

.full-esim-country-page .supported-countries-badge:hover {
  color: #0a6fa8;
}

.full-esim-country-page .supported-countries-badge svg {
  width: 20px;
  height: 20px;
}

.full-esim-country-page .plan-divider {
  border: none;
  border-top: 1px solid #e8e8e8;
  margin: 20px 0;
}

.full-esim-country-page .plan-details {
  flex-direction: column;
  gap: 16px;
  margin-bottom: 25px;
  display: flex;
}

.full-esim-country-page .detail-item {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.full-esim-country-page .detail-label {
  color: #6e6e6e;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
}

.full-esim-country-page .detail-label svg {
  stroke: #0d8dce;
  width: 20px;
  height: 20px;
}

.full-esim-country-page .detail-value {
  color: #4d4d4d;
  font-size: 15px;
  font-weight: 600;
}

.full-esim-country-page .detail-note {
  color: #0d8dce;
  cursor: pointer;
  margin-top: -8px;
  font-size: 13px;
  font-style: italic;
}

.full-esim-country-page .detail-note:hover {
  text-decoration: underline;
}

.full-esim-country-page .plan-actions {
  align-items: center;
  gap: 15px;
  display: flex;
}

.full-esim-country-page .btn-buy {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #5cb45b 0%, #4a9f49 100%);
  border: none;
  border-radius: 50px;
  flex: 1;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  box-shadow: 0 4px 12px #5cb45b33;
}

.full-esim-country-page .btn-buy:hover {
  background: linear-gradient(135deg, #4a9f49 0%, #3d8a3d 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #5cb45b59;
}

.full-esim-country-page .btn-details {
  color: #0d8dce;
  cursor: pointer;
  background: none;
  border: 1px solid #0d8dce;
  border-radius: 50px;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  display: flex;
}

.full-esim-country-page .btn-details:hover {
  color: #fff;
  background: #0d8dce;
}

.full-esim-country-page .btn-details svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1024px) {
  .full-esim-country-page .plans-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
}

@media (max-width: 768px) {
  .full-esim-country-page {
    padding: 20px 15px;
  }

  .full-esim-country-page .page-title {
    font-size: 20px;
  }

  .full-esim-country-page .country-header-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .full-esim-country-page .plans-grid {
    grid-template-columns: 1fr;
  }

  .full-esim-country-page .plan-card {
    padding: 20px;
  }

  .full-esim-country-page .plan-actions {
    flex-direction: column;
  }

  .full-esim-country-page .btn-details {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .full-esim-country-page .provider-name {
    font-size: 16px;
  }

  .full-esim-country-page .detail-label {
    font-size: 13px;
  }

  .full-esim-country-page .detail-value {
    font-size: 14px;
  }

  .full-esim-country-page .btn-buy, .full-esim-country-page .btn-details {
    padding: 12px 20px;
    font-size: 14px;
  }
}

.terms-modal-overlay {
  z-index: 9999;
  background: #00000080;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: .3s fadeIn;
  display: flex;
  position: fixed;
  inset: 0;
}

.terms-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 500px;
  animation: .3s slideUp;
  position: relative;
  box-shadow: 0 10px 40px #0003;
}

.modal-close-btn {
  cursor: pointer;
  z-index: 10;
  background: #f5f5f5;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: all .3s;
  display: flex;
  position: absolute;
  top: 50px;
  right: 15px;
}

.modal-close-btn:hover {
  background: #e0e0e0;
  transform: rotate(90deg);
}

.modal-close-btn svg {
  stroke: #4d4d4d;
}

.modal-content {
  padding: 40px 30px 30px;
}

.alert-header {
  text-align: center;
  margin-bottom: 25px;
}

.alert-icon {
  stroke: #0d8dce;
  margin-bottom: 15px;
}

.alert-header h3 {
  color: #0d8dce;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.alert-warnings {
  margin: 0 0 25px;
  padding: 0;
  list-style: none;
}

.alert-warnings li {
  color: #4d4d4d;
  margin-bottom: 15px;
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
}

.alert-warnings li:before {
  content: "•";
  color: #0d8dce;
  font-size: 20px;
  line-height: 1.4;
  position: absolute;
  left: 10px;
}

.terms-checkbox {
  cursor: pointer;
  background: #f8f9fa;
  border-radius: 10px;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
}

.terms-checkbox input[type="checkbox"] {
  cursor: pointer;
  accent-color: #0d8dce;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.terms-checkbox label {
  color: #4d4d4d;
  cursor: pointer;
  flex: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.btn-confirm {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #0d8dce 0%, #0a6fa8 100%);
  border: none;
  border-radius: 50px;
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  box-shadow: 0 4px 12px #0d8dce33;
}

.btn-confirm:hover:not(:disabled) {
  background: linear-gradient(135deg, #0a6fa8 0%, #085580 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #0d8dce59;
}

.btn-confirm:disabled {
  cursor: not-allowed;
  box-shadow: none;
  background: #ccc;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .terms-modal {
    max-width: 100%;
    margin: 0 10px;
  }

  .modal-content {
    padding: 35px 20px 20px;
  }

  .alert-icon {
    width: 50px;
    height: 50px;
  }

  .alert-header h3 {
    font-size: 20px;
  }

  .alert-warnings li, .terms-checkbox label {
    font-size: 13px;
  }

  .btn-confirm {
    padding: 14px 20px;
    font-size: 15px;
  }
}

.module-categ-content {
  min-height: 400px;
}

.full-esim-country-content {
  padding: 20px 0;
}

.full-esim-country-content .header p {
  color: #4d4d4d;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
}

.full-esim-country-content .country-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.full-esim-country-content .country-header .cursor-p {
  color: #4d4d4d;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.full-esim-country-content .country-header .cursor-p:hover {
  color: #0d8dce;
}

.full-esim-country-content .country-header .cursor-p:hover .back-arrow path {
  fill: #0d8dce;
}

.full-esim-country-content .country-header .country-element {
  align-items: center;
  gap: 10px;
  display: flex;
}

.full-esim-country-content .country-header .country-element img {
  border-radius: 50%;
}

.full-esim-country-content .country-header .country-element span {
  color: #4d4d4d;
  font-size: 16px;
}

.full-esim-country-content .country-header .just-margin {
  flex: 1;
}

.full-esim-country-content .esim-content {
  margin-top: 30px !important;
}

.full-esim-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  flex-direction: column;
  height: 100%;
  transition: all .3s;
  display: flex;
  box-shadow: 0 2px 8px #00000014;
}

.full-esim-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #0000001f;
}

.border-corners-80 {
  border-radius: 15px 15px 80px;
  padding: inherit !important;
}

.full-esim-card .padding {
  padding: 0 25px;
}

.full-esim-card .card-title {
  border-bottom: 1px solid #f5f5f5;
  align-items: flex-start;
  padding-top: 20px !important;
  padding-bottom: 15px !important;
}

.full-esim-card .card-title .icon {
  flex-shrink: 0;
  margin-right: 12px !important;
}

.full-esim-card .card-title .title {
  flex: 1;
  margin-top: 0 !important;
}

.full-esim-card .card-title .title span {
  color: #4d4d4d;
  font-size: 18px;
}

.full-esim-card .card-title .title > div {
  color: #707070;
  margin-top: 4px;
  font-size: 14px;
}

.full-esim-card .mt-2 svg {
  vertical-align: middle;
}

.full-esim-card .clickable {
  cursor: pointer;
  transition: color .3s;
}

.full-esim-card .clickable:hover {
  color: #0d8dce !important;
}

.full-esim-card .details {
  flex: 1;
}

.full-esim-card .details .detail {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.full-esim-card .details .detail .title {
  margin-top: 0 !important;
}

.full-esim-card .details .detail:last-child {
  margin-bottom: 0;
}

.full-esim-card .details .detail .title {
  color: #707070;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  display: flex;
}

.full-esim-card .details .detail .icon svg {
  width: 20px;
  height: 20px;
}

.full-esim-card .details .detail .data {
  color: #4d4d4d;
  font-size: 15px;
  font-weight: 600;
}

.full-esim-card .mb-2 {
  margin-bottom: 16px;
}

.full-esim-card .main-color {
  color: #0d8dce !important;
}

.full-esim-card .gray-color {
  color: #707070 !important;
}

.full-esim-card .text-color {
  color: #4d4d4d !important;
}

.full-esim-card .text-decoration-underline {
  text-decoration: underline;
}

.full-esim-card .cursor-p {
  cursor: pointer;
}

.full-esim-card .text-fs-14 {
  font-size: 14px;
}

.full-esim-card .footer {
  border-top: 1px solid #f5f5f5;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: auto;
  display: flex;
  padding-top: 20px !important;
}

.full-esim-card .buy-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #5cb45b 0%, #4a9f49 100%);
  border: none;
  border-radius: 50px;
  flex: 1;
  min-width: 195px;
  margin-bottom: 10%;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  transition: all .3s;
  box-shadow: 0 4px 12px #5cb45b33;
}

.full-esim-card .buy-btn:hover {
  background: linear-gradient(135deg, #4a9f49 0%, #3d8a3d 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #5cb45b59;
  color: #fff !important;
}

.full-esim-card .details-btn {
  color: #4d4d4d;
  cursor: pointer;
  background: none;
  border-radius: 50px;
  align-items: center;
  gap: 8px;
  margin-bottom: 15%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  display: flex;
}

.full-esim-card .details-btn:hover {
  background: #f5f5f5;
  border-color: #d0d0d0;
}

.full-esim-card .details-arrow {
  transition: transform .3s;
}

.full-esim-card .details-btn:hover .details-arrow {
  transform: translateX(4px);
}

@media (max-width: 1199px) {
  .full-esim-card .card-title {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 576px) {
  .full-esim-country-content .country-header {
    display: block !important;
  }

  .margin-left-mobile {
    margin-left: 20px !important;
  }
}

@media (max-width: 347px) {
  .full-esim-card .details-btn {
    justify-content: space-between;
    padding: 0 0 0 10px;
    display: flex;
  }
}

@media (max-width: 768px) {
  .full-esim-country-content .country-header .just-margin {
    display: none;
  }

  .full-esim-card .footer {
    flex-direction: column;
  }

  .full-esim-card .details-btn {
    justify-content: center;
    width: 100%;
  }
}

.modal-overlay {
  z-index: 2050;
  background: #0009;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal-overlay .modal {
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.fullEsimDetailsModal .modal-dialog {
  width: 100%;
  max-width: 640px;
}

.fullEsimDetailsModal .modal-content {
  border: none;
  border-radius: 20px;
  padding: 25px;
  overflow: hidden;
  box-shadow: 0 20px 40px #00000040;
}

.floating-escape-button-container {
  position: relative;
}

.modal .modal-header .btn-close, .modal .modal-header .floating-escape-button {
  padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
  margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto;
}

.floating-escape-button {
  color: #4d4d4d;
  cursor: pointer;
  background: #f4f4f4;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  line-height: 1;
  transition: all .3s;
  display: flex;
}

.fullEsimDetailsModal .modal-header {
  border-bottom: none;
}

.fullEsimDetailsModal .modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #0d8dce !important;
}

.fullEsimDetailsModal .modal-body {
  padding: 5px 28px 28px;
}

.fullEsimDetailsModal .card-title {
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.fullEsimDetailsModal .supportedCountries .accordion-button {
  box-shadow: none;
  color: #4d4d4d;
  background: none;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: 600;
  display: flex;
}

.fullEsimDetailsModal .supportedCountries .accordion-button:not(.collapsed) {
  color: #0d8dce;
}

.fullEsimDetailsModal .supportedCountries .body {
  max-height: 360px;
  padding-right: 6px;
  overflow-y: auto;
}

.fullEsimDetailsModal .supportedCountries .body::-webkit-scrollbar {
  width: 6px;
}

.fullEsimDetailsModal .supportedCountries .body::-webkit-scrollbar-thumb {
  background: #0d8dce;
  border-radius: 10px;
}

.country-item {
  align-items: center;
  gap: 10px;
  display: flex;
}

.country-flag-placeholder {
  color: #0d8dce;
  background: #e8f4fb;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  display: inline-flex;
}

.fullEsimDetailsModal .details .detail {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.fullEsimDetailsModal .details .title {
  color: #707070;
  align-items: center;
  gap: 12px;
  display: flex;
}

.fullEsimDetailsModal .details .data {
  color: #4d4d4d;
  font-weight: 600;
}

.fullEsimDetailsModal .modal-footer {
  border-top: none;
  padding: 20px 28px 28px;
}

.fullEsimDetailsModal .buy-btn {
  color: #fff;
  background: linear-gradient(135deg, #5cb45b 0%, #4a9f49 100%);
  border: none;
  border-radius: 50px;
  width: 100%;
  padding: 14px 24px;
  font-weight: 600;
  transition: all .3s;
  box-shadow: 0 4px 14px #5cb45b47;
}

.fullEsimDetailsModal .buy-btn:hover {
  background: linear-gradient(135deg, #4a9f49 0%, #3c8a3c 100%);
  transform: translateY(-1px);
}

.zonesModal .modal-dialog {
  width: 100%;
  max-width: 700px;
}

.zonesModal .modal-content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px #00000040;
}

.zonesModal .modal-header {
  border-bottom: none;
  padding: 25px 28px 10px;
}

.zonesModal .modal-title {
  font-size: 22px;
  font-weight: bold;
  color: var(--main-color) !important;
}

.zonesModal .modal-body {
  max-height: 600px;
  padding: 10px 28px 32px;
  overflow-y: auto;
}

.zonesModal .modal-body::-webkit-scrollbar {
  width: 8px;
}

.zonesModal .modal-body::-webkit-scrollbar-thumb {
  background: #0d8dce;
  border-radius: 10px;
}

.zonesModal .input-search .input-container {
  width: auto;
  box-shadow: none;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 56px;
  margin-bottom: 20px;
  padding: 10px;
}

.zonesModal .input-search .input-field {
  background: none;
  border: none;
  outline: none;
  width: 90%;
  margin-left: 10px;
}

.fullEsimAlertModal .modal-dialog {
  max-width: 500px;
}

.fullEsimAlertModal .modal-content {
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 40px #00000026;
}

.fullEsimAlertModal .modal-header {
  border-bottom: none;
  justify-content: flex-end;
  padding: 20px 0 0;
}

.fullEsimAlertModal .modal-body {
  padding: 20px 30px 30px;
}

.fullEsimAlertModal .alert-icon {
  width: 78px;
  height: 70px;
  margin: 0 auto;
}

.fullEsimAlertModal .alerts {
  margin-top: 20px;
  margin-bottom: 20px;
}

.fullEsimAlertModal .alerts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fullEsimAlertModal .alerts li {
  color: #4d4d4d;
  margin-bottom: 15px;
  padding-left: 25px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
}

.fullEsimAlertModal .alerts li:before {
  content: "•";
  color: #0d8dce;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.fullEsimAlertModal .alerts li:last-child {
  margin-bottom: 0;
}

.fullEsimAlertModal .check-container {
  cursor: pointer;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0;
  display: flex;
}

.fullEsimAlertModal .check-container input[type="checkbox"] {
  opacity: 0;
  cursor: pointer;
  position: absolute;
}

.fullEsimAlertModal .checkmark {
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: all .3s;
  position: relative;
}

.fullEsimAlertModal .check-container input:checked ~ .checkmark {
  background-color: #0d8dce;
  border-color: #0d8dce;
}

.fullEsimAlertModal .check-container input:checked ~ .checkmark:after {
  content: "";
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  width: 5px;
  height: 10px;
  position: absolute;
  top: 2px;
  left: 6px;
  transform: rotate(45deg);
}

.fullEsimAlertModal .check-container p {
  color: #4d4d4d;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.fullEsimAlertModal .btn-numero {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #5cb45b 0%, #4a9f49 100%);
  border: none;
  border-radius: 50px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  box-shadow: 0 4px 12px #5cb45b33;
}

.fullEsimAlertModal .btn-numero:hover:not(:disabled) {
  background: linear-gradient(135deg, #4a9f49 0%, #3d8a3d 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #5cb45b59;
}

.fullEsimAlertModal .btn-numero:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.fullEsimAlertModal .fs-20 {
  font-size: 20px;
}

.fullEsimAlertModal .h-54 {
  min-height: 54px;
}

.sticky-search {
  z-index: 1;
  background: #fff;
  padding-bottom: 12px;
  position: sticky;
  top: 0;
}

.zones-container {
  flex-direction: column;
  gap: 18px;
  display: flex;
}

.zone-section {
  background: #f8f9fb;
  border: 1px solid #e6eef4;
  border-radius: 16px;
  padding: 18px 20px;
}

.zone-title {
  color: #0d8dce;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
}

.zone-description {
  color: #4d4d4d;
  margin-bottom: 12px;
  font-size: 14px;
}

.zone-country-list {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.zone-country {
  color: #4d4d4d;
  background: #fff;
  border: 1px solid #dde7f0;
  border-radius: 40px;
  padding: 6px 14px;
  font-size: 13px;
}

.zones-link {
  transition: color .2s;
}

.zones-link:hover, .zones-link:focus {
  color: #0b79b5;
}

@media (max-width: 768px) {
  .fullEsimDetailsModal .modal-dialog, .zonesModal .modal-dialog {
    max-width: 95%;
  }

  .fullEsimDetailsModal .modal-body, .zonesModal .modal-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .zone-country-list {
    gap: 6px;
  }

  .zone-country {
    padding: 6px 12px;
    font-size: 12px;
  }

  .fullEsimAlertModal .modal-dialog {
    max-width: 95%;
    margin: 1rem auto;
  }

  .fullEsimAlertModal .modal-body {
    padding: 15px 20px 20px;
  }

  .fullEsimAlertModal .alerts li {
    padding-left: 20px;
    font-size: 13px;
  }

  .fullEsimAlertModal .check-container {
    gap: 10px;
  }

  .fullEsimAlertModal .check-container p {
    font-size: 13px;
  }

  .fullEsimAlertModal .btn-numero {
    padding: 14px;
    font-size: 15px;
  }
}

html[dir="rtl"] .fullEsimDetailsModal .details .detail, html[dir="rtl"] .fullEsimDetailsModal .details .title {
  flex-direction: row-reverse;
}

html[dir="rtl"] .fullEsimDetailsModal .supportedCountries .accordion-button {
  justify-content: flex-end;
}

html[dir="rtl"] .zonesModal .zone-country-list, html[dir="rtl"] .zone-country {
  direction: rtl;
}

html[dir="rtl"] .fullEsimAlertModal .check-container {
  flex-direction: row-reverse;
}

html[dir="rtl"] .fullEsimAlertModal .alerts li {
  padding-left: 0;
  padding-right: 25px;
}

html[dir="rtl"] .fullEsimAlertModal .alerts li:before {
  left: auto;
  right: 0;
}

.active-local-calling-plans .country-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.active-local-calling-plans .country-header .link-button {
  color: #4d4d4d;
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: .5rem;
  padding: 0;
  font-size: 16px;
  display: flex;
}

.active-local-calling-plans .country-header .link-button:hover {
  opacity: .7;
}

.active-local-calling-plans .country-header .back-arrow {
  margin-right: .25rem;
}

.active-local-calling-plans .country-header .just-margin {
  flex: 1;
}

.local-calling-plan-card {
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  transition: transform .3s, box-shadow .3s;
  display: flex;
  box-shadow: 0 2px 12px #00000014;
}

.local-calling-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px #0000001f;
}

.local-calling-plan-card .header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  display: flex;
}

.local-calling-plan-card .header .area {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.local-calling-plan-card .header .area span {
  color: var(--main-color);
  font-size: 16px;
  font-weight: 600;
}

.local-calling-plan-card .header .supported button {
  border: 1px solid var(--main-text-color);
  color: var(--main-color);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 20px;
  padding: .5rem 1rem;
  font-size: 14px;
  transition: all .3s;
}

.local-calling-plan-card .content {
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
}

.local-calling-plan-card .content .left, .local-calling-plan-card .content .right {
  text-align: center;
}

.local-calling-plan-card .content .type {
  margin-bottom: .5rem;
  font-size: 16px;
}

.local-calling-plan-card .content .value {
  font-size: 1.5rem;
  line-height: 1.2;
}

.local-calling-plan-card .separator {
  justify-content: center;
  align-items: center;
  min-width: 60px;
  display: flex;
  position: relative;
}

.local-calling-plan-card .separator .line {
  background: #e0e0e0;
  width: 1px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.local-calling-plan-card .separator .wordwrapper {
  z-index: 1;
  background: #fff;
  padding: .25rem .5rem;
  position: relative;
}

.local-calling-plan-card .separator .word {
  color: var(--sec-text-color);
  font-size: 16px;
}

.local-calling-plan-card .buy button {
  background: var(--main-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  width: 100%;
  padding: .875rem 1.5rem;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
}

.local-calling-plan-card .buy button:hover {
  background: var(--hover-color);
  transform: translateY(-2px);
}

.SupportedOperatorsModal .modal-header {
  border-bottom: 1px solid #e9ecef;
  padding: 1.5rem;
  position: relative;
}

.SupportedOperatorsModal .modal-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.SupportedOperatorsModal .modal-body {
  padding: 1.5rem;
}

.SupportedOperatorsModal .country {
  border-bottom: 1px solid #e9ecef;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  display: flex;
}

.SupportedOperatorsModal .country span {
  color: var(--main-color);
  font-size: 1.25rem;
  font-weight: 600;
}

.SupportedOperatorsModal .coverage-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
}

.SupportedOperatorsModal .coverage-card .pre-formatted {
  white-space: pre-line;
  color: #495057;
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .active-local-calling-plans .country-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .active-local-calling-plans .country-header .just-margin {
    display: none;
  }

  .local-calling-plan-card .header {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .local-calling-plan-card .content {
    flex-direction: column;
    gap: 1rem;
  }

  .local-calling-plan-card .separator {
    min-width: auto;
    height: 60px;
    transform: rotate(90deg);
  }

  .local-calling-plan-card .content .value {
    font-size: 1.25rem;
  }
}

@media (max-width: 576px) {
  .local-calling-plan-card .header .supported button {
    padding: .4rem .8rem;
    font-size: 12px;
  }
}

.required-docs {
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
  display: flex;
}

.required-docs .title {
  color: #4d4d4d;
  z-index: 1;
  align-items: start;
  gap: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
}

.required-docs .question-docs {
  cursor: pointer;
  z-index: 1;
  flex-shrink: 0;
  gap: 0;
  width: 23px;
  height: 23px;
  transition: transform .2s;
  position: relative;
}

.required-docs .question-docs:hover {
  transform: scale(1.1);
}

.required-docs .fill-docs-btn {
  color: #636368;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 40%;
  padding: 12px 30px;
  font-weight: 500;
  transition: all .3s;
  display: flex;
}

.required-docs .fill-docs-btn:hover {
  border-color: var(--main-color);
  background-color: #f8f9fa;
}

.required-docs .fill-docs-btn .fill-out {
  width: 25px;
  height: 20px;
}

.modal.requirementsModal .modal-content {
  border-radius: 20px;
}

.modal.requirementsModal .modal-header {
  border-bottom: none;
  padding: 15px 20px 5px;
}

.modal.requirementsModal .modal-title {
  font-size: 18px;
  font-weight: bold;
}

.modal.requirementsModal .modal-body {
  padding: 10px 20px 15px;
}

.modal.requirementsModal .pre-formatted {
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.6;
}

.modal.requirementsModal .required-docs {
  color: #4d4d4d;
  background-color: #0000;
  border-radius: 0;
  margin-bottom: 0;
  padding: 0;
  display: block;
}

.modal.RequiredDocsModal .modal-content {
  border-radius: 20px;
}

.modal.RequiredDocsModal .modal-header {
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 30px;
}

.modal.RequiredDocsModal .modal-title {
  font-size: 20px;
  font-weight: bold;
}

.modal.RequiredDocsModal .modal-body {
  padding: 20px 30px;
}

.modal.RequiredDocsModal .info {
  background-color: #0000;
  margin-bottom: 0;
  padding: 0;
}

.modal.RequiredDocsModal .info ul {
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}

.modal.RequiredDocsModal .info li {
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0;
  display: flex;
}

.modal.RequiredDocsModal .info li img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.modal.RequiredDocsModal .info h6 {
  margin-bottom: 10px;
  font-size: 16px;
}

.modal.RequiredDocsModal .info li.mt-2 {
  margin-top: .5rem;
}

.modal.RequiredDocsModal .required-docs-content {
  padding: 0;
}

.modal.RequiredDocsModal .required-docs-nav {
  border-bottom: none;
  gap: 0;
  width: 100%;
  margin-bottom: 20px;
  padding-bottom: 0;
  display: flex;
}

.modal.RequiredDocsModal .required-docs-nav button {
  color: #4d4d4d;
  cursor: pointer;
  text-align: center;
  background: none;
  border: 2px solid #e0e0e0;
  border-radius: 30px;
  flex: 1;
  margin-right: 10px;
  padding: 12px 30px;
  font-weight: 500;
  transition: all .3s;
  position: relative;
}

.modal.RequiredDocsModal .required-docs-nav button:last-child {
  margin-right: 0;
}

.modal.RequiredDocsModal .required-docs-nav button.active {
  color: var(--main-color);
  border: 2px solid var(--main-color);
  background: none;
}

.modal.RequiredDocsModal .required-docs-nav button:hover:not(.active) {
  background: #0e8acc0d;
}

.modal.RequiredDocsModal .form-control, .modal.RequiredDocsModal .input-select-docs {
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 15px;
  width: 100%;
  padding: 13px;
  font-size: 14px;
}

.modal.RequiredDocsModal input.form-control, .modal.RequiredDocsModal input.input-select-docs {
  background-image: none !important;
}

.modal.RequiredDocsModal .form-control:focus, .modal.RequiredDocsModal .input-select-docs:focus {
  border-color: var(--main-color);
  box-shadow: none;
  background-color: #f5f5f5;
}

.modal.RequiredDocsModal .form-control::placeholder, .modal.RequiredDocsModal .input-select-docs::placeholder, .modal.RequiredDocsModal select.input-select-docs option:first-child {
  color: #999;
}

.modal.RequiredDocsModal .form-group label {
  display: none;
}

.modal.RequiredDocsModal .row-inputs {
  gap: 10px;
  margin-bottom: 15px;
  display: flex;
}

.modal.RequiredDocsModal .row-inputs .form-group {
  flex: 1;
  margin-bottom: 0;
}

.modal.RequiredDocsModal .section-title {
  color: #4d4d4d;
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
  display: block;
}

.modal.RequiredDocsModal .required-docs-file {
  color: #4d4d4d;
  margin-bottom: 15px;
  font-weight: 600;
}

.modal.RequiredDocsModal .docs-form-file {
  margin-bottom: 15px;
}

.modal.RequiredDocsModal .upload-input-container {
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 15px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px;
  transition: all .3s;
  display: flex;
}

.modal.RequiredDocsModal .upload-input-container:hover {
  border-color: var(--main-color);
  background-color: #f5f5f5;
}

.modal.RequiredDocsModal .upload-input-field {
  display: none;
}

.modal.RequiredDocsModal .upload-icon-label {
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  margin: 0;
  display: flex;
}

.modal.RequiredDocsModal .upload-icon-label svg {
  flex-shrink: 0;
}

.modal.RequiredDocsModal .upload-input-container label[for] {
  cursor: pointer;
  flex: 1;
  margin: 0;
}

.modal.RequiredDocsModal .required-docs-span {
  color: #4d4d4d;
  font-size: 14px;
  font-weight: 400;
}

.modal.RequiredDocsModal .utility-bill {
  color: #999;
  font-size: 12px;
  font-weight: 400;
}

.modal.RequiredDocsModal .submit-btn {
  background-color: var(--main-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 15px;
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  font-weight: 600;
  transition: all .3s;
}

.modal.RequiredDocsModal .submit-btn:hover {
  opacity: .9;
}

.modal.RequiredDocsModal .submit-btn:disabled {
  cursor: not-allowed;
  background-color: #ccc;
}

.modal.RequiredDocsModal .text-gray-999 {
  color: #999 !important;
}

.modal.RequiredDocsModal .utility-bill {
  margin-top: 3px;
  font-size: 13px;
}

.id-require {
  justify-content: flex-start;
  margin-bottom: 15px;
  display: flex;
}

.id-require .docs-btn {
  color: #856404;
  cursor: pointer;
  background: #fff3cd;
  border: 1px solid #ffecb5;
  border-radius: 20px;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all .3s;
  display: inline-flex;
}

.id-require .docs-btn:hover {
  background: #ffe8a1;
  border-color: #ffe082;
}

.id-require .docs-btn.not-submitted {
  color: #856404;
  background: #fff3cd;
  border-color: #ffecb5;
}

.id-require .docs-btn.submitted {
  color: #155724;
  background: #d4edda;
  border-color: #c3e6cb;
}

.id-require .docs-btn img {
  object-fit: contain;
  width: 16px;
  height: 16px;
}

.ids-required-inline {
  color: #dc3545;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
}

.ids-required-inline:hover {
  color: #bb2d3b;
  text-decoration: underline;
}

.modal.RequiredDocsModal select.input-select-docs {
  cursor: pointer;
  color: #4d4d4d;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-position: right 13px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}

.modal.RequiredDocsModal select.input-select-docs option:first-child {
  color: #999;
}

.modal.RequiredDocsModal .required-docs-span {
  color: #4d4d4d;
  font-size: 14px;
}

.modal.RequiredDocsModal .check-container {
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.modal.RequiredDocsModal .check-container input[type="checkbox"] {
  margin-top: 4px;
}

.modal.RequiredDocsModal .check-container p {
  color: #4d4d4d;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.modal.RequiredDocsModal .input-select-container {
  position: relative;
}

.modal.RequiredDocsModal .input-select-docs {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  padding-right: 35px;
}

.buy-number-container .calling-credit {
  background: #f2f2f2;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  width: 30%;
  margin-top: 20px;
  padding: 15px 20px;
  flex-direction: row !important;
  display: flex !important;
}

.buy-number-container .calling-credit .title {
  color: #4d4d4d;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  display: flex;
  margin-top: 0 !important;
}

.buy-number-container .calling-credit .price {
  color: #4d4d4d;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}

.local-calls-country-content .calling-credit {
  background: #7070700d;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  max-width: 600px;
  margin: 20px auto;
  padding: 15px 20px;
  flex-direction: row !important;
  display: flex !important;
}

.local-calls-country-content .calling-credit .title {
  color: #4d4d4d;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  display: flex;
  margin-top: 0 !important;
}

.local-calls-country-content .calling-credit .price {
  color: #4d4d4d;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}

.responsive-actions {
  display: none;
}

@media (max-width: 992px) {
  .responsive-actions {
    display: flex;
  }
}

::marker {
  content: "";
}

.navbar-toggler {
  border: 1px !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.offcanvas .buy-esim-now {
  border: 0;
  border-radius: 40px;
  outline: none;
  justify-content: flex-start;
  margin: 20px 0;
  font-weight: bold;
  display: flex;
  background-color: var(--main-color) !important;
  color: #fff !important;
  align-items: center !important;
  padding: 11px 31px !important;
}

.login-btn-mobile {
  border: 0;
  border-radius: 40px;
  outline: none;
  justify-content: flex-start;
  display: none;
  background-color: var(--main-color) !important;
  color: #fff !important;
  align-items: center !important;
  padding: 11px 14px !important;
}

.login-btn-mobile span {
  font-weight: bold;
}

@media (max-width: 992px) {
  .login-btn-mobile {
    justify-content: center;
    width: 150px;
    font-size: 12px;
    display: flex;
    padding: 5px 6px !important;
  }

  .login-btn-mobile svg {
    width: 22px;
    height: 17px;
  }

  footer.main-footer {
    display: none !important;
  }
}

@media (max-width: 385px) {
  .login-btn-mobile {
    justify-content: center;
    align-items: center;
    width: 130px;
    font-size: 10px;
    padding: 5px 4px !important;
  }

  .navbar-brand img {
    width: 50px;
  }
}

.download-mobile .download-icon {
  background: #f0f0f0;
  border-radius: 50%;
  height: 41px;
  margin-inline-end: 20px;
  padding: 12px;
  display: flex;
}

.side-logout {
  color: #ca0606;
  background-color: #fff;
  border: 1px solid #ca0606;
  border-radius: 25px;
  width: 146px;
  margin: 50px 0;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
}

.local-calling-plan-card {
  border: 1px solid #f5f5f5;
  border-radius: 30px 30px 84px;
  width: 470px;
  max-width: 100%;
  padding: 20px;
}

.local-calling-plan-card .buy button {
  background-color: var(--buy-btn-color);
  color: #fff;
  cursor: pointer;
  border: 1px solid;
  border-radius: 32px;
  width: 80%;
  height: 54px;
  font-size: 20px;
  font-weight: bold;
  transition: all .3s;
}

.local-calling-plan-card .buy button:hover {
  opacity: .9;
  transform: translateY(-2px);
}

.commercialSuccessModal {
  z-index: 1060;
}

.commercialSuccessModal .modal-dialog {
  z-index: 1061;
  position: relative;
}

.commercialSuccessModal + .modal-backdrop {
  z-index: 1059;
}

.searchHighlight {
  background-color: #c7e1ef;
  border-radius: 7px;
  padding: 2px 4px;
}

[dir="rtl"] .scale-reverse {
  scale: -1;
}

[dir="rtl"] .border-corners-80 {
  border-radius: 15px 15px 0 80px;
}

/* [project]/app/[locale]/ltrfont_7728019c.module.css [app-client] (css) */
@font-face {
  font-family: ltrFont;
  src: url("../media/Quicksand_Light-s.p.1c39c075.woff2") format("woff2");
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: ltrFont;
  src: url("../media/Quicksand_Regular-s.p.f579f914.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: ltrFont;
  src: url("../media/Quicksand_Medium-s.p.7a802b30.woff2") format("woff2");
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: ltrFont;
  src: url("../media/Quicksand_SemiBold-s.p.d3ba77b9.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: ltrFont;
  src: url("../media/Quicksand_Bold-s.p.62af57cd.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: ltrFont Fallback;
  src: local(Arial);
  ascent-override: 94.71%;
  descent-override: 23.68%;
  line-gap-override: 0.0%;
  size-adjust: 105.58%;
}

.ltrfont_7728019c-module__q01y0q__className {
  font-family: ltrFont, ltrFont Fallback;
}

.ltrfont_7728019c-module__q01y0q__variable {
  --font-main: "ltrFont", "ltrFont Fallback";
}

/* [project]/app/[locale]/rtlfont_ffa1a8ab.module.css [app-client] (css) */
@font-face {
  font-family: rtlFont;
  src: url("../media/Tajawal_Light-s.p.384b9db7.woff2") format("woff2");
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: rtlFont;
  src: url("../media/Tajawal_Regular-s.p.4aa586ea.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: rtlFont;
  src: url("../media/Tajawal_Medium-s.p.a7b25364.woff2") format("woff2");
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: rtlFont;
  src: url("../media/Tajawal_Bold-s.p.583ef1b0.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: rtlFont Fallback;
  src: local(Arial);
  ascent-override: 68.09%;
  descent-override: 37.8%;
  line-gap-override: 21.18%;
  size-adjust: 94.43%;
}

.rtlfont_ffa1a8ab-module__Cke41a__className {
  font-family: rtlFont, rtlFont Fallback;
}

.rtlfont_ffa1a8ab-module__Cke41a__variable {
  --font-main: "rtlFont", "rtlFont Fallback";
}

/*# sourceMappingURL=app_%5Blocale%5D_f3ff5918._.css.map*/