/* ==========================================================================
   OGUZLAW RESPONSIVE STYLES
   Comprehensive mobile-first responsive breakpoints
   Test Devices: iPhone 14 (390px), iPhone 17 Pro Max (430px), iPad (768px-1024px)
   ========================================================================== */

/* ==========================================================================
   BREAKPOINT REFERENCE
   - Mobile Small: max-width: 390px (iPhone 14)
   - Mobile Large: max-width: 480px (iPhone 17 Pro Max, general mobile)
   - Tablet: max-width: 768px (iPad Mini, small tablets)
   - Tablet Large: max-width: 1024px (iPad Pro, large tablets)
   - Desktop Small: max-width: 1200px (Small desktop)
   ========================================================================== */

/* ==========================================================================
   PIXEL-PERFECT BASE RULES
   ========================================================================== */

/* Container max-width standardization - only for non-hero sections */
.section-container.max-w-\[1440px\],
.max-w-\[1312px\] {
  max-width: 1200px !important;
}

/* Hero section should use full width */
section.h-\[932px\] .max-w-\[1440px\] {
  max-width: 1440px !important;
}

/* Touch targets - ensure 44px minimum */
button,
a[class*="btn"],
input[type="submit"],
input[type="button"],
.nav-link,
.dropdown-item,
.mobile-nav-link {
  min-height: 44px;
}

/* Form inputs - 16px for iOS zoom prevention */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  font-size: 16px !important;
}

/* Spacing standardization - 8px grid */
.py-\[112px\] {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.py-\[100px\] {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.pb-\[100px\] {
  padding-bottom: 96px !important;
}

.gap-\[51px\] {
  gap: 48px !important;
}

/* ==========================================================================
   1. LARGE TABLET / SMALL DESKTOP - max-width: 1200px
   ========================================================================== */
@media (max-width: 1200px) {
  /* Section Padding */
  .section-padding {
    padding: 80px 48px;
  }

  .px-16 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* Hero Form - Start moving closer */
  .hero-form-glass {
    padding: 24px !important;
  }

  .hero-form-glass .w-\[397px\] {
    width: 350px !important;
  }
}

/* ==========================================================================
   2. TABLET (iPad Pro) - max-width: 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  /* Section Padding */
  .section-padding {
    padding: 80px 32px;
  }

  .px-16 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

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

  .heading-1, .heading-1-white {
    font-size: 48px;
  }

  .heading-2, .heading-2-white {
    font-size: 36px;
  }

  .cta-title {
    font-size: 36px;
  }

  /* ============================================
     HERO SECTION - Tablet
     ============================================ */
  /* Hero height adjustment */
  section.h-\[932px\] {
    height: auto !important;
    min-height: 700px;
  }

  /* Hero content wrapper - stack vertically */
  .h-full.flex.items-center > .w-full.max-w-\[1440px\] {
    flex-direction: column !important;
    gap: 40px !important;
    padding: 60px 32px !important;
    align-items: center !important;
  }

  /* Hero carousel arrows and content */
  .flex.gap-\[51px\].items-center {
    gap: 24px !important;
  }

  /* Slide content width */
  .w-\[560px\] {
    width: 100% !important;
    max-width: 500px;
  }

  /* Hero Form */
  .hero-form-glass {
    width: 100% !important;
    max-width: 450px !important;
  }

  .hero-form-glass .w-\[397px\] {
    width: 100% !important;
  }

  /* Award badges - hide on tablet */
  .hero-badges-animate {
    display: none !important;
  }

  /* ============================================
     WHY OGUZ LAW - Tablet
     ============================================ */
  .flex.items-start.justify-between.gap-10 {
    flex-direction: column !important;
    gap: 40px !important;
  }

  .w-\[616px\] {
    width: 100% !important;
  }

  .w-\[458px\] {
    width: 100% !important;
    max-width: 400px;
    margin: 0 auto;
  }

  .h-\[471px\] {
    height: auto !important;
  }

  /* Stats - 3 column still works */
  .flex.gap-5 > .flex-1.flex.flex-col {
    padding: 16px !important;
  }

  /* ============================================
     PRACTICE AREAS - Tablet
     ============================================ */
  /* Section header - stack */
  .flex.gap-20.items-start {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Cards - 2 columns */
  .w-full.max-w-\[1312px\] > .flex.gap-5 {
    flex-wrap: wrap !important;
  }

  .w-full.max-w-\[1312px\] > .flex.gap-5 > .flex-1 {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 280px;
  }

  /* ============================================
     HELP DESK - Tablet
     ============================================ */
  .w-\[560px\].reveal {
    width: 100% !important;
    max-width: 500px;
  }

  /* ============================================
     DECORATIVE ELEMENTS - Hide on tablet
     ============================================ */
  .decorative-pen {
    display: none !important;
  }

  .green-card-position {
    display: none !important;
  }
}

/* ==========================================================================
   3. TABLET (iPad Mini / iPad) - max-width: 768px
   ========================================================================== */
@media (max-width: 768px) {
  /* Section Padding */
  .section-padding {
    padding: 64px 24px;
  }

  .px-16 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .px-\[64px\] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .py-\[112px\] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Typography */
  .hero-title {
    font-size: 40px;
    line-height: 1.15;
  }

  .heading-1, .heading-1-white {
    font-size: 40px;
  }

  .heading-2, .heading-2-white {
    font-size: 32px;
  }

  .heading-3, .heading-3-white, .heading-3-accent {
    font-size: 26px;
  }

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

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

  /* Gap adjustments */
  .gap-16 {
    gap: 32px !important;
  }

  .gap-20 {
    gap: 40px !important;
  }

  /* ============================================
     NAVIGATION - Mobile Menu Active
     ============================================ */
  .main-nav {
    display: none !important;
  }

  .mobile-menu-button {
    display: flex !important;
  }

  .nav-actions {
    display: none !important;
  }

  /* Mobile Menu Styles - Alpine.js controls visibility via inline styles */
  .mobile-menu {
    flex-direction: column;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 999;
    padding: 20px;
    overflow-y: auto;
  }

  .mobile-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-nav-links li {
    border-bottom: 1px solid rgba(31, 51, 92, 0.1);
  }

  .mobile-nav-link {
    display: block;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 500;
    color: #1f335c;
    text-decoration: none;
  }

  /* ============================================
     HERO SECTION - Mobile
     ============================================ */
  section.h-\[932px\] {
    height: auto !important;
    min-height: auto;
    padding-bottom: 100px;
  }

  /* Hero main container */
  .h-full.flex.items-center > .w-full.max-w-\[1440px\] {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 40px 24px 60px !important;
    align-items: stretch !important;
  }

  /* Hero arrows - smaller */
  .flex.gap-\[51px\].items-center button svg {
    width: 36px !important;
    height: 36px !important;
  }

  .flex.gap-\[51px\].items-center {
    gap: 16px !important;
    width: 100% !important;
  }

  /* Slide content */
  .w-\[560px\] {
    width: 100% !important;
    text-align: center;
  }

  .w-\[560px\] .flex.flex-col.gap-6 {
    align-items: center;
  }

  /* Hero Form - Full Width */
  .hero-form-glass {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px !important;
    margin: 0 !important;
  }

  .hero-form-glass .w-\[397px\] {
    width: 100% !important;
  }

  /* Hero form inputs */
  .hero-form-glass input,
  .hero-form-glass textarea,
  .hero-form-glass select {
    font-size: 16px !important; /* iOS zoom prevention */
    padding: 14px !important;
  }

  /* Hero form button */
  .hero-form-glass button[type="submit"] {
    padding: 14px 24px !important;
    font-size: 16px !important;
  }

  /* Bottom logo bar - smaller height */
  .absolute.bottom-0.left-0.right-0 {
    height: 60px !important;
  }

  .absolute.bottom-0.left-0.right-0 .h-\[84px\] {
    height: 60px !important;
  }

  /* ============================================
     WHY OGUZ LAW - Mobile
     ============================================ */
  .w-\[616px\] {
    width: 100% !important;
  }

  .w-\[458px\] {
    width: 100% !important;
    height: auto !important;
  }

  .w-\[458px\] .h-\[471px\] {
    height: auto !important;
  }

  /* Stats - 1 column */
  .flex.gap-5:has(.stat-number) {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .flex.gap-5 > .flex-1.flex.flex-col.gap-2 {
    flex-direction: row !important;
    align-items: center !important;
    padding: 16px !important;
    background: rgba(31, 51, 92, 0.03);
    border-radius: 8px;
  }

  .flex.gap-5 > .flex-1.flex.flex-col.gap-2 .w-20 {
    width: 60px !important;
    height: 60px !important;
    flex-shrink: 0;
  }

  .flex.gap-5 > .flex-1.flex.flex-col.gap-2 .w-20 svg {
    width: 60px !important;
    height: 60px !important;
  }

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

  .stat-label {
    font-size: 14px !important;
  }

  /* Why Oguz Law image section */
  .relative.w-\[458px\].h-\[471px\] {
    display: none !important;
  }

  /* ============================================
     PRACTICE AREAS - Mobile (1 column)
     ============================================ */
  .w-full.max-w-\[1312px\] > .flex.gap-5 {
    flex-direction: column !important;
  }

  .w-full.max-w-\[1312px\] > .flex.gap-5 > .flex-1 {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Card content spacing */
  .flex-1.relative.border > .relative.p-5 {
    padding: 16px !important;
  }

  .flex-1.relative.border .h-\[220px\] {
    height: 180px !important;
  }

  /* ============================================
     CALL US SECTION - Mobile
     ============================================ */
  .flex.flex-col.gap-5.items-start.justify-center {
    align-items: center !important;
    text-align: center;
  }

  .flex.flex-col.gap-5.items-start.justify-center .max-w-\[441px\] {
    max-width: 100% !important;
  }

  /* ============================================
     HELP DESK - Mobile
     ============================================ */
  .w-\[560px\].reveal {
    width: 100% !important;
    text-align: center;
  }

  .w-\[560px\].reveal .flex.flex-col.gap-6 {
    align-items: center;
  }

  .w-\[269px\] {
    width: 100% !important;
    max-width: 280px;
  }

  /* ============================================
     CONTACT FORM (Generic) - Mobile
     ============================================ */
  .form-group input,
  .form-group textarea,
  .form-group select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important; /* iOS zoom prevention */
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ============================================
     GRID LAYOUTS - Mobile
     ============================================ */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* ============================================
     FOOTER - Mobile
     ============================================ */
  .site-footer {
    padding: 48px 24px !important;
  }

  .footer-content {
    flex-direction: column !important;
    gap: 40px !important;
  }

  .footer-newsletter {
    width: 100% !important;
  }

  .newsletter-form {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .newsletter-input {
    width: 100% !important;
  }

  .newsletter-button {
    width: 100% !important;
  }

  .footer-links-container {
    flex-wrap: wrap !important;
    gap: 32px !important;
  }

  .footer-link-column {
    flex: 1 1 45% !important;
    min-width: 140px;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
  }

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

/* ==========================================================================
   4. MOBILE LARGE (iPhone 17 Pro Max) - max-width: 480px
   ========================================================================== */
@media (max-width: 480px) {
  /* Section Padding */
  .section-padding {
    padding: 48px 16px;
  }

  .px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .px-\[64px\] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .py-\[112px\] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .py-28 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .py-16 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Typography */
  .hero-title {
    font-size: 32px;
    line-height: 1.2;
  }

  .heading-1, .heading-1-white {
    font-size: 32px;
  }

  .heading-2, .heading-2-white {
    font-size: 28px;
  }

  .heading-3, .heading-3-white, .heading-3-accent {
    font-size: 22px;
  }

  .heading-4 {
    font-size: 18px;
  }

  .cta-title {
    font-size: 26px;
  }

  .cta-description {
    font-size: 15px;
  }

  .body-lg, .body-lg-white {
    font-size: 16px;
  }

  /* Gap adjustments */
  .gap-16 {
    gap: 24px !important;
  }

  .gap-20 {
    gap: 32px !important;
  }

  .gap-5 {
    gap: 16px !important;
  }

  .gap-6 {
    gap: 16px !important;
  }

  .gap-8 {
    gap: 20px !important;
  }

  /* ============================================
     HERO SECTION - Small Mobile
     ============================================ */
  .h-full.flex.items-center > .w-full.max-w-\[1440px\] {
    padding: 32px 16px 48px !important;
    gap: 24px !important;
  }

  /* Hero arrows - even smaller */
  .flex.gap-\[51px\].items-center button svg {
    width: 32px !important;
    height: 32px !important;
  }

  .flex.gap-\[51px\].items-center {
    gap: 12px !important;
  }

  /* Hero Form */
  .hero-form-glass {
    padding: 20px !important;
  }

  .hero-form-glass .text-center h2 {
    font-size: 24px !important;
  }

  /* Hero CTA button */
  .hero-form-glass button[type="submit"],
  .w-\[560px\] a.inline-flex {
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  /* Bottom logo bar - hide on very small screens */
  .absolute.bottom-0.left-0.right-0.z-20 {
    display: none !important;
  }

  /* ============================================
     WHY OGUZ LAW - Small Mobile
     ============================================ */
  .stat-number {
    font-size: 28px !important;
  }

  .stat-label {
    font-size: 13px !important;
  }

  .flex.gap-5 > .flex-1.flex.flex-col.gap-2 .w-20 {
    width: 50px !important;
    height: 50px !important;
  }

  .flex.gap-5 > .flex-1.flex.flex-col.gap-2 .w-20 svg {
    width: 50px !important;
    height: 50px !important;
  }

  /* ============================================
     PRACTICE AREAS - Small Mobile
     ============================================ */
  .flex-1.relative.border .h-\[220px\] {
    height: 160px !important;
  }

  .flex-1.relative.border > .relative.p-5 {
    padding: 12px !important;
  }

  /* Card buttons */
  .flex-1.relative.border a.w-full {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  /* ============================================
     BUTTONS - Touch Targets (min 44px)
     ============================================ */
  button,
  .btn,
  a.inline-flex,
  input[type="submit"] {
    min-height: 44px !important;
  }

  /* ============================================
     IMAGES - Responsive
     ============================================ */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ============================================
     FOOTER - Small Mobile
     ============================================ */
  .site-footer {
    padding: 40px 16px !important;
  }

  .footer-link-column {
    flex: 1 1 100% !important;
  }

  .footer-bottom-links {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   5. MOBILE SMALL (iPhone 14 / SE) - max-width: 390px
   ========================================================================== */
@media (max-width: 390px) {
  /* Extra small adjustments */
  .section-padding {
    padding: 40px 12px;
  }

  .px-16 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .px-\[64px\] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Typography - even smaller */
  .heading-1, .heading-1-white {
    font-size: 28px;
  }

  .heading-2, .heading-2-white {
    font-size: 24px;
  }

  .heading-3, .heading-3-white, .heading-3-accent {
    font-size: 20px;
  }

  .body-lg, .body-lg-white {
    font-size: 15px;
  }

  /* Hero adjustments */
  .h-full.flex.items-center > .w-full.max-w-\[1440px\] {
    padding: 24px 12px 40px !important;
  }

  /* Hero arrows - hide prev/next text, just show arrows */
  .flex.gap-\[51px\].items-center button svg {
    width: 28px !important;
    height: 28px !important;
  }

  /* Stats */
  .stat-number {
    font-size: 24px !important;
  }

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

  .flex.gap-5 > .flex-1.flex.flex-col.gap-2 .w-20 {
    width: 40px !important;
    height: 40px !important;
  }

  .flex.gap-5 > .flex-1.flex.flex-col.gap-2 .w-20 svg {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ==========================================================================
   6. UTILITY RESPONSIVE CLASSES
   ========================================================================== */

/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on tablet */
@media (max-width: 1024px) and (min-width: 769px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 1025px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Show only on mobile */
@media (min-width: 769px) {
  .show-mobile-only {
    display: none !important;
  }
}

/* Full width on mobile */
@media (max-width: 768px) {
  .mobile-full-width {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Center on mobile */
@media (max-width: 768px) {
  .mobile-center {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Stack on mobile (flex-col) */
@media (max-width: 768px) {
  .mobile-stack {
    flex-direction: column !important;
  }
}

/* ==========================================================================
   7. TOUCH OPTIMIZATIONS
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  button,
  a,
  input[type="submit"],
  .nav-link,
  .dropdown-item {
    min-height: 44px;
    min-width: 44px;
  }

  /* Remove hover states on touch devices */
  .card-hover:hover {
    transform: none;
  }

  /* Disable hover dropdown on touch - use click instead */
  .nav-dropdown {
    pointer-events: auto;
  }
}

/* ==========================================================================
   8. SAFE AREA INSETS (iPhone X+ notch support)
   ========================================================================== */
@supports (padding: max(0px)) {
  .site-header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .site-footer {
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  .mobile-menu {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   9. PAGE-SPECIFIC RESPONSIVE STYLES
   ========================================================================== */

/* ============================================
   ABOUT PAGE
   ============================================ */
@media (max-width: 1024px) {
  /* Who Are We - Image + Text Grid */
  .about-content-grid,
  [class*="grid"][class*="cols-2"]:has(img) {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 768px) {
  /* About page sections */
  .about-hero,
  .page-hero {
    min-height: 300px !important;
    padding: 40px 20px !important;
  }

  .about-hero h1,
  .page-hero h1 {
    font-size: clamp(28px, 6vw, 48px) !important;
  }

  /* Timeline section */
  .timeline-container {
    padding: 30px 16px !important;
  }

  .timeline-item {
    padding-left: 30px !important;
  }

  .timeline-item::before {
    left: 0 !important;
  }
}

/* ============================================
   CONTACT PAGE
   ============================================ */
@media (max-width: 1024px) {
  /* Contact 2-column layout */
  .contact-wrapper,
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

@media (max-width: 768px) {
  .contact-wrapper,
  .contact-grid {
    padding: 30px 16px !important;
    gap: 30px !important;
  }

  /* Contact form */
  .contact-form {
    padding: 24px !important;
  }

  .contact-form .form-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
  }

  .contact-form textarea {
    min-height: 120px !important;
  }

  .contact-form button[type="submit"] {
    width: 100% !important;
    padding: 14px 24px !important;
    min-height: 48px !important;
  }

  /* Map */
  .contact-map,
  .map-container {
    height: 300px !important;
    width: 100% !important;
  }

  /* Contact info */
  .contact-info-item {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .contact-form {
    padding: 16px !important;
  }

  .contact-map,
  .map-container {
    height: 250px !important;
  }
}

/* ============================================
   PRACTICE AREAS PAGES (Business, Immigration, Trademark, Personal Injury)
   ============================================ */
@media (max-width: 1024px) {
  /* Practice area content grid (image + text) */
  .practice-area-content,
  .practice-content-grid,
  .content-with-image {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .practice-area-image,
  .content-image {
    order: -1 !important; /* Image on top */
    max-height: 400px !important;
  }
}

@media (max-width: 768px) {
  .practice-area-content,
  .practice-content-grid,
  .content-with-image {
    padding: 30px 16px !important;
    gap: 24px !important;
  }

  .practice-area-text h2,
  .content-text h2 {
    font-size: clamp(24px, 5vw, 36px) !important;
  }

  .practice-area-text p,
  .content-text p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .practice-area-image,
  .content-image {
    max-height: 300px !important;
    border-radius: 8px !important;
  }

  /* Practice area cards on listing page */
  .practice-areas-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .practice-area-card {
    padding: 20px !important;
  }

  .practice-area-card h3 {
    font-size: 20px !important;
  }
}

/* ============================================
   TESTIMONIALS PAGE
   ============================================ */
@media (max-width: 1024px) {
  /* Testimonials slider */
  .testimonials-slider,
  .testimonial-carousel {
    gap: 20px !important;
  }

  .testimonial-card,
  .testimonial-item {
    flex: 0 0 calc(50% - 10px) !important;
    min-width: 300px !important;
  }
}

@media (max-width: 768px) {
  .testimonials-slider,
  .testimonial-carousel {
    padding: 0 16px !important;
    gap: 16px !important;
    scroll-snap-type: x mandatory !important;
  }

  .testimonial-card,
  .testimonial-item {
    flex: 0 0 100% !important;
    min-width: calc(100vw - 32px) !important;
    padding: 20px !important;
    scroll-snap-align: start !important;
  }

  .testimonial-quote {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .testimonial-author {
    font-size: 14px !important;
  }

  .testimonial-title {
    font-size: 12px !important;
  }

  /* Video testimonials */
  .video-testimonial {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
  }

  .video-testimonial iframe {
    width: 100% !important;
    height: 100% !important;
  }

  /* Carousel navigation */
  .carousel-nav,
  .slider-nav {
    gap: 12px !important;
    padding: 16px 0 !important;
  }

  .carousel-nav-btn,
  .slider-arrow {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .carousel-dots,
  .slider-dots {
    gap: 8px !important;
  }

  .carousel-dot,
  .slider-dot {
    width: 10px !important;
    height: 10px !important;
  }
}

/* ============================================
   RESOURCES & PDF GUIDES PAGES (Card Grids)
   ============================================ */
@media (max-width: 1024px) {
  /* 3-column to 2-column */
  .card-grid,
  .resources-grid,
  .pdf-guides-grid,
  .guides-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  /* 2-column to 1-column */
  .card-grid,
  .resources-grid,
  .pdf-guides-grid,
  .guides-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 30px 16px !important;
  }

  .resource-card,
  .pdf-card,
  .guide-card {
    padding: 16px !important;
  }

  .card-image,
  .resource-image,
  .guide-image {
    height: 180px !important;
  }

  .card-content,
  .resource-content {
    padding: 16px !important;
  }

  .card-title,
  .resource-title {
    font-size: 18px !important;
  }

  .card-description,
  .resource-description {
    font-size: 14px !important;
  }

  /* Tab navigation for resources */
  .tabs-nav,
  .resource-tabs {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .tab-btn,
  .resource-tab {
    padding: 10px 16px !important;
    font-size: 14px !important;
    flex: 1 1 auto !important;
    text-align: center !important;
  }
}

/* ============================================
   BLOG PAGE
   ============================================ */
@media (max-width: 1024px) {
  .blog-grid,
  .posts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  .blog-grid,
  .posts-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 30px 16px !important;
  }

  .blog-card,
  .post-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .blog-card-image,
  .post-thumbnail {
    height: 200px !important;
  }

  .blog-card-content,
  .post-content {
    padding: 16px !important;
  }

  .blog-card-title,
  .post-title {
    font-size: 18px !important;
    word-break: break-word !important;
  }

  .blog-card-meta,
  .post-meta {
    font-size: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .blog-card-excerpt,
  .post-excerpt {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Read more button */
  .read-more-btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  /* Pagination */
  .pagination,
  .blog-pagination {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  .pagination a,
  .page-numbers {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
  }
}

/* ============================================
   CAREERS PAGE
   ============================================ */
@media (max-width: 768px) {
  .careers-hero {
    padding: 40px 16px !important;
  }

  .job-listings,
  .careers-grid {
    gap: 20px !important;
  }

  .job-card,
  .career-item {
    padding: 20px !important;
  }

  .job-card h3,
  .career-title {
    font-size: 18px !important;
  }

  .job-card p,
  .career-description {
    font-size: 14px !important;
  }

  .apply-btn,
  .job-apply-btn {
    width: 100% !important;
    padding: 12px 20px !important;
  }
}

/* ============================================
   HELP DESK PAGE (Turkish)
   ============================================ */
@media (max-width: 768px) {
  .help-desk-hero h1 {
    font-size: clamp(24px, 5vw, 40px) !important;
    word-break: break-word !important;
  }

  .help-desk-content {
    padding: 30px 16px !important;
  }

  .help-desk-banner img {
    width: 100% !important;
    height: auto !important;
  }

  /* FAQ accordion */
  .faq-accordion {
    gap: 12px !important;
  }

  .faq-item {
    padding: 16px !important;
  }

  .faq-question {
    font-size: 16px !important;
    padding-right: 30px !important;
  }

  .faq-answer {
    font-size: 14px !important;
    padding-top: 12px !important;
  }
}

/* ============================================
   TERMS OF USE / PRIVACY POLICY PAGES
   ============================================ */
@media (max-width: 768px) {
  .terms-content,
  .legal-content,
  .privacy-content {
    max-width: 100% !important;
    padding: 30px 16px !important;
  }

  .terms-content h1,
  .legal-content h1 {
    font-size: clamp(24px, 5vw, 36px) !important;
  }

  .terms-content h2,
  .legal-content h2 {
    font-size: clamp(20px, 4vw, 28px) !important;
    margin: 24px 0 12px 0 !important;
  }

  .terms-content p,
  .legal-content p {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  .terms-content ul,
  .terms-content ol,
  .legal-content ul,
  .legal-content ol {
    padding-left: 20px !important;
  }

  .terms-content li,
  .legal-content li {
    font-size: 15px !important;
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 480px) {
  .terms-content,
  .legal-content,
  .privacy-content {
    padding: 20px 12px !important;
  }

  .terms-content p,
  .legal-content p {
    font-size: 14px !important;
  }
}

/* ============================================
   SINGLE POST / SINGLE PRACTICE AREA
   ============================================ */
@media (max-width: 768px) {
  .single-post-content,
  .single-practice-content,
  .entry-content {
    padding: 30px 16px !important;
  }

  .entry-content h1 {
    font-size: clamp(24px, 5vw, 36px) !important;
  }

  .entry-content h2 {
    font-size: clamp(20px, 4vw, 28px) !important;
  }

  .entry-content h3 {
    font-size: clamp(18px, 3.5vw, 24px) !important;
  }

  .entry-content p {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

  .entry-content img {
    width: 100% !important;
    height: auto !important;
    margin: 20px 0 !important;
  }

  /* Sidebar - stack below content on mobile */
  .content-with-sidebar {
    flex-direction: column !important;
  }

  .sidebar {
    width: 100% !important;
    margin-top: 40px !important;
  }
}

/* ============================================
   VISA ELIGIBILITY SECTION (Find Your Perfect U.S. Visa Match)
   ============================================ */
@media (max-width: 1200px) {
  /* Main flex container */
  .visa-section-bg .flex.gap-16.items-start {
    gap: 32px !important;
  }

  /* Left card */
  .visa-section-bg .w-\[624px\].h-\[863px\] {
    width: 50% !important;
    height: auto !important;
    min-height: 600px;
  }

  /* Right form */
  .visa-section-bg .w-\[624px\].shrink-0.flex.flex-col {
    width: 50% !important;
    padding: 32px !important;
  }
}

@media (max-width: 1024px) {
  /* Stack vertically */
  .visa-section-bg .flex.gap-16.items-start {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Left card - full width */
  .visa-section-bg .w-\[624px\].h-\[863px\] {
    width: 100% !important;
    max-width: 600px;
    height: auto !important;
    min-height: 500px;
  }

  /* Content positioning */
  .visa-section-bg .absolute.left-0.top-\[249px\] {
    position: relative !important;
    top: auto !important;
    padding: 40px 24px !important;
  }

  /* Quote mark - hide */
  .visa-section-bg .absolute.left-\[490px\].top-\[113px\] {
    display: none !important;
  }

  /* Right form - full width */
  .visa-section-bg .w-\[624px\].shrink-0.flex.flex-col {
    width: 100% !important;
    max-width: 600px;
    padding: 32px !important;
  }
}

@media (max-width: 768px) {
  .visa-section-bg .px-16.py-28 {
    padding: 48px 24px !important;
  }

  .visa-section-bg .w-\[624px\].h-\[863px\] {
    min-height: auto !important;
    padding: 32px 20px !important;
  }

  .visa-section-bg .absolute.left-0.top-\[249px\] {
    padding: 24px 16px !important;
  }

  .visa-section-bg .w-\[624px\].shrink-0.flex.flex-col {
    padding: 24px !important;
    gap: 24px !important;
  }

  .visa-section-bg .heading-2-accent {
    font-size: 28px !important;
  }

  .visa-section-bg .body-lg-accent {
    font-size: 16px !important;
  }

  /* Step indicator */
  .visa-section-bg .step-line {
    width: 40px !important;
  }

  /* Result area */
  .visa-section-bg .w-\[304px\] {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .visa-section-bg .px-16.py-28 {
    padding: 32px 16px !important;
  }

  .visa-section-bg .w-\[624px\].h-\[863px\] {
    padding: 24px 16px !important;
  }

  .visa-section-bg .w-\[624px\].shrink-0.flex.flex-col {
    padding: 20px !important;
    gap: 20px !important;
  }

  .visa-section-bg .heading-2-accent {
    font-size: 24px !important;
  }

  .visa-section-bg .step-line {
    width: 30px !important;
  }

  /* Buttons */
  .visa-section-bg .flex.gap-4 button {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
}

/* ============================================
   GOOGLE REVIEWS SECTION (Over 1,000+ Google Reviews)
   ============================================ */
@media (max-width: 1200px) {
  /* Main container */
  .reviews-section-bg .w-\[1440px\] {
    width: 100% !important;
    max-width: 100%;
  }

  .reviews-section-bg .w-\[1312px\] {
    width: 100% !important;
  }

  /* Reviews carousel container */
  .reviews-section-bg .w-\[1556px\] {
    width: 100% !important;
  }

  /* Description width */
  .reviews-section-bg .w-\[616px\] {
    width: 100% !important;
    max-width: 616px;
  }

  /* Button width */
  .reviews-section-bg .w-\[259px\] {
    width: auto !important;
    min-width: 200px;
  }

  /* Review cards */
  .reviews-section-bg .w-\[768px\] {
    width: calc(50% - 10px) !important;
    min-width: 350px;
  }
}

@media (max-width: 1024px) {
  .reviews-section-bg {
    height: auto !important;
  }

  .reviews-section-bg .h-\[814px\] {
    height: auto !important;
  }

  .reviews-section-bg .px-\[64px\].py-\[112px\] {
    padding: 64px 32px !important;
  }

  /* Reviews carousel - horizontal scroll */
  .reviews-section-bg .h-\[278px\] {
    height: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 20px;
  }

  .reviews-section-bg .h-\[278px\]::-webkit-scrollbar {
    display: none;
  }

  .reviews-section-bg .absolute.left-0.top-0.flex.gap-\[20px\] {
    position: relative !important;
    width: max-content !important;
  }

  /* Review cards */
  .reviews-section-bg .w-\[768px\] {
    width: 400px !important;
    min-width: 400px !important;
  }

  /* Hide fade gradient */
  .reviews-section-bg .reviews-fade-gradient {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .reviews-section-bg .px-\[64px\].py-\[112px\] {
    padding: 48px 24px !important;
  }

  .reviews-section-bg .gap-\[64px\] {
    gap: 32px !important;
  }

  .reviews-section-bg .gap-\[20px\] {
    gap: 16px !important;
  }

  /* Review cards - smaller */
  .reviews-section-bg .w-\[768px\] {
    width: 320px !important;
    min-width: 320px !important;
    padding: 16px !important;
  }

  /* Title */
  .reviews-section-bg .heading-2-white {
    font-size: 32px !important;
  }

  /* Description */
  .reviews-section-bg .body-lg-white {
    font-size: 16px !important;
  }

  /* Review content */
  .review-author {
    font-size: 14px !important;
  }

  .review-date {
    font-size: 12px !important;
  }

  /* Stars smaller */
  .reviews-section-bg .w-\[116px\] {
    width: auto !important;
  }

  .reviews-section-bg .w-\[116px\] svg {
    width: 18px !important;
    height: 16px !important;
  }
}

@media (max-width: 480px) {
  .reviews-section-bg .px-\[64px\].py-\[112px\] {
    padding: 40px 16px !important;
  }

  .reviews-section-bg .gap-\[64px\] {
    gap: 24px !important;
  }

  /* Review cards */
  .reviews-section-bg .w-\[768px\] {
    width: 280px !important;
    min-width: 280px !important;
    padding: 14px !important;
  }

  .reviews-section-bg .heading-2-white {
    font-size: 28px !important;
  }

  /* Avatar smaller */
  .reviews-section-bg .w-\[48px\].h-\[48px\] {
    width: 36px !important;
    height: 36px !important;
  }

  /* Button */
  .reviews-section-bg .w-\[259px\] {
    width: 100% !important;
    max-width: 250px;
  }
}

/* ============================================
   TESTIMONIAL VIDEOS SECTION
   ============================================ */
@media (max-width: 1200px) {
  /* Main video player */
  .bg-testimonial-gradient .w-\[744px\] {
    width: 600px !important;
  }

  .bg-testimonial-gradient .h-\[396px\] {
    height: 320px !important;
  }

  /* Thumbnail sidebar */
  .bg-testimonial-gradient .w-\[100px\] {
    width: 80px !important;
  }

  .bg-testimonial-gradient .h-\[120px\] {
    height: 95px !important;
  }
}

@media (max-width: 1024px) {
  .bg-testimonial-gradient .px-\[64px\].py-\[56px\] {
    padding: 48px 32px !important;
  }

  /* Main video player */
  .bg-testimonial-gradient .w-\[744px\] {
    width: 500px !important;
  }

  .bg-testimonial-gradient .h-\[396px\] {
    height: 280px !important;
  }

  /* Arrows smaller */
  .bg-testimonial-gradient button svg[width="48"] {
    width: 40px !important;
    height: 40px !important;
  }

  /* Thumbnail sidebar - hide on tablet, show below */
  .bg-testimonial-gradient .flex.flex-col.gap-3.flex-shrink-0 {
    display: none !important;
  }

  /* Title */
  .bg-testimonial-gradient .text-\[48px\] {
    font-size: 36px !important;
  }
}

@media (max-width: 768px) {
  .bg-testimonial-gradient .px-\[64px\].py-\[56px\] {
    padding: 40px 24px !important;
  }

  .bg-testimonial-gradient .gap-16 {
    gap: 24px !important;
  }

  /* Video container - full width */
  .bg-testimonial-gradient .flex.items-center.justify-center.gap-6 {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Hide side arrows, show bottom controls */
  .bg-testimonial-gradient .flex.items-center.justify-center.gap-6 > button:first-child,
  .bg-testimonial-gradient .flex.items-center.justify-center.gap-6 > button:last-child {
    display: none !important;
  }

  /* Main video player - full width */
  .bg-testimonial-gradient .w-\[744px\] {
    width: 100% !important;
    max-width: 100%;
  }

  .bg-testimonial-gradient .h-\[396px\] {
    height: 220px !important;
  }

  /* Title */
  .bg-testimonial-gradient .text-\[48px\] {
    font-size: 32px !important;
  }

  .bg-testimonial-gradient .text-\[18px\] {
    font-size: 16px !important;
  }

  /* Play button smaller */
  .bg-testimonial-gradient .w-20.h-20 {
    width: 60px !important;
    height: 60px !important;
  }

  .bg-testimonial-gradient .w-20.h-20 svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Video title overlay */
  .bg-testimonial-gradient .text-\[20px\] {
    font-size: 16px !important;
  }

  .bg-testimonial-gradient .p-6 {
    padding: 16px !important;
  }
}

@media (max-width: 480px) {
  .bg-testimonial-gradient .px-\[64px\].py-\[56px\] {
    padding: 32px 16px !important;
  }

  .bg-testimonial-gradient .gap-16 {
    gap: 20px !important;
  }

  /* Video player */
  .bg-testimonial-gradient .h-\[396px\] {
    height: 200px !important;
  }

  /* Title */
  .bg-testimonial-gradient .text-\[48px\] {
    font-size: 26px !important;
  }

  .bg-testimonial-gradient .text-\[18px\] {
    font-size: 15px !important;
  }

  /* Play button */
  .bg-testimonial-gradient .w-20.h-20 {
    width: 50px !important;
    height: 50px !important;
  }

  .bg-testimonial-gradient .w-20.h-20 svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ============================================
   FAQ SECTION (Homepage & Help Desk)
   ============================================ */
@media (max-width: 768px) {
  .faq-section {
    padding: 40px 16px !important;
  }

  .faq-container {
    gap: 12px !important;
  }

  .faq-item,
  .accordion-item {
    border-radius: 8px !important;
  }

  .faq-question,
  .accordion-header {
    padding: 16px !important;
    font-size: 16px !important;
  }

  .faq-answer,
  .accordion-content {
    padding: 0 16px 16px !important;
    font-size: 14px !important;
  }

  .faq-icon,
  .accordion-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ============================================
   CTA SECTIONS
   ============================================ */
@media (max-width: 768px) {
  .cta-section {
    padding: 40px 16px !important;
    text-align: center !important;
  }

  .cta-content {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center !important;
  }

  .cta-title {
    font-size: clamp(24px, 5vw, 36px) !important;
  }

  .cta-description {
    font-size: 15px !important;
  }

  .cta-button {
    width: 100% !important;
    max-width: 300px !important;
    padding: 14px 24px !important;
  }
}

/* ==========================================================================
   10. PRINT STYLES
   ========================================================================== */
@media print {
  .site-header,
  .site-footer,
  .mobile-menu,
  .mobile-menu-button,
  button,
  .hero-form-glass,
  video {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: black;
    background: white;
  }

  a {
    color: black;
    text-decoration: underline;
  }
}