/**
 * TurboMotors24 Homepage Redesign 2025-2026
 * Color palette matching logo: Navy #112D5D, Red #D32F2F, White
 * Font: Inter (Google Fonts)
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Primary — from logo */
    --tm-navy: #112D5D;
    --tm-navy-dark: #0A1C3A;
    --tm-navy-light: #1A3F7A;
    --tm-red: #D32F2F;
    --tm-red-dark: #B71C1C;
    --tm-red-light: #EF5350;

    /* Neutrals */
    --tm-white: #FFFFFF;
    --tm-gray-50: #F8FAFB;
    --tm-gray-100: #F1F4F8;
    --tm-gray-200: #E2E8F0;
    --tm-gray-300: #CBD5E1;
    --tm-gray-500: #64748B;
    --tm-gray-700: #334155;
    --tm-gray-900: #0F172A;

    /* Functional */
    --tm-whatsapp: #25D366;
    --tm-gold: #F59E0B;

    /* Effects */
    --tm-shadow-sm: 0 1px 3px rgba(17,45,93,0.06), 0 1px 2px rgba(17,45,93,0.04);
    --tm-shadow-md: 0 4px 12px rgba(17,45,93,0.08);
    --tm-shadow-lg: 0 8px 30px rgba(17,45,93,0.12);
    --tm-shadow-xl: 0 20px 60px rgba(17,45,93,0.15);
    --tm-radius-sm: 8px;
    --tm-radius-md: 12px;
    --tm-radius-lg: 16px;
    --tm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   1. GLOBAL FONT OVERRIDE
   ============================================================ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   2. TOP BAR REDESIGN
   ============================================================ */
.top_navbar {
    background-color: var(--tm-navy-dark) !important;
    padding: 0 50px !important;
    height: 38px;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.top_navbar .trust-list li {
    font-size: 13px !important;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.top_navbar .trust-list li::before {
    color: var(--tm-red-light) !important;
    font-weight: 700;
}

.top_navbar .third_part .info-item a {
    font-size: 13px !important;
    color: rgba(255,255,255,0.75) !important;
    transition: var(--tm-transition);
}

.top_navbar .third_part .info-item a:hover {
    color: #fff !important;
    opacity: 1 !important;
}

/* ============================================================
   3. NAVBAR REDESIGN
   ============================================================ */
.navbar-area {
    background: var(--tm-white) !important;
    border-bottom: 1px solid var(--tm-gray-200) !important;
    box-shadow: none !important;
    transition: var(--tm-transition);
}

/* Sticky effect */
.navbar-area.nav-fixed {
    box-shadow: var(--tm-shadow-md) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.97) !important;
}

.logo-wrapper .logo img {
    transition: var(--tm-transition);
}

.responsive-mobile-menu .logo-wrapper .logo img {
    height: 30px !important;
    width: auto !important;
}

/* Nav menu items */
.navbar-area .navbar-nav > li > a {
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--tm-gray-700) !important;
    letter-spacing: -0.01em;
    padding: 8px 0 !important;
    position: relative;
    transition: var(--tm-transition);
}

.navbar-area .navbar-nav > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--tm-red) !important;
    border-radius: 1px !important;
    transition: var(--tm-transition) !important;
}

.navbar-area .navbar-nav > li > a:hover {
    color: var(--tm-navy) !important;
}

.navbar-area .navbar-nav > li > a:hover::after {
    width: 100% !important;
}

/* Cart badge */
.nav-right-content .cart .cart-badge,
.nav-right-content .cart-badge {
    background: var(--tm-red) !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
    font-size: 10px;
}

/* Nav icons */
.nav-right-content ul li a .icon {
    color: var(--tm-gray-700);
    transition: var(--tm-transition);
}

.nav-right-content ul li a:hover .icon {
    color: var(--tm-navy);
}

/* ============================================================
   4. HERO / HEADER SLIDER REDESIGN
   ============================================================ */
.new-header-gradient {
    background: linear-gradient(135deg,
        var(--tm-navy-dark) 0%,
        var(--tm-navy) 40%,
        var(--tm-navy-light) 100%) !important;
    background-size: 100% 100% !important;
    animation: none !important;
    min-height: auto !important;
    position: relative;
    overflow: hidden;
}

/* Dot pattern overlay */
.new-header-gradient::before {
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
}

/* Subtle red glow overlay */
.new-header-gradient::after {
    background-image: none !important;
    background: radial-gradient(circle at 85% 20%, rgba(211,47,47,0.08) 0%, transparent 60%) !important;
    opacity: 1 !important;
}

/* Header inner padding */
.new-header-gradient .header-inner {
    padding: 48px 0 56px !important;
}

.new-header-gradient .header-inner[data-min-height] {
    min-height: auto !important;
}

/* Title in hero */
.new-header-gradient .main-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
    text-shadow: none !important;
    color: rgba(255,255,255,0.9) !important;
}

/* Description text */
.new-header-gradient .info {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400;
    color: rgba(255,255,255,0.55) !important;
    text-shadow: none !important;
    line-height: 1.6;
    margin-bottom: 20px !important;
}

/* Red dot badge — force 8x8px */
.new-header-gradient .info span[style*="border-radius:50%"],
.new-header-gradient .info span[style*="border-radius: 50%"] {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    max-width: 8px !important;
    max-height: 8px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    background: var(--tm-red) !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* Search bar glassmorphism */
.new-header-gradient .search-bar {
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: var(--tm-radius-lg) !important;
    padding: 0 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.1) !important;
    border: none !important;
    margin-bottom: 16px !important;
    overflow: hidden;
}

.new-header-gradient .menu-search-form {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    align-items: stretch !important;
}

.new-header-gradient .item-search {
    flex: 1 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 20px 24px !important;
    font-size: 15px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    color: var(--tm-gray-900) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

.new-header-gradient .item-search:focus {
    box-shadow: none !important;
    transform: none !important;
    border: none !important;
}

.new-header-gradient .item-search::placeholder {
    color: var(--tm-gray-500) !important;
}

/* Search button ("Suche") — RED from logo */
.new-header-gradient .search-bar button[type="submit"],
.new-header-gradient .menu-search-form button[type="submit"] {
    background: var(--tm-red) !important;
    background-image: none !important;
    border: none !important;
    color: white !important;
    padding: 0 36px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: var(--tm-transition) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.new-header-gradient .search-bar button[type="submit"]:hover,
.new-header-gradient .menu-search-form button[type="submit"]:hover {
    background: var(--tm-red-dark) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* HSN/TSN Vehicle search — dark glassmorphism */
.new-header-gradient .menu-car-form {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: var(--tm-radius-md) !important;
    padding: 16px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    margin-bottom: 16px !important;
    box-shadow: none !important;
}

.new-header-gradient .inputs_form {
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
}

.new-header-gradient .inputs_form .zu2,
.new-header-gradient .menu-car-form .zu2 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: var(--tm-radius-sm) !important;
    padding: 14px 16px !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    transition: var(--tm-transition);
}

.new-header-gradient .menu-car-form .zu2::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

.new-header-gradient .menu-car-form .zu2:focus {
    border-color: rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.12) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.06) !important;
}

/* Vehicle search button */
.new-header-gradient .menu-car-form button[type="submit"],
.new-header-gradient .inputs_form button[type="submit"] {
    background: var(--tm-navy-light) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: white !important;
    padding: 14px 28px !important;
    border-radius: var(--tm-radius-sm) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    width: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    cursor: pointer;
    box-shadow: none !important;
}

.new-header-gradient .menu-car-form button[type="submit"]:hover {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.25) !important;
    transform: none !important;
}

/* CTA button in hero */
.new-header-gradient .default-btn {
    display: inline-block !important;
    padding: 12px 28px !important;
    background: rgba(255,255,255,0.1) !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border-radius: var(--tm-radius-sm) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: none !important;
    transition: var(--tm-transition);
}

.new-header-gradient .default-btn:hover {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.35) !important;
    transform: translateY(-1px) !important;
    color: white !important;
}

/* Alert/notice box in hero */
.new-header-gradient .alert,
.new-header-gradient [style*="background-color: red"],
.new-header-gradient [style*="background-color:red"] {
    background: var(--tm-red) !important;
    backdrop-filter: blur(10px);
    border-radius: var(--tm-radius-md) !important;
    padding: 14px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(211,47,47,0.25) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

/* H1 below hero */
.text-center h1[style*="color: #0000a0"],
.text-center h1[style] {
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--tm-navy) !important;
    letter-spacing: -0.03em;
    line-height: 1.3;
    padding: 32px 0 16px !important;
}

/* ============================================================
   5. TRUST / USP BAR REDESIGN
   ============================================================ */
.featured-area-wrapper {
    background: var(--tm-gray-50) !important;
    border-top: 1px solid var(--tm-gray-200) !important;
    border-bottom: 1px solid var(--tm-gray-200) !important;
    padding: 30px 0 !important;
}

.featured-area-wrapper .featured-list {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.featured-area-wrapper .single-featured-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    transition: var(--tm-transition);
    position: relative;
    padding: 12px 20px !important;
    border-right: 1px solid var(--tm-gray-200);
}

.featured-area-wrapper .single-featured-item:last-child {
    border-right: none;
}

.featured-area-wrapper .single-featured-item:hover {
    background: var(--tm-white);
}

.featured-area-wrapper .single-featured-item .icon-box {
    color: var(--tm-navy) !important;
    font-size: 28px !important;
    flex-shrink: 0 !important;
    transition: var(--tm-transition);
}

.featured-area-wrapper .single-featured-item .icon-box i {
    color: var(--tm-navy) !important;
    font-size: 28px !important;
}

.featured-area-wrapper .single-featured-item .content .title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--tm-gray-900) !important;
    margin-bottom: 2px !important;
}

.featured-area-wrapper .single-featured-item .content .title a {
    color: var(--tm-gray-900) !important;
    text-decoration: none !important;
}

.featured-area-wrapper .single-featured-item .content .info {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: var(--tm-gray-500) !important;
    margin: 0 !important;
}

/* ============================================================
   6. CATEGORY SLIDER REDESIGN
   ============================================================ */
.category-new-area-wrapper {
    background: var(--tm-white);
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

/* Category cards — rectangular with rounded corners */
.single-category-new-style-01 {
    display: block !important;
    background: var(--tm-gray-50) !important;
    border-radius: var(--tm-radius-md) !important;
    overflow: hidden !important;
    border: 1px solid var(--tm-gray-200) !important;
    transition: var(--tm-transition) !important;
    text-decoration: none !important;
    margin-bottom: 20px;
}

.single-category-new-style-01:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--tm-shadow-lg) !important;
    border-color: transparent !important;
}

.single-category-new-style-01 .img-box {
    height: 140px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--tm-gray-100) !important;
    border-radius: 0 !important;
    overflow: hidden;
    position: relative;
}

.single-category-new-style-01 .img-box img {
    max-height: 90px;
    object-fit: contain;
    transition: var(--tm-transition);
}

.single-category-new-style-01:hover .img-box img {
    transform: scale(1.08);
}

/* Category product count badge */
.single-category-new-style-01 .img-box .number {
    background-color: var(--tm-red) !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    height: 32px !important;
    width: 32px !important;
    line-height: 28px !important;
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    text-align: center !important;
}

/* Category title */
.single-category-new-style-01 .content {
    padding: 14px 16px !important;
    text-align: center !important;
    display: block !important;
}

.single-category-new-style-01 .content .title {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--tm-gray-900) !important;
    line-height: 1.3;
}

/* ============================================================
   7. PRODUCT CARDS REDESIGN
   ============================================================ */

/* Section title */
.section-title-wrapper.style-02-new .main-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--tm-gray-900) !important;
    letter-spacing: -0.03em;
}

.section-title-wrapper.style-02-new .sub-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: var(--tm-gray-500) !important;
}

/* Product card wrapper */
.product-card-new {
    background: var(--tm-white) !important;
    border-radius: var(--tm-radius-md) !important;
    border: 1px solid var(--tm-gray-200) !important;
    overflow: hidden !important;
    transition: var(--tm-transition) !important;
    box-shadow: none !important;
}

.product-card-new:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--tm-shadow-lg) !important;
    border-color: transparent !important;
}

/* Product image — FIXED height for uniform cards */
.product-card-image {
    background: var(--tm-gray-50) !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow: hidden !important;
    border-bottom: none !important;
}

.product-card-image img {
    max-height: 180px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    transition: var(--tm-transition) !important;
}

.product-card-new:hover .product-card-image img {
    transform: scale(1.05) !important;
}

/* Discount badge */
.product-discount-badge {
    background: var(--tm-red) !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
}

/* Product content area — NO borders */
.product-card-content {
    padding: 16px !important;
    border: none !important;
    border-top: none !important;
}

/* Product title — NO border */
.product-card-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--tm-gray-700) !important;
    line-height: 1.45 !important;
    margin: 0 0 10px 0 !important;
    border: none !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.product-card-title a {
    color: var(--tm-gray-700) !important;
    text-decoration: none !important;
    border: none !important;
}

.product-card-title a:hover {
    color: var(--tm-navy) !important;
}

/* Product price — RED, NO border */
.product-card-price {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0 !important;
    margin-bottom: 12px !important;
}

.product-card-price .price-current {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--tm-red) !important;
    border: none !important;
}

.product-card-price .price-old {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: var(--tm-gray-500) !important;
    border: none !important;
}

/* Cart action button — clean, no heavy border */
.product-card-actions {
    border: none !important;
    border-top: none !important;
    padding-top: 0 !important;
}

.product-action-btn {
    background: var(--tm-white) !important;
    border: 1px solid var(--tm-gray-200) !important;
    border-radius: var(--tm-radius-sm) !important;
    color: var(--tm-gray-700) !important;
    transition: var(--tm-transition) !important;
}

.product-action-btn:hover {
    background: var(--tm-navy) !important;
    border-color: var(--tm-navy) !important;
    color: white !important;
}

/* ============================================================
   8. ABOUT / "WARUM TURBOMOTORS24?" SECTION
   ============================================================ */
.about-us-stylish-blog-wrapper {
    background: var(--tm-gray-50) !important;
    padding: 70px 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
}

/* Topic label — small red uppercase like "ÜBER UNS" */
.about-us-stylish-blog-wrapper .content .topic-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--tm-navy) !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* Main heading — clean navy */
.about-us-stylish-blog-wrapper .content .title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: var(--tm-navy) !important;
    letter-spacing: -0.02em;
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
}

/* Body text — clean gray */
.about-us-stylish-blog-wrapper .content .info,
.about-us-stylish-blog-wrapper .content p {
    font-family: 'Inter', sans-serif !important;
    color: var(--tm-gray-500) !important;
    line-height: 1.75 !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

/* Image — subtle rounded card look */
.about-us-stylish-blog-wrapper .img-box {
    border-radius: var(--tm-radius-lg) !important;
    overflow: hidden !important;
}

.about-us-stylish-blog-wrapper .img-box img {
    border-radius: var(--tm-radius-lg) !important;
    box-shadow: var(--tm-shadow-md) !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* CTA link — red with underline */
.about-us-stylish-blog-wrapper .borderless-btn {
    font-family: 'Inter', sans-serif !important;
    color: var(--tm-navy) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    border-bottom: 2px solid var(--tm-navy) !important;
    padding-bottom: 6px !important;
    transition: var(--tm-transition) !important;
    display: inline-block !important;
    margin-top: 16px !important;
}

.about-us-stylish-blog-wrapper .borderless-btn:hover {
    color: var(--tm-red) !important;
    border-color: var(--tm-red) !important;
}

/* ============================================================
   9. CTA SECTIONS (DPF, Autodiagnose, WhatsApp)
   ============================================================ */

/* Style-01 = WhatsApp CTA (dark bg) */
.new-call-to-action-area-wrapper.style-01 {
    background: var(--tm-navy) !important;
    padding: 60px 0 !important;
}

.new-call-to-action-area-wrapper.style-01 .highlight-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,0.6) !important;
}

.new-call-to-action-area-wrapper.style-01 .main-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: white !important;
    font-size: 26px !important;
    letter-spacing: -0.02em;
}

.new-call-to-action-area-wrapper.style-01 p {
    font-family: 'Inter', sans-serif !important;
    color: rgba(255,255,255,0.6) !important;
    line-height: 1.75 !important;
    font-size: 14px !important;
}

/* Style-02 = DPF / Autodiagnose (light bg card) */
.new-call-to-action-area-wrapper.style-02 {
    background: var(--tm-gray-50) !important;
    padding: 70px 0 !important;
}

.new-call-to-action-area-wrapper.style-02 .new-call-to-action-inner {
    background: transparent !important;
}

/* Default (no style class) */
.new-call-to-action-area-wrapper {
    background: var(--tm-gray-50) !important;
    padding: 70px 0 !important;
}

/* Highlight/subtitle text */
.new-call-to-action-area-wrapper .highlight-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--tm-red) !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Main title */
.new-call-to-action-area-wrapper .main-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: var(--tm-navy) !important;
    letter-spacing: -0.02em;
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
}

/* Body text */
.new-call-to-action-area-wrapper .content p,
.new-call-to-action-area-wrapper .content .info {
    font-family: 'Inter', sans-serif !important;
    color: var(--tm-gray-500) !important;
    line-height: 1.75 !important;
    font-size: 14px !important;
}

/* CTA images — rounded */
.new-call-to-action-area-wrapper .img-box img {
    border-radius: var(--tm-radius-lg) !important;
    box-shadow: var(--tm-shadow-md) !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* CTA buttons — clean navy/red link style (exclude WhatsApp .whats_upp) */
.new-call-to-action-area-wrapper .default-btn:not(.whats_upp),
.new-call-to-action-area-wrapper .btn-wrapper a:not(.whats_upp) {
    font-family: 'Inter', sans-serif !important;
    color: var(--tm-red) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--tm-red) !important;
    border-radius: 0 !important;
    padding: 0 0 6px 0 !important;
    box-shadow: none !important;
    transition: var(--tm-transition) !important;
    display: inline-block !important;
    margin-top: 16px !important;
}

.new-call-to-action-area-wrapper .default-btn:not(.whats_upp):hover,
.new-call-to-action-area-wrapper .btn-wrapper a:not(.whats_upp):hover {
    color: var(--tm-navy) !important;
    border-color: var(--tm-navy) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* WhatsApp button — green button style */
.new-call-to-action-area-wrapper .whats_upp,
.new-call-to-action-area-wrapper .default-btn.whats_upp,
.new-call-to-action-area-wrapper a[href*="whatsapp"] {
    background: var(--tm-whatsapp) !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: var(--tm-radius-sm) !important;
    border: none !important;
    border-bottom: none !important;
    padding: 16px 32px !important;
    box-shadow: 0 4px 15px rgba(37,211,102,0.3) !important;
    transition: var(--tm-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.new-call-to-action-area-wrapper .whats_upp:hover,
.new-call-to-action-area-wrapper .default-btn.whats_upp:hover,
.new-call-to-action-area-wrapper a[href*="whatsapp"]:hover {
    background: #20BD5A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37,211,102,0.4) !important;
    color: white !important;
}

.new-call-to-action-area-wrapper .whats_upp i,
.new-call-to-action-area-wrapper .default-btn.whats_upp i {
    font-size: 24px !important;
    color: white !important;
}

.new-call-to-action-area-wrapper .whats_upp p,
.new-call-to-action-area-wrapper .default-btn.whats_upp p {
    color: white !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.new-call-to-action-area-wrapper .whats_upp p.small {
    font-size: 11px !important;
    opacity: 0.7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* WhatsApp style-01 section text overrides */
.new-call-to-action-area-wrapper.style-01 .whats_upp p,
.new-call-to-action-area-wrapper.style-01 .btn-wrapper p {
    color: white !important;
}

.new-call-to-action-area-wrapper.style-01 .whats_upp i {
    color: white !important;
    box-shadow: 0 6px 20px rgba(37,211,102,0.4) !important;
}

/* ============================================================
   10. CUSTOMER REVIEWS (Elfsight widget)
   ============================================================ */
.reviews-section,
[class*="review-area"],
[class*="testimonial"] {
    background: var(--tm-gray-50);
}

/* ============================================================
   11. BRAND LOGOS
   ============================================================ */
.brand-logo-area-wrapper,
[class*="brand-area"],
[class*="brand-logo"] {
    background: var(--tm-white);
    border-top: 1px solid var(--tm-gray-200);
}

.brand-logo-area-wrapper .single-brand img,
[class*="brand-area"] .single-brand img,
[class*="brand-logo"] .single-brand img {
    filter: grayscale(100%) !important;
    opacity: 0.5 !important;
    transition: var(--tm-transition) !important;
}

.brand-logo-area-wrapper .single-brand:hover img,
[class*="brand-area"] .single-brand:hover img,
[class*="brand-logo"] .single-brand:hover img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

/* ============================================================
   12. FOOTER REDESIGN
   ============================================================ */
.footer-area {
    background: linear-gradient(180deg, #1A2B4A 0%, var(--tm-navy-dark) 100%) !important;
}

.footer-area .footer-top {
    padding: 56px 0 40px;
}

/* Footer widget titles */
.footer-area .footer-top .widget-title,
.footer-area .footer-top .footer-widget .widget-title,
.footer-area .footer-top h4 {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: white !important;
    position: relative !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
}

.footer-area .footer-top .widget-title::after,
.footer-area .footer-top .footer-widget .widget-title::after,
.footer-area .footer-top h4::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 28px !important;
    height: 2px !important;
    background: var(--tm-red) !important;
    border-radius: 1px !important;
}

/* Footer links */
.footer-area .footer-top a {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: rgba(255,255,255,0.5) !important;
    transition: var(--tm-transition) !important;
}

.footer-area .footer-top a:hover {
    color: rgba(255,255,255,0.9) !important;
}

.footer-area .footer-top p {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: rgba(255,255,255,0.5) !important;
    line-height: 1.7;
}

/* Footer bottom / copyright */
.footer-area .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    background: transparent !important;
}

.footer-area .footer-bottom .copyright {
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    color: rgba(255,255,255,0.35) !important;
}

/* ============================================================
   13. SCROLL TO TOP BUTTON
   ============================================================ */
.scroll-to-top {
    background: var(--tm-navy) !important;
    border-radius: var(--tm-radius-sm) !important;
    box-shadow: var(--tm-shadow-md) !important;
    transition: var(--tm-transition) !important;
}

.scroll-to-top:hover {
    background: var(--tm-red) !important;
    transform: translateY(-3px);
}

/* Support button */
.support-button {
    background: var(--tm-navy) !important;
    box-shadow: var(--tm-shadow-lg) !important;
    transition: var(--tm-transition) !important;
}

.support-button:hover {
    background: var(--tm-navy-light) !important;
    transform: scale(1.05);
}

/* ============================================================
   14. GENERAL SECTION TITLE OVERRIDES
   ============================================================ */
.section-title-wrapper .main-title,
.section-title h2 {
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -0.03em;
}

/* ============================================================
   15. RESPONSIVE — TABLET (768–1199px)
   ============================================================ */
@media (max-width: 1199px) {
    .single-category-new-style-01 .img-box {
        height: 120px !important;
    }
}

@media (max-width: 991px) {
    /* Topbar */
    .top_navbar {
        height: auto !important;
        padding: 8px 20px !important;
    }

    /* Navbar */
    .logo-wrapper .logo img {
        height: 68px !important;
    }

    /* Hero */
    .new-header-gradient .header-inner {
        padding: 36px 0 40px !important;
    }

    .new-header-gradient .main-title {
        font-size: 26px !important;
    }

    /* Categories */
    .single-category-new-style-01 .img-box {
        height: 110px !important;
    }
}

/* ============================================================
   16. RESPONSIVE — MOBILE (≤767px)
   ============================================================ */
@media (max-width: 767px) {
    /* Hero */
    .new-header-gradient .header-inner {
        padding: 28px 0 36px !important;
    }

    .new-header-gradient .main-title {
        font-size: 22px !important;
    }

    .new-header-gradient .info {
        font-size: 13px !important;
    }

    /* Search — stack vertically on mobile */
    .new-header-gradient .search-bar {
        border-radius: var(--tm-radius-md) !important;
        overflow: visible !important;
        height: auto !important;
    }

    .new-header-gradient .menu-search-form {
        flex-direction: column !important;
        gap: 0 !important;
        flex-wrap: wrap !important;
    }

    .new-header-gradient .item-search,
    .search-bar .menu-search-form .item-search,
    .new-header-gradient .search-bar .item-search {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        flex: none !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 14px 18px !important;
        font-size: 15px !important;
        border: none !important;
        border-bottom: 1px solid var(--tm-gray-200) !important;
        background: white !important;
        color: var(--tm-gray-900) !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .new-header-gradient .item-search::placeholder {
        color: var(--tm-gray-500) !important;
        font-size: 14px !important;
    }

    .new-header-gradient .search-bar button[type="submit"],
    .new-header-gradient .menu-search-form button[type="submit"],
    .search-bar .menu-search-form button[type="submit"] {
        width: 100% !important;
        flex: none !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 14px 18px !important;
        border-radius: 0 0 var(--tm-radius-md) var(--tm-radius-md) !important;
        font-size: 15px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* HSN/TSN search — stack */
    .new-header-gradient .inputs_form {
        flex-direction: column !important;
    }

    /* Category cards */
    .single-category-new-style-01 {
        margin-bottom: 14px;
    }

    .single-category-new-style-01 .img-box {
        height: 100px !important;
    }

    .single-category-new-style-01 .content {
        padding: 10px 12px !important;
    }

    .single-category-new-style-01 .content .title {
        font-size: 12.5px !important;
    }

    /* H1 below hero */
    .text-center h1[style*="color: #0000a0"],
    .text-center h1[style] {
        font-size: 22px !important;
        padding: 20px 0 10px !important;
    }

    /* Products */
    .section-title-wrapper.style-02-new .main-title {
        font-size: 24px !important;
    }

    /* Footer */
    .footer-area .footer-top {
        padding: 40px 0 24px;
    }
}

/* ============================================================
   17. RESPONSIVE — SMALL MOBILE (≤575px)
   ============================================================ */
@media (max-width: 575px) {
    .new-header-gradient .main-title {
        font-size: 20px !important;
    }

    .new-header-gradient .header-inner {
        padding: 24px 0 30px !important;
    }

    .single-category-new-style-01 .img-box {
        height: 90px !important;
    }

    .single-category-new-style-01 .content .title {
        font-size: 11.5px !important;
    }

    .section-title-wrapper.style-02-new .main-title {
        font-size: 22px !important;
    }
}

/* ============================================================
   18. ANIMATIONS
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .single-category-new-style-01,
    .single-product-card-04,
    .product-card-04,
    [class*="product-card"],
    .nav-right-content ul li a .icon,
    .navbar-area .navbar-nav > li > a {
        transition: var(--tm-transition);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ============================================================
   19. PRODUCT CARD — EXACT CLASS TARGETS
   ============================================================ */
.single-new-popular-dress-item {
    background: var(--tm-white) !important;
    border-radius: var(--tm-radius-md) !important;
    border: 1px solid var(--tm-gray-200) !important;
    overflow: hidden !important;
    transition: var(--tm-transition) !important;
    margin: 8px;
}

.single-new-popular-dress-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--tm-shadow-lg) !important;
    border-color: transparent !important;
}

.single-new-popular-dress-item .img-box {
    background: var(--tm-gray-50) !important;
    overflow: hidden;
    position: relative;
}

.single-new-popular-dress-item .img-box .product-bg-img {
    transition: var(--tm-transition);
}

.single-new-popular-dress-item:hover .img-box .product-bg-img {
    transform: scale(1.04);
}

/* Discount badge */
.single-new-popular-dress-item .tag-new {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

.single-new-popular-dress-item .tag-new.bg-black {
    background: var(--tm-red) !important;
}

/* Product content area */
.single-new-popular-dress-item .content {
    padding: 16px !important;
}

.single-new-popular-dress-item .content .title {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

.single-new-popular-dress-item .content .title a {
    color: var(--tm-gray-700) !important;
    transition: var(--tm-transition);
}

.single-new-popular-dress-item .content .title a:hover {
    color: var(--tm-navy) !important;
}

/* Pricing */
.single-new-popular-dress-item .pricing {
    margin: 8px 0 !important;
}

.single-new-popular-dress-item .pricing .on-price {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tm-red) !important;
}

.single-new-popular-dress-item .pricing .off-price {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: var(--tm-gray-500) !important;
}

/* Add to Cart button */
.single-new-popular-dress-item .add-to-cart-new {
    font-family: 'Inter', sans-serif !important;
    background: var(--tm-navy) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--tm-radius-sm) !important;
    padding: 8px 16px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: inline-block;
    transition: var(--tm-transition) !important;
    text-decoration: none !important;
}

.single-new-popular-dress-item .add-to-cart-new:hover {
    background: var(--tm-navy-light) !important;
    color: white !important;
}

/* Hover action icons */
.single-new-popular-dress-item .hover .product-interaction-list li a {
    background: var(--tm-white) !important;
    border-radius: var(--tm-radius-sm) !important;
    box-shadow: var(--tm-shadow-sm) !important;
    transition: var(--tm-transition);
}

.single-new-popular-dress-item .hover .product-interaction-list li a:hover {
    background: var(--tm-navy) !important;
    color: white !important;
}

/* ============================================================
   20. BRAND LOGOS — GRAYSCALE EFFECT
   ============================================================ */
.our-brand-new-area-wrapper {
    background: var(--tm-white) !important;
    border-top: 1px solid var(--tm-gray-200);
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.our-brand-new-area-wrapper .single-brand,
.our-brand-new-area-wrapper .slick-slide {
    opacity: 0.45;
    filter: grayscale(100%);
    transition: var(--tm-transition);
}

.our-brand-new-area-wrapper .single-brand:hover,
.our-brand-new-area-wrapper .slick-slide:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.our-brand-new-area-wrapper .single-brand img,
.our-brand-new-area-wrapper .slick-slide img {
    max-height: 50px;
    object-fit: contain;
}

/* ============================================================
   21. HSN/TSN FORM — DESKTOP INLINE LAYOUT
   ============================================================ */
@media (min-width: 768px) {
    .new-header-gradient .inputs_form {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    
    .new-header-gradient .inputs_form .zu2 {
        flex: 1;
    }
    
    .new-header-gradient .menu-car-form button[type="submit"] {
        width: auto !important;
        flex-shrink: 0;
    }
    
    .new-header-gradient .inputs_form button[type="submit"] {
        margin-bottom: 0;
    }
}

/* Move button inside inputs_form on desktop */
@media (min-width: 768px) {
    .new-header-gradient .menu-car-form {
        padding: 16px 20px !important;
    }
}

/* ============================================================
   22. WHATSAPP CTA SECTION
   ============================================================ */
.new-call-to-action-area-wrapper.bg-color-cta-01 {
    background: linear-gradient(135deg, var(--tm-navy-dark) 0%, var(--tm-navy) 100%) !important;
    position: relative;
    overflow: hidden;
}

.new-call-to-action-area-wrapper.bg-color-cta-01::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 50%, rgba(37, 211, 102, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.new-call-to-action-area-wrapper .new-call-to-action-inner .content .main-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: white !important;
    letter-spacing: -0.03em;
}

.new-call-to-action-area-wrapper .new-call-to-action-inner .content .highlight-text {
    font-family: 'Inter', sans-serif !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.new-call-to-action-area-wrapper .new-call-to-action-inner .content .info {
    font-family: 'Inter', sans-serif !important;
    color: rgba(255,255,255,0.6) !important;
    font-size: 14px !important;
    line-height: 1.7;
}

/* WhatsApp button */
.new-call-to-action-area-wrapper .whats_upp {
    background: var(--tm-whatsapp) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--tm-radius-md) !important;
    padding: 16px 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: var(--tm-transition) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3) !important;
}

.new-call-to-action-area-wrapper .whats_upp:hover {
    background: #20BD5A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4) !important;
    color: white !important;
}

.new-call-to-action-area-wrapper .whats_upp i {
    font-size: 22px;
}

.new-call-to-action-area-wrapper .whats_upp .small {
    font-size: 11px !important;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 2px;
}

/* CTA Image box */
.new-call-to-action-area-wrapper .round-shadow-01 .img-box {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--tm-radius-lg) !important;
    padding: 20px;
    overflow: hidden;
}

/* ============================================================
   23. ELFSIGHT REVIEWS WIDGET CONTAINER
   ============================================================ */
.elfsight-app-15b7819d-d4da-46fd-bafa-cdf6beefb6fa {
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================================
   24. TOPBAR (original system topbar — hidden on homepage)
   ============================================================ */
.topbar-area {
    display: none !important;
}

/* ============================================================
   25. SERVICE / TEXT SECTIONS (DPF, Autodiagnose, etc.)
   ============================================================ */
.image-area-wrapper {
    background: var(--tm-white);
}

.image-area-wrapper .container {
    max-width: 1410px;
}

/* Text section content styling */
.image-area-wrapper h2,
.image-area-wrapper h3 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: var(--tm-gray-900) !important;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.image-area-wrapper h2 {
    font-size: 32px !important;
}

.image-area-wrapper h3 {
    font-size: 26px !important;
}

.image-area-wrapper h4,
.image-area-wrapper h5 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: var(--tm-navy) !important;
}

/* Subtitle/eyebrow text (e.g. "PARTIKELFILTER VERSTOPFT?") */
.image-area-wrapper p strong,
.image-area-wrapper b {
    font-family: 'Inter', sans-serif !important;
}

.image-area-wrapper p {
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    color: var(--tm-gray-500) !important;
}

/* Red accent for labeled text */
.image-area-wrapper span[style*="color: red"],
.image-area-wrapper span[style*="color:#D32F2F"],
.image-area-wrapper span[style*="color:red"],
.image-area-wrapper .highlight-text {
    color: var(--tm-red) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 0.06em;
}

/* Links in text sections */
.image-area-wrapper a {
    color: var(--tm-red) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 2px solid var(--tm-red);
    padding-bottom: 2px;
    transition: var(--tm-transition);
}

.image-area-wrapper a:hover {
    color: var(--tm-red-dark) !important;
    border-color: var(--tm-red-dark);
}

/* Images inside text sections */
.image-area-wrapper img {
    border-radius: var(--tm-radius-md) !important;
    overflow: hidden;
}

/* Service section with 2-column layout */
.image-area-wrapper .row {
    align-items: center;
}

/* ============================================================
   26. FAQ ACCORDION
   ============================================================ */
.faq-area-wrapper {
    background: var(--tm-gray-50) !important;
}

.faq-area-wrapper .container {
    max-width: 1410px;
}

/* FAQ accordion cards */
.faq-accordion .card {
    background: var(--tm-white) !important;
    border: 1px solid var(--tm-gray-200) !important;
    border-radius: var(--tm-radius-md) !important;
    margin-bottom: 12px !important;
    overflow: hidden;
    box-shadow: none !important;
    transition: var(--tm-transition);
}

.faq-accordion .card:hover {
    border-color: var(--tm-gray-300) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

/* Card header */
.faq-accordion .card .card-header {
    background: var(--tm-white) !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.faq-accordion .card .card-header .accordion-btn {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--tm-gray-900) !important;
    padding: 18px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: var(--tm-transition);
    width: 100%;
}

.faq-accordion .card .card-header .accordion-btn:hover {
    color: var(--tm-navy) !important;
}

.faq-accordion .card .card-header .accordion-btn[aria-expanded="true"] {
    color: var(--tm-navy) !important;
    border-bottom: 1px solid var(--tm-gray-200);
}

/* Accordion icon */
.faq-accordion .card .card-header .accordion-btn .color-1 {
    color: var(--tm-gray-500) !important;
    font-size: 14px;
    transition: var(--tm-transition);
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-accordion .card .card-header .accordion-btn[aria-expanded="true"] .color-1 {
    color: var(--tm-red) !important;
}

/* Card body */
.faq-accordion .card .card-body {
    padding: 16px 24px 20px !important;
    background: var(--tm-white) !important;
}

.faq-accordion .card .card-body .info,
.faq-accordion .card .card-body p {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--tm-gray-500) !important;
}

/* ============================================================
   27. ASK QUESTION / CONTACT FORM IN FAQ
   ============================================================ */
.ask-wrapper {
    background: var(--tm-white) !important;
    border: 1px solid var(--tm-gray-200) !important;
    border-radius: var(--tm-radius-lg) !important;
    padding: 32px !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.ask-wrapper .title {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--tm-gray-900) !important;
    margin-bottom: 24px !important;
    position: relative;
    padding-bottom: 12px;
}

.ask-wrapper .title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--tm-red);
    border-radius: 1px;
}

/* Form inputs */
.ask-wrapper input[type="text"],
.ask-wrapper input[type="email"],
.ask-wrapper input[type="tel"],
.ask-wrapper input[type="number"],
.ask-wrapper textarea,
.ask-wrapper select {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    border: 1px solid var(--tm-gray-200) !important;
    border-radius: var(--tm-radius-sm) !important;
    padding: 12px 16px !important;
    color: var(--tm-gray-900) !important;
    background: var(--tm-white) !important;
    transition: var(--tm-transition) !important;
    width: 100%;
}

.ask-wrapper input:focus,
.ask-wrapper textarea:focus,
.ask-wrapper select:focus {
    border-color: var(--tm-navy) !important;
    box-shadow: 0 0 0 3px rgba(17, 45, 93, 0.08) !important;
    outline: none !important;
}

.ask-wrapper input::placeholder,
.ask-wrapper textarea::placeholder {
    color: var(--tm-gray-500) !important;
}

/* Form submit button */
.ask-wrapper button[type="submit"],
.ask-wrapper .logistics-btn,
.ask-wrapper .btn {
    font-family: 'Inter', sans-serif !important;
    background: var(--tm-navy) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--tm-radius-sm) !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: var(--tm-transition) !important;
}

.ask-wrapper button[type="submit"]:hover,
.ask-wrapper .logistics-btn:hover,
.ask-wrapper .btn:hover {
    background: var(--tm-navy-light) !important;
    transform: translateY(-1px);
}

/* Form labels */
.ask-wrapper label {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--tm-gray-700) !important;
    margin-bottom: 6px !important;
}

/* ============================================================
   28. RESPONSIVE — FAQ & SERVICE SECTIONS
   ============================================================ */
@media (max-width: 991px) {
    .image-area-wrapper h2 {
        font-size: 26px !important;
    }
    
    .image-area-wrapper h3 {
        font-size: 22px !important;
    }
    
    .ask-wrapper {
        margin-top: 24px;
        padding: 24px !important;
    }
}

@media (max-width: 767px) {
    .image-area-wrapper h2 {
        font-size: 22px !important;
    }
    
    .image-area-wrapper h3 {
        font-size: 20px !important;
    }
    
    .image-area-wrapper p {
        font-size: 13.5px !important;
    }
    
    .faq-accordion .card .card-header .accordion-btn {
        font-size: 14px !important;
        padding: 14px 18px !important;
    }
    
    .faq-accordion .card .card-body {
        padding: 14px 18px 16px !important;
    }
    
    .ask-wrapper {
        padding: 20px !important;
    }
    
    .ask-wrapper .title {
        font-size: 18px !important;
    }
}