/* IVORY PHARMA EXPORT - Responsive CSS *//* Mobile-First Media Queries for All Breakpoints *//* Base styles are mobile-first (320px+) *//* Professional mobile-first enhancements *//* Enhanced mobile typography */@media (max-width: 374px) {:root {--font-size-base: 0.9375rem;/* 15px for very small screens */} .hero-title {font-size: var(--font-size-2xl) !important;line-height: 1.2;} .hero-subtitle {font-size: var(--font-size-lg) !important;letter-spacing: 0.1em;}}/* Small Mobile Devices (375px+) */@media (min-width: 375px) {.container {padding: 0 var(--space-3);} h1 {font-size: var(--font-size-3xl);} h2 {font-size: var(--font-size-2xl);} /* Header optimizations for small mobile */ .header-main {flex-wrap: wrap;gap: var(--space-2);min-height: auto;padding: var(--space-1) 0;} .navigation {order: 3;width: 100%;justify-content: flex-start;} .nav-menu {gap: var(--space-2);flex-wrap: wrap;} .header-actions {order: 2;gap: var(--space-2);} .mobile-menu-toggle {display: block;} /* Navigation improvements */ .nav-menu {gap: var(--space-1);} .nav-link {padding: var(--space-1) var(--space-2);font-size: var(--font-size-sm);}}/* Large Mobile Devices (425px+) */@media (min-width: 425px) {:root {--font-size-base: 1.0625rem;/* 17px */} .container {padding: 0 var(--space-4);}}/* Tablet Portrait (768px+) */@media (min-width: 768px) {:root {--font-size-base: 1.125rem;/* 18px */ --font-size-lg: 1.25rem;/* 20px */ --font-size-xl: 1.5rem;/* 24px */ --font-size-2xl: 1.875rem;/* 30px */ --font-size-3xl: 2.25rem;/* 36px */ --font-size-4xl: 2.75rem;/* 44px */} body {font-size: var(--font-size-base);} .container {padding: 0 var(--space-5);} /* Header improvements for tablet */ .header-main {flex-wrap: nowrap;gap: var(--space-4);} .navigation {order: 0;width: auto;justify-content: center;} .header-actions {order: 0;} .mobile-menu-toggle {display: none;} /* Navigation improvements */ .nav-menu {gap: var(--space-2);} .nav-link {padding: var(--space-2) var(--space-3);font-size: var(--font-size-base);} /* Grid adjustments for tablet */ .grid {gap: var(--space-3);} /* Tablet-specific grid classes */ .md\:grid-cols-1 {grid-template-columns: 1fr;} .md\:grid-cols-2 {grid-template-columns: repeat(2, 1fr);} .md\:grid-cols-3 {grid-template-columns: repeat(3, 1fr);} .md\:grid-cols-4 {grid-template-columns: repeat(4, 1fr);} .md\:grid-cols-6 {grid-template-columns: repeat(6, 1fr);} .md\:grid-cols-12 {grid-template-columns: repeat(12, 1fr);} .md\:col-span-1 {grid-column: span 1;} .md\:col-span-2 {grid-column: span 2;} .md\:col-span-3 {grid-column: span 3;} .md\:col-span-4 {grid-column: span 4;} .md\:col-span-6 {grid-column: span 6;} .md\:col-span-8 {grid-column: span 8;} .md\:col-span-12 {grid-column: span 12;} /* Flexbox utilities for tablet */ .md\:flex {display: flex;} .md\:flex-row {flex-direction: row;} .md\:flex-col {flex-direction: column;} .md\:items-center {align-items: center;} .md\:justify-between {justify-content: space-between;} .md\:justify-center {justify-content: center;} /* Text utilities for tablet */ .md\:text-left {text-align: left;} .md\:text-center {text-align: center;} .md\:text-right {text-align: right;} .md\:text-lg {font-size: var(--font-size-lg);} .md\:text-xl {font-size: var(--font-size-xl);} .md\:text-2xl {font-size: var(--font-size-2xl);} .md\:text-3xl {font-size: var(--font-size-3xl);} /* Spacing utilities for tablet */ .md\:p-4 {padding: var(--space-4);} .md\:p-6 {padding: var(--space-6);} .md\:px-6 {padding-left: var(--space-6);padding-right: var(--space-6);} .md\:py-6 {padding-top: var(--space-6);padding-bottom: var(--space-6);} .md\:m-4 {margin: var(--space-4);} .md\:m-6 {margin: var(--space-6);} .md\:mt-6 {margin-top: var(--space-6);} .md\:mb-6 {margin-bottom: var(--space-6);} /* Display utilities for tablet */ .md\:block {display: block;} .md\:hidden {display: none;} .md\:inline-block {display: inline-block;}}/* Tablet Landscape (1024px+) */@media (min-width: 1024px) {.container {padding: 0 var(--space-6);} /* Grid adjustments for desktop */ .grid {gap: var(--space-4);} /* Desktop-specific grid classes */ .lg\:grid-cols-1 {grid-template-columns: 1fr;} .lg\:grid-cols-2 {grid-template-columns: repeat(2, 1fr);} .lg\:grid-cols-3 {grid-template-columns: repeat(3, 1fr);} .lg\:grid-cols-4 {grid-template-columns: repeat(4, 1fr);} .lg\:grid-cols-5 {grid-template-columns: repeat(5, 1fr);} .lg\:grid-cols-6 {grid-template-columns: repeat(6, 1fr);} .lg\:grid-cols-12 {grid-template-columns: repeat(12, 1fr);} .lg\:col-span-1 {grid-column: span 1;} .lg\:col-span-2 {grid-column: span 2;} .lg\:col-span-3 {grid-column: span 3;} .lg\:col-span-4 {grid-column: span 4;} .lg\:col-span-5 {grid-column: span 5;} .lg\:col-span-6 {grid-column: span 6;} .lg\:col-span-8 {grid-column: span 8;} .lg\:col-span-9 {grid-column: span 9;} .lg\:col-span-10 {grid-column: span 10;} .lg\:col-span-12 {grid-column: span 12;} /* Flexbox utilities for desktop */ .lg\:flex {display: flex;} .lg\:flex-row {flex-direction: row;} .lg\:flex-col {flex-direction: column;} .lg\:items-center {align-items: center;} .lg\:items-start {align-items: flex-start;} .lg\:justify-between {justify-content: space-between;} .lg\:justify-center {justify-content: center;} .lg\:justify-start {justify-content: flex-start;} /* Text utilities for desktop */ .lg\:text-left {text-align: left;} .lg\:text-center {text-align: center;} .lg\:text-right {text-align: right;} .lg\:text-xl {font-size: var(--font-size-xl);} .lg\:text-2xl {font-size: var(--font-size-2xl);} .lg\:text-3xl {font-size: var(--font-size-3xl);} .lg\:text-4xl {font-size: var(--font-size-4xl);} /* Spacing utilities for desktop */ .lg\:p-6 {padding: var(--space-6);} .lg\:p-8 {padding: var(--space-8);} .lg\:px-8 {padding-left: var(--space-8);padding-right: var(--space-8);} .lg\:py-8 {padding-top: var(--space-8);padding-bottom: var(--space-8);} .lg\:m-6 {margin: var(--space-6);} .lg\:m-8 {margin: var(--space-8);} .lg\:mt-8 {margin-top: var(--space-8);} .lg\:mb-8 {margin-bottom: var(--space-8);} /* Display utilities for desktop */ .lg\:block {display: block;} .lg\:hidden {display: none;} .lg\:inline-block {display: inline-block;}}/* Large Desktop (1280px+) */@media (min-width: 1280px) {.container {max-width: 1200;padding: 0 var(--space-8);} /* Extra large desktop grid classes */ .xl\:grid-cols-5 {grid-template-columns: repeat(5, 1fr);} .xl\:grid-cols-6 {grid-template-columns: repeat(6, 1fr);} .xl\:col-span-5 {grid-column: span 5;} .xl\:col-span-7 {grid-column: span 7;} /* Extra spacing for large screens */ .xl\:p-10 {padding: var(--space-10);} .xl\:px-10 {padding-left: var(--space-10);padding-right: var(--space-10);} .xl\:py-10 {padding-top: var(--space-10);padding-bottom: var(--space-10);}}/* Extra Large Desktop (1440px+) */@media (min-width: 1440px) {.container {max-width: 1200px;}}/* Ultra Wide Desktop (1920px+) */@media (min-width: 1920px) {.container {max-width: 1600px;}}/* High DPI / Retina Display Optimizations */@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {/* Optimize for high-resolution displays */ body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}}/* Print Styles */@media print {* {background: transparent !important;color: black !important;box-shadow: none !important;text-shadow: none !important;} body {font-size: 12pt;line-height: 1.4;} h1, h2, h3, h4, h5, h6 {page-break-after: avoid;color: black !important;} p {orphans: 3;widows: 3;} .container {max-width: none;padding: 0;} .no-print {display: none !important;}}/* Reduced Motion Preferences */@media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}}/* Dark Mode Support (if needed in future) */@media (prefers-color-scheme: dark) {/* Dark mode styles can be added here if needed */ /* Currently not required for pharmaceutical business site */}/* Landscape Orientation Adjustments */@media (orientation: landscape) and (max-height: 500px) {/* Adjustments for landscape mobile devices */ .container {padding: 0 var(--space-2);} h1 {font-size: var(--font-size-xl);} h2 {font-size: var(--font-size-lg);}}/* Safari-specific optimizations */@supports (-webkit-appearance: none) {/* Safari-specific styles */ input[type="search"] {-webkit-appearance: none;} input[type="submit"], input[type="button"], button {-webkit-appearance: none;}}/* Chrome-specific optimizations */@supports (-webkit-background-clip: text) {/* Chrome-specific styles if needed */}/* Focus-visible support for better accessibility */@supports selector(:focus-visible) {*:focus {outline: none;} *:focus-visible {outline: 2px solid var(--primary-blue);outline-offset: 2px;}}/* Hero Section Responsive Styles *//* Small Mobile Devices (375px+) */@media (min-width: 375px) {.hero-title {font-size: var(--font-size-4xl);} .timeline-container {gap: var(--space-4);}}/* Large Mobile Devices (425px+) */@media (min-width: 425px) {.hero {padding: var(--space-10) 0 var(--space-8) 0;} .hero-description {font-size: var(--font-size-xl);} .overview-stats {grid-template-columns: repeat(2, 1fr);gap: var(--space-3);}}/* Tablet Portrait (768px+) */@media (min-width: 768px) {.hero-title {font-size: 3.5rem;} .hero-subtitle {font-size: var(--font-size-2xl);} .hero-description {font-size: var(--font-size-xl);max-width: 800px;} .timeline-container {grid-template-columns: 1fr;gap: var(--space-6);} .timeline-item {gap: var(--space-6);} .timeline-marker {width: 40px;height: 40px;} .timeline-item:not(:last-child)::after {left: 19px;top: 50px;} .overview-grid {grid-template-columns: 2fr 1fr;gap: var(--space-10);} .overview-content h2 {text-align: left;} .overview-description {text-align: left;margin-left: 0;margin-right: 0;} .overview-actions {justify-content: flex-start;} .overview-highlights {grid-template-columns: 1fr;gap: var(--space-3);} .highlight-item {text-align: left;padding: var(--space-3);} .overview-stats {grid-template-columns: repeat(2, 1fr);gap: var(--space-3);}}/* Tablet Landscape (1024px+) */@media (min-width: 1024px) {.hero {padding: var(--space-10) 0;} .hero-content {margin-bottom: var(--space-10);} .hero-title {font-size: 4rem;} .hero-subtitle {font-size: var(--font-size-3xl);} .timeline-container {grid-template-columns: 1fr 1fr;gap: var(--space-8);max-width: 1000px;} .timeline-item {flex-direction: column;text-align: center;gap: var(--space-4);} .timeline-item:not(:last-child)::after {display: none;} .timeline-marker {align-self: center;width: 48px;height: 48px;} .overview-highlights {grid-template-columns: repeat(3, 1fr);gap: var(--space-4);} .overview-stats {grid-template-columns: repeat(2, 1fr);gap: var(--space-4);}}/* Large Desktop (1280px+) */@media (min-width: 1280px) {.hero-title {font-size: 4.5rem;} .hero-actions .btn {padding: var(--space-4) var(--space-8);font-size: var(--font-size-xl);} .timeline-title {font-size: var(--font-size-3xl);} .overview-stats {grid-template-columns: repeat(4, 1fr);}}/* Mobile-specific responsive improvements */@media (max-width: 767px) {/* Contact form responsive improvements */ .contact-form {padding: var(--space-4);margin: var(--space-2);} .contact-form .form-row {grid-template-columns: 1fr;gap: var(--space-2);} .form-actions {flex-direction: column;gap: var(--space-2);} .form-actions .btn {width: 100%;} /* CAPTCHA responsive improvements */ .captcha-container {flex-direction: column;align-items: stretch;gap: var(--space-2);} .captcha-question {text-align: center;min-width: auto;} .captcha-container input {max-width: none;} /* Contact grid responsive */ .contact-grid {grid-template-columns: 1fr;gap: var(--space-4);} /* Product grid responsive */ .product-grid {grid-template-columns: 1fr;gap: var(--space-3);} /* Search bar responsive */ .search-bar {flex-direction: column;gap: var(--space-2);} .search-btn {width: 100%;} /* Filter buttons responsive */ .filter-buttons {justify-content: flex-start;gap: var(--space-1);} .filter-btn {font-size: var(--font-size-xs);padding: var(--space-1) var(--space-2);} /* Hero section mobile improvements */ .hero-actions {flex-direction: column;align-items: center;} .hero-actions .btn {width: 100%;max-width: 280px;} /* Timeline mobile improvements */ .timeline-container {gap: var(--space-4);} .timeline-item {flex-direction: column;text-align: center;gap: var(--space-2);} .timeline-item:not(:last-child)::after {display: none;} .timeline-marker {align-self: center;} /* Footer responsive improvements */ .footer-content {grid-template-columns: 1fr;gap: var(--space-4);} .footer-certifications {grid-template-columns: repeat(2, 1fr);gap: var(--space-2);} .footer-bottom-content {flex-direction: column;text-align: center;gap: var(--space-2);}}/* Tablet-specific improvements */@media (min-width: 768px) and (max-width: 1023px) {.contact-form .form-row {grid-template-columns: repeat(2, 1fr);} .product-grid {grid-template-columns: repeat(2, 1fr);} .hero-actions {flex-direction: row;justify-content: center;} .timeline-container {grid-template-columns: 1fr;gap: var(--space-6);} .footer-content {grid-template-columns: repeat(2, 1fr);}}/* Large screen improvements */@media (min-width: 1024px) {.contact-form .form-row {grid-template-columns: repeat(3, 1fr);} .product-grid {grid-template-columns: repeat(3, 1fr);} .timeline-container {grid-template-columns: repeat(2, 1fr);} .footer-content {grid-template-columns: repeat(4, 1fr);}}/* Extra large screen improvements */@media (min-width: 1280px) {.product-grid {grid-template-columns: repeat(4, 1fr);}}/* Landscape orientation fixes for mobile */@media (orientation: landscape) and (max-height: 500px) {.hero {padding: var(--space-4) 0;} .hero-content {margin-bottom: var(--space-4);} .milestone-timeline {padding: var(--space-4);} .timeline-title {font-size: var(--font-size-xl);margin-bottom: var(--space-4);} .header-top {padding: var(--space-1) 0;} .navigation {padding: var(--space-1) 0;}}/* High DPI optimizations */@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.flag-icon {image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;} .cert-image {image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;}}/* Touch device optimizations */@media (hover: none) and (pointer: coarse) {.btn {min-height: 44px;min-width: 44px;} .nav-link {min-height: 44px;display: flex;align-items: center;} .language-toggle {min-height: 44px;} .mobile-menu-toggle {min-height: 44px;min-width: 44px;} .filter-btn {min-height: 44px;} .form-input, .form-textarea, .form-select {min-height: 44px;}}/* Reduced motion preferences */@media (prefers-reduced-motion: reduce) {.hero::before {animation: none;} .timeline-marker {animation: none;} .loading {animation: none;}}