@charset "UTF-8";

/*
Theme Name: My Theme
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/* Categories 01 to 03 are the basics. */

/* Variables */

 /* custom styles */
         .services-compendium .service-item i { width: 32px; font-size: 1.5rem; color: #0397ff; margin-right: 12px; transition: all 0.3s ease; }
         .services-compendium .service-item:hover i { transform: scale(1.1); color: #fff; }
         .services-compendium .service-item { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.1); }
         .services-compendium .service-item a { font-size: 15px; font-weight: 500; color: #f0f0f0; text-decoration: none; transition: 0.2s; }
         .services-compendium .service-item a:hover { color: #0397ff; padding-left: 3px; }
         .division-card { background: rgb(2 27 46 / 89%); border-radius: 20px; padding: 25px; height: 100%; backdrop-filter: blur(2px); border: 1px solid rgba(255,94,20,0.3); transition: transform 0.25s; }
         .division-card:hover { transform: translateY(-5px); border-color: #0397ff; }
         .division-title { font-size: 28px; font-weight: 700; color: #0397ff; margin-bottom: 20px; border-left: 4px solid #0397ff; padding-left: 18px; }
         .badge-count { background: #0397ff; color: #0a0a0a; padding: 2px 12px; border-radius: 30px; font-size: 13px; font-weight: 600; margin-left: 12px; }
         .precision-tag { text-align: center; font-size: 18px; letter-spacing: 2px; font-weight: 600; color: #0397ff; margin-top: 35px; border-top: 1px solid rgba(255,94,20,0.3); padding-top: 25px; }
         .btn-style-one, .theme-btn { background: #0397ff; }
         .btn-style-one:hover { background: #e04e0e; }
         /* multi-level dropdown support */
         .main-menu .navigation li.dropdown .dropdown li { position: relative; }
         .main-menu .navigation li.dropdown .dropdown li .dropdown { left: 100%; top: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s; }
         .main-menu .navigation li.dropdown .dropdown li:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
         @media only screen and (max-width: 1024px) { .main-menu .navigation li.dropdown .dropdown li .dropdown { position: static; opacity: 1; visibility: visible; transform: none; background: #111; padding-left: 20px; } }
         
         
          /* custom fixes for readability and mission/vision redesign */
  .mv-simple-card {
    background: rgba(0,0,0,0.5);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,94,20,0.3);
    transition: 0.25s;
  }
  .mv-simple-card:hover {
    border-color: #0397ff;
    transform: translateY(-5px);
  }
  .mv-simple-card i {
    font-size: 48px;
    color: #0397ff;
    margin-bottom: 20px;
  }
  .mv-simple-card h4 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
  }
  .mv-simple-card p {
    color: #ddd;
    line-height: 1.6;
  }
  .about-stats-number {
    font-size: 48px;
    font-weight: 800;
    color: #0397ff;
    line-height: 1;
  }
  .text-light-muted {
    color: #3f3f3f;
  }
  .page-title:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
  }
  .title-outer, .page-breadcrumb {
    position: relative;
    z-index: 2;
  }
  
  /* Extra CSS specific to Dictation Services page (not present in Desktop Publishing page) */

/* stats row and cards */
.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    margin: 2rem 0 2rem;
}
.stat-card {
    background: white;
    border-radius: 1.25rem;
    padding: 1.5rem 1.2rem;
    flex: 1;
    text-align: center;
    min-width: 130px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.03);
    border: 1px solid #eef2f6;
}
.stat-number {
    font-size: 2.4rem;
    font-weight: 800;
    color: #0397ff;
    line-height: 1.2;
}
.stat-label {
    font-weight: 500;
    color: #334155;
    margin-top: 0.5rem;
}

/* industries grid and cards */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.8rem;
    margin: 2rem 0 2rem;
}
.industry-card {
    background: white;
    border-radius: 1.5rem;
    padding: 1.8rem;
    transition: all 0.25s;
    border: 1px solid #c40303;
}
.industry-card:hover {
    border-color: #0397ff;
    box-shadow: 0 12px 24px -12px rgba(0,0,0,0.1);
}
.industry-icon {
    font-size: 2rem;
    color: #0397ff;
    margin-bottom: 1rem;
}
.industry-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.industry-card p {
    color: #334155;
}

/* small responsiveness addition for stats row */
@media (max-width: 768px) {
    .stats-row {
        flex-direction: column;
    }
}

/* optional icon margin (specific to dictation) */
.fa-microphone-alt, .fa-file-audio {
    margin-right: 0.25rem;
}

.doc-types-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .type-item {
            background: white;
            border-radius: 1rem;
            padding: 1rem 1.2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            border: 1px solid #c40303;
            transition: 0.2s;
        }
        .type-item i {
            font-size: 1.4rem;
            color: #0397ff;
            width: 32px;
        }
        .type-item span {
            font-weight: 500;
            color: #1e293b;
        }
        .type-item:hover {
            border-color: #0397ff;
            transform: translateX(5px);
        }
        .quality-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }
        .quality-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.5rem;
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .quality-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .quality-icon {
            font-size: 1.8rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .quality-card h4 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .quality-card p {
            color: #475569;
            font-size: 0.9rem;
        }
        @media (max-width: 640px) {
            .doc-types-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .services-list-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }
        .service-list-item {
            background: white;
            border-radius: 1.25rem;
            padding: 1.5rem;
            border: 1px solid #c40303;
            transition: 0.2s;
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }
        .service-list-item:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .service-list-icon {
            font-size: 1.8rem;
            color: #0397ff;
            min-width: 48px;
        }
        .service-list-content h4 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .service-list-content p {
            color: #475569;
            font-size: 0.9rem;
            line-height: 1.4;
        }
        @media (max-width: 640px) {
            .service-list-item {
                flex-direction: column;
            }
        }
        
        .stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: space-between;
            margin: 2rem 0 2rem;
        }
        .stat-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.5rem 1.2rem;
            flex: 1;
            text-align: center;
            min-width: 130px;
            box-shadow: 0 6px 14px rgba(0,0,0,0.03);
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .stat-card:hover {
            border-color: #0397ff;
        }
        .stat-number {
            font-size: 2.4rem;
            font-weight: 800;
            color: #0397ff;
            line-height: 1.2;
        }
        .stat-label {
            font-weight: 500;
            color: #334155;
            margin-top: 0.5rem;
        }
        .checklist-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .check-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .check-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .check-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .check-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .check-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .stats-row {
                flex-direction: column;
            }
        }
         .core-services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .service-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .service-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .service-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .service-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .service-card p {
            color: #475569;
            line-height: 1.5;
        }
        
         .stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: space-between;
            margin: 2rem 0 2rem;
        }
        .stat-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.5rem 1.2rem;
            flex: 1;
            text-align: center;
            min-width: 130px;
            box-shadow: 0 6px 14px rgba(0,0,0,0.03);
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .stat-card:hover {
            border-color: #0397ff;
        }
        .stat-number {
            font-size: 2.4rem;
            font-weight: 800;
            color: #0397ff;
            line-height: 1.2;
        }
        .stat-label {
            font-weight: 500;
            color: #334155;
            margin-top: 0.5rem;
        }
        .settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }
        .setting-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.5rem;
            border: 1px solid #eef2f6;
            transition: all 0.25s;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .setting-card:hover {
            border-color: #0397ff;
            transform: translateX(5px);
        }
        .setting-icon {
            font-size: 2rem;
            color: #0397ff;
            width: 48px;
            text-align: center;
        }
        .setting-card h4 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        .delivery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .delivery-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .delivery-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .delivery-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .delivery-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .delivery-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .stats-row {
                flex-direction: column;
            }
            .setting-card {
                padding: 1rem;
            }
        }
        
        .sources-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .source-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.5rem 1rem;
            text-align: center;
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .source-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .source-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 0.75rem;
        }
        .source-card h4 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 768px) {
            .sources-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 480px) {
            .sources-grid {
                grid-template-columns: 1fr;
            }
        }
        
         .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .tool-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem;
            text-align: center;
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .tool-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .tool-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 0.5rem;
        }
        .tool-card h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        .deliverables-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliverable-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliverable-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliverable-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliverable-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliverable-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .tools-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
     .stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: space-between;
            margin: 2rem 0 2rem;
        }
        .stat-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.5rem 1.2rem;
            flex: 1;
            text-align: center;
            min-width: 130px;
            box-shadow: 0 6px 14px rgba(0,0,0,0.03);
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .stat-card:hover {
            border-color: #0397ff;
        }
        .stat-number {
            font-size: 2.4rem;
            font-weight: 800;
            color: #0397ff;
            line-height: 1.2;
        }
        .stat-label {
            font-weight: 500;
            color: #334155;
            margin-top: 0.5rem;
        }
        .asset-types-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .asset-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .asset-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .asset-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .asset-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .asset-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .stats-row {
                flex-direction: column;
            }
        }
        
        .specialisms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .specialism-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .specialism-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .specialism-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .specialism-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .specialism-card p {
            color: #475569;
            line-height: 1.5;
        }
        
        .techniques-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .technique-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem;
            text-align: center;
            border: 1px solid #c40303;
            transition: 0.2s;
        }
        .technique-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .technique-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 0.5rem;
        }
        .technique-card h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .techniques-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        .medium-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .medium-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem;
            text-align: center;
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .medium-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .medium-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 0.5rem;
        }
        .medium-card h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .medium-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
         .occasions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .occasion-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem;
            text-align: center;
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .occasion-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .occasion-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 0.5rem;
        }
        .occasion-card h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .occasions-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        .formats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .format-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .format-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .format-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .format-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .format-card p {
            color: #475569;
            line-height: 1.5;
        }
        
         .format-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .format-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem;
            text-align: center;
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .format-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .format-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 0.5rem;
        }
        .format-card h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        .design-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .design-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .design-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .design-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .design-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .design-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .format-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        .asset-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .asset-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .asset-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .asset-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .asset-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .asset-card p {
            color: #475569;
            line-height: 1.5;
        }
        
         .build-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .build-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .build-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .build-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .build-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .build-card p {
            color: #475569;
            line-height: 1.5;
        }
        
        .stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: space-between;
            margin: 2rem 0 2rem;
        }
        .stat-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.5rem 1.2rem;
            flex: 1;
            text-align: center;
            min-width: 130px;
            box-shadow: 0 6px 14px rgba(0,0,0,0.03);
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .stat-card:hover {
            border-color: #0397ff;
        }
        .stat-number {
            font-size: 2.4rem;
            font-weight: 800;
            color: #0397ff;
            line-height: 1.2;
        }
        .stat-label {
            font-weight: 500;
            color: #334155;
            margin-top: 0.5rem;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .stats-row {
                flex-direction: column;
            }
        }
        
        .types-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .type-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem;
            text-align: center;
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .type-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .type-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 0.5rem;
        }
        .type-card h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        
         .ecosystem-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .ecosystem-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem;
            text-align: center;
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .ecosystem-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .ecosystem-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 0.5rem;
        }
        .ecosystem-card h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        
        .stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: space-between;
            margin: 2rem 0 2rem;
        }
        .stat-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.5rem 1.2rem;
            flex: 1;
            text-align: center;
            min-width: 130px;
            box-shadow: 0 6px 14px rgba(0,0,0,0.03);
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .stat-card:hover {
            border-color: #0397ff;
        }
        .stat-number {
            font-size: 2.4rem;
            font-weight: 800;
            color: #0397ff;
            line-height: 1.2;
        }
        .stat-label {
            font-weight: 500;
            color: #334155;
            margin-top: 0.5rem;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .stats-row {
                flex-direction: column;
            }
        }
        
        .environments-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .environment-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem;
            text-align: center;
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .environment-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .environment-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 0.5rem;
        }
        .environment-card h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        
        .stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: space-between;
            margin: 2rem 0 2rem;
        }
        .stat-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.5rem 1.2rem;
            flex: 1;
            text-align: center;
            min-width: 130px;
            box-shadow: 0 6px 14px rgba(0,0,0,0.03);
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .stat-card:hover {
            border-color: #0397ff;
        }
        .stat-number {
            font-size: 2.4rem;
            font-weight: 800;
            color: #0397ff;
            line-height: 1.2;
        }
        .stat-label {
            font-weight: 500;
            color: #334155;
            margin-top: 0.5rem;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        @media (max-width: 640px) {
            .stats-row {
                flex-direction: column;
            }
        }
        
        .styles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.2rem;
            margin: 2rem 0;
        }
        .style-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem;
            text-align: center;
            border: 1px solid #eef2f6;
            transition: 0.2s;
        }
        .style-card:hover {
            border-color: #0397ff;
            transform: translateY(-3px);
        }
        .style-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 0.5rem;
        }
        .style-card h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        .deliver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin: 2rem 0;
        }
        .deliver-card {
            background: white;
            border-radius: 1.25rem;
            padding: 1.8rem;
            border: 1px solid #c40303;
            transition: all 0.25s;
        }
        .deliver-card:hover {
            border-color: #0397ff;
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -12px rgba(196,4,4,0.1);
        }
        .deliver-icon {
            font-size: 2rem;
            color: #0397ff;
            margin-bottom: 1rem;
        }
        .deliver-card h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .deliver-card p {
            color: #475569;
            line-height: 1.5;
        }
        
        .legal-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
        }
        .accent-color { color: #0397ff; }
        .terms-hero {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 2rem;
            padding: 2.5rem 2rem;
            margin-bottom: 2rem;
            color: white;
        }
        .terms-hero h1 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
        }
        .terms-hero h1 span {
            color: #0397ff;
        }
        .terms-hero .sub {
            font-size: 1rem;
            opacity: 0.9;
            margin-top: 0.5rem;
        }
        .badge-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin: 1.5rem 0 1rem;
        }
        .badge {
            background: rgba(255,255,255,0.1);
            padding: 0.3rem 0.8rem;
            border-radius: 30px;
            font-size: 0.8rem;
        }
        .section-card {
            background: white;
            border-radius: 1.5rem;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            border: 1px solid #eef2f6;
        }
        .section-card h2 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
            border-left: 4px solid #0397ff;
            padding-left: 1rem;
        }
        .section-card h3 {
            font-size: 1.3rem;
            font-weight: 700;
            margin: 1.5rem 0 0.8rem 0;
            color: #0397ff;
        }
        .section-card h4 {
            font-weight: 600;
            margin: 1rem 0 0.5rem;
        }
        .section-card p {
            margin-bottom: 0.8rem;
            color: #334155;
        }
        .section-card ul, .section-card ol {
            margin: 0.8rem 0 1rem 1.8rem;
        }
        .section-card li {
            margin-bottom: 0.4rem;
        }
        .def-grid {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 0.8rem;
            background: #f8fafc;
            padding: 1rem;
            border-radius: 1rem;
            margin: 1rem 0;
        }
        .def-term {
            font-weight: 700;
            color: #0397ff;
        }
        .contact-footer {
            background: #f1f5f9;
            border-radius: 1.5rem;
            padding: 2rem;
            text-align: center;
            margin-top: 2rem;
        }
        .contact-footer a {
            color: #0397ff;
            text-decoration: none;
        }
        hr {
            margin: 1.5rem 0;
            border-color: #e2e8f0;
        }
        @media (max-width: 768px) {
            .terms-hero h1 { font-size: 1.8rem; }
            .def-grid { grid-template-columns: 1fr; }
            .section-card { padding: 1.5rem; }
        }
        .small-note {
            font-size: 0.85rem;
            color: #64748b;
            margin-top: 0.5rem;
        }
        
        .legal-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
        }
        .accent-color { color: #0397ff; }
        .terms-hero {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 2rem;
            padding: 2.5rem 2rem;
            margin-bottom: 2rem;
            color: white;
        }
        .terms-hero h1 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
        }
        .terms-hero h1 span {
            color: #0397ff;
        }
        .terms-hero .sub {
            font-size: 1rem;
            opacity: 0.9;
            margin-top: 0.5rem;
        }
        .badge-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin: 1.5rem 0 1rem;
        }
        .badge {
            background: rgba(255,255,255,0.1);
            padding: 0.3rem 0.8rem;
            border-radius: 30px;
            font-size: 0.8rem;
        }
        .section-card {
            background: white;
            border-radius: 1.5rem;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            border: 1px solid #eef2f6;
        }
        .section-card h2 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
            border-left: 4px solid #0397ff;
            padding-left: 1rem;
        }
        .section-card h3 {
            font-size: 1.3rem;
            font-weight: 700;
            margin: 1.5rem 0 0.8rem 0;
            color: #0397ff;
        }
        .section-card h4 {
            font-weight: 600;
            margin: 1rem 0 0.5rem;
        }
        .section-card p {
            margin-bottom: 0.8rem;
            color: #334155;
        }
        .section-card ul, .section-card ol {
            margin: 0.8rem 0 1rem 1.8rem;
        }
        .section-card li {
            margin-bottom: 0.4rem;
        }
        .matrix-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0 1.5rem;
            font-size: 0.9rem;
        }
        .matrix-table th, .matrix-table td {
            border: 1px solid #e2e8f0;
            padding: 0.75rem;
            text-align: left;
            vertical-align: top;
        }
        .matrix-table th {
            background-color: #f8fafc;
            font-weight: 700;
            color: #0f172a;
        }
        .matrix-table td {
            color: #334155;
        }
        .contact-footer {
            background: #f1f5f9;
            border-radius: 1.5rem;
            padding: 2rem;
            text-align: center;
            margin-top: 2rem;
        }
        .contact-footer a {
            color: #0397ff;
            text-decoration: none;
        }
        hr {
            margin: 1.5rem 0;
            border-color: #e2e8f0;
        }
        @media (max-width: 768px) {
            .terms-hero h1 { font-size: 1.8rem; }
            .section-card { padding: 1.5rem; }
            .matrix-table th, .matrix-table td { padding: 0.5rem; }
        }
        .small-note {
            font-size: 0.85rem;
            color: #64748b;
            margin-top: 0.5rem;
        }