#logo .logo-default {
		    width: 150px;
		    height: auto;
		    margin-top: 30px;
		    margin-bottom: 30px;
		}

		.primary-menu .menu-link {
		    font-size: 1.1rem;
		    padding: 10px 15px;
		    color: #f4f4f4;
		}

		.primary-menu .sub-menu-container .menu-link {
		    font-size: 1.0rem;
		    padding: 8px 12px;
		}

		.section.mb-0 {
		    padding: 10px 0;
		    margin-top: 20px;
		}

		body {
		    background-color: #f4f4f4;
		}

		.fixed-size-image {
			width: 100%;
			aspect-ratio: 1 / 1;
			object-fit: contain;
			object-position: center;
			border-radius: 0.5rem;
		}

		.feature-box.media-box {
			position: relative;
			z-index: 1;
		}

		.feature-box.media-box:hover {
			z-index: 2;
		}

		.feature-box.media-box .fbox-media {
			position: relative;
			z-index: 1;
		}

		.feature-box.media-box .fbox-media img {
			transition: transform 0.3s ease;
		}

		.feature-box.media-box:hover .fbox-media img {
			transform: scale(1.2);
			position: relative;
			z-index: 999;
		}

		.feature-box.media-box:hover {
			transform: translateY(-5px);
			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			transition: all 0.3s ease;
		}

		.feature-box.media-box .fbox-content {
			padding: 0.7rem;
			flex-grow: 1;
			text-align: center;
		}

		.feature-box.media-box .fbox-content h2 {
			font-size: 1.5rem;
			margin-bottom: 0.5rem;
		}

		.feature-box.media-box .fbox-content p {
			margin: 0;
		}

		/* Make all product boxes same height */
		.row.justify-content-center.col-mb-50>div {
			display: flex;
		}

		.carousel-item {
			height: 75vh;
		}

		.carousel-item img {
			height: 100%;
			object-fit: cover;
			object-position: center;
		}

		.carousel-control-prev,
		.carousel-control-next {
			width: 5%;
			opacity: 0.8;
		}

		.carousel-control-prev-icon,
		.carousel-control-next-icon {
			background-color: rgba(0, 0, 0, 0.3);
			padding: 2rem;
			border-radius: 50%;
		}

		/* Optional: Add fade transition */
		.carousel-fade .carousel-item {
			opacity: 0;
			transition: opacity 0.6s ease-in-out;
		}

		.carousel-fade .carousel-item.active {
			opacity: 1;
		}

		/* Style for carousel indicators */
		.carousel-indicators {
			bottom: 20px;
		}

		.carousel-indicators button {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			margin: 0 5px;
			background-color: rgba(255, 255, 255, 0.5);
			border: 2px solid rgba(255, 255, 255, 0.8);
		}

		.carousel-indicators button.active {
			background-color: #fff;
		}

		#logo .logo-default {
			width: 150px;
			height: auto;
			margin-top: 30px;
			margin-bottom: 30px;
		}

		.primary-menu .menu-link {
			font-size: 1.0rem;
			padding: 10px 15px;
			color: #f4f4f4;
		}

		.primary-menu .sub-menu-container .menu-link {
			font-size: 1.0rem;
			padding: 8px 12px;
		}

		.section.mb-0 {
			padding: 10px 0;
			margin-top: 20px;
		}

		#oc-clients {
			margin-top: 0;
			display: flex;
			align-items: top;
			height: 100%;
		}

		.oc-item {
			margin-top: 0;
			display: flex;
			justify-content: top;
			align-items: top;
			height: 100%;
		}

		body {
			background-color: #f4f4f4;
		}

		.row.col-mb-50 {
			margin-bottom: 0 !important;
		}

		.container.mt-6 {
			margin-top: 20px !important;
		}

		#slider {
			margin-top: 0 !important;
			padding-top: 0 !important;
		}

		.header-wrap-clone {
			height: 0 !important; /* Remove the space created by header-wrap-clone */
		}

		#header {
			margin-bottom: 0 !important;
		}

		.carousel {
			margin-top: 0 !important;
		}

		.portfolio-item {
			position: relative;
			z-index: 1;
			overflow: visible !important; /* Allow content to overflow */
		}

		.portfolio-item:hover {
			z-index: 999; /* Higher z-index to appear above other elements */
		}

		.portfolio-item .portfolio-image {
			position: relative;
			z-index: 1;
			overflow: visible !important; /* Allow content to overflow */
		}

		.portfolio-item .portfolio-image img {
			transition: transform 0.3s ease;
			position: relative;
		}

		.portfolio-item:hover .portfolio-image img {
			transform: scale(1.5);
			position: relative;
			z-index: 999;
		}

		/* Optional: Add shadow and lift effect */
		.portfolio-item:hover {
			transform: translateY(-5px);
			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			transition: all 0.3s ease;
		}

		/* Ensure parent containers don't clip the overflow */
		#portfolio.portfolio {
			overflow: visible !important;
		}

		.grid-inner {
			overflow: visible !important;
		}

		@media (max-width: 767px) {
			/* Disable portfolio image animations */
			.portfolio-item:hover {
				transform: none;
				box-shadow: none;
			}

			.portfolio-item:hover .portfolio-image img {
				transform: none;
							}

			/* Disable service/product box animations */
			.feature-box.media-box:hover {
				transform: none;
				box-shadow: none;
			}

			.feature-box.media-box:hover .fbox-media img {
				transform: none;
			}

			/* Disable overlay fade animations */
			.bg-overlay-bg.dark[data-hover-animate="fadeIn"] {
				opacity: 1 !important;
				animation: none !important;
			}
		}

		/* Portfolio grid fixes */
		#portfolio {
			margin: 0 !important;
		}

		.portfolio-item {
			padding: 0 !important;
			margin: 0 !important;
		}

		.grid-inner {
			margin: 0 !important;
			padding: 8px; /* Add small padding between items if desired */
		}

		.portfolio-image {
			position: relative;
			width: 100%;
			padding-top: 10%; /* 4:3 aspect ratio */
			overflow: hidden;
			margin: 0 !important;
		}

		.portfolio-image img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		/* Remove any bottom margins that might be causing spacing */
		.portfolio-desc {
			margin: 0 !important;
			padding: 0 !important;
		}

		/* Target the specific blue background boxes */
		.fbox-content[style*="background-color: #1a6597"] {
			padding: 10px 15px !important;
		}

		.fbox-content[style*="background-color: #1a6597"] h2 {
			color: #f4f4f4;
			font-size: 1.2rem;
			margin: 0 0 5px 0;
			padding: 0;
		}

		.fbox-content[style*="background-color: #1a6597"] p {
			color: #f4f4f4;
			font-size: 0.9rem;
			margin: 0;
			padding: 0;
			line-height: 1.3;
		}

		/* Header Mobile Optimizations */
		@media (max-width: 768px) {
			/* Logo adjustments */
			#logo img {
				height: auto !important;
				margin: 15px 0 !important;
			}

			/* Header height reduction */
			#header.header-size-sm {
				min-height: auto;
			}

			/* Contact info adjustments */
			.header-extras {
				margin-right: 50px;  /* Space for hamburger menu */
			}

			.header-extras .he-text {
				font-size: 0.8rem;
			}

			.header-extras .he-text span {
				font-size: 0.75rem;
			}
		}

		@media (max-width: 768px) {
			#portfolio {
				margin: -1px !important;
			}
		
			.portfolio-item {
				width: 50% !important;  /* 2 items per row */
			}
		
			.portfolio-desc {
				padding: 8px !important;
			}
		
			.portfolio-desc h3 {
				font-size: 0.9rem !important;
			}
		
			/* Adjust overlay text */
			.bg-overlay-content h3 {
				font-size: 0.9rem;
			}
		}

		@media (max-width: 768px) {
			/* Products grid optimization */
			.col-sm-6.col-lg-3 {
				width: 50% !important;  /* 2 items per row */
				padding: 4px !important;
			}

			/* Product box adjustments */
			.feature-box.media-box {
				margin: 0 !important;
			}

			.feature-box.media-box .fbox-media {
				margin: 0 !important;
			}

			.feature-box.media-box .fbox-content {
				padding: 8px !important;
			}

			.feature-box.media-box .fbox-content h2 {
				font-size: 0.9rem !important;
				margin: 0 0 4px 0 !important;
			}

			.feature-box.media-box .fbox-content p {
				font-size: 0.8rem !important;
				line-height: 1.3;
				margin: 0 !important;
			}

			/* Disable hover animations on mobile */
			.feature-box.media-box:hover {
				transform: none;
				box-shadow: none;
			}

			.feature-box.media-box:hover .fbox-media img {
				transform: none;
			}
		}