/*
Theme Name: SJ Theme
Description: A custom WordPress theme designed specifically for the SJ Resume Builder plugin with advanced banner customization controls.
Version: 1.2.2
Author: SJ
*/

/* Dark mode is now handled by the Color Scheme system - no overrides needed */













/* CRITICAL: Hide WordPress default page title on custom page templates */
body[class*="page-template-page-"] .entry-header,
body[class*="page-template-page-"] .entry-title,
body[class*="page-template-page-"] header.entry-header {
    display: none !important;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: var(--color-text_primary);
}

/* Header styles */
.site-header {
    background: var(--color-bg_primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 1.5rem 0;
    position: sticky;
    top: 0;
    z-index: 999; /* Lower z-index to stay below admin bar but above plugins */
}



/* When admin bar is present, adjust header position */
.admin-bar .site-header {
    top: 32px; /* Standard admin bar height */
}

/* Mobile admin bar adjustment */
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px; /* Mobile admin bar height */
    }
}

/* Ensure header stays above all other elements */
.site-header * {
    z-index: inherit;
}

/* Header elements positioning */
.site-header .container,
.site-header .site-navigation,
.site-header .site-title {
    position: relative;
}

.site-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text_primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-title:hover {
    color: var(--color-primary);
}

.site-title a {
    text-decoration: none;
    color: inherit;
}

.site-navigation ul {
    list-style: none;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    align-items: center;
    background: var(--color-bg_secondary);
    border-radius: 50px;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Ensure desktop navigation is visible by default */
@media (min-width: 769px) {
    .site-navigation {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

.site-navigation li {
    margin: 0;
    padding: 0;
}

.site-navigation a {
    text-decoration: none;
    color: var(--color-text_primary) !important;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    display: block;
    position: relative;
}

.site-navigation a:hover {
    color: var(--color-primary) !important;
    background: var(--color-bg_primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.site-navigation a:active {
    transform: translateY(0);
}

/* Login/Logout link styling */
.site-navigation .menu-item a {
    text-decoration: none;
    color: var(--color-text_primary) !important;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    background: transparent;
    box-shadow: none;
}

.site-navigation .menu-item a:hover {
    color: var(--color-primary) !important;
    background: var(--color-primary_light);
    box-shadow: 0 4px 12px var(--color-primary_light);
    transform: translateY(-2px);
}

.site-navigation .menu-item a:active {
    transform: translateY(0);
}

/* Main content */
.site-main {
    min-height: 70vh;
    padding: 2rem 0;
}

/* Hero Banner Image Styles */
.hero-banner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 2rem auto;
    text-align: center;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.hero-banner-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
/* ------------------------------------------------------------
   SJ Learn pages: prevent sticky header overlap
   Applies top offset to core SJ Learn templates that don't use
   the theme's hero wrappers (course, lessons, quizzes, archives,
   course taxonomies, and profile pages).
------------------------------------------------------------- */
:root {
    --sj-header-offset: 65px; /* Reduced from 108px - thinner header (padding reduced, description removed) */
}

/* Single course, lesson, quiz */
body.single-lp_course,
body.single-lp_lesson,
body.single-lp_quiz,
/* Course archive and taxonomies */
body.post-type-archive-lp_course,
body.tax-course_category,
body.tax-course_tag,
/* Common Learn pages like profile (class names vary by version) */
body.learnpress-page,
body.lp-profile,
/* Fallback: any page with lp- content wrapper */
body[class*="lp-"] {
    padding-top: var(--sj-header-offset);
    scroll-padding-top: var(--sj-header-offset);
}
/* Increase spacing specifically for Learn checkout page */
body.learnpress-checkout {
    padding-top: calc(var(--sj-header-offset) + 24px);
    scroll-padding-top: calc(var(--sj-header-offset) + 24px);
}
/* In case some templates render without .site-main wrapper */
.learnpress-checkout .lp-archive-courses,
body.learnpress-checkout .lp-archive-courses {
    margin-top: 24px;
}

/* Default template pages (e.g., Instructors page) need header offset too */
body.page-template-default .site-main {
    padding-top: var(--sj-header-offset);
}

/* Collections single and archive pages */
body.single-sjl_collection,
body.post-type-archive-sjl_collection {
    padding-top: var(--sj-header-offset);
    scroll-padding-top: var(--sj-header-offset);
}

/* Admin bar present (mobile pushes header further down); spacing remains comfortable */
@media screen and (max-width: 782px) {
    :root { --sj-header-offset: 96px; }
}

.hero-banner-image:hover {
    transform: scale(1.02);
}

/* Responsive banner image */
@media (max-width: 768px) {
    .hero-banner {
        margin: 0 1rem 1.5rem 1rem;
        border-radius: 8px;
    }
    
    .hero-banner-image {
        max-height: 250px;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ========================================
   BLOG PAGE STYLES
   ======================================== */

/* Blog Page Wrapper */
.blog-page {
    background: var(--color-bg_primary);
    min-height: 100vh;
}

/* Blog Header Section */
.blog-header-section {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    padding: 4rem 0 3rem 0;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.blog-main-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
    text-transform: none;
}

.blog-main-subtitle {
    font-size: 1.2rem;
    color: var(--color-text_secondary);
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Blog Content Section */
.blog-content-section {
    padding: 3rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.blog-posts-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/* Blog Post Items */
.blog-post-item {
    background: var(--color-bg_secondary);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
}

.blog-post-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.blog-content-section.business-dark-template .blog-post-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Grid Layout */
.blog-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

/* List Layout */
.blog-layout-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.blog-layout-list .blog-post-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 0;
}

.blog-layout-list .blog-post-image {
    flex: 0 0 300px;
    height: 200px;
    overflow: hidden;
}

.blog-layout-list .blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-layout-list .blog-post-content {
    flex: 1;
}

/* Blog Post Image */
.blog-post-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-post-item:hover .blog-post-image img {
    transform: scale(1.05);
}

/* Blog Post Content */
.blog-post-content {
    padding: 1.5rem;
}

/* Blog Post Meta */
.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--color-text_secondary);
}

.blog-post-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-post-meta i {
    color: var(--color-primary);
    font-size: 0.8rem;
}

/* Blog Post Title */
.blog-post-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.blog-post-title a {
    color: var(--color-text_primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-post-title a:hover {
    color: var(--color-primary);
}

/* Blog Post Excerpt */
.blog-post-excerpt {
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Blog Post Footer */
.blog-post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Read More Button */
.blog-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--color-primary);
}

.blog-read-more-btn:hover {
    background: var(--color-primary);
    color: var(--color-text_primary);
    transform: translateX(4px);
}

.blog-read-more-btn i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.blog-read-more-btn:hover i {
    transform: translateX(2px);
}

/* Social Share Buttons */
.blog-social-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.share-label {
    font-size: 0.9rem;
    color: var(--color-text_secondary);
    margin-right: 0.5rem;
}

.social-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.social-share-btn.facebook {
    background: var(--color-primary);
    color: var(--color-text_primary);
}

.social-share-btn.twitter {
    background: var(--color-secondary);
    color: var(--color-text_primary);
}

.social-share-btn.linkedin {
    background: var(--color-accent);
    color: var(--color-text_primary);
}

.social-share-btn.email {
    background: var(--color-text_muted);
    color: var(--color-text_primary);
}

.social-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Blog Pagination */
.blog-pagination {
    margin-top: 3rem;
    text-align: center;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0 0.25rem;
    background: var(--color-bg_secondary);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    background: var(--color-primary);
    color: var(--color-text_primary);
    border-color: var(--color-primary);
}

/* No Posts Message */
.blog-no-posts {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-text_secondary);
}

.blog-no-posts i {
    font-size: 4rem;
    color: var(--color-text_muted);
    margin-bottom: 1rem;
}

.blog-no-posts h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .blog-main-title {
        font-size: 2rem;
    }
    
    .blog-layout-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .blog-layout-list .blog-post-item {
        flex-direction: column;
    }
    
    .blog-layout-list .blog-post-image {
        flex: none;
        height: 200px;
    }
    
    .blog-post-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .blog-social-share {
        margin-top: 1rem;
    }
}

/* ========================================
   SINGLE POST STYLES
   ======================================== */

/* Single Post Wrapper */
.single-post-wrapper {
    background: var(--color-bg_primary);
}

/* Post Hero Section */
.single-post-hero {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    padding: 3rem 0 2rem 0;
    margin-top: 80px;
    border-bottom: 1px solid var(--color-border);
}

.single-post-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Category Badges */
.post-categories-badges {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.category-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: var(--color-primary);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.category-badge:hover {
    background: var(--color-primary_dark);
    transform: translateY(-2px);
}

/* Single Post Title */
.single-post-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text_primary);
    margin-bottom: 1.5rem;
    text-transform: none;
}

/* Post Meta Info */
.post-meta-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    color: var(--color-text_secondary);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.post-author-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.author-avatar {
    border-radius: 50%;
    border: 2px solid var(--color-primary);
}

.author-name {
    font-weight: 600;
    color: var(--color-text_primary);
}

.post-date-info,
.post-read-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.post-meta-info i {
    color: var(--color-primary);
}

/* Social Share Top */
.post-social-share-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.post-social-share-top .share-label {
    font-size: 0.9rem;
    color: var(--color-text_secondary);
    font-weight: 500;
}

.social-share-buttons {
    display: flex;
    gap: 0.75rem;
}

/* Featured Image */
.single-post-featured-image-wrapper {
    background: var(--color-bg_primary);
    padding: 2rem 0;
}

.single-post-featured-image {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.single-post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Post Content Wrapper */
.single-post-content-wrapper {
    padding: 3rem 0;
    background: var(--color-bg_primary);
}

.single-post-content-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* Main Content */
.post-content-main {
    background: var(--color-bg_primary);
}

.entry-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--color-text_primary);
}

/* Content Typography */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--color-text_primary);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.entry-content h2 {
    font-size: 2rem;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.5rem;
}


.entry-content h3 {
    font-size: 1.5rem;
}

.entry-content h4 {
    font-size: 1.25rem;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

.entry-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.entry-content a:hover {
    color: var(--color-primary_dark);
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.entry-content li {
    margin-bottom: 0.75rem;
}

.entry-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--color-text_secondary);
    background: var(--color-bg_secondary);
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.entry-content code {
    background: var(--color-bg_secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--color-primary);
}

.entry-content pre {
    background: var(--color-bg_secondary);
    color: var(--color-text_primary);
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 2rem 0;
}

.entry-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* Post Footer */
.single-post-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--color-border);
}

/* Tags */
.post-tags {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.post-tags i {
    color: var(--color-text_secondary);
    font-size: 1.1rem;
}

.tag-link {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: var(--color-bg_secondary);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.tag-link:hover {
    background: var(--color-primary);
    color: var(--color-text_primary);
    transform: translateY(-2px);
}

/* Social Share Bottom */
.post-social-share-bottom {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--color-bg_secondary);
    border-radius: 12px;
    text-align: center;
}

.post-social-share-bottom h3 {
    font-size: 1.25rem;
    color: var(--color-text_primary);
    margin-bottom: 1.5rem;
}

.social-share-buttons-large {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.social-share-btn-large {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.social-share-btn-large.facebook {
    background: var(--color-primary);
    color: var(--color-text_primary);
}

.social-share-btn-large.twitter {
    background: var(--color-secondary);
    color: var(--color-text_primary);
}

.social-share-btn-large.linkedin {
    background: var(--color-accent);
    color: var(--color-text_primary);
}

.social-share-btn-large.email {
    background: var(--color-text_muted);
    color: var(--color-text_primary);
}

.social-share-btn-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Author Bio Box */
.author-bio-box {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--color-bg_secondary);
    border-radius: 12px;
    margin-top: 3rem;
}

.author-bio-avatar img {
    border-radius: 50%;
    border: 3px solid var(--color-primary);
}

.author-bio-content {
    flex: 1;
}

.author-bio-name {
    font-size: 1.25rem;
    color: var(--color-text_primary);
    margin-bottom: 0.75rem;
}

.author-bio-description {
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.author-posts-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.author-posts-link:hover {
    color: var(--color-primary_dark);
    gap: 0.75rem;
}

/* Post Navigation */
.post-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--color-border);
}

.nav-previous,
.nav-next {
    padding: 1.5rem;
    background: var(--color-bg_secondary);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.nav-previous:hover,
.nav-next:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.nav-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text_secondary);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.nav-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text_primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-title:hover {
    color: var(--color-primary);
}

.nav-next {
    text-align: right;
}

/* Page Links */
.page-links {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.page-links a {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    background: var(--color-primary);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.page-links a:hover {
    background: var(--color-primary_dark);
}

/* Responsive Design */
@media (max-width: 768px) {
    .single-post-title {
        font-size: 1.75rem;
    }
    
    .post-meta-info {
        gap: 1rem;
        font-size: 0.85rem;
    }
    
    .entry-content {
        font-size: 1rem;
    }
    
    .entry-content h2 {
        font-size: 1.5rem;
    }
    
    .author-bio-box {
        flex-direction: column;
        text-align: center;
    }
    
    .post-navigation {
        grid-template-columns: 1fr;
    }
    
    .nav-next {
        text-align: center;
    }
    
    .social-share-buttons-large {
        flex-direction: column;
    }
    
    .social-share-btn-large {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   COMMENTS SECTION STYLES
   ======================================== */

/* Comments Container */
.comments-area {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 2px solid var(--color-border);
}

/* Comments Title */
.comments-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 2rem;
}

/* Comment List */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list .comment {
    margin-bottom: 2rem;
}

/* Individual Comment */
.comment-body {
    background: var(--color-bg_secondary);
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 3px solid var(--color-primary);
}


/* Comment Author */
.comment-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comment-author .avatar {
    border-radius: 50%;
    border: 2px solid var(--color-primary);
}

.comment-author .fn {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-text_primary);
    font-style: normal;
}

.comment-author .says {
    display: none;
}

/* Comment Metadata */
.comment-metadata {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--color-text_secondary);
    margin-bottom: 1rem;
}

.comment-metadata a {
    color: var(--color-text_secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.comment-metadata a:hover {
    color: var(--color-primary);
}

/* Comment Content */
.comment-content {
    color: var(--color-text_primary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.comment-content p {
    margin-bottom: 1rem;
}

/* Reply Link */
.reply {
    margin-top: 0.5rem;
}

.reply a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.reply a:hover {
    background: var(--color-primary_dark);
    transform: translateY(-2px);
}

/* Nested Comments */
.children {
    list-style: none;
    padding-left: 2rem;
    margin-top: 1.5rem;
}

.children .comment-body {
    background: var(--color-bg_primary);
    border-left-color: var(--color-text_muted);
}

/* Comment Form */
.comment-respond {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--color-bg_secondary);
    border-radius: 12px;
}

.comment-reply-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1.5rem;
}

.comment-reply-title small {
    font-size: 0.9rem;
    font-weight: 400;
}

.comment-reply-title small a {
    color: var(--color-primary);
    text-decoration: none;
}

.comment-reply-title small a:hover {
    color: var(--color-primary_dark);
}

/* Comment Form Fields */
.comment-form {
    display: grid;
    gap: 1rem;
}

.comment-form p {
    margin: 0;
}

.comment-form label {
    display: block;
    font-weight: 500;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary_light);
}

.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Comment Submit Button */
.form-submit {
    margin-top: 1rem;
}

.form-submit input[type="submit"] {
    padding: 0.75rem 2rem;
    background: var(--color-primary);
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-submit input[type="submit"]:hover {
    background: var(--color-primary_dark);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-primary);
}

/* Very specific rule for business contact form button */
.business-contact-form .form-submit button.btn.btn-primary,
.business-contact-form .form-submit input[type="submit"] {
    color: #ffffff !important;
}

.business-contact-form .form-submit button.btn.btn-primary:hover,
.business-contact-form .form-submit input[type="submit"]:hover {
    color: #ffffff !important;
}

/* Target the btn-text span specifically */
.business-contact-form .form-submit .btn-text {
    color: #ffffff !important;
}

/* Comment Notes */
.comment-notes,
.logged-in-as {
    font-size: 0.9rem;
    color: var(--color-text_secondary);
    margin-bottom: 1rem;
}

.logged-in-as a {
    color: var(--color-primary);
    text-decoration: none;
}

.logged-in-as a:hover {
    color: var(--color-primary_dark);
    text-decoration: underline;
}

/* Required Field Indicator */
.required {
    color: var(--color-error);
}

/* Comment Awaiting Moderation */
.comment-awaiting-moderation {
    display: block;
    padding: 0.75rem 1rem;
    background: var(--color-warning);
    color: var(--color-text_primary);
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* No Comments Message */
.no-comments {
    text-align: center;
    padding: 2rem;
    color: var(--color-text_secondary);
    font-style: italic;
}

/* Comment Navigation */
.comment-navigation {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.comment-navigation a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.comment-navigation a:hover {
    color: var(--color-primary_dark);
}

/* Responsive Comments */
@media (max-width: 768px) {
    .children {
        padding-left: 1rem;
    }
    
    .comment-respond {
        padding: 1.5rem;
    }
    
    .comment-body {
        padding: 1rem;
    }
}

/* ========================================
   TESTIMONIALS PAGE STYLES
   ======================================== */

/* Testimonials Hero */
.testimonials-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

.testimonials-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.testimonials-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-bg_primary);
}

.testimonials-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
    margin: 0;
}

/* Testimonials Grid Section */
.testimonials-grid-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.testimonials-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.testimonials-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.testimonials-section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

/* Testimonial Card */
.testimonial-card {
    background: var(--color-bg_primary);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Rating Stars */
.testimonial-rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.testimonial-rating .fa-star {
    color: var(--color-text_muted);
    font-size: 1.25rem;
}

.testimonial-rating .fa-star.active {
    color: var(--color-accent);
}

/* Testimonial Quote */
.testimonial-quote {
    position: relative;
    margin-bottom: 1.5rem;
}

.quote-icon {
    color: var(--color-primary);
    font-size: 2rem;
    opacity: 0.2;
    position: absolute;
    top: -10px;
    left: -5px;
}

.testimonial-quote p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text_primary);
    font-style: italic;
    margin: 0;
    padding-left: 2rem;
}

/* Testimonial Author */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-primary);
}

.testimonial-avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text_primary);
    font-size: 1.5rem;
}

.testimonial-author-info {
    flex: 1;
}

.testimonial-author-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text_primary);
    margin: 0 0 0.25rem 0;
}

.testimonial-author-position {
    font-size: 0.9rem;
    color: var(--color-text_secondary);
    margin: 0;
}

.testimonial-author-company {
    font-size: 0.875rem;
    color: var(--color-text_muted);
    margin: 0.25rem 0 0 0;
}

/* CTA Section */
.testimonials-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    text-align: center;
}

.testimonials-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.testimonials-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.testimonials-cta-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
    margin-bottom: 2rem;
}

.testimonials-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.testimonials-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--color-primary);
}

/* Dark Theme Support */
.testimonials-page .testimonials-grid-section {
    background: var(--color-bg_primary);
}

.testimonials-page.business-dark-template .testimonials-grid-section,
body.business-dark-template .testimonials-page .testimonials-grid-section,
.business-dark-template .testimonials-grid-section {
    background: var(--color-bg_primary) !important;
}

.testimonials-page.business-dark-template .testimonial-card,
body.business-dark-template .testimonial-card,
.business-dark-template .testimonial-card {
    background: var(--color-bg_secondary) !important;
    border-color: var(--color-border_dark) !important;
}

body.business-dark-template .testimonials-section-title,
.business-dark-template .testimonials-section-title {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.business-dark-template .testimonials-section-subtitle,
.business-dark-template .testimonials-section-subtitle {
    color: var(--color-text_muted);
}

body.business-dark-template .testimonial-quote p,
.business-dark-template .testimonial-quote p {
    color: var(--color-text_muted);
}

body.business-dark-template .testimonial-author-name,
.business-dark-template .testimonial-author-name {
    color: var(--color-text_primary);
}

body.business-dark-template .testimonial-author,
.business-dark-template .testimonial-author {
    border-top-color: var(--color-border_dark);
}

body.business-dark-template .testimonial-author-position,
.business-dark-template .testimonial-author-position {
    color: var(--color-text_muted);
}

body.business-dark-template .testimonial-author-company,
.business-dark-template .testimonial-author-company {
    color: var(--color-text_secondary);
}

body.business-dark-template .testimonials-cta-section,
.business-dark-template .testimonials-cta-section {
    background: linear-gradient(135deg, var(--color-bg_primary) 0%, var(--color-bg_secondary) 100%);
}

body.business-dark-template .testimonials-cta-title,
.business-dark-template .testimonials-cta-title {
    color: var(--color-text_primary);
}

body.business-dark-template .testimonials-cta-subtitle,
.business-dark-template .testimonials-cta-subtitle {
    color: var(--color-text_muted);
}

/* Responsive Design */
@media (max-width: 768px) {
    .testimonials-hero-main-title {
        font-size: 2rem;
    }
    
    .testimonials-section-title {
        font-size: 2rem;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .testimonials-cta-title {
        font-size: 1.75rem;
    }
}

/* ========================================
   FAQ PAGE STYLES
   ======================================== */

/* FAQ Hero */
.faq-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

.faq-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.faq-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-bg_primary);
}

.faq-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
    margin: 0;
}

/* FAQ Content Section */
.faq-content-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.faq-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    clear: both;
}

.faq-section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
}

/* FAQ Categories */
.faq-categories {
    max-width: 900px;
    margin: 0 auto;
}

.faq-category {
    margin-bottom: 3rem;
}

.faq-category-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text_primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-border);
}

/* FAQ Items */
.faq-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: var(--color-bg_primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px var(--color-primary_light);
}

/* FAQ Question Button */
.faq-question {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg_primary);
    border: none;
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: var(--color-bg_secondary);
}

.faq-question[aria-expanded="true"] {
    background: var(--color-bg_secondary);
}

.faq-question-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text_primary);
    flex: 1;
}

.faq-toggle-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    border-radius: 50%;
    color: var(--color-text_primary);
    transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] .faq-toggle-icon {
    transform: rotate(180deg);
}

/* FAQ Answer */
.faq-answer {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: var(--color-text_primary);
    line-height: 1.7;
}

.faq-answer-content p {
    margin-bottom: 1rem;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}

.faq-answer-content ul,
.faq-answer-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.faq-answer-content li {
    margin-bottom: 0.5rem;
}

/* CTA Section */
.faq-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    text-align: center;
}

.faq-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.faq-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.faq-cta-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
    margin-bottom: 2rem;
}

.faq-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.faq-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--color-primary);
}

/* Dark Theme Support */
.faq-page.business-dark-template .faq-content-section {
    background: var(--color-bg_primary);
}

.faq-page.business-dark-template .faq-section-title {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.faq-page.business-dark-template .faq-section-subtitle {
    color: var(--color-text_muted);
}

.faq-page.business-dark-template .faq-category-title {
    color: var(--color-text_primary);
    border-bottom-color: var(--color-border_dark);
}

.faq-page.business-dark-template .faq-item {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.faq-page.business-dark-template .faq-item:hover {
    border-color: var(--color-primary);
}

.faq-page.business-dark-template .faq-question {
    background: var(--color-bg_secondary);
}

.faq-page.business-dark-template .faq-question:hover {
    background: var(--color-bg_primary);
}

.faq-page.business-dark-template .faq-question[aria-expanded="true"] {
    background: var(--color-bg_primary);
}

.faq-page.business-dark-template .faq-question-text {
    color: var(--color-text_primary);
}

.faq-page.business-dark-template .faq-answer-content {
    color: var(--color-text_muted);
}

.faq-page.business-dark-template .faq-cta-section {
    background: linear-gradient(135deg, var(--color-bg_primary) 0%, var(--color-bg_secondary) 100%);
}

.faq-page.business-dark-template .faq-cta-title {
    color: var(--color-text_primary);
}

.faq-page.business-dark-template .faq-cta-subtitle {
    color: var(--color-text_muted);
}

/* Responsive Design */
@media (max-width: 768px) {
    .faq-hero-main-title {
        font-size: 2rem;
    }
    
    .faq-section-title {
        font-size: 2rem;
    }
    
    .faq-category-title {
        font-size: 1.5rem;
    }
    
    .faq-question {
        padding: 1rem;
    }
    
    .faq-question-text {
        font-size: 1rem;
    }
    
    .faq-answer-content {
        padding: 0 1rem 1rem 1rem;
    }
    
    .faq-cta-title {
        font-size: 1.75rem;
    }
}

/* ========================================
   FEATURES PAGE STYLES
   ======================================== */

/* Features Hero */
.features-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

.features-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.features-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-bg_primary);
}

.features-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
    margin: 0;
    max-width: 700px;
    margin: 0 auto;
}

/* Features Section Header */
.features-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.features-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.features-section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
}

/* Feature Highlights Section */
.features-highlights-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.features-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-highlight-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--color-bg_secondary);
    border-radius: 16px;
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
}

.feature-highlight-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.feature-highlight-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    border-radius: 50%;
    box-shadow: 0 4px 12px var(--color-primary);
}

.feature-highlight-icon i {
    font-size: 2rem;
    color: var(--color-text_primary);
}

.feature-highlight-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.feature-highlight-card p {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin: 0;
}

/* Detailed Features Section */
.features-detailed-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.features-detailed-list {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.feature-detailed-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-detailed-item.left {
    direction: ltr;
}

.feature-detailed-item.right {
    direction: rtl;
}

.feature-detailed-item.right .feature-detailed-content {
    direction: ltr;
}

.feature-detailed-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.feature-detailed-item:hover .feature-detailed-image {
    transform: scale(1.02);
}

.feature-detailed-image img {
    width: 100%;
    height: auto;
    display: block;
}

.feature-detailed-content h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1.5rem;
}

.feature-detailed-content p {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.feature-detailed-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-detailed-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--color-text_primary);
}

.feature-detailed-benefits i {
    color: var(--color-success);
    font-size: 1.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* Video Section */
.features-video-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.features-video-wrapper {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.features-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

/* Comparison Section */
.features-comparison-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.comparison-table-wrapper {
    max-width: 800px;
    margin: 0 auto;
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg_primary);
}

.comparison-table thead {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
}

.comparison-table thead th {
    padding: 1.5rem 2rem;
    text-align: center;
    color: var(--color-text_primary);
    font-weight: 700;
    font-size: 1.125rem;
}

.comparison-table thead th:first-child {
    text-align: center;
}

.comparison-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.3s ease;
}

.comparison-table tbody tr:hover {
    background-color: var(--color-bg_secondary);
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

.comparison-table tbody td {
    padding: 1.25rem 2rem;
    font-size: 1rem;
    color: var(--color-text_primary);
}

.comparison-table tbody td:first-child {
    font-weight: 600;
}

.comparison-table tbody td.comparison-check {
    text-align: center;
}

.comparison-table tbody td.comparison-check i {
    font-size: 1.5rem;
}

.comparison-table tbody td.comparison-check .fa-check-circle {
    color: var(--color-success);
}

.comparison-table tbody td.comparison-check .fa-times-circle {
    color: var(--color-error);
}

/* CTA Section */
.features-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    text-align: center;
}

.features-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.features-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.features-cta-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_primary);
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.features-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.features-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Dark Theme Support */
.features-page.business-dark-template .features-highlights-section {
    background: var(--color-bg_primary);
}

.features-page.business-dark-template .features-section-title {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.features-page.business-dark-template .features-section-subtitle {
    color: var(--color-text_muted);
}

.features-page.business-dark-template .feature-highlight-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.features-page.business-dark-template .feature-highlight-card h3 {
    color: var(--color-text_primary);
}

.features-page.business-dark-template .feature-highlight-card p {
    color: var(--color-text_muted);
}

.features-page.business-dark-template .features-detailed-section {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.features-page.business-dark-template .feature-detailed-content h3 {
    color: var(--color-text_primary);
}

.features-page.business-dark-template .feature-detailed-content p {
    color: var(--color-text_muted);
}

.features-page.business-dark-template .feature-detailed-benefits li {
    color: var(--color-text_muted);
}

.features-page.business-dark-template .features-video-section {
    background: var(--color-bg_primary);
}

.features-page.business-dark-template .features-comparison-section {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.features-page.business-dark-template .comparison-table {
    background: var(--color-bg_secondary);
    border: 1px solid var(--color-border_dark);
}

.features-page.business-dark-template .comparison-table tbody tr {
    border-bottom-color: var(--color-border_dark);
}

.features-page.business-dark-template .comparison-table tbody tr:hover {
    background-color: var(--color-bg_primary);
}

.features-page.business-dark-template .comparison-table tbody td {
    color: var(--color-text_muted);
}

/* Responsive Design */
@media (max-width: 768px) {
    .features-hero-main-title {
        font-size: 2rem;
    }
    
    .features-section-title {
        font-size: 2rem;
    }
    
    .features-highlights-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .feature-detailed-item {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .feature-detailed-item.right {
        direction: ltr;
    }
    
    .feature-detailed-content h3 {
        font-size: 1.5rem;
    }
    
    .comparison-table-wrapper {
        border-radius: 8px;
    }
    
    .comparison-table thead th,
    .comparison-table tbody td {
        padding: 1rem 1rem;
        font-size: 0.9rem;
    }
    
    .features-cta-title {
        font-size: 1.75rem;
    }
}

/* ========================================
   CAREERS PAGE STYLES
   ======================================== */

/* Careers Hero */
.careers-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

.careers-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.careers-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-bg_primary);
}

.careers-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
    margin: 0;
    max-width: 700px;
    margin: 0 auto;
}

/* Culture Section */
.careers-culture-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.careers-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.careers-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    clear: both;
}

.careers-section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
}

.culture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.culture-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--color-bg_secondary);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.culture-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.culture-card i {
    font-size: 3rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.culture-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.culture-card p {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin: 0;
}

/* Benefits Section */
.careers-benefits-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.benefit-card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--color-bg_primary);
    border-radius: 12px;
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
}

.benefit-card:hover {
    border-color: var(--color-primary);
    transform: translateX(8px);
}

.benefit-card i {
    font-size: 2rem;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.benefit-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
}

.benefit-card p {
    font-size: 0.95rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin: 0;
}

/* Jobs Section */
.careers-jobs-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

/* Filter */
.careers-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    background: var(--color-bg_secondary);
    border: 2px solid var(--color-border);
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-text_secondary);
}

.filter-btn:hover {
    background: var(--color-border);
    border-color: var(--color-text_muted);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    border-color: transparent;
}

/* Jobs List */
.jobs-list {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.job-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg_primary);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateX(0);
}

.job-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.job-title-section {
    flex: 1;
}

.job-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.job-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text_secondary);
}

.job-meta i {
    color: var(--color-primary);
    font-size: 0.875rem;
}

.job-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.job-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--color-primary);
    gap: 0.75rem;
}

.job-apply-btn i {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.job-apply-btn:hover i {
    transform: translateX(4px);
}

.job-description {
    padding-top: 1.5rem;
    border-top: 2px solid var(--color-border);
}

.job-description p {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin: 0;
}

/* Process Section */
.careers-process-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.process-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 40px;
    bottom: 40px;
    width: 3px;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
}

.process-step {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
}

.process-step:last-child {
    margin-bottom: 0;
}

.step-number {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    border-radius: 50%;
    box-shadow: 0 4px 12px var(--color-primary);
    position: relative;
    z-index: 1;
}

.step-content {
    flex: 1;
    padding-top: 0.5rem;
}

.step-content h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.75rem;
}

.step-content p {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin: 0;
}

/* CTA Section */
.careers-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    text-align: center;
}

.careers-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.careers-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.careers-cta-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_primary);
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.careers-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.careers-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Dark Theme Support */
.careers-page.business-dark-template .careers-culture-section {
    background: var(--color-bg_primary);
}

.careers-page.business-dark-template .careers-section-title {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.careers-page.business-dark-template .careers-section-subtitle {
    color: var(--color-text_muted);
}

.careers-page.business-dark-template .culture-card {
    background: var(--color-bg_secondary);
}

.careers-page.business-dark-template .culture-card h3 {
    color: var(--color-text_primary);
}

.careers-page.business-dark-template .culture-card p {
    color: var(--color-text_muted);
}

.careers-page.business-dark-template .careers-benefits-section {
    background: linear-gradient(135deg, var(--color-bg_primary) 0%, var(--color-bg_secondary) 100%);
}

.careers-page.business-dark-template .benefit-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.careers-page.business-dark-template .benefit-card h4 {
    color: var(--color-text_primary);
}

.careers-page.business-dark-template .benefit-card p {
    color: var(--color-text_muted);
}

.careers-page.business-dark-template .careers-jobs-section {
    background: var(--color-bg_primary);
}

.careers-page.business-dark-template .filter-btn {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
    color: var(--color-text_muted);
}

.careers-page.business-dark-template .filter-btn:hover {
    background: #374151;
    border-color: #4b5563;
}

.careers-page.business-dark-template .job-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.careers-page.business-dark-template .job-title {
    color: var(--color-text_primary);
}

.careers-page.business-dark-template .job-meta span {
    color: var(--color-text_muted);
}

.careers-page.business-dark-template .job-description {
    border-top-color: var(--color-border_dark);
}

.careers-page.business-dark-template .job-description p {
    color: var(--color-text_muted);
}

.careers-page.business-dark-template .careers-process-section {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.careers-page.business-dark-template .step-content h4 {
    color: var(--color-text_primary);
}

.careers-page.business-dark-template .step-content p {
    color: var(--color-text_muted);
}

/* Responsive Design */
@media (max-width: 768px) {
    .careers-hero-main-title {
        font-size: 2rem;
    }
    
    .careers-section-title {
        font-size: 2rem;
    }
    
    .culture-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .benefit-card {
        flex-direction: column;
        text-align: center;
    }
    
    .job-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .job-apply-btn {
        width: 100%;
        justify-content: center;
    }
    
    .job-meta {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .process-timeline::before {
        left: 20px;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }
    
    .process-step {
        gap: 1.5rem;
    }
    
    .careers-filter {
        gap: 0.5rem;
    }
    
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .careers-cta-title {
        font-size: 1.75rem;
    }
}

/* ========================================
   CASE STUDIES PAGE STYLES
   ======================================== */

/* Case Studies Hero */
.case-studies-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

.case-studies-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.case-studies-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-bg_primary);
}

.case-studies-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
    margin: 0;
    max-width: 700px;
    margin: 0 auto;
}

/* Stats Section */
.case-studies-stats-section {
    padding: 4rem 0;
    background: var(--color-bg_secondary);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-card {
    text-align: center;
    padding: 2rem 1rem;
}

.stat-card i {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: var(--color-text_secondary);
    margin: 0;
}

/* Case Studies Content Section */
.case-studies-content-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.case-studies-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.case-studies-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.case-studies-section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
}

/* Filter Buttons */
.case-studies-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    background: var(--color-bg_secondary);
    border: 2px solid var(--color-border);
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-text_secondary);
}

.filter-btn:hover {
    background: var(--color-border);
    border-color: var(--color-text_muted);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    border-color: transparent;
}

/* Case Studies Grid */
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Case Study Card */
.case-study-card {
    background: var(--color-bg_primary);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.case-study-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

/* Case Study Image */
.case-study-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.case-study-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.case-study-card:hover .case-study-overlay {
    opacity: 1;
}

.view-case-study {
    color: var(--color-text_primary);
    font-weight: 700;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Case Study Content */
.case-study-content {
    padding: 2rem;
}

.case-study-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-border);
}

.case-study-client {
    font-weight: 700;
    color: var(--color-text_primary);
    font-size: 1rem;
}

.case-study-industry {
    background: #667eea;
    color: var(--color-text_primary);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.case-study-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1.5rem;
}

/* Case Study Details */
.case-study-details {
    margin-bottom: 1.5rem;
}

.case-study-section {
    margin-bottom: 1rem;
}

.case-study-section h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.case-study-section p {
    font-size: 0.95rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin: 0;
}

/* Case Study Results */
.case-study-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--color-bg_secondary);
    border-radius: 12px;
}

.result-item {
    text-align: center;
}

.result-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.result-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text_secondary);
}

/* Case Study Link */
.case-study-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.case-study-link:hover {
    color: var(--color-primary_dark);
    gap: 0.75rem;
}

.case-study-link i {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.case-study-link:hover i {
    transform: translateX(4px);
}

/* CTA Section */
.case-studies-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    text-align: center;
}

.case-studies-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.case-studies-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.case-studies-cta-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
    margin-bottom: 2rem;
}

.case-studies-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.case-studies-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--color-primary);
}

/* Dark Theme Support */
.case-studies-page.business-dark-template .case-studies-stats-section {
    background: var(--color-bg_secondary);
}

.case-studies-page.business-dark-template .stat-number {
    color: var(--color-text_primary);
}

.case-studies-page.business-dark-template .stat-label {
    color: var(--color-text_muted);
}

.case-studies-page.business-dark-template .case-studies-content-section {
    background: var(--color-bg_primary);
}

.case-studies-page.business-dark-template .case-studies-section-title {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.case-studies-page.business-dark-template .case-studies-section-subtitle {
    color: var(--color-text_muted);
}

.case-studies-page.business-dark-template .filter-btn {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
    color: var(--color-text_muted);
}

.case-studies-page.business-dark-template .filter-btn:hover {
    background: #374151;
    border-color: #4b5563;
}

.case-studies-page.business-dark-template .case-study-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.case-studies-page.business-dark-template .case-study-meta {
    border-bottom-color: var(--color-border_dark);
}

.case-studies-page.business-dark-template .case-study-client {
    color: var(--color-text_primary);
}

.case-studies-page.business-dark-template .case-study-title {
    color: var(--color-text_primary);
}

.case-studies-page.business-dark-template .case-study-section p {
    color: var(--color-text_muted);
}

.case-studies-page.business-dark-template .case-study-results {
    background: var(--color-bg_primary);
}

.case-studies-page.business-dark-template .result-label {
    color: var(--color-text_muted);
}

.case-studies-page.business-dark-template .case-studies-cta-section {
    background: linear-gradient(135deg, var(--color-bg_primary) 0%, var(--color-bg_secondary) 100%);
}

.case-studies-page.business-dark-template .case-studies-cta-title {
    color: var(--color-text_primary);
}

.case-studies-page.business-dark-template .case-studies-cta-subtitle {
    color: var(--color-text_muted);
}

/* Responsive Design */
@media (max-width: 768px) {
    .case-studies-hero-main-title {
        font-size: 2rem;
    }
    
    .case-studies-section-title {
        font-size: 2rem;
    }
    
    .case-studies-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .case-study-image {
        height: 200px;
    }
    
    .case-studies-filter {
        gap: 0.5rem;
    }
    
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .case-studies-cta-title {
        font-size: 1.75rem;
    }
}

/* ========================================
   PRICING PAGE STYLES
   ======================================== */

/* Pricing Hero */
.pricing-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

.pricing-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.pricing-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-bg_primary);
}

.pricing-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
    margin: 0;
}

/* Pricing Content Section */
.pricing-content-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.pricing-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.pricing-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    clear: both;
}

.pricing-section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
    margin-bottom: 2rem;
}

/* Billing Toggle */
.pricing-billing-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    background: var(--color-bg_secondary);
    padding: 0.5rem;
    border-radius: 50px;
    max-width: 400px;
    margin: 0 auto;
}

.billing-toggle-btn {
    flex: 1;
    padding: 0.75rem 2rem;
    background: transparent;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-text_secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.billing-toggle-btn.active {
    background: var(--color-bg_primary);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.save-badge {
    background: #10b981;
    color: var(--color-text_primary);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Pricing Plans Grid */
.pricing-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto 0;
}

/* Pricing Plan Card */
.pricing-plan-card {
    background: var(--color-bg_primary);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

.pricing-plan-card.featured {
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
    transform: scale(1.05);
}

.pricing-plan-card.featured:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 16px 40px rgba(102, 126, 234, 0.25);
}

/* Featured Badge */
.featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Plan Header */
.pricing-plan-header {
    text-align: center;
    margin-bottom: 2rem;
}

.pricing-plan-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
}

.pricing-plan-description {
    font-size: 0.95rem;
    color: var(--color-text_secondary);
    margin: 0;
}

/* Plan Price */
.pricing-plan-price {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--color-border);
}

.price-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.price-currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text_secondary);
}

.price-amount {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    line-height: 1;
}

.price-period {
    font-size: 1rem;
    color: var(--color-text_muted);
}

/* Plan Features */
.pricing-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    flex: 1;
}

.pricing-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
}

.pricing-plan-features i {
    color: var(--color-success);
    font-size: 1.125rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* Plan Button */
.pricing-plan-footer {
    margin-top: auto;
}

.pricing-plan-button {
    display: block;
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

.pricing-plan-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--color-primary);
}

.pricing-plan-card.featured .pricing-plan-button {
    background: linear-gradient(135deg, var(--color-primary_dark) 0%, var(--color-primary) 100%);
    box-shadow: 0 4px 12px var(--color-primary);
}

/* CTA Section */
.pricing-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    text-align: center;
}

.pricing-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.pricing-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.pricing-cta-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
    margin-bottom: 2rem;
}

.pricing-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.pricing-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--color-primary);
}

/* Dark Theme Support */
.pricing-page.business-dark-template .pricing-content-section {
    background: var(--color-bg_primary);
}

.pricing-page.business-dark-template .pricing-section-title {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pricing-page.business-dark-template .pricing-section-subtitle {
    color: var(--color-text_muted);
}

.pricing-page.business-dark-template .pricing-billing-toggle {
    background: var(--color-bg_secondary);
}

.pricing-page.business-dark-template .billing-toggle-btn {
    color: var(--color-text_muted);
}

.pricing-page.business-dark-template .billing-toggle-btn.active {
    background: var(--color-bg_primary);
    color: var(--color-primary);
}

.pricing-page.business-dark-template .pricing-plan-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.pricing-page.business-dark-template .pricing-plan-card.featured {
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px var(--color-primary);
}

.pricing-page.business-dark-template .pricing-plan-name {
    color: var(--color-text_primary);
}

.pricing-page.business-dark-template .pricing-plan-description {
    color: var(--color-text_muted);
}

.pricing-page.business-dark-template .pricing-plan-price {
    border-bottom-color: var(--color-border_dark);
}

.pricing-page.business-dark-template .price-amount {
    color: var(--color-text_primary);
}

.pricing-page.business-dark-template .pricing-plan-features li {
    color: var(--color-text_muted);
}

.pricing-page.business-dark-template .pricing-cta-section {
    background: linear-gradient(135deg, var(--color-bg_primary) 0%, var(--color-bg_secondary) 100%);
}

.pricing-page.business-dark-template .pricing-cta-title {
    color: var(--color-text_primary);
}

.pricing-page.business-dark-template .pricing-cta-subtitle {
    color: var(--color-text_muted);
}

/* Responsive Design */
@media (max-width: 768px) {
    .pricing-hero-main-title {
        font-size: 2rem;
    }
    
    .pricing-section-title {
        font-size: 2rem;
    }
    
    .pricing-plans-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .pricing-plan-card.featured {
        transform: scale(1);
    }
    
    .pricing-plan-card.featured:hover {
        transform: translateY(-8px) scale(1);
    }
    
    .price-amount {
        font-size: 2.5rem;
    }
    
    .pricing-billing-toggle {
        flex-direction: column;
        max-width: 250px;
    }
    
    .pricing-cta-title {
        font-size: 1.75rem;
    }
}

/* ========================================
   LEGAL PAGES STYLES (Privacy, Terms, Cookie)
   ======================================== */

/* Shared Legal Page Hero */
.privacy-hero-wrapper,
.terms-hero-wrapper,
.cookie-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 4rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.privacy-hero-container,
.terms-hero-container,
.cookie-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.privacy-hero-main-title,
.terms-hero-main-title,
.cookie-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-bg_primary);
}

.privacy-hero-main-subtitle,
.terms-hero-main-subtitle,
.cookie-hero-main-subtitle {
    font-size: 1.125rem;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.privacy-last-updated,
.terms-last-updated,
.cookie-last-updated {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

/* Legal Content */
.privacy-content-section,
.terms-content-section,
.cookie-content-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.privacy-content,
.terms-content,
.cookie-content {
    max-width: 800px;
    margin: 0 auto;
}

.privacy-section,
.terms-section,
.cookie-section {
    margin-bottom: 3rem;
}

.privacy-section h2,
.terms-section h2,
.cookie-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.privacy-text,
.terms-text,
.cookie-text {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.8;
}

.privacy-text p,
.terms-text p,
.cookie-text p {
    margin-bottom: 1rem;
}

/* Dark Theme for Legal Pages */
.privacy-policy-page.business-dark-template .privacy-content-section,
.terms-page.business-dark-template .terms-content-section,
.cookie-policy-page.business-dark-template .cookie-content-section {
    background: var(--color-bg_primary);
}

.privacy-policy-page.business-dark-template .privacy-section h2,
.terms-page.business-dark-template .terms-section h2,
.cookie-policy-page.business-dark-template .cookie-section h2 {
    color: var(--color-text_primary);
}

.privacy-policy-page.business-dark-template .privacy-text,
.terms-page.business-dark-template .terms-text,
.cookie-policy-page.business-dark-template .cookie-text {
    color: var(--color-text_muted);
}

/* ========================================
   RESOURCES PAGE STYLES
   ======================================== */

.resources-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.resources-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.resources-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.resources-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
}

.resources-content-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.resources-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.resources-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    clear: both;
}

.resources-section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
}

.resources-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.resource-card {
    background: var(--color-bg_primary);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.resource-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.resource-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.resource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resource-type-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #667eea;
    color: var(--color-text_primary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.resource-content {
    padding: 2rem;
}

.resource-category {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.resource-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.resource-content p {
    font-size: 0.95rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.resource-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.resource-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--color-primary);
}

.resources-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    text-align: center;
}

.resources-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.resources-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.resources-cta-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
    margin-bottom: 2rem;
}

.resources-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.resources-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--color-primary);
}

/* Dark Theme */
.resources-page.business-dark-template .resources-content-section {
    background: var(--color-bg_primary);
}

.resources-page.business-dark-template .resource-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.resources-page.business-dark-template .resource-content h3 {
    color: var(--color-text_primary);
}

.resources-page.business-dark-template .resource-content p {
    color: var(--color-text_muted);
}

.resources-page.business-dark-template .resources-cta-section {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.resources-page.business-dark-template .resources-cta-title {
    color: var(--color-text_primary);
}

.resources-page.business-dark-template .resources-cta-subtitle {
    color: var(--color-text_muted);
}

/* ========================================
   PARTNERS PAGE STYLES
   ======================================== */

.partners-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.partners-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.partners-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.partners-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
}

.partners-content-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.partners-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.partners-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    clear: both;
}

.partners-section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.partner-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--color-bg_secondary);
    border-radius: 12px;
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
    min-height: 150px;
}

.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary);
}

.partner-card img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

.partner-placeholder {
    font-weight: 600;
    color: var(--color-text_secondary);
}

.partners-integrations-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.integration-card {
    padding: 2rem;
    background: var(--color-bg_primary);
    border-radius: 12px;
    border: 2px solid var(--color-border);
    text-align: center;
    transition: all 0.3s ease;
}

.integration-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
}

.integration-logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.integration-logo img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

.integration-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.75rem;
}

.integration-card p {
    font-size: 0.95rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
}

.partners-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    text-align: center;
}

.partners-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.partners-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.partners-cta-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_primary);
    opacity: 0.9;
    margin-bottom: 2rem;
}

.partners-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.partners-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Dark Theme */
.partners-page.business-dark-template .partners-content-section {
    background: var(--color-bg_primary);
}

.partners-page.business-dark-template .partner-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.partners-page.business-dark-template .partners-integrations-section {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.partners-page.business-dark-template .integration-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.partners-page.business-dark-template .integration-card h4 {
    color: var(--color-text_primary);
}

.partners-page.business-dark-template .integration-card p {
    color: var(--color-text_muted);
}

/* Dark Theme Partner Placeholder */
.business-dark-template .partner-placeholder-text {
    color: #9ca3af;
}

.business-dark-template .partner-placeholder-text i {
    color: #4b5563;
}

.business-dark-template .partner-placeholder-text span {
    color: #6b7280;
}

/* ========================================
   THANK YOU PAGE STYLES
   ======================================== */

.thank-you-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.thank-you-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.success-icon {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.thank-you-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.thank-you-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
}

.thank-you-message-section {
    padding: 3rem 0;
    background: var(--color-bg_secondary);
}

.thank-you-message {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.125rem;
    color: var(--color-text_secondary);
    line-height: 1.8;
}

.thank-you-steps-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    text-align: center;
}

.thank-you-steps-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.step-card {
    padding: 2rem;
}

.step-card i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.step-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.75rem;
}

.step-card p {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
}

.thank-you-social-section {
    padding: 3rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    text-align: center;
}

.thank-you-social-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1.5rem;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #667eea;
    color: var(--color-text_primary);
    border-radius: 50%;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px var(--color-primary);
}

.thank-you-cta-section {
    padding: 4rem 0;
    background: var(--color-bg_primary);
    text-align: center;
}

.thank-you-cta-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.thank-you-cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.thank-you-cta-button.secondary {
    background: var(--color-bg_primary);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.thank-you-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--color-primary);
}

/* Dark Theme */
.thank-you-page.business-dark-template .thank-you-message-section {
    background: var(--color-bg_secondary);
}

.thank-you-page.business-dark-template .thank-you-message {
    color: var(--color-text_muted);
}

.thank-you-page.business-dark-template .thank-you-steps-section {
    background: var(--color-bg_primary);
}

.thank-you-page.business-dark-template .step-card h3 {
    color: var(--color-text_primary);
}

.thank-you-page.business-dark-template .step-card p {
    color: var(--color-text_muted);
}

.thank-you-page.business-dark-template .thank-you-social-section {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.thank-you-page.business-dark-template .thank-you-social-section h2 {
    color: var(--color-text_primary);
}

.thank-you-page.business-dark-template .thank-you-cta-section {
    background: var(--color-bg_primary);
}

.thank-you-page.business-dark-template .thank-you-cta-section h2 {
    color: var(--color-text_primary);
}

/* ========================================
   LANDING PAGE STYLES
   ======================================== */

.landing-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.landing-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.landing-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.landing-hero-main-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.landing-hero-main-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    line-height: 1.6;
}

.landing-hero-button {
    display: inline-block;
    padding: 1.25rem 2.5rem;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.landing-hero-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.landing-hero-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.landing-benefits-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    text-align: center;
}

.landing-benefits-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-features-section {
    padding: 3rem 0 2rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    text-align: center;
}

.landing-features-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.features-list {
    list-style: none;
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    font-size: 1.125rem;
    color: var(--color-text_primary);
    border-bottom: 1px solid var(--color-border);
}

.features-list li:last-child {
    border-bottom: none;
}

.features-list i {
    color: var(--color-success);
    font-size: 1.25rem;
}

.landing-testimonial-section {
    padding: 2rem 0 3rem 0;
    background: var(--color-bg_primary);
}

.testimonial-card {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    border-radius: 16px;
    position: relative;
}

.testimonial-card .fa-quote-left {
    font-size: 3rem;
    color: var(--color-primary);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.testimonial-quote {
    font-size: 1.5rem;
    font-style: italic;
    color: var(--color-text_primary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.testimonial-author strong {
    font-size: 1.125rem;
    color: var(--color-primary);
}

.testimonial-author span {
    font-size: 0.95rem;
    color: var(--color-text_secondary);
}

.landing-form-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
}

.form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 3rem;
    background: var(--color-bg_primary);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.form-container h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
    text-align: center;
}

.form-container p {
    text-align: center;
    color: var(--color-text_secondary);
    margin-bottom: 2rem;
}

/* Dark Theme */
.landing-page.business-dark-template .landing-benefits-section {
    background: var(--color-bg_primary);
}

.landing-page.business-dark-template .landing-features-section {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.landing-page.business-dark-template .features-list li {
    color: var(--color-text_muted);
    border-bottom-color: var(--color-border_dark);
}

.landing-page.business-dark-template .landing-testimonial-section {
    background: var(--color-bg_primary);
}

.landing-page.business-dark-template .testimonial-card {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.landing-page.business-dark-template .testimonial-quote {
    color: var(--color-text_primary);
}

.landing-page.business-dark-template .form-container {
    background: var(--color-bg_secondary);
}

.landing-page.business-dark-template .form-container h2 {
    color: var(--color-text_primary);
}

.landing-page.business-dark-template .form-container p {
    color: var(--color-text_muted);
}

/* ========================================
   PRESS/MEDIA KIT PAGE STYLES
   ======================================== */

.press-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.press-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.press-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.press-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
}

.press-about-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.press-about-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.press-about-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.125rem;
    color: var(--color-text_secondary);
    line-height: 1.8;
}

.press-assets-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.press-assets-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.asset-card {
    padding: 2rem;
    background: var(--color-bg_primary);
    border-radius: 12px;
    border: 2px solid var(--color-border);
    text-align: center;
    transition: all 0.3s ease;
}

.asset-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
}

.asset-card i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.asset-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.75rem;
}

.asset-card p {
    font-size: 0.95rem;
    color: var(--color-text_secondary);
    margin-bottom: 1.5rem;
}

.asset-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.asset-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--color-primary);
}

.press-news-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.press-news-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.news-list {
    max-width: 800px;
    margin: 0 auto;
}

.news-item {
    padding: 2rem;
    border-bottom: 2px solid var(--color-border);
}

.news-item:last-child {
    border-bottom: none;
}

.news-date {
    display: block;
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.news-item h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
}

.news-outlet {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text_secondary);
    margin-bottom: 1rem;
}

.news-item a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.news-item a:hover {
    color: var(--color-primary_dark);
    gap: 0.75rem;
}

.press-contact-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    text-align: center;
    color: var(--color-text_primary);
}

.press-contact-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.press-contact-info {
    max-width: 600px;
    margin: 0 auto;
}

.press-contact-info p {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.press-contact-info a {
    color: var(--color-accent);
    text-decoration: none;
}

.press-contact-info a:hover {
    text-decoration: underline;
}

/* Dark Theme */
.press-page.business-dark-template .press-about-section {
    background: var(--color-bg_primary);
}

.press-page.business-dark-template .press-about-content {
    color: var(--color-text_muted);
}

.press-page.business-dark-template .press-assets-section {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.press-page.business-dark-template .asset-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.press-page.business-dark-template .asset-card h3 {
    color: var(--color-text_primary);
}

.press-page.business-dark-template .asset-card p {
    color: var(--color-text_muted);
}

.press-page.business-dark-template .press-news-section {
    background: var(--color-bg_primary);
}

.press-page.business-dark-template .news-item {
    border-bottom-color: var(--color-border_dark);
}

.press-page.business-dark-template .news-item h3 {
    color: var(--color-text_primary);
}

.press-page.business-dark-template .news-outlet {
    color: var(--color-text_muted);
}

/* ========================================
   EVENTS PAGE STYLES
   ======================================== */

.events-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.events-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.events-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.events-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
}

.events-upcoming-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.events-upcoming-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.event-card {
    background: var(--color-bg_primary);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
}

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.event-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #10b981;
    color: var(--color-text_primary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.event-content {
    padding: 2rem;
}

.event-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-border);
}

.event-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text_secondary);
}

.event-meta i {
    color: var(--color-primary);
}

.event-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.event-content p {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.event-register-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.event-register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--color-primary);
    gap: 0.75rem;
}

.events-past-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.events-past-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.events-list {
    max-width: 800px;
    margin: 0 auto;
}

.event-past-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: var(--color-bg_primary);
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
}

.event-past-item:hover {
    border-color: var(--color-primary);
}

.event-past-info h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
}

.event-past-info span {
    font-size: 0.95rem;
    color: var(--color-text_secondary);
}

.event-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #667eea;
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.event-watch-btn:hover {
    background: #764ba2;
    transform: translateY(-2px);
}

.events-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    text-align: center;
}

.events-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.events-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.events-cta-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_primary);
    opacity: 0.9;
    margin-bottom: 2rem;
}

.events-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.events-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Dark Theme */
.events-page.business-dark-template .events-upcoming-section {
    background: var(--color-bg_primary);
}

.events-page.business-dark-template .event-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.events-page.business-dark-template .event-meta {
    border-bottom-color: var(--color-border_dark);
}

.events-page.business-dark-template .event-meta span {
    color: var(--color-text_muted);
}

.events-page.business-dark-template .event-content h3 {
    color: var(--color-text_primary);
}

.events-page.business-dark-template .event-content p {
    color: var(--color-text_muted);
}

.events-page.business-dark-template .events-past-section {
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.events-page.business-dark-template .event-past-item {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.events-page.business-dark-template .event-past-info h4 {
    color: var(--color-text_primary);
}

.events-page.business-dark-template .event-past-info span {
    color: var(--color-text_muted);
}

/* Responsive */
@media (max-width: 768px) {
    .landing-hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .landing-hero-main-title {
        font-size: 2.5rem;
    }
    
    .events-grid {
        grid-template-columns: 1fr;
    }
    
    .event-past-item {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Footer styles */
.site-footer {
    background: var(--color-text_primary);
    color: var(--color-text_primary);
    padding: 2rem 0;
    margin-top: auto;
}

.site-footer .container {
    text-align: center;
}

/* Button styles */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #007cba;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.btn:hover {
    background: #005a87;
    color: #ffffff;
}

/* Form styles */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

/* Utility classes */
.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 2rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

/* Mobile Navigation Styles */
.header-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--color-text_primary);
    transition: color 0.3s ease;
    z-index: 1000;
}



.header-toggle:hover {
    color: var(--color-primary);
}

.header-toggle.active {
    color: var(--color-primary);
}

.header-toggle svg {
    width: 24px;
    height: 24px;
}

/* Responsive design */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
        gap: 1rem;
        position: relative;
        padding-top: 3rem;
    }
    
    .header-toggle {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: #007cba;
        border: none;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        color: var(--color-text_primary);
        font-weight: 600;
        padding: 0.75rem;
        z-index: 999;
        transition: all 0.3s ease;
    }
    
    .header-toggle:hover {
        background: #005a87;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    
    .site-branding {
        order: 1;
        text-align: center;
        width: 100%;
    }
    
    .site-navigation {
        order: 2;
        width: 100%;
    }
    
    .site-navigation {
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: var(--color-bg_primary);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .site-navigation.nav-open {
        max-height: 500px;
        padding: 1rem 0;
    }
    
    .site-navigation ul {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1rem 0;
    }
    
    .site-navigation li {
        border-bottom: 1px solid var(--color-border);
        padding: 0.5rem 0;
    }
    
    .site-navigation li:last-child {
        border-bottom: none;
    }
}

/* ===== FRONT PAGE STYLES ===== */

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: white;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-align: center;
}

.hero-highlight {
    color: var(--color-accent);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
    display: block;
    font-size: 2rem;
    color: var(--color-accent);
    margin-top: 0.5rem;
    font-weight: 600;
}

.hero-subtitle {
    display: block;
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-top: 0.5rem;
}

.hero-description {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    line-height: 1.6;
    text-align: center;
}

.hero-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    justify-content: flex-start;
}

.stat-item {
    text-align: center;
}

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

.stat-label {
    font-size: 0.9rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.btn-hero {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.btn-secondary {
    background: transparent;
    border: 2px solid white;
    color: white;
}

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

/* Resume Showcase */
.resume-showcase {
    position: relative;
    perspective: 1000px;
}

.resume-preview {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    color: var(--color-text_primary);
    max-width: 450px;
    width: 100%;
    transform: rotateY(-5deg) rotateX(5deg);
    transition: all 0.3s ease;
    position: relative;
}

.resume-preview:hover {
    transform: rotateY(0deg) rotateX(0deg) translateY(-10px);
    box-shadow: 0 35px 70px rgba(0,0,0,0.2);
}

.resume-preview::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--color-accent), var(--color-accent_alt));
    border-radius: 22px;
    z-index: -1;
    opacity: 0.7;
}

.resume-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    color: var(--color-text_primary);
    max-width: 400px;
    width: 100%;
}

.resume-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid #f0f0f0;
}

.resume-avatar {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.resume-info h3 {
    margin: 0 0 0.5rem 0;
    color: var(--color-text_primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.resume-info p {
    margin: 0 0 1rem 0;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
}

.resume-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge {
    background: #f0f8ff;
    color: var(--color-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #e0e8ff;
}

.resume-avatar {
    width: 60px;
    height: 60px;
    background: #667eea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.resume-info h3 {
    margin: 0;
    color: var(--color-text_primary);
    font-size: 1.3rem;
}

.resume-info p {
    margin: 0;
    color: var(--color-text_secondary);
    font-size: 0.9rem;
}

.resume-section {
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.resume-section h4 {
    margin: 0 0 0.5rem 0;
    color: var(--color-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resume-section p {
    margin: 0;
    color: var(--color-text_secondary);
    font-size: 0.9rem;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    padding-bottom: 2rem;
}

/* Add our custom theme-colored separator line after section headers */
.section-header::after,
.features-section-header::after,
.testimonials-section-header::after,
.services-page-section-header::after,
.contact-page-section-header::after,
.pricing-section-header::after,
.resources-section-header::after,
.faq-section-header::after,
.gallery-section-header::after,
.partners-section-header::after,
.careers-section-header::after,
.case-studies-section-header::after,
.landing-section-header::after,
.events-section-header::after,
.coming-soon-section-header::after,
.blog-section-header::after,
.press-section-header::after,
.privacy-policy-section-header::after,
.terms-section-header::after,
.cookie-policy-section-header::after,
.register-section-header::after,
.login-section-header::after,
.logout-section-header::after,
.thank-you-section-header::after,
.color-test-section-header::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-primary) !important;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-top: 2rem;
}

/* Ensure all page-specific section headers have the same positioning */
.features-section-header,
.testimonials-section-header,
.services-page-section-header,
.contact-page-section-header,
.pricing-section-header,
.resources-section-header,
.faq-section-header,
.gallery-section-header,
.partners-section-header,
.careers-section-header,
.case-studies-section-header,
.landing-section-header,
.events-section-header,
.coming-soon-section-header,
.blog-section-header,
.press-section-header,
.privacy-policy-section-header,
.terms-section-header,
.cookie-policy-section-header,
.register-section-header,
.login-section-header,
.logout-section-header,
.thank-you-section-header,
.color-test-section-header {
    position: relative;
    padding-bottom: 2rem;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--color-text_secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Features Section */
.features-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    position: relative;
}

/* Removed duplicate .section-title - defined earlier with gradient effect */

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}

.feature-card {
    background: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.feature-icon {
    font-size: 3.5rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
    font-weight: 700;
}

.feature-card p {
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.feature-list {
    list-style: none;
    text-align: center;
    padding: 0;
}

.feature-list li {
    padding: 0.5rem 0;
    color: var(--color-text_secondary);
    position: relative;
    padding-left: 1.5rem;
}

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}



/* How It Works Section */
.how-it-works-section {
    padding: 6rem 0;
    background: var(--color-bg_secondary);
    color: var(--color-text_primary);
    position: relative;
}

.how-it-works-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    margin-top: 2rem;
    position: relative;
    z-index: 2;
}

.step-card {
    background: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.step-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 auto 2rem;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.step-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
    font-weight: 700;
}

.step-content p {
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.step-features {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.step-feature {
    background: #f0f8ff;
    color: var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #e0e8ff;
}

.step-card {
    text-align: center;
    padding: 2rem;
    position: relative;
}

.step-number {
    width: 60px;
    height: 60px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1.5rem;
}

.step-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
}

.step-card p {
    color: var(--color-text_secondary);
    line-height: 1.6;
}

/* Resume Builder Demo Section */
.resume-builder-demo {
    padding: 4rem 0;
    background: #f8f9fa;
}

.section-description {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-text_secondary);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.demo-container {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.demo-preview {
    background: white;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.demo-message i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.demo-message h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
}

.demo-message p {
    color: var(--color-text_secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.demo-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Success Stories Section */
.success-stories-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    position: relative;
}


.author-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.author-info h4 {
    margin: 0;
    color: var(--color-text_primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.author-info p {
    margin: 0;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

/* About Section */
.about-section {
    padding: 4rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

/* CTA Section */
.cta-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain2" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain2)"/></svg>');
    opacity: 0.2;
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-content h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.cta-content p {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-features {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    opacity: 0.9;
}

.cta-feature i {
    color: var(--color-accent);
    font-size: 1.2rem;
}

.cta-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Templates Section */
.templates-section {
    padding: 6rem 0;
    background: var(--color-bg_secondary);
    color: var(--color-text_primary);
    position: relative;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}

/* Template styles removed to prevent conflicts with SJ Resume Builder plugin */

/* Resume Sections Section */
.resume-sections-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    position: relative;
}

.sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.section-item {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.section-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.section-item i {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.section-item:hover i {
    transform: scale(1.1);
}

.section-item h4 {
    font-size: 1.1rem;
    margin: 0;
    color: var(--color-text_primary);
    font-weight: 600;
}

/* Dashboard Section */
.dashboard-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

/* Responsive Design for Front Page */
@media (max-width: 768px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
        text-align: center;
    }
    
    .hero-subtitle {
        font-size: 2rem;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .features-grid,
    .steps-container,
    .templates-grid,
    .sections-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-features {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .resume-preview {
        margin: 0 1rem;
        transform: none !important;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.5rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .resume-card {
        padding: 1.5rem;
    }
}

/* ========================================
   LOGIN AND REGISTRATION FORMS STYLING
   ======================================== */

/* Login Page Container */
.login-page,
.register-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

/* Login Container */
.login-container,
.register-container {
    width: 100%;
    max-width: 450px;
    position: relative;
    z-index: 2;
}

/* Login Card */
.login-card,
.register-card {
    background: var(--color-bg_primary);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    padding: 3rem 2.5rem;
    position: relative;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Login Header */
.login-header,
.register-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.login-header h1,
.register-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-header p,
.register-header p {
    font-size: 1.1rem;
    color: #7f8c8d;
    margin: 0;
    font-weight: 400;
}

/* Form Groups */
.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}

.form-input {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
    color: #2c3e50;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg_primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.form-input::placeholder {
    color: #adb5bd;
}

/* Password Input Wrapper */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-input {
    padding-right: 3rem; /* Make room for the toggle button */
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #6c757d;
    transition: color 0.3s ease;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

.password-toggle:hover {
    color: var(--color-primary);
    background-color: rgba(102, 126, 234, 0.1);
}

.password-toggle:focus {
    outline: none;
    color: var(--color-primary);
    background-color: rgba(102, 126, 234, 0.15);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
}

.password-toggle i {
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

/* Checkbox Styling */
.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.95rem;
    color: #6c757d;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    accent-color: #667eea;
}

/* Button Styling */
.login-btn,
.register-btn {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

.login-btn:hover,
.register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.login-btn:active,
.register-btn:active {
    transform: translateY(0);
}

.login-btn:disabled,
.register-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Button Loading State */
.btn-loader {
    display: none;
}

.spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

.path {
    stroke: var(--color-text_primary);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Error and Success Messages */
.login-error,
.register-error {
    background: #fee;
    color: #c53030;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid #c53030;
    font-size: 0.95rem;
}

.register-success {
    background: #f0fff4;
    color: #38a169;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid #38a169;
    font-size: 0.95rem;
}

/* Login Footer */
.login-footer,
.register-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.login-footer p,
.register-footer p {
    margin: 0.5rem 0;
    font-size: 0.95rem;
    color: #6c757d;
}

.login-footer a,
.register-footer a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.login-footer a:hover,
.register-footer a:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* Password Hint */
.password-hint {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
    display: block;
}

/* Decorative Elements */
.login-decoration,
.register-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.circle-1 {
    width: 100px;
    height: 100px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.circle-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.circle-3 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

/* Shortcode Containers */
.login-before-form-shortcode,
.login-after-form-shortcode,
.register-before-form-shortcode,
.register-after-form-shortcode {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Responsive Design for Login Forms */
@media (max-width: 768px) {
    .login-page,
    .register-page {
        padding: 1rem;
    }
    
    .login-card,
    .register-card {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }
    
    .login-header h1,
    .register-header h1 {
        font-size: 1.8rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .decoration-circle {
        display: none;
    }
}

@media (max-width: 480px) {
    .login-container,
    .register-container {
        max-width: 100%;
    }
    
    .login-card,
    .register-card {
        padding: 1.5rem 1rem;
        margin: 0;
        border-radius: 15px;
    }
    
    .login-header h1,
    .register-header h1 {
        font-size: 1.6rem;
    }
    
    .form-input {
        padding: 0.875rem 1rem;
    }
    
    .login-btn,
    .register-btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

/* ========================================
   DROPDOWN NAVIGATION STYLING
   ======================================== */

/* Main Navigation Container */


/* Navigation Menu List */




/* Navigation Links */




/* Dropdown Toggle Styling - Desktop only */
@media (min-width: 769px) {
    .dropdown-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-align: center;
        position: relative;
    }
}

@media (min-width: 769px) {
    .dropdown-arrow {
        font-size: 0.7rem;
        transition: transform 0.3s ease;
        margin-left: 0.25rem;
        position: absolute;
        right: 1rem;
    }
}

/* Desktop Dropdown Menu Container - Only apply on larger screens */
@media (min-width: 769px) {
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--color-bg_primary);
        min-width: 220px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        padding: 0.75rem 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        border: 1px solid rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(10px);
    }
}

/* Show dropdown on hover - Desktop only */
@media (min-width: 769px) {
    .has-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* Dropdown Arrow rotation on hover - Desktop only */
@media (min-width: 769px) {
    .has-dropdown:hover .dropdown-arrow {
        transform: rotate(180deg);
    }
}

/* Dropdown Menu Items - Desktop only */
@media (min-width: 769px) {
    .dropdown-menu li {
        margin: 0;
        padding: 0;
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    .dropdown-menu a {
        color: var(--color-text_primary);
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        border-radius: 0;
        transition: all 0.2s ease;
        border-left: 3px solid transparent;
        justify-content: flex-start;
        text-align: center;
        min-height: auto;
    }

    .dropdown-menu a:hover {
        color: var(--color-primary);
        background: rgba(255, 107, 53, 0.05);
        border-left-color: var(--color-primary);
        transform: translateX(5px);
    }
}

/* Sub-dropdown (nested dropdowns) - Desktop only */
@media (min-width: 769px) {
    .sub-dropdown {
        position: absolute;
        left: 100%;
        top: 0;
        background: var(--color-bg_primary);
        min-width: 200px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        padding: 0.75rem 0;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Show sub-dropdown on hover */
    .dropdown-item.has-dropdown:hover .sub-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

/* Dropdown Item with Sub-dropdown */
.dropdown-item.has-dropdown {
    position: relative;
}

.dropdown-item.has-dropdown > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-item.has-dropdown > a::after {
    content: '▶';
    font-size: 0.7rem;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.dropdown-item.has-dropdown:hover > a::after {
    transform: translateX(3px);
}

/* Active States */
.dropdown-menu a.active,
.dropdown-menu a.current-menu-item {
    color: var(--color-primary);
    background: rgba(255, 107, 53, 0.1);
    border-left-color: var(--color-primary);
}

/* Dropdown Dividers */
.dropdown-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0.5rem 1rem;
}

/* Dropdown Headers */
.dropdown-header {
    padding: 0.5rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text_secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile Dropdown Styles - Force override desktop styles */
@media (max-width: 768px) {
    #site-navigation.main-navigation ul {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }
    
    #site-navigation.main-navigation li {
        width: 100% !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    #site-navigation.main-navigation li:last-child {
        border-bottom: none !important;
    }
    
    #site-navigation.main-navigation a {
        padding: 1rem 1.5rem !important;
        border-radius: 0 !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    /* Mobile dropdown behavior - Force override desktop positioning */
    .dropdown-menu,
    .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        background: rgba(0, 0, 0, 0.02) !important;
        border-radius: 0 !important;
        padding: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        min-width: auto !important;
        width: 100% !important;
        z-index: auto !important;
    }
    
    .has-dropdown.active .dropdown-menu,
    .menu-item-has-children.active .dropdown-menu,
    .menu-item-has-children.active .sub-menu {
        max-height: 500px !important;
        padding: 0.5rem 0 !important;
    }
    
    .dropdown-menu a,
    .sub-menu a {
        padding: 0.75rem 2rem !important;
        font-size: 0.9rem !important;
        color: #666 !important;
        background: transparent !important;
        border-left: none !important;
        transform: none !important;
    }
    
    .dropdown-arrow {
        transition: transform 0.3s ease !important;
        position: static !important;
        margin-left: 0.5rem !important;
        right: auto !important;
    }
    
    .has-dropdown.active .dropdown-arrow,
    .menu-item-has-children.active .dropdown-arrow {
        transform: rotate(180deg) !important;
    }
    
    /* Mobile sub-dropdown */
    .sub-dropdown {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        background: rgba(0, 0, 0, 0.03) !important;
        padding: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        left: auto !important;
        top: auto !important;
        min-width: auto !important;
        width: 100% !important;
        z-index: auto !important;
    }
    
    .dropdown-item.has-dropdown.active .sub-dropdown {
        max-height: 500px !important;
        padding: 0.5rem 0 !important;
    }
    
    .sub-dropdown a {
        padding: 0.75rem 3rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Force mobile layout for all dropdown containers */
    .menu-item-has-children {
        position: relative !important;
    }
    
    /* Override any hover effects on mobile */
    .has-dropdown:hover .dropdown-menu,
    .menu-item-has-children:hover .dropdown-menu,
    .menu-item-has-children:hover .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        position: static !important;
    }
}

/* Dropdown Animation Keyframes */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Enhanced Dropdown Hover Effects */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    width: 16px;
    height: 16px;
    background: var(--color-bg_primary);
    transform: rotate(45deg);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    z-index: -1;
}

/* Dropdown Menu Item Icons (optional) */
.dropdown-menu a[href*="create"]::before {
    content: '➕';
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.dropdown-menu a[href*="edit"]::before {
    content: '✏️';
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.dropdown-menu a[href*="templates"]::before {
    content: '🎨';
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.dropdown-menu a[href*="profile"]::before {
    content: '👤';
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.dropdown-menu a[href*="dashboard"]::before {
    content: '📊';
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.dropdown-menu a[href*="settings"]::before {
    content: '⚙️';
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.dropdown-menu a[href*="logout"]::before {
    content: '🚪';
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

/* ========================================
   ENHANCED DROPDOWN STATES & ANIMATIONS
   ======================================== */

/* Hovered state for desktop */
.has-dropdown.hovered .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.has-dropdown.hovered .dropdown-arrow {
    transform: rotate(180deg);
}

/* Active state for mobile */
.has-dropdown.active .dropdown-menu {
    max-height: 500px;
    padding: 0.75rem 0;
}

.has-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

/* Loading states */
.dropdown-menu a.loading {
    position: relative;
    color: #999 !important;
    pointer-events: none;
}

.dropdown-menu a.loading::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Touch feedback for mobile */
.dropdown-toggle.touch-active {
    background: rgba(255, 107, 53, 0.1);
    transform: scale(0.98);
}

/* Dropdown open animation */
.dropdown-menu.dropdown-open {
    animation: dropdownFadeIn 0.3s ease-out;
}

/* Enhanced hover effects */
.dropdown-menu a:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.15);
}

/* Focus states for accessibility */
.dropdown-toggle:focus,
.dropdown-menu a:focus {
    outline: 2px solid #ff6b35;
    outline-offset: 2px;
}

/* Dropdown menu item transitions */
.dropdown-menu li {
    opacity: 0;
    transform: translateY(10px);
    animation: dropdownItemSlideIn 0.3s ease-out forwards;
}

.dropdown-menu li:nth-child(1) { animation-delay: 0.1s; }
.dropdown-menu li:nth-child(2) { animation-delay: 0.15s; }
.dropdown-menu li:nth-child(3) { animation-delay: 0.2s; }
.dropdown-menu li:nth-child(4) { animation-delay: 0.25s; }
.dropdown-menu li:nth-child(5) { animation-delay: 0.3s; }
.dropdown-menu li:nth-child(6) { animation-delay: 0.35s; }

@keyframes dropdownItemSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown menu backdrop blur effect */
.dropdown-menu {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Enhanced mobile styles */
@media (max-width: 768px) {
    .dropdown-menu {
        border-radius: 0;
        margin: 0 1rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .dropdown-menu a {
        border-radius: 8px;
        margin: 0.25rem 0;
    }
    
    .dropdown-menu a:hover {
        transform: translateX(0);
        background: rgba(255, 107, 53, 0.1);
    }
    
    /* Mobile dropdown slide animation */
    .dropdown-menu.active {
        animation: mobileDropdownSlide 0.3s ease-out;
    }
    
    @keyframes mobileDropdownSlide {
        from {
            max-height: 0;
            opacity: 0;
        }
        to {
            max-height: 500px;
            opacity: 1;
        }
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .dropdown-menu {
        border: 2px solid var(--color-text_primary);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }
    
    .dropdown-menu a:hover {
        background: var(--color-text_primary);
        color: var(--color-text_primary);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu,
    .dropdown-arrow,
    .dropdown-menu a {
        transition: none;
        animation: none;
    }
    
    .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* Print styles */
@media print {
    .dropdown-menu {
        display: none !important;
    }
    
    .dropdown-toggle {
        pointer-events: none;
    }
}

/* OAuth Styles */
.oauth-section {
    margin-bottom: 2rem;
    text-align: center;
}

.google-oauth-section,
.linkedin-oauth-section {
    margin-bottom: 1rem;
    text-align: center;
}

.oauth-divider {
    position: relative;
    margin: 1.5rem 0;
    text-align: center;
}

.oauth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
    z-index: 1;
}

.oauth-divider span {
    background: var(--color-bg_primary);
    padding: 0 1rem;
    color: var(--color-text_secondary);
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
}

/* Google Sign-In Button Customization */
.g_id_signin {
    margin: 0 auto;
    display: inline-block;
}

/* LinkedIn Sign-In Button */
.linkedin-signin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    background: #0077b5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    min-width: 280px;
    height: 48px;
    box-shadow: 0 2px 4px rgba(0, 119, 181, 0.2);
}

.linkedin-signin-btn:hover {
    background: #005885;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 119, 181, 0.3);
}

.linkedin-signin-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 119, 181, 0.2);
}

.linkedin-icon {
    flex-shrink: 0;
}

.linkedin-signin-btn span {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .oauth-section {
        margin-bottom: 1.5rem;
    }
    
    .google-oauth-section,
    .linkedin-oauth-section {
        margin-bottom: 0.75rem;
    }
    
    .oauth-divider {
        margin: 1rem 0;
    }
    
    .linkedin-signin-btn {
        min-width: 240px;
        height: 44px;
        font-size: 14px;
        padding: 10px 20px;
    }
}

/* ========================================
   BUSINESS HERO TEMPLATE STYLES
   ======================================== */

/* Business Hero Banner */
.business-hero-banner {
    padding: 12rem 0 6rem 0;
    color: white !important;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
    display: flex;
    align-items: center;
    /* Ensure minimum height even without content */
    min-height: 600px;
}

.business-hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.business-hero-banner .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-headline {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    color: #ffffff !important;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff !important;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-buttons .btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-block;
}

.hero-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.business-hero-banner .hero-buttons .btn-primary {
    background: #ffd700 !important;
    color: var(--color-text_primary) !important;
}

.business-hero-banner .hero-buttons .btn-secondary {
    background: transparent !important;
    border: 2px solid white !important;
    color: white !important;
}

.business-hero-banner .hero-buttons .btn-secondary:hover {
    background: white !important;
    color: var(--color-primary) !important;
}

/* Business Counters Section */
.business-counters-section {
    padding: 6rem 0;
    background: var(--color-bg_secondary);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--color-text_primary);
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.counters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.counter-item {
    text-align: center;
    padding: 2rem;
    background: var(--color-bg_secondary);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
}

.counter-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.counter-icon {
    font-size: 3rem;
    color: var(--color-primary) !important;
    margin-bottom: 1rem;
}

.counter-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.counter-title {
    font-size: 1.1rem;
    color: var(--color-text_secondary);
    font-weight: 500;
}

/* Ensure counter icons use theme color */
.business-counters-section .counter-icon {
    color: var(--color-primary) !important;
}

.business-counters-section .counter-icon i {
    color: var(--color-primary) !important;
}

/* Business Services Section */
.business-services-section {
    padding: 6rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.service-item {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--color-bg_secondary);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
}

.service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.service-icon {
    font-size: 3.5rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.service-item:hover .service-icon {
    transform: scale(1.1);
}

.service-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
    font-weight: 700;
}

.service-description {
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin: 0;
}

/* Business Services - Learn More link */
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #3b82f6;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.service-link i {
    transition: transform 0.2s ease;
}

.service-link:hover {
    color: #1d4ed8;
    transform: translateX(3px);
}

.service-link:hover i {
    transform: translateX(2px);
}


/* Business CTA Section */
.business-cta-section {
    padding: 6rem 0;
    text-align: center;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta-headline {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
    color: var(--color-text_primary);
}

.cta-description {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
}

.cta-content .btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-block;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: white;
}

.cta-content .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* Mobile Responsiveness for Business Sections */
@media (max-width: 768px) {
    .business-hero-banner {
        padding: 10rem 0 4rem 0;
        margin-top: 3rem;
    }
    
    .hero-headline {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .counters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .counter-item,
    .service-item {
        padding: 2rem 1.5rem;
    }
    
    .cta-headline {
        font-size: 2.5rem;
    }
    
    .cta-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .business-hero-banner,
    .business-counters-section,
    .business-services-section,
    .business-testimonials-wrapper,
    .business-cta-section {
        padding: 4rem 0;
    }
    
    .counters-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-headline {
        font-size: 2rem;
    }
    
    .cta-headline {
        font-size: 2rem;
    }
}

/* Animation Classes for Business Sections */
.animate-section {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.animate-section.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Business template hero content background transparency */
.business-hero-banner .business-hero-content {
    background: rgba(0, 0, 0, var(--content-bg-opacity, 0.9)) !important;
    padding: 2rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}


/* Remove blur and background when opacity is 0 */
.business-hero-banner .business-hero-content.no-bg-opacity {
    background: transparent !important;
    backdrop-filter: none;
}

/* Hide content for image-only display */
.business-hero-banner[data-overlay="none"] .hero-content {
    display: none;
}

/* Ensure video is visible even with no overlay */
.business-hero-banner[data-overlay="none"] .hero-background-video {
    display: block !important;
}

/* ========================================
   ABOUT PAGE STYLES
   ======================================== */

    /* About Page Hero Section */
    .about-hero-wrapper {
        position: relative;
        min-height: auto;
        display: flex;
        align-items: center;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
        overflow: hidden;
        padding: 8rem 0 6rem 0;
        padding-top: 8rem !important;
        padding-bottom: 6rem !important;
        color: var(--color-text_primary);
        text-align: center;
    }

.about-hero-wrapper .about-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.about-hero-wrapper .about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.about-hero-wrapper .about-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.about-hero-wrapper .about-hero-content {
    text-align: center;
    width: 100%;
    display: block;
}

.about-hero-wrapper .about-hero-main-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-align: center;
    color: #ffffff;
    background: none !important;
    background-size: auto !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    animation: none !important;
    display: block;
    width: 100%;
    margin: 0;
}

.about-hero-wrapper .about-hero-main-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 1;
    text-align: center;
    color: #ffd700;
    background: none !important;
    background-size: auto !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    animation: none !important;
}

/* Stats Section */
.about-stats-section {
    padding: 6rem 0;
    background: var(--color-bg_secondary);
}

/* Centered section header for About stats (light theme) */
.about-stats-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-stats-section .section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: block;
    width: 100%;
    clear: both;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shinyBlue 3s ease-in-out infinite;
}


/* Remove global separators from About page sections */
.about-stats-section::before,
.about-mission-section::before,
.about-team-section::before,
.about-timeline-section::before {
    content: none !important;
    display: none !important;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-label {
    font-size: 1.1rem;
    color: var(--color-text_secondary);
    font-weight: 500;
}

/* Mission Section */
.about-mission-section {
    padding: 6rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

/* Centered section header for About mission (light theme) */
.about-mission-section .mission-text h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: center;
    display: block;
    width: 100%;
    clear: both;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
}

.about-mission-section .mission-text {
    text-align: center;
    margin-bottom: 3rem;
}


.mission-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.mission-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--color-text_primary);
}

.mission-text p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--color-text_secondary);
    margin-bottom: 4rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-top: 4rem;
}

.value-item {
    text-align: center;
    padding: 2rem;
    border-radius: 12px;
    background: #f8f9fa;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.value-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.value-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
}

.value-item p {
    color: var(--color-text_secondary);
    line-height: 1.6;
}

/* Team Section */
.about-team-section {
    padding: 6rem 0;
    background: var(--color-bg_secondary);
}

/* Centered section header for About team (light theme) */
.about-team-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-team-section .section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: block;
    width: 100%;
    clear: both;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shinyBlue 3s ease-in-out infinite;
}

.about-team-section .section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text_secondary);
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}


.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.team-member {
    text-align: center;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
}

.member-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--color-primary);
}

    .member-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .placeholder-avatar {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 3rem;
        border-radius: 50%;
    }

.member-name {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text_primary);
}

.member-position {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 1rem;
}

.member-bio {
    color: var(--color-text_secondary);
    line-height: 1.6;
}

/* Timeline Section */
.about-timeline-section {
    padding: 6rem 0;
    background: var(--color-bg_secondary);
    color: var(--color-text_primary);
}

/* Centered section header for About timeline (light theme) */
.about-timeline-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-timeline-section .section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: block;
    width: 100%;
    clear: both;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shinyBlue 3s ease-in-out infinite;
}

.about-timeline-section .section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text_secondary);
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}


.timeline {
    max-width: 800px;
    margin: 3rem auto 0;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-primary);
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-year {
    background: var(--color-primary);
    color: white;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1.1rem;
    min-width: 120px;
    text-align: center;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px var(--color-primary_light);
}

.timeline-year:hover {
    background: var(--color-primary_dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-primary_light);
}

.timeline-content {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin: 0 2rem;
    flex: 1;
    max-width: 300px;
}

.timeline-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text_primary);
}

.timeline-content p {
    color: var(--color-text_secondary);
    line-height: 1.6;
}


    /* About Page Navigation Control */
    .about-page-navigation-control {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .about-page-navigation-control .button {
        margin-top: 0.5rem;
        text-decoration: none;
        display: inline-block;
    }

    .about-page-navigation-control .description {
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: var(--color-text_secondary);
    }

/* ========================================
   PORTFOLIO PAGE STYLES
   ======================================== */

/* Portfolio Hero Section */
.portfolio-hero-wrapper {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    overflow: hidden;
    padding: 8rem 0 6rem 0;
    padding-top: 8rem !important;
    padding-bottom: 6rem !important;
    color: var(--color-text_primary);
    text-align: center;
}

.portfolio-hero-wrapper .portfolio-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.portfolio-hero-wrapper .portfolio-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.portfolio-hero-wrapper .portfolio-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.portfolio-hero-wrapper .portfolio-hero-content {
    text-align: center;
    width: 100%;
    display: block;
}

.portfolio-hero-wrapper .portfolio-hero-main-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-align: center;
    color: var(--color-text_primary);
    background: none !important;
    background-size: auto !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    animation: none !important;
    display: block;
    width: 100%;
    margin: 0;
}

.portfolio-hero-wrapper .portfolio-hero-main-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 1;
    text-align: center;
    color: var(--color-accent);
    background: none !important;
    background-size: auto !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    animation: none !important;
}

/* Portfolio Gallery Section */
.portfolio-gallery-section {
    padding: 6rem 0;
    background: var(--color-bg_secondary);
}

/* Centered section header for Portfolio page (light theme) */
.portfolio-gallery-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portfolio-gallery-section .section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: block;
    width: 100%;
    clear: both;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shinyBlue 3s ease-in-out infinite;
}

.portfolio-gallery-section .section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text_secondary); /* slate-600 */
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Portfolio Filter */
.portfolio-filter {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.filter-btn {
    background: transparent;
    color: var(--color-text_muted);
    border: 2px solid #4b5563;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.filter-btn:hover,
.filter-btn.active {
    background: #667eea;
    border-color: var(--color-primary);
    color: white;
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.portfolio-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: white; /* Light card background */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.portfolio-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

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

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.05);
}

.placeholder-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4b5563;
    color: var(--color-text_muted);
    font-size: 3rem;
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-info {
    text-align: center;
    color: white;
    padding: 2rem;
}

.portfolio-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.portfolio-description {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.portfolio-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.portfolio-link,
.portfolio-view {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.75rem;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.portfolio-link:hover,
.portfolio-view:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: scale(1.1);
}

/* Portfolio Stats Section */
.portfolio-stats-section {
    padding: 6rem 0;
    background: #f1f3f5; /* Light background */
}

/* Centered section header for Portfolio stats (light theme) */
.portfolio-stats-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portfolio-stats-section .section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: block;
    width: 100%;
    clear: both;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shinyBlue 3s ease-in-out infinite;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.stat-item {
    text-align: center;
    padding: 2rem;
    background: white; /* Light card background */
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: var(--color-text_muted); /* Lighter gray text color */
    font-weight: 500;
}

/* Portfolio CTA Section */
.portfolio-cta-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%); /* Light theme gradient */
    color: white;
    text-align: center;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-bg_primary), var(--color-bg_secondary), var(--color-bg_primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shinyBlue 3s ease-in-out infinite;
}

.cta-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    color: white;
}

/* Portfolio Lightbox */
.portfolio-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 2rem;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.lightbox-close:hover {
    background: #5a67d8;
}

.lightbox-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox-info {
    margin-top: 1rem;
    color: white;
}

.lightbox-title {
    font-size: 1.5rem;
    font-weight: 600;
}

/* Portfolio Edit Shortcut */
.customize-partial-edit-shortcut-portfolio-hero {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
}

.customize-partial-edit-shortcut-portfolio-hero .customize-partial-edit-shortcut-button {
    background: #667eea;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.customize-partial-edit-shortcut-portfolio-hero .customize-partial-edit-shortcut-button:hover {
    background: #5a67d8;
    transform: scale(1.1);
}

.customize-partial-edit-shortcut-portfolio-hero .customize-partial-edit-shortcut-button svg {
    width: 14px;
    height: 14px;
    fill: white;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .portfolio-hero-section .hero-title {
        font-size: 2.5rem;
    }
    
    .portfolio-hero-section .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .portfolio-filter {
        gap: 0.5rem;
    }
    
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .cta-title {
        font-size: 2rem;
    }
    
    .cta-subtitle {
        font-size: 1rem;
    }
    
    .lightbox-content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .lightbox-close {
        top: -35px;
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .portfolio-hero-section {
        padding: 6rem 0 4rem 0;
    }
    
    .portfolio-gallery-section,
    .portfolio-stats-section,
    .portfolio-cta-section {
        padding: 4rem 0;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .portfolio-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* ========================================
   SERVICES PAGE STYLES
   ======================================== */

/* Services Page Grid Section */
.services-page-grid-section {
    padding: 6rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.services-page-grid-section .services-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.services-page-grid-section .services-page-section-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Short separator lines removed - using only long lines for section headers */
/* .services-page-grid-section .services-page-section-header::after { */
    /* content: ''; */
    /* display: block; */
    /* width: 60%; */
    /* max-width: 700px; */
    /* height: 2px; */
    /* background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)); */
    /* margin: 1rem auto 0 auto; */
    /* border-radius: 2px; */
/* } */

/* Ensure no short separator lines appear anywhere on section containers */
/* Note: .services-page-section-header should have the long separator line, so it's excluded here */
.services-page-grid-section::after,
.services-page-pricing-section::after,
.services-page-cta-section::after {
    display: none !important;
    content: none !important;
}

/* Remove separator line from Services Grid section (appears right after hero) */
.services-page-grid-section::before {
    content: none !important;
    display: none !important;
}

.services-page-grid-section .services-page-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    text-align: center;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@keyframes shinyBlue {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.services-page-grid-section .services-page-section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text_secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Services Grid Layout */
.services-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    justify-items: center;
}

/* Services Page Cards */
.services-page-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    position: relative;
    max-width: 400px;
    width: 100%;
}

.services-page-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.services-page-card .service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-page-card .service-icon i {
    font-size: 2rem;
    color: white;
}

.services-page-card .service-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shinyBlue 3s ease-in-out infinite;
    text-align: center;
}

.services-page-card .service-description {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

.services-page-card .service-price {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

.services-page-card .service-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
}

.services-page-card .service-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    color: var(--color-primary);
}

/* Services Page Pricing Section */
.services-page-pricing-section {
    padding: 6rem 0;
    background: var(--color-bg_secondary);
    color: var(--color-text_primary);
}

.services-page-pricing-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.services-page-pricing-section .services-page-section-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Short separator lines removed - using only long lines for section headers */
/* .services-page-pricing-section .services-page-section-header::after { */
    /* content: ''; */
    /* display: block; */
    /* width: 60%; */
    /* max-width: 700px; */
    /* height: 2px; */
    /* background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)); */
    /* margin: 1rem auto 0 auto; */
    /* border-radius: 2px; */
/* } */

.services-page-pricing-section .services-page-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    text-align: center;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.services-page-pricing-section .services-page-section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text_secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Services Page Pricing Cards */
.services-page-pricing-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    position: relative;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.services-page-pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.services-page-pricing-card .pricing-header {
    text-align: center;
    margin-bottom: 2rem;
}

.services-page-pricing-card .pricing-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
    text-align: center;
}

.services-page-pricing-card .pricing-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    text-align: center;
}

.services-page-pricing-card .pricing-period {
    font-size: 1rem;
    color: var(--color-text_secondary);
    margin-bottom: 1.5rem;
    text-align: center;
}

.services-page-pricing-card .pricing-description {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: center;
}

.services-page-pricing-card .pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    text-align: center;
}

.services-page-pricing-card .pricing-features li {
    padding: 0.5rem 0;
    color: var(--color-text_secondary);
    text-align: center;
}

.services-page-pricing-card .pricing-features li:before {
    content: "✓";
    color: var(--color-primary);
    font-weight: bold;
    margin-right: 0.5rem;
}

.services-page-pricing-card .pricing-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
}

.services-page-pricing-card .pricing-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    color: var(--color-primary);
}

/* Services Page CTA Section */
/* NOTE: This section was causing blue background bleeding - fixed by changing gradient to black */
.services-page-cta-section {
    padding: 5rem 2rem;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Ensure Services Page CTA title uses scheme gradient text */
.services-page-cta-section .cta-title {
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
}

.services-page-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.services-page-cta-section .services-page-container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.services-page-cta-section .services-page-section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.services-page-cta-section .services-page-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.services-page-cta-section .services-page-section-subtitle {
    font-size: 1.25rem;
    color: var(--color-text_secondary) !important; /* slate-600 */
    margin-bottom: 2rem;
    text-align: center;
    line-height: 1.6;
}

/* CTA section text colors - use scheme colors */
.services-page-cta-section .cta-subtitle {
    color: var(--color-text_secondary) !important;
}

.services-page-cta-section .services-page-cta-button {
    display: inline-block;
    background: white;
    color: var(--color-primary);
    padding: 1rem 2.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.services-page-cta-section .services-page-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    background: #f8f9fa;
}

/* Services Page Placeholder */
.services-page-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 2px dashed orange;
}

/* ========================================
   BEFORE AND AFTER PAGE STYLES
   ======================================== */

/* Before and After Hero Section */
.before-and-after-hero-wrapper {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    overflow: hidden;
    padding: 8rem 0 6rem 0;
    padding-top: 8rem !important;
    padding-bottom: 6rem !important;
    color: var(--color-text_primary);
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

.before-and-after-hero-wrapper .before-and-after-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.before-and-after-hero-wrapper .before-and-after-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.before-and-after-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.before-and-after-hero-content {
    text-align: left;
    max-width: 800px;
}

.before-and-after-hero-main-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.before-and-after-hero-main-subtitle {
    font-size: 1.5rem;
    color: #ffd700;
    font-weight: 500;
    line-height: 1.6;
}

/* Before and After Page Container */
.before-and-after-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

/* Before and After Section Header */
.before-and-after-page-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.before-and-after-page-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shinyBlue 3s ease-in-out infinite;
}

.before-and-after-page-section-subtitle {
    font-size: 1.25rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
}

/* Comparisons Gallery Section */
.before-and-after-page-comparisons-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

.before-and-after-comparisons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.before-and-after-comparison-item {
    background: var(--color-bg_primary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.before-and-after-comparison-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.before-and-after-comparison-item .comparison-title {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1.5rem 1.5rem 1rem;
    color: var(--color-text_primary);
    text-align: center;
}

.comparison-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.comparison-before,
.comparison-after {
    position: relative;
    overflow: hidden;
}

.comparison-before img,
.comparison-after img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.comparison-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 2;
}

.comparison-before .comparison-label {
    background: rgba(220, 38, 38, 0.8);
}

.comparison-after .comparison-label {
    background: rgba(34, 197, 94, 0.8);
}

.comparison-before .placeholder-image,
.comparison-after .placeholder-image {
    width: 100%;
    height: 300px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.comparison-before .placeholder-image i,
.comparison-after .placeholder-image i {
    font-size: 3rem;
}

.comparison-description {
    padding: 1.5rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    text-align: center;
}

/* Stats Section */
.before-and-after-page-stats-section {
    padding: 5rem 0;
    background: var(--color-bg_secondary);
    color: var(--color-text_primary);
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

.before-and-after-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.before-and-after-stat-item {
    text-align: center;
    padding: 2rem;
    background: var(--color-bg_primary);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.before-and-after-stat-item:hover {
    transform: translateY(-5px);
}

.before-and-after-stat-item .stat-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.before-and-after-stat-item .stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.before-and-after-stat-item .stat-title {
    font-size: 1.1rem;
    color: var(--color-text_secondary);
    font-weight: 500;
}

/* CTA Section */
.before-and-after-page-cta-section {
    padding: 5rem 2rem;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.before-and-after-page-cta-section .cta-title {
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.before-and-after-page-cta-section .cta-subtitle {
    color: var(--color-text_secondary);
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.before-and-after-page-cta-section .cta-button {
    display: inline-block;
    background: white;
    color: var(--color-primary);
    padding: 1rem 2.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.before-and-after-page-cta-section .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Placeholder */
.before-and-after-page-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-bg_primary);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 2px dashed var(--color-primary);
}

.before-and-after-page-placeholder .placeholder-content i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.before-and-after-page-placeholder .placeholder-content h3 {
    font-size: 1.5rem;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
}

.before-and-after-page-placeholder .placeholder-content p {
    color: var(--color-text_secondary);
}

/* Dark Theme Overrides */
.before-and-after-page.business-dark-template .before-and-after-page-comparisons-section,
.before-and-after-page.business-dark-template .before-and-after-page-stats-section,
.before-and-after-page.business-dark-template .before-and-after-page-cta-section {
    background: var(--color-bg_primary) !important;
    color: var(--color-text_primary) !important;
}

.before-and-after-page.business-dark-template .before-and-after-comparison-item {
    background: var(--color-bg_secondary) !important;
}

.before-and-after-page.business-dark-template .before-and-after-stat-item {
    background: var(--color-bg_secondary) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .before-and-after-hero-main-title {
        font-size: 2.5rem;
    }
    
    .before-and-after-hero-main-subtitle {
        font-size: 1.25rem;
    }
    
    .before-and-after-comparisons-grid {
        grid-template-columns: 1fr;
    }
    
    .comparison-images {
        grid-template-columns: 1fr;
    }
    
    .before-and-after-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   CONTACT PAGE STYLES (Light Theme)
   ======================================== */

/* Hide WordPress page title on Contact page template */
.page-template-page-contact .entry-header,
.page-template-page-contact .entry-title,
.page-template-page-contact .page-header,
.page-template-page-contact article > header,
body.page-template-page-contact .entry-header,
body.page-template-page-contact .entry-title,
.page-template-page-contact-php .entry-header,
.page-template-page-contact-php .entry-title,
.page-template-page-contact-php .page-header,
.page-template-page-contact-php article > header,
body.page-template-page-contact-php .entry-header,
body.page-template-page-contact-php .entry-title,
.page .entry-header,
.page .entry-title {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Contact Hero Section */
.contact-hero-wrapper {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    overflow: hidden;
    padding: 8rem 0 6rem 0;
    color: var(--color-text_primary);
}

.contact-hero-wrapper .contact-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.contact-hero-wrapper .contact-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.contact-hero-wrapper .contact-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.contact-hero-wrapper .contact-hero-content {
    text-align: center;
}

.contact-hero-wrapper .contact-hero-main-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--color-text_primary);
}

.contact-hero-wrapper .contact-hero-main-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 1;
    color: var(--color-accent);
}





/* Contact Info Section */
.contact-page-info-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
    position: relative;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

.contact-page-info-section .contact-page-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 2rem !important;
    width: 100% !important;
}

.contact-page-info-section .contact-page-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 4rem;
}

.contact-page-info-section .contact-page-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    clear: both;
}

.contact-page-info-section .contact-page-section-subtitle {
    font-size: 1.25rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    max-width: 600px;
    display: block;
    width: 100%;
    clear: both;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.contact-info-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.contact-info-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.contact-info-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
}

.contact-info-value {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    text-decoration: none;
    display: block;
}

.contact-info-value:hover {
    color: var(--color-primary);
}

/* Contact Form Section */
.contact-page-form-section {
    padding: 5rem 0;
    background: var(--color-bg_secondary);
    position: relative;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

.contact-page-form-section .contact-page-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 2rem !important;
    width: 100% !important;
}

.contact-page-form-section .contact-page-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
}

.contact-page-form-section .contact-page-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    clear: both;
}

.contact-page-form-section .contact-page-section-subtitle {
    font-size: 1.25rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    max-width: 600px;
    display: block;
    width: 100%;
    clear: both;
}

.contact-form-wrapper {
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text_primary);
}

.contact-form .required {
    color: var(--color-error);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    padding: 0.875rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.contact-form textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-form .form-submit {
    margin-top: 2rem;
    text-align: center;
}

.contact-form-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: white;
    padding: 1rem 3rem;
    border: none;
    border-radius: 50px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.contact-form-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.contact-form-button .button-loader {
    display: none;
}

.contact-form-button.loading .button-text {
    display: none;
}

.contact-form-button.loading .button-loader {
    display: inline-block;
}

.form-messages {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

.form-messages.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.form-messages.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

/* Contact Map Section */
.contact-page-map-section {
    padding: 5rem 0;
    background: var(--color-bg_secondary);
    color: var(--color-text_primary);
    position: relative;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

.contact-page-map-section .contact-page-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 2rem !important;
    width: 100% !important;
}

.contact-page-map-section .contact-page-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
}

.contact-page-map-section .contact-page-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    clear: both;
}

/* Fix all remaining section titles to use scheme gradient */
.pricing-section-title,
.resources-section-title,
.faq-section-title,
.gallery-section-title,
.partners-section-title,
.careers-section-title,
.case-studies-section-title,
.landing-section-title,
.events-section-title,
.coming-soon-section-title,
.blog-section-title,
.press-section-title,
.privacy-policy-section-title,
.terms-section-title,
.cookie-policy-section-title,
.register-section-title,
.login-section-title,
.logout-section-title,
.thank-you-section-title,
.color-test-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    clear: both;
}

.contact-page-map-section .contact-page-section-subtitle {
    font-size: 1.25rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    max-width: 600px;
    display: block;
    width: 100%;
    clear: both;
}

.contact-map-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    height: 450px;
}

.contact-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.map-placeholder {
    background: var(--color-bg_secondary);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text_muted);
}

.map-placeholder i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--color-text_muted);
}

.map-placeholder p {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
}

/* Contact CTA Section */
.contact-page-cta-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
    text-align: center;
    position: relative;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}

.contact-page-cta-section .cta-title {
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
}

.contact-page-cta-section .container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 2rem !important;
    width: 100% !important;
}

.contact-page-cta-section .cta-content {
    text-align: center;
}

.contact-page-cta-section .cta-subtitle {
    font-size: 1.25rem;
    color: var(--color-text_secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contact-page-cta-section .cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: white;
    padding: 1rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.contact-page-cta-section .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

/* Team Page Styles */
.team-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.team-member-card {
    background: var(--color-bg_primary);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.team-member-photo {
    margin-bottom: 1.5rem;
}

.team-member-photo i {
    font-size: 4rem;
    color: #3b82f6;
}

.team-member-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text_primary);
}

.team-member-role {
    font-size: 1rem;
    font-weight: 500;
    color: #3b82f6;
    margin-bottom: 1rem;
}

.team-member-bio {
    font-size: 0.9rem;
    color: var(--color-text_secondary);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.team-member-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.team-member-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-bg_secondary);
    color: var(--color-text_secondary);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.team-member-social a:hover {
    background: #3b82f6;
    color: var(--color-text_primary);
    transform: translateY(-2px);
}

/* Dark theme team cards */
.business-dark-template .team-member-card {
    background: #374151;
    color: var(--color-text_primary);
}

.business-dark-template .team-member-card h3 {
    color: var(--color-text_primary);
}

.business-dark-template .team-member-bio {
    color: var(--color-text_muted);
}

.business-dark-template .team-member-social a {
    background: #4b5563;
    color: var(--color-text_muted);
}

.business-dark-template .team-member-social a:hover {
    background: #3b82f6;
    color: var(--color-text_primary);
}

/* Contact Page Responsive */
@media (max-width: 768px) {
    
    .contact-page-section-title {
        font-size: 2rem !important;
    }
    
    .contact-page-section-subtitle {
        font-size: 1.125rem !important;
    }
    
    .contact-info-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-form-wrapper {
        padding: 2rem 1.5rem;
    }
    
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-map-wrapper {
        height: 350px;
    }
}

.services-page-placeholder .placeholder-content i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.services-page-placeholder .placeholder-content h3 {
    font-size: 1.5rem;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
}

.services-page-placeholder .placeholder-content p {
    color: var(--color-text_secondary);
    margin: 0;
}

    /* Services Page Hero Section */
    /* NOTE: Fixed blue background bleeding by changing gradient to black */
    .services-page-hero-section {
        padding: 8rem 0 6rem 0;
        color: var(--color-text_primary); /* slate-800 for body text */
        text-align: center;
        position: relative;
        overflow: hidden;
        background: white;
    }

    .services-page-hero-section .hero-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .services-page-hero-section .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
    }

    .services-page-hero-section .container {
        position: relative;
        z-index: 2;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        text-align: center !important;
        display: block;
    }
    
    .services-page-hero-section .hero-content {
        text-align: center;
        width: 100%;
        display: block;
    }
    
    /* Fix customize edit shortcut positioning for Services hero */
    .services-page-hero-section .customize-partial-edit-shortcut-services-hero {
        position: absolute;
        left: -40px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }
    
    .services-page-hero-section .customize-partial-edit-shortcut-services-hero .customize-partial-edit-shortcut-button {
        background: #667eea;
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .services-page-hero-section .customize-partial-edit-shortcut-services-hero .customize-partial-edit-shortcut-button:hover {
        background: #5a67d8;
        transform: scale(1.1);
    }
    
    .services-page-hero-section .customize-partial-edit-shortcut-services-hero .customize-partial-edit-shortcut-button svg {
        width: 14px;
        height: 14px;
        fill: white;
    }

    .services-page-hero-section .hero-content .services-page-hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        line-height: 1.1;
        text-align: center;
        background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shinyBlue 3s ease-in-out infinite;
        display: block;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Override the general .hero-title rule specifically */
    .services-page-hero-section h1.services-page-hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        line-height: 1.1;
        background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shinyBlue 3s ease-in-out infinite;
        /* Remove text-align override - let it inherit center from parent */
    }

    .services-page-hero-section .hero-subtitle {
        font-size: 1.3rem;
        margin-bottom: 2rem;
        opacity: 0.95;
        line-height: 1.6;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* Services Grid Section */
    .services-grid-section {
        padding: 6rem 0;
        background: #f8f9fa;
    }

    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
        margin-top: 3rem;
    }

    .service-card {
        background: white;
        padding: 2.5rem 2rem;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-align: center;
        position: relative;
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .service-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 1.5rem;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 2rem;
    }

    .service-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #f3f4f6;
    }

    .service-description {
        color: var(--color-text_muted);
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .service-features {
        list-style: none;
        padding: 0;
        margin-bottom: 1.5rem;
    }

    .service-features li {
        padding: 0.5rem 0;
        color: var(--color-text_muted);
        position: relative;
        padding-left: 1.5rem;
    }

    .service-features li::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--color-primary);
        font-weight: bold;
    }

    .service-price {
        margin-bottom: 1.5rem;
    }

    .service-price .price {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--color-primary);
    }

    .service-button {
        display: inline-block;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
        color: white;
        padding: 0.75rem 2rem;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 500;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .service-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        color: white;
    }

    /* Pricing Section */
    .services-pricing-section {
        padding: 6rem 0;
        background: #f1f3f5;
    }

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-top: 3rem;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-card {
        background: white;
        border: 2px solid var(--color-border);
        border-radius: 12px;
        padding: 2.5rem 2rem;
        text-align: center;
        position: relative;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .pricing-card:hover {
        transform: translateY(-5px);
        border-color: var(--color-primary);
    }

    .pricing-card:nth-child(2) {
        border-color: var(--color-primary);
        transform: scale(1.05);
    }

    .pricing-card:nth-child(2)::before {
        content: 'Most Popular';
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: #667eea;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .pricing-header {
        margin-bottom: 2rem;
    }

    .pricing-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #f3f4f6;
    }

    .pricing-price {
        margin-bottom: 1rem;
    }

    .price-amount {
        font-size: 3rem;
        font-weight: 700;
        color: var(--color-primary);
    }

    .price-period {
        font-size: 1rem;
        color: var(--color-text_muted);
    }

    .pricing-description {
        color: var(--color-text_muted);
        font-size: 0.9rem;
    }

    .pricing-features {
        list-style: none;
        padding: 0;
        margin-bottom: 2rem;
        text-align: center;
    }

    .pricing-features li {
        padding: 0.75rem 0;
        color: var(--color-text_muted);
        display: flex;
        align-items: center;
    }

    .pricing-features li i {
        color: #28a745;
        margin-right: 0.75rem;
        font-size: 0.9rem;
    }

    .pricing-button {
        display: inline-block;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary_dark));
        color: white;
        padding: 1rem 2rem;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 500;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        width: 100%;
        text-align: center;
    }

    .pricing-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        color: white;
    }

    .pricing-card:nth-child(2) .pricing-button {
        background: linear-gradient(135deg, #ff6b35, #f7931e);
    }

    /* CTA Section */
    .services-cta-section {
        padding: 6rem 0;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
        color: white;
        text-align: center;
    }

    .cta-content {
        max-width: 600px;
        margin: 0 auto;
    }

    .cta-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        line-height: 1.2;
    }

    .cta-subtitle {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        opacity: 0.9;
        line-height: 1.6;
    }

    .cta-button {
        display: inline-block;
        background: white;
        color: var(--color-primary);
        padding: 1rem 2.5rem;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        font-size: 1.1rem;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        color: var(--color-primary);
    }

    /* Services Navigation Control */
    .services-page-navigation-control {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .services-page-navigation-control .button {
        margin-top: 0.5rem;
        text-decoration: none;
        display: inline-block;
    }

    .services-page-navigation-control .description {
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: var(--color-text_secondary);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .services-page-hero-section .hero-title {
            font-size: 2.5rem;
        }
        
        .services-page-hero-section .hero-subtitle {
            font-size: 1.1rem;
        }
        
        .services-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        
        .service-card {
            padding: 2rem 1.5rem;
        }
        
        .pricing-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        
        .pricing-card:nth-child(2) {
            transform: none;
        }
        
        .cta-title {
            font-size: 2rem;
        }
        
        .cta-subtitle {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 480px) {
        .service-card {
            padding: 1.5rem 1rem;
        }
        
        .pricing-card {
            padding: 2rem 1.5rem;
        }
        
        .price-amount {
            font-size: 2.5rem;
        }
    }

    /* About Page Responsive Design */
    @media (max-width: 768px) {
        .about-hero-section .hero-title {
            font-size: 2.5rem;
        }
        
        .about-hero-section .hero-subtitle {
            font-size: 1.1rem;
        }
        
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }
        
        .values-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        
        .team-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        
        .timeline::before {
            left: 30px;
        }
        
        .timeline-item {
            flex-direction: row !important;
            padding-left: 60px;
        }
        
        .timeline-year {
            position: absolute;
            left: 0;
            min-width: 60px;
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }
        
        .timeline-content {
            margin: 0;
            max-width: none;
        }
    }

    @media (max-width: 480px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }
        
        .stat-number {
            font-size: 2.5rem;
        }
    }

/* ========================================
   CUSTOMIZER RANGE SLIDER FIXES
   ======================================== */

/* Fix range slider positioning */
.customize-control input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
    outline: none;
    margin: 10px 0;
}

.customize-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0073aa;
    cursor: pointer;
    border: 2px solid var(--color-bg_primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.customize-control input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0073aa;
    cursor: pointer;
    border: 2px solid var(--color-bg_primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Fix range track */
.customize-control input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: var(--color-border);
    border-radius: 3px;
}

.customize-control input[type="range"]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: var(--color-border);
    border-radius: 3px;
    border: none;
}

/* Text shadow for overlay images */
.business-hero-banner[data-overlay="gradient"] .hero-headline,
.business-hero-banner[data-overlay="gradient"] .hero-subtitle,
.business-hero-banner[data-overlay="solid"] .hero-headline,
.business-hero-banner[data-overlay="solid"] .hero-subtitle {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Force hero text to be white */
.business-hero-banner .hero-headline,
.business-hero-banner .hero-subtitle,
.business-hero-banner .hero-content h1,
.business-hero-banner .hero-content h2,
.business-hero-banner .hero-content p,
.services-hero-wrapper .services-hero-main-title,
.services-hero-wrapper .services-hero-main-subtitle {
    color: #ffffff !important;
}

/* ========================================
   CONTACT FORM SECTION STYLES
   ======================================== */

/* Contact Form Section */
.business-contact-section {
    padding: 5rem 0;
}

.business-contact-section .section-title {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
}

.business-contact-section .section-subtitle {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--color-text_secondary);
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
}

.business-contact-form {
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-text_primary);
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    padding: 0.75rem 1rem;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    text-align: center;
    margin-top: 2rem;
}

.form-submit .btn {
    min-width: 200px;
    position: relative;
}

.btn-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-messages {
    margin-top: 1.5rem;
    text-align: center;
}

.success-message,
.error-message {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.success-message {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .business-contact-form {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .business-contact-section {
        padding: 3rem 0;
    }
}

/* ========================================
   PORTFOLIO SECTION STYLES
   ======================================== */

/* Portfolio Section */
.business-portfolio-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.business-portfolio-section .section-title {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-text_primary);
}

.business-portfolio-section .section-subtitle {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--color-text_secondary);
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
}

.portfolio-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    max-width: 400px;
    margin: 0 auto;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.portfolio-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

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

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.05);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-content {
    text-align: center;
    color: white;
    padding: 2rem;
}

.portfolio-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.portfolio-description {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.portfolio-view-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

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

/* Portfolio Placeholder */
.portfolio-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
}

.placeholder-content i {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.placeholder-content h3 {
    color: #495057;
    margin-bottom: 0.5rem;
}

.placeholder-content p {
    color: #6c757d;
    margin: 0;
}

/* Lightbox Styles */
.portfolio-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.lightbox-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.lightbox-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.lightbox-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.lightbox-info {
    padding: 2rem;
    background: white;
}

.lightbox-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text_primary);
}

.lightbox-description {
    color: var(--color-text_secondary);
    line-height: 1.6;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .business-portfolio-section {
        padding: 3rem 0;
    }
    
    .lightbox-content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .lightbox-info {
        padding: 1.5rem;
    }
    
    .portfolio-content {
        padding: 1.5rem;
    }
}

/* ========================================
   VIDEO BACKGROUND STYLES
   ======================================== */

/* Hero Background Video */
.hero-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

/* Video fallback image */
.hero-video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: none;
}

/* Hero overlay for video backgrounds */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Overlay styles are now dynamic and set inline in the template */

/* Ensure content is above video and overlay */
.business-hero-banner .container {
    position: relative;
    z-index: 3;
}

/* Mobile video handling */
@media (max-width: 768px) {
    .business-hero-banner[data-mobile-fallback="true"] .hero-background-video {
        display: none;
    }
    
    .business-hero-banner[data-mobile-fallback="true"] .hero-video-fallback {
        display: block;
    }
}

/* ========================================
   CUSTOMIZER SECTION ORDER CONTROL
   ======================================== */

.section-order-container {
    margin-top: 10px;
}

.section-order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg_primary);
}

.section-order-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    cursor: move;
    background: var(--color-bg_primary);
    transition: background-color 0.2s ease;
}

.section-order-item:last-child {
    border-bottom: none;
}

.section-order-item:hover {
    background: #f8f9fa;
}

.section-order-item.ui-sortable-helper {
    background: #e3f2fd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 4px;
}

.section-order-item .dashicons-menu {
    color: #999;
    margin-right: 10px;
    cursor: move;
}

.section-order-item .section-name {
    flex: 1;
    font-weight: 500;
}

.section-enabled-indicator {
    margin-left: auto;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.section-enabled-indicator.enabled {
    opacity: 1;
    color: #46b450;
}

.section-enabled-indicator.disabled {
    opacity: 0.3;
    color: #dc3232;
}

.section-order-item.section-disabled {
    opacity: 0.6;
}

.section-order-item.section-disabled .section-name {
    text-decoration: line-through;
}

.section-order-placeholder {
    background: #f0f8ff;
    border: 2px dashed #0073aa;
    height: 50px;
    margin: 2px 0;
    border-radius: 4px;
}

/* ========================================
   NEW BUSINESS SECTIONS STYLES
   ======================================== */

/* Team Section */
.business-team-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.business-team-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.business-team-section .section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-text_secondary);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.team-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 2rem 0;
}

.team-placeholder .placeholder-content i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.team-placeholder .placeholder-content h3 {
    font-size: 1.5rem;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.team-placeholder .placeholder-content p {
    color: var(--color-text_secondary);
    font-size: 1rem;
}

/* Team Grid Styles */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
    justify-items: center;
}

/* Center grid items when there are fewer items than columns */
.team-grid {
    place-items: center;
}

/* Fallback centering for browsers without :has() support */
@supports not selector(:has(*)) {
    .team-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
    }
    
    .team-member {
        flex: 0 0 280px;
        max-width: 350px;
    }
}

.team-member {
    background: var(--color-bg_primary);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
    border: 1px solid #f5f5f5;
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    border-color: #e0e0e0;
}

.team-member-photo {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 2rem auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #f8f9fa;
    transition: all 0.3s ease;
}

.team-member:hover .team-member-photo {
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.team-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.team-member:hover .team-member-photo img {
    transform: scale(1.1);
}

.team-member-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
}

.team-member-info {
    padding: 0 2rem 2rem;
}

.team-member-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.team-member-position {
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: 600;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.team-member-bio {
    font-size: 0.95rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

.team-member-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.social-link.linkedin {
    background: #0077b5;
    color: white;
}

.social-link.linkedin:hover {
    background: #005885;
    transform: translateY(-2px);
}

.social-link.twitter {
    background: #1da1f2;
    color: white;
}

.social-link.twitter:hover {
    background: #0d8bd9;
    transform: translateY(-2px);
}

.social-link.email {
    background: #ea4335;
    color: white;
}

.social-link.email:hover {
    background: #d33b2c;
    transform: translateY(-2px);
}

/* Team Animation States */
.team-member {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.team-member.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Alternative layouts based on number of team members */
.team-grid:has(.team-member:nth-child(1):last-child) {
    grid-template-columns: 1fr;
    max-width: 350px;
    justify-content: center;
}

.team-grid:has(.team-member:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
    justify-content: center;
}

.team-grid:has(.team-member:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
    justify-content: center;
}

.team-grid:has(.team-member:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
    justify-content: center;
}

.team-grid:has(.team-member:nth-child(5):last-child) {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
    justify-content: center;
}

.team-grid:has(.team-member:nth-child(6):last-child) {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
    justify-content: center;
}

/* Mobile Responsive for Team */
@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
        gap: 1.5rem;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
        padding: 0 1rem;
        justify-content: center !important;
    }
    
    .team-member-photo {
        width: 100px;
        height: 100px;
        margin: 1.5rem auto 1rem;
    }
    
    .team-member-info {
        padding: 0 1.5rem 1.5rem;
    }
    
    .team-member-name {
        font-size: 1.2rem;
    }
    
    .team-member-position {
        font-size: 0.9rem;
    }
    
    .team-member-bio {
        font-size: 0.9rem;
    }
    
    .social-link {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        justify-content: center !important;
    }
    
    .team-member-photo {
        width: 90px;
        height: 90px;
    }
    
    .team-member-info {
        padding: 0 1.2rem 1.2rem;
    }
}

/* Features Section */
.business-features-section {
    padding: 5rem 0;
    background: var(--color-bg_secondary);
}

.business-features-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.business-features-section .section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-text_secondary);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.features-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-bg_primary);
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.features-placeholder .placeholder-content i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.features-placeholder .placeholder-content h3 {
    font-size: 1.5rem;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.features-placeholder .placeholder-content p {
    color: var(--color-text_secondary);
    font-size: 1rem;
}

/* Features Grid Styles */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-item {
    background: var(--color-bg_primary);
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.feature-item:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    margin-bottom: 1.5rem;
}

.feature-icon i {
    font-size: 3rem;
    color: var(--color-primary);
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon i {
    color: #5a67d8;
    transform: scale(1.1);
}

.feature-content {
    position: relative;
    z-index: 2;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.feature-description {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin: 0;
}

/* Feature Animation States */
.feature-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.feature-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive grid adjustments */
@media (min-width: 769px) {
    .features-grid .feature-item:nth-child(4):last-child {
        grid-column: span 2;
        max-width: 500px;
        margin: 0 auto;
    }
}

/* Mobile Responsive for Features */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .feature-item {
        padding: 2rem 1.5rem;
    }
    
    .feature-icon i {
        font-size: 2.5rem;
    }
    
    .feature-title {
        font-size: 1.3rem;
    }
    
    .feature-description {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .feature-item {
        padding: 1.5rem 1rem;
    }
    
    .feature-icon i {
        font-size: 2rem;
    }
    
    .feature-title {
        font-size: 1.2rem;
    }
}

/* FAQ Section */
.business-faq-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.business-faq-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.business-faq-section .section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-text_secondary);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.faq-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 2rem 0;
}

.faq-placeholder .placeholder-content i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.faq-placeholder .placeholder-content h3 {
    font-size: 1.5rem;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.faq-placeholder .placeholder-content p {
    color: var(--color-text_secondary);
    font-size: 1rem;
}

/* FAQ Accordion Styles */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--color-bg_primary);
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    cursor: pointer;
    background: var(--color-bg_primary);
    border: none;
    width: 100%;
    text-align: center;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background: #f8f9fa;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text_primary);
    flex: 1;
    padding-right: 1rem;
}

.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #667eea;
    color: var(--color-text_primary);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.faq-toggle i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    background: #5a67d8;
    transform: rotate(45deg);
}

.faq-item.active .faq-toggle i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Adjust based on content */
}

.faq-answer-content {
    padding: 0 2rem 2rem 2rem;
    background: #f8f9fa;
}

.faq-answer-content p {
    margin: 0;
    color: var(--color-text_secondary);
    line-height: 1.6;
    font-size: 1rem;
}

/* FAQ Animation States */
.faq-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.faq-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Responsive for FAQ */
@media (max-width: 768px) {
    .faq-question {
        padding: 1.2rem 1.5rem;
    }
    
    .faq-question h3 {
        font-size: 1.1rem;
        padding-right: 0.5rem;
    }
    
    .faq-answer-content {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
    
    .faq-toggle {
        width: 25px;
        height: 25px;
    }
    
    .faq-toggle i {
        font-size: 0.8rem;
    }
}

/* Pricing Section */
.business-pricing-section {
    padding: 5rem 0;
    background: var(--color-bg_secondary);
}

.business-pricing-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.business-pricing-section .section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-text_secondary);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-bg_primary);
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.pricing-placeholder .placeholder-content i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.pricing-placeholder .placeholder-content h3 {
    font-size: 1.5rem;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.pricing-placeholder .placeholder-content p {
    color: var(--color-text_secondary);
    font-size: 1rem;
}

/* Pricing Cards Styles */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-plan {
    background: var(--color-bg_primary);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.pricing-plan:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.pricing-plan.popular {
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.pricing-plan.popular:hover {
    transform: scale(1.05) translateY(-5px);
}

.popular-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    padding: 0.5rem 2rem;
    border-radius: 0 0 20px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.plan-header {
    text-align: center;
    padding: 2.5rem 2rem 2rem 2rem;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
}

.pricing-plan.popular .plan-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
}

.plan-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--color-text_primary);
}

.pricing-plan.popular .plan-name {
    color: var(--color-text_primary);
}

.plan-price {
    margin-bottom: 1rem;
}

.plan-price .price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.pricing-plan.popular .plan-price .price {
    color: var(--color-text_primary);
}

.plan-price .period {
    font-size: 1rem;
    color: var(--color-text_secondary);
    margin-left: 0.5rem;
    font-weight: 500;
}

.pricing-plan.popular .plan-price .period {
    color: rgba(255,255,255,0.9);
}

.plan-description {
    font-size: 1rem;
    color: var(--color-text_secondary);
    line-height: 1.5;
    margin: 0;
}

.pricing-plan.popular .plan-description {
    color: rgba(255,255,255,0.9);
}

.plan-features {
    padding: 2rem;
    background: var(--color-bg_primary);
}

.plan-features ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-features li {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1rem;
    color: var(--color-text_secondary);
    opacity: 1;
    visibility: visible;
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li i {
    color: var(--color-primary);
    margin-right: 0.75rem;
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.plan-features li .feature-text {
    flex: 1;
    line-height: 1.5;
}

/* Fallback for when Font Awesome doesn't load */
.plan-features li i.fas.fa-check::before {
    content: "✓";
    font-family: inherit;
    font-weight: bold;
}

.plan-footer {
    padding: 2rem;
    text-align: center;
    background: #f8f9fa;
}

.pricing-plan.popular .plan-footer {
    background: var(--color-bg_primary);
}

.btn-popular {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    border: none;
    color: var(--color-text_primary);
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.btn-popular:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Pricing Animation States */
.animate-section .pricing-plan {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.animate-section.animate-in .pricing-plan,
.pricing-plan.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.animate-section.animate-in .pricing-plan.popular,
.pricing-plan.popular.animate-in {
    transform: scale(1.05) translateY(0);
}

/* Ensure features are always visible */
.pricing-plan .plan-features,
.pricing-plan .plan-features ul,
.pricing-plan .plan-features li {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.pricing-plan .plan-features ul {
    display: block !important;
}

/* Mobile Responsive for Pricing */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .pricing-plan.popular {
        transform: none;
    }
    
    .animate-section.animate-in .pricing-plan.popular,
    .pricing-plan.popular.animate-in {
        transform: translateY(0);
    }
    
    .pricing-plan.popular:hover {
        transform: translateY(-5px);
    }
    
    .plan-header {
        padding: 2rem 1.5rem 1.5rem 1.5rem;
    }
    
    .plan-price .price {
        font-size: 2.5rem;
    }
    
    .plan-features {
        padding: 1.5rem;
    }
    
    .plan-footer {
        padding: 1.5rem;
    }
    
    .popular-badge {
        padding: 0.4rem 1.5rem;
        font-size: 0.8rem;
    }
}

/* Single plan centering */
@media (min-width: 769px) {
    .pricing-grid .pricing-plan:only-child {
        max-width: 350px;
        margin: 0 auto;
    }
}

/* Blog Section */
.business-blog-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
}

.business-blog-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.business-blog-section .section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-text_secondary);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.blog-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 2rem 0;
}

.blog-placeholder .placeholder-content i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.blog-placeholder .placeholder-content h3 {
    font-size: 1.5rem;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.blog-placeholder .placeholder-content p {
    color: var(--color-text_secondary);
    font-size: 1rem;
}

/* Blog Grid Styles */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-post {
    background: var(--color-bg_primary);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.blog-post-image {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.blog-post-image a {
    display: block;
    height: 100%;
}

.blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-post:hover .blog-post-image img {
    transform: scale(1.05);
}

.blog-post-content {
    padding: 1.5rem;
}

.blog-post-categories {
    margin-bottom: 1rem;
}

.category-tag {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    color: var(--color-text_primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-post-title {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
}

.blog-post-title a {
    color: var(--color-text_primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-post-title a:hover {
    color: var(--color-primary);
}

.blog-post-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--color-text_secondary);
}

.blog-post-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-post-meta i {
    font-size: 0.8rem;
    color: var(--color-primary);
}

.blog-post-excerpt {
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.blog-post-footer {
    margin-top: auto;
}

.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.read-more-btn:hover {
    color: #5a67d8;
    gap: 0.75rem;
}

.read-more-btn i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.read-more-btn:hover i {
    transform: translateX(3px);
}

.blog-section-footer {
    text-align: center;
    margin-top: 3rem;
}

/* Blog Animation States */
.blog-post {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.blog-post.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Responsive for Blog */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .blog-post-image {
        height: 180px;
    }
    
    .blog-post-content {
        padding: 1.25rem;
    }
    
    .blog-post-title {
        font-size: 1.2rem;
    }
    
    .blog-post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .blog-post-image {
        height: 160px;
    }
    
    .blog-post-content {
        padding: 1rem;
    }
    
    .blog-post-title {
        font-size: 1.1rem;
    }
}

/* Partners Section */
.business-partners-section {
    padding: 5rem 0;
    background: var(--color-bg_secondary);
}

.business-partners-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.business-partners-section .section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-text_secondary);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.partners-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-bg_primary);
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.partners-placeholder .placeholder-content i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.partners-placeholder .placeholder-content h3 {
    font-size: 1.5rem;
    color: var(--color-text_primary);
    margin-bottom: 1rem;
}

.partners-placeholder .placeholder-content p {
    color: var(--color-text_secondary);
    font-size: 1rem;
}

/* Partners Grid Styles */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--color-bg_primary);
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid #f5f5f5;
    min-height: 120px;
}

.partner-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-color: #e0e0e0;
}

.partner-link,
.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.partner-link {
    transition: opacity 0.3s ease;
}

.partner-link:hover {
    opacity: 0.8;
}

.partner-item img,
.partner-link img,
.partner-logo img {
    max-width: 100%;
    height: 100px !important;
    width: auto !important;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.7);
    transition: all 0.3s ease;
}

.partner-item:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

/* Partner Placeholder Styles */
.partner-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    padding: 1rem;
}

.partner-placeholder-text {
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.partner-placeholder-text i {
    font-size: 2rem;
    color: #d1d5db;
    margin-bottom: 0.25rem;
}

.partner-placeholder-text span {
    font-weight: 500;
    color: #6b7280;
    word-break: break-word;
}

/* Partners Animation States */
.partner-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.partner-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Fixed layout - always 4 columns on desktop */

/* Mobile Responsive for Partners */
@media (max-width: 1200px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
        padding: 0 1rem;
    }
    
    .partner-item {
        padding: 1.5rem 1rem;
        min-height: 100px;
    }
    
    .partner-item img {
        max-height: 80px;
    }
}

@media (max-width: 480px) {
    .partners-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .partner-item {
        padding: 1.5rem;
        min-height: 80px;
    }
    
    .partner-item img {
        max-height: 70px;
    }
}

/* Mobile Responsive for New Sections */
@media (max-width: 768px) {
    .business-team-section .section-title,
    .business-features-section .section-title,
    .business-faq-section .section-title,
    .business-pricing-section .section-title,
    .business-blog-section .section-title,
    .business-partners-section .section-title {
        font-size: 2rem;
    }
    
    .business-team-section .section-subtitle,
    .business-features-section .section-subtitle,
    .business-faq-section .section-subtitle,
    .business-pricing-section .section-subtitle,
    .business-blog-section .section-subtitle,
    .business-partners-section .section-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .team-placeholder,
    .features-placeholder,
    .faq-placeholder,
    .pricing-placeholder,
    .blog-placeholder,
    .partners-placeholder {
        padding: 3rem 1.5rem;
        margin: 1rem 0;
    }
    
    .team-placeholder .placeholder-content i,
    .features-placeholder .placeholder-content i,
    .faq-placeholder .placeholder-content i,
    .pricing-placeholder .placeholder-content i,
    .blog-placeholder .placeholder-content i,
    .partners-placeholder .placeholder-content i {
        font-size: 3rem;
    }
}

/* Services Hero - Completely Recreated with Unique Classes */
.services-hero-wrapper {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    overflow: hidden;
    padding: 8rem 0 6rem 0;
    padding-top: 8rem !important; /* match portfolio hero height regardless of inline padding */
    padding-bottom: 6rem !important;
    color: var(--color-text_primary);
    text-align: center;
}

/* Remove separator line from Services hero */
.services-hero-wrapper::before,
.services-hero-wrapper::after {
    content: none !important;
    display: none !important;
}

/* Also remove any potential inheritance from other hero classes */
.services-hero-wrapper *::before,
.services-hero-wrapper *::after {
    content: none !important;
    display: none !important;
}

.services-hero-wrapper .services-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.services-hero-wrapper .services-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.services-hero-wrapper .services-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.services-hero-wrapper .services-hero-content {
    text-align: center;
    width: 100%;
    display: block;
}

.services-hero-wrapper .services-hero-main-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-align: center;
    color: var(--color-text_primary);
    background: none !important;
    background-size: auto !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    animation: none !important;
    display: block;
    width: 100%;
    margin: 0;
}

.services-hero-wrapper .services-hero-main-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 1;
    text-align: center;
    color: var(--color-accent); /* match portfolio hero subtitle */
    background: none !important;
    background-size: auto !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    animation: none !important;
}

/* Dynamic Section Separators - Controlled by Customizer */
/* Home Page separators are now dynamically generated in front-page.php */

/* Home Page Section Titles - Shiny Blue Effect */
.business-counters-section .section-title,
.business-services-section .section-title,
.business-team-section .section-title,
.business-features-section .section-title,
.business-portfolio-section .section-title,
.business-faq-section .section-title,
.business-pricing-section .section-title,
.business-blog-section .section-title,
.business-partners-section .section-title,
.business-contact-section .section-title,
.business-cta-section .section-title {
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shinyBlue 3s ease-in-out infinite;
    text-align: center;
}

/* Business Testimonials Section - Completely Rebuilt with Unique Classes */
.business-testimonials-wrapper {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-bg_secondary) 0%, var(--color-bg_primary) 100%);
    text-align: center;
}

.business-testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.business-testimonials-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    text-align: center;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shinyBlue 3s ease-in-out infinite;
}

.business-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.business-testimonial-card {
    background: var(--color-bg_secondary);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
    position: relative;
    text-align: center;
}

.business-testimonial-card::before {
    content: '"';
    position: absolute;
    top: 1rem;
    left: 2rem;
    font-size: 4rem;
    color: var(--color-primary);
    opacity: 0.2;
    font-family: serif;
}

.business-testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.business-testimonial-quote {
    font-size: 1.1rem;
    color: var(--color-text_secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
    font-style: italic;
}

.business-testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.business-testimonial-name {
    font-weight: 600;
    color: var(--color-text_primary);
    font-size: 1.1rem;
}

.business-testimonial-company {
    color: var(--color-text_secondary);
    font-size: 0.9rem;
}

/* ========================================
   GALLERY PAGE STYLES
   ======================================== */

/* Gallery Hero */
.gallery-hero-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    padding: 5rem 0;
    text-align: center;
    color: var(--color-text_primary);
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.gallery-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.gallery-hero-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff;
}

.gallery-hero-main-subtitle {
    font-size: 1.25rem;
    color: #ffd700;
}

/* Gallery Content Section */
.gallery-content-section {
    padding: 5rem 0;
    background: var(--color-bg_primary);
    color: var(--color-text_primary);
}

.gallery-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.gallery-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--color-primary), var(--color-primary_dark), var(--color-primary)) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shinyBlue 3s ease-in-out infinite;
    display: block;
    width: 100%;
    clear: both;
}

.gallery-section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text_secondary);
}

/* Gallery Filter */
.gallery-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    background: var(--color-bg_secondary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-weight: 600;
    color: var(--color-text_secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: #667eea;
    border-color: var(--color-primary);
    color: var(--color-text_primary);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary_dark) 100%);
    border-color: var(--color-primary);
    color: var(--color-text_primary);
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: all 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Photo Item */
.gallery-photo-item {
    position: relative;
}

.gallery-photo-link {
    display: block;
    position: relative;
    overflow: hidden;
}

/* Video Item */
.gallery-video-item {
    position: relative;
}

.gallery-video-link {
    display: block;
    position: relative;
    overflow: hidden;
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(102, 126, 234, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-text_primary);
    transition: all 0.3s ease;
}

.gallery-video-link:hover .video-play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(118, 75, 162, 0.9);
}

/* Media Type Badge */
.media-type-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-text_primary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Gallery Item Info */
.gallery-item-info {
    padding: 1rem;
    background: var(--color-bg_primary);
}

.gallery-item-info h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin-bottom: 0.5rem;
}

.gallery-item-info p {
    font-size: 0.95rem;
    color: var(--color-text_secondary);
    line-height: 1.5;
}

/* JavaScript Lightbox */
.gallery-lightbox {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    margin: 0;
    border: none;
    overflow: hidden;
    box-sizing: border-box;
}

/* Full-screen styles when lightbox is open */
.gallery-lightbox.open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Force lightbox to cover everything */
body:has(.gallery-lightbox.open) {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Ensure no other elements interfere */
.gallery-lightbox * {
    box-sizing: border-box !important;
}

/* No :target needed - JavaScript controls display */

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 3rem;
    color: var(--color-text_primary);
    text-decoration: none;
    line-height: 1;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    color: var(--color-primary);
    transform: rotate(90deg);
}

.gallery-lightbox.open .lightbox-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.gallery-lightbox.open .lightbox-content img {
    max-width: 80vw !important;
    max-height: 70vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Force image size with higher specificity */
div.gallery-lightbox.open .lightbox-content img {
    max-width: 80vw !important;
    max-height: 70vh !important;
}

.gallery-lightbox.open .lightbox-content.video-content {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 70vh !important;
    max-height: 70vh !important;
}

.gallery-lightbox.open .lightbox-content iframe {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.lightbox-caption {
    background: rgba(0, 0, 0, 0.8);
    color: var(--color-text_primary);
    padding: 1.5rem;
    margin-top: 1rem;
    border-radius: 8px;
}

.lightbox-caption h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text_primary);
}

.lightbox-caption p {
    font-size: 1rem;
    color: var(--color-text_muted);
    line-height: 1.6;
}

/* Album Gallery */
.gallery-albums {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.album-card {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
}

.album-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.album-link {
    text-decoration: none;
    display: block;
}

.album-cover {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.album-card:hover .album-cover img {
    transform: scale(1.05);
}

.album-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 1rem;
}

.photo-count {
    color: var(--color-text_primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.album-card h3 {
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text_primary);
    margin: 0;
}

/* Album Lightbox */
.album-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    overflow-y: auto;
    padding: 4rem 2rem 2rem;
}

.album-lightbox.open {
    display: block;
}

/* No :target needed - JavaScript controls display */

.album-lightbox-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
}

.album-lightbox-header h2 {
    color: var(--color-text_primary);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.album-close {
    font-size: 2.5rem;
    color: var(--color-text_primary);
    text-decoration: none;
    line-height: 1;
    transition: all 0.3s ease;
}

.album-close:hover {
    color: var(--color-primary);
    transform: rotate(90deg);
}

.album-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.album-photo-item a {
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

.album-photo-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.album-photo-item:hover img {
    transform: scale(1.05);
}

/* Dark Theme */
.gallery-page.business-dark-template .gallery-content-section {
    background: var(--color-bg_primary);
}

.gallery-page.business-dark-template .gallery-section-subtitle {
    color: var(--color-text_muted);
}

.gallery-page.business-dark-template .filter-btn {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
    color: var(--color-text_muted);
}

.gallery-page.business-dark-template .filter-btn:hover {
    background: #667eea;
    border-color: var(--color-primary);
    color: var(--color-text_primary);
}

.gallery-page.business-dark-template .gallery-item-info {
    background: var(--color-bg_secondary);
}

.gallery-page.business-dark-template .gallery-item-info h3 {
    color: var(--color-text_primary);
}

.gallery-page.business-dark-template .gallery-item-info p {
    color: var(--color-text_muted);
}

.gallery-page.business-dark-template .album-card {
    background: var(--color-bg_secondary);
    border-color: var(--color-border_dark);
}

.gallery-page.business-dark-template .album-card h3 {
    color: var(--color-text_primary);
}

/* Responsive */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-albums {
        grid-template-columns: 1fr;
    }
    
    .album-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .lightbox-content.video-content {
        width: 95%;
    }
    
    .gallery-hero-main-title {
        font-size: 2rem;
    }
}