.font-title {
    font-family: "SF Pro", sans-serif !important;
}

.font-deskripsi {
    font-family: "Mulish", sans-serif !important;
}

.list-secondary {
    border-radius: 10px;
    border: 1px solid #4f4f4f;
}

.list-warning {
    border-radius: 10px;
    border: 1px solid #ff9f43;
}

.list-success {
    border-radius: 10px;
    border: 1px solid #4cd964 !important;
}
.list-danger {
    border-radius: 10px;
    border: 1px solid #ff4c51 !important;
}
.list-info {
    border-radius: 10px;
    border: 1px solid #00bad1 !important;
}
.list-primary {
    border-radius: 10px;
    border: 1px solid #7367f0 !important;
}
.list-oranye-tua {
    border-radius: 10px;
    border: 1px solid #ff9800 !important;
}
.list-ungu-terang {
    border-radius: 10px;
    border: 1px solid #6610f2 !important;
}
.list-cyan-terang {
    border-radius: 10px;
    border: 1px solid #0dcaf0 !important;
}

.bg-file-upload {
    width: 100%;
    background-color: #fff;
    padding: 10px;
}

.bg-ungu-terang {
    background-color: #e5d0ff !important;
    color: #6610f2 !important;
}

.bg-oranye-tua {
    background-color: #ffe0b2 !important;
    color: #ff9800;
}

.bg-cyan-terang {
    background-color: #cff4fc !important;
    color: #0dcaf0 !important;
}
.bg-ungu-terang:hover {
    background-color: #e5d0ff !important;
    color: #6610f2 !important;
}

.bg-oranye-tua:hover {
    background-color: #ffe0b2 !important;
    color: #ff9800;
}

.bg-cyan-terang:hover {
    background-color: #cff4fc !important;
    color: #0dcaf0 !important;
}

.text-ungu-terang {
    color: #6610f2 !important;
}
.timeline-ungu-terang {
    position: absolute;
    z-index: 2;
    display: block;
    background-color: #000000 !important;
    block-size: 0.75rem;
    box-shadow: 0 0 0 10px var(--bs-paper-bg);
    inline-size: 0.75rem;
    inset-block-start: 0;
    inset-inline-start: -0.38rem;
    outline: 3px solid #6610f2 !important;
    border-radius: 50%;
}

.text-oranye-tua {
    color: #ff9800 !important;
}

.text-cyan-terang {
    color: #0dcaf0 !important;
}

.badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #0748a1; /* Bootstrap primary blue or match design */
    color: white;
    border-radius: 4px;
    font-size: 12px;
}
.badge-icon-white {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: white; /* Bootstrap primary blue or match design */
    color: #0748a1;
    border-radius: 4px;
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.fs-13 {
    font-size: 13px;
}
.btn-hero-blue {
    background: linear-gradient(90deg, #1B2C5A 0%, #3A5EC0 100%);
    border-radius: 6px;    
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    border: 1px solid #0748a1;
     /* Ensure border exists so color change on hover is visible */
}
.btn-hero-transparent {
    background: linear-gradient(90deg, #1b2c5a00 0%, #3a5ec000 100%);
    border-radius: 6px;
    border: 1px solid #fff;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}
.btn-hero-transparent:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.5s;
}
.btn-hero-transparent:hover {
    background: linear-gradient(90deg, #1B2C5A 0%, #3A5EC0 100%);
    border-color: #0748a1 !important;
}
.btn-hero-transparent:hover:before {
    left: 100%;
}
.btn-hero-blue:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.5s;
}
.btn-hero-blue:hover {
    background: linear-gradient(90deg, #1b2c5a00 0%, #3a5ec000 100%);
    border: 1px solid #fff;
}
.btn-hero-blue:hover:before {
    left: 100%;
}


.btn-utama {
    font-family: "SF Pro", sans-serif !important;
    color: #fff;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding: 17px 40px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
}

.border-section-2 {
    border-radius: 20px;
    border: 10px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #0748A1, #2366E3, #031A3B);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    overflow: hidden;
}
.floating-img {
    position: absolute;
    max-width: 90px;
    height: 100px;
    max-height: 100px;
    border: 4px solid #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 10;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.floating-img-left {
    top: 90px;
    left: -58px;
    transform: rotate(-10deg);
}

.floating-img-right {
    bottom: -20px;
    right: -20px;
    transform: rotate(10deg);
}

.about-img-wrapper {
    width: 90%;
    position: relative;
}
.feature-card { background: linear-gradient(180deg, #1e4fae 0%, #102d66 100%); border-radius: 10px; padding: 20px; display: flex; align-items: center; gap: 15px; color: #fff; height: 100%; transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-5px); } .feature-card .icon-box { background: #fff; width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #1e4fae; font-size: 24px; } .feature-card .text { font-size: 14px; line-height: 1.4; font-weight: 500; text-align: left; }
.service-card {
    padding: 30px;
    border-radius: 12px;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.service-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
    position: relative;
    z-index: 2;
}

.service-card p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.service-card-blue {
    background-color: #0748a1;
    color: #fff;
}

.service-card-blue h3 {
    color: #fff;
}
.service-card-blue:hover {
    background-color: #ffffff;
    color: #000000;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #0748a1;
}

.service-card-blue:hover h3,
.service-card-blue:hover p {
    color: #0748a1 !important; /* Use primary blue for text on hover instead of black for better brand consistency */
}

.service-card-white {
    background-color: #fff;
    color: #333;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.service-card-white:hover {
    background-color: #0748a1;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(7, 72, 161, 0.3);
    border-color: #ffffff;
}

.service-card-white:hover h3,
.service-card-white:hover p {
    color: #fff !important;
}

.service-card-white h3 {
    color: #000;
}

.sakura {
    position: absolute;
    top: -10%;
    pointer-events: none;
    z-index: 1;
}

@keyframes fall-sakura {
    0% {
        top: -10%;
        transform: translateX(0) rotate(0deg);
        opacity: 0.8;
    }
    100% {
        top: 110%;
        transform: translateX(20px) rotate(360deg);
        opacity: 0.2;
    }
}

/* Process Timeline Section */
#sakura-section {
    position: relative;
    overflow: hidden;
}

.col-lg-2-4 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.process-timeline-wrap {
    position: relative;
    padding: 50px 0;
}

.process-item {
    position: relative;
    z-index: 2;
    padding: 0 10px;
}

.process-icon-box {
    width: 100px;
    height: 100px;
    background: #fff;
    border: 2px solid #0748a1;
    border-radius: 12px;
    transform: rotate(45deg);
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 80px; /* Increased to 80px to clear the number */
    box-shadow: 6px 6px 0px #0748a1; /* Hard light-blue shadow for layered effect */
    transition: all 0.3s ease;
    position: relative;
}

/* Add top margin for even items (text top, icon bottom) to clear the top number */
.col-lg-2-4:nth-child(even) .process-icon-box {
    margin-top: 80px; 
    margin-bottom: 0;
}

.process-item:hover .process-icon-box {
    background: #0748a1;
    color: #fff;
    transform: rotate(45deg) scale(1.05); /* Enhance hover */
    box-shadow: 8px 8px 0px #dbe7f6; /* slightly larger/darker shadow on hover */
}

.process-icon {
    transform: rotate(-45deg);
    font-size: 48px;
    color: #0748a1;
}

.process-item:hover .process-icon {
    color: #fff;
}

.process-number {
    position: absolute;
    bottom: -45px; /* Increased distance */
    right: -45px;
    width: 30px;
    height: 30px;
    background: #0748a1;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    border: 3px solid #fff;
    transform: rotate(-45deg); /* Counter rotate container */
    z-index: 3;
}

/* Dashed stalk for bottom numbers (Odd) */
.process-number::before {
    content: '';
    position: absolute;
    top: -25px; /* Extend upwards to the box */
    left: 50%;
    width: 2px;
    height: 25px;
    background: repeating-linear-gradient(to bottom, #aab0b7 0, #aab0b7 4px, transparent 4px, transparent 8px); /* Gray dashed line */
    transform: translateX(-50%);
    z-index: -1;
}

/* Position number at top for even items (zigzag down) */
.col-lg-2-4:nth-child(even) .process-number {
    bottom: auto;
    right: auto;
    top: -45px; /* Increased distance */
    left: -45px;
}

/* Dashed stalk for top numbers (Even) - goes downwards */
.col-lg-2-4:nth-child(even) .process-number::before {
    top: auto;
    bottom: -25px;
}

/* Adjust number position relative to un-rotated context if needed, 
   but since it's inside rotated box, we place it at a corner. 
   Bottom-Right of rotated box is actual Bottom. 
*/

.process-item .title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #2b2b2b;
}

.process-item .desc {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

/* Connecting Line */
.timeline-connector {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: none; /* Hidden on mobile */
}

@media (min-width: 992px) {
    .timeline-connector {
        display: block;
    }
    
    /* Adjust for the alternating layout */
    /* All items are top aligned in logic, but we used mt-lg-5 on 2 and 4. */
    /* 
       Row 1: Icons at Y=0
       Row 2: Icons at Y=margin-top
    */
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .process-item {
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .col-lg-2-4 {
        width: 50%; /* 2 per row on tablet */
    }
}
@media (max-width: 575px) {
    .col-lg-2-4 {
        width: 100%; /* 1 per row on mobile */
    }
}

.bg-cta {
    background: linear-gradient(90deg, #0C5AC4 0%, #052E66 100%);
    color: #fff;
}

.border-cta {
    border-radius: 20px;
    border: 4px solid #fff;
    overflow: hidden;
}

/* CTA Absolute Decorations */
.cta-dec {
    position: absolute;
    z-index: -1; /* Lower than content (2) so it can go behind */
    max-width: 150px;
    height: auto;
    pointer-events: none;
}

.cta-dec-1 {
    top: 80px;
    right: 500px;
}

.cta-dec-2 {
    bottom: 48px;
    right: -30px;
}

/* Exam Section Custom Styles */
.exam-card-kizoku {
    background-color: #fff;
    border-radius: 20px !important;
    padding: 1.4rem;
    height: 100%;
    border: 1px solid #eee;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exam-card-kizoku:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

.exam-icon-box-diamond {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #3A5EC0 0%, #1B2C5A 100%);
    box-shadow: 0 8px 20px rgba(58, 94, 192, 0.2);
}

.exam-title-kizoku {
    font-weight: 400;
    font-size: 15px;
    margin-bottom: 0;
    display: inline-block;
}


.exam-carousel-wrap {
    padding: 20px;
    margin: -20px;
}

.exam-carousel {
    padding: 20px 10px;
}


/* Comparison Section Styles */
.comparison-section {
    position: relative;
    /* overflow: hidden; */
}

.vertical-divider {
    position: absolute;
    border-radius: 99999px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 100%;
    background-color: #707070;
    z-index: 1;
}

.main-circle-wrap {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.main-circle-content {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(180deg,#052E66 0%,#0C5AC4 100%);
    border: 1px solid #0C5AC4; /* Fallback/Simple border */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* Adding inner white glow simulation if needed, based on radial gradient hint */
    box-shadow: 0 0 30px rgba(12, 90, 196, 0.4), inset 0 0 20px rgba(255,255,255,0.1); 
    position: relative;
    z-index: 2;
    padding: 20px;
}

.main-circle-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin: 0;
}

.ring-decoration {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 4px solid transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.left-ring {
    border-right-color: #8daeff;
    border-top-color: #8daeff;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0.6;
}

.right-ring {
    border-left-color: #8daeff;
    border-bottom-color: #8daeff;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0.6;
}

.icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-size: 18px;
}

.icon-circle.check {
     background: linear-gradient(180deg, #0748A1 0%, #A1BAFF 100%);
}

.icon-circle.cross {
    background: linear-gradient(180deg, #0748A1 0%, #A1BAFF 100%);
}

.dot-connector {
    width: 20px;
    height: 20px;
    border-radius: 99999px;
    background: linear-gradient(180deg, #0748A1 0%, #A1BAFF 100%);
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.comparison-item p {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: #444;
}

@media (max-width: 991px) {
    .vertical-divider {
        display: none;
    }
    .comparison-list {
        margin-top: 20px;
        text-align: center !important;
    }
    .comparison-item {
        justify-content: center !important;
        text-align: center !important;
        flex-direction: column;
    }
    .comparison-item p {
        order: 2;
        margin-top: 10px;
    }
    .icon-circle {
        order: 1;
        margin: 0 !important;
    }
    .dot-connector {
        display: none;
    }
    .main-circle-wrap {
        margin: 0 auto;
    }
}


/* Curved Layout for Comparison Items */
@media (min-width: 992px) {
    /* Left Side (Cocok) */
    .col-lg-6:first-child .comparison-list .comparison-item {
        transition: transform 0.3s ease;
    }
    
    /* Top Item - Slide slightly right and down */
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(1) {
        margin-left: 20px;
    }

    /* Middle Item - Slide more right */
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(2) {
        margin-left: 50px;
    }
    
    /* Bottom Item - Slide slightly right and up */
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(3) {
        margin-left: 20px;
    }

    /* Right Side (Tidak Cocok) */
    .col-lg-6:last-child .comparison-list .comparison-item {
        transition: transform 0.3s ease;
    }

    /* Top Item */
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(1) {
        margin-right: 20px;
    }

    /* Middle Item */
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(2) {
        margin-right: 50px;
    }
    
    /* Bottom Item */
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(3) {
        margin-right: 20px;
    }

    /* Megar (Spread Out) */
    .comparison-item {
        margin-bottom: 2rem !important; /* Increased spacing */
    }
    
    .comparison-item:last-child {
        margin-bottom: 0 !important;
    }
}


/* Custom Offset for Top and Bottom Dots to create slanted effect */
@media (min-width: 992px) {
    /* General Item alignment - aligned to the top to allow dot offset */
    .comparison-item {
        align-items: flex-start !important; /* Changed from center to allow offsets */
        position: relative;
    }

    /* Icon Check/Cross Centering adjustment due to align-items change */
    .comparison-item .icon-circle {
        margin-top: -5px; /* Adjust vertical alignment if needed */
    }
    
    .comparison-item p {
        margin-top: -16px;
    }

    /* Left Side: Top Item Dot Offset */
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(1) .dot-connector {
        margin-top: 25px; /* Push dot down */
        margin-right: 1.5rem !important; /* Push dot left (away from icon) */
    }

    /* Left Side: Bottom Item Dot Offset */
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(3) .dot-connector {
        margin-top: -10px; /* Pull dot up if needed, or push down to match symmetry? Image shows lower dot */
        /* Actually image shows dot is lower left. Let's push it down too? 
           Wait, if it's slanted, top item: dot is lower-left of icon?
           Image shows: Dot is lower-left. Icon is higher-right.
        */
        margin-top: 25px;
        margin-right: 1.5rem !important;
    }
    
    /* Left Side: Middle Item - Keep centered or slight offset? */
    /* Usually middle is straight, but user said 'point di atas jadi miri', maybe referring to the top item specifically */

    /* Right Side: Top Item Dot Offset (Mirror) */
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(1) .dot-connector {
        margin-top: 25px;
        margin-left: 1.5rem !important; /* Push dot right */
    }
    
    /* Right Side: Bottom Item Dot Offset */
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(3) .dot-connector {
        margin-top: 25px;
        margin-left: 1.5rem !important;
    }
}


/* Fine-tuning Slant Angles */
@media (min-width: 992px) {
    /* LEFT SIDE (COCOK) */
    
    /* Top Item: Slant UP (Dot Low, Icon High) */
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(1) .dot-connector {
        margin-top: 30px; /* Push dot down */
    }
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(1) .icon-circle {
        margin-top: -17px; /* Icon stays up */
    }

    /* Middle Item: Flat */
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(2) .dot-connector {
        margin-top: 15px; /* Centered relative to icon approx */
    }
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(2) .icon-circle {
        margin-top: 0px;
    }

    /* Bottom Item: Slant DOWN (Dot High, Icon Low) */
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(3) .dot-connector {
        margin-top: 0px; /* Dot stays up */
    }
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(3) .icon-circle {
        margin-top: 30px; /* Push Icon down */
    }
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(3) p {
        padding-top: 30px; /* Push Text down to match icon */
    }


    /* RIGHT SIDE (TIDAK COCOK) - MIRROR */
    
    /* Top Item: Slant UP (Icon High, Dot Low) */
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(1) .dot-connector {
        margin-top: 30px; /* Push dot down */
    }
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(1) .icon-circle {
         margin-top: -17px;
    }

    /* Middle Item: Flat */
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(2) .dot-connector {
        margin-top: 15px;
    }

    /* Bottom Item: Slant DOWN (Icon Low, Dot High) */
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(3) .dot-connector {
         margin-top: 0px;
    }
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(3) .icon-circle {
        margin-top: 30px;
    }
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(3) p {
        padding-top: 30px;
    }
}


/* Final Adjustment for Alignment and Symmetry */
@media (min-width: 992px) {

    /* --- MIDDLE ITEM ALIGNMENT --- */
    /* Ensure Icon and Text are perfectly centered vertically first */
    .comparison-item:nth-child(2) {
         align-items: center !important; /* Reset to center for middle item */
    }
    
    /* Remove any top margins from middle item elements to ensure pure centering */
    .comparison-item:nth-child(2) .icon-circle, 
    .comparison-item:nth-child(2) .dot-connector,
    .comparison-item:nth-child(2) p {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    /* --- LEFT SIDE (COCOK) SYMETRY --- */
    
    /* TOP ITEM: Dot (Low) -> Icon (High) : Slant Up */
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(1) {
        align-items: flex-start !important; 
    }
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(1) .dot-connector {
        margin-top: 35px !important; /* Dot starts lower */
    }
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(1) .icon-circle {
        margin-top: 0px !important; /* Icon stays high */
    }

    /* BOTTOM ITEM: Dot (High) -> Icon (Low) : Slant Down */
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(3) {
        align-items: flex-start !important; 
    }
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(3) .dot-connector {
        margin-top: 4px !important; /* Dot starts higher */
    }
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(3) .icon-circle {
        margin-top: 12px !important; /* Icon sits lower */
    }
    .col-lg-6:first-child .comparison-list .comparison-item:nth-child(3) p {
        padding-top: 12px !important; /* Text follows icon */
        margin-top: 0 !important;
    }


    /* --- RIGHT SIDE (TIDAK COCOK) SYMETRY --- */

    /* TOP ITEM: Icon (High) <- Dot (Low) */
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(1) {
        align-items: flex-start !important; 
    }
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(1) .dot-connector {
        margin-top: 35px !important; /* Dot starts lower */
    }
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(1) .icon-circle {
        margin-top: 0px !important; 
    }
    
    /* BOTTOM ITEM: Icon (Low) <- Dot (High) */
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(3) {
        align-items: flex-start !important; 
    }
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(3) .dot-connector {
        margin-top: 5px !important; /* Dot starts higher */
    }
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(3) .icon-circle {
        margin-top: 12px !important; /* Icon sits lower */
    }
    .col-lg-6:last-child .comparison-list .comparison-item:nth-child(3) p {
        padding-top: 12px !important;
        margin-top: 0 !important;
    }
}