:root {
            /* Workday Brand Colors (Inspired by workday.com) */
            --wday-primary: #005cb9;         /* Workday Blue */
            --wday-primary-dark: #022043;    /* Darker Workday Blue */
            --wday-accent: #f57a00;          /* Workday Orange */
            --wday-accent-dark: #e06f00;     /* Darker orange for hover */
            --wday-text: #333333;
            --wday-text-secondary: #555555;  /* Slightly darker for better contrast */
            --wday-background: #f9f9f9;      /* Lighter, cleaner background */
            --wday-card-bg: #ffffff;
            --wday-border: #d1d1d1;          /* Softer border */
            
            /* Spacing */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 32px;
            --spacing-xxl: 48px;
            
            /* Border Radius */
            --border-radius: 8px;
            --border-radius-lg: 12px;

            /* Shadows */
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
            
            /* Transitions */
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Roboto', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            color: var(--wday-text);
            background-color: var(--wday-card-bg); /* Main background white for content areas */
            line-height: 1.5;
        }
        
        /* Container */
        .container {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg); /* Increased default container padding */
        }
        
        /* Header */
        header {
            background-color: var(--wday-card-bg);
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 0;
            z-index: 100;
            min-height: 80px;
            display: flex;
            align-items: center;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-lg) var(--spacing-md);
            width: 100%;
        }
        
        /* Logo styling */
        .logo {
            height: 44px;
        }
        

        
        /* Hero Section: Main banner with gradient background */
        .hero {
            padding: var(--spacing-xxl) var(--spacing-lg) 10px;
            background-color: var(--wday-primary-dark);
            color: white;
            text-align: center;
            position: relative;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 60px;
        }
        
        /* Curved divider after hero section */
        .hero::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 50px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q600,200 1200,0 L1200,120 L0,120 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat;
            background-size: cover;
            z-index: 1;
        }
        
        /* Hero content layout */
        .hero-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 40px;
            max-width: 1440px;
            margin: 0 auto;
        }

        .hero-text-column {
            width: 100%;
            max-width: 944px;
            margin: 0 auto;
        }

        .hero-image-column {
            width: 100%;
            max-width: 1440px;
            margin-top: 40px;
        }

        /* Hero heading with gradient text effect */
        .hero h1 {
            font-size: 3rem; /* Larger hero headline */
            margin-bottom: var(--spacing-md);
            line-height: 1.2;
            font-weight: 900; /* Made the font thicker */
            /* Added text gradient */
            background: linear-gradient(0deg, #fec35d 0.1%, #fecb68 5.09%, #fde695 30.04%, #eeeeb7 50%, #cae5ce 74.95%, #84cfd2 99.9%); /* White to light blue gradient for text */
            -webkit-background-clip: text; /* For Safari/Chrome */
            background-clip: text;
            color: transparent; /* Makes the original text color transparent so gradient shows */
        }
        
        .hero p {
            font-size: 1.15rem; /* Slightly adjusted hero paragraph */
            color: rgba(255, 255, 255, 0.9);
        }


        
        /* Resources Section: Card-based layout with background gradient */
        .resources {
            background: linear-gradient(0deg, #fda63d 0%, #fece7a 15%, #ffdbba 30%, rgba(255, 255, 255, 0) 70%), #fff;
            padding: 80px 0;
            position: relative;
            z-index: 2;
        }
        
        /* Card container: Responsive grid layout */
        .cards-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Fixed 3 columns on larger screens */
            gap: var(--spacing-lg);
            align-items: stretch; /* Ensure all grid items have equal height */
        }

        /* Collapse to single column on smaller screens - higher breakpoint to avoid 2-column state */
        @media (max-width: 800px) {
            .cards-container {
                grid-template-columns: 1fr; /* Single column layout */
            }
        }
        
        /* Individual card styling */
        .info-block {
            background-color: var(--wday-card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            padding: var(--spacing-lg); /* Match card padding */
            transition: transform var(--transition-normal), box-shadow var(--transition-normal);
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: var(--spacing-md);
            width: 100%;
            height: 100%; /* Take full height of card-link */
        }

        /* Card link: Remove default link styling and add hover effects */
        .card-link {
            display: flex;
            text-decoration: none;
            color: inherit;
            transition: transform var(--transition-normal);
            height: 100%; /* Take full height of grid item */
        }

        .card-link:hover {
            transform: translateY(-5px);
            text-decoration: none;
            color: inherit;
        }

        .card-link:hover .info-block {
            box-shadow: var(--shadow-md);
        }

        .card-link .info-block h4 {
            color: var(--wday-primary);
            margin-bottom: var(--spacing-sm);
        }

        .card-link .info-block p {
            color: var(--wday-text-secondary);
            line-height: 1.6;
        }

        /* Card icon styling */
        .card-icon {
            width: 48px;
            height: 48px;
            flex-shrink: 0; /* Prevent icon from shrinking */
            color: var(--wday-primary);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-icon svg {
            width: 100%;
            height: 100%;
        }

        /* Card text content */
        .card-text-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        /* Footer: Compliance and copyright information */
        footer {
            background-color: var(--wday-primary-dark);
            color: white;
            padding: var(--spacing-xxl) var(--spacing-lg);
            text-align: center;
        }
        
        /* Compliance information styling */
        .compliance-info {
            margin-bottom: var(--spacing-lg);
        }

        .compliance-links {
            margin-bottom: var(--spacing-md);
        }

        .compliance-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 0.875rem;
            display: inline-flex;
            align-items: center;
            transition: color var(--transition-fast);
        }

        .compliance-links a:hover {
            color: white;
        }

        .separator {
            margin: 0 var(--spacing-sm);
            color: rgba(255, 255, 255, 0.5);
        }

        .beian-icon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }

        .business-info {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.8rem;
            line-height: 1.4;
        }

        .business-info p {
            margin: 2px 0;
        }

        .copyright {
            margin-top: var(--spacing-lg);
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.875rem;
        }


        
        /* Mobile responsive styles */
        @media (max-width: 768px) {
            header {
                min-height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
            }
            
            .header-container {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: var(--spacing-lg) var(--spacing-md);
                width: 100%;
            }

            .logo {
                height: 44px;
            }
            
            .hero {
                padding: var(--spacing-xs) 0 40px;
                padding-top: 40px;
                align-items: flex-start;
            }

            .hero-content {
                max-width: 100%;
                padding: 0;
                flex-direction: column;
                text-align: center;
            }

            .hero-text-column {
                text-align: center;
                margin-bottom: var(--spacing-lg);
                padding: 0 var(--spacing-md);
            }

            .hero-image-column {
                width: 100%;
                max-width: none;
                padding: 0 var(--spacing-lg); /* Add proportional padding */
            }

            .gallery-grid {
                max-width: 100%;
                width: 100%;
                margin: 0 auto; /* Center the gallery */
            }

            /* Flatter curve for mobile */
            .hero::after {
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q600,80 1200,0 L1200,120 L0,120 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat;
                background-size: cover;
            }

            .cmp-title__text {
                font-size: 1.25rem;
                text-align: center;
            }
            
            .cmp-title__text::after {
                left: 50%;
                transform: translateX(-50%);
            }
        }

        /* Gallery grid: Image collage layout system */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 1fr);
            gap: 16px;
            aspect-ratio: 103 / 35;
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            transform: translateY(20px);
        }

        .gallery-grid .col-sm-1 {
            position: relative;
            overflow: hidden;
            -ms-flex-preferred-size: 100%!important;
            flex-basis: 100%!important;
            max-width: 100%!important;
            display:flex!important;
        }

        .gallery-grid .col-sm-1 > div, 
        .gallery-grid .col-sm-1 .aem-Grid, 
        .gallery-grid .col-sm-1 .aem-Grid .image, 
        .gallery-grid .col-sm-1 .aem-Grid .image .cmp-image, 
        .gallery-grid .col-sm-1 .aem-Grid .image .cmp-image img {
            flex:1!important;
            display:flex!important;
        }

        .gallery-grid .col-sm-1 .aem-Grid .image .cmp-image img {
            width: 100%!important;
            height: 100%!important;
            object-fit: cover!important;
        }

        .gallery-grid .row {
            margin-right: 0px!important;
            margin-right: 0rem!important;
            margin-left: 0px!important;
            margin-left: 0rem!important;
        }

        .gallery-grid .col {
            padding-right: 0px!important;
            padding-right: 0rem!important;
            padding-left: 0px!important;
            padding-left: 0rem!important;
        }

        .gallery-grid .image {
            overflow:hidden!important;
            border-radius:12px!important;
        }

        .gallery-grid {
            display: grid!important;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 1fr);
            grid-column-gap: 16px;
            grid-row-gap: 16px;
            aspect-ratio: 103 / 35;
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            transform: translateY(20px);
        }

        .gallery-grid .slot-1 { 
            grid-area: 1 / 1 / 11 / 3!important; 
        }
        .gallery-grid .slot-2 { 
            grid-area: 1 / 3 / 8 / 5!important; 
        }
        .gallery-grid .slot-3 { 
            grid-area: 8 / 3 / 11 / 5!important; 
        }
        .gallery-grid .slot-4 { 
            grid-area: 1 / 5 / 11 / 7!important; 
        }
        .gallery-grid .slot-5 { 
            grid-area: 1 / 7 / 4 / 9!important; 
        }
        .gallery-grid .slot-6 { 
            grid-area: 4 / 7 / 11 / 9!important; 
        }
        .gallery-grid .slot-7 { 
            grid-area: 1 / 9 / 11 / 11!important; 
        }

        @media screen and (max-width: 1199px) {
            .gallery-grid {
                grid-column-gap: 8px;
                grid-row-gap: 8px;
            }
        }

        @media screen and (max-width: 767px) {
            .gallery-grid {
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(2, 1fr);
            }
            .gallery-grid .slot-1 { 
                grid-area: 1 / 1 / 3 / 2!important; 
            }
            .gallery-grid .slot-2 { 
                grid-area: 1 / 2 / 2 / 3!important; 
            }
            .gallery-grid .slot-3 { 
                grid-area: 2 / 2 / 3 / 3!important; 
            }
            .gallery-grid .slot-4 { 
                grid-area: 0 / 0 / 0 / 0!important; 
                display:none!important;
            }
            .gallery-grid .slot-5 { 
                grid-area: 0 / 0 / 0 / 0!important;
                display:none!important;
            }
            .gallery-grid .slot-6 { 
                grid-area: 0 / 0 / 0 / 0!important;
                display:none!important;
            }
            .gallery-grid .slot-7 { 
                grid-area: 1 / 3 / 3 / 4!important; 
            }
        }

        @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
            @media screen and (max-width: 767px) {
                .gallery-grid {
                    grid-template-columns: repeat(3, 1fr);
                    grid-template-rows: repeat(10, 1fr);
                }
                .gallery-grid .slot-1 { 
                    grid-area: 1 / 1 / 11 / 2!important; 
                }
                .gallery-grid .slot-2 { 
                    grid-area: 1 / 2 / 8 / 3!important; 
                }
                .gallery-grid .slot-3 { 
                    grid-area: 8 / 2 / 11 / 3!important; 
                }
                .gallery-grid .slot-4 { 
                    grid-area: 0 / 0 / 0 / 0!important; 
                    display:none!important;
                }
                .gallery-grid .slot-5 { 
                    grid-area: 0 / 0 / 0 / 0!important;
                    display:none!important;
                }
                .gallery-grid .slot-6 { 
                    grid-area: 0 / 0 / 0 / 0!important;
                    display:none!important;
                }
                .gallery-grid .slot-7 { 
                    grid-area: 1 / 3 / 11 / 4!important; 
                }
            }
        }

        /* Section title styling with accent line */
        .cmp-title__text {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--wday-text);
            margin-bottom: 40px;
            line-height: 1.2;
            letter-spacing: -0.025em;
            text-align: left;
            position: relative;
            padding-bottom: 16px;
        }

        .cmp-title__text::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background-color: var(--wday-accent);
        }

        /* Mobile responsive title styling */
        @media (max-width: 768px) {
            .cmp-title__text {
                font-size: 1.25rem;
                text-align: center;
            }
            
            .cmp-title__text::after {
                left: 50%;
                transform: translateX(-50%);
            }
        }