body {
    font-family: Arial, Helvetica, sans-serif !important;
}
.main-content {
    background-color: #8BC34A !important;
    height: 100vh !important;
}
.container1 {
    background-color: #8BC34A !important;
    color: white;
    text-align: center;
    padding-top: 50px;
}
.about-section {
    padding: 40px;
    color: white;
}

.about-image {
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    height: auto;
}
.step-img {
    width: 100%;
    border-radius: 10px;
    height: 250px;
    object-fit: cover;
}

.step-number {
    background: #2e7d32;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.step-title {
    margin-top: 10px;
    font-size: 1.2rem;
}
.text-white{
    color:white;
}
.color-order{
    color:black;
}
.rounded-pill {
    border-radius: 50rem !important;
}

.rounded-4 {
    border-radius: 0.5rem !important;
}

.overflow-hidden {
    overflow: hidden !important;
}
/* Trong file ~/Content/CustomCss/Home.css About*/

.about-section h2 {
    font-size: 2.5rem; /* Cỡ chữ hiện tại của h2 thường là 2rem theo Bootstrap, bạn có thể tăng lên.
                           Hoặc dùng px, ví dụ: 36px hoặc 40px */
	font-family: Arial, Helvetica, sans-serif;
}

.about-section p {
    font-size: 1.3rem; /* Cỡ chữ hiện tại của p thường là 1rem (khoảng 16px).
                           1.15rem ~ 18.4px. Bạn có thể dùng 1.2rem, 1.25rem hoặc px (ví dụ: 18px, 20px)
                           tùy theo ý muốn. */
    line-height: 1.3;  /* Tăng khoảng cách giữa các dòng để dễ đọc hơn khi chữ lớn hơn (tùy chọn) */
	font-family: Arial, Helvetica, sans-serif;
}

/* Nếu bạn muốn tất cả các đoạn văn trong .home-content lớn hơn một chút */
.home-content p {
    /* font-size: 1.1rem; */ /* Bỏ comment nếu muốn áp dụng rộng hơn */
	font-family: Arial, Helvetica, sans-serif;
}

/* Tăng cỡ chữ cho tiêu đề H2 trong .about-section */
.about-section h2.color-order { /* Bạn có thể dùng .about-section h2 nếu class color-order không đặc thù cho font-size */
    font-size: 2.8rem; /* Hoặc một giá trị khác như 36px, 2.5em tùy ý bạn */
	font-family: Arial, Helvetica, sans-serif;
}

/* Tăng cỡ chữ cho các mục danh sách li trong .about-section */
.about-section ul li.color-order { /* Bạn có thể dùng .about-section ul li */
    font-size: 1.5rem;  /* Ví dụ: 1.15rem, 1.25rem hoặc 18px, 20px */
    line-height: 1.6;   /* Tùy chọn: Điều chỉnh chiều cao dòng để dễ đọc hơn */
    margin-bottom: 0.5rem; /* Tùy chọn: Thêm một chút khoảng cách dưới mỗi mục danh sách */
	font-family: Arial, Helvetica, sans-serif;
}
/* CSS cho section AccessYourExtraService */

/* Tăng cỡ chữ cho tiêu đề H2 */
section.py-5 .col-md-7 h2.text-uppercase {
    font-size: 2.8rem; /* Hoặc một giá trị khác như 42px, 2.5rem, 3rem.
                           Lưu ý: inline style "letter-spacing: 2px;" vẫn sẽ được áp dụng. */
	font-family: Arial, Helvetica, sans-serif;
}

/* Tăng cỡ chữ cho các dòng text trong thẻ span (hiện đang dùng class fs-5 của Bootstrap) */
section.py-5 .col-md-7 .d-flex span.fs-5 {
    font-size: 1.15rem; /* Bootstrap fs-5 thường là 0.875rem (khoảng 14px).
                           Giá trị 1.15rem (khoảng 18.4px) sẽ lớn hơn đáng kể.
                           Bạn có thể dùng 1.2rem, 1.25rem hoặc giá trị px như 18px, 20px. */
    line-height: 1.6;   /* Tùy chọn: Tăng khoảng cách dòng để dễ đọc hơn */
	font-family: Arial, Helvetica, sans-serif;
}

/* Hoặc nếu bạn muốn một kích thước cụ thể cho các span đó, không phụ thuộc vào việc ghi đè fs-5 */
/*
section.py-5 .col-md-7 .d-flex span {
    font-size: 1.2rem;
    line-height: 1.6;
}
*/
/* Trong file ~/Content/CustomCss/Home.css Hinh anh cho trang About*/

.about-image {
    max-width: 500px; /* Ví dụ: đặt chiều rộng tối đa là 450px.
                         Điều chỉnh con số này theo ý muốn. */
    width: 100%;      /* Cho phép nó co lại nếu container nhỏ hơn 450px */
    height: 450px; /*/
}
/* Trong file ~/Content/CustomCss/Home.css Hinh anh cho trang What We Can Serve*/
/* Áp dụng font chữ phổ biến cho toàn bộ container này */
.container.text-white.text-center {
    font-family: Arial, Helvetica, sans-serif; /* Một lựa chọn font sans-serif phổ biến và an toàn */
}

/* Tiêu đề chính "WHAT WE CAN SERVE ?" */
.container > h2.mb-4 { /* Nhắm mục tiêu H2 trực tiếp trong .container */
    font-size: 2.5rem;  /* Ví dụ: ~40px. Điều chỉnh theo ý muốn */
	 font-weight: 600;    /* Cho chữ đậm hơn một chút (tùy chọn) */
    /* letter-spacing: 3px; -- Thuộc tính này đã có inline, bạn có thể giữ hoặc chuyển vào đây */
	font-family: Arial, Helvetica, sans-serif;
    /* font-family: Arial, Helvetica, sans-serif; -- Hoặc đặt riêng nếu muốn font khác */
}

/* Chữ trong các "viên thuốc" (Breakfast, Lunch, Afternoon) */
.card .rounded-pill {
    font-size: ~16px;   /* Ví dụ: ~14.4px. Điều chỉnh cho phù hợp */
    font-weight: 600;    /* Cho chữ đậm hơn một chút (tùy chọn) */
	font-family: Arial, Helvetica, sans-serif;
    /* font-family: Arial, Helvetica, sans-serif; */
}

/* Tiêu đề phụ trong mỗi card (h6) */
.card .text-start h6 {
    font-size: 2.0rem;   /* Ví dụ: ~19.2px. Điều chỉnh */
    font-weight: bold;   /* Cho đậm hơn (tùy chọn) */
	font-family: Arial, Helvetica, sans-serif;
    /* font-family: Arial, Helvetica, sans-serif; */
    color: #f8f9fa;      /* Màu trắng ngà để dễ đọc hơn trên nền tối (tùy chọn) */
}

/* Dòng chữ nhỏ mô tả trong mỗi card (small) */
.card .text-start small {
    font-size: 2.0rem;  /* Ví dụ: ~15.2px. Điều chỉnh */
    /* font-family: Arial, Helvetica, sans-serif; */
    color: #e0e0e0;      /* Màu xám nhạt hơn cho chữ nhỏ (tùy chọn) */
    line-height: 1.4;    /* Tăng khoảng cách dòng cho dễ đọc (tùy chọn) */
	font-family: Arial, Helvetica, sans-serif;
}
/* Áp dụng font chữ phổ biến cho toàn bộ container này (hoặc body nếu muốn rộng hơn) */
.container { /* Hoặc bạn có thể đặt font-family cho body trong file CSS chính */
    font-family: Arial, Helvetica, sans-serif; /* Font stack phổ biến, dễ đọc */
}

/* Tiêu đề chính "HOW IT WORKS" */
.container > h1.mb-5 {
    font-size: 2.8rem;  /* Ví dụ: ~45px. Điều chỉnh theo ý muốn */
   font-family: Arial, Helvetica, sans-serif;
    text-align: center; /* Căn giữa tiêu đề (tùy chọn) */
    /* color: #333; */ /* Đặt màu cho H1 nếu cần, vì .row có text-dark nhưng H1 nằm ngoài .row */
}

/* Số thứ tự các bước (1, 2, 3) */
.step-number {
    font-size: 2.2rem;   /* Ví dụ: ~35px. Điều chỉnh */
    font-weight: bold;   /* Cho số đậm hơn */
   font-family: Arial, Helvetica, sans-serif;
    /* text-white đã có sẵn */
    text-align: center; /* Đảm bảo số được căn giữa nếu thẻ cha chưa căn */
    margin-top: 0.5rem; /* Khoảng cách với hình ảnh phía trên (nếu có) hoặc phần tử khác */
    margin-bottom: 0.25rem; /* Khoảng cách nhỏ với tiêu đề bước bên dưới */
}

/* Tiêu đề của mỗi bước */
.step-title {
    font-size: 1.25rem;  /* Ví dụ: ~20px. Điều chỉnh */
    font-family: Arial, Helvetica, sans-serif;
    /* text-white đã có sẵn */
    text-align: center; /* Đảm bảo tiêu đề bước được căn giữa */
    line-height: 1.5;   /* Giúp dễ đọc hơn nếu tiêu đề có nhiều từ hoặc xuống dòng */
}

/* Tùy chỉnh thêm cho hình ảnh và cột (tùy chọn để bố cục đẹp hơn) */
.step-img {
    display: block; /* Giúp căn giữa bằng margin auto */
    margin-left: auto;
    margin-right: auto;
    max-width: 70%;   /* Giới hạn chiều rộng tối đa của ảnh trong cột, điều chỉnh nếu cần */
    height: auto;
    margin-bottom: 1rem; /* Tạo khoảng cách dưới ảnh, trước số bước */
}

/* Căn giữa nội dung trong mỗi cột step */
.row.text-dark > .col-md-4.mb-4 { /* text-dark trên row có thể không ảnh hưởng đến các text-white bên trong */
    display: flex;
    flex-direction: column;
    align-items: center;
}