/***********************************
* BASE
**********************************/ 

html {
	overflow-x: hidden;
}
#sm-hero-banner::before, #sm-hero-banner .elementor-background-video-container::before {
	display:none !important;
}
#white-header {
	transition: all 0.3s ease-in-out;
}
#white-header.scrolled {
	background-color: #fff;
	box-shadow: 0px 2px 8px -2px rgba(0,0,0,0.5);
}
#white-header.scrolled .elementor-item, #white-header.scrolled div.elementor-menu-toggle {
	color: #051A39 !important;
}
.elementor-nav-menu--main, .elementor-element-699b25e5 {
	display: flex;
	align-items: center;
	margin-top: 15px !important;
	margin-bottom: 15px !important;
}


/***********************************
* UTILITIES
**********************************/

.logo-title {
	color: rgb(71, 88, 151);
	width: max-content;
	margin: auto;
	font-size: 1.8rem;
	font-family: "Archivo Black", Sans-serif;
	display: flex;
	align-items: center;
}
.logo-title div + div {
	margin-left: 1rem;
}

/***********************************
* POP UP VIDEO
**********************************/ 
#sm-popup-video, .sm-popup-video-play {
	cursor: pointer;
}

#sm-popup-video-container
{
	display:none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: #ffffff90;
	top: 0;
}

#sm-popup-video-inner
{
	display:block;
	margin: auto;
	width: 870px;
	margin-top: 10%;
	border:10px solid #B0575C;
	position:relative;
}

#sm-popup-video-close
{
	color: #fff;
	background: #B0575C;
	font-size: 16px;
	display: block;
	width: 25px;
	height: 25px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	border: 0px solid #000;
	position: absolute;
	right: -24px;
	top: -24px;
	padding: 2px;
	font-weight: 600;
}

#sm-popup-video-close i::before
{
	font-size: 20px;
	padding: 5px;
	line-height: 21px;
}

/***********************************
* COPY TIP
**********************************/ 
#copytip {
	color: #fff;
	background-color: #161616;
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 13px;
	padding: 5px 15px;
	border-radius: 15px;
	opacity: 0;
	transition: all .5s;
}

#copytip.show {
	opacity: 1;
	top: -26px;
}
/*
.bw-container {
filter: grayscale(100%);
}
.bw-container:hover {
filter: grayscale(85%);
}
*/

/***********************************
* STICKY HEADER EFFECT
**********************************/ 
#sm-home-sticky-header, #sm-page-sticky-header {
	top: 0;
}
#home-header-wapper img, #page-header-wapper img {
	transition: all .5s ease-in;
}
#home-header-wapper.scrolled, #page-header-wapper.scrolled {
	transition: all .5s ease-in;
	height:0px;
	overflow: hidden;
}
#home-header-wapper.scrolled-up, #home-header-wapper.scrolled-up-retainer {
	position: fixed;
	background: #000;
	z-index: 99999;
	height:156px;
	transition: all .5s ease-out;
	opacity: 1;
	overflow: hidden;
}
#page-header-wapper.scrolled-up, #page-header-wapper.scrolled-up-retainer {
	position: fixed;
	z-index: 99999;
	box-shadow: 0 1px 8px #00000050;
	height:156px;
	transition: all .5s ease-out;
	opacity: 1;
	/* 	overflow: hidden; */
}
#home-header-wapper.scrolled-down, #page-header-wapper.scrolled-down {
	transition: all .5s ease-in;
	height:0px;
	overflow: hidden;
}

#page-header-wapper.scrolled img, #page-header-wapper.scrolled-up-retainer img {
	max-width: 90px;
}

body .sm-scroll-scale-effect {
	position: fixed;
	z-index: 999;
	right: 0px;
	bottom: 0px;
	height: 346px;
	padding: 20px;
	top: 50%;
	margin-top: -173px;
}
body .sm-scroll-scale-effect.iconized {
	bottom: 0px;
	top: auto;
	margin-top: 0;
	height: 144px;
}
body .sm-scrolled-animate img {
	max-width: 100px !important;
} 
body .sm-scrolled-logo {
	display:none;
	margin-bottom: -80px !important;
}
body .sm-scroll-underlay {
	background: #000000;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9;
	display:none;
	/* 	transition: all 200ms linear; */
}
body #eael-section-particles-63f27cf1 {
	/* 	margin-top: 400px; */
	padding-top: 100px;
}	
body { 
	background-color: #051A39;
}
/* body .sm-scroll-underlay.show {
display:block;
opacity:1;
} */

body #the-case-hover-cont {
	top:410px;
}

.eael-content-timeline-content {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.eael-content-timeline-content.fade-in {
	opacity: 1;
	transform: translateY(0);
}


#categories{
	width:100%;
	margin:0 auto;
}
.clr:after{
	content:"";
	display:block;
	clear:both;
}
#categories li{
	position:relative;
	list-style-type:none;
	width:26.857%; /* = (100-2.5) / 3.5 */
	padding-bottom: 31.168%; /* =  width /0.866 */
	float:left;
	overflow:hidden;
	visibility:hidden;
	transition: all .3s linear;
	-webkit-transform: rotate(-60deg) skewY(30deg);
	-ms-transform: rotate(-60deg) skewY(30deg);
	transform: rotate(-60deg) skewY(30deg);
	opacity: 0;
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
#categories li.visible {
	opacity: 1;
}
#categories li:hover {
	transform: rotate(-60deg) skewY(30deg) scale(1.1);
	z-index: 9;
}
#categories li:nth-child(3n+2){
	margin:0 1%;
}
#categories li:nth-child(6n+4){
	margin-left:0.5%;
}
#categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
	margin-top: -6.9285714285%;
	margin-bottom: -6.9285714285%;
	transition: all .3s linear;
	-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(6n+4):hover, #categories li:nth-child(6n+5):hover, #categories li:nth-child(6n+6):hover {
	-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg) scale(1.1);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg) scale(1.1);
	transform: translateX(50%) rotate(-60deg) skewY(30deg) scale(1.1);
}
#categories li:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{
	margin-bottom:0%;
}
#categories li *{
	position:absolute;
	visibility:visible;
}
#categories li > div{
	width:100%;
	height:100%;
	text-align:center;
	color:#fff;
	overflow:hidden;

	-webkit-transform: skewY(-30deg) rotate(60deg);
	-ms-transform: skewY(-30deg) rotate(60deg);
	transform: skewY(-30deg) rotate(60deg);
	-webkit-backface-visibility:hidden;
}

/* HEX CONTENT */
#categories li img{
	left:-100%; right:-100%;
	width: auto; height:100%;
	margin:0 auto;
	object-fit: cover;
}

#categories div h1, #categories div p{
	width:100%;
	padding:0 5%;
	background-color:#051a39;
	-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
	-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
	transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
#categories li h1{
	bottom:110%;
	font-style:italic;
	font-weight:normal;
	font-size:1.5em;
	padding-top:100%;
	padding-bottom:100%;
}
#categories li h1:after{
	content:'';
	display:block;
	position:absolute;
	bottom:5%;
	left:45%;
	width:10%;
	text-align:center;
	z-index:1;
	border-bottom:2px solid #fff;
}
#categories li p{
	padding-top:50%;
	top:110%;
	padding-bottom:50%;
}


/* HOVER EFFECT  */

#categories li div:hover h1 {
	bottom:58%;
	padding-bottom:10%;
}

#categories li div:hover p{
	top:61%;
	padding-top:10%;
}
#fork{
	position:fixed;
	top:0;
	left:0;
	color:#000;
	text-decoration:none;
	border:1px solid #000;
	padding:.5em .7em;
	margin:1%;
	transition: color .5s;
	overflow:hidden;
}

.hexagon-container {
	display: flex;
	flex-direction: column;
}
.hex-row {
	display: flex;
	justify-content: center;
	gap: 20px;
}
.hex-row.staggered {
	margin-left: calc(410px + 10px);
	margin-top: -95px;
}
.hex {
	width: 100%;
	height: calc(1.3 * 350px);
	position: relative;
	clip-path: polygon(
		50% 0%,
		100% 25%,
		100% 75%,
		50% 100%,
		0% 75%,
		0% 25%
	);
	background-color: #0d2a55;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.3s ease;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	max-width: 400px;
	opacity: 0;
  	transform: translateY(30px);
	transition: all .3s linear;
}
.hex.in-view {
  opacity: 1;
  transform: translateY(0);
}
.hex.hex1 {
	background-image: url('/wp-content/uploads/2025/03/Spec-Chem-6-1.png');
}
.hex.hex2 {
	background-image: url('/wp-content/uploads/2025/03/tinywow_5S4A2344_76940398-1.jpg');
}
.hex.hex3 {
	background-image: url('/wp-content/uploads/2025/03/tinywow_tinywow_Lab_76940492_76940567-1.jpg');
}
.hex.hex4 {
	background-image: url('/wp-content/uploads/2025/03/tinywow_5S4A1098_76940437-1.jpg');
}
.hex.hex5 {
	background-image: url('/wp-content/uploads/2025/03/tinywow_5S4A1209_76939009-1.jpg');
}
.hex.hex6 {
	background-image: url('/wp-content/uploads/2025/03/tinywow_5S4A6207_76938915-1.jpg');
}
.hex-inner {
	width: 100%;
	height: 100%;
	position: relative;
}
.hex::before {
	content: '';
	background: #0d2a559c;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.hex::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 400px;
	background-position: center;
	filter: brightness(0) invert(1);
}
.hex.hex1::after {
	background-image: url('/wp-content/uploads/2025/05/CASE-Tollers-Logo-5.png');
}
.hex.hex2::after {
	background-image: url('/wp-content/uploads/2025/05/CASE-Tollers-Logo-12.png');
}
.hex.hex3::after {
	background-image: url('/wp-content/uploads/2025/05/CASE-Tollers-Logo-13.png');
}
.hex.hex4::after {
	background-image: url('/wp-content/uploads/2025/05/CASE-Tollers-Logo-14.png');
}
.hex.hex5::after {
	background-image: url('/wp-content/uploads/2025/03/Duro-Glide_CorpLogo-1.png');
	background-size: 300px;
}
.hex.hex6::after {
	background-image: url('/wp-content/uploads/2025/03/1-17-2025-Millathane-C.A.S.E-Tollers-Plastic-Logo-5-1.png');
}
.hex:hover::after {
	display: none !important;
}
.hex-content {
	position: absolute;
	inset: 0;
	background-color: #051A39;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	opacity: 0;
	transition: opacity 0.3s ease;
	overflow: hidden;
}
.hex-content h3,
.hex-content p {
	background: none;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 10px 20px;
	transform: translateY(0);
	transition: transform 0.4s ease;
	position: relative;
	z-index: 2;
	font-style: italic !important;
	line-height: 1.5em !important;
}
.hex-content h3 {
	transform: translateY(-100%);
	letter-spacing: -1px !important;
	font-size: 22px !important;
} 
.hex-content p {
	font-size: 12px !important;
	transform: translateY(100%);
}
.hex:hover .hex-content {
	opacity: 1;
}
.hex:hover .hex-content h3 {
	transform: translateY(0);
}
.hex:hover .hex-content p {
	transform: translateY(0);
}
.hex-row > .hex:hover {
	filter: grayscale(0);
	z-index: 1;
	overflow: hidden;
	text-align: center;
}
/* .hex-row> .hex:nth-child(2):hover {
transform: scale(1.5);
}
.hex-row > .hex:nth-child(1) {
transform: translateX(calc(-100% - 15px));
}
.chex-row > .hex:nth-child(2) {
transform: translateX(calc( 100% + 15px));
}
.hex-row > .hex:nth-child(3),
.hex-row > a:nth-child(5) {
transform: translateY(calc(-65% - .87*15px));
}
.hex-row > a:nth-child(4),
.hex-row > a:nth-child(6) {
transform: translateY(calc( 65% + .87*15px));
}
.hex-row > .hex:nth-child(3),
.hex-row > a:nth-child(4) {
transform: translateX(calc(-50% - .5*15px));
}
.hex-row > a:nth-child(5), 
.hex-row > a:nth-child(6) {
transform: translateX(calc( 50% + .5*15px));
} */
.hexagon-container {
	margin-left: -15%;
}

/* Contact */
.min-h-text {
    min-height: 105px
}
.min-h-title {
    min-height: 72px
}
.box-shadow-none a {
	box-shadow: unset !important;
}
.icon-hvr-color a {
	color: #475897 !important
}

@media screen and (min-width: 1025px) {
	.hex-row > .hex:hover {
		transform: scale(1.5);
	}
}
@media screen and (max-width: 1440px) {
	.hex-row.staggered {
		margin-left: 0;
		margin-top: 20px;
	}
	.hexagon-container {
		margin-left: 0%;
	}
}
@media screen and (max-width: 1024px) {
	.hex::after {
		display: none !important;
	}
	.hexagon-container {
		align-items: center;
		gap: 20px;
	}
	.hex-row {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		width: 100%;
	}
	.hex-row.staggered {
		margin-left: 0;
		margin-top: 0;
	}
	.hex {
		cursor: default;
		max-width: 600px;
		height: calc(1.3 * 450px);
	}
	.hex-content {
		opacity: 1 !important;
	}
	.hex-content h3,
	.hex-content p {
		transform: translateY(0) !important;
	}
}
@media screen and (max-width: 575px) {
	.hex {
		width: 90%;
		height: calc(1.3 * 300px);
		max-width: 400px;
	}
}
body.error404 #content {
	margin: 200px auto 100px;
	text-align: center;
}

body #sm-hero-banner, body #sm-hex-section {
	transition: all 0.6s linear;
	opacity: 1;
}
body #sm-hero-banner.fadeout, body #sm-hex-section.fadeout {
	transition: all 0.8s linear;
	opacity: 0;
}

body #sm-hero-banner .elementor-background-video-container {
	position: fixed;
	top: 0;
}

.wpforms-container .wpforms-field-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Adjust spacing between fields */
}

/* Default style for inline fields (side by side) */
.wpforms-container .wpforms-field {
    flex: 1 1 45%; /* Adjust width as needed */
    min-width: 200px; /* Minimum width for responsiveness */
}

/* Full-width field style */
.wpforms-container .wpforms-field.full-width {
    flex: 1 1 100% !important; /* Takes full width */
    max-width: 100% !important;
}

/* Responsive - stack all fields on mobile */
@media (max-width: 600px) {
    .wpforms-container .wpforms-field {
        flex: 1 1 100% !important; /* Stack fields vertically */
    }
}