.housead
{
   
}

a:focus, a:active {
    outline: none !important;
}

a.btn:focus, a.btn:active {
    outline: none !important;
}

button:focus, button:active {
    outline: none !important;
}





.exit-pop-bg {
    background: hsla(214, 100%, 34%, 1) !important;
    background: linear-gradient(225deg, hsla(214, 100%, 34%, 1) 0%, hsla(183, 73%, 63%, 1) 100%) !important;
    background: -moz-linear-gradient(225deg, hsla(214, 100%, 34%, 1) 0%, hsla(183, 73%, 63%, 1) 100%) !important;
    background: -webkit-linear-gradient(225deg, hsla(214, 100%, 34%, 1) 0%, hsla(183, 73%, 63%, 1) 100%) !important;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#004AAD", endColorstr="#5DE0E6", GradientType=1 ) !important;
}


.solution-hero-grad-bg-blue {
    background: hsla(214, 100%, 34%, 1);
    background: linear-gradient(225deg, hsla(214, 100%, 34%, 1) 0%, hsla(183, 73%, 63%, 1) 100%);
    background: -moz-linear-gradient(225deg, hsla(214, 100%, 34%, 1) 0%, hsla(183, 73%, 63%, 1) 100%);
    background: -webkit-linear-gradient(225deg, hsla(214, 100%, 34%, 1) 0%, hsla(183, 73%, 63%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#004AAD", endColorstr="#5DE0E6", GradientType=1 );
}


.solution-hero-grad-bg-dark {
    background: hsla(243, 67%, 18%, 1);
    background: radial-gradient(circle, hsla(243, 67%, 18%, 1) 0%, hsla(0, 0%, 0%, 1) 100%);
    background: -moz-radial-gradient(circle, hsla(243, 67%, 18%, 1) 0%, hsla(0, 0%, 0%, 1) 100%);
    background: -webkit-radial-gradient(circle, hsla(243, 67%, 18%, 1) 0%, hsla(0, 0%, 0%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#120F4D", endColorstr="#000000", GradientType=1 );
}

.featureRow {
    padding-top: 75px;
    padding-bottom: 75px;
}

.post-item .post-title {
    font-size: 36px;
    text-align: center;
    line-height: 50px;
}

.vecAction {
    margin: 5px;
    width: 170px;
}


.megaModulesMenu
{
    font-size:17px;
    line-height: 28px;
}

.mega-nav-section-title {
    font-size: 16px;
}

.megaModulesMenu  a:hover {

    font-weight:600;
}

.testimonial-text {
    font-size: 20px;
}

.calendly-inline-widget, .simplebar-content-wrapper {
    overflow: hidden !important;
}


.wp-block-body p {
    color: #333333;
    font-size: 18px;
    line-height: 30px;
    font-family: 'Lato', sans-serif;
}


.check-table tr td i {
    color: #2491eb;
}


.flex-video {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
    margin-bottom: 16px;
    overflow: hidden;
    border-width: 0px;
}

.print-only {
    display: none;
}

.featureLink {
    cursor: pointer !important;
    text-decoration: none !important;
}

.featureMediaHeader {
    font-size: 2em;
    padding-top: 30px;
    padding-bottom: 30px;
    line-height: 50px;
}

.featureMedia {
    /**border: 1px solid #ced0d4;**/
    transition: transform .4s ease-in-out;
    border-radius: 8px;
    background: #f0eef0;
    -o-object-fit: cover;
    object-fit: cover;
    box-shadow: inset 0 1px 1px 0 hsl(0deg 0% 100% / 15%), 0 50px 100px -20px rgb(50 50 93 / 30%), 0 30px 60px -30px rgb(0 0 0 / 50%), -10px 10px 60px -10px rgb(103 178 111 / 30%);
}

    .featureMedia:hover {
        transform: rotate(-.6deg );
        
    }

.featureBoxClick:hover {
    border: 1px solid #fbb03b;
}

.featureBox {
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px 0px, rgba(0, 0, 0, 0.16) 0px 10px 20px 0px;
}



@media print {
    .no-print, .no-print * {
        display: none !important;
    }

    .print-only {
        display: block;
    }
}

sup {
    font-size: 11px;
}
 
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
 
.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width:0px;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}

ul.categories>li>a:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
}

.poptin-credit {
    display: none;
}


.carousel-1 .caption-bottom {
    width: 100%;
    padding: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
}


.navbar-wp .navbar-nav > li > a {
    border-top: 3px solid transparent;
    padding: 28px 16px;
    margin-right: 0;
    font-size: 18px;
    font-weight: 800;
    font-family: "Roboto", sans-serif;
    color: #2491eb;
    text-transform: uppercase;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}



    .navbar-wp .navbar-nav > li > a:hover, .navbar-wp .navbar-nav > li > a:focus {
        color: #000;
        background-color: #fff;
        border-top: 3px solid rgba(255, 255, 255, .4);        
    }




.navbar-wp .navbar-nav > .open > a, .navbar-wp .navbar-nav > .open > a:hover, .navbar-wp .navbar-nav > .open > a:focus {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    border-top: 3px solid rgba(255, 255, 255, .4);
}

    .navbar-wp .navbar-nav > .open > a, .navbar-wp .navbar-nav > .open > a:hover, .navbar-wp .navbar-nav > .open > a:focus {
        color: #000;
        background-color: #fff;
        border-color: #fff;
        border-top: 3px solid rgba(255, 255, 255, .4);
    }




.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #fff;
}

.navbar-wp .dropdown-menu > li > a:hover
{
background-color: #000;
}






/*
.pg-opt {
    border-bottom: 1px solid #eee;
    background: #000;
    color: #fff;
}

.pg-opt h2 {
    color: #fff;
}

.pg-opt .breadcrumb a {
    color: #fff;
}*/
.equal {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

body {
    color: #333333;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.bg-white {
    color: #333333;
}

.sectiontext {
    /*
     font-size : 18px;
     line-height : 30px;
     font-family: 'Lato', sans-serif;   */

    color: #333333;
    font-weight: 400;
    line-height: 32px;
    font-size: 20px;
    font-family: 'Lexend', sans-serif;
}

@media (min-width: 768px) {
    .table-sectiontext {
        color: #333333;
        font-weight: 400;
        line-height: 32px;
        font-size: 20px;
        font-family: 'Lexend', sans-serif;
    }
}






    .sectionheader {
        font-family: 'Lato', sans-serif;
        font-weight: 300;
    }

    .sectionbutton {
        padding: 10px;
        margin: 20px;
        width: 250px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        text-transform: none;
    }


    footer .col p {
        font-size: 16px;
        color: white;
    }


    .footer .col ul li {
        color: white;
        margin-bottom: 15px;
    }


    .footer {
        font-family: 'Lexend', sans-serif;
        background-color: #2491eb;
        font-size: 16px;
        color: white;
    }

        .footer h4 {
            color: white;
            font-size: 18px;
            font-weight: 600;
            font-family: 'Lexend', sans-serif;
        }


    footer a {
        color: white;
        text-decoration: none;
    }

        footer a:hover {
            color: white;
            text-decoration: underline;
        }

    footer p {
        font-family: 'Lexend', sans-serif;
        color: white;
        font-size: 16px;
        text-decoration: none;
    }


    footer hr {
        border-top: 1px solid white;
    }



    .grad-hero-header-main {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 62px;
        margin: 0px;
        color: #333333;
        padding-top: 80px;
        line-height: 78px;
    }


    @media (max-width: 991px) {
        .grad-hero-header-main {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            font-size: 2em;
            margin: 0px;
            color: #333333;
            padding-top: 40px;
            line-height: 48px;
        }
    }



    .heroheader {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
    }


    .herosubheader {
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        font-size: 30px;
    }

    .herosubheader-big {
        font-family: 'Passion One', cursive;
        font-weight: 700;
        font-size: 60px;
    }



    .hero-unit {
        background-image: url('/v2assets/images/vizor-hero.jpg');
        background-size: cover;
        background-color: #EEEEEE;
        height: 550px;
        margin: auto;
    }

        .hero-unit h1 {
            color: #FFFFFF;
            font-size: 60px;
            letter-spacing: -1px;
            line-height: 1;
            margin-bottom: 0;
        }

        .hero-unit h2 {
            font-size: 25px;
            color: #FFFFFF;
            font-family: 'Lato', sans-serif;
        }

    .hero-fill {
        width: 100%;
        height: 660px;
        background-position: center;
        background-size: cover;
    }



    .hero-caption {
        postion: relative;
        top: 35%;
    }

    .hero-carousel-caption {
        bottom: 0px;
        top: 25px;
        position: absolute;
        right: 15%;
        bottom: 20px;
        left: 15%;
        z-index: 10;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #fff;
        text-align: center;
        /*text-shadow: 0 1px 2px rgba(0,0,0,.6);*/
    }


        .hero-carousel-caption h3 {
            padding-top: 35px;
            color: #575556;
            font-weight: 400;
        }

        .hero-carousel-caption h1 {
            color: #fff;
        }

    /* Large desktop 
      @media (min-width: 1200px) { ... }*/

    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) {

        .herosubheader-big {
            font-weight: 700;
            font-size: 60px;
        }
    }

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) {

        .featureRow {
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .herosubheader-big {
            font-weight: 700;
            font-size: 40px;
        }

        .wideheroSignup {
            width: 200px;
        }
    }

    /* Landscape phones and down */
    @media (max-width: 480px) {
        .featureRow {
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .hero-carousel-caption h1 {
            font-size: 40px;
        }

        .herosubheader-big {
            font-weight: 500;
            font-size: 40px;
        }

        .wideheroSignup {
            width: 200px;
        }
    }

    .pg-opt h2 {
        font-size: 24px;
        font-weight: 500;
    }


    ul.categories > li > a.active {
        background: #000;
    }


    .bigInputField {
        margin-top: 10px;
        margin-bottom: 10px;
        height: 50px;
        line-height: 27px;
        text-indent: 20px;
        font-size: 20px;
        color: #333;
        background: #fff;
        border: solid 1px #d9d9d9;
        border-top: solid 1px #c0c0c0;
    }

    @media (max-width: 1200px) {

        .pricing-plans .plan-circle:after {
            content: none;
            display: block;
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }

        .featureMediaHeader {
            padding-top: 0px;
            padding-bottom: 0px;
        }
    }

    @media (min-width: 1199px) {

        /*
    .pricing-plans .plan-circle:after {
        content: "";
        display: block;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }*/


        .echo-bg {
            background: url('/v2assets/images/customers/echohorizon/echo-school-fade.png') no-repeat top right;
        }


        .acpa-bg {
            background: url('/v2assets/images/customers/acpa/acpa-school-fade3.png') no-repeat top right;
        }

        .blackford-bg {
            background: url('/v2assets/images/customers/blackford/blackford-fade.jpg') no-repeat top right;
        }


        .strafford-bg {
            background: url('/v2assets/images/customers/strafford/strafford-fade.jpg') no-repeat top right;
        }

        .strafford-bg2 {
            background: url('/v2assets/images/customers/strafford/strafford-fade2.jpg') no-repeat top right;
        }

        .saet-bg {
            background: url('/v2assets/images/customers/saet/saet-fade.jpg') no-repeat top right;
        }

        .scott-bg {
            background: url('/v2assets/images/customers/scott-county-schools/scott-county-fade.jpg') no-repeat top right;
        }

        .gpcs-bg {
            background: url('/v2assets/images/customers/gpcs/gpcs-fade.jpg') no-repeat top right;
        }

        .tri-valley-bg {
            background: url('/v2assets/images/customers/tri-valley-central-schools/tri-valley-central-schools-fade.jpg') no-repeat top right;
        }
    }


    @media (max-width: 768px) {

        .bigInputField {
            width: 300px;
        }

        .bigSignupButton {
            margin: 0px;
            width: 200px;
        }
    }

    @media (min-width: 768px) {



        .bigInputField {
            width: 500px;
        }

        .bigSignupButton {
            width: 500px;
        }
    }



    .btn-pill {
        border-radius: 45px;
    }

    .menu-trynow {
        color: #fbb03b;
    }


    .btn {
        font-weight: 800;
        text-transform: uppercase;
    }



    .wordpress-content-section {
        color: #333333;
    }

        .wordpress-content-section p {
            color: #333333;
            font-size: 20px;
            line-height: 36px;
            font-family: 'Lato', sans-serif;
            margin-bottom: 50px;
        }

        .wordpress-content-section a {
            text-decoration: underline;
        }

        .wordpress-content-section ul {
            list-style-type: disc;
            margin-left: 30px;
            margin-bottom: 50px;
        }

        .wordpress-content-section li {
            color: #333333;
            font-size: 20px;
            line-height: 36px;
            font-family: 'Lato', sans-serif;
            list-style-type: decimal;
        }

        .wordpress-content-section ol {
            margin-left: 30px;
            margin-bottom: 50px;
        }

    @media screen and (max-width:767px) {



        .fix_it_assets {
            padding: 10px !important;
        }

        .fix_chrome_book_inner {
            padding: 10px !important;
        }

        .sectionbutton {
            width: 275px !important;
            margin: 20px 0 !important;
        }

        .fix_chrome_book_inner img {
            width: 80%;
        }

        .fix_it_assets img {
            width: 80%;
        }
    }

/* ==========================================================================
   v5 reusable form styles (card + inputs + button + inline message)
   First used on action/automate.php - reuse across other v5 forms as needed.
   ========================================================================== */

.v5-form-card,
.v5-page-heading {
  font-family: 'Inter', sans-serif;
}

.v5-form-card {
  max-width: 480px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(20, 30, 60, 0.08), 0 1px 2px rgba(20, 30, 60, 0.06);
  padding: 40px;
}

.v5-form-field {
  margin-bottom: 22px;
  text-align: left;
}

.v5-form-field label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 8px;
}

.v5-form-input,
.v5-form-select {
  width: 100%;
  height: 50px;
  line-height: 1.2;
  padding: 0 14px;
  font-size: 17px;
  color: #1f2937;
  background: #fff;
  border: solid 1px #dde1e7;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.v5-form-input:focus,
.v5-form-select:focus {
  outline: none;
  border-color: #2491eb;
  box-shadow: 0 0 0 3px rgba(36, 145, 235, 0.15);
}

.v5-form-btn {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: 8px;
  border: none;
  border-radius: 8px;
  background: #2491eb;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.v5-form-btn:hover:not(:disabled) {
  background: #1c78c7;
}

.v5-form-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.v5-form-btn:disabled {
  background: #9fc9ec;
  cursor: not-allowed;
}

.v5-form-message {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  min-height: 20px;
}

.v5-form-message:empty {
  margin-top: 0;
  padding: 0;
}

.v5-form-message.success {
  background: #eafaf0;
  color: #1a7f37;
}

.v5-form-message.error {
  background: #fdeeee;
  color: #c0392b;
}

/* ==========================================================================
   v5 page heading (Option A) - standalone heading for a page/section,
   used above a form card or other content. Reuse wherever a section needs
   its own title without a full-width colored banner.
   ========================================================================== */

.v5-page-heading {
  text-align: center;
  padding: 48px 20px 32px;
  background: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Distinct backdrop for a section following a .v5-page-heading, so content
   (e.g. a .v5-form-card) reads as its own zone rather than blending into
   the plain white heading area above it. */
.v5-section-tinted {
  background: #f7f8fa;
}

/* Typography and spacing below deliberately mirror the feature block's header
   (.v5-fb-head in v5featureblock.css): same title scale/weight/tracking,
   colours, intro text and 680px text width, with the accent bar standing where
   that header's eyebrow label sits. If you change one, change the other. */
.v5-page-heading .v5-accent-bar {
  width: 32px;
  height: 3px;
  background: #2491eb;
  margin: 0 auto 14px;
  border-radius: 2px;
}

.v5-page-heading h2 {
  max-width: 680px;
  margin: 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #232122;
}

.v5-page-heading p {
  max-width: 680px;
  margin: 16px auto 0;
  font-size: 18px;
  line-height: 1.6;
  color: #575556;
}

@media (max-width: 900px) {
  .v5-page-heading h2 { font-size: 34px; }
}

@media (max-width: 600px) {
  .v5-page-heading h2 { font-size: 30px; }
}

/* ==========================================================================
   v5 form card heading (Option C) - title/subtitle merged into the top of
   a .v5-form-card, for single-form pages that don't need a separate
   page heading section.
   ========================================================================== */

.v5-form-card__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.v5-form-card__heading i {
  font-size: 20px;
  color: #2491eb;
}

.v5-form-card__heading h2 {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  text-transform: none;
}

.v5-form-card__subtitle {
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 20px;
}

/* ==========================================================================
   v5 header - complete rewrite, self-contained under .v5-header-bar with its
   own class names (no legacy .navbar/.dropdown-menu/.mega-nav classes), so it
   can never be touched by the old Bootstrap-era header CSS or its !important
   rules. That legacy CSS was the root cause of the page-shift-on-hover bug
   in the previous version.
   ========================================================================== */

/* position: fixed (not sticky) - the site has a global `body { overflow-x:
   hidden }` rule, which disables position: sticky in most browsers. A
   .v5-header-spacer placeholder (below) holds the header's normal-flow
   space so fixed positioning doesn't cause content to jump underneath it. */
.v5-header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid #eef0f3;
  z-index: 1000;
  transition: top 0.2s ease, width 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease;
}

.v5-header-spacer {
  height: 84px;
}

/* Floating pill treatment (Rycor-style) - desktop only. Controlled by the
   $alwaysFloat PHP variable read in v5header.php:
   - $alwaysFloat = true  -> .v5-always-float is always present -> pill always on.
   - $alwaysFloat = false/unset (default) -> pill only while .v5-scrolled is
     toggled by the scroll listener, i.e. it floats only once the page scrolls.
   On mobile this container also holds the full-height accordion menu when
   open, and a 999px radius on that taller box produces huge, wrong-looking
   corners plus an inset width for the menu - so mobile never gets the pill,
   regardless of $alwaysFloat, and just keeps a plain full-width fixed bar. */
@media (min-width: 992px) {
  .v5-header-bar.v5-always-float,
  .v5-header-bar.v5-scrolled {
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin: 0;
    width: calc(100% - 48px);
    max-width: 1200px;
    border: 1px solid #eef0f3;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(20, 30, 60, 0.14);
  }

  .v5-header-bar.v5-always-float .v5-header-inner,
  .v5-header-bar.v5-scrolled .v5-header-inner {
    height: 64px;
    /* The Schedule a demo button is 51px tall in this 64px bar, so 6.5px sits
       above and below it (7.5px with the pill's 1px border). Matching that on
       the right makes the button sit evenly inside the rounded end of the pill,
       instead of the 24px the full-width bar uses. Pill mode only. */
    padding-right: 6.5px;
  }
}

.v5-header-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.v5-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.v5-logo img {
  display: block;
  height: 34px;
  width: auto;
}

.v5-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}

.v5-nav-item {
  position: static;
}

.v5-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #374151;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}

.v5-nav-link:hover,
.v5-nav-link:focus,
.v5-nav-link:visited,
.v5-nav-link:active {
  text-decoration: none !important;
}

.v5-nav-link:hover,
.v5-nav-link:focus {
  color: #2491eb;
  background: #f3f8fe;
}

.v5-nav-link:visited {
  color: #374151;
}

.v5-nav-caret {
  font-size: 16px;
  color: #9ca3af;
  transition: transform 0.15s ease;
}

.v5-nav-item.v5-open .v5-nav-caret {
  transform: rotate(180deg);
}

.v5-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.v5-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fbb03b;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none !important;
  overflow: hidden;
  transition: background-color 0.15s ease;
}

.v5-cta:hover,
.v5-cta:focus,
.v5-cta:visited,
.v5-cta:active {
  background: #fbb03b;
  color: #ffffff !important;
  text-decoration: none !important;
}

.v5-cta:hover,
.v5-cta:focus {
  background: #e39a26;
}

/* Footer typography - matched to the nav link font (Inter). Scoped to
   .footer so it only affects the shared v2footer.php when loaded on a v5
   page (this stylesheet isn't loaded on legacy pages). The legacy footer
   used 'Lexend', a different font from the rest of the v5 header/nav.
   Colors are left as-is since the nav link's dark text would be invisible
   on the dark footer. */
.footer,
.footer p {
  font-family: 'Inter', sans-serif;
}

.footer {
  background: linear-gradient(135deg, #004bad 0%, #2491eb 100%);
}

.footer a {
  font-size: 17px;
  color: #ffffff;
  text-decoration: none !important;
}

/* Guard against the browser's default visited-link color/underline
   (and the legacy "footer a:hover { text-decoration: underline; }" rule)
   so a footer link looks the same before and after being visited. */
.footer a:visited,
.footer a:hover,
.footer a:focus,
.footer a:active {
  color: #ffffff !important;
  text-decoration: none !important;
}

.footer h4 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.v5-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
}

/* Brief shimmer sweep every 30s to draw a little attention to the CTA. */
.v5-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-20deg);
  animation: v5-cta-shimmer 30s ease-in-out infinite;
}

@keyframes v5-cta-shimmer {
  0% {
    left: -75%;
  }
  6% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}

/* Solutions dropdown panel - plain absolute positioning, verified to overlay
   cleanly without affecting page layout (same technique reftab.com uses).
   The outer element sits flush against the trigger (top: 100%, no gap) and
   is the full mouse hit-area; padding-top pushes the visible card down
   without creating a dead zone that would fire mouseleave while crossing
   from the trigger into the panel. */
.v5-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 1040px;
  max-width: calc(100vw - 48px);
  padding-top: 8px;
}

.v5-nav-item.v5-open .v5-dropdown-panel {
  display: block;
}

.v5-dropdown-panel-inner {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(20, 30, 60, 0.16);
  padding: 36px 40px;
}

.v5-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.v5-dropdown-col-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 16px;
}

.v5-dropdown-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.v5-dropdown-links li a {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #374151;
  padding: 7px 0;
  transition: color 0.15s ease;
}

.v5-dropdown-links li a:hover {
  color: #2491eb;
}

.v5-mobile-toggle {
  display: none;
  border: none;
  background: transparent;
  padding: 8px;
  cursor: pointer;
}

.v5-mobile-toggle i {
  font-size: 24px;
  color: #1f2937;
}

.v5-mobile-panel {
  display: none;
}

@media (max-width: 991px) {
  .v5-header-inner {
    height: 68px;
  }

  .v5-header-spacer {
    height: 68px;
  }

  .v5-mobile-panel.v5-open {
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }

  .v5-nav,
  .v5-actions .v5-cta {
    display: none;
  }

  .v5-mobile-toggle {
    display: inline-flex;
  }

  .v5-mobile-panel {
    border-top: 1px solid #eef0f3;
  }

  .v5-mobile-panel.v5-open {
    display: block;
  }

  .v5-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #374151;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f1f3;
    text-decoration: none !important;
  }

  .v5-mobile-link:visited,
  .v5-mobile-link:hover,
  .v5-mobile-link:focus,
  .v5-mobile-link:active {
    text-decoration: none !important;
  }

  .v5-mobile-link:visited {
    color: #374151;
  }

  .v5-mobile-link i {
    font-size: 18px;
    color: #9ca3af;
    transition: transform 0.15s ease;
  }

  .v5-mobile-accordion.v5-open > .v5-mobile-link i {
    transform: rotate(180deg);
  }

  .v5-mobile-sublist {
    display: none;
    list-style: none;
    margin: 0;
    padding: 4px 24px 16px 36px;
    background: #fafbfc;
  }

  .v5-mobile-accordion.v5-open .v5-mobile-sublist {
    display: block;
  }

  .v5-mobile-sublist-heading {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 16px 0 4px;
  }

  .v5-mobile-sublist-heading:first-child {
    margin-top: 4px;
  }

  .v5-mobile-sublist li a {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    color: #4b5563;
    padding: 8px 0;
  }

  .v5-mobile-cta {
    display: block;
    margin: 16px 24px;
  }
}


/* ---------------------------------------------------------------------------
   Product dropdown (header). Styled after the quick links drop-down of the app
   mock up: white card, 16px corners, soft shadow, small uppercase heading, and
   bordered cards with an icon tile, a bold title and a short description.
   Left: the School IT Management products and a footer line. Right: a feature
   area with a customer story and the demo / pricing buttons.
   ------------------------------------------------------------------------- */
.v5-product-panel {
  width: 980px;
  left: 50%;
  transform: translateX(-50%);   /* centred under the header, not under the Product link */
}

.v5-dropdown-panel-inner.v5-product-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  padding: 0;
  overflow: hidden;
}

.v5-product-main {
  display: flex;
  flex-direction: column;
  padding: 28px 32px 0;
}

.v5-prod-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}

.v5-prod-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e3e8ee;
  border-radius: 14px;
  background: #ffffff;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.v5-prod-card:hover,
.v5-prod-card:focus {
  background: #f5f9fd;
  border-color: #cfe4f8;
  box-shadow: 0 8px 22px rgba(20, 60, 100, 0.10);
}

.v5-prod-card img {
  flex: none;
  width: 44px;
  height: 44px;
}

.v5-prod-card b {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #232122;
}

.v5-prod-card small {
  display: block;
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #6b7280;
}

/* footer line of the menu, across the bottom of the left side */
.v5-product-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 28px -32px 0;
  padding: 16px 32px;
  background: #f5f9fd;
  border-top: 1px solid #eef0f3;
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  color: #374151;
}

.v5-product-footer a {
  font-weight: 700;
  color: #2491eb;
  text-decoration: none !important;
}

.v5-product-footer a:hover,
.v5-product-footer a:focus {
  color: #1f7fd1;
}

.v5-product-footer a i {
  margin-left: 4px;
  font-size: 13px;
}

/* feature area on the right */
.v5-product-feature {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 28px;
  background: #eaf3fc;
}

.v5-story {
  margin: 0 0 14px;
  padding: 20px 20px 18px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 60, 100, 0.08);
}

.v5-story blockquote {
  position: relative;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: #232122;
}

.v5-story blockquote::before {
  content: "\201C";
  display: block;
  margin-bottom: -6px;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: #2491eb;
}

.v5-story figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v5-story figcaption img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.v5-story figcaption b {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #232122;
}

.v5-story figcaption small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: #6b7280;
}

.v5-story-link {
  align-self: flex-start;
  margin-bottom: auto;
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #1a6fb8;
  text-decoration: none !important;
}

.v5-story-link:hover,
.v5-story-link:focus {
  color: #2491eb;
}

.v5-story-link i {
  margin-left: 4px;
  font-size: 13px;
}

/* the demo and pricing buttons under the story */
.v5-feature-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.v5-feature-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.v5-feature-btn-primary,
.v5-feature-btn-primary:visited {
  background: #fbb03b;
  color: #ffffff !important;
}

.v5-feature-btn-primary:hover,
.v5-feature-btn-primary:focus {
  background: #e6a02a;
  color: #ffffff !important;
}

.v5-feature-btn-secondary,
.v5-feature-btn-secondary:visited {
  background: #ffffff;
  border: 1.5px solid #cfd8e3;
  color: #232122 !important;
}

.v5-feature-btn-secondary:hover,
.v5-feature-btn-secondary:focus {
  border-color: #2491eb;
  color: #2491eb !important;
}