/*
Theme Name: Tecex Theme Child
Theme URI: https://example.com
Description: Child theme for Tecex Theme
Author: You
Template: tecex-theme
Version: 1.0.0
*/

.hs-form-frame {
	width:100%;
}
header {
	display: none;
}
body {
	overflow-x: hidden ;
}

.btn-m3--secondary.btn-m3--style-outlined {
	background: white !important;
}


footer {
	background-color: var(--color-surface);
	padding: var(--padding-block-lg);
}

.hero-medium {
	min-height: 500px;
}

#heroMainPage {
	min-height: 600px;
	position: relative;
	display: flex;
	max-height: 600px !important;
	background-position: 100% 60% !important;
	
	&:after {
		content: "";
		background-image: linear-gradient(0deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, 0) 100%);
		width: 100%;
		height: 80px;
		position: absolute;
		bottom: 0;
		
	}
	
	&:before {
		content: "";
		background-color: rgba(255, 255, 255, .3);
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		
	}
	* {
		z-index: 2;
	}
	
	.m3-container {
		width: 100%;
	}
	.image-group {
		                position: absolute;
        bottom: 0%;
		pointer-events: none;
        width: 90%;
        max-width: 750px;
        left: 50%;
        transform: translate(-50%, 80%);
		z-index: 1;
		img {
			object-fit: contain;
			
		}
	}
	h5 {
	color: rgba(138, 145, 153, 1) !important;
	}
}


#heroAirFreight {
	min-height: 600px;
	position: relative;
	display: flex;
	max-height: 600px !important;
	background-position: 100% 60% !important;
	
	&:after {
		content: "";
		background-image: linear-gradient(0deg, rgb(255 255 255) 0%, rgba(250,250,250,0) 100%);
		width: 100%;
		height: 80px;
		position: absolute;
		bottom: 0;
		
	}
	
	&:before {
		content: "";
		background-color: rgba(255, 255, 255, .3);
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		
	}
	* {
		z-index: 2;
	}
	
	.m3-container {
		width: 100%;
	}
	.image-group {
		                position: absolute;
        bottom: 0%;
		pointer-events: none;
        width: 90%;
        max-width: 750px;
        left: 50%;
        transform: translate(-50%, 80%);
		z-index: 1;
		img {
			object-fit: contain;
			
		}
	}
	h5 {
	color: rgba(138, 145, 153, 1) !important;
	}
}
#heroHorizontalGradient {
	min-height: 500px;
	position: relative;
	display: flex;
	max-height: 600px !important;
	background-position: 100% 60% !important;
	overflow: hidden; 
	
	&:after {
		content: "";
		background-image: linear-gradient(0deg, rgb(255 255 255) 0%, rgba(250,250,250,0) 100%);
		width: 100%;
		height: 80px;
		position: absolute;
		bottom: 0;
		left: 0; 
		right: 0; 
		z-index: 1;
	}
	
	&:before {
		content: "";
		background-color: rgba(255, 255, 255, .3);
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}
	
	* {
		z-index: 2;
	}
	
	.m3-container {
		width: 100%;
	}

	h5 {
		color: rgba(138, 145, 153, 1) !important;
	}
}

#footerhorizontalgradient {
	min-height: 500px;
	position: relative;
	display: flex;
	overflow: hidden;
	
	/* Top fade: White → Transparent */
	&:before {
		content: "";
		background-image: linear-gradient(
			to bottom,
			rgb(255 255 255) 0%,
			rgba(255,255,255,0) 100%
		);
		width: 100%;
		height: 80px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}
	
	/* Bottom fade: Transparent → Footer Grey */
	&:after {
		content: "";
		background-image: linear-gradient(
			to bottom,
			rgba(229,231,235,0) 0%,
			rgb(243, 244, 246) 100%
		);
		width: 100%;
		height: 80px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}
	
	* {
		z-index: 2;
		position: relative;
	}
}

#midhorizontalgradient {
	min-height: 500px;
	position: relative;
	display: flex;
	overflow: hidden;
	
	/* Top fade: White → Transparent */
	&:before {
		content: "";
		background-image: linear-gradient(
			to bottom,
			rgb(255 255 255) 0%,
			rgba(255,255,255,0) 100%
		);
		width: 100%;
		height: 80px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}
	
	/* Bottom fade: Transparent → Footer Grey */
	&:after {
		content: "";
		background-image: linear-gradient(
			to bottom,
			rgba(255,255,255,0) 0%,
			rgb(255, 255, 255) 100%
		);
		width: 100%;
		height: 80px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}
	
	* {
		z-index: 2;
		position: relative;
	}
}

#testing123 {
	min-height: 600px;
	position: relative;
	display: flex;
	overflow: hidden;
	
	background-position: center bottom !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	
	* {
		z-index: 2;
		position: relative;
	}
}

#heroServices {
	position: relative;
min-height: 600px;
	position: relative;
	display: flex;
	max-height: 600px !important;
	display: flex;
	
	
	&:after {
		content: "";
		background-image: linear-gradient(0deg, rgb(255 255 255) 0%, rgba(250,250,250,0) 100%);
		width: 100%;
		height: 80px;
		position: absolute;
		bottom: 0;
		
	}
	
	&:before {
		content: "";
		background-color: rgba(255, 255, 255, .3);
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		
	}
	* {
		z-index: 2;
	}
	
	.m3-container {
		width: 100%;
	}
	h5 {
	color: rgba(138, 145, 153, 1) !important;
	}
}



#contactPageFormContainer {
		margin-top: calc(var(--margin-block-lg) * -1);
		margin-bottom: var(--margin-block-xl);
}

#packageOptimizationTool {
		margin-top: calc(var(--margin-block-xl) * -1);
	
	.m3-row:last-child {
		margin: auto auto;
		max-width: 900px;
		padding:var(--padding-block-md);
		background: var(--color-background);
		border-radius: var(--radius-md);
		box-shadow: var(--box-shadow-md);
	}
}


#solutionSwiper {
	overflow: hidden;
}

/* Progress Bar Wrapper */
#gform_wrapper_6 .gf_progressbar_wrapper {
	margin-bottom: 24px;
}

/* Remove blue background */
#gform_wrapper_6 .gf_progressbar {
	background: rgba(255, 138, 77, 0.15) !important;
	border-radius: 50px;
	height: 8px;
	overflow: hidden;
	box-shadow: inset 0 0 8px rgba(255, 138, 77, 0.2);
}

/* Remove default blue styling */
#gform_wrapper_6 .gf_progressbar_blue,
#gform_wrapper_6 .percentbar_blue {
	background: none !important;
}

/* Orange light fill */
#gform_wrapper_6 .gf_progressbar_percentage {
	background: linear-gradient(
		90deg,
		rgb(255, 120, 60) 0%,
		rgb(255, 138, 77) 50%,
		rgb(255, 165, 110) 100%
	) !important;
	height: 100%;
	border-radius: 50px;
	box-shadow: 
		0 0 10px rgba(255,138,77,0.6),
		0 0 20px rgba(255,138,77,0.4);
	transition: width 0.4s ease;
}

/* Hide percentage text inside bar */
#gform_wrapper_6 .gf_progressbar_percentage span {
	display: none;
}

/* Optional: style the step text */
#gform_wrapper_6 .gf_progressbar_title {
	color: rgb(255,138,77);
	font-weight: 500;
}