@charset "UTF-8";

/* =========================================
   Scope: About Us Page Specific (.page-aboutus)
   ========================================= */

/* -------------------------------------------
   Common Utilities for About Us
   ------------------------------------------- */
/* Section Title (Blue Underline Style) */
.page-aboutus .ac-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ac-navy);
    position: relative;
    padding-bottom: 1rem;
    display: inline-block;
}

.page-aboutus .ac-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ddd; /* Long grey line */
}

.page-aboutus .ac-section-header {
    border-bottom: 1px solid #e0e0e0; /* Full width border for container context */
    margin-bottom: 3rem;
}

.page-aboutus .ac-section-header .ac-section-title {
    margin-bottom: 0;
    padding-bottom: 1rem;
    border-bottom: 4px solid #0056b3; /* The blue accent */
    z-index: 1;
}
.page-aboutus .ac-section-header .ac-section-title::after {
    display: none; /* Disable inner after to use container border */
}


/* -------------------------------------------
   1. Hero Section
   ------------------------------------------- */
.page-aboutus .ac-about-hero {
    background-image: url('../img/aboutus_pagekv.png'); /* Adjust filename if using the full bg */
    /* Fallback/Overlay color if image is missing */
    background-color: #002a45; 
    background-size: cover;
    background-position: center;
    height: 320px;
    margin-top: -1px; /* Visual alignment fix */
    position: relative;
}

/* Dark overlay for text readability */
.page-aboutus .ac-about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 42, 69, 0.4); 
    z-index: 1;
}

.page-aboutus .ac-about-hero .container {
    position: relative;
    z-index: 2;
}


/* -------------------------------------------
   2. Mission Section
   ------------------------------------------- */
.page-aboutus .ac-about-mission h2 {
    font-size: 1.75rem;
    line-height: 1.6;
}

.page-aboutus .ac-mission-img {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}


/* -------------------------------------------
   3. Positioning Section (Blue BG)
   ------------------------------------------- */
.page-aboutus .ac-about-positioning {
    background-color: #f3f6f9; /* Light blue-grey background */
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.page-aboutus .ac-pos-card {
    min-height: 320px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s;
}

.page-aboutus .ac-pos-card:hover {
    transform: translateY(-5px);
}

.page-aboutus .ac-pos-img {
    min-height: 300px;
}

/* Detail Button in Positioning Cards */
.page-aboutus .ac-btn-detail {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.2rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    color: var(--ac-navy);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    width: 240px;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.page-aboutus .ac-btn-detail i {
    background-color: var(--ac-navy);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: background-color 0.3s;
}

.page-aboutus .ac-btn-detail:hover {
    background-color: #f8f9fa;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.page-aboutus .ac-btn-detail:hover i {
    background-color: var(--ac-teal-accent);
}


/* -------------------------------------------
   4. Values Section
   ------------------------------------------- */
.page-aboutus .ac-value-card {
    height: 360px; /* Fixed height for squares */
    border-radius: 4px;
    background-color: #002a45;
}

.page-aboutus .ac-value-overlay {
    background: linear-gradient(180deg, rgba(0,42,69,0.2) 0%, rgba(0,55,100,0.9) 100%);
    /* Teal/Blue gradient effect */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,86,179,0.85) 100%);
    z-index: 1;
}

.page-aboutus .ac-value-content {
    padding-bottom: 3rem !important;
}

.page-aboutus .ac-value-content h4 {
    font-size: 1.4rem;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    padding-bottom: 1rem;
    display: inline-block;
    width: 100%;
}


/* -------------------------------------------
   5. Beliefs Section
   ------------------------------------------- */
.page-aboutus .ac-belief-img img {
    height: 240px;
    object-fit: cover;
    width: 100%;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .page-aboutus .ac-pos-card {
        flex-direction: column-reverse; /* Stack image on top or bottom based on preference, here natural stack */
    }
    .page-aboutus .ac-pos-img {
        height: 240px;
        min-height: auto;
    }
    .page-aboutus .ac-value-card {
        height: 300px;
    }
}


/* =========================================
   Scope: Founder Page (.page-founder)
   ========================================= */

/* Hero Section */
.page-founder .ac-founder-hero {
    /* Gradient based on design: Soft Blue-Grey to White/Light Grey */
    background: linear-gradient(180deg, #E6EFF6 0%, #D8E4EE 60%, #cbd9e4 100%);
    position: relative;
    padding-top: 20px;
    padding-bottom: 80px; /* Space for content before the card overlap */
    min-height: 540px;    /* Ensure enough height for the image */
}

/* Breadcrumb */
/* =========================================
   Component: Breadcrumb
   ========================================= */
.ac-breadcrumb {
    font-size: 0.85rem;
    font-weight: 500;
}

.ac-breadcrumb-item {
    display: flex;
    align-items: center;
}

/* Link Styling (Previous pages) */
.ac-breadcrumb-item a {
    color: #888; /* Gray text for links */
    transition: color 0.2s ease;
}

.ac-breadcrumb-item a:hover {
    color: var(--ac-blue); /* Highlight color on hover */
    text-decoration: underline !important;
}

/* Separator (>) Styling */
.ac-breadcrumb-item:not(:last-child)::after {
    content: '\f054'; /* FontAwesome chevron-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.6rem;
    color: #ccc;
    margin: 0 0.8rem; /* Space around separator */
}

/* Active Page (Current page) */
.ac-breadcrumb-item.active {
    color: #333; /* Darker color for current page */
    cursor: default;
    pointer-events: none;
}

/* Mobile Adjustment */
@media (max-width: 991px) {
    .ac-breadcrumb {
        justify-content: center; /* Center align on mobile if needed */
        font-size: 0.8rem;
    }
}

/* Hero Title */
.page-founder .ac-hero-title {
    font-size: 2.5rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #333;
    margin-top: 3rem;
}

/* Founder Photo */
.page-founder .ac-founder-photo-wrapper {
    position: relative;
    z-index: 1;
    margin-bottom: -80px; /* Push image slightly down to align with design */
}

.page-founder .ac-founder-img {
    max-height: 480px; /* Adjust based on actual image ratio */
    width: auto;
    object-fit: contain;
    /* Drop shadow to pop from background slightly if needed */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

/* Profile Detail Section */
.page-founder .ac-founder-detail {
    background-color: #fff; /* Body bg is white, but ensure section is white */
    position: relative;
    z-index: 2; /* Sit on top of hero background */
}

/* The Overlapping Card */
.page-founder .ac-profile-card {
    margin-top: -100px; /* The negative margin creates the overlap effect */
    border-radius: 4px; /* Slight rounding or sharp 0 if preferred */
    box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important; /* Soft large shadow */
    border: none;
}

/* Typography inside Card */
.page-founder .ac-name {
    font-size: 2rem;
    color: #002a45; /* Brand Navy */
    letter-spacing: 0.05em;
    padding-bottom: 1rem;
}

.page-founder .ac-role {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}

.page-founder .ac-desc {
    font-size: 1rem;
    line-height: 2.0;
    color: #333;
    margin-bottom: 2rem;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .page-founder .ac-hero-title {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 2rem !important;
    }

    .page-founder .ac-founder-hero {
        padding-bottom: 0;
        text-align: center;
    }

    .page-founder .ac-founder-photo-wrapper {
        margin-bottom: 0;
        text-align: center;
    }
    
    .page-founder .ac-founder-img {
        max-height: 350px;
    }

    .page-founder .ac-profile-card {
        margin-top: -40px; /* Less overlap on mobile */
        padding: 2rem !important;
    }
    
    .page-founder .ac-desc br {
        display: none; /* Hide manual line breaks on mobile */
    }
}

/* =========================================
   Scope: Our Team Page (.page-team)
   ========================================= */

/* Page Header & Intro */
.page-team .ac-page-header {
    /* Using position relative to place the accent line */
    position: relative;
    border-bottom: 1px solid #e0e0e0 !important; /* The thin gray line */
    padding-bottom: 1.5rem !important;
}

.page-team .ac-page-title {
    font-size: 2rem;
    line-height: 1.4;
    color: #002a45;
}


.ac-team-list{
	padding:0px 10%;
}
/* The Blue Accent Line */
.page-team .ac-header-line-accent {
    position: absolute;
    bottom: -1px; /* Align with bottom border */
    left: 0;
    width: 120px; /* Short width */
    height: 4px;  /* Thick line */
    background-color: #5abce0; /* The cyan/blue accent color from design */
    z-index: 2;
}

.page-team .ac-page-intro {
    font-size: 1rem;
    color: #555;
    max-width: 80%;
}


/* Member List Item */
.page-team .ac-member-item {
    border-color: #e0e0e0 !important;
}

/* Member Image */
.page-team .ac-member-img {
    background-color: #f5f5f5;
    overflow: hidden;
}

.page-team .ac-member-img img {
    /* Design shows square-ish or portrait images. 
       Assuming images are already cropped or we ensure they fit nicely. */
    object-fit: cover;
    width: 100%;
    /* Keep consistent aspect ratio if images vary */
    aspect-ratio: 1 / 1.1; 
}


/* Member Content Typography */
.page-team .ac-member-content span {
    font-size: 0.85rem;
    color: #666;
}

.page-team .ac-member-content h3 {
    font-size: 1.5rem;
    margin-top: 0.2rem;
}

.page-team .ac-member-content p {
    font-size: 0.95rem;
    line-height: 2; /* Relaxed line height for reading */
    color: #444;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .page-team .ac-member-img {
        max-width: 200px; /* Limit image size on mobile */
        margin-bottom: 1rem;
    }
    
    .page-team .ac-page-title {
        font-size: 1.6rem;
    }
}

/* =========================================
   Scope: Feedback Page (.page-feedback)
   ========================================= */

/* Intro Section */
.page-feedback .ac-intro-list li {
    font-size: 1rem;
    line-height: 1.8;
}

/* Scroll Button */
.page-feedback .ac-btn-scroll {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 6px 6px 6px 24px; 
    color: #333;
    width: 260px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.page-feedback .ac-btn-scroll:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.page-feedback .ac-btn-icon-dark {
    width: 36px;
    height: 36px;
    background-color: var(--ac-dark-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Map Stats */
.page-feedback .ac-stat-number {
    font-size: 2.5rem;
    line-height: 1.2;
}

/* Testimonials Cards */
.page-feedback .ac-section-heading {
    font-size: 1.8rem;
    color: #002a45;
}

.page-feedback .ac-testimonial-card {
    background-color: #f8f9fa; /* Light Gray Background */
    border: none;
    transition: transform 0.3s;
}

.page-feedback .ac-testimonial-card:hover {
    transform: translateY(-5px);
}

.page-feedback .ac-icon-circle {
    width: 100px;
    height: 100px;
    background-color: #002a45; /* Navy Circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #002a45; /* Double border effect if needed, simple here */
}

/* Case Study Cards */
.page-feedback .ac-case-card {
    border-color: #e5e5e5 !important;
    transition: box-shadow 0.3s;
}

.page-feedback .ac-case-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.page-feedback .ac-case-img-wrapper {
    height: 240px;
    overflow: hidden;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .page-feedback .ac-stat-number {
        font-size: 1.8rem;
    }
    
    .page-feedback .ac-case-img-wrapper {
        height: 200px;
    }
}


/* =========================================
   Scope: FAQ Page (.page-faqs)
   ========================================= */

.page-faqs .ac-page-title {
    font-size: 2.2rem;
    color: #002a45;
}

/* FAQ Item Container */
.page-faqs .ac-faq-item {
    border-color: #e5e5e5 !important;
    background-color: transparent;
}

/* Question Section */
.page-faqs .ac-faq-question {
    /* White background default */
}

.page-faqs .ac-faq-q-text {
    font-size: 1.15rem;
    line-height: 1.6;
}

/* Answer Section */
.page-faqs .ac-faq-answer {
    /* Gradient or solid light blue background */
    background: linear-gradient(180deg, #edf7fc 0%, #e6f2fa 100%);
    border-top: 1px solid #f0f0f0; /* Subtle separator inside card */
}

/* Icons */
.page-faqs .ac-faq-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    font-family: sans-serif;
}

/* Q Icon: Dark Blue Circle, White Text */
.page-faqs .ac-icon-q {
    background-color: #002a45;
    color: #fff;
}

/* A Icon: White Circle, Dark Blue Text */
.page-faqs .ac-icon-a {
    background-color: #fff;
    color: #002a45;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow for white circle */
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .page-faqs .ac-faq-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .page-faqs .ac-faq-q-text {
        font-size: 1rem;
    }
    
    .page-faqs .ac-faq-question,
    .page-faqs .ac-faq-answer {
        padding: 1.5rem !important;
        gap: 1rem !important;
    }
}

/* =========================================
   Scope: Insight Page (.page-insight)
   ========================================= */

/* Hero Section */
.page-insight .ac-insight-hero {
    /* Using a dark blue gradient or image */
    background: linear-gradient(90deg, #1A4B7C 0%, #2A6095 100%);
    /* Replace with actual image if available: url('../img/page/insight_hero.jpg'); */
    background-size: cover;
    background-position: center;
    height: 180px; /* Adjust height for the banner strip */
    position: relative;
    border-radius: 4px; /* Optional slight rounding if design suggests */
    margin-top: 0;
}

/* Ensure container alignment for hero text */
.page-insight .ac-insight-hero .container {
    position: relative;
    z-index: 2;
}

/* Optional Overlay pattern */
.page-insight .ac-insight-hero::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    right: 0; 
    bottom: 0;
    background: url('../img/kvbg.jpg'); /* Reuse existing texture if applicable */
    opacity: 0.1;
    mix-blend-mode: overlay;
}

/* Section Headings */
.page-insight .ac-section-heading {
    font-size: 1.5rem;
    line-height: 1.4;
    border-color: #0097a7 !important; /* Teal accent color */
}

/* Insight Cards */
.page-insight .ac-insight-card {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
}

.page-insight .ac-insight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.page-insight .ac-card-img-top {
    height: 200px;
    background-color: #f0f0f0;
}

.page-insight .card-body a{
	text-decoration:none;
}

.page-insight .ac-card-img-top img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.page-insight .ac-insight-card:hover .ac-card-img-top img {
    transform: scale(1.05);
}

.page-insight .ac-link-more {
    color: #666;
    font-weight: 500;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    margin-top: auto; /* Push to bottom */
}

.page-insight .ac-link-more:hover {
    color: #008b9b; /* Teal hover */
}

/* =========================================
   Scope: Contact Page (.page-contact)
   ========================================= */

/* Hero Section */
.page-contact .ac-contact-hero {
    background-image: url('../img/page/contact_hero.jpg'); /* 背景画像 */
    background-size: cover;
    background-position: center;
    height: 240px; 
    position: relative;
    /* Blue Overlay fallback or tint */
    background-color: #5abce0; 
}

/* Ensure text is visible on hero */
.page-contact .ac-contact-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(86,188,224,0.8) 0%, rgba(90,200,240,0.4) 100%);
    z-index: 1;
}

.page-contact .ac-contact-hero .container {
    position: relative;
    z-index: 2;
}


/* Flow Steps Section */
.page-contact .ac-flow-step-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
   background: linear-gradient(142.05deg, #21C3D0 15.2%, #0DB4EB 49.76%, #3585E0 83.66%);

    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(13, 202, 240, 0.3);
}

.page-contact .ac-flow-card {
    transition: transform 0.3s;
    border-color: #f0f0f0 !important;
}

.page-contact .ac-flow-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Contact Dropdown Button */
.page-contact .ac-contact-dropdown-btn {
    background-color: #fff;
    border-color: #ddd !important;
    transition: background-color 0.2s;
}

.page-contact .ac-contact-dropdown-btn:hover {
    background-color: #f8f9fa;
}

/* Example Issues Section */
.page-contact .ac-example-card {
    border-color: #e5e5e5 !important;
    transition: transform 0.3s;
}

.page-contact .ac-example-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.page-contact .ac-example-img {
    height: 180px;
    overflow: hidden;
}

.page-contact .ac-example-img img {
    height: 100%;
    object-fit: cover;
}

/* Platform Box X Button */
.page-contact .ac-btn-x {
    background-color: #002a45; /* Dark Navy */
    border-color: #002a45;
    color: #fff;
    transition: opacity 0.3s;
}

.page-contact .ac-btn-x:hover {
    opacity: 0.9;
    color: #fff;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .page-contact .ac-contact-hero {
        height: 180px;
    }
    
    .page-contact .ac-example-img {
        height: 160px;
    }
}


/* =========================================
   Section: Contact Platform (.ac-contact-platform)
   ========================================= */

/* Main Box Container */
.page-contact .ac-platform-box {
    background-color: #F4F6F8; /* Light gray-blue background from design */
    border-radius: 12px;
    padding: 80px 20px;
    text-align: center;
    max-width: 100%; /* Full width within container */
}

/* Logo Styles */
.page-contact .ac-logo-bars {
    height: 44px; /* Container height for alignment */
}

.page-contact .ac-bar {
    width: 10px;
    border-radius: 1px;
}

.page-contact .ac-bar-1 {
    height: 22px;
    background-color: #4C3AE3; /* Purple-ish blue */
}

.page-contact .ac-bar-2 {
    height: 34px;
    background-color: #0075FF; /* Bright blue */
}

.page-contact .ac-bar-3 {
    height: 44px;
    background-color: #00C2FF; /* Cyan */
}

.page-contact .ac-logo-text {
    font-size: 1.4rem;
    line-height: 1.1;
    color: #000;
    letter-spacing: 0.05em;
}

/* Description Text */
.page-contact .ac-platform-desc p {
    font-size: 1.2rem;
    color: #444;
    line-height: 1.8;
}

.page-contact .ac-platform-desc {
    margin-top: 40px;
    margin-bottom: 45px;
}

/* X (Twitter) Button */
.page-contact .ac-btn-x-wrapper {
    display: inline-flex;
    align-items: center;
    background-color: #002A4E; /* Dark Navy Background */
    border-radius: 50px;
    padding: 6px 30px 6px 6px; /* Padding: Top Right Bottom Left */
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 42, 78, 0.2);
}

.page-contact .ac-btn-x-wrapper:hover {
    opacity: 0.9;
}

.page-contact .ac-icon-circle {
    width: 36px;
    height: 36px;
    background-color: #00ACEE; /* Twitter/X Cyan Blue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    margin-right: 15px; /* Spacing between icon and text */
}

.page-contact .ac-x-url {
    color: #fff;
    font-family: Consolas, Monaco, 'Courier New', monospace; /* Monospace font for URL */
    font-size: 1,1rem;
}

/* Mobile Adjustments */
@media (max-width: 576px) {
    .page-contact .ac-platform-box {
        padding: 50px 20px;
    }
    
    .page-contact .ac-btn-x-wrapper {
        padding-right: 20px;
    }
    
    .page-contact .ac-x-url {
        font-size: 0.8rem;
    }
}

/* =========================================
   Scope: Services Page (.page-services)
   ========================================= */

/* Hero Section */
.page-services .ac-services-hero {
    background-image: url('../img/page/service_hero.jpg'); /* 背景画像 */
    background-size: cover;
    background-position: center;
    height: 240px; 
    position: relative;
    /* Fallback color matching blue header */
    background-color: #2A6095; 
}
/* Optional overlay to darken/tint if using real image */
.page-services .ac-services-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(30, 80, 150, 0.8) 0%, rgba(40, 100, 180, 0.4) 100%);
    z-index: 1;
}
.page-services .ac-services-hero .container {
    position: relative;
    z-index: 2;
}


/* Common Service Section Styles */
.page-services .ac-service-num {
    font-size: 2.5rem;
    line-height: 1;
}

.page-services .ac-service-title {
    font-size: 2rem;
    line-height: 1;
}

.page-services .ac-service-subtitle {
    font-size: 1rem;
    color: #444;
}

/* Colors for Gold Section (Teal/Greenish) */
.page-services .text-teal {
    color: #00BFA5 !important; /* Adjust to match design green/teal */
}
.page-services .bg-teal {
    background-color: #00BFA5 !important;
}
.page-services .border-teal {
    border-color: #00BFA5 !important;
}
.page-services .bg-teal-light {
    background-color: #F0FBF9; /* Very light teal background */
}

/* Colors for Crypto Section (Blue/Info) */
.page-services .text-info {
    color: #00AEEF !important; /* Adjust to match design cyan/blue */
}
.page-services .bg-info {
	
    background-color: #00AEEF !important;
}
.page-services .border-info {
    border-color: #00AEEF !important;
}
.page-services .bg-info-light {
    background-color: #F0FAfe; /* Very light blue background */
}

/* Offering Cards */
.page-services .ac-offering-card {
    transition: transform 0.3s;
}
.page-services .ac-offering-card:hover {
    transform: translateY(-5px);
}

.page-services .ac-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .page-services .ac-services-hero {
        height: 180px;
    }
    
    .page-services .ac-service-title {
        font-size: 1.6rem;
    }
    
    .page-services .ac-service-num {
        font-size: 2rem;
    }
    
    .page-services .d-flex.align-items-baseline {
        flex-wrap: wrap;
    }
}

/* =========================================
   Service Page Additional Styles (Mining, DeFi, US Stock, Options, Differentiation)
   ========================================= */

/* Mining Section Colors */
.page-services .ac-service-mining-title {
    color: #002a45; /* Dark Navy */
}
.page-services .ac-service-mining-subtitle {
    color: #002a45; /* Dark Navy */
    border-color: #002a45 !important;
}
.page-services .ac-bg-mining {
    background-color: #0056b3 !important; /* Blue for icon circle */
}
.page-services .ac-bg-mining-light {
    background-color: #F0F4FA !important; /* Very light blue bg */
}

/* DeFi Section Colors */
.page-services .ac-service-defi-title {
    color: #00AEEF; /* Cyan Blue */
}
.page-services .ac-service-defi-subtitle {
    color: #00AEEF; /* Cyan Blue */
    border-color: #00AEEF !important;
}
.page-services .ac-bg-defi {
    background-color: #00AEEF !important; /* Cyan Blue for icon circle */
}
.page-services .ac-bg-defi-light {
    background-color: #F0FAFE !important; /* Very light cyan bg */
}

/* US Stock Section Colors (Pink) */
.page-services .ac-text-pink {
    color: #E8506B !important; /* Pink color from image */
}
.page-services .ac-bg-pink {
    background-color: #E8506B !important;
}
.page-services .ac-border-pink {
    border-color: #E8506B !important;
}
.page-services .ac-bg-pink-light {
    background-color: #FEF5F6 !important; /* Very light pink bg */
}

/* Option Strategy Section Colors (Purple) */
.page-services .ac-text-purple {
    color: #5C5CE0 !important; /* Purple color from image */
}
.page-services .ac-bg-purple {
    background-color: #5C5CE0 !important;
}
.page-services .ac-border-purple {
    border-color: #5C5CE0 !important;
}
.page-services .ac-bg-purple-light {
    background-color: #F6F6FD !important; /* Very light purple bg */
}

/* Differentiation Section */
.page-services .ac-service-diff-title {
    color: #002a45; /* Dark Navy */
    font-size: 2rem;
}
.page-services .ac-text-navy {
    color: #002a45 !important;
}
.page-services .ac-diff-card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.page-services .ac-diff-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.ac-service-differentiation{
   background: #F7F7F7;
   padding:5rem 0px;
}

/* =========================================
   Scope: Online Courses Page (.page-courses)
   ========================================= */

/* Hero Section */
.page-courses .ac-courses-hero {
    background-image: url('../img/page/courses_hero.jpg'); 
    background-size: cover;
    background-position: center;
    height: 240px; 
    position: relative;
    background-color: #AAB9C4; 
}
.page-courses .ac-courses-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(140, 160, 180, 0.6) 0%, rgba(160, 180, 200, 0.4) 100%);
    z-index: 1;
}
.page-courses .ac-courses-hero .container {
    position: relative;
    z-index: 2;
}

/* Core Curriculum Section Header */
.page-courses .ac-section-header {
    border-bottom: 1px solid #ddd;
}

/* Course Header Styles 
   Design: Light background box with a thick Top Border (colored) 
*/
.page-courses .ac-course-header {
    padding: 1.5rem 1.5rem; /* Matches spacing in image */
    background-color: #f8f9fa; /* Default fallback */
}

/* Variant: Sky Blue (Course 01) */
.page-courses .ac-header-sky {
    background-color: #EBF8FF; /* Very Light Blue */
    border-top: 4px solid #009EF7; /* Sky Blue */
}
.page-courses .ac-text-sky {
    color: #009EF7 !important;
}

/* Variant: Teal (Course 02) */
.page-courses .ac-header-teal {
    background-color: #F2FCFB; /* Minty Light */
    border-top: 4px solid #009688; /* Teal */
}
.page-courses .ac-text-teal {
    color: #009688 !important;
}

/* Variant: Navy (Course 03) */
.page-courses .ac-header-navy {
    background-color: #F4F6F8; /* Light Grey Blue */
    border-top: 4px solid #002a45; /* Navy */
}
.page-courses .ac-text-navy {
    color: #002a45 !important;
}

/* Variant: Cyan (Course 04) */
.page-courses .ac-header-cyan {
    background-color: #E1F5FE; /* Light Cyan */
    border-top: 4px solid #00C2FF; /* Cyan */
}
.page-courses .ac-text-cyan {
    color: #00C2FF !important;
}

/* Tool Box / Practical Example Box */
.page-courses .ac-tool-box {
    border-color: #e5e5e5 !important;
    background-color: #fff;
}

/* List Styling */
.page-courses ul li {
    font-size: 0.95rem;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .page-courses .ac-courses-hero {
        height: 180px;
    }
    .page-courses .ac-course-header h3 {
        font-size: 1.25rem;
    }
}

/* =========================================
   Additional Sections for Online Courses
   (System, Benefits, Feedback)
   ========================================= */

/* 1. System Section (Cards with Image Middle) */
.page-courses .ac-system-card {
    border-color: #e5e5e5 !important;
    transition: transform 0.3s;
}
.page-courses .ac-system-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.page-courses .ac-system-img {
    height: 200px;
    overflow: hidden;
}
.page-courses .ac-system-img img {
    height: 100%;
    object-fit: cover;
}

/* 2. Benefits Section (Light Gray Background) */
.page-courses .ac-course-benefits {
    background-color: #F4F6F8; /* Light Gray/Blue background from design */
}
.page-courses .ac-benefit-card {
    border: 1px solid #eee; /* Subtle border */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    min-height: 320px; /* Ensure visual balance */
}
.page-courses .ac-benefit-icon {
    color: #009EF7 !important; /* Bright Blue */
}

/* 3. Feedback Section (Light Cyan Cards) */

.page-courses .ac-feedback-card {
    background-color: #EBF9FD; /* Light Cyan Background from design */
    border: none;
    min-height: 340px;
}
.page-courses .ac-user-icon {
    color: #005FA3 !important; /* Darker Blue for Icon */
    position: relative;
    width: fit-content;
}