/* Ocean Freight CTA Section - Comprehensive Responsive Styles */

/* Small Mobile Phones (320px - 480px) */
@media (max-width: 480px) {
    .contact { padding: 60px 12px !important; min-height: auto !important; }
    .contact .contact-container { max-width: 100% !important; }
    .contact .contact-left { max-width: 100% !important; }
    .contact .contact-title { font-size: 1.75rem !important; }
    .contact .contact-subtitle { font-size: 14px !important; max-width: 100% !important; }
    .contact .contact-badge { gap: 8px !important; margin-bottom: 16px !important; }
    .contact .badge-line { width: 24px !important; }
    .contact .badge-text { font-size: 9px !important; }
    .contact div[style*="display: flex; gap: 20px"] { flex-direction: column !important; gap: 12px !important; margin-top: 24px !important; }
    .contact .hero-btn { min-width: 100% !important; min-height: 50px !important; font-size: 0.9rem !important; padding: 14px 24px !important; }
}

/* Medium Mobile Phones (481px - 640px) */
@media (min-width: 481px) and (max-width: 640px) {
    .contact { padding: 70px 16px !important; }
    .contact .contact-title { font-size: 2rem !important; }
    .contact .contact-subtitle { font-size: 15px !important; }
    .contact div[style*="display: flex; gap: 20px"] { flex-direction: column !important; gap: 14px !important; margin-top: 28px !important; }
    .contact .hero-btn { min-width: 100% !important; min-height: 52px !important; font-size: 0.95rem !important; }
}

/* Large Mobile Phones (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    .contact { padding: 80px 20px !important; }
    .contact .contact-title { font-size: 2.25rem !important; }
    .contact .contact-subtitle { font-size: 16px !important; }
    .contact div[style*="display: flex; gap: 20px"] { gap: 16px !important; margin-top: 32px !important; }
    .contact .hero-btn { min-width: 200px !important; min-height: 54px !important; font-size: 1rem !important; }
}

/* Small Tablets (769px - 834px) */
@media (min-width: 769px) and (max-width: 834px) {
    .contact { padding: 90px 24px !important; }
    .contact .contact-left { max-width: 700px !important; }
    .contact .contact-title { font-size: 2.5rem !important; }
    .contact .contact-subtitle { font-size: 16px !important; }
    .contact div[style*="display: flex; gap: 20px"] { gap: 18px !important; margin-top: 36px !important; }
    .contact .hero-btn { min-width: 220px !important; min-height: 56px !important; }
}

/* Medium Tablets (835px - 1024px) */
@media (min-width: 835px) and (max-width: 1024px) {
    .contact { padding: 100px 32px !important; }
    .contact .contact-left { max-width: 750px !important; }
    .contact .contact-title { font-size: 2.75rem !important; }
    .contact .contact-subtitle { font-size: 17px !important; }
    .contact div[style*="display: flex; gap: 20px"] { gap: 20px !important; margin-top: 38px !important; }
    .contact .hero-btn { min-width: 230px !important; min-height: 58px !important; }
}

/* Large Tablets (1025px - 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
    .contact { padding: 110px 40px !important; }
    .contact .contact-container { max-width: 1200px !important; }
    .contact .contact-left { max-width: 780px !important; }
    .contact .contact-title { font-size: 3rem !important; }
    .contact .contact-subtitle { font-size: 17px !important; }
    .contact div[style*="display: flex; gap: 20px"] { margin-top: 40px !important; }
    .contact .hero-btn { min-width: 240px !important; }
}

/* Small Laptops (1281px - 1440px) */
@media (min-width: 1281px) and (max-width: 1440px) {
    .contact { padding: 115px 40px !important; }
    .contact .contact-container { max-width: 1300px !important; }
    .contact .contact-left { max-width: 800px !important; }
    .contact .contact-title { font-size: 3.25rem !important; }
    .contact .contact-subtitle { font-size: 18px !important; }
}

/* Medium Laptops (1441px - 1920px) */
@media (min-width: 1441px) and (max-width: 1920px) {
    .contact { padding: 120px 40px !important; }
    .contact .contact-container { max-width: 1400px !important; }
    .contact .contact-left { max-width: 800px !important; }
    .contact .contact-title { font-size: 3.5rem !important; }
    .contact .contact-subtitle { font-size: 18px !important; }
    .contact div[style*="display: flex; gap: 20px"] { margin-top: 40px !important; }
    .contact .hero-btn { min-width: 250px !important; min-height: 60px !important; }
}

/* Large Laptops & Small Monitors (1921px - 2560px) */
@media (min-width: 1921px) and (max-width: 2560px) {
    .contact { padding: 140px 60px !important; }
    .contact .contact-container { max-width: 1600px !important; }
    .contact .contact-left { max-width: 900px !important; }
    .contact .contact-title { font-size: 4.5rem !important; }
    .contact .contact-subtitle { font-size: 22px !important; }
    .contact .contact-badge { gap: 16px !important; margin-bottom: 32px !important; }
    .contact .badge-line { width: 48px !important; }
    .contact .badge-text { font-size: 13px !important; }
    .contact div[style*="display: flex; gap: 20px"] { gap: 28px !important; margin-top: 56px !important; }
    .contact .hero-btn { min-width: 300px !important; min-height: 72px !important; font-size: 1.3rem !important; padding: 22px 45px !important; }
}

/* Medium Monitors (2561px - 3440px) */
@media (min-width: 2561px) and (max-width: 3440px) {
    .contact { padding: 160px 80px !important; }
    .contact .contact-container { max-width: 2000px !important; }
    .contact .contact-left { max-width: 1100px !important; }
    .contact .contact-title { font-size: 5.5rem !important; }
    .contact .contact-subtitle { font-size: 26px !important; }
    .contact .contact-badge { gap: 20px !important; margin-bottom: 40px !important; }
    .contact .badge-line { width: 56px !important; }
    .contact .badge-text { font-size: 15px !important; }
    .contact div[style*="display: flex; gap: 20px"] { gap: 32px !important; margin-top: 64px !important; }
    .contact .hero-btn { min-width: 360px !important; min-height: 84px !important; font-size: 1.5rem !important; padding: 26px 52px !important; }
}

/* Large Monitors (3441px - 5120px) */
@media (min-width: 3441px) and (max-width: 5120px) {
    .contact { padding: 180px 100px !important; }
    .contact .contact-container { max-width: 2400px !important; }
    .contact .contact-left { max-width: 1300px !important; }
    .contact .contact-title { font-size: 6.5rem !important; }
    .contact .contact-subtitle { font-size: 32px !important; }
    .contact .contact-badge { gap: 24px !important; margin-bottom: 48px !important; }
    .contact .badge-line { width: 64px !important; }
    .contact .badge-text { font-size: 17px !important; }
    .contact div[style*="display: flex; gap: 20px"] { gap: 40px !important; margin-top: 72px !important; }
    .contact .hero-btn { min-width: 420px !important; min-height: 96px !important; font-size: 1.7rem !important; padding: 30px 60px !important; }
}

/* 49" Odyssey OLED G9 G95SC (5120x1440) */
@media (min-width: 5120px) and (max-height: 1440px) {
    .contact { padding: 140px 120px !important; }
    .contact .contact-container { max-width: 3200px !important; }
    .contact .contact-left { max-width: 1500px !important; }
    .contact .contact-title { font-size: 7rem !important; }
    .contact .contact-subtitle { font-size: 36px !important; }
    .contact div[style*="display: flex; gap: 20px"] { gap: 48px !important; margin-top: 80px !important; }
    .contact .hero-btn { min-width: 480px !important; min-height: 108px !important; font-size: 1.9rem !important; padding: 34px 68px !important; }
}

/* 57" Odyssey Neo G9 (7680x2160) */
@media (min-width: 7680px) {
    .contact { padding: 200px 140px !important; }
    .contact .contact-container { max-width: 4000px !important; }
    .contact .contact-left { max-width: 1800px !important; }
    .contact .contact-title { font-size: 9rem !important; }
    .contact .contact-subtitle { font-size: 44px !important; }
    .contact .contact-badge { gap: 32px !important; margin-bottom: 64px !important; }
    .contact .badge-line { width: 80px !important; }
    .contact .badge-text { font-size: 22px !important; }
    .contact div[style*="display: flex; gap: 20px"] { gap: 56px !important; margin-top: 96px !important; }
    .contact .hero-btn { min-width: 560px !important; min-height: 128px !important; font-size: 2.2rem !important; padding: 40px 80px !important; }
}

/* Vertical/Portrait Monitors */
@media (orientation: portrait) and (min-width: 1080px) {
    .contact { padding: 100px 40px !important; }
    .contact .contact-title { font-size: 3rem !important; }
    .contact .contact-subtitle { font-size: 18px !important; }
    .contact div[style*="display: flex; gap: 20px"] { flex-direction: column !important; gap: 20px !important; }
    .contact .hero-btn { min-width: 100% !important; }
}

/* Ultra-wide Landscape Monitors */
@media (orientation: landscape) and (min-aspect-ratio: 21/9) {
    .contact .contact-container { max-width: 85vw !important; }
    .contact .contact-left { max-width: 70vw !important; }
}