@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.header {
    isolation: isolate;
    left: 0;
    padding-block: 2rem;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000
}

.header .bg-nav {
    background-position: left top;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

@media(max-width: 992px)and (min-width: 768px) {
    .header {
        padding: 50px 0
    }
}

@media(max-width: 767px) {
    .header {
        -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        height: 115px
    }
}

@media(min-width: 768px) {
    .header .brand {
        padding-left: 2rem
    }

    .header .brand img {
        height: auto;
        width: 485px
    }
}

@media(min-width: 992px) {
    .header .brand {
        padding-left: 1.25rem
    }

    .header .brand img {
        height: auto;
        width: 200px
    }
}

@media(min-width: 1200px) {
    .header .brand {
        padding-left: 2rem
    }

    .header .brand img {
        height: auto;
        width: 275px
    }
}

@media(min-width: 1584px) {
    .header .brand {
        padding-left: 54px
    }

    .header .brand img {
        height: auto;
        width: 324px
    }
}

@media(max-width: 767px) {
    .header .brand img {
        height: auto;
        width: 240px
    }
}

.header .nav li {
    color: #2f6f8e;
    font-size: 18px;
    font-weight: 500
}

@media(min-width: 992px) {
    .header .nav li {
        font-size: 12px;
        margin-right: 1.25rem
    }
}

@media(min-width: 1200px) {
    .header .nav li {
        font-size: 14px;
        margin-right: 1.5rem
    }
}

@media(min-width: 1584px) {
    .header .nav li {
        font-size: 18px;
        margin-right: 2rem
    }
}

.header .nav li a {
    color: inherit;
    text-decoration: none
}

@media(max-width: 992px) {
    .header nav.nav {
        background: #fff;
        left: 0;
        position: absolute;
        top: 100%;
        width: 100%
    }
}

.header .sign-in a {
    background: #2f9f8c;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    color: #fff;
    font: 200 12px "Poppins", sans-serif;
    padding: .5rem 1rem;
    text-decoration: none
}

@media(min-width: 1200px) {
    .header .sign-in a {
        font-size: 14px
    }
}

@media(min-width: 1400px) {
    .header .sign-in a {
        font-size: 18px
    }
}

@media(max-width: 991px) {
    .header .sign-in {
        padding-bottom: 1rem
    }
}

@media(max-width: 991px) {
    .header:before {
        background: -webkit-gradient(linear, left top, left bottom, from(#206788), to(rgba(54, 122, 154, 0)));
        background: linear-gradient(#206788 0%, rgba(54, 122, 154, 0) 100%);
        content: "";
        height: 11px;
        left: 0;
        opacity: .5;
        position: absolute;
        top: 100%;
        width: 100%
    }
}

.call_nav {
    background: #50beab;
    border-radius: 5px;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    cursor: pointer;
    height: 52px;
    padding: 10px;
    width: 52px
}

@media(min-width: 768px) {
    .call_nav {
        height: 148px;
        padding: 20px 30px;
        width: 160px
    }
}

.call_nav .line {
    background-color: #fff;
    border-radius: 5px;
    display: block;
    height: 6px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    width: 100%
}

@media(min-width: 768px) {
    .call_nav .line {
        height: 18px
    }
}

.call_nav .line+.line {
    margin-top: 5px
}

@media(min-width: 768px) {
    .call_nav .line+.line {
        margin-top: 20px
    }
}

.call_nav.is-active .line:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg)
}

.call_nav.is-active .line:nth-child(2) {
    opacity: 0
}

.call_nav.is-active .line:nth-child(3) {
    margin-top: 0;
    -webkit-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg)
}

.call_nav:hover {
    cursor: pointer
}

.hero {
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
    padding-top: 115px
}

@media(min-width: 768px) {
    .hero {
        padding-top: 248px
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .hero {
        background-size: cover
    }
}

@media(max-width: 991px) {
    .hero {
        position: relative
    }

    .hero:before {
        background: -webkit-gradient(linear, left top, left bottom, from(#206788), to(rgba(54, 122, 154, 0)));
        background: linear-gradient(#206788 0%, rgba(54, 122, 154, 0) 100%);
        content: "";
        height: 11px;
        left: 0;
        position: absolute;
        top: 100%;
        width: 100%
    }
}

@media(min-width: 992px) {
    .hero {
        padding-top: 128px
    }
}

@media(min-width: 1400px) {
    .hero {
        padding-top: 190px;
        position: relative
    }

    .hero:before {
        background-color: #f8f8f8;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -10
    }
}

.hero .hero-content .bg-mob {
    padding: 1rem 0
}

@media(max-width: 991px)and (min-width: 768px) {
    .hero .hero-content .bg-mob {
        padding: 40px calc(80px - 1.5rem)
    }
}

@media(max-width: 991px) {
    .hero .hero-content .bg-mob {
        isolation: isolate;
        position: relative
    }

    .hero .hero-content .bg-mob h3 {
        margin-bottom: 0
    }

    .hero .hero-content .bg-mob:before {
        background: rgba(255, 255, 255, .57);
        -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        content: "";
        height: 100%;
        left: -0.75rem;
        position: absolute;
        top: 0;
        width: 100vw;
        z-index: -1
    }
}

.hero .hero-content h1 {
    color: #317495;
    font: 700 20px "Poppins", sans-serif;
    text-shadow: 1px 1px 2px #fff
}

@media(min-width: 768px) {
    .hero .hero-content h1 {
        font-size: 40px
    }
}

@media(min-width: 992px) {
    .hero .hero-content h1 {
        font-size: 26px
    }
}

@media(min-width: 1200px) {
    .hero .hero-content h1 {
        font-size: 32px
    }
}

@media(min-width: 1584px) {
    .hero .hero-content h1 {
        font-size: 40px
    }
}

.hero .hero-content h3 {
    color: #2f9f8c;
    font: 500 12px "Poppins", sans-serif;
    text-shadow: 1px 1px 2px #fff
}

@media(min-width: 768px) {
    .hero .hero-content h3 {
        font-size: 22px
    }
}

@media(min-width: 992px) {
    .hero .hero-content h3 {
        font-size: 14px
    }
}

@media(min-width: 1200px) {
    .hero .hero-content h3 {
        font-size: 16px
    }
}

@media(min-width: 1584px) {
    .hero .hero-content h3 {
        font-size: 22px
    }
}

@media(max-width: 991px)and (min-width: 768px) {
    .hero .search-hero {
        padding: 40px calc(80px - 1.5rem)
    }
}

.hero .search-hero .cta {
    border: 1px solid #707070;
    font-weight: 700;
    padding: 1rem 1.5rem
}

@media(min-width: 768px)and (max-width: 991px) {
    .hero .search-hero .cta {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 22px;
        height: 80px
    }
}

.hero .search-hero input {
    background: #fff;
    border: 1px solid #2f9f8c;
    color: #54585a;
    -webkit-filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.1));
    font: 300 8px "Poppins", sans-serif;
    padding: 0 1.25rem
}

@media(max-width: 767px) {
    .hero .search-hero input {
        height: 44px
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .hero .search-hero input {
        font-size: 15px;
        height: 80px;
        margin-bottom: 34px
    }
}

@media(min-width: 992px) {
    .hero .search-hero input {
        font-size: 10px;
        margin-bottom: 0
    }
}

@media(min-width: 1200px) {
    .hero .search-hero input {
        font-size: 12px
    }
}

@media(min-width: 1584px) {
    .hero .search-hero input {
        height: 54px
    }
}

@media(max-width: 767px) {

    .hero .search-hero input,
    .hero .search-hero button {
        margin-top: 1rem
    }
}

.hero .hero-feature {
    -webkit-filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
    padding: 1.25rem;
    position: relative;
    z-index: 5
}

@media(min-width: 1200px) {
    .hero .hero-feature {
        padding: 2rem
    }
}

.hero .hero-feature .img-water {
    bottom: -2rem;
    left: -1.25rem;
    position: absolute;
    z-index: -1
}

.hero .hero-feature h2 {
    color: #317596;
    font-size: 18px
}

@media(min-width: 1200px) {
    .hero .hero-feature h2 {
        font-size: 24px
    }
}

@media(min-width: 1584px) {
    .hero .hero-feature h2 {
        font-size: 18px;
        min-height: 46px
    }
}

.hero .hero-feature h3 {
    color: #1f272a;
    font: 10px "Poppins", sans-serif
}

@media(min-width: 1200px) {
    .hero .hero-feature h3 {
        font-size: 12px
    }
}

@media(min-width: 1584px) {
    .hero .hero-feature h3 {
        font-size: 15px;
        min-height: 46px
    }
}

.hero .hero-feature p {
    color: #898989;
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 10px
}

@media(min-width: 1200px) {
    .hero .hero-feature p {
        font-size: 11px
    }
}

@media(min-width: 1584px) {
    .hero .hero-feature p {
        font-size: 12px
    }
}

.hero .hero-feature p strong {
    color: #54585a
}

@media(min-width: 1584px) {
    .hero .hero-feature p.company {
        min-width: 15px
    }
}

@media(min-width: 1584px) {
    .hero .hero-feature p.tag {
        min-width: 30px
    }
}

@media(min-width: 1584px) {
    .hero .hero-feature p.description {
        min-width: 45px
    }
}

.hero .hero-feature a {
    color: #14957f
}

.hero .hero-feature .cta {
    color: #fff;
    font-size: 10px
}

@media(min-width: 1200px) {
    .hero .hero-feature .cta {
        font-size: 12px
    }
}

@media(min-width: 1584px) {
    .hero .hero-feature .cta {
        font-size: 14px
    }
}

.hero .hero-feature .img-frame {
    aspect-ratio: 240/336
}

.hero .hero-feature .img-frame img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.welcome {
    overflow: hidden;
    padding-bottom: 2rem;
    padding-top: 3rem;
    position: relative
}

@media(min-width: 768px)and (max-width: 991px) {
    .welcome {
        padding: 50px 55px
    }
}

@media(min-width: 992px) {
    .welcome {
        margin-top: -65px;
        padding-bottom: 85px;
        padding-top: 140px
    }
}

@media(min-width: 1200px) {
    .welcome {
        padding-top: 180px
    }
}

@media(min-width: 1584px) {
    .welcome {
        padding-top: 240px
    }
}

.welcome .img-bg,
.welcome .img-bg-repeat {
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.welcome .img-bg-repeat {
    background-position: top left;
    background-repeat: repeat-x
}

.welcome .img-bg {
    background-position: center top;
    background-repeat: no-repeat
}

.welcome .img-bg:before {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
    content: "";
    height: 10px;
    left: 0;
    opacity: .5;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 10
}

.welcome .img {
    border: 1px solid #707070;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    height: 100%;
    position: relative;
    z-index: 1
}

.welcome .img img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media(min-width: 1584px) {
    .welcome .img:before {
        background: #82abbe;
        border-bottom: 1px solid #707070;
        border-top: 1px solid #707070;
        -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        content: "";
        height: calc(100% + 2px);
        position: absolute;
        right: calc(100% + 1px);
        top: -1px;
        width: 100vw;
        z-index: -1
    }
}

.welcome h2 {
    color: #ecf0f3
}

.welcome p,
.welcome li {
    color: #2e6d8c
}

.welcome .content-bg {
    isolation: isolate;
    position: relative
}

.welcome .content-bg:before {
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ecf0f3));
    background: linear-gradient(#fff 0%, #ecf0f3 100%);
    content: "";
    height: 100vw;
    left: -100vw;
    position: absolute;
    top: 0;
    width: 300vw;
    z-index: -1
}

@media(min-width: 992px) {
    .welcome .copy {
        height: 100%
    }
}

.info-content {
    background: #367a9a;
    overflow: hidden;
    padding: 60px 0;
    position: relative
}

@media(min-width: 768px) {
    .info-content {
        padding: 50px 55px
    }
}

@media(min-width: 992px) {
    .info-content {
        padding: 155px 0
    }
}

@media(min-width: 1200px) {
    .info-content {
        padding: 180px 0 150px
    }
}

@media(min-width: 1584px) {
    .info-content {
        padding: 205px 0 156px
    }
}

.info-content .img-bg-before,
.info-content .img-bg-after {
    background-position: center top;
    background-repeat: no-repeat;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 0
}

.info-content .img-bg-before {
    background-color: #2e6f8d;
    top: 0
}

@media(min-width: 992px) {
    .info-content .img-bg-before {
        height: 115px
    }
}

@media(min-width: 1200px) {
    .info-content .img-bg-before {
        height: 164px
    }
}

@media(min-width: 1584px) {
    .info-content .img-bg-before {
        height: 185px
    }
}

.info-content .img-bg-before:before {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
    content: "";
    height: 10px;
    left: 0;
    opacity: .5;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 10
}

.info-content .img-bg-after {
    bottom: 0
}

@media(min-width: 992px) {
    .info-content .img-bg-after {
        height: 115px
    }
}

@media(min-width: 1200px) {
    .info-content .img-bg-after {
        height: 100px
    }
}

@media(min-width: 1584px) {
    .info-content .img-bg-after {
        height: 115px
    }
}

.info-content .img-bg-after:before {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.25)));
    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
    bottom: 100%;
    content: "";
    height: 10px;
    left: 0;
    opacity: .5;
    position: absolute;
    width: 100%;
    z-index: 10
}

.info-content h2 {
    color: #ecf0f3
}

.info-content p,
.info-content li {
    color: #fff
}

@media(min-width: 1200px) {

    .info-content p,
    .info-content li {
        font-size: 18px
    }
}

@media(min-width: 1584px) {

    .info-content p,
    .info-content li {
        font-size: 20px
    }
}

.info-content p strong,
.info-content li strong {
    color: #ffdb76;
    font-weight: 600
}

.info-content ul {
    padding-left: 1.25rem
}

.info-content ul li+li {
    margin-top: .5rem
}

.info-content .neg-mov {
    position: relative;
    z-index: 1
}

@media(min-width: 992px) {
    .info-content .neg-mov {
        margin-top: -80px
    }
}

@media(min-width: 1440px) {
    .info-content .neg-mov {
        margin-top: -90px
    }
}

@media(min-width: 992px) {
    .info-content .copy {
        height: 100%
    }
}

.info-content .img {
    border: 1px solid #707070;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    height: 100%;
    position: relative
}

.info-content .img img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

@media(min-width: 1584px) {
    .info-content .img:before {
        background: #82abbe;
        border-bottom: 1px solid #707070;
        border-top: 1px solid #707070;
        -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        content: "";
        height: calc(100% + 2px);
        left: calc(100% + 1px);
        position: absolute;
        top: -1px;
        width: 100vh
    }
}

.info-content .join-row {
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e3e3e3));
    background: linear-gradient(#fff 0%, #e3e3e3 100%);
    -webkit-box-shadow: 2px 6px 5px rgba(0, 0, 0, .18);
    box-shadow: 2px 6px 5px rgba(0, 0, 0, .18);
    padding: 2rem 1.25rem
}

@media(min-width: 768px) {
    .info-content .join-row {
        padding: 36px 54px
    }
}

@media(min-width: 992px) {
    .info-content .join-row {
        padding: 1.25rem
    }
}

@media(min-width: 1200px) {
    .info-content .join-row {
        padding: 1.25rem 1.5rem
    }
}

@media(min-width: 1584px) {
    .info-content .join-row {
        padding: 2rem 1.25rem
    }
}

.info-content .join-row h2 {
    color: #367a9a
}

@media(min-width: 768px) {
    .info-content .join-row h2 {
        font-size: 40px
    }
}

@media(min-width: 992px) {
    .info-content .join-row h2 {
        font-size: 20px;
        margin: 0 1.25rem 0 0
    }
}

@media(min-width: 1200px) {
    .info-content .join-row h2 {
        font-size: 24px;
        margin: 0 2rem 0 0
    }
}

@media(min-width: 1584px) {
    .info-content .join-row h2 {
        font-size: 30px;
        margin: 0 2rem 0 0
    }
}

.today-featured-company {
    background-color: #2fa08d;
    padding-bottom: 65px
}

@media(min-width: 992px) {
    .today-featured-company {
        padding-bottom: 85px
    }
}

@media(min-width: 1200px) {
    .today-featured-company {
        padding-bottom: 100px
    }
}

@media(min-width: 1584px) {
    .today-featured-company {
        padding-bottom: 135px
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .today-featured-company {
        padding-inline: 55px;
        padding-top: 4rem
    }
}

@media(max-width: 767px) {
    .today-featured-company {
        padding-top: 40px
    }
}

.today-featured-company .wrap {
    position: relative
}

@media(max-width: 991px) {
    .today-featured-company .wrap {
        z-index: 1
    }
}

@media(min-width: 992px) {
    .today-featured-company .wrap {
        margin-top: -50px;
        position: relative;
        z-index: 5
    }
}

.today-featured-company .wrap:before {
    background: -webkit-gradient(linear, left top, left bottom, from(#ecf0f3), to(#fff));
    background: linear-gradient(#ecf0f3 0%, #fff 100%);
    content: "";
    -webkit-filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
    height: 100%;
    left: .75rem;
    position: absolute;
    top: 0;
    width: calc(100% - 1.5rem);
    z-index: -1
}

.today-featured-company h2 {
    color: #317596;
    font-size: 16px
}

@media(min-width: 768px) {
    .today-featured-company h2 {
        font-size: 30px
    }
}

@media(min-width: 992px) {
    .today-featured-company h2 {
        font-size: 20px
    }
}

@media(min-width: 1200px) {
    .today-featured-company h2 {
        font-size: 26px
    }
}

@media(min-width: 1584px) {
    .today-featured-company h2 {
        font-size: 30px
    }
}

.today-featured-company .product-meta h2 {
    color: #000
}

@media(min-width: 768px) {
    .today-featured-company .product-meta h2 {
        font-size: 25px
    }
}

@media(min-width: 992px) {
    .today-featured-company .product-meta h2 {
        font-size: 16px
    }
}

@media(min-width: 1200px) {
    .today-featured-company .product-meta h2 {
        font-size: 20px
    }
}

@media(min-width: 1584px) {
    .today-featured-company .product-meta h2 {
        font-size: 25px
    }
}

.today-featured-company .product-meta p {
    color: #1f272a;
    font-size: 15px
}

@media(min-width: 992px) {
    .today-featured-company .product-meta p {
        font-size: 10px
    }
}

@media(min-width: 1200px) {
    .today-featured-company .product-meta p {
        font-size: 13px
    }
}

@media(min-width: 1584px) {
    .today-featured-company .product-meta p {
        font-size: 15px
    }
}

.today-featured-company .product-meta .img img {
    mix-blend-mode: multiply
}

@media(min-width: 768px)and (max-width: 991px) {
    .today-featured-company a {
        max-width: 360px;
        width: 100%
    }
}

@media(min-width: 992px) {
    .today-featured-company a {
        font-size: 9px;
        min-width: 180px
    }
}

@media(min-width: 1200px) {
    .today-featured-company a {
        font-size: 12px
    }
}

@media(min-width: 1584px) {
    .today-featured-company a {
        font-size: 14px;
        min-width: 280px
    }
}

.product-companies {
    background: #fff;
    isolation: isolate;
    position: relative
}

@media(min-width: 768px)and (max-width: 991px) {
    .product-companies {
        padding: 50px 55px
    }
}

.product-companies .bg-color {
    background-color: #2fa08d;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    visibility: hidden;
    width: 100%
}

.product-companies .bg-color h2 {
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    visibility: hidden
}

.product-companies .bg-color:before {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 10
}

.product-companies .img {
    border: 1px solid #707070;
    position: relative;
    z-index: 200
}

@media(min-width: 1584px) {
    .product-companies .img:before {
        background: #a1c3bd;
        border-bottom: 1px solid #707070;
        border-top: 1px solid #707070;
        -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        content: "";
        height: calc(100% + 2px);
        position: absolute;
        right: calc(100% + 1px);
        top: -1px;
        width: 100vw;
        z-index: -1
    }
}

.product-companies h2 {
    color: #fff
}

.product-companies .copy {
    position: relative
}

.product-companies .copy .head {
    position: relative;
    z-index: 1
}

.product-companies .copy p,
.product-companies .copy li {
    color: #707070
}

@media(min-width: 768px) {

    .product-companies .copy p,
    .product-companies .copy li {
        font-size: 21px
    }
}

@media(min-width: 992px) {

    .product-companies .copy p,
    .product-companies .copy li {
        font-size: 14px
    }
}

@media(min-width: 1200px) {

    .product-companies .copy p,
    .product-companies .copy li {
        font-size: 18px
    }
}

@media(min-width: 1584px) {

    .product-companies .copy p,
    .product-companies .copy li {
        font-size: 21px
    }
}

.product-companies .copy p strong,
.product-companies .copy li strong {
    color: #2fa08d;
    font-weight: 600
}

.product-companies .copy li+li {
    margin-top: .5rem
}

@media(min-width: 768px) {
    .product-companies .content-bg {
        position: relative
    }
}

@media(min-width: 992px) {

    .product-companies .content-bg:before,
    .product-companies .content-bg:after {
        background: #fff;
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        width: 100vw
    }

    .product-companies .content-bg:before {
        right: 100%
    }

    .product-companies .content-bg:after {
        left: 100%
    }
}

.product-companies .img-bg-before {
    height: 232px;
    position: absolute;
    right: 0;
    width: 230px
}

@media(max-width: 767px) {
    .product-companies .img-bg-before {
        background-size: 100% auto;
        top: -100px
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .product-companies .img-bg-before {
        background-size: auto 100%;
        height: 360px;
        top: 0
    }
}

@media(min-width: 992px) {
    .product-companies .img-bg-before {
        background-size: auto 100%;
        bottom: 100%;
        height: 300px;
        width: 300px
    }
}

@media(min-width: 1200px) {
    .product-companies .img-bg-before {
        height: 477px;
        width: 475px
    }
}

.product-companies:before {
    background-color: #2fa08d;
    -webkit-box-shadow: 0px 6px 6px rgba(0, 0, 0, .16);
    box-shadow: 0px 6px 6px rgba(0, 0, 0, .16);
    content: "";
    height: 360px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -5
}

.join-today {
    padding: 40px 0
}

@media(min-width: 768px) {
    .join-today {
        padding: 0 55px 60px
    }
}

@media(min-width: 992px) {
    .join-today {
        padding: 25px 0 50px
    }
}

@media(min-width: 1200px) {
    .join-today {
        padding: 40px 0 60px
    }
}

@media(min-width: 1584px) {
    .join-today {
        padding: 40px 0 100px
    }
}

.join-today .row-join {
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e3e3e3));
    background: linear-gradient(#f8f8f8 0%, #e3e3e3 100%);
    -webkit-box-shadow: 2px 6px 5px rgba(0, 0, 0, .18);
    box-shadow: 2px 6px 5px rgba(0, 0, 0, .18);
    padding: 2rem 1.25rem
}

@media(min-width: 992px) {
    .join-today .row-join {
        padding: 1.25rem 1.5rem
    }
}

@media(min-width: 1200px) {
    .join-today .row-join {
        padding: 2rem 3rem
    }
}

.join-today .row-join h2 {
    color: #367a9a
}

@media(min-width: 992px) {
    .join-today .row-join h2 {
        font-size: 20px
    }
}

@media(min-width: 1200px) {
    .join-today .row-join h2 {
        font-size: 24px
    }
}

@media(min-width: 1584px) {
    .join-today .row-join h2 {
        font-size: 30px
    }
}

.join-today .row-join .cta {
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

@media(max-width: 767px) {
    .join-today .row-join .cta {
        margin-top: 1rem
    }
}

@media(max-width: 991px) {
    .join-today .row-join .cta {
        margin-top: 2rem
    }
}

@media(min-width: 992px) {
    .join-today .row-join .cta {
        margin-left: 2rem
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .learn-mission {
        padding-inline: 55px
    }
}

.learn-mission h2 {
    color: #387a98
}

.learn-mission p {
    color: #2e6d8c
}

@media(min-width: 758px) {
    .learn-mission p {
        font-size: 25px
    }
}

@media(min-width: 992px) {
    .learn-mission p {
        font-size: 14px
    }
}

@media(min-width: 1200px) {
    .learn-mission p {
        font-size: 18px
    }
}

@media(min-width: 1584px) {
    .learn-mission p {
        font-size: 21px
    }
}

.learn-mission .container {
    padding-bottom: 50px;
    position: relative
}

@media(min-width: 768px) {
    .learn-mission .container {
        padding-bottom: 80px
    }
}

@media(min-width: 1025px) {
    .learn-mission .container {
        padding-bottom: 100px
    }
}

@media(min-width: 1584px) {
    .learn-mission .container {
        padding-bottom: 125px
    }
}

.learn-mission .container .img-bg-img {
    bottom: 0;
    height: 477px;
    position: absolute;
    right: 0;
    width: 475px;
    z-index: -1
}

.learn-mission .heading {
    margin-bottom: 1.25rem
}

@media(min-width: 992px) {
    .learn-mission .heading {
        border-bottom: 1px solid #4288a6
    }
}

.learn-mission .heading h2 {
    color: #4187a5
}

@media(max-width: 991px) {
    .learn-mission .heading .social {
        border-top: 1px solid #4288a6;
        padding-top: 1rem;
        width: 100%
    }
}

.learn-mission .heading .social li a {
    background-color: #2fa08d;
    border-radius: 50%;
    color: #fff;
    font-size: 26px;
    height: 46px;
    width: 46px
}

@media(min-width: 768px) {
    .learn-mission .heading .social li a {
        font-size: 52px;
        height: 96px;
        width: 96px
    }
}

@media(min-width: 992px) {
    .learn-mission .heading .social li a {
        font-size: 18px;
        height: 32px;
        width: 32px
    }
}

@media(min-width: 1200px) {
    .learn-mission .heading .social li a {
        font-size: 26px;
        height: 46px;
        width: 46px
    }
}

.learn-mission .heading .social li+li {
    margin-left: 1rem
}

@media(min-width: 992px) {
    .learn-mission .heading .social li+li {
        margin-left: .5rem
    }
}

@media(min-width: 1200px) {
    .learn-mission .heading .social li+li {
        margin-left: 1rem
    }
}

@media(min-width: 992px) {
    .learn-mission .copy {
        height: 100%
    }
}

.learn-mission .sign-up-newsletter {
    background: -webkit-gradient(linear, left top, left bottom, from(#4288a6), to(#2e6c8b));
    background: linear-gradient(#4288a6 0%, #2e6c8b 100%);
    -webkit-box-shadow: 2px 6px 5px rgba(0, 0, 0, .18);
    box-shadow: 2px 6px 5px rgba(0, 0, 0, .18);
    padding: 2rem
}

@media(min-width: 992px) {
    .learn-mission .sign-up-newsletter {
        padding: 1.5rem
    }
}

@media(min-width: 1584px) {
    .learn-mission .sign-up-newsletter {
        padding: 2rem
    }
}

.learn-mission .sign-up-newsletter h2 {
    color: #fff;
    font-size: 16px;
    font-weight: 600
}

@media(min-width: 768px) {
    .learn-mission .sign-up-newsletter h2 {
        font-size: 30px
    }
}

@media(min-width: 992px) {
    .learn-mission .sign-up-newsletter h2 {
        font-size: 18px
    }
}

@media(min-width: 1200px) {
    .learn-mission .sign-up-newsletter h2 {
        font-size: 24px
    }
}

@media(min-width: 1584px) {
    .learn-mission .sign-up-newsletter h2 {
        font-size: 30px
    }
}

.learn-mission .sign-up-newsletter h3,
.learn-mission .sign-up-newsletter p {
    color: #ccc;
    font: 12px "Poppins", sans-serif
}

@media(min-width: 768px) {

    .learn-mission .sign-up-newsletter h3,
    .learn-mission .sign-up-newsletter p {
        font-size: 20px
    }
}

@media(min-width: 992px) {

    .learn-mission .sign-up-newsletter h3,
    .learn-mission .sign-up-newsletter p {
        font-size: 13px
    }
}

@media(min-width: 1200px) {

    .learn-mission .sign-up-newsletter h3,
    .learn-mission .sign-up-newsletter p {
        font-size: 16px
    }
}

@media(min-width: 1584px) {

    .learn-mission .sign-up-newsletter h3,
    .learn-mission .sign-up-newsletter p {
        font-size: 20px
    }
}

.learn-mission .sign-up-newsletter form input {
    background: #fff;
    border: 1px solid #a5a3a3;
    height: 44px;
    text-align: center;
    width: 100%
}

@media(min-width: 768px) {
    .learn-mission .sign-up-newsletter form input {
        font: 22px "Poppins", sans-serif;
        height: 62px
    }
}

@media(min-width: 992px) {
    .learn-mission .sign-up-newsletter form input {
        font-size: 14px;
        height: 44px
    }
}

@media(min-width: 1200px) {
    .learn-mission .sign-up-newsletter form input {
        font-size: 18px;
        height: 55px
    }
}

.learn-mission .sign-up-newsletter form button {
    width: 100%
}

@media(min-width: 768px) {
    .learn-mission .sign-up-newsletter form button {
        font-size: 20px
    }
}

@media(min-width: 992px) {
    .learn-mission .sign-up-newsletter form button {
        font-size: 14px
    }
}

@media(min-width: 1200px) {
    .learn-mission .sign-up-newsletter form button {
        font-size: 20px
    }
}

h2 {
    font: 700 18px "Poppins", sans-serif
}

@media(min-width: 768px) {
    h2 {
        font-size: 40px
    }
}

@media(min-width: 992px) {
    h2 {
        font-size: 24px
    }
}

@media(min-width: 1200px) {
    h2 {
        font-size: 32px
    }
}

@media(min-width: 1584px) {
    h2 {
        font-size: 40px
    }
}

p,
li {
    font: 12px/1.25 "Poppins", sans-serif
}

@media(min-width: 768px) {

    p,
    li {
        font-size: 26px
    }
}

@media(min-width: 992px) {

    p,
    li {
        font-size: 14px
    }
}

@media(min-width: 1200px) {

    p,
    li {
        font-size: 18px
    }
}

@media(min-width: 1584px) {

    p,
    li {
        font-size: 24px
    }
}

p a,
li a {
    color: #2f9f8c
}

.footer {
    background-color: #2f7090;
    background-position: top right;
    background-repeat: no-repeat;
    background-size: auto 100%
}

.footer .footer-upper {
    padding-block: 5rem;
    position: relative;
    z-index: 1
}

.footer .footer-bottom {
    background: #2fa08d
}

.footer .footer-bottom p {
    margin-bottom: 0
}

@media(min-width: 768px)and (max-width: 991px) {
    .footer .footer-bottom p {
        font-size: 24px
    }
}

@media(max-width: 767px) {
    .footer .footer-bottom p {
        font-size: 12px
    }
}

.footer .logo-hex img {
    height: auto
}

@media(min-width: 992px) {
    .footer .logo-hex img {
        width: 140px
    }
}

@media(min-width: 1200px) {
    .footer .logo-hex img {
        width: 205px
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .footer .logo-text img {
        height: 77px;
        width: auto
    }
}

.footer h2 {
    color: #fff;
    font: 600 18px "Poppins", sans-serif
}

@media(min-width: 992px) {
    .footer h2 {
        font-size: 12px
    }
}

@media(min-width: 1200px) {
    .footer h2 {
        font-size: 18px
    }
}

.footer li {
    color: #a0e7ff;
    font: 15px "Poppins", sans-serif
}

@media(min-width: 992px) {
    .footer li {
        font-size: 10px
    }
}

@media(min-width: 1200px) {
    .footer li {
        font-size: 15px
    }
}

.footer li+li {
    margin-top: 10px
}

.footer p {
    color: #fff;
    font: 15px "Poppins", sans-serif
}

@media(min-width: 768px) {
    .footer p {
        font-size: 30px
    }
}

@media(min-width: 992px) {
    .footer p {
        font-size: 10px
    }
}

@media(min-width: 1200px) {
    .footer p {
        font-size: 15px
    }
}

.footer .link a {
    text-decoration: none
}

.footer .social-footer a {
    height: 40px
}

@media(max-width: 991px) {
    .footer .social-footer a {
        font-size: 24px;
        height: 60px;
        width: 80px
    }
}

@media(max-width: 767px) {
    .footer .social-footer a {
        font-size: 20px;
        height: 40px;
        width: 40px
    }
}

.footer .social-footer a.facebook {
    background: #3b5998
}

.footer .social-footer a.twitter {
    background: #55acee
}

.footer .social-footer a.linkedin {
    background: #0077b5
}

.footer .social-footer a.pinterest {
    background: #cb2027
}

.footer .social-footer a.youtube {
    background: #b00
}

.footer a {
    color: inherit
}

.star-rate li {
    color: #14957f;
    font-size: 17px
}

.star-rate li+li {
    margin-left: .5rem
}

@media(max-width: 767px) {
    .over-flow img {
        height: auto;
        width: 100%
    }
}

@media(max-width: 991px) {
    .img-shadow {
        -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, .16)
    }
}

.cta {
    background: #2f9f8c;
    border: 1px solid #2f9f8c;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    color: #fff;
    font: 500 12px/1 "Poppins", sans-serif;
    padding: 1rem 1.25rem
}

@media(max-width: 991px) {
    .cta {
        padding: 1rem 1.25rem;
        width: 100%
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .cta {
        font-size: 20px;
        padding: 2rem
    }
}

@media(min-width: 992px) {
    .cta {
        font-size: 12px;
        padding: .8rem
    }
}

@media(min-width: 1200px) {
    .cta {
        font-size: 14px
    }
}

@media(min-width: 1584px) {
    .cta {
        font-size: 18px
    }
}

.cta.white {
    background: #fff;
    color: #2f9f8c
}

.cta.blue {
    background: #2f708f
}

.container.wide {
    max-width: 1584px
}

/* =========================================================
   NSPR BLOG TYPOGRAPHY & SPACING FIX (HEADER/FOOTER SAFE)
   ========================================================= */

/* ---------- Base Article Text ---------- */
main p,
main li {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #1f272a;
  margin-bottom: 1.1em;
}

@media (min-width: 1200px) {
  main p,
  main li {
    font-size: 17px;
  }
}

/* ---------- Headings (Fixes Oversized H Tags) ---------- */
main h1 {
  font-size: 2.1rem;
  line-height: 1.25;
  margin: 0 0 0.75em;
  font-weight: 700;
}

/* ---------- FINAL H2 SIZE OVERRIDE (BREAKPOINT SAFE) ---------- */

/* --- Blog Page Title H2 (Top of Page) --- */
.page-title h2 {
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* --- Article Section H2 Headings --- */
.site-container h2 {
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* --- Desktop Cap (Still Tight) --- */
@media (min-width: 992px) {
  .page-title h2,
  .site-container h2 {
    font-size: 21px !important;
  }
}


main h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 2rem 0 0.6rem;
  font-weight: 600;
}

main h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

/* ---------- Categories & Tags Spacing ---------- */
main .blog-meta,
main .post-meta,
main .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 1rem 0 1.75rem;
}

main .blog-meta a,
main .post-meta a,
main .article-meta a {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: #ecf0f3;
  color: #317596;
  font-weight: 500;
  text-decoration: none;
}

/* ---------- Clean Vertical Rhythm ---------- */
main > * + * {
  margin-top: 1.2em;
}

main ul,
main ol {
  padding-left: 1.2rem;
  margin: 1.2rem 0;
}

main li + li {
  margin-top: 0.4rem;
}


/*# sourceMappingURL=app.min.css.map */