/* =====================================================
   MIMO GROUP – HOME PAGE CSS
   Theme: mimo-agency
   Author: Mimo Group
===================================================== */

/* =======================
   1. ROOT VARIABLES
======================= */
:root {
  --primary: #FF7A18;
  --primary-dark: #e86910;
  --dark: #2E2E2E;
  --gray: #64748b;
  --light: #F8F9FA;
  --white: #FFFFFF;
  --section-padding: 40px 0;
  --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* =======================
   2. BASE STYLE
======================= */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark);
  margin: 0;
  background: var(--white);
}

h1, h2, h3, h4 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  margin: 0 0 15px;
  color: var(--dark);
}

h1 { font-size: 42px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }

p {
  margin-bottom: 15px;
  color: var(--gray);
}

a {
  text-decoration: none;
  transition: 0.3s;
}

/* =======================
   3. LAYOUT
======================= */
.container {
  max-width: 1200px;
  margin: auto;
  padding: 100px 20px;
}

.home-section {
  padding: 40px 0;
}

.bg-light {
  background: var(--light);
}

/* =======================
   4. BUTTONS & LINKS
======================= */

.btn-primary:hover {
  background: #e86910;
}


.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
}

.text-link {
  color: var(--primary);
  font-weight: 600;
}

/* =====================================================
   5. HERO SECTION - BRANDED FOR MIMO GROUP
===================================================== */
.hero-section {
    position: relative;
    margin-top: 10px;
    padding: 160px 0 100px; 
    /* Thay đổi Gradient sang tông Xám đậm của Brand */
    background: var(--dark); 
    background-image: linear-gradient(135deg, rgba(46, 46, 46, 0.95) 0%, rgba(30, 41, 59, 0.8) 100%), 
                      url('https://mimo.com.vn/wp-content/uploads/2026/01/hero-scaled.webp?auto=format&fit=crop&q=80&w=2070');
    background-size: cover;
    background-position: center;
    color: var(--white);
    overflow: hidden;
    text-align: center;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Typography - Mimo Style */
.hero-section h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: -1px;
    color: var(--white);
}

.hero-section h1 span {
    color: var(--primary); /* Đổi Xanh sang Cam Mimo #FF7A18 */
}

.hero-section p {
    font-size: 1.2rem;
    color: #cbd5e1; /* Màu xám nhạt giúp nổi bật text trên nền tối */
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Buttons - Mimo Branded */
.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
}


.hero-section .btn-primary:hover {
    background-color: var(--white);
    color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 122, 24, 0.3);
}

/* Tinh chỉnh Button */
.hero-section .btn-primary {
    border: 2px solid var(--primary);
    background: var(--primary);
    color: var(--white);
    padding: 16px 43px; 
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    transition: var(--transition);
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
    margin-top: 10px;
}

.hero-section .btn-outline {
    border: 2px solid var(--white);
    color: var(--white);
    padding: 16px 43px; 
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    transition: var(--transition);
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
    margin-top: 10px;
}

.hero-section .btn-outline:hover {
    background-color: var(--white);
    color: var(--dark);
    transform: translateY(-5px);
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
    .hero-section {
        padding: 100px 0 70px;
    }
    .hero-section h1 {
        font-size: 32px;
    }
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .hero-section .btn-primary, 
    .hero-section .btn-outline {
        width: 100%;
        max-width: 250px;
    }
}
/* =====================================================
   6. ABOUT SECTION - BRANDED FOR MIMO GROUP
===================================================== */
.about-section {
    background-color: var(--white);
}

/* Đảm bảo ID #about đồng bộ với class wrapper */
#about .about-wrapper {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px; /* Tăng khoảng cách cho thoáng hơn */
}

/* Cột nội dung */
.about-content {
    flex: 1;
}

.sub-title {
    display: block;
    color: var(--primary); /* Đổi sang Cam Mimo #FF7A18 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.about-content h2 {
    font-size: 2.5rem;
    color: var(--dark); /* Màu Xám đậm Brand */
    margin-bottom: 25px;
    line-height: 1.3;
}

.about-content p {
    font-size: 18px;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 35px;
}

/* Chỉ số thống kê */
.about-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    border-top: 1px solid #f0f0f0;
    padding-top: 30px;
}

.stat-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
}

/* Thêm điểm nhấn màu Cam cho con số nếu muốn */
.stat-number span {
    color: var(--primary);
}

.stat-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray);
    margin-top: 5px;
    display: block;
}

/* Nút tìm hiểu thêm (Text Link) */
.btn-text {
    color: var(--primary); /* Đổi sang Cam Mimo */
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    transition: var(--transition);
}

.btn-text:after {
    content: ' →'; /* Thêm mũi tên tự động */
    transition: 0.3s;
}

.btn-text:hover {
    color: var(--dark);
}

.btn-text:hover:after {
    padding-left: 8px;
}

/* Cột hình ảnh */
#about .about-image {
    flex: 1;
    width: 50%;
}

.image-box {
    position: relative;
    padding-left: 20px;
}

.image-box img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.08);
    display: block;
}

/* Huy hiệu số năm kinh nghiệm */
.experience-badge {
    position: absolute;
    bottom: -25px;
    left: -10px;
    background: var(--primary); /* Màu Cam Mimo */
    color: var(--white);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(255, 122, 24, 0.3);
    min-width: 120px;
}

.experience-badge b {
    display: block;
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 5px;
}

.experience-badge span {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 992px) {
    #about .about-wrapper {
        flex-direction: column !important;
        text-align: center;
    }
    
    #about .about-image {
        width: 100%;
        margin-top: 60px;
        order: 2;
    }

    .about-stats {
        justify-content: center;
    }

    .image-box {
        padding-left: 0;
    }

    .experience-badge {
        left: 50%;
        transform: translateX(-50%);
    }
}
/* =====================================================
   FULL CSS: SECTION SERVICES - MIMO GROUP
   Dán đoạn này vào để thay thế hoàn toàn phần cũ
===================================================== */

/* 1. Tổng thể Section - Dùng nền xám cực nhạt để làm nổi Card trắng */
.services-section {
    background-color: #f9fbff; /* Nền Off-white tách biệt hoàn toàn với About */
    position: relative;
    overflow: hidden;
}

/* 2. Container & Header */
.services-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.mimo-tag {
    display: block;
    color: #FF7A18; /* Màu Cam Mimo */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.section-header h2 {
    font-size: 36px;
    color: #2E2E2E; /* Màu Xám đậm */
    margin: 0;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #FF7A18;
    margin: 15px auto 0;
    border-radius: 10px;
}

/* 3. Grid Layout */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* 4. Service Item Card */
.service-item {
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 24px;
    border: 1px solid #edf2f7;
    text-align: left;
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    /* Đổ bóng tầng thấp để tạo khối nhẹ khi chưa hover */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

/* 5. Service Icon & SVG */
.service-icon {
    width: 120px;
    height: 120px;
    background: rgba(255, 122, 24, 0.08); /* Nền cam nhạt cho icon */
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    transition: all 0.4s ease;
}

.service-icon svg {
    width: 80px;
    height: 80px;
    stroke: #FF7A18; /* Màu cam mặc định cho SVG */
    transition: all 0.4s ease;
}

/* 6. Text Content */
.service-item h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2E2E2E;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.service-item p {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* 7. Service Link */
.service-link {
    display: inline-flex;
    align-items: center;
    color: #FF7A18;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    gap: 8px;
    transition: all 0.3s ease;
}

/* 8. HOVER EFFECTS - Làm card bừng sáng */
.service-item:hover {
    transform: translateY(-12px);
    background: #ffffff;
    border-color: #FF7A18;
    /* Đổ bóng màu cam đặc trưng */
    box-shadow: 0 20px 40px rgba(255, 122, 24, 0.15);
}

.service-item:hover .service-icon {
    background: #FF7A18; /* Nền icon chuyển cam đậm */
}

.service-item:hover .service-icon svg {
    stroke: #ffffff; /* SVG chuyển trắng */
    transform: scale(1.1);
}

.service-item:hover h3 {
    color: #FF7A18;
}

.service-item:hover .service-link {
    gap: 15px; /* Mũi tên dịch sang phải */
}

/* 9. Responsive */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services-section { padding: 60px 0; }
    .services-grid { grid-template-columns: 1fr; }
    .section-header h2 { font-size: 28px; }
    .service-item { padding: 40px 30px; }
}
/* =======================
   8. WHY CHOOSE US
======================= */
.why-section {
    background-color: #fff; /* Nền xám nhạt để tách biệt với phần About trắng */
    text-align: center;
}

.section-header {
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    color: #0f172a;
}

/* Cấu trúc Lưới */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Chia 4 cột bằng nhau */
    gap: 30px;
}

/* Style cho từng thẻ Card */
.why-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.why-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #38bdf8;
}

.why-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: inline-block;
}

.why-card h3 {
    font-size: 1.25rem;
    color: #0f172a;
    margin-bottom: 15px;
}

.why-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr); /* Màn hình tablet hiện 2 cột */
    }
}

@media (max-width: 640px) {
    .why-grid {
        grid-template-columns: 1fr; /* Màn hình điện thoại hiện 1 cột */
    }
}

/* =======================
   9. PROJECTS
======================= */
.projects-section {
    background-color: #f9fbff;
    text-align: center;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 50px 0;
}

.project-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden; /* Để ảnh không tràn khỏi bo góc */
}

.project-image {
    position: relative;
    aspect-ratio: 4/3; /* Giữ các ảnh luôn đều nhau */
    background-color: #2E2E2E; /* Nền xám đậm nếu ảnh chưa load */
    border: 1px solid #e1e1e1;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Lớp phủ khi di chuột vào */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    background: rgba(46, 46, 46, 0.9); /* Màu Xám đậm #2E2E2E với độ trong suốt */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    padding: 20px;
}
.project-card:hover {
    box-shadow: 0 15px 35px rgba(255, 122, 24, 0.2); /* Đổ bóng màu Cam nhẹ */
}
.project-card:hover .project-overlay {
    opacity: 1;
}

.project-card:hover .project-image img {
    transform: scale(1.1);
}

.project-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    margin: 10px 0 20px;
}

.project-info .category {
    color: #FF7A18; /* Màu Cam Mimo */
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    display: block;
}

.view-more {
    display: inline-block;
    padding: 8px 20px;
    background: #FF7A18;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}
.view-more:hover {
    background-color: #2E2E2E !important; /* Đổi sang xám đậm khi hover */
}

/* Nút Xem tất cả phía dưới */
.projects-footer {
    margin-top: 40px;
}

.btn-mimo-outline {
    display: inline-block;
    padding: 15px 35px;
    border: 2px solid #2E2E2E;
    color: #2E2E2E;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    transition: 0.3s;
}

.btn-mimo-outline:hover {
    background: #FF7A18;
    border-color: #FF7A18;
    color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .projects-grid { grid-template-columns: 1fr; }
}

/* =======================
   10. PROCESS
======================= */
.process-section {
    background-color: #2E2E2E; /* Nền xám đậm chuyên nghiệp */
    color: #ffffff;
    text-align: center;
}

.process-section .section-header h2 {
    color: #ffffff;
    margin-bottom: 60px;
}

.process-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 20px;
}

/* Đường kẻ nối giữa các bước */
.process-wrapper::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: rgba(255, 122, 24, 0.3); /* Đường kẻ cam nhạt */
    z-index: 1;
}

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

/* Con số nổi bật màu Cam */
.process-number {
    width: 80px;
    height: 80px;
    background: #FF7A18; /* Cam chủ đạo */
    color: #2E2E2E;
    font-size: 1.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 25px;
    border: 5px solid #3d3d3d; /* Tạo viền nổi khối */
    transition: all 0.3s ease;
}

.process-item:hover .process-number {
    transform: scale(1.1);
    background: #ffffff;
    color: #FF7A18;
}

.process-item h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #FF7A18; /* Tiêu đề bước màu Cam */
}

.process-item p {
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .process-wrapper {
        flex-direction: column;
        gap: 50px;
    }
    .process-wrapper::before {
        display: none; /* Bỏ đường kẻ khi về mobile */
    }
}

/* =======================
   11. BLOG
======================= */
.blog-section {
    background-color: #f9f9f9;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0;
}

/* Thẻ bài viết */
.blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    border-bottom: 3px solid transparent;
}

.blog-card:hover {
    transform: translateY(-5px);
    border-color: #FF7A18; /* Viền cam khi hover */
}

/* Ảnh đại diện & Ngày tháng */
.blog-thumb {
    position: relative;
    height: 200px;
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-date {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #FF7A18;
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Nội dung chữ */
.blog-info {
    padding: 25px;
    text-align: left;
}

.blog-info h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.blog-info h3 a {
    color: #2E2E2E; /* Xám đậm */
    text-decoration: none;
    transition: 0.3s;
}

.blog-info h3 a:hover {
    color: #FF7A18;
}

.blog-info p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.read-more {
    color: #FF7A18;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
}

/* Nút footer */
.blog-footer {
    text-align: center;
    margin-top: 20px;
}

/* Mobile */
@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
}

/* =======================
   12. CTA
======================= */
.cta-section {
    position: relative;
    padding: 40px 0;
    background: #FF7A18; /* Màu Cam Mimo chủ đạo */
    background-image: linear-gradient(135deg, #FF7A18 0%, #e66a10 100%);
    color: #ffffff;
    text-align: center;
    overflow: hidden;
}

/* Hiệu ứng trang trí nhẹ */
.cta-section::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.cta-section h2 {
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #ffffff;
}

.cta-section h2 span {
    color: #2E2E2E; /* Điểm nhấn tên thương hiệu bằng màu xám đậm */
}

.cta-section p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
    color: #fff;
}

/* Nút bấm nổi bật */
.cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.btn-mimo-white {
    background: #ffffff;
    color: #FF7A18;
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-mimo-white:hover {
    background: #2E2E2E; /* Hover sang màu Xám đậm */
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.btn-mimo-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed #ffffff;
    transition: 0.3s;
}

.btn-mimo-link:hover {
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
    .cta-section h2 { font-size: 1.8rem; }
    .btn-mimo-white { width: 100%; max-width: 300px; }
}
/* =======================
   13. CONTACT
======================= */
.contact-section {
    background-color: #ffffff;
}

.contact-wrapper {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* Cột thông tin */
.contact-info {
    flex: 1;
    text-align: left;
}

.contact-info h2 {
    color: #2E2E2E;
    font-size: 2.5rem;
    margin: 15px 0 25px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.info-list li {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #444;
}

.info-list a {
    color: #FF7A18;
    text-decoration: none;
    font-weight: 600;
}

/* Cột Form */
.contact-form-box {
    flex: 1;
    background: #fdfdfd;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input, 
.form-group textarea {
    width: 95%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

/* Khi click vào ô nhập liệu hiện màu Cam */
.form-group input:focus, 
.form-group textarea:focus {
    border-color: #FF7A18;
    box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.1);
}

.btn-submit {
    width: 100%;
    padding: 18px;
    background: #FF7A18;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
}

.btn-submit:hover {
    background: #2E2E2E;
    transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 992px) {
    .contact-wrapper {
        flex-direction: column;
        gap: 50px;
    }
}

/* =======================
   14. RESPONSIVE
======================= */
@media (max-width: 991px) {

    .hero-section h1, .about-content h1, .section-header h1{ font-size: 30px; }
   .cta-section h2, .contact-info h2, .hero-section h2, .about-content h2, .section-header h2 { font-size: 22px; }
   p, .cta-section p, .contact-info p, .about-content p, .hero-section p { font-size: 16px; }
   
   .service-item {text-align: center;}
  .services-grid,
  .process-list {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  #about .about-wrapper {
        flex-direction: column !important;
    }
    #about .about-content, 
    #about .about-image {
        width: 100%;
    }
}