@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {

  font-family: 'Poppins', sans-serif !important;
}

section#main-body {
  background-color: #fff;
  padding-left: 70px;
}

.collapsable-card-body {
  max-height: 600px;
  overflow-y: auto;
  border-radius: 0px !important;
}

.navbar-nav .dropdown-menu {
  position: static;
  max-height: 500px;
  overflow: auto;
}

.store-scrol-side-menu-list {
  height: 379px !important;
  overflow-y: scroll;
}

.main-container {
  max-width: 1540px !important;
}

.n-sub-heading {
  font-size: 35px !important;
  font-weight: 600 !important;
}

.s-layout__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.nav-padding {
  padding: 14px 5px;
}

.new-nav-container {
  max-width: 1500px !important;
}

.account {
  background-color: #ff8d00;
  padding: 7px 11px;
  border-radius: 8px;
}

#Secondary_Navbar-Account {
  background-color: #ff8d00;
  padding: 7px 9px;
  border-radius: 8px;
}

/* Sidebar */
.s-sidebar__trigger {
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4em;
  background: #192b3c;
}

.s-sidebar__trigger>i {
  display: inline-block;
  margin: 1.5em 0 0 1.5em;
  color: #fff;
}

.s-sidebar__nav {
  position: fixed;
  top: 0;
  left: -15em;
  overflow: hidden;
  transition: all 0.3s ease-in;
  width: 15em;
  height: 100%;
  background: #000219;
  color: rgba(255, 255, 255, 0.7);
  z-index: 1050;
}

.s-sidebar__nav-link {
  color: #fff;
  font-weight: 600;
}

.s-sidebar__nav:hover,
.s-sidebar__nav:focus,
.s-sidebar__trigger:focus+.s-sidebar__nav,
.s-sidebar__trigger:hover+.s-sidebar__nav {
  left: 0;
}

.s-sidebar__nav ul {
  position: absolute;
  top: 4em;
  left: 0;
  margin: 0;
  padding: 0;
  width: 15em;
}

.s-sidebar__nav ul li {
  width: 100%;
}

.s-sidebar__nav-link {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 4em;
}

.s-sidebar__nav-link span {
  position: absolute;
  top: 50%;
  left: 4em;
  transform: translateY(-50%);
}

.s-sidebar__nav-link:hover {
  background: #fff;
}

.s-sidebar__nav-link>i {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 3em;
  height: 4em;
  font-size: 21px;
}

.s-sidebar__nav-link>i::before {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
}

header.header .logo-img {
  max-width: 170px;
}

.n-home-area--icon {
  color: #000000 !important;
}

.n-top-border-box {
  border-top: 3px solid #ff5e00 !important;
  background-color: #ff6a0026 !important;
}

.n-box-text {
  color: #000 !important;
  font-weight: 600;
}

.product-cato-icon-link-box {
  background-color: #fff;
  padding: 21px;
  border-radius: 15px;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.product-cato-icon-round {
  display: block;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 17px;
  margin: 0 auto 10px auto;
}

.product-cato-icon-round-bg-1 {
  background-color: #000219;
}

.product-cato-icon-round-bg-2 {
  background-color: #fd6511;
}

.product-cato-icon {
  width: 62px;
}

.product-cato-explore-btn {
  background-color: #001f41;
  font-weight: 600;
  color: white;
  border: none;
  border-radius: 10px;
  text-transform: uppercase;
  margin: 9px;
  padding: 7px 40px;
}

.product-cato-head {
  font-size: 20px;
  font-weight: 600;
}

.flex-card {
  padding: 6px 24px 8px !important;
  display: flex !important;
  color: #000 !important;
  background-color: #fff !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-size: 19px;
  font-weight: 600;
  gap: 20px;
}

.flex-card i {
  color: #fd6511 !important;
}

.mobile-block-card {
  align-items: center;
}

.bg-box-section {
  background-color: #c1c1c140;
  padding: 40px 0px;
}

/* home product */
.dark-product-card {
  background-color: #000219 !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgb(0 0 0 / 0%);
}

.product-heading-text {
  color: #ffa979 !important;
  font-weight: 600 !important;
}

.product-box-btn {
  border: 1px solid #fd6511 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.product-box-btn:hover {
  border: 1px solid #fd6511;
  background-color: #fd6511;
  color: #000;
}

/*home product */

/* products page */

/* .product-left-card {
  padding-left: 115px !important;
} */
.product-dec {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.product-dec span {
  font-weight: 600 !important;
}

.product-lay {
  width: 100% !important;
  padding: 32px 20px 4px !important;
}

.product-head {
  background-color: #000219 !important;
  padding: 15px !important;
  text-align: center;
}

.product-head-name {
  color: #ffffff !important;
  font-weight: 600;
}

.pro-footer {
  margin: 0px 0 !important;
  padding: 15px 10px !important;
  width: 100% !important;
  background-color: #fff8f0;
}

.pro-ul {
  padding-left: 0px;
}

.product-card-div {
  /* background: #ffeae2 !important; */
  padding: 1px 0 0px 0 !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.product-card-div ul {
  list-style: none;
}

.pro-price {
  font-size: 17px;
  font-weight: 500;
}

.pro-price span {
  font-size: 30px !important;
  font-weight: 700;
  color: #ff5200;
}

.product-order-btn {
  background-color: #ff9007 !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  border: none !important;
  width: 75% !important;
  color: #000 !important;
  font-size: 18px !important;
}

.product-order-btn:hover {
  background-color: #ffc107;
}

/* products page */

/*header*/
.header.header .navbar a {
  color: #000;
  text-decoration: none;
}

header.header .navbar-nav a {
  font-size: 16px;
  font-weight: 500;
}

.master-breadcrumb {
  background-color: #fd651147;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
}

.breadcrumb {
  background-color: transparent !important;
  margin-bottom: 0px !important;
  margin-left: 56px !important;
}

.breadcrumb-item.active {
  color: #000000;
  font-weight: 700;
  font-size: 16px;
}




.dropdown-menu {
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 14%), 0 6px 20px 0 rgb(0 0 0 / 7%);
}

.head-card {
  font-size: 20px;
}

/*header*/

/* footer */
.footer {
  background-color: #000219 !important;
  color: #fff;
  padding: 20px 20px;
  text-align: center;
}

.footer-logo {
  width: 200px;
}


.section-y-pad {
  padding: 40px 30px 10px !important;
}

.justify-between {
  justify-content: space-between;
}

.ul-list-div ul {
  list-style: none;
}

.ul-list-div li {
  text-align: start;
}

.ul-list-div ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

.footer-heading {
  font-style: 20px !important;
  font-weight: 600;
}

.footer-date {
  font-size: 16px;
}

.footer-hr--vertical {
  border-left: 1px solid white;
  height: 20px;
}

.main-dim {
  max-width: 1200px;
  margin: 0 auto;
}

.pay-social-area {
  justify-content: space-between !important;
}

.pay-social-area i {
  color: #fff;
  font-size: 40px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid.responsive-grid-5 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex-gap-8 {
  gap: 8px;
}

.flex-gap-4 {
  gap: 4px;
}

.items-center {
  align-items: center;
}

.items-center-mobile {
  align-items: center;
  justify-content: center;
}

.cards-icon-row {
  margin-top: 20px;
}

.cards-icon-row .flex {
  justify-content: space-between;
}

.see-btn {
  background-color: #fd6511 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: none !important;
  font-size: 19px !important;
  padding: 9px 24px !important;
}

.avatar {
  width: 40px;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/* footer */

/* configure product */
.configuration-card-body {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 27px 25px !important;
  border-radius: 10px;
  border: none;
}

.main-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 700;
  color: #131554;
  font-size: 33px !important;
}

.main-heading span {
  color: #ff5e00;
}

.sub-heading-description {
  font-size: 18px;
  margin-top: 10px;
  font-weight: 600;
}

.product-information {
  background-color: antiquewhite !important;
  border: 1px solid orange !important;
  padding: 20px 16px !important;
}

.product-info-title {
  font-weight: 700;
}

.product-info-des {
  font-size: 16px;
  margin-top: 20px;
}

.price-select {
  background-color: #e5e5e5 !important;
  border: none !important;
  font-weight: 600 !important;
  color: #4e4e4e !important;
}

.color-black {
  color: #000 !important;
}

.label-black {
  font-size: 17px !important;
  font-weight: 600 !important;
}

.order-card {
  border: 3px solid #ff8100 !important;
  background-color: #ffecd2 !important;
}

#order-standard_cart .order-summary {
  background-color: #ffecd2 !important;
  border-bottom: 3px solid #ffecd2 !important;
}

#order-standard_cart .summary-container {
  background-color: #ffecd2 !important;
  font-size: 17px !important;
}

.order-summery-heading {
  background-color: #000219 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 25px !important;
  border-radius: 0 0 20px 20px;
}

.order-summery-div {
  padding: 21px 14px !important;
}

#order-standard_cart .order-summary .product-name {
  font-weight: 700;
  font-size: 18px !important;
}

#order-standard_cart .order-summary .product-group {
  font-size: 16px !important;
  background-color: #ff8d00;
  border-radius: 19px !important;
  text-align: center !important;
  padding: 0px 10px !important;
  font-weight: 600 !important;
  margin-top: 16px !important;
  margin-bottom: 15px !important;
}

.total-due-today .amt {
  font-size: 30px !important;
  font-weight: 700 !important;
}

.blue-order-btn {
  background-color: #03023c;
  border: none;
  padding: 7px 28px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* configur product */

/* Review & Checkout */
.btn-group-div {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 5px;
}

.checkout-btn {
  padding: 10px 12px !important;
  font-size: 16px !important;
  font-weight: 600;
  background-color: #059105;
  border: none;
}

.continue-shopping-btn {
  font-size: 16px !important;
  padding: 10px 12px !important;
  background-color: #03023c !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border: none !important;
}

.continue-shopping-btn:hover {
  text-decoration: none;
  background-color: #0d6efd;
}

.view-cart-items {
  border-bottom: 2px solid #ff7600 !important;
}

.card-tab-header {
  background-color: #000 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.edit-btn {
  background-color: #ffb100 !important;
  font-size: 14px !important;
  padding: 3px 12px !important;
  font-weight: 500 !important;
  color: #000 !important;
  text-decoration: none !important;
}

.remove-btn {
  background-color: #d70000 !important;
  font-size: 14px !important;
  padding: 3px 12px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-decoration: none !important;
}

.empty-btn {
  background-color: #ff7600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.promo-code-div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promo-code-btn {
  background-color: #4e7cff;
  margin-bottom: 5px;
  color: #fff;
  width: 35%;
}

.bg-white {
  background-color: #fff !important;
}

/* Review & Checkout */

/* checkout */
#order-standard_cart .sub-heading {
  text-align: center !important;
}

#order-standard_cart .sub-heading span {
  background-color: #000c60 !important;
  padding: 3px 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
  border-radius: 20px !important;
  top: -16px !important;
}

#order-standard_cart .sub-heading {
  border-top: 2px solid #ffc99b !important;
}

#order-standard_cart .field,
#order-standard_cart .form-control {
  border: none !important;
  color: #5a5a5a !important;
  background-color: #f1f1f1 !important;
  border-radius: 7px !important;
}

.form-top-top {
  background-color: #4e7cff;
  border: none;
  color: #fff;
  font-weight: 500;
}

.payment-method-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #000 !important;
}

.payment-method-icon {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 4px;
}

.mv-pay-m-icon {
  width: 45px;
}

.small-text-form {
  font-size: 16px !important;
  color: #878787 !important;
}

/* checkout */

/* invoice */
.invoice-container {
  border: 2px solid #ff8100 !important;
}

.invoice-logo {
  width: 225px !important;
}

.invioce-card-header {
  background-color: #000219;
  color: #fff;
  text-align: center;
}

.invoice-small-text {
  font-size: 16px !important;
}

.table-bottom-area {
  background-color: #ff8100;
  font-size: 16px;
  font-weight: 600;
}

.bg-gray {
  background-color: #f5f4f4 !important;
  font-size: 18px !important;
}

.table-light-area {
  background-color: #ffe6c5;
}

.invo-print-btn {
  background-color: #000;
  padding: 10px 20px !important;
  color: #fff;
  font-weight: 600;
  border: none;
}

.invo-download-btn {
  background-color: #1b7ffb;
  padding: 10px 20px !important;
  color: #fff;
  font-weight: 600;
  border: none;
}

.invo-pay-btn input {
  background-color: #00224d;
  padding: 7px 20px !important;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 6px;
}

/* invoice */

/* client area */
.breadcrumb-item a {
  text-decoration: none;
  color: #04347a;
  font-size: 17px;
  font-weight: 600;
}

.forms-main-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  color: #131554;
  font-size: 26px !important;
}

.forms-main-heading span {
  color: #ff5e00;
}

.text-form-control {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #000 !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  box-shadow: none !important;
}

.text-form-control:focus {
  border-color: #fd6511 !important;
  box-shadow: 0 0 0 4px rgba(253, 101, 17, 0.15) !important;
  background-color: #ffffff !important;
  outline: none !important;
}

#country {
  border: none !important;
  color: #4c4c4c !important;
  background-color: #f1f1f1 !important;
}

.form-check-input:checked {
  background-color: #fd710d;
  border-color: #fd710d;
}

.cancel-btn {
  font-size: 16px !important;
  padding: 10px 12px;
  background-color: #d90000;
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  border: none;
}

.cancel-btn:hover {
  background-color: gray;
}

.label-font {
  font-size: 17px;
}

/* client area */

/* table */
table.table-list thead th {
  padding: 10px !important;
  background-color: #062858 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.table-list>tbody>tr>td {
  background-color: #f5f5f594 !important;
  font-size: 16px !important;
}

.custom-select {
  padding: .375rem 1.75rem .375rem .75rem !important;
}

.status-unpaid {
  background-color: #c10600 !important;
}

.btn-success {
  color: #fff;
  background-color: #029b0e !important;
  border: none !important;
}

.card-sidebar .card-header {
  background-color: #000;
  color: #fff;
}

.sidebar .list-group-item.active {
  background-color: #ff7907;
  border-color: #ff7907;
  font-weight: 600;
}

.sidebar .list-group-item.active:hover {
  background-color: #c3c3c3;
  border-color: #c3c3c3;
  color: #000;
}

.list-group-item.active {
  color: #fff;
  background-color: #ff7907;
  font-weight: 600;
}

/* table */

/* cilent area product section */
.icon-stack {
  font-size: 50px !important;
  color: #000219;
}

.client-product-detail .product-icon {
  background-color: #fff0e4 !important;
  border-radius: 1px !important;
}

.product-name {
  font-size: 25px !important;
  font-weight: 600;
}

.product-location {
  font-size: 19px !important;
}

.c-product-info-heading {
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
}

.light-bg-card {
  background-color: #fff0e4 !important;
}

.c-status {
  font-size: 22px;
  font-weight: 600;
  background-color: #ffbc00;
  border-radius: 25px;
  color: #000;
}

.status-pending {
  background-color: #ffcb2f;
  color: #000;
}

.btn-info {
  color: #fff;
  background-color: #0da7f0;
  font-weight: 600;
}

/* cilent area product section */

/* ticket sections */
.add-btn {
  background-color: #000 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.add-btn:hover {
  background-color: #002d6e;
  color: #fff;
}

.small-bottom-text {
  font-size: 16px;
}

/* ticket sections */

/* nav top bar */
header.header .topbar {
  margin: 0;
  padding: 2px 0;
  background-color: #000219;
  color: #fff;
}

header.header .topbar .btn {
  line-height: 1;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

header.header .topbar .active-client .input-group-text {
  font-size: 16px;
  color: #fff;
  background-color: transparent;
  font-weight: 600;
}

header.header .topbar .active-client .btn {
  color: #fff;
}

/* nav top bar */

/* login */
.login-container-fluid {
  min-height: 100vh;
  display: flex;
  background-color: #ffffff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.login-row-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  /* Changed from explicit height to standard */
  flex-wrap: wrap;
}

/* Left Promo Side */
.login-promo-section {
  flex: 1;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px 60px 100px !important;
  /* Unified padding */
  overflow: hidden;
  background: #ffffff;
}

.promo-illustration {
  width: 100%;
  max-width: 450px;
  height: auto;
  display: block;
  margin: 0 auto 30px auto;
  /* Top illustration */
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
  /* Softer shadow for light bg */
  transition: transform 0.4s ease;
}

.promo-illustration:hover {
  transform: translateY(-8px);
}

.promo-content {
  position: relative;
  z-index: 3;
  max-width: 600px;
  color: #333;
  /* Dark text for light bg */
}

.promo-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(253, 101, 17, 0.2);
  border: 1px solid #fd6511;
  color: #fd6511;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.promo-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
}

.promo-title span {
  color: #fd6511;
}

.promo-subtitle {
  font-size: 18px;
  color: #555;
  /* Darker subtitle */
  margin-bottom: 40px;
  line-height: 1.6;
}

.promo-features {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}

.promo-features li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 16px;
}

.promo-features li i {
  color: #fd6511;
  font-size: 20px;
}

.promo-footer-text {
  font-size: 14px;
  color: #666;
  /* Darker footer text */
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  /* Dark border */
  padding-top: 25px;
}

/* Right Form Side */
.login-form-section {
  flex: 1;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 60px 60px 20px;
  /* Reduced left padding to decrease gap */
  background: #ffffff;
}

.login-glass-card {
  width: 100%;
  max-width: 480px;
  background: transparent;
  padding: 0;
}

.login-header-text {
  text-align: center;
  margin-bottom: 20px;
}

.login-header-text h2 {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
}

.login-header-text p {
  color: #444;
  font-size: 16px;
}

.vmo-login-form .form-group {
  margin-bottom: 22px;
}

.vmo-login-form label {
  color: #000;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
  font-size: 15px;
}

.vmo-login-form .input-container {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.vmo-login-form .input-container:focus-within {
  border-color: #fd6511;
  box-shadow: 0 0 0 4px rgba(253, 101, 17, 0.15);
  background: rgba(0, 0, 0, 0.4);
}

.vmo-login-form .input-container input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  color: #000 !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

.vmo-login-form .input-container input:focus {
  outline: none !important;
}

.vmo-login-form .btn-reveal-pw {
  background: transparent !important;
  border: none !important;
  color: #444 !important;
  padding-right: 18px;
  cursor: pointer;
}

.vmo-login-form .btn-reveal-pw:hover {
  color: #000 !important;
}

.forgot-pwd-link {
  color: #fd6511;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.forgot-pwd-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.custom-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #333 !important;
  font-size: 14px !important;
  cursor: pointer;
}

.custom-checkbox input {
  accent-color: #fd6511;
  width: 18px;
  height: 18px;
}

.vmo-btn-primary {
  background: linear-gradient(90deg, #fd6511 0%, #ff8c42 100%) !important;
  color: #000 !important;
  border: none !important;
  padding: 16px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease !important;
  margin-top: 10px;
}

.vmo-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(253, 101, 17, 0.4) !important;
}

.register-prompt {
  font-size: 15px;
}

.register-prompt a {
  color: #fd6511;
  font-weight: 600;
  text-decoration: none;
  margin-left: 5px;
}

.register-prompt a:hover {
  text-decoration: underline;
}

/* Register Split Page Specifics */
.register-split-page .login-row-wrapper {
  height: 100vh;
  /* Set to exact same as login for alignment */
  width: 100%;
}

.register-split-page {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.register-form-section {
  overflow-y: auto;
  height: 100vh;
  display: block !important;
  padding: 60px 40px 60px 20px !important;
  /* Reduced left padding to decrease gap */
}

.register-glass-card {
  max-width: 700px !important;
  margin: 0 auto;
}

.register-glass-card .form-control,
.register-glass-card .field,
.register-glass-card input[type="text"],
.register-glass-card input[type="password"],
.register-glass-card input[type="email"],
.register-glass-card input[type="tel"],
.register-glass-card select {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px !important;
  padding: 14px 18px 14px 45px !important;
  /* Increased left padding for icon space */
  color: #000 !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  box-shadow: none !important;
  margin-bottom: 0px;
  /* Reduced bottom margin */
}

.register-glass-card .form-group {
  margin-bottom: 12px !important;
  /* Reduced gap between input groups */
}

.register-glass-card .configuration-card-body.mb-4 {
  margin-bottom: -5rem !important;
  /* Reduced gap between personal info and billing sections */
}

.vmo-btn-primary-wrapper {
  margin-top: 30px !important;
}


.register-glass-card .card-body.p-4 {
  padding: 1.5rem !important;
  /* Reduced card padding */
}

.register-glass-card .forms-main-heading {
  margin-bottom: 15px !important;
  font-size: 20px !important;
  /* Consistent heading size */
}

.register-glass-card .form-control:focus,
.register-glass-card .field:focus,
.register-glass-card input:focus,
.register-glass-card select:focus {
  border-color: #fd6511 !important;
  box-shadow: 0 0 0 4px rgba(253, 101, 17, 0.15) !important;
  background-color: #ffffff !important;
  outline: none !important;
}

.register-glass-card .configuration-card-body {
  background: transparent;
  border: none;
  box-shadow: none;
}

.register-glass-card .form-control::placeholder {
  color: #999 !important;
  font-style: italic;
  opacity: 0.7;
  font-size: 14px;
}

.register-glass-card .form-control:focus::placeholder {
  opacity: 0.4;
}

.already-registered-footer {
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 30px;
  margin-top: 40px;
}

.already-registered-footer p {
  font-size: 15px;
  color: #555;
  margin-bottom: 20px;
}

.already-reg-actions {
  max-width: 300px;
  margin: 0 auto;
}

@media (max-width: 833px) {
  .register-form-section {
    height: auto;
    padding: 40px 20px !important;
  }
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
  .login-promo-section {
    padding: 30px;
  }

  .promo-title {
    font-size: 32px;
  }

  .promo-subtitle {
    font-size: 16px;
    margin-bottom: 30px;
  }
}

@media (max-width: 996px) {
  .captcha-container {
    display: flex;
    justify-content: center;
    width: 100%;
    transform: scale(0.9);
    transform-origin: center center;
  }
}

@media (max-width: 991px) {
  .login-container-fluid {
    overflow-y: auto !important;
    /* Enable scrolling for everything below 991px */
  }

  .login-promo-section {
    display: none !important;
  }

  .login-form-section,
  .register-form-section {
    flex: 1;
    min-width: 100%;
    height: auto;
    padding: 40px 20px !important;
  }

  .login-row-wrapper {
    height: auto;
  }
}

/* Increased width for 342px-420px range */
@media (min-width: 342px) and (max-width: 420px) {
  .login-container-fluid {
    padding: 2px !important;
  }

  .login-form-section,
  .register-form-section {
    padding: 30px 10px !important;
  }

  .register-glass-card {
    padding: 10px 5px !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {

  .login-row-wrapper {
    flex-direction: column;
    height: auto;
  }

  .login-glass-card {
    padding: 0;
  }

  .login-header-text h2 {
    font-size: 26px;
  }
}

@media (max-width: 495px) {
  .login-container-fluid {
    padding: 10px;
  }

  .login-glass-card {
    padding: 25px 15px;
    border-radius: 16px;
  }

  .login-header-text h2 {
    font-size: 22px;
  }

  .vmo-login-form .input-container input {
    padding: 12px 14px !important;
  }

  .captcha-container {
    transform: scale(0.8);
  }
}

/* Contact */
.center-sub-heading {
  display: flex;
  justify-content: center;
  gap: 11px;
  font-weight: 600;
  color: #131554;
}

.center-sub-heading span {
  color: #ff5e00;
}

/* Contact */

/* client area */
.client-home-cards .card-header .btn {
  color: #ff5707;
  border: 0;
  font-weight: 700;
}

.card-one {
  background-color: #5cb85c42 !important;
  border: 2px solid #fff !important;
  border-radius: 15px;
}

.card-one-border {
  background-color: #198754 !important;
}

.card-two {
  background-color: #17a2b847 !important;
  border: 2px solid #fff !important;
  border-radius: 15px;
}

.card-two-border {
  background-color: #17a2b8 !important;
}

.bg-color-green {
  background-color: #198754 !important;
}

.icon-card i {
  font-size: 45px !important;
  color: #ff8d00 !important;
}

.icon-card .stat {
  font-size: 47px;
  font-weight: 600;
  color: #001d52 !important;
}

.icon-card .title {
  color: #001d52 !important;
  font-size: 17px !important;
}

.client-area-card {
  padding: 10px !important;
  border: none !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgb(0 0 0 / 0%) !important;
}

.client-bottom-card .card-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #020142;
}

.client-bottom-card p a {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #ff7c07;
}

.client-area-link-btn {
  background-color: #000f44 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.client-area-link-btn:hover {
  background-color: #d9d9d9;
}

.client-area-card i {
  color: #ff7c07;
}

/* client area */

/* announcement */
.announcement-div a {
  text-decoration: none !important;
  color: #000;
  font-weight: 600 !important;
}

.announcement-div h1 span {
  color: #ff5e00 !important;
}

.announcements .announcement article {
  background-color: #ffead99c;
  border-left: 4px solid #ff8100;
  border-radius: 13px;
}

.announcement-btn {
  background-color: #000219;
  padding: 10px 10px;
  color: #fff !important;
  font-weight: 700 !important;
}

.announcement-btn:hover {
  background-color: #ff8100;
}

.announcement-date {
  font-weight: 600;
  color: #000 !important;
}

.announcements .announcement {
  margin-bottom: 3rem;
}

/* announcement */

/* knowledgebase */
.knowledgebase-bg-card {
  background-color: #ff81001f;
}

.main-search-btn {
  background-color: #ff8d00;
  border: none;
  font-weight: 600;
}

.knowledgebase-body {
  background-color: #ffead959;
  border-left: 3px solid #ff9900 !important;
  border-radius: 10px;
  font-weight: 600;
  font-size: 18px;
}

.knowledgebase-w-bg-card {
  background-color: #fff;
  border-left: 3px solid #ff8100 !important;
  border-radius: 10px !important;
}

/* knowledgebase */

/* Network Status */
.server-card p i {
  color: #ff5e00;
  font-size: 30px;
}

.server-card-header {
  font-weight: 600;
  background-color: #ff810026;
  border: none;
}

.server-badge {
  padding: 7px 18px;
  background-color: green;
}

/* Network Status */

/* ticket */
.view-ticket .posted-by {
  color: #000;
  background-color: #ff6a0036;
}

/* ticket */

/*mass payment*/
.masspay-table-head {
  background-color: #001234 !important;
  color: #fff !important;
}

.mass-pay-table-bottom {
  background-color: #ffcda2a1 !important;
}

.red {
  color: red;
  font-size: 18px;
}

/*mass payment*/

/* Mobile First */
@media (min-width: 1200px) {
  .s-layout__content {
    margin-left: 4em;
  }

  .s-sidebar__trigger {
    width: 4em;
  }

  .s-sidebar__nav {
    width: 4em !important;
    left: 0 !important;
  }

  .s-sidebar__nav:hover,
  .s-sidebar__nav:focus,
  .s-sidebar__trigger:hover+.s-sidebar__nav,
  .s-sidebar__trigger:focus+.s-sidebar__nav {
    width: 15em;
  }

}

@media (min-width: 1200px) {
  .s-layout__content {
    margin-left: 4em;
  }
}


.head-container {
  max-width: 800px;
}

.main-container {
  max-width: 800px;
}

@media (max-width:1650px) {
  #order-standard_cart .cart-body {
    padding-left: 122px !important;
  }
}

@media (min-width: 1200px) {
  .s-layout__content {
    margin-left: 15em;
  }

  .s-sidebar__trigger {
    display: none;
  }

  .s-sidebar__nav {
    width: 15em;
  }

  .s-sidebar__nav ul {
    top: 1.3em;
  }
}

@media (max-width: 500px) {
  .pay-social-area {
    justify-content: center !important;
  }

  .mobile-block-card {
    display: block !important;
  }

}

@media (max-width: 600px) {
  .grid.responsive-grid-5 {
    display: block;
  }

  .ul-list-div li {
    text-align: center;
  }

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

  ul.scroll {
    height: 100%;
    overflow-y: scroll;
  }

  .product-dec {
    font-size: 14px;
  }

  .promo-code-div {
    display: block;
  }

  .promo-code-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .grid.responsive-grid-5 {
    grid-template-columns: repeat(auto-fit, minmax(120px, -1fr));
  }

  #d-f-heading {
    font-size: 19px;
  }

  .footer-logo {
    width: 150px;
  }



}

@media only screen and (max-width: 991px) {
  #order-standard_cart .secondary-cart-sidebar {
    width: 100% !important;
  }
}

@media (min-width: 768px) {
  .main-container {
    grid-template-columns: 1fr 1fr;
  }

  .image-container {
    display: block;
  }
}

@media (min-width: 1024px) {
  .form-container {
    padding: 4rem;
    border-radius: 1rem;
  }

  .form-content {
    gap: 2rem;
  }

  .input-field {
    padding: 1rem;
  }


}

/* Mobile First */

.c-billing-accounts-products-dropdown-div {
  top: 5px !important;
  left: -185px !important;
  max-height: 500px;
  overflow-y: auto;
}

.buttons {
  align-items: flex-end !important;
}

.account #Secondary_Navbar-Account {
  background-color: #ff8d00;
  padding: 7px 9px;
  border-radius: 8px;
}


.account #Secondary_Navbar-Account .dropdown-toggle {
  text-decoration: none;
  color: white;
}

.button-g {
  gap: 15px !important;
}

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-mobile {
  display: none;
}

@media screen and (max-width: 1350px) {
  .nav-mobile {
    display: flex;
  }

  .nav-desktop {
    display: none !important;
  }
}

.nav-mobile {
  /* position: relative; එකතු කිරීම වැදගත්, dropdown එක దీనిට සාපේක්ෂව ස්ථානගත වීමට */
  position: relative;
}

.nav-mobile__dropdown {
  position: absolute;
  /* Navigation bar එකට සාපේක්ෂව ස්ථානගත කිරීම */
  top: 100%;
  /* Navigation bar එකට කෙළින්ම පහළින් ආරම්භ කිරීම */
  left: 0;
  width: 100%;
  background-color: #fff;
  /* පසුබිම් වර්ණය නැවත එක් කිරීම */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  z-index: 1100;

  /* Animation එක සඳහා */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, visibility 0.4s;
}

.nav-mobile__dropdown.is-open {
  max-height: calc(100vh - 70px);
  /* උපරිම උස (Navbar උස අඩු කර) */
  opacity: 1;
  visibility: visible;
  overflow-y: auto;
  /* අන්තර්ගතය වැඩි නම් scroll වීමට */
}

/* --- නව Styles අවසානය --- */


.z-index-50 {
  z-index: 1050;
}

.hover-opacity:hover {
  opacity: 0.7;
}

.btn-custom-orange {
  background-color: #f5691b !important;
  color: white !important;
  transition: background-color 0.2s ease-in-out;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.btn-custom-orange:hover {
  background-color: #e45a0f !important;
}

.burger__line {
  transition: all 0.3s ease-in-out;
}

.burger.active .burger__line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.burger.active .burger__line:nth-child(2) {
  opacity: 0;
}

.burger.active .burger__line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* --- අනෙකුත් සියලුම CSS කේත මෙතැනට එක් කරන්න --- */



/* --- Mobile First Media Queries --- */
@media screen and (max-width: 1350px) {
  .nav-mobile {
    display: flex;

    flex-wrap: wrap;

  }

  .nav-desktop {
    display: none !important;
  }
}

/* [ඔබගේ ඉතිරි සියලුම Media Queries මෙහි අලවන්න...] */



.d-flex nav__list color--dark-blue {
  gap: 28px !important;
  justify-content: center;
  align-items: center;
}

.nav-bar-icons {
  display: none;
}


@media (max-width: 1199px) {
  .nav-bar-icons {
    display: flex;
    background-color: #000219;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0.8rem 1rem;
  }

  .nav-bar-icons ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 51px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-bar-icons a i:hover {
    background-color: #5e96e4;
    padding: 10px;
    border-radius: 3px;
  }

  .nav-bar-icons a i {
    color: #ffffff;
    font-size: 1.4rem;
  }
}


@media (max-width: 767px) {
  .nav-bar-icons ul {
    gap: 20px;
  }

  .nav-bar-icons a i {
    font-size: 1.2rem;
  }
}

@media (max-width:1350px) {
  .main-dim {
    max-width: 1040px;

  }
}

.z-index-50 {
  z-index: 1001;
}

@media (max-width: 360px) {


  .n-sub-heading,
  .main-heading,
  .pro-price span,
  .total-due-today .amt {
    font-size: 22px !important;
  }

  .icon-card .stat {
    font-size: 30px !important;
  }

  .order-summery-heading,
  .product-name,
  .forms-main-heading {
    font-size: 18px !important;
  }

  .product-cato-head {
    font-size: 18px;
  }

  .flex-card {
    font-size: 16px;
  }


  .section-y-pad {
    padding: 20px 15px 10px !important;
  }

  .configuration-card-body,
  .flex-card {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .product-lay {
    padding: 20px 15px 4px !important;
  }


  .product-order-btn {
    width: 100% !important;
    font-size: 16px !important;
    padding: 8px 15px !important;
  }

  .nav-bar-icons ul {
    gap: 15px;

    .nav-bar-icons a i {
      font-size: 1.1rem;
    }





    .pay-social-area i {
      font-size: 30px;
    }
  }
}

/* Mobile Dropdown Styles for Billing Page */
.mobile-dropdown {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  z-index: 1060;
  overflow-y: auto;
  height: 100vh;
}

.mobile-dropdown.translate-x-full {
  transform: translateX(100%);
}

.mobile-dropdown.open {
  transform: translateX(0);
}

.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1055;
  transition: opacity 0.3s ease-in-out;
}

.mobile-overlay.hidden {
  display: none;
}

/* Mobile Dropdown Content */
.mobile-dropdown-content {
  padding: 1.5rem;
}

.mobile-close-btn-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2rem;
}

.mobile-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #000;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
}

.mobile-close-btn:hover {
  color: #666;
}

/* Mobile Menu List */
.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu-item {
  border-bottom: 1px solid #e5e7eb;
}

.mobile-menu-link {
  display: block;
  padding: 1rem 0;
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
}

.mobile-menu-link:hover {
  color: #666;
}

/* Mobile Menu Toggle (for Dedicated Servers) */
.mobile-menu-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  background: none;
  border: none;
  text-align: left;
  color: #000;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
}

.mobile-menu-toggle:hover {
  color: #666;
}

.mobile-menu-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

/* Mobile Submenu */
.mobile-submenu {
  list-style: none;
  padding: 0 0 0.5rem 1rem;
  margin: 0;
}

.mobile-submenu.hidden {
  display: none;
}

.mobile-submenu li {
  margin-bottom: 0.5rem;
}

.mobile-submenu-link {
  display: block;
  color: #666;
  text-decoration: none;
  font-size: 0.9rem;
}

.mobile-submenu-link:hover {
  color: #000;
}

/* Contact Section */
.mobile-contact-section {
  padding: 1.5rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.mobile-contact-title {
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.mobile-contact-link {
  display: flex;
  align-items: center;
  color: #666;
  text-decoration: none;
  font-size: 0.9rem;
}

.mobile-contact-link i {
  margin-right: 0.5rem;
}

.mobile-contact-link:hover {
  color: #000;
}

/* Action Buttons */
.mobile-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 0;
}

.mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.875rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.mobile-btn i {
  margin-right: 0.5rem;
}

.mobile-btn-login {
  background: transparent;
  border: 2px solid #000;
  color: #000;
}

.mobile-btn-login:hover {
  background: #000;
  color: white;
}

.mobile-btn-support {
  background: #fa5c08;
  border: 2px solid #fa5c08;
  color: white;
}

.mobile-btn-support:hover {
  background: #e04f00;
  border-color: #e04f00;
}

/* Utility Classes */
.hidden {
  display: none;
}

/* View Credentials Page Redesign */
.vmo-cred-page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  /* Increased from 75vh to ensure strong vertical centering */
  background-color: transparent;
  padding: 40px 20px;
  font-family: 'Poppins', sans-serif;
  margin-top: -20px;
  /* Adjust for any default top margins in WHMCS */
}

.vmo-cred-card {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(7, 8, 29, 0.08);
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(7, 8, 29, 0.05);
}

.vmo-cred-card-expired {
  box-shadow: none !important;
  border: 1px solid #fd6512 !important;
}

.vmo-cred-header {
  background-color: #07081d;
  color: #ffffff;
  text-align: center;
  padding: 30px 20px;
  position: relative;
}

.vmo-cred-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #fd6512 0%, #ff8c42 100%);
}

.vmo-cred-header h3 {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.vmo-cred-header i {
  color: #fd6512;
}

.vmo-cred-body {
  padding: 40px;
}

.vmo-cred-step-container {
  text-align: center;
  padding: 20px 0;
}

.vmo-cred-icon-wrapper {
  margin-bottom: 25px;
}

.vmo-cred-icon-wrapper i {
  font-size: 64px;
}

.vmo-cred-icon-danger {
  color: #dc3545;
}

.vmo-cred-icon-warning {
  color: #ffc107;
}

.vmo-cred-heading {
  font-weight: 700;
  font-size: 28px;
  color: #07081d;
  margin-bottom: 15px;
}

.vmo-cred-heading-small {
  font-weight: 700;
  font-size: 22px;
  color: #07081d;
  margin-bottom: 10px;
}

.vmo-cred-text {
  color: #6c757d;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 0;
}

.vmo-cred-text-center {
  text-align: center;
  color: #6c757d;
  margin-bottom: 25px;
}

.vmo-cred-text-small {
  font-size: 14px;
  margin-bottom: 8px;
}

.vmo-cred-text-danger {
  color: #dc3545;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.vmo-cred-action-area {
  margin-top: 30px;
}

.vmo-cred-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  font-family: 'Poppins', sans-serif;
  gap: 8px;
}

.vmo-cred-btn-primary {
  background-color: #fd6512;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(253, 101, 18, 0.3);
}

.vmo-cred-btn-primary:hover {
  background-color: #07081d;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(7, 8, 29, 0.4);
}

.vmo-cred-btn-outline {
  background-color: transparent;
  color: #fd6512 !important;
  border-color: #fd6512;
}

.vmo-cred-btn-outline:hover {
  background-color: #fd6512;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.vmo-cred-btn-secondary {
  background-color: #e9ecef;
  color: #07081d !important;
}

.vmo-cred-btn-secondary:hover {
  background-color: #dee2e6;
  transform: translateY(-2px);
}

.vmo-cred-btn-success {
  background-color: #198754 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(25, 135, 84, 0.3);
}

.vmo-cred-btn-block {
  width: 100%;
  margin-top: 20px;
  /* Added extra space as requested */
}

.vmo-cred-btn-sm {
  padding: 8px 20px;
  font-size: 14px;
}

.vmo-cred-badge-area {
  text-align: center;
  margin-bottom: 25px;
}

.vmo-cred-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
}

.vmo-cred-badge-info {
  background-color: rgba(13, 202, 240, 0.1);
  color: #07081d;
  border: 1px solid rgba(13, 202, 240, 0.2);
}

.vmo-cred-badge-warning {
  background-color: rgba(255, 193, 7, 0.1);
  color: #fd7e14;
  border: 1px solid rgba(255, 193, 7, 0.2);
}

.vmo-cred-form {
  margin-bottom: 20px;
      display: flex;
    flex-direction: column;
}

.vmo-cred-form-group {
  text-align: left;
}

.vmo-cred-form-group label {
  display: block;
  font-weight: 600;
  color: #07081d;
  margin-bottom: 8px;
}

.vmo-cred-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s;
  font-family: 'Poppins', sans-serif;
  color: #07081d;
}

.vmo-cred-input:focus {
  outline: none;
  border-color: #fd6512;
  box-shadow: 0 0 0 4px rgba(253, 101, 18, 0.1);
}

.vmo-cred-input-code {
  text-align: center;
  letter-spacing: 12px;
  font-weight: 700;
  font-size: 24px;
  padding: 15px;
  text-transform: uppercase;
}

.vmo-cred-input-code::placeholder {
  letter-spacing: 12px;
  font-weight: 400;
  color: #adb5bd;
}

.vmo-cred-input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

.vmo-cred-alert {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.vmo-cred-alert i {
  font-size: 18px;
  margin-top: 2px;
}

.vmo-cred-alert-danger {
  background-color: #f8d7da;
  color: #842029;
  border-left: 4px solid #dc3545;
}

.vmo-cred-alert-info {
  background-color: rgba(13, 202, 240, 0.1);
  color: #055160;
  border-left: 4px solid #0dcaf0;
  font-weight: 500;
}

.vmo-cred-security-note {
  background-color: rgba(253, 101, 18, 0.05);
  color: #07081d;
  flex-direction: column;
  gap: 8px;
}

.vmo-cred-security-note i {
  color: #fd6512;
  margin-right: 8px;
}

.vmo-cred-security-note ul {
  margin: 5px 0 0 0;
  padding-left: 20px;
  font-size: 15px;
    color: #495057;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vmo-cred-timer-area {
  margin-bottom: 25px;
  text-align: center;
}

.vmo-cred-timer-active {
  color: #6c757d;
  font-size: 14px;
}

.vmo-cred-timer-countdown {
  font-weight: 700;
  color: #fd6512;
  font-size: 16px;
  margin-left: 5px;
}

.vmo-cred-timer-expired {
  background-color: rgba(220, 53, 69, 0.05);
  padding: 15px;
  border-radius: 8px;
}

.vmo-cred-data-box {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 25px;
  position: relative;
  overflow-x: auto;
}

.vmo-cred-data-box pre {
  margin: 0;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 15px;
  color: #07081d;
  white-space: pre-wrap;
  word-break: break-all;
}

.vmo-cred-action-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}

.vmo-cred-form .iti {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .vmo-cred-page-wrapper {
    padding: 20px 10px;
  }

  .vmo-cred-body {
    padding: 25px 15px;
  }

  .vmo-cred-heading {
    font-size: 22px;
  }

  .vmo-cred-heading-small {
    font-size: 18px;
  }

  .vmo-cred-input-code {
    letter-spacing: 6px;
    font-size: 18px;
    padding: 12px;
  }

  .vmo-cred-input-code::placeholder {
    letter-spacing: 6px;
  }

  .vmo-cred-action-row {
    flex-direction: column;
    gap: 10px;
  }

  .vmo-cred-btn {
    width: 100%;
    padding: 14px 20px;
  }

  .vmo-cred-icon-wrapper i {
    font-size: 48px;
  }

  .vmo-cred-data-box {
    padding: 15px;
  }

  .vmo-cred-data-box pre {
    font-size: 13px;
  }
}

        /* Override the default intl-tel-input globe */
.iti__globe {
    background-image: none !important; /* Remove the default globe SVG */
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Insert the FontAwesome Phone Icon */
.iti__globe::before {
    content: "\f095"; /* FontAwesome unicode for 'phone' */
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Font weight 900 is required for FA Solid icons */
    font-size: 12px; 
    color: #4b5563; /* Matches your UI's text color */
}