/* Custom CSS to supplement Bootstrap 5 */
.quote-card {
  background-color: #f8e3cc;
  border-radius: 0.5rem;
  position: relative;
}

.quote-icon-wrapper {
  width: 100%;
  padding-top: 100%; /* Creates a perfect square */
  background-color: none;
  border-radius: 50%;
  position: relative;
}

.quote-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
}

.blockquote {
  font-size: 1.25rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.blockquote::before {
  content: '\201C';
  font-size: 4rem;
  color: #009B77;
  font-family: serif;
  position: absolute;
  left: -1rem;
  top: -1.5rem;
  line-height: 1;
}

.blockquote::after {
  content: '\201D';
  font-size: 4rem;
  color: #009B77;
  font-family: serif;
  position: absolute;
  right: -1rem;
  bottom: -3rem;
  line-height: 1;
}

.blockquote-footer {
  font-size: 1rem;
  color: #444;
}

.blockquote-footer strong {
  font-size: 1.1rem;
  color: #333;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .blockquote {
    font-size: 1.1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  .blockquote::before {
    font-size: 3rem;
    left: -0.5rem;
    top: -1rem;
  }
  
  .blockquote::after {
    font-size: 3rem;
    right: -0.5rem;
    bottom: -2rem;
  }
}

	/* Custom CSS to supplement Bootstrap 5 */
	.quote-card {
		background-color: #f1f3f2;
		border-radius: 0.5rem;
		position: relative;
	}

	.quote-icon-wrapper {
		width: 100%;
		padding-top: 100%;
		/* Creates a perfect square */
		background-color: #f8e3cc;
		border-radius: 50%;
		position: relative;
	}

	.quote-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: auto;
	}

	.blockquote {
		font-size: 1.25rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.blockquote::before {
		font-family: "Font Awesome 6 Free";
		content: "\f10d";
		font-weight: 900;
		color: #00999A;
		position: absolute;
		left: -1rem;
		top: -1.5rem;
		font-size: 2.7rem;
		line-height: 1;
	}

	.blockquote::after {
		font-family: "Font Awesome 6 Free";
		content: "\f10e";
		font-weight: 900;
		color: #00999A;
		position: absolute;
		right: -1rem;
		bottom: -3rem;
		font-size: 2.7rem;
		line-height: 1;
	}

	.blockquote-footer {
		font-size: 1rem;
		color: #444;
		padding-left: 2rem;
	}

	.blockquote-footer::before {
		content: " ";
	}

	.blockquote-footer strong {
		font-size: 1.1rem;
		color: #333;
		font-weight: 600;
	}

	.customer-stories-sidebar {
		border-radius: 6px;
	}

	.customer-stories-sidebar ul {
		list-style-type: none;
		padding-left: 0;
	}

	.customer-stories-sidebar ul li {
		margin-bottom: 0.5rem;
	}

	.customer-stories-sidebar h1,
	.customer-stories-sidebar h2,
	.customer-stories-sidebar h3,
	.customer-stories-sidebar h4,
	.customer-stories-sidebar h5,
	.customer-stories-sidebar h6,
	.customer-stories-sidebar p,
	.customer-stories-sidebar p a,
	.customer-stories-sidebar li {
		color: #ffffff;
	}

	/* Responsive adjustments */
	@media (max-width: 768px) {
		.blockquote {
			font-size: 1.1rem;
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}

		.blockquote::before {
			font-size: 3rem;
			left: -0.5rem;
			top: -1rem;
		}

		.blockquote::after {
			font-size: 3rem;
			right: -0.5rem;
			bottom: -2rem;
		}
	}

	@media only screen and (min-width: 768px) {
		.quick-facts-col h2 {
			font-size: 38px!important;
		}
		
		.page-header {
			position: relative;
		}
	}

	.page-title h1 {
		color: #333333!important;
		font-size: 45px;
		font-weight: 600;
		line-height: 1.1em;
	}

	.cusomter-company-logo {
		max-height: 45px;
		height: 45px;
    	max-width: 200px;
		margin-bottom: 15px;
	}

	p:has(> strong) {
		margin-bottom: 0;
	}

	.customer-stories-col {
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: relative;
		transition: box-shadow 0.3s ease;
		min-height: 500px;
	}

	.customer-stories-col-title {
		padding: 2rem;
		padding-top: 13px;
	}

	.customer-stories-col-title .h5 {
		color: #333;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.4em;
		letter-spacing: 0;
	    margin-top: -11px !important;
		padding-top: 0;
	}

	.customer-stories-col-title .heading-title {
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 1px;
		padding-top: 0;
	}

	.customer-stories-thumbnail {
		background-position: center!important;
		background-size: cover!important;
		border-radius: 10px 10px 0 0;
		height: 280px;
		transition: all .6s ease-in-out;
		width: auto;
		position: relative;
	}

	.customer-stories-flip-box {
		background-color: rgba(0, 0, 0, 0);
		color: #FFF;
		height: 280px;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		transition: background-color 0.6s ease, opacity 0.6s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px;
		text-align: center;
		border-radius: 10px 10px 0 0;
		/* Hide text initially */
		opacity: 0;
		visibility: hidden;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.4em;
	}

	h2 + .paragraph { 
		margin-top: -20px!important; 
	}

	/* Show background and text on hover */
	.customer-stories-col:hover .customer-stories-flip-box {
		background-color: rgba(0, 0, 0, 0.6);
		opacity: 1;
		visibility: visible;
	}

	.customer-stories-sidebar:last-of-type a > strong {
		font-size: 15px!important;
		text-transform:uppercase;
	}

	.customer-stories-title {
		font-size: 2.8rem;
		line-height: 3.1rem;
	}

	.quick-facts-col {
		padding-right: 2rem;
	}

	.quick-facts-col > h3.fw-bolder.mb-3 { 
		font-size: 38px; 
		margin-bottom: 20px!important; 
	}

	.quick-facts-col h5 {
		font-size: 19px !important;
	}

	.quick-facts-col ul {
		padding-left: 1.5rem;;
	}

	.quick-facts-col h5 + p:empty {
		display: none;
	}

	.quick-facts-col ul li {
		font-size: 1.25rem;
		line-height: 1.875rem;
	}

	.quick-facts-col ul li::marker {
		font-size: 15px!important
	}

	h3.customer-stories-title {
		bottom: 0;
		left: 50%;
    	position: absolute;
	    top: auto;
    	transform: translate(-50%, -50%);
    	width: 100%;
		max-width: 1280px;
	}

	h2 + .paragraph { 
		margin-top: -20px!important; 
	}

	/* Carousel */
	#carousel{
		display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
	}

	.carousel-container {
            position: relative;
            max-width: fit-content;
            width: 100%;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: 450px;
        }
        
        .slide {
            min-width: 100%;
            position: relative;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .navigation-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: transparent;
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;
            z-index: 10;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        }
        
        .navigation-button:hover {
            transform: translateY(-50%) scale(1.1);
        }
        
        .prev-button {
            left: 20px;
        }
        
        .next-button {
            right: 20px;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 15px;
        }
        
        .pagination-bullet {
            width: 8px;
            height: 8px;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .pagination-bullet.active {
            background-color: #000;
            transform: scale(1.2);
        }

		/* Breadcrumb */
		section.breadcrumb {
			background-color: #ededed;
    		color: #666;
			padding: 15px 0;
		}

		section.breadcrumb ol.breadcrumb a {
			color: #666;
			font-size: 1rem;
			font-weight: 500;
		}

		section.breadcrumb ol.breadcrumb a:hover {
			color: #00999A;
		}

		/* RESOURCES NAV */
		.nav-item a.nav-link {
			color: #333333;
			fill: #333333;
			font-size: 19px!important;
			font-weight: 600;
		}
		
		.nav-item:has(.active) {
			position: relative;
		}
		
		.nav-item a.nav-link.active {
			color: #000;
		}
		
		.nav-item a.nav-link.active::after {
			background: #00999A;
			bottom: 0;
			content: "";
			height: 3px;
			width: 100%;
			position: absolute;
			left: 0;
		}

		.resource-filter-tag,
		.search-filter-tag {
			display: inline-flex; 
			align-items: center; 
			background-color: #00999A; 
			color: white; 
			padding: 6px 12px 8px 12px;
			border-radius: 20px; 
			font-size: 14px; 
			margin: 5px 5px 5px 0px; 
			animation: 0.3s ease-in-out 0s 1 normal none running fadeIn; 
		}

		.resource-filter-tag > span,
		.search-filter-tag > span {
			margin-right: 8px;
		}

		.resource-filter-tag > button,
		.search-filter-tag > button {
			background: none transparent; 
			border: none; 
			color: white; 
			font-size: 16px; 
			cursor: pointer; 
			padding: 0px; 
			margin: 0px; 
			line-height: 1; 
			width: 20px; 
			height: 20px; 
			display: flex; 
			align-items: center; 
			justify-content: center; 
			border-radius: 50%; 
			transition: background-color 0.2s;
		}

		/* Breadcrumbs */
		section.page-header {
			display: none;
		}

		.page-header{ 
			text-shadow: none;
		}
		
		#content {
			margin-top: 7.4rem;
		}

		/* Video */
		.video-container {
			position: relative;
			width: 100%;
		}

		.video-container iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 0;
		  }

		.video-description {
			color: #333333;
			font-size: 19px;
		}