html body #navbar.navbar,html body #navbar.navbar.menu-open,html body #navbar.navbar.scrolled,html body .navbar,html body .navbar.menu-open,html body .navbar.scrolled{position:fixed!important;inset:14px 0 auto!important;z-index:1000!important;width:100%!important;height:auto!important;padding:2px 22px!important;margin:0!important;background:0 0!important;border:0!important;box-shadow:none!important;pointer-events:none!important;transform:none!important}html body.has-countdown-banner #navbar.navbar,html body.has-countdown-banner #navbar.navbar.scrolled,html body.has-countdown-banner #navbar.navbar.menu-open,body.has-countdown-banner #navbar.navbar,body.has-countdown-banner #navbar.navbar.scrolled,body.has-countdown-banner #navbar.navbar.menu-open,html body.has-countdown-banner .navbar,html body.has-countdown-banner .navbar.scrolled,html body.has-countdown-banner .navbar.menu-open,body.has-countdown-banner .navbar,body.has-countdown-banner .navbar.scrolled,body.has-countdown-banner .navbar.menu-open{position:fixed!important;top:52px!important;inset:52px 0 auto!important}html body #navbar.navbar .container,html body .navbar .container{position:relative!important;z-index:1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:clamp(10px,1.4vw,26px)!important;width:100%!important;max-width:1860px!important;min-height:68px!important;height:68px!important;margin:0 auto!important;padding:6px 22px!important;box-sizing:border-box!important;overflow:visible!important;border:1px solid rgba(198,216,245,.76)!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(250,252,255,.94),rgba(242,247,255,.84))!important;box-shadow:0 9px 28px rgba(26,55,101,.12),inset 0 1px 0 rgba(255,255,255,.98)!important;pointer-events:auto!important}html body #navbar.navbar .container::before,html body .navbar .container::before{content:""!important;position:absolute!important;inset:1px 32px auto!important;height:1px!important;border-radius:50%!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),transparent)!important;pointer-events:none!important}html body #navbar.navbar .nav-logo,html body .navbar .nav-logo{display:flex!important;flex:0 0 clamp(240px,18vw,340px)!important;align-items:center!important;gap:0!important;min-width:0!important;padding:0!important;line-height:1!important}html body #navbar.navbar .nav-logo-img,html body .navbar .nav-logo-img{display:block!important;flex:0 1 100%!important;width:100%!important;max-width:100%!important;max-height:52px!important;height:auto!important;object-fit:contain!important;transform:none!important;filter:none!important}html body #navbar.navbar .nav-links,html body .navbar .nav-links{position:relative!important;display:flex!important;flex:1 1 auto!important;align-items:center!important;justify-content:space-evenly!important;gap:clamp(4px,1.15vw,22px)!important;min-width:0!important;margin:0!important;padding:0!important;overflow:visible!important;background:0 0!important;border:0!important;box-shadow:none!important}html body #navbar.navbar .nav-links>a,html body .navbar .nav-links>a{position:relative!important;z-index:1!important;display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;gap:9px!important;min-height:54px!important;padding:0 18px!important;border:1px solid transparent!important;border-radius:999px!important;background:0 0!important;color:#294675!important;font-family:var(--font-heading, Inter, "Segoe UI", sans-serif)!important;font-size:clamp(.88rem, .94vw, 1.08rem)!important;font-weight:650!important;letter-spacing:-.025em!important;line-height:1!important;text-decoration:none!important;white-space:nowrap!important;transition:background-color 180ms,border-color 180ms,box-shadow 180ms,color 180ms,transform 180ms!important}html body #navbar.navbar .nav-links>a .nav-icon,html body .navbar .nav-links>a .nav-icon{flex:0 0 19px!important;width:19px!important;height:19px!important;opacity:.72!important;color:#526987!important;transform:none!important;animation:none!important}html body #navbar.navbar .nav-links>a:hover,html body .navbar .nav-links>a:hover{border-color:rgba(141,175,239,.52)!important;background:rgba(229,239,255,.72)!important;color:#174fd2!important;box-shadow:0 3px 12px rgba(37,99,235,.09)!important;transform:translateY(-1px)!important}html body #navbar.navbar .nav-links>a.active,html body .navbar .nav-links>a.active{border-color:rgba(119,159,247,.78)!important;background:linear-gradient(135deg,rgba(250,253,255,.98),rgba(220,234,255,.94))!important;color:#1d4ed8!important;box-shadow:0 5px 15px rgba(37,99,235,.16),inset 0 1px 0 rgba(255,255,255,.95)!important}html body #navbar.navbar .nav-links>a.active .nav-icon,html body .navbar .nav-links>a:hover .nav-icon,html body #navbar.navbar .nav-links>a.active .nav-icon,html body .navbar .nav-links>a:hover .nav-icon{opacity:1!important;color:#2563eb!important}html body #navbar.navbar .nav-links .nav-liquid-pill,html body .navbar .nav-links .nav-liquid-pill{position:absolute!important;top:0!important;left:0!important;z-index:0!important;pointer-events:none!important;border:1.5px solid rgba(114,153,239,.86)!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(219,234,255,.86) 52%,rgba(191,219,254,.76))!important;box-shadow:0 8px 22px rgba(37,99,235,.23),0 2px 8px rgba(30,64,175,.12),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(59,104,190,.22)!important}html body #navbar.navbar .nav-links .nav-liquid-pill::before,html body .navbar .nav-links .nav-liquid-pill::before{content:""!important;position:absolute!important;inset:1px 12px auto!important;height:42%!important;border-radius:inherit!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent)!important;pointer-events:none!important}@media (prefers-reduced-transparency:reduce){html body #navbar.navbar .nav-links .nav-liquid-pill,html body .navbar .nav-links .nav-liquid-pill{background:#e5efff!important;box-shadow:0 3px 10px rgba(37,99,235,.14)!important}}@media (forced-colors:active){html body #navbar.navbar .nav-links .nav-liquid-pill,html body .navbar .nav-links .nav-liquid-pill{border:1px solid Highlight!important;background:Canvas!important;box-shadow:none!important}}html body #navbar.navbar .nav-pincode,html body .navbar .nav-pincode{display:flex!important;flex:0 0 clamp(300px,23vw,440px)!important;width:clamp(300px,23vw,440px)!important;min-width:0!important;margin:0 0 0 8px!important}html body #navbar.navbar .nav-pincode .pincode-input-group,html body .navbar .nav-pincode .pincode-input-group{display:flex!important;align-items:center!important;width:100%!important;height:52px!important;padding:4px 5px 4px 17px!important;overflow:hidden!important;border:1px solid rgba(116,157,242,.72)!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(226,237,255,.94))!important;box-shadow:0 4px 12px rgba(40,76,135,.09),inset 0 1px 0 rgba(255,255,255,.98)!important}html body #navbar.navbar .nav-pincode .pincode-input-group input,html body .navbar .nav-pincode .pincode-input-group input{flex:1 1 auto!important;width:100%!important;min-width:0!important;height:100%!important;padding:0 8px!important;border:0!important;outline:0!important;background:0 0!important;box-shadow:none!important;color:#253c5c!important;font-family:var(--font-body, Inter, "Segoe UI", sans-serif)!important;font-size:.92rem!important}html body #navbar.navbar .nav-pincode .pincode-input-group input::placeholder,html body .navbar .nav-pincode .pincode-input-group input::placeholder{color:#34445a!important;opacity:.95!important}html body #navbar.navbar .nav-pincode .pincode-input-group:focus-within,html body .navbar .nav-pincode .pincode-input-group:focus-within{border-color:#2563eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.15),0 5px 15px rgba(40,76,135,.12)!important}html body #navbar.navbar .nav-pincode .btn-check-pin,html body .navbar .nav-pincode .btn-check-pin{flex:0 0 auto!important;min-width:90px!important;height:40px!important;padding:0 22px!important;border:0!important;border-radius:999px!important;background:linear-gradient(135deg,#3169e8,#1d4ed8)!important;box-shadow:0 3px 8px rgba(29,78,216,.32),inset 0 1px 0 rgba(255,255,255,.24)!important;color:#fff!important;font-size:.9rem!important;font-weight:700!important;line-height:1!important}html body #navbar.navbar .nav-pincode .btn-check-pin:hover,html body .navbar .nav-pincode .btn-check-pin:hover{background:linear-gradient(135deg,#245de0,#1743c4)!important;transform:translateY(-1px)!important}html body #navbar.navbar .hamburger,html body .navbar .hamburger{display:none!important}html body #navbar.navbar .visually-hidden,html body .navbar .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}html body #navbar.navbar .mobile-overlay,html body .navbar .mobile-overlay{display:none!important}html body .skip-to-content:focus,html body .skip-to-content:focus-visible{position:fixed!important;top:1rem!important;left:1rem!important;right:auto!important;width:auto!important;height:auto!important;max-width:calc(100vw - 2rem)!important;margin:0!important;padding:.75rem 1rem!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;opacity:1!important;transform:none!important;z-index:1200!important;border:2px solid #fff!important;border-radius:999px!important;background:#173f9b!important;color:#fff!important;font-weight:700!important;text-decoration:none!important;box-shadow:0 4px 16px rgba(10,22,40,.32)!important}html body .skip-to-content:focus-visible{outline:#fbbf24 solid 3px!important;outline-offset:3px!important}html body :where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:#fbbf24 solid 3px!important;outline-offset:3px!important}@media (forced-colors:active){html body .skip-to-content:focus,html body .skip-to-content:focus-visible{border-color:Highlight!important;background:Canvas!important;color:CanvasText!important;box-shadow:none!important}html body :where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:Highlight solid 2px!important;outline-offset:3px!important}}@media (min-width:993px) and (max-width:1300px){html body #navbar.navbar .container,html body .navbar .container{gap:8px!important;padding:6px 14px!important}html body #navbar.navbar .nav-logo,html body .navbar .nav-logo{flex-basis:220px!important}html body #navbar.navbar .nav-logo-img,html body .navbar .nav-logo-img{width:100%!important;max-width:220px!important;max-height:48px!important}html body #navbar.navbar .nav-links,html body .navbar .nav-links{gap:2px!important}html body #navbar.navbar .nav-links>a,html body .navbar .nav-links>a{gap:5px!important;min-height:40px!important;padding:0 8px!important;font-size:.82rem!important}html body #navbar.navbar .nav-links>a .nav-icon,html body .navbar .nav-links>a .nav-icon{flex-basis:15px!important;width:15px!important;height:15px!important}html body #navbar.navbar .nav-pincode,html body .navbar .nav-pincode{flex-basis:clamp(290px,22vw,350px)!important;width:auto!important;margin-left:clamp(6px,.8vw,12px)!important}html body #navbar.navbar .nav-pincode .pincode-input-group,html body .navbar .nav-pincode .pincode-input-group{height:42px!important;padding-left:10px!important}html body #navbar.navbar .nav-pincode .btn-check-pin,html body .navbar .nav-pincode .btn-check-pin{min-width:66px!important;height:32px!important;padding:0 12px!important}}@media (max-width:992px){html body #navbar.navbar,html body #navbar.navbar.menu-open,html body #navbar.navbar.scrolled,html body .navbar,html body .navbar.menu-open,html body .navbar.scrolled{top:8px!important;inset:8px 0 auto!important;padding:6px 12px!important}html body.has-countdown-banner #navbar.navbar,html body.has-countdown-banner #navbar.navbar.scrolled,html body.has-countdown-banner #navbar.navbar.menu-open,body.has-countdown-banner #navbar.navbar,body.has-countdown-banner #navbar.navbar.scrolled,body.has-countdown-banner #navbar.navbar.menu-open,html body.has-countdown-banner .navbar,html body.has-countdown-banner .navbar.scrolled,html body.has-countdown-banner .navbar.menu-open,body.has-countdown-banner .navbar,body.has-countdown-banner .navbar.scrolled,body.has-countdown-banner .navbar.menu-open{top:48px!important;inset:48px 0 auto!important}html body #navbar.navbar .container,html body .navbar .container{width:100%!important;min-height:66px!important;height:66px!important;padding:6px 12px 6px 16px!important;border-radius:22px!important;transform:none!important}html body #navbar.navbar .nav-logo,html body .navbar .nav-logo{flex:0 1 250px!important;max-width:calc(100% - 56px)!important}html body #navbar.navbar .nav-logo-img,html body .navbar .nav-logo-img{width:min(250px,calc(100vw - 80px))!important;max-height:48px!important}html body #navbar.navbar .nav-links,html body .navbar .nav-links{position:fixed!important;z-index:2!important;top:78px!important;right:-110vw!important;display:flex!important;flex:none!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:8px!important;width:min(400px,calc(100vw - 24px))!important;max-height:calc(100vh - 92px)!important;margin:0!important;padding:18px!important;overflow-x:hidden!important;overflow-y:auto!important;border:1px solid rgba(198,216,245,.88)!important;border-radius:24px!important;background:rgba(248,251,255,.97)!important;box-shadow:0 16px 40px rgba(16,40,78,.2)!important;transition:right 220ms!important}html body #navbar.navbar .nav-links:not(.active):not(.open),html body .navbar .nav-links:not(.active):not(.open){display:none!important}html body #navbar.navbar .nav-links.active,html body #navbar.navbar .nav-links.open,html body .navbar .nav-links.active,html body .navbar .nav-links.open{display:flex!important;right:12px!important}html body #navbar.navbar .nav-links>a,html body .navbar .nav-links>a{justify-content:flex-start!important;min-height:48px!important;padding:0 16px!important;font-size:1rem!important}html body #navbar.navbar .nav-links .nav-pincode,html body .navbar .nav-links .nav-pincode{display:none!important}html body #navbar.navbar .hamburger,html body .navbar .hamburger{position:relative!important;z-index:3!important;display:flex!important;flex:0 0 44px!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:5px!important;width:44px!important;height:44px!important;padding:10px!important;border:1px solid rgba(159,185,233,.6)!important;border-radius:50%!important;background:rgba(255,255,255,.64)!important;box-shadow:0 2px 8px rgba(37,67,115,.08)!important;cursor:pointer!important}html body #navbar.navbar .hamburger span,html body .navbar .hamburger span{display:block!important;width:18px!important;height:2px!important;border-radius:2px!important;background:#294675!important}html body #navbar.navbar .mobile-overlay,html body .navbar .mobile-overlay{position:fixed!important;z-index:0!important;inset:-14px -12px auto!important;display:block!important;width:100vw!important;height:100vh!important;background:rgba(11,24,46,.34)!important;opacity:0!important;pointer-events:none!important;transition:opacity 180ms!important}html body #navbar.navbar .mobile-overlay.active,html body .navbar .mobile-overlay.active{opacity:1!important;pointer-events:auto!important}}@media (max-width:480px){html body #navbar.navbar .container,html body .navbar .container{min-height:60px!important;height:60px!important;padding:5px 10px 5px 12px!important}html body #navbar.navbar .nav-logo,html body .navbar .nav-logo{flex-basis:216px!important}html body #navbar.navbar .nav-logo-img,html body .navbar .nav-logo-img{width:min(216px,calc(100vw - 78px))!important;max-height:42px!important}html body #navbar.navbar .hamburger,html body .navbar .hamburger{flex-basis:42px!important;width:42px!important;height:42px!important}html body #navbar.navbar .nav-links,html body .navbar .nav-links{top:70px!important}}@media (prefers-reduced-transparency:reduce){html body #navbar.navbar .container,html body #navbar.navbar .nav-links,html body .navbar .container,html body .navbar .nav-links{background:#f4f7fc!important}}@media (forced-colors:active){html body #navbar.navbar .container,html body #navbar.navbar .nav-links,html body #navbar.navbar .nav-links>a.active,html body #navbar.navbar .nav-pincode .pincode-input-group,html body .navbar .container,html body .navbar .nav-links,html body .navbar .nav-links>a.active,html body .navbar .nav-pincode .pincode-input-group{border:1px solid CanvasText!important;background:Canvas!important;box-shadow:none!important;color:CanvasText!important}html body #navbar.navbar .nav-links>a.active,html body #navbar.navbar .nav-pincode .btn-check-pin,html body .navbar .nav-links>a.active,html body .navbar .nav-pincode .btn-check-pin{outline:Highlight solid 2px!important}}/* Curved and linear scroll progress bar styles */.scroll-progress-curved,html body .scroll-progress-curved,html body #navbar.navbar .scroll-progress-curved{display:none!important}html body #navbar.navbar .container .scroll-progress-container,html body #navbar.navbar .scroll-progress-container,html body .navbar .container .scroll-progress-container,html body .navbar .scroll-progress-container,html body .scroll-progress-container{display:block!important;position:absolute!important;bottom:-6px!important;top:auto!important;left:24px!important;right:24px!important;width:auto!important;height:4.5px!important;background:transparent!important;border:0!important;border-radius:9999px!important;overflow:hidden!important;pointer-events:none!important;z-index:10!important;margin:0!important;padding:0!important;box-shadow:none!important;transform:none!important}html body #navbar.navbar .scroll-progress-bar,html body .navbar .scroll-progress-bar,html body #navbar.navbar .container .scroll-progress-container .scroll-progress-bar,.scroll-progress-bar{display:block!important;width:0%;height:100%!important;background:linear-gradient(90deg,#e11d48 0,#f43f5e 20%,#4f46e5 45%,#2563eb 70%,#0284c7 88%,#06b6d4 100%)!important;box-shadow:0 0 10px rgba(37,99,235,.5),0 0 4px rgba(225,29,72,.4)!important;border-radius:9999px!important;transition:width 80ms ease-out!important}@media (max-width:992px){html body #navbar.navbar .scroll-progress-curved,html body .navbar .scroll-progress-curved{display:none!important}html body #navbar.navbar .container .scroll-progress-container,html body #navbar.navbar .scroll-progress-container,html body .navbar .container .scroll-progress-container,html body .navbar .scroll-progress-container,html body .scroll-progress-container{display:block!important;bottom:-5px!important;left:14px!important;right:14px!important;height:3.5px!important}}@media (max-width:480px){html body #navbar.navbar .container .scroll-progress-container,html body #navbar.navbar .scroll-progress-container,html body .navbar .container .scroll-progress-container,html body .navbar .scroll-progress-container,html body .scroll-progress-container{display:block!important;bottom:-4px!important;left:10px!important;right:10px!important;height:3px!important}}html body #main-content>#welcome-carousel{margin-top:44px!important}@media (max-width:992px){html body #main-content>#welcome-carousel{margin-top:38px!important}}:root{--space-xs:clamp(0.25rem, 0.35vw, 0.375rem);--space-sm:clamp(0.375rem, 0.6vw, 0.625rem);--space-md:clamp(0.75rem, 1vw, 1rem);--space-lg:clamp(1rem, 1.5vw, 1.5rem);--space-xl:clamp(1.25rem, 2vw, 2rem);--space-2xl:clamp(1.75rem, 3vw, 3rem);--space-3xl:clamp(2.25rem, 4vw, 4rem);--space-4xl:clamp(2.75rem, 5vw, 6rem)}html body .accreditations.section-padding::before,html body main#main-content>section.accreditations::before,html body main#main-content>section.page-hero+section.section-padding::before,html body main#main-content>section.page-hero+section::before,html body main#main-content>section.section-padding:nth-of-type(2)::before,html body main#main-content>section:nth-of-type(2)::before,html body.package-detail-page main#main-content>section.accreditations::before,html body.package-detail-page main#main-content>section.accreditations:not(.page-hero)::before,html body.package-detail-page main#main-content>section.page-hero+section.section-padding::before,html body.package-detail-page main#main-content>section.page-hero+section::before,html body.package-detail-page main#main-content>section.section-padding:nth-of-type(2)::before,html body.package-detail-page main#main-content>section:nth-of-type(2)::before,html body.package-detail-page main#main-content>section:nth-of-type(2):not(.page-hero)::before{content:none!important;display:none!important;background-image:none!important}@media (min-width:769px){html body .section-padding{padding-block:clamp(24px,2.6vw,36px)!important}html body .page-hero{padding-block:clamp(40px,4.5vw,64px)!important}html body main#main-content>.page-hero,html body.package-detail-page .page-hero{padding-bottom:22px!important}html body main#main-content>section.page-hero+section.section-padding,html body.package-detail-page main#main-content>section.section-padding:nth-of-type(2){padding-top:24px!important}html body .section-title{margin-bottom:clamp(12px,1.1vw,18px)!important}html body .section-subtitle{margin-bottom:clamp(24px,2vw,32px)!important}html body .accred-grid,html body .blog-grid,html body .cities-grid,html body .faq-grid,html body .features-grid,html body .related-grid,html body .service-grid,html body .test-packages-grid,html body footer .footer-grid{gap:clamp(18px,1.8vw,28px)!important}}@media (min-width:993px){html body #navbar.navbar .nav-links a::after,html body #navbar.navbar .nav-links a::before{content:none!important;display:none!important;animation:none!important}html body #navbar.navbar .nav-links .nav-liquid-pill{display:block!important}html body #navbar.navbar .nav-links.has-liquid-slider>a.active,html body #navbar.navbar .nav-links.has-liquid-slider>a.is-sliding-active,html body #navbar.navbar .nav-links.has-liquid-slider>a:focus-visible,html body #navbar.navbar .nav-links.has-liquid-slider>a:hover{border-color:transparent!important;background:0 0!important;box-shadow:none!important;transform:translateY(-1px)!important}html body #navbar.navbar .nav-links.has-liquid-slider>a.active{color:#1d4ed8!important}html body #navbar.navbar .nav-links.has-liquid-slider>a:focus-visible{outline:#2563eb solid 2px!important;outline-offset:3px!important}}@keyframes nav-liquid-pill-breathe{0%,100%{opacity:.28;transform:scale(1);box-shadow:0 0 0 0 rgba(37,99,235,.08)}50%{opacity:.9;transform:scale(1.018);box-shadow:0 0 0 3px rgba(91,140,255,.16),0 0 18px 4px rgba(37,99,235,.2)}}html body #navbar.navbar .nav-links .nav-liquid-pill::after{content:"";position:absolute;inset:-2px;border:1px solid rgba(91,140,255,.28);border-radius:inherit;pointer-events:none;opacity:0}@media (min-width:993px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){html body #navbar.navbar .nav-links:hover .nav-liquid-pill::after{animation:2.4s ease-in-out infinite nav-liquid-pill-breathe}}@media (prefers-reduced-motion:reduce){html body .navbar *,html body .navbar ::after,html body .navbar ::before{scroll-behavior:auto!important;animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}html body #navbar.navbar .nav-links .nav-liquid-pill::after{animation:none!important;opacity:0!important}}@media (max-width:768px){html body.has-countdown-banner .navbar,html body.has-countdown-banner .navbar.scrolled,html body.has-countdown-banner .navbar.menu-open,body.has-countdown-banner .navbar,body.has-countdown-banner .navbar.scrolled,body.has-countdown-banner .navbar.menu-open{top:8px!important;inset:8px 0 auto!important}html body #main-content>#welcome-carousel{margin-top:32px!important}html body .section-padding{padding-block:clamp(16px,3.5vw,22px)!important}html body .page-hero{padding-block:clamp(24px,5.5vw,36px)!important}html body main#main-content>.page-hero,html body.package-detail-page .page-hero{padding-bottom:16px!important}html body main#main-content>section.page-hero+section.section-padding,html body.package-detail-page main#main-content>section.section-padding:nth-of-type(2){padding-top:16px!important}html body .section-title{margin-bottom:10px!important}html body .section-subtitle{margin-bottom:18px!important}html body .accred-grid,html body .blog-grid,html body .cities-grid,html body .faq-grid,html body .features-grid,html body .related-grid,html body .service-grid,html body .test-packages-grid,html body footer .footer-grid{gap:clamp(12px,3vw,16px)!important}html body footer .container,html body main#main-content.container,html body main#main-content>section>.container{width:calc(100% - clamp(32px,8vw,48px))!important;max-width:calc(100% - clamp(32px,8vw,48px))!important;margin-inline:auto!important}html body .mobile-pincode-banner{margin-bottom:8px!important}html body .mobile-pincode-banner+main#main-content>#welcome-carousel{margin-top:10px!important}html body:not(.menu-open):not(.modal-open):not(.swal2-shown) .liquid-glass-nav-wrap.mobile-sticky-leadbar{display:flex!important}html body:has(.mobile-sticky-leadbar){padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}html body:has(.mobile-sticky-leadbar) .whatsapp-float{display:none!important;visibility:hidden!important;pointer-events:none!important}html body #scrollToTop,html body .scroll-to-top{bottom:calc(82px + env(safe-area-inset-bottom,0px))!important}}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar{display:none!important;position:fixed!important;z-index:9999!important;right:0!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;left:0!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:100%!important;max-width:100vw!important;padding:0 max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px))!important;box-sizing:border-box!important;background:0 0!important;border:0!important;box-shadow:none!important;pointer-events:none!important}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-glass-pill{display:flex!important;flex:1 1 auto!important;align-items:center!important;justify-content:space-between!important;gap:2px!important;width:auto!important;max-width:min(304px,calc(100vw - 80px))!important;min-width:0!important;height:58px!important;padding:4px!important;overflow:hidden!important;border:1px solid rgba(184,204,235,.8)!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(233,241,252,.9))!important;box-shadow:0 12px 30px rgba(15,35,67,.2),inset 0 1px 0 rgba(255,255,255,.98)!important;pointer-events:auto!important}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-item{display:flex!important;flex:1 1 0!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-width:0!important;min-height:48px!important;padding:3px 2px!important;border:0!important;border-radius:999px!important;color:#334155!important;text-decoration:none!important}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-item.active{background:rgba(219,234,254,.78)!important;color:#155eef!important}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-icon{display:flex!important;align-items:center!important;justify-content:center!important;width:20px!important;height:20px!important;color:currentColor!important}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-icon svg{display:block!important;width:100%!important;height:100%!important}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-label{max-width:100%!important;color:currentColor!important;font-size:clamp(9px, 2.5vw, 11px)!important;font-weight:600!important;line-height:1.1!important;white-space:nowrap!important}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .leadbar-whatsapp{display:flex!important;flex:0 0 48px!important;align-items:center!important;justify-content:center!important;width:48px!important;min-width:48px!important;max-width:48px!important;height:48px!important;min-height:48px!important;max-height:48px!important;padding:0!important;border:2px solid rgba(255,255,255,.96)!important;border-radius:50%!important;background:radial-gradient(circle at 35% 30%,#3fe87d,#25d366 58%,#128c7e)!important;box-shadow:0 5px 16px rgba(18,140,126,.34),inset 0 1px 2px rgba(255,255,255,.8)!important;text-decoration:none!important;pointer-events:auto!important}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-fab-icon,html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-fab-icon svg{display:block!important;width:26px!important;height:26px!important;color:#fff!important}@media (max-width:380px){html body .liquid-glass-nav-wrap.mobile-sticky-leadbar{gap:4px!important;padding-right:max(8px,env(safe-area-inset-right,0px))!important;padding-left:max(8px,env(safe-area-inset-left,0px))!important}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-glass-pill{max-width:calc(100vw - 68px)!important}html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .leadbar-whatsapp{flex-basis:44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important}}html body.has-countdown-banner #lightboxModal #lightboxClose{top:calc(64px + env(safe-area-inset-top,0px))!important}html body .booking-form input::placeholder,html body .booking-form textarea::placeholder,html body .form-group input::placeholder,html body .form-group textarea::placeholder,html body .mobile-pincode-banner .mpb-input-group input::placeholder,html body .mpb-input-group input::placeholder,html body .nav-pincode .pincode-input-group input::placeholder,html body .navbar .nav-pincode input::placeholder{color:#475569!important;opacity:1!important}html body .original-price,html body .package-pricing .original-price{color:#475569!important}html body #bookingModal #modalViewFlyerBtn,html body #bookingModal .modal-view-flyer-btn,html body .modal-view-flyer-btn{display:inline-flex!important;align-items:center!important;gap:4.5px!important;font-family:var(--font-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)!important;font-size:.74rem!important;font-weight:600!important;color:#0369a1!important;background:#f0f9ff!important;border:1px solid #bae6fd!important;padding:2.5px 8.5px!important;border-radius:9999px!important;white-space:nowrap!important;cursor:pointer!important;line-height:1.2!important;margin:0!important;min-height:unset!important;height:auto!important;box-shadow:none!important;text-decoration:none!important;transition:background .15s,transform .15s,border-color .15s,color .15s!important}html body #bookingModal #modalViewFlyerBtn svg,html body #bookingModal .modal-view-flyer-btn svg,html body .modal-view-flyer-btn svg{width:13px!important;height:13px!important;flex-shrink:0!important;stroke:currentColor!important}html body #bookingModal #modalViewFlyerBtn:focus-visible,html body #bookingModal #modalViewFlyerBtn:hover,html body #bookingModal .modal-view-flyer-btn:focus-visible,html body #bookingModal .modal-view-flyer-btn:hover,html body .modal-view-flyer-btn:focus-visible,html body .modal-view-flyer-btn:hover{background:#e0f2fe!important;border-color:#38bdf8!important;color:#0c4a6e!important;transform:translateY(-1px)!important}html body #bookingModal #modalViewFlyerBtn:active,html body #bookingModal .modal-view-flyer-btn:active,html body .modal-view-flyer-btn:active{transform:translateY(0) scale(.98)!important}@media (max-width:768px){html body #bookingModal .modal-header{padding:12px 48px 8px!important;text-align:center!important}html body #bookingModal .modal-header-title-row{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:6px 8px!important;margin-bottom:4px!important;width:100%!important}html body #bookingModal #bookingModalTitle,html body #bookingModal .modal-header-title-row h2{grid-column:auto!important;grid-row:auto!important;width:auto!important;max-width:100%!important;margin:0!important;text-align:center!important;font-size:1.15rem!important;line-height:1.25!important;white-space:normal!important}html body #bookingModal #modalViewFlyerBtn,html body #bookingModal .modal-view-flyer-btn{grid-column:auto!important;grid-row:auto!important;display:inline-flex!important;align-items:center!important;flex-shrink:0!important;margin:0!important}html body #bookingModal #modalScrollHintBtn,html body #bookingModal .modal-scroll-badge{display:none!important}}@media (min-width:769px){html body #bookingModal.modal-overlay{display:flex!important;align-items:center!important;justify-content:center!important;padding:max(20px,calc(16px + env(safe-area-inset-top,0px))) 20px 20px 20px!important;overflow-y:auto!important}html body #bookingModal .modal-container.booking-modal,html body #bookingModal .modal-container,html body #bookingModal .booking-modal{display:flex!important;flex-direction:column!important;width:min(94vw,1300px)!important;max-width:1300px!important;height:min(90dvh,840px)!important;max-height:min(90dvh,840px)!important;margin:auto!important;border-radius:20px!important;overflow:hidden!important;border:1px solid rgba(226,232,240,0.95)!important;box-shadow:0 25px 60px -12px rgba(10,22,40,0.35),0 0 0 1px rgba(255,255,255,0.9) inset!important;background:#ffffff!important}html body #bookingModal .modal-header{flex:0 0 auto!important;padding:16px 56px 14px 28px!important;position:relative!important;border-bottom:1px solid #e2e8f0!important;background:#ffffff!important}html body #bookingModal .modal-header-title-row{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;flex-wrap:wrap!important;margin:0!important}html body #bookingModal #bookingModalTitle,html body #bookingModal .modal-header-title-row h2{font-size:1.32rem!important;font-weight:700!important;color:#0a1628!important;margin:0!important;line-height:1.25!important}html body #bookingModal .modal-close,html body #detailsModal .modal-close,html body .modal-close{position:absolute!important;top:14px!important;right:18px!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;border-radius:50%!important;border:1.5px solid #fca5a5!important;background:#fef2f2!important;color:#dc2626!important;font-size:26px!important;font-weight:700!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;box-shadow:0 2px 8px rgba(220,38,38,0.15)!important;outline:none!important;transition:transform 0.25s cubic-bezier(0.16,1,0.3,1),background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease!important}html body #bookingModal .modal-close:hover,html body #detailsModal .modal-close:hover,html body .modal-close:hover{background:#dc2626!important;color:#ffffff!important;border-color:#dc2626!important;box-shadow:0 4px 14px rgba(220,38,38,0.35)!important;transform:rotate(90deg) scale(1.08)!important}html body #bookingModal .modal-close:focus-visible,html body #detailsModal .modal-close:focus-visible,html body .modal-close:focus-visible{outline:2px solid #dc2626!important;outline-offset:2px!important}html body #bookingModal .booking-modal-body{display:grid!important;grid-template-columns:440px minmax(0,1fr)!important;flex:1 1 auto!important;min-height:0!important;height:calc(100% - 64px)!important;overflow:hidden!important}html body #bookingModal .booking-image-panel{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important;overflow-y:auto!important;padding:18px 20px!important;border-right:1px solid #e2e8f0!important;background:#f8fafc!important;box-sizing:border-box!important;scrollbar-width:thin!important}html body #bookingModal .booking-image-panel .zoom-container{display:block!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;border-radius:12px!important;background:#ffffff!important;border:1px solid #e2e8f0!important}html body #bookingModal .booking-image-panel .booking-pkg-img{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}html body #bookingModal .booking-form-panel{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important;overflow-y:auto!important;padding:20px 32px 24px!important;background:#ffffff!important;box-sizing:border-box!important;scrollbar-width:thin!important}html body #bookingModal .booking-form-panel .booking-form{width:100%!important;max-width:100%!important;margin:0!important;padding:0 0 16px!important}html body #bookingModal .booking-trust-banner{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;padding:0!important;margin:0 0 14px!important}html body #bookingModal .booking-trust-banner .trust-card{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:0!important;min-height:68px!important;padding:8px 6px!important;text-align:center!important;border:1px solid #e2e8f0!important;border-radius:10px!important;background:#f8fafc!important}html body #bookingModal .booking-trust-banner .trust-icon-ring{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:50%!important}html body #bookingModal .booking-trust-banner .trust-icon-ring svg{width:16px!important;height:16px!important}html body #bookingModal .booking-trust-banner .trust-card span{font-size:0.74rem!important;font-weight:650!important;line-height:1.15!important;color:#334155!important}html body #bookingModal .modal-whatsapp-quickbook{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin:0 0 12px!important;padding:10px 16px!important;border:1px solid #86efac!important;border-radius:10px!important;background:#f0fdf4!important;box-shadow:0 2px 8px rgba(21,128,61,.08)!important}html body #bookingModal .mwq-left{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;gap:3px!important;min-width:0!important;text-align:left!important}html body #bookingModal .mwq-badge{display:inline-flex!important;align-items:center!important;align-self:flex-start!important;gap:4px!important;padding:2px 7px!important;border-radius:999px!important;background:#166534!important;color:#fff!important;font-size:0.68rem!important;font-weight:750!important;line-height:1.2!important;letter-spacing:.03em!important}html body #bookingModal .mwq-text{margin:0!important;color:#14532d!important;font-size:0.88rem!important;font-weight:600!important;line-height:1.3!important}html body #bookingModal .mwq-btn{display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-width:144px!important;min-height:40px!important;height:40px!important;padding:0 16px!important;border:1px solid #15803d!important;border-radius:8px!important;background:#15803d!important;color:#fff!important;font-size:0.88rem!important;font-weight:700!important;line-height:1.2!important;text-align:center!important;text-decoration:none!important;white-space:nowrap!important;box-shadow:0 2px 6px rgba(21,128,61,.2)!important}html body #bookingModal .mwq-btn:hover,html body #bookingModal .mwq-btn:focus-visible{background:#166534!important;border-color:#166534!important;color:#fff!important}html body #bookingModal .mwq-btn svg{width:16px!important;height:16px!important;flex:0 0 16px!important}html body #bookingModal .modal-form-divider{margin:10px 0 14px!important;color:#475569!important;font-size:0.74rem!important;font-weight:700!important;line-height:1.3!important;letter-spacing:.05em!important}html body #bookingModal .booking-progress{margin:0 0 14px!important;padding:0 0 10px!important;border-bottom:1px solid #dbe3ed!important}html body #bookingModal .booking-form-panel .form-group label{margin-bottom:6px!important;color:#243247!important;font-size:0.9rem!important;font-weight:650!important;line-height:1.3!important}html body #bookingModal .booking-form-panel .form-group input:not([type=checkbox]):not([type=radio]),html body #bookingModal .booking-form-panel .form-group select,html body #bookingModal .booking-form-panel .form-group textarea,html body #bookingModal .booking-form-panel .ts-wrapper .ts-control{min-height:46px!important;height:46px!important;padding:0 14px!important;border:1px solid #cbd5e1!important;border-radius:10px!important;background:#fff!important;color:#172033!important;font-size:0.95rem!important;box-shadow:none!important}html body #bookingModal .booking-form-panel .form-group input:focus,html body #bookingModal .booking-form-panel .form-group select:focus,html body #bookingModal .booking-form-panel .form-group textarea:focus,html body #bookingModal .booking-form-panel .ts-wrapper.focus .ts-control{border-color:#2563eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.15)!important}html body #bookingModal .beneficiary-block{margin:0 0 14px!important;padding:16px 20px!important;border:1px solid #dbe3ed!important;border-radius:12px!important;background:#fff!important}html body #bookingModal .beneficiary-heading,
html body .beneficiary-heading {
margin: 0 0 12px !important;
padding: 0 0 8px !important;
border-bottom: 1px solid #dbe3ed !important;
color: #172033 !important;
font-size: 1rem !important;
line-height: 1.3 !important;
font-weight: 700 !important;
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
text-align: left !important;
}
html body #bookingModal .beneficiary-heading::after,
html body .beneficiary-heading::after {
content: none !important;
display: none !important;
}
html body #bookingModal .copy-beneficiary-btn,
html body .copy-beneficiary-btn {
margin-left: auto !important;
}html body #bookingModal .form-row{margin-bottom:10px!important}html body #bookingModal .booking-step{padding-bottom:18px!important}html body #bookingModal .step-nav{position:relative!important;bottom:auto!important;z-index:1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin:20px 0 0!important;padding:8px 0 4px!important;border-top:none!important;background:transparent!important}html body #bookingModal .step-nav .btn{min-width:130px!important;min-height:46px!important;height:46px!important;padding:0 20px!important;border-radius:10px!important;font-size:0.95rem!important;font-weight:700!important}}@media (min-width:769px) and (max-width:1024px){html body #bookingModal .modal-container.booking-modal,html body #bookingModal .modal-container,html body #bookingModal .booking-modal{width:min(95vw,980px)!important;max-width:980px!important;height:min(90dvh,800px)!important;max-height:min(90dvh,800px)!important}html body #bookingModal .booking-modal-body{grid-template-columns:340px minmax(0,1fr)!important}html body #bookingModal .booking-form-panel{padding:16px 20px!important}}@media (max-width:768px){html body #bookingModal .modal-whatsapp-quickbook{align-items:stretch!important;flex-direction:column!important;gap:10px!important;padding:12px!important}html body #bookingModal .mwq-btn{width:100%!important;min-width:0!important;min-height:48px!important}html body #bookingModal .booking-trust-banner{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}html body #bookingModal .booking-trust-banner .trust-card{flex-direction:row!important;justify-content:flex-start!important;min-height:74px!important;padding:9px!important;text-align:left!important}html body #bookingModal .booking-trust-banner .trust-icon-ring{width:34px!important;height:34px!important;flex-basis:34px!important}html body #bookingModal .booking-trust-banner .trust-card span{font-size:.72rem!important}html body #bookingModal .step-nav{position:sticky!important;bottom:0!important;z-index:12!important;padding:12px 0!important}html body #bookingModal:has(.mobile-booking-actionbar) .step-nav{display:none!important}html body #bookingModal .step-nav .btn{min-width:112px!important}}html body #bookingModal .booking-form-panel .form-group .ts-wrapper .ts-control>input,html body #bookingModal .booking-form-panel .form-group .ts-wrapper .ts-control>input:focus,html body #bookingModal .booking-form-panel .form-group .ts-wrapper .ts-control>input:focus-visible{width:auto!important;max-width:100%!important;min-width:4px!important;height:1.25em!important;min-height:0!important;max-height:none!important;flex:1 1 auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:0 0!important;box-shadow:none!important;outline:0!important;transform:none!important;color:inherit!important;font-size:inherit!important;line-height:1.25!important}html body #bookingModal .booking-image-panel .zoom-container{height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}html body #bookingModal .booking-image-panel .booking-pkg-img{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center top!important;transform-origin:center center!important;transition:transform .28s!important}@media (hover:hover) and (pointer:fine){html body #bookingModal .booking-image-panel .zoom-container:hover .booking-pkg-img{transform:scale(1.2)!important}}@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){html body #bookingModal .booking-image-panel .zoom-container:hover .booking-pkg-img{transform:none!important}}html body #bookingModal .booking-form-panel .form-group input#bDate{padding-right:48px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 15px center!important;background-size:20px 20px!important;cursor:pointer!important}@keyframes mobileBookingPriceChange{0%,100%{color:inherit;text-shadow:none;transform:scale(1)}38%{color:#1d4ed8;text-shadow:0 3px 14px rgba(29,78,216,.28);transform:scale(1.08)}}@media (max-width:768px){html body #bookingModal .mobile-booking-total-value{color:var(--coral-500,#e11d48)!important;font-weight:800!important}html body #bookingModal .mobile-booking-total-value.price-update{animation:520ms cubic-bezier(.2,.75,.3,1) mobileBookingPriceChange;transform-origin:left center}html body #bookingModal .mobile-booking-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:nowrap!important;width:auto!important}html body #bookingModal .mobile-booking-actions>button[hidden]{display:none!important}html body #bookingModal .mobile-booking-actions>button:not([hidden]){display:inline-flex!important;flex:0 0 auto!important;width:auto!important;min-width:76px!important;white-space:nowrap!important}html body #bookingModal .mobile-booking-actions>#mobileBookingNext:not([hidden]){min-width:84px!important}html body #bookingModal:has(.mobile-booking-actionbar) .booking-step[data-step="3"].active .step-nav{display:flex!important;justify-content:flex-end!important;margin-top:.75rem!important}html body #bookingModal .booking-step[data-step="3"].active .step-nav .btn-step-prev{display:none!important}html body #bookingModal .booking-step[data-step="3"].active .step-nav .booking-submit{display:inline-flex!important;margin-left:auto!important}html body #bookingModal .mobile-booking-actions>#mobileBookingBack:not([hidden]){background:#fff!important;border:1px solid #cbd5e1!important;box-shadow:0 3px 10px rgba(15,23,42,.1)!important;color:#172033!important;cursor:pointer!important;filter:none!important;opacity:1!important;pointer-events:auto!important;text-shadow:none!important}html body #bookingModal .mobile-booking-actions>#mobileBookingBack:not([hidden]):focus-visible{outline:rgba(37,99,235,.45) solid 3px!important;outline-offset:2px!important}}@media (prefers-reduced-motion:reduce){html body #bookingModal .mobile-booking-total-value.price-update{animation:none!important}}@media (max-width:380px){html body #bookingModal .booking-trust-banner .trust-card{gap:6px!important;padding:8px!important}html body #bookingModal .booking-trust-banner .trust-card span{font-size:.68rem!important}html body #bookingModal .mobile-booking-actions{gap:6px!important}html body #bookingModal .mobile-booking-actions>button:not([hidden]){min-width:68px!important;padding-right:.7rem!important;padding-left:.7rem!important}html body #bookingModal .mobile-booking-actions>#mobileBookingNext:not([hidden]){min-width:76px!important}}/* ==========================================================================
MODERN & PREMIUM SITEWIDE ANIMATION ENGINE (GPU-Composited, 60fps/120fps)
========================================================================== */
:root {
--site-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
--site-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--site-motion-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
--site-motion-fast: 160ms;
--site-motion-standard: 280ms;
--site-motion-slow: 420ms;
}
/* Keyframes for ambient micro-interactions */
@keyframes buttonGlossSweep {
0% { left: -120%; opacity: 0; }
30% { opacity: 1; }
100% { left: 240%; opacity: 0; }
}
@keyframes modernBadgePulse {
0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(225, 29, 72, 0.22); }
50% { transform: scale(1.038); box-shadow: 0 4px 16px rgba(225, 29, 72, 0.45); }
}
@keyframes bannerUrgencyBreathe {
0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3); }
50% { transform: scale(1.045); box-shadow: 0 4px 16px rgba(225, 29, 72, 0.6); }
}
@keyframes whatsappRadarBeacon {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.65), 0 8px 24px rgba(18, 140, 126, 0.3); }
60% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0), 0 10px 28px rgba(18, 140, 126, 0.35); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 8px 24px rgba(18, 140, 126, 0.3); }
}
@keyframes beaconPulseGreen {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes beaconPulseBlue {
0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
@keyframes modernModalScaleIn {
0% { opacity: 0; transform: scale(0.93) translateY(18px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes siteDetailsExpand {
0% { opacity: 0; transform: translateY(-6px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes starSparkle {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(234, 179, 8, 0)); }
50% { transform: scale(1.18) rotate(4deg); filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.7)); }
}
/* 1. Tactile Luxury Buttons & CTAs across all pages */
html body :is(
.btn,
button:not(:disabled):not(.fc-prev):not(.fc-next):not(.fc-dot):not(.video-play-btn),
input[type="button"],
input[type="submit"],
[role="button"],
a.btn,
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-outline,
.book-now,
.book-btn,
.package-cta,
.btn-check-pin,
.sticky-cta-book-btn,
.hero-cta,
.view-details,
.modal-view-flyer-btn,
.mwq-btn,
.cta-banner .btn,
.facts-link-pill,
.quick-check-btn
) {
position: relative !important;
transition: transform var(--site-motion-standard) var(--site-motion-ease),
box-shadow var(--site-motion-standard) var(--site-motion-ease),
background-color var(--site-motion-fast) ease,
border-color var(--site-motion-fast) ease,
color var(--site-motion-fast) ease,
filter var(--site-motion-fast) ease !important;
will-change: transform, box-shadow;
}
/* Luxury button light sweep overlay */
html body :is(
.btn-primary,
.book-now,
.book-btn,
.package-cta,
.btn-check-pin,
.sticky-cta-book-btn,
.hero-cta,
.mwq-btn,
.cta-banner .btn,
#modalBookingSubmit
) {
overflow: hidden !important;
}
html body :is(
.btn-primary,
.book-now,
.book-btn,
.package-cta,
.btn-check-pin,
.sticky-cta-book-btn,
.hero-cta,
.mwq-btn,
.cta-banner .btn,
#modalBookingSubmit
)::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: -120% !important;
width: 70% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%) !important;
transform: skewX(-24deg) !important;
pointer-events: none !important;
opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
html body :is(
.btn,
button:not(:disabled):not(.fc-prev):not(.fc-next):not(.fc-dot):not(.video-play-btn),
input[type="button"],
input[type="submit"],
[role="button"],
a.btn,
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-outline,
.book-now,
.book-btn,
.package-cta,
.btn-check-pin,
.sticky-cta-book-btn,
.hero-cta,
.view-details,
.modal-view-flyer-btn,
.mwq-btn,
.cta-banner .btn,
.facts-link-pill,
.quick-check-btn
):hover {
transform: translateY(-2.5px) scale(1.015) !important;
box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.38),
0 4px 12px rgba(37, 99, 235, 0.18) !important;
filter: brightness(1.03) !important;
}
@media (prefers-reduced-motion: no-preference) {
html body :is(
.btn-primary,
.book-now,
.book-btn,
.package-cta,
.btn-check-pin,
.sticky-cta-book-btn,
.hero-cta,
.mwq-btn,
.cta-banner .btn,
#modalBookingSubmit
):hover::after {
opacity: 1;
animation: buttonGlossSweep 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
}
/* Micro-drift for trailing arrow icons */
html body :is(a.btn, button.btn, .btn, .book-now, .hero-cta, .package-cta, .facts-link-pill):hover :is(svg:not(.modal-close svg), .arrow, .cta-arrow, [class*="arrow"]) {
transform: translateX(4px) scale(1.06) !important;
transition: transform var(--site-motion-fast) var(--site-motion-spring) !important;
}
}
html body :is(
.btn,
button:not(:disabled):not(.fc-prev):not(.fc-next):not(.fc-dot):not(.video-play-btn),
input[type="button"],
input[type="submit"],
[role="button"],
a.btn,
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-outline,
.book-now,
.book-btn,
.package-cta,
.btn-check-pin,
.sticky-cta-book-btn,
.hero-cta,
.view-details,
.modal-view-flyer-btn,
.mwq-btn,
.cta-banner .btn,
.facts-link-pill,
.quick-check-btn
):active {
transform: translateY(1px) scale(0.975) !important;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22) !important;
transition-duration: 75ms !important;
}
/* 2. Interactive Luxury Cards, Packages & Grid Surfaces */
html body :is(
.package-card,
.feature-card,
.service-card,
.step-card,
.google-review-card,
.trust-card,
.accred-badge,
.blog-card,
.why-choose-card,
.why-choose-card-featured,
.pig-card,
.city-card,
.test-card,
.test-package-card,
.test-pkg-card,
.test-dir-card,
.test-support-card,
.test-related-pills-card,
.calculator-card,
.stat-item,
.mission-card,
.contact-card,
.seo-article-card,
.booking-summary-card,
.beneficiary-block,
.faq-item,
.facts-card,
.facts-stat-card,
.facts-disclosure-card,
.facts-summary-bar,
.board-card,
.policy-card,
.sitemap-card,
.hub-card,
.bmi-card,
.process-step-card,
.local-seo-card,
.diagnostic-offer-card,
.guarantee-card,
.coverage-card,
.benefit-card
) {
transition: transform 0.35s var(--site-motion-ease),
box-shadow 0.35s var(--site-motion-ease),
border-color 0.26s ease,
background-color 0.26s ease !important;
will-change: transform, box-shadow;
}
@media (hover: hover) and (pointer: fine) {
html body :is(
.package-card,
.feature-card,
.service-card,
.step-card,
.google-review-card,
.trust-card,
.accred-badge,
.blog-card,
.why-choose-card,
.why-choose-card-featured,
.pig-card,
.city-card,
.test-card,
.test-package-card,
.test-pkg-card,
.test-dir-card,
.test-support-card,
.calculator-card,
.stat-item,
.mission-card,
.contact-card,
.seo-article-card,
.facts-card,
.facts-stat-card,
.facts-disclosure-card,
.board-card,
.policy-card,
.sitemap-card,
.hub-card,
.bmi-card,
.process-step-card,
.local-seo-card,
.diagnostic-offer-card,
.guarantee-card,
.coverage-card,
.benefit-card
):hover {
transform: translateY(-6px) scale(1.012) !important;
box-shadow: 0 22px 46px -12px rgba(15, 35, 67, 0.16),
0 8px 20px -4px rgba(37, 99, 235, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
border-color: rgba(37, 99, 235, 0.36) !important;
}
/* Card image smooth zoom */
html body :is(
.package-card,
.feature-card,
.service-card,
.step-card,
.blog-card,
.city-card,
.test-card,
.calculator-card,
.diagnostic-offer-card
) img {
transition: transform 0.48s var(--site-motion-ease), filter 0.35s ease !important;
will-change: transform;
}
html body :is(
.package-card,
.feature-card,
.service-card,
.step-card,
.blog-card,
.city-card,
.test-card,
.calculator-card,
.diagnostic-offer-card
):hover img {
transform: scale(1.045) !important;
}
/* Card icons spring pop */
html body :is(
.feature-card .feature-icon,
.step-card .step-icon,
.step-card .step-number,
.accred-badge .badge-icon,
.trust-card .trust-icon-ring,
.stat-item .stat-icon,
.why-choose-card-header svg,
.facts-icon-badge,
.facts-stat-card svg,
.contact-card-icon,
.hub-card-icon,
.local-box-icon,
.guarantee-icon,
.board-card-icon,
.policy-card-icon,
.benefit-icon
) {
transition: transform 0.34s var(--site-motion-spring), color 0.2s ease !important;
}
html body :is(
.feature-card,
.step-card,
.accred-badge,
.trust-card,
.stat-item,
.why-choose-card,
.facts-card,
.facts-stat-card,
.contact-card,
.hub-card,
.board-card,
.policy-card,
.guarantee-card
):hover :is(
.feature-icon,
.step-icon,
.step-number,
.badge-icon,
.trust-icon-ring,
.stat-icon,
.why-choose-card-header svg,
.facts-icon-badge,
.facts-stat-card svg,
.contact-card-icon,
.hub-card-icon,
.local-box-icon,
.guarantee-icon,
.board-card-icon,
.policy-card-icon,
.benefit-icon
) {
transform: scale(1.14) translateY(-3px) rotate(2deg) !important;
}
/* Inclusions & Tag Pills hover */
html body :is(.package-features .package-feature-item, .package-tags span, .cities-grid-tags a, .locality-link) {
transition: transform 0.2s var(--site-motion-spring), background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}
html body :is(.package-features .package-feature-item, .package-tags span, .cities-grid-tags a, .locality-link):hover {
transform: translateY(-2px) scale(1.03) !important;
}
}
/* 3. Inputs, Search Bars & Pincode Checking Fields */
html body :is(
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.pincode-input-group,
.mpb-input-group,
.ts-wrapper .ts-control
) {
transition: border-color 0.2s ease,
box-shadow 0.26s var(--site-motion-ease),
background-color 0.2s ease,
transform 0.2s ease !important;
}
html body :is(
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.pincode-input-group:focus-within,
.mpb-input-group:focus-within,
.ts-wrapper.focus .ts-control
) {
border-color: #2563eb !important;
box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.2),
0 6px 20px -4px rgba(15, 23, 42, 0.1) !important;
transform: translateY(-1px) !important;
}
/* 4. Badges, Chips, Pills & Tags */
html body :is(
.badge,
.tag,
.locality-chip,
.locality-link,
.category-pill,
.discount-badge,
.package-zoom-badge,
.package-test-count,
.popular-badge,
.verified-badge,
.deal-tag,
.mwq-badge,
.accred-badge-pill,
.accred-ribbon-tag,
.facts-chip,
.city-tag,
.test-chip-link,
.package-tag,
.popular-tests-tags a,
.cities-grid-tags a,
.filter-pill,
.search-quick-chip,
.test-reviewer-pill,
.test-trust-chip,
.package-features .package-feature-item,
.free-badge,
.zero-collection-tag
) {
transition: transform 0.24s var(--site-motion-ease),
box-shadow 0.24s var(--site-motion-ease),
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease !important;
}
@media (hover: hover) and (pointer: fine) {
html body :is(
.badge,
.tag,
.locality-chip,
.locality-link,
.category-pill,
.discount-badge,
.package-zoom-badge,
.package-test-count,
.popular-badge,
.verified-badge,
.deal-tag,
.mwq-badge,
.accred-badge-pill,
.accred-ribbon-tag,
.facts-chip,
.city-tag,
.test-chip-link,
.package-tag,
.popular-tests-tags a,
.cities-grid-tags a,
.filter-pill,
.search-quick-chip,
.test-reviewer-pill,
.test-trust-chip,
.package-features .package-feature-item,
.free-badge,
.zero-collection-tag
):hover {
transform: translateY(-2.5px) scale(1.035) !important;
box-shadow: 0 8px 18px -2px rgba(37, 99, 235, 0.16) !important;
border-color: rgba(37, 99, 235, 0.36) !important;
}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
html body :is(.discount-badge, .popular-badge, .package-zoom-badge, .deal-tag) {
animation: modernBadgePulse 3.2s ease-in-out infinite !important;
}
html body :is(.free-badge, .zero-collection-tag, .facts-chip-accent) {
animation: beaconPulseGreen 2.8s ease-in-out infinite !important;
}
}
/* 5. Carousel Navigation Controls & Indicator Dots */
html body .fc-prev,
html body .fc-next,
html body button.fc-prev,
html body button.fc-next {
position: absolute !important;
top: calc(50% - 28px) !important;
transform: translateY(-50%) !important;
margin: 0 !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 50 !important;
cursor: pointer !important;
pointer-events: auto !important;
opacity: 1 !important;
visibility: visible !important;
transition: transform 0.32s var(--site-motion-spring),
background-color 0.22s ease,
border-color 0.22s ease,
box-shadow 0.32s var(--site-motion-ease),
color 0.2s ease !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
@media (hover: hover) and (pointer: fine) {
html body .fc-prev:hover,
html body .fc-next:hover,
html body button.fc-prev:hover,
html body button.fc-next:hover {
top: calc(50% - 28px) !important;
transform: translateY(-50%) scale(1.14) !important;
background: rgba(255, 255, 255, 0.98) !important;
border-color: rgba(37, 99, 235, 0.5) !important;
box-shadow: 0 10px 26px -2px rgba(37, 99, 235, 0.34), 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
color: #1d4ed8 !important;
}
html body .fc-prev:hover svg,
html body button.fc-prev:hover svg {
transform: translateX(-3px) scale(1.05) !important;
transition: transform 0.22s var(--site-motion-spring) !important;
}
html body .fc-next:hover svg,
html body button.fc-next:hover svg {
transform: translateX(3px) scale(1.05) !important;
transition: transform 0.22s var(--site-motion-spring) !important;
}
}
html body .fc-prev:active,
html body .fc-next:active,
html body button.fc-prev:active,
html body button.fc-next:active {
top: calc(50% - 28px) !important;
transform: translateY(-50%) scale(0.96) !important;
}
/* Fluid morphing carousel dots */
html body :is(.carousel-dots button, .fc-dot, .fc-indicator) {
transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
will-change: width, background-color, border-radius;
}
html body :is(.carousel-dots button.active, .fc-dot.active, .fc-indicator.active) {
width: 26px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.45) !important;
}
/* 6. Accordions, FAQs & Details */
html body :is(.accordion-header, .faq-item, .faq-question, details summary) {
transition: background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
transform 0.2s var(--site-motion-ease),
box-shadow 0.24s var(--site-motion-ease) !important;
}
html body .faq-item {
border-left: 3.5px solid transparent !important;
}
@media (hover: hover) and (pointer: fine) {
html body .faq-item:hover {
background-color: rgba(37, 99, 235, 0.035) !important;
border-left-color: rgba(37, 99, 235, 0.45) !important;
transform: translateX(3.5px) !important;
}
}
html body :is(
.accordion-item.active,
.faq-item.active,
.faq-item.open,
details[open]
) {
border-left-color: #2563eb !important;
box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08) !important;
}
html body :is(
.accordion-item.active,
.faq-item.active,
.faq-item.open,
details[open] > summary
) :is(svg, .accordion-chevron, .faq-chevron, .accordion-icon) {
transform: rotate(180deg) scale(1.12) !important;
color: #2563eb !important;
transition: transform 0.34s var(--site-motion-spring), color 0.2s ease !important;
}
html body details[open] > :not(summary) {
animation: siteDetailsExpand 0.28s var(--site-motion-ease) both !important;
}
/* 7. Review Stars & Testimonial Ratings */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
html body :is(.google-review-card, .stars, .star-rating):hover :is(.star, svg[fill*="gold"], svg[fill*="#f59e0b"], svg[fill*="#fbbf24"], .stars svg) {
animation: starSparkle 1.2s ease-in-out infinite alternate !important;
}
html body :is(.stars svg:nth-child(2)) { animation-delay: 0.12s !important; }
html body :is(.stars svg:nth-child(3)) { animation-delay: 0.24s !important; }
html body :is(.stars svg:nth-child(4)) { animation-delay: 0.36s !important; }
html body :is(.stars svg:nth-child(5)) { animation-delay: 0.48s !important; }
}
/* 8. Top Promo Countdown Banner Dynamics */
html body .top-countdown-banner .promo-pill,
html body .top-countdown-banner :is(.badge, .discount-badge) {
animation: bannerUrgencyBreathe 2.8s ease-in-out infinite !important;
}
html body .top-countdown-banner .timer-cell,
html body .top-countdown-banner .countdown-box {
transition: transform 0.2s ease, border-color 0.2s ease !important;
}
html body .top-countdown-banner .timer-cell:hover,
html body .top-countdown-banner .countdown-box:hover {
transform: scale(1.08) !important;
border-color: #38bdf8 !important;
}
/* 9. Floating Controls (WhatsApp Radar Beacon & Scroll-to-Top) */
html body .whatsapp-float,
html body .leadbar-whatsapp {
transition: transform 0.32s var(--site-motion-spring),
box-shadow 0.32s var(--site-motion-ease) !important;
}
@media (prefers-reduced-motion: no-preference) {
html body .whatsapp-float,
html body .leadbar-whatsapp {
animation: whatsappRadarBeacon 2.6s infinite ease-out !important;
}
}
@media (hover: hover) and (pointer: fine) {
html body .whatsapp-float:hover,
html body .leadbar-whatsapp:hover {
transform: translateY(-5px) scale(1.09) rotate(3deg) !important;
}
}
html body .whatsapp-float:active,
html body .leadbar-whatsapp:active {
transform: translateY(-1px) scale(0.95) !important;
}
html body #scrollToTop,
html body .scroll-to-top {
transition: transform 0.3s var(--site-motion-spring),
box-shadow 0.3s var(--site-motion-ease),
opacity 0.25s ease,
visibility 0.25s ease !important;
}
@media (hover: hover) and (pointer: fine) {
html body #scrollToTop:hover,
html body .scroll-to-top:hover {
transform: translateY(-4.5px) scale(1.09) !important;
box-shadow: 0 14px 30px -4px rgba(30, 64, 175, 0.45) !important;
}
html body #scrollToTop:hover svg,
html body .scroll-to-top:hover svg {
transform: translateY(-2.5px) !important;
transition: transform 0.2s ease;
}
}
html body #scrollToTop:active,
html body .scroll-to-top:active {
transform: translateY(0) scale(0.94) !important;
}
/* 10. Modals, Dialogs & Lightbox */
html body :is(.modal-container, .booking-modal, .details-modal, #lightboxModal .modal-container) {
animation: modernModalScaleIn 0.34s var(--site-motion-ease) both !important;
}
html body .swal2-popup.swal2-hide,
div:where(.swal2-container) div:where(.swal2-popup).swal2-hide {
animation: swal2-hide 0.15s forwards !important;
}
html body :is(.modal-close, #lightboxClose, .swal2-close) {
transition: transform 0.28s var(--site-motion-spring),
background-color 0.18s ease,
color 0.18s ease !important;
}
@media (hover: hover) and (pointer: fine) {
html body :is(.modal-close, #lightboxClose, .swal2-close):hover {
transform: rotate(90deg) scale(1.12) !important;
}
}
html body :is(.modal-close, #lightboxClose, .swal2-close):active {
transform: rotate(90deg) scale(0.92) !important;
}
/* 11. Footer Interactive Polish */
html body footer a {
transition: color 0.18s ease, transform 0.18s var(--site-motion-spring), padding-left 0.18s ease !important;
}
@media (hover: hover) and (pointer: fine) {
html body footer a:hover {
transform: translateX(4px) !important;
color: #38bdf8 !important;
}
}
/* 12. Universal Scroll Reveal Choreography (Desktop 60fps/120fps) */
@media (min-width: 769px) {
html:not(.skeleton-loading) .reveal {
opacity: 0;
transform: translate3d(0, 22px, 0) scale(0.985);
transition: opacity 0.5s var(--site-motion-ease), transform 0.5s var(--site-motion-ease) !important;
will-change: opacity, transform;
}
html:not(.skeleton-loading) .reveal.visible {
opacity: 1 !important;
transform: translate3d(0, 0, 0) scale(1) !important;
}
html:not(.skeleton-loading) .reveal-left {
opacity: 0;
transform: translate3d(-26px, 0, 0);
transition: opacity 0.5s var(--site-motion-ease), transform 0.5s var(--site-motion-ease) !important;
will-change: opacity, transform;
}
html:not(.skeleton-loading) .reveal-left.visible {
opacity: 1 !important;
transform: translate3d(0, 0, 0) !important;
}
html:not(.skeleton-loading) .reveal-right {
opacity: 0;
transform: translate3d(26px, 0, 0);
transition: opacity 0.5s var(--site-motion-ease), transform 0.5s var(--site-motion-ease) !important;
will-change: opacity, transform;
}
html:not(.skeleton-loading) .reveal-right.visible {
opacity: 1 !important;
transform: translate3d(0, 0, 0) !important;
}
html:not(.skeleton-loading) .reveal-scale {
opacity: 0;
transform: scale3d(0.94, 0.94, 1);
transition: opacity 0.5s var(--site-motion-ease), transform 0.5s var(--site-motion-ease) !important;
will-change: opacity, transform;
}
html:not(.skeleton-loading) .reveal-scale.visible {
opacity: 1 !important;
transform: scale3d(1, 1, 1) !important;
}
html:not(.skeleton-loading) .reveal-blur {
opacity: 0;
filter: blur(8px);
transform: translate3d(0, 18px, 0);
transition: opacity 0.5s var(--site-motion-ease), filter 0.5s var(--site-motion-ease), transform 0.5s var(--site-motion-ease) !important;
will-change: opacity, filter, transform;
}
html:not(.skeleton-loading) .reveal-blur.visible {
opacity: 1 !important;
filter: blur(0) !important;
transform: translate3d(0, 0, 0) !important;
}
/* Grid stagger sequencing (up to 16 items) */
.stagger > *:nth-child(1) { transition-delay: 35ms !important; }
.stagger > *:nth-child(2) { transition-delay: 75ms !important; }
.stagger > *:nth-child(3) { transition-delay: 115ms !important; }
.stagger > *:nth-child(4) { transition-delay: 155ms !important; }
.stagger > *:nth-child(5) { transition-delay: 195ms !important; }
.stagger > *:nth-child(6) { transition-delay: 235ms !important; }
.stagger > *:nth-child(7) { transition-delay: 275ms !important; }
.stagger > *:nth-child(8) { transition-delay: 315ms !important; }
.stagger > *:nth-child(9) { transition-delay: 315ms !important; }
.stagger > *:nth-child(10) { transition-delay: 315ms !important; }
.stagger > *:nth-child(11) { transition-delay: 315ms !important; }
.stagger > *:nth-child(12) { transition-delay: 315ms !important; }
.stagger > *:nth-child(13) { transition-delay: 315ms !important; }
.stagger > *:nth-child(14) { transition-delay: 315ms !important; }
.stagger > *:nth-child(15) { transition-delay: 315ms !important; }
.stagger > *:nth-child(16) { transition-delay: 315ms !important; }
}
@media (max-width: 768px) {
/* On mobile, cards render immediately to ensure zero scroll jank */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-blur,
.stagger > * {
opacity: 1 !important;
filter: none !important;
transform: none !important;
transition: none !important;
}
}
/* 13. Strict Accessibility & Reduced-Motion Guarantee */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-blur,
.package-card:hover,
.feature-card:hover,
.service-card:hover,
.facts-card:hover,
.facts-stat-card:hover,
.btn:hover,
.whatsapp-float:hover,
.scroll-to-top:hover,
.whatsapp-float,
.leadbar-whatsapp,
.top-countdown-banner .promo-pill {
animation: none !important;
transform: none !important;
opacity: 1 !important;
box-shadow: none !important;
}
}
.address-field-note{font-size:.8rem;color:var(--gray-600,#475569);margin:4px 0 0;line-height:1.4;font-weight:500}.address-field-note strong{color:#dc2626;font-weight:700}html body #bookingModal .booking-form .btn-check-pin,html body #bookingModal .booking-form .pincode-input-group #btnCheckPin,html body #bookingModal .booking-form .pincode-input-group .btn-check-pin,html body #btnCheckPin,html body .booking-form .btn-check-pin,html body .booking-form .pincode-input-group .btn-check-pin{background:linear-gradient(135deg,#1d4ed8 0,#1e40af 100%)!important;background-color:#1d4ed8!important;color:#fff!important;border:none!important;border-radius:8px!important;font-weight:700!important;font-size:.86rem!important;letter-spacing:.01em!important;box-shadow:0 2px 6px rgba(30,64,175,.25)!important;transition:.2s cubic-bezier(.16, 1, .3, 1)!important;cursor:pointer!important;text-decoration:none!important}html body #bookingModal .booking-form .btn-check-pin:focus-visible,html body #bookingModal .booking-form .btn-check-pin:hover,html body #bookingModal .booking-form .pincode-input-group #btnCheckPin:focus-visible,html body #bookingModal .booking-form .pincode-input-group #btnCheckPin:hover,html body #bookingModal .booking-form .pincode-input-group .btn-check-pin:focus-visible,html body #bookingModal .booking-form .pincode-input-group .btn-check-pin:hover,html body #btnCheckPin:focus-visible,html body #btnCheckPin:hover,html body .booking-form .btn-check-pin:focus-visible,html body .booking-form .btn-check-pin:hover,html body .booking-form .pincode-input-group .btn-check-pin:focus-visible,html body .booking-form .pincode-input-group .btn-check-pin:hover{background:linear-gradient(135deg,#1e40af 0,#17389c 100%)!important;background-color:#1e40af!important;color:#fff!important;border:none!important;box-shadow:0 4px 14px rgba(30,64,175,.4),inset 0 1px 1px rgba(255,255,255,.35)!important;transform:translateY(-1px)!important}html body #bookingModal .booking-form .btn-check-pin:active,html body #bookingModal .booking-form .pincode-input-group #btnCheckPin:active,html body #bookingModal .booking-form .pincode-input-group .btn-check-pin:active,html body #btnCheckPin:active,html body .booking-form .btn-check-pin:active,html body .booking-form .pincode-input-group .btn-check-pin:active{background:#17389c!important;color:#fff!important;transform:translateY(0) scale(.98)!important;box-shadow:0 1px 4px rgba(30,64,175,.25)!important}html body #bookingModal .booking-form .btn-check-pin:disabled,html body #bookingModal .booking-form .pincode-input-group #btnCheckPin:disabled,html body #bookingModal .booking-form .pincode-input-group .btn-check-pin:disabled,html body #btnCheckPin:disabled,html body .booking-form .btn-check-pin:disabled,html body .booking-form .pincode-input-group .btn-check-pin:disabled{opacity:.65!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}
/* Hide visible page breadcrumb trails across the site. */
html body nav[aria-label="Breadcrumb"], html body nav[aria-label="breadcrumb"], html body .breadcrumb { display: none !important; }
/* Keep page headings comfortably spaced below the floating navigation across the site. */
@media (min-width: 769px) {
/* Prevent countdown banner and site stylesheet padding collisions on body */
html body.has-countdown-banner:has(.page-hero, header.tests-hero, section.test-hero, .contact-page-section, .calculator-container, main#main-content > section.section-padding:first-of-type:not(#popularTests), main#main-content.card, main.error-page) {
margin-top: 0 !important;
padding-top: 0 !important;
}
html body:not(.has-countdown-banner):has(.page-hero, header.tests-hero, section.test-hero, .contact-page-section, .calculator-container, main#main-content > section.section-padding:first-of-type:not(#popularTests), main#main-content.card, main.error-page) {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
@media (min-width: 993px) {
/* Standard hero padding on desktop (~40px comfortable gap below floating navigation pod) */
html body .page-hero,
html body .contact-page-section,
html body .calculator-container,
html body main#main-content > section.section-padding:first-of-type:not(#popularTests),
html body main#main-content.card,
html body main.error-page#main-content {
padding-top: 136px !important;
padding-bottom: 22px !important;
}
/* Single test pages (top badge + h1 title) */
html body section.test-hero {
padding-top: 130px !important;
padding-bottom: 32px !important;
}
/* Tests index hero (top badge + h1 title + search) */
html body header.tests-hero {
padding-top: 124px !important;
padding-bottom: 44px !important;
}
}
@media (min-width: 769px) and (max-width: 992px) {
/* Tablet heroes without in-flow pincode banner (e.g. tests index) */
html body header.tests-hero,
html body:not(:has(.mobile-pincode-banner)) .page-hero,
html body:not(:has(.mobile-pincode-banner)) section.test-hero,
html body:not(:has(.mobile-pincode-banner)) .contact-page-section,
html body:not(:has(.mobile-pincode-banner)) .calculator-container,
html body:not(:has(.mobile-pincode-banner)) main#main-content > section.section-padding:first-of-type:not(#popularTests) {
padding-top: 136px !important;
padding-bottom: 36px !important;
}
}
@media (max-width: 768px) {
/* Mobile heroes without in-flow pincode banner (e.g. tests index) */
html body header.tests-hero,
html body:not(:has(.mobile-pincode-banner)) .page-hero,
html body:not(:has(.mobile-pincode-banner)) section.test-hero,
html body:not(:has(.mobile-pincode-banner)) .contact-page-section,
html body:not(:has(.mobile-pincode-banner)) .calculator-container,
html body:not(:has(.mobile-pincode-banner)) main#main-content > section.section-padding:first-of-type:not(#popularTests) {
padding-top: 126px !important;
padding-bottom: 32px !important;
}
/* Anchor mobile navbar pod to top of viewport cleanly */
html body #navbar.navbar,
html body #navbar.navbar.scrolled,
html body #navbar.navbar.menu-open,
body #navbar.navbar,
body #navbar.navbar.scrolled,
body #navbar.navbar.menu-open,
html body.has-countdown-banner #navbar.navbar,
html body.has-countdown-banner #navbar.navbar.scrolled,
html body.has-countdown-banner #navbar.navbar.menu-open,
body.has-countdown-banner #navbar.navbar,
body.has-countdown-banner #navbar.navbar.scrolled,
body.has-countdown-banner #navbar.navbar.menu-open,
html body .navbar,
html body.has-countdown-banner .navbar,
html body.has-countdown-banner .navbar.scrolled,
html body.has-countdown-banner .navbar.menu-open,
body.has-countdown-banner .navbar,
body.has-countdown-banner .navbar.scrolled,
body.has-countdown-banner .navbar.menu-open {
top: calc(8px + env(safe-area-inset-top, 0px)) !important;
inset: calc(8px + env(safe-area-inset-top, 0px)) 0 auto !important;
}
/* Clear the floating navbar pod on pages with the mobile pincode banner */
html body .mobile-pincode-banner,
html body.has-countdown-banner .mobile-pincode-banner,
body.has-countdown-banner .mobile-pincode-banner,
body .mobile-pincode-banner {
margin-top: calc(96px + env(safe-area-inset-top, 0px)) !important;
margin-bottom: 8px !important;
}
}
/* ==========================================================================
MOBILE & DESKTOP OVERFLOW CONTAINMENT (Zero Side-Scroll Guarantee)
========================================================================== */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
@media (max-width: 992px) {
#welcome-carousel,
.flipkart-carousel {
overflow: hidden !important;
max-width: 100% !important;
}
#welcome-carousel .fc-prev,
#welcome-carousel .fc-next,
.fc-prev,
.fc-next {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
#why-choose-us,
section#why-choose-us,
.why-choose-us {
overflow: hidden !important;
max-width: 100% !important;
}
.hero-trust-accreditations {
overflow-x: hidden !important;
max-width: 100% !important;
}
.accred-ribbon-inner {
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.testimonial-carousel,
.testimonial-carousel-wrapper {
overflow: hidden !important;
max-width: 100% !important;
}
}
/* ==========================================================================
MOBILE FIDELITY & RESPONSIVE POLISH ENGINE (All Screen Sizes 320px - 768px+)
Guarantees 100% fluid, accessible, bug-free rendering across every device.
========================================================================== */
/* 1. Mobile Menu & Backdrop Overlay Hygiene */
@media (max-width: 992px) {
html body #navbar.navbar .container,
html body .navbar .container {
z-index: 1005 !important;
}
html body #navbar.navbar .hamburger,
html body .navbar .hamburger,
.hamburger {
z-index: 1010 !important;
min-width: 44px !important;
min-height: 44px !important;
width: 44px !important;
height: 44px !important;
pointer-events: auto !important;
}
html body #navbar.navbar .nav-links,
html body .navbar .nav-links,
#navLinks {
z-index: 1002 !important;
}
html body #navbar.navbar.menu-open,
html body .navbar.menu-open {
pointer-events: auto !important;
}
html body #navbar.navbar .mobile-overlay,
html body .navbar .mobile-overlay,
html body #mobileOverlay,
html body .mobile-overlay {
position: fixed !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
background: rgba(10, 22, 40, 0.48) !important;
-webkit-backdrop-filter: blur(4px) !important;
backdrop-filter: blur(4px) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 998 !important;
transition: opacity 220ms ease, visibility 220ms ease !important;
}
html body #navbar.navbar .mobile-overlay.active,
html body .navbar .mobile-overlay.active,
html body #mobileOverlay.active,
html body .mobile-overlay.active,
html body.menu-open .mobile-overlay {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
display: block !important;
}
}
/* 2. Scroll-To-Top Button Right-Side Thumb-Zone Positioning & Sizing */
@media (max-width: 768px) {
html body:not(#__x__) #scrollToTop,
html body:not(#__x__) .scroll-to-top,
html body #scrollToTop,
html body .scroll-to-top,
body #scrollToTop,
body .scroll-to-top,
#scrollToTop,
.scroll-to-top {
position: fixed !important;
right: max(16px, env(safe-area-inset-right, 0px)) !important;
left: auto !important;
bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
width: 46px !important;
height: 46px !important;
min-width: 44px !important;
min-height: 44px !important;
border-radius: 50% !important;
z-index: 9992 !important;
}
html body:not(#__x__):not(:has(.mobile-sticky-leadbar)) #scrollToTop,
html body:not(#__x__):not(:has(.mobile-sticky-leadbar)) .scroll-to-top,
html body:not(:has(.mobile-sticky-leadbar)) #scrollToTop,
html body:not(:has(.mobile-sticky-leadbar)) .scroll-to-top {
bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* 3. Booking Modal Opacity & Bleed-Through Prevention */
html body #bookingModal.modal-overlay,
html body #detailsModal.modal-overlay,
.modal-overlay {
background: rgba(10, 20, 38, 0.72) !important;
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
z-index: 1000000 !important;
}
/* Service Available / SweetAlert2 Modal / Pincode Checker Card: Always display on top of booking form and all modals */
html body .swal2-container,
html body div:where(.swal2-container),
html body .swal2-container.swal2-backdrop-show,
html body div:where(.swal2-container).swal2-backdrop-show,
div:where(.swal2-container),
.swal2-container {
z-index: 20000000 !important;
position: fixed !important;
}
html body .swal2-popup,
html body div:where(.swal2-container) div:where(.swal2-popup),
html body .swal2-modal,
div:where(.swal2-container) div:where(.swal2-popup),
.swal2-popup,
.swal2-modal {
z-index: 20000001 !important;
}
html body #bookingModal .modal-container,
html body #detailsModal .modal-container,
html body .modal-container.booking-modal,
html body .booking-modal {
background: #ffffff !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
opacity: 1 !important;
}
html body #bookingModal .modal-header,
html body #detailsModal .modal-header {
background: #ffffff !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-bottom: 1px solid #e2e8f0 !important;
opacity: 1 !important;
}
html body #bookingModal .booking-tabs-nav {
background: #ffffff !important;
border-bottom: 1px solid #e2e8f0 !important;
position: sticky !important;
top: 0 !important;
z-index: 20 !important;
}
html body #bookingModal .booking-modal-body,
html body #bookingModal .booking-form-panel {
background: #ffffff !important;
opacity: 1 !important;
}
html body #bookingModal .mobile-booking-actionbar {
background: #ffffff !important;
border-top: 1px solid #e2e8f0 !important;
box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
opacity: 1 !important;
z-index: 30 !important;
}
/* 4. iOS Safari Form Zoom Elimination (Enforce >= 16px font-size) */
@media (max-width: 768px) {
html body input:not([type="checkbox"]):not([type="radio"]),
html body select,
html body textarea,
html body .pincode-input-group input,
html body .mpb-input-group input,
html body .nav-pincode input,
html body #nav-pincode-input,
html body #navbar.navbar .nav-pincode .pincode-input-group input,
html body .navbar .nav-pincode .pincode-input-group input,
html body .booking-form input,
html body .booking-form select,
html body .booking-form textarea,
html body .ts-wrapper .ts-control,
html body .ts-wrapper .ts-control input,
html body #bookingModal .booking-form-panel .form-group input:not([type="checkbox"]):not([type="radio"]),
html body #bookingModal .booking-form-panel .form-group select,
html body #bookingModal .booking-form-panel .form-group textarea,
html body #bookingModal input:not([type="checkbox"]):not([type="radio"]),
html body #bookingModal select,
html body #bookingModal textarea {
font-size: 16px !important;
}
}
/* 5. Mobile Touch Target Compliance (Minimum 44x44px per WCAG 2.5.5) */
@media (max-width: 768px) {
html body .dir-alpha-btn,
.dir-alpha-btn {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body #bookingModal .modal-close {
min-width: 44px !important;
min-height: 44px !important;
width: 44px !important;
height: 44px !important;
}
html body #bookingModal .booking-tabs-nav .booking-tab-btn {
min-height: 44px !important;
}
html body #bookingModal .mobile-booking-actions button:not([hidden]) {
min-height: 44px !important;
}
html body .btn-check-pin,
html body .pincode-input-group .btn-check-pin {
min-height: 44px !important;
min-width: 76px !important;
}
}
/* 6. Ultra-Compact & Foldable Mobile Screen Adaptations (280px - 380px) */
@media (max-width: 340px) {
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar {
gap: 2px !important;
padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-glass-pill {
max-width: calc(100vw - 48px) !important;
height: 48px !important;
padding: 2px !important;
gap: 1px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-item {
min-height: 40px !important;
padding: 1px !important;
gap: 1px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-label {
font-size: clamp(9.5px, 2.6vw, 11px) !important;
letter-spacing: -0.1px !important;
line-height: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-icon {
width: 15px !important;
height: 15px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .leadbar-whatsapp {
flex: 0 0 44px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
html body #navbar.navbar .container {
width: calc(100% - 8px) !important;
max-width: calc(100% - 8px) !important;
padding: 4px 6px !important;
}
html body #navbar.navbar .nav-logo-img {
max-width: 145px !important;
}
html body .hero-trust-bar {
grid-template-columns: 1fr !important;
gap: 6px !important;
padding: 8px !important;
}
html body .fc-indicators {
gap: 3px !important;
margin: 5px auto 0 !important;
}
html body .fc-dot {
width: 14px !important;
min-width: 14px !important;
height: 14px !important;
min-height: 14px !important;
}
html body .fc-dot::after {
width: 4px !important;
height: 4px !important;
}
html body .fc-dot[aria-current="true"] {
width: 18px !important;
min-width: 18px !important;
}
html body .fc-dot[aria-current="true"]::after {
width: 12px !important;
}
html body .mobile-pincode-banner .mpb-input-group .btn-check-pin {
min-width: 58px !important;
padding: 0 8px !important;
font-size: 0.76rem !important;
}
html body main#main-content .package-card-body {
padding: 12px 10px !important;
}
html body .package-pricing .current-price {
font-size: 1.35rem !important;
}
}
@media (min-width: 341px) and (max-width: 380px) {
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar {
gap: 3px !important;
padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-glass-pill {
max-width: calc(100vw - 58px) !important;
height: 52px !important;
padding: 2px !important;
gap: 1px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-item {
min-height: 44px !important;
padding: 2px 1px !important;
gap: 1px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-label {
font-size: 9px !important;
letter-spacing: -0.3px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-icon {
width: 17px !important;
height: 17px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .leadbar-whatsapp {
flex: 0 0 44px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
html body #navbar.navbar .container {
width: calc(100% - 12px) !important;
max-width: calc(100% - 12px) !important;
padding: 4px 8px !important;
}
html body #navbar.navbar .nav-logo-img {
max-width: 170px !important;
}
html body .fc-indicators {
gap: 3.5px !important;
margin: 6px auto 0 !important;
}
html body .fc-dot {
width: 16px !important;
min-width: 16px !important;
height: 16px !important;
min-height: 16px !important;
}
html body .fc-dot::after {
width: 4.5px !important;
height: 4.5px !important;
}
html body .fc-dot[aria-current="true"] {
width: 22px !important;
min-width: 22px !important;
}
html body .fc-dot[aria-current="true"]::after {
width: 14px !important;
}
}
@media (max-width: 480px) {
html body .fc-indicators {
gap: 4.5px !important;
}
html body .fc-dot {
width: 20px !important;
min-width: 20px !important;
height: 20px !important;
min-height: 20px !important;
}
html body .fc-dot::after {
width: 5px !important;
height: 5px !important;
}
html body .fc-dot[aria-current="true"] {
width: 24px !important;
min-width: 24px !important;
}
html body .fc-dot[aria-current="true"]::after {
width: 16px !important;
}
html body footer .container,
html body main#main-content.container,
html body main#main-content > section > .container {
width: calc(100% - 20px) !important;
max-width: calc(100% - 20px) !important;
}
}
/* 7. Horizontal Scroll Containment & Momentum Scrolling */
.test-table-wrap,
.table-responsive,
.package-table-wrapper,
.table-container {
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
}
.accred-ribbon-inner {
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
scroll-snap-type: x proximity !important;
}
.accred-ribbon-inner .accred-pill {
scroll-snap-align: start !important;
flex-shrink: 0 !important;
}
/* ==========================================================================
8. DESKTOP SCREEN ALIGNMENT & PRECISION NAVBAR LAYOUT (993px - 4K)
Fixes clipping, overflows, and misalignment on all laptop & desktop screens
========================================================================== */
@media (min-width: 993px) {
html body #navbar.navbar,
html body .navbar {
top: 52px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
padding: 8px clamp(12px, 1.6vw, 24px) !important;
margin: 0 auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
pointer-events: none !important;
z-index: 1000 !important;
}
html body.has-countdown-banner #navbar.navbar,
html body.has-countdown-banner .navbar {
top: 52px !important;
inset: 52px 0 auto !important;
}
html body #navbar.navbar .container,
html body .navbar .container {
pointer-events: auto !important;
position: relative !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: min(1380px, 100%) !important;
margin: 0 auto !important;
box-sizing: border-box !important;
border-radius: var(--glass-radius-nav, 9999px) !important;
background: var(--glass-tint) !important;
border: 1.5px solid var(--glass-border) !important;
box-shadow: var(--glass-shadow) !important;
}
html body #navbar.navbar .nav-logo,
html body .navbar .nav-logo {
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
min-width: 0 !important;
margin-right: 0 !important;
overflow: hidden !important;
}
html body #navbar.navbar .nav-links,
html body .navbar .nav-links {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex: 1 1 auto !important;
min-width: 0 !important;
flex-wrap: nowrap !important;
margin-left: auto !important;
position: relative !important;
width: auto !important;
height: auto !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
}
html body #navbar.navbar .nav-links .nav-liquid-pill,
html body .navbar .nav-links .nav-liquid-pill {
position: absolute !important;
top: 0 !important;
left: 0 !important;
border-radius: 9999px !important;
background: linear-gradient(135deg, rgba(239, 246, 255, 0.98) 0%, rgba(219, 234, 254, 0.90) 100%) !important;
border: 1.5px solid rgba(37, 99, 235, 0.45) !important;
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.18),
0 0 12px rgba(37, 99, 235, 0.10),
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.95),
inset 0 -1px 2px rgba(37, 99, 235, 0.12) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
backdrop-filter: blur(12px) saturate(180%) !important;
pointer-events: none !important;
z-index: 1 !important;
opacity: 0;
will-change: transform, width, opacity;
overflow: hidden !important;
display: block !important;
}
html body #navbar.navbar .nav-links > a,
html body .navbar .nav-links > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
line-height: 1 !important;
border-radius: 9999px !important;
font-family: var(--font-heading) !important;
font-weight: 600 !important;
color: #1e3a6e !important;
background: transparent !important;
border: 1px solid transparent !important;
text-decoration: none !important;
-webkit-tap-highlight-color: transparent !important;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body #navbar.navbar .nav-links > a.active,
html body .navbar .nav-links > a.active {
color: #1d4ed8 !important;
background: rgba(37, 99, 235, 0.09) !important;
border-color: rgba(37, 99, 235, 0.2) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(37, 99, 235, 0.08) !important;
}
html body #navbar.navbar .nav-links > a.active .nav-icon,
html body .navbar .nav-links > a.active .nav-icon {
color: #1d4ed8 !important;
}
html body #navbar.navbar .nav-pincode,
html body .navbar .nav-pincode {
display: flex !important;
align-items: center !important;
position: relative !important;
box-sizing: border-box !important;
}
html body #navbar.navbar .pincode-input-group,
html body .navbar .pincode-input-group {
display: flex !important;
align-items: center !important;
gap: 4px !important;
background: rgba(255, 255, 255, 0.96) !important;
border-radius: 26px !important;
border: 1.5px solid var(--teal-900, #0a1628) !important;
width: 100% !important;
box-sizing: border-box !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
html body #navbar.navbar .pincode-input-group:focus-within,
html body .navbar .pincode-input-group:focus-within {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}
html body #navbar.navbar .nav-pincode input,
html body .navbar .nav-pincode input {
flex: 1 1 auto !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
border: none !important;
background: transparent !important;
color: var(--gray-900, #111827) !important;
outline: none !important;
box-sizing: border-box !important;
}
html body #navbar.navbar .nav-pincode .btn-check-pin,
html body .navbar .nav-pincode .btn-check-pin {
flex: 0 0 auto !important;
white-space: nowrap !important;
border-radius: 20px !important;
background: var(--teal-500, #1e40af) !important;
color: #fff !important;
border: none !important;
cursor: pointer !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
transition: background 0.2s ease, transform 0.2s ease !important;
}
html body #navbar.navbar .hamburger,
html body .navbar .hamburger {
display: none !important;
}
html body .mobile-pincode-banner {
display: none !important;
}
}
/* 8A. Compact Desktop Screens (993px - 1180px, e.g. 1024px & iPad Pro Landscape) */
@media (min-width: 993px) and (max-width: 1180px) {
html body #navbar.navbar .container,
html body .navbar .container {
height: 62px !important;
min-height: 62px !important;
padding: 4px 18px 4px 14px !important;
gap: 8px !important;
}
html body #navbar.navbar .nav-logo-img,
html body .navbar .nav-logo-img {
height: 38px !important;
max-height: 38px !important;
max-width: 195px !important;
width: auto !important;
aspect-ratio: 257/48 !important;
}
html body #navbar.navbar .nav-links,
html body .navbar .nav-links {
gap: 3px !important;
}
html body #navbar.navbar .nav-links > a,
html body .navbar .nav-links > a {
padding: 5px 6px !important;
font-size: 0.78rem !important;
gap: 4px !important;
min-height: 34px !important;
}
html body #navbar.navbar .nav-links > a .nav-icon,
html body .navbar .nav-links > a .nav-icon {
width: 13px !important;
height: 13px !important;
}
html body #navbar.navbar .nav-pincode,
html body .navbar .nav-pincode {
flex: 0 1 clamp(235px, 22vw, 255px) !important;
width: auto !important;
min-width: 225px !important;
max-width: 260px !important;
margin-left: 6px !important;
flex-shrink: 0 !important;
}
html body #navbar.navbar .pincode-input-group,
html body .navbar .pincode-input-group {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 34px !important;
padding: 2px 2px 2px 8px !important;
}
html body #navbar.navbar .nav-pincode input,
html body .navbar .nav-pincode input {
font-size: 0.78rem !important;
padding: 0 4px !important;
}
html body #navbar.navbar .nav-pincode .btn-check-pin,
html body .navbar .nav-pincode .btn-check-pin {
height: 28px !important;
min-height: 28px !important;
padding: 0 10px !important;
font-size: 0.75rem !important;
}
html body #welcome-carousel,
#welcome-carousel {
padding: 0 24px 20px !important;
}
.fc-prev {
left: -14px !important;
}
.fc-next {
right: -14px !important;
}
}
/* 8B. Mid-Sized Desktop & Laptops (1181px - 1399px, e.g. 1280px & 1366px) */
@media (min-width: 1181px) and (max-width: 1399px) {
html body #navbar.navbar .container,
html body .navbar .container {
height: 66px !important;
min-height: 66px !important;
padding: 5px 22px 5px 18px !important;
gap: 12px !important;
}
html body #navbar.navbar .nav-logo-img,
html body .navbar .nav-logo-img {
height: 44px !important;
max-height: 44px !important;
max-width: 235px !important;
width: auto !important;
aspect-ratio: 257/48 !important;
}
html body #navbar.navbar .nav-links,
html body .navbar .nav-links {
gap: clamp(4px, 0.6vw, 10px) !important;
}
html body #navbar.navbar .nav-links > a,
html body .navbar .nav-links > a {
padding: 6px clamp(8px, 0.8vw, 13px) !important;
font-size: clamp(0.82rem, 0.88vw, 0.88rem) !important;
gap: 5px !important;
min-height: 38px !important;
}
html body #navbar.navbar .nav-links > a .nav-icon,
html body .navbar .nav-links > a .nav-icon {
width: 14px !important;
height: 14px !important;
}
html body #navbar.navbar .nav-pincode,
html body .navbar .nav-pincode {
flex: 0 1 clamp(290px, 22vw, 350px) !important;
width: auto !important;
min-width: 275px !important;
max-width: 360px !important;
margin-left: clamp(6px, 0.8vw, 12px) !important;
flex-shrink: 0 !important;
}
html body #navbar.navbar .pincode-input-group,
html body .navbar .pincode-input-group {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 36px !important;
padding: 2px 2px 2px 10px !important;
}
html body #navbar.navbar .nav-pincode input,
html body .navbar .nav-pincode input {
font-size: 0.82rem !important;
padding: 0 6px !important;
}
html body #navbar.navbar .nav-pincode .btn-check-pin,
html body .navbar .nav-pincode .btn-check-pin {
height: 30px !important;
min-height: 30px !important;
padding: 0 13px !important;
font-size: 0.78rem !important;
}
html body #welcome-carousel,
#welcome-carousel {
padding: 0 24px 20px !important;
}
.fc-prev {
left: -14px !important;
}
.fc-next {
right: -14px !important;
}
}
/* 8C. Large Desktop Screens (>= 1400px, e.g. 1440px, 1600px, 1920px Full HD+) */
@media (min-width: 1400px) {
html body #navbar.navbar .container,
html body .navbar .container {
height: 70px !important;
min-height: 70px !important;
max-width: 1380px !important;
padding: 6px 24px 6px 22px !important;
gap: 16px !important;
}
html body #navbar.navbar .nav-logo-img,
html body .navbar .nav-logo-img {
height: 48px !important;
max-height: 48px !important;
max-width: 257px !important;
width: auto !important;
aspect-ratio: 257/48 !important;
}
html body #navbar.navbar .nav-links,
html body .navbar .nav-links {
gap: clamp(8px, 1vw, 16px) !important;
}
html body #navbar.navbar .nav-links > a,
html body .navbar .nav-links > a {
padding: 7px 15px !important;
font-size: 0.92rem !important;
gap: 6px !important;
min-height: 42px !important;
}
html body #navbar.navbar .nav-links > a .nav-icon,
html body .navbar .nav-links > a .nav-icon {
width: 15px !important;
height: 15px !important;
}
html body #navbar.navbar .nav-pincode,
html body .navbar .nav-pincode {
flex: 0 1 clamp(340px, 23vw, 410px) !important;
width: auto !important;
min-width: 320px !important;
max-width: 420px !important;
margin-left: 14px !important;
flex-shrink: 0 !important;
}
html body #navbar.navbar .pincode-input-group,
html body .navbar .pincode-input-group {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 38px !important;
padding: 2px 2px 2px 12px !important;
}
html body #navbar.navbar .nav-pincode input,
html body .navbar .nav-pincode input {
font-size: 0.84rem !important;
padding: 0 8px !important;
}
html body #navbar.navbar .nav-pincode .btn-check-pin,
html body .navbar .nav-pincode .btn-check-pin {
height: 32px !important;
min-height: 32px !important;
padding: 0 15px !important;
font-size: 0.80rem !important;
}
html body #welcome-carousel,
#welcome-carousel {
padding: 0 64px 20px !important;
}
.fc-prev {
left: -52px !important;
}
.fc-next {
right: -52px !important;
}
html body .container,
html body main#main-content.container,
html body main#main-content > section > .container,
html body footer .container,
html body .hero-trust-container {
max-width: 1380px !important;
margin-inline: auto !important;
}
.flipkart-carousel {
max-width: 1380px !important;
}
}
/* 8D. Full HD & 2K QHD Desktop Displays (1920px - 2560px) */
@media (min-width: 1920px) {
html body #navbar.navbar .container,
html body .navbar .container {
height: 72px !important;
min-height: 72px !important;
max-width: 1480px !important;
padding: 6px 28px !important;
}
html body .container,
html body main#main-content.container,
html body main#main-content > section > .container,
html body footer .container,
html body .hero-trust-container {
max-width: 1480px !important;
margin-inline: auto !important;
}
.flipkart-carousel {
max-width: 1480px !important;
}
html body #welcome-carousel,
#welcome-carousel {
padding: 0 72px 22px !important;
}
.fc-prev {
left: -58px !important;
}
.fc-next {
right: -58px !important;
}
html body main#main-content .test-packages-grid,
.test-packages-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
max-width: 1480px !important;
margin-inline: auto !important;
}
html body main#main-content .features-grid,
.features-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
}
html body main#main-content .hero-stats-grid {
gap: 20px !important;
}
}
/* 8E. Ultra-Wide & 4K UHD Displays (>= 2561px, e.g. 2560x1440, 3440x1440 21:9, 3840x2160 4K, 5120x2880 5K) */
@media (min-width: 2561px) {
html body #navbar.navbar .container,
html body .navbar .container {
height: 76px !important;
min-height: 76px !important;
max-width: 1600px !important;
padding: 8px 32px !important;
}
html body .container,
html body main#main-content.container,
html body main#main-content > section > .container,
html body footer .container,
html body .hero-trust-container {
max-width: 1600px !important;
margin-inline: auto !important;
}
.flipkart-carousel {
max-width: 1600px !important;
}
html body #welcome-carousel,
#welcome-carousel {
padding: 0 80px 24px !important;
}
.fc-prev {
left: -64px !important;
}
.fc-next {
right: -64px !important;
}
html body main#main-content .test-packages-grid,
.test-packages-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 28px !important;
max-width: 1600px !important;
margin-inline: auto !important;
}
html body main#main-content .features-grid,
.features-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 28px !important;
}
html body main#main-content p,
html body main#main-content li,
html body main#main-content dd {
max-width: 80ch;
}
}
/* 8F. Tablet Screens (769px - 992px, e.g. iPad 768/810/820/834px, Surface Pro 912px) */
@media (min-width: 769px) and (max-width: 992px) {
html body #welcome-carousel,
#welcome-carousel {
padding: 0 36px 18px !important;
margin: 28px auto 16px !important;
}
.flipkart-carousel {
width: 100% !important;
border-radius: 20px !important;
}
.fc-prev {
left: -14px !important;
width: 40px !important;
height: 40px !important;
}
.fc-next {
right: -14px !important;
width: 40px !important;
height: 40px !important;
}
.fc-prev svg,
.fc-next svg {
width: 20px !important;
height: 20px !important;
}
html body .hero-trust-bar {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 10px !important;
padding: 12px 14px !important;
}
html body .hero-trust-bar .trust-card {
min-height: 56px !important;
padding: 8px 10px !important;
gap: 8px !important;
}
html body .hero-trust-bar .trust-card strong {
font-size: 0.82rem !important;
}
html body .hero-trust-bar .trust-card span {
font-size: 0.72rem !important;
}
html body main#main-content .test-packages-grid,
.test-packages-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px !important;
}
html body .container,
html body main#main-content.container,
html body main#main-content > section > .container,
html body footer .container {
width: calc(100% - 32px) !important;
max-width: 960px !important;
}
}
/* 8G. Carousel Silky Smooth & Slower Picture Transition */
html body #welcome-carousel .fc-track,
html body .flipkart-carousel .fc-track,
.fc-track {
transition: transform 0.75s cubic-bezier(0.25, 1, 0.35, 1) !important;
will-change: transform !important;
}
html body #welcome-carousel .fc-dot::after,
html body .flipkart-carousel .fc-dot::after,
.fc-dot::after {
transition: width 0.42s cubic-bezier(0.25, 1, 0.35, 1), background 0.35s ease !important;
}
/* ==========================================================================
High-Fidelity Typography & Vector Clarity Engine (Sitewide)
========================================================================== */
/* 1. Razor-Sharp Font Antialiasing & Subpixel Geometry */
html, body, button, input, select, textarea, p, span, h1, h2, h3, h4, h5, h6, a, label, li, td, th {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
}
/* 2. High-Precision Vector & SVG Crispness */
svg {
shape-rendering: geometricPrecision !important;
text-rendering: geometricPrecision !important;
}
/* Shared red marker for semantic headings across every page family. */
html body h1::before,
html body h2::before,
html body h3::before,
html body h4::before,
html body h5::before,
html body h6::before {
content: "";
display: inline-block;
width: 5px;
height: 0.8em;
margin-inline-end: 0.34em;
border-radius: 999px;
background: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%);
vertical-align: -0.04em;
box-shadow: 0 1px 3px rgba(185, 28, 28, 0.18);
}
/* Headings with explicit custom accent bars or flex layouts must not render pseudo-element marker */
html body .bov-title::before,
html body h2.bov-title::before,
html body .bov-card-title::before,
html body h3.bov-card-title::before {
content: none !important;
display: none !important;
}
html body h1 .highlight,
html body h2 .highlight,
html body h3 .highlight,
html body h4 .highlight,
html body h5 .highlight,
html body h6 .highlight,
html body .section-title .highlight,
html body .cities-title .highlight,
html body [class*="-title"] .highlight,
html body h1 span.highlight,
html body h2 span.highlight,
html body h3 span.highlight,
html body h4 span.highlight {
color: #be123c !important;
font-weight: inherit !important;
}
/* ==========================================================================
Curvy Wave Border Divider (Sitewide)
========================================================================== */
.curvy-border {
display: block !important;
width: 100% !important;
height: 18px !important;
min-height: 18px !important;
margin: 0 auto !important;
padding: 0 !important;
border: none !important;
outline: none !important;
background-color: transparent !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0,12 Q25,2 50,12 T100,12' fill='none' stroke='%231a2a6c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-repeat: repeat-x !important;
background-position: center !important;
background-size: 80px 18px !important;
pointer-events: none !important;
position: relative !important;
z-index: 2 !important;
clear: both !important;
}
@media (max-width: 600px) {
.curvy-border {
height: 14px !important;
min-height: 14px !important;
background-size: 60px 14px !important;
}
}
/* ==========================================================================
Tighten Section Spacing Adjacent to Curvy Wave Borders
========================================================================== */
section.section-padding:has(+ .curvy-border),
main > section:has(+ .curvy-border) {
padding-bottom: clamp(14px, 1.6vw, 20px) !important;
}
.curvy-border + section.section-padding,
.curvy-border + section {
padding-top: clamp(14px, 1.6vw, 20px) !important;
}
@media (max-width: 768px) {
section.section-padding:has(+ .curvy-border),
main > section:has(+ .curvy-border) {
padding-bottom: 10px !important;
}
.curvy-border + section.section-padding,
.curvy-border + section {
padding-top: 10px !important;
}
}
/* ==========================================================================
Suppress ALL legacy pseudo-element wave borders sitewide (Eliminate Double Borders)
========================================================================== */
html body section::before,
html body section:before,
html body .section-padding::before,
html body .section-padding:before,
html body main#main-content section::before,
html body main#main-content section:before,
html body main#main-content > section::before,
html body main#main-content > section:before,
html body.package-detail-page main#main-content > section::before,
html body.package-detail-page main#main-content > section:before,
html body.package-detail-page main#main-content > section.section-padding::before,
html body.package-detail-page main#main-content > section.section-padding:before,
html body.package-detail-page main#main-content > section:nth-of-type(n+1)::before,
html body.package-detail-page main#main-content > section:nth-of-type(n+1):before,
html body.package-detail-page main#main-content > section:nth-of-type(n+1):not(.dummy)::before,
html body.package-detail-page main#main-content > section:nth-of-type(n+1):not(.dummy):before,
html body.package-detail-page main#main-content > section:nth-of-type(n+3):not(.page-hero):not(.accreditations)::before,
html body.package-detail-page main#main-content > section:nth-of-type(n+3):not(.page-hero):not(.accreditations):before,
html body.package-detail-page main#main-content > section.section-padding:nth-of-type(3)::before,
html body.package-detail-page main#main-content > section.section-padding:nth-of-type(3):before,
html body.package-detail-page main#main-content > section.section-padding + section.accreditations::before,
html body.package-detail-page main#main-content > section.section-padding + section.accreditations:before,
html body section::after,
html body section:after,
html body .section-padding::after,
html body .section-padding:after,
.u-style-18::before,
.u-style-18:before {
content: none !important;
display: none !important;
background-image: none !important;
border: none !important;
height: 0 !important;
width: 0 !important;
}
/* ==========================================================================
Suppress First Curvy Border Sitewide (After Hero / Top Section)
========================================================================== */
section.page-hero + .curvy-border,
section.test-hero + .curvy-border,
section#welcome-carousel + .curvy-border,
section:first-of-type + .curvy-border,
main > section:first-of-type + .curvy-border {
display: none !important;
content: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background-image: none !important;
}
/* ==========================================================================
Suppress Curvy Borders Around Bottom Cards (CTA Banners & Network Cards)
========================================================================== */
.curvy-border:has(+ .cta-banner),
.curvy-border:has(+ section.cta-banner),
.cta-banner + .curvy-border,
section.cta-banner + .curvy-border,
.curvy-border:has(+ .test-cities-section),
.curvy-border:has(+ section.test-cities-section),
.test-cities-section + .curvy-border,
section.test-cities-section + .curvy-border,
.curvy-border:has(+ .package-cities-section),
.curvy-border:has(+ section.package-cities-section),
.package-cities-section + .curvy-border,
section.package-cities-section + .curvy-border,
.curvy-border:has(+ .tests-cities-service-network),
.curvy-border:has(+ section.tests-cities-service-network),
.tests-cities-service-network + .curvy-border,
section.tests-cities-service-network + .curvy-border,
main > .curvy-border:last-of-type,
main > .curvy-border:last-child,
.curvy-border:last-of-type:not(:has(~ section)),
.curvy-border:not(:has(~ section)),
.curvy-border:has(+ footer),
.curvy-border:has(+ .footer),
.curvy-border:has(~ footer:not(:has(~ section))) {
display: none !important;
content: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background-image: none !important;
}
/* ==========================================================================
Modern Interactive & Staggered Reveal Animations for Clinical SEO Sections
========================================================================== */
/* 1. Quick Specs Bar Hover Effects */
.quick-spec-item {
transition: transform var(--site-motion-fast, 0.22s) cubic-bezier(0.16, 1, 0.3, 1) !important;
will-change: transform;
}
.quick-spec-item:hover {
transform: translateY(-2px) !important;
}
.quick-spec-item .quick-spec-icon {
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
will-change: transform;
}
.quick-spec-item:hover .quick-spec-icon {
transform: scale(1.14) rotate(-4deg) !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18) !important;
}
/* 2. How Home Sample Collection Works (4-Step Cards) */
.how-it-works-step-card {
transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.38s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease,
background-color 0.25s ease !important;
will-change: transform, box-shadow;
position: relative !important;
overflow: hidden !important;
}
.how-it-works-step-card:hover {
transform: translateY(-8px) scale(1.015) !important;
box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12),
0 8px 18px -4px rgba(37, 99, 235, 0.1),
0 0 0 1.5px rgba(37, 99, 235, 0.25) !important;
border-color: #93c5fd !important;
}
.how-it-works-step-card .step-img-wrap {
overflow: hidden !important;
border-radius: 12px !important;
position: relative !important;
}
.how-it-works-step-card .step-img-wrap img {
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease !important;
will-change: transform;
display: block !important;
width: 100% !important;
height: auto !important;
}
.how-it-works-step-card:hover .step-img-wrap img {
transform: scale(1.06) !important;
}
.how-it-works-step-card .step-num-badge {
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease,
background-color 0.25s ease !important;
will-change: transform;
}
.how-it-works-step-card:hover .step-num-badge {
transform: scale(1.18) !important;
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45) !important;
}
/* 3. Target Persona Cards */
.persona-card {
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease,
background-color 0.25s ease !important;
will-change: transform, box-shadow;
}
.persona-card:hover {
transform: translateY(-5px) !important;
background-color: #ffffff !important;
border-color: #93c5fd !important;
box-shadow: 0 14px 30px -6px rgba(15, 23, 42, 0.09),
0 4px 12px rgba(37, 99, 235, 0.06),
0 0 0 1px rgba(37, 99, 235, 0.18) !important;
}
.persona-card .persona-dot {
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
display: inline-block !important;
}
.persona-card:hover .persona-dot {
transform: scale(1.45) !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22) !important;
}
/* 4. Pre-Test Preparation & Fasting Checklist Cards */
.prep-card {
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease !important;
will-change: transform, box-shadow;
}
.prep-card:hover {
transform: translateY(-5px) !important;
border-color: #60a5fa !important;
box-shadow: 0 16px 32px -6px rgba(15, 23, 42, 0.1),
0 4px 12px rgba(14, 165, 233, 0.08),
0 0 0 1px rgba(14, 165, 233, 0.2) !important;
}
.prep-card .prep-badge {
transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
will-change: transform;
}
.prep-card:hover .prep-badge {
transform: scale(1.2) rotate(4deg) !important;
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45) !important;
}
/* 5. Package Comparison Table Interactivity */
.package-comparison-table-wrap {
transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.package-comparison-table-wrap:hover {
box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08) !important;
border-color: #cbd5e1 !important;
}
.package-comparison-table-wrap table tbody tr {
transition: background-color 0.2s ease !important;
}
.package-comparison-table-wrap table tbody tr:hover {
background-color: #eff6ff !important;
}
.package-comparison-table-wrap .table-cta-btn {
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.22s ease,
background 0.2s ease !important;
will-change: transform;
}
.package-comparison-table-wrap .table-cta-btn:hover {
transform: translateY(-2px) scale(1.05) !important;
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.38) !important;
background: #1d4ed8 !important;
}
/* 6. Report Architecture Cards */
.report-arch-card {
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease !important;
will-change: transform, box-shadow;
}
.report-arch-card:hover {
transform: translateY(-5px) !important;
border-color: #93c5fd !important;
box-shadow: 0 16px 32px -6px rgba(15, 23, 42, 0.1),
0 4px 12px rgba(37, 99, 235, 0.08),
0 0 0 1px rgba(37, 99, 235, 0.18) !important;
}
.report-arch-card .arch-dot {
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
display: inline-block !important;
}
.report-arch-card:hover .arch-dot {
transform: scale(1.45) !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28) !important;
}
/* Accessibility: Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
.quick-spec-item,
.quick-spec-item:hover,
.quick-spec-item .quick-spec-icon,
.how-it-works-step-card,
.how-it-works-step-card:hover,
.how-it-works-step-card .step-img-wrap img,
.how-it-works-step-card .step-num-badge,
.persona-card,
.persona-card:hover,
.persona-card .persona-dot,
.prep-card,
.prep-card:hover,
.prep-card .prep-badge,
.package-comparison-table-wrap,
.package-comparison-table-wrap:hover,
.package-comparison-table-wrap table tbody tr,
.package-comparison-table-wrap table tbody tr:hover,
.package-comparison-table-wrap .table-cta-btn,
.package-comparison-table-wrap .table-cta-btn:hover,
.report-arch-card,
.report-arch-card:hover,
.report-arch-card .arch-dot {
transition: none !important;
transform: none !important;
animation: none !important;
box-shadow: none !important;
}
}
/* ==========================================================================
COMPREHENSIVE MOBILE MULTI-DEVICE & ACCESSIBILITY OPTIMIZATION ENGINE
Optimized for all mobile screens (280px, 320px, 360px, 375px, 390px, 412px, 430px, 768px, landscape)
WCAG 2.1 AA Compliant: Color contrast, tap targets, focus visibility, keyboard scrolling
========================================================================== */
/* 1. Global High-Contrast Color System (WCAG 2.1 AA >= 4.5:1 on normal text) */
.highlight {
color: #be123c !important; /* Crimson 700: 5.6:1 on white / light gray */
font-weight: inherit;
}
/* On dark backgrounds (footer, dark cards, dark navy hero) */
/* High specificity for dark footer headings */
html body footer h1 .highlight,
html body footer h2 .highlight,
html body footer h3 .highlight,
html body footer h4 .highlight,
html body footer h5 .highlight,
html body footer h6 .highlight,
html body .footer-seo-directory .highlight,
html body .footer-seo-directory h4 .highlight,
html body .footer-seo-directory span.highlight,
html body footer .highlight,
html body .site-footer .highlight,
html body .footer-grid .highlight,
html body .footer-popular-col .highlight,
footer .highlight,
.site-footer .highlight,
.footer-grid .highlight,
.footer-popular-col .highlight,
[style*="background:#111827"] .highlight,
[style*="background: #111827"] .highlight,
[style*="background:#0f172a"] .highlight,
[style*="background: #0f172a"] .highlight {
color: #fb7185 !important; /* Rose 400: 9.8:1 contrast on dark navy/charcoal */
}
/* Ensure step numbers in how-it-works maintain >= 4.5:1 contrast */
#how-it-works-process div[style*="background:#059669"],
#how-it-works-process div[style*="background: #059669"] {
background: #047857 !important; /* Emerald 700: 4.7:1 contrast with white text */
}
#how-it-works-process div[style*="background:#d97706"],
#how-it-works-process div[style*="background: #d97706"] {
background: #b45309 !important; /* Amber 700: 4.75:1 contrast with white text */
}
/* 2. Global Accessible Keyboard Focus Visibility (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
outline: 3px solid #2563eb !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 10px rgba(37, 99, 235, 0.4) !important;
}
footer :focus-visible,
.site-footer :focus-visible,
[style*="background:#111827"] :focus-visible,
[style*="background: #111827"] :focus-visible {
outline: 3px solid #60a5fa !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.95), 0 0 10px rgba(96, 165, 250, 0.5) !important;
}
/* 3. Universal Word Wrapping & Text Truncation Safety */
p, h1, h2, h3, h4, h5, h6, li, td, th, label, .section-title, .package-name, .package-tests {
overflow-wrap: break-word;
word-wrap: break-word;
}
a, .secure-email, .break-anywhere, [href^="mailto:"], [href^="tel:"], .contact-card p, .contact-card a {
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* Reset user agent ul padding on footer lists to prevent right-edge spill */
ul.footer-links,
ul.footer-popular-tests {
padding-left: 0 !important;
list-style: none !important;
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* 4. Accessible Scrollable Table Containers */
.table-responsive,
.package-table-wrapper,
.comparison-table-wrapper,
.package-comparison-table-wrap {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
overscroll-behavior-x: contain !important;
-webkit-overflow-scrolling: touch !important;
border-radius: 12px !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
/* Visual scroll affordance gradient for tables on mobile */
.table-responsive,
.package-comparison-table-wrap {
background:
linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 100% 0,
radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.16), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.16), rgba(0, 0, 0, 0)) 100% 0;
background-repeat: no-repeat;
background-color: #ffffff;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
}
/* 5. Mobile Layout Refinements Across All Viewport Sizes (<= 768px) */
@media (max-width: 768px) {
/* Prevent accidental page side-scrolling */
html, body {
max-width: 100%;
overflow-x: clip;
}
/* Accessible Touch Target Sizes (WCAG 2.5.5 / 2.5.8 >= 44x44px) */
.testimonial-prev,
.testimonial-next,
.fc-prev,
.fc-next,
.carousel-prev,
.carousel-next,
.modal-close,
.booking-modal-close,
#lightboxClose,
.cities-search-clear,
.hamburger {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* Carousel Indicators Tap Targets */
.fc-indicators {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 44px !important;
padding: 6px 0 !important;
}
.fc-dot {
min-width: 44px !important;
min-height: 44px !important;
padding: 16px 4px !important;
box-sizing: border-box !important;
background-clip: content-box !important;
cursor: pointer !important;
}
/* Accordion Summaries: Comfortable Tap Targets & Contrast */
details > summary,
.accordion-header,
.faq-question,
.faq-item summary {
min-height: 48px !important;
display: flex !important;
align-items: center !important;
padding: 12px 14px !important;
cursor: pointer !important;
box-sizing: border-box !important;
font-size: clamp(0.92rem, 3.2vw, 1.05rem) !important;
line-height: 1.4 !important;
-webkit-tap-highlight-color: rgba(30, 64, 175, 0.12) !important;
}
/* Form Controls Font Size >= 16px to prevent iOS auto-zoom */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea,
.ts-control,
.ts-control input {
font-size: 16px !important;
}
/* Fix Accreditation Badges Cluster Overflow */
html body .accred-badges-cluster,
.accred-badges-cluster {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
html body .accred-badges-cluster .accred-badge-pill,
.accred-badges-cluster .accred-badge-pill {
max-width: 100% !important;
white-space: normal !important;
}
/* Fix Coverage Split Grid Spill */
html body .coverage-split-grid,
.coverage-split-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 1.5rem !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body .coverage-split-grid > *,
.coverage-split-grid > * {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Fix Blog Layout Spill */
html body .blog-layout,
.blog-layout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 1.5rem !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body .blog-layout > article,
.blog-layout > article {
min-width: 0 !important;
max-width: 100% !important;
padding: clamp(16px, 4vw, 24px) !important;
box-sizing: border-box !important;
}
/* Fix Contact Cards & Iframe Spill */
.contact-info-cards {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.contact-card {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: clamp(14px, 3.5vw, 18px) clamp(12px, 3vw, 16px) !important;
}
.contact-info-cards iframe {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Fix Video Responsiveness & Liquid Glass Controls */
.features-video-wrapper {
position: relative !important;
width: 100% !important;
max-width: 1000px !important;
margin: 0 auto !important;
border-radius: 24px !important;
overflow: hidden !important;
box-shadow: 0 24px 50px rgba(10, 22, 40, 0.2) !important;
background: #000000 !important;
cursor: pointer !important;
-webkit-tap-highlight-color: transparent !important;
}
.features-video-wrapper video,
video.features-video {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
box-sizing: border-box !important;
display: block !important;
pointer-events: auto !important;
}
/* Completely suppress native browser controls across engines */
video.features-video::-webkit-media-controls,
video.features-video::-webkit-media-controls-enclosure,
video.features-video::-webkit-media-controls-panel {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
/* Liquid Glass Play/Pause Button - Rock-solid centering without displacement */
html body .features-video-wrapper .video-play-btn, html body .video-play-btn, .video-play-btn {
position: absolute !important;
inset: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: auto !important;
transform: scale(1) !important;
transform-origin: center center !important;
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
background: radial-gradient(135% 135% at 25% 20%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.08) 100%) !important;
backdrop-filter: blur(20px) saturate(190%) contrast(105%) !important;
-webkit-backdrop-filter: blur(20px) saturate(190%) contrast(105%) !important;
border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 2px 2px rgba(255, 255, 255, 0.85), inset 0 -2px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 25 !important;
transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, box-shadow 0.25s ease !important;
pointer-events: auto !important;
padding: 0 !important;
outline: none !important;
-webkit-tap-highlight-color: transparent !important;
user-select: none !important;
}
html body .features-video-wrapper .video-play-btn::before, html body .video-play-btn::before, .video-play-btn::before {
content: "" !important;
position: absolute !important;
top: 2px !important;
left: 8px !important;
right: 8px !important;
height: 42% !important;
border-radius: 50px 50px 30px 30px !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%) !important;
pointer-events: none !important;
z-index: 1 !important;
}
html body .features-video-wrapper .video-play-btn svg,
html body .video-play-btn svg,
.video-play-btn svg,
html body .features-video-wrapper .video-play-btn:hover svg,
html body .video-play-btn:hover svg,
.video-play-btn:hover svg {
position: relative !important;
z-index: 2 !important;
fill: #ffffff !important;
transform: none !important;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45)) !important;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}
.video-play-btn .icon-play {
width: 36px !important;
height: 36px !important;
margin: 0 0 0 4px !important;
display: block !important;
}
.video-play-btn .icon-pause {
width: 34px !important;
height: 34px !important;
margin: 0 !important;
display: none !important;
}
html body .features-video-wrapper .video-play-btn:hover, html body .video-play-btn:hover, .video-play-btn:hover {
background: radial-gradient(135% 135% at 25% 20%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0.15) 100%) !important;
border-color: rgba(255, 255, 255, 0.9) !important;
transform: scale(1.08) !important;
transform-origin: center center !important;
inset: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: auto !important;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 28px rgba(255, 255, 255, 0.35), inset 0 2px 3px #ffffff, inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
}
html body .features-video-wrapper .video-play-btn:active, html body .video-play-btn:active, .video-play-btn:active {
transform: scale(0.95) !important;
transform-origin: center center !important;
inset: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: auto !important;
transition-duration: 0.1s !important;
}
/* Paused state */
.features-video-wrapper.is-paused .video-play-btn {
opacity: 1 !important;
pointer-events: auto !important;
transform: scale(1) !important;
transform-origin: center center !important;
inset: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: auto !important;
}
.features-video-wrapper.is-paused .video-play-btn .icon-play {
display: block !important;
}
.features-video-wrapper.is-paused .video-play-btn .icon-pause {
display: none !important;
}
/* Playing state - auto-hide and reveal on hover/activity */
.features-video-wrapper.is-playing .video-play-btn {
opacity: 0 !important;
pointer-events: none !important;
transform: scale(0.92) !important;
transform-origin: center center !important;
inset: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: auto !important;
}
.features-video-wrapper.is-playing .video-play-btn .icon-play {
display: none !important;
}
.features-video-wrapper.is-playing .video-play-btn .icon-pause {
display: block !important;
}
.features-video-wrapper.is-playing:hover .video-play-btn,
.features-video-wrapper.is-playing.show-controls .video-play-btn {
opacity: 1 !important;
pointer-events: auto !important;
transform: scale(1) !important;
transform-origin: center center !important;
inset: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: auto !important;
}
.features-video-wrapper.is-playing:hover .video-play-btn:hover {
transform: scale(1.08) !important;
transform-origin: center center !important;
inset: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: auto !important;
}
@media (max-width: 768px) {
.features-video-wrapper {
border-radius: 18px !important;
}
html body .features-video-wrapper .video-play-btn, html body .video-play-btn, .video-play-btn {
width: 64px !important;
height: 64px !important;
}
.video-play-btn .icon-play {
width: 28px !important;
height: 28px !important;
margin-left: 4px !important;
}
.video-play-btn .icon-pause {
width: 26px !important;
height: 26px !important;
}
}
/* Fix Facts Summary Bar */
.facts-summary-bar {
padding: 1rem !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.facts-summary-info {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* 6. Test Specs Grid for Compact Screens (<= 440px) */
@media (max-width: 440px) {
html body .test-specs-grid,
.test-specs-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body .test-spec-item,
.test-spec-item {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* 7. Ultra-Compact Mobile Support (<= 360px: iPhone SE, Galaxy Fold outer screen, small devices) */
@media (max-width: 360px) {
html body .container {
width: 100% !important;
max-width: calc(100% - 16px) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html body #navbar.navbar .container {
width: calc(100% - 12px) !important;
max-width: calc(100% - 12px) !important;
padding: 4px 8px !important;
gap: 6px !important;
}
html body #navbar.navbar .nav-logo-img {
max-width: 155px !important;
}
/* Bottom Sticky Leadbar on Ultra-Compact Devices */
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar {
gap: 4px !important;
padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-glass-pill {
max-width: calc(100vw - 56px) !important;
height: 54px !important;
padding: 2px 3px !important;
gap: 1px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-item {
min-height: 46px !important;
min-width: 38px !important;
padding: 2px 1px !important;
gap: 1px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-icon {
width: 18px !important;
height: 18px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-label {
font-size: 9.5px !important;
font-weight: 600 !important;
letter-spacing: -0.1px !important;
line-height: 1.1 !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .leadbar-whatsapp {
flex: 0 0 46px !important;
width: 46px !important;
min-width: 46px !important;
max-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
}
/* Booking modal padding on ultra-compact screens */
#bookingModal .booking-modal-body,
#bookingModal .modal-body {
padding: 12px 10px !important;
}
#bookingModal .booking-trust-banner .trust-card {
padding: 6px !important;
gap: 4px !important;
}
}
/* 8. Landscape Mobile Ergonomics (e.g. 667x375, 844x390, 915x412) */
@media (max-height: 500px) and (orientation: landscape) {
html body #navbar.navbar,
html body #navbar.navbar.scrolled {
top: 4px !important;
}
html body #navbar.navbar .container {
min-height: 48px !important;
height: 48px !important;
padding: 4px 12px !important;
}
html body #navbar.navbar .nav-logo-img {
max-height: 34px !important;
}
html body #bookingModal .modal-container,
html body #bookingModal .booking-modal {
max-height: 94vh !important;
overflow-y: auto !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar {
bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-glass-pill {
height: 48px !important;
}
html body .liquid-glass-nav-wrap.mobile-sticky-leadbar .liquid-nav-item {
min-height: 40px !important;
}
}
/* Test Details Page Ergonomics & Accessibility */
.test-pkg-mrp,
.test-sb-mrp {
color: #475569 !important;
}
.test-sb-browse-link {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 16px !important;
box-sizing: border-box !important;
margin-top: 10px !important;
text-decoration: underline !important;
}
/* Blog & Related Content Accessibility & Contrast */
.blog-test-card span[style*="#0284c7"],
.blog-test-card a[style*="#0284c7"] {
background: #0369a1 !important;
color: #ffffff !important;
}
.blog-test-card a[style*="#25d366"] {
background: #15803d !important;
color: #ffffff !important;
}
.related-articles-grid span[style*="#94a3b8"],
.related-articles-grid span[style*="#475569"] {
color: #475569 !important;
}
/* Package Page Mobile Ergonomics: Shift pricing badge & booking panel directly below package picture */
@media (max-width: 992px) {
html body .u-style-105 {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
html body .u-style-105 > .u-style-106:not(.package-booking-panel) {
display: contents !important;
}
html body .u-style-105 > .u-style-133 {
display: contents !important;
}
/* 1. Package Picture at the very top */
html body .u-style-105 .zoom-container,
html body .u-style-105 .u-style-107 {
order: 1 !important;
background: #ffffff !important;
border-radius: 16px !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
padding: 1.25rem !important;
box-sizing: border-box !important;
margin-bottom: 1.5rem !important;
width: 100% !important;
}
/* 2. Pricing badge with Book Now button etc JUST BELOW the package picture */
html body .u-style-105 .package-booking-panel,
html body .u-style-105 .u-style-106.package-booking-panel {
order: 2 !important;
display: block !important;
background: #ffffff !important;
border-radius: 16px !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
padding: 1.5rem !important;
box-sizing: border-box !important;
margin-bottom: 2rem !important;
width: 100% !important;
}
/* 3. Tests Included in This Profile Accordion */
html body .u-style-105 .u-style-137 {
order: 3 !important;
background: #ffffff !important;
border-radius: 16px !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
padding: 1.25rem !important;
box-sizing: border-box !important;
margin-bottom: 2rem !important;
width: 100% !important;
}
/* 4. About This Package heading */
html body .u-style-105 > h2,
html body .u-style-133 > h2 {
order: 4 !important;
width: 100% !important;
margin-top: 0.5rem !important;
margin-bottom: 1rem !important;
}
/* 5. Package Facts Summary */
html body .u-style-105 .package-seo-facts,
html body .u-style-105 .u-style-134 {
order: 5 !important;
width: 100% !important;
margin: 0 0 1.5rem 0 !important;
}
/* 6. About Description Paragraphs */
html body .u-style-105 .u-style-136 {
order: 6 !important;
width: 100% !important;
margin-bottom: 2rem !important;
}
}
/* Sitewide How It Works Step Images Aspect Ratio Stabilization */
.how-it-works-section img,
.step-image-wrapper img,
.step-img {
aspect-ratio: 300 / 200 !important;
width: 100% !important;
height: auto !important;
object-fit: cover !important;
}
/* Keep the homepage carousel visibly clear of the fixed navigation. */
@media (min-width: 993px) {
html body main#main-content > #welcome-carousel {
margin-top: 60px !important;
}
}
@media (min-width: 769px) and (max-width: 992px) {
html body main#main-content > #welcome-carousel {
margin-top: 50px !important;
}
}
@media (max-width: 768px) {
html body main#main-content > #welcome-carousel {
margin-top: 40px !important;
}
html body .mobile-pincode-banner + main#main-content > #welcome-carousel {
margin-top: 18px !important;
}
}
/* Premium touch feedback for interactive cards, with concise stagger timing. */
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
@supports selector(:has(a:active)) {
html body main#main-content :is(
.package-card,
.package-pricing-card,
.feature-card,
.service-card,
.step-card,
.google-review-card,
.trust-card,
.blog-card,
.city-card,
.test-card,
.test-package-card,
.test-pkg-card,
.test-dir-card,
.test-support-card,
.calculator-card,
.faq-item,
.contact-card,
.facts-card,
.facts-stat-card,
.facts-disclosure-card,
.board-card,
.policy-card,
.hub-card,
.sitemap-card,
.bmi-card,
.mission-card,
.process-step-card,
.local-seo-card,
.guarantee-card,
.coverage-card,
.benefit-card,
.how-it-works-step-card,
.persona-card,
.prep-card,
.report-arch-card
):is(:active, :has(a:active, button:active, [role="button"]:active)) {
transform: scale(0.996) !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.09),
0 2px 8px rgba(37, 99, 235, 0.06) !important;
transition-duration: 110ms !important;
}
}
}
/* Generated city pages use .reveal-on-scroll; make those sections visible instantly for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
html body .reveal-on-scroll,
html body .reveal-on-scroll.is-visible {
opacity: 1 !important;
filter: none !important;
transform: none !important;
transition: none !important;
animation: none !important;
will-change: auto !important;
}
}