.header-container {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #e1dddd;
margin-right: 4rem;
margin-left: 4rem;
} .search_trigger {
cursor: pointer;
}
.search_input {
right: 25px;
z-index: 120;
}
.search-div {
padding: 10px 10px 10px 10px;
display: none;
position: absolute;
right: 25px;
top: 125px;
z-index: 120;
height: 62px;
background-color: white;
border: 1px solid #e1dddd;
box-shadow: 1px 3px 3px rgb(158 156 156 / 39%);
}
input {
border-radius: 5px;
width: 500px;
height: 42px;
border: 1px solid #8cc63f;
color: black;
font-weight: 700;
font-size: 14px;
padding-left: 50px;
@include for-size(mobile) {
width: 100%;
border-radius: 0;
}
@include placeholder {
color: #f1efef;
font-weight: 700;
font-size: 14px;
}
}
.search_icon {
position: absolute;
color: #8cc63f;
z-index: 20;
font-size: 28px;
left: 20px;
top: 16px;
}
.close_icon {
color: #8cc63f;
}
.close_search {
position: absolute;
font-size: 28px;
right: 20px;
top: 20px;
color: #ffffff;
@include transition(all, 0.3s, ease-in-out);
cursor: pointer;
} .header-container .logo img {
height: 75px; }
.header-container .main-menu .menu-items {
display: flex;
list-style: none;
margin: 0;
background: #fff;
padding: 0 7px;
border-radius: 50px;
text-align: center;
border: 1px solid #e1dddd;
white-space: nowrap;
}
.header-container .main-menu .menu-items li {
margin: 0 15px;
padding: 7px 0;
}
.header-container .main-menu .menu-items li a {
text-decoration: none;
color: #404041;
padding: 7px 0;
}
.header-container .main-menu .menu-items li.current-menu-item a {
background: #8dc63f;
border-radius: 50px;
padding: 1px 10px;
color: #fff; }
.header-container .user-actions {
display: flex;
align-items: center;
}
.header-container .user-actions a {
margin-left: 15px;
text-decoration: none;
}
.header-container .demo-button {
background-color: #8cc63f;
color: white;
padding: 10px 15px;
border-radius: 5px;
box-shadow: 1px 3px 3px rgb(158 156 156 / 39%);
}
.header-container .tab-menu,
.header-container .mob-menu {
display: none;
}
.header-container .main-menu li .sub-menu {
background: #fff;
height: 0;
min-width: 280px;
opacity: 0;
padding: 10px 0;
position: absolute;
transition: visibility, opacity 0.3s linear;
visibility: hidden;
z-index: 8888;
border-radius: 10px;
margin-top: 8px;
}
.header-container .main-menu .menu-item-has-children {
background: url(//www.fi-navigator.com/wp-content/uploads/2024/06/down.png) 100% / 18px no-repeat;
padding-right: 20px !important;
background-position: 100% 55%;
}
.header-container .main-menu .menu-item:hover .sub-menu {
height: auto;
opacity: 1;
visibility: visible;
}
.header-container .main-menu li .sub-menu li {
line-height: 32px;
list-style: none;
margin: 0;
padding: 0;
}
.header-container .main-menu li .sub-menu li a {
border: none;
color: #333;
font-size: 15px;
font-weight: 600;
padding: 5px 20px;
text-decoration: none;
display: block;
text-align: left;
}
.header-container .main-menu li .sub-menu li a:hover {
color: #1e224c;
background: #f2f2f2;
}
.header-container .main-menu li .sub-menu:before {
border: 6px solid transparent;
border-bottom-color: #f2f2f2;
content: "";
display: block;
height: 0;
left: 15px;
position: absolute;
top: -12px;
width: 0;
}
.footer-logo {
display: block;
} @media (max-width: 1270px) {
.header-container .tab-menu {
display: block;
.tab-menu-selection {
background: #ffffff;
position: relative;
top: 75px;
margin: 0;
width: 100%;
z-index: 10;
border: 1px solid #e6e6e7;
padding: 40px;
display: none;
border-radius: 10px;
box-shadow: 0px 33px 33px -20px #000000a8;
.item-head {
font-weight: 800;
font-size: 16px;
}
.item {
padding-bottom: 10px;
font-weight: 700;
font-size: 14px;
}
}
}
.header-container .mob-menu {
display: none;
.mob-menu-selection {
background: #ffffff;
position: relative;
top: 75px;
margin: 0;
width: 100%;
z-index: 10;
border: 1px solid #e6e6e7;
padding: 0 40px 20px 40px;
display: none;
border-radius: 10px;
box-shadow: 0px 33px 33px -20px #000000a8;
}
}
.header-container .main-menu {
display: none;
}
.header-container .tab-menu .nav_tab_btn,
.header-container .mob-menu .nav_mob_btn {
cursor: pointer;
display: block;
height: 32px;
position: relative;
width: 32px;
z-index: 99999;
right: 10px;
top: 0;
}
.header-container .mob-menu .nav_mob_btn,
.header-container .tab-menu .nav_tab_btn {
top: 15px;
float: right;
} .header-container .mob-menu .nav_mob_btn,
.header-container .tab-menu .nav_tab_btn {
background: url(//www.fi-navigator.com/wp-content/uploads/2024/06/hambuger.png) 50% / 32px
no-repeat;
} .header-container .nav_mob_btn.nav_open,
.header-container .nav_tab_btn.nav_open {
background: url(//www.fi-navigator.com/wp-content/uploads/2024/06/close.png) 50% / 15px
no-repeat;
border: 1px solid #e6e6e7;
border-radius: 20px;
background-color: white;
}
.header-container {
display: block;
padding: 0;
padding-bottom: 10px;
position: relative;
height: 80px;
max-height: 80px;
margin-right: 1rem;
margin-left: 1rem;
}
.header-container .logo img {
position: absolute;
top: 0; max-height: 70px;
}
.header-container .user-actions {
position: absolute;
top: 0;
right: 100px;
margin-left: 20px;
max-height: 70px;
height: 75px;
}
.footer-logo {
display: flex;
justify-content: space-evenly;
}
.search-div {
top: 75px;
}
}
@media screen and (max-width: 768px) {
.header-container .user-actions {
display: none;
}
.header-container .tab-menu {
display: none;
}
.header-container .mob-menu {
display: block;
a {
padding: 5px 10px;
margin: 2px 5px;
text-decoration: none;
}
.item_arrow {
font-size: 11px;
margin: 0 0 0 5px;
}
.item {
font-size: 18px;
font-weight: 700;
padding: 5px 10px;
margin: 2px 5px;
cursor: pointer;
}
.sub_menu_item {
font-size: 16px;
font-weight: 700;
}
.mob_sub_menu {
display: none;
list-style-image: url(//www.fi-navigator.com/wp-content/uploads/2024/06/turn-down-right.png);
margin-left: 20px;
padding-left: 20px;
}
.mob_view {
display: flex;
justify-content: space-evenly;
padding-bottom: 10px;
}
.submenu_open .title {
color: #8cc63f;
}
} .header-container {  margin-right: 1rem;
margin-left: 1rem;
}
.search-div {
top: 320px;
right: 0;
width: 100%;
input {
width: 100%;
}
}
} .footer-section {
margin: 20px;
font-size: 14px;
margin-left: 4rem;
margin-right: 4rem;
}
.logo-on-newline {
display: none;
}
.logo-on-sameline {
display: block;
}
.footer-section .footer-top {
padding: 0 0 60px 0;
}
.footer-section ul li {
margin-bottom: 5px;
}
.footer-section .cta {
background-color: #8dc63f;
color: white !important;
padding: 8px 15px;
border-radius: 5px;
border: 1px solid #989898;
box-shadow: 1px 3px 3px rgb(158 156 156 / 39%);
}
.footer-section .custom-list {
padding-left: 0;
}
.footer-section .custom-list li {
margin-bottom: 0.5rem;
white-space: nowrap;
}
.header-container .mob-menu-selection .green-arrow,
.header-container .tab-menu-selection .green-arrow,
.footer-section .green-arrow {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
background-image: url(//www.fi-navigator.com/wp-content/uploads/2024/06/turn-down-right.png);
background-size: contain;
background-repeat: no-repeat;
}
.support-link {
opacity: 0.5;
color: #404041; } .footer-section .custom-list ul {
margin-top: 0.5rem;
margin-left: 15px;
}
.footer-section .custom-list ul li {
margin-bottom: 0.25rem;
font-size: 0.9em;
color: #666;
}
.social-icon {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 10px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.twitter-icon {
background-image: url(//www.fi-navigator.com/wp-content/uploads/2024/06/twitter.png);
}
.linkedin-icon {
background-image: url(//www.fi-navigator.com/wp-content/uploads/2024/06/linkedin-logo.png);
}
.social-icon:hover {
opacity: 0.8;
}
.mob-view {
display: none;
}
.md-view {
display: block;
}
@media (max-width: 1320px) {
.logo-on-newline {
display: block;
}
.logo-on-sameline {
display: none;
}
.footer-menu-spacing {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 20px !important;
}
.footer-top {
padding: 0px 0px;
}
}
@media (max-width: 960px) {
.footer-section {
font-size: 12px;
}
}
@media (max-width: 850px) {
.footer-section {
font-size: 14px;
margin-left: 1rem;
margin-right: 1rem;
.col-6 {
flex: 0 0 auto;
width: 50%;
}
.mob-view {
display: flex;
justify-content: space-evenly;
padding-bottom: 10px;
}
.md-view {
display: none;
}
.footer-btn {
margin: 1.5rem 0 1.5rem 0;
width: 100%;
}
.col-md-2 {
flex: 0 0 auto;
width: 100%;
}
.social-icon-link {
text-align: center;
margin-top: 20px;
}
.terms-link {
text-align: center;
}
}
}
@media screen and (max-width: 768px) {
.footer-section .footer-top {
padding: 30px 0;
}
.footer-section {
.social-icon-link {
text-align: center;
margin-top: 20px;
}
.terms-link {
text-align: center;
}
}
}