/*================================================== RESPONSIVE.CSS ARCHON IMPEX FZ LLC ==================================================*/ /*================================================== LARGE DESKTOP ==================================================*/ @media (max-width:1400px){ .container{ width:92%; } .hero-left h1{ font-size:58px; } .section-title h2{ font-size:48px; } .page-hero h1{ font-size:56px; } .cta-box h2{ font-size:50px; } } /*================================================== LAPTOP ==================================================*/ @media (max-width:1200px){ .hero-grid{ grid-template-columns:1fr; gap:60px; } .hero-left{ text-align:center; } .hero-left p{ margin:auto auto 40px; } .hero-buttons{ justify-content:center; } .hero-right{ order:-1; } .about-grid{ grid-template-columns:1fr; } .about-image{ max-width:700px; margin:auto; } .map-grid{ grid-template-columns:1fr; } .map-image{ max-width:750px; margin:auto; } .footer-grid{ grid-template-columns:repeat(2,1fr); gap:50px; } .product-preview-grid{ grid-template-columns:repeat(2,1fr); } .why-grid{ grid-template-columns:repeat(2,1fr); } .contact-grid{ grid-template-columns:repeat(2,1fr); } .industry-grid{ grid-template-columns:repeat(2,1fr); } .overview-grid{ grid-template-columns:repeat(2,1fr); } .process-grid{ grid-template-columns:repeat(2,1fr); } .product-grid{ grid-template-columns:1fr; } } /*================================================== TABLETS ==================================================*/ @media (max-width:992px){ /*------------------------------ HEADER ------------------------------*/ .header .container{ height:80px; } .logo img{ width:180px; } .nav-links{ gap:25px; } .quote-btn{ padding:14px 28px; } /*------------------------------ HERO ------------------------------*/ .hero{ min-height:auto; padding:90px 0; } .hero-left h1{ font-size:48px; } .hero-left p{ font-size:18px; } .hero-right img{ max-width:500px; } /*------------------------------ GLOBAL ------------------------------*/ section{ padding:90px 0; } .section-title{ margin-bottom:60px; } .section-title h2{ font-size:42px; } /*------------------------------ ABOUT ------------------------------*/ .about-features{ grid-template-columns:1fr; } /*------------------------------ GRIDS ------------------------------*/ .product-preview-grid{ grid-template-columns:1fr; } .why-grid{ grid-template-columns:repeat(2,1fr); } .stats-grid{ grid-template-columns:repeat(2,1fr); } .industry-grid{ grid-template-columns:repeat(2,1fr); } .contact-grid{ grid-template-columns:repeat(2,1fr); } .footer-grid{ grid-template-columns:1fr; text-align:center; } .footer-logo{ margin:0 auto 25px; } .footer-column{ max-width:650px; margin:auto; } /*------------------------------ PRODUCT PAGE ------------------------------*/ .overview-grid{ grid-template-columns:repeat(2,1fr); } .process-grid{ grid-template-columns:repeat(2,1fr); } .product-card{ max-width:700px; margin:auto; } } /*================================================== MOBILE ==================================================*/ @media (max-width:768px){ /*================================================== HEADER ==================================================*/ .header .container{ height:75px; } .logo img{ width:160px; } .nav-links, .nav-actions{ display:none; } .menu-toggle{ display:flex; } /*================================================== HERO ==================================================*/ .hero{ padding:70px 0; } .hero-grid{ grid-template-columns:1fr; gap:45px; text-align:center; } .hero-left h1{ font-size:40px; line-height:1.2; } .hero-left p{ font-size:17px; max-width:100%; } .hero-buttons{ flex-direction:column; align-items:center; } .hero-buttons .btn-primary, .hero-buttons .btn-secondary{ width:260px; } /*================================================== GLOBAL ==================================================*/ section{ padding:70px 0; } .section-title{ margin-bottom:50px; } .section-title h2{ font-size:34px; } .section-title p{ font-size:16px; } /*================================================== ABOUT ==================================================*/ .about-grid{ grid-template-columns:1fr; gap:45px; } .about-content{ text-align:center; } .about-features{ grid-template-columns:1fr; } /*================================================== GRIDS ==================================================*/ .product-preview-grid, .why-grid, .stats-grid, .industry-grid, .contact-grid, .overview-grid, .process-grid, .product-grid{ grid-template-columns:1fr; } /*================================================== GLOBAL MAP ==================================================*/ .map-grid{ grid-template-columns:1fr; text-align:center; } .map-content ul{ grid-template-columns:1fr; } /*================================================== FOOTER ==================================================*/ .footer{ text-align:center; } .footer-grid{ grid-template-columns:1fr; gap:35px; } .footer-logo{ margin:0 auto 25px; } /*================================================== FLOATING BUTTONS ==================================================*/ .whatsapp-float{ width:58px; height:58px; right:18px; bottom:18px; } .back-to-top{ width:50px; height:50px; left:18px; bottom:18px; } } /*================================================== SMALL MOBILE ==================================================*/ @media (max-width:576px){ /*================================================== GLOBAL ==================================================*/ .container{ width:92%; } section{ padding:60px 0; } /*================================================== HEADER ==================================================*/ .header .container{ height:70px; } .logo img{ width:145px; } .menu-toggle{ font-size:26px; } /*================================================== HERO ==================================================*/ .hero{ padding:50px 0; } .hero-left span{ font-size:12px; letter-spacing:2px; } .hero-left h1{ font-size:32px; line-height:1.2; } .hero-left p{ font-size:16px; } .hero-buttons{ gap:15px; } .hero-buttons .btn-primary, .hero-buttons .btn-secondary{ width:100%; max-width:100%; } /*================================================== SECTION TITLES ==================================================*/ .section-title{ margin-bottom:40px; } .section-title span{ font-size:12px; letter-spacing:2px; } .section-title h2{ font-size:28px; line-height:1.2; } .section-title p{ font-size:15px; } /*================================================== ABOUT ==================================================*/ .about-content h2{ font-size:32px; } .about-content p{ font-size:15px; } .feature{ justify-content:center; } /*================================================== CARDS ==================================================*/ .preview-content, .contact-card, .why-card, .industry-card, .overview-card, .process-card, .product-content{ padding:25px; } .preview-content h3, .why-card h3, .industry-card h3, .overview-card h3, .process-card h3, .product-content h3{ font-size:22px; } /*================================================== STATS ==================================================*/ .stat-box{ padding:30px 20px; } .stat-box h3{ font-size:40px; } /*================================================== CTA ==================================================*/ .cta-box h2{ font-size:32px; } .cta-box p{ font-size:16px; } /*================================================== FOOTER ==================================================*/ .footer{ padding:60px 0 30px; } .footer-column h3{ font-size:20px; } .footer-column p{ font-size:15px; } .footer-bottom{ margin-top:40px; } /*================================================== FLOATING BUTTONS ==================================================*/ .whatsapp-float{ width:54px; height:54px; font-size:28px; } .back-to-top{ width:46px; height:46px; font-size:18px; } } /*================================================== FINAL RESPONSIVE POLISH ARCHON IMPEX FZ LLC ==================================================*/ /*========================================= VERY LARGE SCREENS =========================================*/ @media (min-width:1600px){ .container{ max-width:1450px; } .hero-left h1{ font-size:72px; } .page-hero h1{ font-size:72px; } .section-title h2{ font-size:58px; } } /*========================================= LANDSCAPE PHONES =========================================*/ @media (max-height:500px) and (orientation:landscape){ .hero{ min-height:auto; padding:70px 0; } .mobile-nav{ overflow-y:auto; } } /*========================================= REDUCED MOTION =========================================*/ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /*========================================= PRINT =========================================*/ @media print{ .header, .footer, .whatsapp-float, .back-to-top, .menu-toggle{ display:none !important; } body{ background:#ffffff; color:#000000; } section{ padding:25px 0; } } /*========================================= SAFE IMAGE SCALING =========================================*/ .hero-right img, .about-image img, .map-image img, .preview-card img, .product-card img{ max-width:100%; height:auto; } /*========================================= FINAL GRID SAFETY =========================================*/ img{ max-width:100%; } iframe{ max-width:100%; } table{ display:block; overflow-x:auto; } /*========================================= END OF RESPONSIVE.CSS =========================================*/