.hhs-flexi-card {
  height: 100%;
}

/* Change bullet points to white for lists */
.white-bullets li {
    color: #ffffff !important;
}

/*****************************************/
/* NAV MENU */
/*****************************************/
/* Make all mega menus 1140px wide on large screens */
@media (min-width: 1200px) {
  .mega-menu .container {
    max-width: 1160px;
    width: 100%;
    margin: 0 auto;
  }
}

/* Mega menu overall padding (top/bottom) */
.mega-menu.active {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* Reduce padding inside each column content block */
.mega-menu.active .mega-text-con {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}



/*****************************************/
/* ALL PAGES */
/*****************************************/
/*** ANCHOR LINKS - when clicked add space above before the anchor link ***/
:target {
  scroll-margin-top: 100px !important;
}


/* LINE BREAK - Hide line break on screens smaller than 992px */
  @media (max-width: 991px) {
    .break-992 {
      display: none;
    }
  }

/* HEADINGS - Let headings use their normal/base weight */
h4,
h5,
h6 {
  font-weight: inherit !important;
}

/* Make <strong> inside headings actually bold */
h4 strong,
h5 strong,
h6 strong {
  font-weight: 700 !important;
}


/* Make CTA row crop its columns (and any column backgrounds/images) */
.clean-base.cta-box .container > .row {
  border-radius: 16px;
  overflow: hidden;
  position: relative; /* helps ensure clipping works consistently */
}

/* Make links text default color - sample cyber page */
.black-text-links a,
.black-text-links a:visited {
  color: #36383D !important;
  text-decoration: none;
}

.black-text-links a:hover,
.black-text-links a:focus {
  color: #D377FF !important;
  text-decoration: none;
}




/********* 2023 CODES TO CHECK *********/
/* Custom CSS for responsive layout */
@media screen and (max-width: 991px) {
  .responsive-container-1 {
    flex-direction: column;
  }
}


/* Custom CSS for responsive layout */
@media screen and (max-width: 550px) {
  .responsive-container-2 {
    flex-direction: column;
  }
}




/* remove aria label 'Toggle menu' so it doesn't show on Google sitelinks */
  .screen-reader-text {
    visibility: hidden !important;
}
  
/* Hide Aria label 'Toggle Menu' for elements with class js-sidebar-nav-toggle */
button.js-sidebar-nav-toggle .screen-reader-text {
    visibility: hidden !important;
    display: none !important;
}

}

/***CSS CODES FOR MICROSOFT CAPABILITIES PAGE***/

/*Custom CSS Code for Microsoft Services Covered - Image change screens less 575px*/
@media (max-width: 575px) {
  /* Targeting the image with class c-img-2 */
  #services-covered .c-img-1 {
    /* Replace the image source with a new URL */
    content: url('https://4500047.fs1.hubspotusercontent-ap1.net/hubfs/4500047/assets/images/msp-capabilities/sa-microsoft-services-table-1097px.jpg');
    width: 500px; /* Adjust the width as per your requirement */
    height: auto;
    max-width: 100%;
  }
}

/* Custom CSS Code for Microsoft Services Covered - Image change on screens less 380px */
@media (max-width: 380px) {
  /* Targeting the image with class c-img-2 */
  #services-covered .c-img-1 {
    /* Replace the image source with a new URL */
    content: url('https://4500047.fs1.hubspotusercontent-ap1.net/hubfs/4500047/assets/images/msp-capabilities/sa-microsoft-services-table-710px.jpg');
    width: 500px; /* Adjust the width as per your requirement */
    height: auto;
    max-width: 100%;
  }
}

/* Remove annotation below MS services covered at 767px screens */
@media (max-width: 767px) {
  #services-covered .c-img-2 {
    display: none; /* Hide the element */
  }
}

/* CSS For Magic Module texts on smaller screens - Center text align */
@media (max-width: 767px) {
  .center-align-small-screens {
    /* Centering the element horizontally and vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* For horizontal centering */
  }
}

/* Customer Reference logos - Image change on screens less 350px  */
@media (max-width: 350px) {
  #ms-capabilities-customer-references .c1 .hhs-rich-text img {
    /* Replace the image source with a new URL */
    content: url('https://4500047.fs1.hubspotusercontent-ap1.net/hubfs/4500047/assets/images/msp-capabilities/sa-customer-reference-mobile-v2.png');
    width: 500px; /* Adjust the width as per your requirement */
    height: auto;
    max-width: 100%;
  }
}


/* Security page - Add shadow to hover cards */
.security-services-hover-cards .hhs-img-hover-con {
  box-shadow: 0 4px 16px rgba(33, 128, 125, 0.17); /* Updated color and transparency */
}


/* Security page - Make the icons and headlines responsive on smaller screens */
  /* Default style for larger screens */
  .icon-headline {
    display: flex;
    align-items: center;
  }

  /* Responsive style for screens 399px and smaller */
  @media (max-width: 399px) {
    .icon-headline {
      flex-direction: column !important; /* Stacks the icon and text vertically */
      align-items: flex-start !important; /* Ensures the content is aligned to the left */
      text-align: left !important; /* Ensures the text is left-aligned */
    }

    .icon-headline img {
      margin-right: 0 !important; /* Removes the margin between the icon and text */
      margin-bottom: 15px !important; /* Adds space below the icon */
      display: inline-block !important; /* Keeps the image inline and left-aligned */
    }

    .icon-headline span {
      display: inline-block !important; /* Ensures text stays inline and aligned with the image */
      text-align: left !important; /* Ensures the text is left-aligned under the icon */
      width: 100% !important; /* Makes sure the text spans the entire width */
    }
  }



/* Pillar pages - Make the Cyber Security icon and text responsive on smaller screens */
  @media (max-width: 420px) {
    .responsive-icon-text {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .responsive-icon-text img {
      margin-bottom: 10px; /* Adds space between the icon and the text */
    }

    .responsive-icon-text span {
      text-align: center;
    }
  }


/******************************************************************************************/
/***** WEBSITE REFRESH 2025 -  NAVIGATION MENU ******/
/* Make nav dropdown arrows use the same colour as the link text */
.hhs-nav-grid__menu .hhs-nav-links li > a > svg path {
  fill: currentColor !important;   /* uses the <a> tag's color (your theme Link Color) */
}

/***** WEBSITE REFRESH 2025 -  HOMEPAGE ******/
.card-flipper .tile .back .contents {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important; /* bottom align */
  height: 100% !important;
  text-align: left !important; /* force left */
}

/***** WEBSITE REFRESH 2025 -  BLOG THUMBNAILS - TYP ETC ******/
  .hhs-blog-post-card {
    border: 1px solid #36383D; /* Adjust the color as needed */
    border-radius: 20px; /* Adjust the radius as needed */
    overflow: hidden; /* Ensures content inside the cards won’t overflow beyond the rounded corners */
    background-color: #FFFFFF; /* Replace with your desired background color */
  }


/***** FORM CHECK BOX 2025 ******/
/* This allows the checkbox and radio select list items to only take up 50% of their container, and floats the list items left which allows multiple items to sit in the same row. */
li.hs-form-checkbox,
li.hs-form-radio {
    float: left;
    width: 50%; /* NOTE: This percentage may need to be lower if you have margins applied to the list items */
    list-style: none;
}

/* Media query for screens between 769px and the biggest desktop screen size */
@media (max-width: 768px) and (min-device-width: 1025px) {
    /* Reset the styles for screens smaller than 769px */
    li.hs-form-checkbox,
    li.hs-form-radio {
        float: none;
        width: auto;
    }
}

/* Media query for screens 767px and smaller */
@media (max-width: 767px) {
    /* Reset the styles for screens smaller than 768px */
    li.hs-form-checkbox,
    li.hs-form-radio {
        float: none;
        width: auto;
    }
}


/* LANDING PAGES*/
/* Page Specific code for speakers*/
  .speakers-wrap {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap; /* allows stacking if the column is too narrow */
}

.speakers-wrap > div {
  max-width: 200px;
  width: 100%
}




/***** VIZIAL IO PAGE - CSS CODES ******/
/* Makle Cards inline on desktop */  
.feature-item {
  display: flex;
  gap: 20px;
  align-items: center;
}

.feature-icon {
  flex: 1;
}

.feature-text {
  flex: 4;
}

.feature-icon img {
  max-width: 80px;
  height: auto;
}

/* Stack on smaller screens */
@media (max-width: 575px) {
  .feature-item {
    flex-direction: column;
  }
}

/******************************/
/***** MANAGED SERVICES ******/
/******************************/
/* Round the actual grey background */
#hs_cos_wrapper_widget_1776253620224 .tab-feature-con,
#hs_cos_wrapper_widget_1776253620224 .tab-feature-con > .container,
#hs_cos_wrapper_widget_1776253620224 .tab-feature-con > .container > .row {
  border-radius: 12px;
}

/* Make sure inner content does not spill outside */
#hs_cos_wrapper_widget_1776253620224 .tab-feature-con {
  overflow: hidden;
}



/* Rich Text - 2 columns text with icons*/
.sa-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 14px 24px;
}

.sa-cert-item {
  display: flex;            /* icon + text side by side */
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.sa-cert-item img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}  
  
@media (max-width: 576px) {
  .sa-cert-grid {
    grid-template-columns: 1fr; /* stack into 1 column */
  }
}  


/* Code for list with number icon - Mobile stacking */
@media (max-width: 576px) {
  .sa-feature {
    flex-direction: column;
    align-items: flex-start;
  }

  .sa-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    margin-bottom: 8px;
  }
}

/* Remove all spacing from accordion titles */
.learn-more-accordions .c-accordion a.accordion-title  {
  padding: 0 !important;
  margin: 0 !important;
}
  
.learn-more-accordions 
.c-accordion.accordion-controls {
  margin-top: 15px !important;
}