@media (min-width: 768px) and (max-width: 1199px) {
  :root {    --pf-text-xs: 0.7rem;    --pf-text-sm: 0.8rem;    --pf-text-base: 0.9rem;    --pf-text-lg: 1rem;    --pf-text-xl: 1.125rem;    --pf-text-2xl: 1.35rem;    --pf-text-3xl: 1.65rem;    --pf-text-4xl: 2rem;    --pf-text-5xl: 2.5rem;    --pf-text-6xl: 3rem;  }}
@media (max-width: 767px) {
  :root {    --pf-text-xs: 0.65rem;    --pf-text-sm: 0.75rem;    --pf-text-base: 0.85rem;    --pf-text-lg: 0.95rem;    --pf-text-xl: 1.05rem;    --pf-text-2xl: 1.2rem;    --pf-text-3xl: 1.5rem;    --pf-text-4xl: 1.8rem;    --pf-text-5xl: 2.2rem;    --pf-text-6xl: 2.8rem;  }}
@media (min-width: 768px) and (max-width: 1199px) {
}
@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 1199px) {
}
@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 1199px) {
}
@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 1199px) {
}
@media (max-width: 767px) {
}
@media (pointer: coarse) or (max-width: 1199px) {
  .section .container,  .stats .container,  #stats .container {    max-width: none !important;    width: 100% !important;    padding-left: 0 !important;    padding-right: 0 !important;    margin-left: 0 !important;    margin-right: 0 !important;  }}
@media (pointer: coarse) or (max-width: 768px) {
  .main-content {    /* Aggressive containment to prevent any layout shifts */    /* Using layout style only (not paint) to avoid breaking position: fixed */    contain: layout style;    /* Reserve space immediately - prevent font loading shifts */    min-height: 100vh;    width: 100%;    max-width: 100%;    /* Prevent any margin/padding changes */    margin: 0 !important;    padding: 0 !important;    /* Ensure block layout */    display: block !important;    position: relative !important;    /* Prevent font loading shifts - use system fonts as immediate fallback */    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;    font-display: swap;    /* Prevent overflow causing shifts */    overflow-x: hidden;    box-sizing: border-box;  }}
@media (max-width: 576px) {
  .portfolio-details-page .portfolio-details p,  .portfolio-details-page .portfolio-details li,  .portfolio-details-page .text-card .card-body p,  .portfolio-details-page .text-card .card-body li {    text-justify: auto;         /* hyphen-based justification for mobile */    hyphens: auto;              /* allow hyphens on mobile */  }}
@media (max-width: 768px) {
  .text-justify {    text-justify: auto !important;  /* hyphen-based for mobile */    hyphens: auto !important;  }}
@media (max-width: 767px) {
  p:not(.text-center):not(.info-value):not(.info-subtitle):not(.stat-label):not(.remote-work-section p):not(.remote-work-content p) {    text-justify: auto !important;  /* hyphen-based for mobile */    hyphens: auto !important;        /* enable hyphens on mobile */  }}
@media (max-width: 576px) {
  .resume-item p,  .resume-item li,  .service-item p,  .testimonial-text,  .about p,  .about li {    hyphens: auto !important;  }}
@media screen and (max-width: 768px) {
  [data-aos-delay] {    transition-delay: 0 !important;  }}
@media (max-width: 767px) {
  .about.section {    min-height: 1200px;  }}
@media (max-width: 1199px), (pointer: coarse) {
  /* Visibility is handled in component scoped styles */    /* CRITICAL CLS FIX: Header always exists in DOM, prevent shifts */  .header {    /* Header is always in DOM, just positioned off-screen on mobile */    /* CRITICAL: Using left instead of transform to avoid breaking position: fixed on siblings */    /* Transform creates containing block that breaks fixed positioning */    left: -100%;    will-change: left;    contain: layout style;    /* Removed paint from contain to avoid containing block issues */  }}
@media (max-width: 768px) {
  .hero {    min-height: 100vh; /* Full viewport height on mobile */    padding: 2rem 1rem; /* Reduced padding on mobile */  }}
@media (max-width: 450px) {
  .scroll-indicator {    bottom: 1.5rem; /* Lower position on small mobile to avoid WhatsApp overlap */  }}
@media (pointer: coarse) {
  .hero {    padding: 3rem 1.5rem !important;    min-height: 60vh !important;    align-items: center !important;  }}
@media (pointer: coarse) and (max-width: 767px) {
  .hero {    padding: 2.2rem .8rem !important;    min-height: 70vh !important;  }}
@media (max-width: 480px) {
  .hero {    padding: 1.5rem .5rem;  }}
@media (min-width: 650px) and (max-width: 767px) {
  .portfolio .isotope-container {    grid-template-columns: minmax(340px, 400px);    column-gap: 0;    row-gap: 0.5rem;  }}
@media (max-width: 649px) {
  .portfolio .isotope-container {    grid-template-columns: minmax(320px, 400px);    column-gap: 0;    row-gap: 0.5rem;  }}
@media (pointer: coarse) {
  .services .service-item .icon {    width: 90px !important;    height: 90px !important;  }}
@media (pointer: coarse) and (max-width: 767px) {
  .services .service-item .icon {    width: 100px !important;    height: 100px !important;  }}
@media (min-width: 650px) and (max-width: 767px) {
  .services .services-grid {    grid-template-columns: minmax(340px, 400px);    column-gap: 0;    row-gap: 0.5rem;  }}
@media (max-width: 649px) {
  .services .services-grid {    grid-template-columns: minmax(320px, 400px);    column-gap: 0;    row-gap: 0.5rem;  }}
@media (max-width: 768px) {
  .diagram-viewport {    height: 400px;  }}
@media (max-width: 768px) {
  .diagram-button-header {    flex-wrap: wrap;    justify-content: center !important;    gap: 8px !important;  }}
@media (min-width: 577px) and (max-width: 768px) {
  /* Put speed block on its own row and let slider fill remaining space */  .diagram-button-header > .d-flex {    width: 100% !important;    justify-content: center !important;    gap: 10px !important;    margin-left: 0 !important;  }}
@media (min-width: 769px) and (max-width: 1199px) {
  .diagram-button-header {    flex-wrap: wrap;    justify-content: center !important;    gap: 10px !important;  }}
@media (max-width: 360px) {
  .diagram-button-header .btn {    flex-basis: 100%;  }}
@media (max-width: 768px) {
  /* Add vertical spacing between stacked Bootstrap columns */  .text-card .row {    --bs-gutter-y: 18px;    --bs-gutter-x: 12px;    row-gap: 18px;    gap: 12px;  }}
@media (max-width: 768px) {
  #airasia-id90-diagram .row {    --bs-gutter-y: 20px;    row-gap: 20px;  }}
@media (max-width: 768px) {
  #airasia-id90-diagram .row > [class^="col-"],  #airasia-id90-diagram .row > [class*=" col-"] {    padding-top: 12px !important;    padding-bottom: 12px !important;  }}
@media (max-width: 768px) {
  .row > [class^="col-"],  .row > [class*=" col-"] {    margin-bottom: 18px !important;  }}