/* ******************************************************************************
*********************************************************************************
Use this file to override any of the CSS styles preset in the themed
stylesheets or you can add your own custom styles.
*********************************************************************************
****************************************************************************** */

/* Test */


















































.partner-slider .w-full.h-auto {
  height: 55px !important;
  width: auto !important;
}
.custom-menu-primary ul li.has-submenu > ul .has-submenu.menu-item {

  background-image: url("https://www.itforce.ca/hubfs/chevron-down-solid-full.svg");
  background-repeat: no-repeat !important;
  background-size: 17px !important;
  background-position: 93% 14px !important;
}
.custom-menu-primary ul li.has-submenu > ul .menu-item {
    background-color: #fff !important;
}
.custom-menu-primary ul li.has-submenu > ul .menu-item .menu-link {
  color: black !important;
}
.dnd-section > .row-fluid,
.page-center,
.content-wrapper {
  max-width: 1180px;
}
.space-y-4.image-text-section-content p strong {
  font-weight: 400;
}
.custom-menu-primary ul li.has-submenu > ul {
  width: 220px !important;
}
.big-number {
  font-size: 40px !important;
}
.casestudies-carousel .h2.mb-6 {
  text-align: center;
}
.dnd-section {
  padding-bottom: 80px;
  padding-top: 80px;
}
.itf-popup.itf-lockwidth.itf-desktop-only.open {
  left: 0 !important;
  bottom: 0 !important;
}
.body-container__homepage .dnd-section:nth-child(odd) {
  background-color: #333;
}





body {
  color: #494A52;
  font-family: Montserrat Variable F;
  font-weight: 500;
  font-size: 1.1rem;
}

p {
  font-family: Montserrat Variable F;
  font-weight: 500
}

a { 
  color: rgba(47, 152, 206, 1.0); 
}

.custom-menu-primary .menu-link{
font-size: 0.85rem !important;
}

a:hover,
a:focus {
  color: rgba(0, 0, 0, 1.0);  
}


h1 {
  color: #000000;
  font-family: Montserrat Variable F;
  font-size: 2.25rem;
  font-weight: 500;
}


h2 {
  color: #000000;
  font-family: Montserrat Variable F;
  font-size: 1.875rem;
  font-weight: 500;
}


h3 {
  color: #000000;
  font-family: Montserrat Variable F;
  font-size: 1.75rem;
  font-weight: 500;
} 

h4 {
  color: #000000;
  font-family: Montserrat Variable F;
  font-size: 1.625rem;
  font-weight: 500;
}

h5 {
  color: #000000;
  font-family: Montserrat Variable F;
  font-size: 1.5rem;
  font-weight: 500;
}

h6 {
  color: #000000;
  font-family: Montserrat Variable F;
  font-size: 1.375rem;
  font-weight: 500;
}

@media (max-width: 921px){
  .custom-menu-primary ul li.has-submenu ul {
  width: 100% !important;
}
  .custom-menu-primary ul li.has-submenu ul li {
  background-image: none !important;
}
  
  h1 {
    font-size: 30px;
  }
  h2{
    font-size: 25px;
  }

  h3{
    font-size: 20px;
  }
} 





form,
.submitted-message {
  border-color: rgba(#null, 0.0);
  font-family: Montserrat Variable F;
}

h3.form-title {
  background-color: rgba(255, 255, 255, 0.0);
  color: rgba(0, 0, 0, 1.0);
  
}

.hs-button,
.button--primary {
  background-color: rgba(201, 249, 7, 1.0);
  border-color: rgba(0, 0, 0, 1.0);
  border-radius: 0px;
  border-width: 0px;
  color: rgba(0, 0, 0, 1.0);
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.hs-button:hover,
.hs-button:focus,
.button--primary:hover,
.button--primary:focus {
  background-color: rgba(0, 0, 0, 1.0);
  border-color: rgba(0, 0, 0, 1.0);
  color: rgba(255, 255, 255, 1.0);
}

.hs-button:active,
.button--primary:active {
  background-color: rgba(241, 255, 47, 1.0);
  border-color: rgba(40, 40, 40, 1.0);
  color: rgba(0, 0, 0, 1.0);
}

.hs-form .field > label,
.hs-form-field > label {
  color: rgba(0, 0, 0, 1.0);
}

.hs-form legend {
  color: rgba(0, 0, 0, 0.5);
}

form input,
form select,
form textarea,
.hs-input,
input#hs-pwd-widget-password {
  border-color: rgba(208, 208, 208, 1.0);
  color: ;
  border-radius: 2px;
}

form input:focus,
form select:focus,
form textarea:focus,
.hs-input:focus,
input#hs-pwd-widget-password:focus {
  border-color: rgba(234, 234, 234, 1.0);
}

.fn-date-picker .pika-table thead th {
  color: rgba(255, 255, 255, 0.0);
}

.hs-input:-moz-placeholder,
.hs-input::-webkit-input-placeholder,
.hs-field-desc,
.hs-dateinput:before,
.hs-richtext {
  color: #494A52;
}

.hs-richtext {
  font-size: 1.1;
}

.hs-default-font-element,
.hs-main-font-element {
  font-family: Montserrat Variable F;
}

.fn-date-picker td.is-today .pika-button {
  color: #000;
}

.fn-date-picker td.is-selected .pika-button {
  background: #000;
}

.fn-date-picker td .pika-button:hover {
  background-color: #333 !important;
}





th,
td {
  background-color: rgba(255, 255, 255, 1.0);
  border: 1px solid rgba(0, 0, 0, 1.0);
  color: rgba(0, 0, 0, 1.0);
}

thead th,
thead td {
  background-color: rgba(0, 0, 0, 1.0);
  color: rgba(255, 255, 255, 1.0);
}

tfoot td {
  background-color: rgba(0, 0, 0, 1.0);
  color: rgba(255, 255, 255, 1.0);
}

table,
tbody + tbody {
  border-color: rgba(0, 0, 0, 1.0);
}





/*** Noraml header ***/

.normal_header {
  background-color: rgba(255, 255, 255, 0.0);
  border-color: rgba(234, 234, 234, 1.0);
} 

.normal_header  .custom-menu-primary>div>ul>li>a{
  color : rgba(255, 255, 255, 1.0);
}

.normal_header  .custom-menu-primary>div>ul>li>a:hover{
  color : rgba(201, 249, 7, 1.0);
}

.normal_header  .custom-menu-primary>div>ul>li:hover >a{
  background-color : rgba(255, 255, 255, 0.0);
}  

.normal_header .custom-menu-primary>div>ul>li.active-branch > a{
  background-color : rgba(255, 255, 255, 0.0);
  color : rgba(201, 249, 7, 1.0);
}

.normal_header .custom-menu-primary >div  ul ul {
  background-color : rgba(0, 0, 0, 1.0);
}

.normal_header .custom-menu-primary >div  ul ul li a {
  color : rgba(255, 255, 255, 1.0);
}

.normal_header .custom-menu-primary >div  ul ul li a:hover {
  color : rgba(201, 249, 7, 1.0);
}

.normal_header .custom-menu-primary >div  ul ul li:hover > a {
  background-color : rgba(255, 255, 255, 0.0);
}

.normal_header .custom-menu-primary >div  ul ul li.active-branch > a  {
  background-color : rgba(255, 255, 255, 0.0);
  color : rgba(201, 249, 7, 1.0);
}

.normal_header .top_links ul li a{
  color : rgba(255, 255, 255, 1.0);
}

.normal_header .top_links ul li a:hover,
.normal_header .top_links ul li a:focus{
  color : rgba(201, 249, 7, 1.0);
}

/*** Sticky Header **/


.sticky_header {
  background-color: rgba(255, 255, 255, 1.0);
  border-color: rgba(234, 234, 234, 1.0);
} 

.sticky_header  .custom-menu-primary>div>ul>li>a{
  color : rgba(103, 103, 102, 1.0);
}

.sticky_header  .custom-menu-primary>div>ul>li>a:hover{
  color : rgba(0, 0, 0, 1.0);
}

.sticky_header  .custom-menu-primary>div>ul>li:hover >a{
  background-color : rgba(255, 255, 255, 0.0);
}  

.sticky_header .custom-menu-primary>div>ul>li.active-branch > a{
  background-color : rgba(255, 255, 255, 0.0);
  color : rgba(0, 0, 0, 1.0);
}

.sticky_header .custom-menu-primary >div  ul ul {
  background-color : rgba(255, 255, 255, 1.0);
}

.sticky_header .custom-menu-primary >div  ul ul li a {
  color : rgba(103, 103, 102, 1.0);
}

.sticky_header .custom-menu-primary >div  ul ul li a:hover {
  color : rgba(0, 0, 0, 1.0);
}

.sticky_header .custom-menu-primary >div  ul ul li:hover > a {
  background-color : rgba(255, 255, 255, 0.0);
}

.sticky_header .custom-menu-primary >div  ul ul li.active-branch > a  {
  background-color : rgba(255, 255, 255, 0.0);
  color : rgba(0, 0, 0, 1.0);
}

.sticky_header .top_links ul li a{
  color : rgba(103, 103, 102, 1.0);
}

.sticky_header .top_links ul li a:hover,
.sticky_header .top_links ul li a:focus{
  color : rgba(0, 0, 0, 1.0);
}







.footer {
  background-color: rgba(255, 255, 255, 1.0);
  color: rgba(0, 0, 0, 1.0); 
}

.footer a{
  color: rgba(0, 0, 0, 1.0); 
}

.footer a:hover{
  color: rgba(201, 249, 7, 1.0); 
}

.copyright{
  color: rgba(0, 0, 0, 1.0); 
}
.h3-more-to-explore{
  font-family: Montserrat Variable F;
    font-size: 1.75rem;
    font-weight: 500;
}

















body .icon svg {
  fill: #000;
}

body .tns-nav button.tns-nav-active {
  background-color: #000;
}

body .tns-nav button:hover,
body .tns-nav button:focus {
  background-color: #000;
}

body .social-links__icon {
  background-color: #000;
}

body .social-links__icon:hover svg,
body .social-links__icon:focus svg {
  fill: rgba(#null, 0.0);
}

body .social-links__icon:active svg {
  fill: rgba(#null, 0.0);
}

body .team-member__description {
  background-color: #333;
}

 .post_body ul{
 list-style: disc !important;
  margin-left: 18px !important;
}




.body-container__website .dnd-section:nth-child(odd) {
  background-color: {typography=, tables=, buttons=, spacing=, footer=, global_colors=, header=, forms=}
}

@font-face {
  font-family: "Montserrat Variable F" !important;
  src: url("https://www.itforce.ca/hubfs/Montserrat-VariableFont_wght-2.ttf") format("truetype") !important;
  font-display: swap;
  font-weight: 100 900 !important;
}

/* blog css */
.hs-blog-post .post_body h2,.hs-blog-post .post_body h3,.hs-blog-post .post_body h4,.hs-blog-post .post_body h5,.hs-blog-post .post_body h6{margin-bottom:15px;}
.hs-blog-post .post_body h2+p,.hs-blog-post .post_body h3+p,.hs-blog-post .post_body h4+p,.hs-blog-post .post_body h5+p,.hs-blog-post .post_body h6+p{margin-top:15px;}

.row-fluid-wrapper.row-depth-1.row-number-30.dnd-row {width: 100%;}




/* ==========================================================
   Mobile side spacing - 16px gutter on small screens
   (remove this whole block to revert)
   ========================================================== */
@media (max-width: 767px) {
  /* National / local service pages container */
  .max-w-\[1140px\].mx-auto.px-2\.5 {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* What We Do page rows */
  [class*="wht_do_row"] .dnd-section > .row-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Blog listing / generic page container */
  .page-center,
  .blog_container .page-center {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Inner page banner buttons: stack instead of overflowing */
  .bnr_btn_wrap_in {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  .bnr_btn_wrap_in .bnr_btn {
    width: 100%;
    max-width: 280px;
  }
  .banner_wrap .bnr_btn_wrap_in .bnr_btn a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    text-align: center;
    /* same size for both banner buttons (one had an inline 16px) */
    font-size: 14px !important;
    line-height: 18px !important;
    padding: 14px 20px !important;
  }
}
/* ===== End mobile side spacing ===== */

/* ==========================================================
   Book a Meeting popup - match the Request Pricing popup (2 columns, close button inside)
   (remove this whole block to revert)
   ========================================================== */
@media (min-width: 768px) {
  .itf-modal-overlay .itf-modal {
    max-width: 700px; /* same width as the Request Pricing popup */
  }
  .itf-modal-overlay .itf-modal-close {
    top: 10px;   /* close button inside the form card, as on Request Pricing */
    right: 100px;
  }
}
/* ===== End Book a Meeting popup ===== */

/* ==========================================================
   Blog posts - space below "More To Explore" + CTA buttons
   (remove this whole block to revert)
   ========================================================== */
.hs-blog-post .post_container {
  padding-bottom: 60px;
}
@media (max-width: 767px) {
  .hs-blog-post .post_container {
    padding-bottom: 40px;
  }
}
/* CTA box buttons: same green as top nav, black text
   (!important needed to override inline styles in post content) */
.hs-blog-post .post_body .cta-container a,
.hs-blog-post .post_body .cta-container a:visited {
  display: inline-block !important;
  background-color: #C9F907 !important;
  color: #000000 !important;
  padding: 12px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}
.hs-blog-post .post_body .cta-container a:hover,
.hs-blog-post .post_body .cta-container a:focus {
  background-color: #b5e006 !important;
  color: #000000 !important;
}
/* ===== End Blog posts ===== */

/* ==========================================================
   Mobile menu - taller rows so items are easier to tap
   (remove this whole block to revert)
   ========================================================== */
@media (max-width: 921px) {
  .hd_nav_inr .custom-menu-primary .menu-link {
    box-sizing: border-box !important;
    height: auto !important;
    max-height: none !important;
    min-height: 50px;
    line-height: 24px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
  .hd_nav_inr .custom-menu-primary .child_trigger {
    height: 50px !important;
  }
}
/* ===== End Mobile menu ===== */

/* ==========================================================
   Who We Are - partner logo slider on mobile
   (logos kept in proportion, arrows brought inside the screen)
   (remove this whole block to revert)
   ========================================================== */
@media (max-width: 767px) {
  .about_page .slider__container .splide__track {
    margin: 0 30px;
    overflow: hidden;
  }
  .about_page .slider__container .splide__arrow {
    width: 26px;
    height: 26px;
  }
  .about_page .slider__container .splide__arrow.splide__arrow--prev {
    left: 0 !important;
  }
  .about_page .slider__container .splide__arrow.splide__arrow--next {
    right: 0 !important;
  }
  .about_page .slider__container .splide__slide--image {
    object-fit: contain;
  }
}
/* ===== End Who We Are partner slider ===== */