/* ===================================
   Responsive Styles
   Aluminum Casting Corporate Website
   Mobile-First Approach
   =================================== */

/* Base styles are mobile-first (320px+) defined in main.css */

/* ===================================
   Professional Layout Responsive Variables
   =================================== */
:root {
  /* Mobile defaults */
  --container-padding: var(--container-padding-mobile, 24px);
  --section-padding: var(--section-padding-mobile, 64px);
  --grid-gap: var(--grid-gap-mobile, 24px);
}

@media screen and (min-width: 768px) {
  :root {
    --container-padding: 48px;
    --section-padding: 80px;
    --grid-gap: 28px;
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --container-padding: var(--container-padding-desktop, 80px);
    --section-padding: var(--section-padding-desktop, 96px);
    --grid-gap: var(--grid-gap-desktop, 32px);
  }
}

/* ===================================
   Professional Grid System Responsive
   =================================== */
.pro-grid {
  display: grid;
  gap: var(--grid-gap);
}

/* Mobile: Single column */
.pro-grid-2,
.pro-grid-3,
.pro-grid-4 {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 768px) {
  .pro-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .pro-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .pro-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .pro-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .pro-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===================================
   Professional Typography Responsive
   =================================== */
@media screen and (max-width: 767px) {
  h1 {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    letter-spacing: -0.01em;
  }
  
  h2 {
    font-size: clamp(1.5rem, 4vw, 1.875rem);
  }
  
  h3 {
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
  }
}

/* Tablet Styles (768px - 1023px) */
@media screen and (min-width: 768px) {
    /* Typography adjustments for tablet */
    h1 {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 2.25rem;
    }
    
    h3 {
        font-size: 1.75rem;
    }
    
    /* Container adjustments */
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* Section spacing */
    section {
        padding: var(--spacing-xl) 0;
    }
    
    /* Hero section responsive adjustments */
    .hero-section {
        min-height: 500px;
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .hero-heading {
        font-size: 3rem;
    }
    
    .hero-subheading {
        font-size: 1.25rem;
    }
    
    /* Company Overview Section - Tablet */
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .intro-text {
        font-size: 1.125rem;
    }
    
    /* Services Section - Tablet */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .service-image-container {
        height: 200px;
    }
    
    /* Footer - Tablet (2 columns) */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .footer-section {
        min-height: 200px;
    }
    
    /* Grid adjustments for tablet - 2 columns */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Flexbox adjustments for tablet */
    .flex-row {
        flex-direction: row;
    }
    
    /* Two-column flex layout */
    .flex > * {
        flex: 1 1 calc(50% - var(--spacing-md));
        min-width: 250px;
    }
}

/* Desktop Styles (1024px+) */
@media screen and (min-width: 1024px) {
    /* Typography adjustments for desktop */
    h1 {
        font-size: 3.5rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }
    
    h3 {
        font-size: 2rem;
    }
    
    /* Container adjustments */
    .container {
        padding: 0 var(--spacing-lg);
    }
    
    /* Hero section responsive adjustments */
    .hero-section {
        min-height: 600px;
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    
    .hero-heading {
        font-size: 3.5rem;
    }
    
    .hero-subheading {
        font-size: 1.5rem;
    }
    
    /* Company Overview Section - Desktop */
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .intro-text {
        font-size: 1.25rem;
    }
    
    /* Services Section - Desktop */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .service-image-container {
        height: 220px;
    }
    
    /* Footer - Desktop (3 columns) */
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
        padding: 0 var(--spacing-lg);
    }
    
    .footer {
        padding: var(--spacing-xl) 0 0;
    }
    
    .footer-section {
        min-height: 250px;
    }
    
    .footer-heading {
        font-size: 1.375rem;
    }
    
    .footer-text {
        font-size: 1rem;
    }
    
    .footer-link {
        font-size: 1rem;
    }
    
    .footer-contact-item {
        font-size: 1rem;
    }
    
    /* Grid adjustments for desktop - full columns */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Flexbox adjustments for desktop */
    .flex > * {
        flex: 1 1 calc(33.333% - var(--spacing-md));
        min-width: 250px;
    }
    
    /* Specific two-column flex layout */
    .flex-2-col > * {
        flex: 1 1 calc(50% - var(--spacing-md));
    }
    
    /* Specific three-column flex layout */
    .flex-3-col > * {
        flex: 1 1 calc(33.333% - var(--spacing-md));
    }
    
    /* Specific four-column flex layout */
    .flex-4-col > * {
        flex: 1 1 calc(25% - var(--spacing-md));
    }
}

/* Mobile-only styles (max-width: 767px) */
@media screen and (max-width: 767px) {
    /* Force single column on mobile */
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
    
    /* Adjust spacing for mobile */
    section {
        padding: var(--spacing-md) 0;
    }
    
    /* Hero section mobile adjustments */
    .hero-section {
        min-height: 350px;
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .hero-heading {
        font-size: 1.75rem;
    }
    
    .hero-subheading {
        font-size: 1rem;
    }
    
    .hero-cta {
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }
    
    /* Company Overview Section - Mobile */
    .company-overview {
        padding: var(--spacing-lg) 0;
    }
    
    .section-heading {
        font-size: 1.75rem;
    }
    
    .subsection-heading {
        font-size: 1.25rem;
    }
    
    .intro-text {
        font-size: 1rem;
        text-align: left;
    }
    
    .highlights-grid {
        grid-template-columns: 1fr;
    }
    
    .highlight-title {
        font-size: 1.125rem;
    }
    
    /* Services Section - Mobile */
    .services-section {
        padding: var(--spacing-lg) 0;
    }
    
    .section-intro {
        font-size: 1rem;
        text-align: left;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .service-image-container {
        height: 200px;
    }
    
    .service-title {
        font-size: 1.25rem;
    }
    
    .service-description {
        font-size: 0.9375rem;
    }
    
    /* Footer - Mobile (single column) */
    .footer {
        padding: var(--spacing-lg) 0 0;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: 0 var(--spacing-md);
    }
    
    .footer-section {
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .footer-section:last-child {
        border-bottom: none;
    }
    
    .footer-heading {
        font-size: 1.125rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .footer-text {
        font-size: 0.875rem;
    }
    
    .footer-link {
        font-size: 0.875rem;
    }
    
    .footer-contact-item {
        font-size: 0.875rem;
    }
    
    .footer-bottom {
        margin-top: var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .footer-copyright {
        font-size: 0.8125rem;
    }
    
    /* Navigation: Show hamburger menu toggle on mobile */
    .nav-toggle {
        display: flex;
    }
    
    /* Navigation: Hide menu by default on mobile */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--background-color);
        flex-direction: column;
        padding: 80px var(--spacing-md) var(--spacing-md);
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        gap: 0;
        z-index: 1000;
    }
    
    /* Navigation: Show menu when open */
    .nav-menu--open {
        right: 0;
    }
    
    /* Navigation: Full-width items on mobile */
    .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }
    
    /* Navigation: Larger touch targets on mobile */
    .nav-link {
        padding: var(--spacing-sm) var(--spacing-md);
        display: block;
        width: 100%;
    }
    
    /* Navigation: Adjust active indicator for mobile */
    .nav-item--active .nav-link::after {
        left: var(--spacing-md);
        right: var(--spacing-md);
        bottom: 0;
    }
    
    /* Overlay for mobile menu */
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 999;
    }
    
    .nav-overlay--visible {
        opacity: 1;
        visibility: visible;
    }
}

/* Tablet and Desktop: Ensure hamburger is hidden */
@media screen and (min-width: 768px) {
    .nav-toggle {
        display: none;
    }
    
    .nav-menu {
        display: flex;
        position: static;
        width: auto;
        height: auto;
        flex-direction: row;
        padding: 0;
        box-shadow: none;
        background-color: transparent;
    }
    
    .nav-overlay {
        display: none;
    }
}

/* Placeholder for additional responsive styles */

/* Smooth transitions for layout changes */
.grid,
.grid-2,
.grid-3,
.grid-4,
.flex,
.flex-row,
.flex-column {
    transition: all 0.3s ease;
}

/* Responsive spacing utilities */
@media screen and (min-width: 768px) {
    .tablet-hide {
        display: none !important;
    }
    
    .tablet-show {
        display: block !important;
    }
}

@media screen and (max-width: 767px) {
    .mobile-hide {
        display: none !important;
    }
    
    .mobile-show {
        display: block !important;
    }
}

@media screen and (min-width: 1024px) {
    .desktop-hide {
        display: none !important;
    }
    
    .desktop-show {
        display: block !important;
    }
}

/* Responsive text alignment */
@media screen and (max-width: 767px) {
    .mobile-text-center {
        text-align: center;
    }
    
    .mobile-text-left {
        text-align: left;
    }
}

@media screen and (min-width: 768px) {
    .tablet-text-center {
        text-align: center;
    }
    
    .tablet-text-left {
        text-align: left;
    }
}

/* Ensure smooth font scaling */
@media screen and (min-width: 320px) and (max-width: 767px) {
    html {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (767 - 320)));
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    html {
        font-size: calc(15px + (16 - 15) * ((100vw - 768px) / (1023 - 768)));
    }
}

/* Responsive padding utilities */
.responsive-padding {
    padding: var(--spacing-sm);
}

@media screen and (min-width: 768px) {
    .responsive-padding {
        padding: var(--spacing-md);
    }
}

@media screen and (min-width: 1024px) {
    .responsive-padding {
        padding: var(--spacing-lg);
    }
}

/* Responsive margin utilities */
.responsive-margin {
    margin: var(--spacing-sm);
}

@media screen and (min-width: 768px) {
    .responsive-margin {
        margin: var(--spacing-md);
    }
}

@media screen and (min-width: 1024px) {
    .responsive-margin {
        margin: var(--spacing-lg);
    }
}

/* Ensure content doesn't break at any viewport size */
@media screen and (min-width: 320px) {
    body {
        min-width: 320px;
    }
    
    /* Prevent text overflow */
    p, li, td, th {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Prevent pre and code blocks from causing overflow */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Additional breakpoint for very large screens */
@media screen and (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}

/* Print styles for better printing experience */
@media print {
    .nav-toggle,
    .nav-overlay {
        display: none !important;
    }
    
    .nav-menu {
        position: static !important;
        display: block !important;
    }
    
    body {
        font-size: 12pt;
    }
    
    h1 {
        font-size: 24pt;
    }
    
    h2 {
        font-size: 18pt;
    }
    
    h3 {
        font-size: 14pt;
    }
}

/* ===================================
   Corporate Page Responsive Styles
   =================================== */

/* Tablet Styles (768px - 1023px) */
@media screen and (min-width: 768px) {
    /* History Section - Tablet */
    .history-content {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .history-text {
        flex: 1;
        padding-right: var(--spacing-md);
    }
    
    .history-image {
        flex: 1;
        max-width: 50%;
    }
    
    /* Mission Section - Tablet (image on left) */
    .mission-content {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .mission-image {
        flex: 1;
        max-width: 50%;
        order: 1;
    }
    
    .mission-text {
        flex: 1;
        padding-left: var(--spacing-md);
        order: 2;
    }
    
    /* Vision Section - Tablet */
    .vision-content {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .vision-text {
        flex: 1;
        padding-right: var(--spacing-md);
    }
    
    .vision-image {
        flex: 1;
        max-width: 50%;
    }
    
    /* Values Section - Tablet (2 columns) */
    .values-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop Styles (1024px+) */
@media screen and (min-width: 1024px) {
    /* Corporate Section Spacing */
    .corporate-section {
        padding: 5rem 0;
    }
    
    /* History Section - Desktop */
    .history-content {
        gap: var(--spacing-lg);
    }
    
    .history-text {
        padding-right: var(--spacing-lg);
    }
    
    /* Mission Section - Desktop */
    .mission-content {
        gap: var(--spacing-lg);
    }
    
    .mission-text {
        padding-left: var(--spacing-lg);
    }
    
    /* Vision Section - Desktop */
    .vision-content {
        gap: var(--spacing-lg);
    }
    
    .vision-text {
        padding-right: var(--spacing-lg);
    }
    
    /* Values Section - Desktop (3 columns) */
    .values-content {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .value-item {
        padding: var(--spacing-lg);
    }
}

/* Mobile-only styles for corporate page (max-width: 767px) */
@media screen and (max-width: 767px) {
    /* Corporate Section Spacing */
    .corporate-section {
        padding: var(--spacing-lg) 0;
    }
    
    .corporate-section h1 {
        font-size: 1.75rem;
    }
    
    .corporate-section h2 {
        font-size: 1.5rem;
    }
    
    .corporate-section h3 {
        font-size: 1.25rem;
    }
    
    /* History Section - Mobile */
    .history-content {
        flex-direction: column;
    }
    
    .history-text {
        width: 100%;
    }
    
    .history-image {
        width: 100%;
    }
    
    /* Mission Section - Mobile */
    .mission-content {
        flex-direction: column;
    }
    
    .mission-image {
        width: 100%;
        order: 1;
    }
    
    .mission-text {
        width: 100%;
        order: 2;
    }
    
    /* Vision Section - Mobile */
    .vision-content {
        flex-direction: column;
    }
    
    .vision-text {
        width: 100%;
    }
    
    .vision-image {
        width: 100%;
    }
    
    /* Values Section - Mobile (1 column) */
    .values-content {
        grid-template-columns: 1fr;
    }
    
    .value-item {
        padding: var(--spacing-md);
    }
}

/* ===================================
   Production Page Responsive Styles
   =================================== */

/* Tablet Styles (768px - 1023px) */
@media screen and (min-width: 768px) {
    /* Process Content - Tablet */
    .process-content {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .process-text {
        flex: 1;
        padding-right: var(--spacing-md);
    }
    
    .process-image {
        flex: 1;
        max-width: 50%;
    }
    
    /* Reverse layout for alternating sections */
    .process-content.reverse {
        flex-direction: row-reverse;
    }
    
    .process-content.reverse .process-text {
        padding-right: 0;
        padding-left: var(--spacing-md);
    }
    
    /* Capabilities Grid - Tablet (2 columns) */
    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Specifications Grid - Tablet (2 columns) */
    .specifications-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Quality Content - Tablet */
    .quality-content {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .quality-text {
        flex: 1;
        padding-right: var(--spacing-md);
    }
    
    .quality-image {
        flex: 1;
        max-width: 40%;
    }
}

/* Desktop Styles (1024px+) */
@media screen and (min-width: 1024px) {
    /* Production Section Spacing */
    .production-section {
        padding: 5rem 0;
    }
    
    /* Process Content - Desktop */
    .process-content {
        gap: var(--spacing-lg);
    }
    
    .process-text {
        padding-right: var(--spacing-lg);
    }
    
    .process-content.reverse .process-text {
        padding-right: 0;
        padding-left: var(--spacing-lg);
    }
    
    /* Capabilities Grid - Desktop (3 columns) */
    .capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .capability-item {
        padding: var(--spacing-lg);
    }
    
    /* Specifications Grid - Desktop (2 columns) */
    .specifications-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .spec-category {
        padding: var(--spacing-lg);
    }
    
    /* Quality Content - Desktop */
    .quality-content {
        gap: var(--spacing-lg);
    }
    
    .quality-text {
        padding-right: var(--spacing-lg);
    }
}

/* Mobile-only styles for production page (max-width: 767px) */
@media screen and (max-width: 767px) {
    /* Production Section Spacing */
    .production-section {
        padding: var(--spacing-lg) 0;
    }
    
    .production-section h1 {
        font-size: 1.75rem;
    }
    
    .production-section h2 {
        font-size: 1.5rem;
    }
    
    .production-section h3 {
        font-size: 1.25rem;
    }
    
    /* Process Content - Mobile */
    .process-content {
        flex-direction: column;
    }
    
    .process-text {
        width: 100%;
    }
    
    .process-image {
        width: 100%;
    }
    
    .process-content.reverse {
        flex-direction: column;
    }
    
    .process-content.reverse .process-text {
        padding-left: 0;
    }
    
    /* Capabilities Grid - Mobile (1 column) */
    .capabilities-grid {
        grid-template-columns: 1fr;
    }
    
    .capability-item {
        padding: var(--spacing-md);
    }
    
    .capabilities-intro {
        font-size: 1rem;
        text-align: left;
    }
    
    /* Specifications Grid - Mobile (1 column) */
    .specifications-content {
        grid-template-columns: 1fr;
    }
    
    .spec-category {
        padding: var(--spacing-md);
    }
    
    /* Quality Content - Mobile */
    .quality-content {
        flex-direction: column;
    }
    
    .quality-text {
        width: 100%;
    }
    
    .quality-image {
        width: 100%;
    }
}

/* ===================================
   Machine Park Page Responsive Styles
   =================================== */

/* Tablet Styles (768px - 1023px) */
@media screen and (min-width: 768px) {
    /* Equipment Gallery - Tablet (2 columns) */
    .equipment-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .equipment-image-container {
        height: 220px;
    }
    
    /* Capabilities Overview - Tablet (2 columns) */
    .capabilities-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop Styles (1024px+) */
@media screen and (min-width: 1024px) {
    /* Machine Park Section Spacing */
    .machine-park-section {
        padding: 5rem 0;
    }
    
    /* Equipment Gallery - Desktop (3 columns) */
    .equipment-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .equipment-image-container {
        height: 240px;
    }
    
    .equipment-content {
        padding: var(--spacing-lg);
    }
    
    /* Capabilities Overview - Desktop (3 columns) */
    .capabilities-overview-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .capability-overview-item {
        padding: var(--spacing-lg);
    }
}

/* Mobile-only styles for machine park page (max-width: 767px) */
@media screen and (max-width: 767px) {
    /* Machine Park Section Spacing */
    .machine-park-section {
        padding: var(--spacing-lg) 0;
    }
    
    .machine-park-section h1 {
        font-size: 1.75rem;
    }
    
    .machine-park-section h2 {
        font-size: 1.5rem;
    }
    
    /* Equipment Gallery - Mobile (1 column) */
    .equipment-gallery {
        grid-template-columns: 1fr;
    }
    
    .equipment-image-container {
        height: 200px;
    }
    
    .equipment-title {
        font-size: 1.25rem;
    }
    
    .equipment-intro .intro-text {
        font-size: 1rem;
        text-align: left;
    }
    
    /* Capabilities Overview - Mobile (1 column) */
    .capabilities-overview-grid {
        grid-template-columns: 1fr;
    }
    
    .capability-overview-item {
        padding: var(--spacing-md);
    }
    
    .section-intro {
        font-size: 1rem;
        text-align: left;
    }
}

/* ===================================
   Contact Page Responsive Styles
   =================================== */

/* Tablet Styles (768px - 1023px) */
@media screen and (min-width: 768px) {
    /* Contact Header - Tablet */
    .contact-header-section h1 {
        font-size: 3rem;
    }
    
    .contact-intro {
        font-size: 1.25rem;
    }
    
    /* Contact Form - Tablet */
    .contact-form-container {
        padding: var(--spacing-xl);
    }
    
    /* Location Content - Tablet (side by side) */
    .location-content {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .location-map {
        flex: 1;
        max-width: 50%;
    }
    
    .location-details {
        flex: 1;
        padding-left: var(--spacing-lg);
    }
    
    /* Company Details Grid - Tablet (2 columns) */
    .company-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop Styles (1024px+) */
@media screen and (min-width: 1024px) {
    /* Contact Header - Desktop */
    .contact-header-section {
        padding: 5rem 0 var(--spacing-xl);
    }
    
    .contact-header-section h1 {
        font-size: 3.5rem;
    }
    
    .contact-intro {
        font-size: 1.375rem;
    }
    
    /* Contact Form Section - Desktop */
    .contact-form-section {
        padding: 5rem 0;
    }
    
    .contact-form-section h2 {
        font-size: 2.5rem;
    }
    
    /* Location Section - Desktop */
    .location-section {
        padding: 5rem 0;
    }
    
    .location-section h2 {
        font-size: 2.5rem;
    }
    
    .location-content {
        gap: var(--spacing-xl);
    }
    
    .location-details {
        padding-left: var(--spacing-xl);
    }
    
    /* Company Details Section - Desktop */
    .company-details-section {
        padding: 5rem 0;
    }
    
    .company-details-section h2 {
        font-size: 2.5rem;
    }
    
    /* Company Details Grid - Desktop (3 columns) */
    .company-details-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .detail-item {
        padding: var(--spacing-xl);
    }
}

/* Mobile-only styles for contact page (max-width: 767px) */
@media screen and (max-width: 767px) {
    /* Contact Header - Mobile */
    .contact-header-section {
        padding: var(--spacing-lg) 0;
    }
    
    .contact-header-section h1 {
        font-size: 1.75rem;
    }
    
    .contact-intro {
        font-size: 1rem;
        text-align: left;
    }
    
    /* Contact Form Section - Mobile */
    .contact-form-section {
        padding: var(--spacing-lg) 0;
    }
    
    .contact-form-section h2 {
        font-size: 1.5rem;
    }
    
    .contact-form-container {
        padding: var(--spacing-md);
    }
    
    /* Prevent zoom on iOS when focusing inputs */
    .form-input,
    .form-textarea {
        font-size: 16px;
    }
    
    /* Full width button on mobile */
    .form-actions .btn {
        width: 100%;
        min-width: auto;
    }
    
    /* Adjust form spacing on mobile */
    .contact-form {
        gap: var(--spacing-sm);
    }
    
    .form-group {
        margin-bottom: var(--spacing-xs);
    }
    
    /* Error messages more prominent on mobile */
    .error-message {
        font-size: 0.8125rem;
        margin-top: 0.375rem;
    }
    
    /* Success message on mobile */
    .success-message {
        font-size: 0.9375rem;
        padding: var(--spacing-sm);
    }
    
    /* Location Section - Mobile */
    .location-section {
        padding: var(--spacing-lg) 0;
    }
    
    .location-section h2 {
        font-size: 1.5rem;
    }
    
    .location-content {
        flex-direction: column;
    }
    
    .location-map {
        width: 100%;
    }
    
    .map-placeholder {
        height: 300px;
    }
    
    .location-details {
        width: 100%;
    }
    
    .location-details h3 {
        font-size: 1.25rem;
    }
    
    /* Company Details Section - Mobile */
    .company-details-section {
        padding: var(--spacing-lg) 0;
    }
    
    .company-details-section h2 {
        font-size: 1.5rem;
    }
    
    /* Company Details Grid - Mobile (1 column) */
    .company-details-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-item {
        padding: var(--spacing-md);
    }
    
    .detail-item h3 {
        font-size: 1.25rem;
    }
}