/* ----------------------------------------------------------------

	Custom CSS



	Add all your Custom Styled CSS here for New Styles or

	Overwriting Default Theme Styles for Better Handling Updates

-----------------------------------------------------------------*/



:root {
	--cnvs-themecolor: #0291f7;
	--cnvs-themecolor-rgb: 2, 145, 247;
}

:root {
	--cnvs-body-font: "Inter", sans-serif;
	--cnvs-primary-font: "Inter", sans-serif;
	--cnvs-secondary-font: "Playfair Display", serif;
}
/* :root {
	--cnvs-body-font: "Fira Sans", sans-serif;
	--cnvs-primary-font: "Tinos", sans-serif;
	--cnvs-secondary-font: "Tinos", serif;
} */

.hero-diagonal {
    position: relative;
    width: 100vw;  /* Ensure it spans the full viewport width */
    margin-left: calc(-50vw + 50%); /* Override container width if necessary */
    overflow: hidden;
}

.hero-diagonal::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    -webkit-clip-path: polygon(0 9%, 100% 0%, 100% 91%, 0 100%);
    clip-path: polygon(0 9%, 100% 0%, 100% 91%, 0 100%);
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4));
    background-position: center center;
    background-size: cover;
    z-index: 1;
}

.bg-overlay-industry {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 50, 0.7) 0%, rgba(0, 0, 50, 0.3) 100%);
    z-index: 1;
}

.bg-overlay-labs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.4) 100%);
    z-index: 1;
}
/* Ensuring text is above the overlay */
.page-title .container {
    position: relative;
    z-index: 2;
}


/* Owl Carousel - Controls - Arrows
-----------------------------------------------------------------*/
.owl-carousel-full .owl-nav [class*=owl-] {
	left: 150px !important;
	height: 60px;
	line-height: 60px;
	border: none;
	color: #333;
	background-color: transparent;
	font-size: 28px;
	border-radius: 0;
}

.owl-carousel .owl-nav .owl-next {
	left: auto;
	right: -155px;
}

.owl-carousel-full  .owl-nav .owl-next {
	left: auto !important;
	right: 155px !important;
	border-radius: 0;
}

.owl-carousel-full .owl-nav [class*=owl-]:hover { color: #333 !important; }

/* Owl Carousel - Responsive
-----------------------------------------------------------------*/
.device-lg .owl-carousel .owl-nav .owl-prev,
.device-md .owl-carousel .owl-nav .owl-prev,
.device-sm .owl-carousel .owl-nav .owl-prev,
.device-xs .owl-carousel .owl-nav .owl-prev { left: 2px !important; }

.device-lg .owl-carousel-full  .owl-nav .owl-next,
.device-md .owl-carousel-full  .owl-nav .owl-next,
.device-sm .owl-carousel-full  .owl-nav .owl-next,
.device-xs .owl-carousel .owl-nav .owl-next { right: 2px !important; }

.grayscale-logo {
    filter: grayscale(100%) brightness(85%) contrast(50%) !important;
    -webkit-filter: grayscale(100%) brightness(85%) contrast(50%) !important; /* Safari fix */
}

.grayscale-wrapper {
    filter: grayscale(100%) brightness(120%) contrast(10%) !important;
    mix-blend-mode: screen;
}