/* Cascading Images (updated 9/4/2024) */
.cascading-images-wrapper-2 {
	display: inline-block;
	padding: 12% 20%;
	padding-top:0;
	margin-left:20%;
	margin-bottom:20%;
	float:right;
}

.cascading-images-wrapper-2 .cascading-images-2 {
	transform: translate3d(0, -35%, 0);
}

.cascading-images-wrapper-2 .cascading-images-2 img {
	max-width: 100%;
}

h2.service-section-title {
	margin-top:2em;
	margin-bottom:.5em;
	font-weight:500;
}
h3.service-highlight-title {
	margin-top:1.2em;
	margin-bottom:.5em;
}

h3 {
	margin-bottom: .5em;
}

p {
	margin: 1em 0;
	font-size: 1.2em;
}

li {
	font-size:1.2em!important;
}

.h3-custom-ol li::marker {
  font-size: 1.8em; /* Adjust the list number size */
}


.breadcrumb-active {
    color: white; /* matching the background */
    pointer-events: none; /* Prevent users from accidentally clicking on it */
}

[id] {
    scroll-margin-top: 90px!important; /* Adjust based on your navbar height */
}

img-float-right {
	float:right!important;
	margin-left:1.5rem !important;
}

th, td {
	border: solid #000 1px;
}

.cursor-follower {
  pointer-events: none;
}


/* These are specific to the case study page with the new class type trying to increase the size of the image, everything seemed to work except the shadows.  
Decided to take a different approach for now and utilize the blog pages instead. */
.case-study-image {
    overflow:visible!important;
	overflow-clip-margin:unset!important;
	width: 100%;
    height: auto;
    object-fit: cover; /* Ensure the image scales proportionally */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1)!important; /* Retain shadow effect */
    border-radius: 10px!important; /* Optional: Slightly rounded corners */
}

.case-study-container {
    overflow:visible!important;
	overflow-clip-margin:unset!important;
	padding: 0;
    margin: 0 auto;
    display: flex;
    align-items: start; /* Align to the top */
    justify-content: center;
}

.sticky-note {
    background-color: #FFFB7D; /* Sticky note yellow */
    border: 1px solid #e1cc58; /* Slightly darker border */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); /* Subtle lift */
    font-family: 'Short Stack', cursive;
	color:#000000!important;
    font-size: 1rem;
    padding: 1em;
    max-width: 25em;
    float: right;
    margin: 0 0 1em 2em;
    border-radius: 6px;
}

.sticky-note-title {
    text-align: center;
    font-family: 'Short Stack', cursive;
	font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0.5em;
	position: relative;	
	color: #000000!important;
}

.sticky-note-title .swoosh {
	display: block;
	margin: 0.2em auto 0;
	margin-top:-.2rem;	
	width: 100px;  /* Adjust as needed */
	height: auto;
}


@media screen and (max-width: 768px) {
    .sticky-note {
    	float: none;
   		margin: 1em auto;
		width: 90%;}
}

.highlight-content-wrapper {
	margin: 3em auto;
	/*padding: 0 2em 0 0; /* Add right padding to account for sticky note */
	max-width: 900px;
	width: 70%;
	box-sizing: border-box;
	position: relative;
	z-index: 1;	
}

.highlight-content-box {
    max-width: 900px; /* Optional, to avoid it stretching on large screens */
	box-sizing: border-box;
    display: block;
}

.highlight-content-callout {
	background-color: #f4f6f9;
	border-left: 4px solid #e91c24;
	border-right: 4px solid #e91c24;	
	padding: 1em 1.5em;
	margin: 2em 0;
	font-size: 1.1em;
	font-weight: 500;
	text-align: center;
}

.red-highlight-content-callout {
	background-color: #e91c24;
	border-left: 4px solid #e91c24;
	border-right: 4px solid #e91c24;
	padding: 1em 1.5em;
	margin: 2em 0;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	color:#FFF;
}

.highlight-content-callout-nobkgd {
	margin: 3em auto;	
	font-size: 1.1em;
	font-weight: 600;
	padding-left: 1em;
	border-left: 4px solid #e91c24;
	border-right: 4px solid #e91c24;	
	color: #333;	
}

.highlight-content-centered {
	margin: 3em auto;	
	text-align: center;
	font-size: 1.2em;
	color: #e91c24;
}

.series-title {
	font-size: 1em;
	font-weight: 500;
	color: #666;
	padding-top: .25em!important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Compass Descriptions (Timeline Style) */
.compass-timeline {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.compass-step {
  display: flex;
  align-items: center;
  margin: .5rem 0;
  position: relative;
}

.bubble {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -30px;
  z-index: 1;
}

.bubble img {
  width: 36px;
  height: 36px;
}

.step-content {
  background-color: #f5f5f5;
  padding: .5rem;
  padding-left:1.6rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  color: #000;
  font-size: 1em;
  line-height:1.3em;
  flex: 1;
}

/* Scheduling Button */
.strategy-call-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #e91c24;
  color: #ffffff;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease;
}

.strategy-call-button:hover {
  background-color: #fff; /* hover color */
  border: solid #e91c24 1px;
}

/* Tabs adjustments */
.nav-tabs.nav-justified li .nav-link {
	min-height: 100px; /* 8em */
}
.tabs-vertical .nav-tabs {
	width:14%;
}

/* Apply divider to all vertical nav-items */
.tabs-vertical .nav-tabs > li .nav-link, .tabs-vertical .nav-tabs > li {
	border:1px solid #fff;
 	border-radius: 8px 0 0 8px!important;
}

/* Align icon and text inline with proper spacing */
.tabs-vertical .nav-tabs > li .nav-link {
  display: flex;
  align-items: center;
  gap: 4px; /* space between icon and label */
  text-align: left;
  padding: 8px; /* adjust as needed */
}

/* Icon size control (optional but helps consistency) */
.tabs-vertical .nav-tabs > li .nav-link img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* adjusting vertical nav color and not bold to black, keeping the active red/bold */
.tabs-vertical .nav-tabs > li .nav-link {
	color: #000!important;
	font-weight:100;
}
.tabs.tabs-vertical.tabs-left .nav-tabs .nav-link.active{
	color: var(--primary)!important;
	font-weight: bold;
}

/* attempting to fix the lightbox width issue to resolve calendly not going horizontal */