/* ===== Page enter animation (shared) ===== */
.page-enter { animation: pageEnter 420ms ease-out both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


        :root {
            --dark-bg: #fdf2ff;
            --gold: linear-gradient(135deg, #d4af37 0%, #f9e29c 50%, #b8860b 100%);
            --gold-solid: #d4af37;
            --lavender-accent: #db2777; 
            --text-main: #4a044e;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-size: clamp(14px, 1.1vw, 16px);
    background-color: var(--dark-bg);
    font-family: 'Lexend', sans-serif;
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
} /* <-- 加上这个闭合括号 */

body a { 
    text-decoration: none;
    color: inherit;
}

        /* --- Navigation --- */
        nav {
            position: fixed;
            top: 0; width: 100%;
            padding: 0.8rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(253, 242, 255, 0.9);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(212, 175, 55, 0.3);
            z-index: 1000;
        }

        .logo-container { 
            cursor: pointer;
            font-size: 2.5rem; font-weight: 800; letter-spacing: 3px; 
            background: var(--gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));
            text-transform: uppercase; font-style: italic;
text-decoration: none;
        }

        .nav-menu { display: flex; list-style: none; margin-left: auto;}
        .nav-menu li { margin: 0 1.2rem; }
        .nav-menu a {
            color: var(--gold-solid);
            text-decoration: none; 
            font-weight: 600; 
            font-size: 0.75rem;
            transition: 0.3s; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; opacity: 0.8;
        }
        .nav-menu a:hover, .nav-menu a.active { 
            opacity: 1;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.6); transform: translateY(-1px);
        }

                /* ===== Products dropdown (global) ===== */
        .nav-menu li.nav-dropdown { position: relative; }

        /* 子菜单默认隐藏 */
/* --- 1. Product 旁边的向下箭头 --- */
.dropdown-toggle {
    display: inline-flex !important; /* 关键：确保不破坏水平排版 */
    align-items: center;
    gap: 5px;
}

/* 小箭头图标 */
.arrow-icon {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--gold-solid);
    transition: transform 0.3s ease;
    display: inline-block;
}

/* 展开时箭头旋转 */
.nav-dropdown.open .arrow-icon {
    transform: rotate(180deg);
}

/* --- 2. 电脑端全宽下拉菜单 (Mega Menu) --- */
@media (min-width: 769px) {
    /* 核心：让 nav 成为定位基准 */
    nav { position: fixed; } 
    .nav-menu li.nav-dropdown { position: static; } 

    .nav-menu .dropdown-menu {
        display: none; /* 初始隐藏，禁止 hover */
        position: absolute;
        top: 100%; left: 0;
        width: 100vw; /* 全屏宽 */
        background: rgba(253, 242, 255, 0.98); 
        padding: 40px 10%;
        border-bottom: 2px solid var(--gold-solid);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 2000;
        
        /* 内部横向排版 */
        flex-direction: row; 
        justify-content: flex-start;
        gap: 60px;
    }

    /* 只有当 JS 加上 open 类名时才显示 */
    .nav-dropdown.open > .dropdown-menu {
        display: flex !important;
        animation: slideDown 0.4s ease;
    }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


        .nav-menu .dropdown-menu a{
        display: block;
        padding: 10px 16px;
        white-space: nowrap;
        }


        /* 手机端：子菜单变成菜单里的缩进列表（不浮动） */
        @media (max-width: 768px){
    /* 确保菜单项容器占满全宽并居中内容 */
    .nav-menu li {
        width: 100%;
        margin: 12px 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center; /* ✅ 关键：让 PRODUCTS 文字居中 */
    }

    /* 确保按钮内部的文字和箭头也居中 */
    .dropdown-toggle {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: relative; /* 为箭头定位提供参考 */
        padding-right: 0 !important; /* 清除可能的内边距 */
    }

    /* 箭头绝对定位，不占用物理空间，从而不影响文字居中 */
    .dropdown-toggle .arrow-icon {
        position: absolute;
        right: calc(50% - 65px); /* 根据文字长度微调，大约在文字右侧固定位置 */
        margin: 0 !important;
    }


/* --- 修复后的手机端子菜单容器 --- */
    .nav-menu .dropdown-menu {
        display: none !important;    /* 初始强制隐藏，解决不回缩问题 */
        position: static;            /* 变成文档流，推开下方内容 */
        width: 100%;
        background: rgba(74, 4, 78, 0.05); /* 淡淡的底色区分层级 */
        margin: 5px 0;
        padding: 5px 0;
        box-shadow: none;
        border: none;
    }

    /* 当父级展开时显示 */
    .nav-dropdown.open > .dropdown-menu {
        display: block !important;
    }

    /* ✅ 子选项文字排版：核心修改点 */
    .nav-menu .dropdown-menu a {
font-size: 11px !important;
        color: var(--gold-solid) !important;
        text-transform: none !important;
        display: block;
        width: fit-content; /* 宽度随文字 */
        min-width: 160px;   /* 设定固定宽度确保竖杠对齐 */
        padding: 8px 0 8px 15px !important; /* 左侧留出空间给竖杠 */
        text-align: left !important;
        border-left: 1px solid rgba(212, 175, 55, 0.5) !important; /* 细杠 */
        margin: 0 0 0 25% !important; /* 整体在页面居中 */
        letter-spacing: 1px;
    }
}
        


        /* --- Pages --- */
        main.page { padding-top: 80px; min-height: 100vh; }

        /* --- Hero --- */
        .hero {
            height: 70vh;
            background: radial-gradient(circle at 30% 50%, #fae8ff 0%, #fdf2ff 100%);
            display: flex; align-items: center; padding: 0 10%; position: relative;
        }
        .bg-img {
            position: absolute;
            right: 0; top: 0; width: 65%; height: 100%;
            background: url('https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?q=80&w=2070') center/cover;
            mask-image: linear-gradient(to left, #fdf2ff 60%, transparent); opacity: 0.4;
            pointer-events: none;
        }
        .hero-content { max-width: 700px; z-index: 2; }
        .hero-content h1 { font-size: 3.5rem; background: var(--gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            font-weight: 800; margin-bottom: 1rem; }
        .hero-content p { font-weight: 500; font-size: 1.05rem; }

        /* --- Gallery Section --- */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px; padding: 50px 10%;
        }
        .gallery-item {
            height: 250px;
            border-radius: 8px; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.2);
        }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
        .gallery-item:hover img { transform: scale(1.1); }

        /* --- Products --- */
        .product-header { padding: 60px 10% 30px;
            text-align: center; }
        .product-header h2 { font-size: 2.5rem; background: var(--gold); -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; font-weight: 700; }
        .product-header p { font-weight: 600; letter-spacing: 1px; }

        .product-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;
            padding: 40px 10%; }
        
        .card {
 display: block;          /* ✅ 新增：让 a.card 像 div 一样撑满卡片 */
  width: 100%;             /* 可选，但建议加 */
  text-decoration: none;
            background-size: cover;
            background-position: center; border: 1px solid rgba(212, 175, 55, 0.2);
            padding: 40px; border-radius: 12px; min-height: 250px; transition: 0.4s; position: relative;
            overflow: hidden; cursor: pointer; color: white;
        }
        .card::before { content: ""; position: absolute;
            top: 0; left: 0; width: 100%; height: 100%; background: rgba(74, 4, 78, 0.7); z-index: 1; transition: 0.3s;
        }
        .card:hover::before { background: rgba(74, 4, 78, 0.5); }
        .card > * { position: relative; z-index: 2; }
        .card h3 { color: var(--gold-solid); margin-bottom: 15px; font-size: 1.5rem; font-weight: 700; }
        .card p { font-weight: 400; font-size: 0.95rem; }

        /* --- Details & Features --- */
        .detail-hero { height: 50vh;
            background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 40px 10%; border-bottom: 1px solid var(--gold-solid); position: relative;
        }
        .detail-hero::after { content: ""; position: absolute; top: 0; left: 0; width: 100%;
            height: 100%; background: linear-gradient(to top, #fdf2ff, transparent); }
        .detail-hero h2 { position: relative;
            z-index: 2; font-size: clamp(1.6rem, 5vw, 3.2rem); color: var(--gold-solid); font-weight: 800; }
        .detail-content { padding: 60px 10%;
            max-width: 1000px; margin: auto; overflow-wrap: anywhere;               /* ✅ 防止长词顶出边界 */
  word-break: break-word;
  line-height: 1.05; }
        
        .feature-item { margin-bottom: 40px;
            display: flex; gap: 30px; align-items: flex-start; }
        
        .feature-icon-wrapper {
            width: 50px;
            height: 50px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .feature-icon-wrapper svg {
            width: 100%;
            height: 100%; fill: none;
            stroke: url(#goldGradientAdvanced); stroke-width: 1.5; 
            stroke-linecap: round; stroke-linejoin: round;
            filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.2));
            transition: 0.3s;
        }
        .feature-item:hover .feature-icon-wrapper { transform: translateY(-5px); }

        .feature-text h4 { font-size: 1.4rem; color: var(--gold-solid); margin-bottom: 5px; text-transform: uppercase;
            letter-spacing: 1px; font-weight: 700; }
        .feature-text p { font-size: 0.95rem; font-weight: 500;
            color: var(--text-main); }

        .btn-back { margin-top: 30px; padding: 12px 25px; background: transparent;
            border: 2px solid var(--gold-solid); color: var(--gold-solid); cursor: pointer; font-weight: 700; transition: 0.3s; text-transform: uppercase;
        }
        .btn-back:hover { background: var(--gold-solid); color: white; }

        /* --- Warranty & Map --- */
        .warranty-box { max-width: 800px;
            margin: 40px auto; background: white; padding: 50px; border: 1px solid var(--gold-solid); border-radius: 20px;
            box-shadow: 0 10px 30px rgba(74, 4, 78, 0.05); }
        .warranty-badge { width: 120px;
            height: 120px; border: 3px solid var(--gold-solid); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800;
            margin: 0 auto 30px; color: var(--gold-solid); }
        .warranty-box p, .warranty-box li { font-weight: 500; }

        .map-section { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80vh;
            position: relative; }
        .map-img { width: 85%; max-width: 900px; opacity: 0.6;
            filter: saturate(1.5) hue-rotate(280deg); }
        .map-text { position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%); text-align: center; background: rgba(253, 242, 255, 0.6); padding: 20px; border-radius: 10px;
        }
        .map-text h2 { font-weight: 700; }

        /* --- Contact Us Fancy Styles --- */
        .contact-container {
            max-width: 1000px;
            margin: 40px auto; display: grid; grid-template-columns: 1fr 1.5fr;
            background: #fff; border-radius: 24px; overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(74, 4, 78, 0.15);
            border: 1px solid rgba(212, 175, 55, 0.3);
        }
        .contact-info { background: #4a044e; padding: 50px; color: white; display: flex; flex-direction: column;
            justify-content: center; }
        .contact-info h3 { font-size: 2.2rem; color: var(--gold-solid); margin-bottom: 25px;
            font-weight: 800; }
        .contact-details p { margin-bottom: 15px; font-size: 0.9rem; opacity: 0.9; }
        .contact-form { padding: 50px; background: #fff; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
            margin-bottom: 8px; color: #701a75; letter-spacing: 1px; }
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 14px; border: 1px solid rgba(74, 4, 78, 0.1); border-radius: 10px;
            font-family: inherit; transition: 0.3s; background: #fdf2ff;
        }
        .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--gold-solid);
            box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1); }
        .submit-btn {
            width: 100%;
            padding: 16px; background: var(--gold); border: none; border-radius: 10px;
            font-weight: 800; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: 0.4s;
        }
        .submit-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(212, 175, 55, 0.4); }

        footer { text-align: center; padding: 40px; color: #701a75; font-weight: 600; opacity: 0.7;
            font-size: 0.8rem; }

        /* --- Instagram 悬浮图标专属样式 --- */
        .floating-social-icon {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            z-index: 9999;
            transition: transform 0.3s ease;
        }
        .floating-social-icon:hover { transform: scale(1.15); }
        .floating-social-icon svg {
            width: 100%; height: 100%;
            fill: url(#instaGradient);
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
        }
    
} 
    

/* ===== About page styles (moved from inline) ===== */

            .fancy-about {
                background: linear-gradient(to bottom, #fdf2ff, #ffffff);
                color: #4a044e;
                padding-bottom: 100px;
            }
            .about-banner {
                height: 60vh;
                background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                            url('/assets/images/VEXA%20factory.png') center/cover;
                display: flex;
                align-items: center;
                justify-content: center;
                clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
            }
            .banner-text h2 {
                font-size: clamp(2.5rem, 5vw, 4.5rem);
                color: transparent;
                background: linear-gradient(135deg, #d4af37 0%, #f9e29c 50%, #b8860b 100%);
                -webkit-background-clip: text;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: 10px;
                filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
            }
            .about-container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
            .mission-section { padding: 100px 0; text-align: center; }
            .fancy-tag {
                display: inline-block;
                font-size: 1.8rem; 
                font-weight: 900;
                letter-spacing: 8px;
                text-transform: uppercase;
                margin-bottom: 25px;
                padding: 10px 40px;
                position: relative;
                background: linear-gradient(135deg, #d4af37 0%, #f9e29c 50%, #b8860b 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                border-top: 2px solid #d4af37;
                border-bottom: 2px solid #d4af37;
            }
            .fancy-tag::before, .fancy-tag::after {
                content: "•";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                -webkit-text-fill-color: #d4af37;
                font-size: 1.5rem;
            }
            .fancy-tag::before { left: 10px; }
            .fancy-tag::after { right: 10px; }
            .mission-section h3 { font-size: 2.8rem; margin-bottom: 30px; font-weight: 700; line-height: 1.2; color: #4a044e; }
            .mission-section p { font-size: 1.2rem; line-height: 1.8; color: #6b21a8; max-width: 900px; margin: 0 auto; font-weight: 500; }
            .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 50px; }
            .story-image { width: 100%; height: 500px; border-radius: 20px; overflow: hidden; box-shadow: 20px 20px 60px rgba(74, 4, 78, 0.1); border: 1px solid rgba(212, 175, 55, 0.3); }
            .story-image img { width: 100%; height: 100%; object-fit: cover; }
            .story-card { padding: 20px; }
            .story-card h4 { font-size: 1.8rem; color: #d4af37; margin-bottom: 20px; font-weight: 700; }
            .global-stat { background: #4a044e; color: white; padding: 60px; border-radius: 30px; margin-top: 100px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); text-align: center; gap: 30px; position: relative; overflow: hidden; }
            .global-stat::after { content: "VEXA"; position: absolute; font-size: 10rem; font-weight: 900; opacity: 0.03; bottom: -20px; right: -20px; }
            .stat-item h5 { font-size: 2.5rem; color: #d4af37; margin-bottom: 10px; }
            .stat-item p { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; opacity: 0.8; }
   /* --- 手机端适配：推开效果 + 下拉动画 --- */
    @media (max-width: 768px) {
        /* 1. 导航栏改为 Sticky，这样展开时才会占据空间把下面内容顶下去 */
        nav {
            position: sticky !important; /* 关键：粘性定位 */
            top: 0;
            width: 100%;
            z-index: 1000;
            background: #4a044e; /* 保持深色背景 */
            padding: 15px 20px !important;
            height: auto !important;
            flex-wrap: wrap !important;
            display: flex;
            justify-content: space-between;
            align-items: flex-start; /* 确保 Logo 和汉堡按钮顶部对齐 */
        }

        /* Logo 微调 */
        .logo-container {
            font-size: 1.8rem; /* 稍微调小一点 */
        }

        /* 2. 汉堡按钮样式 */
        .menu-toggle {
            display: flex !important;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            margin-top: 5px; /* 对齐微调 */
        }
        .menu-toggle span {
            width: 30px;
            height: 3px;
            background: #d4af37;
            border-radius: 5px;
            transition: 0.3s;
        }
        
        /* 汉堡按钮变成 X 的动画效果 (可选，增加交互感) */
        nav:has(.nav-menu.active) .menu-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
        nav:has(.nav-menu.active) .menu-toggle span:nth-child(2) { opacity: 0; }
        nav:has(.nav-menu.active) .menu-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

        /* 3. 菜单列表：使用 max-height 实现下拉动画 */
       /* --- 极简丝滑版收回逻辑 --- */
.nav-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: transparent !important;
    list-style: none;
    
    /* 1. 初始隐藏 */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important; /* 初始 margin 设为 0，防止收回时卡住位移 */
    
    /* 2. 动画统一：收回时只需关注 max-height 和 opacity */
    /* 使用 linear 这种等速曲线在收回时更不容易感觉到卡顿 */
    transition: max-height 0.25s cubic-bezier(0, 1, 0, 1), opacity 0.2s linear,
                transform 0.3s ease;
    transform: translateY(-10px);
}

        /* 4. 激活状态：展开高度 */
.nav-menu.active {
    /* 3. 关键：不要给太大的高度，350px 足够容纳你的 6 个菜单项 */
    max-height: 700px; 
    opacity: 1;
    margin-top: 10px !important; /* 减少间距，防止跳动 */
    padding-bottom: 20px !important;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

        /* --- 菜单项动画优化 --- */
.nav-menu li {
    margin: 12px 0 !important;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    /* 收回时，菜单项立即消失，不设延迟，这样视觉上更干净 */
    transition: opacity 0.2s ease, transform 0.2s ease;
}
        
        /* 菜单项逐个显现的延迟动画 */
        .nav-menu.active li {
            opacity: 1;
            transform: translateY(0);
        }
        /* 简单的交错动画 */
        .nav-menu.active li:nth-child(1) { transition-delay: 0.1s; }
        .nav-menu.active li:nth-child(2) { transition-delay: 0.15s; }
        .nav-menu.active li:nth-child(3) { transition-delay: 0.2s; }
        .nav-menu.active li:nth-child(4) { transition-delay: 0.25s; }
        .nav-menu.active li:nth-child(5) { transition-delay: 0.3s; }
        .nav-menu.active li:nth-child(6) { transition-delay: 0.35s; }

        /* 5. 页面内容布局修正 */
        .page {
            /* 因为 nav 变成了 sticky (占据流空间)，页面不需要巨大的 padding-top */
            padding-top: 0 !important; 
            padding-left: 20px !important;
            padding-right: 20px !important;
            min-height: auto;
        }

        /* 其他原有适配保持不变 */
        .hero-content h1 { font-size: 1.8rem !important; }
        .hero-content p { font-size: 0.95rem !important; }
        .story-grid, .gallery-grid, .product-list, .contact-container {
            grid-template-columns: 1fr !important;
            gap: 30px !important;
        }
        .hero { height: 50vh !important; min-height: 350px; }
        .detail-hero { height: 30vh !important; }
        .map-section { height: 50vh !important; }
        
        /* 调整顺序 */
        .story-image { order: -1; margin-bottom: 20px; }
        
        /* 按钮大小 */
        .submit-btn, .btn-back { width: 100%; padding: 15px !important; }
    }



/* =========================================================
   Mobile-only enhancements (keep desktop untouched)
   - Full-bleed top images (edge-to-edge)
   - Responsive typography on small screens
   ========================================================= */
@media (max-width: 768px) {

  /* Mobile responsive type (only on mobile so desktop stays original) */
  body { font-size: clamp(14px, 3.6vw, 16px) !important; }

  h1 { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.4rem, 6vw, 2.1rem) !important; }
  h3 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }
  h4 { font-size: clamp(1.05rem, 4.2vw, 1.35rem) !important; }

  p  { font-size: clamp(0.95rem, 3.8vw, 1.05rem) !important; line-height: 1.6 !important; }

  .nav-menu a { font-size: clamp(0.85rem, 3.4vw, 0.95rem) !important; }

  button, .submit-btn, .btn-back { font-size: clamp(0.9rem, 3.5vw, 1rem) !important; }
  input, textarea, select { font-size: clamp(0.9rem, 3.5vw, 1rem) !important; }

  /* Full-bleed helpers */
  img { display: block; }

  /* Make top banners edge-to-edge on mobile */
  .hero,
  .detail-hero,
  .about-banner {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* Remove side padding from the image containers (keep content padding separately) */
  .hero { padding-left: 0 !important; padding-right: 0 !important; }
  .detail-hero { padding-left: 0 !important; padding-right: 0 !important; }

  /* Keep hero text readable with inner padding */
  .hero-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 700px !important;
  }

  /* Detail hero title stays inside padding */
  .detail-hero h2 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }

  /* About banner text stays centered with padding */
  .about-banner .banner-text {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
    text-align: center;
  }

  /* Ensure background images scale correctly */
  .hero, .detail-hero, .about-banner {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Homepage hero "bg-img" should truly fill the hero width on mobile */
  .bg-img {
    width: 100% !important;
    opacity: 0.35 !important;
  }
}