/* ================================================
   MALER BERLIN - Responsive Styles
   ================================================ */

/* ================================================
   BREAKPOINT REFERENCE
   --mobile-sm: 480px and below
   --mobile-lg: 768px and below
   --tablet: 1024px and below (mobile nav triggers here)
   --desktop: 1280px and above
   --desktop-lg: 1536px and above
   ================================================ */

/* ================================================
   HERO FULLSCREEN RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
  .d-none-lg {
    display: block;
  }

  .hero-fullscreen {
    min-height: 100vh;
    padding-top: 80px;
  }

  .logo-img {
    height: 40px;
    max-width: 150px;
  }

  .footer-logo-img {
    height: 50px;
    max-width: 180px;
  }

  .districts-showcase {
    padding-top: 3rem;
    margin-top: 0;
  }
}

/* ================================================
   DESKTOP LARGE (1536px+)
   ================================================ */
@media (min-width: 1536px) {
  :root {
    --container-width: min(90%, 1350px);
  }

  .services-grid-3 {
    gap: var(--space-2xl);
  }

  .service-card {
    padding: var(--space-2xl);
  }
}

/* ================================================
   DESKTOP (1280px - 1535px)
   ================================================ */
@media (max-width: 1535px) {
  .benefits-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .benefit-card:nth-child(4),
  .benefit-card:nth-child(5) {
    grid-column: span 1;
  }
}

/* ================================================
   DESKTOP SMALL (1280px - 1535px)
   ================================================ */
@media (max-width: 1279px) {
  :root {
    --section-padding: clamp(3rem, 8vw, 6rem);
  }

  /* Services Grid */
  .services-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Benefits */
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefit-card:last-child {
    grid-column: span 2;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }
}

/* ================================================
   TABLET & MOBILE (1024px and below)
   ================================================ */
@media (max-width: 767px) {
  .nav-mobile-header {
    padding: var(--space-md) var(--space-sm) !important;
  }
}

@media (max-width: 1024px) {
  /* Prevent horizontal overflow on mobile */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
  }

  /* Ensure main content doesn't overflow */
  main,
  .navbar {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Header needs overflow:visible to allow fixed nav-menu to work properly */
  #site-nav {
    max-width: 100%;
    overflow: visible;
  }

  /* Fix AOS animations that might cause overflow */
  [data-aos] {
    overflow: hidden;
  }

  /* Ensure forms, tables, and other elements don't overflow */
  form,
  table,
  pre,
  code,
  iframe {
    max-width: 100%;
    overflow-x: auto;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Contain sections that have decorative overflow elements */
  .section,
  .hero,
  .stats-showcase,
  .cta-banner-modern,
  .testimonials-premium,
  .districts-modern,
  footer {
    overflow-x: hidden;
    overflow-x: clip; /* Better containment for positioned elements */
  }

  /* Hide decorative shapes that cause overflow on mobile */
  .stats-shape,
  .cta-geometric,
  .floating-shape,
  .cta-brush-stroke,
  .testimonials-gradient-orb,
  .stats-bg-shapes,
  .cta-bg-elements {
    display: none;
  }

  /* Navigation - Mobile Full Screen Menu */
  .nav-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    min-height: -webkit-fill-available; /* iOS Safari fallback */
    background: var(--white);
    flex-direction: column;
    z-index: var(--z-modal);
    overflow-y: auto;
    overflow-x: hidden;
    /* Ensure visibility regardless of parent backdrop-filter */
    visibility: hidden;
    opacity: 0;
    transform: none;
    will-change: visibility, opacity;
  }

  .nav-menu.active {
    display: flex;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999;
  }

  /* Ensure all nav-menu children are visible when active */
  .nav-menu.active > * {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Mobile Header - Logo & Close */
  .nav-mobile-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--container-width);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--gray-100);
    flex-shrink: 0;
    background: var(--white);
    position: relative;
    z-index: 1;
  }

  .nav-mobile-logo {
    display: flex;
    align-items: center;
  }

  .nav-mobile-logo .logo-img {
    height: 40px;
    width: auto;
  }

  .techniques-section-deco-img {
    position: absolute;
    top: 1rem;
    right: 0;
    height: 90px;
    width: auto;
  }

  .page-banner-deco-img,
  .video-showcase-modern .video-deco-img {
    height: 120px;
  }

  .maler-v1-process-step {
    padding-top: 5px;
  }

  /* Nav Items - Center */
  .nav-items {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--container-width);
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-lg) 0;
    overflow-y: auto;
    background: var(--white);
    position: relative;
    z-index: 1;
  }

  .nav-item {
    border-bottom: 1px solid var(--gray-100);
  }

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

  .nav-link,
  #site-nav.header-transparent .nav-link,
  #site-nav.header-transparent.scrolled .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-xl);
    color: var(--gray-700) !important;
    font-size: var(--text-base);
    font-weight: 600;
  }

  .nav-link::after {
    left: 2rem;
    width: 10%;
  }

  .nav-link:hover,
  .nav-link.active,
  #site-nav.header-transparent .nav-link:hover,
  #site-nav.header-transparent .nav-link.active {
    color: var(--primary) !important;
    /* background: var(--gray-50); */
  }

  /* Mobile Footer - Call & Address */
  .nav-mobile-footer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  .nav-mobile-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: var(--gradient-primary);
    color: var(--white);
    font-size: var(--text-lg);
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
  }

  .nav-mobile-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(27, 96, 151, 0.3);
  }

  .nav-mobile-call i {
    font-size: var(--text-base);
  }

  .nav-mobile-address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--gray-600);
    font-size: var(--text-sm);
  }

  .nav-mobile-address i {
    color: var(--primary);
  }

  /* Mega Menu - Mobile Handling */
  .mega-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    width: 90%;
    margin: 0 auto;
    padding: var(--space-lg);
    display: none;
    box-shadow: none;
    border-radius: 24px;
    background: var(--gray-50);
  }

  .nav-item.has-mega-menu.active .mega-menu {
    display: block;
    margin-bottom: 2rem;
    transform: translateX(0) translateY(8px);
  }

  .mega-menu-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .mega-menu-col {
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: var(--space-md);
  }

  .mega-menu-col:nth-last-child(2) {
    border-bottom: none;
    padding-bottom: 0;
  }

  .mega-menu-featured {
    display: none;
  }

  .mega-menu-title {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-bottom: var(--space-sm);
    padding-bottom: 0;
    border-bottom: none;
  }

  .mega-menu-links {
    gap: var(--space-xs);
  }

  .mega-menu-links li a {
    padding: var(--space-sm) 0;
    font-size: var(--text-sm);
  }

  .nav-toggle {
    display: block;
    z-index: 999;
  }

  .nav-toggle.active .hamburger {
    background: transparent !important;
  }

  .nav-cta {
    display: none;
  }

  /* Services Overview */
  .services-overview {
    margin-top: -60px;
  }

  .services-grid-3 {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about-visual {
    order: -1;
  }

  .about-image-secondary {
    display: none;
  }

  .experience-badge {
    right: var(--space-md);
    top: var(--space-md);
  }

  /* Mosaic Gallery in About Grid */
  .about-grid .mosaic-gallery {
    height: 420px;
    order: -1;
  }

  /* Process */
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }

  .timeline-line {
    display: none;
  }

  .step-number {
    font-size: var(--text-4xl);
  }

  /* Detailed Services */
  .detailed-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .detailed-visual {
    order: -1;
  }

  /* Quality */
  .quality-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* Benefits */
  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .benefit-card:last-child {
    grid-column: span 1;
  }

  /* Testimonials */
  .trust-badges {
    flex-direction: column;
    align-items: center;
  }

  .trust-badge {
    max-width: 300px;
    justify-content: center;
  }

  /* Service Areas */
  .areas-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .berlin-map {
    position: static;
    max-width: 400px;
    margin: 0 auto;
  }

  /* Districts */
  .districts-grid {
    grid-template-columns: 1fr;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-logo {
    justify-content: center;
  }

  .footer-contact li {
    justify-content: center;
  }

  /* Floating Elements */
  .floating-buttons {
    bottom: 100px;
    right: var(--space-md);
  }

  .call-float {
    width: 50px;
    height: 50px;
    font-size: 20px;
    border-radius: 14px;
  }

  .call-float .call-tooltip {
    display: none;
  }

  .whatsapp-float {
    width: 55px;
    height: 55px;
    font-size: 24px;
    border-radius: 16px;
  }

  .whatsapp-float .wa-tooltip {
    display: none;
  }

  #back-to-top {
    width: 45px;
    height: 45px;
  }

  /* Video Section */
  .video-wrapper {
    border-radius: var(--radius-xl);
  }

  /* Color Palette Section */
  .color-swatches {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .palette-brush-stroke {
    height: 50px;
  }

  /* CTA Banner Modern */
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-phone-btn,
  .cta-whatsapp-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    box-shadow: 0 8px 12px rgb(169 5 14 / 14%);
  }

  /* Footer Modern */
  .footer-main {
    padding: var(--space-3xl) 0 var(--space-xl);
  }

  .footer-deco-img {
    display: none;
    height: 100px;
    right: 2%;
    top: 2%;
    opacity: 0.7;
  }

  .footer-grid-modern {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: left;
  }

  .footer-brand {
    padding-right: 0;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-col-modern h4 {
    margin-bottom: var(--space-md);
  }

  .footer-col-modern h4::after {
    left: 20px;
    transform: translateX(-50%);
  }

  .footer-links-modern a {
    justify-content: center;
  }

  .footer-bottom-content {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  /* Cookie Consent */
  .cookie-content {
    flex-direction: column;
    text-align: center;
  }

  .cookie-buttons {
    width: 100%;
    justify-content: center;
  }

  /* Hero Section - Tablet */
  .hero {
    padding-top: 100px;
    padding-bottom: var(--space-3xl);
  }

  .hero-title {
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  }

  .hero-content {
    text-align: center;
  }

  .hero-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Stats Grid - Tablet */
  .stats-modern {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .stat-item {
    padding: var(--space-lg);
  }

  /* Section Typography */
  .section-title {
    font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  }

  /* Two Column Layouts - Stack on Tablet */
  .two-col-grid,
  .content-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* Trust Indicators */
  .trust-indicators {
    justify-content: center;
    flex-wrap: wrap;
  }

  .trust-card {
    padding: var(--space-md) var(--space-lg);
  }
}

/* ================================================
   TABLET SMALL / MOBILE LARGE (768px and below)
   ================================================ */
@media (max-width: 767px) {
  :root {
    --section-padding: clamp(2.5rem, 6vw, 4rem);
  }

  /* Global paragraph font size for tablet/mobile */
  p {
    font-size: var(--text-base) !important;
  }

  .mb-0-sm {
    margin-bottom: 0 !important;
  }

  /* Header */
  .nav-container {
    padding: 0 var(--space-sm);
  }

  .stats-showcase,
  .why-choose-section,
  .cta-banner-modern {
    padding: var(--space-3xl) 0;
  }

  .feature-badge {
    top: 12px;
  }

  .showcase-badge {
    top: 5%;
    right: 20px;
  }

  .showcase-secondary {
    width: 60%;
    right: 0;
    bottom: 0;
    box-shadow: none;
  }

  /* Typography */
  .section-title {
    font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl));
  }

  /* Header */
  .navbar,
  #site-nav.scrolled .navbar {
    padding: var(--space-md) 0;
  }

  .logo {
    font-size: var(--text-lg);
  }

  .logo-icon {
    width: 35px;
    height: 35px;
    font-size: var(--text-base);
  }

  /* Hero */
  .hero {
    min-height: 100vh;
    padding-top: 0px;
    padding-bottom: var(--space-3xl);
  }

  .hero-badge {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
  }

  .hero-title {
    font-size: clamp(var(--text-3xl), 8vw, var(--text-5xl));
  }

  /* Services */
  .services-overview {
    margin-top: -40px;
  }

  .service-card {
    padding: var(--space-xl);
  }

  .service-icon {
    width: 60px;
    height: 60px;
    font-size: var(--text-xl);
  }

  /* Process */
  .process-timeline {
    grid-template-columns: 1fr;
  }

  .process-step {
    display: flex;
    gap: var(--space-lg);
    text-align: left;
  }

  .step-number {
    position: static;
    transform: none;
    font-size: var(--text-3xl);
    color: var(--primary);
    flex-shrink: 0;
    width: 50px;
  }

  .step-icon {
    width: 60px;
    height: 60px;
    margin: 0 0 var(--space-md) 0;
  }

  /* Questions Box */
  .questions-box {
    padding: var(--space-lg);
  }

  /* Quality Features */
  .quality-feature {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
  }

  .feature-icon {
    margin: 0 auto;
  }

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

  .service-card-full {
    padding: var(--space-xl);
  }

  .service-card-full .card-icon {
    width: 60px;
    height: 60px;
    font-size: var(--text-2xl);
  }

  /* CTA Banner */
  .cta-banner {
    padding: var(--space-3xl) 0;
  }

  .cta-content h2 {
    font-size: var(--text-xl);
  }

  .cta-phone {
    font-size: var(--text-lg);
    padding: var(--space-md) var(--space-xl);
  }

  /* Regions */
  .region {
    padding: var(--space-sm);
    font-size: var(--text-sm);
  }

  /* Districts */
  .districts-column {
    justify-content: center;
  }

  .district-link {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
  }

  /* FAQ */
  .faq-question {
    padding: var(--space-md);
    font-size: var(--text-sm);
  }

  .faq-answer p {
    padding: 0 var(--space-md) var(--space-md);
    font-size: var(--text-sm);
  }

  /* Contact */
  .contact-form-wrapper {
    padding: var(--space-lg);
  }

  .contact-item {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg) 0;
  }

  .contact-social {
    justify-content: center;
  }

  /* Footer */
  .footer-main {
    padding: var(--space-3xl) 0 var(--space-2xl);
  }

  .footer-col h4 {
    margin-bottom: var(--space-md);
  }

  .footer-bottom {
    padding: var(--space-md) 0;
  }

  /* Cookie Consent */
  .cookie-content {
    padding: var(--space-md);
  }

  .cookie-content p {
    font-size: var(--text-xs);
  }

  .cookie-buttons .btn {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
  }
}

/* ================================================
   MOBILE SMALL (480px and below)
   ================================================ */
@media (max-width: 480px) {
  :root {
    --section-padding: 3rem;
  }

  body {
    font-size: 14px;
  }

  /* Global paragraph font size for mobile */
  p {
    font-size: 0.94rem !important;
  }

  .banner-subtitle {
    font-size: 0.94rem;
  }

  /* Container */
  .container {
    padding: 0 var(--space-md);
  }

  /* Hero */
  .hero {
    padding-top: 0px;
  }

  .hero-title {
    font-size: var(--text-3xl);
  }

  .hero-badge {
    font-size: 10px;
  }

  .stat-label {
    font-size: var(--text-xs);
  }

  /* Buttons */
  .btn-lg {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
  }

  /* Service Cards */
  .service-card {
    padding: var(--space-lg);
  }

  .service-title {
    font-size: var(--text-lg);
  }

  /* Section Headers */
  .section-header {
    margin-bottom: var(--space-lg) !important;
  }

  .section-tag {
    font-size: var(--text-xs);
  }

  .section-subtitle {
    font-size: var(--text-base);
  }

  /* Benefits List */
  .benefits-list li {
    padding: var(--space-sm) 0;
    font-size: var(--text-sm);
  }

  /* Process */
  .step-icon {
    width: 50px;
    height: 50px;
    font-size: var(--text-lg);
  }

  .step-title {
    font-size: var(--text-base);
  }

  .step-desc {
    font-size: var(--text-xs);
  }

  /* Testimonials */
  .testimonial-card {
    padding: var(--space-lg);
  }

  .testimonial-text {
    font-size: var(--text-base);
  }

  /* Trust Badges */
  .trust-badge {
    padding: var(--space-md);
    text-align: center;
  }

  /* Service Areas */
  .areas-tagline {
    font-size: var(--text-base);
    padding: var(--space-md);
  }

  .service-types h4 {
    font-size: var(--text-base);
  }

  .service-types ul li {
    font-size: var(--text-sm);
  }

  /* Map */
  .map-placeholder {
    aspect-ratio: 4/3;
  }

  .map-placeholder i {
    font-size: 3rem;
  }

  /* Form */
  .form-group input,
  .form-group textarea {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
  }

  .checkbox-label span:last-child {
    font-size: var(--text-xs);
  }

  /* Footer */
  .footer-deco-img {
    height: 70px;
    right: 2%;
    top: 1%;
    opacity: 0.5;
  }

  .footer-about p {
    font-size: var(--text-sm);
  }

  .footer-links a,
  .footer-contact li {
    font-size: var(--text-sm);
  }

  /* Floating Elements */
  .whatsapp-float,
  .call-float {
    width: 46px;
    height: 46px;
    font-size: var(--text-xl);
  }

  #back-to-top {
    width: 46px;
    height: 46px;
  }
}

/* ================================================
   VERY SMALL SCREENS (< 320px)
   ================================================ */
@media (max-width: 319px) {
  .hero-title {
    font-size: var(--text-2xl);
  }

  .section-title {
    font-size: var(--text-xl);
  }

  .btn-lg {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
  }
}

/* ================================================
   LANDSCAPE ORIENTATION ON MOBILE
   ================================================ */
@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: calc(80px + var(--space-xl)) 0 var(--space-xl);
  }
}

/* ================================================
   HIGH DPI / RETINA DISPLAYS
   ================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper shadows for retina */
  .service-card,
  .testimonial-card,
  .contact-form-wrapper {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
}

/* ================================================
   PRINT STYLES
   ================================================ */
@media print {
  /* Hide non-essential elements */
  #site-nav,
  .whatsapp-float,
  #back-to-top,
  .cookie-consent {
    display: none !important;
  }

  /* Reset colors for print */
  body {
    color: #000;
    background: #fff;
  }

  .hero {
    background: #fff;
    color: #000;
  }

  .hero-title {
    color: #000;
  }

  /* Remove shadows */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Show links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  /* Page breaks */
  section {
    page-break-inside: avoid;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* ================================================
   DARK MODE SUPPORT (Optional)
   ================================================ */
@media (prefers-color-scheme: dark) {
  /* Uncomment to enable dark mode support
  :root {
    --light: #1A1A2E;
    --white: #0D0D14;
    --gray-50: #1F1F35;
    --gray-100: #2D2D47;
    --gray-200: #3D3D5C;
    --gray-700: #E5E7EB;
    --gray-800: #F3F4F6;
    --gray-900: #F8F9FA;
  }
  */
}

/* ================================================
   TOUCH DEVICE OPTIMIZATIONS
   ================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .service-card:hover,
  .service-card-full:hover,
  .benefit-card:hover,
  .quality-feature:hover,
  .region:hover {
    transform: none;
  }

  /* Larger touch targets */
  .btn {
    min-height: 48px;
  }

  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .district-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Disable tilt effect on touch */
  .tilt-card {
    transform: none !important;
  }
}

/* ================================================
   CUSTOM CURSOR DEVICES (Desktop)
   ================================================ */
@media (hover: hover) and (pointer: fine) {
  /* Enable advanced hover effects only on devices with precise pointer */
  .service-card:hover .service-card-bg {
    opacity: 1;
  }

  .service-card-full:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
  }
}

/* ================================================
   ÜBER UNS PAGE RESPONSIVE STYLES
   ================================================ */
@media (max-width: 1200px) {
  .about-wrapper {
    gap: 60px;
  }

  .visual-composition {
    height: 550px;
  }

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

@media (max-width: 1024px) {
  .banner-breadcrumb {
    gap: 6px;
    flex-wrap: wrap;
  }

  .page-banner {
    height: 430px;
    min-height: 420px;
    padding: 130px 0 70px;
  }

  .banner-text {
    max-width: 94%;
  }

  .about-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .visual-composition {
    height: 550px;
    order: -1;
  }

  .visual-frame {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }

  .visual-frame.primary {
    width: 80%;
    height: 80%;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
  }

  .visual-deco.dots {
    top: 0;
    right: 0%;
  }

  .visual-frame.accent {
    width: 36%;
    height: 36%;
    top: 60%;
    left: 68%;
  }

  .experience-float {
    left: 20px;
    bottom: 20%;
  }

  .cta-row {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }

  .cta-left {
    max-width: 100%;
  }

  .cta-trust-row {
    justify-content: center;
  }

  .cta-right {
    justify-content: center;
  }

  .cta-card {
    max-width: fit-content;
  }

  .cta-section .cta-btn {
    width: 90%;
  }

  .cta-section .cta-btn-text {
    text-align: left;
  }
}

@media (max-width: 767px) {
  /* .page-banner {
    height: 320px;
    min-height: 320px;
    padding: 120px 0 60px;
  } */

  .geo-shapes {
    display: none;
  }

  .banner-title {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }

  .banner-subtitle {
    font-size: 1rem;
    max-width: 90%;
  }

  .visual-composition {
    height: 400px;
  }

  .visual-frame.primary {
    top: 10%;
    width: 80%;
    height: 65%;
  }

  .visual-frame.primary img {
    object-position: top;
  }

  .visual-frame.secondary {
    width: 60%;
    height: 45%;
  }

  .visual-frame.accent {
    display: none;
  }

  .experience-float {
    left: 10px;
    padding: 18px 22px;
  }

  .experience-float .icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .experience-float .text .number {
    font-size: 1.6rem;
  }

  /* .visual-deco {
    display: none;
  } */

  .techniques-grid {
    grid-template-columns: 1fr;
  }

  .technique-item {
    padding: 40px 30px;
  }

  .cta-section {
    padding: 70px 0;
  }

  .cta-title {
    font-size: 1.8rem;
  }

  .cta-desc {
    font-size: 1rem;
  }

  .cta-card {
    max-width: 100% !important;
    padding: 28px;
    box-shadow: none;
  }

  .cta-card-header {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .cta-btn {
    padding: 14px 16px;
  }

  .cta-btn > i:first-child {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  /* Video Showcase Modern Responsive */
  .video-stats {
    gap: 15px;
  }

  .video-container {
    box-shadow: none;
  }

  .video-showcase-modern::after {
    display: none;
  }

  .video-stat {
    padding: 12px 18px;
    font-size: 0.85rem;
    box-shadow: none;
  }

  .frame-corner {
    width: 25px;
    height: 25px;
  }

  .video-showcase-wrapper:hover .frame-corner {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 480px) {
  .banner-title {
    font-size: 2rem;
    overflow-wrap: break-word;
  }

  .banner-stats {
    flex-direction: column;
    gap: 20px;
  }

  .visual-composition {
    height: 350px;
  }

  .about-cta,
  .about-wrapper .about-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .about-cta .btn-modern,
  .about-cta .btn-outline {
    justify-content: center;
  }

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

  .cta-row {
    gap: 35px;
  }

  .cta-section .cta-badge {
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  .cta-title {
    font-size: 1.5rem;
  }

  .cta-trust-row {
    gap: 0;
  }

  .cta-card {
    padding: 22px;
    border-radius: 18px;
  }

  .cta-card-icon {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .cta-card-header h3 {
    font-size: 1.1rem;
  }

  .cta-btn-text .value {
    font-size: 0.9rem;
  }

  /* Video Showcase Mobile */
  .video-stats {
    flex-direction: column;
    gap: 10px;
  }

  .video-stat {
    justify-content: center;
    width: 100%;
  }

  .video-frame-decoration {
    display: none;
  }
}

/* ================================================
   SERVICES PAGE - RESPONSIVE STYLES
   ================================================ */
@media (max-width: 1024px) {
  .testimonials-premium {
    padding: var(--space-2xl) 0;
  }

  .services-section .section-header {
    text-align: center;
  }

  .services-section .section-subtitle {
    max-width: 100%;
    margin: 0 auto;
  }

  .grid-bg {
    display: none;
  }

  /* Hide decorative elements that may cause overflow */
  .cta-deco,
  .banner-orb,
  .cta-pattern {
    display: none;
  }
}

@media (max-width: 767px) {
  .services-section .section-header {
    margin-bottom: 40px;
  }

  .section-tag {
    font-size: 0.8rem;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .services-section .section-header {
    margin-bottom: 30px;
  }

  .why-list {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .why-list li {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    padding: 6px 0;
  }

  .btn-creative {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================
   CONTACT PAGE - RESPONSIVE STYLES
   ================================================ */

@media (max-width: 1200px) {
  .contact-grid {
    gap: 40px;
  }

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

  .banner-quick-contacts {
    gap: 15px;
  }

  .quick-contact-card {
    min-width: 220px;
    padding: 16px 22px;
  }
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-info-side {
    order: -1;
  }

  .contact-info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .info-card {
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
  }

  .info-card:hover {
    transform: translateY(-5px);
  }

  .info-card-icon {
    margin: 0 auto;
  }

  .why-contact-card {
    display: none;
  }

  .floating-icon {
    display: none;
  }

  .floating-shape {
    display: none;
  }

  .map-overlay-info {
    position: relative;
    top: auto;
    left: auto;
    padding: 20px;
  }

  .map-info-card {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .map-frame {
    border-radius: 0;
  }
}

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

  .floating-brush {
    width: 80px;
    height: 80px;
    opacity: 0.4;
  }

  .contact-form-wrapper {
    padding: 30px 25px;
    border-radius: 24px;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .form-header h2 {
    font-size: 1.6rem;
  }

  .contact-info-cards {
    grid-template-columns: 1fr;
  }

  .info-card {
    flex-direction: row;
    text-align: left;
  }

  .info-card-icon {
    margin: 0;
  }

  .contact-social {
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }

  .contact-map-section .section-title {
    font-size: 1.6rem;
  }

  .map-frame iframe {
    height: 350px;
  }

  .contact-cta {
    padding: 70px 0;
  }

  .contact-cta h2 {
    font-size: 1.8rem;
  }

  .contact-cta .cta-icon {
    width: 70px;
    height: 70px;
    font-size: 1.8rem;
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-primary-btn,
  .cta-secondary-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    padding: 16px 30px;
  }

  .form-trust-badges {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .floating-brush {
    display: none;
  }

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

  .form-header h2 {
    font-size: 1.4rem;
  }

  .input-wrapper input,
  .input-wrapper select,
  .input-wrapper textarea {
    padding: 14px 18px 14px 48px;
    font-size: 0.95rem;
  }

  .form-submit-btn {
    padding: 16px 30px;
    font-size: 1rem;
  }

  .info-card {
    padding: 20px;
  }

  .info-card-icon {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }

  .map-frame iframe {
    height: 280px;
  }
}

/* ================================================
   LOCATION PAGE V1 RESPONSIVE
   ================================================ */

/* Tablet and below */
@media (max-width: 1024px) {
  .loc-v1-content-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .loc-v1-main-content {
    padding-right: 0;
  }

  .loc-v1-form-wrapper {
    position: static;
    margin: 0 auto;
  }

  .loc-v1-about-wrapper {
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .loc-v1-about-visual {
    order: 1;
    max-width: 450px;
    margin: 0 auto;
  }

  .loc-v1-about-content {
    order: 2;
    text-align: left;
  }

  .loc-v1-about-content .btn {
    margin-left: auto;
    margin-right: auto;
  }

  .loc-v1-visual-deco.deco-line {
    display: none;
  }

  .loc-v1-cta-section {
    padding: 80px 0;
  }
  .loc-v1-visual-main {
    box-shadow: none;
  }
  .loc-v1-about {
    padding: 0;
  }
  .loc-v1-services-cta {
    overflow: visible !important;
  }
}

/* Mobile large */
@media (max-width: 768px) {
  .loc-v1-content-section {
    padding: 60px 0;
  }

  .loc-v1-section-title {
    font-size: 1.35rem;
  }

  .loc-v1-text-content p {
    font-size: 1rem;
  }

  .loc-v1-form-card {
    padding: 28px 24px;
  }

  .loc-v1-form-header h3 {
    font-size: 1.3rem;
  }

  .loc-v1-visual-accent {
    left: -10px;
    width: 5px;
  }

  .loc-v1-visual-border {
    top: 15px;
    right: -15px;
    bottom: -15px;
    left: 15px;
  }

  .loc-v1-about-content p {
    font-size: 1rem;
  }

  .loc-v1-cta-section {
    padding: 60px 0;
  }

  .loc-v1-cta-content h2 {
    font-size: 1.5rem;
  }

  .loc-v1-cta-content p {
    font-size: 1rem;
  }

  .loc-v1-services-showcase {
    gap: 12px;
  }

  .loc-v1-service-tag {
    padding: 12px 20px;
    font-size: 0.9rem;
  }

  .loc-v1-tag-icon {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

/* Mobile small */
@media (max-width: 480px) {
  .loc-v1-content-section {
    padding: 50px 0;
  }

  .loc-v1-section-title {
    font-size: 1.2rem;
  }

  .loc-v1-text-content p {
    font-size: 0.95rem;
  }

  .loc-v1-form-card {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .loc-v1-form-header h3 {
    font-size: 1.2rem;
  }

  .loc-v1-form-card .form-group input,
  .loc-v1-form-card .form-group textarea {
    padding: 12px 14px;
    font-size: 0.95rem;
  }

  .loc-v1-visual-main {
    border-radius: 16px;
  }

  .loc-v1-visual-accent {
    display: none;
  }

  .loc-v1-visual-border {
    top: 10px;
    right: -10px;
    bottom: -10px;
    left: 10px;
    border-radius: 16px;
  }

  .loc-v1-visual-main img {
    aspect-ratio: auto;
  }

  .loc-v1-about-content p {
    font-size: 0.95rem;
  }

  .loc-v1-cta-section {
    padding: 50px 0;
  }

  .loc-v1-cta-content h2 {
    font-size: 1.35rem;
  }

  .loc-v1-cta-content p {
    font-size: 0.95rem;
  }

  .loc-v1-service-tag {
    padding: 10px 16px;
    font-size: 0.85rem;
  }

  .loc-v1-tag-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
}