html, body {
	margin: 0;
	overflow-x: clip;
	scroll-behavior: smooth;
	background-color: #f4f4f4;
}

a, a:hover, a:visited, a:active {
	color: inherit !important;
	text-decoration: none !important;
}
 
 button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
textarea:focus, input:focus{
    outline: none;
}

.lang{cursor:pointer;}

.c {display: flex;justify-content: center;align-items: center;}

.desktop {visibility:visible;display: block;}
.mobile {display: none !important;}

.s0{font-size: calc(100vw - 94vw)!important; }
.s1{font-size: calc(100vw - 96vw) !important;}
.s2{font-size: calc(100vw - 97vw) !important;}
.s2b{font-size: calc(100vw - 98vw) !important;}
.s2c{font-size: calc(100vw - 98.5vw) !important;}
.s3{font-size: calc(100vw - 98.8vw) !important;}
.s4{font-size: calc(100vw - 99.5vw) !important;}

.f1{font-family:poppinRegular !important;}
.f2{font-family:poppinBold !important;}	
.f3{font-family:impact !important;}
.f4{font-family:special !important;}

.fade-inB {
    opacity: 0;
    transform: translateY(0);
    transition: opacity 2s ease-out, transform 1s ease-out;
}
.fade-inB.show {
    opacity: 1;
    transform: translateY(0);
}

.hamburger {
	background-color: #333;
	width: 10vw;
	color: #999;
	text-align: center;
	padding: 15px;
	position: absolute;
	z-index: 999;
}

.collapsible {
	color: #818181;
	cursor: pointer;
	width: 100%;
	border: none;
	/* text-align: left; */
	outline: none;
	background: unset;
}
.collapse-content {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	color:#818181;
}
.collapse-content div{
	width:100%;
	height:auto;
	position:relative;
	float:left;
	color: #f4f4f4;
}

.black {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.7);
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}
	
.overlay a {
  padding: 0;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(95%,-5%);
}
.language-boxA {
	width: 5%;
	height: auto;
	position: absolute;
	display: grid;
	grid-template-columns: auto auto;
	gap: 10%;
	top: 50%;
	right: 0;
	transform: translate(150%,-50%);
}
.language-boxA img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.language-boxB {
	width: 5%;
	height: auto;
	position: absolute;
	display: grid;
	grid-template-columns: auto auto;
	gap: 10%;
	top: 50%;
	right: 0;
	transform: translate(-50%,-50%);
}
.language-boxB img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.header {
	width: 100%;
	height: 15vh;
	position: absolute;
	top: 0;
	z-index: 900;
	/* background: #000; */
	/* background-image: url("../images/header-bg.jpg"); */
	/* background-size: cover; */
	/* background-repeat: no-repeat; */
	background: #000;
	background: -webkit-linear-gradient(to bottom, #393939, #000);
	background: linear-gradient(to bottom, #393939, #000);
}
.header-container{
    width:80%;
    height:100%;
    position:relative;
    margin:0 auto;
    display:grid;
    grid-template-columns: 12.5% 12.5% 12.5% 25% 12.5% 12.5% 12.5%;
}
.header-btn {
    height: fit-content;
	color: #f4f4f4;
	transition: all ease 500ms;
	cursor: pointer;
	text-align: center;
	line-height: 15vh;
}
.header-btn:hover{
	color:#FF0004;
}

.header-logo {
	width: 90%;
	height: 20vh;
	padding: 5%;
	box-sizing: border-box;
	/* border-bottom-left-radius: 30px; */
	/* border-bottom-right-radius: 30px; */
	position: relative;
	margin: 0 auto;
	box-shadow: 0 0 20px #000;
	background: #ff0007;
	background: -webkit-linear-gradient(to bottom, #ff0007, #bf0b05);
	background: linear-gradient(to bottom, #ff0007, #bf0b05);
}
.header-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#navbar {
	background: rgba(255, 0, 0, .9);
	position: fixed;
	top: -500px;
	width: 100%;
	height: 10vh;
	display: block;
	transition: top 0.3s;
	z-index: 1000;
	box-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.navbar-logo{
    width:30%;
    height:100%;
    position:relative;
    float:left;
}
.navbar-logo img {
	height: 100%;
	padding: 2% 5%;
	box-sizing: border-box;
	width: 100%;
	object-fit: contain;
}

.nav_btn-box {
	width: 70%;
	height: 100%;
	position: relative;
	float: left;
	display: flex;
	justify-content: end;
}
.nav-btn {
	width: fit-content;
	color: #000;
	transition: all ease 500ms;
	cursor: pointer;
	text-align: center;
	line-height: 10vh;
	position: relative;
	margin: 0 2%;
}
.nav-btn:hover{
	color:#f4f4f4;
}

.dropbtn {
    width: 100%;
	background-color: transparent;
	color: #f4f4f4;
	border: none;
}
.dropdown {
	position: relative;
	display: inline-block;
	line-height: 15vh;
	margin: 0 2%;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f4f4f4;
	width: max-content;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	transform: translateY(-10px);
	z-index: 1;
}
.dropdown-content a {
	color: #333 !important;
	padding: 0px 16px;
    box-sizing: border-box;
	text-decoration: none;
	display: block;
	text-align: left;
	width: 100%;
	line-height: 50px;
}
.dropdown:hover .dropdown-content {display: block; transition: all .5s ease;}
.dropdown-content a:hover {background-color: #f00; color:#f4f4f4 !important;; transition: all 500ms ease-out;}
.dropdown:hover .dropbtn {background-color: transparent; }

.header2 {
	width: 100%;
	height: 15vh;
	position: relative;
	float: left;
	display: grid;
	grid-template-columns: 20% 80%;
	box-shadow: 0 0 20px #000;
	z-index: 999;
	/*background-image: url("../images/header-bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;*/
    background:#000;
	background: -webkit-linear-gradient(to bottom, #393939, #000);
	background: linear-gradient(to bottom, #393939, #000);    
}

.header2-logo { width: 100%; height: inherit; position: relative; padding: 1%; 	background: #ff0007; background: -webkit-linear-gradient(to bottom, #ff0007, #bf0b05); background: linear-gradient(to bottom, #ff0007, #bf0b05); box-sizing: border-box; cursor:pointer;}
.header2-logo img {width:100%; height:100%; object-fit: contain;}
.header2-btn-con {
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	justify-content: end;
}
.header2-btn {
	width: max-content;
	height: auto;
	position: relative;      
	float: left;  
	color: #f4f4f4;
	text-align: center;
	cursor: pointer;
	line-height: 15vh;
	margin: 0 2%;    
	transition: all ease 500ms;
}
.header2-btn:hover{color:#f00;}
.header2-language { width: 10%; height: 100%; display: grid; grid-template-columns: 50% 50%; align-items: center; justify-items: center;}
.header2-language img { width:50%; cursor:pointer; }

.container_flickity {
	width: 100%;
	height: 90vh;
	position: relative;
	margin: 15vh 0 0 0;
	z-index: 0;
}
.gallery-cell {
	width: 100%;
	height: 100%;
	background: #000;
	display: block;
	object-fit: contain;
}
.gallery-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0 auto;
	position: relative;
	display: block;
	object-position: center;
}

.slider {
	width: 100%;
	height: auto;
	position: absolute;
	text-align: left;
	color: #fff;
	top: 40%;
	left: 50%;
	transform: translate(-48%,-50%);
	z-index: 999;
}
.slider-text {
    position: absolute;
    width: 100%;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 1s, opacity 1s;
    text-shadow: 0 0px 10px rgba(0,0,0,0.4);
    color: rgba(255,255,255,0.7);
}

.slider-text.active {
    transform: translateX(0);
    opacity: 1;
}

.slider-text.exit {
    transform: translateX(-100%);
    opacity: 0;
}

.quote {
	width: 100%;
	height: auto;
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-48%,-70%);
	z-index: 999;
	color: #fff;
	line-height: 4em;
}

.quote img {
	width: 40%;
	opacity: .8;
	filter: drop-shadow(0px 9px 12px #222);
}

.con{
    width:100%;
    height:auto;
}

.btn-con{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    display:flex;
    justify-content: center;
}

.btn1{
    width:max-content;
    height:auto;
    position:relative;
    padding:5px 15px;
    margin-top: 5% 0;
    box-sizing: border-box;
    border:1px solid #f4f4f4;
    color:#f4f4f4;
    transition:all ease 500ms;
    cursor: pointer;
}
.btn1:hover{
    background:#f00;
    border:1px solid #f00;
}

.btn2 {
	width: max-content;
	height: auto;
	position: relative;
	padding: 10px 30px;
	box-sizing: border-box;
	border: 1px solid #666;
	color: #666;
	transition: all ease 500ms;
	cursor: pointer;
}
.btn2:hover{
    background:#f00;
    border:1px solid #f00;
    color:#fff;
}

.btn3 {
	width: max-content;
	height: auto;
	position: relative;
	padding: 10px 30px;
	box-sizing: border-box;
	border: 1px solid #f4f4f4;
	color: #f4f4f4;
	transition: all ease 500ms;
	cursor: pointer;
}
.btn3:hover{
    background:#f00;
    border:1px solid #f00;
    color:#fff;
}

/*.con-index-2 {
	width: 100%;
	height: auto;
	position: relative;
	background-image: url("../images/index-2.jpg");
	background-size: cover;
	clip-path: polygon(72% 0, 100% 15%, 100% 100%, 0 100%, 0 16%);
	z-index: 1;
	display: grid;
	grid-template-columns: 40% 60%;
	padding: 2% 0;
}*/
.con-index-2 {
	width: 100%;
	height: auto;
	position: relative;
	background-image: url("../images/index-2.jpg");
	background-size: cover;
	z-index: 1;
	display: grid;
	grid-template-columns: 30% 70%;
	padding: 2% 0;
    clip-path: polygon(0% 0%, 65% 0%, 80% 50%, 65% 100%, 0% 100%);
	/*clip-path: ellipse(60% 50% at 25% 50%);*/
	justify-content: center;
	align-items: center;
}
.index-2-img {
	width: 100%;
	height: 30vh;
	position: relative;
	padding: 15vh 0 0 0;
}
/*.index-2-img img {
	width: 50%;
	height: 100%;
	object-fit: contain;
	object-position: 0 80%;    
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-20%,-50%);
}*/
.index-2-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    filter: drop-shadow(0 10px 8px #000);
}

.index-2-text {
	color: #fff;
    padding: 10% 45% 10% 0;
	/*padding: 15vh 20% 0 0;*/
}

.con-index-3{
    width:100%;
    height:auto;
    position:relative;
    padding: 5% 2% 5% 2%;
    display: inline-block;
    /*background: rgb(0,0,0);*/
    /*background: rgb(238,238,238);
    background: -moz-linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee",endColorstr="#ffffff",GradientType=1);*/
}

.index-3-box {
	width: 33%;
	height: auto;
	position: relative;
	float: left;
	text-align: center;
}
/*.index-3-box img {
	width: 40%;
	height: auto;
	border-radius: 50%;
	margin: 0 auto;
	display: block;
	padding: 2%;
	border: 5px solid #000;
}*/
.index-3-box img {
	width: 40%;
	height: auto;
	border-radius: 50%;
	margin: 0 auto;
	display: block;
	padding: 2%;
	border: 5px solid #f00;
	filter: invert(100%) sepia(62%) saturate(1%) hue-rotate(304deg) brightness(113%) contrast(91%);
}
.index-3-box div{
    width:100%;
    height:auto;
    padding:0 5%;
    margin: 0 0 5% 0;
    color: #999;
}
.index-3-box-title {
	width: 100%;
	text-align: center;
	display: block;
	z-index: 100;
	position: relative;
	margin: 0 0 3% 0;
	color: #f00;
}

.con-index-4 {
	width: 100%;
	height: auto;
	position: relative;
	background: #333;
	padding: 5%;
	background-image: url("../images/index-4.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position-y: center;
	background-attachment: fixed;
	float: left;
}
.con-index-4::before {
	content: ' ';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.8);
}

.index-feature {
	width: 33%;
	height: auto;
	position: relative;
	float: left;
	padding: 3%;
}
.index-feature img {
	width: 100%;
	height: 350px;
	object-fit: cover;
    transition:all ease 500ms;    
}
.index-feature img:hover{
    box-shadow: 0 0 30px #000;
    filter: brightness(150%);
}
.index-feature div{
    color:#fff;
    text-align: center;
}
.index-feature div{
    color:#fff;
    text-align: center;
}

.con-index-5 {
	width: 100%;
	height: auto;
	position: relative;
	background-image: url("../images/index-5a.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	padding: 3% 5%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
.con-index-5-content{
    width:50%;
    height:auto;
    position:relative;
    float:left;
}
.con-index-5-content span{line-height:40px;}

.con-index-5-content img{
    width:95%;
    height:auto;
    object-fit: cover;
}
.con-index-5-btn {
	margin: 5% 0 0% 0;
}

.profile-con-1{
    width:100%;
    height:70vh;
    position:relative;
    float:left;
}
.profile-con-1 img{width:100%; height:100%; object-fit:cover; object-position:unset;}

.profile-con-2{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    background:#f4f4f4;
}
.profile-con-2 div:nth-child(1) {width:100%; height:15vh; position:relative; float:left; color:#333; text-align:center;}
.profile-con-2 div:nth-child(2) {width:50%; height:auto; position:relative; float:left;}
.profile-con-2 div:nth-child(2) img { width: 100%; height: 300px; padding: 5% 2% 2% 10%;; box-sizing: border-box; object-fit: cover; }
.profile-con-2 div:nth-child(3) { width: 100%; height: auto; position: relative; color: #333; padding: 6% 5% 2% 5%; box-sizing: border-box; }

.vm-con { width: 100%; height: auto; position: relative; float: left; display: grid; grid-template-columns: 50% 50%; left: 50%; transform: translate(-50%); padding: 8% 0 5% 0; background: #f4f4f4; }

.vm-box { width: 80%; height: auto; position: relative; display: block; margin: 0 auto; border: 1px solid #666; border-radius: 30px; }
.vm-box img { width: 35%; display: block; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); background: #f4f4f4; padding: 15px; box-sizing: content-box; }
.vm-box span { width: 100%; text-align: center; color: #f00; display: block; margin: 7% 0 2% 0; position: relative; float: left; }
.vm-box div {
	width: 100%;
	position: relative;
	padding: 5%;
	margin: 5% 0 0 0;
	box-sizing: border-box;
}

.crew-con {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	gap: 2%;
	margin: 0 0 5% 0;
	padding: 0 5%;
	box-sizing: border-box;
}
.crew{width:85%; height:auto; position:relative; text-align:center;}
.crew img {width:100%; height:auto;}


.profile-con-3{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    background:#f4f4f4;
    padding: 0px 0 3% 0;
    box-sizing: border-box;
}
.profile-con-3 div:nth-child(1) {width:100%; height:15vh; position:relative; float:left; color:#333; text-align:center;}
.profile-con-3 div:nth-child(2) { width: 90%; height: auto; position: relative; float: left; color: #333; left: 50%; transform: translate(-50%); }

.profile-content-box {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	background: #f4f4f4;
	padding: 0 5% 5% 5%;
	box-sizing: border-box;
}
.profile-content-text{ width:100%; heighr:auto; position:relative; float:left; color:#333;}

.kepakaran-con{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    padding:0 5%;
    display:grid;
    grid-template-columns:33% 33% 33%;
    margin: 5% 0;
}
.kepakaran-con-content {
	width: 90%;
	height: auto;
	position: relative;
	text-align: center;
	border: 2px solid #cecece;
	border-radius: 20px;
	padding: 5%;
}
.kepakaran-con-content img {width:60%; display:block; margin:0 auto;}

.profile-con-content {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: grid;
	grid-template-columns: 60% 40%;
	background: #f4f4f4;
	padding:  0 5% 5% 5%;
	box-sizing: border-box;
}

.mara {
	width: 40%;
	height: auto;
	position: relative;
	display: block;
	margin: 0 auto;
}
.mara img{width:100%;}

.profile6b {
	width: 100%;
	height: auto;
	position: relative;
	display: block;
	margin: 0 auto;
}
.profile6b img{width:100%; height:100%; object-fit:cover; padding:2%; box-sizing: border-box;}


.inner-quotation {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	background-image: url("../images/productContent_bg.jpg");
	background-size: cover;
	text-align: center;
	padding: 5% 10%;
}

.quotation-btn {
	width: max-content;
	height: auto;
	position: relative;
	float: left;
	background: #333;
	color: #f4f4f4;
	padding: 5px 20px;
	box-sizing: border-box;
	left: 50%;
	transform: translate(-50%);
	margin: 3% 0;
    transition: all ease 500ms;
    border-radius:30px;
}
.quotation-btn:hover{
    background:#f00;
    color:#fff;
}
.quotation-btn::before {
	content: '';
	width: 40px;
	height: 40px;
	background-image: url("../images/icon-07.png");
	background-size: cover;
    background-repeat: no-repeat;
	display: inline-block;
    margin: 5px 10px -10px 0;
}

.service-container {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: grid;
	grid-template-columns: 28% 28% 28%;
	background: #f4f4f4;
	justify-content: center;
	gap: 5%;
	padding: 10vh 0;
	align-items: end;
}
.service-con {
	width: 100%;
	height: 500px;
	position: relative;
	border: 1px solid #999;
	padding: 5%;
	box-sizing: border-box;
	/* overflow: hidden; */
	/* display: -webkit-box; */
	/* -webkit-line-clamp: 5; */
	/* -webkit-box-orient: vertical; */
}
.service-con img { width: 100%; height: 250px; object-fit: cover;}
.service-con div  { width: 100%; height: auto; color: #333;}
.service-con div span{width:100%; height:auto; color:#F00; margin:10px 0; display: inline-block; line-height: 25px;}

.service-title{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    text-align:center;
    margin:20vh 0 0 0;
    color:#666;
}

.service-bina-con{
    width:100%;
    height:auto;
    position:relative;
    padding: 5%;
    box-sizing: border-box;
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
}
.service-bina {
	width: 95%;
	height: auto;
	position: relative;
	border: 1px solid #999;
	padding: 5%;
	box-sizing: border-box;
	overflow: hidden;
	margin: 10px 0;
}
.service-label {
	width: 200px;
	height: auto;
	position: absolute;
	background: #f00;
	color: #f4f4f4;
	top: 10px;
	left: -152px;
	display: inline-block;
	padding: 5px 100px;
	text-align: center;
	transform: rotate(-30deg);
	transform-origin: center;
	box-sizing: content-box;
	box-shadow: 0 4px 5px rgba(0,0,0,0.3);
}
.service-bina img { width: 100%; height: 160px; object-fit: cover;}
.service-bina1 { width: 100%; height: auto; color: #f00; }
.service-bina2 {width:100%; height:auto; color:#333; margin: 20px 0 0 0;}
.service-bina2 span{line-height:0;}
.service-bina-btn {
	width: max-content;
	height: auto;
	position: relative;
	background: #333;
	color: #f4f4f4;
	transition: all ease 500ms;
	padding: 2% 5%;
	margin: 0 auto;
	display: block;
}
.service-bina-btn:hover{
    background:#f00;    
}   

.service-content-con{
    width:100%;
    height:auto;
    position:relative;
    display:grid;
    grid-template-columns: 60% 40%;
}
.service-content-left{width:100%;}
.service-content-left img{width:100%;}

.service-content-right{color:#666;}

.service-reno-1{
    width:100%;
    height:80vh;
    position:relative;
    float:left;
}

.service-reno-1 div {
	width: 50%;
	height: auto;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(0%,0%);
	padding: 5%;
	box-sizing: border-box;
    color:#333;
}

.service-reno-1 img {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.service-reno-1-btn {color:#000; transition:all ease 300ms;}
.service-reno-1-btn:hover {color:#f4f4f4; }

.service-reno-2{width:100%; height:auto; position:relative; float: left;padding:5%; box-sizing: border-box; text-align:center;}

.service-reno-3, .service-reno-4 {
	width: 100%;
	height: auto;
	position: relative;
	display: grid;
	grid-template-columns: 30% 30% 30%;
	justify-content: center;
	align-items: center;
	padding: 0 10%;
	box-sizing: border-box;
}

.service-reno-3 div { width: 50%; position: relative; margin: 0 auto; text-align: center; }
.service-reno-3 div img{width:100%;}

.service-reno-4 {grid-template-columns: 30% 30% 30%; padding: 5%; box-sizing: border-box;}
.service-reno-4 div { width: 90%; height: 410px; position: relative; text-align: center; border: 1px solid #333; padding: 5%; margin: 20px auto; }
.service-reno-4 div img {width: 100%;height: 200px;object-fit: cover;}

.service-mep-1{
    width:100%;
    height:auto;
    position:relative;
    display:grid;
    grid-template-columns:50% 50%;
}
.service-mep-1A, .service-mep-1B { width: 100%; height: inherit; padding: 5%; box-sizing: border-box; justify-content: center; align-items: center; display: grid; }
.service-mep-1A img { width: 100%; height: 100%; object-fit: cover; }

.service-mep-2 {
	width: 100%;
	height: auto;
	position: relative;
	text-align: center;
	color: #333;
	padding: 0 0 5% 0;
	box-sizing: border-box;
}

.service-mep-2-con { width: 100%; height: auto; position: relative; display: grid; grid-template-columns: 30% 30% 30%; justify-content: center; align-items: baseline; gap: 20px; padding: 0 5%; }

.service-mep-2-box{width:100%;height:auto; text-align: left;}
.service-mep-2-box img { width: 80%; height: 300px; object-fit: cover; }

.quotation-1 {
	width: 100%;
	height: 50vh;
	position: relative;
	float: left;
}
.quotation-1 img{width:100%; height:100%; position: relative; object-fit: cover; object-position: bottom;}
.quotation-1 div { width: 50%; height: 10vh; position: absolute; right: 0; top: 50%; transform: translate(0 , -50%); color:#f4f4f4;}

.quotation-2{
    width:100%;
    height:auto;
    position:relative;
    display:grid;
    grid-template-columns:60% 40%;
    padding:5%;
    box-sizing:border-box;
    background: #e3e3e3;
}
.quotation-2b{width:100%; height:auto; }
.quotation-2b img{width:140%;}

.project-con{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    display:grid;
    grid-template-columns:25% 25% 25%;
    justify-content: center;
    align-items: center;
}

.thumbnail { width: 100%; height: 100%; display: block; margin: 0 auto; border-radius: 30px; box-shadow: 0 0 10px #aaa; }

.project-con {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: grid;
	grid-template-columns: 25% 25% 25%;
	justify-content: center;
	align-items: center;
	gap: 2%;
    padding: 5%;
    box-sizing: border-box;
}
.contact-con {
    width:100%;
    height:auto;
    position:relative;
    float:left;
    display:grid;
    grid-template-columns:35% 65%;
    padding:5%;
}
.contact-con span {display:block; line-height:24px;}
.contact-con span img { width: 10%; display: block; position: relative; float: left; margin: 0 10px 0 0; }



.title{ width:100%; height:auto; position:relative; float:left; padding: 2% 5%;; box-sizing:border-box; text-align:center;}

#footer {
	width: 100%;
	height: auto;
	position: relative;
	background-color: #000;
	padding: 10vh 0 1vh 0;
	box-sizing: border-box;
	float: left;
}

.footerA {width:30%; height:auto; position:relative; float:left;}
	.footerA div:nth-child(1){ width:100%;}
	.footerA div:nth-child(1) img { width: 55%; margin: 10% auto 0 auto; display: block; }
	.footerA div:nth-child(2) {width: 65%;color: #333;margin: 0 auto;text-align: center; margin-top:1%;}
	.footerA div:nth-child(3) {width: 60%;margin: 30px auto; grid-template-columns: auto auto auto auto; display: grid;}
	.footerA div:nth-child(3) img{width: 70%;}

.footerB {width:30%; height:auto; position:relative; float:left;}
	.footerB-title { width: fit-content; color:#f00;}
    .footerB-content { width: fit-content; color:#fff;}
    .footerB-container {
        width: 100%;
        display: flex;
        gap: 5px;
        justify-content: center;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .footerB-container-imgDiv {
        width: calc(100vw - 91vw);
        height: 110px;
        background-size: cover;
        background-position: center;
        border: 1px solid #ddd;
      transition: opacity 1s ease; /* Adds fade effect */
      opacity: 0; /* Start with image hidden */
    }
    .footerB-container-imgDiv.visible {
      opacity: 1; /* Image becomes visible */
    }    

.footerC {width:40%; height:auto; position:relative; float:left; padding-left: 5vw; box-sizing: border-box;}
	.footerC div:nth-child(1){width: fit-content; color:#f00;}
	.footerC div:nth-child(2){width:100%; color:#f4f4f4; margin-top:10px;}
	.footerC div:nth-child(3){width:60%; color:#f4f4f4; margin-top: 20px;}
	.footerC div:nth-child(3)::before {
		content: "";
		display: block;
		width: 40px;
		height: 60px;
		position: relative;
		float: left;
		background-image: url("../images/icon-01.png");
		background-size: 50%;
		background-repeat: no-repeat;
		filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(97%) contrast(86%);
		padding: 2px 10px;
}
	.footerC div:nth-child(4){width:100%; color:#f4f4f4; margin-top:5px; position: relative; float:left;}
	.footerC div:nth-child(4)::before {
		content: "";
		display: block;
		width: 40px;
		height: 30px;
		position: relative;
		float: left;
		background-image: url("../images/icon-02.png");
		background-size: 50%;
		background-repeat: no-repeat;
		filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(97%) contrast(86%);
		padding: 2px 10px;
}

	.footerC div:nth-child(5){width:100%; color:#f4f4f4; margin-top:5px; position: relative; float:left;}
	.footerC div:nth-child(5)::before {
		content: "";
		display: block;
		width: 40px;
		height: 30px;
		position: relative;
		float: left;
		background-image: url("../images/icon-02.png");
		background-size: 50%;
		background-repeat: no-repeat;
		filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(97%) contrast(86%);
		padding: 2px 10px;
}
	.footerC div:nth-child(6){width:100%; color:#f4f4f4; margin-top:5px; position: relative; float:left;}
	.footerC div:nth-child(6)::before {
		content: "";
		display: block;
		width: 40px;
		height: 30px;
		position: relative;
		float: left;
		background-image: url("../images/icon-03.png");
		background-size: 50%;
		background-repeat: no-repeat;
		filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(97%) contrast(86%);
		padding: 2px 10px; 
}

	.footerC div:nth-child(7){width:100%; color:#f4f4f4; margin-top:5px; position: relative; float:left;}
	.footerC div:nth-child(7)::before {
		content: "";
		display: block;
		width: 40px;
		height: 30px;
		position: relative;
		float: left;
		background-image: url("../images/icon-03.png");
		background-size: 50%;
		background-repeat: no-repeat;
		filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(97%) contrast(86%);
		padding: 2px 10px; 
}















@media screen and (max-width: 800px) { 

html, body {
	margin: 0;
	overflow-x: clip;
	scroll-behavior: smooth;
	background-color: #f4f4f4;
}

a, a:hover, a:visited, a:active {
	color: inherit !important;
	text-decoration: none !important;
}
 
 button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
textarea:focus, input:focus{
    outline: none;
}

.lang{cursor:pointer;}

.c {display: flex;justify-content: center;align-items: center;}

.desktop {visibility:hidden;display: none !important;}
.mobile {display: block !important;}

.s0{font-size: calc(100vw - 86vw)!important;}
.s1{font-size: calc(100vw - 90vw) !important;}
.s2{font-size: calc(100vw - 93vw) !important;}
.s2b{font-size: calc(100vw - 94vw) !important;}
.s2c{font-size: calc(100vw - 95vw) !important;}
.s3{font-size: calc(100vw - 96.4vw) !important;}
.s4{font-size: calc(100vw - 96.5vw) !important;}


.f1{font-family:poppinRegular !important;}
.f2{font-family:poppinBold !important;}	
.f3{font-family:impact !important;}
.f4{font-family:special !important;}

.fade-inB {
    opacity: 0;
    transform: translateY(0);
    transition: opacity 2s ease-out, transform 1s ease-out;
}
.fade-inB.show {
    opacity: 1;
    transform: translateY(0);
}

.hamburger {
	background-color: #333;
	width: 10vw;
	color: #999;
	text-align: center;
	padding: 15px;
	box-sizing: content-box;
	position: fixed;
	z-index: 999;
}

.black {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.7);
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}
	
.overlay a {
	padding: 0;
	text-decoration: none;
	font-size: 36px;
	color: #818181;
	display: block;
	transition: 0.3s;
	margin-top: 20px;
}

.overlay a:hover, .overlay a:focus {
  color: #fff;
}

.overlay .closebtn {
	position: absolute;
	top: 0;
	left: 100%;
	transform: translate(-150%,-5%);
}

.closebtn {color:#fff !important;}

.overlay-content {
	position: relative;
	top: 10%;
	width: 100%;
	height: 100%;
	text-align: left;
	margin-top: 0;
	color: #f4f4f4;
	padding: 10% 13%;
}


.collapsible {
	color: #fff;
	cursor: pointer;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	margin-top: 20px;
}

.collapse-content {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	color:#818181;
}
.collapse-content div{
	width:100%;
	height:auto;
	position:relative;
	float:left;
	color:#fff;
}

.language-boxA {
	width: 50%;
	height: auto;
	position: relative;
	display: grid;
	grid-template-columns: auto auto;
	gap: 0;
	top: unset;
	right: unset;
	transform: unset;
	margin-top: 10%;
}
.language-boxA img {
	height: 75%;
	width: 100%;
	object-fit: contain;
}

.language-boxB {
	width: 5%;
	height: auto;
	position: absolute;
	display: grid;
	grid-template-columns: auto auto;
	gap: 10%;
	top: 50%;
	right: 0;
	transform: translate(-50%,-50%);
}
.language-boxB img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.header {
	width: 100%;
	height: 15vh;
	position: absolute;
	top: 0;
	z-index: 900;
	/* background: #000; */
	/* background-image: url("../images/header-bg.jpg"); */
	/* background-size: cover; */
	/* background-repeat: no-repeat; */
	background: #000;
	background: -webkit-linear-gradient(to bottom, #393939, #000);
	background: linear-gradient(to bottom, #393939, #000);
}
.header-container{
    width:80%;
    height:100%;
    position:relative;
    margin:0 auto;
    display:grid;
    grid-template-columns: 12.5% 12.5% 12.5% 25% 12.5% 12.5% 12.5%;
}
.header-btn {
    height: fit-content;
	color: #f4f4f4;
	transition: all ease 500ms;
	cursor: pointer;
	text-align: center;
	line-height: 15vh;
}
.header-btn:hover{
	color:#FF0004;
}

.header-logo {
	width: 90%;
	height: 20vh;
	padding: 5%;
	box-sizing: border-box;
	/* border-bottom-left-radius: 30px; */
	/* border-bottom-right-radius: 30px; */
	position: relative;
	margin: 0 auto;
	box-shadow: 0 0 20px #000;
	background: #ff0007;
	background: -webkit-linear-gradient(to bottom, #ff0007, #bf0b05);
	background: linear-gradient(to bottom, #ff0007, #bf0b05);
}
.header-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#navbar {
	background: rgba(255, 0, 0, .9);
	position: fixed;
	top: -500px;
	width: 100%;
	height: 10vh;
	display: block;
	transition: top 0.3s;
	z-index: 1000;
	box-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.navbar-logo{
    width:30%;
    height:100%;
    position:relative;
    float:left;
}
.navbar-logo img {
	height: 100%;
	padding: 2% 5%;
	box-sizing: border-box;
	width: 100%;
	object-fit: contain;
}

.nav_btn-box {
	width: 70%;
	height: 100%;
	position: relative;
	float: left;
	display: flex;
	justify-content: end;
}
.nav-btn {
	width: fit-content;
	color: #000;
	transition: all ease 500ms;
	cursor: pointer;
	text-align: center;
	line-height: 10vh;
	position: relative;
	margin: 0 2%;
}
.nav-btn:hover{
	color:#f4f4f4;
}

.dropbtn {
    width: 100%;
	background-color: transparent;
	color: #f4f4f4;
	border: none;
}
.dropdown {
	position: relative;
	display: inline-block;
	line-height: 15vh;
	margin: 0 2%;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f4f4f4;
	width: max-content;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	transform: translateY(-10px);
	z-index: 1;
}
.dropdown-content a {
	color: #333 !important;
	padding: 0px 16px;
    box-sizing: border-box;
	text-decoration: none;
	display: block;
	text-align: left;
	width: 100%;
	line-height: 50px;
}
.dropdown:hover .dropdown-content {display: block; transition: all .5s ease;}
.dropdown-content a:hover {background-color: #f00; color:#f4f4f4 !important;; transition: all 500ms ease-out;}
.dropdown:hover .dropbtn {background-color: transparent; }

.header2 {
	width: 100%;
	height: 15vh;
	position: relative;
	float: left;
	display: grid;
	grid-template-columns: 20% 80%;
	box-shadow: 0 0 20px #000;
	z-index: 999;
	/*background-image: url("../images/header-bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;*/
    background:#000;
	background: -webkit-linear-gradient(to bottom, #393939, #000);
	background: linear-gradient(to bottom, #393939, #000);    
}

.logo-mobile {
	width: 30%;
	height: auto;
	position: absolute;
	z-index: 999;
	left: 50%;
	top: 0;
	transform: translate(-50%,0%);
}
.logo-mobile img{width:100%;}
.header2-logo { width: 100%; height: inherit; position: relative; padding: 1%; 	background: #ff0007; background: -webkit-linear-gradient(to bottom, #ff0007, #bf0b05); background: linear-gradient(to bottom, #ff0007, #bf0b05); box-sizing: border-box; cursor:pointer;}
.header2-logo img {width:100%; height:100%; object-fit: contain;}
.header2-btn-con {
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	justify-content: end;
}
.header2-btn {
	width: max-content;
	height: auto;
	position: relative;      
	float: left;  
	color: #f4f4f4;
	text-align: center;
	cursor: pointer;
	line-height: 15vh;
	margin: 0 2%;    
	transition: all ease 500ms;
}
.header2-btn:hover{color:#f00;}
.header2-language { width: 10%; height: 100%; display: grid; grid-template-columns: 50% 50%; align-items: center; justify-items: center;}
.header2-language img { width:50%; cursor:pointer; }

.container_flickity {
	width: 100%;
	height: 100vh;
	position: relative;
	margin: 0 0 0 0;
	z-index: 0;
}
.gallery-cell {
	width: 100%;
	height: 100%;
	background: #000;
	display: block;
	object-fit: contain;
}
.gallery-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0 auto;
	position: relative;
	display: block;
	object-position: center;
} 

.slider {
	width: 100%;
	height: auto;
	position: absolute;
	text-align: center;
	color: #fff;
	top: 70%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 999;
}

.slider-text {
    position: absolute;
    width: 100%;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 1s, opacity 1s;
    text-shadow: 0 0px 10px rgba(0,0,0,0.4);
}

.slider-text.active {
    transform: translateX(0);
    opacity: 1;
}

.slider-text.exit {
    transform: translateX(-100%);
    opacity: 0;
}

.quote {
	width: 100%;
	height: auto;
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-45%,-50%);
	z-index: 999;
	color: #fff;
	line-height: 50px;
}

.con{
    width:100%;
    height:auto;
}

.btn-con{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    display:flex;
    justify-content: center;
}

.btn1 {
	width: max-content;
	height: auto;
	position: relative;
	padding: 5px 15px;
	margin-top: 5% 0;
	box-sizing: border-box;
	border: 1px solid #f4f4f4;
	color: #f4f4f4;
	transition: all ease 500ms;
	cursor: pointer;
	margin: 10px auto;
}
.btn1:hover{
    background:#f00;
    border:1px solid #f00;
}

.btn2 {
	width: max-content;
	height: auto;
	position: relative;
	padding: 10px 30px;
	box-sizing: border-box;
	border: 1px solid #666;
	color: #666;
	transition: all ease 500ms;
	cursor: pointer;
	margin: 0 auto !important;
}
.btn2:hover{
    background:#f00;
    border:1px solid #f00;
    color:#fff;
}

.btn3 {
	width: max-content;
	height: auto;
	position: relative;
	padding: 10px 30px;
	box-sizing: border-box;
	border: 1px solid #f4f4f4;
	color: #f4f4f4;
	transition: all ease 500ms;
	cursor: pointer;
}
.btn3:hover{
    background:#f00;
    border:1px solid #f00;
    color:#fff;
}

/*.con-index-2 {
	width: 100%;
	height: auto;
	position: relative;
	background-image: url("../images/index-2.jpg");
	background-size: cover;
	clip-path: polygon(72% 0, 100% 15%, 100% 100%, 0 100%, 0 16%);
	z-index: 1;
	display: grid;
	grid-template-columns: 40% 60%;
	padding: 2% 0;
}*/
.con-index-2 {
	width: 100%;
	height: auto;
	position: relative;
	background-image: url("../images/index-2.jpg");
	background-size: cover;
	background-position: left;
	z-index: 1;
	display: grid;
	grid-template-columns: unset;
	padding: 2% 0;
	clip-path: unset;
	/* clip-path: ellipse(60% 50% at 25% 50%); */
	justify-content: unset;
	align-items: unset;
}
.index-2-img {
	width: 100%;
	height: 30vh;
	position: relative;
	padding: 15vh 0 0 0;
}
/*.index-2-img img {
	width: 50%;
	height: 100%;
	object-fit: contain;
	object-position: 0 80%;    
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-20%,-50%);
}*/
.index-2-img img {
	width: 50%;
	height: 100%;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	filter: drop-shadow(0 10px 8px #000);
}

.index-2-text {
	color: #fff;
	padding: 5%;
	/* padding: 15vh 20% 0 0; */
}

.con-index-3{
    width:100%;
    height:auto;
    position:relative;
    padding: 5% 2% 5% 2%;
    display: inline-block;
    /*background: rgb(0,0,0);*/
    /*background: rgb(238,238,238);
    background: -moz-linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee",endColorstr="#ffffff",GradientType=1);*/
}

.index-3-box {
	width: 90%;
	height: auto;
	position: relative;
	float: left;
	text-align: center;
}
/*.index-3-box img {
	width: 40%;
	height: auto;
	border-radius: 50%;
	margin: 0 auto;
	display: block;
	padding: 2%;
	border: 5px solid #000;
}*/
.index-3-box img {
	width: 40%;
	height: auto;
	border-radius: 50%;
	margin: 0 auto;
	display: block;
	padding: 2%;
	border: 5px solid #f00;
	filter: invert(100%) sepia(62%) saturate(1%) hue-rotate(304deg) brightness(113%) contrast(91%);
}
.index-3-box div{
    width:100%;
    height:auto;
    padding:0 5%;
    margin: 0 0 5% 0;
    color: #999;
}
.index-3-box-title {
	width: 100%;
	text-align: center;
	display: block;
	z-index: 100;
	position: relative;
	margin: 0 0 3% 0;
	color: #f00;
}

.con-index-4 {
	width: 100%;
	height: auto;
	position: relative;
	background: #333;
	padding: 5%;
	background-image: url("../images/index-4.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position-y: center;
	background-attachment: fixed;
	float: left;
}
.con-index-4::before {
	content: ' ';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.8);
}

.index-feature {
	width: 100%;
	height: 25vh;
	position: relative;
	float: left;
	padding: 3%;
}
.index-feature img {
	width: 100%;
	height: 100%;
	object-fit: cover;
    transition:all ease 500ms;    
}
.index-feature img:hover{
    box-shadow: 0 0 30px #000;
    filter: brightness(150%);
}
.index-feature div{
    color:#fff;
    text-align: center;
}
.index-feature div{
    color:#fff;
    text-align: center;
}

.con-index-5 {
	width: 100%;
	height: auto;
	position: relative;
	background-image: url("../images/index-5a.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	padding: 3% 5%;
	display: unset;
	justify-content: unset;
	align-items: unset;
	float: left;
}
.con-index-5-content{
    width:100%;
    height:auto;
    position:relative;
    float:left;
}
.con-index-5-content span {line-height: 40px;text-align: center;display: block;line-height: 30px;}

.con-index-5-content img{
    width:95%;
    height:auto;
    object-fit: cover;
}
.con-index-5-btn {
	margin: 5% 0 0% 0;
}

.profile-con-1 {
	width: 100%;
	height: 30vh;
	position: relative;
	float: left;
}
.profile-con-1 img{width:100%; height:100%; object-fit:cover; object-position:top;}

.profile-con-2{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    background:#f4f4f4;
}
.profile-con-2 div:nth-child(1) {width:100%; height:15vh; position:relative; float:left; color:#333; text-align:center;}
.profile-con-2 div:nth-child(2) {width:100%; height:auto; position:relative; float:left;}
.profile-con-2 div:nth-child(2) img { width: 100%; height: 300px; padding: 5%; box-sizing: border-box; object-fit: cover; }
.profile-con-2 div:nth-child(3) { width: 100%; height: auto; position: relative; color: #333; padding: 6% 5% 2% 5%; box-sizing: border-box; }

.vm-con { width: 90%; height: auto; position: relative; float: left; display: grid; grid-template-columns: unset; left: 50%; transform: translate(-50%); padding: 8% 0 5% 0; background: #f4f4f4; margin-top: 10vh; box-sizing: border-box; }
.vm-box { width: 100%; height: auto; position: relative; display: block; margin: 12% auto; border: 1px solid #666; border-radius: 30px; }
.vm-box img { width: 35%; display: block; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); background: #f4f4f4; padding: 15px; box-sizing: content-box; }
.vm-box span { width: 100%; text-align: center; color: #f00; display: block; margin: 7% 0 2% 0; position: relative; float: left; }
.vm-box div { width: 100%; position: relative; padding: 5%; margin: 5% 0 0 0; box-sizing: border-box;}

.crew-con {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: block;
	grid-template-columns: unset;
	gap: 2%;
	margin: 5% 0;
	padding: 0 5%;
	box-sizing: border-box;
}
.crew{width:100%; height:auto; position:relative; text-align:center; padding: 10% 0;}
.crew img {width:100%; height:auto; margin: 0 auto;}


.profile-con-3{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    background:#f4f4f4;
    padding: 0px 0 3% 0;
    box-sizing: border-box;
}
.profile-con-3 div:nth-child(1) {width:100%; height:15vh; position:relative; float:left; color:#333; text-align:center;}
.profile-con-3 div:nth-child(2) { width: 90%; height: auto; position: relative; float: left; color: #333; left: 50%; transform: translate(-50%); }

.profile-content-box {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	background: #f4f4f4;
	padding: 0 5% 5% 5%;
	box-sizing: border-box;
}
.profile-content-text{ width:100%; heighr:auto; position:relative; float:left; color:#333;}

.kepakaran-con {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	padding: 0 5%;
	display: block;
	grid-template-columns: unset;
	margin: 5% 0;
}
.kepakaran-con-content {
	width: 70%;
	height: auto;
	position: relative;
	text-align: center;
	border: 2px solid #cecece;
	border-radius: 20px;
	padding: 5%;
	margin: 20px auto;
}
.kepakaran-con-content img {width:60%; display:block; margin:0 auto;}

.profile-con-content {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: block;
	grid-template-columns: unset;
	background: #f4f4f4;
	padding: 0 5% 5% 5%;
	box-sizing: border-box;
}

.mara {
	width: 40%;
	height: auto;
	position: relative;
	display: block;
	margin: 30px auto;
}
.mara img{width:100%;}

.profile6b {
	width: 100%;
	height: auto;
	position: relative;
	display: block;
	margin: 0 auto;
}
.profile6b img{width:100%; height:100%; object-fit:cover; padding:2%; box-sizing: border-box;}


.inner-quotation{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    background-image:url("../images/productContent_bg.jpg");
    background-size: cover;
    text-align:center;
    padding: 10%;
}

.quotation-btn {
	width: max-content;
	height: auto;
	position: relative;
	float: left;
	background: #333;
	color: #f4f4f4;
	padding: 5px 20px;
	box-sizing: border-box;
	left: 50%;
	transform: translate(-50%);
	margin: 3% 0;
    transition: all ease 500ms;
    border-radius:30px;
}
.quotation-btn:hover{
    background:#f00;
    color:#fff;
}
.quotation-btn::before {
	content: '';
	width: 40px;
	height: 40px;
	background-image: url("../images/icon-07.png");
	background-size: cover;
    background-repeat: no-repeat;
	display: inline-block;
    margin: 5px 10px -10px 0;
}

.service-container {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: block;
	grid-template-columns: unset;
	background: #f4f4f4;
	justify-content: center;
	gap: 5%;
	align-items: baseline;
}
.service-con {
	width: 90%;
	height: auto;
	position: relative;
	border: 1px solid #999;
	padding: 5%;
	box-sizing: border-box;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	margin: 30px auto;
}
.service-con img { width: 100%; height: 250px; object-fit: cover;}
.service-con div  { width: 100%; height: auto; color: #333;}
.service-con div span{width:100%; height:auto; color:#F00; margin:10px 0; display: inline-block; line-height: 25px;}

.service-title {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	text-align: center;
	margin: 15vh 0 0 0;
	color: #666;
}

.service-bina-con {
	width: 100%;
	height: auto;
	position: relative;
	padding: 5%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 50% 50%;
}
.service-bina {
	width: 95%;
	height: auto;
	position: relative;
	border: 1px solid #999;
	padding: 5%;
	box-sizing: border-box;
	overflow: hidden;
	margin: 10px 0;
}
.service-label {
	width: 200px;
	height: auto;
	position: absolute;
	background: #f00;
	color: #f4f4f4;
	top: 10px;
	left: -152px;
	display: inline-block;
	padding: 5px 100px;
	text-align: center;
	transform: rotate(-30deg);
	transform-origin: center;
	box-sizing: content-box;
	box-shadow: 0 4px 5px rgba(0,0,0,0.3);
}
.service-bina img { width: 100%; height: 100px; object-fit: cover;}
.service-bina1 { width: 100%; height: auto; color: #f00; }
.service-bina2 {width:100%; height:auto; color:#333; margin: 20px 0 0 0;}
.service-bina2 span{line-height:0;}
.service-bina-btn {
	width: max-content;
	height: auto;
	position: relative;
	background: #333;
	color: #f4f4f4;
	transition: all ease 500ms;
	padding: 2% 5%;
	margin: 30px auto 0 auto;
	display: block;
}
.service-bina-btn:hover{
    background:#f00;    
}   

.service-content-con {
	width: 100%;
	height: auto;
	position: relative;
	display: block;
	grid-template-columns: unset;
}
.service-content-left{width:100%;}
.service-content-left img{width:100%;}

.service-content-right{color:#666; padding: 5%;}

.service-reno-1 {
	width: 100%;
	height: 80vh;
	position: relative;
	float: left;
}

.service-reno-1 div {
	width: 75%;
	height: auto;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-30%,0%);
	padding: 5%;
	box-sizing: border-box;
	color: #333;
}

.service-reno-1 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-reno-1-btn {color:#000; transition:all ease 300ms;}
.service-reno-1-btn:hover {color:#f4f4f4; }

.service-reno-2{width:100%; height:auto; position:relative; float: left;padding:5%; box-sizing: border-box; text-align:center;}

.service-reno-3, .service-reno-4 {
	width: 100%;
	height: auto;
	position: relative;
	display: grid;
	grid-template-columns: 33% 33% 33%;
	justify-content: center;
	align-items: unset;
	padding: 0 5%;
	box-sizing: border-box;
}

.service-reno-3 div { width: 100%; position: relative; margin: 15px auto; text-align: center; }
.service-reno-3 div img { width: 70%; height: auto; margin: 0 auto; display: block; }

.service-reno-4 { grid-template-columns: unset; padding: 5%; box-sizing: border-box; }
.service-reno-4 div { width: 90%; height: auto; position: relative; text-align: center; border: 1px solid #333; padding: 5%; margin: 20px auto; }
.service-reno-4 div img {width: 100%;height: 200px;object-fit: cover;}

.service-mep-1 {
	width: 100%;
	height: 60vh;
	position: relative;
	display: block;
	grid-template-columns: unset;
}
.service-mep-1A, .service-mep-1B { width: 100%; height: inherit; padding: 0; box-sizing: border-box; justify-content: center; align-items: center; display: grid; }
.service-mep-1A img { width: 100%; height: 100%; object-fit: cover; }
.service-mep-1B {padding:5% !important; float:left;}


.service-mep-2{
    width:100%;
    height:auto;
    position:relative;
    text-align: center;
    color:#333;
}

.service-mep-2-con { width: 100%; height: auto; position: relative; display: block; grid-template-columns: unset; justify-content: center; align-items: baseline; gap: 20px; padding: 0 5%; }

.service-mep-2-box{width:100%;height:auto; text-align: left;}
.service-mep-2-box img { width: 100%; height: 100%; object-fit: cover; }

.quotation-1 {
	width: 100%;
	height: 50vh;
	position: relative;
	float: left;
}
.quotation-1 img{width:100%; height:100%; position: relative; object-fit: cover; object-position: bottom;}
.quotation-1 div { width: 50%; height: auto; position: absolute; right: 0; top: 60%; transform: translate(-10px , -50%); color: #f4f4f4; line-height: 26px; }

.quotation-2 {
	width: 100%;
	height: auto;
	position: relative;
	display: grid;
	grid-template-columns: unset;
	padding: 5%;
	box-sizing: border-box;
	background: #e3e3e3;
}
.quotation-2b{width:100%; height:auto; }
.quotation-2b img{width:140%;}

.project-con{
    width:100%;
    height:auto;
    position:relative;
    float:left;
    display:grid;
    grid-template-columns:25% 25% 25%;
    justify-content: center;
    align-items: center;
}

.thumbnail { width: 100%; height: 100%; display: block; margin: 0 auto; border-radius: 20px; box-shadow: unset; }

.project-con {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: grid;
	grid-template-columns: 50% 50%;
	justify-content: center;
	align-items: center;
	gap: 4%;
	padding: 15% 5%;
	box-sizing: border-box;
}
.contact-con {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: block;
	grid-template-columns: unset;
	padding: 5%;
}
.contact-con span {display:block; line-height:24px;}
.contact-con span img { width: 15%; display: block; position: relative; float: left; margin: 0 10px 35px 0; }



.title{ width:100%; height:auto; position:relative; float:left; padding: 2% 5%;; box-sizing:border-box; text-align:center; line-height: 30px;}

#footer {
	width: 100%;
	height: auto;
	position: relative;
	background-color: #000;
	padding: 10vh 0 1vh 0;
	box-sizing: border-box;
	float: left;
}

.footerA {width:100%; height:auto; position:relative; float:left;}
	.footerA div:nth-child(1){ width:100%;}
	.footerA div:nth-child(1) img { width: 55%; margin: 10% auto 0 auto; display: block; }
	.footerA div:nth-child(2) {width: 65%;color: #333;margin: 0 auto;text-align: center; margin-top:1%;}
	.footerA div:nth-child(3) {width: 60%;margin: 30px auto; grid-template-columns: auto auto auto auto; display: grid;}
	.footerA div:nth-child(3) img{width: 70%;}

.footerB {width:100%; height:auto; position:relative; float:left; padding: 0 5%;}
	.footerB-title { width: fit-content; color:#f00;}
    .footerB-content { width: fit-content; color:#fff;}
    .footerB-container {
        width: 100%;
        display: flex;
        gap: 5px;
        justify-content: center;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .footerB-container-imgDiv {
        width: calc(100vw - 60vw);
        height: 110px;
        background-size: cover;
        background-position: center;
        border: 1px solid #ddd;
      transition: opacity 1s ease; /* Adds fade effect */
      opacity: 0; /* Start with image hidden */
    }
    .footerB-container-imgDiv.visible {
      opacity: 1; /* Image becomes visible */
    }    

.footerC {width:100%; height:auto; position:relative; float:left; padding: 5%; box-sizing: border-box;}
	.footerC div:nth-child(1){width: fit-content; color:#f00;}
	.footerC div:nth-child(2){width:100%; color:#f4f4f4; margin-top:10px;}
	.footerC div:nth-child(3){width:100%; color:#f4f4f4; margin-top: 20px;}
	.footerC div:nth-child(3)::before {
		content: "";
		display: block;
		width: 40px;
		height: 60px;
		position: relative;
		float: left;
		background-image: url("../images/icon-01.png");
		background-size: 50%;
		background-repeat: no-repeat;
		filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(97%) contrast(86%);
		padding: 2px 10px;
}
	.footerC div:nth-child(4){width:100%; color:#f4f4f4; margin-top:5px; position: relative; float:left;}
	.footerC div:nth-child(4)::before {
		content: "";
		display: block;
		width: 40px;
		height: 30px;
		position: relative;
		float: left;
		background-image: url("../images/icon-02.png");
		background-size: 50%;
		background-repeat: no-repeat;
		filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(97%) contrast(86%);
		padding: 2px 10px;
}

	.footerC div:nth-child(5){width:100%; color:#f4f4f4; margin-top:5px; position: relative; float:left;}
	.footerC div:nth-child(5)::before {
		content: "";
		display: block;
		width: 40px;
		height: 30px;
		position: relative;
		float: left;
		background-image: url("../images/icon-02.png");
		background-size: 50%;
		background-repeat: no-repeat;
		filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(97%) contrast(86%);
		padding: 2px 10px;
}
	.footerC div:nth-child(6){width:100%; color:#f4f4f4; margin-top:5px; position: relative; float:left;}
	.footerC div:nth-child(6)::before {
		content: "";
		display: block;
		width: 40px;
		height: 30px;
		position: relative;
		float: left;
		background-image: url("../images/icon-03.png");
		background-size: 50%;
		background-repeat: no-repeat;
		filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(97%) contrast(86%);
		padding: 2px 10px; 
}

	.footerC div:nth-child(7){width:100%; color:#f4f4f4; margin-top:5px; position: relative; float:left;}
	.footerC div:nth-child(7)::before {
		content: "";
		display: block;
		width: 40px;
		height: 30px;
		position: relative;
		float: left;
		background-image: url("../images/icon-03.png");
		background-size: 50%;
		background-repeat: no-repeat;
		filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(97%) contrast(86%);
		padding: 2px 10px; 
}
}