* { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; width: 100%; } body { font-family: Arial, Helvetica, sans-serif; color: #404041; line-height: 1.6; overflow-x: hidden; width: 100%; max-width: 100vw; } /* Header */ header { background-color: #fff; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; z-index: 1000; } .top-banner { background-color: #0055a5; color: white; text-align: center; padding: 10px; font-size: 14px; } .top-banner a { color: white; text-decoration: underline; } .header-main { display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; max-width: 1400px; margin: 0 auto; } .logo { display: flex; align-items: center; } .logo img { height: 52px; width: auto; } nav { display: flex; gap: 25px; align-items: center; } nav a { color: #404041; text-decoration: none; font-size: 14px; } nav a:hover { color: #0055a5; } .header-actions { display: flex; gap: 20px; align-items: center; } .search-icon, .account-icon, .cart-icon { cursor: pointer; font-size: 14px; color: #404041; } .cart-icon { position: relative; } .cart-count { background-color: #0055a5; color: white; border-radius: 50%; padding: 2px 6px; font-size: 11px; margin-left: 5px; } /* Hide Header Navigation - Toggle this class on/off on tag */ /* To hide navigation but keep logo: add class="hide-desktop-header" to */ /* To show everything: remove class="hide-desktop-header" from */ .hide-desktop-header .desktop-utility-bar, .hide-desktop-header .mobile-header-figma { display: none !important; } /* Keep navigation bar visible but hide navigation items, keep only logo */ .hide-desktop-header .desktop-nav-bar .dropdown-bd, .hide-desktop-header .desktop-nav-bar > div > a, .hide-desktop-header .desktop-nav-bar .caregiversMenuBtn { display: none !important; } /* Show logo and empty navigation bar on tablet and mobile when hide-desktop-header is active */ /* Tablet and Mobile - Override the default hiding */ @media (max-width: 1024px) { /* Force show desktop nav bar with logo on tablet/mobile when hide-desktop-header is active */ body.hide-desktop-header .desktop-nav-bar.menuHeaderContainer { display: block !important; background-color: #fff; border-bottom: 1px solid #e0e0e0; } body.hide-desktop-header .desktop-nav-bar { display: block !important; } body.hide-desktop-header .desktop-nav-content { min-height: 50px; padding: 0 20px; display: flex !important; align-items: center; } body.hide-desktop-header .desktop-logo { display: flex !important; align-items: center; } body.hide-desktop-header .desktop-logo a { display: block !important; } body.hide-desktop-header .desktop-logo img { height: 36px; width: auto; display: block !important; } } /* Mobile specific adjustments */ @media (max-width: 768px) { body.hide-desktop-header .desktop-nav-content { padding: 0 15px; } body.hide-desktop-header .desktop-logo img { height: 28px; } } /* Desktop Utility Bar */ .desktop-utility-bar { display: none; background-color: #F5F5F5; border-bottom: 1px solid #e0e0e0; } .desktop-utility-container { max-width: 1400px; margin: 0 auto; padding: 0 40px 0 0; display: flex; justify-content: flex-start; align-items: stretch; gap: 0; height: 64px; } .desktop-logo img { height: 48px; width: auto; } .desktop-utility-actions { display: flex; align-items: stretch; gap: 0; flex: 1; } .desktop-search { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 0 30px; background-color: #F5F5F5; flex: 1; } .desktop-search-input { width: 280px; padding: 10px 45px 10px 20px; border: 1px solid #B0B0B0; border-radius: 8px; font-size: 15px; outline: none; transition: border-color 0.2s ease; background-color: #fff; } .desktop-search-input:focus { border-color: #006CB6; } .desktop-search-button { position: absolute; right: 45px; background: none; border: none; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; } .desktop-utility-link { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: #003A70; font-size: 15px; font-weight: 600; transition: background-color 0.2s ease; padding: 0 30px; white-space: nowrap; background-color: #E6F2FA; } .desktop-utility-link:hover { background-color: #D0E8F7; color: #003A70; text-decoration: none; } .desktop-utility-link svg path { fill: #003A70; } .desktop-utility-link svg { stroke: #003A70; } .desktop-cart-link { position: relative; background-color: #006CB6 !important; color: #fff !important; border-radius: 0; padding: 0 40px; } .desktop-cart-link:hover { background-color: #005A9C !important; color: #fff !important; } .desktop-cart-link svg path { fill: #fff; } .desktop-cart-link svg { stroke: #fff; } .desktop-cart-badge { background-color: #fff; color: #006CB6; border-radius: 50%; padding: 2px 6px; font-size: 12px; font-weight: bold; min-width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; margin-left: 8px; } /* Desktop Navigation Bar */ .desktop-nav-bar { display: none; background-color: #fff; border-bottom: 1px solid #e0e0e0; } .desktop-nav-content { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 0; min-height: 50px; } .desktop-nav-content > * { padding: 0 15px; } .desktop-nav-content .dropdown-bd, .desktop-nav-content > a { display: flex; align-items: center; flex-shrink: 0; } .desktop-nav-content .dropdown-header { padding: 15px 0; } .desktop-nav-content .btn { padding: 15px 0 !important; } /* Show desktop elements only on desktop */ @media (min-width: 1025px) { .desktop-utility-bar { display: block; } .desktop-nav-bar.menuHeaderContainer { display: block !important; } } /* Bootstrap-style Grid System for Navigation */ .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .col { flex-basis: 0; flex-grow: 1; max-width: 100%; position: relative; padding-right: 15px; padding-left: 15px; } .col-3 { flex: 0 0 25%; max-width: 25%; position: relative; padding-right: 15px; padding-left: 15px; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; } /* Padding utilities - Bootstrap responsive classes */ /* Base padding for mobile/small screens */ .menuHeaderContainer { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } /* py-lg-3: Apply at lg breakpoint (992px and above) */ @media (min-width: 992px) { .py-lg-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } } /* py-xl-5: Apply at xl breakpoint (1200px and above) */ @media (min-width: 1200px) { .py-xl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } } .pl-4 { padding-left: 1.5rem !important; } .ml-3 { margin-left: 1rem !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .p-0 { padding: 0 !important; } .m-0 { margin: 0 !important; } .w-100 { width: 100% !important; } .align-self-center { align-self: center !important; } .bg-white { background-color: #fff !important; } .bg-transparent { background-color: transparent !important; } .border-0 { border: 0 !important; } .text-decoration-none { text-decoration: none !important; } /* Custom width for navigation items */ .width-16 { flex: 0 0 16.666667%; max-width: 16.666667%; } /* Navigation Container - show only desktop nav bar */ .menuHeaderContainer:not(.desktop-nav-bar) { display: none; } .desktop-nav-bar.menuHeaderContainer { display: none; /* Hidden by default, shown on desktop */ } /* Logo Styles */ .logo-home { display: inline-block; } .image-resizer { max-width: 100%; height: auto; max-height: 52px; } /* Dropdown Navigation */ .dropdown-bd { position: relative; display: inline-block; } .dropdown-header { color: #404041; font-size: 14px; font-weight: 500; cursor: pointer; padding: 12px 0; transition: color 0.2s ease; text-align: center; white-space: nowrap; } .dropdown-header-desktop { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 14px; font-weight: 500; } .dropdown-header:hover { color: #0055a5; } .dropdown-toggle { position: relative; } .dropdown-arrow { margin-left: 8px; font-size: 10px; transition: transform 0.2s ease; color: #404041; } .dropdown-header:hover .dropdown-arrow { color: #0055a5; } .dropdown-bd.show .dropdown-arrow, .dropdown-bd:hover .dropdown-arrow { transform: rotate(180deg); } /* Dropdown Menu */ .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 200px; padding: 0.5rem 0; margin: 0.125rem 0 0; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .dropdown-menu.show { display: block; } .dropdown-item { display: block; width: 100%; padding: 0.5rem 1.5rem; clear: both; font-weight: 400; color: #404041; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; text-decoration: none; } .dropdown-item:hover { color: #0055a5; background-color: #f8f9fa; } .dropdown-item-styles { font-size: 14px; } /* Toggle Menu Styles */ .toggleMenu { outline: none; } .toggleMenu:focus { outline: none; box-shadow: none; } .menu_btn_Selected { color: #0055a5; font-weight: 700; } /* Link Tabs */ .link-tabs { color: #404041; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 12px; transition: color 0.2s ease; display: block; } .link-tabs:hover { color: #0055a5; } .successStories, .caregiversMenuBtn { font-size: 14px; font-weight: 600; text-align: left; } /* Button Styles */ .btn { display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } /* Navigation button overrides */ .menuHeaderContainer .btn { color: #404041 !important; font-weight: 600; } .menuHeaderContainer .btn:hover { color: #0055a5 !important; } /* Mobile Header - Figma Design */ .mobile-header-figma { display: none; background-color: #fff; } .mobile-header-container { display: flex; align-items: stretch; justify-content: space-between; padding: 0; gap: 0; height: 64px; } /* Logo */ .mobile-logo { flex: 0 0 auto; display: flex; align-items: center; padding: 0 20px; } .mobile-logo a { display: block; line-height: 0; } .mobile-logo img { height: 32px; width: auto; } /* Right Section: Sign In, Cart, and Hamburger */ .mobile-center-actions { display: flex; align-items: stretch; gap: 0; flex: 0 0 auto; margin-left: auto; background-color: #E6F2FA; } .mobile-signin-btn, .mobile-cart-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #404041; font-size: 11px; font-weight: 500; transition: all 0.2s ease; padding: 8px 15px; background-color: transparent; } .mobile-signin-btn:hover, .mobile-cart-btn:hover { color: #006CB6; background-color: rgba(0, 108, 182, 0.1); } .mobile-signin-btn svg, .mobile-cart-btn svg { margin-bottom: 4px; width: 20px; height: 20px; } .mobile-signin-btn svg path, .mobile-cart-btn svg path { fill: #404041; } .mobile-signin-btn:hover svg path, .mobile-cart-btn:hover svg path { fill: #006CB6; } .mobile-signin-btn span:not(.cart-badge), .mobile-cart-btn span:not(.cart-badge) { font-size: 11px; line-height: 1.2; font-weight: 500; } .mobile-cart-btn { position: relative; } .cart-badge { position: absolute; top: 8px; right: 8px; background-color: #006CB6; color: #fff; border-radius: 50%; padding: 0; font-size: 10px; font-weight: bold; min-width: 18px; height: 18px; text-align: center; line-height: 18px; display: flex; align-items: center; justify-content: center; } /* Hamburger Button (Blue, Right Side - Full Corner) */ .mobile-hamburger-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #006CB6; border: none; min-width: 64px; height: 100%; border-radius: 0; cursor: pointer; padding: 0 20px; gap: 4px; transition: background-color 0.2s ease; flex-shrink: 0; } .mobile-hamburger-btn:hover { background-color: #0055a5; } .mobile-hamburger-btn.active { background-color: #0055a5; } .hamburger-line { width: 24px; height: 3px; background-color: #fff; transition: all 0.3s ease; border-radius: 1px; } /* Hamburger Animation when Active */ .mobile-hamburger-btn.active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-hamburger-btn.active .hamburger-line:nth-child(2) { opacity: 0; } .mobile-hamburger-btn.active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Navigation Dropdown */ .mobile-nav-dropdown { display: none; background-color: #fff; border-top: 1px solid #e5e5e5; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .mobile-nav-dropdown.show { display: block; } .mobile-nav-list { list-style: none; margin: 0; padding: 0; } .mobile-nav-item { border-bottom: 1px solid #e5e5e5; } .mobile-nav-item:last-child { border-bottom: none; } .mobile-nav-link { display: block; padding: 16px 20px; color: #404041; text-decoration: none; font-size: 16px; font-weight: 500; transition: background-color 0.2s ease; } .mobile-nav-link:hover { background-color: #f8f8f8; color: #006CB6; } /* Breadcrumb */ .breadcrumb { position: absolute; top: 0; left: 0; right: 0; background-color: transparent; padding: 0; font-size: 13px; color: #5F6062; z-index: 10; } .breadcrumb-content { max-width: 1400px; margin: 0 auto; padding: 20px 80px; display: flex; align-items: center; gap: 8px; } .breadcrumb a { color: #0055a5; text-decoration: none; display: inline-flex; align-items: center; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb img { width: 16px; height: 16px; vertical-align: middle; } /* Breadcrumb responsive styles */ @media (max-width: 1024px) { .breadcrumb { font-size: 12px; } .breadcrumb-content { padding: 15px 30px; gap: 6px; } .breadcrumb img { width: 14px; height: 14px; } } @media (max-width: 768px) { .breadcrumb { font-size: 11px; } .breadcrumb-content { padding: 12px 20px; gap: 5px; flex-wrap: wrap; } .breadcrumb img { width: 12px; height: 12px; } } /* Hero Section */ .hero-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 40px; position: relative; } .hero { position: relative; background-image: url('assets/hero-veteran.png'); background-size: cover; background-position: center; padding: 10px 0; min-height: 478px; margin: 0 -40px; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30.769%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } .hero-content { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; padding: 140px 80px 40px 80px; display: flex; flex-direction: column; gap: 20px; } .hero-thin-rectangle { width: 102px; height: 4px; border-radius: 2px; background-color: #EF6549; } .hero h1 { font-size: 56px; margin-bottom: 5px; font-weight: bold; line-height: 1.25; letter-spacing: -0.56px; color: #272727; } .hero h2 { font-size: 56px; font-weight: normal; line-height: 1.25; letter-spacing: -0.56px; color: #272727; } .red-accent { height: 20px; background-color: #ef6549; margin: 0 -40px; } /* Container */ .container { max-width: 1400px; margin: 0 auto; padding: 60px 40px; } /* Patient Guide Section */ .patient-guide { background-color: #fff; padding: 60px 0; } .guide-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .guide-text h3 { font-size: 36px; margin-bottom: 25px; color: #404041; font-weight: bold; } .guide-text p { font-size: 16px; color: #5F6062; margin-bottom: 30px; line-height: 1.8; } .guide-image { text-align: center; } .guide-image img { max-width: 100%; height: auto; } /* Button Styles */ .btn { display: inline-block; padding: 15px 35px; background-color: #0055a5; color: white; text-decoration: none; border-radius: 5px; font-size: 16px; font-weight: bold; border: none; cursor: pointer; transition: background-color 0.3s; } .btn:hover { background-color: #003d7a; } /* Split Banner Section (Veterans Section) */ .split-banner { max-width: 1400px; margin: 0 auto; position: relative; } .split-banner-container { /*position: relative;*/ /*display: flex;*/ /*flex-direction: column;*/ height: 311px; background: #fff; align-self: stretch; } .banner-left { position: absolute; top: 0; left: 0; color: white; padding: 60px 80px; display: flex; flex-direction: column; justify-content: center; z-index: 3; max-width: 50%; } .banner-left h2 { font-size: 42px; margin-bottom: 20px; font-weight: 300; line-height: 1.2; color: #FFFFFF; } .banner-left p { font-size: 16px; line-height: 1.5; color: #FFFFFF; font-weight: 300; } .banner-right { display: flex; flex-direction: column; position: relative; width: 100%; z-index: 1; } .banner-right-top { background-color: #F0585B; color: white; padding: 40px 80px; padding-left: 50%; display: flex; flex-direction: column; justify-content: center; width: 1440px; height: 167px; flex-shrink: 0; } .banner-right-top h2 { font-size: 32px; margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: -0.32px; color: #FFFFFF; } .banner-right-bottom { background-color: #FFFFFF; padding: 40px 80px; padding-left: 50%; display: flex; flex-direction: column; justify-content: center; } .banner-right-bottom p { font-size: 16px; line-height: 1.5; color: #404041; margin: 0; } .flag-overlay { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-image: url('assets/flag-banner.png'); background-size: contain; background-repeat: no-repeat; background-position: right center; pointer-events: none; z-index: 2; } /* Freedom Section */ .freedom-section { background-color: #f9f7f5; padding: 70px 0; } .freedom-header { text-align: center; margin-bottom: 60px; } .freedom-header h2 { font-size: 40px; color: #494949; margin-bottom: 10px; font-weight: 800; } .freedom-header .underline { width: 92px; height: 4px; background-color: #ee6548; margin: 10px auto 0; border-radius: 10px; } .benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-top: 50px; } .benefit-card { text-align: center; padding: 20px; } .benefit-icon { margin-bottom: 30px; height: 80px; display: flex; align-items: center; justify-content: center; } .benefit-icon img { height: 60px; width: auto; } .benefit-card h3 { font-size: 20px; color: #515152; line-height: 1.6; font-weight: normal; } .disclaimer-text { text-align: left; font-size: 14px; color: #0d0d0d; margin-top: 40px; line-height: 1.6; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 42px; } .disclaimer-text p { margin-bottom: 15px; } .disclaimer-text .citation-number { color: #006cb6; font-weight: bold; font-size: 9px; vertical-align: super; } /* Product Section */ .product-section { background-color: #fff; padding: 70px 0; } .product-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .product-image { text-align: center; } .product-info h2 { font-size: 42px; margin-bottom: 25px; color: #404041; font-weight: bold; } .product-info p { font-size: 16px; color: #5F6062; margin-bottom: 20px; line-height: 1.8; } .product-info .product-description { margin-bottom: 35px; } /* Conversation Starter Section */ .conversation-section { background-color: #EBE9E7; padding: 70px 0; } .conversation-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .conversation-text h2 { font-size: 36px; margin-bottom: 25px; color: #404041; font-weight: bold; } .conversation-text p { font-size: 16px; color: #5F6062; margin-bottom: 35px; line-height: 1.8; } .prompts-box { background-color: #f5f5f5; padding: 40px; border-radius: 8px; } .prompts-box h3 { font-size: 24px; margin-bottom: 25px; color: #404041; font-weight: bold; } .prompts-box ul { list-style: none; padding-left: 0; } .prompts-box li { font-size: 15px; color: #5F6062; margin-bottom: 20px; padding-left: 25px; position: relative; line-height: 1.6; } .prompts-box li:before { content: "•"; position: absolute; left: 0; color: #0055a5; font-weight: bold; font-size: 20px; } /* We Are Here Section */ .we-are-here { background-color: #f5fafd; padding: 70px 0; } .we-are-here-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .we-are-here-image { text-align: center; } .we-are-here-text h2 { font-size: 42px; margin-bottom: 25px; color: #404041; font-weight: bold; } .we-are-here-text p { font-size: 16px; color: #5F6062; margin-bottom: 20px; line-height: 1.8; } /* Footer */ footer { background-color: #fff; padding: 60px 40px 30px; border-top: 1px solid #e0e0e0; } .footer-content { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-bottom: 50px; } .footer-column h3 { font-size: 18px; margin-bottom: 25px; color: #404041; font-weight: bold; } .footer-column ul { list-style: none; } .footer-column ul li { /*margin-bottom: 12px;*/ color: var(--brand-blue-500); font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 400; line-height: 160%; text-decoration: underline; transition: color 0.3s ease; } .footer-column a { color: #0055a5; text-decoration: none; font-size: 14px; } .footer-column a:hover { text-decoration: underline; } .footer-column.social a { display: inline-block; margin-right: 15px; font-size: 24px; } .footer-bottom { max-width: 1400px; margin: 0 auto; padding-top: 30px; border-top: 1px solid #e0e0e0; text-align: center; font-size: 12px; color: #5F6062; } .footer-bottom p { margin-bottom: 15px; line-height: 1.6; } .footer-links { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; } .footer-links a { color: #0055a5; text-decoration: none; font-size: 12px; } .footer-links span { color: #5F6062; } .footer-logo { margin-top: 20px; margin-bottom: 20px; } .region-selector { margin-top: 20px; } .region-selector select { padding: 8px 12px; font-size: 13px; border: 1px solid #ccc; border-radius: 4px; } /* Responsive Design */ /* Medium screens - adjust layout slightly */ @media (max-width: 1199px) { .col-3 { flex: 0 0 30%; max-width: 30%; } .width-16 { flex: 0 0 20%; max-width: 20%; } .dropdown-header { font-size: 12px; padding: 6px 8px; } .dropdown-item { font-size: 13px; padding: 0.4rem 1rem; } } /* Tablets - adjust layout but keep horizontal */ @media (max-width: 991px) { .menuHeaderContainer { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .dropdown-header { font-size: 12px; padding: 8px 10px; } .dropdown-item { font-size: 12px; padding: 0.4rem 1rem; } .col-3 { flex: 0 0 20%; max-width: 20%; } .width-16 { flex: 0 0 13.333333%; max-width: 13.333333%; } } /* Mobile and Tablet - show Figma mobile header and hide desktop nav */ @media (max-width: 991px) { /* Prevent horizontal overflow on mobile */ body, html { overflow-x: hidden; max-width: 100vw; } /* Fix row negative margins causing overflow */ .row { margin-right: 0; margin-left: 0; } .col { padding-right: 0; padding-left: 0; } /* Show mobile header */ .mobile-header-figma { display: block !important; } /* Hide desktop navigation completely on mobile and tablet */ .menuHeaderContainer { display: none !important; } /* Show desktop navigation when mobile menu is open */ .menuHeaderContainer.mobile-menu-open { display: flex !important; flex-direction: column; } /* Stack navigation items */ .menuHeaderContainer .row { flex-direction: column; width: 100%; margin: 0; } /* Hide logo in mobile menu (already shown in mobile header) */ .menuHeaderContainer .col-3 { display: none; } .width-16, .menuHeaderContainer .col { flex: 0 0 100%; max-width: 100%; padding: 0; } .menuHeaderContainer .row.w-100 { flex-direction: column; padding: 0; margin: 0; } .width-16 { border-bottom: 1px solid #e0e0e0; } /* Fix dropdown header alignment */ .dropdown-header { font-size: 16px; padding: 15px 20px; justify-content: flex-start; text-align: left; width: 100%; } .dropdown-header-desktop { display: flex; justify-content: space-between; align-items: center; width: 100%; } .dropdown-arrow { margin-left: auto; font-size: 12px; } /* Fix link alignment for non-dropdown items */ .link-tabs, .successStories, .caregiversMenuBtn { font-size: 16px; padding: 15px 20px; text-align: left; width: 100%; display: block; } .dropdown-menu { position: relative; box-shadow: none; border: none; border-top: 1px solid #e0e0e0; background-color: #f8f9fa; width: 100%; margin: 0; border-radius: 0; } .dropdown-item { padding: 12px 40px; font-size: 15px; text-align: left; width: 100%; } /* Adjust top banner for mobile */ .top-banner { font-size: 12px; padding: 8px 10px; } } /* Tablet - Show mobile header, hide desktop nav */ @media (max-width: 1024px) and (min-width: 768px) { /* Force show mobile header on tablet */ .mobile-header-figma { display: block !important; } /* Force hide desktop navigation on tablet */ .menuHeaderContainer { display: none !important; } /* Tablet-specific adjustments */ .mobile-header-container { padding: 0; height: 68px; } .mobile-logo { padding: 0 30px; } .mobile-logo img { height: 36px; } .mobile-center-actions { background-color: #E6F2FA; } .mobile-signin-btn, .mobile-cart-btn { padding: 10px 18px; } .mobile-signin-btn svg, .mobile-cart-btn svg { width: 22px; height: 22px; } .mobile-signin-btn span:not(.cart-badge), .mobile-cart-btn span:not(.cart-badge) { font-size: 12px; } .mobile-hamburger-btn { min-width: 72px; padding: 0 24px; } .hamburger-line { width: 26px; height: 3px; } .header-main { padding: 15px 20px; } nav { display: none; } .mobile-menu-btn { display: block; } .guide-content, .product-content, .conversation-content, .we-are-here-content { grid-template-columns: 1fr; gap: 40px; } .benefits { grid-template-columns: 1fr; gap: 40px; } .footer-content { grid-template-columns: 1fr; gap: 40px; } .hero h1, .hero h2 { font-size: 36px; } .banner-left { padding: 40px 50px; } .banner-left h2 { font-size: 36px; margin-bottom: 15px; } .banner-left p { font-size: 14px; } .banner-right-top { padding: 30px 30px; padding-left: 50%; height: auto; min-height: 167px; } .banner-right-top h2 { font-size: 24px; line-height: 1.3; } .banner-right-bottom { padding: 30px 50px; padding-left: 50%; } .banner-right-bottom p { font-size: 14px; } .flag-overlay { background-size: cover; } } @media (max-width: 768px) { /* Additional overflow prevention */ * { max-width: 100vw; } body { position: relative; overflow-x: hidden !important; } /* Mobile-specific header adjustments */ .mobile-header-container { padding: 0; height: 56px; } .mobile-logo { padding: 0 15px; } .mobile-logo img { height: 28px; } .mobile-center-actions { background-color: #E6F2FA; } .mobile-signin-btn, .mobile-cart-btn { padding: 8px 12px; } .mobile-signin-btn svg, .mobile-cart-btn svg { width: 18px; height: 18px; } .mobile-signin-btn span:not(.cart-badge), .mobile-cart-btn span:not(.cart-badge) { font-size: 10px; } .mobile-hamburger-btn { min-width: 56px; padding: 0 16px; } .hamburger-line { width: 22px; height: 2.5px; } .cart-badge { top: 6px; right: 6px; min-width: 16px; height: 16px; font-size: 9px; line-height: 16px; } .container { padding: 40px 20px; width: 100%; max-width: 100%; } .breadcrumb { padding: 12px 20px; font-size: 12px; width: 100%; max-width: 100%; } /* Hero Section Mobile */ .hero-wrapper { padding: 0 20px; width: 100%; max-width: 100%; } .hero { padding: 40px 20px; min-height: 300px; margin: 0 -20px; background-position: center right; } .hero::before { background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%); } .hero-content { padding: 40px 30px 30px 30px; } .hero h1 { font-size: 28px; line-height: 1.2; margin-bottom: 10px; } .hero h2 { font-size: 28px; line-height: 1.2; } .hero-thin-rectangle { width: 80px; height: 3px; } .red-accent { margin: 0 -20px; height: 16px; } /* Patient Guide Section Mobile */ .patient-guide { padding: 40px 0; } .guide-content { grid-template-columns: 1fr; gap: 30px; } .guide-text { order: 2; } .guide-image { order: 1; } .guide-image img { width: 100%; max-width: 400px; height: auto; margin: 0 auto; display: block; } .guide-text h3 { font-size: 28px; margin-bottom: 20px; } .guide-text p { font-size: 15px; margin-bottom: 25px; } /* Split Banner Section Mobile */ .split-banner-container { display: flex; flex-direction: column; } .banner-left { position: relative; padding: 40px 30px; min-height: auto; background-color: #283D5C; background-image: url('assets/flag-banner.png'); background-size: cover; background-position: center; max-width: 100%; order: 1; } .banner-left h2 { font-size: 28px; line-height: 1.2; margin-bottom: 15px; font-weight: 300; } .banner-left p { font-size: 14px; line-height: 1.5; font-weight: 300; } .banner-right { min-height: auto; order: 2; } .banner-right-top { padding: 30px 30px; padding-left: 30px; } .banner-right-top h2 { font-size: 24px; line-height: 1.25; font-weight: 700; } .banner-right-bottom { padding: 30px 30px; padding-left: 30px; } .banner-right-bottom p { font-size: 14px; line-height: 1.5; } .flag-overlay { display: none; } /* Freedom Section Mobile */ .freedom-section { padding: 50px 0; } .freedom-header { margin-bottom: 40px; } .freedom-header h2 { font-size: 28px; padding: 0 20px; } .freedom-header .underline { width: 70px; height: 3px; } .benefits { grid-template-columns: 1fr; gap: 30px; } .benefit-card h3 { font-size: 18px; line-height: 1.5; } .benefit-icon img { width: 50px; height: 50px; } .disclaimer-text { padding: 0 20px; } .disclaimer-text p { font-size: 11px; line-height: 1.6; margin-bottom: 15px; } /* Product Section Mobile */ .product-section { padding: 50px 0; } .product-content { grid-template-columns: 1fr; gap: 30px; } .product-image { order: 1; } .product-image img { width: 100%; max-width: 450px; height: auto; margin: 0 auto; display: block; } .product-info { order: 2; text-align: center; } .product-info h2 { font-size: 28px; margin-bottom: 20px; } .product-description { font-size: 18px; margin-bottom: 20px; } .product-info p:not(.product-description) { font-size: 15px; margin-bottom: 25px; } /* Conversation Section Mobile */ .conversation-section { padding: 50px 0; } .conversation-content { grid-template-columns: 1fr; gap: 30px; } .conversation-text h2 { font-size: 26px; line-height: 1.3; margin-bottom: 20px; } .conversation-text p { font-size: 15px; margin-bottom: 25px; } .prompts-box { padding: 25px 20px; } .prompts-box h3 { font-size: 20px; margin-bottom: 20px; } .prompts-box ul { padding-left: 20px; } .prompts-box li { font-size: 14px; line-height: 1.6; margin-bottom: 15px; } /* We Are Here Section Mobile */ .we-are-here { padding: 50px 0; } .we-are-here-content { grid-template-columns: 1fr; gap: 30px; } .we-are-here-image { order: 1; } .we-are-here-image img { width: 100%; max-width: 500px; height: auto; margin: 0 auto; display: block; border-radius: 8px; } .we-are-here-text { order: 2; } .we-are-here-text h2 { font-size: 28px; margin-bottom: 20px; } .we-are-here-text p { font-size: 15px; margin-bottom: 18px; line-height: 1.7; } /* Button Mobile */ .btn { padding: 14px 30px; font-size: 15px; width: 100%; max-width: 300px; text-align: center; } /* Footer Mobile */ .footer-content { padding: 0 20px; } .footer-links { flex-direction: column; align-items: center; gap: 10px; } .footer-links span { display: none; } .footer-bottom { padding: 30px 20px; } .footer-logo img { max-width: 120px; } } @media (max-width: 480px) { .top-banner { font-size: 12px; padding: 8px; } .header-main { padding: 10px 15px; } .hero h1, .hero h2 { font-size: 24px; } .guide-text h3, .freedom-header h2, .product-info h2, .we-are-here-text h2 { font-size: 26px; } .conversation-text h2 { font-size: 24px; } .btn { padding: 12px 25px; font-size: 14px; } .banner-left { padding: 30px 20px; } .banner-left h2 { font-size: 24px; margin-bottom: 12px; } .banner-left p { font-size: 13px; } .banner-right-top { padding: 25px 20px; } .banner-right-top h2 { font-size: 22px; margin-bottom: 12px; } .banner-right-bottom { padding: 25px 20px; } .banner-right-bottom p { font-size: 13px; } .prompts-box { padding: 25px; } } /* OVERRIDE: Show logo and empty navigation bar on tablet/mobile when hide-desktop-header is active */ /* These rules must come last to override the default hiding behavior above */ @media (max-width: 1024px) { body.hide-desktop-header .menuHeaderContainer { display: block !important; } body.hide-desktop-header .desktop-nav-bar.menuHeaderContainer { display: block !important; background-color: #fff; border-bottom: 1px solid #e0e0e0; } body.hide-desktop-header .desktop-nav-bar { display: block !important; } body.hide-desktop-header .desktop-nav-content { min-height: 50px; padding: 0 20px; display: flex !important; align-items: center; } body.hide-desktop-header .desktop-logo { display: flex !important; align-items: center; } body.hide-desktop-header .desktop-logo a { display: block !important; } body.hide-desktop-header .desktop-logo img { height: 36px; width: auto; display: block !important; } } @media (max-width: 768px) { body.hide-desktop-header .menuHeaderContainer { display: block !important; } body.hide-desktop-header .desktop-nav-bar.menuHeaderContainer { display: block !important; } body.hide-desktop-header .desktop-nav-content { padding: 0 15px; } body.hide-desktop-header .desktop-logo img { height: 28px; } }