.mission {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: start;
}

.card {
    background: white;
    border-radius: 20px;
    padding: 20px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon svg {
    width: 60px;
    height: 60px;
    stroke: #ff6b35;
	    color: var(--mcolor);
    fill: none;
    stroke-width: 2;
}

.card-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
    line-height: 1.2;
}

.card-subtitle {
    font-size: 16px;
    color: var(--mcolor);
    font-weight: 600;
    margin-bottom: 25px;
	padding-bottom: 20px;
    border-bottom: 1px solid #d8d8d8;
}

.card-content {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    text-align: justify;
    flex-grow: 1;
}
.title {
            color: var(--mcolor);
            font-size: 2em;
            margin-bottom: 5px;
            text-align: center;
        }

        .subtitle {
            color: #555;
            font-size: 1.1em;
            margin-bottom: 40px;
            text-align: center;
        }

        .timeline-wrapper {
            position: relative;
            margin-bottom: 20px;
        }

        .timeline {
            position: relative;
            padding-top: 100px; /* Space for years/icons above the line */
            padding-bottom: 40px; /* Space for descriptions below the line */
            display: flex;
            justify-content: space-between;
            width: auto;
            box-sizing: border-box;
            margin: 0 auto;
        }

            .timeline::before {
                content: '';
                position: absolute;
                top: 115px; /* Vertical position of the line (icon center) */
                left: 75px; /* Start line at half item width */
                right: 75px; /* End line at half item width from right */
                height: 4px;
                background-color: var(--mcolor);
                z-index: 1;
            }

        .timeline-item {
            flex: 0 1 auto; /* Items will determine their width */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            z-index: 2;
            /* width: 229px; */ /* Set a base width for descriptions */
        }

            .timeline-item .year {
                position: absolute;
                top: -60px; /* Position above the line */
                left: 50%;
                transform: translateX(-50%);
                font-weight: bold;
                width: 100px; /* Ensure year text doesn't wrap weirdly */
                white-space: nowrap;
            }

            .timeline-item .icon {
                width: 80px; /* Smaller icon */
                height: 80px;
                border-radius: 50%;
                background-color: #ffda44;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: -25px; /* Position icon center on the line (50px height / 2 = 25px) */
                left: 50%;
                transform: translateX(-50%);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            }

                .timeline-item .icon img {
                    width: 50px;
                    height: 50px;
                    fill: white; /* Icon color */
                }



            .timeline-item .description {
                line-height: 1.4;
                margin-top: 80px; /* Space below the line/icon area */
                max-width: 150px;
                margin-left: auto;
                margin-right: auto;
            }

        .motto {
            font-size: 1.1em;
            font-style: italic;
            color: var(--mcolor);
            text-align: center;
            font-weight: bold;
        }

        .values-list {
            list-style: none;
            padding: 20px 15% 0;
            margin: 0;
            position: relative; /* For positioning the dotted spine */
        }

        /* Dotted line spine */
        .dotted-spine {
            position: absolute;
            top: 22px; /* Half marker height (45px / 2) */
            bottom: 22px; /* End near the last marker's bottom (adjust as needed) */
            left: 200px; /* Half marker width (45px / 2) */
            width: 2px;
            border-left: 2px dotted #58bc90; /* Light green dotted line */
            z-index: 0; /* Below markers */
            /* Approximate height based on item spacing - adjust if needed */
            height: calc(100% - 44px);
        }

        .value-item {
            display: flex;
            align-items: flex-start; /* Align marker and text at the top */
            margin-bottom: 25px; /* Space between items */
            position: relative; /* For positioning marker */
            padding:0 0 0 100px; /* Space for marker column (marker width + margin) */
            z-index: 1; /* Ensure item content is above spine */
        }

            .value-item:last-child {
                margin-bottom: 0; /* No margin after the last item */
            }

        .value-marker {
            position: absolute;
            top: 5px;
            left: 0;
            width: 51px;
            height: 50px;
            background-color: #58bc90; /* Light green */
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            transform: rotate(45deg); /* Rotate for diamond-like shape */
            /* Rounded corners on the shape */
            font-size: 1.2em;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Subtle shadow */
            flex-shrink: 0; /* Prevent marker from shrinking */
        }

            .value-marker span {
                transform: rotate(-45deg); /* Counter-rotate the number */
                display: block; /* Ensure span takes dimensions for centering */
            }

        .value-text {
            flex-grow: 1; /* Allow text to take up remaining space */
        }

        .value-title {
            color: var(--mcolor); /* Dark green */
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 1.1em; /* Slightly larger font for title */
        }

        .value-description {
            color: #333; /* Dark grey text */
            line-height: 1.5;
            font-size: 0.95em; /* Slightly smaller font for description */
        }

        .values-list .bg_marker .value-item:nth-child(1) .value-marker {
            background-color: #5dd482;
        }

        .values-list .bg_marker .value-item:nth-child(2) .value-marker {
            background-color: #41b461;
        }

        .values-list .bg_marker .value-item:nth-child(3) .value-marker {
            background-color: #2b8456;
        }

        .values-list .bg_marker .value-item:nth-child(4) .value-marker {
            background-color: #03672b;
        }

        .values-list .bg_marker .value-item:nth-child(5) .value-marker {
            background-color: #01501c;
        }

        .values-list .bg_marker .value-item:nth-child(6) .value-marker {
            background-color: #033928;
        }
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .mission {
		grid-template-columns: repeat(1, 1fr);
	}
    .card {
        padding: 30px 25px;
    }
    
    .card-title {
        font-size: 24px;
    }
    
    .card-content {
        font-size: 15px;
    }
	.content {
		padding: 30px 0;
	}
	.title {
		font-size: 20px;
	}
	.content .ab_ttl {
		font-size: 22px;
	}
    .timeline {
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        width: 90%;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
    }

        .timeline::before {
            content: none; /* Remove line on smaller screens */
        }

    .timeline-item {
        width: 100%;
        margin-bottom: 30px;
        padding: 0;
        position: static;
        text-align: center;
        align-items: center;
        flex-direction: column;
    }

        .timeline-item .year {
            position: static;
            transform: none;
            margin-bottom: 5px;
            width: auto;
            white-space: normal;
        }

        .timeline-item .icon {
            position: static;
            transform: none;
            margin-bottom: 10px;
            width: 50px;
            height: 50px;
        }
		.timeline-item .icon img {
			width: 30px;
			height: 30px;
		}
        .timeline-item .description {
            margin-top: 0;
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
		.values-list {
		    padding: 20px 15px 0;
		}
		.dotted-spine {
			left: 40px;
			height: calc(100% - 80px);
		}
}

@media (max-width: 480px) {
    
    .card {
        padding: 25px 20px;
    }
    
    .icon svg {
        width: 50px;
        height: 50px;
    }
}