:root {
  --meditrackbg: #E8F0F5;
  --meditxt: #040404;
  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --text: #0b0b0b;
  --muted: #4b4b4b;
  --accent-orange: #f7b04d;
  --accent-blue:   #0a4671;
  --accent-red:    #ff6b5a;
  --accent-gray:   #9aa0a6;
   --orange-light: #FDEFDB;
  --blue-light:   #CEEAFF;
  --red-light:    #FFE1DE;
  --gray-light:   #EBECED;
  --challenge-blue-start: #2768E6;
  --challenge-blue-end:   #1051D0;
  --max-width: 1100px;
  --bg-light:#FBFBFB;
  --bg-light-2:#E8F0F5;
  --bg-dark-blue:#1051D0
}
.bg-white{
    background: #ffffff;
}
.bg-light{
    background: var(--bg-light);
}
.bg-light-2{
    background: var(--bg-light-2);
}
.bg-dark-blue{
    background: var(--bg-dark-blue);
}
.bg-dark-orange{
    background: var(--accent-orange);
}
.orange-box-1{
    background: var(--orange-light) !important;
    border:solid 1px var(--accent-orange) !important;
}
.blue-box-1{
    background: var(--blue-light) !important;
    border:solid 1px var(--accent-blue)!important;
}
.red-box-1{
    background: var(--red-light)!important;
    border:solid 1px var(--accent-red)!important;
}
.gray-box-1{
    background: var(--gray-light)!important;
    border:solid 1px var(--accent-gray)!important;
}
.case-hero {
    width: 100%;
    padding: 195px 20px;
    text-align: center;
   
}
.bg-11{
 background: var(--meditrackbg);
}
.bg-12{
 background: #FFF8F2;
}
.case-hero h1{
    font-size: 64px;
    margin-bottom: 24px;
}

.case-hero .case-subtext {
    max-width: 800px;
    margin: 0 auto 40px auto;
    font-size: 24px;
    line-height: 48px;
    color: var(--meditxt);
}

.case-info {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: 20px;
    padding: 25px;
    background: rgba(255,255,255,0.7);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.info-card {
    flex: 33.3%;
    text-align: left;
    border-right:solid 1px #D4CCCC ;
    
}
.info-card:last-child{
border-right:none;
}
.info-card h4 {
    font-size: 24x;
    font-weight: normal;
    margin-bottom: 5px;
}

.info-card p {
    font-size: 14px;
    color: #444;
    font-family: "Kanit", sans-serif;
     font-weight: 300;
     line-height: 20px;
}

.mt-large-box {
    width: 1365px;
    max-width: 1100px;
    height: 400px;
    margin: 50px auto 0 auto;
    background: #D9D9D9;
    border-radius: 20px;
    overflow: hidden;
    padding: 0;
    box-shadow: 1px 0px 18px 0px rgba(0,0,0,0.12);
-webkit-box-shadow: 1px 0px 18px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 1px 0px 18px 0px rgba(0,0,0,0.12);
}
.mt-large-box img {
    width: 100%;
  
}

@media (max-width: 1199px) {}
@media (max-width: 991px) {}
@media (max-width: 767px) {}
@media (max-width: 575px) {
.case-hero {
    padding: 100px 20px;
}
.case-hero h1{
    font-size: 48px;
    margin-bottom: 24px;
}
.case-hero .case-subtext {
   
    margin: 0 auto 40px auto;
    font-size: 16px;
    line-height: 32px;
    
}
.case-info{
     flex-direction: column;
}
.info-card {
   
    border-right:none;
    
}
}


/* Reset / base */
  .case-section{padding:120px 0;text-align: center;}
  .case-section .title-wrap{
    width:50%;
  }
.case-section h3{
    text-align: center;
    margin-bottom:16px
}
.case-section h5{
     text-align: left;
     margin-bottom: 16px;
}
.case-section p{
    text-align: center;
   
    max-width: 600px;
    margin: 0 auto 40px auto;
    font-size: 16px;
    line-height: 30px;
    color: var(--meditxt);
}
 

    /* Grid of cards */
    .case-grid{
      display:grid;
        gap:24px 28px;
      margin-bottom:36px;
      
     
    }
.case-grid--2{
     grid-template-columns: repeat(2, 1fr);
}
.case-grid--3{
     grid-template-columns: repeat(3, 1fr);
}
.case-grid--4{
     grid-template-columns: repeat(4, 1fr);
}
    /* Card */
    .case-card{
      background:var(--card-bg);
      border-radius:10px;
      padding:22px 24px;
      
      border: 1px solid rgba(13,13,13,0.06);
      position:relative;
      overflow:visible;
    }
.card-shadow-1{
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.case-card ul{
    margin:16px 0;
    padding:0 24px;
    list-style: disc;
    text-align: left;
}
.case-card ul li{
     text-align: left;
     
     margin-bottom: 16px;
}
    .case-card h3{
      margin:0 0 10px 0;
      font-size:20px;
      font-weight:500;
      color:var(--text);
      text-align: left;
    }

    .case-card p{
      margin:0;
      font-size:15px;
      color:var(--muted);
      line-height:1.8;
      text-align: left;
    }
.metrix-card{
      background:var(--card-bg);
      border-radius:10px;
      padding:22px 24px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      border: 1px solid rgba(13,13,13,0.06);
      position:relative;
      overflow:visible;
    }
.metrix-card ul{
    margin:16px 0;
    padding:0 24px;
    list-style: disc;
    text-align: left;
}
.metrix-card ul li{
     text-align: left;
     
     margin-bottom: 16px;
}
    .metrix-card h3{
      margin:0 0 10px 0;
      font-size:48px;
      font-weight:500;
      color:var(--text);
      text-align: center;
    }

    .metrix-card p{
      margin:0;
      font-size:15px;
      color:var(--muted);
      line-height:1.8;
     text-align: center;
    }

    /* colored bottom accent using pseudo-element */

    .orange-left{ border-left: solid 5px var(--accent-orange); }
    .blue-left{ border-left: solid 5px var(--accent-blue); }
    .red-left{ border-left: solid 5px var(--accent-red); }
    .gray-left{ border-left: solid 5px var(--accent-gray); }

    .orange-bottom{ border-bottom: solid 5px var(--accent-orange); }
    .blue-bottom{ border-bottom: solid 5px var(--accent-blue); }
    .red-bottom{ border-bottom: solid 5px var(--accent-red); }
    .gray-bottom{ border-bottom: solid 5px var(--accent-gray); }

    .orange-bg{background:var(--accent-orange)}
    /* Challenge bar */
    .case-challenge{
      
      padding:28px 26px;
      border-radius:12px;
      text-align:center;
      box-shadow: 0 10px 30px rgba(16,120,210,0.12);
     
    }
 .case-challenge-bg1{
background: linear-gradient(180deg, var(--challenge-blue-start) 0%, var(--challenge-blue-end) 100%);

 }
  .case-challenge-bg1 h4,
  .case-challenge-bg1 p{
color:#fff;
  }
  .case-challenge-bg2{
background: #F7B04D;
background: linear-gradient(90deg,rgba(247, 176, 77, 1) 0%, rgba(224, 139, 20, 1) 50%);

 }

   .case-challenge-bg2 h4,
  .case-challenge-bg2 p{
color:#FFFCFA;
  }
    .case-challenge h4{
      margin:0 0 10px 0;
      font-size:18px;
      font-weight:700;
     
    }

    .case-challenge p{
      margin:0;
      font-size:18px;
      line-height:1.9;
      max-width:920px;
      margin-left:auto;
      margin-right:auto;
      letter-spacing:0.6px;
     
    }
    .reflection-wrap{
    color:#fff;
}
.reflection-wrap h3{
  color:#fff;  
}
.reflection-wrap .body-small{
    max-width: 1000px;
     color:#fff;  
     font-size: 18px;
      line-height: 36px;

}
.reflection-wrap .body-big{
    max-width:1000px;
     color:#fff;  
     font-size: 24px;
     line-height: 48px;
     font-weight: 300;


}
    /* --------------------
       RESPONSIVE BREAKPOINTS
       -------------------- */

    /* 1199px */
    @media (max-width: 1199px) {
    
    }

    /* 991px: collapse to 1 column */
    @media (max-width: 991px) {
      :root{ --max-width: 760px; }
      .case-grid{ grid-template-columns: 1fr; gap:18px; }
      .case-card{ padding:18px; }
      .case-card::after{ left:12px; right:12px; bottom:10px; height:8px; }
      .metrix-card{ padding:18px; }
      .metrix-card::after{ left:12px; right:12px; bottom:10px; height:8px; }
      .case-challenge{ padding:22px; }
    }

    /* 767px */
    @media (max-width: 767px) {
      :root{ --max-width: 620px; }
    
      .case-subtitle{ font-size:14px; max-width:640px; }
      .case-card h3{ font-size:18px; }
      .case-card p{ font-size:15px; line-height:1.7; }
      .case-challenge h4{ font-size:16px; }
      .case-challenge p{ font-size:16px; max-width:520px; }
      .metrix-card h3{ font-size:18px; }
      .metrix-card p{ font-size:15px; line-height:1.7; }

    }

    /* 575px */
    @media (max-width: 575px) {
      :root{ --max-width: 100%; }
      .case-problem-section{ padding:36px 12px; }
      .case-grid{ gap:14px; }
      .case-card{ padding:14px; border-radius:8px; }
      .case-card::after{ left:10px; right:10px; bottom:8px; height:6px; border-radius:0 0 6px 6px; }
     
      .case-subtitle{ font-size:13px; max-width:360px; }
      .case-card h3{ font-size:16px; }
      .case-card p{ font-size:14px; line-height:1.6; }
      .case-challenge-wrap{padding:20px}
      .case-challenge{ padding:16px; border-radius:10px;width:100% }
      .case-challenge p{ font-size:15px; max-width:320px; line-height:1.6; }
       .metrix-card{ padding:14px; border-radius:8px; }
      .metrix-card::after{ left:10px; right:10px; bottom:8px; height:6px; border-radius:0 0 6px 6px; }

       .metrix-card h3{ font-size:16px; }
      .metrix-card p{ font-size:14px; line-height:1.6; }

    }