/* =========================================
   Credo Section Layout
========================================= */
.credo-section {position: relative;}
.credo-container {max-width: 1200px;margin: auto;display: flex;gap: 80px;align-items: flex-start;}
/* =========================================
   LEFT (Sticky Title)
========================================= */
.credo-left {position: relative;}
.credo-left h2 {margin: 0;}
.credo-left p {margin-top: 10px;}
/* =========================================
   RIGHT (Card Stack)
========================================= */
.credo-right {flex: 1;display: flex;flex-direction: column;gap: 28px;max-width: 100%;}
/* =========================================
   Cards
========================================= */
.credo-card {background: #ffffff;padding: 30px 32px;border-radius: 14px;border: 1px solid #e5e7eb;box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);transition: 0.25s ease;}
.credo-card:hover {transform: translateY(-6px);box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);}
.credo-num {width: 50px;height: 50px;border-radius: 50%;background: #009d69;color: #fff;font-weight: 600; font-size: 16px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.credo-card h3 {margin: 0 0 0 0;font-size: 20px;font-weight: 700;color: #009d69;}
.credo-card p {margin: 0;}
.dark .credo-num {background-color: #131313;}
.dark .credo-card {background-color: #303030;}
.break-sentence {display: block;}

/* Outer card - make spacing compact, flexible */
.small-box {
    overflow: hidden;
    max-width: 50%;
    margin: 0 auto;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* IMAGE BOX */
.left-img-bx {
    display: flex;
    align-items: stretch;
        max-width: 40%;
}

.left-img-bx img {
    width: 100%;
    height: auto;  
    object-fit: cover;
    transition: transform .3s ease-in-out;
}

.small-box:hover .left-img-bx img {
    transform: scale(1.08);
}

/* RIGHT CONTENT */
.right-content-bx {
    padding: 18px 22px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;  
      padding: 20px 45px;
      background-color: #fff;
 
}
.right-content-bx h2{color: #333;}
.right-content-bx p{color: #333;}
.dark .right-content-bx {background-color: #333 !important;}
.purpose-section-wrapper {max-width: 75%; margin: 0 auto;}


@media (max-width: 992px) {
.credo-container {flex-direction: column;gap: 30px;}
.credo-left {position: static;}
.credo-left h2 {font-size: 42px;}
.break-sentence {display: inline;}
.purpose-section-wrapper {max-width: 100%;}
}
@media (max-width: 767px) {
  .credo-card {flex-direction: column;padding: 25px 25px;}
  .credo-num {width: 42px;height: 42px;font-size: 16px;margin: 0 auto;}
  .credo-right {max-width: 100%;}
   .credo-left {position: static !important; }
   .credo-left h2 br {display: none;}
   .small-box, .left-img-bx {max-width: 100%;}
   .right-content-bx {padding: 20px 20px;}
}