/* Mobile Responsive Styles for Div Elements */

/* Mobile Media Query - All div elements with flex should be vertical and flex auto */
@media (max-width: 768px) {

  /* Make all d-flex elements vertical on mobile */
  .d-flex {
    flex-direction: column !important;
    flex: auto !important;
  }

  /* Override specific Bootstrap flex utilities for mobile */
  .d-flex.align-items-center {
    align-items: stretch !important;
  }

  .d-flex.justify-content-center,
  .d-flex.justify-content-between {
    justify-content: flex-start !important;
  }

  /* Tab links specific mobile styling */
  .cs_tab_links.d-flex {
    flex-direction: column !important;
    gap: 10px;
  }

  .cs_tab_links .cs_tab_link {
    width: 100% !important;
    text-align: center;
    margin-bottom: 5px;
  }

  /* VS Circle container mobile styling */
  .col-lg-2.d-flex {
    margin: 20px 0;
    justify-content: center !important;
  }

  /* Support links container mobile styling */
  .d-flex.flex-column {
    gap: 15px;
  }

  /* CTA button container mobile styling */
  .d-flex.align-items-center.justify-content-center {
    padding: 20px 0;
  }

  /* General div flex auto styling */
  div[class*="flex"],
  div[style*="display: flex"],
  div[style*="display:flex"] {
    flex-direction: column !important;
    flex: auto !important;
  }

  /* Ensure proper spacing for mobile */
  .d-flex>* {
    margin-bottom: 10px;
  }

  .d-flex>*:last-child {
    margin-bottom: 0;
  }

  /* Reduce subtitle size on mobile and tablets */
  .cs_section_subtitle.cs_radius_25_gold {
    font-size: 14px !important;
    padding: 5px 14px !important;
  }

  .cs_section_subtitle.cs_radius_25_gold svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Tablet specific adjustments */
@media (max-width: 991px) and (min-width: 769px) {
  .cs_tab_links.d-flex {
    flex-wrap: wrap;
    gap: 10px;
  }

  .cs_tab_links .cs_tab_link {
    flex: 1 1 45%;
    min-width: 200px;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .d-flex {
    padding: 10px 0;
  }

  .cs_tab_links .cs_tab_link {
    font-size: 14px;
    padding: 12px 8px;
  }

  .cs_vs_circle {
    width: 60px !important;
    height: 60px !important;
  }

  .cs_vs_rect_button {
    width: 100% !important;
    text-align: center;
  }

  /* Reduce subtitle size on mobile */
  .cs_section_subtitle.cs_radius_25_gold {
    font-size: 12px !important;
    padding: 4px 12px !important;
  }

  .cs_section_subtitle.cs_radius_25_gold svg {
    width: 12px !important;
    height: 12px !important;
  }
}