/*customise to override default styling, different with every project*/
/* Styles for sidebar menu **/

.mpc-bag-table {
	text-align: center;x: x: ;
}

.muda-tooltip-img {
	position: relative;
    display: inline-block;	
}

.muda-tooltip-img img {
	mix-blend-mode: multiply;
}

.muda-tooltip {
   position: absolute;
    bottom: 110%; /* Adjust position above the image */
    left: 50%;
    transform: translateX(-50%);
    width: 300px; /* Customize width */
    background-color: #0b6f39; /* Customize background */
    color: #fff; /* Customize text color */
    padding: 10px;
    border-radius: 5px; /* Customize rounded corners */
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 100;
}

/* Tooltip arrow */
.muda-tooltip::after {
     content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #0b6f39 transparent transparent transparent;
}

/* Show tooltip on hover */
.muda-tooltip-img:hover .muda-tooltip {
    visibility: visible;
    opacity: 1;
}

.muda-common-height .container {
    display: flex;
    align-items: stretch; /* Makes both columns equal height */
}

.muda-common-height .col_half {
    flex: 1;
}

.muda-common-height .col_half:first-child {
    background-color: #fff; /* Set your desired background color */
    display: flex; /* To keep content centered if needed */
    justify-content: center;
    align-items: center;
}

.muda-common-height .bag-it-common-height .col_half:first-child {
    background-color: #f3f1dc; /* Set your desired background color */
    display: flex; /* To keep content centered if needed */
    justify-content: center;
    align-items: center;
}

.muda-service .col-md-6 {
	margin-bottom: 50px;
}

.muda-service .heading-block {
	margin-bottom: 20px;
}

.hover-image-wrapper {
    display: inline-block; /* Adjustable depending on your layout */
}

.default-image,
.hover-image {
    display: block;
    width: 100%;
    height: auto;
}

.hover-image {
    display: none;
}

.hover-image-wrapper:hover .default-image {
    display: none;
}

.hover-image-wrapper:hover .hover-image {
    display: block;
}



#wrapper, #content, #header, #header.sticky-header #header-wrap {
	background: url("../custom-images/paper-bg.jpg");
	background-color: none;
}

.fancy-title h1, .fancy-title h2, .fancy-title h3, .fancy-title h4, .fancy-title h5, .fancy-title h6 {
	background-color: transparent;
}

ul.tab-nav:not(.tab-nav-lg) li a {
	background-color: transparent;
}

#page-title {
	background-color: floralwhite;
	border-bottom: 4px solid antiquewhite;
}


img {
	display: block;
	margin: auto;
	border-radius: 4px;
}

.multiply {
	mix-blend-mode: multiply;
}

.content-wrap {
	padding: 0px;
}

a strong {
	text-decoration: underline;
}

.button.button-full strong {
	text-decoration: none;
}

.border-bottom {
	border-bottom: 1px solid #ccc;
	padding-bottom: 50px;
	margin-bottom: 50px;
}

/**bag-it page use**/
.bag-it h3 {
	margin-bottom: 40px;
	margin-top: 0px;
}

.bag-it-spec img {
	margin-bottom: 30px;
}

.bag-it-spec .col-md-6 {
	margin-bottom: 50px;
}

/**service page use**/
.service-section img {
	margin-bottom: 30px;
}

.offset-section .col-md-4 {
	margin-bottom: 30px;
}

/**product page use**/
.content-multiwall-bag .container {
	border-bottom: 1px solid #ccc;
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.content-multiwall-bag .container h3 {
	margin-bottom: 20px;
	margin-top: 0px;
}


.tab-container {
	padding-top: 40px;
}

ul.tab-nav:not(.tab-nav-lg) li:first-child {
	margin-left: 0px;
}


.flute-group {
	border-bottom: 1px solid #ccc;
	margin-bottom: 50px;
	padding-bottom: 30px;
}

/**container muda product**/
.container-muda-product {
	padding-top: 40px;
}

.container-muda-product .container {
	width: 960px;
}

.container-muda-product-full .container {
	width: 1170px;
}

.container-muda-product h1 {
	padding-bottom: 15px;
	margin-top: 0px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 32px;
}

.container-muda-product .col-md-4 h2 {
	margin-bottom: 40px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
}

.container-muda-product p {
	font-size: 18px;
	padding-top: 10px;
	font-weight: 300;
	line-height: 1.5;
	text-align: justify;
}

.container-muda-product ul{
	padding-left: 0px;
}

.container-muda-product li{
	font-size: 18px;
	padding-bottom: 15px;
	font-weight: 300;
}

.container-muda-product .line {
    clear: both;
    position: relative;
    width: 100%;
    margin: 0px 0px 60px 0px;
    border-top: 1px solid #EEE;
}

.container-muda-product .tabs img {
	margin-bottom: 20px;
}
.container-muda-product .tabs h1 {
	font-size: 20px;
	padding: 0px;
	text-transform: capitalize;
}

.container-muda-product .tabs span {
	font-size: 15px;
}




/**MPC page use**/
.mpc-brand img {
	margin-bottom: 30px;
}

.mpc-brand .col-md-4 {
	margin-bottom: 50px;
}

.v-align-container {
    position: relative;
}

.v-align-element {
    position: absolute;
    top: 50%;
	transform: translate(0%, -50%);
    color: #333; /* Adjust text color for better visibility on the image */
	margin-left: 80px;
	z-index: 100;
}

.container1 {
	display: flex;
	min-height: calc(100vh - 170px);
}


.sidemenu-ck {
	width: 250px;
	background-color: floralwhite;
	position: relative;
	overflow-y: auto;
	border-right: 4px solid antiquewhite;
}

.sbar-content {
	flex: 1;
	transition: margin-left 0.5s; /* Add transition for smooth effect */
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu .sidemenu-parent a {
	font-size: 18px;;
	font-weight: bold;
}

.sidebar-menu .sidemenu-parent a.active {
	background-color: rgba(0,0,0,0.3);
	color: #333;	
}

.sidebar-menu li {
    margin: 0;
}

.sidebar-menu a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px 20px;
    transition: background 0.3s, color 0.3s;
}

.sidebar-menu a:hover {
    background-color: #e7e3d7;
    color: #555;
}

.sidebar-menu a.active {
    background: #0b6f39;
    color: #fff;
}




/*table*/
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	vertical-align: middle;
}
/*submenu MUDA*/
#page-menu-wrap {
	background: #e7e3d7;
}

#page-menu nav {
	float: none;
}

#page-menu nav ul {
	height: auto;
	padding-bottom: 4px;
}

#page-menu nav li {
	width: 50%;
	text-align: center;
}

#page-menu nav .nav-product li {
	width: 20%;
	text-align: center;
}

#page-menu nav .nav-companies li {
	width: 50%;
	text-align: center;
}

#page-menu, #page-menu-wrap {
	height: auto;
}

#page-menu, #page-menu-wrap {
	text-shadow: none;
}

#page-menu nav li a {
	height: auto;
	color: #333;
	line-height: 21px;
}

#page-menu nav li {
	border-top: 4px solid;
	border-bottom: 4px solid;
	border-color: transparent;
}

#page-menu nav li:hover a, #page-menu nav li.current a {
	background-color: transparent;
	color: #0b6f39;
	font-weight: bold;
}

#page-menu nav li:hover, #page-menu nav li.current {
	border-top: 4px solid #58862d;
}

/*top bar*/
#top-bar {
	background:  #0b6f39;
}

.top-links li > a {
	color: #fff;
}

.top-links li:hover {
	background: rgba(0, 0, 0, 0.2)
}

#top-bar .container {
	margin-right: 15px;
}


/*page title*/
#page-title h1 {
	font-size: 40px;
	margin-bottom: 20px;
}

#page-title span {
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 0px;
}

#page-title p {
	font-size: 15px;
}

/*timeline*/
.entry-image, .entry-image > a, .entry-image .slide a, .entry-image img {
	width: auto;
}

.entry p {
	text-align: center;
	margin-top: 50px;
	font-size: 18px;
}


/*color change
muda green #0b6f39
muda mid green #58862d
muda light green 
muda brown #e7e3d7
gmaker blue #0b6f39
*/
::selection {
	background: #0b6f39;
}

/*full width button*/
.button {
    background-color: #0b6f39;
    color: #FFF;
}

.button:hover {
    background-color: #0b6f39;
    color: #FFF;
}

.button.button-border {
    border: 2px solid #0b6f39;
    background-color: transparent;
    color: #0b6f39;
    line-height: 36px;
    font-weight: 600;
    text-shadow: none;
}

.button.button-border:not(.button-fill):hover {
    background-color: #0b6f39;
    color: #FFF;
    border-color: transparent !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

/*header style*/
/*current nav style & when being hovered*/
#primary-menu.style-4 > ul > li.current > a, #primary-menu.style-4 > ul > li.current > a:hover {
    border: 1px solid #0b6f39;
	color: #fff !important;
	background: #0b6f39;
	border-radius: 10px;
}

#primary-menu.style-4 > ul > li:hover > a{
    border: 1px solid #0b6f39;
	color: #0b6f39;
	border-radius: 10px;
}

/*responsive header*/
@media (max-width: 991px) {
.container1 {
		flex-direction: column;
	}

	.sidemenu-ck {
		width: 100%;
		height: auto;
		position: relative;
		margin-bottom: 20px;
		height: auto;
	}
	
	#page-menu, #page-menu-wrap {
	height: 44px;
}
	
	#primary-menu ul > li > a, #primary-menu.style-2 > div > ul > li > a {
    padding: 15px;
    border: none !important;
    margin: 0 !important;
	}
	
	body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu > ul > li:hover a, body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu > ul > li.current a, body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu > div > ul > li:hover a, body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu > div > ul > li.current a {
	color: #fff !important;
	background: #0b6f39;
	border-radius: 0px;
}
	
}


#gotoTop {
    display: none;
    z-index: 299;
    position: fixed;
    width: 40px;
    height: 40px;
    background-color: #333;
    background-color: rgba(0,0,0,0.3);
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    color: #FFF;
    top: auto;
    left: auto;
    right: 30px;
    bottom: 50px;
    cursor: pointer;
    border-radius: 20px;
}

#gotoTop:hover {
	 border: 1px solid #0b6f39;
	color: #fff;
	background: #0b6f39;
}

/*hyperlink for process image*/
.image-wrapper {
    position: relative;
    width: 100%;
}

.hotspot-link {
    position: absolute;
    display: block;
    z-index: 2;
	background: #fff;
	border: 1px solid #333;
	opacity: 0;/*add value to make visible for visual debug*/
    
}

.link-1 {/* no use */
    top: 33%;
    left: 0%;
    width: 33%;
    height: 33%;
}

.link-2 {/* no use */
    top: 33%;
    left: 33%;
    width: 33%;
    height: 33%;
}

.link-3 {/* no use */
    top: 53%;
    left: 6%;
    width: 22%;
    height: 3%;
}

.link-4 {/* no use */
    top: 53%;
    left: 45%;
    width: 21%;
    height: 6%;
}

.link-5 {
    top: 82%;
    left: 39%;
    width: 33%;
    height: 3%;
}

.link-6 {
    top: 85%;
    left: 39%;
    width: 33%;
    height: 3%;
}