.elementor-82 .elementor-element.elementor-element-929acd4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-82 .elementor-element.elementor-element-966229d{width:100%;max-width:100%;}.elementor-82 .elementor-element.elementor-element-2a21f00{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-82 .elementor-element.elementor-element-f1f2f4b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-82 .elementor-element.elementor-element-0311577{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-82 .elementor-element.elementor-element-85ad472{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-82 .elementor-element.elementor-element-962b81f{--display:flex;--overlay-opacity:0.5;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-82 .elementor-element.elementor-element-962b81f::before, .elementor-82 .elementor-element.elementor-element-962b81f > .elementor-background-video-container::before, .elementor-82 .elementor-element.elementor-element-962b81f > .e-con-inner > .elementor-background-video-container::before, .elementor-82 .elementor-element.elementor-element-962b81f > .elementor-background-slideshow::before, .elementor-82 .elementor-element.elementor-element-962b81f > .e-con-inner > .elementor-background-slideshow::before, .elementor-82 .elementor-element.elementor-element-962b81f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://ontaphocsinh.site/wp-content/uploads/2025/12/Rectangle-1.png");--background-overlay:'';background-repeat:no-repeat;background-size:cover;}.elementor-82 .elementor-element.elementor-element-9612ed8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-82 .elementor-element.elementor-element-841fa8f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-82 .elementor-element.elementor-element-8d08682{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-82 .elementor-element.elementor-element-b004e7c{--display:flex;--overlay-opacity:0.5;}.elementor-82 .elementor-element.elementor-element-b004e7c::before, .elementor-82 .elementor-element.elementor-element-b004e7c > .elementor-background-video-container::before, .elementor-82 .elementor-element.elementor-element-b004e7c > .e-con-inner > .elementor-background-video-container::before, .elementor-82 .elementor-element.elementor-element-b004e7c > .elementor-background-slideshow::before, .elementor-82 .elementor-element.elementor-element-b004e7c > .e-con-inner > .elementor-background-slideshow::before, .elementor-82 .elementor-element.elementor-element-b004e7c > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://ontaphocsinh.site/wp-content/uploads/2025/12/Screenshot-2025-12-29-135612.png");--background-overlay:'';background-size:cover;}.elementor-82 .elementor-element.elementor-element-929cfb0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-82 .elementor-element.elementor-element-127a747{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-82 .elementor-element.elementor-element-fe2d769{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-82 .elementor-element.elementor-element-929acd4{--content-width:100%;}.elementor-82 .elementor-element.elementor-element-85ad472{--content-width:1200px;}}/* Start custom CSS for html, class: .elementor-element-966229d *//* MindPost Slider - Elementor Compatible Version V3 Final */
/* UI giống hệt bản gốc, chỉ thêm prefix để tránh xung đột */
/* Đã tăng specificity cho h1 và p để override Elementor */

/* Hero Slider - Scoped with specific prefix */
body .mp-hero-slider,
.elementor-widget-wrap .mp-hero-slider,
.elementor-section .mp-hero-slider,
.elementor-widget-wrap .elementor-widget .mp-hero-slider,
.elementor-section .elementor-container .mp-hero-slider {
    position: relative !important;
    height: 600px !important;
    overflow: hidden !important;
    background: #000 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.mp-slider-wrapper {
    height: 100% !important;
    position: relative !important;
    width: 100% !important;
}

.mp-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0 !important;
    transition: opacity 1s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
}

.mp-slide.mp-active {
    opacity: 1 !important;
    z-index: 2 !important;
}

.mp-slide::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.mp-slide-content {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    color: #fff !important;
    max-width: 800px !important;
    padding: 20px !important;
    transform: translateY(30px) !important;
    opacity: 0 !important;
    transition: transform 0.8s ease, opacity 0.8s ease !important;
}

.mp-slide.mp-active .mp-slide-content {
    transform: translateY(0) !important;
    opacity: 1 !important;
    transition-delay: 0.5s !important;
}

/* H1 - Tăng specificity để override Elementor */
body .mp-hero-slider .mp-slide-content h1,
.elementor-widget-wrap .mp-hero-slider .mp-slide-content h1,
.elementor-section .mp-hero-slider .mp-slide-content h1,
.elementor-widget-wrap .elementor-widget .mp-hero-slider .mp-slide-content h1,
.elementor-section .elementor-container .mp-hero-slider .mp-slide-content h1,
.mp-hero-slider .mp-slide-content h1 {
    font-size: 3.5rem !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    word-wrap: break-word !important;
}

/* P - Tăng specificity để override Elementor */
body .mp-hero-slider .mp-slide-content p,
.elementor-widget-wrap .mp-hero-slider .mp-slide-content p,
.elementor-section .mp-hero-slider .mp-slide-content p,
.elementor-widget-wrap .elementor-widget .mp-hero-slider .mp-slide-content p,
.elementor-section .elementor-container .mp-hero-slider .mp-slide-content p,
.mp-hero-slider .mp-slide-content p {
    font-size: 1.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.6 !important;
    letter-spacing: normal !important;
    word-wrap: break-word !important;
}

/* Slider Buttons - Giống hệt bản gốc */
.mp-slider-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: #fff !important;
    padding: 15px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: background 0.3s !important;
    font-size: 1.5rem !important;
}

.mp-slider-btn:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

.mp-slider-btn.mp-prev {
    left: 20px !important;
}

.mp-slider-btn.mp-next {
    right: 20px !important;
}

/* Slider Dots - Giống hệt bản gốc */
.mp-slider-dots {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 10 !important;
}

.mp-dot {
    width: 12px !important;
    height: 12px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    border: none !important;
}

.mp-dot:hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

.mp-dot.mp-active {
    background: #fff !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .mp-hero-slider {
        height: 400px !important;
    }

    body .mp-hero-slider .mp-slide-content h1,
    .elementor-widget-wrap .mp-hero-slider .mp-slide-content h1,
    .elementor-section .mp-hero-slider .mp-slide-content h1,
    .mp-hero-slider .mp-slide-content h1 {
        font-size: 2rem !important;
    }

    body .mp-hero-slider .mp-slide-content p,
    .elementor-widget-wrap .mp-hero-slider .mp-slide-content p,
    .elementor-section .mp-hero-slider .mp-slide-content p,
    .mp-hero-slider .mp-slide-content p {
        font-size: 1rem !important;
    }

    .mp-slider-btn {
        padding: 10px !important;
        font-size: 1.2rem !important;
    }

    .mp-slider-btn.mp-prev {
        left: 10px !important;
    }

    .mp-slider-btn.mp-next {
        right: 10px !important;
    }
}

@media (max-width: 480px) {
    .mp-hero-slider {
        height: 300px !important;
    }

    body .mp-hero-slider .mp-slide-content h1,
    .elementor-widget-wrap .mp-hero-slider .mp-slide-content h1,
    .elementor-section .mp-hero-slider .mp-slide-content h1,
    .mp-hero-slider .mp-slide-content h1 {
        font-size: 1.5rem !important;
    }

    body .mp-hero-slider .mp-slide-content p,
    .elementor-widget-wrap .mp-hero-slider .mp-slide-content p,
    .elementor-section .mp-hero-slider .mp-slide-content p,
    .mp-hero-slider .mp-slide-content p {
        font-size: 0.9rem !important;
    }
}

/* Important: Force styles to override Elementor */
.mp-hero-slider * {
    box-sizing: border-box !important;
}

/* Ensure proper stacking context */
.mp-hero-slider .mp-slide {
    will-change: opacity !important;
}

/* Prevent Elementor from affecting slider */
.elementor-widget-wrap .mp-hero-slider {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix for Elementor section padding */
.elementor-section .elementor-container .mp-hero-slider {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Fix for Elementor's global styles - Override all Elementor typography */
body .mp-hero-slider h1,
body .mp-hero-slider p,
.elementor-widget-wrap .mp-hero-slider h1,
.elementor-widget-wrap .mp-hero-slider p,
.elementor-section .mp-hero-slider h1,
.elementor-section .mp-hero-slider p {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    color: #fff !important;
    text-align: center !important;
}

body .mp-hero-slider h1,
.elementor-widget-wrap .mp-hero-slider h1,
.elementor-section .mp-hero-slider h1 {
    margin-bottom: 20px !important;
}

/* Override Elementor's elementor-heading-title */
body .mp-hero-slider .elementor-heading-title,
.elementor-widget-wrap .mp-hero-slider .elementor-heading-title,
.elementor-section .mp-hero-slider .elementor-heading-title {
    font-size: 3.5rem !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    text-align: center !important;
}

/* Override Elementor's elementor-text-editor */
body .mp-hero-slider .elementor-text-editor,
.elementor-widget-wrap .mp-hero-slider .elementor-text-editor,
.elementor-section .mp-hero-slider .elementor-text-editor {
    font-size: 1.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.6 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0fa3231 *//* --- Container & Layout --- */
.mp-unique-section-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.mp-unique-container {
    width: 100%;
}
/* --- Header Section --- */
.mp-unique-head-block {
    border: 3px solid #ddd;
    border-radius: 50px;
    padding: 20px 40px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    margin-bottom: 40px;
    background: #fff;
    flex-wrap: wrap !important;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.mp-unique-head-block h2 {
    font-size: 2rem !important;
    color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    width: auto !important;
    line-height: 1.2 !important;
}
.mp-unique-head-block p {
    margin: 0 !important;
    padding: 0 !important;
    color: #666 !important;
    line-height: 1.6 !important;
    font-size: 0.95rem !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 800px;
}
/* --- Grid Layout --- */
.mp-unique-grid-display {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
/* --- Service Card Styles --- */
.mp-unique-card-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Card Header */
.mp-unique-item-top {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding-top: 0;
    text-align: left;
}
.mp-unique-num-badge {
    position: relative;
    top: auto;
    left: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-family: serif;
    font-size: 24px;
    flex-shrink: 0;
}
.mp-unique-title-group {
    text-align: left;
    margin-top: 0;
}
.mp-unique-title-group .mp-unique-sub {
    font-size: 0.85rem;
    color: #444;
    display: block;
    margin-bottom: 4px;
    line-height: 1.2;
}
.mp-unique-title-group h3 {
    font-size: 1.25rem;
    margin: 0;
    color: #333;
    font-weight: bold;
    line-height: 1.2;
}
/* Card Image Area */
.mp-unique-img-box {
    background: #fff;
    border-radius: 20px;
    padding: 5px;
    border: 4px solid transparent;
    margin-bottom: 15px;
    height: 275px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mp-unique-placeholder {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8898aa;
}
/* Card Body */
.mp-unique-desc-text {
    flex-grow: 1;
    margin-bottom: 20px;
}
.mp-unique-desc-text p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.8;
    margin: 0;
    text-align: justify;
}
/* Card Footer */
.mp-unique-action-row {
    text-align: center;
}
.mp-unique-link-btn {
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: opacity 0.3s;
    color: #333;
}
.mp-unique-link-btn:hover {
    opacity: 0.8;
}
/* --- CSS Variables for Themes --- */
.mp-theme-blue {
    --theme-color-light: #cceeff;
    --theme-color-main: #b3e5fc;
    --theme-color-dark: #81d4fa;
    --theme-btn-bg: #b3e5fc;
}
.mp-theme-green {
    --theme-color-light: #e6f7d4;
    --theme-color-main: #dcedc8;
    --theme-color-dark: #c5e1a5;
    --theme-btn-bg: #dcedc8;
}
.mp-theme-yellow {
    --theme-color-light: #fff9c4;
    --theme-color-main: #fff59d;
    --theme-color-dark: #fff176;
    --theme-btn-bg: #fff59d;
}
.mp-theme-pink {
    --theme-color-light: #ffcdd2;
    --theme-color-light-bg: #ffebee;
    --theme-color-main: #ffcdd2;
    --theme-color-dark: #ffcdd2;
    --theme-btn-bg: #ffcdd2;
}
.mp-theme-blue {
    --number-bg: #bdeff9;
    --border-color: #bdeff9;
    --btn-bg: #bdeff9;
}
.mp-theme-green {
    --number-bg: #d9f2ce;
    --border-color: #d9f2ce;
    --btn-bg: #d9f2ce;
}
.mp-theme-yellow {
    --number-bg: #fff5ca;
    --border-color: #fff5ca;
    --btn-bg: #fff5ca;
}
.mp-theme-pink {
    --number-bg: #ffd6d6;
    --border-color: #ffd6d6;
    --btn-bg: #ffd6d6;
}
/* Apply Theme Variables */
.mp-unique-card-item .mp-unique-num-badge {
    background-color: var(--number-bg);
    color: #555;
}
.mp-unique-card-item .mp-unique-img-box {
    border-color: var(--border-color);
}
.mp-unique-card-item .mp-unique-link-btn {
    background-color: var(--btn-bg);
    color: #444;
}
/* --- Responsive --- */
@media (max-width: 991px) {
    .mp-unique-grid-display {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .mp-unique-grid-display {
        grid-template-columns: 1fr;
    }
    .mp-unique-head-block {
        flex-direction: column;
        text-align: center;
        border-radius: 30px;
    }
}
/* --- Animations (User Requested) --- */
.mp-unique-anim-trigger {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 0.8s ease, transform 0.8s ease !important;
    will-change: opacity, transform;
}
.mp-unique-anim-trigger.mp-unique-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.mp-delay-1 {
    transition-delay: 0.1s !important;
}
.mp-delay-2 {
    transition-delay: 0.2s !important;
}
.mp-delay-3 {
    transition-delay: 0.3s !important;
}
.mp-delay-4 {
    transition-delay: 0.4s !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5f1bd30 */.mp-unique-databank-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    position: relative;
    background-color: #fff;
}
.mp-unique-databank-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Align image and text vertically */
    justify-content: space-between;
    gap: 40px;
}
/* Left Column: Image */
.mp-unique-databank-image {
    flex: 1 1 400px;
    /* Grow, Shrink, Basis */
    max-width: 100%;
}
.mp-unique-databank-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}
/* Right Column: Content */
.mp-unique-databank-content {
    flex: 1 1 500px;
}
/* Header Area */
.mp-unique-db-header {
    background-color: #d1f6fa;
    /* Light cyan background */
    border-radius: 50px;
    /* Pill shape */
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    text-align: left;
}
.mp-db-num-circle {
    background-color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #888;
    flex-shrink: 0;
}
.mp-db-title-text h2 {
    margin: 0;
    font-size: 1.6rem;
    color: #333;
    line-height: 1.2;
}
.mp-db-subtitle {
    display: block;
    font-size: 0.95rem;
    color: #555;
    margin-top: 5px;
}
/* Red Badge */
.mp-unique-db-badge-row {
    text-align: center;
    margin-bottom: 30px;
}
.mp-unique-red-badge {
    display: inline-block;
    background-color: #ff6b6b;
    /* Red/Pink color */
    color: #fff;
    padding: 8px 30px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1rem;
}
/* Text Items */
.mp-unique-db-text-list {
    margin-bottom: 30px;
}
.mp-unique-db-item {
    border-bottom: 1px solid #a3d5e0;
    /* Light blue border */
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.mp-unique-db-item:last-child {
    border-bottom: 1px solid #a3d5e0;
    /* Last item also has border in design */
}
.mp-unique-db-item h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
}
.mp-unique-db-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    padding-left: 10px;
    /* Slight indent */
}
/* Button */
.mp-unique-db-btn-row {
    text-align: center;
}
.mp-unique-db-btn {
    display: inline-block;
    background-color: #d1f6fa;
    /* Light cyan match header */
    color: #444;
    padding: 12px 60px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
.mp-unique-db-btn:hover {
    background-color: #b3eef5;
}
/* --- Responsive Stack --- */
@media (max-width: 768px) {
    .mp-unique-databank-container {
        flex-direction: column;
    }
    .mp-unique-databank-image,
    .mp-unique-databank-content {
        flex: 1 1 100%;
        width: 100%;
    }
    /* On mobile, maybe image on top? Default flow does this. */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8013de1 */.mp-unique-bucketlist-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    /* Font family removed as requested */
}
.mp-unique-bucketlist-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
/* Right Column: Image */
.mp-unique-bucketlist-image {
    flex: 1 1 400px;
    max-width: 100%;
}
.mp-unique-bucketlist-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}
/* Left Column: Content */
.mp-unique-bucketlist-content {
    flex: 1 1 500px;
}
/* Header Area (Green Theme) */
.mp-unique-bl-header {
    background-color: #dcedc8;
    /* Light Green background */
    border-radius: 50px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    text-align: left;
}
.mp-bl-num-circle {
    background-color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #888;
    flex-shrink: 0;
}
.mp-bl-title-text h2 {
    margin: 0;
    font-size: 1.6rem;
    color: #333;
    line-height: 1.2;
}
.mp-bl-subtitle {
    display: block;
    font-size: 0.95rem;
    color: #555;
    margin-top: 5px;
}
/* Red Badge (Reuse style or redefine if isolated) */
.mp-unique-bl-badge-row {
    text-align: center;
    margin-bottom: 30px;
}
.mp-unique-red-badge {
    display: inline-block;
    background-color: #ff6b6b;
    color: #fff;
    padding: 8px 30px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1rem;
}
/* Text Items */
.mp-unique-bl-text-list {
    margin-bottom: 30px;
}
.mp-unique-bl-item {
    border-bottom: 1px solid #c5e1a5;
    /* Light green border */
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.mp-unique-bl-item:last-child {
    border-bottom: 1px solid #c5e1a5;
}
.mp-unique-bl-item h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
}
.mp-unique-bl-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    padding-left: 10px;
}
/* Button (Green Theme) */
.mp-unique-bl-btn-row {
    text-align: center;
}
.mp-unique-bl-btn {
    display: inline-block;
    background-color: #dcedc8;
    /* Light Green */
    color: #444;
    padding: 12px 60px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
.mp-unique-bl-btn:hover {
    background-color: #c5e1a5;
}
/* --- Responsive Stack --- */
@media (max-width: 768px) {
    .mp-unique-bucketlist-container {
        flex-direction: column-reverse;
        /* Put image on top of content? Or Content then Image? Default column is top-to-bottom */
        /* If HTML is Content -> Image, then column means Content Top, Image Bottom.
           If we want Image Top, we need flex-direction: column-reverse */
    }
    .mp-unique-bucketlist-image,
    .mp-unique-bucketlist-content {
        flex: 1 1 100%;
        width: 100%;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d60ace1 */.mp-unique-flow-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    position: relative;
}
/* Container */
.mp-unique-flow-container {
    width: 100%;
}
/* --- Top Header (Specific Pill Design) --- */
.mp-unique-head-block {
    border: 3px solid #ddd;
    /* Thicker border as requested */
    border-radius: 60px;
    padding: 30px 50px;
    display: flex !important;
    align-items: center !important;
    /* Vertically center */
    justify-content: flex-start !important;
    gap: 0 !important;
    /* Reset gap, control layout via flex */
    margin-bottom: 50px;
    background: #fff;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
}
.mp-head-title-wrap {
    flex: 0 0 auto;
    margin-right: 40px;
}
.mp-head-title {
    margin: 0;
    font-size: 1.8rem;
    color: #2f3640;
    white-space: nowrap;
    padding-bottom: 5px;
    display: inline-block;
    font-weight: bold;
}
.mp-head-desc {
    flex: 1;
    margin: 0;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}
/* --- Badges --- */
.mp-unique-flow-badge-row {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}
.mp-unique-red-pill-badge,
.mp-unique-blue-pill-badge {
    display: inline-block;
    color: #fff;
    padding: 10px 40px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.mp-unique-red-pill-badge {
    background-color: #ff6b6b;
}
.mp-unique-blue-pill-badge {
    background-color: #4facfe;
}
/* --- Steps Row (Phase 1) --- */
.mp-unique-flow-steps-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    margin-bottom: 50px;
    /* Increased bottom spacing */
    position: relative;
}
.mp-unique-flow-step-box {
    background: #fff;
    border: 3px dashed #ccc;
    /* Thicker dashed border */
    border-radius: 10px;
    padding: 25px 15px;
    text-align: center;
    flex: 1;
    position: relative;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
}
/* Specific Border Colors - Vibrant */
.mp-step-blue {
    border-color: #2e86de;
}
.mp-step-green {
    border-color: #7bed9f;
}
.mp-step-pink {
    border-color: #ff6b81;
}
.mp-step-black {
    border-color: #2f3542;
}
.mp-unique-flow-step-box h3 {
    margin: 0 0 20px 0;
    font-size: 1.1rem;
    color: #333;
    font-weight: bold;
}
.mp-step-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}
/* Icon Circle Colors matching border */
.mp-step-blue .mp-step-icon-circle {
    border-color: #2e86de;
    color: #333;
}
.mp-step-green .mp-step-icon-circle {
    border-color: #7bed9f;
    color: #333;
}
.mp-step-pink .mp-step-icon-circle {
    border-color: #ff6b81;
    color: #333;
}
.mp-step-black .mp-step-icon-circle {
    border-color: #2f3542;
    color: #333;
}
.mp-unique-flow-step-box p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    text-align: left;
    margin: 0;
    flex-grow: 1;
}
/* Solid Triangle Arrows */
.mp-unique-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    position: relative;
}
/* Large Solid Triangle Arrow Base */
.mp-unique-flow-arrow::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    /* Size 25px */
    border-bottom: 25px solid transparent;
    border-left: 35px solid #ccc;
    /* Default color, length 35px */
}
/* Explicit Arrow Colors */
.mp-arrow-blue::before {
    border-left-color: #2e86de;
}
/* Blue */
.mp-arrow-green::before {
    border-left-color: #7bed9f;
}
/* Green */
.mp-arrow-pink::before {
    border-left-color: #ff6b81;
}
/* Pink */
/* --- Orange Button Phase --- */
.mp-unique-flow-btn-row {
    text-align: center;
    margin-bottom: 40px;
}
.mp-unique-orange-btn {
    display: inline-block;
    background: linear-gradient(90deg, #ff6b6b, #ffbe76);
    color: #fff;
    padding: 12px 60px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* --- Divider --- */
.mp-unique-flow-divider {
    height: 2px;
    background-color: #333;
    width: 80%;
    margin: 0 auto 50px auto;
}
/* --- Pay Row (Phase 2) --- */
.mp-unique-flow-pay-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}
.mp-unique-flow-pay-box {
    background: #fff;
    border: 3px dashed #ccc;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    flex: 0 1 350px;
}
.mp-pay-orange {
    border-color: #ffa502;
}
.mp-pay-purple {
    border-color: #a29bfe;
}
.mp-pay-orange .mp-step-icon-circle {
    border-color: #ffa502;
    color: #333;
}
.mp-pay-purple .mp-step-icon-circle {
    border-color: #a29bfe;
    color: #333;
}
.mp-unique-flow-pay-box h3 {
    margin-bottom: 20px;
}
/* --- Responsive Stack --- */
@media (max-width: 900px) {
    .mp-unique-flow-steps-row {
        flex-wrap: wrap;
        gap: 20px;
    }
    .mp-unique-flow-step-box {
        flex: 1 1 45%;
        margin: 0;
    }
    .mp-unique-flow-arrow {
        display: none;
        /* Hide arrows on mobile wrap */
    }
    .mp-unique-head-block {
        flex-direction: column;
        text-align: center;
    }
}
@media (max-width: 600px) {
    .mp-unique-flow-step-box {
        flex: 1 1 100%;
    }
    .mp-unique-flow-pay-row {
        flex-direction: column;
        align-items: center;
    }
    .mp-unique-flow-pay-box {
        width: 100%;
        max-width: 100%;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c8644fe */.mp-unique-timepost-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    position: relative;
    margin-bottom: 60px;
    background-color: #fff;
}
.mp-unique-timepost-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
/* Left Column: Image */
.mp-unique-timepost-image {
    flex: 1 1 400px;
    max-width: 100%;
}
.mp-unique-timepost-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}
/* Right Column: Content */
.mp-unique-timepost-content {
    flex: 1 1 500px;
}
/* Header Area (Yellow Theme) */
.mp-unique-tp-header {
    background-color: #fff4d0;
    /* Light yellow background */
    border-radius: 50px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    text-align: left;
}
.mp-tp-num-circle {
    background-color: #fff;
    width: 50px;
    /* Match Databank dim */
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #888;
    flex-shrink: 0;
}
.mp-tp-title-text h2 {
    margin: 0;
    font-size: 1.6rem;
    /* Match Databank font size */
    color: #333;
    line-height: 1.2;
}
.mp-tp-subtitle {
    display: block;
    font-size: 0.95rem;
    color: #555;
    margin-top: 5px;
}
/* Badges */
.mp-unique-tp-badge-row {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    /* Databank uses inline-block but here flex helps centering two badges */
    justify-content: center;
    gap: 15px;
}
.mp-unique-red-badge,
.mp-unique-blue-badge {
    display: inline-block;
    color: #fff;
    padding: 8px 30px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1rem;
}
.mp-unique-red-badge {
    background-color: #ff6b6b;
}
.mp-unique-blue-badge {
    background-color: #1e88e5;
}
/* Text Items */
.mp-unique-tp-text-list {
    margin-bottom: 30px;
}
.mp-unique-tp-item {
    border-bottom: 1px solid #fff4d0;
    /* Yellow accent border to match theme */
    padding-bottom: 15px;
    margin-bottom: 20px;
}
/* Making the border slightly darker for visibility against white, similar to Databank's blue border */
.mp-unique-tp-item {
    border-bottom: 1px solid #ffeaa7;
}
.mp-unique-tp-item:last-child {
    border-bottom: 1px solid #ffeaa7;
}
.mp-unique-tp-item h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
}
.mp-blue-accent {
    color: #1e88e5 !important;
}
.mp-unique-tp-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    padding-left: 10px;
}
/* Button */
.mp-unique-tp-btn-row {
    text-align: center;
}
.mp-unique-tp-btn {
    display: inline-block;
    background-color: #fff4d0;
    /* Light yellow match header */
    color: #554a36;
    padding: 12px 60px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
.mp-unique-tp-btn:hover {
    background-color: #ffe082;
}
/* Responsive */
@media (max-width: 768px) {
    .mp-unique-timepost-container {
        flex-direction: column;
    }
    .mp-unique-timepost-image,
    .mp-unique-timepost-content {
        flex: 1 1 100%;
        width: 100%;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-49d01af */.mp-unique-consulting-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    position: relative;
    margin-bottom: 60px;
    background-color: #fff;
    /* Clean style, no shadow/font-family per user pref */
}
.mp-unique-consulting-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
/* Content Left, Image Right structure */
/* Left Column: Content */
.mp-unique-consulting-content {
    flex: 1 1 500px;
}
/* Right Column: Image */
.mp-unique-consulting-image {
    flex: 1 1 400px;
    max-width: 100%;
}
.mp-unique-consulting-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}
/* Header Area (Pink Theme) */
.mp-unique-cs-header {
    background-color: #ffe0e0;
    /* Pale Pink background */
    border-radius: 50px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    text-align: left;
}
.mp-cs-num-circle {
    background-color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #888;
    flex-shrink: 0;
}
.mp-cs-title-text h2 {
    margin: 0;
    font-size: 1.6rem;
    color: #333;
    line-height: 1.2;
}
.mp-cs-subtitle {
    display: block;
    font-size: 0.95rem;
    color: #555;
    margin-top: 5px;
}
/* Badges */
.mp-unique-cs-badge-row {
    text-align: center;
    margin-bottom: 30px;
}
.mp-unique-blue-badge {
    display: inline-block;
    background-color: #1e88e5;
    /* Strong blue */
    color: #fff;
    padding: 8px 30px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1rem;
}
/* Text Items */
.mp-unique-cs-text-list {
    margin-bottom: 30px;
}
.mp-unique-cs-item {
    border-bottom: 1px solid #ffe0e0;
    /* Pink accent border */
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.mp-unique-cs-item:last-child {
    border-bottom: 1px solid #ffe0e0;
}
.mp-unique-cs-item h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
}
.mp-unique-cs-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    padding-left: 10px;
}
/* Button (Pink) */
.mp-unique-cs-btn-row {
    text-align: center;
}
.mp-unique-cs-btn {
    display: inline-block;
    background-color: #ffe0e0;
    /* Pink match header */
    color: #444;
    /* Or darker gray/black */
    padding: 12px 60px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
.mp-unique-cs-btn:hover {
    background-color: #ffcccc;
}
/* Responsive */
@media (max-width: 768px) {
    .mp-unique-consulting-container {
        flex-direction: column-reverse;
        /* Stack content then image, or image top? */
        /* Usually Image Top is standard for mobile, but flex-direction reverse puts Content Top if HTML is Content First.
           Wait, HTML is Content First (Left), Image Second (Right).
           Default column puts Content Top, Image Bottom.
           Design often prefers Image Top. Let's check user pref or match others.
           Databank (Image Left) -> Mobile Image Top.
           Here Content Left -> Mobile Content Top? Or reverse to put Image Top?
           For consistency, Image usually acts as visual anchor. Let's try matching standard flow first (Content Top).
        */
        flex-direction: column;
    }
    .mp-unique-consulting-image,
    .mp-unique-consulting-content {
        flex: 1 1 100%;
        width: 100%;
    }
    /* If we want Image Top on mobile: */
    .mp-unique-consulting-container {
        flex-direction: column-reverse;
    }
}
/* Animations */
.mp-unique-anim-trigger {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 0.8s ease, transform 0.8s ease !important;
    will-change: opacity, transform;
}
.mp-unique-anim-trigger.mp-unique-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-992d69e */.mp-unique-usage-flow-section { max-width: 1200px; margin: 40px auto; padding: 0 20px; background-color: transparent; box-sizing: border-box; } .mp-unique-usage-flow-container { width: 100%; } /* Header */ .mp-unique-usage-header { background-color: #fff; /* Explicit White */ border: 1px solid #ddd; border-radius: 60px; padding: 25px 50px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; gap: 40px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); } .mp-usage-head-title-wrap { flex: 0 0 auto; } .mp-usage-head-title-wrap h2 { margin: 0; font-size: 1.8rem; color: #333; font-weight: bold; display: inline-block; } .mp-usage-head-desc { flex: 1; font-size: 0.95rem; color: #555; line-height: 1.6; } /* 5 Columns Grid */ .mp-unique-usage-grid { display: flex; justify-content: space-between; align-items: stretch; /* Cards same height */ gap: 15px; /* Manageable gap */ width: 100%; margin-bottom: 60px; } /* Column Item */ .mp-usage-col { width: 19%; /* 5 * 19 = 95%, leaving 5% for gaps */ display: flex; flex-direction: column; align-items: center; } /* Top Visual (Image) */ .mp-usage-visual { width: 100%; display: flex; justify-content: center; margin-bottom: 15px; } .mp-usage-visual img { max-width: 100%; height: auto; display: block; /* User will insert their triangle images here */ } /* Bottom Card (Description) */ .mp-usage-card { background-color: #fff; border-radius: 15px; padding: 20px 15px; width: 100%; flex: 1; /* Fills remaining height */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Soft shadow */ box-sizing: border-box; /* Crucial for padding */ display: flex; flex-direction: column; } .mp-usage-card h3 { font-size: 1.1rem; color: #333; margin: 0 0 15px 0; font-weight: bold; line-height: 1.4; text-align: center; min-height: 3.5em; /* Force alignment of text start */ display: flex; align-items: center; justify-content: center; } .mp-usage-card p { font-size: 0.85rem; color: #666; line-height: 1.6; margin: 0; text-align: left; flex: 1; } /* Button */ .mp-unique-usage-btn-row { text-align: center; margin-bottom: 40px; } .mp-unique-usage-btn { display: inline-block; background: linear-gradient(90deg, #ff6b6b, #ff9f43); color: #fff; padding: 15px 80px; border-radius: 30px; text-decoration: none; font-weight: bold; font-size: 1.2rem; transition: transform 0.2s, opacity 0.2s; } .mp-unique-usage-btn:hover { transform: translateY(-2px); opacity: 0.9; } /* Animations */ .mp-delay-5 { transition-delay: 0.5s; } /* Responsive */ @media (max-width: 900px) { .mp-unique-usage-header { flex-direction: column; text-align: center; border-radius: 20px; padding: 20px; gap: 15px; } .mp-unique-usage-grid { flex-direction: column; align-items: center; gap: 40px; } .mp-usage-col { width: 100%; max-width: 500px; } .mp-usage-card h3 { min-height: auto; } }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-635761f */.mp-unique-message-section {
    max-width: 1000px;
    /* Slightly narrower for text readability? Image suggests standard width */
    margin: 60px auto;
    padding: 0 20px;
    background-color: transparent;
    /* Font family inherited */
}
.mp-unique-message-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}
/* Left Column: Logo & Title */
.mp-msg-left-col {
    flex: 0 0 250px;
    text-align: right;
    /* Default right alignment for this column often looks good, but check image. Image: Title centered to logo? Or Left aligned block? Looks like Left aligned block, but positioned left of text. */
    text-align: center;
    /* Based on image, Logo and Title are centered relative to each other */
}
.mp-msg-logo-wrap {
    margin-bottom: 20px;
}
.mp-msg-logo-wrap img {
    max-width: 100%;
    height: auto;
}
.mp-msg-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    text-align: center;
    /* Matching image */
}
/* Right Column: Text */
.mp-msg-right-col {
    flex: 1;
    min-width: 300px;
}
.mp-msg-right-col p {
    font-size: 0.95rem;
    /* Standard readable size */
    color: #333;
    /* Dark gray/black */
    line-height: 2.0;
    /* Loose line height for readability as per image style */
    margin-bottom: 25px;
    text-align: justify;
    /* Blocks usually look justified or left. Image looks left/justified. */
}
/* Signature */
.mp-msg-signature {
    text-align: right;
    font-size: 1rem;
    margin-top: 40px;
    margin-bottom: 10px;
    font-weight: bold;
    /* Often signature is bold or distinct */
    color: #333;
}
/* Decoration Line */
.mp-msg-bottom-line {
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
    /* Light divider line */
    margin-top: 10px;
    /* Image shows a pinkish/reddish underlay or just underline?
       The image shows a line under "At the Fork ...". 
       Let's add a subtle pink accent if needed, otherwise gray.
       Actually, MindPost logo colors (Red/Yellow/Blue).
       Let's stick to simple gray unless specified.
    */
    background: linear-gradient(90deg, #ddd, #fff);
    /* Fade out? */
    background-color: #ddd;
}
/* Responsive */
@media (max-width: 768px) {
    .mp-unique-message-container {
        flex-direction: column;
        align-items: center;
    }
    .mp-msg-left-col {
        flex: 0 0 auto;
        text-align: center;
        margin-bottom: 30px;
    }
    .mp-msg-logo-wrap img {
        max-width: 180px;
        /* Smaller logo on mobile */
    }
    .mp-msg-title {
        font-size: 1.4rem;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d169a2a */.mp-unique-company-info-section {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 20px;
    background-color: transparent;
}
.mp-unique-company-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    /* or center? Image is tall. content aligns top? Image seems to align top. */
    justify-content: space-between;
    gap: 60px;
    /* Generous gap between image and list */
}
/* Left Column: Image */
.mp-ci-left-col {
    flex: 1;
    min-width: 300px;
}
.mp-ci-image-wrap {
    width: 100%;
}
.mp-ci-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    /* object-fit: cover; if we constrained height */
}
/* Right Column: Links */
.mp-ci-right-col {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Space out links and social if height matches image */
}
.mp-ci-link-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    width: 100%;
}
.mp-ci-link-list li {
    border-bottom: 1px solid #ccc;
    /* Separator lines */
}
/* Remove top border for first item or add it? 
   Image shows separators BETWEEN items and maybe at bottom. 
   Actually, looking closely at image:
   "Operator Info" -> Line
   "Notation..." -> Line
   It looks like every item has a bottom border.
*/
.mp-ci-link-list li a {
    display: block;
    padding: 15px 0;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: opacity 0.2s;
}
.mp-ci-link-list li a:hover {
    opacity: 0.7;
    color: #555;
}
/* Social Icons */
.mp-ci-social-row {
    display: flex;
    justify-content: center;
    /* Centered in the column */
    gap: 40px;
    /* Wide spacing between icons */
    margin-top: 20px;
}
.mp-ci-social-icon {
    font-size: 1.8rem;
    color: #000;
    transition: transform 0.2s, color 0.2s;
}
.mp-ci-social-icon:hover {
    transform: translateY(-3px);
    color: #555;
}
/* Animations */
.mp-unique-anim-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}
.mp-unique-anim-trigger.mp-unique-show {
    opacity: 1;
    transform: translateY(0);
}
.mp-delay-2 {
    transition-delay: 0.2s;
}
/* Responsive */
@media (max-width: 768px) {
    .mp-unique-company-container {
        flex-direction: column;
        gap: 40px;
    }
    .mp-ci-left-col,
    .mp-ci-right-col {
        width: 100%;
        min-width: 0;
    }
}/* End custom CSS */