@media (max-width: 767px) {
  /* Section container */
  #homePageSection10 {
    padding: 12vw 5vw !important;
    background: #fff !important;
  }
  
  /* Card grid - force single column */
  #homePageSection10 #threeCardsDivIChildID10 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6vw !important;
  }
  
  /* Card container - exact match to reference */
  #homePageSection10 #threeCardsDivIChildID10 .cardParent,
  #homePageSection10 .cardParent,
  #homePageSection10 .cardChildAnim {
    width: 85% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 auto !important;
    background-color: #fff !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  /* Override any existing pseudo-elements */
  #homePageSection10 .cardParent::before,
  #homePageSection10 .cardParent::after,
  #homePageSection10 .cardChildAnim::before,
  #homePageSection10 .cardChildAnim::after,
  #homePageSection10 .pseudoCardParent::before,
  #homePageSection10 .pseudoCardParent::after,
  #homePageSection10 .pseudoCardChildAnim::before,
  #homePageSection10 .pseudoCardChildAnim::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
  }

  /* Inner card content - exact match */
  #homePageSection10 .pseudoCardParent,
  #homePageSection10 .pseudoCardChildAnim {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    padding: 16px 16px 0 16px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    background-color: #fff !important;
  }

  /* Header with logo and flag - exact layout */
  #homePageSection10 .caseStudyCardHeader {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    position: relative !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* Left logo */
  #homePageSection10 .caseStudyCardHeader .storyLogoParent {
    position: static !important;
    width: auto !important;
    max-width: 45% !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    order: 0 !important;
  }

  /* Right flag badge */
  #homePageSection10 .caseStudyCardHeader .flag {
    position: static !important;
    width: 28px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    order: 1 !important;
  }

  /* Card title styling */
  #homePageSection10 .caseStudyTitle {
    font-family: "markProHeavy", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    color: #000 !important;
    margin: 10px 0 12px 0 !important;
    padding: 0 !important;
    font-weight: bold !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Learn more button - exact match to reference */
  #homePageSection10 .caseStudyLearnMore {
    position: static !important;
    display: inline-block !important;
    font-family: "markProLight", sans-serif !important;
    font-size: 14px !important;
    padding: 6px 15px !important;
    margin: 0 0 15px 0 !important;
    background-color: #fff !important;
    border: 1px solid #345cad !important;
    color: #345cad !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    text-transform: none !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    text-align: center !important;
    order: 2 !important;
  }

  /* Image container */
  #homePageSection10 .caseStudyImageWrapper {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    order: 3 !important;
  }

  /* Actual image */
  #homePageSection10 .caseStudyImage {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }

  /* Hide any old display elements or flags */
  #homePageSection10 .StoryCardSubHeadParent,
  #homePageSection10 .StoryCardHeadParent {
    display: none !important;
  }

  #homePageSection10 .csCardFlex {
    display: flex !important;
    flex-direction: column !important;
  }
  
  #homePageSection10 .csCardBtn {
    margin-top: auto !important;
    width: auto !important;
  }
  
}