/* =====================================================
   ALL MOBILE RESPONSIVE CSS IN ONE MEDIA QUERY
=====================================================*/
@media (max-width: 767px) {

  /* --- Hero Section --- */
  .hero-section {
    text-align: center;
    padding-top: inherit !important;
    background-image: inherit !important;
  }

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .setreversebox,
  .setreversewomen,
  .setopportunity,
  .setdesignbusy {
    flex-direction: column-reverse;
  }

  .hero-image-wrap {
    margin-top: 20px !important;
  }

  .hero-title {
    font-size: 20px !important;
    width: inherit !important;
    font-weight: 400 !important;
    margin-top: 28px !important;
  }

  .hero-person-img {
    width: 100% !important;
    border-radius: 10px;
    display: block !important;
  }

  /* --- General Layout --- */
  .growth-content {
    margin-bottom: 40px;
        margin-top: 30px;
  }

  .growth-section {
    padding: inherit !important;
    text-align: left;
  }

  .growth-title {
    font-size: 20px !important;
  }

  .intro-section {
    padding: inherit !important;
  }

  .intro-content {
    text-align: center !important;
    padding: 30px !important;
  }

  .intro-title {
    font-size: 22px !important;
    text-align: center !important;
    margin: 15px 0 !important;
  }

  .intro-label,
  .intro-text,
  .intro-text p {
    text-align: center !important;
  }

  .theory-container {
    padding: inherit !important;
    text-align: center !important;
  }

  .cr-main-wrapper {
    padding: inherit !important;
  }

  .cr-header-title {
    font-size: 27px !important;
  }

  .cr-feature-box {
    padding: 16px 12px !important;
  }

  /* --- Stats --- */
  .stat-box{
    border: inherit !important;
    

  }
  .stat-box1 {
    border-bottom: 1px solid #8ecba6;
  }

  .stat-box:last-child {
    border-bottom: none;
  }

  .stat-text {
    width: 100%;
    margin-top: 4px;
  }

  /* --- Box Sizes --- */
  .boxfitsize,
  .setstartbox,
  .font-box-size {
    width: 100% !important;
    max-width: 100% !important;
  }

  .boxfitsize {
    text-align: left !important;
  }

  /* --- Opportunity Section --- */
  .setimgsizeopp {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
  }

  .setleftsize {
    padding-left: 10px !important;
  }

  .setleftsize h3 {
    font-size: 20px !important;
  }

  /* --- Mobile Alignment --- */
  .setmobilediv {
    gap: 15px !important;
    /*margin-left: 20px;*/
  }

  .card-header-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }

  /* --- Curriculum / Theory --- */
  .curriculum-card {
    flex-direction: column;
  }

  .curriculum-stat {
    border-right: none;
    border-bottom: 1px solid #eee;
  }

  .income-card {
    padding: 12px !important;
  }

  .theory-p-content-box {
    padding-left: 0;
    margin-top: 40px;
    text-align: center;
  }

  .theory-p-list li {
    text-align: left;
    display: inline-block;
    width: 100%;
  }

  .theory-p-feature-title {
    font-size: 1.8rem;
  }

  /* --- Story Section --- */
  .story-card {
    height: 300px !important;
  }

  .story-image-wrapper,
  .story-text-wrapper {
    width: 100%;
  }

  .story-image-wrapper {
    height: 300px;
  }

  .story-image-wrapper img {
    height: 300px !important;
  }

  .person-bio {
    font-size: 9px !important;
  }

  .textareabox {
    font-size: 12px !important;
    padding: 12px !important;
  }

  /* --- Benefit Section --- */
  .benefit-card div {
    text-align: center;
  }

  .benefit-card p {
    text-align: center !important;
  }

  .benefit-icon {
    width: 50px !important;
    height: 50px !important;
  }

  .benefits-section h2 {
    font-size: 24px !important;
  }

  /* --- Headings --- */
  .setheadline {
    font-size: 20px !important;
  }

  .setheadline1 {
    font-size: 16px !important;
  }

  .setfontheading {
    font-size: 20px;
  }

  .step-flow-title {
    font-size: 28px !important;
  }

  .path-main-title {
    font-size: 22px;
  }

  .program-target-title {
    font-size: 1.6rem;
  }

  /* --- Buttons --- */
  .btn-main {
    font-size: 15px;
  }

  .gl-btn-apply,
  .batch-promo-btn {
    font-size: 14px !important;
    padding: 12px !important;
    text-decoration: none !important;
  }

  .apply-btn {
    min-width: 100%;
    min-height: 64px;
    font-size: 18px;
    padding: 16px 24px;
  }

  /* --- Prices --- */
  .gl-current-price {
    font-size: 18px !important;
  }

  .batch-promo-launch-price {
    font-size: 24px !important;
  }

  /* --- Footer --- */
  .setfooterlogo {
    justify-content: center;
    display: flex;
  }

  .footer-text1 {
    font-size: 16px !important;
  }

  /* --- Placement Support --- */
  .placement-support {
    border-left: none;
    width: 100%;
    justify-content: center;
  }

  /* --- Step Cards --- */
  .step-card {
    border-radius: 24px;
    padding: 20px 18px;
    margin-bottom: 20px;
  }

  .step-card:nth-child(odd) {
    border-bottom-left-radius: 15px;
    width: 85%;
    padding: 20px;
  }

  .step-card:nth-child(odd),
  .step-card:nth-child(even) {
    margin-left: 0;
    margin-right: 0;
  }

  .steps-wrapper {
    padding-left: inherit !important;
  }

  .step-top {
    gap: 14px;
  }

  .icon-box {
    width: 42px;
    min-width: 42px;
  }

  .icon-box svg {
    width: 30px;
    height: 30px;
  }

  /* --- Left Panel --- */
  .left-panel {
    text-align: center;
    padding-right: 0;
    margin-bottom: 42px;
  }

  .main-title {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
  }

  /* --- Course Section --- */
  .course-section {
    padding: 28px 0 32px;
  }

  /* --- Google Logo --- */
  .google-ads-logo {
    width: 180px;
    height: 180px;
  }

  .logo-blue {
    width: 60px;
    height: 176px;
    right: 36px;
    top: 4px;
  }

  .logo-yellow {
    width: 54px;
    height: 142px;
    left: 43px;
    top: 27px;
  }

  .logo-green {
    width: 60px;
    height: 60px;
    left: 22px;
    bottom: 10px;
  }

  /* --- Flex Schedule --- */
  .flex-schedule-area {
    text-align: center;
    padding: 50px 0;
  }

  .flex-checklist {
    display: inline-block;
    text-align: left;
  }

  .flex-illustration-wrap {
    margin-top: 40px;
    justify-content: center;
    display: flex;
  }

  /* --- Career Section --- */
  .career-section {
    padding: 50px 0 60px;
  }

  .career-title {
    font-size: 30px;
  }

  .career-subtitle,
  .concern-text,
  .info-box p {
    font-size: 16px;
  }

  .career-subtitle {
    margin-top: 14px;
  }

  .concern-row {
    margin-top: 45px;
  }

  .question-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 24px;
  }

  .valid-concerns {
    font-size: 22px;
    margin-top: 35px;
    margin-bottom: 30px;
  }

  .info-box {
    padding: 24px 20px;
  }

  /* --- Skill Path --- */
  .skill-path-card {
    padding: 20px;
    text-align: center;
  }

  /* --- Program Target --- */
  .program-target-card {
    padding: 18px;
  }

  /* --- Batch Promo --- */
  .batch-promo-section {
    padding: 40px 0;
  }

  .batch-promo-pricing-card {
    /*margin-bottom: 40px;*/
    padding: 16px !important;
  }

  .batch-promo-timer-container {
    justify-content: center;
    gap: 6px !important;
  }

  .batch-promo-launch-title {
    font-size: 20px !important;
  }

  /* --- XP Section --- */
  .xp-suitability-wrapper {
    /*padding: inherit !important;*/
  }

  .xp-title-main {
    font-size: 25px !important;
  }

  /* --- Problem Items --- */
  .problem-item img {
    width: 27px !important;
    height: 27px !important;
  }

  /* --- Career Restart --- */
  .career-restart-section {
    padding: 40px 0;
  }

  .career-restart-image-wrapper {
    margin-top: 30px;
  }

  .career-restart-woman-img {
    max-width: 80%;
  }

  .career-restart-title {
    text-align: center;
    font-size: 20px !important;
    margin-top: 20px;
  }

  /* --- Misc --- */
  .image-container {
    padding: 10px;
  }



  /* ---- extra added css -----*/

  .p-prog-btn-apply{
    justify-content: center;
    display: flex;
  }
  .batch-promo-btn{
    justify-content: center;
    display: inline-flex;
    font-size: 16px !important;
  }

  .batch-promo-footer-text {
    font-size: 17px !important;
    margin-bottom: 40px;
  }
  .setdisplaypoint{
    display: inherit !important;
  }

}

/* Target iOS devices specifically */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 767px) {
        .skill-path-card {
            /* Reset any fixed height or large min-height */
            min-height: auto !important; 
            height: auto !important;
            
            /* Add consistent padding to keep the look clean */
            padding-top: 30px !important;
            padding-bottom: 30px !important;
            
            /* Ensure it doesn't stretch to fill the screen vertically */
            display: block; 
            margin-bottom: 20px;
        }
    }
}