/*================================================== AVATT TECHNOLOGIES responsive.css PART 1 OF 5 GLOBAL RESPONSIVE SYSTEM HEADER • NAVBAR • HERO • TYPOGRAPHY ==================================================*/ /*========================================= LARGE DESKTOP (1600px+) =========================================*/ @media (min-width:1600px){ .container{ max-width:1500px; } .hero-content h1{ font-size:4.8rem; } .hero-content p{ font-size:1.35rem; max-width:800px; } .section-title{ font-size:3rem; } } /*========================================= DESKTOP (1400px) =========================================*/ @media (max-width:1400px){ .container{ max-width:1200px; padding:0 30px; } .hero{ min-height:85vh; } .hero-content h1{ font-size:4rem; } .hero-image img{ max-width:95%; } .section{ padding:90px 0; } } /*========================================= LAPTOP (1200px) =========================================*/ @media (max-width:1200px){ .container{ max-width:100%; padding:0 25px; } .section{ padding:80px 0; } .hero{ padding-top:100px; } .hero-content h1{ font-size:3.5rem; } .hero-content p{ font-size:1.1rem; } .hero-buttons{ gap:15px; } .navbar{ padding:18px 0; } .logo img{ max-height:58px; } } /*========================================= TABLET LANDSCAPE (992px) =========================================*/ @media (max-width:992px){ .container{ padding:0 20px; } /* Header */ header{ padding:15px 0; } .navbar{ height:75px; } /* Mobile Toggle */ .mobile-toggle{ display:flex; } .nav-menu{ position:fixed; top:0; right:-100%; width:300px; height:100vh; background:#fff; flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:110px 30px; gap:25px; box-shadow:-8px 0 35px rgba(0,0,0,.12); transition:.35s ease; overflow-y:auto; z-index:999; } .nav-menu.active{ right:0; } .nav-menu li{ width:100%; } .nav-menu a{ display:block; width:100%; padding:12px 0; font-size:17px; border-bottom:1px solid #eee; } /* Hero */ .hero{ padding:120px 0 70px; min-height:auto; } .hero-wrapper{ display:grid; grid-template-columns:1fr; gap:50px; text-align:center; } .hero-content{ order:2; } .hero-image{ order:1; } .hero-image img{ max-width:75%; margin:auto; display:block; } .hero-content h1{ font-size:3rem; } .hero-content p{ margin:auto; margin-top:20px; } .hero-buttons{ justify-content:center; flex-wrap:wrap; } .scroll-down{ display:none; } } /*========================================= TABLET PORTRAIT (768px) =========================================*/ @media (max-width:768px){ .container{ padding:0 18px; } .section{ padding:70px 0; } .section-title{ font-size:2.2rem; } .section-subtitle{ font-size:1rem; } .hero{ padding:110px 0 60px; } .hero-content h1{ font-size:2.5rem; line-height:1.25; } .hero-content p{ font-size:1rem; } .hero-image img{ max-width:90%; } .hero-buttons{ flex-direction:column; align-items:center; } .hero-buttons .btn{ width:100%; max-width:280px; } .btn{ padding:14px 28px; font-size:15px; } .logo img{ max-height:52px; } } /*========================================= MOBILE (576px) =========================================*/ @media (max-width:576px){ .container{ padding:0 15px; } .navbar{ height:70px; } .logo img{ max-height:46px; } .nav-menu{ width:100%; padding:95px 25px; } .hero{ padding-top:95px; } .hero-content h1{ font-size:2rem; } .hero-content p{ font-size:.95rem; } .section-title{ font-size:1.9rem; } .section-subtitle{ font-size:.95rem; } } /*========================================= SMALL MOBILE (400px) =========================================*/ @media (max-width:400px){ .container{ padding:0 12px; } .hero-content h1{ font-size:1.7rem; } .hero-content p{ font-size:.9rem; } .btn{ width:100%; } .logo img{ max-height:42px; } .mobile-toggle{ width:42px; height:42px; } } /*========================================= GLOBAL RESPONSIVE IMAGES =========================================*/ img{ max-width:100%; height:auto; display:block; } iframe, video{ max-width:100%; height:auto; } /*========================================= RESPONSIVE TYPOGRAPHY =========================================*/ @media (max-width:768px){ h1{ font-size:2.4rem; } h2{ font-size:2rem; } h3{ font-size:1.5rem; } h4{ font-size:1.2rem; } p{ font-size:15px; line-height:1.8; } } /*========================================= GLOBAL SPACING =========================================*/ @media (max-width:768px){ .mt-lg{ margin-top:40px; } .mb-lg{ margin-bottom:40px; } .py-lg{ padding-top:60px; padding-bottom:60px; } } /*========================================= END PART 1 =========================================*/ /*================================================== AVATT TECHNOLOGIES responsive.css PART 2 OF 5 ABOUT • WHY AVATT • PRODUCTS EXPERTISE • COUNTERS ==================================================*/ /*========================================= ABOUT SECTION =========================================*/ @media (max-width:1200px){ .about-wrapper{ grid-template-columns:1fr 1fr; gap:50px; } .about-image img{ max-width:100%; } } @media (max-width:992px){ .about-wrapper{ grid-template-columns:1fr; text-align:center; } .about-image{ order:1; } .about-content{ order:2; } .about-content p{ max-width:700px; margin:auto; margin-bottom:18px; } .about-buttons{ justify-content:center; } } @media (max-width:768px){ .about-wrapper{ gap:35px; } .about-content h2{ font-size:2rem; } .about-content{ padding:0 10px; } } @media (max-width:576px){ .about-content h2{ font-size:1.8rem; } .about-content p{ font-size:.95rem; } } /*========================================= COMPANY INTRODUCTION =========================================*/ @media (max-width:992px){ .company-intro{ padding:70px 0; text-align:center; } .company-intro .row{ grid-template-columns:1fr; gap:40px; } } @media (max-width:576px){ .company-intro{ padding:60px 0; } } /*========================================= WHY AVATT =========================================*/ @media (max-width:1200px){ .why-avatt-grid{ grid-template-columns:repeat(2,1fr); gap:25px; } } @media (max-width:768px){ .why-avatt-grid{ grid-template-columns:1fr; } .why-card{ padding:30px 25px; text-align:center; } .why-card i{ margin:auto; margin-bottom:20px; } } @media (max-width:576px){ .why-card{ padding:25px 20px; } } /*========================================= COUNTERS =========================================*/ @media (max-width:1200px){ .counter-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .counter-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } .counter-card{ padding:30px 20px; } .counter-card h3{ font-size:2.2rem; } } @media (max-width:480px){ .counter-grid{ grid-template-columns:1fr; } .counter-card{ padding:25px; } } /*========================================= PRODUCT SECTION =========================================*/ @media (max-width:1200px){ .featured-products{ grid-template-columns:repeat(3,1fr); gap:25px; } } @media (max-width:992px){ .featured-products{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .featured-products{ grid-template-columns:1fr; } .product-card{ max-width:500px; margin:auto; } .product-image{ height:240px; } } @media (max-width:576px){ .product-content{ padding:20px; } .product-card h3{ font-size:1.3rem; } .product-card p{ font-size:.95rem; } } /*========================================= PRODUCT FILTERS =========================================*/ @media (max-width:768px){ .filter-bar{ flex-direction:column; align-items:stretch; gap:15px; } .filter-buttons{ justify-content:flex-start; overflow-x:auto; padding-bottom:10px; } .filter-buttons button{ white-space:nowrap; } .search-box{ width:100%; } } /*========================================= PRODUCT DETAILS =========================================*/ @media (max-width:992px){ .product-details-wrapper{ grid-template-columns:1fr; gap:45px; } .product-gallery{ position:relative; top:auto; } } @media (max-width:576px){ .product-info h1{ font-size:2rem; } .product-action-buttons{ flex-direction:column; } .product-action-buttons .btn{ width:100%; } } /*========================================= LAB EQUIPMENT =========================================*/ @media (max-width:1200px){ .equipment-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:992px){ .equipment-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .equipment-grid{ grid-template-columns:1fr; } .equipment-card{ max-width:500px; margin:auto; } } /*========================================= EXPERTISE =========================================*/ @media (max-width:1200px){ .expertise-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .expertise-grid{ grid-template-columns:1fr; } .expertise-card{ padding:35px 25px; text-align:center; } } @media (max-width:576px){ .expertise-card{ padding:28px 20px; } .expertise-card h3{ font-size:1.35rem; } } /*========================================= SECTION BUTTONS =========================================*/ @media (max-width:768px){ .section-buttons{ display:flex; flex-direction:column; align-items:center; gap:15px; } .section-buttons .btn{ width:100%; max-width:280px; } } /*========================================= SCROLL ANIMATION SUPPORT =========================================*/ @media (max-width:768px){ .reveal-left, .reveal-right{ transform:translateY(40px); } .reveal-left.active, .reveal-right.active{ transform:translateY(0); } } /*========================================= END PART 2 =========================================*/ /*================================================== AVATT TECHNOLOGIES responsive.css PART 3 OF 5 EXPERTISE • CUSTOMERS • GALLERY CONTACT • CTA ==================================================*/ /*========================================= EXPERTISE PAGE =========================================*/ @media (max-width:1200px){ .expertise-wrapper{ grid-template-columns:repeat(2,1fr); gap:30px; } } @media (max-width:992px){ .expertise-wrapper{ grid-template-columns:1fr; } .expertise-card{ text-align:center; padding:35px; } .expertise-card img{ margin:auto; margin-bottom:20px; } } @media (max-width:768px){ .expertise-card{ padding:30px 25px; } .expertise-card h3{ font-size:1.5rem; } .expertise-card p{ font-size:.95rem; } } /*========================================= EXPERTISE PROCESS =========================================*/ @media (max-width:992px){ .process-grid{ grid-template-columns:repeat(2,1fr); gap:25px; } } @media (max-width:576px){ .process-grid{ grid-template-columns:1fr; } .process-card{ text-align:center; } } /*========================================= CUSTOMER LOGO CAROUSEL =========================================*/ @media (max-width:1200px){ .logo-track{ gap:50px; } .logo-track img{ max-height:55px; } } @media (max-width:768px){ .logo-track{ gap:35px; } .logo-track img{ max-height:45px; } .customer-logos{ padding:50px 0; overflow:hidden; } } /*========================================= TESTIMONIALS =========================================*/ @media (max-width:1200px){ .testimonial-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .testimonial-grid{ grid-template-columns:1fr; } .testimonial-card{ max-width:550px; margin:auto; } } /*========================================= GALLERY =========================================*/ @media (max-width:1200px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:992px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:576px){ .gallery-grid{ grid-template-columns:1fr; } .gallery-item{ max-width:450px; margin:auto; } .gallery-filter{ overflow-x:auto; justify-content:flex-start; padding-bottom:12px; } .gallery-filter button{ white-space:nowrap; } } /*========================================= LIGHTBOX =========================================*/ @media (max-width:768px){ .lightbox img{ max-width:95%; max-height:80vh; } .lightbox-prev, .lightbox-next{ width:45px; height:45px; } .lightbox-close{ top:20px; right:20px; } } /*========================================= CONTACT SECTION =========================================*/ @media (max-width:1200px){ .contact-wrapper{ grid-template-columns:1fr 1fr; gap:40px; } } @media (max-width:992px){ .contact-wrapper{ grid-template-columns:1fr; } .contact-info{ order:2; } .contact-form{ order:1; } } @media (max-width:768px){ .contact-form{ padding:30px 25px; } .contact-info{ text-align:center; } .contact-item{ justify-content:center; } .contact-item i{ margin-right:15px; } } /*========================================= CONTACT FORM =========================================*/ @media (max-width:576px){ .contact-form{ padding:25px 20px; } .contact-form input, .contact-form textarea, .contact-form select{ font-size:15px; padding:14px 16px; } .contact-form .btn{ width:100%; } } /*========================================= GOOGLE MAP =========================================*/ @media (max-width:768px){ .map-container{ height:350px; border-radius:12px; overflow:hidden; } } @media (max-width:480px){ .map-container{ height:280px; } } /*========================================= CALL TO ACTION =========================================*/ @media (max-width:992px){ .cta{ text-align:center; } .cta-wrapper{ grid-template-columns:1fr; gap:30px; } .cta-buttons{ justify-content:center; flex-wrap:wrap; } } @media (max-width:576px){ .cta{ padding:60px 20px; } .cta h2{ font-size:2rem; } .cta-buttons{ flex-direction:column; } .cta-buttons .btn{ width:100%; max-width:280px; } } /*========================================= NEWSLETTER =========================================*/ @media (max-width:768px){ .newsletter-form{ flex-direction:column; gap:15px; } .newsletter-form input{ width:100%; } .newsletter-form button{ width:100%; } } /*========================================= SOCIAL ICONS =========================================*/ @media (max-width:576px){ .social-links{ justify-content:center; flex-wrap:wrap; gap:15px; } .social-links a{ width:45px; height:45px; } } /*========================================= END PART 3 =========================================*/ /*================================================== AVATT TECHNOLOGIES responsive.css PART 4 OF 5 FOOTER • TABLES • BUTTONS • FORMS UTILITIES • LANDSCAPE DEVICES ==================================================*/ /*========================================= FOOTER =========================================*/ @media (max-width:1200px){ .footer-content{ grid-template-columns:repeat(2,1fr); gap:40px; } .footer-logo{ max-width:220px; } } @media (max-width:768px){ .footer{ padding:60px 0 25px; } .footer-content{ grid-template-columns:1fr; text-align:center; gap:35px; } .footer-links ul{ padding:0; } .footer-links li{ margin-bottom:12px; } .footer-social{ justify-content:center; margin-top:20px; } .footer-newsletter{ max-width:450px; margin:auto; } .footer-bottom{ flex-direction:column; gap:12px; text-align:center; } } @media (max-width:480px){ .footer{ padding:50px 0 20px; } .footer h3{ font-size:1.3rem; } .footer p, .footer li{ font-size:.92rem; } } /*========================================= TABLE RESPONSIVE =========================================*/ @media (max-width:992px){ .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; } table{ min-width:700px; } } @media (max-width:576px){ table th, table td{ padding:12px; font-size:14px; } } /*========================================= BUTTONS =========================================*/ @media (max-width:768px){ .btn-group{ display:flex; flex-direction:column; gap:15px; } .btn-group .btn{ width:100%; } .btn-lg{ padding:16px 30px; font-size:16px; } } @media (max-width:480px){ .btn{ padding:14px 24px; font-size:15px; width:100%; } } /*========================================= FORMS =========================================*/ @media (max-width:992px){ .form-row{ grid-template-columns:1fr; gap:20px; } } @media (max-width:768px){ input, textarea, select{ font-size:15px; padding:14px 16px; } textarea{ min-height:140px; } label{ font-size:15px; } } @media (max-width:480px){ .form-group{ margin-bottom:18px; } input, textarea, select{ padding:13px 15px; } } /*========================================= SEARCH BAR =========================================*/ @media (max-width:768px){ .search-container{ width:100%; } .search-container input{ width:100%; } } /*========================================= MODALS =========================================*/ @media (max-width:768px){ .modal{ padding:20px; } .modal-content{ width:100%; max-width:95%; border-radius:14px; } } /*========================================= BREADCRUMB =========================================*/ @media (max-width:576px){ .breadcrumb{ font-size:14px; overflow-x:auto; white-space:nowrap; } } /*========================================= LANDSCAPE PHONES =========================================*/ @media (max-width:932px) and (orientation:landscape){ .hero{ min-height:auto; padding:90px 0 50px; } .hero-wrapper{ grid-template-columns:1fr 1fr; align-items:center; } .hero-content h1{ font-size:2.4rem; } .nav-menu{ padding-top:90px; overflow-y:auto; } } /*========================================= LANDSCAPE SMALL DEVICES =========================================*/ @media (max-height:500px) and (orientation:landscape){ .section{ padding:50px 0; } .hero{ padding-top:80px; } .scroll-down{ display:none; } } /*========================================= RESPONSIVE UTILITIES =========================================*/ @media (max-width:992px){ .hide-lg{ display:none !important; } .show-lg{ display:block !important; } } @media (max-width:768px){ .hide-md{ display:none !important; } .show-md{ display:block !important; } .text-center-md{ text-align:center !important; } .d-block-md{ display:block !important; } .w-100-md{ width:100% !important; } } @media (max-width:576px){ .hide-sm{ display:none !important; } .show-sm{ display:block !important; } .text-center-sm{ text-align:center !important; } .mt-sm-1{margin-top:10px;} .mt-sm-2{margin-top:20px;} .mt-sm-3{margin-top:30px;} .mb-sm-1{margin-bottom:10px;} .mb-sm-2{margin-bottom:20px;} .mb-sm-3{margin-bottom:30px;} } /*========================================= SPACING HELPERS =========================================*/ @media (max-width:768px){ .py-section{ padding-top:60px; padding-bottom:60px; } .px-container{ padding-left:18px; padding-right:18px; } .gap-md{ gap:20px; } } /*========================================= IMAGE RESPONSIVENESS =========================================*/ @media (max-width:768px){ .responsive-image{ width:100%; height:auto; object-fit:cover; border-radius:12px; } } /*========================================= CARD STACKING =========================================*/ @media (max-width:768px){ .card-grid{ grid-template-columns:1fr; } .card{ max-width:500px; margin:auto; } } /*========================================= END PART 4 =========================================*/ /*================================================== AVATT TECHNOLOGIES responsive.css PART 5 OF 5 SMALL DEVICES • ACCESSIBILITY • PRINT HIGH DPI • PERFORMANCE • FINAL UTILITIES ==================================================*/ /*========================================= EXTRA SMALL DEVICES (360px) =========================================*/ @media (max-width:360px){ .container{ padding:0 10px; } .hero{ padding-top:85px; } .hero-content h1{ font-size:1.55rem; line-height:1.3; } .hero-content p{ font-size:.88rem; } .section-title{ font-size:1.6rem; } .btn{ width:100%; padding:13px 18px; font-size:14px; } .logo img{ max-height:40px; } .nav-menu{ padding:85px 20px; } .product-card, .expertise-card, .why-card, .counter-card{ padding:18px; } .contact-form{ padding:20px 15px; } .footer{ padding:45px 0 18px; } } /*========================================= EXTRA SHORT DEVICES =========================================*/ @media (max-height:650px){ .hero{ min-height:auto; padding-top:90px; padding-bottom:50px; } .hero-image img{ max-height:320px; object-fit:contain; } } /*========================================= ACCESSIBILITY =========================================*/ @media (max-width:768px){ :focus-visible{ outline:3px solid var(--secondary); outline-offset:3px; } button, a, input, textarea, select{ min-height:44px; } .nav-menu a{ padding:14px 0; } } /*========================================= REDUCED MOTION =========================================*/ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .hero-image img, .product-card, .expertise-card, .counter-card, .gallery-item{ transform:none !important; } } /*========================================= DARK MODE SUPPORT =========================================*/ @media (prefers-color-scheme:dark){ body{ background:#121212; color:#f5f5f5; } header, footer, .card, .product-card, .expertise-card, .why-card, .contact-form{ background:#1b1b1b; } .section-title, h1, h2, h3, h4{ color:#ffffff; } p, li, span{ color:#d4d4d4; } input, textarea, select{ background:#222; border-color:#444; color:#fff; } .nav-menu{ background:#1b1b1b; } .nav-menu a{ border-bottom:1px solid #333; } } /*========================================= PRINT =========================================*/ @media print{ header, footer, .mobile-toggle, .hero-buttons, .scroll-down, .contact-form, .footer-social, .newsletter, .cta, .pagination, .filter-bar, .gallery-filter{ display:none !important; } body{ background:#fff !important; color:#000 !important; font-size:12pt; line-height:1.5; } .container{ width:100%; max-width:100%; padding:0; } .hero{ padding:0; min-height:auto; } .section{ padding:20px 0; page-break-inside:avoid; } img{ max-width:100%; page-break-inside:avoid; } a{ color:#000; text-decoration:none; } table{ width:100%; border-collapse:collapse; } th, td{ border:1px solid #000; padding:8px; } } /*========================================= HIGH DPI / RETINA =========================================*/ @media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){ img{ image-rendering:auto; } .logo img{ image-rendering:-webkit-optimize-contrast; } } /*========================================= PERFORMANCE =========================================*/ @media (min-width:768px){ .hero-image, .product-card, .gallery-item, .expertise-card{ will-change:transform; } } @media (max-width:768px){ .hero-image, .product-card, .gallery-item, .expertise-card{ will-change:auto; } } /*========================================= SAFE AREA SUPPORT =========================================*/ @supports (padding:max(0px)){ body{ padding-left:max(0px,env(safe-area-inset-left)); padding-right:max(0px,env(safe-area-inset-right)); } footer{ padding-bottom:max(20px,env(safe-area-inset-bottom)); } } /*========================================= UTILITY CLASSES =========================================*/ .mobile-only{ display:none; } .desktop-only{ display:block; } @media (max-width:768px){ .mobile-only{ display:block; } .desktop-only{ display:none; } .flex-column-mobile{ display:flex; flex-direction:column; } .text-center-mobile{ text-align:center; } .w-100-mobile{ width:100%; } } .no-scroll{ overflow:hidden; } .img-fluid{ max-width:100%; height:auto; } .rounded-circle{ border-radius:50%; } .shadow-sm{ box-shadow:0 4px 12px rgba(0,0,0,.08); } .shadow-lg{ box-shadow:0 12px 30px rgba(0,0,0,.15); } /*========================================= CUSTOM SCROLLBAR =========================================*/ @media (min-width:992px){ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:#f2f2f2; } ::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:50px; } ::-webkit-scrollbar-thumb:hover{ background:var(--secondary); } } /*========================================= TEXT WRAPPING =========================================*/ .long-text{ overflow-wrap:break-word; word-break:break-word; hyphens:auto; } /*========================================= FINAL RESPONSIVE FIXES =========================================*/ html{ overflow-x:hidden; } body{ overflow-x:hidden; } section{ overflow:hidden; } img, svg, video, canvas{ max-width:100%; height:auto; } button{ touch-action:manipulation; } input, textarea, select{ max-width:100%; box-sizing:border-box; } *{ box-sizing:border-box; } /*========================================= END OF FILE AVATT TECHNOLOGIES responsive.css Production Version ==================================================*/