/**

 * Modern Minimal Design System

 * Clean, minimal, responsive - Focus on SEO: Thiết kế khu vui chơi trẻ em

 * 

 * @package ATH_ATRAHI_DESIGN

 * @version 5.0

 */



/* ==========================================================================

   CSS VARIABLES - Compact spacing

   ========================================================================== */

:root {

    /* Compact spacing */

    --space-xs: 0.25rem;

    --space-sm: 0.5rem;

    --space-md: 1rem;

    --space-lg: 1.5rem;

    --space-xl: 2rem;

    --space-2xl: 3rem;

    --space-3xl: 4rem;

    

    /* Header - Fixed 70px */

    --header-height: 70px;

    

    /* Section spacing - smaller */

    --section-padding: 60px;

    --section-padding-mobile: 40px;

    

    /* Container */

    --container-padding: 1rem;

}



/* Body padding for fixed header */

body {

    padding-top: 70px !important;

    margin: 0 !important;

}



/* ==========================================================================

   GLOBAL RESET - Remove decorations

   ========================================================================== */



/* Remove list bullets globally */

ul, ol {

    list-style: none;

}



/* Remove underlines from links */

a {

    text-decoration: none !important;

}



/* Remove default margins */

h1, h2, h3, h4, h5, h6, p {

    margin-top: 0;

}



/* ==========================================================================

   HEADER - Minimalist Design (Fixed all issues)

   ========================================================================== */



/* Site Header Base - Smart Header (hide on scroll down, show on scroll up) */

.site-header {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    z-index: 9999 !important;

    background: transparent !important;

    transition: transform 0.3s ease !important;

    transform: translateY(0) !important;

}



/* Header hidden state when scrolling down */

.site-header.header-hidden {

    transform: translateY(-100%) !important;

}



/* Header visible state when scrolling up */

.site-header.header-visible {

    transform: translateY(0) !important;

}



/* Admin bar adjustments */

body.admin-bar .site-header {

    top: 32px !important;

}



body.admin-bar .site-header.header-hidden {

    transform: translateY(calc(-100% - 32px)) !important;

}



@media (max-width: 782px) {

    body.admin-bar .site-header {

        top: 46px !important;

    }

    

    body.admin-bar .site-header.header-hidden {

        transform: translateY(calc(-100% - 46px)) !important;

    }

}



@media (max-width: 600px) {

    body.admin-bar .site-header {

        top: 0 !important;

    }

    

    body.admin-bar .site-header.header-hidden {

        transform: translateY(-100%) !important;

    }

}



/* HIDE TOPBAR completely - cleaner design */

.header-topbar {

    display: none !important;

}



/* Main nav - Clean white background */

.main-nav {

    height: 70px !important;

    min-height: 70px !important;

    max-height: 70px !important;

    padding: 0 !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    background: #ffffff !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;

    border: none !important;

    position: relative !important;

}



/* When scrolled - same style, no change needed */

.site-header.scrolled .main-nav {

    height: 70px !important;

    min-height: 70px !important;

    max-height: 70px !important;

    background: #ffffff !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

}



/* Nav Container */

.main-nav > .container {

    width: 100% !important;

    max-width: 1400px !important;

    margin: 0 auto !important;

    padding: 0 20px !important;

    height: 100% !important;

    display: flex !important;

    align-items: center !important;

}



/* Nav Wrapper */

.nav-wrapper {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    height: 100% !important;

    gap: 20px !important;

    padding: 0 !important;

    margin: 0 !important;

}



/* Logo - Simple */

.nav-logo {

    flex-shrink: 0 !important;

    display: flex !important;

    align-items: center !important;

    height: 100% !important;

}



.nav-logo .logo-img,

.site-logo .logo-img,

.logo-img {

    height: 48px !important;

    max-height: 48px !important;

    width: auto !important;

}



.site-header.scrolled .nav-logo .logo-img,

.site-header.scrolled .site-logo .logo-img,

.site-header.scrolled .logo-img {

    height: 48px !important;

    max-height: 48px !important;

}



/* Nav Center */

.nav-center {

    flex: 1 !important;

    display: flex !important;

    justify-content: center !important;

    height: 100% !important;

    align-items: center !important;

}



/* Nav Menu */

.nav-menu {

    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

    list-style: none !important;

    margin: 0 !important;

    padding: 0 !important;

    height: 100% !important;

}



/* Nav Item */

.nav-item {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    height: 100% !important;

}



/* Nav links - Clean styling */

.nav-link {

    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

    padding: 8px 14px !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    color: #333333 !important;

    text-decoration: none !important;

    border-radius: 6px !important;

    transition: all 0.2s ease !important;

    white-space: nowrap !important;

    background: transparent !important;

    border: none !important;

}



.nav-link:hover,

.nav-item.active .nav-link {

    color: #b99d63 !important;

    background: rgba(185, 157, 99, 0.08) !important;

}



/* When mega menu is open, keep the nav link highlighted */

.nav-item.has-mega-menu:hover .nav-link {

    color: #b99d63 !important;

    background: rgba(185, 157, 99, 0.08) !important;

}



/* Remove ALL decorations from nav links (but keep mega-menu hover bridge) */

.nav-link::before,

.nav-link::after,

.nav-item:not(.has-mega-menu)::before,

.nav-item:not(.has-mega-menu)::after {

    display: none !important;

    content: none !important;

}



/* Remove ::before from mega-menu nav-item (only ::after is the hover bridge) */

.nav-item.has-mega-menu::before {

    display: none !important;

    content: none !important;

}



/* Dropdown arrow - smaller */

.nav-link .dropdown-arrow {

    width: 10px !important;

    height: 10px !important;

    opacity: 0.5 !important;

    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;

}



.nav-item:hover .dropdown-arrow {

    transform: rotate(180deg) !important;

    opacity: 0.9 !important;

}



/* Nav Right Actions */

.nav-right,

.nav-actions {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    flex-shrink: 0 !important;

    height: 100% !important;

}



/* Phone - Simple style */

.nav-phone {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 8px 12px !important;

    background: rgba(185, 157, 99, 0.08) !important;

    border-radius: 8px !important;

    transition: all 0.2s ease !important;

    text-decoration: none !important;

}



.nav-phone:hover {

    background: rgba(185, 157, 99, 0.15) !important;

}



.nav-phone .phone-icon {

    width: 36px !important;

    height: 36px !important;

    min-width: 36px !important;

    background: #b99d63 !important;

    border-radius: 8px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    color: #fff !important;

}



.nav-phone .phone-icon svg {

    width: 16px !important;

    height: 16px !important;

}



.nav-phone .phone-text {

    display: flex !important;

    flex-direction: column !important;

}



.nav-phone .phone-text small,

.nav-phone .phone-label {

    font-size: 10px !important;

    color: #888 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.03em !important;

}



.nav-phone .phone-text strong,

.nav-phone .phone-number {

    font-size: 14px !important;

    font-weight: 600 !important;

    color: #333 !important;

}



/* CTA button - Simple */

.nav-cta-btn {

    padding: 10px 20px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    background: #b99d63 !important;

    color: #fff !important;

    border: none !important;

    border-radius: 8px !important;

    text-decoration: none !important;

    transition: all 0.2s ease !important;

    white-space: nowrap !important;

}



.nav-cta-btn:hover {

    background: #a38b55 !important;

}



/* Mobile Toggle - Hidden on desktop */

.mobile-toggle {

    display: none !important;

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

    cursor: pointer !important;

}



.hamburger,

.mobile-toggle .hamburger {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;

    width: 40px !important;

    height: 40px !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    cursor: pointer !important;

    gap: 5px !important;

}



.hamburger span,

.mobile-toggle .hamburger span {

    display: block !important;

    width: 22px !important;

    height: 2px !important;

    background: #333 !important;

    border-radius: 2px !important;

    transition: all 0.2s ease !important;

}



.hamburger.active span:nth-child(1),

.mobile-toggle .hamburger.active span:nth-child(1) {

    transform: translateY(7px) rotate(45deg) !important;

}



.hamburger.active span:nth-child(2),

.mobile-toggle .hamburger.active span:nth-child(2) {

    opacity: 0 !important;

}



.hamburger.active span:nth-child(3),

.mobile-toggle .hamburger.active span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg) !important;

}



/* ==========================================================================

   MEGA MENU - Modern Dropdown with Hover Bridge

   ========================================================================== */



/* Ensure nav ancestors don't clip the dropdown */

.main-nav,

.main-nav > .container,

.nav-wrapper,

.nav-center,

.nav-menu,

.nav-item {

    overflow: visible !important;

}



/* Hover bridge - invisible area to keep menu open when moving mouse */

.nav-item.has-mega-menu::after {

    content: '' !important;

    position: absolute !important;

    top: 100% !important;

    left: 0 !important;

    right: 0 !important;

    height: 20px !important;

    background: transparent !important;

    display: block !important;

    z-index: 9998 !important;

}



/* Mega Menu Container */

.mega-menu {

    position: absolute !important;

    top: calc(100% + 12px) !important;

    left: 50% !important;

    transform: translateX(-50%) translateY(8px) !important;

    width: 680px !important;

    max-width: 92vw !important;

    background: #ffffff !important;

    border-radius: 16px !important;

    box-shadow: 

        0 20px 60px -15px rgba(0, 0, 0, 0.2),

        0 0 0 1px rgba(0, 0, 0, 0.04),

        0 0 30px rgba(185, 157, 99, 0.08) !important;

    padding: 0 !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),

                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),

                visibility 0.25s !important;

    z-index: 9999 !important;

}



/* Arrow pointer */

.mega-menu::before {

    content: '' !important;

    position: absolute !important;

    top: -6px !important;

    left: 50% !important;

    width: 12px !important;

    height: 12px !important;

    background: #ffffff !important;

    transform: translateX(-50%) rotate(45deg) !important;

    border-radius: 2px !important;

    box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.04) !important;

    z-index: 1 !important;

    display: block !important;

}



/* Show on hover */

.nav-item.has-mega-menu:hover .mega-menu {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform: translateX(-50%) translateY(0) !important;

}



/* Dropdown arrow rotation */

.nav-item.has-mega-menu:hover .dropdown-arrow {

    transform: rotate(180deg) !important;

    opacity: 0.9 !important;

}



/* Inner container */

.mega-menu-inner {

    width: 100% !important;

    padding: 20px !important;

}



/* Grid Layout - 3 items stacked for cleaner look */

.mega-menu-grid {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

}



/* Mega Item - Card style with image */

.mega-item {

    display: flex !important;

    align-items: center !important;

    gap: 16px !important;

    padding: 14px 16px !important;

    border-radius: 12px !important;

    text-decoration: none !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    border: 1px solid transparent !important;

    background: transparent !important;

    position: relative !important;

}



.mega-item::before {

    content: '' !important;

    position: absolute !important;

    inset: 0 !important;

    border-radius: 12px !important;

    background: linear-gradient(135deg, rgba(185, 157, 99, 0.06), rgba(185, 157, 99, 0.01)) !important;

    opacity: 0 !important;

    transition: opacity 0.3s ease !important;

}



.mega-item:hover {

    background: rgba(185, 157, 99, 0.04) !important;

    border-color: rgba(185, 157, 99, 0.15) !important;

    transform: translateX(4px) !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;

}



.mega-item:hover::before {

    opacity: 1 !important;

}



/* Thumbnail */

.mega-item-thumb {

    position: relative !important;

    z-index: 1 !important;

    width: 64px !important;

    height: 64px !important;

    min-width: 64px !important;

    border-radius: 10px !important;

    overflow: hidden !important;

    flex-shrink: 0 !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;

    transition: transform 0.3s ease, box-shadow 0.3s ease !important;

}



.mega-item-thumb img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    transition: transform 0.4s ease !important;

    display: block !important;

}



.mega-item:hover .mega-item-thumb {

    transform: scale(1.05) !important;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;

}



.mega-item:hover .mega-item-thumb img {

    transform: scale(1.1) !important;

}



/* Fallback icon */

.mega-item-icon {

    position: relative !important;

    z-index: 1 !important;

    width: 48px !important;

    height: 48px !important;

    min-width: 48px !important;

    border-radius: 10px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 20px !important;

    flex-shrink: 0 !important;

    transition: all 0.3s ease !important;

}



/* Content */

.mega-item-content {

    position: relative !important;

    z-index: 1 !important;

    flex: 1 !important;

    min-width: 0 !important;

}



.mega-item-content h4 {

    font-size: 0.9rem !important;

    font-weight: 700 !important;

    color: #1a1a1a !important;

    margin: 0 0 4px 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    transition: color 0.2s ease !important;

    line-height: 1.3 !important;

}



.mega-item:hover .mega-item-content h4 {

    color: #8a7445 !important;

}



/* Arrow animation on hover */

.mega-item-content h4 .arrow {

    opacity: 0 !important;

    transform: translateX(-6px) !important;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

    color: #b99d63 !important;

    font-weight: 400 !important;

}



.mega-item:hover .mega-item-content h4 .arrow {

    opacity: 1 !important;

    transform: translateX(0) !important;

}



.mega-item-content p {

    font-size: 0.8rem !important;

    color: #6b7280 !important;

    margin: 0 !important;

    line-height: 1.45 !important;

}



/* CTA Section at bottom */

.mega-menu-cta {

    margin: 0 !important;

    padding: 14px 20px !important;

    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 16px !important;

    background: linear-gradient(135deg, rgba(185, 157, 99, 0.06), rgba(185, 157, 99, 0.02)) !important;

    border-radius: 0 0 16px 16px !important;

}



.mega-cta-content {

    font-size: 0.8rem !important;

    color: #4b5563 !important;

    flex: 1 !important;

}



.mega-cta-content p {

    margin: 0 !important;

    font-size: 0.8rem !important;

    color: #4b5563 !important;

}



.mega-cta-content strong {

    color: #8a7445 !important;

}



.mega-cta-btn {

    padding: 8px 18px !important;

    background: linear-gradient(135deg, #b99d63, #a08a55) !important;

    color: #fff !important;

    border-radius: 8px !important;

    font-size: 0.8rem !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    transition: all 0.3s ease !important;

    box-shadow: 0 2px 8px rgba(185, 157, 99, 0.3) !important;

}



.mega-cta-btn:hover {

    transform: translateY(-1px) !important;

    box-shadow: 0 4px 16px rgba(185, 157, 99, 0.4) !important;

    color: #fff !important;

}



/* ==========================================================================

   SECTIONS - Compact spacing

   ========================================================================== */



.section,

.section-v2,

section {

    padding: var(--section-padding) 0 !important;

}



@media (max-width: 768px) {

    .section,

    .section-v2,

    section {

        padding: var(--section-padding-mobile) 0 !important;

    }

}



/* Container padding */

.container {

    padding-left: var(--container-padding) !important;

    padding-right: var(--container-padding) !important;

}



/* Section headers - compact */

.section-header,

.section-header-v2 {

    margin-bottom: var(--space-xl) !important;

}



.section-title,

.section-title-v2 {

    font-size: 2rem !important;

    margin-bottom: var(--space-sm) !important;

}



.section-desc {

    font-size: 1rem !important;

    margin-bottom: 0 !important;

}



@media (max-width: 768px) {

    .section-title,

    .section-title-v2 {

        font-size: 1.5rem !important;

    }

    

    .section-desc {

        font-size: 0.9375rem !important;

    }

}



/* ==========================================================================

   HERO - Modern & Compact

   ========================================================================== */



.hero-v2 {

    padding: 100px 0 60px !important;

    min-height: auto !important;

}



@media (max-width: 768px) {

    .hero-v2 {

        padding: 80px 0 40px !important;

    }

}



/* Hero badge - simpler */

.hero-badge-v2 {

    padding: 0.375rem 0.75rem !important;

    font-size: 0.75rem !important;

    border-radius: 6px !important;

    margin-bottom: var(--space-md) !important;

}



/* Hide badge icons */

.hero-badge-v2 svg,

.hero-badge-star {

    display: none !important;

}



/* Hero title - focused on SEO */

.hero-title-v2 {

    font-size: 3rem !important;

    line-height: 1.1 !important;

    margin-bottom: var(--space-md) !important;

}



@media (max-width: 768px) {

    .hero-title-v2 {

        font-size: 2rem !important;

    }

}



/* Hero subtitle */

.hero-subtitle-v2 {

    font-size: 0.875rem !important;

    margin-bottom: var(--space-sm) !important;

    letter-spacing: 0.1em !important;

}



/* Hero description */

.hero-desc-v2 {

    font-size: 1rem !important;

    line-height: 1.6 !important;

    margin-bottom: var(--space-lg) !important;

    max-width: 500px !important;

}



/* Hero buttons - compact */

.hero-buttons-v2 {

    gap: var(--space-sm) !important;

    margin-bottom: var(--space-xl) !important;

}



.btn-v2 {

    padding: 0.75rem 1.5rem !important;

    font-size: 0.8125rem !important;

    border-radius: 8px !important;

}



/* Hide button icons */

.btn-v2 svg {

    display: none !important;

}



/* Hero stats - compact */

.hero-stats-v2 {

    gap: var(--space-xl) !important;

}



.hero-stat-v2 .stat-number {

    font-size: 1.75rem !important;

}



.hero-stat-v2 .stat-label {

    font-size: 0.75rem !important;

}



/* ==========================================================================

   CARDS & GRIDS - Modern minimal

   ========================================================================== */



/* Service cards */

.service-card-v2,

.service-type-card,

.type-card,

.feature-card {

    padding: var(--space-lg) !important;

    border-radius: 12px !important;

}



/* Remove card icons - or make smaller */

.service-card-v2 .service-icon-v2,

.type-card .type-icon {

    font-size: 1.5rem !important;

    margin-bottom: var(--space-sm) !important;

}



/* Card titles */

.service-card-v2 h3,

.type-card h3,

.feature-card h3 {

    font-size: 1.125rem !important;

    margin-bottom: var(--space-xs) !important;

}



/* Card descriptions */

.service-card-v2 p,

.type-card p,

.feature-card p {

    font-size: 0.875rem !important;

    margin-bottom: 0 !important;

}



/* Grids - tighter gaps */

.services-grid-v2,

.types-grid,

.features-grid,

.pricing-grid {

    gap: var(--space-lg) !important;

}



/* ==========================================================================

   PRICING CARDS - Clean minimal

   ========================================================================== */



.pricing-card {

    padding: var(--space-xl) !important;

    border-radius: 16px !important;

}



.pricing-card .pricing-header {

    margin-bottom: var(--space-lg) !important;

}



.pricing-card .price-number {

    font-size: 2rem !important;

}



.pricing-card .price-unit {

    font-size: 0.875rem !important;

}



/* Pricing features - no bullets */

.pricing-features {

    padding: 0 !important;

    margin: 0 0 var(--space-lg) 0 !important;

}



.pricing-features li {

    padding: 0.5rem 0 !important;

    font-size: 0.875rem !important;

    border-bottom: none !important;

}



/* Remove check icons - use subtle indicator */

.pricing-features .check,

.pricing-features .x {

    font-size: 0.75rem !important;

    margin-right: 0.5rem !important;

}



/* ==========================================================================

   ACCORDION / FAQ - Minimal

   ========================================================================== */



.accordion-item,

.faq-item {

    border-radius: 12px !important;

    margin-bottom: var(--space-sm) !important;

}



.accordion-header,

.faq-question {

    padding: var(--space-md) var(--space-lg) !important;

    font-size: 0.9375rem !important;

}



.accordion-content,

.faq-answer {

    padding: 0 var(--space-lg) var(--space-md) !important;

}



.accordion-content p,

.faq-answer p {

    font-size: 0.875rem !important;

    line-height: 1.6 !important;

}



/* ==========================================================================

   MODELS SECTION - Equal Height Cards

   ========================================================================== */



.models-section {

    background: #f8f9fa !important;

    padding: 60px 0 !important;

}



.models-grid {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 1.5rem !important;

}



@media (max-width: 968px) {

    .models-grid {

        grid-template-columns: repeat(2, 1fr) !important;

    }

}



@media (max-width: 640px) {

    .models-grid {

        grid-template-columns: 1fr !important;

    }

}



.model-card {

    position: relative !important;

    border-radius: 16px !important;

    overflow: hidden !important;

    height: 280px !important; /* Fixed height */

    background: #1a1a1a !important;

}



.model-card img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    object-position: center !important;

    transition: transform 0.5s ease, opacity 0.3s ease !important;

}



.model-card:hover img {

    transform: scale(1.05) !important;

    opacity: 0.8 !important;

}



.model-overlay {

    position: absolute !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%) !important;

    padding: 1.5rem !important;

}



.model-overlay h3 {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 1.125rem !important;

    font-weight: 700 !important;

    color: #ffffff !important;

    text-transform: uppercase !important;

    letter-spacing: 0.05em !important;

    margin: 0 !important;

}



/* ==========================================================================

   FOOTER - Compact

   ========================================================================== */



.site-footer {

    padding: var(--space-3xl) 0 var(--space-lg) !important;

}



/* Footer grid - tighter */

.footer-grid {

    gap: var(--space-xl) !important;

}



/* Footer titles */

.footer-title {

    font-size: 0.875rem !important;

    margin-bottom: var(--space-md) !important;

    padding-bottom: var(--space-sm) !important;

}



/* Remove footer title decoration */

.footer-title::after {

    display: none !important;

}



/* Footer links - no icons */

.footer-links a {

    padding: 0.375rem 0 !important;

    font-size: 0.875rem !important;

}



.footer-links a svg,

.footer-links a::before {

    display: none !important;

}



/* Footer bottom */

.footer-bottom {

    padding: var(--space-md) 0 !important;

    margin-top: var(--space-xl) !important;

}



/* Footer CTA - compact */

.footer-cta-wrapper {

    padding: var(--space-xl) !important;

    border-radius: 16px !important;

    margin-bottom: var(--space-xl) !important;

}



.footer-cta-content h2 {

    font-size: 1.5rem !important;

    margin-bottom: var(--space-xs) !important;

}



.footer-cta-content p {

    font-size: 0.9375rem !important;

}



/* ==========================================================================

   BREADCRUMB - Minimal

   ========================================================================== */



.breadcrumb,

.breadcrumb-section {

    padding: var(--space-sm) 0 !important;

    font-size: 0.8125rem !important;

}



.breadcrumb a,

.breadcrumb .current {

    text-decoration: none !important;

}



/* ==========================================================================

   BUTTONS - Clean modern

   ========================================================================== */



.btn,

.btn-gold,

.btn-primary,

.btn-outline {

    padding: 0.75rem 1.5rem !important;

    font-size: 0.875rem !important;

    border-radius: 8px !important;

    text-decoration: none !important;

}



/* Remove button icons */

.btn svg,

.btn-gold svg,

.btn-primary svg {

    display: none !important;

}



/* ==========================================================================

   RESPONSIVE - Mobile first

   ========================================================================== */



@media (max-width: 1200px) {

    /* Hide phone text on smaller screens */

    .nav-phone .phone-text {

        display: none !important;

    }

    

    .nav-phone {

        padding: 0.5rem !important;

    }

    

    .nav-link {

        padding: 0.5rem 0.75rem !important;

        font-size: 0.875rem !important;

    }

}



@media (max-width: 1024px) {

    /* Body padding for mobile header */

    body {

        padding-top: 60px !important;

    }

    

    /* Header mobile - simpler */

    .main-nav {

        height: 60px !important;

        min-height: 60px !important;

        max-height: 60px !important;

    }

    

    .nav-wrapper {

        padding: 0 16px !important;

    }

    

    .nav-logo .logo-img,

    .site-logo .logo-img,

    .logo-img {

        height: 40px !important;

        max-height: 40px !important;

    }

    

    /* Hide desktop nav, show hamburger */

    .nav-center {

        display: none !important;

    }

    

    .nav-phone {

        display: none !important;

    }

    

    .nav-cta-btn {

        display: none !important;

    }

    

    /* Show mobile toggle */

    .mobile-toggle {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

    }

    

    .mobile-toggle .hamburger {

        display: flex !important;

    }

    

    /* Mobile Nav Right */

    .nav-right,

    .nav-actions {

        gap: 8px !important;

    }

}



@media (max-width: 768px) {

    :root {

        --container-padding: 1rem;

    }

    

    body {

        padding-top: 56px !important;

    }

    

    .main-nav {

        height: 56px !important;

        min-height: 56px !important;

        max-height: 56px !important;

    }

    

    .nav-wrapper {

        padding: 0 12px !important;

        gap: 12px !important;

    }

    

    .nav-logo .logo-img,

    .site-logo .logo-img,

    .logo-img {

        height: 36px !important;

        max-height: 36px !important;

    }

    

    .mobile-toggle .hamburger {

        width: 36px !important;

        height: 36px !important;

    }

    

    .mobile-toggle .hamburger span {

        width: 20px !important;

    }

    

    /* Grids to single column */

    .services-grid-v2,

    .types-grid,

    .features-grid,

    .pricing-grid,

    .models-grid,

    .portfolio-grid {

        grid-template-columns: 1fr !important;

        gap: var(--space-md) !important;

    }

    

    /* Hero grid */

    .hero-grid {

        grid-template-columns: 1fr !important;

    }

    

    .hero-image-v2 {

        display: none !important;

    }

    

    /* Stats horizontal scroll */

    .hero-stats-v2 {

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        gap: var(--space-lg) !important;

        padding-bottom: var(--space-sm) !important;

    }

    

    /* Footer grid */

    .footer-grid {

        grid-template-columns: 1fr !important;

        text-align: center;

    }

    

    .footer-title::after {

        left: 50% !important;

        transform: translateX(-50%) !important;

    }

    

    /* Pricing cards */

    .pricing-card.featured {

        transform: none !important;

        order: -1;

    }

}



@media (max-width: 480px) {

    :root {

        --section-padding: 32px;

        --section-padding-mobile: 24px;

        --container-padding: 0.75rem;

    }

    

    .hero-title-v2 {

        font-size: 1.75rem !important;

    }

    

    .section-title,

    .section-title-v2 {

        font-size: 1.25rem !important;

    }

    

    .hero-stats-v2 {

        gap: var(--space-md) !important;

    }

    

    .hero-stat-v2 .stat-number {

        font-size: 1.5rem !important;

    }

}



/* ==========================================================================

   HIDE UNNECESSARY ELEMENTS

   ========================================================================== */



/* Hide decorative elements */

.hero-bg-decoration,

.hero-image-glow,

.service-card-v2::before,

.service-card-v2::after,

.section-decoration,

.floating-element {

    display: none !important;

}



/* Hide social icons in header */

.topbar-socials {

    display: none !important;

}



/* ==========================================================================

   LIST STYLES - Clean no bullets

   ========================================================================== */



/* Remove all list bullets */

ul:not(.nav-menu):not(.mega-menu-grid),

ol {

    list-style: none !important;

    padding-left: 0 !important;

}



/* Feature lists - no bullets, clean spacing */

.feature-list li,

.pricing-features li,

.service-features li,

.benefits-list li {

    position: relative;

    padding-left: 0 !important;

}



/* Remove ::before bullets */

.feature-list li::before,

.pricing-features li::before,

.service-features li::before,

.benefits-list li::before {

    display: none !important;

}



/* ==========================================================================

   ANIMATIONS - Subtle only

   ========================================================================== */



/* Remove heavy animations */

.animate-fade-in,

.animate-fade-in-up,

.animate-slide-in {

    animation: none !important;

    opacity: 1 !important;

    transform: none !important;

}



/* Keep hover transitions subtle */

a, button, .btn, .card {

    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important;

}



/* ==========================================================================

   SCROLLBAR - Minimal

   ========================================================================== */



::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}



::-webkit-scrollbar-track {

    background: #f1f1f1;

}



::-webkit-scrollbar-thumb {

    background: #c1c1c1;

    border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

    background: #a1a1a1;

}



/* ==========================================================================

   PAIN POINTS - Clean minimal (no icons)

   ========================================================================== */



.painpoint-card {

    padding: var(--space-lg) !important;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 12px !important;

}



.painpoint-title {

    font-size: 1rem !important;

    font-weight: 600 !important;

    margin-bottom: var(--space-xs) !important;

}



.painpoint-desc {

    font-size: 0.875rem !important;

    opacity: 0.8;

    margin-bottom: 0 !important;

}



/* ==========================================================================

   DELIVERABLES - Clean minimal (no icons)

   ========================================================================== */



.deliverable-card {

    padding: var(--space-lg) !important;

    text-align: center;

}



.deliverable-card h3 {

    font-size: 1rem !important;

    margin-bottom: var(--space-xs) !important;

}



.deliverable-card p {

    font-size: 0.8125rem !important;

    opacity: 0.8;

    margin-bottom: 0 !important;

}



/* ==========================================================================

   SOLUTION CARDS - Minimal list style

   ========================================================================== */



.solution-card {

    padding: var(--space-lg) !important;

    border-radius: 12px !important;

}



.solution-title {

    font-size: 1.125rem !important;

    margin-bottom: var(--space-xs) !important;

}



.solution-desc {

    font-size: 0.875rem !important;

    margin-bottom: var(--space-sm) !important;

}



.solution-bullets {

    margin-bottom: var(--space-md) !important;

    padding: 0 !important;

}



.solution-bullets li {

    font-size: 0.8125rem !important;

    padding: 0.25rem 0 !important;

    opacity: 0.8;

}



.solution-link {

    font-size: 0.8125rem !important;

    font-weight: 600 !important;

    text-decoration: none !important;

}



/* ==========================================================================

   FAQ - Text icons

   ========================================================================== */



.faq-icon,

.accordion-icon {

    font-size: 1.25rem !important;

    font-weight: 300 !important;

    transition: transform 0.2s ease !important;

}



.faq-item.active .faq-icon,

.accordion-item.active .accordion-icon {

    transform: rotate(45deg) !important;

}



/* ==========================================================================

   CONTACT - Minimal

   ========================================================================== */



.contact-wrapper-v2 {

    padding: var(--space-2xl) !important;

    border-radius: 20px !important;

}



.contact-glow {

    display: none !important;

}



.contact-form-v2 input,

.contact-form-v2 select {

    padding: 0.875rem 1rem !important;

    border-radius: 8px !important;

    font-size: 0.875rem !important;

}



.contact-form-v2 .submit-btn {

    padding: 0.875rem 1.5rem !important;

    border-radius: 8px !important;

    font-size: 0.875rem !important;

}



/* ==========================================================================

   MOBILE STICKY CTA - Compact

   ========================================================================== */



.mobile-sticky-cta {

    padding: 0.5rem !important;

    gap: 0.5rem !important;

}



.mobile-sticky-cta .sticky-btn {

    padding: 0.625rem 1rem !important;

    font-size: 0.75rem !important;

    border-radius: 8px !important;

}



.mobile-sticky-cta .sticky-btn svg {

    display: none !important;

}



/* ==========================================================================

   TECHNICAL CARDS - Minimal

   ========================================================================== */



.technical-card {

    padding: var(--space-lg) !important;

    border-radius: 12px !important;

}



.technical-card h3 {

    font-size: 1rem !important;

    margin-bottom: var(--space-xs) !important;

}



.technical-card p {

    font-size: 0.8125rem !important;

    margin-bottom: 0 !important;

}



/* ==========================================================================

   PORTFOLIO - Minimal with EQUAL HEIGHT CARDS

   ========================================================================== */



.portfolio-filters-v2 {

    gap: 0.5rem !important;

}



.portfolio-filters-v2 .filter-btn {

    padding: 0.5rem 1rem !important;

    font-size: 0.8125rem !important;

    border-radius: 6px !important;

}



/* PORTFOLIO GRID - Equal height cards */

.portfolio-grid-v2 {

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 1.5rem !important;

}



@media (max-width: 1024px) {

    .portfolio-grid-v2 {

        grid-template-columns: repeat(2, 1fr) !important;

    }

}



@media (max-width: 640px) {

    .portfolio-grid-v2 {

        grid-template-columns: 1fr !important;

    }

}



/* Portfolio card - FIXED HEIGHT */

.portfolio-card-v2 {

    position: relative !important;

    border-radius: 16px !important;

    overflow: hidden !important;

    height: 320px !important; /* Fixed height for equal cards */

    background: #1a1a1a !important;

    display: block !important;

    text-decoration: none !important;

    cursor: pointer !important;

}



.portfolio-card-v2 img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    object-position: center !important;

    transition: transform 0.5s ease !important;

}



.portfolio-card-v2:hover img {

    transform: scale(1.05) !important;

}



/* Portfolio overlay - always visible at bottom */

.portfolio-card-overlay {

    position: absolute !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%) !important;

    padding: 1.5rem !important;

    opacity: 1 !important;

}



.portfolio-card-overlay h3 {

    font-size: 1rem !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    color: #ffffff !important;

    margin: 0 0 0.25rem 0 !important;

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    letter-spacing: 0.05em !important;

}



.portfolio-card-overlay p {

    font-size: 0.75rem !important;

    color: #9ca3af !important;

    margin: 0 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.1em !important;

}



/* View Project Button */

.view-project-btn {

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin-top: 12px !important;

    padding: 8px 16px !important;

    background: rgba(185, 157, 99, 0.15) !important;

    border: 1px solid rgba(185, 157, 99, 0.4) !important;

    border-radius: 25px !important;

    color: #b99d63 !important;

    font-size: 0.75rem !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.08em !important;

    transition: all 0.3s ease !important;

    opacity: 0 !important;

    transform: translateY(10px) !important;

}



.view-project-btn svg {

    width: 14px !important;

    height: 14px !important;

    transition: transform 0.3s ease !important;

}



.portfolio-card-v2:hover .view-project-btn {

    opacity: 1 !important;

    transform: translateY(0) !important;

}



.portfolio-card-v2:hover .view-project-btn svg {

    transform: translateX(4px) !important;

}



.view-project-btn:hover {

    background: #b99d63 !important;

    color: #ffffff !important;

}



/* ==========================================================================

   PROCESS STEPS - Minimal

   ========================================================================== */



.process-step-v2 .step-number {

    font-size: 1.5rem !important;

    font-weight: 700 !important;

}



.process-step-v2 .step-title {

    font-size: 0.875rem !important;

}



/* ==========================================================================

   FAQ SECTION - FIXED FONT & FUNCTIONALITY

   ========================================================================== */



.faq-section {

    background: #ffffff !important;

    padding: 60px 0 !important;

}



.faq-section .section-title-v2 {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 2.5rem !important;

    font-weight: 700 !important;

    color: #1a1a1a !important;

    text-transform: uppercase !important;

    letter-spacing: 0.05em !important;

}



.faq-section .section-title-v2 .text-gold {

    color: #b99d63 !important;

}



.faq-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 0 !important;

}



.faq-item {

    border: 1px solid #e5e7eb !important;

    border-radius: 12px !important;

    margin-bottom: 1rem !important;

    background: #ffffff !important;

    overflow: hidden !important;

    transition: all 0.3s ease !important;

}



.faq-item:hover {

    border-color: #b99d63 !important;

}



.faq-item.active {

    border-color: #b99d63 !important;

    box-shadow: 0 4px 20px rgba(185, 157, 99, 0.15) !important;

}



/* FAQ Question button - CLICKABLE */

.faq-question {

    width: 100% !important;

    padding: 1.25rem 1.5rem !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    background: transparent !important;

    border: none !important;

    cursor: pointer !important;

    text-align: left !important;

    transition: all 0.3s ease !important;

}



.faq-question:hover {

    background: rgba(185, 157, 99, 0.05) !important;

}



/* FAQ Question text - PROPER FONT */

.faq-question span:first-child {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 1.125rem !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    color: #1a1a1a !important;

    letter-spacing: 0.02em !important;

    line-height: 1.4 !important;

    flex: 1 !important;

    padding-right: 1rem !important;

}



.faq-item:hover .faq-question span:first-child,

.faq-item.active .faq-question span:first-child {

    color: #b99d63 !important;

}



/* FAQ Icon */

.faq-icon {

    width: 28px !important;

    height: 28px !important;

    border-radius: 50% !important;

    background: #f3f4f6 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 1.25rem !important;

    font-weight: 300 !important;

    color: #6b7280 !important;

    flex-shrink: 0 !important;

    transition: all 0.3s ease !important;

}



.faq-item.active .faq-icon {

    background: #b99d63 !important;

    color: #ffffff !important;

    transform: rotate(45deg) !important;

}



/* FAQ Answer */

.faq-answer {

    max-height: 0 !important;

    overflow: hidden !important;

    transition: max-height 0.3s ease, padding 0.3s ease !important;

    padding: 0 1.5rem !important;

}



.faq-item.active .faq-answer {

    max-height: 500px !important;

    padding: 0 1.5rem 1.5rem 1.5rem !important;

}



.faq-answer p {

    font-family: 'Inter', -apple-system, sans-serif !important;

    font-size: 1rem !important;

    font-weight: 400 !important;

    color: #4b5563 !important;

    line-height: 1.7 !important;

    margin: 0 !important;

}



/* ==========================================================================

   HERO SECTION - FIXED IMAGE FRAME

   ========================================================================== */



.hero-v2 {

    padding: 80px 0 60px !important;

    background: #ffffff !important;

}



.hero-grid {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 3rem !important;

    align-items: center !important;

}



@media (max-width: 968px) {

    .hero-grid {

        grid-template-columns: 1fr !important;

        gap: 2rem !important;

    }

}



/* Hero Image Container - FIXED FRAME */

.hero-image-v2 {

    position: relative !important;

}



.hero-image-wrapper {

    position: relative !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    aspect-ratio: 4/3 !important; /* Fixed aspect ratio */

    background: #f3f4f6 !important;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1) !important;

}



.hero-image-wrapper img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    object-position: center !important;

    display: block !important;

}



/* Hero content styles */

.hero-badge-v2 {

    display: inline-block !important;

    background: rgba(185, 157, 99, 0.1) !important;

    border: 1px solid rgba(185, 157, 99, 0.3) !important;

    padding: 0.5rem 1rem !important;

    border-radius: 50px !important;

    margin-bottom: 1.5rem !important;

}



.hero-badge-v2 span {

    font-size: 0.75rem !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.1em !important;

    color: #b99d63 !important;

}



.hero-title-v2 {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 3rem !important;

    font-weight: 700 !important;

    line-height: 1.1 !important;

    color: #1a1a1a !important;

    margin-bottom: 1rem !important;

    text-transform: uppercase !important;

    letter-spacing: 0.02em !important;

}



@media (max-width: 768px) {

    .hero-title-v2 {

        font-size: 2rem !important;

    }

}



.hero-title-v2 .text-gold {

    color: #b99d63 !important;

}



.hero-subtitle-v2 {

    font-size: 0.875rem !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.15em !important;

    color: #6b7280 !important;

    margin-bottom: 1.5rem !important;

}



.hero-desc-v2 {

    font-size: 1rem !important;

    line-height: 1.7 !important;

    color: #4b5563 !important;

    margin-bottom: 2rem !important;

}



/* Hero Stats */

.hero-stats-v2 {

    display: flex !important;

    gap: 2rem !important;

    padding-top: 2rem !important;

    border-top: 1px solid #e5e7eb !important;

    margin-top: 2rem !important;

}



.hero-stat-v2 .stat-number {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 2rem !important;

    font-weight: 700 !important;

    color: #b99d63 !important;

    line-height: 1 !important;

}



.hero-stat-v2 .stat-label {

    font-size: 0.75rem !important;

    text-transform: uppercase !important;

    letter-spacing: 0.05em !important;

    color: #6b7280 !important;

    margin-top: 0.25rem !important;

}



/* Hero Buttons */

.hero-buttons-v2 {

    display: flex !important;

    gap: 1rem !important;

    flex-wrap: wrap !important;

}



.btn-v2 {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 1rem 2rem !important;

    font-size: 0.8125rem !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.1em !important;

    border-radius: 8px !important;

    transition: all 0.3s ease !important;

    text-decoration: none !important;

}



.btn-primary-v2 {

    background: #b99d63 !important;

    color: #0d0d0d !important;

    border: 2px solid #b99d63 !important;

}



.btn-primary-v2:hover {

    background: #a38b55 !important;

    border-color: #a38b55 !important;

}



.btn-outline-v2 {

    background: transparent !important;

    color: #1a1a1a !important;

    border: 2px solid #1a1a1a !important;

}



.btn-outline-v2:hover {

    background: #1a1a1a !important;

    color: #ffffff !important;

}

/* ==========================================================================

   FIX: LOGO WATERMARK ISSUE - TRANG GIỚI THIỆU & FOOTER

   ========================================================================== */



/* Hide any large logo watermark/background */

.page-main::before,

.page-main::after,

.about-page::before,

.about-page::after,

.site-footer::before,

.site-footer::after,

.footer-main::before,

.footer-main::after {

    display: none !important;

    content: none !important;

    background: none !important;

    opacity: 0 !important;

    visibility: hidden !important;

}



/* Ensure logo in footer is proper size */

.footer-logo img,

.site-footer .logo-img {

    max-height: 60px !important;

    width: auto !important;

    max-width: 200px !important;

    opacity: 1 !important;

}



/* Remove any fixed positioned watermarks */

.logo-watermark,

.brand-watermark,

.site-watermark,

[class*="watermark"],

[class*="logo-bg"],

[class*="brand-bg"] {

    display: none !important;

    opacity: 0 !important;

    visibility: hidden !important;

}



/* Fix background-image with logo */

*[style*="logo-atrahi"][style*="opacity"],

*[style*="logo-atrahi"][style*="background"] {

    background-image: none !important;

}



/* ==========================================================================

   TRANG GIỚI THIỆU - MODERN REDESIGN

   ========================================================================== */



/* About Page Container */

.about-page {

    background: #ffffff !important;

}



/* Hero Section - Modern Style */

.about-page .about-hero {

    position: relative !important;

    padding: 160px 0 120px !important;

    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #0d0d0d 100%) !important;

    overflow: hidden !important;

}



.about-page .about-hero::before {

    content: '' !important;

    display: block !important;

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    background: 

        radial-gradient(ellipse at 20% 20%, rgba(185, 157, 99, 0.15) 0%, transparent 50%),

        radial-gradient(ellipse at 80% 80%, rgba(185, 157, 99, 0.1) 0%, transparent 50%) !important;

    pointer-events: none !important;

    opacity: 1 !important;

    visibility: visible !important;

}



.about-page .about-hero-bg {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    opacity: 0.15 !important;

    background: none !important;

}



.about-page .hero-pattern {

    width: 100% !important;

    height: 100% !important;

    background-image: 

        radial-gradient(circle at 25% 25%, rgba(185, 157, 99, 0.3) 1px, transparent 1px),

        radial-gradient(circle at 75% 75%, rgba(185, 157, 99, 0.2) 1px, transparent 1px) !important;

    background-size: 60px 60px !important;

}



/* Hero Content */

.about-page .about-hero-content {

    position: relative !important;

    z-index: 10 !important;

    max-width: 900px !important;

    margin: 0 auto !important;

    text-align: center !important;

}



.about-page .page-badge {

    display: inline-flex !important;

    align-items: center !important;

    gap: 10px !important;

    padding: 12px 24px !important;

    background: rgba(185, 157, 99, 0.15) !important;

    border: 1px solid rgba(185, 157, 99, 0.4) !important;

    border-radius: 50px !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    color: #b99d63 !important;

    margin-bottom: 24px !important;

    backdrop-filter: blur(10px) !important;

}



.about-page .about-hero-title {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: clamp(48px, 8vw, 80px) !important;

    font-weight: 700 !important;

    line-height: 1.1 !important;

    color: #ffffff !important;

    margin-bottom: 20px !important;

    letter-spacing: -0.02em !important;

}



.about-page .about-hero-title .text-gold {

    color: #b99d63 !important;

    display: block !important;

}



.about-page .about-hero-tagline {

    font-family: 'Cormorant Garamond', Georgia, serif !important;

    font-size: 1.75rem !important;

    font-style: italic !important;

    color: rgba(255, 255, 255, 0.9) !important;

    margin-bottom: 24px !important;

}



.about-page .about-hero-desc {

    font-size: 1.125rem !important;

    color: rgba(255, 255, 255, 0.7) !important;

    max-width: 650px !important;

    margin: 0 auto 32px !important;

    line-height: 1.8 !important;

}



.about-page .about-hero-actions {

    display: flex !important;

    gap: 16px !important;

    justify-content: center !important;

    flex-wrap: wrap !important;

}



.about-page .about-hero-actions .btn {

    padding: 16px 32px !important;

    font-size: 0.875rem !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.1em !important;

    border-radius: 8px !important;

    transition: all 0.3s ease !important;

}



.about-page .about-hero-actions .btn-primary {

    background: #b99d63 !important;

    color: #0d0d0d !important;

    border: 2px solid #b99d63 !important;

}



.about-page .about-hero-actions .btn-primary:hover {

    background: #a38b55 !important;

    border-color: #a38b55 !important;

    transform: translateY(-2px) !important;

}



.about-page .about-hero-actions .btn-outline {

    background: transparent !important;

    color: #ffffff !important;

    border: 2px solid rgba(255, 255, 255, 0.3) !important;

}



.about-page .about-hero-actions .btn-outline:hover {

    background: rgba(255, 255, 255, 0.1) !important;

    border-color: #ffffff !important;

}



/* Stats Section - Premium Style */

.about-page .about-stats {

    position: relative !important;

    z-index: 20 !important;

    margin-top: -60px !important;

    padding: 0 0 80px !important;

    background: transparent !important;

}



.about-page .stats-grid {

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 0 !important;

    max-width: 1000px !important;

    margin: 0 auto !important;

    background: #ffffff !important;

    border-radius: 20px !important;

    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.2) !important;

    overflow: visible !important;

    padding: 0 !important;

}



.about-page .stat-item {

    padding: 40px 30px !important;

    text-align: center !important;

    border-right: 1px solid #f0f0f0 !important;

    transition: all 0.3s ease !important;

}



.about-page .stat-item:last-child {

    border-right: none !important;

}



.about-page .stat-item:hover {

    background: rgba(185, 157, 99, 0.05) !important;

}



.about-page .stat-icon {

    font-size: 36px !important;

    margin-bottom: 12px !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    color: #b99d63 !important;

}

.about-page .stat-icon svg {

    width: 32px !important;

    height: 32px !important;

    stroke: #b99d63 !important;

    fill: none !important;

}



.about-page .stat-number {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 48px !important;

    font-weight: 700 !important;

    color: #b99d63 !important;

    line-height: 1 !important;

    margin-bottom: 8px !important;

}



.about-page .stat-label {

    font-size: 13px !important;

    color: #6b7280 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.1em !important;

}



/* Story Section - Modern */

.about-page .about-story {

    padding: 100px 0 !important;

    background: #ffffff !important;

}



.about-page .story-grid {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 80px !important;

    align-items: center !important;

}



.about-page .story-images {

    position: relative !important;

}



.about-page .story-image-main {

    position: relative !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;

}



.about-page .story-image-main::before {

    content: '' !important;

    display: block !important;

    position: absolute !important;

    top: -20px !important;

    left: -20px !important;

    width: 100px !important;

    height: 100px !important;

    border: 3px solid #b99d63 !important;

    border-radius: 20px !important;

    opacity: 0.5 !important;

    z-index: -1 !important;

}



.about-page .story-image-main img {

    width: 100% !important;

    height: 450px !important;

    object-fit: cover !important;

    transition: transform 0.5s ease !important;

}



.about-page .story-image-main:hover img {

    transform: scale(1.03) !important;

}



.about-page .story-image-float {

    position: absolute !important;

    bottom: -30px !important;

    right: -30px !important;

    width: 220px !important;

    border-radius: 16px !important;

    overflow: hidden !important;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;

    border: 4px solid #ffffff !important;

}



.about-page .story-image-float img {

    width: 100% !important;

    height: 160px !important;

    object-fit: cover !important;

}



.about-page .experience-badge {

    position: absolute !important;

    top: 50% !important;

    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    background: linear-gradient(135deg, #b99d63 0%, #a38b55 100%) !important;

    color: #ffffff !important;

    padding: 20px 24px !important;

    border-radius: 12px !important;

    text-align: center !important;

    box-shadow: 0 10px 30px rgba(185, 157, 99, 0.4) !important;

}



.about-page .exp-number {

    display: block !important;

    font-family: 'Cormorant Garamond', Georgia, serif !important;

    font-size: 32px !important;

    font-weight: 700 !important;

}



.about-page .exp-text {

    font-size: 11px !important;

    text-transform: uppercase !important;

    letter-spacing: 0.05em !important;

    line-height: 1.4 !important;

}



/* Section Badge & Title */

.about-page .section-badge {

    display: inline-block !important;

    padding: 10px 20px !important;

    background: rgba(185, 157, 99, 0.1) !important;

    color: #b99d63 !important;

    border-radius: 50px !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    margin-bottom: 16px !important;

}



.about-page .section-title {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 2.5rem !important;

    font-weight: 700 !important;

    color: #1a1a1a !important;

    line-height: 1.2 !important;

    margin-bottom: 24px !important;

}



.about-page .story-text p {

    font-size: 1.0625rem !important;

    color: #4b5563 !important;

    line-height: 1.9 !important;

    margin-bottom: 16px !important;

}



.about-page .story-text p strong {

    color: #1a1a1a !important;

}



.about-page .story-highlights {

    margin-top: 32px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 14px !important;

}



.about-page .highlight-item {

    display: flex !important;

    align-items: center !important;

    gap: 14px !important;

    font-size: 15px !important;

    color: #374151 !important;

}



.about-page .highlight-icon {

    width: 28px !important;

    height: 28px !important;

    background: linear-gradient(135deg, #b99d63 0%, #a38b55 100%) !important;

    color: #ffffff !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 12px !important;

    flex-shrink: 0 !important;

}



/* Mission Section - Dark Premium */

.about-page .about-mission {

    padding: 100px 0 !important;

    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%) !important;

}



.about-page .section-header-center {

    text-align: center !important;

    max-width: 600px !important;

    margin: 0 auto 60px !important;

}



.about-page .section-header-center .section-title {

    color: #ffffff !important;

}



.about-page .mission-grid {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 30px !important;

}



.about-page .mission-card {

    background: rgba(255, 255, 255, 0.03) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    border-radius: 20px !important;

    padding: 48px 36px !important;

    text-align: center !important;

    transition: all 0.4s ease !important;

    position: relative !important;

    overflow: hidden !important;

}



.about-page .mission-card::before {

    content: '' !important;

    display: block !important;

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    height: 3px !important;

    background: linear-gradient(90deg, transparent, #b99d63, transparent) !important;

    opacity: 0 !important;

    transition: opacity 0.4s ease !important;

}



.about-page .mission-card:hover {

    background: rgba(255, 255, 255, 0.06) !important;

    transform: translateY(-8px) !important;

    border-color: rgba(185, 157, 99, 0.3) !important;

}



.about-page .mission-card:hover::before {

    opacity: 1 !important;

}



.about-page .mission-icon {

    font-size: 52px !important;

    margin-bottom: 24px !important;

}



.about-page .mission-card h3 {

    font-family: 'Cormorant Garamond', Georgia, serif !important;

    font-size: 1.5rem !important;

    color: #b99d63 !important;

    margin-bottom: 16px !important;

}



.about-page .mission-card p {

    font-size: 1rem !important;

    color: rgba(255, 255, 255, 0.65) !important;

    line-height: 1.8 !important;

}



/* Services Section - Grid */

.about-page .about-services {

    padding: 100px 0 !important;

    background: #f8f9fa !important;

}



.about-page .services-grid {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 24px !important;

    margin-top: 50px !important;

}



.about-page .service-card {

    background: #ffffff !important;

    border: 1px solid #e5e7eb !important;

    border-radius: 16px !important;

    padding: 32px !important;

    text-decoration: none !important;

    transition: all 0.3s ease !important;

    position: relative !important;

    overflow: hidden !important;

}



.about-page .service-card::before {

    content: '' !important;

    display: block !important;

    position: absolute !important;

    bottom: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 3px !important;

    background: #b99d63 !important;

    transform: scaleX(0) !important;

    transition: transform 0.3s ease !important;

}



.about-page .service-card:hover {

    border-color: #b99d63 !important;

    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1) !important;

    transform: translateY(-5px) !important;

}



.about-page .service-card:hover::before {

    transform: scaleX(1) !important;

}



.about-page .service-icon {

    font-size: 40px !important;

    margin-bottom: 20px !important;

}



.about-page .service-title {

    font-family: 'Cormorant Garamond', Georgia, serif !important;

    font-size: 1.25rem !important;

    color: #1a1a1a !important;

    margin-bottom: 12px !important;

}



.about-page .service-desc {

    font-size: 14px !important;

    color: #6b7280 !important;

    line-height: 1.7 !important;

    margin-bottom: 20px !important;

}



.about-page .service-footer {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    padding-top: 16px !important;

    border-top: 1px solid #f0f0f0 !important;

}



.about-page .service-count {

    font-size: 13px !important;

    color: #b99d63 !important;

    font-weight: 600 !important;

}



.about-page .service-arrow {

    width: 32px !important;

    height: 32px !important;

    background: rgba(185, 157, 99, 0.1) !important;

    color: #b99d63 !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 16px !important;

    transition: all 0.3s ease !important;

}



.about-page .service-card:hover .service-arrow {

    background: #b99d63 !important;

    color: #ffffff !important;

    transform: translateX(3px) !important;

}



/* Why Section - Split Layout */

.about-page .about-why {

    padding: 100px 0 !important;

    background: #ffffff !important;

}



.about-page .why-grid {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 80px !important;

    align-items: center !important;

}



.about-page .why-desc {

    font-size: 1.0625rem !important;

    color: #4b5563 !important;

    line-height: 1.8 !important;

    margin-bottom: 32px !important;

}



.about-page .why-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 24px !important;

}



.about-page .why-item {

    display: flex !important;

    gap: 20px !important;

}



.about-page .why-icon {

    width: 56px !important;

    height: 56px !important;

    background: linear-gradient(135deg, rgba(185, 157, 99, 0.1) 0%, rgba(185, 157, 99, 0.05) 100%) !important;

    border-radius: 14px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 26px !important;

    flex-shrink: 0 !important;

}



.about-page .why-text h4 {

    font-size: 1rem !important;

    color: #1a1a1a !important;

    margin-bottom: 6px !important;

    font-weight: 600 !important;

}



.about-page .why-text p {

    font-size: 14px !important;

    color: #6b7280 !important;

    line-height: 1.6 !important;

}



.about-page .why-image {

    position: relative !important;

}



.about-page .why-image img {

    width: 100% !important;

    border-radius: 20px !important;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12) !important;

}



.about-page .why-badge {

    position: absolute !important;

    bottom: 30px !important;

    left: -30px !important;

    background: linear-gradient(135deg, #b99d63 0%, #a38b55 100%) !important;

    color: #ffffff !important;

    padding: 24px !important;

    border-radius: 16px !important;

    text-align: center !important;

    box-shadow: 0 15px 35px rgba(185, 157, 99, 0.4) !important;

}



.about-page .badge-icon {

    font-size: 36px !important;

    display: block !important;

    margin-bottom: 8px !important;

}



.about-page .badge-text {

    font-size: 12px !important;

    line-height: 1.5 !important;

    font-weight: 500 !important;

}



/* Contact Section - Dark Premium */

.about-page .about-contact {

    padding: 100px 0 !important;

    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%) !important;

}



.about-page .contact-grid {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 60px !important;

    align-items: center !important;

}



.about-page .contact-title {

    font-family: 'Cormorant Garamond', Georgia, serif !important;

    font-size: 2.5rem !important;

    color: #ffffff !important;

    margin-bottom: 36px !important;

}



.about-page .contact-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 24px !important;

}



.about-page .contact-item {

    display: flex !important;

    gap: 16px !important;

}



.about-page .contact-icon {

    width: 52px !important;

    height: 52px !important;

    background: rgba(185, 157, 99, 0.15) !important;

    border-radius: 14px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 22px !important;

    flex-shrink: 0 !important;

}



.about-page .contact-text strong {

    display: block !important;

    font-size: 14px !important;

    color: #b99d63 !important;

    margin-bottom: 6px !important;

}



.about-page .contact-text p,

.about-page .contact-text a {

    font-size: 15px !important;

    color: rgba(255, 255, 255, 0.75) !important;

    line-height: 1.6 !important;

    transition: color 0.3s ease !important;

}



.about-page .contact-text a:hover {

    color: #b99d63 !important;

}



.about-page .cta-card {

    background: rgba(255, 255, 255, 0.03) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    border-radius: 24px !important;

    padding: 48px !important;

    text-align: center !important;

}



.about-page .cta-card h3 {

    font-family: 'Cormorant Garamond', Georgia, serif !important;

    font-size: 1.75rem !important;

    color: #ffffff !important;

    margin-bottom: 16px !important;

}



.about-page .cta-card p {

    color: rgba(255, 255, 255, 0.65) !important;

    margin-bottom: 28px !important;

    line-height: 1.7 !important;

}



.about-page .cta-buttons {

    display: flex !important;

    flex-direction: column !important;

    gap: 14px !important;

}



.about-page .cta-buttons .btn {

    padding: 16px 28px !important;

    border-radius: 10px !important;

    font-weight: 600 !important;

    font-size: 15px !important;

    transition: all 0.3s ease !important;

}



.about-page .cta-buttons .btn-primary {

    background: #b99d63 !important;

    color: #0d0d0d !important;

}



.about-page .cta-buttons .btn-primary:hover {

    background: #a38b55 !important;

}



.about-page .cta-buttons .btn-outline {

    background: transparent !important;

    border: 2px solid rgba(255, 255, 255, 0.2) !important;

    color: #ffffff !important;

}



.about-page .cta-buttons .btn-outline:hover {

    background: rgba(255, 255, 255, 0.1) !important;

    border-color: rgba(255, 255, 255, 0.4) !important;

}



/* Responsive - About Page */

@media (max-width: 1024px) {

    .about-page .story-grid,

    .about-page .why-grid,

    .about-page .contact-grid {

        grid-template-columns: 1fr !important;

        gap: 50px !important;

    }

    

    .about-page .story-images {

        order: -1 !important;

    }

    

    .about-page .mission-grid,

    .about-page .services-grid {

        grid-template-columns: repeat(2, 1fr) !important;

    }

    

    .about-page .stats-grid {

        grid-template-columns: repeat(2, 1fr) !important;

    }

    

    .about-page .stat-item {

        border-bottom: 1px solid #f0f0f0 !important;

    }

    

    .about-page .stat-item:nth-child(2),

    .about-page .stat-item:nth-child(4) {

        border-right: none !important;

    }

    

    .about-page .stat-item:nth-child(3),

    .about-page .stat-item:nth-child(4) {

        border-bottom: none !important;

    }

}



@media (max-width: 768px) {

    .about-page .about-hero {

        padding: 140px 0 100px !important;

    }

    

    .about-page .about-stats {

        margin-top: -40px !important;

    }

    

    .about-page .stats-grid {

        padding: 30px 20px !important;

        gap: 0 !important;

    }

    

    .about-page .stat-number {

        font-size: 36px !important;

    }

    

    .about-page .mission-grid,

    .about-page .services-grid {

        grid-template-columns: 1fr !important;

    }

    

    .about-page .story-image-float {

        position: relative !important;

        bottom: auto !important;

        right: auto !important;

        margin-top: 20px !important;

        width: 100% !important;

    }

    

    .about-page .section-title {

        font-size: 2rem !important;

    }

    

    .about-page .why-badge {

        left: auto !important;

        right: 20px !important;

        bottom: 20px !important;

    }

    

    .about-page .about-hero-actions {

        flex-direction: column !important;

    }

    

    .about-page .about-hero-actions .btn {

        width: 100% !important;

    }

    

    .about-page .cta-card {

        padding: 32px 24px !important;

    }

}



/* ==========================================================================

   MOBILE NAVIGATION OVERLAY - Complete Styling

   ========================================================================== */



.mobile-nav-overlay {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100% !important;

    height: 100% !important;

    background: rgba(26, 26, 26, 0.98) !important;

    z-index: 99999 !important;

    transform: translateX(100%) !important;

    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    visibility: hidden !important;

}



.mobile-nav-overlay.active {

    transform: translateX(0) !important;

    visibility: visible !important;

}



body.mobile-menu-open {

    overflow: hidden !important;

}



/* Mobile Nav Container */

.mobile-nav-container {

    display: flex !important;

    flex-direction: column !important;

    min-height: 100vh !important;

    padding: 20px !important;

}



/* Mobile Nav Header */

.mobile-nav-header {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    padding-bottom: 20px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

    margin-bottom: 20px !important;

}



.mobile-logo {

    display: block !important;

}



.mobile-logo img {

    height: 50px !important;

    width: auto !important;

    filter: brightness(0) invert(1) !important;

}



.mobile-close {

    width: 44px !important;

    height: 44px !important;

    background: rgba(255, 255, 255, 0.1) !important;

    border: none !important;

    border-radius: 10px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    color: #fff !important;

    transition: all 0.3s ease !important;

}



.mobile-close:hover {

    background: rgba(185, 157, 99, 0.3) !important;

}



.mobile-close svg {

    width: 24px !important;

    height: 24px !important;

}



/* Mobile Search */

.mobile-search {

    padding: 10px 0 20px !important;

}



.mobile-search form {

    display: flex !important;

    background: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    border-radius: 12px !important;

    overflow: hidden !important;

}



.mobile-search-input {

    flex: 1 !important;

    background: transparent !important;

    border: none !important;

    padding: 14px 16px !important;

    color: #fff !important;

    font-size: 16px !important;

    outline: none !important;

}



.mobile-search-input::placeholder {

    color: rgba(255, 255, 255, 0.5) !important;

}



.mobile-search-btn {

    background: linear-gradient(135deg, #b99d63 0%, #a38b55 100%) !important;

    border: none !important;

    padding: 14px 18px !important;

    color: #fff !important;

    cursor: pointer !important;

    transition: all 0.3s ease !important;

}



.mobile-search-btn:hover {

    background: linear-gradient(135deg, #a38b55 0%, #8c7645 100%) !important;

}



/* Mobile Menu List */

.mobile-nav-menu {

    flex: 1 !important;

    padding: 0 !important;

}



.mobile-menu-list {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

}



.mobile-menu-list > li {

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

}



.mobile-menu-list > li > a {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 16px 0 !important;

    color: #fff !important;

    font-size: 1.0625rem !important;

    font-weight: 500 !important;

    text-decoration: none !important;

    transition: all 0.3s ease !important;

}



.mobile-menu-list > li > a:hover {

    color: #b99d63 !important;

}



.mobile-menu-list .menu-icon {

    font-size: 1.25rem !important;

    width: 28px !important;

    text-align: center !important;

}



/* Submenu Toggle */

.mobile-menu-list .has-submenu > a.submenu-toggle {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    cursor: pointer !important;

}



.mobile-menu-list .submenu-toggle span {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

}



.mobile-menu-list .toggle-icon {

    transition: transform 0.3s ease !important;

    color: rgba(255, 255, 255, 0.5) !important;

}



.mobile-menu-list .has-submenu.open > a .toggle-icon,

.mobile-menu-list .has-submenu.active > a .toggle-icon {

    transform: rotate(180deg) !important;

    color: #b99d63 !important;

}



/* Mobile Submenu */

.mobile-submenu {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

    max-height: 0 !important;

    overflow: hidden !important;

    transition: max-height 0.4s ease, opacity 0.3s ease !important;

    opacity: 0 !important;

    background: rgba(255, 255, 255, 0.03) !important;

    border-radius: 0 0 12px 12px !important;

}



.mobile-menu-list .has-submenu.open .mobile-submenu,

.mobile-menu-list .has-submenu.active .mobile-submenu {

    max-height: 500px !important;

    opacity: 1 !important;

    padding: 8px 0 !important;

}



.mobile-submenu li a {

    display: block !important;

    padding: 12px 20px !important;

    color: rgba(255, 255, 255, 0.8) !important;

    font-size: 0.9375rem !important;

    text-decoration: none !important;

    transition: all 0.3s ease !important;

}



.mobile-submenu li a:hover {

    color: #b99d63 !important;

    padding-left: 28px !important;

}



/* Mobile CTA Section */

.mobile-nav-cta {

    padding: 20px 0 !important;

    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

    margin-top: 20px !important;

}



.mobile-cta-phone {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 16px !important;

    background: linear-gradient(135deg, rgba(185, 157, 99, 0.15) 0%, rgba(185, 157, 99, 0.05) 100%) !important;

    border: 1px solid rgba(185, 157, 99, 0.3) !important;

    border-radius: 12px !important;

    color: #fff !important;

    text-decoration: none !important;

    margin-bottom: 16px !important;

    transition: all 0.3s ease !important;

}



.mobile-cta-phone:hover {

    background: rgba(185, 157, 99, 0.25) !important;

    border-color: #b99d63 !important;

}



.mobile-cta-phone svg {

    color: #b99d63 !important;

}



.mobile-cta-phone span {

    font-size: 0.9375rem !important;

}



.mobile-cta-phone strong {

    color: #b99d63 !important;

    font-weight: 700 !important;

}



/* Mobile CTA Buttons */

.mobile-cta-buttons {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 12px !important;

}



.mobile-cta-btn {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    padding: 14px !important;

    border-radius: 10px !important;

    font-size: 0.875rem !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    transition: all 0.3s ease !important;

}



.mobile-cta-btn.messenger {

    background: linear-gradient(135deg, #0084FF 0%, #00C6FF 100%) !important;

    color: #fff !important;

}



.mobile-cta-btn.messenger:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 8px 20px rgba(0, 132, 255, 0.3) !important;

}



.mobile-cta-btn.zalo {

    background: linear-gradient(135deg, #0068FF 0%, #0099FF 100%) !important;

    color: #fff !important;

}



.mobile-cta-btn.zalo:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 8px 20px rgba(0, 104, 255, 0.3) !important;

}



/* Mobile Nav Footer */

.mobile-nav-footer {

    padding: 20px 0 !important;

    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

    text-align: center !important;

}



.mobile-socials {

    display: flex !important;

    justify-content: center !important;

    gap: 16px !important;

    margin-bottom: 16px !important;

}



.mobile-socials a {

    width: 40px !important;

    height: 40px !important;

    background: rgba(255, 255, 255, 0.1) !important;

    border-radius: 10px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    color: rgba(255, 255, 255, 0.7) !important;

    transition: all 0.3s ease !important;

}



.mobile-socials a:hover {

    background: #b99d63 !important;

    color: #fff !important;

    transform: translateY(-2px) !important;

}



.mobile-nav-footer p {

    color: rgba(255, 255, 255, 0.5) !important;

    font-size: 0.8125rem !important;

    margin: 0 !important;

}



/* ==========================================================================

   MOBILE FIXES - Header, Footer, Sticky CTA

   ========================================================================== */



/* Fix Logo on mobile - prevent broken image */

@media (max-width: 1024px) {

    .nav-logo .logo-img,

    .site-logo .logo-img,

    .logo-img,

    .mobile-logo img {

        height: 40px !important;

        max-height: 40px !important;

        width: auto !important;

        min-width: 100px !important;

        object-fit: contain !important;

        display: block !important;

    }

    

    /* Remove any filters that might break logo */

    .nav-logo .logo-img,

    .site-logo .logo-img,

    .logo-img {

        filter: none !important;

    }

    

    /* Mobile logo in menu - keep white */

    .mobile-logo img {

        filter: brightness(0) invert(1) !important;

    }

}



/* Mobile Sticky CTA - Fixed bottom bar */

.mobile-sticky-cta {

    position: fixed !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    z-index: 9990 !important;

    background: #ffffff !important;

    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;

    padding: 8px 12px !important;

    display: none !important;

}



@media (max-width: 768px) {

    .mobile-sticky-cta {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 8px !important;

    }

    

    /* Add padding to body for sticky CTA */

    body {

        padding-bottom: 70px !important;

    }

}



.mobile-sticky-cta .sticky-btn {

    flex: 1 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    padding: 10px 8px !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    border-radius: 8px !important;

    transition: all 0.2s ease !important;

    white-space: nowrap !important;

}



.mobile-sticky-cta .sticky-btn svg {

    width: 16px !important;

    height: 16px !important;

    flex-shrink: 0 !important;

}



.mobile-sticky-cta .sticky-btn span {

    font-size: 11px !important;

}



.mobile-sticky-cta .sticky-btn.phone {

    background: #f0f0f0 !important;

    color: #333 !important;

}



.mobile-sticky-cta .sticky-btn.zalo {

    background: #0068ff !important;

    color: #fff !important;

}



.mobile-sticky-cta .sticky-btn.messenger {

    background: #0084ff !important;

    color: #fff !important;

}



.mobile-sticky-cta .sticky-btn.contact {

    background: #b99d63 !important;

    color: #fff !important;

}



/* Floating buttons - hide on mobile when sticky CTA shows */

@media (max-width: 768px) {

    .floating-buttons {

        bottom: 80px !important;

    }

}



/* Mobile Header - Ultra Simple */

@media (max-width: 768px) {

    .site-header {

        background: #fff !important;

    }

    

    .main-nav {

        background: #fff !important;

        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;

    }

    

    .nav-wrapper {

        height: 100% !important;

    }

    

    /* Hide phone number on header mobile */

    .nav-phone .phone-text {

        display: none !important;

    }

    

    .nav-phone .phone-icon {

        width: 32px !important;

        height: 32px !important;

        min-width: 32px !important;

    }

}



/* Hamburger button styling */

@media (max-width: 1024px) {

    .mobile-toggle {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 44px !important;

        height: 44px !important;

        background: #f5f5f5 !important;

        border: none !important;

        border-radius: 8px !important;

        cursor: pointer !important;

    }

    

    .mobile-toggle .hamburger {

        display: flex !important;

        flex-direction: column !important;

        gap: 4px !important;

        width: auto !important;

        height: auto !important;

        background: none !important;

    }

    

    .mobile-toggle .hamburger span {

        width: 20px !important;

        height: 2px !important;

        background: #333 !important;

        border-radius: 2px !important;

    }

}



/* ==========================================================================

   CRITICAL FIX: Mobile Menu Display Issues

   Force all menu items to display correctly

   ========================================================================== */



/* Mobile Nav Overlay - Must be full screen dark */

#mobile-nav-overlay.mobile-nav-overlay {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    background: rgba(26, 26, 26, 0.98) !important;

    z-index: 999999 !important;

    transform: translateX(100%) !important;

    visibility: hidden !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

}



#mobile-nav-overlay.mobile-nav-overlay.active {

    transform: translateX(0) !important;

    visibility: visible !important;

}



/* Mobile Logo - MUST SHOW */

#mobile-nav-overlay .mobile-logo {

    display: block !important;

    visibility: visible !important;

}



#mobile-nav-overlay .mobile-logo img {

    display: block !important;

    visibility: visible !important;

    height: 45px !important;

    width: auto !important;

    max-width: 150px !important;

    object-fit: contain !important;

    filter: brightness(0) invert(1) !important;

}



/* Mobile Container */

#mobile-nav-overlay .mobile-nav-container {

    display: flex !important;

    flex-direction: column !important;

    min-height: 100vh !important;

    padding: 20px !important;

    box-sizing: border-box !important;

}



/* Mobile Header */

#mobile-nav-overlay .mobile-nav-header {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    padding-bottom: 20px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

    margin-bottom: 20px !important;

}



/* Close Button */

#mobile-nav-overlay .mobile-close {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 44px !important;

    height: 44px !important;

    background: rgba(255, 255, 255, 0.1) !important;

    border: none !important;

    border-radius: 10px !important;

    color: #fff !important;

    cursor: pointer !important;

}



/* Mobile Search */

#mobile-nav-overlay .mobile-search {

    display: block !important;

    padding: 10px 0 20px !important;

}



#mobile-nav-overlay .mobile-search form {

    display: flex !important;

    background: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    border-radius: 12px !important;

    overflow: hidden !important;

}



/* CRITICAL: Menu List - Force ALL items to show */

#mobile-nav-overlay .mobile-nav-menu {

    display: block !important;

    visibility: visible !important;

    flex: 1 !important;

}



#mobile-nav-overlay .mobile-menu-list {

    display: block !important;

    visibility: visible !important;

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

}



#mobile-nav-overlay .mobile-menu-list > li {

    display: block !important;

    visibility: visible !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

}



#mobile-nav-overlay .mobile-menu-list > li > a {

    display: flex !important;

    visibility: visible !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 16px 0 !important;

    color: #ffffff !important;

    font-size: 17px !important;

    font-weight: 500 !important;

    text-decoration: none !important;

}



#mobile-nav-overlay .mobile-menu-list > li > a:hover {

    color: #b99d63 !important;

}



#mobile-nav-overlay .mobile-menu-list .menu-icon {

    display: inline-block !important;

    font-size: 20px !important;

    width: 28px !important;

    text-align: center !important;

}



/* Submenu toggle */

#mobile-nav-overlay .submenu-toggle {

    justify-content: space-between !important;

    cursor: pointer !important;

}



#mobile-nav-overlay .toggle-icon {

    color: rgba(255, 255, 255, 0.5) !important;

    transition: transform 0.3s ease !important;

}



#mobile-nav-overlay .has-submenu.open .toggle-icon,

#mobile-nav-overlay .has-submenu.active .toggle-icon {

    transform: rotate(180deg) !important;

    color: #b99d63 !important;

}



/* Submenu */

#mobile-nav-overlay .mobile-submenu {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

    max-height: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;

    background: rgba(255, 255, 255, 0.03) !important;

    transition: max-height 0.4s ease, opacity 0.3s ease !important;

}



#mobile-nav-overlay .has-submenu.open .mobile-submenu,

#mobile-nav-overlay .has-submenu.active .mobile-submenu {

    max-height: 500px !important;

    opacity: 1 !important;

    padding: 8px 0 !important;

}



#mobile-nav-overlay .mobile-submenu li {

    display: block !important;

}



#mobile-nav-overlay .mobile-submenu li a {

    display: block !important;

    padding: 12px 20px !important;

    color: rgba(255, 255, 255, 0.8) !important;

    font-size: 15px !important;

    text-decoration: none !important;

}



/* Mobile CTA Section */

#mobile-nav-overlay .mobile-nav-cta {

    display: block !important;

    padding: 20px 0 !important;

    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

    margin-top: 20px !important;

}



#mobile-nav-overlay .mobile-cta-phone {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 16px !important;

    background: linear-gradient(135deg, rgba(185, 157, 99, 0.15) 0%, rgba(185, 157, 99, 0.05) 100%) !important;

    border: 1px solid rgba(185, 157, 99, 0.3) !important;

    border-radius: 12px !important;

    color: #fff !important;

    text-decoration: none !important;

    margin-bottom: 16px !important;

}



#mobile-nav-overlay .mobile-cta-buttons {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 12px !important;

}



#mobile-nav-overlay .mobile-cta-btn {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    padding: 14px !important;

    border-radius: 10px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    color: #fff !important;

}



#mobile-nav-overlay .mobile-cta-btn.messenger {

    background: linear-gradient(135deg, #0084FF, #0066CC) !important;

}



#mobile-nav-overlay .mobile-cta-btn.zalo {

    background: linear-gradient(135deg, #0068FF, #0052CC) !important;

}



/* Mobile Footer */

#mobile-nav-overlay .mobile-nav-footer {

    display: block !important;

    padding-top: 20px !important;

    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

    text-align: center !important;

}



#mobile-nav-overlay .mobile-socials {

    display: flex !important;

    justify-content: center !important;

    gap: 16px !important;

    margin-bottom: 16px !important;

}



#mobile-nav-overlay .mobile-socials a {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 40px !important;

    height: 40px !important;

    background: rgba(255, 255, 255, 0.1) !important;

    border-radius: 50% !important;

    color: #fff !important;

}



#mobile-nav-overlay .mobile-nav-footer p {

    color: rgba(255, 255, 255, 0.5) !important;

    font-size: 14px !important;

    margin: 0 !important;

}



/* ==========================================================================

   ULTRA FIX: Mobile Nav Must Scroll - Force Full Display

   ========================================================================== */



/* Force overlay to be scrollable full screen */

.mobile-nav-overlay,

#mobile-nav-overlay,

div.mobile-nav-overlay {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    max-height: 100vh !important;

    max-height: -webkit-fill-available !important;

    overflow-y: scroll !important;

    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: contain !important;

}



/* Container must NOT have fixed height */

.mobile-nav-overlay .mobile-nav-container,

#mobile-nav-overlay .mobile-nav-container {

    min-height: auto !important;

    height: auto !important;

    max-height: none !important;

    padding: 16px !important;

    padding-bottom: 100px !important;

    display: block !important;

    overflow: visible !important;

}



/* Force menu to expand */

.mobile-nav-overlay .mobile-nav-menu,

#mobile-nav-overlay .mobile-nav-menu {

    flex: none !important;

    height: auto !important;

    max-height: none !important;

    overflow: visible !important;

}



/* All menu items must show */

.mobile-nav-overlay .mobile-menu-list,

#mobile-nav-overlay .mobile-menu-list,

.mobile-menu-list {

    height: auto !important;

    max-height: none !important;

    overflow: visible !important;

}



.mobile-nav-overlay .mobile-menu-list > li,

#mobile-nav-overlay .mobile-menu-list > li,

.mobile-menu-list > li {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    height: auto !important;

    overflow: visible !important;

}



/* CTA and footer must show */

.mobile-nav-overlay .mobile-nav-cta,

#mobile-nav-overlay .mobile-nav-cta,

.mobile-nav-cta {

    display: block !important;

    visibility: visible !important;

}



.mobile-nav-overlay .mobile-nav-footer,

#mobile-nav-overlay .mobile-nav-footer,

.mobile-nav-footer {

    display: block !important;

    visibility: visible !important;

    margin-top: 20px !important;

}



/* Fix logo in header and mobile menu */

.nav-logo img,

.nav-logo .logo-img,

.logo-img {

    display: block !important;

    visibility: visible !important;

    height: 45px !important;

    width: auto !important;

    max-width: 150px !important;

    object-fit: contain !important;

}



/* Mobile logo white */

.mobile-logo img,

.mobile-nav-header .mobile-logo img {

    filter: brightness(0) invert(1) !important;

    height: 40px !important;

}



/* Search box fix */

.mobile-search {

    display: block !important;

}



.mobile-search form {

    display: flex !important;

}



/* ==========================================================================

   FINAL MOBILE FIX - Complete Rewrite for Mobile Menu

   Date: 28/01/2026

   ========================================================================== */



/* Reset body when menu open */

body.mobile-menu-open {

    overflow: hidden !important;

    position: fixed !important;

    width: 100% !important;

    height: 100% !important;

    top: 0 !important;

    left: 0 !important;

}



/* Mobile Menu Overlay - Full Screen */

#mobile-nav-overlay {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    height: 100dvh !important;

    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%) !important;

    z-index: 99999 !important;

    display: none;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;

}



#mobile-nav-overlay.active {

    display: block !important;

}



/* Mobile Container */

#mobile-nav-overlay .mobile-nav-container {

    display: flex !important;

    flex-direction: column !important;

    min-height: 100% !important;

    padding: 0 !important;

    background: transparent !important;

}



/* Mobile Header - Fixed at top */

#mobile-nav-overlay .mobile-nav-header {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 16px 20px !important;

    background: rgba(0,0,0,0.5) !important;

    border-bottom: 1px solid rgba(255,255,255,0.1) !important;

    position: sticky !important;

    top: 0 !important;

    z-index: 10 !important;

}



/* Mobile Logo */

#mobile-nav-overlay .mobile-logo {

    display: flex !important;

    align-items: center !important;

}



#mobile-nav-overlay .mobile-logo img {

    height: 40px !important;

    width: auto !important;

    max-width: 140px !important;

    display: block !important;

    filter: brightness(0) invert(1) !important;

    object-fit: contain !important;

}



/* Close Button */

#mobile-nav-overlay .mobile-close {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 44px !important;

    height: 44px !important;

    background: rgba(255,255,255,0.1) !important;

    border: none !important;

    border-radius: 50% !important;

    cursor: pointer !important;

}



#mobile-nav-overlay .mobile-close svg {

    width: 24px !important;

    height: 24px !important;

    color: #fff !important;

    stroke: #fff !important;

}



/* Mobile Search */

#mobile-nav-overlay .mobile-search {

    padding: 16px 20px !important;

    display: block !important;

}



#mobile-nav-overlay .mobile-search form {

    display: flex !important;

    background: rgba(255,255,255,0.1) !important;

    border-radius: 25px !important;

    overflow: hidden !important;

}



#mobile-nav-overlay .mobile-search input {

    flex: 1 !important;

    padding: 12px 20px !important;

    border: none !important;

    background: transparent !important;

    color: #fff !important;

    font-size: 15px !important;

}



#mobile-nav-overlay .mobile-search input::placeholder {

    color: rgba(255,255,255,0.5) !important;

}



#mobile-nav-overlay .mobile-search button {

    padding: 12px 20px !important;

    background: #b99d63 !important;

    border: none !important;

    color: #fff !important;

    cursor: pointer !important;

}



/* Menu Section */

#mobile-nav-overlay .mobile-nav-menu {

    flex: 1 !important;

    padding: 10px 20px !important;

}



/* Menu List */

#mobile-nav-overlay .mobile-menu-list {

    list-style: none !important;

    margin: 0 !important;

    padding: 0 !important;

}



#mobile-nav-overlay .mobile-menu-list > li {

    display: block !important;

    border-bottom: 1px solid rgba(255,255,255,0.08) !important;

}



/* Menu Links */

#mobile-nav-overlay .mobile-menu-list > li > a {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 16px 0 !important;

    color: #fff !important;

    font-size: 17px !important;

    font-weight: 500 !important;

    text-decoration: none !important;

}



#mobile-nav-overlay .mobile-menu-list > li > a .menu-icon {

    width: 24px !important;

    height: 24px !important;

    margin-right: 12px !important;

    opacity: 0.7 !important;

}



/* Menu Item Wrapper for items with submenu */

#mobile-nav-overlay .menu-item-wrapper {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 16px 0 !important;

}



#mobile-nav-overlay .menu-item-wrapper a {

    display: flex !important;

    align-items: center !important;

    color: #fff !important;

    font-size: 17px !important;

    font-weight: 500 !important;

    text-decoration: none !important;

    flex: 1 !important;

}



#mobile-nav-overlay .menu-item-wrapper a .menu-icon {

    margin-right: 12px !important;

}



/* Submenu Toggle Arrow */

#mobile-nav-overlay .submenu-toggle {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 40px !important;

    height: 40px !important;

    background: rgba(255,255,255,0.1) !important;

    border: none !important;

    border-radius: 8px !important;

    cursor: pointer !important;

    margin-left: auto !important;

}



#mobile-nav-overlay .submenu-toggle svg {

    width: 16px !important;

    height: 16px !important;

    color: #fff !important;

    stroke: #fff !important;

    transition: transform 0.3s ease !important;

}



#mobile-nav-overlay .submenu-toggle.active svg {

    transform: rotate(180deg) !important;

}



/* Submenu */

#mobile-nav-overlay .mobile-submenu {

    list-style: none !important;

    margin: 0 !important;

    padding: 0 !important;

    background: rgba(255,255,255,0.03) !important;

    border-radius: 8px !important;

    overflow: hidden !important;

    max-height: 0 !important;

    transition: max-height 0.3s ease-out !important;

}



#mobile-nav-overlay .has-submenu.active .mobile-submenu {

    max-height: 500px !important;

    padding: 10px 0 10px 20px !important;

    margin-bottom: 10px !important;

}



#mobile-nav-overlay .mobile-submenu li {

    display: block !important;

}



#mobile-nav-overlay .mobile-submenu li a {

    display: flex !important;

    align-items: center !important;

    padding: 12px 16px !important;

    color: rgba(255,255,255,0.85) !important;

    font-size: 15px !important;

    text-decoration: none !important;

}



#mobile-nav-overlay .mobile-submenu li a .submenu-icon {

    width: 20px !important;

    height: 20px !important;

    margin-right: 12px !important;

    opacity: 0.6 !important;

}



/* CTA Section */

#mobile-nav-overlay .mobile-nav-cta {

    padding: 20px !important;

    display: block !important;

}



#mobile-nav-overlay .mobile-nav-cta .cta-phone {

    display: flex !important;

    align-items: center !important;

    padding: 16px 20px !important;

    background: linear-gradient(135deg, #b99d63 0%, #8b7355 100%) !important;

    border-radius: 12px !important;

    color: #fff !important;

    text-decoration: none !important;

    margin-bottom: 12px !important;

}



#mobile-nav-overlay .mobile-nav-cta .cta-phone svg {

    width: 24px !important;

    height: 24px !important;

    margin-right: 12px !important;

}



#mobile-nav-overlay .mobile-nav-cta .cta-phone span {

    display: flex !important;

    flex-direction: column !important;

}



#mobile-nav-overlay .mobile-nav-cta .cta-phone small {

    font-size: 12px !important;

    opacity: 0.8 !important;

}



#mobile-nav-overlay .mobile-nav-cta .cta-phone strong {

    font-size: 18px !important;

    font-weight: 600 !important;

}



#mobile-nav-overlay .mobile-nav-cta .cta-contact {

    display: block !important;

    text-align: center !important;

    padding: 16px 20px !important;

    background: rgba(255,255,255,0.1) !important;

    border: 1px solid rgba(255,255,255,0.2) !important;

    border-radius: 12px !important;

    color: #fff !important;

    font-weight: 500 !important;

    text-decoration: none !important;

}



/* Footer */

#mobile-nav-overlay .mobile-nav-footer {

    padding: 20px !important;

    text-align: center !important;

    border-top: 1px solid rgba(255,255,255,0.1) !important;

    margin-top: auto !important;

}



#mobile-nav-overlay .mobile-socials {

    display: flex !important;

    justify-content: center !important;

    gap: 12px !important;

    margin-bottom: 16px !important;

}



#mobile-nav-overlay .mobile-socials a {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 40px !important;

    height: 40px !important;

    background: rgba(255,255,255,0.1) !important;

    border-radius: 50% !important;

    color: #fff !important;

}



#mobile-nav-overlay .mobile-nav-footer p {

    color: rgba(255,255,255,0.4) !important;

    font-size: 13px !important;

    margin: 0 !important;

}



/* ==========================================================================

   MAIN HEADER MOBILE FIX

   ========================================================================== */

@media (max-width: 1024px) {

    /* Header */

    .main-nav,

    #main-nav {

        height: 60px !important;

        padding: 0 !important;

    }

    

    .main-nav .container,

    .main-nav .nav-wrapper {

        height: 60px !important;

    }

    

    /* Logo in header */

    .nav-logo {

        display: flex !important;

        align-items: center !important;

    }

    

    .nav-logo img,

    .nav-logo .logo-img {

        height: 40px !important;

        width: auto !important;

        max-width: 120px !important;

        display: block !important;

        object-fit: contain !important;

    }

    

    /* Hide desktop elements */

    .nav-center,

    .nav-menu,

    .nav-phone,

    .nav-cta-btn,

    .topbar {

        display: none !important;

    }

    

    /* Mobile Toggle Button */

    .mobile-toggle {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 44px !important;

        height: 44px !important;

        background: transparent !important;

        border: none !important;

        cursor: pointer !important;

        padding: 0 !important;

    }

    

    .mobile-toggle .hamburger {

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        gap: 5px !important;

        width: 24px !important;

        height: 24px !important;

    }

    

    .mobile-toggle .hamburger span {

        display: block !important;

        width: 24px !important;

        height: 2px !important;

        background: #222 !important;

        border-radius: 2px !important;

        transition: all 0.3s ease !important;

    }

    

    /* Nav actions */

    .nav-actions {

        display: flex !important;

        align-items: center !important;

    }

    

    /* Body padding */

    body {

        padding-top: 60px !important;

    }

    

    /* Admin bar adjustment */

    .admin-bar .main-nav {

        top: 32px !important;

    }

    

    .admin-bar body {

        padding-top: 92px !important;

    }

}



@media (max-width: 782px) {

    .admin-bar .main-nav {

        top: 46px !important;

    }

    

    .admin-bar body {

        padding-top: 106px !important;

    }

}



@media (max-width: 600px) {

    .main-nav,

    #main-nav {

        height: 56px !important;

    }

    

    .main-nav .container,

    .main-nav .nav-wrapper {

        height: 56px !important;

    }

    

    body {

        padding-top: 56px !important;

    }

    

    .nav-logo img,

    .nav-logo .logo-img {

        height: 36px !important;

        max-width: 100px !important;

    }

    

    .admin-bar .main-nav {

        top: 0 !important;

    }

    

    .admin-bar body {

        padding-top: 56px !important;

    }

}



/* ==========================================================================

   HAMBURGER MENU FIX - Ensure visibility

   ========================================================================== */

#mobile-toggle,

.mobile-toggle,

button.mobile-toggle {

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    align-items: center !important;

    justify-content: center !important;

    width: 44px !important;

    height: 44px !important;

    min-width: 44px !important;

    min-height: 44px !important;

    background: transparent !important;

    border: none !important;

    outline: none !important;

    cursor: pointer !important;

    padding: 8px !important;

    margin: 0 !important;

    position: relative !important;

    z-index: 100 !important;

}



#mobile-toggle .hamburger,

.mobile-toggle .hamburger,

.mobile-toggle > .hamburger {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 6px !important;

    width: 28px !important;

    height: 28px !important;

    padding: 0 !important;

    background: transparent !important;

}



#mobile-toggle .hamburger span,

.mobile-toggle .hamburger span,

.mobile-toggle .hamburger > span {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: 24px !important;

    height: 3px !important;

    background-color: #222 !important;

    border-radius: 3px !important;

    transition: all 0.3s ease !important;

    flex-shrink: 0 !important;

}



/* REMOVE ::before and ::after from hamburger - use span only */

.hamburger::before,

.hamburger::after,

.mobile-toggle .hamburger::before,

.mobile-toggle .hamburger::after,

#mobile-toggle .hamburger::before,

#mobile-toggle .hamburger::after {

    display: none !important;

    content: none !important;

    width: 0 !important;

    height: 0 !important;

    background: none !important;

}



/* Ensure hamburger itself has no background line */

.hamburger,

.mobile-toggle .hamburger,

#mobile-toggle .hamburger {

    background: transparent !important;

    width: auto !important;

    height: auto !important;

    position: relative !important;

}



/* Dark header - white hamburger lines */

.site-header.dark #mobile-toggle .hamburger span,

.site-header.dark .mobile-toggle .hamburger span {

    background-color: #fff !important;

}



/* Hide on desktop */

@media (min-width: 1025px) {

    #mobile-toggle,

    .mobile-toggle {

        display: none !important;

    }

}



/* ==========================================================================

   MOBILE RESPONSIVE LAYOUT FIX - Consistent spacing & alignment

   ========================================================================== */



@media (max-width: 1024px) {

    /* Container padding consistent */

    .container,

    .wrapper,

    section > .container {

        padding-left: 20px !important;

        padding-right: 20px !important;

        max-width: 100% !important;

    }

    

    /* All sections - consistent padding */

    section,

    .section,

    .hero-section,

    .services-section,

    .portfolio-section,

    .process-section,

    .pricing-section,

    .contact-section,

    .footer-section {

        padding-top: 40px !important;

        padding-bottom: 40px !important;

    }

    

    /* Section titles - center align */

    .section-title,

    .section-title-v2,

    .section-heading,

    h2.section-title {

        text-align: center !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }

    

    .section-subtitle,

    .section-desc,

    .section-description {

        text-align: center !important;

        margin-left: auto !important;

        margin-right: auto !important;

        max-width: 100% !important;

    }

    

    /* Section header wrapper */

    .section-header,

    .section-head {

        text-align: center !important;

        margin-bottom: 30px !important;

    }

}



@media (max-width: 768px) {

    /* Smaller container padding on mobile */

    .container,

    .wrapper,

    section > .container {

        padding-left: 16px !important;

        padding-right: 16px !important;

    }

    

    /* Sections - smaller padding */

    section,

    .section {

        padding-top: 32px !important;

        padding-bottom: 32px !important;

    }

    

    /* Grid layouts - single column, centered */

    .services-grid,

    .services-grid-v2,

    .portfolio-grid,

    .features-grid,

    .process-grid,

    .team-grid,

    .pricing-grid,

    .blog-grid,

    .projects-grid {

        grid-template-columns: 1fr !important;

        gap: 20px !important;

        max-width: 400px !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }

    

    /* Cards - full width, centered content */

    .service-card,

    .service-card-v2,

    .portfolio-card,

    .feature-card,

    .process-step,

    .pricing-card,

    .team-card,

    .blog-card {

        text-align: center !important;

        padding: 24px 20px !important;

    }

    

    /* Card icons - center */

    .service-icon,

    .feature-icon,

    .process-icon,

    .card-icon {

        margin-left: auto !important;

        margin-right: auto !important;

    }

    

    /* Card titles */

    .service-title,

    .card-title,

    .feature-title {

        text-align: center !important;

    }

    

    /* Card descriptions */

    .service-desc,

    .card-desc,

    .feature-desc {

        text-align: center !important;

    }

    

    /* Hero section mobile */

    .hero,

    .hero-section,

    .hero-v2 {

        padding: 60px 16px 40px !important;

        text-align: center !important;

    }

    

    .hero-content,

    .hero-content-v2 {

        text-align: center !important;

        max-width: 100% !important;

    }

    

    .hero-title,

    .hero-title-v2 {

        font-size: 1.75rem !important;

        line-height: 1.3 !important;

        text-align: center !important;

    }

    

    .hero-subtitle,

    .hero-desc {

        text-align: center !important;

        font-size: 1rem !important;

    }

    

    .hero-buttons,

    .hero-cta {

        justify-content: center !important;

        flex-wrap: wrap !important;

        gap: 12px !important;

    }

    

    /* Stats row - centered */

    .hero-stats,

    .hero-stats-v2,

    .stats-row,

    .stats-grid {

        display: flex !important;

        flex-wrap: wrap !important;

        justify-content: center !important;

        gap: 20px !important;

        text-align: center !important;

    }

    

    .hero-stat,

    .hero-stat-v2,

    .stat-item {

        text-align: center !important;

        min-width: 100px !important;

    }

    

    /* Process steps - vertical timeline */

    .process-steps,

    .process-timeline {

        display: flex !important;

        flex-direction: column !important;

        gap: 24px !important;

        max-width: 320px !important;

        margin: 0 auto !important;

    }

    

    .process-step {

        text-align: center !important;

    }

    

    .process-number,

    .step-number {

        margin: 0 auto 12px !important;

    }

    

    /* Pricing cards - centered */

    .pricing-grid {

        max-width: 350px !important;

    }

    

    .pricing-card {

        text-align: center !important;

    }

    

    .pricing-features {

        text-align: left !important;

        max-width: 280px !important;

        margin: 0 auto !important;

    }

    

    /* Contact form - centered */

    .contact-form,

    .contact-form-wrapper,

    .form-wrapper {

        max-width: 100% !important;

        padding: 24px 16px !important;

    }

    

    .form-group,

    .form-row {

        margin-bottom: 16px !important;

    }

    

    .form-group input,

    .form-group textarea,

    .form-group select {

        padding: 14px 16px !important;

        font-size: 16px !important;

    }

    

    .form-submit,

    .submit-btn,

    .form-group button[type="submit"] {

        width: 100% !important;

        padding: 16px 24px !important;

        font-size: 1rem !important;

    }

    

    /* Footer mobile */

    .site-footer {

        text-align: center !important;

    }

    

    .footer-grid {

        grid-template-columns: 1fr !important;

        gap: 32px !important;

        text-align: center !important;

    }

    

    .footer-col,

    .footer-widget {

        text-align: center !important;

    }

    

    .footer-title {

        text-align: center !important;

    }

    

    .footer-title::after {

        left: 50% !important;

        transform: translateX(-50%) !important;

    }

    

    .footer-links {

        text-align: center !important;

    }

    

    .footer-links li {

        text-align: center !important;

    }

    

    .footer-links a::before {

        display: none !important;

    }

    

    .footer-contact-info {

        text-align: center !important;

    }

    

    .footer-social {

        justify-content: center !important;

    }

    

    .footer-logo {

        margin: 0 auto !important;

    }

    

    .footer-brand {

        text-align: center !important;

    }

    

    .footer-badges {

        justify-content: center !important;

    }

    

    /* CTA section */

    .footer-cta-section,

    .cta-section {

        text-align: center !important;

        padding: 32px 16px !important;

    }

    

    .footer-cta-wrapper,

    .cta-wrapper {

        flex-direction: column !important;

        text-align: center !important;

        gap: 20px !important;

    }

    

    .footer-cta-content {

        text-align: center !important;

    }

    

    .footer-cta-actions {

        flex-direction: column !important;

        gap: 12px !important;

        width: 100% !important;

        max-width: 280px !important;

        margin: 0 auto !important;

    }

    

    .footer-cta-btn {

        width: 100% !important;

        justify-content: center !important;

    }

    

    /* Bottom footer */

    .footer-bottom {

        flex-direction: column !important;

        gap: 16px !important;

        text-align: center !important;

    }

    

    .footer-bottom-links {

        justify-content: center !important;

        flex-wrap: wrap !important;

    }

}



@media (max-width: 480px) {

    /* Extra small screens */

    .container,

    .wrapper {

        padding-left: 12px !important;

        padding-right: 12px !important;

    }

    

    section,

    .section {

        padding-top: 24px !important;

        padding-bottom: 24px !important;

    }

    

    .hero-title,

    .hero-title-v2 {

        font-size: 1.5rem !important;

    }

    

    .section-title,

    .section-title-v2 {

        font-size: 1.25rem !important;

    }

    

    /* Grids */

    .services-grid,

    .portfolio-grid,

    .process-grid {

        max-width: 100% !important;

    }

    

    /* Cards smaller padding */

    .service-card,

    .pricing-card,

    .feature-card {

        padding: 20px 16px !important;

    }

    

    /* Stats smaller */

    .hero-stat .stat-number,

    .stat-number {

        font-size: 1.5rem !important;

    }

    

    .hero-stat .stat-label,

    .stat-label {

        font-size: 0.75rem !important;

    }

    

    /* Buttons full width */

    .btn,

    .button,

    .cta-btn {

        width: 100% !important;

        text-align: center !important;

        justify-content: center !important;

    }

    

    .hero-buttons {

        flex-direction: column !important;

        width: 100% !important;

    }

    

    .hero-buttons .btn {

        width: 100% !important;

    }

}



/* ==========================================================================

   PROCESS SECTION - Modern Premium Design

   ========================================================================== */



.process-section-modern {

    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);

    padding: 80px 0;

    position: relative;

    overflow: hidden;

}



.process-section-modern::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(185, 157, 99, 0.3), transparent);

}



/* Section Badge */

.section-badge-modern {

    display: inline-block;

    padding: 8px 20px;

    background: linear-gradient(135deg, rgba(185, 157, 99, 0.15) 0%, rgba(185, 157, 99, 0.05) 100%);

    border: 1px solid rgba(185, 157, 99, 0.3);

    border-radius: 50px;

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 2px;

    color: #b99d63;

    margin-bottom: 16px;

}



.section-subtitle-modern {

    color: #666;

    font-size: 1.1rem;

    margin-top: 12px;

    font-weight: 400;

}



/* Timeline Container */

.process-timeline-modern {

    max-width: 600px;

    margin: 50px auto 0;

    position: relative;

}



/* Process Item */

.process-item-modern {

    display: flex;

    gap: 24px;

    position: relative;

    padding-bottom: 40px;

}



.process-item-modern.last-item {

    padding-bottom: 0;

}



/* Connector (Icon + Line) */

.process-item-connector {

    display: flex;

    flex-direction: column;

    align-items: center;

    flex-shrink: 0;

    width: 70px;

}



/* Icon Wrapper */

.process-icon-wrapper {

    position: relative;

    width: 70px;

    height: 70px;

    background: linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 

        0 10px 30px rgba(185, 157, 99, 0.15),

        0 4px 10px rgba(0, 0, 0, 0.05),

        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    border: 2px solid rgba(185, 157, 99, 0.2);

    transition: all 0.4s ease;

}



.process-item-modern:hover .process-icon-wrapper {

    transform: scale(1.05);

    box-shadow: 

        0 15px 40px rgba(185, 157, 99, 0.25),

        0 8px 20px rgba(0, 0, 0, 0.08),

        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    border-color: #b99d63;

}



.process-icon-emoji {

    font-size: 28px;

    line-height: 1;

}



.process-number-badge {

    position: absolute;

    top: -8px;

    right: -8px;

    width: 28px;

    height: 28px;

    background: linear-gradient(135deg, #b99d63 0%, #8b7355 100%);

    border-radius: 50%;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 12px rgba(185, 157, 99, 0.4);

    border: 2px solid #fff;

}



/* Connecting Line */

.process-line {

    width: 3px;

    flex: 1;

    min-height: 40px;

    background: linear-gradient(180deg, #b99d63 0%, rgba(185, 157, 99, 0.2) 100%);

    border-radius: 3px;

    margin-top: 12px;

}



/* Content */

.process-content-modern {

    flex: 1;

    padding: 8px 0;

}



.process-time-badge {

    display: inline-block;

    padding: 4px 12px;

    background: rgba(185, 157, 99, 0.1);

    border-radius: 20px;

    font-size: 0.75rem;

    font-weight: 600;

    color: #b99d63;

    margin-bottom: 10px;

}



.process-title-modern {

    font-size: 1.2rem;

    font-weight: 700;

    color: #1a1a1a;

    margin-bottom: 8px;

    line-height: 1.3;

}



.process-desc-modern {

    font-size: 0.95rem;

    color: #666;

    line-height: 1.6;

    margin: 0;

}



/* CTA Button */

.process-cta-modern {

    text-align: center;

    margin-top: 50px;

}



.btn-modern-primary {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 16px 32px;

    background: linear-gradient(135deg, #b99d63 0%, #8b7355 100%);

    color: #fff;

    font-size: 1rem;

    font-weight: 600;

    border-radius: 50px;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 8px 25px rgba(185, 157, 99, 0.3);

}



.btn-modern-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 35px rgba(185, 157, 99, 0.4);

}



.btn-modern-primary svg {

    transition: transform 0.3s ease;

}



.btn-modern-primary:hover svg {

    transform: translateX(4px);

}



/* Mobile Responsive */

@media (max-width: 768px) {

    .process-section-modern {

        padding: 50px 0;

    }

    

    .process-timeline-modern {

        max-width: 100%;

        margin-top: 40px;

        padding: 0 10px;

    }

    

    .process-item-modern {

        gap: 16px;

        padding-bottom: 32px;

    }

    

    .process-item-connector {

        width: 60px;

    }

    

    .process-icon-wrapper {

        width: 60px;

        height: 60px;

        border-radius: 16px;

    }

    

    .process-icon-emoji {

        font-size: 24px;

    }

    

    .process-number-badge {

        width: 24px;

        height: 24px;

        font-size: 10px;

        top: -6px;

        right: -6px;

    }

    

    .process-title-modern {

        font-size: 1.05rem;

    }

    

    .process-desc-modern {

        font-size: 0.9rem;

    }

    

    .process-cta-modern {

        margin-top: 40px;

    }

    

    .btn-modern-primary {

        width: 100%;

        justify-content: center;

        padding: 14px 24px;

    }

}



@media (max-width: 480px) {

    .process-item-modern {

        gap: 12px;

        padding-bottom: 24px;

    }

    

    .process-item-connector {

        width: 50px;

    }

    

    .process-icon-wrapper {

        width: 50px;

        height: 50px;

        border-radius: 14px;

    }

    

    .process-icon-emoji {

        font-size: 20px;

    }

    

    .process-number-badge {

        width: 22px;

        height: 22px;

        font-size: 9px;

    }

    

    .process-line {

        width: 2px;

        min-height: 30px;

    }

    

    .process-time-badge {

        font-size: 0.7rem;

        padding: 3px 10px;

    }

    

    .process-title-modern {

        font-size: 1rem;

    }

    

    .process-desc-modern {

        font-size: 0.85rem;

    }

    

    .section-badge-modern {

        font-size: 0.7rem;

        padding: 6px 14px;

    }

    

    .section-subtitle-modern {

        font-size: 0.95rem;

    }

}



/* ==========================================================================

   SERVICE TYPES MODERN - With Images

   ========================================================================== */



.service-types-modern {

    padding: 80px 0 !important;

    background: linear-gradient(180deg, #0a0a0a 0%, #141414 100%) !important;

}



.service-types-modern .section-header {

    margin-bottom: 50px !important;

}



.service-types-modern .section-badge {

    display: inline-block !important;

    background: rgba(185, 157, 99, 0.1) !important;

    border: 1px solid rgba(185, 157, 99, 0.3) !important;

    padding: 8px 20px !important;

    border-radius: 30px !important;

    margin-bottom: 20px !important;

}



.service-types-modern .section-badge span {

    color: #b99d63 !important;

    font-size: 0.85rem !important;

    font-weight: 500 !important;

    letter-spacing: 0.05em !important;

}



.service-types-modern .section-title {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 2.5rem !important;

    font-weight: 700 !important;

    color: #ffffff !important;

    margin-bottom: 15px !important;

}



.service-types-modern .section-title .text-gold {

    color: #b99d63 !important;

}



.service-types-modern .section-desc {

    color: #9ca3af !important;

    font-size: 1rem !important;

    max-width: 600px !important;

    margin: 0 auto !important;

}



/* Grid Layout */

.types-grid-modern {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 25px !important;

    max-width: 1200px !important;

    margin: 0 auto !important;

}



/* Card Modern */

.type-card-modern {

    position: relative !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    background: #1a1a1a !important;

    text-decoration: none !important;

    display: block !important;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

    border: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.type-card-modern:hover {

    transform: translateY(-8px) !important;

    border-color: rgba(185, 157, 99, 0.3) !important;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(185, 157, 99, 0.1) !important;

}



/* Card Image */

.type-card-image {

    position: relative !important;

    width: 100% !important;

    height: 200px !important;

    overflow: hidden !important;

}



.type-card-image img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    object-position: center !important;

    transition: transform 0.5s ease !important;

}



.type-card-modern:hover .type-card-image img {

    transform: scale(1.1) !important;

}



.type-card-overlay {

    position: absolute !important;

    inset: 0 !important;

    background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.8) 100%) !important;

    pointer-events: none !important;

}



/* Card Number */

.type-card-number {

    position: absolute !important;

    top: 15px !important;

    right: 15px !important;

    width: 36px !important;

    height: 36px !important;

    background: rgba(185, 157, 99, 0.9) !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 0.75rem !important;

    font-weight: 700 !important;

    color: #ffffff !important;

    z-index: 2 !important;

}



/* Card Content */

.type-card-content {

    padding: 25px !important;

    position: relative !important;

}



.type-card-icon {

    position: absolute !important;

    top: -30px !important;

    left: 25px !important;

    width: 56px !important;

    height: 56px !important;

    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;

    border: 2px solid rgba(185, 157, 99, 0.4) !important;

    border-radius: 14px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 24px !important;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;

}



.type-card-title {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 1.25rem !important;

    font-weight: 700 !important;

    color: #ffffff !important;

    margin: 15px 0 8px 0 !important;

    letter-spacing: 0.02em !important;

}



.type-card-desc {

    color: #9ca3af !important;

    font-size: 0.85rem !important;

    margin-bottom: 15px !important;

    line-height: 1.5 !important;

}



/* Features Tags */

.type-card-features {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 8px !important;

    list-style: none !important;

    padding: 0 !important;

    margin: 0 0 20px 0 !important;

}



.type-card-features li {

    background: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    padding: 5px 12px !important;

    border-radius: 20px !important;

    font-size: 0.72rem !important;

    color: #d1d5db !important;

    transition: all 0.3s ease !important;

}



.type-card-modern:hover .type-card-features li {

    border-color: rgba(185, 157, 99, 0.3) !important;

    background: rgba(185, 157, 99, 0.1) !important;

}



/* CTA Button */

.type-card-cta {

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    color: #b99d63 !important;

    font-size: 0.8rem !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.08em !important;

    opacity: 0 !important;

    transform: translateY(10px) !important;

    transition: all 0.3s ease !important;

}



.type-card-cta svg {

    transition: transform 0.3s ease !important;

}



.type-card-modern:hover .type-card-cta {

    opacity: 1 !important;

    transform: translateY(0) !important;

}



.type-card-modern:hover .type-card-cta svg {

    transform: translateX(4px) !important;

}



/* Responsive */

@media (max-width: 1024px) {

    .types-grid-modern {

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 20px !important;

    }

}



@media (max-width: 768px) {

    .service-types-modern {

        padding: 60px 0 !important;

    }

    

    .service-types-modern .section-title {

        font-size: 2rem !important;

    }

    

    .types-grid-modern {

        grid-template-columns: 1fr !important;

        gap: 20px !important;

        padding: 0 15px !important;

    }

    

    .type-card-image {

        height: 180px !important;

    }

    

    .type-card-content {

        padding: 20px !important;

    }

    

    .type-card-icon {

        width: 48px !important;

        height: 48px !important;

        font-size: 20px !important;

        top: -24px !important;

        left: 20px !important;

    }

    

    .type-card-cta {

        opacity: 1 !important;

        transform: translateY(0) !important;

    }

}



@media (max-width: 480px) {

    .service-types-modern .section-title {

        font-size: 1.75rem !important;

    }

    

    .type-card-image {

        height: 160px !important;

    }

    

    .type-card-features li {

        font-size: 0.68rem !important;

        padding: 4px 10px !important;

    }

}



/* ==========================================================================

   PAIN POINTS SECTION - Modern Premium Design

   ========================================================================== */



.painpoints-section-modern {

    padding: 80px 0 !important;

    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%) !important;

    position: relative !important;

}



.painpoints-wrapper {

    display: grid !important;

    grid-template-columns: 1fr 400px !important;

    gap: 60px !important;

    align-items: center !important;

}



.section-badge-gold {

    display: inline-block !important;

    background: rgba(185, 157, 99, 0.1) !important;

    border: 1px solid rgba(185, 157, 99, 0.3) !important;

    padding: 8px 20px !important;

    border-radius: 30px !important;

    margin-bottom: 20px !important;

}



.section-badge-gold span {

    color: #b99d63 !important;

    font-size: 0.85rem !important;

    font-weight: 500 !important;

    letter-spacing: 0.05em !important;

}



.painpoints-content .section-title-v2 {

    font-family: var(--ath-font-primary) !important;

    font-size: 2.5rem !important;

    color: #1a1a1a !important;

    margin-bottom: 15px !important;

}



.painpoints-content .section-subtitle-v2 {

    color: #6b7280 !important;

    margin-bottom: 30px !important;

}



/* Pain Points List */

.painpoints-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 20px !important;

}



.painpoint-item-modern {

    display: flex !important;

    align-items: flex-start !important;

    gap: 20px !important;

    padding: 20px !important;

    background: #ffffff !important;

    border-radius: 16px !important;

    border: 1px solid rgba(0, 0, 0, 0.05) !important;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;

    transition: all 0.3s ease !important;

    position: relative !important;

}



.painpoint-item-modern:hover {

    transform: translateX(10px) !important;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;

    border-color: var(--accent-color, #ef4444) !important;

}



.painpoint-icon-modern {

    width: 50px !important;

    height: 50px !important;

    min-width: 50px !important;

    background: linear-gradient(135deg, var(--accent-color, #ef4444) 0%, color-mix(in srgb, var(--accent-color, #ef4444), white 20%) 100%) !important;

    border-radius: 12px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 24px !important;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;

    color: #ffffff !important;

}

.painpoint-icon-modern svg {

    width: 26px !important;

    height: 26px !important;

    stroke: #ffffff !important;

    fill: none !important;

    stroke-width: 1.8 !important;

}



.painpoint-text h3 {

    font-family: var(--ath-font-primary) !important;

    font-size: 1.15rem !important;

    font-weight: 700 !important;

    color: #1a1a1a !important;

    margin: 0 0 6px 0 !important;

}



.painpoint-text p {

    font-size: 0.9rem !important;

    color: #6b7280 !important;

    margin: 0 !important;

    line-height: 1.5 !important;

    font-family: var(--ath-font-primary) !important;

}



.painpoint-number {

    position: absolute !important;

    top: 15px !important;

    right: 15px !important;

    font-size: 0.75rem !important;

    font-weight: 700 !important;

    color: #d1d5db !important;

}



/* Solution Visual */

.painpoints-visual {

    display: flex !important;

    flex-direction: column !important;

    gap: 25px !important;

    align-items: center !important;

}



.solution-badge {

    width: 200px !important;

    height: 200px !important;

    border-radius: 50% !important;

    background: linear-gradient(135deg, #b99d63 0%, #d4bc8a 50%, #b99d63 100%) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow: 0 20px 50px rgba(185, 157, 99, 0.4) !important;

    position: relative !important;

    animation: pulse-gold 3s ease-in-out infinite !important;

}



@keyframes pulse-gold {

    0%, 100% { box-shadow: 0 20px 50px rgba(185, 157, 99, 0.4); }

    50% { box-shadow: 0 25px 60px rgba(185, 157, 99, 0.6), 0 0 30px rgba(185, 157, 99, 0.3); }

}



.solution-badge-inner {

    text-align: center !important;

    color: #ffffff !important;

}



.solution-badge-inner .badge-icon {

    display: block !important;

    font-size: 2rem !important;

    margin-bottom: 8px !important;

}



.solution-badge-inner .badge-title {

    display: block !important;

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 1.5rem !important;

    font-weight: 700 !important;

    letter-spacing: 0.1em !important;

}



.solution-badge-inner .badge-text {

    display: block !important;

    font-size: 0.75rem !important;

    opacity: 0.9 !important;

    margin-top: 5px !important;

}



.solution-highlights {

    display: grid !important;

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 12px !important;

    width: 100% !important;

}



.highlight-card {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    padding: 12px 16px !important;

    background: #ffffff !important;

    border-radius: 10px !important;

    border: 1px solid rgba(185, 157, 99, 0.2) !important;

    transition: all 0.3s ease !important;

}



.highlight-card:hover {

    border-color: #b99d63 !important;

    background: rgba(185, 157, 99, 0.05) !important;

}



.highlight-card .highlight-icon {

    width: 24px !important;

    height: 24px !important;

    background: #10b981 !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    color: #ffffff !important;

    font-size: 0.75rem !important;

    font-weight: 700 !important;

}



.highlight-card span:last-child {

    font-size: 0.8rem !important;

    font-weight: 600 !important;

    color: #374151 !important;

}



/* ==========================================================================

   SOLUTIONS SECTION - Modern Premium Design

   ========================================================================== */



.solutions-section-modern {

    padding: 80px 0 !important;

    background: linear-gradient(180deg, #0a0a0a 0%, #141414 100%) !important;

}



.solutions-section-modern .section-header-v2 {

    margin-bottom: 50px !important;

}



.solutions-section-modern .section-badge-gold {

    background: rgba(185, 157, 99, 0.1) !important;

}



.solutions-section-modern .section-title-v2 {

    color: #ffffff !important;

}



.solutions-section-modern .section-subtitle-v2 {

    color: #9ca3af !important;

    max-width: 700px !important;

    margin: 0 auto !important;

}



/* Grid */

.solutions-grid-modern {

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 25px !important;

}



/* Card */

.solution-card-modern {

    position: relative !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    background: #1a1a1a !important;

    text-decoration: none !important;

    display: block !important;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

    border: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.solution-card-modern:hover {

    transform: translateY(-10px) !important;

    border-color: rgba(185, 157, 99, 0.4) !important;

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(185, 157, 99, 0.15) !important;

}



/* Card Image */

.solution-card-image {

    position: relative !important;

    width: 100% !important;

    height: 200px !important;

    overflow: hidden !important;

}



.solution-card-image img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    transition: transform 0.5s ease !important;

}



.solution-card-modern:hover .solution-card-image img {

    transform: scale(1.1) !important;

}



.solution-card-overlay {

    position: absolute !important;

    inset: 0 !important;

    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.9) 100%) !important;

}



.solution-card-icon {

    position: absolute !important;

    top: 15px !important;

    left: 15px !important;

    width: 45px !important;

    height: 45px !important;

    background: rgba(255, 255, 255, 0.95) !important;

    border-radius: 12px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 22px !important;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;

}



.solution-card-stats {

    position: absolute !important;

    bottom: 15px !important;

    left: 15px !important;

    background: rgba(185, 157, 99, 0.95) !important;

    color: #ffffff !important;

    padding: 6px 14px !important;

    border-radius: 20px !important;

    font-size: 0.7rem !important;

    font-weight: 700 !important;

    letter-spacing: 0.03em !important;

}



/* Card Content */

.solution-card-content {

    padding: 25px !important;

}



.solution-card-subtitle {

    display: block !important;

    font-size: 0.7rem !important;

    color: #b99d63 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.15em !important;

    margin-bottom: 8px !important;

}



.solution-card-title {

    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;

    font-size: 1.35rem !important;

    font-weight: 700 !important;

    color: #ffffff !important;

    margin: 0 0 10px 0 !important;

}



.solution-card-desc {

    font-size: 0.85rem !important;

    color: #9ca3af !important;

    line-height: 1.5 !important;

    margin-bottom: 15px !important;

}



/* Bullets */

.solution-card-bullets {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 0 20px 0 !important;

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 8px !important;

}



.solution-card-bullets li {

    background: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    padding: 5px 12px !important;

    border-radius: 20px !important;

    font-size: 0.7rem !important;

    color: #d1d5db !important;

    transition: all 0.3s ease !important;

}



.solution-card-modern:hover .solution-card-bullets li {

    border-color: rgba(185, 157, 99, 0.3) !important;

    background: rgba(185, 157, 99, 0.1) !important;

}



/* CTA */

.solution-card-cta {

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    color: #b99d63 !important;

    font-size: 0.8rem !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.08em !important;

    opacity: 0 !important;

    transform: translateY(10px) !important;

    transition: all 0.3s ease !important;

}



.solution-card-cta svg {

    transition: transform 0.3s ease !important;

}



.solution-card-modern:hover .solution-card-cta {

    opacity: 1 !important;

    transform: translateY(0) !important;

}



.solution-card-modern:hover .solution-card-cta svg {

    transform: translateX(4px) !important;

}



/* Responsive */

@media (max-width: 1200px) {

    .solutions-grid-modern {

        grid-template-columns: repeat(2, 1fr) !important;

    }

}



@media (max-width: 1024px) {

    .painpoints-wrapper {

        grid-template-columns: 1fr !important;

        gap: 40px !important;

    }

    

    .painpoints-visual {

        order: -1 !important;

    }

    

    .solution-badge {

        width: 160px !important;

        height: 160px !important;

    }

}



@media (max-width: 768px) {

    .painpoints-section-modern {

        padding: 60px 0 !important;

    }

    

    .painpoints-content .section-title-v2 {

        font-size: 2rem !important;

    }

    

    .painpoint-item-modern {

        padding: 15px !important;

    }

    

    .painpoint-icon-modern {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;

        font-size: 20px !important;

    }

    

    .solutions-section-modern {

        padding: 60px 0 !important;

    }

    

    .solutions-grid-modern {

        grid-template-columns: 1fr !important;

        gap: 20px !important;

        padding: 0 15px !important;

    }

    

    .solution-card-image {

        height: 180px !important;

    }

    

    .solution-card-cta {

        opacity: 1 !important;

        transform: translateY(0) !important;

    }

}



@media (max-width: 480px) {

    .painpoints-content .section-title-v2 {

        font-size: 1.75rem !important;

    }

    

    .solution-highlights {

        grid-template-columns: 1fr !important;

    }

    

    .solution-badge {

        width: 140px !important;

        height: 140px !important;

    }

    

    .solution-badge-inner .badge-title {

        font-size: 1.25rem !important;

    }

}