/*!   
 * Template Name: Velocity - Bootstrap 5 Template for Promoting Startup Products
 * Version: 2.4
 * Author: Xiaoying Riley
 * Copyright: 3rd Wave Media Ltd.
 * Website: http://themes.3rdwavemedia.com/
 * Twitter: @3rdwave_themes
 
*/body {
  font-family:'Roboto', arial, sans-serif;
  color:#666;
  font-size:17px
;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
p {
  margin-bottom:15px;
  line-height:1.5
}
a {
  color:#22394B
}
a:hover {
  text-decoration:underline;
  color:#9FC4A1;
  -webkit-transition:all 0.4s ease-in-out;
  -moz-transition:all 0.4s ease-in-out;
  -ms-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out
}
a:focus {
  text-decoration:none
}
a.text-link {
  text-decoration:none
}
a.text-link:hover {
  text-decoration:underline
}
a.btn {
  text-decoration:none
}
.btn,a.btn {
  font-weight:bold
}
.btn .svg-inline--fa,a.btn .svg-inline--fa {
  color:#fff;
  margin-right:5px
}
.btn:hover,a.btn:hover {
  -webkit-transition:all 0.4s ease-in-out;
  -moz-transition:all 0.4s ease-in-out;
  -ms-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out
}
.btn:focus,a.btn:focus {
  box-shadow:none
}
a.btn-cta,.btn-cta {
  padding:8px 30px
}
a.btn-cta-primary,.btn-cta-primary {
  background:#9FC4A1;
  border:2px solid #9FC4A1;
  color:#fff
}
a.btn-cta-primary:hover,.btn-cta-primary:hover {
  background:#CCE5CF;
  border:2px solid #CCE5CF;
  color:#fff
}
a.btn-cta-secondary,.btn-cta-secondary {
  background:#9FC4A1;
  border:2px solid #9FC4A1;
  color:#fff
}
a.btn-cta-secondary:hover,.btn-cta-secondary:hover {
  background:#CCE5CF;
  border:2px solid #CCE5CF;
  color:#fff
}
a.btn-ghost,.btn-ghost {
  background:9FC4A1;
  border:1px solid #9FC4A1;
  color:#fff !important;
  padding:8px 20px;
  vertical-align:middle
}
a.btn-ghost:hover,.btn-ghost:hover {
  background:#CCE5CF;
  border:1px solid #CCE5CF;
  color:#fff
}
a.btn-ghost .svg-inline--fa,.btn-ghost .svg-inline--fa {
  margin-right:10px;
  font-size:22px
}
a.btn-ghost .text,.btn-ghost .text {
  position:relative;
  top:-2px
}
.highlight {
  color:#CCE5CF
}
.form-control {
  box-shadow:none;
  height:40px;
  border-color:#eee
}
.form-control::-webkit-input-placeholder {
  color:#a6a6a6
}
.form-control:-moz-placeholder {
  color:#a6a6a6
}
.form-control::-moz-placeholder {
  color:#a6a6a6
}
.form-control:-ms-input-placeholder {
  color:#a6a6a6
}
.form-control:focus {
  border-color:#e1e1e1;
  box-shadow:none
}
textarea.form-control {
  height:auto
}
.text-highlight {
  color:#1b5c4f
}
.text-center {
  text-align: center;
}
.brand-blue {
  color: #22394B
}
input[type="text"],input[type="email"],input[type="password"],input[type="submit"],input[type="button"],textarea,select {
  -moz-appearance:none;
  appearance:none;
  -webkit-appearance:none
}
#back-to-top {
  background:#5d80a1;
  color:#fff;
  text-align:center;
  display:inline-block;
  width:35px;
  height:35px;
  border:none;
  border-radius:50%;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  -webkit-transition:all 0.4s ease-in-out;
  -moz-transition:all 0.4s ease-in-out;
  -ms-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out;
  z-index:30
}
#back-to-top:hover {
  background:#384d60
}
#back-to-top svg {
  margin-top:4px
}
.video-container iframe {
  max-width:100%
}
.header {
  color:#9FC4A1;
  width:100%;
  position:relative;
  z-index:40;
  height:80px
}
.header.scrolled {
  height:80px;
  top:0
}
.header.scrolled .main-nav .nav .nav-item a {
  color:#22394B;
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1
}
.header.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
  background:#9FC4A1;
  border-color:#9FC4A1
}
.header.scrolled .main-nav .nav .dropdown-menu a {
  color:#fff
}
.header h1.logo {
  font-family:"Roboto Slab", arial, sans-serif;
  margin-top:0;
  margin-bottom:0;
  font-weight:bold;
  font-size:16px;
  float:left
}
.header h1.logo a {
  color:#9FC4A1;
  padding:15px 30px;
  display:inline-block;
  text-align:center;
  line-height:1.4;
  max-width:155px;
  background:#212e3a;
  -webkit-border-top-right-radius:0;
  -webkit-border-bottom-right-radius:4px;
  -webkit-border-bottom-left-radius:4px;
  -webkit-border-top-left-radius:0;
  -moz-border-radius-topright:0;
  -moz-border-radius-bottomright:4px;
  -moz-border-radius-bottomleft:4px;
  -moz-border-radius-topleft:0;
  border-top-right-radius:0;
  border-bottom-right-radius:4px;
  border-bottom-left-radius:4px;
  border-top-left-radius:0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  -webkit-transition:color 0.4s ease-in-out;
  -moz-transition:color 0.4s ease-in-out;
  -ms-transition:color 0.4s ease-in-out;
  -o-transition:color 0.4s ease-in-out;
  position:relative;
  font-size:20px;
  text-decoration:none
}
.header h1.logo a:hover {
  text-decoration:none
}
.header h1.logo .logo-title {
  vertical-align:middle;
  line-height:1.6
}
.header .main-nav {
  padding:0;
  padding-top:15px;
  z-index:10
}
.header .main-nav .navbar-toggler {
  border:none;
  cursor:pointer;
  -webkit-opacity:.9;
  -moz-opacity:.9;
  opacity:.9;
  position:absolute;
  right:0px;
  top:-45px;
  padding:0
}
.header .main-nav .navbar-toggler:focus {
  outline:none;
  box-shadow:none
}
.header .main-nav .navbar-toggler:hover {
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1
}
.header .main-nav .navbar-toggler-icon {
  background:transparent url("../images/hamburger-icon.svg") no-repeat center center
}
.header .main-nav .navbar-collapse {
  padding:0 15px
}
.header .main-nav .nav .nav-item {
  font-weight:normal;
  text-transform:uppercase;
  font-size:15px;
  margin-right:15px
}
.header .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
  border:1px solid #9FC4A1;
  background:#9FC4A1
  color:#fff;
  padding:8px 10px;
  margin-top:5px;
  font-size:15px
}
.header .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary:hover {
  border:1px solid #CCE5CF;
  background:#CCE5CF
}
.header .main-nav .nav .nav-item .nav-link {
  color:#22394B;
  padding:15px;
  display:block;
  text-decoration:none
}
.header .main-nav .nav .nav-item .nav-link.active {
  color:#9FC4A1;
  background:none;
  font-weight:bold
}
.header .main-nav .nav .nav-item .nav-link:hover {
  color:#9FC4A1;
  background:none
}
.header .main-nav .nav .nav-item .nav-link:focus {
  outline:none;
  background:none
}
.header .main-nav .nav .nav-item .nav-link:active {
  outline:none;
  background:none
}
.header .main-nav .nav .nav-item .nav-link.dropdown-toggle:after {
  display:none
}
.header .main-nav .nav .nav-item.active {
  color:#9FC4A1
}
.header .main-nav .nav .nav-item.last {
  margin-right:0
}
.header .main-nav .nav .dropdown-menu {
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  margin:0;
  border:none;
  text-transform:none;
  min-width:180px;
  background:#253340
}
.header .main-nav .nav .dropdown-menu:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #253340;
  position:absolute;
  right:15px;
  top:-10px
}
.header .main-nav .nav .dropdown-menu a {
  border-bottom:1px solid #212e3a;
  padding:8px 20px;
  color:#fff;
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1;
  font-size:15px;
  text-decoration:none
}
.header .main-nav .nav .dropdown-menu a:hover {
  background:#2e4050;
  color:#fff
}
.nav .open>a,.nav .open>a:hover,.nav .open>a:focus {
  background:#9FC4A1
}
a.dropdown-toggle .svg-inline--fa {
  margin-left:5px
}
.dropdown:hover>.dropdown-menu {
  display:block
}
.bg-carousel-wrapper {
  content:"";
  position:absolute;
  width:100%;
  top:0;
  left:0;
  height:780px;
  background:#22394B
}
.bg-carousel-wrapper .bg-carousel {
  margin:0;
  box-shadow:none;
  border:none;
  border-radius:0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
}
.bg-carousel-wrapper .bg-carousel .slide {
  display:block;
  height:780px
}
.bg-carousel-wrapper .bg-carousel .slide.slide-1 {
  background:#253340 url("../images/background/bg-header-1.jpg") no-repeat 50% 50%;
  background-size:cover
}
.bg-carousel-wrapper .bg-carousel .slide.slide-2 {
  background:#253340 url("../images/background/bg-header-2.jpg") no-repeat 50% 50%;
  background-size:cover
}
.bg-carousel-wrapper .bg-carousel .slide.slide-3 {
  background:#253340 url("../images/background/bg-header-3.jpg") no-repeat 50% 50%;
  background-size:cover
}
.bg-carousel-wrapper .bg-carousel .flex-control-nav {
  z-index:30;
  bottom:30px;
  position:relative
}
.bg-carousel-wrapper .bg-carousel .flex-control-nav li a {
  background:#999
}
.bg-carousel-wrapper .bg-carousel .flex-control-nav li a.flex-active {
  background:#bfbfbf
}


/* === Headline Background Aligned to Top of Page === */
.headline-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 450px;
  top: 0;
  background-image: url("../images/background/bg-header-small-4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.headline-overlay {
  position: absolute;
  bottom: 140px; /* moves the title higher within the image */
  width: 100%;
  text-align: center;
}

.headline-title {
  font-family:'Roboto', arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: #22394B; /* Your brand blue */
  margin: 0;
}

@media (max-width: 768px) {
  /* === Headline Background Aligned to Top of Page === */
.headline-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 450px;
  top: 0;
  background-image: url("../images/background/bg-header-small-4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.headline-overlay {
  bottom: 120px; /* Try 130px or 140px if needed */
}

  .headline-title {
    font-size: 24px;
    padding: 0 10px;
  }
}
.headline-bg.about-headline-bg {
  background-image:url("../images/background/bg-header-small-4.jpg")
}
.headline-bg.sponsor-headline-bg {
  background-image:url("../images/background/bg-header-sponsor.jpg")
}
.headline-bg.tpa-headline-bg {
  background-image:url("../images/background/bg-header-tpa.jpg")
}
.headline-bg.advisor-headline-bg {
  background-image:url("../images/background/bg-header-advisor.jpg")
}
.headline-bg.transition-headline-bg {
  background-image:url("../images/background/bg-header-transition.jpg")
}
.headline-bg.succession-headline-bg {
  background-image:url("../images/background/bg-header-succession.jpg")
}
.headline-bg.contact-headline-bg {
  background-image:url("../images/background/bg-header-small-3.jpg")
}
.promo {
  padding-top:100px;
  position:relative;
  color:#9FC4A1;
  margin-bottom:80px;
  height:620px;
  z-index:10
}
.promo .title {
  font-size:55px;
  margin-bottom:20px;
  margin-top:0;
  font-weight: 450;
  text-shadow:0 2px 2px rgba(0,0,0,0.5)
}
.promo.section .intro {
  max-width:600px;
  margin:0 auto;
  margin-bottom:30px
}
.promo .btn-cta {
  font-size:25px
}
.promo .btn-link {
  color:#212e3a;
  font-weight:bold;
  text-transform:uppercase;
  font-size:12px;
  -webkit-opacity:.7;
  -moz-opacity:.7;
  opacity:.7;
  text-decoration:none;
  border:none;
  background:none
}
.promo .btn-link:hover {
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1;
  text-decoration:none
}
.promo .btn-link:focus {
  outline:none
}
.promo .btn-link .svg-inline--fa {
  margin-right:5px;
  font-size:18px;
  position:relative;
  top:2px
}

@media (max-width: 768px) {
  section.section.bg-white.py-2.mb-0 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  section.section .intro {
    font-size: 24px !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
}


.sections-wrapper {
  background:#fff;
  z-index:20;
  position:relative
}
.section .intro {
  max-width:700px;
  margin:0 auto;
  margin-bottom:60px;
  text-align:center;
  color:#999;
  font-size:28px
}
.section-on-bg .title {
  color:#22394B
}
.section-on-bg .intro {
  color:#22394B;
  -webkit-opacity:.8;
  -moz-opacity:.8;
  opacity:.8
}
.why {
  padding-top:80px;
  padding-bottom:80px
}
.why .title {
  font-size:36px;
  font-weight:300;
  margin-top:0
}
.why .intro {
  color:#999;
  margin-bottom:30px;
  font-size:18px
}
.why .item {
  padding:90px 0;
  border-bottom:1px solid #eee
}
.why .item.last-item {
  border-bottom:none
}
.why .item .title {
  font-size:26px;
  color:#4a6781;
  margin-top:0;
  margin-bottom:15px
}
.why .item .desc {
  margin-bottom:60px
}
.why .item .desc .svg-inline--fa {
  margin-right:5px
}
.why .item .quote {
  position:relative
}
.why .item .quote .quote-profile {
  position:absolute;
  left:0
}
.why .item .quote .quote-content {
  margin-left:90px;
  background:#f5f5f5;
  border-left:4px solid #e8e8e8;
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  font-size:14px;
  padding:15px
}
.why .item .quote .quote-content:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:10px solid #e8e8e8;
  position:absolute;
  left:80px;
  top:25px
}
.why .item .quote blockquote {
  border-left:none;
  font-style:italic;
  color:#22394B;
  font-size:16px;
  padding:0;
  margin-bottom:10px
}
.why .item .quote .source {
  color:#999;
  font-size:13px;
  margin-bottom:0
}
.why .item .quote .source a {
  color:#999
}
.why .item .quote .source a:hover {
  color:gray
}
.why .figure {
  position:relative;
  text-align:center
}
.why .figure .figure-caption {
  color:#b3b3b3;
  font-size:13px;
  margin-top:10px;
  text-align:center
}
.why .figure .figure-caption a {
  color:#b3b3b3
}
.why .figure .figure-caption a:hover {
  color:#9FC4A1
}
.why .figure img {
  margin-left:auto;
  margin-right:auto
}
.why .control {
  position:absolute;
  top:120px;
  left:50%;
  margin-left:-65px
}
.why .control .video-play-trigger {
  color:#fff;
  background:rgba(0,0,0,0.3);
  position:relative;
  width:60px;
  height:60px;
  border:2px solid #fff;
  border-radius:50%;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  margin:0 auto;
  text-align:center;
  -webkit-opacity:.9;
  -moz-opacity:.9;
  opacity:.9;
  -webkit-transition:all 0.4s ease-in-out;
  -moz-transition:all 0.4s ease-in-out;
  -ms-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out
}
.why .control .video-play-trigger:active,.why .control .video-play-trigger:focus {
  outline:none
}
.why .control .video-play-trigger:hover {
  color:#fff;
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1;
  background:rgba(0,0,0,0.6)
}
.why .control .video-play-trigger:hover .svg-inline--fa {
  cursor:pointer
}
.why .control .video-play-trigger .svg-inline--fa {
  font-size:19px;
  position:relative;
  top:2px;
  left:1px
}
.why .feature-lead .title {
  font-weight:300;
  font-size:18px;
  margin-bottom:15px
}
.testimonials {
  background:#f5f5f5;
  padding-top:60px;
  padding-bottom:120px
}
.testimonials .carousel-indicators {
  bottom:-60px;
  z-index:auto
}
.testimonials .carousel-indicators button {
  background:#ccc;
  border:none;
  margin-right:5px;
  margin-left:5px;
  border:none;
  width:10px;
  height:10px;
  border-radius:50%;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
}
.testimonials .carousel-indicators button.active {
  background:#6ed5c0;
  border:none
}
.testimonials .title {
  font-size:36px;
  font-weight:300;
  margin-top:0;
  margin-bottom:60px
}
.testimonials .item .profile {
  position:absolute;
  left:0
}
.testimonials .item .content {
  padding-left:210px
}
.testimonials .item blockquote {
  padding:0;
  font-size:20px;
  font-weight:300;
  border-left:0;
  padding:0;
  position:relative
}
.testimonials .item blockquote .svg-inline--fa {
  position:absolute;
  color:#5bcfb8;
  font-size:22px;
  left:-45px
}
.testimonials .item .source {
  color:#9FC4A1
}
.testimonials .item .source .title {
  font-size:16px;
  color:#666
}
.press {
  padding-top:80px;
  padding-bottom:80px
}
.press .title {
  font-size:36px;
  font-weight:300;
  margin-top:0;
  margin-bottom:60px
}
.press .press-list {
  margin-bottom:15px;
  text-align:center
}
.press .press-list a:hover img {
  -webkit-opacity:.7;
  -moz-opacity:.7;
  opacity:.7
}
.press .press-list img {
  -webkit-opacity:.5;
  -moz-opacity:.5;
  opacity:.5
}
.press .press-lead .title {
  font-size:18px;
  margin-bottom:15px
}
.cta-section {
  background:#253340 url("../images/background/bg-footer-1.jpg") no-repeat left top;
  background-size:cover;
  color:#fff;
  padding-top:80px;
  padding-bottom:80px;
  border:none
}
.cta-section.pricing-cta-section {
  background-image:url("../images/background/bg-footer-2.jpg")
}
.cta-section.contact-cta-section {
  background-image:url("../images/background/bg-footer-3.jpg")
}
.cta-section .title {
  font-size:36px;
  font-weight:300;
  margin-top:0;
  margin-bottom:45px
}
.cta-section .btn-cta {
  font-size:20px
}
.cta-section .intro {
  margin-bottom:15px;
  color:#fff
}
.cta-section .counting {
  color:#9FC4A1;
  font-weight:bold;
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1
}
.features-video {
  padding-top:170px;
  position:relative;
  z-index:10
}
.features-video .title {
  font-size:36px;
  margin-bottom:60px;
  margin-top:0;
  color:#fff;
  font-weight:300
}
.features-video .video-container {
  max-width:800px;
  margin:0 auto
}
.features-video iframe {
  background:#fff;
  padding:15px;
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  border:1px solid #eee;
  box-shadow:0 4px 1px rgba(0,0,0,0.05)
}
.features-tabbed {
  padding-top:80px;
  padding-bottom:80px
}
.features-tabbed .title {
  font-size:36px;
  font-weight:300;
  margin-top:0;
  margin-bottom:60px
}
.features-tabbed .tab-content {
  padding:60px 30px
}
.features-tabbed .tab-content .title {
  font-size:16px;
  color:#6ed5c0;
  font-weight:bold;
  margin-bottom:30px
}
.features-tabbed .tab-content .desc {
  margin-bottom:30px;
  color:#666
}
.features-tabbed .tab-content .desc ul {
  padding-left:30px;
  padding-top:15px;
  padding-bottom:15px
}
.features-tabbed .tab-content .desc ul li {
  margin-bottom:10px
}
.features-tabbed .tab-content .desc ul .svg-inline--fa {
  color:#9FC4A1;
  margin-right:5px
}
.features-tabbed .tab-content .desc blockquote {
  font-style:italic;
  color:gray
}
.features-tabbed .tab-content .desc .table {
  font-size:14px;
  padding:15px 0
}
.features-tabbed .tab-content .desc .box {
  background:#f5f5f5;
  padding:30px;
  font-size:14px
}
.features-tabbed .tab-content .figure {
  margin-bottom:60px
}
.features-tabbed .tab-content .figure img {
  box-shadow:0px 0px 5px 0px rgba(0,0,0,0.2);
  margin:0 auto
}
.features-tabbed .tab-content .figure .figure-caption {
  color:#b3b3b3;
  font-size:13px;
  margin-top:10px;
  text-align:center
}
.features-tabbed .tab-content .figure .figure-caption a {
  color:#b3b3b3
}
.features-tabbed .tab-content .figure .figure-caption a:hover {
  color:#9FC4A1
}
.nav-tabs {
  border:none;
  margin:0 auto;
  display:flex;
  text-align:center;
  position:relative
}
.nav-tabs:before {
  content:"";
  display:block;
  border-bottom:1px solid #eee;
  position:absolute;
  bottom:0
}
.nav-tabs .nav-item {
  margin-bottom:-1px;
  position:relative;
  z-index:1;
  background:#fff;
  flex:1;
  border:1px solid #eee;
  border-right:none;
  border-bottom:none
}
.nav-tabs .nav-item .nav-link {
  border-radius:0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  margin-right:0px;
  color:#999;
  padding:15px 30px;
  font-size:15px;
  background:#fafafa;
  border:none;
  border-bottom:1px solid #eee;
  color:#22394B;
  background:#fff
}
.nav-tabs .nav-item .nav-link:hover,.nav-tabs .nav-item .nav-link:focus {
  color:#22394B
}
.nav-tabs .nav-item .nav-link.active {
  box-shadow:inset 0 3px 0 #9FC4A1;
  border-bottom-color:#fff;
  color:#9FC4A1
}
.nav-tabs .nav-item .nav-link.active:hover {
  color:#CCE5CF;
  background:none
}
.nav-tabs .nav-item .nav-link .svg-inline--fa {
  font-size:20px
}
.nav-tabs .nav-item .nav-link:hover {
  background:#f5f5f5;
  text-decoration:none
}
.nav-tabs .nav-item.last {
  border-right:1px solid #eee
}
.steps {
  background:#f5f5f5;
  padding-top:80px;
  padding-bottom:120px
}
.steps .title {
  font-size:36px;
  font-weight:300;
  margin-top:0;
  margin-bottom:60px
}
.steps .step {
  padding:30px 60px;
  color:#666
}
.steps .step .title {
  text-align:center;
  font-size:16px;
  margin-bottom:15px
}
.steps .step .title .number {
  width:90px;
  height:90px;
  display:block;
  border-radius:50%;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  text-align:center;
  background:#9FC4A1;
  border:5px solid #6ed5c0;
  color:#fff;
  margin:0 auto;
  padding-top:25px;
  font-size:26px;
  font-weight:bold;
  font-family:arial, sans-serif;
  margin-bottom:30px
}
.steps .step .title .text {
  color:#6ed5c0;
  font-weight:bold;
  font-size:16px
}
.steps .btn-cta-primary {
  margin:0 auto;
  margin-top:60px;
  font-size:20px
}
.pricing {
  padding:80px 0;
  padding-top:170px;
  position:relative;
  z-index:10
}
.pricing .price-cols {
  max-width:85%
}
.pricing .title {
  font-size:36px;
  font-weight:300;
  margin-top:0;
  margin-bottom:30px;
  color:#fff
}
.pricing .intro {
  color:#fff;
  margin-bottom:80px
}
.pricing .item {
  padding:0;
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  margin-bottom:30px
}
.pricing .item.best-buy {
  top:-15px;
  z-index:11;
  position:relative
}
.pricing .item.best-buy .item-inner {
  box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2)
}
.pricing .item.best-buy .item-inner:hover {
  box-shadow:0px 0px 20px 0px rgba(0,0,0,0.25)
}
.pricing .item.best-buy .heading {
  padding-top:45px
}
.pricing .item.best-buy .content {
  padding-bottom:45px
}
.pricing .item .item-inner {
  background:#fff;
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  position:relative;
  border:1px solid #eee;
  box-shadow:0 4px 1px rgba(0,0,0,0.05)
}
.pricing .item .item-inner:hover {
  box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2)
}
.pricing .item .heading {
  margin-top:0;
  padding:30px 15px;
  -webkit-border-top-right-radius:4px;
  -webkit-border-bottom-right-radius:0;
  -webkit-border-bottom-left-radius:0;
  -webkit-border-top-left-radius:4px;
  -moz-border-radius-topright:4px;
  -moz-border-radius-bottomright:0;
  -moz-border-radius-bottomleft:0;
  -moz-border-radius-topleft:4px;
  border-top-right-radius:4px;
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
  border-top-left-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
}
.pricing .item .heading .title {
  margin-bottom:30px;
  padding-bottom:30px;
  font-weight:400;
  font-size:18px;
  border-bottom:1px dashed #eee;
  color:#444
}
.pricing .item .content {
  padding:30px 15px;
  padding-top:0;
  font-size:14px
}
.pricing .item .price-figure {
  border-radius:50%;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  margin:0 auto
}
.pricing .item .price-figure .number {
  font-size:42px;
  font-weight:bold
}
.pricing .item .price-figure .unit {
  font-weight:400;
  color:#b3b3b3
}
.pricing .item .price-figure .currency {
  top:-12px;
  right:2px;
  position:relative;
  font-family:arial, sans-serif;
  color:#666;
  font-size:18px
}
.pricing .item .ribbon {
  position:absolute;
  top:-6px;
  right:-6px;
  width:110px;
  height:110px;
  overflow:hidden
}
.pricing .item .ribbon .text {
  position:relative;
  left:-8px;
  top:18px;
  width:158px;
  padding:10px 10px;
  font-size:15px;
  font-weight:bold;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
  background-color:#5d80a1;
  -webkit-transform:rotate(45deg) translate3d(0, 0, 0);
  -moz-transform:rotate(45deg) translate3d(0, 0, 0);
  -ms-transform:rotate(45deg) translate3d(0, 0, 0);
  -o-transform:rotate(45deg) translate3d(0, 0, 0)
}
.pricing .item .ribbon .text:before,.pricing .item .ribbon .text:after {
  content:'';
  position:absolute;
  bottom:-5px;
  border-top:5px solid #2e4050;
  border-left:5px solid transparent;
  border-right:5px solid transparent
}
.pricing .item .ribbon .text:before {
  left:0
}
.pricing .item .ribbon .text:after {
  right:0
}
.pricing .item .feature-list {
  margin-bottom:30px
}
.pricing .item .feature-list li {
  border-bottom:1px solid #f3f3f3;
  padding:10px
}
.pricing .item .feature-list li .svg-inline--fa {
  margin-right:5px;
  color:#4a6781
}
.pricing .item .feature-list li.disabled {
  color:#999
}
.pricing .item .feature-list li.disabled .svg-inline--fa {
  color:#999
}
.download-page /* === Headline Background Aligned to Top of Page === */
.headline-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 450px;
  top: 0;
  background-image: url("../images/background/bg-header-small-4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.apps-section {
  max-width:1000px;
  margin:0 auto;
  position:relative;
  z-index:10
}
.apps-section .title {
  font-size:36px;
  font-weight:300;
  margin-top:0;
  margin-bottom:15px;
  color:#fff
}
.apps-section .intro {
  text-align:left;
  margin-bottom:30px
}
.apps-section .phone-mockup-holder .phone-mockup {
  width:360px
}
.apps-section .content-area .download-list li {
  margin-bottom:15px
}
.apps-section .content-area .download-list li .btn {
  width:260px;
  text-align:left
}
.apps-section .content-area .info {
  margin-top:60px;
  margin-bottom:60px;
  background:rgba(31,51,64,0.8);
  padding:30px;
  color:#fff;
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
}
.apps-section .content-area .info .title {
  font-size:24px;
  font-weight:normal
}
.faq {
  background:#f5f5f5;
  padding-top:80px;
  padding-bottom:120px
}
.faq .title {
  font-size:36px;
  font-weight:300;
  margin-top:0;
  margin-bottom:60px
}
.faq .faq-accordion {
  max-width:860px
}
.faq .accordion-item {
  background:#fff;
  box-shadow:0 4px 1px rgba(0,0,0,0.05);
  border:none;
  margin-bottom:20px
}
.faq .accordion-item:hover {
  box-shadow:0 4px 1px rgba(0,0,0,0.1)
}
.faq .accordion-item .accordion-header {
  padding:15px 30px;
  background:none;
  border:none
}
.faq .accordion-item .accordion-body {
  padding:30px;
  padding-top:0;
  color:#666
}
.faq .accordion-item .accordion-button {
  box-shadow:none;
  font-size:16px;
  font-weight:500;
  padding:0;
  text-decoration:none;
  color:#666
}
.faq .accordion-item .accordion-button .svg-inline--fa {
  margin-right:10px;
  color:#6ed5c0
}
.faq .accordion-item .accordion-button[aria-expanded="true"] {
  color:#9FC4A1
}
.faq .accordion-item .accordion-button[aria-expanded="true"] .svg-inline--fa {
  color:#9FC4A1
}
.faq .accordion-item .accordion-button:hover .svg-inline--fa {
  color:#9FC4A1
}
.faq .accordion-item .accordion-button:after {
  display:none
}
.faq .contact-lead {
  margin-top:60px
}
.faq .contact-lead .title {
  font-weight:400;
  font-size:18px;
  margin-bottom:15px;
  color:#999
}
.contact-section {
  padding:20px 0;
  padding-top:20px;
  position:relative;
  z-index:10
}
.contact-section .title {
  font-size:28px;
  font-weight:200;
  margin-top:0;
}
.contact-section .intro {
  margin-bottom:0px
}
.contact-section .contact-form {
  margin-left:15px;
  margin-right:15px
}
.contact-section .contact-form .contact-form-inner {
  background:#f1ece7;
  padding:30px;
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  border:1px solid #eee;
  box-shadow:0 4px 1px rgba(0,0,0,0.05)
}
.contact-section .contact-form .error {
  color:#9FC4A1;
  font-family:arial, sans-serif;
  display:block;
  font-size:14px;
  text-align:left;
  padding-top:5px;
  padding-left:5px;
  font-weight:300
}
.contact-other-section .title {
  font-size:36px;
  font-weight:300;
  margin-top:0;
  margin-bottom:30px
}
.contact-other-section .other-info li {
  margin-bottom:15px;
  padding:15px;
  position:relative;
  color:#666;
  text-align:left;
  padding-left:90px;
  box-shadow:0 4px 1px rgba(0,0,0,0.05);
  border:1px solid #eee;
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
}
.contact-other-section .other-info li a {
  color:#666
}
.contact-other-section .other-info li a:hover {
  color:#CCE5CF
}
.contact-other-section .other-info li .icon-holder {
  position:absolute;
  left:0;
  top:0;
  background:#CCE5CF;
  color:#fff;
  width:60px;
  height:100%;
  font-size:20px;
  padding-top:12px;
  text-align:center;
  -webkit-border-top-right-radius:0;
  -webkit-border-bottom-right-radius:0;
  -webkit-border-bottom-left-radius:4px;
  -webkit-border-top-left-radius:4px;
  -moz-border-radius-topright:0;
  -moz-border-radius-bottomright:0;
  -moz-border-radius-bottomleft:4px;
  -moz-border-radius-topleft:4px;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border-bottom-left-radius:4px;
  border-top-left-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
}
.map-section {
  padding-top:80px;
  padding-bottom:80px
}
.map-section .title {
  font-size:36px;
  font-weight:300;
  margin-top:0;
  margin-bottom:30px
}
.map-section .gmap-wrapper {
  border:1px solid #eee;
  position:relative;
  padding-bottom:40%;
  height:0;
  overflow:hidden
}
.map-section .gmap-wrapper iframe {
  position:absolute;
  top:0;
  left:0;
  width:100% !important;
  height:100% !important
}
.blog-carousel {
  margin-bottom:20px;
  margin-top:80px;
  border:none;
  height:400px;
  border-radius:0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  box-shadow:none
}
.blog-carousel .carousel-item {
  display:block;
  height:400px;
  background-color:#253340
}
.blog-carousel .carousel-item:after {
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.55);
  z-index:10
}
.blog-carousel .carousel-item.slide-1 {
  background:#253340 url("../images/blog/post-1.jpg") no-repeat 50% top;
  background-size:cover
}
.blog-carousel .carousel-item.slide-2 {
  background:#253340 url("../images/blog/post-2.jpg") no-repeat 50% top;
  background-size:cover
}
.blog-carousel .carousel-item.slide-3 {
  background:#253340 url("../images/blog/post-3.jpg") no-repeat 50% top;
  background-size:cover
}
.blog-carousel .carousel-item.slide-4 {
  background:#253340 url("../images/blog/post-4.jpg") no-repeat 50% top;
  background-size:cover
}
.blog-carousel .carousel-indicators {
  bottom:15px
}
.blog-carousel .carousel-indicators button {
  width:10px;
  height:10px;
  border:none;
  background:#5e5e5e;
  -webkit-opacity:.8;
  -moz-opacity:.8;
  opacity:.8;
  border-radius:50%;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  margin-left:5px;
  margin-right:5px
}
.blog-carousel .carousel-indicators button.active,.blog-carousel .carousel-indicators button:hover {
  background:#fff
}
.blog-carousel .carousel-control-prev-icon {
  background-image:url("../images/slider/carousel-arrow-prev.png");
  width:30px;
  height:50px
}
.blog-carousel .carousel-control-next-icon {
  background-image:url("../images/slider/carousel-arrow-next.png");
  width:30px;
  height:50px
}
.blog-carousel .carousel-item-content {
  padding-top:90px;
  position:relative;
  z-index:20;
  text-align:center;
  color:#fff
}
.blog-carousel .carousel-item-content a {
  color:#fff;
  text-decoration:none
}
.blog-carousel .carousel-item-content .title {
  font-size:42px;
  text-align:center;
  max-width:800px;
  margin:0 auto;
  margin-bottom:15px;
  margin-top:0
}
.blog-carousel .carousel-item-content .title a:hover {
  text-decoration:none
}
.blog-carousel .carousel-item-content .meta {
  -webkit-opacity:.6;
  -moz-opacity:.6;
  opacity:.6;
  margin-bottom:30px
}
.blog-carousel .carousel-item-content a.more-link {
  color:#fff
}
.blog-carousel .carousel-item-content a.more-link:hover {
  color:#CCE5CF
}
.blog-nav .nav-item {
  position:relative
}
.blog-list .post {
  padding:0 15px;
  margin-bottom:30px
}
.blog-list .post .post-inner {
  padding:0px;
  position:relative;
  border:1px solid #eee;
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  box-shadow:0 4px 1px rgba(0,0,0,0.05)
}
.blog-list .post .post-thumb {
  background:#253340;
  overflow:hidden;
  -webkit-border-top-right-radius:4px;
  -webkit-border-bottom-right-radius:0;
  -webkit-border-bottom-left-radius:0;
  -webkit-border-top-left-radius:4px;
  -moz-border-radius-topright:4px;
  -moz-border-radius-bottomright:0;
  -moz-border-radius-bottomleft:0;
  -moz-border-radius-topleft:4px;
  border-top-right-radius:4px;
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
  border-top-left-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  margin-bottom:0
}
.blog-list .post .post-thumb img {
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  -webkit-border-top-right-radius:4px;
  -webkit-border-bottom-right-radius:0;
  -webkit-border-bottom-left-radius:0;
  -webkit-border-top-left-radius:4px;
  -moz-border-radius-topright:4px;
  -moz-border-radius-bottomright:0;
  -moz-border-radius-bottomleft:0;
  -moz-border-radius-topleft:4px;
  border-top-right-radius:4px;
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
  border-top-left-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  margin:0 auto;
  text-align:center
}
.blog-list .post .post-thumb img:hover {
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  -ms-transform:scale(1.1);
  -o-transform:scale(1.1);
  -webkit-opacity:.6;
  -moz-opacity:.6;
  opacity:.6;
  -webkit-transition:all 0.4s ease-in-out;
  -moz-transition:all 0.4s ease-in-out;
  -ms-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out
}
.blog-list .post .content {
  padding:30px;
  padding-bottom:15px;
  color:#666
}
.blog-list .post .content .post-title {
  margin-top:0;
  font-size:18px
}
.blog-list .post .content .post-title a {
  color:#253340;
  text-decoration:none
}
.blog-list .post .content .post-title a:hover {
  text-decoration:underline
}
.blog-list .post .content .post-entry {
  margin-bottom:15px
}
.blog-list .post .content .meta {
  font-size:13px;
  color:#999;
  margin-bottom:0
}
.blog-list .post .content .meta ul {
  margin-left:0;
  border-top:1px solid #eee;
  padding-top:15px;
  margin-bottom:0
}
.blog-list .post .content .meta li:first-child {
  padding-left:0
}
.blog-list .post .content .meta li .svg-inline--fa {
  margin-right:5px
}
.blog-list .post .content .meta li a {
  color:#999;
  text-decoration:none
}
.blog-list .post .content .meta li a:hover {
  color:#CCE5CF;
  text-decoration:underline
}
.blog-list .post .content .read-more {
  text-decoration:none
}
.blog-list .post .content .read-more:hover {
  text-decoration:underline
}
.blog-entry-wrapper {
  padding-bottom:80px
}
.blog-entry-wrapper .blog-entry .blog-entry-heading {
  margin-bottom:60px;
  position:relative;
  height:500px;
  background:#253340 url("../images/blog/post-2.jpg") no-repeat 50% top;
  background-size:cover;
  color:#fff
}
.blog-entry-wrapper .blog-entry .blog-entry-heading:after {
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:10
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .container {
  position:relative;
  z-index:11;
  max-width:700px;
  padding-left:30px;
  padding-right:30px;
  padding-top:120px
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .title {
  margin-bottom:30px;
  font-size:42px
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .meta {
  font-size:18px;
  -webkit-opacity:.8;
  -moz-opacity:.8;
  opacity:.8
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .meta a {
  color:#fff;
  text-decoration:none
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .meta a:hover {
  color:#fff;
  text-decoration:underline
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .meta .svg-inline--fa {
  margin-right:5px
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .post-nav-top {
  position:absolute;
  z-index:11;
  width:100%;
  bottom:0px;
  background:rgba(0,0,0,0.5);
  padding:15px 30px;
  margin-bottom:0;
  font-size:14px
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .post-nav-top a {
  color:#fff;
  -webkit-opacity:.6;
  -moz-opacity:.6;
  opacity:.6
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .post-nav-top a:hover {
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1
}
.blog-entry-wrapper .blog-entry .blog-entry-content {
  font-size:18px;
  line-height:1.6;
  color:#666
}
.blog-entry-wrapper .blog-entry .blog-entry-content h1,.blog-entry-wrapper .blog-entry .blog-entry-content h2,.blog-entry-wrapper .blog-entry .blog-entry-content h3,.blog-entry-wrapper .blog-entry .blog-entry-content h4,.blog-entry-wrapper .blog-entry .blog-entry-content h5,.blog-entry-wrapper .blog-entry .blog-entry-content h6 {
  color:#4a6781
}
.blog-entry-wrapper .blog-entry .blog-entry-content h1.section-heading,.blog-entry-wrapper .blog-entry .blog-entry-content h2.section-heading,.blog-entry-wrapper .blog-entry .blog-entry-content h3.section-heading,.blog-entry-wrapper .blog-entry .blog-entry-content h4.section-heading,.blog-entry-wrapper .blog-entry .blog-entry-content h5.section-heading,.blog-entry-wrapper .blog-entry .blog-entry-content h6.section-heading {
  margin-top:60px;
  margin-bottom:30px
}
.blog-entry-wrapper .blog-entry .blog-entry-content p {
  margin-bottom:30px
}
.blog-entry-wrapper .blog-entry .blog-entry-content ul,.blog-entry-wrapper .blog-entry .blog-entry-content ol {
  margin-bottom:30px
}
.blog-entry-wrapper .blog-entry .blog-entry-content ul li,.blog-entry-wrapper .blog-entry .blog-entry-content ol li {
  margin-bottom:15px
}
.blog-entry-wrapper .blog-entry .blog-entry-content .figure {
  margin-bottom:30px
}
.blog-entry-wrapper .blog-entry .blog-entry-content .figure .figure-caption {
  font-size:16px;
  color:#999;
  margin-top:10px
}
.blog-entry-wrapper .blog-entry .blog-entry-content .figure .figure-caption a {
  color:#999
}
.blog-entry-wrapper .blog-entry .blog-entry-content .figure .figure-caption a:hover {
  color:#CCE5CF
}
.blog-entry-wrapper .blog-entry .blog-entry-content .custom-list-style {
  margin-bottom:30px
}
.blog-entry-wrapper .blog-entry .blog-entry-content .custom-list-style li {
  list-style:none;
  margin-bottom:5px
}
.blog-entry-wrapper .blog-entry .blog-entry-content .custom-list-style li .svg-inline--fa {
  margin-right:10px;
  color:#9FC4A1
}
.blog-entry-wrapper .blog-entry .post-nav {
  margin-bottom:60px;
  margin-top:60px
}
.blog-entry-wrapper .blog-entry .post-nav .nav-next {
  float:right
}
.blog-entry-wrapper .blog-entry .post-nav .nav-next .svg-inline--fa {
  margin-left:5px
}
.blog-entry-wrapper .blog-entry .post-nav .nav-previous .svg-inline--fa {
  margin-right:5px
}
.blog-entry-wrapper .custom-quote {
  border:none;
  padding:60px 30px;
  font-family:'Roboto slab', serif;
  font-weight:300;
  font-style:italic;
  font-size:20px
}
.blog-entry-wrapper .custom-quote p {
  color:#666;
  line-height:1.6
}
.blog-entry-wrapper .custom-quote .svg-inline--fa {
  color:#9FC4A1;
  margin-right:10px
}
.blog-entry-wrapper .custom-quote .source {
  font-family:"Roboto", sans-serif;
  font-style:normal;
  font-weight:normal;
  margin-bottom:0 !important;
  font-size:16px;
  text-align:right
}
.blog-entry-wrapper .custom-quote .source .svg-inline--fa {
  margin-right:5px
}
.blog-entry-wrapper .custom-quote .source .name {
  color:#444
}
.blog-entry-wrapper .custom-quote .source .title {
  font-size:16px;
  color:#999
}
.blog-entry-wrapper .box {
  padding:30px;
  background:#f5f5f5
}
.blog-page .header-blog {
  position:fixed;
  top:0;
  box-shadow:0 0 4px rgba(0,0,0,0.5);
  background:#fff;
  height:80px
}
.blog-page .header-blog .main-nav .nav .nav-item a {
  color:#666
}
.blog-page .header-blog .main-nav .nav .nav-item a:hover {
  color:#CCE5CF
}
.blog-page .header-blog .main-nav .nav .dropdown-menu a {
  color:#fff
}
.blog-page .header-blog h1.logo {
  position:relative;
  z-index:10
}
.blog-page .header-blog h1.logo a {
  max-width:inherit;
  background:none;
  color:#9FC4A1;
  padding-left:0;
  padding-top:25px
}
.blog-page .header-blog h1.logo a .sub {
  font-family:"Roboto", arial, sans-serif;
  color:#253340;
  font-weight:300
}
.blog-page .header-blog .main-nav .nav .nav-item.last {
  margin-right:40px
}
.blog-page .header-blog .main-nav .nav .nav-item.last .svg-inline--fa {
  font-size:16px;
  margin-right:5px
}
.blog-category {
  margin-top:160px
}
.blog-category .page-title {
  margin-top:0;
  margin-bottom:60px;
  font-weight:300;
  font-size:36px;
  padding-top:80px
}
.blog-category .page-title .svg-inline--fa {
  color:#384d60;
  margin-right:10px;
  font-size:30px
}
.blog-category .blog-list .post .content .post-title {
  font-size:24px
}
.blog-category .blog-list .post .content .meta ul {
  border-top:none;
  border-bottom:1px solid #eee;
  padding-bottom:15px;
  padding-top:5px
}
.blog-category .blog-category-list .post {
  margin-bottom:60px
}
.blog-archive .blog-list .post .content {
  padding-left:80px
}
.blog-archive .post {
  position:relative
}
.blog-archive .post .date-label {
  background:#f5f5f5;
  display:inline-block;
  width:50px;
  height:60px;
  text-align:center;
  font-size:13px;
  position:absolute;
  left:15px;
  top:30px;
  color:#fff
}
.blog-archive .post .date-label .month {
  background:#253340;
  display:block;
  font-size:13px;
  text-transform:uppercase;
  padding:2px 0
}
.blog-archive .post .date-label .date-number {
  clear:left;
  display:block;
  padding-top:5px;
  font-size:18px;
  font-family:'open sans', arial, sans-serif;
  font-weight:500;
  color:#253340
}

.story-section {
  position: relative;
  top: -60px;
  z-index: 2;
  margin-bottom: -140px; 
  background-color: #f5f7f9;
}

.story-section .title {
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 40px;
  color: #22394B;
}

.story-container-inner {
position: relative;
  top: -140px;
  max-width: 960px;
  margin: 0 auto;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  text-align: left;
}

.story-section .about p {
  font-size: 20px;
  color: #22394B;
  line-height: 1.2;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .story-container-inner {
    top: -20px;
    padding: 20px;
    margin-bottom: 60px; /* Add this to push it above the footer */
  }
}

.team-title {
  font-size: 28px;
  font-weight: 500;
  color: #253340;
  margin-top: 40px;
  margin-bottom: 30px;
  text-align: center;
}

.member {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.member-inner {
  background: #253340;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: #ffffff;
  margin-bottom: 30px;
}

.profile img {
  max-width: 160px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.profile .info {
  font-size: 20px;
}

.name {
  font-weight: 600;
  font-size: 24px;
  display: block;
}

.job-title {
  color: #9FC4A1;
  font-size: 20px;  
  font-weight: 400; 
  display: block;
  margin-top: -20px;    
  margin-bottom: 6px;  
}

.social-list a {
  background-color: #9FC4A1;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.social-list a:hover {
  background-color: #CCE5CF;
}

.press-kit {
  text-align: center;
  margin-top: 20px;
}

.belief {
  font-family:'Roboto', arial, sans-serif;
  font-style: italic;
  font-size: 22px;
  color: #666;
  border-left: 5px solid #CCE5CF;
  border-right: 5px solid #CCE5CF;
  padding-left: 10px;
}

.bio-details {
  font-size: 15px;
  color: #d1d1d1;
  margin-top: 10px;
  line-height: 1.2;
}

.bio-details strong {
  color: #ffffff;
}
.bio-details p {
  margin-bottom: 4px;
}

.bio-details.memberships {
  font-size: 15px;
  color: #CCE5CF;
  text-align: left;
  margin-top: 10px;
}

.bio-details.memberships ul {
  list-style-type: none;
  padding: 0;
}

.bio-details.memberships li {
  margin-bottom: 4px;
  font-size: 15px;
  color: #CCE5CF; /* Optional: Match the greenish color of the "licensed" text */
}


.modal.modal-video .modal-dialog {
  margin-top:90px
}
.modal.modal-video .modal-body {
  padding:0;
  padding-top:0
}
.modal.modal-video .modal-header {
  border:none;
  padding:0;
  position:relative
}
.modal.modal-video .modal-content {
  background:none;
  border:none;
  box-shadow:none
}
.modal.modal-video button.btn-close {
  font-size:36px;
  font-weight:300;
  text-shadow:none;
  color:#fff;
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1;
  background:none;
  position:absolute;
  right:0px;
  bottom:20px;
  z-index:10;
  border:none;
  padding:0
}
.modal.modal-video button.btn-close:hover {
  color:#9FC4A1;
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1
}
.modal.modal-video button.btn-close:focus {
  outline:none
}
.modal-backdrop.in {
  -webkit-opacity:.9;
  -moz-opacity:.9;
  opacity:.9
}
.has-full-screen-bg {
  background:#253340 url("../images/background/bg-screen-1.jpg") no-repeat center center fixed;
  background-size:cover;
  padding-bottom:30px
}
.has-full-screen-bg body {
  background:none
}
.has-full-screen-bg.signup-page {
  background:#253340 url("../images/background/bg-screen-2.jpg") no-repeat center center fixed;
  background-size:cover;
  padding-bottom:30px
}
.has-full-screen-bg.resetpass-page {
  background:#253340 url("../images/background/bg-screen-3.jpg") no-repeat center center fixed;
  background-size:cover;
  padding-bottom:30px
}
.has-full-screen-bg .access-header {
  height:auto;
  margin-bottom:45px
}
.has-full-screen-bg .access-header h1.logo {
  float:none;
  text-align:center
}
.has-full-screen-bg .access-header h1.logo a {
  margin:0 auto
}
.access-section .form-box {
  max-width:680px;
  margin:0 auto
}
.access-section .form-box .form-box-inner {
  background:#fff;
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  padding:40px
}
.access-section .form-box .title {
  font-weight:300;
  margin-bottom:60px;
  margin-top:0
}
.access-section.signup-section .title {
  margin-bottom:15px
}
.access-section.signup-section .intro {
  margin-bottom:45px
}
.access-section .email {
  position:relative
}
.access-section .email .svg-inline--fa {
  position:absolute;
  left:10px;
  top:13px;
  color:#999;
  font-size:13px
}
.access-section .password {
  position:relative
}
.access-section .password .svg-inline--fa {
  position:absolute;
  left:10px;
  top:13px;
  color:#999;
  font-size:13px
}
.access-section .form-control {
  font-size:16px;
  padding-left:30px;
  font-size:14px
}
.access-section .form-control::-webkit-input-placeholder {
  color:#999
}
.access-section .form-control:-moz-placeholder {
  color:#999
}
.access-section .form-control::-moz-placeholder {
  color:#999
}
.access-section .form-control:-ms-input-placeholder {
  color:#999
}
.access-section .social-btns {
  margin-bottom:15px
}
.access-section .social-btns li {
  margin-bottom:10px
}
.access-section .social-btns li .btn {
  color:#fff;
  min-width:240px;
  text-align:left
}
.access-section .social-btns li .btn:hover {
  color:#fff
}
.access-section .social-btns li .btn .svg-inline--fa {
  font-size:18px;
  position:relative;
  top:2px;
  margin-right:10px;
  border-right:1px solid rgba(0,0,0,0.05);
  padding-right:10px;
  width:30px
}
.access-section .google-btn {
  background:#dd4b39
}
.access-section .google-btn:hover {
  background:#c23321
}
.access-section .github-btn {
  background:#444
}
.access-section .github-btn:hover {
  background:#2b2b2b
}
.access-section .forgot-password {
  font-size:13px;
  margin-top:10px
}
.access-section .forgot-password a {
  color:#999
}
.access-section .forgot-password a:hover {
  text-decoration:underline;
  color:#CCE5CF
}
.access-section .divider {
  border-left:none;
  margin-bottom:30px;
  position:static
}
.access-section .divider span {
  background:#fff;
  display:inline-block;
  padding:0 10px;
  position:relative;
  top:inherit;
  text-transform:uppercase;
  color:#999
}
.access-section .divider:before {
  content:"";
  position:absolute;
  left:0;
  top:12px;
  background:#e6e6e6;
  height:1px;
  width:100%
}
.access-section .social-btns {
  padding-left:0;
  text-align:center;
  position:relative
}
.access-section .social-btns .btn {
  min-width:100%
}
.access-section .social-btns .social-login {
  display:inline-block;
  margin:0 auto
}
.access-section .note {
  color:#999;
  font-size:13px;
  margin-bottom:15px;
  margin-top:15px
}
.access-section .btn+.note {
  margin:15px 0
}
.access-section .remember {
  padding-top:5px
}
.access-section .remember label {
  font-size:13px;
  color:#999
}
.access-section .lead {
  font-size:14px;
  color:#999;
  margin-top:30px
}
.resetpass-section .form-box .title {
  margin-bottom:30px
}
.resetpass-section .intro {
  font-size:16px;
  margin-bottom:30px
}


.footer {
  background: #253340 !important;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 30px;
  font-size: 16px;
  position: relative;
  z-index: 20;
}

.footer p,
.footer .contact,
.footer .contact p,
.footer .contact a {
  color: rgba(255, 255, 255, 0.7);
}

.footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.footer a:hover {
  color: #CCE5CF;
}

.footer .btn-cta,
.footer a.btn-cta {
  padding: 8px 10px;
}

.footer .footer-col.links .svg-inline--fa {
  margin-right: 5px;
}

.footer .footer-col.links li {
  margin-bottom: 10px;
}

/* Connect / Social */
.footer .footer-col.connect .social {
  margin-bottom: 15px;
  overflow: hidden;
}

.footer .footer-col.connect .social li {
  margin-right: 15px;
}

.footer .footer-col.connect .social li a .svg-inline--fa {
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
}

.footer .footer-col.connect .social li a:hover .svg-inline--fa {
  color: #9FC4A1;
}

/* Call to action buttons */
.footer .footer-col.connect .btn-cta-primary {
  background: #5d80a1;
  border-color: #5d80a1;
}

.footer .footer-col.connect .btn-cta-primary:hover {
  background: #4a6781;
  border-color: #4a6781;
}

/* Footer headings */
.footer .footer-col .title,
.footer h5 {
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px;
}

/* Newsletter / Signup Form */
.footer .footer-col .signup-form {
  padding-left: 0;
  padding-right: 0;
}

.footer .footer-col .signup-form .form-control {
  font-size: 17px;
  min-width: 240px;
}

.footer .footer-col .signup-form .form-control:focus {
  color: #444;
}

.footer .footer-col .signup-form .btn {
  font-size: 17px;
  width: 100%;
}

/* Section Divider */
.footer .has-divider {
  border-top: 1px solid #2b3b4a;
  padding: 30px 0;
}

/* Download List */
.footer .download .download-list li {
  margin-bottom: 15px;
  color: #fff;
}

.footer .download .download-list li .btn-ghost {
  text-align: left;
  opacity: 0.7;
  width: 230px;
  font-size: 14px;
}

.footer .download .download-list li .btn-ghost:hover {
  color: #fff;
  opacity: 1;
}

/* Contact Icons */
.footer .contact .svg-inline--fa {
  margin-right: 10px;
  font-size: 16px;
}

.footer .contact .svg-inline--fa.fa-map-marker-alt {
  margin-top: 3px;
}

.footer .contact .email .svg-inline--fa {
  font-size: 16px;
}

/* Bottom Bar */
.footer .bottom-bar {
  background: #1c2630;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  padding: 10px 0;
  text-align: center;
}

.footer .bottom-bar .copyright {
  line-height: 1.6;
  opacity: 0.7;
  color: #fff;
}

.footer .bottom-bar a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer .bottom-bar a:hover {
  text-decoration: underline;
}

.pagination {
  margin-bottom:60px;
  font-size:14px;
  font-family:arial, sans-serif;
  margin-left:auto;
  margin-right:auto
}
.pagination li a {
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  border:none;
  margin-right:5px;
  color:#9FC4A1;
  text-decoration:none
}
.pagination li a:hover {
  color:#2c9782
}
.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus {
  background-color:#9FC4A1;
  border:none
}
.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus {
  background-color:#bdece2;
  border:none
}
.pagination>li:first-child>a,.pagination>li:first-child>span,.pagination>li:last-child>a,.pagination>li:last-child>span {
  border-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  background:none
}
.page-item.active .page-link {
  background-color:#9FC4A1;
  color:#fff
}
.pagination>li>a:focus,.pagination>li>span:focus {
  color:#9FC4A1
}
.searchbox-icon,.searchbox-submit {
  width:38px;
  height:38px;
  display:block;
  position:absolute;
  top:4px;
  font-size:16px;
  right:0;
  padding:0;
  margin:0;
  border:0;
  outline:0;
  line-height:2.4;
  text-align:center;
  cursor:pointer;
  color:#5bcfb8;
  background:#fff
}
.searchbox-icon:hover {
  color:#38bfa4
}
.searchbox-submit {
  font-size:14px;
  font-family:arial, sans-serif
}
.searchbox-container {
  position:absolute;
  right:0;
  width:100%;
  top:15px
}
.searchbox-container .searchbox {
  position:relative;
  display:inline-block;
  height:42px;
  width:100%;
  float:right;
  top:2px;
  right:0;
  min-width:38px;
  width:0%;
  overflow:hidden;
  -webkit-transition:width 0.3s;
  -moz-transition:width 0.3s;
  -ms-transition:width 0.3s;
  -o-transition:width 0.3s
}
.searchbox-container .searchbox.searchbox-open {
  width:100%;
  z-index:10;
  position:relative
}
.searchbox-container .searchbox.searchbox-open .searchbox-icon,.searchbox-container .searchbox.searchbox-open .searchbox-submit {
  background:#9FC4A1;
  color:#fff;
  -webkit-border-top-right-radius:4px;
  -webkit-border-bottom-right-radius:4px;
  -webkit-border-bottom-left-radius:0;
  -webkit-border-top-left-radius:0;
  -moz-border-radius-topright:4px;
  -moz-border-radius-bottomright:4px;
  -moz-border-radius-bottomleft:0;
  -moz-border-radius-topleft:0;
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
  border-bottom-left-radius:0;
  border-top-left-radius:0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
}
.searchbox-container .searchbox .searchbox-input {
  position:absolute;
  top:4px;
  right:0;
  border:none;
  outline:none;
  background:#f5f5f5;
  border:1px solid #eee;
  height:38px;
  margin:0;
  padding-left:20px;
  font-size:13px
}
.searchbox-container .searchbox .searchbox-input::-webkit-input-placeholder {
  color:#a6a6a6
}
.searchbox-container .searchbox .searchbox-input:-moz-placeholder {
  color:#a6a6a6
}
.searchbox-container .searchbox .searchbox-input::-moz-placeholder {
  color:#a6a6a6
}
.searchbox-container .searchbox .searchbox-input:-ms-input-placeholder {
  color:#a6a6a6
}
@media (max-width: 767.98px) {
  .navbar-collapse {
  border-top:none;
  box-shadow:none;
  width:100%;
  left:0;
  top:15px;
  position:absolute;
  background:#253340;
  z-index:45
}
.navbar-collapse .nav {
  margin:0
}
.main-nav .navbar-collapse .navbar-nav {
  padding-top:15px;
  padding-bottom:30px
}

@media (max-width: 768px) {
  .navbar-collapse .nav .nav-item .nav-link {
    color: #fff !important;
  }

  .navbar-collapse .nav .nav-item .nav-link:hover {
    color: #9FC4A1 !important; /* or any accent color you prefer */
  }

  .navbar-collapse {
    background-color: #253340 !important; /* dark background */
  }}

.blog-page .main-nav .navbar-collapse .navbar-nav {
  padding-bottom:15px
}
.navbar-nav .dropdown-menu {
  position:static !important
}
.config-wrapper {
  display:none
}
#topcontrol {
  display:none !important
}
.header h1.logo {
  float:none;
  margin:inherit;
  text-align:center
}
.header h1.logo a {
  margin:0 auto
}
.header.header-fixed {
  position:relative
}
.header.navbar-fixed-top {
  position:relative
}
.header .main-nav .nav .dropdown-menu:before {
  display:none
}
.navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse {
  max-height:inherit
}
.headline-bg+.section,.bg-slider-wrapper+.section {
  padding-top:45px
}
.pricing .intro {
  margin-bottom:45px
}
.features-video iframe {
  padding:5px
}
.features-tabbed {
  padding-top:160px
}
.signup-page .form-box .intro {
  margin-bottom:45px
}
.login-page .form-box .title {
  margin-bottom:45px
}
.section .title {
  font-size:32px
}
.section .intro {
  font-size:16px
}
.promo {
  height:420px
}
.why .item .content {
  margin-bottom:60px
}
.why .control {
  top:58px;
  margin-left:-30px
}
.why .item .title {
  margin-bottom:30px;
  text-align:center
}
.testimonials .item .profile {
  position:static;
  margin:0 auto;
  text-align:center;
  margin-bottom:30px;
  display:block
}
.testimonials .item {
  flex-direction:column
}
.testimonials .item .content {
  padding-left:60px
}
.testimonials .item blockquote {
  font-size:18px
}
.pricing .item.best-buy {
  position:static;
  z-index:inherit
}
.nav-tabs>li>a {
  padding:10px 5px
}
.blog-page .header-blog {
  position:relative
}
.blog-page .header .main-nav .navbar-toggle {
  margin-bottom:0
}
.blog-page .header .main-nav .navbar-toggle .icon-bar {
  background-color:#384d60
}
.blog-page .header .main-nav .navbar-toggle:hover .icon-bar {
  background-color:#253340
}
.blog-page .flexslider {
  margin-top:0
}
.blog-category {
  margin-top:0
}
.blog-page .header.navbar-fixed-top .main-nav .nav .nav-item a {
  color:#fff
}
.blog-carousel .carousel-item-content .title {
  font-size:36px
}
.blog-page .header-blog .main-nav .nav .nav-item a {
  color:#fff
}
.searchbox-container {
  position:relative;
  top:15px
}
.searchbox-container .searchbox {
  width:100%;
  top:inherit;
  float:none;
  margin-bottom:30px
}
.searchbox-icon {
  display:none
}
.searchbox-icon,.searchbox-submit {
  background:#9FC4A1;
  color:#fff;
  -webkit-border-top-right-radius:4px;
  -webkit-border-bottom-right-radius:4px;
  -webkit-border-bottom-left-radius:0;
  -webkit-border-top-left-radius:0;
  -moz-border-radius-topright:4px;
  -moz-border-radius-bottomright:4px;
  -moz-border-radius-bottomleft:0;
  -moz-border-radius-topleft:0;
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
  border-bottom-left-radius:0;
  border-top-left-radius:0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
}
.searchbox-icon:hover,.searchbox-submit:hover {
  color:#fff
}
.footer-col {
  margin-bottom:30px
}
.modal.modal-video .modal-dialog {
  width:auto;
  padding-left:15px;
  padding-right:15px
}
.download-page /* === Headline Background Aligned to Top of Page === */
.headline-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 450px;
  top: 0;
  background-image: url("../images/background/bg-header-small-4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.story-section .about {
  padding:0
}
.story-section .belief {
  margin-left:0;
  margin-right:0
}
.story-section .team {
  padding:0
}
.promo {
  height:420px;
  padding-top:80px
}
.header.scrolled .main-nav .nav .nav-item a {
  color:#fff
}
.header.scrolled .main-nav .nav .nav-item a:hover {
  color:#9FC4A1
}
}
@media (max-width: 991.98px) {
  .blog-carousel {
  margin-top:0
}
}
@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav .dropdown-menu {
  right:0;
  left:inherit
}
.main-nav.navbar-right {
  float:right !important;
  margin-right:-15px
}
.config-wrapper {
  display:none
}
.header {
  height:inherit
}
.header.scrolled {
  height:auto;
  box-shadow:none
}
.header.scrolled .main-nav .nav .nav-item a {
  color:#fff;
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1
}
.header.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
  background:inherit;
  border-color:inherit
}
.header.scrolled .main-nav .nav .dropdown-menu a {
  color:#fff
}
.header.navbar-fixed-top {
  position:relative
}
.blog {
  margin-top:0
}
.header h1.logo {
  float:none;
  text-align:center
}
.header h1.logo a {
  margin:0 auto
}
.header .main-nav .nav .nav-item {
  margin-right:10px
}
.main-nav.navbar-right {
  float:none !important
}
.blog-page .main-nav.navbar-right {
  float:right !important
}
.navbar-collapse.collapse .navbar-nav {
  float:none;
  margin:0 auto
}
.blog-page .header-blog {
  position:relative
}
.blog-page .header h1.logo {
  float:left;
  margin:inherit
}
.promo {
  height:420px;
  padding-top:80px
}
.promo.section .intro {
  margin-bottom:30px
}
.promo .btn-link {
  margin-top:15px
}
.why .item .content {
  margin-bottom:60px
}
.why .control {
  top:128px;
  margin-left:-45px
}
.why .item .title {
  margin-bottom:30px;
  text-align:center
}
.apps-section .phone-holder {
  background-size:300px auto
}
.apps-section .phone-holder .screenshot {
  width:203px;
  top:20px;
  left:48px
}
.footer-col {
  margin-bottom:30px
}
.modal.modal-video .modal-dialog {
  width:auto;
  padding-left:15px;
  padding-right:15px
}
.features-video {
  padding-top:90px
}
.pricing {
  padding-top:90px
}
.apps-section {
  padding-top:80px
}
.story-section {
  padding-top:90px
}
.contact-section {
  padding-top:45px
}
.access-section .divider {
  text-align:center;
  margin-bottom:30px;
  color:#999;
  text-transform:uppercase;
  position:absolute;
  left:0;
  top:0;
  height:100%
}
.access-section .divider span {
  background:#fff;
  display:inline-block;
  padding:10px 0;
  position:relative;
  top:80px;
  margin-left:-10px
}
.access-section .divider:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  background:#e6e6e6;
  height:100%;
  width:1px
}
.access-section .social-btns .note {
  text-align:left
}
}
@media (min-width: 992px) {
  .navbar-toggleable-md .navbar-collapse {
  width:auto
}
.navbar-fixed-top .navbar-collapse {
  padding-left:15px;
  padding-right:15px
}
.navbar-toggleable-md .navbar-nav .nav-link {
  padding:15px
}
.config-wrapper {
  display:block
}
.header {
  height:80px
}
.header.navbar-fixed-top {
  position:fixed
}
.header.scrolled {
  background:#fff;
  z-index:1000;
  height:80px;
  top:0;
  box-shadow:0 0 4px rgba(0,0,0,0.5)
}
.header.scrolled h1.logo a {
  border-radius:0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  color:#9FC4A1;
  background:#fff;
  padding-left:0;
  padding-top:25px
}
.header.scrolled .main-nav .nav .nav-item a {
  color:#22394B;
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1
}
.header.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
  background:#CCE5CF;
  border-color:#CCE5CF
}
.header.scrolled .main-nav .nav .dropdown-menu a {
  color:#fff
}
.main-nav {
  float:right !important
}
.header h1.logo {
  float:left;
  margin:inherit
}
.header .main-nav .nav .nav-item {
  margin-right:15px
}
.main-nav.navbar-right {
  float:right !important
}
.promo {
  height:620px;
  padding-top:180px
}
.promo.section .intro {
  margin-bottom:45px
}
.promo .btn-link {
  margin-top:15px
}
.why .item .content {
  margin-bottom:inherit
}
.why .control {
  top:128px;
  margin-left:-28px
}
.modal.modal-video .modal-dialog {
  width:760px;
  padding-left:0;
  padding-right:0
}
.blog-carousel {
  margin-top:80px
}
.why .item .title {
  margin-bottom:15px;
  text-align:left
}
.why .figure {
  text-align:left
}
.blog-page .header-blog {
  position:fixed
}
.blog-page .blog-category,.blog-page .blog-archive {
  margin-top:80px
}
.blog-entry-wrapper {
  margin-top:80px
}
.download-area {
  overflow:hidden
}
.download-area .download-list {
  float:left
}
.download-area .qrcode-holder {
  float:left;
  margin-left:45px;
  text-align:center
}
.download-area .qrcode-holder .qrcode {
  max-width:140px;
  margin:0 auto
}
.download-area .qrcode-holder .qrcode .caption {
  font-size:12px;
  background:#fff;
  padding:0 15px;
  padding-bottom:15px;
  color:#253340;
  font-family:arial, sans-serif
}
.navbar-fixed-top .navbar-collapse {
  padding-left:15px;
  padding-right:15px
}
.features-video {
  padding-top:170px
}
.pricing {
  padding-top:170px
}
.apps-section {
  padding-top:160px
}
.story-section {
  padding-top:170px
}
.contact-section {
  padding-top:125px
}
.bg-slider-wrapper {
  position:fixed
}
.features-tabbed .tabs-container {
  max-width:800px
}
}
@media (min-width: 1200px) {
  .apps-section .phone-holder {
  background-size:380px auto
}
.apps-section .phone-holder .screenshot {
  width:258px;
  top:20px;
  left:61px
}
}
@media (min-width: 576px) {
  .modal.modal-video .modal-dialog {
  max-width:inherit
}
}
.config-trigger {
  display:block;
  position:absolute;
  left:-36px;
  width:36px;
  height:36px;
  background:#f5f5f5;
  color:#fff;
  text-align:center;
  -webkit-border-top-right-radius:0;
  -webkit-border-bottom-right-radius:0;
  -webkit-border-bottom-left-radius:4px;
  -webkit-border-top-left-radius:4px;
  -moz-border-radius-topright:0;
  -moz-border-radius-bottomright:0;
  -moz-border-radius-bottomleft:4px;
  -moz-border-radius-topleft:4px;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border-bottom-left-radius:4px;
  border-top-left-radius:4px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
}
.config-trigger:hover {
  text-decoration:none
}
.config-trigger:hover .fa-gear {
  color:#253340
}
.config-trigger .fa-gear {
  font-size:20px;
  padding-top:8px;
  display:block;
  color:#2b2b2b
}
.panel-inner {
  position:relative;
  padding:15px;
  -webkit-border-top-right-radius:0;
  -webkit-border-bottom-right-radius:0;
  -webkit-border-bottom-left-radius:4px;
  -webkit-border-top-left-radius:0;
  -moz-border-radius-topright:0;
  -moz-border-radius-bottomright:0;
  -moz-border-radius-bottomleft:4px;
  -moz-border-radius-topleft:0;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border-bottom-left-radius:4px;
  border-top-left-radius:0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
}
.config-panel {
  width:170px;
  position:fixed;
  top:100px;
  right:0;
  z-index:100;
  background:#f5f5f5;
  -webkit-border-top-right-radius:0;
  -webkit-border-bottom-right-radius:0;
  -webkit-border-bottom-left-radius:4px;
  -webkit-border-top-left-radius:0;
  -moz-border-radius-topright:0;
  -moz-border-radius-bottomright:0;
  -moz-border-radius-bottomleft:4px;
  -moz-border-radius-topleft:0;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border-bottom-left-radius:4px;
  border-top-left-radius:0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  -webkit-transition:all 0.4s ease-in-out;
  -moz-transition:all 0.4s ease-in-out;
  -ms-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out
}
.config-panel.config-panel-open {
  right:0
}
.config-panel.config-panel-hide {
  right:-170px
}
.config-panel h5 {
  margin-bottom:15px;
  font-size:16px
}
.config-panel #color-options {
  margin-bottom:10px
}
.config-panel #color-options li {
  padding-right:0;
  margin-right:3px
}
.config-panel #color-options li a {
  display:block;
  width:20px;
  height:20px;
  border:2px solid transparent
}
.config-panel #color-options li a:hover {
  -webkit-opacity:.9;
  -moz-opacity:.9;
  opacity:.9;
  border:2px solid rgba(0,0,0,0.8)
}
.config-panel #color-options li.active a {
  border:2px solid #22394B
}
.config-panel #color-options li.theme-1 a {
  background:#ec6952
}
.config-panel #color-options li.theme-2 a {
  background-color:#28A5A8
}
.config-panel #color-options li.theme-3 a {
  background-color:#497CB1
}
.config-panel #color-options li.theme-4 a {
  background-color:#F89D29
}
.config-panel #color-options li.theme-5 a {
  background-color:#34495e
}
.config-panel #color-options li.theme-6 a {
  background-color:#47c9af
}
.config-panel #color-options li.theme-7 a {
  background-color:#A06081
}
.config-panel #color-options li.theme-8 a {
  background-color:#96a94b
}
.config-panel #color-options li.theme-9 a {
  background-color:#f06060
}
.config-panel #color-options li.theme-10 a {
  background-color:#737F97
}
.config-panel .close {
  position:absolute;
  right:5px;
  top:5px;
  color:#fff
}
.config-panel .close .fa-circle-xmark {
  color:#253340;
  font-size:18px
}


/* === Final Refined Navbar Fixes === */

/* === TOP-LEVEL NAV LINKS === */
.header .main-nav .navbar-nav > .nav-item > .nav-link {
  text-transform: uppercase;
  font-weight: 400;
  color: #22394B !important;
  text-decoration: none !important;
}

.header .main-nav .navbar-nav > .nav-item > .nav-link:hover,
.header .main-nav .navbar-nav > .nav-item > .nav-link:focus,
.header .main-nav .navbar-nav > .nav-item > .nav-link.active {
  color: #9FC4A1 !important;
}

/* === DROPDOWN MENU CONTAINER === */
.header .main-nav .dropdown-menu {
  background-color: #22394B !important;
  border: none;
  border-radius: 0;
}

/* === DROPDOWN MENU LINKS === */
.header .main-nav .dropdown-menu .dropdown-item {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 400;
  padding: 10px 20px;
  font-size: 14px;
}

.header .main-nav .dropdown-menu .dropdown-item:hover,
.header .main-nav .dropdown-menu .dropdown-item:focus,
.header .main-nav .dropdown-menu .dropdown-item.active {
  color: #9FC4A1 !important;
  background-color: transparent !important;
}

/* === SCROLLED HEADER STYLES === */
.header.scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


/* === Final Fixes for Logo, Dropdown, Fonts, Mobile === */

/* === 1. Remove duplicate background logo === */
.header .logo,
.header .logo a {
  background: none !important;
  background-image: none !important;
}

/* === 2. Remove duplicate dropdown arrows === */
.header .dropdown-toggle::after {
  display: none !important;
}

/* === 3. Adjust navbar font size and uppercase CTAs === */
.header .main-nav .navbar-nav > .nav-item > .nav-link {
  font-size: 14px !important;
  font-weight: 400;
  text-transform: uppercase;
}

.header .nav-item-cta .btn {
  text-transform: uppercase !important;
  font-weight: 500;
  font-size: 13px;
}

/* === 4. Mobile menu: white links, brand green on hover/active === */
@media (max-width: 768px) {
  .header .main-nav .navbar-collapse {
    background-color: #22394B;
    padding: 20px;
  }

  .header .main-nav .nav .nav-item .nav-link {
    color: #ffffff !important;
  }

  .header .main-nav .nav .nav-item .nav-link:hover,
  .header .main-nav .nav .nav-item .nav-link:focus,
  .header .main-nav .nav .nav-item .nav-link.active {
    color: #9FC4A1 !important;
  }

  .header .main-nav .dropdown-menu {
    background-color: #22394B;
  }

  .header .main-nav .dropdown-menu .dropdown-item {
    color: #ffffff !important;
  }

  .header .main-nav .dropdown-menu .dropdown-item:hover,
  .header .main-nav .dropdown-menu .dropdown-item:focus,
  .header .main-nav .dropdown-menu .dropdown-item.active {
    color: #9FC4A1 !important;
    background-color: transparent !important;
  }
}


/* === Corrections for Logo, Mobile Dropdown, Font Size === */

/* === 1. Reverse logo cleanup: restore background image, remove <img> if needed === */
/* Instead of removing the background, we assume logo is background-based */
.header .logo,
.header .logo a {
  background: url('../images/logos/logo.svg') no-repeat center center !important;
  background-size: contain !important;
  display: block;
  width: 160px;
  height: 60px;
  text-indent: -9999px;
  overflow: hidden;
}

/* === 2. Mobile menu: white text, all dropdown items always visible === */
@media (max-width: 768px) {
  .header .main-nav .navbar-collapse {
    background-color: #22394B;
    padding: 20px;
  }

  .header .main-nav .nav .nav-item .nav-link {
    color: #ffffff !important;
  }

  .header .main-nav .nav .nav-item .nav-link:hover,
  .header .main-nav .nav .nav-item .nav-link:focus,
  .header .main-nav .nav .nav-item .nav-link.active {
    color: #9FC4A1 !important;
  }

  /* Show dropdown items as expanded (not collapsible via hover) */
  .header .main-nav .dropdown-menu {
    display: block !important;
    position: static;
    float: none;
    background-color: #22394B;
    padding-left: 15px;
    box-shadow: none;
  }

  .header .main-nav .dropdown-menu .dropdown-item {
    color: #ffffff !important;
    padding: 8px 15px;
  }

  .header .main-nav .dropdown-menu .dropdown-item:hover,
  .header .main-nav .dropdown-menu .dropdown-item:focus,
  .header .main-nav .dropdown-menu .dropdown-item.active {
    color: #9FC4A1 !important;
    background-color: transparent !important;
  }
}

/* === 3. Increase font size for top-level nav === */
.header .main-nav .navbar-nav > .nav-item > .nav-link {
  font-size: 16px !important;
}


/* === Refined Fixes: Logo, Navbar, Headline === */

/* === 1. Remove extra logo (keep only the <img>, remove background image) === */
.header .logo,
.header .logo a {
  background: none !important;
  background-image: none !important;
  text-indent: 0;
  width: auto;
  height: auto;
  overflow: visible;
}

/* === 2. Reduce padding around navbar links in mobile toggle menu === */
@media (max-width: 768px) {
  .header .main-nav .nav .nav-item .nav-link {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .header .main-nav .dropdown-menu .dropdown-item {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* === 3. Headline-bg image positioned at top under navbar === */
/* === Headline Background Aligned to Top of Page === */
.headline-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 450px;
  top: 0;
  background-image: url("../images/background/bg-header-small-4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* === 4. Ensure navbar has white background when scrolled === */
.header.scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* === 5. Lock navbar to top across all pages === */
.header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}


/* === Final Mobile Link Color Override === */

/* === Mobile nav link color override (forces white default, green hover, white active) === */
@media (max-width: 768px) {
  body .header .main-nav .navbar-nav > .nav-item > .nav-link {
    color: #ffffff !important;
    background-color: transparent !important;
  }

  body .header .main-nav .navbar-nav > .nav-item > .nav-link:hover,
  body .header .main-nav .navbar-nav > .nav-item > .nav-link:focus {
    color: #9FC4A1 !important;
  }

  body .header .main-nav .navbar-nav > .nav-item > .nav-link.active {
    color: #ffffff !important;
  }
}


/* === Mobile Dropdown Spacing + Background Fix === */

/* === Fix: Mobile dropdown link spacing and background color consistency === */
@media (max-width: 768px) {
  .header .main-nav .dropdown-menu {
    background-color: #22394B !important;
    padding: 0 !important;
    border: none !important;
  }

  .header .main-nav .dropdown-menu .dropdown-item {
    color: #ffffff !important;
    background-color: #22394B !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .header .main-nav .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
  }

  .header .main-nav .dropdown-menu .dropdown-item:hover,
  .header .main-nav .dropdown-menu .dropdown-item:focus,
  .header .main-nav .dropdown-menu .dropdown-item.active {
    color: #9FC4A1 !important;
    background-color: transparent !important;
  }
}


/* === Final Dropdown Cleanup === */

/* === Final dropdown padding + background polish === */
@media (max-width: 768px) {
  .header .main-nav .dropdown-menu {
    background-color: #22394B !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  .header .main-nav .dropdown-menu .dropdown-item {
    color: #ffffff !important;
    background-color: #22394B !important;
    padding: 4px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .header .main-nav .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
  }

  .header .main-nav .dropdown-menu .dropdown-item:hover,
  .header .main-nav .dropdown-menu .dropdown-item:focus,
  .header .main-nav .dropdown-menu .dropdown-item.active {
    color: #9FC4A1 !important;
    background-color: transparent !important;
  }
}


/* === Revert Logo Styling to Safe and Clean Version === */

/* === Logo: Larger, stable height and positioning without side effects === */
.header .logo img {
  max-height: 70px !important;
  height: auto;
  width: auto;
  display: block;
  margin: 0;
  padding: 0;
  transition: none !important;
}

/* Maintain consistent size on scroll */
.header.scrolled .logo img {
  max-height: 70px !important;
  margin: 0;
}


/* === Navbar Styling to Match Screenshot === */

/* === Screenshot-accurate Navbar Styling === */

/* Logo appearance and alignment */
.header .logo {
  display: flex;
  align-items: center;
}

.header .logo img {
  max-height: 70px !important;
  height: auto;
  width: auto;
  display: block;
  margin: 0;
  padding: 0;
  transition: none !important;
}

/* Navbar links (People, Capabilities, etc.) */
.header .main-nav .navbar-nav > .nav-item > .nav-link {
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  color: #22394B !important;
  text-decoration: none !important;
  padding: 12px 16px;
}

.header .main-nav .navbar-nav > .nav-item > .nav-link:hover,
.header .main-nav .navbar-nav > .nav-item > .nav-link:focus {
  color: #9FC4A1 !important;
}

/* CTA Buttons (Client Portal / Pay Invoice) */
.header .nav-item-cta .btn {
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  padding: 6px 18px !important;
  border-radius: 8px !important;
  line-height: 1.3;
}


/* === Final Logo Update for Larger Size + Consistency === */

/* === Updated Logo for Larger, Consistent Display with Latest Navbar Styles === */
.header .logo {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.header .logo img,
.header.scrolled .logo img {
  max-height: 75px !important;
  height: 75px !important;
  width: auto !important;
  display: block;
  margin: 0;
  padding: 0;
  transition: none !important;
}


/* === Navbar Typography and Button Sizing Fixes === */

/* === Navbar Link Font Weight, Size, and CTA Button Width === */
.header .main-nav .navbar-nav > .nav-item > .nav-link {
  font-size: 16px !important;  /* Increased from 14px */
  font-weight: 400 !important; /* Reduced from 500 */
  text-transform: uppercase;
  padding: 12px 16px;
}

.header .nav-item-cta .btn {
  font-size: 14px !important;
  font-weight: 500;
  text-transform: uppercase;
  padding: 6px 14px !important;  /* Reduced button width */
  border-radius: 8px;
  line-height: 1.3;
}


/* === Final Refined Navbar Text + Button Alignment === */

/* === Refined Navbar Typography and CTA Button Alignment === */
.header .main-nav .navbar-nav > .nav-item > .nav-link {
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  padding: 10px 16px;
  display: flex;
  align-items: center;
}

/* Match CTA buttons (Client Portal, Pay Invoice) to nav link baseline */
.header .nav-item-cta .btn {
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  padding: 8px 14px !important;
  border-radius: 8px;
  line-height: 1.2;
  display: flex;
  align-items: center;
}


/* === Logo + Mobile Menu Fixes === */

/* === Logo Size: Increased and Stabilized === */
.header .logo img {
  max-height: 75px !important;
  height: auto !important;
  width: auto !important;
  display: block;
  transition: none !important;
}


/* === Mobile Toggle Menu: Background and Link Colors === */
@media (max-width: 768px) {
  .header .main-nav .navbar-collapse {
    background-color: #253340 !important;
  }

  .header .main-nav .nav .nav-item .nav-link {
    color: #ffffff !important;
  }

  .header .main-nav .nav .nav-item .nav-link:hover,
  .header .main-nav .nav .nav-item .nav-link:focus {
    color: #9FC4A1 !important;
  }

  .header .main-nav .nav .nav-item .nav-link.active {
    color: #ffffff !important;
  }

  .header .main-nav .dropdown-menu {
    background-color: #253340 !important;
    display: block !important;
  }

  .header .main-nav .dropdown-menu .dropdown-item {
    color: #ffffff !important;
  }

  .header .main-nav .dropdown-menu .dropdown-item:hover,
  .header .main-nav .dropdown-menu .dropdown-item:focus,
  .header .main-nav .dropdown-menu .dropdown-item.active {
    color: #9FC4A1 !important;
    background-color: transparent !important;
  }
}


/* === Final Visual Corrections Applied === */

/* === Final Fixes: Logo Size, Mobile Background Unification, Slim CTA Buttons === */

/* Larger logo */
.header .logo img {
  max-height: 85px !important;
  height: auto !important;
  width: auto !important;
  display: block;
  transition: none !important;
}

/* Narrower CTA buttons */
.header .nav-item-cta .btn {
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  padding: 8px 10px !important;
  border-radius: 8px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  min-width: auto !important;
  width: auto !important;
}

/* Unified mobile menu background and dropdown color */
@media (max-width: 768px) {
  .header .main-nav .navbar-collapse {
    background-color: #253340 !important;
  }

  .header .main-nav .nav .nav-item .nav-link {
    color: #ffffff !important;
  }

  .header .main-nav .nav .nav-item .nav-link:hover,
  .header .main-nav .nav .nav-item .nav-link:focus {
    color: #9FC4A1 !important;
  }

  .header .main-nav .nav .nav-item .nav-link.active {
    color: #ffffff !important;
  }

  .header .main-nav .dropdown-menu {
    background-color: #253340 !important;
  }

  .header .main-nav .dropdown-menu .dropdown-item {
    color: #ffffff !important;
  }

  .header .main-nav .dropdown-menu .dropdown-item:hover,
  .header .main-nav .dropdown-menu .dropdown-item:focus,
  .header .main-nav .dropdown-menu .dropdown-item.active {
    color: #9FC4A1 !important;
    background-color: transparent !important;
  }
}


/* === Final Patch: Dropdown Font, CTA, Logo, Background === */

/* === Increased Font Size for Dropdown Menu Items (Desktop & Mobile) === */
.header .main-nav .dropdown-menu .dropdown-item {
  font-size: 16px !important;
  color: #ffffff !important;
  background-color: transparent !important;
}

.header .main-nav .dropdown-menu .dropdown-item:hover,
.header .main-nav .dropdown-menu .dropdown-item:focus,
.header .main-nav .dropdown-menu .dropdown-item.active {
  color: #9FC4A1 !important;
  background-color: transparent !important;
}

/* === Fixes that did not take effect previously === */

/* Correct CTA button size */
.header .nav-item-cta .btn {
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  padding: 8px 12px !important;
  border-radius: 8px;
  line-height: 1.2;
  width: auto !important;
  min-width: unset !important;
}

/* Fix logo height again */
.header .logo img {
  max-height: 85px !important;
  height: auto !important;
  width: auto !important;
  display: block;
  transition: none !important;
}

/* Unify mobile nav background colors */
@media (max-width: 768px) {
  .header .main-nav .navbar-collapse,
  .header .main-nav .dropdown-menu {
    background-color: #253340 !important;
  }
}


/* === Mobile CTA Button Width + Indentation for Dropdown Items === */

/* === Mobile Toggle Menu: Slimmer CTA Buttons === */
@media (max-width: 768px) {
  .header .nav-item-cta .btn {
    width: auto !important;
    padding: 8px 16px !important;
    font-size: 16px !important;
    font-weight: 400;
    display: inline-block;
  }

  /* Indent dropdown items (sub-links) */
  .header .main-nav .dropdown-menu .dropdown-item {
    padding-left: 30px !important;
  }
}


/* === Mobile CTA Button Horizontal Layout Fix === */

/* === Reliable Fix: Toggle Menu CTA Buttons Side-by-Side === */
@media (max-width: 768px) {
  /* Create container for the two buttons */
  .header .main-nav .navbar-collapse {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .header .main-nav .nav-item-cta-wrapper {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px;
    flex-wrap: wrap;
  }

  .header .main-nav .nav-item-cta-wrapper .nav-item-cta {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto;
  }

  .header .main-nav .nav-item-cta-wrapper .nav-item-cta .btn {
    width: 100%;
    padding: 10px 12px !important;
    text-align: center;
  }
}



/* === Pure CSS CTA Button Fix for Mobile (HTML Unchanged) === */
@media (max-width: 768px) {
  .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
  }

  .navbar-nav .nav-item-cta {
    flex: 1 1 auto;
    max-width: calc(50% - 10px);
  }

  .navbar-nav .nav-item-cta .btn {
    width: 100%;
    padding: 10px 12px;
    text-align: center;
  }
}



/* === Stronger Mobile Fix for .headline-title === */
@media (max-width: 768px) {
  .headline-title {
    font-size: 32px !important;
    font-weight: 600;
    padding: 12px 24px !important;
    line-height: 1.2 !important;
    text-align: center;
    display: inline-block;
  }
}



/* === Refined Mobile Headline Styling: Larger Size, Lower Weight === */
@media (max-width: 768px) {
  .headline-title {
    font-size: 36px !important;
    font-weight: 400 !important;
    padding: 12px 24px !important;
    line-height: 1.2 !important;
    text-align: center;
    display: inline-block;
  }
}



/* === Final Mobile Headline Adjustment: Bigger and Moved Up === */
@media (max-width: 768px) {
  .headline-title {
    font-size: 40px !important;
    font-weight: 400 !important;
    padding: 4px 24px !important;
    margin-top: -20px !important;
    line-height: 1.2 !important;
    text-align: center;
    display: inline-block;
  }
}



/* === Adjusted Margin to Move .headline-title Closer to Top on Mobile === */
@media (max-width: 768px) {
  .headline-title {
    margin-top: -40px !important;
  }
}



/* === Move Promo Title and Intro Down on Mobile === */
@media (max-width: 768px) {
  .promo .title,
  .promo .intro {
    margin-top: 100px !important;
  }
}



/* === Nav Tabs: Brand Blue Styling === */
.nav-tabs .nav-link {
  color: #22394B !important;
  font-weight: 500;
  border: none;
  background: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #22394B !important;
  border-bottom: 2px solid #22394B !important;
  background: transparent;
}

.nav-tabs .nav-link i {
  color: #22394B !important;
}



/* === Nav Tabs: Brand Blue Styling Without Underline === */
.nav-tabs .nav-link {
  color: #22394B !important;
  font-weight: 500;
  border: none !important;
  background: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #22394B !important;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
}

.nav-tabs .nav-link i {
  color: #22394B !important;
}



/* === Nav Tabs: Green Bar on Active, Green Tint on Hover === */
.nav-tabs .nav-link {
  color: #22394B !important;
  font-weight: 500;
  border: none !important;
  background: transparent;
  position: relative;
  transition: background-color 0.2s ease;
}

.nav-tabs .nav-link.active {
  color: #22394B !important;
  background: transparent;
}

.nav-tabs .nav-link.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background-color: #9FC4A1; /* brand green bar */
}

.nav-tabs .nav-link:hover {
  background-color: #e8f2ec !important; /* soft green tint on hover */
  color: #22394B !important;
}

.nav-tabs .nav-link i {
  color: #22394B !important;
}



/* === Mobile Promo Title and Intro Tweaks === */
@media (max-width: 768px) {
  .promo .title {
    margin-top: -50px !important;
    font-size: 36px !important;  /* Increased by 4px */
    font-weight: 550 !important; /* Reduced from 600 */
  }

  .promo .intro {
    margin-top: -50px !important;
    font-size: 25px !important; 
  }
}



/* === Updated Mobile Promo Title and Intro Adjustment: Down 40px === */
@media (max-width: 768px) {
  .promo .title {
    margin-top: 40px !important;
  }

  .promo .intro {
    margin-top: 40px !important;
  }
}



/* === Final Scroll-Proof + SVG-Compatible Logo Styling === */
.header .logo img,
.header.scrolled .logo img {
  height: 75px !important;
  max-height: 75px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block;
  object-fit: contain;
}



/* === Fix anchor tag shrinking SVG logo === */
.header .logo a {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  padding: 0;
  margin: 0;
}

.header .logo img,
.header.scrolled .logo img {
  height: 75px !important;
  max-height: 75px !important;
  width: auto !important;
  display: block;
  object-fit: contain;
}



/* === Force Correct Logo Size When Wrapped in Anchor === */
.header .logo a img {
  height: 75px !important;
  max-height: 75px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
}



/* === Final Combined Logo Fix === */
.header .logo {
  display: flex;
  align-items: center;
  margin: 0;
}

.header .logo a {
  display: flex;
  align-items: center;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.header .logo img {
  height: 75px !important;
  width: auto !important;
  max-height: 75px !important;
  object-fit: contain !important;
  display: block;
}



/* === Mobile Logo Centering === */
@media (max-width: 768px) {
  .header .logo {
    justify-content: center !important;
    text-align: center;
  }
}

/* === Promo Section Refinements on Mobile === */
@media (max-width: 768px) {
  .promo .title {
    margin-top: 60px !important;    /* move it down more */
    font-size: 40px !important;     /* increase font size */
    font-weight: 430 !important;    /* reduce font weight */
    text-align: center;
  }

  .promo .intro {
    margin-top: 30px !important;    /* move it down slightly */
    font-size: 27px !important;     /* increase font size */
    text-align: center;
  }
}
.cta-section .intro.brand-blue {
  color: #22394B !important;
}
.privacy-header { background-color: #22394B; color: #fff; padding: 30px; margin-top: 100px; text-align: center; font-size: 35px; font-weight: bold; }

    .signup-section {
      margin-top: -100px; /* Reduces space from carousel */
    }
    .signup-box {
      background-color: #f5f1ec; /* Beige */
      border-radius: 8px;
      padding: 2rem;
    }
    .signup-title,
    .signup-description {
      color: #22394B;
    }
    .btn-subscribe {
      background-color: #9FC4A1;
      color: white;
      width: 50%;
    }
    .btn-subscribe:hover {
      background-color: #88b58c;
    }
    
    /* Base accordion styling */
.accordion-item {
  background-color: #f3eee9; /* beige background */
  border: none;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
}

/* Accordion body background */
.accordion-body {
  background-color: #ffffff;
}

/* Inactive button state */
.accordion-button {
  background-color: #f3eee9;
  color: #22394B; /* brand blue */
  font-weight: 600;
  font-size: 1.2rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Inactive icon styling */
.accordion-button .icon {
  color: #22394B; /* brand blue */
  margin-right: 0.75rem;
  font-size: 1.2rem;
}

/* More specific targeting for active accordion header */
.accordion .accordion-item .accordion-button:not(.collapsed) {
  background-color: #9FC4A1 !important;
  color: #ffffff !important;
}

/* Active icon inside the button */
.accordion .accordion-item .accordion-button:not(.collapsed) .icon {
  color: #ffffff !important;
}

/* Optional hover state for collapsed items */
.accordion-button.collapsed:hover {
  background-color: #e8dfd6;
}

/* Remove default Bootstrap focus outline */
.accordion-button:focus {
  box-shadow: none;
}

/* List styling inside accordion */
.accordion-body ul {
  padding-left: 20px;
  margin-bottom: 0;
}


/* Adjust accordion spacing */
#tpaAccordion {
  margin-bottom: 2rem;
}

/* CTA section spacing */
section.contact-cta {
  background-color: #9FC4A1;
  color: #fff;
  padding: 2.5rem 1rem;
  margin-bottom: 0;
}

.contact-cta {
  background-color: #9FC4A1;
  color: #fff;
  padding: 3rem 1rem;
  text-align: center;
}

.cta-heading {
  font-weight: 700;
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.cta-text {
  font-size: 1.4rem;
  line-height: 1.6;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.cta-button-wrapper {
  margin-top: 1rem;
}

.cta-button {
  background-color: #22394B;
  color: #fff;
  padding: 0.75rem 1.5rem;
   font-size: 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #51708f;
  color: #fff;
  text-decoration: none;
}

.cta-subtext {
  font-size: 1.6rem;
  font-weight: 400;
  margin-top: 1rem;
  color: #fff;
}


    .card-grid {
      display: flex;
      justify-content: center;
      gap: 30px;
      max-width: 1300px;
      margin: 0 auto;
      position: relative;
    }

    .card-wrapper {
      position: relative;
      width: 360px;
      height: 260px;
      flex-shrink: 0;
    }

    .card {
      background: linear-gradient(to bottom, #f3eee9, #ffffff);
      color: #22394B;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(25, 48, 65, 0.1);
      cursor: pointer;
      padding: 30px 20px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: all 0.4s ease;
      z-index: 1;
    }

    .card .bar {
      width: calc(100% + 40px);
      height: 24px;
      margin: -30px -20px 20px -20px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
    }

    .card h3 {
      text-align: center;
      font-size: 1.6rem;
      font-weight: 500;
      margin-bottom: 10px;
    }

    .card-content {
      opacity: 0;
      color: #22394B;
      margin-top: 10px;
      text-align: left;
      transform: translateY(20px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .card.expanded .card-content {
      opacity: 1;
      transform: translateY(0);
    }

    .card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 15px 40px rgba(25, 48, 65, 0.2);
    }

    /* Expanded styles */
    .card.left.expanded {
      width: 600px;
      height: 600px;
      z-index: 5;
      transform: translateX(0%) scale(1.02);
    }

    .card.center.expanded {
      width: 600px;
      height: 300px;
      z-index: 5;
      transform: translateX(-120px) scale(1.02);
    }

    .card.right.expanded {
      width: 600px;
      height: 300px;
      z-index: 5;
      transform: translateX(-240px) scale(1.02);
    }

    /* Bar colors */
    .card.left .bar { background-color: #e8dfd6; }
    .card.center .bar { background-color: #22394B; }
    .card.right .bar { background-color: #9FC4A1; }

    @media (max-width: 1000px) {
      .card-grid {
        flex-direction: column;
        align-items: center;
      }

      .card-wrapper {
        width: 90%;
        height: auto;
      }

      .card,
      .card.expanded {
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        position: relative;
      }

      .card-content {
        opacity: 1;
        transform: translateY(0);
      }
    }

.card-section-spacing {
  padding: 60px 20px;
  background-color: transparent;
  text-align: center;
}

.card-section-spacing .container {
  max-width: 960px;
  margin: 0 auto;
  color: #22394B;
  font-size: 1rem;
}

/* === FINAL LOGO SIZE === */
.header .logo a img,
.header.scrolled .logo a img {
  height: 85px !important;
  max-height: 85px !important;
  width: auto !important;
}