Headers
The Header provides a set of menus that users can use to navigate through the site and includes clear call to action and contact information for users.
The Header provides a set of menus that users can use to navigate through the site and includes clear call to action and contact information for users.
<div class="top-bar">
<div class="container">
<a href="tel:2055587505" class="inline-link"><i class="fa-solid fa-phone"></i> Call today! 205-558-7505</a>
</div>
</div>
<header class="header bg-light-grass-pale">
<div class="container">
<a href="#" class="logo"><img src="img/logos/VivaHealth.svg" alt="Viva Health" /></a>
<nav class="main-nav js-main-nav">
<div class="mobile-visible">
<div class="search-container">
<input type="text" class="search-input" placeholder="What are you looking for?" />
</div>
<div class="btns-group align-items-center">
<a href="#" class="btn btn-secondary">Member Login</a>
<a href="#" class="btn btn-primary">Enroll Now</a>
</div>
</div>
<ul class="main-nav-list">
<li class="main-nav-item js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Medicare</span>
<div class="sub-nav">
<div class="row">
<div class="col-md-4 col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">Shop Medicare</h4>
</div>
<ul>
<li class="mobile-visible"><a href="#">Medicare Overview</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Providers</a></li>
<li><a href="#">List of Covered Drugs</a></li>
<li><a href="#">Pharmacy</a></li>
<li><a href="#">Wellness</a></li>
</ul>
</div>
<div class="col-md-8 col-lg-6 sub-nav-col pb-m">
<div class="sub-nav-headline">
<h4 class="font-brand">Questions About Medicare? We can help.</h4>
</div>
<div class="row">
<div class="col">
<ul>
<li class="mobile-hidden"><a href="#">Medicare Overview</a></li>
<li><a href="#">When can you enroll?</a></li>
<li><a href="#">Are you turning 65?</a></li>
<li><a href="#">What is a Star Rating?</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#">Why choose <span class="small-caps">Viva</span>?</a></li>
<li><a href="#">Advantage Plans vs Original Medicare</a></li>
<li><a href="#"><span class="small-caps">Viva Health</span> Cafes</a></li>
<li><a href="#">People with Medicare & Medicaid</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 sub-nav-col bg-light-grass-pale">
<div class="sub-nav-headline">
<h4 class="font-brand">For Members</h4>
</div>
<ul>
<li><a href="#">Member Resources</a></li>
<li><a href="#">Member Portal</a></li>
</ul>
<div class="btns-group vertical mobile-hidden">
<a href="#" class="btn btn-primary">Dr Search</a>
<a href="#" class="btn btn-black">Rx Search</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</div>
</div>
</div>
</li>
<li class="main-nav-item main-nav-item-two-columns main-nav-item-floating js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Group</span>
<div class="sub-nav">
<div class="row">
<div class="col-md-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">Shop Group</h4>
</div>
<ul>
<li class="mobile-visible"><a href="#">Group Overview</a></li>
<li><a href="#">Small Business Plans</a></li>
<li><a href="#">Large Business Plans</a></li>
<li><a href="#">Find a Doctor</a></li>
<li><a href="#">Commercial Service Area</a></li>
</ul>
</div>
<div class="col-md-3 sub-nav-col bg-light-grass-pale">
<div class="sub-nav-headline">
<h4 class="font-brand">For Members</h4>
</div>
<ul>
<li><a href="#">Member Resources</a></li>
<li><a href="#">Member Portal</a></li>
</ul>
<div class="btns-group vertical mobile-hidden">
<a href="#" class="btn btn-primary">Dr Search</a>
<a href="#" class="btn btn-black">Rx Search</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</div>
</div>
</div>
</li>
<li class="main-nav-item js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Provider</span>
<div class="sub-nav">
<div class="row">
<div class="col-md-4 col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">For Providers</h4>
</div>
<ul>
<li class="mobile-visible"><a href="#">Provider Overview</a></li>
<li><a href="#">Provider Portal</a></li>
<li><a href="#">Provider Manual</a></li>
<li><a href="#">Forms & Resources</a></li>
</ul>
</div>
<div class="col-md-8 col-lg-6 sub-nav-col pb-m">
<div class="sub-nav-headline">
<h4 class="font-brand">Learn About <span class="small-caps">VIVA</span> Group</h4>
</div>
<div class="row">
<div class="col">
<ul>
<li class="mobile-hidden"><a href="#">Provider Overview</a></li>
<li><a href="#">About <span class="small-caps">Viva</span></a></li>
<li><a href="#">SNP Model of Care</a></li>
<li><a href="#">Provider Services Contacts</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#">FAQs</a></li>
<li><a href="#">Forms & Resources</a></li>
<li><a href="#">Notice of Privacy Practices</a></li>
<li><a href="#"><span class="small-caps">VIVA</span> Newsletter</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 sub-nav-col bg-light-grass-pale">
<div class="sub-nav-headline">
<h4 class="font-brand">For Members</h4>
</div>
<ul>
<li><a href="#">Want to become a <span class="small-caps">Viva Health</span> provider?</a></li>
</ul>
<div class="btns-group vertical mobile-hidden">
<a href="#" class="btn btn-primary">Become a Provider</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="main-nav-item text-center text-teal mobile-visible">
<a href="tel:1888830" class="inline-link">Call Us Today! 1-888-830-VIVA</a>
</div>
<div class="btns-group vertical mobile-visible">
<a href="#" class="btn btn-primary">Dr Search</a>
<a href="#" class="btn btn-black">Rx Search</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</nav>
<div class="btns-group align-items-center mobile-hidden">
<a href="#" class="btn btn-secondary">Member Login</a>
<a href="#" class="btn btn-primary">Enroll Now</a>
<div class="search-wrap">
<button class="search-btn js-dropdown-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
<div class="search-container js-dropdown-content">
<input type="text" class="search-input js-search-input" placeholder="What are you looking for?" />
<button class="search-clear">
<i class="fa-solid fa-circle-xmark"></i>
</button>
</div>
</div>
</div>
<div class="mobile-btn js-mobile-btn">
<em></em>
</div>
</div>
</header>
<div class="top-bar">
<div class="container">
<a href="tel:2055587505" class="inline-link"><i class="fa-solid fa-phone"></i> Call today! 205-558-7505</a>
</div>
</div>
<header class="header bg-light-grass-pale">
<div class="container">
<a href="#" class="logo"><img src="img/logos/VivaHealth.svg" alt="Viva Health" /></a>
<nav class="main-nav js-main-nav">
<div class="mobile-visible">
<div class="search-container">
<input type="text" class="search-input" placeholder="What are you looking for?" />
</div>
<div class="btns-group align-items-center">
<a href="#" class="btn btn-secondary">Member Login</a>
<a href="#" class="btn btn-primary">Enroll Now</a>
</div>
</div>
<ul class="main-nav-list">
<li class="main-nav-item js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Medicare</span>
<div class="sub-nav">
<div class="row">
<div class="col-md-4 col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">Shop Medicare</h4>
</div>
<ul>
<li class="mobile-visible"><a href="#">Medicare Overview</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Providers</a></li>
<li><a href="#">List of Covered Drugs</a></li>
<li><a href="#">Pharmacy</a></li>
<li><a href="#">Wellness</a></li>
</ul>
</div>
<div class="col-md-8 col-lg-6 sub-nav-col pb-m">
<div class="sub-nav-headline">
<h4 class="font-brand">Questions About Medicare? We can help.</h4>
</div>
<div class="row align-items-center">
<div class="col">
<div class="header-img">
<img src="img/header/img1.png" alt="" />
</div>
</div>
<div class="col">
<ul>
<li><a href="#">Why choose <span class="small-caps">Viva</span>?</a></li>
<li><a href="#">Advantage Plans vs Original Medicare</a></li>
<li><a href="#"><span class="small-caps">Viva Health</span> Cafes</a></li>
<li><a href="#">People with Medicare & Medicaid</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 sub-nav-col bg-light-grass-pale">
<div class="sub-nav-headline">
<h4 class="font-brand">For Members</h4>
</div>
<ul>
<li><a href="#">Member Resources</a></li>
<li><a href="#">Member Portal</a></li>
</ul>
<div class="btns-group vertical mobile-hidden">
<a href="#" class="btn btn-primary">Dr Search</a>
<a href="#" class="btn btn-black">Rx Search</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</div>
</div>
</div>
</li>
<li class="main-nav-item js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Group</span>
<div class="sub-nav">
<div class="row">
<div class="col-md-4 col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">Shop Group</h4>
</div>
<ul>
<li class="mobile-visible"><a href="#">Group Overview</a></li>
<li><a href="#">Small Business Plans</a></li>
<li><a href="#">Large Business Plans</a></li>
<li><a href="#">Find a Doctor</a></li>
<li><a href="#">Commercial Service Area</a></li>
</ul>
</div>
<div class="col-md-8 col-lg-6 sub-nav-col pb-m">
<div class="sub-nav-headline">
<h4 class="font-brand">Learn About <span class="small-caps">VIVA</span> Group</h4>
</div>
<div class="row align-items-center">
<div class="col">
<div class="header-img">
<img src="img/header/img2.png" alt="" />
</div>
</div>
<div class="col">
<ul>
<li><a href="#">Teladoc</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Notice of Privacy Practices</a></li>
<li><a href="#">Report Fraud, Waste or Abuse</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 sub-nav-col bg-light-grass-pale">
<div class="sub-nav-headline">
<h4 class="font-brand">For Members</h4>
</div>
<ul>
<li><a href="#">Member Resources</a></li>
<li><a href="#">Member Portal</a></li>
</ul>
<div class="btns-group vertical mobile-hidden">
<a href="#" class="btn btn-primary">Dr Search</a>
<a href="#" class="btn btn-black">Rx Search</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</div>
</div>
</div>
</li>
<li class="main-nav-item js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Provider</span>
<div class="sub-nav">
<div class="row">
<div class="col-md-4 col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">For Providers</h4>
</div>
<ul>
<li class="mobile-visible"><a href="#">Provider Overview</a></li>
<li><a href="#">Provider Portal</a></li>
<li><a href="#">Provider Manual</a></li>
<li><a href="#">Forms & Resources</a></li>
</ul>
</div>
<div class="col-md-8 col-lg-6 sub-nav-col pb-m">
<div class="sub-nav-headline">
<h4 class="font-brand">Learn About <span class="small-caps">VIVA</span> Group</h4>
</div>
<div class="row align-items-center">
<div class="col">
<div class="header-img">
<img src="img/header/img1.png" alt="" />
</div>
</div>
<div class="col">
<ul>
<li><a href="#">FAQs</a></li>
<li><a href="#">Forms & Resources</a></li>
<li><a href="#">Notice of Privacy Practices</a></li>
<li><a href="#"><span class="small-caps">VIVA</span> Newsletter</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 sub-nav-col bg-light-grass-pale">
<div class="sub-nav-headline">
<h4 class="font-brand">For Members</h4>
</div>
<ul>
<li><a href="#">Want to become a <span class="small-caps">Viva Health</span> provider?</a></li>
</ul>
<div class="btns-group vertical mobile-hidden">
<a href="#" class="btn btn-primary">Become a Provider</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="main-nav-item text-center text-teal mobile-visible">
<a href="tel:1888830" class="inline-link">Call Us Today! 1-888-830-VIVA</a>
</div>
<div class="btns-group vertical mobile-visible">
<a href="#" class="btn btn-primary">Dr Search</a>
<a href="#" class="btn btn-black">Rx Search</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</nav>
<div class="btns-group align-items-center mobile-hidden">
<a href="#" class="btn btn-secondary">Member Login</a>
<a href="#" class="btn btn-primary">Enroll Now</a>
<div class="search-wrap">
<button class="search-btn js-dropdown-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
<div class="search-container js-dropdown-content">
<input type="text" class="search-input js-search-input" placeholder="What are you looking for?" />
<button class="search-clear">
<i class="fa-solid fa-circle-xmark"></i>
</button>
</div>
</div>
</div>
<div class="mobile-btn js-mobile-btn">
<em></em>
</div>
</div>
</header>
<div class="top-bar">
<div class="container">
<a href="tel:2055587505" class="inline-link"><i class="fa-solid fa-phone"></i> Call today! 205-558-7505</a>
</div>
</div>
<header class="header bg-light-grass-pale">
<div class="container">
<a href="#" class="logo"><img src="img/logos/VivaHealth.svg" alt="Viva Health" /></a>
<nav class="main-nav js-main-nav">
<div class="mobile-visible">
<div class="search-container">
<input type="text" class="search-input" placeholder="What are you looking for?" />
</div>
<div class="btns-group align-items-center">
<a href="#" class="btn btn-secondary">Member Login</a>
<a href="#" class="btn btn-primary">Enroll Now</a>
</div>
</div>
<ul class="main-nav-list">
<li class="main-nav-item js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Medicare</span>
<div class="sub-nav">
<div class="row">
<div class="col-md-4 col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">Shop Medicare</h4>
</div>
<ul>
<li class="mobile-visible"><a href="#">Medicare Overview</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Providers</a></li>
<li><a href="#">List of Covered Drugs</a></li>
<li><a href="#">Pharmacy</a></li>
<li><a href="#">Wellness</a></li>
</ul>
</div>
<div class="col-md-8 col-lg-6 sub-nav-col pb-m">
<div class="sub-nav-headline">
<h4 class="font-brand">Questions About Medicare? We can help.</h4>
</div>
<div class="row align-items-center">
<div class="col">
<div class="header-content">
<img src="img/header/4-Star-Rating.png" alt="">
<a href="#" class="btn btn-secondary">Learn More
</div>
</div>
<div class="col">
<ul>
<li><a href="#">Why choose <span class="small-caps">Viva</span>?</a></li>
<li><a href="#">Advantage Plans vs Original Medicare</a></li>
<li><a href="#"><span class="small-caps">Viva Health</span> Cafes</a></li>
<li><a href="#">People with Medicare & Medicaid</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 sub-nav-col bg-light-grass-pale">
<div class="sub-nav-headline">
<h4 class="font-brand">For Members</h4>
</div>
<ul>
<li><a href="#">Member Resources</a></li>
<li><a href="#">Member Portal</a></li>
</ul>
<div class="btns-group vertical mobile-hidden">
<a href="#" class="btn btn-primary">Dr Search</a>
<a href="#" class="btn btn-black">Rx Search</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</div>
</div>
</div>
</li>
<li class="main-nav-item js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Group</span>
<div class="sub-nav">
<div class="row">
<div class="col-md-4 col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">Shop Group</h4>
</div>
<ul>
<li class="mobile-visible"><a href="#">Group Overview</a></li>
<li><a href="#">Small Business Plans</a></li>
<li><a href="#">Large Business Plans</a></li>
<li><a href="#">Find a Doctor</a></li>
<li><a href="#">Commercial Service Area</a></li>
</ul>
</div>
<div class="col-md-8 col-lg-6 sub-nav-col pb-m">
<div class="sub-nav-headline">
<h4 class="font-brand">Learn About <span class="small-caps">VIVA</span> Group</h4>
</div>
<div class="row align-items-center">
<div class="col">
<div class="header-content">
<h4>Own a small or large business?</h4>
<hr class="hr-brand-light" />
<h3>
<span class="small-caps">Viva Health</span>
<span class="font-brand">has you covered</span>
</h3>
<a href="#" class="btn btn-secondary">Learn More</a>
</div>
</div>
<div class="col">
<ul>
<li><a href="#">Teladoc</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Notice of Privacy Practices</a></li>
<li><a href="#">Report Fraud, Waste or Abuse</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 sub-nav-col bg-light-grass-pale">
<div class="sub-nav-headline">
<h4 class="font-brand">For Members</h4>
</div>
<ul>
<li><a href="#">Member Resources</a></li>
<li><a href="#">Member Portal</a></li>
</ul>
<div class="btns-group vertical mobile-hidden">
<a href="#" class="btn btn-primary">Dr Search</a>
<a href="#" class="btn btn-black">Rx Search</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</div>
</div>
</div>
</li>
<li class="main-nav-item js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Provider</span>
<div class="sub-nav">
<div class="row">
<div class="col-md-4 col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">For Providers</h4>
</div>
<ul>
<li class="mobile-visible"><a href="#">Provider Overview</a></li>
<li><a href="#">Provider Portal</a></li>
<li><a href="#">Provider Manual</a></li>
<li><a href="#">Forms & Resources</a></li>
</ul>
</div>
<div class="col-md-8 col-lg-6 sub-nav-col pb-m">
<div class="sub-nav-headline">
<h4 class="font-brand">Learn About <span class="small-caps">VIVA</span> Group</h4>
</div>
<div class="row align-items-center">
<div class="col">
<div class="header-content">
<h4>Want to become a provider?</h4>
<hr class="hr-brand-light" />
<h3>
<span class="small-caps">Viva Health</span>
<span class="font-brand">has you covered</span>
</h3>
<a href="#" class="btn btn-secondary">Learn More</a>
</div>
</div>
<div class="col">
<ul>
<li><a href="#">FAQs</a></li>
<li><a href="#">Forms & Resources</a></li>
<li><a href="#">Notice of Privacy Practices</a></li>
<li><a href="#"><span class="small-caps">VIVA</span> Newsletter</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 sub-nav-col bg-light-grass-pale">
<div class="sub-nav-headline">
<h4 class="font-brand">For Members</h4>
</div>
<ul>
<li><a href="#">Want to become a <span class="small-caps">Viva Health</span> provider?</a></li>
</ul>
<div class="btns-group vertical mobile-hidden">
<a href="#" class="btn btn-primary">Become a Provider</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="main-nav-item text-center text-teal mobile-visible">
<a href="tel:1888830" class="inline-link">Call Us Today! 1-888-830-VIVA</a>
</div>
<div class="btns-group vertical mobile-visible">
<a href="#" class="btn btn-primary">Dr Search</a>
<a href="#" class="btn btn-black">Rx Search</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</nav>
<div class="btns-group align-items-center mobile-hidden">
<a href="#" class="btn btn-secondary">Member Login</a>
<a href="#" class="btn btn-primary">Enroll Now</a>
<div class="search-wrap">
<button class="search-btn js-dropdown-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
<div class="search-container js-dropdown-content">
<input type="text" class="search-input js-search-input" placeholder="What are you looking for?" />
<button class="search-clear">
<i class="fa-solid fa-circle-xmark"></i>
</button>
</div>
</div>
</div>
<div class="mobile-btn js-mobile-btn">
<em></em>
</div>
</div>
</header>
<div class="top-bar">
<div class="container">
<a href="tel:2055587505" class="inline-link"><i class="fa-solid fa-phone"></i> Call today! 205-558-7505</a>
</div>
</div>
<header class="header bg-light-grass-pale">
<div class="container">
<a href="#" class="logo"><img src="img/logos/VivaHealth.svg" alt="Viva Health" /></a>
<nav class="main-nav js-main-nav">
<div class="mobile-visible">
<div class="search-container">
<input type="text" class="search-input" placeholder="What are you looking for?" />
</div>
<div class="btns-group align-items-center">
<a href="#" class="btn btn-secondary">Member Login</a>
<a href="#" class="btn btn-primary">Enroll Now</a>
</div>
</div>
<ul class="main-nav-list">
<li class="main-nav-item main-nav-item-one-column main-nav-item-floating js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Medicare</span>
<div class="sub-nav">
<div class="row">
<div class="col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">Shop Medicare</h4>
</div>
<ul>
<li><a href="#">Plans</a></li>
<li><a href="#">Providers</a></li>
<li><a href="#">List of Covered Drugs</a></li>
<li><a href="#">Pharmacy</a></li>
<li><a href="#">Wellness</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-nav-item main-nav-item-one-column main-nav-item-floating js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Group</span>
<div class="sub-nav">
<div class="row">
<div class="col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">Shop Group</h4>
</div>
<ul>
<li><a href="#">Small Business Plans</a></li>
<li><a href="#">Large Business Plans</a></li>
<li><a href="#">Find a Doctor</a></li>
<li><a href="#">Commercial Service Area</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-nav-item main-nav-item-one-column main-nav-item-floating js-nav-item">
<span role="button" tabindex="0" class="js-nav-link">Provider</span>
<div class="sub-nav">
<div class="row">
<div class="col-lg-3 sub-nav-col bg-teal">
<div class="sub-nav-headline">
<h4 class="font-brand">For Providers</h4>
</div>
<ul>
<li><a href="#">Provider Portal</a></li>
<li><a href="#">Provider Manual</a></li>
<li><a href="#">Forms & Resources</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<div class="main-nav-item text-center text-teal mobile-visible">
<a href="tel:1888830" class="inline-link">Call Us Today! 1-888-830-VIVA</a>
</div>
<div class="btns-group vertical mobile-visible">
<a href="#" class="btn btn-primary">Dr Search</a>
<a href="#" class="btn btn-black">Rx Search</a>
<a href="#" class="btn btn-secondary">Contact</a>
</div>
</nav>
<div class="btns-group align-items-center mobile-hidden">
<a href="#" class="btn btn-secondary">Member Login</a>
<a href="#" class="btn btn-primary">Enroll Now</a>
<div class="search-wrap">
<button class="search-btn js-dropdown-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
<div class="search-container js-dropdown-content">
<input type="text" class="search-input js-search-input" placeholder="What are you looking for?" />
<button class="search-clear">
<i class="fa-solid fa-circle-xmark"></i>
</button>
</div>
</div>
</div>
<div class="mobile-btn js-mobile-btn">
<em></em>
</div>
</div>
</header>
<div class="top-bar text-dark-teal">
<div class="container">
Annual Enrollment Period (AEP) is now open. Enroll today!
</div>
</div>
<header class="header header-careers bg-teal">
<div class="container">
<a href="#" class="logo"><img src="img/logos/VivaHealthWhite.svg" alt="Viva Health" /></a>
<nav class="main-nav js-main-nav">
<ul class="main-nav-list">
<li class="main-nav-item active">
<a href="#">Careers Home</a>
</li>
<li class="main-nav-item js-nav-item">
<a href="#">Benefits</a>
</li>
<li class="main-nav-item js-nav-item">
<a href="#">How to Apply</a>
</li>
<li class="main-nav-item js-nav-item">
<a href="#">Pharmacy Residency</a>
</li>
<li class="main-nav-item js-nav-item">
<a href="#">Contact</a>
</li>
</ul>
<div class="btns-group">
<a href="#" class="btn btn-white">Apply Today</a>
</div>
</nav>
<div class="btns-group">
<a href="#" class="btn btn-white">Apply Today</a>
</div>
<div class="mobile-btn js-mobile-btn">
<em></em>
</div>
</div>
</header>