/* ============================================
   BOLTZ KLIMAATTECHNIEK - RESPONSIVE STYLES
   Mobile and Tablet Responsive Design
   ============================================ */

/* ===== Tablet Styles (768px - 991px) ===== */
@media (max-width: 991px) {
    /* Header Responsive */
    .floating-header {
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .floating-header .container {
        padding-left: 0;
        padding-right: 0;
    }

    .floating-header .navbar {
        padding: 15px 20px;
        border-radius: 15px;
    }

    .header-logo {
        height: 60px;
    }

    /* Break menu out of navbar container */
    .navbar {
        position: relative;
        overflow: visible;
    }

    .nav-menu {
        display: flex !important; /* Override display: none from style.css */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        min-width: 100vw !important;
        min-height: 100vh !important;
        background: rgba(10, 14, 39, 0.98) !important;
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 100px 30px 30px;
        border-radius: 0;
        border: none;
        margin: 0 !important;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9999 !important; /* Higher than header (1000) */
        overflow-y: auto;
        overflow-x: hidden;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        box-sizing: border-box;
    }

    .nav-menu.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        display: flex !important;
    }

    .nav-menu .nav-item {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 0;
        font-size: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: block;
        box-sizing: border-box;
    }

    .nav-menu .nav-item a {
        width: 100%;
        display: block;
    }

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

    .nav-menu .nav-item::after {
        display: none;
    }

    .nav-menu .nav-item:hover {
        color: var(--accent);
        padding-left: 10px;
    }

    .header-actions {
        gap: 12px;
    }

    .btn-cta {
        padding: 10px 20px;
        font-size: 13px;
        display: none; /* Hide CTA button on tablet, show only icons */
    }

    .header-icons {
        gap: 10px;
    }

    .header-icons .woo-menu-icon .wcmenucart,
    .header-icons .header-icons-item .icon-btn,
    .header-icons .woo-menu-icon .icon-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        z-index: 10000 !important; /* Higher than menu to stay clickable */
        position: relative;
        cursor: pointer;
        background: transparent !important;
        border: none !important;
        padding: 8px 5px !important;
        width: 35px;
        height: 35px;
        min-width: 35px;
        min-height: 35px;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;
    }

    .menu-toggle:hover {
        opacity: 0.8;
    }

    .menu-toggle:focus {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 4px;
    }

    .menu-toggle span {
        display: block !important;
        width: 25px;
        height: 2px;
        background: var(--text-primary) !important;
        transition: all 0.3s ease !important;
        transform-origin: center;
        position: relative;
    }

    /* Hamburger to X animation */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(0, 10px) !important;
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(0, -10px) !important;
    }

    /* Close menu overlay - removed as menu itself is the overlay */

    /* Prevent body scroll when menu is open - only when menu is actually open */
    body.menu-open {
        overflow: hidden !important;
    }

    html.menu-open {
        overflow: hidden !important;
    }

    /* Ensure normal scrolling when menu is closed */
    body:not(.menu-open) {
        overflow: auto !important;
        position: static !important;
        height: auto !important;
    }

    html:not(.menu-open) {
        overflow: auto !important;
    }

    /* Ensure header stays below menu when open */
    body.menu-open .floating-header {
        z-index: 1000 !important;
    }

    /* Prevent any other elements from overlapping menu */
    body.menu-open #outer-wrap,
    body.menu-open #wrap,
    body.menu-open #main,
    body.menu-open .site-main,
    body.menu-open .container,
    body.menu-open section,
    body.menu-open .fullscreen-hero {
        position: relative;
        z-index: 1 !important;
    }

    /* Ensure menu container doesn't constrain width */
    .floating-header .container {
        position: relative;
    }

    .nav-menu {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Hero Section */
    .fullscreen-hero {
        padding-top: 120px;
        padding-bottom: 80px;
    }

    .hero-content {
        padding-top: 30px;
    }

    .hero-title {
        font-size: 48px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-buttons {
        gap: 15px;
    }

    .btn-primary-large,
    .btn-secondary-large {
        position: relative !important;
        width: 100%;
        max-width: 400px;
        justify-content: center;
    }

    /* Intro Section */
    .intro-content-col {
        padding: 60px 40px;
    }

    .intro-feature-card {
        position: relative !important;
    }

    .intro-feature-image {
        position: relative !important;
        height: 250px;
    }

    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .service-item-large {
        grid-column: span 1;
        grid-row: span 1;
    }

    .service-item-large h3 {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .service-item-large .service-content {
        padding: 35px 25px;
    }

    /* Parallax Break Tablet */
    .parallax-break {
        height: 400px;
    }

    .parallax-image {
        background-attachment: scroll !important; /* Fixed attachment doesn't work well on mobile */
        height: 100% !important;
        background-position: center center !important;
    }

    /* Cart Dropdown Tablet */
    .header-icons .woo-menu-icon .current-shop-items-dropdown {
        min-width: 350px !important;
        max-width: 90vw !important;
        right: 0 !important;
        left: auto !important;
        position: absolute !important;
        top: 100% !important;
        margin-top: 10px !important;
        z-index: 10001 !important;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .footer-cta {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 40px 30px;
    }
}

/* ===== Mobile Styles (max-width: 767px) ===== */
@media (max-width: 767px) {
    /* Header Mobile */
    .floating-header {
        top: 0;
        left: 0;
        right: 0;
        padding: 0;
    }

    .floating-header.scrolled {
        top: 0;
    }

    .floating-header .container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .floating-header .navbar {
        padding: 12px 15px;
        border-radius: 0;
        margin: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px solid rgba(87, 179, 9, 0.2);
    }

    .header-logo {
        height: 32px;
    }

    .navbar {
        position: relative;
        overflow: visible;
    }

    .nav-menu {
        display: flex !important; /* Override display: none from style.css */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        min-width: 100vw !important;
        min-height: 100vh !important;
        padding: 80px 20px 30px;
        z-index: 9999 !important;
        margin: 0 !important;
    }

    .nav-menu.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        display: flex !important;
    }

    .nav-menu .nav-item {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 0;
        font-size: 16px;
        box-sizing: border-box;
    }

    .nav-menu .nav-item a {
        width: 100%;
        display: block;
    }

    .header-actions {
        gap: 8px;
    }

    .floating-header .btn-cta {
        display: none; /* Hide CTA button on mobile */
    }

    .header-icons {
        gap: 8px;
    }

    .header-icons .woo-menu-icon .wcmenucart,
    .header-icons .header-icons-item .icon-btn,
    .header-icons .woo-menu-icon .icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .header-icons .woo-menu-icon .wcmenucart .wcmenucart-count svg,
    .header-icons .woo-menu-icon .wcmenucart .wcmenucart-count i,
    .header-icons .woo-menu-icon .wcmenucart .wcmenucart-count .owp-icon {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }

    .menu-toggle {
        padding: 6px 4px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .menu-toggle span {
        width: 22px !important;
        height: 2px !important;
        display: block !important;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(0, 10px) !important;
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(0, -10px) !important;
    }

    /* Search and Cart Dropdowns Mobile */
    .header-icons .search-toggle-li #searchform-dropdown,
    .header-icons .woo-menu-icon .current-shop-items-dropdown {
        position: fixed !important;
        top: 70px !important; /* Position below header */
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        min-width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
        margin-top: 0 !important;
        z-index: 10001 !important; /* Higher than menu */
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
    }

    .header-icons .woo-menu-icon:hover .current-shop-items-dropdown,
    .header-icons .woo-menu-icon.toggle-cart-widget.active .current-shop-items-dropdown {
        transform: translateX(-50%) translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Ensure cart dropdown appears above mobile menu */
    body.menu-open .header-icons .woo-menu-icon .current-shop-items-dropdown {
        z-index: 10002 !important;
    }

    /* Hero Section Mobile */
    .fullscreen-hero {
        padding-top: 100px;
        padding-bottom: 60px;
        min-height: auto;
    }

    .hero-content {
        padding-top: 20px;
    }

    .hero-title {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .hero-subtitle {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 30px;
    }

    .hero-buttons {
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .btn-primary-large {
        position: relative !important;
        padding: 16px 30px;
        font-size: 16px;
        width: 100%;
    }

    .btn-secondary-large {
        padding: 14px 25px;
        font-size: 15px;
        width: 100%;
    }

    .hero-stats {
        gap: 25px;
        margin-top: 40px;
        margin-bottom: 30px;
    }

    .stat-number {
        font-size: 36px;
    }

    .stat-label {
        font-size: 12px;
    }

    /* Intro Section Mobile */
    .intro-asymmetric {
        padding: 60px 0;
    }

    .intro-image-wrapper {
        min-height: 350px;
    }

    .intro-main-image {
        border-radius: 0;
    }

    .intro-content-col {
        padding: 40px 20px;
    }

    .intro-feature-image {
        position: relative !important;
        height: 220px;
    }

    .intro-feature-content {
        padding: 25px 20px;
    }

    .intro-feature-content h4 {
        font-size: 20px;
    }

    .feature-icon-overlay {
        width: 45px;
        height: 45px;
        font-size: 18px;
        top: 15px;
        right: 15px;
    }

    .floating-badge {
        top: 20px;
        right: 20px;
        padding: 10px 15px;
        font-size: 11px;
    }

    /* Services Mobile */
    .services-diagonal,
    .process-vertical,
    .projects-masonry,
    .faq-tabs {
        padding: 60px 0;
    }

    /* Parallax Break Mobile */
    .parallax-break {
        height: 300px;
        min-height: 300px;
    }

    .parallax-image {
        background-attachment: scroll !important; /* Fixed attachment doesn't work on mobile */
        height: 100% !important;
        background-position: center center !important;
        background-size: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    .section-title {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .section-description {
        font-size: 16px;
    }

    .service-item {
        padding: 30px 20px;
    }

    .service-icon-box {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .service-item h4 {
        font-size: 20px;
    }

    /* Service Item Large Mobile */
    .service-item-large h3 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .service-item-large .service-content {
        padding: 30px 20px;
    }

    /* Timeline Mobile */
    .timeline-vertical {
        position: relative !important;
        padding-left: 40px;
    }

    .timeline-marker {
        left: -35px;
        width: 30px;
        height: 30px;
    }

    .timeline-content {
        padding: 30px 20px;
    }

    .timeline-content h3 {
        font-size: 24px;
    }

    /* Masonry Grid Mobile */
    .masonry-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .project-card {
        border-radius: 20px;
    }

    .project-info {
        padding: 20px;
    }

    .project-info h3 {
        font-size: 20px;
    }

    /* Footer Mobile */
    .minimal-footer {
        padding: 60px 0 30px;
    }

    .footer-links {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-cta {
        padding: 30px 20px;
    }

    .cta-content h3 {
        font-size: 24px;
    }

    .btn-cta-footer {
        width: 100%;
        padding: 14px 30px;
    }

    .social-links {
        gap: 12px;
    }

    .social-links a {
        width: 42px;
        height: 42px;
    }

    /* Page Header Mobile */
    .page-header {
        padding: 120px 0 30px;
    }

    .page-header .page-header-title {
        font-size: 32px;
    }
}

/* ===== Small Mobile Styles (max-width: 575px) ===== */
@media (max-width: 575px) {
    .floating-header .navbar {
        padding: 10px 12px;
    }

    .header-logo {
        height: 48px;
    }

    .header-icons .woo-menu-icon .wcmenucart,
    .header-icons .header-icons-item .icon-btn,
    .header-icons .woo-menu-icon .icon-btn {
        width: 36px;
        height: 36px;
    }

    .hero-title {
        font-size: 28px;
    }

    .section-title {
        font-size: 28px;
    }

    .btn-primary-large {
        padding: 14px 25px;
        font-size: 15px;
    }

    .stat-number {
        font-size: 32px;
    }

    .intro-feature-content h4 {
        font-size: 18px;
    }

    .service-item h4 {
        font-size: 18px;
    }

    .service-item-large h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .service-item-large .service-content {
        padding: 25px 15px;
    }

    .timeline-content h3 {
        font-size: 22px;
    }

    .cta-content h3 {
        font-size: 22px;
    }

    /* Parallax Break Small Mobile */
    .parallax-break {
        height: 250px;
        min-height: 250px;
    }

    .parallax-image {
        background-attachment: scroll !important;
        height: 100% !important;
        background-position: center center !important;
        background-size: cover !important;
    }
}

/* ===== Landscape Mobile (max-width: 767px) and (orientation: landscape) ===== */
@media (max-width: 767px) and (orientation: landscape) {
    .fullscreen-hero {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 50px;
    }

    .hero-title {
        font-size: 32px;
    }

    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        padding: 60px 20px 20px;
        z-index: 9999 !important;
    }
}

/* ===== Large Tablet (992px - 1199px) ===== */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Reset mobile menu styles - ensure normal display */
    .nav-menu {
        display: flex !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 0 !important;
        min-height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        flex-direction: row !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        z-index: auto !important;
        overflow: visible !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        flex: 0 1 auto !important;
        flex-wrap: nowrap !important;
    }

    .nav-menu .nav-item {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        font-size: 13px !important;
        border-bottom: none !important;
        display: inline-block !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .nav-menu .nav-item::after {
        display: block !important;
    }

    .nav-menu .nav-item:hover {
        padding-left: 0 !important;
    }

    .menu-toggle {
        display: none !important;
    }

    .floating-header .navbar {
        padding: 18px 25px;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 15px;
    }

    .navbar-brand {
        flex-shrink: 0 !important;
        min-width: 0;
        margin-right: 0 !important;
    }

    .header-logo {
        height: 42px;
        max-width: 100%;
    }

    .nav-menu {
        flex: 0 1 auto !important;
        min-width: 0;
        overflow: hidden;
    }

    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
        min-width: 0;
    }

    .header-icons {
        display: flex !important;
        align-items: center !important;
        gap: 10px;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
    }

    .header-icons li,
    .header-icons .header-icons-item,
    .header-icons .woo-menu-icon {
        flex-shrink: 0 !important;
    }

    .btn-cta {
        padding: 11px 24px;
        font-size: 13px;
        display: none !important; /* Hide CTA button on mobile/tablet, show only on 1200px+ */
    }

    .hero-title {
        font-size: 56px;
    }

    .section-title {
        font-size: 40px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-item-large {
        grid-column: span 2;
    }
}

/* ===== Extra Large Screens (min-width: 1400px) ===== */
@media (min-width: 1400px) {
    .floating-header {
        left: 20px;
        right: 20px;
    }

    .floating-header .navbar {
        padding: 22px 35px;
    }
}

/* ===== 4K and Large Screens (min-width: 1921px) ===== */
@media (min-width: 1921px) {
    /* Make navbar full width on 4K monitors */
    .floating-header {
        left: 0 !important;
        right: 0 !important;
    }
    
    .floating-header.scrolled {
        top: 0;
    }
    
    .floating-header .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
    
    .header-logo{
        height: 100px;
    }
    .nav-item{
        font-size: 22px;
    }
    .btn-cta{
        font-size: 20px;
    }
    .header-icons .header-icons-item .icon-btn, .header-icons .woo-menu-icon .icon-btn, .header-icons .header-icons-item a.icon-btn, .header-icons .woo-menu-icon a.icon-btn, 
    .header-actions .header-icons .wcmenucart, .header-actions .header-icons .site-search-toggle{
        font-size: 22px;
        width: 58px;
        height: 58px;
    }
    /* Increase container max-width for content areas */
    .container {
        max-width: 1800px;
    }
    
    /* Ensure content containers also expand */
}

/* ===== Large Monitors (min-width: 2400px) ===== */
@media (min-width: 2400px) {
    /* Header Logo - Medium size for large displays */
    .header-logo {
        height: 80px !important;
        width: auto;
    }
    
    /* Navbar - Enhanced padding */
    .floating-header .navbar {
        padding: 25px 40px !important;
        border-radius: 22px;
    }
    
    /* Navigation Menu - Medium font sizes */
    .nav-menu {
        gap: 20px !important;
    }
    
    .nav-item {
        font-size: 24px !important;
        padding: 10px 18px !important;
    }
    
    .nav-item a {
        font-size: 24px !important;
        letter-spacing: 0.4px;
    }
    
    /* Header Actions - Medium icons and buttons */
    .header-actions {
        gap: 18px !important;
    }
    
    .header-icons .header-icons-item .icon-btn,
    .header-icons .woo-menu-icon .icon-btn,
    .header-icons .header-icons-item a.icon-btn,
    .header-icons .woo-menu-icon a.icon-btn,
    .header-actions .header-icons .wcmenucart,
    .header-actions .header-icons .site-search-toggle {
        font-size: 24px !important;
        width: 62px !important;
        height: 62px !important;
    }
    
    /* CTA Button - Medium size */
    .btn-cta {
        font-size: 20px !important;
        padding: 14px 35px !important;
    }
    
    /* Container - Wider padding */
    .floating-header .container {
        padding-left: 70px !important;
        padding-right: 70px !important;
    }
}

/* ===== Extra Large Monitors (min-width: 3200px) ===== */
@media (min-width: 3200px) {
    /* Header Logo - Large size for extra large displays */
    .header-logo {
        height: 100px !important;
        width: auto;
    }
    
    /* Navbar - Enhanced padding and sizing */
    .floating-header .navbar {
        padding: 28px 45px !important;
        border-radius: 24px;
    }
    
    /* Navigation Menu - Large font sizes and spacing */
    .nav-menu {
        gap: 22px !important;
    }
    
    .nav-item {
        font-size: 28px !important;
        padding: 11px 19px !important;
    }
    
    .nav-item a {
        font-size: 28px !important;
        letter-spacing: 0.45px;
    }
    
    /* Header Actions - Large icons and buttons */
    .header-actions {
        gap: 19px !important;
    }
    
    .header-icons .header-icons-item .icon-btn,
    .header-icons .woo-menu-icon .icon-btn,
    .header-icons .header-icons-item a.icon-btn,
    .header-icons .woo-menu-icon a.icon-btn,
    .header-actions .header-icons .wcmenucart,
    .header-actions .header-icons .site-search-toggle {
        font-size: 26px !important;
        width: 66px !important;
        height: 66px !important;
    }
    
    /* CTA Button - Large size */
    .btn-cta {
        font-size: 21px !important;
        padding: 15px 38px !important;
    }
    
    /* Container - Wider for extra large displays */
    .floating-header .container {
        padding-left: 75px !important;
        padding-right: 75px !important;
    }
}

/* ===== True 4K Monitors (min-width: 3840px) ===== */
@media (min-width: 3840px) {
    /* Header Logo - Larger size for 4K displays */
    .header-logo {
        height: 120px !important;
        width: auto;
    }
    
    /* Navbar - Enhanced padding and sizing */
    .floating-header .navbar {
        padding: 30px 50px !important;
        border-radius: 25px;
    }
    
    /* Navigation Menu - Larger font sizes and spacing */
    .nav-menu {
        gap: 25px !important;
    }
    
    .nav-item {
        font-size: 32px !important;
        padding: 12px 20px !important;
    }
    
    .nav-item a {
        font-size: 26px !important;
        letter-spacing: 0.5px;
    }
    
    /* Header Actions - Larger icons and buttons */
    .header-actions {
        gap: 20px !important;
    }
    
    .header-icons .header-icons-item .icon-btn,
    .header-icons .woo-menu-icon .icon-btn,
    .header-icons .header-icons-item a.icon-btn,
    .header-icons .woo-menu-icon a.icon-btn,
    .header-actions .header-icons .wcmenucart,
    .header-actions .header-icons .site-search-toggle {
        font-size: 28px !important;
        width: 70px !important;
        height: 70px !important;
    }
    
    /* CTA Button - Larger size */
    .btn-cta {
        font-size: 22px !important;
        padding: 16px 40px !important;
    }
    
    /* Container - Wider for 4K displays */
    .floating-header .container {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
}

/* ===== Product CTA Section Responsive ===== */
@media (max-width: 1199px) {
    .product-cta-section {
        position: relative !important;
        padding: 70px 50px !important;
        margin: 80px 0 !important;
        border-radius: 25px !important;
    }

    .product-cta-section::before {
        top: -40% !important;
        right: -40% !important;
        width: 180% !important;
        height: 180% !important;
    }

    .product-cta-content {
        position: relative !important;
        z-index: 2 !important;
    }

    .product-cta-content h3 {
        font-size: 36px !important;
        margin-bottom: 18px !important;
        line-height: 1.2 !important;
    }

    .product-cta-content p {
        font-size: 17px !important;
        margin-bottom: 35px !important;
        line-height: 1.6 !important;
    }

    .btn-product-cta {
        padding: 18px 40px !important;
        font-size: 17px !important;
    }
}

@media (max-width: 991px) {
    .product-cta-section {
        position: relative !important;
        padding: 60px 40px !important;
        margin: 70px 0 !important;
        border-radius: 25px !important;
    }

    .product-cta-section::before {
        top: -30% !important;
        right: -30% !important;
        width: 160% !important;
        height: 160% !important;
    }

    .product-cta-content h3 {
        font-size: 32px !important;
        margin-bottom: 15px !important;
    }

    .product-cta-content p {
        font-size: 16px !important;
        margin-bottom: 30px !important;
    }

    .btn-product-cta {
        padding: 16px 35px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 767px) {
    .product-cta-section {
        position: relative !important;
        padding: 50px 30px !important;
        margin: 60px 0 !important;
        border-radius: 20px !important;
        text-align: center !important;
    }

    .product-cta-section::before {
        top: -20% !important;
        right: -20% !important;
        width: 140% !important;
        height: 140% !important;
    }

    .product-cta-content {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
    }

    .product-cta-content h3 {
        font-size: 28px !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }

    .product-cta-content p {
        font-size: 15px !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
    }

    .btn-product-cta {
        padding: 14px 30px !important;
        font-size: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        display: inline-flex !important;
    }

    .btn-product-cta i {
        font-size: 14px !important;
    }
}

@media (max-width: 575px) {
    .product-cta-section {
        position: relative !important;
        padding: 40px 20px !important;
        margin: 50px 0 !important;
        border-radius: 15px !important;
    }

    .product-cta-section::before {
        top: -15% !important;
        right: -15% !important;
        width: 130% !important;
        height: 130% !important;
    }

    .product-cta-content h3 {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }

    .product-cta-content p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    .btn-product-cta {
        padding: 12px 25px !important;
        font-size: 14px !important;
        width: 100% !important;
    }

    .btn-product-cta i {
        font-size: 13px !important;
    }
}

/* ===== Button AR Responsive ===== */
@media (max-width: 1199px) {
    .btn-ar {
        position: relative !important;
        padding: 20px 45px !important;
        font-size: 18px !important;
        gap: 12px !important;
    }

    .btn-ar i {
        font-size: 20px !important;
    }
}

@media (max-width: 991px) {
    .btn-ar {
        position: relative !important;
        padding: 18px 40px !important;
        font-size: 17px !important;
        gap: 10px !important;
    }

    .btn-ar i {
        font-size: 18px !important;
    }
}

@media (max-width: 767px) {
    .btn-ar {
        position: relative !important;
        padding: 16px 35px !important;
        font-size: 16px !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        display: inline-flex !important;
    }

    .btn-ar i {
        font-size: 16px !important;
    }
}

@media (max-width: 575px) {
    .btn-ar {
        position: relative !important;
        padding: 14px 30px !important;
        font-size: 15px !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .btn-ar i {
        font-size: 15px !important;
    }
}

/* ===== CTA Section Responsive (Services Page) ===== */
@media (max-width: 1199px) {
    .cta-section {
        position: relative !important;
        padding: 70px 50px !important;
        margin: 80px 0 !important;
        border-radius: 25px !important;
    }

    .cta-section::before {
        top: -40% !important;
        right: -40% !important;
        width: 180% !important;
        height: 180% !important;
    }

    .cta-content {
        position: relative !important;
        z-index: 2 !important;
    }

    .cta-content h2 {
        font-size: 36px !important;
        margin-bottom: 18px !important;
    }

    .cta-content p {
        font-size: 17px !important;
        margin-bottom: 35px !important;
    }
}

@media (max-width: 991px) {
    .cta-section {
        position: relative !important;
        padding: 60px 40px !important;
        margin: 70px 0 !important;
        border-radius: 25px !important;
    }

    .cta-section::before {
        top: -30% !important;
        right: -30% !important;
        width: 160% !important;
        height: 160% !important;
    }

    .cta-content h2 {
        font-size: 32px !important;
        margin-bottom: 15px !important;
    }

    .cta-content p {
        font-size: 16px !important;
        margin-bottom: 30px !important;
    }
}

@media (max-width: 767px) {
    .cta-section {
        position: relative !important;
        padding: 50px 30px !important;
        margin: 60px 0 !important;
        border-radius: 20px !important;
        text-align: center !important;
    }

    .cta-section::before {
        top: -20% !important;
        right: -20% !important;
        width: 140% !important;
        height: 140% !important;
    }

    .cta-content {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
    }

    .cta-content h2 {
        font-size: 28px !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }

    .cta-content p {
        font-size: 15px !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
    }

    .cta-content .btn-cta,
    .cta-content .btn-primary-large,
    .cta-content .btn-secondary-large {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 575px) {
    .cta-section {
        position: relative !important;
        padding: 40px 20px !important;
        margin: 50px 0 !important;
        border-radius: 15px !important;
    }

    .cta-section::before {
        top: -15% !important;
        right: -15% !important;
        width: 130% !important;
        height: 130% !important;
    }

    .cta-content h2 {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }

    .cta-content p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
}

/* ===== Contact Page Responsive ===== */
@media (max-width: 1199px) {
    .contact-hero h1 {
        font-size: 48px;
    }

    .contact-wrapper {
        gap: 50px;
    }

    .contact-form-wrapper {
        padding: 45px 40px;
    }

    .contact-form-header h2 {
        font-size: 32px;
    }
}

@media (max-width: 991px) {
    .contact-hero {
        padding: 120px 0 80px;
    }

    .contact-hero h1 {
        font-size: 42px;
    }

    .contact-hero p {
        font-size: 16px;
    }

    .contact-section {
        padding: 80px 0;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-info {
        position: static;
    }

    .contact-info-card {
        padding: 35px 30px;
    }

    .contact-form-wrapper {
        padding: 40px 35px;
        border-radius: 25px;
    }

    .contact-form-header h2 {
        font-size: 28px;
    }

    .contact-map-wrapper iframe {
        height: 400px;
    }
}

@media (max-width: 767px) {
    .contact-hero {
        padding: 100px 0 60px;
    }

    .contact-hero h1 {
        font-size: 36px;
        margin-bottom: 15px;
    }

    .contact-hero p {
        font-size: 15px;
    }

    .contact-section {
        padding: 60px 0;
    }

    .contact-wrapper {
        gap: 40px;
    }

    .contact-info-card {
        padding: 30px 25px;
        border-radius: 20px;
    }

    .contact-info-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: 15px;
    }

    .contact-info-card h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .contact-info-card p,
    .contact-info-card a {
        font-size: 15px;
    }

    .contact-form-wrapper {
        padding: 35px 25px;
        border-radius: 20px;
    }

    .contact-form-header {
        margin-bottom: 30px;
    }

    .contact-form-header h2 {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .contact-form-header p {
        font-size: 15px;
    }

    .contact-form-wrapper .ff-el-form-control {
        padding: 14px 18px !important;
        font-size: 15px !important;
    }

    .contact-form-wrapper .ff-btn-submit {
        padding: 16px 35px !important;
        font-size: 16px !important;
        width: 100% !important;
    }

    .contact-map-section {
        padding: 60px 0;
    }

    .contact-map-wrapper {
        border-radius: 20px;
    }

    .contact-map-wrapper iframe {
        height: 350px;
    }
}

@media (max-width: 575px) {
    .contact-hero h1 {
        font-size: 28px;
    }

    .contact-hero p {
        font-size: 14px;
    }

    .contact-section {
        padding: 50px 0;
    }

    .contact-info-card {
        padding: 25px 20px;
        border-radius: 15px;
    }

    .contact-info-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .contact-info-card h3 {
        font-size: 18px;
    }

    .contact-info-card p,
    .contact-info-card a {
        font-size: 14px;
    }

    .contact-form-wrapper {
        padding: 30px 20px;
        border-radius: 15px;
    }

    .contact-form-header h2 {
        font-size: 24px;
    }

    .contact-form-header p {
        font-size: 14px;
    }

    .contact-form-wrapper .ff-el-form-control {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .contact-form-wrapper textarea.ff-el-form-control {
        min-height: 120px !important;
    }

    .contact-form-wrapper .ff-btn-submit {
        padding: 14px 30px !important;
        font-size: 15px !important;
    }

    .contact-map-wrapper iframe {
        height: 300px;
    }
}

/* ===== Print Styles ===== */
@media print {
    .floating-header,
    .menu-toggle,
    .header-actions,
    .back-to-top {
        display: none !important;
    }
}

/* ===== Accessibility: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .floating-header,
    .nav-menu,
    .menu-toggle span,
    .btn-cta,
    .btn-primary-large,
    .btn-secondary-large {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
    .floating-header .navbar {
        border: 2px solid var(--text-primary);
    }

    .nav-menu .nav-item {
        border-bottom: 2px solid var(--text-primary);
    }
}