:root {
  --mobile-gap: 16px;
  --mobile-gap-sm: 12px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
canvas,
iframe,
video {
  max-width: 100%;
  height: auto;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 991.98px) {
  .container,
  .container-fluid {
    padding-left: var(--mobile-gap);
    padding-right: var(--mobile-gap);
  }

  .row {
    margin-left: calc(var(--mobile-gap-sm) * -1);
    margin-right: calc(var(--mobile-gap-sm) * -1);
  }

  .row > .col,
  .row > [class*="col-"] {
    padding-left: var(--mobile-gap-sm);
    padding-right: var(--mobile-gap-sm);
  }

  .modal-dialog {
    max-width: calc(100vw - 20px);
    margin: 10px auto;
  }

  .modal-body,
  .modal-header,
  .modal-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .modal-footer {
    gap: 8px;
  }

  .modal-footer .btn,
  .modal-footer button,
  .modal-footer a {
    margin: 0;
  }

  .table td,
  .table th {
    white-space: nowrap;
  }
}

@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .row > .col,
  .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  .table-responsive {
    border-radius: 14px;
  }
}

@media (max-width: 991.98px) {
  body.login-modern .subpages-header .container {
    position: relative;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
    align-items: center !important;
  }

  body.login-modern .subpages-header .logo {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.login-modern .subpages-header .logo img {
    max-width: 168px;
    height: auto;
  }

  body.login-modern .subpages-header .nav-wrap {
    order: 4;
    width: 100%;
  }

  body.login-modern .subpages-header .navbar,
  body.login-modern .subpages-header .navbar-list {
    width: 100%;
  }

  body.login-modern .subpages-header .navbar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  body.login-modern .subpages-header .nav-item {
    width: 100%;
  }

  body.login-modern .subpages-header .navbar-link,
  body.login-modern .subpages-header a.navbar-link {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    text-align: left;
  }

  body.login-modern .subpages-header .action-btn {
    order: 3;
    margin: 0 0 0 auto !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
  }

  body.login-modern .hero-section {
    padding: 88px 0 56px;
  }

  body.login-modern .hero-content,
  body.login-modern .hero-image {
    text-align: left;
  }

  body.login-modern .hero-title {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.08;
  }

  body.login-modern .hero-subtitle {
    font-size: 1rem;
    line-height: 1.7;
  }

  body.login-modern .hero-features,
  body.login-modern .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  body.login-modern .hero-feature-item,
  body.login-modern .btn-hero,
  body.login-modern .btn-hero-primary,
  body.login-modern .btn-hero-secondary {
    width: 100%;
  }

  body.login-modern .btn-hero,
  body.login-modern .btn-hero-primary,
  body.login-modern .btn-hero-secondary {
    justify-content: center;
  }

  body.login-modern .hero-phone-mockup,
  body.login-modern .hero-image {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  body.login-modern .sub-wrap {
    padding: 20px 16px;
    border-radius: 16px;
    margin-top: 18px;
  }

  body.login-modern .blog-container .card,
  body.login-modern .blog-right-side .card,
  body.login-modern .highest-wrap,
  body.login-modern .card {
    border-radius: 16px !important;
  }

  body.login-modern .login-wrap {
    min-height: auto;
    padding: 20px 0 24px;
  }

  body.login-modern .login {
    width: calc(100vw - 24px);
    padding: 14px 14px 20px;
    border-radius: 20px;
  }

  body.login-modern .login .container {
    padding-left: 0;
    padding-right: 0;
  }

  body.login-modern .login .container > .d-flex:first-child {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    margin-top: 0 !important;
  }

  body.login-modern .login .container > .d-flex:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  body.login-modern .login .container > .d-flex:first-child img,
  body.login-modern .login .container > .d-flex:first-child .ms-5,
  body.login-modern .login .container > .d-flex:first-child .ms-3 {
    margin: 0 !important;
  }

  body.login-modern .login form > .d-flex.align-items-center.justify-content-between {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  body.login-modern .login .input-field {
    padding: 10px 14px;
  }

  body.login-modern .login-footer {
    padding: 18px 0;
  }

  body.login-modern .login-footer .container > .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  body.login-modern .login-footer img {
    width: 180px !important;
  }
}

@media (max-width: 991.98px) {
  body.panel-modern main {
    display: block;
  }

  body.panel-modern .app-header {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  body.panel-modern .app-header .container > .d-flex {
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    min-height: 64px;
  }

  body.panel-modern #horizontal-navtoggle {
    order: 1;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  body.panel-modern .header-brand {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    text-align: center;
  }

  body.panel-modern .header-brand-img {
    max-height: 34px;
    width: auto;
  }

  body.panel-modern .header-brand .main-logo,
  body.panel-modern .header-brand .icon-logo {
    margin: 0 auto;
  }

  body.panel-modern .header-rightmenu {
    order: 3;
    width: auto;
    margin-left: auto !important;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 0;
    align-items: center;
  }

  body.panel-modern .header-rightmenu {
    min-width: 0;
  }

  body.panel-modern .header-rightmenu > * {
    margin: 0 !important;
    flex: 0 0 auto;
  }

  body.panel-modern .header-rightmenu .nav-item,
  body.panel-modern .header-rightmenu .dropdown {
    display: inline-flex !important;
    align-items: center;
  }

  body.panel-modern .panel-notification-chip,
  body.panel-modern .panel-balance-chip,
  body.panel-modern .panel-logout-chip,
  body.panel-modern .panel-fullscreen-chip {
    padding-top: 0 !important;
    margin-right: 0 !important;
  }

  body.panel-modern .panel-logout-chip,
  body.panel-modern .panel-fullscreen-chip {
    display: none !important;
  }

  body.panel-modern .panel-notification-chip .notifier {
    position: relative;
  }

  body.panel-modern .panel-notification-chip button {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 8px 22px rgba(8, 16, 28, 0.18);
  }

  body.panel-modern .panel-notification-chip button i {
    font-size: 16px;
  }

  body.panel-modern #adminMessageBadge {
    top: -2px;
    right: -2px;
  }

  body.panel-modern .panel-balance-chip a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 8px 22px rgba(8, 16, 28, 0.18);
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  body.panel-modern .panel-balance-chip a i {
    font-size: 14px;
  }

  body.panel-modern .horizontal-mainwrapper {
    max-width: 100%;
  }

  body.panel-modern .horizontalMenu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  body.panel-modern .horizontalMenu-list > li {
    float: none !important;
    display: block;
    width: 100%;
  }

  body.panel-modern .horizontalMenu-list > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 15px;
    padding: 12px 14px;
  }

  body.panel-modern .container .bg-white,
  body.panel-modern .card,
  body.panel-modern .panel-card {
    border-radius: 16px !important;
  }

  body.panel-modern .panel-section-title {
    justify-content: flex-start;
    text-align: left;
    font-size: 1.35rem;
    line-height: 1.2;
  }

  body.panel-modern .service .d-flex,
  body.panel-modern .service2 .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }

  body.panel-modern .service .d-flex > div,
  body.panel-modern .service2 .d-flex > div {
    width: 100%;
  }

  body.panel-modern .service .d-flex .btn,
  body.panel-modern .service2 .d-flex .btn {
    width: 100%;
  }

  body.panel-modern #suggestionBtnContainer .btn-group-toggle,
  body.panel-modern #suggestionBtnContainer1 .btn-group-toggle,
  body.panel-modern .btn-group-toggle {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.panel-modern #suggestionBtnContainer .btn,
  body.panel-modern #suggestionBtnContainer1 .btn,
  body.panel-modern .btn-group-toggle .btn {
    width: 100%;
    margin-right: 0 !important;
  }

  body.panel-modern #orderModal .modal-dialog,
  body.panel-modern #countryModal .modal-dialog,
  body.panel-modern .bd-examples-modal-lg .modal-dialog,
  body.panel-modern .bd-example-modal-lg1 .modal-dialog {
    max-width: calc(100vw - 20px);
  }

  body.panel-modern #orderModal .modal-footer,
  body.panel-modern #countryModal .modal-footer {
    justify-content: stretch;
  }

  body.panel-modern #orderModal .modal-footer .btn,
  body.panel-modern #countryModal .modal-footer .btn {
    flex: 1 1 100%;
  }

  body.panel-modern .dataTables_wrapper .dataTables_length,
  body.panel-modern .dataTables_wrapper .dataTables_filter,
  body.panel-modern .dataTables_wrapper .dataTables_info,
  body.panel-modern .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    width: 100%;
    text-align: left !important;
  }

  body.panel-modern .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 6px;
  }

  body.panel-modern footer {
    padding-top: 48px !important;
  }
}

@media (max-width: 767.98px) {
  body.panel-modern .app-header {
    position: sticky;
    top: 0;
    z-index: 1035;
  }

  body.panel-modern .header-rightmenu {
    align-items: stretch;
  }

  body.panel-modern .header-rightmenu .nav-item,
  body.panel-modern .header-rightmenu .dropdown {
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
  }

  body.panel-modern .header-rightmenu .nav-item:last-child {
    flex-basis: 100%;
  }

  body.panel-modern .header-rightmenu .nav-item a,
  body.panel-modern .header-rightmenu .dropdown a {
    width: 100%;
    justify-content: center;
  }

  body.panel-modern .modal-footer .btn,
  body.panel-modern .modal-footer button {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  body.admin-modern .navbar {
    align-items: center;
  }

  body.admin-modern .navbar-brand {
    max-width: calc(100% - 62px);
    margin-right: 0;
  }

  body.admin-modern .navbar-brand .admin-brand-text {
    font-size: 1rem;
    line-height: 1.15;
  }

  body.admin-modern .navbar-toggler {
    margin-left: auto;
  }

  body.admin-modern .sub-menu-bar {
    width: 100%;
    padding-top: 12px;
  }

  body.admin-modern .navbar-nav {
    width: 100%;
    gap: 8px;
  }

  body.admin-modern .navbar-nav .nav-item {
    width: 100%;
    margin: 0;
  }

  body.admin-modern .navbar-nav .nav-item > a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.74rem 0.95rem !important;
    font-size: 0.92rem;
    line-height: 1.35;
  }

  body.admin-modern .card,
  body.admin-modern .w-100.bg-white,
  body.admin-modern .bg-white.shadow,
  body.admin-modern .bg-white.shadow-sm,
  body.admin-modern .bg-white.shadow-lg {
    border-radius: 16px !important;
  }

  body.admin-modern .dataTables_wrapper .dataTables_length,
  body.admin-modern .dataTables_wrapper .dataTables_filter,
  body.admin-modern .dataTables_wrapper .dataTables_info,
  body.admin-modern .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    width: 100%;
    text-align: left !important;
  }

  body.admin-modern .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 6px;
  }

  body.admin-modern .dataTables_wrapper .dataTables_paginate .paginate_button {
    margin-top: 4px;
  }

  body.admin-modern .settings-submit-wrap {
    position: static;
    bottom: auto;
  }

  body.admin-modern .finance-chart-wrap {
    height: 280px;
  }
}

@media (max-width: 767.98px) {
  body.admin-modern .navbar-area.navbar-one {
    margin-bottom: 0.85rem !important;
  }

  body.admin-modern .navbar {
    min-height: 66px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  body.admin-modern .icon.icon-shape {
    width: 48px;
    height: 48px;
  }

  body.admin-modern .modal-footer .btn,
  body.admin-modern .modal-footer button,
  body.admin-modern .modal-footer a {
    width: 100%;
  }

  body.admin-modern .input-group {
    flex-wrap: wrap;
  }

  body.admin-modern .input-group > .form-control,
  body.admin-modern .input-group > .custom-select,
  body.admin-modern .input-group > .custom-file {
    width: 100%;
    flex: 1 1 100%;
  }

  body.admin-modern .input-group-prepend,
  body.admin-modern .input-group-append {
    width: 100%;
  }

  body.admin-modern .input-group-text {
    width: 100%;
    border-radius: 12px;
  }
}