/* Laptop */ @media(max-width:1200px){ .section-title{ font-size:38px; } } /* Tablet */ @media(max-width:992px){ .section{ padding:80px 0; } .section-title{ font-size:34px; } } /* Mobile */ @media(max-width:768px){ .container{ width:94%; } .section{ padding:70px 0; } .section-title{ font-size:30px; } } /* Small Mobile */ @media(max-width:480px){ .section-title{ font-size:26px; } } /*============================== HEADER RESPONSIVE ===============================*/ @media(max-width:1100px){ .navbar{ display:none; } .menu-toggle{ display:block; } } @media(max-width:768px){ .top-bar{ display:none; } .header-container{ min-height:75px; } .logo img{ width:145px; } .call-btn{ display:none; } .whatsapp-btn{ width:44px; height:44px; font-size:20px; } } @media(max-width:480px){ .logo img{ width:130px; } } /*====================================== HERO RESPONSIVE ======================================*/ @media(max-width:1100px){ .hero h1{ font-size:48px; } .hero-container{ gap:45px; } } @media(max-width:992px){ .hero{ padding:80px 0; } .hero-container{ grid-template-columns:1fr; text-align:center; } .hero-left{ align-items:center; } .hero p{ max-width:100%; } } @media(max-width:768px){ .hero h1{ font-size:38px; } .hero p{ font-size:16px; } .hero-buttons{ justify-content:center; flex-wrap:wrap; } } @media(max-width:480px){ .hero{ padding:60px 0; } .hero h1{ font-size:30px; } .hero p{ font-size:15px; line-height:1.7; } .emergency-badge{ padding:10px 18px; } .emergency-badge span{ font-size:13px; } } /*====================================== HERO IMAGE RESPONSIVE ======================================*/ @media(max-width:1200px){ .hero-image{ max-width:500px; } .floating-card{ width:200px; } } @media(max-width:992px){ .hero-right{ margin-top:50px; } .hero-image{ max-width:600px; } .floating-card.one{ left:20px; top:20px; } .floating-card.two{ right:20px; bottom:20px; } } @media(max-width:768px){ .hero-image{ border-width:6px; } .floating-card{ position:relative; width:100%; max-width:300px; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; margin:20px auto 0; animation:none; } .trust-badges{ justify-content:center; } .btn-primary, .btn-secondary{ width:100%; max-width:300px; } } @media(max-width:480px){ .hero-image{ border-radius:18px; } .trust-badges div{ width:100%; text-align:center; } } /*====================================== HERO RESPONSIVE (LARGE SCREEN) ======================================*/ @media (min-width:1600px){ .hero{ padding:140px 0 120px; } .container{ max-width:1450px; } .hero-container{ gap:90px; } .hero h1{ font-size:72px; } .hero p{ font-size:20px; max-width:700px; } .hero-image{ max-width:650px; } .floating-card{ width:240px; } } /*====================================== LAPTOP ======================================*/ @media (max-width:1200px){ .hero-container{ gap:50px; } .hero h1{ font-size:50px; } .hero-image{ max-width:480px; } } /*====================================== TABLET ======================================*/ @media (max-width:992px){ .hero{ padding:90px 0; } .hero-container{ grid-template-columns:1fr; text-align:center; gap:50px; } .hero-left{ align-items:center; } .hero p{ max-width:100%; } .hero-buttons{ justify-content:center; } .trust-badges{ justify-content:center; } .hero-right{ margin-top:20px; } .hero-image{ max-width:600px; } .floating-card.one{ top:25px; left:20px; } .floating-card.two{ right:20px; bottom:20px; } } /*====================================== MOBILE ======================================*/ @media (max-width:768px){ .hero{ padding:70px 0; } .hero h1{ font-size:36px; line-height:1.25; } .hero p{ font-size:16px; line-height:1.8; } .hero-buttons{ flex-direction:column; width:100%; } .btn-primary, .btn-secondary{ width:100%; max-width:320px; } .hero-image{ max-width:100%; border-radius:20px; border-width:5px; } .floating-card{ position:relative; width:100%; max-width:300px; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; margin:20px auto; animation:none; } .trust-badges{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:100%; } .trust-badges div{ text-align:center; } } /*====================================== SMALL MOBILE ======================================*/ @media (max-width:480px){ .hero{ padding:60px 0; } .hero h1{ font-size:30px; } .hero p{ font-size:15px; } .hero-buttons{ gap:15px; } .btn-primary, .btn-secondary{ height:54px; font-size:15px; } .emergency-badge{ padding:10px 18px; } .emergency-badge span{ font-size:13px; } .trust-badges{ grid-template-columns:1fr; } .hero-image{ border-radius:16px; } } /*====================================== EXTRA SMALL DEVICE ======================================*/ @media (max-width:360px){ .hero h1{ font-size:26px; } .hero p{ font-size:14px; } .btn-primary, .btn-secondary{ font-size:14px; height:50px; } .logo img{ width:120px; } } /*====================================== EMERGENCY STRIP RESPONSIVE ======================================*/ @media(max-width:992px){ .emergency-strip-container{ flex-direction:column; text-align:center; } .emergency-left{ flex-direction:column; } } @media(max-width:768px){ .emergency-text h2{ font-size:26px; } .emergency-right{ flex-direction:column; width:100%; } .emergency-call, .emergency-whatsapp{ width:100%; } } @media(max-width:480px){ .emergency-text h2{ font-size:22px; } .emergency-text p{ font-size:15px; } .emergency-icon{ width:65px; height:65px; font-size:28px; } } /*====================================== SERVICES RESPONSIVE ======================================*/ @media(max-width:992px){ .services-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .services-grid{ grid-template-columns:1fr; } .service-card{ padding:30px; } } /*====================================== WHY CHOOSE US RESPONSIVE ======================================*/ @media(max-width:992px){ .why-container{ grid-template-columns:1fr; } .feature-grid{ grid-template-columns:1fr; } .experience-box{ right:20px; } } @media(max-width:768px){ .why-container{ gap:40px; } .feature-box{ flex-direction:column; text-align:center; align-items:center; } .experience-box{ position:relative; right:auto; bottom:auto; margin-top:20px; display:inline-block; } } /*====================================== ABOUT PREVIEW RESPONSIVE ======================================*/ @media(max-width:992px){ .about-preview-grid{ grid-template-columns:1fr; } .about-preview-image{ order:-1; } } @media(max-width:768px){ .about-highlights{ grid-template-columns:1fr; } } /*====================================== STATISTICS RESPONSIVE ======================================*/ @media(max-width:992px){ .statistics-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .statistics-grid{ grid-template-columns:1fr; } } /*====================================== SERVICE AREAS RESPONSIVE ======================================*/ @media(max-width:1200px){ .areas-grid{ grid-template-columns:repeat(3,1fr); } } @media(max-width:992px){ .areas-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .areas-grid{ grid-template-columns:1fr; } } /*====================================== CTA RESPONSIVE ======================================*/ @media(max-width:992px){ .cta-wrapper{ flex-direction:column; text-align:center; } .cta-right{ width:100%; align-items:center; } } @media(max-width:768px){ .cta-left h2{ font-size:34px; } .cta-left p{ font-size:16px; } .cta-call, .cta-whatsapp{ width:100%; max-width:320px; } } /*====================================== ABOUT HERO RESPONSIVE ======================================*/ @media(max-width:992px){ .about-hero{ padding:110px 0 80px; } .about-hero h1{ font-size:46px; } } @media(max-width:768px){ .about-hero{ padding:90px 0 70px; text-align:center; } .breadcrumb{ justify-content:center; } .about-hero h1{ font-size:36px; } .about-hero p{ font-size:16px; } .about-hero-buttons{ justify-content:center; } } @media(max-width:480px){ .about-hero h1{ font-size:30px; } } /*====================================== ABOUT COMPANY RESPONSIVE ======================================*/ @media(max-width:992px){ .about-company-grid{ grid-template-columns:1fr; } .experience-card{ position:relative; left:auto; bottom:auto; margin-top:20px; } } @media(max-width:768px){ .mission-vision{ grid-template-columns:1fr; } .company-highlights{ grid-template-columns:1fr; } } /*====================================== WHY ABOUT RESPONSIVE ======================================*/ @media(max-width:992px){ .why-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .why-grid{ grid-template-columns:1fr; } } /*====================================== MEDICAL EQUIPMENT RESPONSIVE ======================================*/ @media(max-width:992px){ .equipment-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .equipment-grid{ grid-template-columns:1fr; } } /*====================================== TEAM RESPONSIVE ======================================*/ @media(max-width:992px){ .team-gallery-grid{ grid-template-columns:1fr; } .gallery-column.large img{ height:350px; } .counter-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .counter-grid{ grid-template-columns:1fr; } .gallery-column img{ height:250px; } } @media(max-width:992px){ .footer-grid{ grid-template-columns:1fr; } } @media(max-width:768px){ .service-hero{ padding:90px 0 70px; } .service-hero h1{ font-size:38px; } .service-hero p{ font-size:16px; } } /*====================================== SERVICE DETAILS RESPONSIVE ======================================*/ @media(max-width:992px){ .service-row{ grid-template-columns:1fr; gap:40px; } .service-row.reverse{ direction:ltr; } } @media(max-width:768px){ .service-content h2{ font-size:32px; } .service-list li{ font-size:16px; } } /*====================================== SERVICE CTA RESPONSIVE ======================================*/ @media(max-width:768px){ .service-buttons{ justify-content:center; } .service-cta-box h2{ font-size:34px; } .service-cta-box p{ font-size:16px; } } /*====================================== WHY SERVICES RESPONSIVE ======================================*/ @media(max-width:992px){ .why-services-grid{ grid-template-columns:repeat(2,1fr); } .booking-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .why-services-grid{ grid-template-columns:1fr; } .booking-grid{ grid-template-columns:1fr; } } /*====================================== CONTACT RESPONSIVE ======================================*/ @media(max-width:992px){ .contact-strip-grid{ grid-template-columns:1fr; } } @media(max-width:768px){ .map-box iframe{ height:350px; } } /*====================================== CONTACT PAGE ======================================*/ @media(max-width:992px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .contact-grid{ grid-template-columns:1fr; } .contact-hero{ padding:90px 0 70px; } .contact-hero h1{ font-size:38px; } .contact-hero p{ font-size:16px; } } /*====================================== CONTACT FORM RESPONSIVE ======================================*/ @media(max-width:992px){ .contact-wrapper{ grid-template-columns:1fr; } } @media(max-width:768px){ .contact-form-box, .contact-details-box{ padding:30px 22px; } .contact-details-box iframe{ height:250px; } } /*====================================== FINAL CTA RESPONSIVE ======================================*/ @media(max-width:768px){ .contact-final-cta{ padding:70px 0; } .contact-final-cta h2{ font-size:34px; } .contact-final-cta p{ font-size:16px; } } /*====================================== GALLERY HERO RESPONSIVE ======================================*/ @media(max-width:768px){ .gallery-hero{ padding:90px 0 70px; } .gallery-hero h1{ font-size:38px; } .gallery-hero p{ font-size:16px; } } /*====================================== GALLERY RESPONSIVE ======================================*/ @media(max-width:992px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .gallery-grid{ grid-template-columns:1fr; } .gallery-item img{ height:260px; } .filter-btn{ width:100%; max-width:220px; } } /*====================================== VIDEO RESPONSIVE ======================================*/ @media(max-width:992px){ .video-grid{ grid-template-columns:1fr; } } @media(max-width:768px){ .video-card iframe{ height:240px; } } /*====================================== GALLERY CTA ======================================*/ @media(max-width:768px){ .gallery-cta{ padding:70px 0; } .gallery-cta h2{ font-size:34px; } .gallery-cta p{ font-size:16px; } .service-area-grid{ grid-template-columns:1fr; } } @media(max-width:992px){ .icu-hero-grid{ grid-template-columns:1fr; } .hero-highlights{ grid-template-columns:1fr; } .emergency-strip-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .icu-hero{ padding:100px 0 70px; } .icu-content h1{ font-size:38px; } .icu-content p{ font-size:16px; } .emergency-strip-grid{ grid-template-columns:1fr; } } /*====================================== ICU INTRO RESPONSIVE ======================================*/ @media(max-width:992px){ .intro-grid{ grid-template-columns:1fr; } .require-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .require-grid{ grid-template-columns:1fr; } } /*====================================== ICU FEATURES RESPONSIVE ======================================*/ @media(max-width:992px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } .why-icu-grid{ grid-template-columns:1fr; } } @media(max-width:768px){ .feature-grid{ grid-template-columns:1fr; } } @media(max-width:992px){ .service-area-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .service-area-grid{ grid-template-columns:1fr; } .icu-final-cta{ padding:70px 0; } .icu-final-cta h2{ font-size:34px; } .icu-final-cta p{ font-size:16px; } }