/* Common */

/* Content */
@media (max-width: 991.98px) {
  .top-header .container-fluid>div {
    justify-content: center !important;
  }

  .top-header-right {
    justify-content: center;
    margin-top: 0;
  }

  .top-header {
    font-size: 0.78rem;
    text-align: center;
  }
}

/* Section */
@media (max-width: 991px) {
  .hero-section {
    min-height: auto;
  }

  .notice-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
  }

  .notice-card .document-checklist-icon {
    width: 80px;
    height: 80px;
  }
}

/* Section Background */
@media (max-width: 768px) {

  .white-bg,
  .grey-bg,
  .dark-bg,
  .primary-bg {
    padding: 36px 0 !important;
  }
}

/* Heading */
@media (max-width: 991.98px) {
  .hero-title {
    font-size: 2.2rem;
  }

  .hero-heading {
    font-size: 2rem;
  }
}

@media (max-width: 575.98px) {
  .hero-title {
    font-size: 1.6rem;
  }

  .hero-heading {
    font-size: 1.6rem;
  }
}

/* Sub Heading */
@media (max-width: 768px) {
  .hero-subtitle {
    font-size: 1.05rem;
  }

  .hero-sub-heading {
    font-size: 1rem;
  }
}

/* Title */
@media (max-width: 991.98px) {

  .section-title,
  .markets-trading-title {
    font-size: 1.85rem;
  }
}

@media (max-width: 575.98px) {

  .section-title,
  .markets-trading-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .card-title-lg {
    font-size: 20px;
    line-height: 26px;
  }
}

/* Sub Title */
@media (max-width: 768px) {
  .section-subtitle {
    font-size: 0.95rem;
  }
}

/* Paragraph */
@media (max-width: 768px) {
  .body-text {
    font-size: 0.925rem;
  }
}

/* Images */

/* Cards */
@media (max-width: 576px) {
  .custom-card {
    padding: 16px;
  }
}

@media (max-width: 768px) {

  .document-checklist-card,
  .access-feature-card,
  .risk-accordion-body {
    padding: 20px;
  }

  .step-card {
    padding: 16px 12px;
  }

  .cost-item-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .cost-item-label {
    width: 100%;
  }

  .market-tab {
    font-size: 14px;
    padding: 12px 14px;
  }

  .market-tab--active {
    padding-bottom: 10px;
  }

  .doc-info-table {
    max-width: 100%;
  }
}

@media (max-width: 991.98px) {
  .disclaimer-text-lg {
    font-size: 20px;
  }

  .performance-chart-canvas {
    height: 340px;
  }
}

@media (max-width: 575.98px) {
  .disclaimer-text-lg {
    font-size: 17px;
  }

  .performance-chart-canvas {
    height: 300px;
  }

  .cost-item-label,
  .cost-item-text {
    font-size: 14px;
  }

  .access-feature-title {
    font-size: 14px;
  }

  .access-feature-text {
    font-size: 12px;
  }
}

/* Lists */
@media (max-width: 991.98px) {
  .nav-menu-list {
    flex-direction: column;
    gap: 12px;
    padding: 15px 0 10px;
    align-items: flex-start;
    width: 100%;
  }

  .nav-menu-list .nav-item {
    width: 100%;
  }

  .nav-bar .dropdown-menu,
  .nav-menu-list .dropdown-menu {
    position: static !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding-left: 15px !important;
  }

  .nav-bar .dropdown-item {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
  }
}



/* 992px to 1024px (Tablet Landscape / Narrow Laptop) */
@media (min-width: 992px) and (max-width: 1024px) {
  .nav-bar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .nav-bar .navbar-brand img {
    max-width: 160px !important;
    min-width: 150px !important;
  }

  .nav-menu-list {
    flex-direction: row;
    gap: 8px !important;
  }

  .nav-menu-list .nav-link {
    font-size: 12.5px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    white-space: nowrap !important;
  }

  .nav-bar .gold-btn,
  .nav-bar .back-btn {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
}

/* 1025px to 1280px (Standard Laptop) */
@media (min-width: 1025px) and (max-width: 1280px) {
  .nav-bar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .nav-bar .navbar-brand img {
    max-width: 180px !important;
  }

  .nav-menu-list {
    flex-direction: row;
    gap: 14px !important;
  }

  .nav-menu-list .nav-link {
    font-size: 13.5px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    white-space: nowrap !important;
  }

  .nav-bar .gold-btn,
  .nav-bar .back-btn {
    padding: 7px 12px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 1281px) and (max-width: 1400px) {
  .nav-menu-list {
    gap: 12px;
  }

  .nav-menu-list .nav-link {
    font-size: 0.875rem;
  }
}

/* Footer */

/* Mobile Responsive */
@media (max-width: 1024px) {

  #markets-trading .col-lg-5,
  #markets-trading .col-lg-7,
  #markets-trading .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .markets-grid-wrapper {
    height: auto !important;
    gap: 16px !important;
    margin-bottom: 24px;
  }

  .markets-img-main {
    height: 300px;
  }

  .markets-img-sub {
    height: 220px;
  }

  #markets-trading .body-text {
    width: 100%;
    max-width: 100%;
  }

  #markets-trading .gold-btn,
  #markets-trading .plain-outline-btn {
    flex: 1 1 50%;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  #markets-trading .disclaimer-text-muted {
    width: 100%;
  }
}



@media (max-width: 991.98px) {
  .cta-btn-group {
    width: auto;
    max-width: 100%;
  }

  .cta-btn-group .gold-btn,
  .cta-btn-group .back-btn,
  .cta-btn-group .gold-outline-btn,
  .cta-btn-group .plain-outline-btn {
    width: auto;
    flex: 0 1 auto;
    padding: 10px 20px;
    font-size: 13px;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .cta-btn-group {
    flex-direction: column;
    width: 100%;
  }

  .cta-btn-group .gold-btn,
  .cta-btn-group .back-btn,
  .cta-btn-group .gold-outline-btn,
  .cta-btn-group .plain-outline-btn {
    width: 100%;
  }
}