@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700);

body {
    font-family: Montserrat,sans-serif
}

/* Layout variables and safe offset for sticky header */
:root{ --header-height:140px; }
body{ scroll-padding-top: var(--header-height); }

/* Brand system */
:root{
    --brand:#fdad00;
    --brand-text:#1f2d3d;
    --ink:#0f172a;
    --muted:#6c757d;
    --bg-soft:#fffaf0;
}

.btn-primary{background:var(--brand)!important;border-color:var(--brand)!important;color:var(--brand-text)!important}
.btn-primary:hover{filter:brightness(0.95)}

/* Homepage layout helpers */
.eh-hero{padding:80px 0 40px;border-bottom:1px solid rgba(0,0,0,.06)}
.eh-hero{background:linear-gradient(180deg, #ffffff 0%, #fffaf6 100%)}
.eh-hero .eyebrow{display:inline-block;background:rgba(253,173,0,.15);color:#b07a00;border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px;margin-bottom:18px}
.eh-hero h1{font-size:52px;line-height:1.1;margin-bottom:12px;color:var(--ink)}
.eh-hero .sub{font-size:18px;color:var(--muted);max-width:640px}
.eh-hero .hero-bullets{margin-top:14px}
.eh-hero .hero-bullets li{margin:6px 0}

.eh-features{padding:50px 0}
.eh-card{background:rgba(255,255,255,0.9);backdrop-filter:saturate(180%) blur(6px);border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:22px;height:100%;box-shadow:0 8px 24px rgba(0,0,0,.06);transition:transform .2s ease, box-shadow .2s ease}
.eh-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.eh-card .icon{width:42px;height:42px;border-radius:8px;background:rgba(253,173,0,.15);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.eh-card h5{margin:6px 0 6px}
.eh-card p{color:#6c757d;margin:0}

.eh-trust{padding:30px 0;background:#fffaf0;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.eh-trust .badge{display:inline-block;border:1px dashed rgba(0,0,0,.15);padding:10px 14px;border-radius:10px;background:#fff;margin:6px 8px;font-weight:600}

/* Sticky CTA bar */
.sticky-cta{position:fixed;left:0;right:0;bottom:16px;z-index:999;background:rgba(255,255,255,0.9);backdrop-filter:saturate(180%) blur(6px);border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 30px rgba(0,0,0,.12);margin:0 auto;max-width:980px;border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:12px}
@media(max-width:575.98px){.sticky-cta{left:12px;right:12px}}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.05s}
.reveal-delay-2{transition-delay:.1s}
.reveal-delay-3{transition-delay:.15s}

/* Modern UI frame for hero mock */
.ui-frame{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.06);background:#fff}
.ui-frame img{display:block;width:100%;height:auto}
.ui-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(253,173,0,0.06) 50%, rgba(255,255,255,0) 100%);pointer-events:none}

/* Accordion alignment for FAQ */
.eh-accordion .card{border:1px solid rgba(0,0,0,.06);border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.eh-accordion .card + .card{margin-top:8px}
.eh-accordion .card-header{background:#fff;border-bottom:1px solid rgba(0,0,0,.06);border-top-left-radius:14px;border-top-right-radius:14px}
.eh-accordion .card-body{color:#4f5d6b}
.eh-accordion .btn-link{color:#1f2d3d;text-decoration:none;width:100%}
.eh-accordion .btn-link:hover{text-decoration:none}
.eh-accordion .btn-link:focus{box-shadow:none}

/* Pricing page FAQ alignment */
#faq{padding-top:24px;margin-top:0}
#faq .accordion{margin-top:8px}

/* FAQ desktop alignment and typography */
#faq{padding-top:12px;margin-top:0}
#faq .text-center{margin-bottom:20px}
.eh-accordion{max-width:900px;margin-left:auto;margin-right:auto}
.eh-accordion .card{border:1px solid rgba(0,0,0,.08);border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.eh-accordion .card-header{background:#fff;border-bottom:1px solid rgba(0,0,0,.06);border-top-left-radius:12px;border-top-right-radius:12px;padding:0}
.eh-accordion .btn-link{color:#1f2d3d;text-decoration:none;width:100%;padding:14px 18px;font-weight:600;line-height:1.35}
.eh-accordion .btn-link:hover,.eh-accordion .btn-link:focus{text-decoration:none;box-shadow:none}
.eh-accordion .card-body{color:#4f5d6b;padding:14px 18px}
.eh-accordion .card + .card{margin-top:10px}

@media (min-width: 992px){
  #faq{padding-top:8px}
  .eh-accordion{max-width:840px}
}

/* FAQ redesigned layout */
#faq{padding:24px 0 40px}
#faq .faq-grid{display:grid;grid-template-columns:1fr;gap:12px}
#faq .faq-item{border:1px solid rgba(0,0,0,.06);border-radius:12px;background:#fff}
#faq .faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;font-weight:600;color:#1f2d3d;background:transparent;border:0}
#faq .faq-q:focus{outline:none;box-shadow:none}
#faq .faq-a{padding:12px 16px;color:#4f5d6b;border-top:1px solid rgba(0,0,0,.06)}
#faq .caret{margin-left:12px;transition:transform .2s ease}
#faq .faq-q[aria-expanded="true"] .caret{transform:rotate(180deg)}
@media(min-width:992px){
  #faq .faq-grid{grid-template-columns:1fr 1fr;gap:14px;max-width:1040px;margin:0 auto}
}

.header-right {
    display: none
}

.navbar-item {
    color: #fff;
    padding: 10px
}

.navbar-item:hover {
    color: #58d5f7;
    text-decoration: none
}

.hero-background {
    position: relative;
    background: -webkit-linear-gradient(117deg,#6057f6,#d84763);
    background: linear-gradient(117deg,#6057f6,#d84763);
    background: -webkit-radial-gradient(#c24a7e,#6956eb);
    background: radial-gradient(#c24a7e,#6956eb)
}

.bold {
    font-weight: 600
}

.light {
    font-weight: 300
}

.header {
    padding-top: 35px;
    width: 100%;
    height: 100px;
    position: relative;
    z-index: 999
}

.logo {
    max-width: 100px;
    padding-left: 0;
    padding-top: 5px
}

/* Brand logo image */
.brand-logo{height:120px;width:auto;display:inline-block;margin-right:10px;background:#fffaf0;border-radius:12px;padding:6px 10px;border:1px solid rgba(0,0,0,.06)}
@media(min-width:992px){.brand-logo{height:120px}}

.header-btn {
    background-color: #0abceb;
    border-radius: 10px;
    border: #0abceb;
    padding: 15px 30px;
    width: auto;
    height: 51px;
    color: #fff;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
}

.header-btn:hover {
    background-color: #58d5f7;
    color: #fff;
    border-radius: 20px;
    -webkit-box-shadow: -1px 9px 46px -17px #2b2b2b;
    -moz-box-shadow: -1px 9px 46px -17px #2b2b2b;
    box-shadow: -1px 9px 46px -17px #2b2b2b
}

.hero {
    position: relative;
    z-index: 999;
    padding-bottom: 60px
}

.mouse {
    position: absolute;
    left: 0;
    right: 0;
    top: 85%;
    margin: auto;
    padding-bottom: 40px;
    text-align: center;
    cursor: pointer;
    transition: transform .4s ease
}

.mouse:hover {
    transform: translateY(5px)
}

.macbook {
    margin: auto;
    padding-bottom: 35px
}

.hero-right {
    color: #fff;
    text-align: center
}
/*
.ipad,.ipad-screen {
    display: none
}*/

div#contact-us {
    margin-top: 100px;
}


.hero-btn {
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    background-color: #25f18b;
    border-radius: 10px;
    border: 1px solid #25f18b;
    width: 210px;
    height: 51px;
    color: #fff;
    margin: 30px auto
}

.hero-btn:hover {
    background-color: #6affb4;
    color: #fff;
    border-radius: 20px;
    -webkit-box-shadow: -1px 9px 46px -17px #2b2b2b;
    -moz-box-shadow: -1px 9px 46px -17px #2b2b2b;
    box-shadow: -1px 9px 46px -17px #2b2b2b
}

.header-headline {
    padding-top: 0;
    padding-bottom: 15px;
    text-align: center
}

.header-running-text {
    text-align: center;
    max-width: 287px;
    line-height: 1.5;
    margin: auto
}

.logos-section {
    background-color: #f9fafa;
    text-align: center
}

/* Header navigation submenu alignment */
#topnav .container{position:relative;z-index:101}
.navigation-menu{position:relative;list-style:none;margin:0;padding:0}
.navigation-menu > li{position:relative;display:inline-block}
.navigation-menu > li > a{display:inline-block;padding:8px 12px;color:inherit}
.has-submenu > .submenu{position:absolute;top:100%;left:0;min-width:180px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:8px 0;margin-top:8px;box-shadow:0 10px 24px rgba(0,0,0,.08);z-index:1000;display:none}
.has-submenu:hover > .submenu{display:block}
.submenu li{list-style:none}
.submenu li a{display:block;padding:8px 14px;color:#1f2d3d;white-space:nowrap}
.submenu li a:hover{background:rgba(0,0,0,.04);text-decoration:none}
.menu-extras{position:relative;z-index:102}

/* Right-align submenu if nav is right aligned */
.navigation-menu.align-right > li { float: right; }
.navigation-menu.align-right > li .submenu{right:0;left:auto}

@media (max-width: 991.98px){
  .navigation-menu > li{display:block}
  .has-submenu > .submenu{position:static;box-shadow:none;border:none;margin-top:0;padding:0;display:block}
  .submenu li a{padding-left:24px}
}

/* Dark enterprise footer styling */
.site-footer{background:#000000;color:#ffffff}
.site-footer h6{color:#ffffff;margin-bottom:10px;font-weight:600}
.site-footer a{color:#ffffff}
.site-footer a:hover{color:#fdad00;text-decoration:none}
.site-footer .text-muted{color:#e5e7eb !important}
.site-footer .container{position:relative}
.site-footer .row + .d-flex{border-top:1px solid rgba(255,255,255,0.15)}

/* Force white typography in footer */
.site-footer,
.site-footer p,
.site-footer small,
.site-footer span,
.site-footer li,
.site-footer ul,
.site-footer div{color:#ffffff !important}
.site-footer h6{color:#ffffff !important}
.site-footer a{color:#ffffff !important}
.site-footer a:hover{color:#fdad00 !important;text-decoration:none !important}
.site-footer .row + .d-flex{border-top:1px solid rgba(255,255,255,0.2) !important}
.site-footer img[alt="EngageHRIS"]{background:transparent !important;border:1px solid rgba(255,255,255,0.1) !important}

.logos {
    padding: 30px;
    max-width: 100%
}

/* Solid, lightly tinted header background for readability */
#topnav{background:#fffaf0;border-bottom:1px solid rgba(0,0,0,.06)}
#topnav.defaultscroll.sticky{background:#fffaf0}
#topnav{position:sticky;top:0;z-index:1000}
#topnav .navigation-menu > li > a{color:#1f2d3d}
#topnav .logo span, #topnav .logo .text-primary{color:#1f2d3d}
#topnav .header-btn.btn.btn-primary{background:#fdad00;border-color:#fdad00;color:#1f2d3d}
.defaultscroll, .defaultscroll.sticky{background:#fffaf0 !important;box-shadow:0 4px 12px rgba(0,0,0,.04)}

/* Ensure first main section clears the sticky header */
.page-offset{padding-top:var(--header-height)}
.eh-hero:first-of-type{padding-top:calc(40px + var(--header-height))}
@media (max-width: 991.98px){
  :root{ --header-height:72px; }
}

.features-section {
    background-color: #000;
    padding-top: 40px;
    text-align: center;
    padding-bottom: 90px;
    position: relative
}

.features-headline {
    color: #fff;
    padding-bottom: 30px
}

.features-container {
    max-width: 830px;
    margin: auto
}

.feature {
    text-align: center;
    padding: 30px
}

.feature-no-display {
    opacity: 0;
    -webkit-transform: translateY(15%) translateZ(0);
    -moz-transform: translateY(15%) translateZ(0);
    transform: translateY(15%) translateZ(0);
    -webkit-transition: -webkit-transform .4s ease-out,opacity .4s ease;
    -moz-transition: -moz-transform .4s ease-out,opacity .4s ease;
    -o-transition: -o-transform .4s ease-out,opacity .4s ease;
    transition: transform .4s ease-out,opacity .4s ease
}

.feature-display {
    opacity: 1;
    -webkit-transform: translateY(0) translateZ(0);
    -moz-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0)
}

.feature-display-mid {
    transition-delay: .15s
}

.feature-display-last {
    transition-delay: .3s
}

.feature-icon {
    background-color: #fff;
    border-radius: 50%;
    height: 5.625em;
    width: 5.625em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    box-shadow: 4px 14px 28px #393939
}

.feature-head-text {
    color: #fff;
    padding-top: 15px
}

.feature-subtext {
    color: #fff;
    padding-top: 0
}

.feature-img {
    max-width: 23px
}

.white-section {
    margin: auto;
    overflow: hidden;
    background-color: #fff
}

.white-section-text {
    text-align: center
}

.imac-section-header {
    padding-bottom: 35px
}

.imac-section-desc {
    text-align: center;
    font-weight: 300;
    font-size: 24px;
    line-height: 40px;
    max-width: 400px;
    margin: auto;
    padding-bottom: 40px
}

.imac-screen {
    padding-top: 60px;
    padding-bottom: 40px;
    width: 100%;
}

.macbook {
    position: relative;
    z-index: 999
}

.pricing-background {
    background-color: #f8f9f9
}

.pricing-section-header {
    padding-top: 75px
}

.pricing-section-sub {
    padding-top: 10px;
    color: grey
}

.pricing-table {
    padding: 0 0 100px;
    max-width: 1050px;
    margin: auto
}

.mid-plan,.plan {
    text-align: center;
    max-width: 390px;
    margin: auto;
    height: 430px;
    padding: 36px 15px 45px;
    position: relative
}

.mid-plan {
    box-shadow: 5px 8.7px 40px rgba(99,117,138,.3);
    border-radius: 7px
}

ul {
    list-style-type: none
}

.plan li {
    position: relative
}

.mid-plan li:before,.plan li:before {
    font-family: Material Icons;
    content: "check";
    color: #3aeb8c;
    position: absolute;
    left: -10px;
    position: relative
}

.plan-title {
    font-size: 18px;
    padding-bottom: 5px
}

.plan-cost {
    font-size: 45px
}

.plan-cost:before {
    content: "$"
}

.monthly {
    font-size: 12px;
    padding-bottom: 20px
}

.plan-features {
    -webkit-padding-start: 0
}

.plan-btn {
    background-color: #0abceb;
    border-radius: 10px;
    border: #0abceb;
    width: 164px;
    height: 51px;
    color: #fff;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    display: block;
    padding: 15px;
    margin: auto;
    position: absolute;
    left: calc(50% - 82px);
    bottom: 50px
}

.plan-btn:hover {
    background-color: #58d5f7;
    color: #fff;
    border-radius: 20px;
    -webkit-box-shadow: -1px 9px 46px -17px #2b2b2b;
    -moz-box-shadow: -1px 9px 46px -17px #2b2b2b;
    box-shadow: -1px 9px 46px -17px #2b2b2b
}

.team {
    padding-bottom: 50px;
    padding-top: 60px
}

.team-container {
    text-align: center;
    margin: auto;
    max-width: 920px
}

.team-section-header {
    padding-bottom: 90px
}

.team-member {
    padding-bottom: 60px
}

.team-member-position {
    color: #747474
}

.team-member-text {
    padding-top: 25px
}

.team-social-icon {
    padding: 7px
}

.blue-section {
    background-color: #0abceb;
    color: #fff;
    margin: auto;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 40px
}

.blue-section-subtext {
    max-width: 200px;
    max-width: 250px;
    line-height: 22px;
    font-size: 15px;
    margin: auto
}

.email-form {
    display: flex;
    justify-content: center;
    align-items: center
}

.email-input {
    background-color: #fff;
    border-radius: 10px;
    width: 210px;
    color: grey;
    border: none
}

.email-input,.submit-btn {
    height: 51px;
    margin-top: 20px
}

.submit-btn {
    background-color: #25f18b;
    border-radius: 10px;
    color: #fff;
    width: 100%;
    margin-left: 3px;
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}

.submit-btn:hover {
    background-color: #6affb4;
    color: #fff;
    border-radius: 20px;
    -webkit-box-shadow: -1px 9px 46px -17px #2b2b2b;
    -moz-box-shadow: -1px 9px 46px -17px #2b2b2b;
    box-shadow: -1px 9px 46px -17px #2b2b2b
}

#newsletter-spinner {
    display: none
}

.email-form-div {
    max-width: 60px;
    padding: 20px
}

.footer {
    background-color: #464646;
    padding-top: 20px;
    padding-bottom: 20px
}

.webscope-text {
    color: #fff;
    font-size: 12px;
    padding-right: 7px
}

.webscope {
    text-align: center;
    margin-top: -5px
}

.social-links {
    float: none;
    text-align: center;
    padding-top: 10px
}

.social-link {
    margin-right: 15px
}

.strips {
    position: absolute;
    max-width: 1280px
}

@media only screen and (min-width: 768px) {
    .header-right {
        display:block;
        float: right;
        padding: 6px 20px
    }

    .header-headline {
        text-align: left;
        max-width: 380px;
        padding-top: 75px
    }

    .header-running-text {
        line-height: 30px;
        margin: 0;
        text-align: left
    }

    .hero {
        padding-bottom: 230px
    }

    .hero-button {
        margin-top: 30px;
        margin-bottom: 30px
    }

    .hero-right {
        text-align: left
    }
    .ipad img{
        width: 100%;
    }
/*
    .ipad {
        display: block;
        position: absolute;
        right: 100px;
        z-index: 1;
        height: 427px;
        margin-top: 45px;
        transform: rotate(-6deg);
        max-width: 45%;
        border-radius: 25px;
        background: #fff;
        box-shadow: inset 0 4px 7px 1px #fff,inset 0 -5px 20px rgba(173,186,204,.25),0 0 33px rgba(0,21,64,.14),0 10px 20px rgba(0,21,64,.05)
    }

    .ipad-screen {
        display: block;
        padding-bottom: 40px;
        margin-top: 19px;
        right: 1px
    }*/

    .feature-section {
        padding-top: 60px
    }

    .features-headline {
        color: #fff;
        padding-bottom: 70px;
            margin-top: 35px;
    }

    .logos {
        padding: 30px;
        max-width: 100%
    }

    .white-section-text {
        text-align: justify;
        padding-top: 80px;
        padding-left: 100px
    }

    .imac-section-desc {
        font-weight: 300;
        font-size: 15px;
        line-height: 30px;
        max-width: 400px;
        margin: inherit;
        text-align: left
    }

    .pricing-table {
        padding: 70px 0 100px;
        max-width: 1050px;
        margin: auto
    }
}

.team {
    padding-bottom: 130px
}

.team-member {
    text-align: center
}

.email-form-div {
    max-width: inherit;
    margin: auto
}

.webscope {
    margin-top: 0
}

.social-links {
    float: right
}

.request-body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.card {
    background-color: #fff;
    width: 650px;
    border-radius: 26px;
    border: 1px solid #ccc
}

.card,.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.card-body {
    width: 100%;
    padding: 20px
}

.card-header {
    padding: 10px;
    font-size: 32px
}

.card-body>.row {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center
}

/*.row>div {
    padding: 10px;
    font-size: 15px;
    flex: 1
}*/

.status-selection {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px
}

.status-selection>div {
    padding: 10px
}

.client-counter {
    color: #fff;
    font-size: 24px
}
 .ipad img{
        width: 100%;
    }



@media (max-width: 900px){
    div#contact-us {
        margin-top: 91px;
    }
}
@media (max-width: 499px){
   div#contact-us {
    margin-top: 166px;
}
}