/* =========================================================
   CLOUD9 SOLUTIONS
   Brand Overrides
   ========================================================= */

:root {
    /* Official C9S Brand Palette */
    --c9s-interface-indigo: #351F65;
    --c9s-sync-green: #B7DD79;
    --c9s-sync-green-light: #E1EDCE;
    --c9s-mid-green: #49865A;
    --c9s-evergreen: #004C45;
    --c9s-violet: #9F8FCA;
    --c9s-soft-violet: #D2CDE6;
    --c9s-cool-white: #F7F6FB;

    /* Semantic Brand Colours */
    --c9s-primary: var(--c9s-interface-indigo);
    --c9s-secondary: var(--c9s-evergreen);
    --c9s-accent: var(--c9s-sync-green);
    --c9s-light: var(--c9s-cool-white);
}


/* =========================================================
   C9S COLOUR UTILITIES
   ========================================================= */

.text-c9s-interface-indigo { color: var(--c9s-interface-indigo) !important; }
.text-c9s-sync-green       { color: var(--c9s-sync-green) !important; }
.text-c9s-evergreen        { color: var(--c9s-evergreen) !important; }
.text-c9s-violet           { color: var(--c9s-violet) !important; }
.text-c9s-soft-violet      { color: var(--c9s-soft-violet) !important; }
.text-c9s-cool-white       { color: var(--c9s-cool-white) !important; }

.bg-c9s-interface-indigo { background-color: var(--c9s-interface-indigo) !important; }
.bg-c9s-sync-green       { background-color: var(--c9s-sync-green) !important; }
.bg-c9s-evergreen        { background-color: var(--c9s-evergreen) !important; }
.bg-c9s-violet           { background-color: var(--c9s-violet) !important; }
.bg-c9s-soft-violet      { background-color: var(--c9s-soft-violet) !important; }
.bg-c9s-cool-white       { background-color: var(--c9s-cool-white) !important; }

.border-c9s-interface-indigo { border-color: var(--c9s-interface-indigo) !important; }
.border-c9s-sync-green       { border-color: var(--c9s-sync-green) !important; }
.border-c9s-evergreen        { border-color: var(--c9s-evergreen) !important; }
.border-c9s-violet           { border-color: var(--c9s-violet) !important; }
.border-c9s-soft-violet      { border-color: var(--c9s-soft-violet) !important; }
.border-c9s-cool-white       { border-color: var(--c9s-cool-white) !important; }



/* =========================================================
   LEGACY C9S COLOUR OVERRIDES
   Phase 1
   ========================================================= */


/* ---------------------------------------------------------
   Legacy "Blue" Accent
   Old: #039FC3
   New: Interface Indigo
   --------------------------------------------------------- */

.blue {
    color: var(--c9s-interface-indigo) !important;
}


/* ---------------------------------------------------------
   Homepage Major Colour Fields
   --------------------------------------------------------- */

.home-intro .blue-bg,
.home-intro .content,
.home-steps,
.footer-nav-content {
    background-color: var(--c9s-interface-indigo);
}


/* ---------------------------------------------------------
   Light Background Fields
   Old: #E7F0F6
   New: Cool White
   --------------------------------------------------------- */

.home-industries,
.footer-technology {
    background-color: var(--c9s-cool-white);
}


/* ---------------------------------------------------------
   Existing Primary Buttons
   --------------------------------------------------------- */

.btn.blue-white-btn {
    background-color: var(--c9s-interface-indigo);
    border-color: var(--c9s-interface-indigo);
}

.btn.white-blue-btn {
    color: var(--c9s-interface-indigo);
    border-color: var(--c9s-interface-indigo);
}

.btn.white-blue-btn span,
.btn.white-blue-btn div {
    color: var(--c9s-interface-indigo);
}

.btn.white-blue-btn::before {
    background-color: var(--c9s-interface-indigo);
}

.btn.white-blue-btn:hover {
    background-color: var(--c9s-interface-indigo);
}

.btn.white-clear-blue-btn::before {
    background-color: var(--c9s-interface-indigo);
}

.btn.white-clear-blue-btn:hover {
    border-color: var(--c9s-interface-indigo);
}


/* ---------------------------------------------------------
   Header Contact Button
   --------------------------------------------------------- */

.navik-header .navik-header-container .navik-menu ul li.contact-btn a {
    background-color: var(--c9s-interface-indigo);
    border-color: var(--c9s-interface-indigo);
}

.navik-header .navik-header-container .navik-menu ul li.contact-btn a::before {
    background-color: var(--c9s-evergreen);
}

.navik-header .navik-header-container .navik-menu ul li.contact-btn a:hover {
    border-color: var(--c9s-evergreen);
}


/* ---------------------------------------------------------
   Header Support Button
   --------------------------------------------------------- */

.navik-header .navik-header-container .navik-menu ul li.support-btn a {
    color: var(--c9s-interface-indigo);
    border-color: var(--c9s-interface-indigo);
}

.navik-header .navik-header-container .navik-menu ul li.support-btn a span {
    color: var(--c9s-interface-indigo);
}

.navik-header .navik-header-container .navik-menu ul li.support-btn a::before {
    background-color: var(--c9s-interface-indigo);
}

.navik-header .navik-header-container .navik-menu ul li.support-btn a:hover {
    border-color: var(--c9s-interface-indigo);
}


/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */

.form-holder .normalForm .button-right button,
.form-holder .normalForm .button-right input[type="submit"] {
    border-color: var(--c9s-interface-indigo);
    color: var(--c9s-interface-indigo);
}

.form-holder .normalForm .button-right button:hover,
.form-holder .normalForm .button-right input[type="submit"]:hover {
    border-color: var(--c9s-interface-indigo);
    background-color: var(--c9s-interface-indigo);
    color: #fff;
}


/* ---------------------------------------------------------
   Homepage Service / Industry Hover
   --------------------------------------------------------- */

.services-block:hover,
.footer-industries-block:hover {
    background-color: var(--c9s-interface-indigo);
}


/* ---------------------------------------------------------
   Homepage Three-Dot Brand Accent
   --------------------------------------------------------- */

.home-services .three-dots .dot:nth-child(1) {
    background-color: var(--c9s-soft-violet);
}

.home-services .three-dots .dot:nth-child(2) {
    background-color: var(--c9s-interface-indigo);
}

.home-services .three-dots .dot:nth-child(3) {
    background-color: var(--c9s-sync-green);
}


/* =========================================================
   LEGACY GREEN → C9S SYNC GREEN
   ========================================================= */

.green {
    color: var(--c9s-sync-green) !important;
}

.navik-header .navik-header-container .navik-menu ul li.mega-menu
.mega-menu-container .inner-menu-container .nav-pills .nav-link:hover,

.navik-header .navik-header-container .navik-menu ul li.mega-menu
.mega-menu-container .inner-menu-container .nav-pills .nav-link.active:hover,

.navik-header .navik-header-container .navik-menu ul li.mega-menu
.mega-menu-container .inner-menu-container .tab-content .tab-pane .title:hover,

.navik-header .navik-header-container .navik-menu ul li.mega-menu
.mega-menu-container .inner-menu-container .tab-content .tab-pane
a.inner-service-link:hover {
    color: var(--c9s-sync-green);
}



/* =========================================================
   LEGACY DARK BLUE → C9S EVERGREEN
   ========================================================= */

.dark-blue {
    color: var(--c9s-evergreen) !important;
}

.pageMain h2,
.pageMain h5 {
    color: var(--c9s-evergreen);
}

#return-to-top {
    background-color: var(--c9s-sync-green);
}

#return-to-top svg {
    color: var(--c9s-interface-indigo);
}

#return-to-top:hover {
    background-color: var(--c9s-interface-indigo);
}

#return-to-top:hover svg {
    color: var(--c9s-sync-green);
}


@media (max-width: 1199px) {

    .navik-header .navik-header-container .navik-menu ul li.dk-blue-contact-us a {
        background-color: var(--c9s-evergreen);
    }

    .navik-header .navik-header-container .navik-menu ul li.green-support a {
        background-color: var(--c9s-sync-green);
        color: var(--c9s-interface-indigo);
    }
}


/* =========================================================
   LEGACY PALE BLUE → C9S LIGHT PALETTE
   ========================================================= */


/* Large background fields → Cool White */

.home-industries,
.footer-technology {
    background-color: var(--c9s-cool-white);
}


/* Cards, forms and contained panels → Soft Violet */

.form-holder,
.footer-testimonials .content,
.page-inner .inner-page-content .item-test:nth-child(even) .testimonial-item {
    background-color: var(--c9s-soft-violet);
}


/* Decorative legacy pale-blue blocks → Soft Violet */

.page-inner .inner-page-content
.section-bottom-margin.blue-block-left::before {
    background-color: var(--c9s-soft-violet);
}


/* H3 */

.pageMain h3 {
    color: var(--c9s-evergreen);
}


.footer-testimonials .content {
    background-color: var(--c9s-soft-violet);
}

.footer-testimonials .intro-header {
    background-color: var(--c9s-interface-indigo);
    color: #fff;
}

.footer-testimonials .content svg {
    color: var(--c9s-interface-indigo);
}


.footer-testimonials .video:hover svg {
    color: var(--c9s-interface-indigo);
}

.footer-technology h6.small {
    color: var(--c9s-interface-indigo);
}

.footer-technology h6 a {
    color: var(--c9s-interface-indigo);
}

.footer-technology h6 a:hover {
    color: var(--c9s-evergreen);
}


/* =========================================================
   C9S COLOUR CLEANUP — PAGE PANELS + MOBILE NAV
   ========================================================= */


/* Remaining interior pale-blue panel */

.location-head-office {
    background-color: var(--c9s-soft-violet);
}


/* Mobile / tablet navigation hierarchy */

@media (max-width: 1199px) {

    /* Top level */
    .navik-header .navik-header-container .navik-menu ul li > a {
        background-color: var(--c9s-interface-indigo);
    }

    /* Second level */
    .navik-header .navik-header-container .navik-menu ul li ul li > a {
        background-color: var(--c9s-evergreen);
    }

    /* Third level */
    .navik-header .navik-header-container .navik-menu ul li ul li ul li > a {
        background-color: var(--c9s-violet);
    }

    /* Hover / focus */
    .navik-header .navik-header-container .navik-menu ul li > a:hover,
    .navik-header .navik-header-container .navik-menu ul li > a:focus {
        background-color: var(--c9s-sync-green);
        color: var(--c9s-interface-indigo);
    }
}

/* =========================================================
   INTERNAL PAGE HEADER
   ========================================================= */

.page-header {
    background: var(--c9s-evergreen);
}

.page-header .page-header-image {
    background-color: var(--c9s-evergreen);
}

.page-header .content .inner-header-content nav ul li.child h1 {
    color: var(--c9s-sync-green);
}


/* =========================================================
   DESKTOP NAVIK MENU CLEANUP
   ========================================================= */

@media (min-width: 1200px) {

    .navik-menu li > ul {
        background-color: #fff;
    }

    .navik-menu ul ul li > a,
    .navik-menu ul ul li:hover > a {
        background-color: transparent;
    }

    .navik-menu ul li.current-menu > a,
    .navik-menu ul li:hover > a {
        background-color: inherit;
    }

}


/* =========================================================
   DESKTOP NAVIK MEGA MENU — C9S BRAND
   ========================================================= */

@media (min-width: 1200px) {

    /* Old cyan top rule */
    .navik-menu.submenu-top-border li > ul {
        border-top-color: var(--c9s-sync-green);
    }

    /* Large introductory icon */
    .navik-header .navik-header-container .navik-menu ul li.mega-menu
    .mega-menu-container .inner-menu-container .icon {
        border-color: var(--c9s-interface-indigo);
    }

    .navik-header .navik-header-container .navik-menu ul li.mega-menu
    .mega-menu-container .inner-menu-container .icon svg {
        color: var(--c9s-interface-indigo);
    }

    /* Service links inside "What we do" */
    .navik-header .navik-header-container .navik-menu ul li.mega-menu
    .mega-menu-container .inner-menu-container .tab-content
    .tab-pane a.inner-service-link {
        color: var(--c9s-interface-indigo);
    }

    .navik-header .navik-header-container .navik-menu ul li.mega-menu
    .mega-menu-container .inner-menu-container .tab-content
    .tab-pane a.inner-service-link:hover {
        color: var(--c9s-evergreen);
    }

    /* Small text links */
    .navik-header .navik-header-container .navik-menu ul li.mega-menu
    .mega-menu-container .inner-menu-container p.small a {
        color: var(--c9s-evergreen);
    }

    .navik-header .navik-header-container .navik-menu ul li.mega-menu
    .mega-menu-container .inner-menu-container p.small a:hover {
        color: var(--c9s-interface-indigo);
    }

    /* Feature tiles */
    .menu-sub-link:hover {
        background-color: var(--c9s-interface-indigo);
        border-color: var(--c9s-interface-indigo);
    }

    /* Search hover */
    .navik-header .navik-header-container .navik-menu ul li.search-icon button:hover {
        color: var(--c9s-interface-indigo);
    }

}


/* =========================================================
   DESKTOP NAVIGATION — SUPPORT BUTTON
   ========================================================= */

@media (min-width: 1200px) {

    .navik-header .navik-header-container .navik-menu ul li.support-btn a {
        background-color: #fff;
        color: var(--c9s-evergreen);
        border-color: var(--c9s-evergreen);
    }

    .navik-header .navik-header-container .navik-menu ul li.support-btn a span {
        color: var(--c9s-evergreen);
    }

    .navik-header .navik-header-container .navik-menu ul li.support-btn a::before {
        background-color: var(--c9s-evergreen);
    }

    .navik-header .navik-header-container .navik-menu ul li.support-btn a:hover {
        border-color: var(--c9s-evergreen);
    }

    .navik-header .navik-header-container .navik-menu ul li.support-btn a:hover span {
        color: #fff;
    }
}

/* =========================================================
   DESKTOP MEGA MENU — LEARN MORE BUTTON
   ========================================================= */

@media (min-width: 1200px) {

    .navik-header .navik-header-container .navik-menu
    ul li.mega-menu .mega-menu-container .inner-menu-container
    a.btn.white-blue-btn {
        background-color: #fff;
        color: var(--c9s-interface-indigo);
        border-color: var(--c9s-interface-indigo);
    }

    .navik-header .navik-header-container .navik-menu
    ul li.mega-menu .mega-menu-container .inner-menu-container
    a.btn.white-blue-btn::before {
        background-color: var(--c9s-interface-indigo);
    }

    .navik-header .navik-header-container .navik-menu
    ul li.mega-menu .mega-menu-container .inner-menu-container
    a.btn.white-blue-btn:hover {
        background-color: var(--c9s-interface-indigo);
        border-color: var(--c9s-interface-indigo);
        color: #fff;
    }
}


/* =========================================================
   HEADINGS OVER SOFT VIOLET
   ========================================================= */

    .bg-c9s-soft-violet h1,
    .bg-c9s-soft-violet h2,
    .bg-c9s-soft-violet h3,
    .bg-c9s-soft-violet h4,
    .bg-c9s-soft-violet h5,
    .bg-c9s-soft-violet h6 {
        color: var(--c9s-interface-indigo);
}

    .form-holder h2,
    .form-holder h3,
    .form-holder h4,
    .footer-testimonials .content h2,
    .footer-testimonials .content h3,
    .footer-testimonials .content h4 {
        color: var(--c9s-interface-indigo);
}

    .form-holder.lt-blue-holder h1,
    .form-holder.lt-blue-holder h2,
    .form-holder.lt-blue-holder h3,
    .form-holder.lt-blue-holder h4,
    .form-holder.lt-blue-holder h5,
    .form-holder.lt-blue-holder h6 {
        color: var(--c9s-interface-indigo);
}

/* =========================================================
   MISC Minor Repairs
   ========================================================= */

.home-hero .blue.italic {
    color: var(--c9s-sync-green) !important;
}

/* =========================================================
   SUPPORT & RESOURCES — NAVIGATION BOXES
   ========================================================= */

/* Default state */

.page-inner .inner-page-content .callout.existing-callout .support-link,
.page-inner .inner-page-content .callout.new-callout .support-link {
    border-color: var(--c9s-evergreen);
    color: var(--c9s-evergreen);
}


/* Hover state */

.page-inner .inner-page-content .callout.existing-callout .support-link:hover,
.page-inner .inner-page-content .callout.new-callout .support-link:hover {
    background-color: var(--c9s-sync-green);
    border-color: var(--c9s-sync-green);
    color: var(--c9s-interface-indigo);
}


/* Icons */

.page-inner .inner-page-content .callout.existing-callout .support-link:hover svg,
.page-inner .inner-page-content .callout.new-callout .support-link:hover svg {
    color: var(--c9s-interface-indigo);
}

/* =========================================================
   CAREERS — POSITION BOXES
   ========================================================= */

.careers-block {
    border-color: var(--c9s-evergreen);
}

.careers-block:hover {
    background-color: var(--c9s-sync-green);
    border-color: var(--c9s-sync-green);
    color: var(--c9s-interface-indigo);
}

.careers-block:hover .name,
.careers-block:hover .emp-type,
.careers-block:hover .posted-on {
    color: var(--c9s-interface-indigo);
}


/* =========================================================
   BLOG / NEWS — LIST CARDS
   ========================================================= */

.page-inner .inner-page-content .news-card .content .date-read {
    border-top-color: var(--c9s-evergreen);
}

.page-inner .inner-page-content .news-card .content .date-read .date,
.page-inner .inner-page-content .news-card .content .date-read .read {
    color: var(--c9s-evergreen);
}


/* Card title hover */

.page-inner .inner-page-content .news-card .content h3 a:hover {
    color: var(--c9s-interface-indigo);
}


/* Image "Read More" hover */

.page-inner .inner-page-content .news-card .image button:hover {
    background-color: var(--c9s-sync-green);
    border-color: var(--c9s-sync-green);
    color: var(--c9s-interface-indigo);
}


/* =========================================================
   BLOG / NEWS — PAGINATION
   ========================================================= */

.page-inner .inner-page-content .pagination ul li a {
    border-color: var(--c9s-evergreen);
    color: var(--c9s-evergreen);
}

.page-inner .inner-page-content .pagination ul li a:hover {
    border-color: var(--c9s-sync-green);
    color: var(--c9s-interface-indigo);
}

.page-inner .inner-page-content .pagination ul li.active a {
    border-color: var(--c9s-interface-indigo);
    background-color: var(--c9s-interface-indigo);
    color: #fff;
}

.page-inner .inner-page-content .pagination ul li.active a:hover {
    border-color: var(--c9s-sync-green);
    background-color: var(--c9s-sync-green);
    color: var(--c9s-interface-indigo);
}

.page-inner .inner-page-content .pagination ul li.next a {
    border-color: var(--c9s-evergreen);
    color: var(--c9s-evergreen);
}


/* =========================================================
   LOCATIONS — OFFICE CARDS
   ========================================================= */

.locations-small,
.location-head-office {
    background-color: var(--c9s-sync-green-light);
}

.locations-small .name,
.location-head-office .name {
    color: var(--c9s-interface-indigo);
}

.location-head-office .phone a,
.location-head-office .email a {
    color: var(--c9s-interface-indigo);
}

.location-head-office .phone a:hover,
.location-head-office .email a:hover {
    color: var(--c9s-evergreen);
}


/* =========================================================
   TESTIMONIALS — ALTERNATING CARD BACKGROUNDS
   ========================================================= */

.page-inner .inner-page-content
.item-test:nth-child(odd) .testimonial-item {
    background-color: var(--c9s-sync-green-light);
}


/* =========================================================
   HOMEPAGE — IT CONSULTING INTRO HEADING
   ========================================================= */

.home-intro .content h2 {
    color: var(--c9s-sync-green);
}

/* =========================================================
   HOMEPAGE — OUTLINE LEARN MORE BUTTONS
   ========================================================= */

.homeMain .btn.black-white-btn {
    color: var(--c9s-evergreen);
    border-color: var(--c9s-evergreen);
}

.homeMain .btn.black-white-btn span {
    color: var(--c9s-evergreen);
}

.homeMain .btn.black-white-btn::before {
    background-color: var(--c9s-sync-green);
}

.homeMain .btn.black-white-btn:hover {
    border-color: var(--c9s-sync-green);
    color: var(--c9s-interface-indigo);
}

.homeMain .btn.black-white-btn:hover span {
    color: var(--c9s-interface-indigo);
}

/* =========================================================
   HOMEPAGE — WHO WE ARE
   ========================================================= */

.home-who {
    background-color: var(--c9s-interface-indigo);
}

.home-who h4 a {
    color: var(--c9s-sync-green);
}

.home-who h4 a:hover {
    color: #fff;
}

.home-who p {
    color: #fff;
}


/* =========================================================
   C9S TYPOGRAPHY — BRAND FONTS
   ========================================================= */

:root {
    --c9s-font-heading: "Bricolage Grotesque", sans-serif;
    --c9s-font-body: "Manrope", sans-serif;
}


/* ---------------------------------------------------------
   Body Typography
   --------------------------------------------------------- */

body,
p,
ul li,
ol li,
input,
textarea,
select,
button {
    font-family: var(--c9s-font-body);
}


/* ---------------------------------------------------------
   Main Headings
   --------------------------------------------------------- */

h1,
h2 {
    font-family: var(--c9s-font-heading);
    font-weight: 400;
    letter-spacing: 0;
}


/* ---------------------------------------------------------
   Supporting Headings
   --------------------------------------------------------- */

h3,
h4,
h5,
h6 {
    font-family: var(--c9s-font-body);
    font-weight: 700;
}


/* =========================================================
   HOMEPAGE — LEARN MORE BUTTON CONSISTENCY
   ========================================================= */


/* ---------------------------------------------------------
   Light-background buttons
   Evergreen outline / text
   --------------------------------------------------------- */

.homeMain .btn.black-white-btn {
    background-color: transparent;
    border-color: var(--c9s-evergreen);
    color: var(--c9s-evergreen);
}

.homeMain .btn.black-white-btn span {
    color: var(--c9s-evergreen);
}


/* ---------------------------------------------------------
   Dark-background buttons
   White outline / text
   --------------------------------------------------------- */

.homeMain .btn.white-clear-btn,
.homeMain .btn.white-clear-blue-btn {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}

.homeMain .btn.white-clear-btn span,
.homeMain .btn.white-clear-blue-btn span {
    color: #fff;
}


/* ---------------------------------------------------------
   Unified animated fill
   --------------------------------------------------------- */

.homeMain .btn.black-white-btn::before,
.homeMain .btn.white-clear-btn::before,
.homeMain .btn.white-clear-blue-btn::before {
    background-color: var(--c9s-sync-green);
}


/* ---------------------------------------------------------
   Unified hover state
   --------------------------------------------------------- */

.homeMain .btn.black-white-btn:hover,
.homeMain .btn.white-clear-btn:hover,
.homeMain .btn.white-clear-blue-btn:hover {
    background-color: transparent;
    border-color: var(--c9s-sync-green);
    color: var(--c9s-interface-indigo);
}

.homeMain .btn.black-white-btn:hover span,
.homeMain .btn.white-clear-btn:hover span,
.homeMain .btn.white-clear-blue-btn:hover span {
    color: var(--c9s-interface-indigo);
}