/**GLOBAL**/

/* Add shadow on hover cards */
.hhs-img-hover-con {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Add bottom spacing between hover cards on medium screens */
@media (min-width: 768px) and (max-width: 991px) {
  .hover-cards .card-col {
    margin-bottom: 15px;
  }
}

/*********************************/
/*ADD BREAK LINE TO SCREENS BIGGER THAN 768px */
/*********************************/
@media (max-width: 768px) {
  .break {
    display: none;
  }
}



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



/** SUBSCRIPTION PREFERENCES PAGES**/

/* Remove the black overlay against the hero section bg image */
.sub-pre-header .head-overlay {
  display: none !important;
}


/*********************************/
/* PAGE - HOME PAGE*/ 
/*********************************/
/* Adjust position of 2nd and 3rd hover cards */
@media (min-width: 992px) {
    /* Targeting the second card in the hover-cards-1 container */
    #hover-cards-1 .row .col-lg-4.col-sm-12:nth-of-type(2) {
        margin-top: -30px;
    }

    /* Targeting the third card in the hover-cards-1 container */
    #hover-cards-1 .row .col-lg-4.col-sm-12:nth-of-type(3) {
        margin-top: -60px;
    }
}


/* Move dots to the center */
@media (min-width: 993px) {
   .testimonials-module .c-slider-container .c-slider .slick-dots {
        position: absolute;
        left: 50%;
        right: 50%;
        transform: translateX(-50%);
        bottom: -25px; /* Adjust if necessary to better position the dots */
        text-align: center;
        width: auto;
    }
}


/* Row Shadow for homepage information section */
/* 3 Item 1 row background */
.information .row {
    box-shadow:  0 4px 16px rgba(229, 229, 240, 0.5); /* Adjust the shadow values as needed */
    border-radius: 16px; /* Adjust the radius for rounded corners */
    overflow: hidden; /* Ensures rounded corners are applied */
}


/*********************************/
/*SECTION - FOOTER */
/*********************************/
/* Make sure columns are center aligned on mobile  */
@media (max-width: 767px) {
  .hhs-foot-nav-cols {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hhs-foot-nav-cols > .col-12 {
    max-width: 100%;
    margin-bottom: 30px;
  }

  .hhs-foot-nav-col {
    margin: 0 auto;
  }

  .hhs-foot-nav-col .hs-menu-wrapper {
    justify-content: center !important;
  }

  .hhs-foot-nav-col img {
    margin-left: auto;
    margin-right: auto;
  }
}




/*********************************/
/*SECTION - CLIENT LOGOS */
/*********************************/
/* Force 4-column layout on tablet to stack the same way as 5 columns rows */
@media (min-width: 768px) and (max-width: 991px) {
  .four-column-logos .c-col {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}


/*********************************/
/* PAGE - HOW WE HELP PAGE */
/*********************************/
/*Add line and move images above*/
#job-description .c-col.c-1::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Center the line horizontally within the column */
    transform: translateX(-50%); /* Adjust positioning to keep the line centered */
    width: .5px; /* Adjust the thickness of the line */
    background: linear-gradient(to bottom, #FCB040, #fc6c3f); /* Gradient color for the line */
    z-index: 1; /* Ensure the line is behind the content */
    height: 940%; /* Ensure the line fills the height of the row */
}

#job-description .c-col.c-1 {
    position: relative;
    height: 100%; /* Ensure the column height matches the row height */
}

/* Hide the vertical line on screens smaller than 768px */
@media (max-width: 767px) {
    #job-description .c-col.c-1::before {
        display: none;
    }
}


/*********************************/
/* PAGE - WHO WE HELP */
/*********************************/
/* Adjust screen alignment */
.who-we-help-h2 {
    text-align: left; /* Default for larger screens */
  }

  @media (max-width: 768px) { /* Adjust breakpoint as needed */
    .who-we-help-h2 {
      text-align: center; /* Center-align for smaller screens */
    }
  }


/*********************************/
/*SUCCESS STORIES - CSS */
/*********************************/
/* Client name and image stacking CSS */
/* Default layout: Side-by-side */
.success-stories-testimonial {
  display: flex; /* Enables Flexbox */
  flex-direction: row; /* Align items side by side */
  align-items: center; /* Vertically center items */
  gap: 10px; /* Space between items */
}

/* Media query: Stack items vertically on smaller screens */
@media (max-width: 719px) {
  .success-stories-testimonial {
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
  }
}
  

/* ADD BORDER TO ROWS */
.success-stories-video .row {
  border: 2px solid #F1592A; /* Adds a border around the row */
}
  
  .success-stories-case-study .row {
  border: 2px solid #ffffff; /* Adds a border around the row */
}








/*********************************/
/*START */
/*MSP Profitability Page - Fly-wheel Diagram */
/*********************************/

.flywheel-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative; 
  z-index: 99;
  overflow: visible !important;
}

.flywheel {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1 / 1;
  overflow: visible !important;
}

/* Base style for absolutely positioned elements */
.piece {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* Wheel Group & Image Fade Logic */

.wheel-group {
  cursor: pointer;
  /* Transitions scaling and shadows on the wrapper */
  transition: transform 0.35s ease, filter 0.35s ease;
  z-index: 5;
}

.wheel-group:hover {
  transform: translate(-50%, -50%) scale(1.1);
  z-index: 20;
}

/* Force both images to perfectly overlap inside the wrapper */
.wheel-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.35s ease;
}

/* Hide colored by default */
.colored { opacity: 0; }

/* On hover, fade out uncolored and fade in colored */
.wheel-group:hover .uncolored { opacity: 0; }
.wheel-group:hover .colored { opacity: 1; }


/* Wheel Positions (Responsive Percentages) */

.red {
  left: 49.93%; top: 20.06%; width: 47.32%; height: 35.37%;
}
.red:hover {
  filter: drop-shadow(0 15px 15px rgba(220, 40, 40, .35));
}

.orange {
  left: 78.71%; top: 41.17%; width: 36.79%; height: 44.97%;
}
.orange:hover {
  filter: drop-shadow(0 15px 15px rgba(255, 140, 0, .35));
}

.yellow {
  left: 69.79%; top: 75.04%; width: 38.29%; height: 35.36%;
}
.yellow:hover {
  filter: drop-shadow(0 15px 15px rgba(255, 210, 0, .35));
}

.green {
  left: 30.29%; top: 75.08%; width: 38.32%; height: 35.33%;
}
.green:hover {
  filter: drop-shadow(0 15px 15px rgba(0, 170, 90, .35));
}

.blue {
  left: 21.27%; top: 41.29%; width: 36.74%; height: 45.02%;
}
.blue:hover {
  filter: drop-shadow(0 15px 15px rgba(0, 110, 255, .35));
}

/* Arrow Positions & Animations */

.arrow { 
  z-index: 3; 
  /* Removed the general animation here; we will apply specific ones to each arrow */
}

/* Arrow 1 (Red) - Animates from 0% to 20% */
.arrow:nth-of-type(1) { 
  left: 74.24%; top: 18.20%; width: 34.73%; height: 25.47%; 
  --start-x: 0%; --start-y: 0%; 
  animation: drawArrow1 5s ease-out infinite; 
}

/* Arrow 2 (Orange) - Animates from 20% to 40% */
.arrow:nth-of-type(2) { 
  left: 89.36%; top: 64.51%; width: 14.76%; height: 41.01%; 
  --start-x: 100%; --start-y: 0%; 
  animation: drawArrow2 5s ease-out infinite; 
}

/* Arrow 3 (Yellow) - Animates from 40% to 60% */
.arrow:nth-of-type(3) { 
  left: 49.89%; top: 95.20%; width: 43.22%; height: 6.35%; 
  --start-x: 100%; --start-y: 50%; 
  animation: drawArrow3 5s ease-out infinite; 
}

/* Arrow 4 (Green) - Animates from 60% to 80% */
.arrow:nth-of-type(4) { 
  left: 10.08%; top: 64.40%; width: 15.54%; height: 40.97%; 
  --start-x: 100%; --start-y: 100%; 
  animation: drawArrow4 5s ease-out infinite; 
}

/* Arrow 5 (Blue) - Animates from 80% to 100% */
.arrow:nth-of-type(5) { 
  left: 26.09%; top: 17.27%; width: 34.35%; height: 25.33%; 
  --start-x: 0%; --start-y: 100%; 
  animation: drawArrow5 5s ease-out infinite; 
}

/* Arrow Keyframes */

@keyframes drawArrow1 {
  0% { clip-path: circle(0% at var(--start-x) var(--start-y)); opacity: 0; }
  1% { opacity: 1; }
  20%, 100% { clip-path: circle(150% at var(--start-x) var(--start-y)); opacity: 1; }
}

@keyframes drawArrow2 {
  0%, 20% { clip-path: circle(0% at var(--start-x) var(--start-y)); opacity: 0; }
  21% { opacity: 1; }
  40%, 100% { clip-path: circle(150% at var(--start-x) var(--start-y)); opacity: 1; }
}

@keyframes drawArrow3 {
  0%, 40% { clip-path: circle(0% at var(--start-x) var(--start-y)); opacity: 0; }
  41% { opacity: 1; }
  60%, 100% { clip-path: circle(150% at var(--start-x) var(--start-y)); opacity: 1; }
}

@keyframes drawArrow4 {
  0%, 60% { clip-path: circle(0% at var(--start-x) var(--start-y)); opacity: 0; }
  61% { opacity: 1; }
  80%, 100% { clip-path: circle(150% at var(--start-x) var(--start-y)); opacity: 1; }
}

@keyframes drawArrow5 {
  0%, 80% { clip-path: circle(0% at var(--start-x) var(--start-y)); opacity: 0; }
  81% { opacity: 1; }
  100% { clip-path: circle(150% at var(--start-x) var(--start-y)); opacity: 1; }
}

.center {
  left: 50.07%; top: 51.80%; width: 23.18%; height: 17.49%;
  z-index: 10;
}

/* Apply changes only when the screen is 600px or smaller */
@media (max-width: 600px) {
  .wheel-group:hover {
    /* Increases the scale to 40% (1.4) */
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/*********************************/
/*END */
/*MSP Profitability Page - Fly-wheel Diagram */
/*********************************/














/*********************************/
/*LANDING PAGES - Hero Section with Forms */
/*********************************/
.hero-it-sales-book .c-content-con[role="form"] {
  background-color: #fff; /* White background */
  padding: 0px 25px 25px 25px; /* Space inside the box */
  border-radius: 10px;/* Optional: rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Optional: subtle shadow */
  margin: 0;  
}
  }